/* ============================================================
   BY-HOSTER - Professional Hosting Theme
   ============================================================ */

/* --- CSS Variables --- */
:root {
    --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', 'Inter Fallback', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --primary: #0ea5e9;
    --primary-dark: #0284c7;
    --primary-light: #38bdf8;
    --primary-glow: rgba(14, 165, 233, 0.25);
    --primary-text: #0369a1;

    /* Trio identitaire : bleu + teal + ambre (remplace le combo bleu/violet) */
    --accent-teal: #14b8a6;
    --accent-amber: #fbbf24;
    --accent-amber-text: #b45309;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    /* Aliases consommes par .form-control.error/.valid, .bi-card__change */
    --danger: #ef4444;
    --success: #059669;

    /* Echelle modulaire 1.25 (Major Third) */
    --fs-xs: 0.8rem;
    --fs-sm: 0.9rem;
    --fs-base: 1rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.563rem;
    --fs-xl: 1.953rem;
    --fs-2xl: 2.441rem;
    --fs-3xl: 3.052rem;

    /* Echelle d'espacement 4/8 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Ombres a 2 couches (contact serre + diffusion) = profondeur reelle */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.06);
    --shadow: 0 2px 4px rgba(0,0,0,0.10), 0 6px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 1px 2px rgba(0,0,0,0.08), 0 8px 28px rgba(0,0,0,0.18);
    --shadow-xl: 0 4px 8px rgba(0,0,0,0.12), 0 16px 48px rgba(0,0,0,0.24);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

    --container: 1200px;
    --container-narrow: 720px;
    --navbar-h: 96px;
    /* Rythme vertical des heros, partage par la home et toutes les pages
       category-hero (devis, dedies, solutions, landings SEO, admin/login).
       Le bas reste court : la section suivante apporte deja --space-9 (96px),
       et c'est l'addition des deux qui creusait le vide sous les CTA. */
    --hero-top: calc(var(--navbar-h) + 52px);
    --hero-bottom: 40px;
}

/* Dark Theme (default) */
[data-theme="dark"] {
    --bg-body: #060a13;
    --bg-surface: #0c1222;
    --bg-card: #111827;
    --bg-card-hover: #1a2337;
    --bg-elevated: #1e293b;
    --bg-input: #0f172a;
    --bg-overlay: rgba(0,0,0,0.6);
    
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.14);
    --border-accent: rgba(14,165,233,0.3);
    --primary-text: #7dd3fc;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #7c8aa3;
    --text-inverse: #0f172a;

    --glass-bg: rgba(17, 24, 39, 0.7);
    --glass-border: rgba(255,255,255,0.08);

    --glow-1: radial-gradient(600px circle at 50% 50%, rgba(14,165,233,0.08), transparent 60%);
    --glow-2: radial-gradient(400px circle at 80% 30%, rgba(20,184,166,0.06), transparent 60%);
}

/* Light Theme */
[data-theme="light"] {
    --bg-body: #f1f5f9;
    --bg-surface: #e8ecf1;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-elevated: #e2e8f0;
    --bg-input: #f1f5f9;
    --bg-overlay: rgba(0,0,0,0.3);
    
    --border: rgba(0,0,0,0.06);
    --border-hover: rgba(0,0,0,0.12);
    --border-accent: rgba(14,165,233,0.3);
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #f1f5f9;
    --primary-text: #0369a1;

    --glass-bg: rgba(255,255,255,0.85);
    --glass-border: rgba(0,0,0,0.08);

    --glow-1: radial-gradient(600px circle at 50% 50%, rgba(14,165,233,0.05), transparent 60%);
    --glow-2: radial-gradient(400px circle at 80% 30%, rgba(20,184,166,0.03), transparent 60%);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 1px 2px rgba(0,0,0,0.05), 0 6px 16px rgba(0,0,0,0.07);
    --shadow-lg: 0 1px 3px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.10);
}

/* Light theme refinements */
[data-theme="light"] .navbar { background: rgba(255,255,255,0.6); }
/* Les ombres de carte en theme clair passaient par six surcharges en dur.
   Elles sont desormais portees par les jetons --shadow-* redefinis plus haut
   pour ce theme — et surtout elles NUISAIENT : [data-theme] + classe l'emporte
   en specificite sur la classe seule, donc en theme clair elles effacaient le
   lisere d'accent de l'offre populaire et l'ombre de survol des cartes. */
[data-theme="light"] .faq-item { border-color: rgba(0,0,0,0.08); }
/* Le footer reste une surface SOMBRE au milieu d'une page claire. Il doit
   donc porter ses propres jetons : sans cela, chaque `var(--border)` et
   chaque `var(--bg-elevated)` qu'il contient reste cale sur la page claire.
   Deux consequences visibles : le `border-top` du footer dessinait un filet
   pale sur toute la largeur, et les boutons sociaux ressortaient en pastilles
   claires sur le fond sombre. Redefinir les jetons ici corrige d'un coup le
   filet, les separateurs et tout ce qu'on ajoutera plus tard dans le footer. */
[data-theme="light"] .footer {
    background: #1e293b; color: #e2e8f0;
    --border: rgba(255,255,255,0.10);
    --bg-elevated: rgba(255,255,255,0.06);
    --bg-surface: #1e293b;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
}
[data-theme="light"] .footer .footer__col a { color: #94a3b8; }
[data-theme="light"] .footer .footer__col a:hover { color: #ffffff; }
[data-theme="light"] .footer .footer__col h4 { color: #f1f5f9; }
[data-theme="light"] .footer .footer__social a { color: #94a3b8; }
[data-theme="light"] .footer .footer__social a:hover { color: #0ea5e9; }
[data-theme="light"] .footer .footer__bottom { border-color: rgba(255,255,255,0.08); color: #64748b; }
[data-theme="light"] .footer .footer__brand p { color: #94a3b8; }
/* Light Hero */
[data-theme="light"] .hero { background: linear-gradient(-180deg, #f0f4ff 0%, #e0e8f5 50%, #dce3f0 100%); }
[data-theme="light"] .hero__grid { background-image: linear-gradient(rgba(14,165,233,0.06) 1px, transparent 1px), linear-gradient(-90deg, rgba(14,165,233,0.06) 1px, transparent 1px); }
[data-theme="light"] .hero__glow--1 { background: radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 70%); }
[data-theme="light"] .hero__glow--2 { background: radial-gradient(circle, rgba(20,184,166,0.10) 0%, transparent 70%); }
[data-theme="light"] .hero__title { color: #0f172a; }
[data-theme="light"] .hero__typed { background: linear-gradient(-135deg, #0284c7 0%, #0f766e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="light"] .hero__subtitle { color: #475569; }
[data-theme="light"] .hero__badge { background: rgba(14,165,233,0.12); color: #0369a1; border-color: rgba(14,165,233,0.3); }
[data-theme="light"] .hero__cursor { color: #0ea5e9; }
[data-theme="light"] .btn--outline { color: #334155; border-color: #cbd5e1; }
[data-theme="light"] .btn--outline:hover { background: rgba(14,165,233,0.08); border-color: #0ea5e9; color: #0ea5e9; }
/* Light category hero */
[data-theme="light"] .category-hero { background: linear-gradient(-180deg, #f0f4ff 0%, #e0e8f5 100%); }
[data-theme="light"] .category-hero__title { color: #0f172a; }
[data-theme="light"] .category-hero__desc { color: #475569; }
[data-theme="light"] .stats-bar { background: #0f172a; }
[data-theme="light"] .stats-bar__value,
[data-theme="light"] .stats-bar__label { color: #f1f5f9; }

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--navbar-h); }
body {
    font-family: var(--font-body);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--primary-text); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }
code { font-family: var(--font-mono); font-size: 0.875em; background: var(--bg-elevated); padding: 2px 6px; border-radius: var(--radius-sm); }

/* --- Layout --- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; }

.section { padding: var(--space-9) 0; position: relative; }
.section__header { text-align: center; margin-bottom: var(--space-7); }
.section__title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, var(--fs-2xl)); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--space-3); }
.section__subtitle { color: var(--text-secondary); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }
.section__cta { text-align: center; margin-top: var(--space-7); }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: var(--radius);
    font-weight: 600; font-size: 0.9rem;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
    border: 2px solid transparent;
    white-space: nowrap; line-height: 1.4;
}
.btn--primary {
    background: linear-gradient(-135deg, var(--primary), var(--primary-dark));
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 16px var(--primary-glow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--primary-glow); color: #fff; }
.btn--primary:active { transform: translateY(0); box-shadow: 0 2px 8px var(--primary-glow); }
.btn--outline {
    border-color: var(--border-hover); color: var(--text-primary); background: transparent;
}
.btn--outline:hover { border-color: var(--primary); color: var(--primary-text); background: rgba(14,165,233,0.05); }
.btn--outline:active { transform: translateY(0); }
.btn--lg { padding: 14px 32px; font-size: 1rem; border-radius: var(--radius); }
.btn--sm { padding: 8px 16px; font-size: 0.8rem; }
.btn--block { width: 100%; justify-content: center; }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- NAVBAR --- */
.navbar {
    position: fixed; top: 0; right: 0; left: 0; z-index: 1000;
    height: var(--navbar-h);
    background: transparent;
    transition: all var(--transition-slow);
}
.navbar.scrolled {
    background: rgba(6, 10, 19, 0.85);
    backdrop-filter: blur(32px) saturate(1.8);
    -webkit-backdrop-filter: blur(32px) saturate(1.8);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
[data-theme="light"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 30px rgba(0,0,0,0.06);
}
.navbar__inner {
    display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 12px; min-width: 0;
}
/* Largeur de la barre : compromis assume.
   A --container (1200px) le logo s'aligne au pixel sur le contenu de la page,
   mais il ne reste alors que 615px pour six entrees de menu qui en reclament
   642 en francais et 703 en espagnol : les liens passaient par-dessus les
   actions. A 1400px la barre respire mais le logo tombe 120px a gauche du
   contenu, decalage visible en permanence — c'etait l'etat precedent.
   1280px place le logo 40px a gauche du contenu (a peine perceptible) et
   laisse 725px a la navigation, soit >100px de marge en francais et >45px
   dans la langue la plus longue. */
.navbar > .container.navbar__inner { max-width: 1280px; }
/* Le panier, ajoute le 16/08/2026, prend 44 px au bloc d'actions — donc au
   menu, qui n'en avait plus assez : « Contact » passait sous la loupe, et
   forcer la bascule en burger faisait disparaitre le menu sur des ecrans
   larges. On rend ces pixels a la barre plutot qu'au burger.
   Uniquement au-dela de 1400 px de fenetre : en dessous, la barre reste calee
   sur le contenu de la page. Le logo se decale alors de 24 px, la moitie de
   l'epaisseur d'un doigt sur un ecran de cette taille. */
@media (min-width: 1400px) {
    .navbar > .container.navbar__inner { max-width: 1328px; }
}
.navbar__logo { flex-shrink: 0; min-width: 0; }
/* 42px et non 48 : dans une barre de 96px, le logo occupait la moitie de la
   hauteur et 176px de large. Il reste dominant a 42px et rend 22px a la nav. */
.navbar__logo img { height: 42px; width: auto; min-width: 110px; max-width: 180px; object-fit: contain; }
.navbar__actions { flex-shrink: 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.navbar__nav {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0; justify-content: flex-start;
}
/* Les entrees ne se compriment jamais. Par defaut un element flex a
   flex-shrink:1 : les liens etaient reduits sous leur largeur naturelle et
   leur texte, en white-space:nowrap, debordait par-dessus les actions. C'est
   le chevauchement visible sur la barre (« Serveurs de je… » sous le
   selecteur de langue). Mieux vaut basculer en burger que superposer. */
.navbar__nav > * { flex: 0 0 auto; }
.navbar__link {
    color: var(--text-secondary); padding: 6px 8px; border-radius: var(--radius);
    font-size: 0.82rem; font-weight: 500; white-space: nowrap;
    transition: all var(--transition); display: flex; align-items: center; gap: 5px;
}
.navbar__link:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }

/* Navigation de premier niveau en texte seul.
   Les pictogrammes coutaient ~19 px par entree (icone + gouttiere), soit
   ~114 px sur six entrees — exactement ce qui manquait. Largeur naturelle de
   la nav mesuree contre la place disponible (conteneur 1200 px, logo et
   actions deduits) :
       avec icones :  fr 711 / 717   en 705 / 717   de 695 / 717   es 772 / 717
   L'espagnol depassait deja de 55 px, et les 6 px de marge du francais
   suffisaient a faire chevaucher des que le logo rendait un peu plus large.
   Le chevron des menus deroulants reste : lui porte une information. */
.navbar__nav .navbar__link > i:not(.fa-chevron-down) { display: none; }

/* Bascule vers le burger decidee par la MESURE, pas par un seuil en pixels
   (cf. NavFit dans assets/js/main.js) : le nombre d'entrees se regle en admin
   et la longueur des libelles change avec la langue, donc aucune valeur fixe
   ne peut rester juste. La media query a 1280px reste le repli sans JS. */
.navbar--compact .navbar__nav { display: none; }
.navbar--compact .navbar__burger {
    display: flex; width: 44px; height: 44px; padding: 10px; justify-content: center;
}

/* Dropdown */
.navbar__dropdown { position: relative; }
.navbar__dropdown-trigger { cursor: pointer; }
.navbar__dropdown-trigger i { font-size: 0.65rem; transition: transform var(--transition); }
.navbar__dropdown:hover .navbar__dropdown-trigger i { transform: rotate(-180deg); }
.navbar__dropdown-menu {
    position: absolute; top: 100%; right: 50%; transform: translateX(50%) translateY(8px);
    min-width: 340px; padding: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: all var(--transition);
}
.navbar__dropdown:hover .navbar__dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(50%) translateY(0);
}
.navbar__dropdown-item {
    display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px;
    border-radius: var(--radius); color: var(--text-primary);
    transition: background var(--transition);
}
.navbar__dropdown-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.navbar__dropdown-item i { 
    font-size: 1.1rem; color: var(--primary); margin-top: 2px; width: 20px; text-align: center; 
}
.navbar__dropdown-item strong { display: block; font-size: 0.875rem; margin-bottom: 2px; }
.navbar__dropdown-item small { color: var(--text-muted); font-size: 0.75rem; line-height: 1.3; }

/* Nav Actions */
.navbar__actions { display: flex; align-items: center; gap: 8px; }

.navbar__lang { position: relative; }
.navbar__lang-btn {
    padding: 6px 10px; border-radius: var(--radius); color: var(--text-secondary);
    font-size: 0.8rem; font-weight: 600; background: var(--bg-elevated);
    border: 1px solid var(--border); transition: all var(--transition);
    display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.navbar__lang-btn:hover { border-color: var(--primary); color: var(--text-primary); }
.navbar__lang-flag { font-size: 1.1em; line-height: 1; }
.navbar__lang-code { font-size: 0.75rem; letter-spacing: 0.03em; }
.navbar__lang-arrow { font-size: 0.55rem; opacity: 0.5; transition: transform var(--transition); }
.navbar__lang.open .navbar__lang-arrow { transform: rotate(-180deg); }
.navbar__lang-menu {
    position: absolute; top: 100%; left: 0; margin-top: 8px;
    min-width: 160px; padding: 6px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: all var(--transition); z-index: 100;
}
.navbar__lang.open .navbar__lang-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.navbar__lang-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; font-size: 0.85rem;
    color: var(--text-secondary); border-radius: var(--radius-sm);
    transition: all var(--transition); text-decoration: none;
}
.navbar__lang-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.navbar__lang-item.active { background: rgba(14,165,233,0.08); color: var(--primary-text); font-weight: 600; }

.navbar__theme-toggle {
    width: 36px; height: 36px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); background: var(--bg-elevated);
    border: 1px solid var(--border); font-size: 0.9rem;
    transition: all var(--transition);
}
.navbar__theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

/* ── PANIER ────────────────────────────────
   Repris a l'identique du theme de l'espace client (_vitrine-components.scss)
   pour que les deux en-tetes soient indiscernables. Meme boite que le
   selecteur de theme, dont il est le voisin immediat : c'est ce qui fait lire
   la rangee d'actions comme une seule serie. */
.navbar__cart,
.navbar__bell {
    position: relative; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); background: var(--bg-elevated);
    border: 1px solid var(--border); font-size: 0.9rem;
    text-decoration: none; transition: all var(--transition);
}
.navbar__cart:hover,
.navbar__bell:hover { border-color: var(--primary); color: var(--primary); }

/* Un panier rempli se distingue sans avoir a lire la pastille. */
.navbar__cart--filled,
.navbar__bell--filled { color: var(--primary-text); border-color: var(--primary); }

.navbar__cart-badge,
.navbar__bell-badge {
    position: absolute; top: -6px; left: -6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--accent-red, #ef4444); color: #fff;
    font-size: 0.65rem; font-weight: 700; line-height: 1;
    /* La pastille chevauche l'angle du bouton : l'anneau reprend le fond de ce
       bouton, pas celui de l'en-tete, qui est transparent et floute. */
    box-shadow: 0 0 0 2px var(--bg-elevated);
}

.navbar__cta span { display: inline; }
.navbar__burger { display: none; width: 36px; height: 36px; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; }
.navbar__burger span { display: block; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: all var(--transition); }

/* Mobile Nav */
.mobile-nav {
    position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 1050;
    background: var(--bg-overlay); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transition: all var(--transition-slow);
}
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav__inner {
    position: absolute; top: 0; left: 0; width: min(85vw, 380px); height: 100%;
    background: var(--bg-card); padding: 16px 20px 24px;
    transform: translateX(-100%); transition: transform var(--transition-slow);
    overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.mobile-nav.open .mobile-nav__inner { transform: translateX(0); }
.mobile-nav__header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.mobile-nav__header img { height: 32px; width: auto; }
.mobile-nav__close {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: none; background: var(--bg-elevated); color: var(--text-secondary);
    border-radius: var(--radius); cursor: pointer; font-size: 1rem;
}
.mobile-nav__link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; color: var(--text-primary);
    font-weight: 500; border-radius: var(--radius);
    transition: background var(--transition); font-size: 0.92rem;
}
.mobile-nav__link:hover { background: var(--bg-elevated); color: var(--text-primary); }
.mobile-nav__link i { width: 20px; text-align: center; color: var(--primary); }
.mobile-nav__divider { height: 1px; background: var(--border); margin: 6px 0; }
.mobile-nav__theme-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; border-radius: var(--radius);
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.9rem; font-weight: 500;
    cursor: pointer; transition: all var(--transition);
}
.mobile-nav__theme-btn:hover { border-color: var(--primary); color: var(--primary); }
.mobile-nav__theme-btn i { color: var(--primary); width: 20px; text-align: center; }

/* --- HERO --- */
.hero {
    position: relative; min-height: 100vh; display: flex; align-items: center;
    padding: calc(var(--navbar-h) + 40px) 0 80px; overflow: hidden;
}
.hero__bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    /* Fond fondu vers le transparent sur le haut : evite la coupure nette du
       glow pile sous la trust bar (28px) en dark mode. Le glow apparait
       progressivement sous la navbar au lieu de surgir d'un coup. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
}
.hero__grid {
    position: absolute; inset: 0;
    background-image: 
        linear-gradient(rgba(14,165,233,0.03) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(14,165,233,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero__glow {
    position: absolute; border-radius: 50%; filter: blur(100px);
    animation: glowFloat 8s ease-in-out infinite alternate;
}
.hero__glow--1 {
    width: 600px; height: 600px; top: -200px; right: 10%;
    background: rgba(14,165,233,0.12);
}
.hero__glow--2 {
    width: 400px; height: 400px; bottom: -100px; left: 10%;
    background: rgba(20,184,166,0.08);
    animation-delay: -4s;
}
@keyframes glowFloat {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-30px, -20px) scale(1.1); }
}

.hero__content { position: relative; z-index: 1; text-align: center; max-width: 800px; margin: 0 auto; }
.hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border-radius: var(--radius-full);
    background: rgba(14,165,233,0.15); border: 1px solid rgba(14,165,233,0.4);
    color: #38bdf8; font-size: 0.85rem; font-weight: 600;
    margin-bottom: 28px;
}
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, var(--fs-3xl));
    font-weight: 700; letter-spacing: -0.03em;
    line-height: 1.1; margin-bottom: 20px;
}
.hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-secondary); max-width: 600px; margin: 0 auto 36px;
    line-height: 1.7;
}
.hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }

/* ============================================================
   HERO EDITORIAL — home uniquement (.hero--editorial)
   Les regles generiques .hero, .hero__bg, .hero__grid, .hero__glow et
   .hero__actions restent partagees par category-hero, quote, dedicated,
   solutions_hub, seo_landing et admin/login : tout ce bloc est porte par le
   modificateur, jamais par .hero seul.

   Parti pris assume : aucune carte, aucune pastille, aucun blob, aucun coin
   arrondi decoratif. Un seul filet horizontal. C'est l'empilement de ces
   elements qui donne l'aspect « template genere » ; leur absence rend la
   typographie lisible.
   ============================================================ */
.hero--editorial {
    display: block;
    background: linear-gradient(-180deg, rgba(14,165,233,0.035), transparent 55%);
    min-height: auto;
    padding: var(--hero-top) 0 var(--hero-bottom);
}
/* AXE UNIQUE. Le hero etait aligne a gauche alors que TOUS les en-tetes de
   section (.section__header) sont centres : la page changeait d'axe au
   premier defilement, et aucun reglage de marges ne rattrape ca. Le hero
   adopte donc l'axe des sections — un seul centre de gravite du haut en bas
   de la page d'accueil. */
.hero--editorial .hero__inner {
    position: relative; z-index: 1; text-align: center;
}
/* Lumiere ambiante : un halo unique, tres large, tres faible et STATIQUE.
   Ce qui distingue une ambiance d'un « blob » : pas de forme lisible, pas
   d'animation, pas de bord. Le fond plat paraissait eteint sans elle. */
.hero--editorial .hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(60% 55% at 78% 8%,  rgba(14,165,233,0.13), transparent 70%),
        radial-gradient(45% 40% at 8%  85%, rgba(20,184,166,0.07), transparent 70%);
}

/* Deux traits, pas une pastille : c'est ce qui separe l'editorial du badge,
   et la symetrie gauche/droite pose l'axe des le premier element vu. */
.hero__eyebrow {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 0 0 22px; font-size: 0.76rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.16em;
    /* --text-muted tombait a 4,3:1 en theme clair sur le degrade du hero
       (mesure), sous le seuil AA pour ce corps de texte. */
    color: var(--text-secondary);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
    content: ""; width: 32px; height: 1px; background: var(--primary); flex: 0 0 auto;
}

.hero--editorial .hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5vw, 3.9rem);
    font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
    margin: 0 auto 24px; text-wrap: balance;
    max-width: 15em;
}
/* Le gris rendait la 2e ligne terne. Une couleur pleine — pas un degrade,
   qui ferait « genere » — donne l'accent sans bruit. */
.hero__title-accent { color: var(--primary-light); }

.hero--editorial .hero__subtitle {
    margin: 0 auto 36px; max-width: 34em;
    font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.75;
}
.hero--editorial .hero__actions {
    justify-content: center; align-items: center;
    margin-bottom: 0; gap: 28px;
}
.hero__link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-secondary); font-weight: 600; font-size: 0.95rem;
    text-decoration: none; padding-bottom: 2px;
    border-bottom: 1px solid var(--border);
    transition: color var(--transition), border-color var(--transition);
}
.hero__link:hover { color: var(--primary-light); border-color: var(--primary); }
.hero__link span { transition: transform var(--transition); }
.hero__link:hover span { transform: translateX(-3px); }

/* Ligne de preuves : du texte separe par un filet, jamais des badges.
   Le filet superieur est borne a la mesure du sous-titre plutot qu'a toute la
   largeur : centre, un trait pleine largeur couperait la page en deux. */
.hero__proof {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0 32px; list-style: none;
    margin: 40px auto 0; padding: 24px 0 0; max-width: 46em;
    border-top: 1px solid var(--border);
}
.hero__proof-item {
    position: relative; padding: 6px 0;
    font-size: 0.87rem; color: var(--text-secondary);
}
.hero__proof-item + .hero__proof-item::before {
    content: ""; position: absolute; right: -16px; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 14px; background: var(--border);
}
.hero__proof-item strong {
    color: var(--primary-light); font-weight: 700;
    font-size: 1.02rem; margin-left: 4px;
    font-family: var(--font-display); letter-spacing: -0.01em;
}
.hero__proof-item a { color: inherit; text-decoration: none; }
.hero__proof-item a:hover strong { color: var(--primary-light); }
.hero__proof-item a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
    :root { --hero-top: calc(var(--navbar-h) + 32px); --hero-bottom: 28px; }
    .hero--editorial .hero__actions { gap: 20px; }
    .hero__proof { margin-top: 30px; gap: 0 22px; }
    .hero__proof-item + .hero__proof-item::before { right: -11px; }
}

/* Category Hero */
.category-hero {
    position: relative; padding: var(--hero-top) 0 var(--hero-bottom);
    text-align: center; overflow: hidden;
}
.category-hero__content { position: relative; z-index: 1; }
.category-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700;
    letter-spacing: -0.03em; margin-bottom: 12px;
    display: flex; align-items: center; gap: 16px; justify-content: center;
}
.category-hero__title i { color: var(--cat-color, var(--primary)); }
.category-hero__desc { color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* --- STATS BAR --- */
.stats-bar {
    position: relative; z-index: 2; padding: var(--space-7) 0;
    background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stats-bar__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px;
}
.stats-bar__item { text-align: center; }
.stats-bar__icon { font-size: 1.5rem; color: var(--primary); margin-bottom: 12px; }
.stats-bar__value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; display: block; }
.stats-bar__label { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }

/* En-tetes de section : meme respiration partout, et une mesure de lecture
   confortable pour le sous-titre (~62 caracteres). */
.section__header { margin-bottom: var(--space-7); }
.section__title { margin-bottom: var(--space-3); }
.section__subtitle { max-width: 62ch; line-height: 1.65; margin-inline: auto; }

/* ============================================================
   CARTES — SYSTEME UNIQUE
   Le HTML est produit par renderCard() (includes/cards.php), le style vit ici,
   et nulle part ailleurs. Avant, six blocs ecrits a des dates differentes
   decrivaient chacun « une carte » : rayons, marges internes, tailles d'icone
   et effets de survol divergeaient legerement, et les blocs les plus bas dans
   la feuille annulaient sans bruit les regles communes ecrites plus haut
   (.service-card redeclarait padding:32px apres un padding:var(--space-6)
   « commun »). C'est ce qui faisait lire la page comme un assemblage.

   Les anciens noms de classe restent declares en alias plus bas : les pages
   categorie, solutions et landings SEO n'ont pas ete reecrites et heritent
   ainsi du meme rendu, a l'octet pres.
   ============================================================ */

/* --- La grille ------------------------------------------------------- */
.card-grid {
    --card-gap: var(--space-5);
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: stretch; gap: var(--card-gap);
}
/* Largeur de colonne EXACTE, deduite du data-cols pose par renderCardGrid().
   C'est la clef de la symetrie : avec flex:1 1 auto, une derniere rangee
   incomplete etire ses cartes et la page paraissait de travers. Ici les
   cartes gardent la largeur d'une colonne et la rangee orpheline se centre. */
.card-grid > * { min-width: 0; flex: 0 1 100%; }
.card-grid[data-cols="1"] > * { flex-basis: min(100%, 440px); }
.card-grid[data-cols="2"] > * { flex-basis: calc((100% - 1 * var(--card-gap)) / 2); }
.card-grid[data-cols="3"] > * { flex-basis: calc((100% - 2 * var(--card-gap)) / 3); }
.card-grid[data-cols="4"] > * { flex-basis: calc((100% - 3 * var(--card-gap)) / 4); }

@media (max-width: 1080px) {
    .card-grid[data-cols="4"] > * { flex-basis: calc((100% - 2 * var(--card-gap)) / 3); }
}
@media (max-width: 900px) {
    .card-grid[data-cols="3"] > *,
    .card-grid[data-cols="4"] > * { flex-basis: calc((100% - var(--card-gap)) / 2); }
}
/* [data-cols] et non `.card-grid > *` : les regles par colonne portent un
   selecteur d'attribut, donc plus specifique. Sans lui, cette regle etait
   ignoree et les cartes restaient a 167 px de large sur un ecran de 390 px. */
@media (max-width: 620px) {
    .card-grid[data-cols] > * { flex-basis: 100%; }
}

/* --- La carte --------------------------------------------------------
   La liste couvre TOUTES les surfaces en carte du site. Releve avant
   unification : 6 valeurs de marge interne (20, 24, 26, 32, 14/16, 20/12),
   2 rayons (16 et 24), 4 distances de survol (0, -2, -3, -4 px) et une ombre
   au repos sur 2 blocs sur 12. Aucun de ces ecarts ne se voit isolement ;
   ensemble ils font lire le site comme un assemblage de pages.

   Regle de survol unique et porteuse de sens : une carte qui EST un lien se
   souleve, une carte qui n'en est pas un se contente de marquer sa bordure.
   Avant, .news-card et .team-card se soulevaient sans etre cliquables, ce qui
   promettait un clic qui n'existait pas. */
.card,
.service-card, .feature-card, .winuse-card, .winos-card,
.gr-card, .plan-card, .testimonial-card,
.dedicated-card, .team-card, .news-card {
    --card-accent: var(--primary);
    position: relative;
    /* Pas de height:100% ici : une hauteur explicite ANNULE l'etirement flex,
       et les cartes d'une meme rangee retombaient a des hauteurs differentes
       (230 / 205 / 205 px releves avant correction). L'etirement de la ligne
       (align-items:stretch, la valeur par defaut) fait le travail seul. */
    display: flex; flex-direction: column;
    padding: var(--space-6);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    /* Une ombre de contact au repos, pas seulement au survol : sur les sections
       en --bg-surface, la carte et son fond ne different que de quelques
       points de luminosite et les bords se perdaient. */
    box-shadow: var(--shadow-sm);
    color: var(--text-primary); text-decoration: none;
    transition: transform var(--transition), border-color var(--transition),
                box-shadow var(--transition);
}
/* Filet d'accent le long du bord haut, allume au survol seulement : au repos
   la rangee reste calme, et l'accent designe alors une seule carte. */
/* Le filet d'accent en haut de carte a saute.
   Un rectangle de 2 px de haut ne peut pas porter un rayon de 16 px : le
   navigateur rabat les rayons pour qu'ils tiennent dans la boite, le filet
   redevient droit, et ses extremites depassaient donc de la courbure de la
   carte — un trait detache flottant au-dessus des deux coins hauts. Exactement
   le meme defaut que sur l'offre « populaire », pour la meme raison.
   L'accent est desormais porte par un lisere en box-shadow, qui epouse le
   rayon par construction. Meme langage sur toutes les cartes du site. */
/* Une carte non cliquable ne doit pas s'animer comme un bouton : elle marque
   le survol, elle ne decolle pas. L'affordance reste lisible. */
.card:hover, .feature-card:hover, .winuse-card:hover, .winos-card:hover,
.gr-card:hover, .testimonial-card:hover, .dedicated-card:hover,
.team-card:hover, .news-card:hover, .contact-card:hover, .app-card:hover {
    border-color: var(--border-hover);
}
.card--link:hover, .service-card:hover {
    border-color: var(--card-accent);
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--card-accent), var(--shadow-lg),
                0 14px 34px -20px var(--card-accent);
}
/* Le titre passe a l'accent au survol : sur une carte entierement cliquable,
   c'est l'affordance qui dit ou mene le clic. Elle etait subie et non
   maitrisee — la carte etant un <a>, le titre heritait de la couleur de survol
   des liens pendant que le corps du texte, lui, gardait la sienne. Ici c'est
   la teinte de la carte, ajustee au theme comme le reste. */
.card--link:hover .card__title,
.service-card:hover .service-card__title { color: var(--card-accent); }
[data-theme="dark"] .card--link:hover .card__title,
[data-theme="dark"] .service-card:hover .service-card__title {
    color: color-mix(in srgb, var(--card-accent) 76%, #ffffff);
}
[data-theme="light"] .card--link:hover .card__title,
[data-theme="light"] .service-card:hover .service-card__title {
    color: color-mix(in srgb, var(--card-accent) 62%, #0f172a);
}
.card--link:focus-visible, .service-card:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 3px;
    border-color: var(--card-accent);
}

/* Tuiles compactes : memes jetons que les cartes, a une echelle plus petite.
   Elles ne portent qu'une ligne ou deux, donc rayon et marge reduits — mais
   fond, bordure, ombre au repos et transition restent ceux des cartes. */
.contact-card, .app-card, .wintrust-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), border-color var(--transition),
                box-shadow var(--transition);
}

/* En-tete : icone a gauche, etiquette a droite. La ligne existe des qu'un des
   deux est present, pour que les titres restent alignes entre cartes. */
.card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-4);
}
.card__icon,
.service-card__icon, .feature-card__icon, .winuse-card__icon {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius); font-size: 1.12rem;
    color: var(--card-accent);
    background: rgba(14,165,233,0.14);
    background: color-mix(in srgb, var(--card-accent) 16%, transparent);
    /* Anneau dans la teinte de la carte : la pastille se detache du fond sans
       ajouter de bordure franche, qui ferait un second cadre dans le cadre. */
    box-shadow: inset 0 0 0 1px rgba(14,165,233,0.22);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 26%, transparent);
    transition: transform var(--transition);
}
/* L'accent vient parfois de la base (couleur de categorie) : on ne peut pas
   presumer de son contraste. On le rapproche du fond du theme pour garantir
   un glyphe lisible quelle que soit la teinte enregistree. */
[data-theme="dark"]  .card__icon, [data-theme="dark"]  .service-card__icon,
[data-theme="dark"]  .feature-card__icon, [data-theme="dark"] .winuse-card__icon {
    color: color-mix(in srgb, var(--card-accent) 74%, #ffffff);
}
[data-theme="light"] .card__icon, [data-theme="light"] .service-card__icon,
[data-theme="light"] .feature-card__icon, [data-theme="light"] .winuse-card__icon {
    color: color-mix(in srgb, var(--card-accent) 70%, #0f172a);
}
.card--link:hover .card__icon { transform: translateY(-1px) scale(1.04); }
.card__tag {
    margin-right: auto; padding: 4px 10px; border-radius: var(--radius-full);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; white-space: nowrap;
    /* --text-secondary et non --text-muted : a 0,68 rem en capitales, le gris
       attenue tombait a 4,0:1 en theme clair (mesure), sous le seuil AA. */
    color: var(--text-secondary); background: var(--bg-surface);
    border: 1px solid var(--border);
}

/* Deux exceptions assumees, volontairement hors de cette liste :
   .plan-card__name garde --fs-md (le nom de l'offre est le titre d'une fiche
   tarifaire) et .team-card__name garde 1,4 rem (le nom d'une personne porte
   sa carte). Les autres etaient des divergences accidentelles — 1,00 / 1,15 /
   1,15 / 1,20 rem selon le bloc, chacune redeclaree APRES cette regle et
   l'annulant en silence. */
.card__title,
.service-card__title, .feature-card__title, .winuse-card__title,
.winos-card__name, .news-card__title {
    margin: 0 0 var(--space-2);
    font-size: 1.06rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em;
    /* Evite la derniere ligne reduite a un mot orphelin quand un titre passe
       sur deux lignes — frequent avec les noms de gamme allemands. */
    text-wrap: balance;
}
/* Emplacement de deux lignes la ou les titres d'une meme rangee sont de
   longueurs inegales par nature : « Windows Server 2025 » passe sur deux
   lignes quand « Windows 11 » tient sur une, et tout ce qui suit (accroche,
   points, dates de fin de support) se decalait d'une carte a l'autre. Meme
   correction que sur les cartes d'offres, appliquee la ou le defaut existe :
   ailleurs, reserver une ligne vide desserrerait les grilles sans rien
   aligner, les pieds de carte etant deja cales par flex:1 sur le corps. */
.winos-card__name { min-height: calc(2 * 1.35em); }
/* flex:1 -> le corps absorbe la hauteur libre, donc les pieds de toutes les
   cartes d'une rangee tombent sur la meme ligne.
   Exception assumee : .gr-card__text reste a 0,98 rem — dans une carte d'avis,
   la citation EST le contenu, pas une legende. Releve avant unification pour
   les autres : 0,85 / 0,87 / 0,88 / 0,90 rem. */
.card__text,
.service-card__desc, .feature-card__desc, .winuse-card__text,
.winos-card__tagline, .news-card__desc, .dedicated-card__desc,
.testimonial-card__content, .team-card__bio {
    margin: 0; flex: 1 1 auto;
    color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65;
}

.card__foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-3);
    margin-top: auto; padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}
/* Le pied n'a de filet que s'il suit du contenu : une carte reduite a son
   affordance de clic n'a pas a exhiber une ligne dans le vide. */
.card__head + .card__foot, .card > .card__foot:first-child { border-top: 0; padding-top: 0; }
.card__meta {
    padding: 4px 10px; border-radius: var(--radius-full);
    font-size: 0.78rem; font-weight: 700; color: var(--text-primary);
    background: var(--bg-surface); border: 1px solid var(--border);
}
.card__link, .service-card__link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.875rem; font-weight: 600; color: var(--card-accent);
}
/* Cale a droite UNIQUEMENT dans un pied de carte : sans pied (service-card des
   pages heritees), le lien reste dans le flux, aligne sur le titre et le
   texte comme avant. Dans le pied, il fait face a la pastille de prix. */
.card__foot > .card__link { margin-right: auto; }
[data-theme="dark"]  .card__link, [data-theme="dark"]  .service-card__link {
    color: color-mix(in srgb, var(--card-accent) 76%, #ffffff);
}
[data-theme="light"] .card__link, [data-theme="light"] .service-card__link {
    color: color-mix(in srgb, var(--card-accent) 62%, #0f172a);
}
.card__link i, .service-card__link i { transition: transform var(--transition); }
.card--link:hover .card__link i, .service-card:hover .service-card__link i { transform: translateX(-4px); }

/* ============================================================
   GRILLES HERITEES
   Toujours utilisees par pages/category.php, pages/seo_landing.php et la page
   VPS Windows, qui n'ont pas ete migrees vers renderCardGrid(). Elles gardent
   le comportement flex + centrage de la derniere rangee ; le style des cartes,
   lui, vient des alias declares ci-dessus.
   ============================================================ */
.cards-row,
.features-grid,
.winuse-grid,
.wintrust-grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-5);
}
.cards-row > *,
.features-grid > *,
.winuse-grid > * { flex: 1 1 300px; max-width: 372px; min-width: 0; }
/* Les pastilles « inclus » sont courtes : basis plus petit, sinon 9 elements
   sur 3 rangees laissent des blancs enormes. */
.wintrust-grid > * { flex: 0 1 auto; min-width: 200px; }
.features-grid > *:only-child { flex-basis: 372px; }

@media (max-width: 680px) {
    .cards-row > *, .features-grid > *, .winuse-grid > * { flex-basis: 100%; max-width: 100%; }
    .wintrust-grid > * { flex: 1 1 100%; }
}

/* --- SERVICE CARDS (grille heritee, cf. solutions_hub / offers / landings) --- */
.services__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5);
}
.services__grid--center {
    grid-template-columns: repeat(var(--services-cols, 3), minmax(260px, 1fr));
    justify-content: center;
    max-width: min(100%, calc(var(--services-cols, 3) * 320px + (var(--services-cols, 3) - 1) * 24px));
    margin-inline: auto;
}
/* Ces deux blocs posaient une icone puis un titre l'un sous l'autre, sans
   ligne d'en-tete : on restitue la marge que .card__head apporte ailleurs. */
.service-card__icon, .feature-card__icon, .winuse-card__icon { margin-bottom: var(--space-4); }
.service-card__link { margin-top: var(--space-5); }

/* --- PLAN CARDS --- */
.plans-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 32px;
}
.plans-header h2 { font-size: 1.5rem; font-weight: 800; }

.billing-toggle {
    display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 40px;
}
.billing-toggle__label { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); transition: color var(--transition); display: inline-flex; align-items: center; gap: 8px; }
.billing-toggle__label.active { color: var(--primary-text); }
.billing-toggle__badge {
    display: inline-block; padding: 2px 8px; border-radius: var(--radius-full);
    background: linear-gradient(-135deg, #059669, #047857); color: #fff;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
    text-transform: uppercase; line-height: 1.4;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    /* Attire l'oeil sur l'option annuelle (desactive en reduced-motion global) */
    animation: billingBadgePulse 2.4s ease-in-out infinite;
}
@keyframes billingBadgePulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35); transform: translateY(0); }
    50%      { box-shadow: 0 4px 14px rgba(16, 185, 129, 0.6); transform: translateY(-1px); }
}
.billing-toggle__switch {
    width: 48px; height: 26px; border-radius: var(--radius-full);
    background: var(--bg-elevated); border: 2px solid var(--border);
    position: relative; transition: all var(--transition);
}
.billing-toggle__switch.active { background: var(--primary); border-color: var(--primary); }
.billing-toggle__knob {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--text-primary);
    transition: transform var(--transition);
}
.billing-toggle__switch.active .billing-toggle__knob { transform: translateX(-22px); }

/* Pricing card billing note + savings (annual mode) */
.plan-card__billing-note {
    margin-top: 6px; font-size: 0.75rem; color: var(--text-muted);
    letter-spacing: 0.01em;
}
.plan-card__savings {
    margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-sm);
    background: rgba(16, 185, 129, 0.12); color: #059669;
    font-size: 0.8rem; font-weight: 600;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 2px; line-height: 1.35;
    border: 1px solid rgba(16, 185, 129, 0.28);
    width: 100%; box-sizing: border-box;
}
/* HTML5 hidden attribute would normally apply display:none, but our explicit
   display:flex above overrides it. Force hidden state to actually hide. */
.plan-card__savings[hidden],
.plan-card__billing-note[hidden] { display: none !important; }
[data-theme="dark"] .plan-card__savings { color: #34d399; background: rgba(16, 185, 129, 0.16); }
.plan-card__savings-main {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    gap: 4px 6px; white-space: normal;
}
.plan-card__savings strong { font-weight: 800; white-space: nowrap; }
.plan-card__savings-sub {
    font-size: 0.72rem; font-weight: 500; color: var(--text-muted);
    opacity: 0.95;
}
.plan-card__savings-pct {
    background: #10b981; color: #fff; padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 0.7rem; font-weight: 800; white-space: nowrap;
    line-height: 1.4;
}

/* Argument tarif annuel : teaser vert compact affiche des la vue mensuelle,
   pour mettre l'offre annuelle en avant sans attendre un clic sur le toggle. */
.plan-card__annual {
    margin-top: 8px; padding: 6px 10px; border-radius: var(--radius-sm);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.26);
    color: #059669; font-size: 0.78rem; font-weight: 600; line-height: 1.3;
    width: 100%; box-sizing: border-box;
}
.plan-card__annual[hidden] { display: none !important; }
[data-theme="dark"] .plan-card__annual { color: #34d399; background: rgba(16, 185, 129, 0.14); }
.plan-card__annual > i { color: #10b981; flex: 0 0 auto; }
.plan-card__annual-txt { flex: 1 1 auto; }
.plan-card__annual-txt strong { font-weight: 800; white-space: nowrap; }
.plan-card__annual-pct {
    background: #10b981; color: #fff; padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 0.7rem; font-weight: 800; white-space: nowrap; line-height: 1.4;
    margin-right: auto;
}

.category-tabs {
    display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap;
}
.category-tabs__context {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 820px;
    margin: 4px 0 16px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}
.category-tabs__context i {
    flex: 0 0 auto;
    margin-top: 0.3em;
    color: var(--primary);
}
.category-tab {
    padding: 10px 20px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;
    display: flex; align-items: center; gap: 8px; transition: all var(--transition);
}
.category-tab:hover, .category-tab.active {
    border-color: var(--primary); color: var(--primary-text);
    background: rgba(14,165,233,0.05);
}

.plans-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
    justify-content: center; padding-top: 16px;
}
.plans-grid--full {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    justify-content: center;
}
/* Smart plan grid: set via JS data-plan-count */
.plans-grid[data-plan-count="1"] { grid-template-columns: minmax(280px,420px); justify-content: center; }
.plans-grid[data-plan-count="2"] { grid-template-columns: repeat(2, minmax(280px,420px)); justify-content: center; }
.plans-grid[data-plan-count="3"] { grid-template-columns: repeat(3, minmax(260px,380px)); justify-content: center; }
.plans-grid[data-plan-count="4"] { grid-template-columns: repeat(4, minmax(240px,1fr)); }
.plans-grid[data-plan-count="5"] { grid-template-columns: repeat(3, minmax(260px,1fr)); }
.plans-grid[data-plan-count="6"] { grid-template-columns: repeat(3, minmax(260px,1fr)); }
.plans-grid[data-plan-count="7"] { grid-template-columns: repeat(4, minmax(240px,1fr)); }
.plans-grid[data-plan-count="8"] { grid-template-columns: repeat(4, minmax(240px,1fr)); }
.plans-grid--full[data-plan-count="1"] { grid-template-columns: minmax(260px,420px); justify-content: center; }
.plans-grid--full[data-plan-count="2"] { grid-template-columns: repeat(2, minmax(260px,420px)); justify-content: center; }
.plans-grid--full[data-plan-count="3"] { grid-template-columns: repeat(3, minmax(240px,380px)); justify-content: center; }
.plans-grid--full[data-plan-count="4"] { grid-template-columns: repeat(4, minmax(230px,1fr)); }
@media (max-width: 1100px) {
    .plans-grid[data-plan-count="4"], .plans-grid--full[data-plan-count="4"] { grid-template-columns: repeat(2, 1fr); }
}

.plan-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-6);
    display: flex; flex-direction: column; position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); overflow: visible;
}
/* Pas de soulevement : la carte d'offre n'est pas cliquable, c'est son bouton
   qui l'est. Elle marque le survol comme toutes les cartes statiques — ce qui
   suffit a suivre la colonne qu'on lit dans une grille tarifaire. */
.plan-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-lg); }
/* Le filet d'accent a saute. Il etait pose a top:0 avec des angles droits sur
   une carte a coins arrondis de 16 px et sans overflow:hidden : ses extremites
   depassaient de la courbure, et la bordure paraissait interrompue aux deux
   coins hauts. Un liser d'accent en box-shadow le remplace — il epouse le
   rayon par construction et, contrairement a une bordure de 2 px, ne decale
   pas d'un pixel le contenu par rapport aux autres cartes de la rangee. */
.plan-card--popular {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg), 0 18px 40px -26px var(--primary-glow);
}
.plan-card--popular:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg), 0 18px 40px -18px var(--primary-glow);
}
/* Centree et a cheval sur le bord haut : la pastille chevauchait le filet a
   droite, deux elements d'accent se disputant les memes 3 pixels. */
.plan-card__badge {
    position: absolute; top: 0; right: 50%; transform: translate(50%, -50%);
    background: linear-gradient(-135deg, var(--primary), var(--accent-teal));
    color: #fff; padding: 5px 14px; border-radius: var(--radius-full);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap; box-shadow: 0 2px 8px -2px var(--primary-glow);
}
/* Emplacement de hauteur fixe, porte par l'en-tete lui-meme et pas seulement
   par ses enfants : la description est conditionnelle (champ vide en admin),
   et sans cette reserve le prix d'une offre sans description remontait de
   40 px — mesure : 497 / 497 / 497 / 457. */
/* L'en-tete absorbe le jeu de hauteur de la carte (flex:1), et porte un
   plancher pour le cas ou la description est vide.
   Pourquoi pas une hauteur fixe : la description est redigee en admin, sa
   longueur est imprevisible. Un emplacement fige a deux lignes coupait la
   copie en plein milieu (« Le point d'entrée sous Windows. Bureau à… ») ;
   un emplacement taille sur la plus longue laissait 100 px de blanc dans les
   gammes ou elle tient sur une ligne. En laissant l'en-tete absorber le jeu,
   les prix d'une rangee tombent sur la meme ligne quelle que soit la longueur
   du texte, et sans blanc superflu. */
.plan-card__header {
    margin-bottom: 20px;
    flex: 1 1 auto;
    min-height: 8.65rem;
}
.plan-card__category {
    display: inline-block; padding: 3px 10px; border-radius: var(--radius-full);
    background: rgba(14,165,233,0.1); color: var(--primary-text);
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 10px;
}
/* Emplacements de hauteur fixe pour le nom et la description.
   Sans ca, un nom qui passe sur deux lignes (« Windows Server - Standard »)
   ou une description plus longue decalait le prix de 32 px vers le bas : dans
   une rangee d'offres, les montants ne se lisaient plus sur une ligne
   horizontale, ce qui est precisement ce qu'on vient y chercher.
   Mesure sur la home reelle : prix a 479 / 479 / 511 / 479 px avant, tous
   egaux apres. La description est bornee a deux lignes ; le texte complet
   reste dans le HTML (donc lu par les lecteurs d'ecran et les moteurs). */
.plan-card__name {
    font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700;
    line-height: 1.25; margin-bottom: 6px; min-height: calc(2 * 1.25em);
    /* Borne haute autant que basse : un nom sur trois lignes decalerait de
       nouveau le prix de cette seule carte. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.plan-card__desc {
    color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5;
}

.plan-card__pricing { margin-bottom: 20px; }
.plan-card__price-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.plan-card__price { display: flex; align-items: baseline; gap: 2px; }
.plan-card__amount { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.plan-card__currency { font-size: 1.2rem; font-weight: 700; }
.plan-card__period { color: var(--text-muted); font-size: 0.85rem; margin-right: 4px; }
.plan-card__tax {
    align-self: center;
    margin-right: 7px;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.plan-card__specs {
    flex: 1; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px;
}
.plan-card__specs li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary);
}
/* align-items:flex-start et non center : sur une caracteristique qui passe sur
   deux lignes (« Server 2025 / 2022 / Win 11 »), la puce se retrouvait a
   mi-hauteur, en face de rien. Le decalage la pose sur la premiere ligne. */
.plan-card__specs li i {
    color: var(--primary); width: 16px; text-align: center;
    font-size: 0.8rem; margin-top: 0.3em; flex: 0 0 auto;
}

.plan-card__more {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    margin-top: 10px; font-size: 0.8rem; color: var(--text-muted);
}
.plan-card__more:hover { color: var(--primary-text); }

/* --- FEATURE CARDS (variantes de grille heritees) ---
   Le style de la carte elle-meme est celui du systeme unique ; il ne reste ici
   que les deux variantes de largeur utilisees par category.php et seo_landing.php. */
.features-grid--compact > * { flex-basis: 250px; }
.features-grid--center > * { flex-basis: 260px; max-width: 300px; }

/* --- FAQ --- */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color var(--transition);
}
.faq-item--open, .faq-item:hover { border-color: var(--border-hover); }
.faq-item__question {
    width: 100%; padding: 20px 24px; display: flex; align-items: center;
    justify-content: space-between; gap: 16px;
    font-size: 0.95rem; font-weight: 600; color: var(--text-primary);
    text-align: right; cursor: pointer; transition: color var(--transition);
}
.faq-item__question:hover { color: var(--primary-text); }
.faq-item__question i { color: var(--text-muted); font-size: 0.75rem; transition: transform 250ms var(--ease-out); flex-shrink: 0; }
.faq-item--open .faq-item__question i { transform: rotate(-180deg); }
.faq-item__answer {
    max-height: 0; overflow: hidden; transition: max-height var(--transition-slow);
}
.faq-item__answer p { padding: 0 24px 20px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; }

/* --- TEMOIGNAGES ---
   Le defilement infini maison a saute : piste dupliquee dans le DOM (deux fois
   le texte a indexer), animation CSS de 40 s, masque de degrade, barre de
   navigation dediee et script inline — soit une deuxieme implementation de
   carrousel a maintenir en parallele de celle du site. La section utilise
   desormais le composant .carousel commun.
   Habillage de la carte : fondation commune. Ne reste ici que ce qui est
   propre au temoignage. */
.testimonials-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5);
}
.testimonial-card__stars {
    display: flex; align-items: center; gap: 3px; margin-bottom: 16px;
}
.testimonial-card__stars i { color: var(--text-muted); font-size: 0.85rem; }
.testimonial-card__stars i.active { color: var(--accent-amber); }
.testimonial-card__stars span { margin-right: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
/* flex:1 -> la citation absorbe la hauteur libre, donc les pieds de toutes les
   cartes d'une rangee tombent sur la meme ligne. */
.testimonial-card__content {
    flex: 1 1 auto; margin: 0 0 var(--space-5);
    color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; font-style: italic;
}
.testimonial-card__author {
    display: flex; align-items: center; gap: 12px;
    padding-top: var(--space-4); border-top: 1px solid var(--border);
}
.testimonial-card__avatar {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-full);
    background: linear-gradient(-135deg, var(--primary), var(--accent-teal));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.92rem;
}
.testimonial-card__who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.testimonial-card__who strong { font-size: 0.9rem; }
.testimonial-card__who small { color: var(--text-muted); font-size: 0.76rem; }

/* --- VPS WINDOWS : cas d'usage --- */
.winuse-grid { margin-bottom: var(--space-7); }
/* Habillage : fondation commune. */
.winuse-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: 14px;
    border-radius: var(--radius-md); background: rgba(14,165,233,0.12);
    color: var(--primary-light); font-size: 1rem;
}
/* Titre : echelle commune (cf. bloc TYPOGRAPHIE des cartes). */
/* Corps : echelle commune. */

/* --- VPS WINDOWS : aide au dimensionnement --- */
.winsize {
    padding: var(--space-6); border: 1px solid var(--border);
    border-radius: var(--radius-lg); background: var(--bg-card);
}
.winsize__head { text-align: center; margin-bottom: var(--space-5); }
.winsize__title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; }
.winsize__sub { margin: 0; font-size: 0.87rem; color: var(--text-muted); }
.winsize__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px;
}
.winsize__item {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--bg-surface);
}
.winsize__item--reco { border-color: rgba(14,165,233,0.45); background: rgba(14,165,233,0.05); }
.winsize__ram { font-size: 1.5rem; font-weight: 800; color: var(--primary-light); line-height: 1; }
.winsize__label { font-size: 0.9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.winsize__label em {
    font-style: normal; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 2px 8px; border-radius: var(--radius-full);
    background: rgba(14,165,233,0.18); color: var(--primary-light);
}
.winsize__text { font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary); }
.winsize__help { margin: var(--space-5) 0 0; text-align: center; font-size: 0.85rem; color: var(--text-muted); }
.winsize__help i { color: var(--accent-amber); }
.winsize__help a { color: var(--primary-light); font-weight: 600; }

/* --- VPS WINDOWS : inclus, licence, CTA final --- */
.wintrust-grid { gap: 12px; margin-bottom: var(--space-6); }
.wintrust-item {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 16px; font-size: 0.87rem; font-weight: 500;
}
.wintrust-item i { color: var(--accent-teal); font-size: 0.95rem; flex-shrink: 0; }
/* Livraison : argument de conversion majeur, donc distingue des autres chips. */
.wintrust-item--key {
    border-color: rgba(14,165,233,0.45);
    background: linear-gradient(-135deg, rgba(14,165,233,0.1), rgba(20,184,166,0.06));
    font-weight: 700;
}
.wintrust-item--key i { color: var(--primary-light); }

/* Encart licence : ton informatif, pas alarmiste — on previent, on ne fait
   pas peur. D'ou l'ambre plutot que le rouge. */
.winlic {
    display: flex; gap: 16px; align-items: flex-start;
    padding: var(--space-5); margin-bottom: var(--space-6);
    border: 1px solid rgba(251,191,36,0.25); border-radius: var(--radius-lg);
    background: rgba(251,191,36,0.06);
}
.winlic__icon { color: var(--accent-amber); font-size: 1.15rem; flex-shrink: 0; margin-top: 2px; }
.winlic__title { margin: 0 0 6px; font-size: 1rem; font-weight: 700; }
.winlic__body p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); }
.winlic__cta { font-size: 0.85rem; font-weight: 600; color: var(--primary-light); text-decoration: none; }
.winlic__cta:hover { text-decoration: underline; }

.wincta {
    text-align: center; padding: var(--space-7) var(--space-6);
    border: 1px solid var(--border-accent); border-radius: var(--radius-lg);
    background: linear-gradient(-135deg, rgba(14,165,233,0.07), rgba(20,184,166,0.05));
}
.wincta__title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.wincta__text { margin: 0 auto var(--space-5); max-width: 46em; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.7; }
.wincta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 560px) {
    .winlic { flex-direction: column; gap: 10px; }
    .wincta { padding: var(--space-6) var(--space-5); }
}

/* --- VPS WINDOWS : choix du systeme --- */
.winos-section { background: var(--bg-surface); }
.winos-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px; align-items: stretch;
}
/* Habillage : fondation commune. Ici, seulement ce qui distingue une carte
   de systeme d'exploitation. */
/* La carte recommandee se distingue sans crier : liseré, pas de fond different. */
.winos-card--reco { border-color: rgba(14,165,233,0.45); box-shadow: 0 0 0 1px rgba(14,165,233,0.15); }
.winos-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.winos-card__logo { display: flex; color: var(--primary-light); }
.winos-badge {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap;
}
.winos-badge--reco    { background: rgba(14,165,233,0.15);  color: var(--primary-light); }
.winos-badge--compat  { background: rgba(20,184,166,0.15);  color: var(--accent-teal); }
.winos-badge--desktop { background: rgba(251,191,36,0.15);  color: var(--accent-amber); }
/* Nom : echelle commune. */
.winos-card__tagline { margin: 0 0 18px; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; }
.winos-card__points { list-style: none; margin: 0 0 16px; padding: 0; }
.winos-card__points li {
    display: flex; gap: 10px; align-items: flex-start;
    margin-bottom: 10px; font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary);
}
.winos-card__points i { color: var(--accent-teal); font-size: 0.75rem; margin-top: 5px; flex-shrink: 0; }
.winos-card__caveat {
    margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-md);
    background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2);
    font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary);
}
.winos-card__caveat i { color: var(--accent-amber); }
.winos-card__foot {
    /* margin-top:auto epingle le pied en bas : flex:1 sur la liste ne suffisait
       pas (flex-basis auto repartit l'espace au lieu de l'absorber), les pieds
       se retrouvaient decales de 48px d'une carte a l'autre. */
    margin-top: auto;
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 14px; border-top: 1px solid var(--border);
    font-size: 0.78rem; color: var(--text-muted);
}
.winos-card__for strong { color: var(--text-secondary); }
.winos-card__life time { color: var(--text-secondary); font-weight: 600; }
.winos-card__eol {
    display: inline-block; margin-right: 6px; padding: 1px 7px;
    border-radius: var(--radius-full); background: rgba(251,191,36,0.15);
    color: var(--accent-amber); font-style: normal; font-size: 0.7rem; font-weight: 600;
}
.winos-note {
    margin: var(--space-6) auto 0; max-width: 780px; text-align: center;
    font-size: 0.88rem; line-height: 1.7; color: var(--text-muted);
}
.winos-note i { color: var(--accent-amber); }

/* --- FIL D'ARIANE (pages categorie) ---
   Discret par construction : il sert la comprehension de l'arborescence, il ne
   dispute pas la vedette au H1 qui le suit. */
.crumbs { margin-bottom: var(--space-5); }
.crumbs__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px;
    font-size: 0.8rem; color: var(--text-muted);
}
.crumbs__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs__item i { font-size: 0.6rem; opacity: 0.55; }
.crumbs__item a { color: var(--text-muted); text-decoration: none; }
.crumbs__item a:hover { color: var(--primary-light); text-decoration: underline; text-underline-offset: 3px; }
.crumbs__item [aria-current="page"] { color: var(--text-secondary); font-weight: 600; }

/* --- VPS WINDOWS : presentation editoriale --- */
.winintro-title {
    margin: 0 0 var(--space-5); text-align: center;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em;
}
/* Fiche d'identite : une grille label / valeur, pas un tableau — les six
   lignes se replient en pile sur mobile sans defilement horizontal. */
.winfacts {
    margin: var(--space-6) 0 0; padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card);
}
.winfacts__row {
    display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 8px 20px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.winfacts__row:first-child { padding-top: 0; }
.winfacts__row:last-child { padding-bottom: 0; border-bottom: none; }
.winfacts__label {
    display: flex; align-items: center; gap: 9px;
    margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--text-primary);
}
.winfacts__label i { color: var(--primary-light); font-size: 0.85rem; width: 16px; text-align: center; flex-shrink: 0; }
.winfacts__value { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 640px) {
    .winfacts { padding: var(--space-5); }
    .winfacts__row { grid-template-columns: 1fr; gap: 4px; }
}

/* --- VPS WINDOWS : comparatif Windows / Linux --- */
.winvs-section { background: var(--bg-surface); }
/* Le conteneur porte le defilement : un tableau a trois colonnes ne se replie
   pas sous 400px, mieux vaut le faire glisser que casser la page. */
.winvs-wrap {
    overflow-x: auto; border: 1px solid var(--border);
    border-radius: var(--radius-lg); background: var(--bg-card);
}
.winvs-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 560px; }
.winvs-table th, .winvs-table td {
    padding: 13px 16px; text-align: right; vertical-align: top;
    border-bottom: 1px solid var(--border); line-height: 1.55;
}
.winvs-table tbody tr:last-child th, .winvs-table tbody tr:last-child td { border-bottom: none; }
.winvs-table thead th {
    font-size: 0.8rem; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; background: var(--bg-surface);
}
.winvs-table thead th i { margin-left: 6px; color: var(--primary-light); }
.winvs-table tbody th { font-weight: 600; color: var(--text-primary); width: 26%; }
.winvs-table td { color: var(--text-secondary); }
/* Colonne Windows en avant : c'est la page ou l'on est. */
.winvs-table__win { background: rgba(14,165,233,0.05); }
.winvs-table thead .winvs-table__win { background: rgba(14,165,233,0.1); }
.winvs-verdict {
    margin: var(--space-5) 0 0; text-align: center;
    font-size: 0.88rem; line-height: 1.7; color: var(--text-secondary);
}
.winvs-verdict i { color: var(--success); margin-left: 6px; }
.winvs-verdict a { color: var(--primary-light); font-weight: 600; white-space: nowrap; text-decoration: none; }
.winvs-verdict a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- VPS WINDOWS : index de l'univers Windows ---
   Liste de liens, pas des cartes : treize destinations en cartes noieraient
   les quatre mises en avant juste au-dessus. */
.winidx {
    margin: var(--space-6) auto 0; max-width: 1100px;
    padding: var(--space-6); border: 1px solid var(--border);
    border-radius: var(--radius-lg); background: var(--bg-card);
}
.winidx__title {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 0 0 var(--space-5); font-size: 1.05rem; font-weight: 700;
}
.winidx__title i { color: var(--primary-light); }
.winidx__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
    gap: var(--space-5) var(--space-6);
}
.winidx__group-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
    font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-muted);
}
.winidx__group-title i { color: var(--accent-teal); font-size: 0.72rem; }
.winidx__list { list-style: none; margin: 0; padding: 0; }
.winidx__list li { margin-bottom: 7px; }
.winidx__list a {
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.85rem; line-height: 1.5;
}
.winidx__list a:hover { color: var(--primary-light); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
    .winidx { padding: var(--space-5); }
}

/* --- PAGE NOS OFFRES --- */
.offers-cta {
    margin-top: var(--space-7); padding: var(--space-6);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg-card); text-align: center;
}
.offers-cta p { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.offers-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- AVIS GOOGLE (source tierce) --- */
.google-reviews-section { background: var(--bg-surface); }

/* Etoiles SVG inline : aucune dependance CDN pour la preuve sociale. */
.gr-star { display: block; }
.gr-star--full, .gr-star--half { color: var(--accent-amber); }
.gr-star--empty { color: var(--border); }

/* Ligne de faits : la note ne vit plus dans un encadre pose au milieu de la
   page. Elle se lit comme la ligne de preuves du hero — meme composant, donc
   meme langage visuel d'un bout a l'autre de l'accueil. */
.gr-facts {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px 28px; list-style: none; margin: 0 0 var(--space-6); padding: 0;
}
.gr-facts__item {
    position: relative; display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.9rem; color: var(--text-secondary);
}
.gr-facts__item + .gr-facts__item::before {
    content: ""; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
    width: 1px; height: 15px; background: var(--border);
}
.gr-facts__score {
    font-family: var(--font-display); font-size: 1.32rem; font-weight: 800;
    letter-spacing: -0.02em; color: var(--text-primary);
}
.gr-facts__out { color: var(--text-muted); font-size: 0.85rem; }
.gr-facts__stars { display: inline-flex; gap: 2px; }
.gr-facts a { color: var(--primary-text); font-weight: 600; text-decoration: none; }
.gr-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .gr-facts a { color: var(--primary-light); }

/* --- Carte d'avis ---
   La citation porte la carte : elle passe en premier, en corps plus grand que
   le texte courant, et l'auteur vient en pied. C'est l'inverse d'un widget
   d'avis, ou l'identite prime sur ce qui est dit. */
/* Habillage : fondation commune. */
.gr-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); }
.gr-card__stars { display: inline-flex; gap: 2px; }
.gr-card__badge { display: inline-flex; opacity: 0.8; transition: opacity var(--transition); }
.gr-card__badge:hover { opacity: 1; }

/* flex:1 -> le texte absorbe la hauteur restante, donc tous les pieds
   s'alignent quelle que soit la longueur de l'avis. */
.gr-card__text {
    flex: 1 1 auto; margin: 0 0 var(--space-5); position: relative;
    font-size: 0.98rem; line-height: 1.7; color: var(--text-primary);
}
/* Avis traduit : la traduction est le texte principal, l'original reste
   depliable juste en dessous. Note discrete, jamais un bouton — le lecteur
   doit voir d'abord ce que la personne a dit, pas l'interface. */
.gr-card__orig { margin: calc(var(--space-5) * -1) 0 var(--space-5); font-size: 0.76rem; }
.gr-card__orig > summary {
    cursor: pointer; color: var(--text-muted); list-style: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.gr-card__orig > summary::-webkit-details-marker { display: none; }
.gr-card__orig > summary::before { content: "\201D"; opacity: 0.5; font-size: 1.1em; line-height: 0; }
.gr-card__orig > summary:hover { color: var(--text-primary); }
.gr-card__orig > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.gr-card__orig > p {
    margin: 8px 0 0; padding-right: 10px; color: var(--text-muted);
    border-right: 2px solid var(--border); line-height: 1.6;
}

.gr-card__foot {
    display: flex; align-items: center; gap: 12px;
    padding-top: var(--space-4); border-top: 1px solid var(--border);
}
.gr-card__avatar {
    width: 38px; height: 38px; border-radius: var(--radius-full);
    object-fit: cover; flex-shrink: 0;
}
.gr-card__avatar--initial {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(-135deg, var(--primary), var(--accent-teal));
    color: #fff; font-weight: 700; font-size: 0.92rem;
}
.gr-card__who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; flex: 1; }
.gr-card__who strong { font-size: 0.9rem; }
.gr-card__who time, .gr-card__who span { font-size: 0.76rem; color: var(--text-muted); }
/* Lien de signalement exige par les regles Places API : present et atteignable,
   mais discret pour ne pas concurrencer le contenu de l'avis. */
.gr-card__flag {
    flex-shrink: 0; color: var(--text-muted); opacity: 0.4;
    font-size: 0.85rem; text-decoration: none; padding: 2px 4px;
    transition: opacity var(--transition);
}
.gr-card__flag:hover { opacity: 1; }

.gr-more { text-align: center; margin-top: var(--space-6); }

/* ============================================================
   CARROUSEL
   Piste en scroll-snap : le defilement natif fait tout le travail (inertie
   tactile, trackpad, molette horizontale), le JS ne sert qu'a piloter les
   fleches et a tenir les puces a jour. Sans JS, la piste reste defilable au
   doigt et TOUTES les cartes restent dans le HTML — c'est ce qui compte pour
   l'indexation et pour les moteurs generatifs, qui n'executent pas le script.
   ============================================================ */
.carousel { position: relative; }
.carousel__viewport {
    display: flex; gap: var(--space-5);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    /* Respiration VERTICALE uniquement (ombre au repos, anneau de focus). Une
       marge horizontale negative debordait de 6 px du conteneur — la page
       entiere gagnait une barre de defilement horizontale sur mobile — et
       decalait l'origine du scroll-snap, ce qui faussait le calcul des pages. */
    padding-block: 8px; margin-block: -8px;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__slide { scroll-snap-align: start; flex: 0 0 100%; min-width: 0; }
.carousel[data-slides="2"] .carousel__slide { flex-basis: calc((100% - 1 * var(--space-5)) / 2); }
.carousel[data-slides="3"] .carousel__slide { flex-basis: calc((100% - 2 * var(--space-5)) / 3); }

.carousel__bar {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-5); margin-top: var(--space-6);
}
.carousel__btn {
    width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--bg-card);
    color: var(--text-secondary); font-size: 0.95rem; cursor: pointer;
    transition: color var(--transition), border-color var(--transition),
                background-color var(--transition), opacity var(--transition);
}
.carousel__btn:hover:not(:disabled) { color: var(--primary-text); border-color: var(--primary); }
[data-theme="dark"] .carousel__btn:hover:not(:disabled) { color: var(--primary-light); }
.carousel__btn:disabled { opacity: 0.32; cursor: default; }
.carousel__dots { display: flex; align-items: center; gap: 8px; }
.carousel__dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-full);
    background: var(--border-hover); cursor: pointer;
    transition: width var(--transition), background-color var(--transition);
}
.carousel__dot[aria-current="true"] { width: 26px; background: var(--primary); }
/* Sans JS les commandes ne pilotent rien : elles ne s'affichent qu'une fois le
   carrousel initialise, la piste restant defilable au doigt entre-temps. */
.carousel:not([data-ready]) .carousel__bar { display: none; }

@media (max-width: 900px) {
    .carousel[data-slides="3"] .carousel__slide { flex-basis: calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 620px) {
    .carousel[data-slides="2"] .carousel__slide,
    .carousel[data-slides="3"] .carousel__slide { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .carousel__viewport { scroll-behavior: auto; }
}

/* --- AVIS CLIENTS PAR OFFRE (first-party, eligibles aux etoiles) --- */
.plan-reviews-section { background: var(--bg-surface); }
/* Note agregee de la gamme (affichage ; le balisage vit dans category.php) */
.plan-reviews-score {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: var(--space-4); padding: 8px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--bg-card);
}
.plan-reviews-score__stars { display: inline-flex; gap: 2px; }
.plan-reviews-score__stars i { color: var(--text-muted); font-size: 0.9rem; }
.plan-reviews-score__stars i.active { color: var(--accent-amber); }
.plan-reviews-score strong { font-size: 1.15rem; }
.plan-reviews-score small { color: var(--text-muted); font-size: 0.8rem; }

.plan-reviews-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 18px;
}
.plan-reviews-grid .plan-review {
    border: 1px solid var(--border); border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg); background: var(--bg-card); padding: var(--space-5);
}

.plan-review { padding: 14px 0; }

.plan-review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.plan-review__stars { display: inline-flex; gap: 2px; }
.plan-review__stars i { color: var(--text-muted); font-size: 0.8rem; }
.plan-review__stars i.active { color: var(--accent-amber); }
.plan-review__title { margin: 0; font-size: 0.95rem; }
.plan-review__content { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; margin: 0 0 8px; }
.plan-review__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); }
.plan-review__verified { color: var(--accent-teal, #14b8a6); font-weight: 600; }
.plan-reviews-empty { text-align: center; color: var(--text-muted); margin: 0 0 var(--space-6); }

.plan-review-form-wrap {
    margin-top: var(--space-7); padding: var(--space-6);
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card);
}
.plan-review-form__title { margin: 0 0 6px; font-size: 1.05rem; }
.plan-review-form__note { margin: 0 0 var(--space-5); color: var(--text-muted); font-size: 0.85rem; }
.plan-review-form__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 14px; margin-bottom: 14px;
}
.plan-review-form .form-group { margin-bottom: 14px; }
.plan-review-form label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 5px; }
.plan-review-form input, .plan-review-form select, .plan-review-form textarea { width: 100%; }
.plan-review-form .form-hint { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); }
/* Pot de miel : hors flux et hors lecteur d'ecran, mais rempli par les bots. */
.plan-review-form__hp { position: absolute; right: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- NEWSLETTER --- */
.newsletter-section {
    background: var(--bg-surface);
}
.newsletter-box {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 48px;
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow);
}
[data-theme="light"] .newsletter-box {
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
}
.newsletter-box::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
    background: linear-gradient(-90deg, var(--primary), var(--accent-teal), var(--primary));
}
.newsletter-box__content { flex: 1; min-width: 280px; }
.newsletter-box__content h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.newsletter-box__content p { color: var(--text-secondary); }
.newsletter-form { flex: 1; min-width: 300px; }
.newsletter-form__group {
    display: flex; gap: 8px;
}
.newsletter-form__group input {
    flex: 1; padding: 14px 18px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-primary);
    font-family: inherit; font-size: 0.9rem;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
[data-theme="light"] .newsletter-form__group input {
    background: #f0f4f8; border-color: #c6cfda; color: #1e293b;
}
[data-theme="light"] .newsletter-form__group input::placeholder { color: #94a3b8; }
.newsletter-form__group input::placeholder { color: var(--text-muted); }
.newsletter-form__group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,0.18); }
[data-theme="light"] .newsletter-form__group input:focus { background: #fff; }
.newsletter-form__group .btn { white-space: nowrap; }

/* --- CONTACT --- */
.contact-grid {
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: start;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group input, .form-group textarea, .form-group select, .form-control {
    padding: 14px 16px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text-primary); font-family: inherit; font-size: 0.9rem;
    transition: all var(--transition); width: 100%;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus, .form-control:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.form-group textarea { resize: vertical; min-height: 120px; }
/* Select : flèche custom (la flèche native cassait le thème sombre) */
.form-group select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer; padding-left: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 14px center; background-size: 18px;
}
.form-group select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Les options du menu deroulant heritent du fond sombre (sinon blanc natif) */
.form-group select option { background: var(--bg-card, #0f172a); color: var(--text-primary, #e2e8f0); }

.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-card { display: flex; align-items: center; gap: 16px; padding: 20px; }
.contact-card__icon {
    width: 44px; height: 44px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: rgba(14,165,233,0.1); color: var(--primary); font-size: 1.1rem; flex-shrink: 0;
}
.contact-card__content h3 { font-size: 0.85rem; font-weight: 700; margin-bottom: 2px; }
.contact-card__content a, .contact-card__content p { color: var(--text-secondary); font-size: 0.85rem; }

/* --- APPS GRID --- */
.apps-grid {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}
.app-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 12px; width: 110px; text-align: center;
}
.app-card__icon { font-size: 2rem; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
.app-card__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.app-card__name { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-align: center; }

/* --- FOOTER --- */
.footer {
    background: var(--bg-surface); border-top: 1px solid var(--border);
    padding: 64px 0 32px;
}
.footer__grid {
    display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px;
    margin-bottom: 48px;
}
.footer__brand { text-align: right; }
.footer__brand a { display: inline-block; }
.footer__brand img, .footer__logo-img { margin-bottom: 16px; height: auto; width: 180px; max-height: 60px; object-fit: contain; display: block; }
.footer__brand p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; margin-bottom: 20px; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
    width: 38px; height: 38px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); color: var(--text-secondary);
    border: 1px solid var(--border); font-size: 1rem;
    transition: all var(--transition);
}
.footer__social a:hover { color: var(--primary); border-color: var(--primary); }

.footer__col h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; color: var(--text-primary); }
.footer__col a {
    display: block; padding: 4px 0; color: var(--text-secondary);
    font-size: 0.875rem; transition: color var(--transition);
}
.footer__col a:hover { color: var(--primary-light); }

.footer__bottom {
    border-top: 1px solid var(--border); padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer__bottom p { font-size: 0.8rem; color: var(--text-muted); }
.footer__contact { display: flex; gap: 20px; }
.footer__contact a { color: var(--text-muted); font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
.footer__contact a:hover { color: var(--primary-light); }

/* --- 404 --- */
.error-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--navbar-h) + 40px) 0; }
.error-page__content { max-width: 640px; margin: 0 auto; }
.error-page__code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 18vw, 10rem); font-weight: 700; line-height: 1;
    background: linear-gradient(-135deg, var(--primary), var(--accent-teal));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    letter-spacing: -0.05em; margin-bottom: 8px;
}
.error-page h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 12px; color: var(--text-primary); font-weight: 800; }
.error-page p { color: var(--text-secondary); margin: 0 0 32px; font-size: 1.05rem; line-height: 1.6; }
.error-page__actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 48px;
}
.error-page__suggest { padding-top: 32px; border-top: 1px solid var(--border); }
.error-page__suggest-label {
    font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.error-page__links {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.error-page__links a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: 1px solid var(--border);
    border-radius: var(--radius-full); color: var(--text-secondary);
    font-size: 0.9rem; font-weight: 500;
    transition: all var(--transition); background: var(--bg-card);
    text-decoration: none;
}
.error-page__links a:hover {
    border-color: var(--primary); color: var(--primary-text);
    background: var(--bg-card-hover); transform: translateY(-2px);
}
.error-page__links a i { color: var(--primary); font-size: 0.9rem; }

/* --- AUTH --- */
.auth-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    position: relative; padding: 40px;
}
.auth-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 40px;
    width: 100%; max-width: 420px; position: relative; z-index: 1;
}
.auth-card__header { text-align: center; margin-bottom: 28px; }
.auth-card__header img { height: 36px; margin: 0 auto 12px; }
.auth-card__header h1 { font-size: 1.3rem; font-weight: 700; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-card__footer { text-align: center; margin-top: 20px; }
.auth-card__footer a { color: var(--text-muted); font-size: 0.85rem; }
.auth-card__footer a:hover { color: var(--primary-text); }

/* --- ALERTS --- */
.alert { padding: 14px 18px; border-radius: var(--radius); font-size: 0.875rem; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.alert--error { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.alert--success { background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.2); }

/* --- BACK TO TOP --- */
.back-to-top {
    position: fixed; bottom: 24px; left: 24px; z-index: 100;
    width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(20px); pointer-events: none;
    transition: all var(--transition);
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-2px); }

/* --- TOAST --- */
.toast-container { position: fixed; top: 90px; left: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; }
.toast {
    padding: 14px 20px; border-radius: var(--radius);
    font-size: 0.875rem; font-weight: 500; min-width: 280px;
    display: flex; align-items: center; gap: 10px;
    animation: toastIn 0.35s var(--ease-out) forwards;
    box-shadow: var(--shadow-xl);
}
.toast--success { background: #047857; color: #fff; }
.toast--error { background: #dc2626; color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
.toast.removing { animation: toastOut 0.35s var(--ease-out) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(-40px); } }

/* --- EMPTY STATE --- */
.empty-state {
    text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.empty-state i { font-size: 3rem; margin-bottom: 16px; display: block; }
.empty-state p { margin-bottom: 20px; }

/* --- SCROLL REVEAL --- */
/* Scroll Reveal — Progressive Enhancement
   Elements are FULLY VISIBLE by default (no opacity:0 anywhere).
   JS adds .will-reveal to below-fold items, then .revealed on scroll. */
[data-reveal] { /* visible by default — DO NOT add opacity:0 here */ }
/* L'apparition anime `translate`, PAS `transform`.
   Avant, elle posait transform: translateY(0) !important une fois l'element
   revele — et comme tout ce qui est sous la ligne de flottaison passe par la,
   ce !important annulait definitivement le soulevement au survol de la
   plupart des cartes de la page. Selon qu'une carte etait au-dessus ou
   au-dessous de la ligne de flottaison, elle reagissait au survol ou pas :
   une incoherence qui ne dependait meme pas du type de carte.
   `translate` est une propriete independante de `transform` (Transforms
   niveau 2) : les deux se composent au lieu de se battre, et plus aucun
   !important n'est necessaire. La ou elle n'est pas supportee, l'element
   apparait simplement en fondu. */
html.js-reveal [data-reveal].will-reveal {
    opacity: 0;
    translate: 0 20px;
}
html.js-reveal [data-reveal].will-reveal.revealed {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
    .services__grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .plans-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .plans-grid--full { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Seuil du menu burger. 1100px etait trop bas : avec 6 entrees de premier
   niveau plus les 4 actions (recherche, langue, theme, connexion), la barre
   restait serree jusqu.a ~1240px, les liens venant toucher les actions.
   Ajustable ici d'une seule valeur. */
@media (max-width: 1240px) {
    .navbar__nav { display: none; }
    .navbar__burger { display: flex; width: 44px; height: 44px; padding: 10px; justify-content: center; }
    .mobile-nav__close { width: 44px; height: 44px; }
    .navbar__cta span { display: none; }
    .navbar__lang-code { display: none; }
    .navbar__lang-arrow { display: none; }
    .navbar__actions { gap: 4px; flex-shrink: 0; }
    .navbar__inner { gap: 6px; justify-content: space-between; }
    .navbar__logo img { height: 36px; min-width: 80px; max-width: 140px; }
    .navbar__search-toggle { padding: 6px; min-width: 44px; min-height: 44px; }
    .navbar__theme-toggle { width: 40px; height: 40px; font-size: 0.8rem; }
    .navbar__cta { padding: 10px 14px; font-size: 0.75rem; min-height: 44px; }
    .mobile-nav__link { padding: 13px 14px; min-height: 44px; }
    /* Ne touche plus au padding : il vient des tokens --hero-top/--hero-bottom,
       ajustes plus bas en un seul endroit. Cette regle imposait 50px de bas au
       hero de la home alors que category-hero en recevait 28 — d'ou deux
       rythmes differents sur mobile. */
    .hero { min-height: auto; }
    .hero__title { font-size: 2.2rem; }
    .hero__subtitle { font-size: 1rem; }
    .hero__badge { font-size: 0.78rem; }
    .section { padding: var(--space-8) 0; }
    .section__header { margin-bottom: var(--space-7); }
    .section__title { font-size: 1.6rem; }
    .services__grid { grid-template-columns: 1fr; }
    .plans-grid { grid-template-columns: 1fr !important; max-width: 420px; margin-right: auto; margin-left: auto; }
    .plans-grid--full { grid-template-columns: 1fr !important; max-width: 420px; margin-right: auto; margin-left: auto; }
    .plan-card { max-width: 100%; }
    .features-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .newsletter-box { flex-direction: column; padding: 28px 24px; gap: 20px; }
    .newsletter-box__content { min-width: 0; text-align: center; }
    .newsletter-box__content h2 { font-size: 1.25rem; }
    .newsletter-form { min-width: 0; width: 100%; }
    .newsletter-form__group { flex-direction: column; }
    .newsletter-form__group .btn { width: 100%; justify-content: center; }
    .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .footer__bottom { flex-direction: column; text-align: center; gap: 8px; }
    .footer__contact { justify-content: center; }
    .plans-header { flex-direction: column; align-items: flex-start; }
    .billing-toggle { margin-bottom: 20px; }
    .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .stats-bar__item { padding: 16px; }
    .faq-item__question span { font-size: 0.9rem; }
    .page-hero { padding: 60px 0 30px; }
    .page-hero__title { font-size: 1.7rem; }
body.no-scroll .announcement-bar { display: none; }
    .mobile-nav__langs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
    .mobile-nav__lang-btn {
        display: flex; align-items: center; justify-content: center; gap: 4px;
        padding: 10px 4px; min-height: 44px; border-radius: var(--radius);
        font-size: 0.8rem; font-weight: 600;
        background: var(--bg-elevated); color: var(--text-secondary);
        border: 1px solid var(--border); transition: all var(--transition);
        text-decoration: none;
    }
    .mobile-nav__lang-btn.active { background: rgba(14,165,233,0.12); color: var(--primary-text); border-color: var(--primary); }
}
@media (max-width: 1400px) {
    .navbar__inner { gap: 10px; }
    .navbar__nav { gap: 0; }
    .navbar__link { padding: 6px 8px; font-size: 0.78rem; }
    .navbar__actions { gap: 6px; }
    .navbar__lang-code { display: none; }
    .navbar__cta span { display: none; }
    .navbar__cta { padding: 8px 12px; }
}
@media (max-width: 1240px) {
    .navbar__theme-toggle { display: none; }
}
/* Navbar plus basse en mobile = gain d'espace vertical (LCP) */
@media (max-width: 768px) {
    :root { --navbar-h: 64px; }
}
@media (max-width: 480px) {
    :root { --navbar-h: 56px; }
}
@media (max-width: 480px) {
    .hero__title { font-size: 1.75rem; }
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; justify-content: center; }
    .container { padding: 0 16px; }
    .section__title { font-size: 1.35rem; }
    .stats-bar__grid { grid-template-columns: 1fr 1fr; }
    .stats-bar__value { font-size: 1.3rem; }
    .plan-card { padding: 24px 18px; }
    .billing-toggle__label { font-size: 0.78rem; }
    .cookie-banner__inner { flex-direction: column; text-align: center; }
    .cookie-banner__actions { justify-content: center; }
    .auth-page { padding: 20px 14px; }
    .auth-card { padding: 28px 22px; }
    .auth-card__header img { height: 30px; }
    .navbar__logo img { height: 30px; min-width: 0; max-width: 110px; }
    .navbar__theme-toggle { display: none; }
    .navbar__lang-btn { padding: 8px; min-width: 44px; min-height: 44px; justify-content: center; }
}

/* ================================================================
   ADDITIONAL STATES & COMPONENTS
   ================================================================ */

/* No-scroll body state */
body.no-scroll { overflow: hidden; }

/* Burger active (X shape) */
.navbar__burger.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 5px); }
.navbar__burger.active span:nth-child(2) { opacity: 0; }
.navbar__burger.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -5px); }

/* Toast close button */
.toast { display: flex; align-items: center; gap: 10px; }
.toast__close {
    background: none; border: none; color: inherit; cursor: pointer;
    opacity: 0.7; padding: 4px; margin-right: auto; font-size: 0.85rem;
    transition: opacity 0.2s;
}
.toast__close:hover { opacity: 1; }

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed; bottom: 0; right: 0; left: 0; z-index: 9999;
    background: var(--bg-card); border-top: 1px solid var(--border);
    padding: 16px 24px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner__inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.cookie-banner__inner p {
    font-size: 0.875rem; color: var(--text-secondary); margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.cookie-banner__inner p i { color: var(--primary); font-size: 1.1rem; }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Field validation states */
.form-control.error,
input.error,
textarea.error,
select.error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.form-control.valid,
input.valid,
textarea.valid,
select.valid {
    border-color: var(--success) !important;
}
.field-error {
    display: none;
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 4px;
}

/* ── Setup Banner ─────────────────────────────── */
.setup-banner__box {
    max-width: 600px; margin: 0 auto; text-align: center;
    background: var(--bg-card); border: 1px solid var(--border-accent);
    border-radius: var(--radius-xl); padding: 48px 40px;
}
.setup-banner__icon { font-size: 3rem; color: var(--primary); margin-bottom: 16px; }
.setup-banner__box h2 { font-size: 1.5rem; margin-bottom: 12px; }
.setup-banner__box p { color: var(--text-secondary); margin-bottom: 8px; line-height: 1.6; }
.setup-banner__box code { background: var(--bg-surface); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }

/* ── Custom Pages ─────────────────────────────── */
.page-hero { padding: 100px 0 50px; background: var(--bg-surface); border-bottom: 1px solid var(--border); margin-top: var(--navbar-h); text-align: center; }
.page-hero__title { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; margin-bottom: 8px; }
.page-hero__desc { color: var(--text-secondary); font-size: 1rem; }
.page-content { font-size: 1rem; line-height: 1.8; color: var(--text-secondary); }
.page-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--text-primary); }
.page-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--text-primary); }
.page-content p { margin-bottom: 1rem; }
.page-content a { color: var(--primary-text); text-decoration: underline; }
.page-content ul, .page-content ol { margin: 1rem 0; padding-right: 1.5rem; }
.page-content li { margin-bottom: 0.5rem; }

/* ── Admin Form Label (used in admin forms) ───── */
.admin-form-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
    .hero__glow { animation: none !important; }
}

/* ============================================================
   HOUSING CONFIGURATOR
   ============================================================ */
.housing-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.housing-line:last-child { border-bottom: none; }
.housing-line__info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.housing-line__label { font-weight: 500; }
.housing-line__info small { color: var(--text-muted); font-size: 0.8rem; }
.housing-line__price {
    font-size: 0.82rem;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
}
.housing-line__control { flex-shrink: 0; }

/* Quantity Control */
.qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.qty-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.qty-btn:hover { background: var(--primary); color: #fff; }
.qty-input {
    width: 50px;
    text-align: center;
    border: none;
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    height: 36px;
    font-family: inherit;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 26px;
    transition: 0.2s;
}
.toggle-switch__slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    right: 2px;
    bottom: 2px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: 0.2s;
}
.toggle-switch input:checked + .toggle-switch__slider {
    background: var(--primary);
    border-color: var(--primary);
}
.toggle-switch input:checked + .toggle-switch__slider::before {
    transform: translateX(-22px);
    background: #fff;
}

/* Alert success inline */
.alert--success {
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    color: #10b981;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

/* Form label */
.form-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    display: block;
}

@media (max-width: 768px) {
    .housing-line { flex-direction: column; align-items: flex-start; gap: 8px; }
    .housing-line__control { align-self: flex-end; }
}


/* ============================================================
   FLAG IMAGES (real flags via flagcdn.com)
   ============================================================ */
.flag-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0,0,0,0.3);
}
.flag-icon--fr { background-image: url('https://flagcdn.com/w40/fr.png'); }
.flag-icon--gb { background-image: url('https://flagcdn.com/w40/gb.png'); }
.flag-icon--es { background-image: url('https://flagcdn.com/w40/es.png'); }
.flag-icon--de { background-image: url('https://flagcdn.com/w40/de.png'); }
.flag-icon--it { background-image: url('https://flagcdn.com/w40/it.png'); } /* italien */
.flag-icon--nl { background-image: url('https://flagcdn.com/w40/nl.png'); } /* néerlandais */
.flag-icon--cn { background-image: url('https://flagcdn.com/w40/cn.png'); } /* chinois */
.flag-icon--ru { background-image: url('https://flagcdn.com/w40/ru.png'); } /* russe */
.flag-icon--pt { background-image: url('https://flagcdn.com/w40/pt.png'); } /* portugais */
.flag-icon--pl { background-image: url('https://flagcdn.com/w40/pl.png'); } /* polonais */
.flag-icon--jp { background-image: url('https://flagcdn.com/w40/jp.png'); } /* japonais */
.flag-icon--sa { background-image: url('https://flagcdn.com/w40/sa.png'); } /* arabe */
.flag-icon--se { background-image: url('https://flagcdn.com/w40/se.png'); } /* suédois */
.flag-icon--dk { background-image: url('https://flagcdn.com/w40/dk.png'); } /* danois */
.flag-icon--fi { background-image: url('https://flagcdn.com/w40/fi.png'); } /* finnois */
.flag-icon--no { background-image: url('https://flagcdn.com/w40/no.png'); } /* norvégien */
.flag-icon--tr { background-image: url('https://flagcdn.com/w40/tr.png'); } /* turc */
.flag-icon--kr { background-image: url('https://flagcdn.com/w40/kr.png'); } /* coréen */
.flag-icon--cz { background-image: url('https://flagcdn.com/w40/cz.png'); } /* tchèque */
.flag-icon--ro { background-image: url('https://flagcdn.com/w40/ro.png'); } /* roumain */
.flag-icon--hu { background-image: url('https://flagcdn.com/w40/hu.png'); } /* hongrois */
.flag-icon--ua { background-image: url('https://flagcdn.com/w40/ua.png'); } /* ukrainien */
.flag-icon--gr { background-image: url('https://flagcdn.com/w40/gr.png'); } /* grec */
.flag-icon--il { background-image: url('https://flagcdn.com/w40/il.png'); } /* hébreu */
.navbar__lang-btn .flag-icon { margin-left: 2px; }

/* ============================================================
   NEWSLETTER SECTION (re-added)
   ============================================================ */
.newsletter-section {
    padding: var(--space-9) 0;
    background: linear-gradient(-135deg, rgba(14,165,233,0.08) 0%, rgba(20,184,166,0.08) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
[data-theme="light"] .newsletter-section {
    background: linear-gradient(-135deg, rgba(14,165,233,0.06) 0%, rgba(20,184,166,0.06) 100%);
}
.newsletter-inner {
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
}
.newsletter-inner h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; }
.newsletter-inner p { color: var(--text-secondary); margin-bottom: 24px; font-size: 0.95rem; }
.newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
}
.newsletter-form input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
}
.newsletter-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,0.18); }
.newsletter-form button {
    padding: 12px 24px;
    white-space: nowrap;
}
@media (max-width: 540px) {
    .newsletter-form { flex-direction: column; }
}

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal-page { padding: 40px 0 60px; }
.legal-page__header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.legal-page__header h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.legal-page__meta { color: var(--text-muted); font-size: 0.85rem; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.legal-page__actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; }
.legal-page__content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 0.95rem;
}
.legal-page__content h2 { font-size: 1.3rem; font-weight: 700; margin: 32px 0 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.legal-page__content h3 { font-size: 1.1rem; font-weight: 600; margin: 20px 0 8px; }
.legal-page__content p { margin-bottom: 12px; color: var(--text-secondary); }
.legal-page__content ul, .legal-page__content ol { margin: 8px 24px 16px 0; color: var(--text-secondary); }
.legal-page__content li { margin-bottom: 4px; }
.legal-page__content strong { color: var(--text-primary); }
.legal-page__content hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.legal-page__content code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }
.legal-page__content a { color: var(--primary-text); text-decoration: underline; }
@media print {
    .navbar, .footer, .back-to-top, .legal-page__actions, .mobile-nav { display: none !important; }
    .legal-page { padding: 0; }
    .legal-page__content { max-width: 100%; }
}

/* --- ANNOUNCEMENT BAR --- */
.announcement-bar {
    background: linear-gradient(-90deg, var(--primary), var(--accent-teal));
    color: #fff; text-align: center; padding: 10px 16px; font-size: 0.85rem; font-weight: 500;
    position: fixed; top: 0; right: 0; left: 0; z-index: 1100; line-height: 1.4;
}
.announcement-bar a { color: #fff; text-decoration: underline; font-weight: 700; }
.announcement-bar__close {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; font-size: 1.1rem; padding: 4px 8px;
}
.announcement-bar__close:hover { color: #fff; }
body.has-announcement .navbar { top: var(--announcement-h, 40px); }
body.has-announcement main { padding-top: var(--announcement-h, 40px); }

/* --- PROMO BADGE --- */
.promo-badge { display: inline-block; background: var(--accent-amber); color: #000; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-right: 8px; }

/* --- CUSTOM FORMS --- */
.form-page { max-width: 680px; margin: 0 auto; }
.form-page .form-group { margin-bottom: 20px; }
.form-page .form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.form-page .form-group input, .form-page .form-group select, .form-page .form-group textarea {
    width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 0.9rem;
    transition: border-color var(--transition);
}
.form-page .form-group input:focus, .form-page .form-group select:focus, .form-page .form-group textarea:focus {
    border-color: var(--primary); outline: none;
}
.form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.form-error { color: var(--danger); font-size: 0.8rem; margin-top: 4px; }

/* --- BI ANALYTICS CARDS --- */
.bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; }
.bi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.bi-card__title { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.bi-card__value { font-size: 2rem; font-weight: 800; }
.bi-card__change { font-size: 0.8rem; margin-top: 4px; }
.bi-card__change--up { color: var(--success); }
.bi-card__change--down { color: var(--danger); }
.bi-table { width: 100%; border-collapse: collapse; }
.bi-table th, .bi-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.bi-table th { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; }
.bi-export-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

/* --- ACCESSIBILITY IMPROVEMENTS --- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.skip-link { position: absolute; top: -100%; right: 50%; transform: translateX(50%); background: var(--primary); color: #fff; padding: 8px 16px; border-radius: 0 0 8px 8px; z-index: 9999; font-weight: 600; font-size: 0.9rem; }
.skip-link:focus { top: 0; }

/* --- RESPONSIVE FOOTER --- */
@media (max-width: 768px) {
    .footer__grid { grid-template-columns: 1fr !important; gap: 24px; }
    .footer__brand img, .footer__logo-img { width: 150px; max-height: 50px; }
    .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
    .footer__contact { justify-content: center; }
}
@media (max-width: 480px) {
    .footer__brand img, .footer__logo-img { width: 130px; max-height: 45px; }
    .footer__col h4 { font-size: 0.85rem; }
    .footer__col a { font-size: 0.82rem; padding: 4px 0; }
}

/* --- RESPONSIVE ANNOUNCEMENT --- */
@media (max-width: 768px) {
    .announcement-bar { font-size: 0.78rem; padding: 8px 12px 8px 40px; }
    .announcement-bar__close { left: 8px; }
}

/* --- SEARCH BAR --- */
.navbar__search { position: relative; }
.navbar__search-toggle { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; padding: 8px; border-radius: var(--radius); transition: all var(--transition); }
.navbar__search-toggle:hover { color: var(--primary); background: rgba(14,165,233,0.08); }
.navbar__search-panel { display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 2000; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); padding: 10vh 16px 0; flex-direction: column; align-items: center; justify-content: flex-start; }
.navbar__search-panel.open { display: flex; animation: fadeIn 0.2s ease; }
.navbar__search-input-wrap { width: 100%; max-width: 600px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; align-items: center; padding: 12px 18px; gap: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.3); }
.navbar__search-input-wrap i { color: var(--text-muted); font-size: 1rem; flex-shrink: 0; }
.navbar__search-input-wrap input { flex: 1; background: none; border: none; outline: none; font-size: 1rem; color: var(--text-primary); font-family: inherit; }
.navbar__search-input-wrap input::placeholder { color: var(--text-muted); }
.navbar__search-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; padding: 4px; }
.navbar__search-close:hover { color: var(--text-primary); }
.navbar__search-results { width: 100%; max-width: 600px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-top: 8px; max-height: 50vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2); display: none; }
.navbar__search-results.has-results { display: block; }
.search-result-item { display: flex; align-items: center; gap: 14px; padding: 12px 18px; text-decoration: none; color: var(--text-primary); transition: background var(--transition); border-bottom: 1px solid var(--border); }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(14,165,233,0.06); }
.search-result-item__icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #fff; flex-shrink: 0; }
.search-result-item__text { flex: 1; min-width: 0; }
.search-result-item__title { font-weight: 600; font-size: 0.88rem; }
.search-result-item__desc { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item__type { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; background: var(--bg-surface); color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.search-no-results { padding: 24px 18px; text-align: center; color: var(--text-muted); font-size: 0.88rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- NEWS / ANNOUNCEMENTS --- */
.news-feed { display: flex; flex-direction: column; gap: 24px; }
/* Habillage : fondation commune. La disposition, elle, est propre a cette
   carte : image a gauche, corps a droite, donc flex-direction:row et un
   rognage au rayon pour l'image. La marge interne vit dans __body. */
.news-card { overflow: hidden; flex-direction: row; padding: 0; animation: fadeInUp 0.4s ease both; }
.news-card__image { width: 240px; min-height: 160px; flex-shrink: 0; overflow: hidden; }
.news-card__image img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { flex: 1; padding: 24px; display: flex; flex-direction: column; }
.news-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.news-card__meta time { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.news-card__tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: rgba(14,165,233,0.1); color: var(--primary-text); }
.news-card__title { font-size: 1.06rem; font-weight: 700; margin-bottom: 8px; line-height: 1.35; letter-spacing: -0.01em; }
.news-card__title a { color: var(--text-primary); text-decoration: none; }
.news-card__title a:hover { color: var(--primary-text); }
.news-card__desc { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 14px; flex: 1; }
.news-card__link { font-size: 0.85rem; font-weight: 600; color: var(--primary-text); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.news-card__link:hover { gap: 10px; }
@media (max-width: 768px) {
    .news-card { flex-direction: column; }
    .news-card__image { width: 100%; min-height: 140px; max-height: 200px; }
    .news-card__body { padding: 18px; }
    .news-card__title { font-size: 1rem; }
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* --- PAGE HERO COMPACT --- */
.page-hero--compact { padding: 60px 0 32px; text-align: center; background: linear-gradient(-135deg, var(--bg-surface), var(--bg-card)); margin-top: var(--navbar-h); border-bottom: 1px solid var(--border); }
.page-hero--compact .page-hero__title { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; }
.page-hero--compact .page-hero__subtitle { font-size: 0.95rem; color: var(--text-secondary); }

/* --- DEDICATED SERVERS FILTERS --- */
.dedicated-filters { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 24px; }
.dedicated-filters__row { display: flex; gap: 20px; flex-wrap: wrap; align-items: end; }
.dedicated-filters__row + .dedicated-filters__row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.dedicated-filters__group { display: flex; flex-direction: column; gap: 6px; }
.dedicated-filters__group label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dedicated-filters__group--range { flex: 1; min-width: 200px; }
.dedicated-filters__group--range input[type=range] { width: 100%; accent-color: var(--primary); }
.dedicated-filters__btns { display: flex; gap: 4px; flex-wrap: wrap; }
.dedicated-filters__btns button { padding: 5px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all var(--transition); }
.dedicated-filters__btns button:hover { border-color: var(--primary); color: var(--primary-text); }
.dedicated-filters__btns button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.dedicated-filters__select { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary); font-size: 0.82rem; font-family: inherit; }
.dedicated-filters__count { margin-right: auto; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; align-self: center; }
.dedicated-filters__count span { font-weight: 700; color: var(--primary-text); }

/* --- DEDICATED CARDS --- */
/* Habillage : fondation commune. overflow:hidden reste : la carte contient
   une colonne de prix a fond plein qui doit etre rognee par le rayon. */
.dedicated-card { margin-bottom: 16px; overflow: hidden; padding: 0; }
.dedicated-card__inner { display: grid; grid-template-columns: 1fr 200px; gap: 20px; padding: 24px; align-items: center; }
.dedicated-card__header { margin-bottom: 10px; }
.dedicated-card__header h3 { font-size: 1.06rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 8px 0; }
.dedicated-card__badges { display: flex; gap: 6px; flex-wrap: wrap; }
/* Base badge partagee : inline-flex + tokens unifies (radius full, casse,
   tracking). Les variantes --soft/--solid/--outline definissent l'habillage.
   --badge-color reste pilotable inline (badges dynamiques dedicated-card). */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--space-1) 10px; border-radius: var(--radius-full);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; line-height: 1.4;
    background: color-mix(in srgb, var(--badge-color, #6b7280) 15%, transparent);
    color: var(--badge-color, #6b7280);
}
.badge--soft {
    background: rgba(14,165,233,0.12); color: var(--primary-text);
    border: 1px solid rgba(14,165,233,0.25);
}
.badge--solid {
    background: linear-gradient(-135deg, var(--primary), var(--accent-teal));
    color: #fff; border: 1px solid transparent;
}
.badge--outline { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); }
.dedicated-card__desc { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; margin-bottom: 14px; }
.dedicated-card__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.dedicated-card__grid > div { display: flex; align-items: center; gap: 8px; }
.dedicated-card__grid i { color: var(--primary); width: 18px; text-align: center; font-size: 0.85rem; }
.dedicated-card__grid small { display: block; color: var(--text-muted); font-size: 0.7rem; }
.dedicated-card__grid strong { font-size: 0.82rem; font-weight: 600; }
.dedicated-card__bench { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.dedicated-card__bench small { color: var(--text-muted); font-size: 0.75rem; }
.bench-bar { flex: 1; max-width: 180px; height: 5px; background: var(--bg-surface); border-radius: 3px; overflow: hidden; }
.bench-bar div { height: 100%; background: linear-gradient(-90deg, var(--primary), var(--accent-teal)); border-radius: 3px; }
.dedicated-card__bench strong { font-size: 0.78rem; font-weight: 600; }
.dedicated-card__pricing { text-align: center; min-width: 160px; }
.dedicated-card__price { font-size: 1.8rem; font-weight: 800; color: var(--primary-text); line-height: 1; }
.dedicated-card__period { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.dedicated-card__setup { font-size: 0.72rem; color: var(--text-muted); }
@media (max-width: 768px) {
    .dedicated-card__inner { grid-template-columns: 1fr !important; }
    .dedicated-card__pricing { text-align: right; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .dedicated-filters__row { flex-direction: column; gap: 12px; }
    .dedicated-filters__count { margin-right: 0; }
}

.mobile-nav__group-title {
    display: block;
    margin-top: 10px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.mobile-nav__group-title i { margin-left: 6px; color: var(--primary); }

/* =====================================================================
   ACCESSIBILITY / SEO UTILITIES
   ===================================================================== */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.visually-hidden:focus,
.sr-only:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}
/* Improve LCP: prevent CLS on hero by reserving space */
.hero__title { min-height: 1.2em; }
/* Better link focus styles for a11y/SEO */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--primary, #0ea5e9);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =====================================================================
   SEO LANDING PAGES — typography + comparison tables
   ===================================================================== */
.seo-prose {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.75;
}
.seo-prose p { margin: 0 0 16px; }
.seo-prose p:last-child { margin-bottom: 0; }
.seo-prose strong { color: var(--text-primary); font-weight: 700; }
.seo-prose a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.seo-prose a:hover { color: var(--primary-light); }
.seo-prose code {
    background: var(--bg-elevated);
    color: var(--primary-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.875em;
}
.seo-prose ul, .seo-prose ol {
    color: var(--text-secondary);
    line-height: 1.85;
    margin: 0 0 16px;
}
.seo-prose li { margin-bottom: 6px; }
.seo-prose h2, .seo-prose h3 {
    color: var(--text-primary);
    margin-top: 28px;
    margin-bottom: 12px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.comparison-table th,
.comparison-table td {
    padding: 14px 18px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    vertical-align: top;
}
.comparison-table th {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.comparison-table tbody tr { transition: background var(--transition); }
.comparison-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
[data-theme="light"] .comparison-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
.comparison-table tbody tr:hover { background: var(--bg-card-hover); }
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-table td:first-child { color: var(--text-primary); font-weight: 600; }
.comparison-table-wrap {
    border-radius: var(--radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.comparison-table-wrap .comparison-table { min-width: 560px; }

/* Variant "pricing" — grilles tarifaires (ex. page revendeur VPS).
   Colonne 2 (prix d'achat) mise en avant, chiffres centrés, marges en
   pastilles .price-chip posées dans les cellules par la config. */
.comparison-table--pricing th:not(:first-child),
.comparison-table--pricing td:not(:first-child) { text-align: center; }
.comparison-table--pricing td { vertical-align: middle; }
.comparison-table--pricing td:nth-child(2) {
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--text-primary);
    background: rgba(14, 165, 233, 0.06);
}
.comparison-table--pricing th:nth-child(2) { color: var(--primary); }
.comparison-table--pricing td:nth-child(3) { color: var(--text-muted); }
.price-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #10b981;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}
.price-chip small { font-weight: 600; opacity: 0.8; }
.price-chip--muted {
    background: rgba(148, 163, 184, 0.10);
    border-color: rgba(148, 163, 184, 0.25);
    color: var(--text-muted);
}

/* =====================================================================
   TEAM CARDS - premium founder/team display with photos
   ===================================================================== */
.team-section { padding-top: var(--space-5); }
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1140px;
    margin: 0 auto;
    align-items: stretch;
}
/* Habillage : fondation commune. Marge haute plus genereuse que les autres
   cartes, assumee : la photo ronde a besoin d'air au-dessus.
   height:100% a saute — une hauteur explicite annule l'etirement flex, et les
   cartes d'une meme rangee retombaient a des hauteurs differentes. */
.team-card {
    padding: var(--space-7) var(--space-6) var(--space-6);
    overflow: hidden;
    align-items: center;
    text-align: center;
}
.team-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 96px;
    background: linear-gradient(-135deg, rgba(14, 165, 233, 0.16), rgba(20, 184, 166, 0.10));
    z-index: 0;
    pointer-events: none;
}
/* Survol : convention commune (bordure seule). Ce bloc redeclarait un
   soulevement de 6 px sur une carte qui n'est pas cliquable. */
.team-card__photo-wrap {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: var(--space-6);
    z-index: 1;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--bg-card), 0 0 0 6px var(--primary),
                0 0 0 7px rgba(20, 184, 166, 0.45), var(--shadow-lg);
}
.team-card__photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--bg-elevated);
}
.team-card__role-badge {
    position: absolute;
    bottom: -12px;
    right: 50%;
    transform: translateX(50%);
    background: linear-gradient(-135deg, var(--primary), var(--accent-teal));
    color: #fff;
    padding: 6px 15px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
.team-card__body {
    width: 100%;
    margin-top: var(--space-1);
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.team-card__head {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.team-card__name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    letter-spacing: -0.015em;
}
.team-card__role {
    font-size: 0.92rem;
    color: var(--primary-text);
    font-weight: 600;
    margin: 0;
}
.team-card__since {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: var(--space-1) 0 0;
}
/* Couleur, corps et interligne : echelle commune. Ne reste que la marge. */
.team-card__bio { margin: 0 0 var(--space-5); }
.team-card__expertise {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin: auto 0 0;
}
.team-card__skill {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-text);
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.22);
    padding: 5px 11px;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}
.team-card__social {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.team-card__social-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
    text-decoration: none;
}
.team-card__social-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}
@media (max-width: 1024px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); max-width: 760px; }
    .team-card__head { min-height: 0; }
}
@media (max-width: 720px) {
    .team-grid { grid-template-columns: 1fr; gap: var(--space-5); max-width: 420px; }
    .team-card__photo-wrap { width: 140px; height: 140px; }
}

/* =====================================================================
   UX/UI IMPROVEMENTS v2 (active nav, trust bar, ghost btn, a11y, CWV)
   ===================================================================== */

/* --- 1. Active page indicator (navbar) --- */
.navbar__link--active { color: var(--primary-text); position: relative; }
.navbar__link--active::after {
    content: ''; position: absolute; right: 10px; left: 10px; bottom: -2px;
    height: 2px; background: var(--primary); border-radius: 2px;
    animation: navUnderline .3s ease;
}
@keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.navbar__dropdown--active .navbar__dropdown-trigger { color: var(--primary-text); }
.navbar__dropdown--active .navbar__dropdown-trigger::after {
    content: ''; position: absolute; right: 10px; left: 22px; bottom: -2px;
    height: 2px; background: var(--primary); border-radius: 2px;
}
.navbar__dropdown-item--active { color: var(--primary-text); background: rgba(14,165,233,0.06); }

/* --- 2. Trust bar (28px au-dessus navbar) --- */
.trust-bar {
    position: fixed; top: 0; right: 0; left: 0; z-index: 1001;
    height: 28px; background: rgba(6, 10, 19, 0.95);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
    transition: transform .3s ease;
}
[data-theme="light"] .trust-bar {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: rgba(14, 165, 233, 0.2);
}
.trust-bar__inner {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; height: 100%; font-size: 0.7rem;
    color: rgba(226, 232, 240, 0.85); flex-wrap: nowrap; overflow-x: auto;
}
.trust-bar__inner::-webkit-scrollbar { display: none; }
.trust-bar__inner { -ms-overflow-style: none; scrollbar-width: none; }
.trust-bar__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.trust-bar__item i { color: var(--primary); font-size: 0.7rem; }
/* Push navbar de 28px : on garde body sans padding pour ne pas casser les
   pages avec ses calcs (calc(var(--navbar-h) + ...)). On compense par main. */
body:not(.has-announcement) main { padding-top: 28px; }
body:not(.has-announcement) .navbar { top: 28px; }
/* Hide trust bar quand scroll (gain de place visuel) */
.trust-bar.hidden { transform: translateY(-100%); }
/* FIX bug scroll : quand la trust-bar se cache, la navbar doit remonter a
   top:0 (sinon trou de 28px entre le haut de l'ecran et la navbar). La navbar
   transitionne son top en .3s pour matcher la trust-bar. Specificite 0-3-0
   (3 classes) > 0-2-1 de la regle body:not(.has-announcement) .navbar. */
.trust-bar.hidden ~ .navbar { top: 0; transition: top .3s ease, background var(--transition-slow), backdrop-filter var(--transition-slow), box-shadow var(--transition-slow); }
/* Quand un announcement actif est present, la trust-bar est cachee
   (l'announcement-bar pousse deja la navbar via styles existants) */
body.has-announcement .trust-bar { display: none; }
/* Mobile : compacter la trust bar */
@media (max-width: 768px) {
    .trust-bar { height: 24px; }
    .trust-bar__inner { gap: 14px; font-size: 0.65rem; }
    .trust-bar__item:nth-child(4) { display: none; } /* "Sans engagement" hide mobile */
    body:not(.has-announcement) main { padding-top: 24px; }
    body:not(.has-announcement) .navbar { top: 24px; }
}
@media (max-width: 480px) {
    .trust-bar__item:nth-child(2) span,
    .trust-bar__item:nth-child(3) span { display: none; }
}

/* --- 3. Btn ghost (3e CTA hero) --- */
.btn--ghost {
    background: transparent; color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all var(--transition);
}
.btn--ghost:hover {
    color: var(--primary);
    border-color: rgba(14, 165, 233, 0.3);
    background: rgba(14, 165, 233, 0.05);
}
[data-theme="light"] .btn--ghost { color: var(--text-secondary); }
[data-theme="light"] .btn--ghost:hover { color: var(--primary); background: rgba(14, 165, 233, 0.06); }

/* --- 4. CWV : Inter font-display swap + fallback metrics (reduit CLS) --- */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}

/* --- 5. A11y : skip-link plus visible + focus-visible enhanced --- */
.skip-link {
    position: absolute; top: -100px; right: 16px; transform: none;
    z-index: 10000;
    padding: 12px 20px; background: var(--primary); color: #fff;
    font-weight: 600; font-size: 0.95rem; text-decoration: none;
    border-radius: var(--radius);
    transition: top .2s ease;
}
.skip-link:focus, .skip-link:focus-visible {
    top: 16px; right: 16px; transform: none;
    outline: 3px solid #fff; outline-offset: 2px;
    color: #fff;
}
/* Focus-visible enhanced (priorise sur les existants) : anneau 2px visible */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.4);
    border-radius: var(--radius-sm);
}
/* Retire l'outline natif sur souris (le navigateur le gere via focus-visible) */
*:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   NOUVELLES CLASSES BEM (post-refonte) - style coherent DS
   ============================================================ */

/* --- 1. Encart auteur en fin de guide (pages/seo_landing.php) --- */
.seo-author {
    display: flex; align-items: flex-start; gap: var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-6);
    transition: border-color var(--transition);
}
.seo-author:hover { border-color: var(--border-hover); }
.seo-author__icon {
    flex-shrink: 0;
    width: 56px; height: 56px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: rgba(14,165,233,0.1); color: var(--primary);
    font-size: 1.4rem;
}
.seo-author__body { flex: 1; min-width: 0; }
.seo-author__label {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--accent-teal);
    margin-bottom: var(--space-2);
}
.seo-author__name {
    font-family: var(--font-display);
    font-size: var(--fs-md); font-weight: 700; color: var(--text-primary);
    margin-bottom: var(--space-1);
}
.seo-author__role {
    font-size: var(--fs-sm); color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.seo-author__desc {
    color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.7;
    margin-bottom: var(--space-4);
}
.seo-author__link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--primary-text); font-weight: 600; font-size: 0.875rem;
}
.seo-author__link i { transition: transform var(--transition); }
.seo-author__link:hover i { transform: translateX(-4px); }

/* --- 2. Lignes de reassurance sous les CTA (plans.php, category.php) --- */
/* Flux inline, pas flex. En flex, des que le texte passait sur deux lignes le
   span occupait toute la largeur restante et poussait l'icone contre le bord
   gauche de la carte, loin du texte centre : le picto paraissait detache. */
.plan-card__reassurance,
.plan-card__secure-payment {
    display: block; margin-top: var(--space-2);
    font-size: var(--fs-xs); line-height: 1.5;
    color: var(--text-muted); text-align: center; text-wrap: balance;
}
.plan-card__reassurance i,
.plan-card__secure-payment i { margin-left: 6px; }
.plan-card__reassurance i { color: var(--accent-teal); }
.plan-card__secure-payment i { color: var(--primary); }

/* --- 3. Prix d'appel "des X EUR" sous un CTA de section (plans.php) --- */
.section__cta-from {
    display: block; margin-top: var(--space-1);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
    letter-spacing: 0;
}

/* --- 4. Badge prix d'appel a bordure primaire (services.php, dedicated.php) --- */
.badge--outline {
    background: transparent; border: 1px solid var(--border-accent);
    color: var(--primary-text);
}

/* Mobile : encart auteur en colonne */
@media (max-width: 600px) {
    .seo-author { flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
    .seo-author__icon { width: 48px; height: 48px; font-size: 1.2rem; }
}


/* ============================================================
   SECTIONS HOME ADDITIONNELLES (techs / guides / cta)
   Style strictement aligne sur le design system existant :
   memes tokens, memes motifs que service-card / category-tab /
   newsletter-box. Aucun changement visuel global.
   ============================================================ */

/* Metriques fallback Space Grotesk : fonts chargees en async dans le
   header => evite le CLS pendant le swap (complement d'Inter Fallback). */
@font-face {
    font-family: 'Space Grotesk Fallback';
    src: local('Arial');
    size-adjust: 105%; ascent-override: 94%; descent-override: 26%; line-gap-override: 0%;
}

.section--flush { padding: var(--space-8) 0; }

/* --- Techs : marquee de technologies (maillage interne) --- */
.techs {
    background: var(--bg-surface);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.techs__header { text-align: center; margin-bottom: var(--space-6); }
.techs__title {
    font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
    letter-spacing: -0.02em; margin-bottom: var(--space-2);
}
.techs__subtitle { color: var(--text-secondary); font-size: 0.95rem; max-width: 640px; margin: 0 auto; }
.techs__marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.techs__track { display: flex; width: max-content; animation: techScroll 38s linear infinite; }
.techs__track:hover { animation-play-state: paused; }
.techs__group { display: flex; gap: 12px; padding-left: 12px; }
@keyframes techScroll { to { transform: translateX(50%); } }
/* Chip = meme vocabulaire que .category-tab */
.tech-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 20px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;
    white-space: nowrap; transition: all var(--transition);
}
.tech-chip i { font-size: 1.05rem; color: var(--text-muted); transition: color var(--transition); }
.tech-chip:hover {
    border-color: var(--primary); color: var(--primary-text);
    background: rgba(14,165,233,0.05);
}
.tech-chip:hover i { color: var(--primary); }

/* Les cartes guides utilisaient leur propre peau (.guide-card, ~40 lignes) :
   supprimee, la section passe par renderCardGrid() comme les autres. */

/* --- CTA final : meme motif que newsletter-box --- */
.cta-final {
    position: relative; overflow: hidden; text-align: center;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 56px 48px;
    box-shadow: var(--shadow);
}
.cta-final::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
    background: linear-gradient(-90deg, var(--primary), var(--accent-teal), var(--primary));
}
[data-theme="light"] .cta-final {
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
}
.cta-final__title {
    font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-3);
}
.cta-final__text {
    color: var(--text-secondary); font-size: 1rem; line-height: 1.7;
    max-width: 580px; margin: 0 auto var(--space-6);
}
.cta-final__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-final__points { display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.cta-final__points li {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
}
.cta-final__points li i { color: var(--accent-green); font-size: 0.8rem; }

/* --- Responsive + reduced-motion --- */
@media (max-width: 480px) {
    .cta-final { padding: 40px 20px; }
    .techs__title { font-size: 1.15rem; }
    .guides-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .techs__track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto; }
    .techs__group[aria-hidden="true"] { display: none; }
    .techs__marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================
   COMPARATEUR D'OFFRES v3 (pages categories)
   Vrai outil de pricing, plus une table de donnees : en-tetes en
   mini-cartes (nom + prix + badge), colonne populaire elevee,
   lignes aerees sans zebrage, CTA pleine taille. Themes OK.
   ============================================================ */
.plans-compare { margin-top: var(--space-8); }
.plans-compare__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-5);
}
.plans-compare__title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em;
}
.plans-compare__title i { color: var(--primary); }
.plans-compare__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 600;
    transition: all var(--transition);
}
.plans-compare__toggle:hover { border-color: var(--primary); color: var(--primary-text); }
.plans-compare__toggle.active {
    background: rgba(14,165,233,0.10); border-color: var(--primary);
    color: var(--primary-text);
}
.plans-compare--diff-only tr[data-identical="1"] { display: none; }

/* Conteneur : carte arrondie, scroll horizontal masque aux bords */
.plans-compare__wrap {
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-sm);
}
[data-theme="light"] .plans-compare__wrap { box-shadow: 0 4px 24px rgba(0,0,0,0.06); }

.plans-compare__table {
    width: 100%; min-width: 680px;
    border-collapse: separate; border-spacing: 0;
}

/* ── En-tete : mini-cartes de plan ── */
.plans-compare__table thead th {
    padding: 22px 18px 18px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    text-align: center; vertical-align: bottom;
    font-weight: 700;
}
.plans-compare__corner {
    text-align: right !important; vertical-align: middle !important;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
    /* Mot long (« Caractéristique ») : casse propre au lieu de deborder/tronquer
       la cellule sur les colonnes etroites en mobile. */
    overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
}
.plans-compare__plan { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.plans-compare__plan-name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.plans-compare__badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: var(--radius-full); margin-bottom: 4px;
    background: linear-gradient(-135deg, var(--primary), var(--accent-teal));
    color: #fff; font-size: 0.62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em;
    box-shadow: 0 3px 10px -2px var(--primary-glow);
}
.plans-compare__price { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.plans-compare__price strong {
    font-family: var(--font-display);
    font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--text-primary);
}
.plans-compare__per { color: var(--text-muted); font-size: 0.75rem; font-weight: 500; }

/* ── Corps : lignes aerees, separateurs fins, pas de zebrage ── */
.plans-compare__table tbody td {
    padding: 15px 18px; text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.9rem;
    transition: background var(--transition);
}
.plans-compare__table tbody tr:last-child td { border-bottom: none; }
.plans-compare__table tbody tr:not(.plans-compare__cta-row):hover td { background: var(--bg-card-hover); }
[data-theme="light"] .plans-compare__table tbody tr:not(.plans-compare__cta-row):hover td { background: #f6f9fc; }

/* Colonne caracteristique : sticky, libelles nets, icones discretes */
.plans-compare__table th:first-child,
.plans-compare__table td:first-child {
    position: sticky; right: 0; z-index: 2;
    text-align: right; min-width: 180px;
    background: var(--bg-card);
}
.plans-compare__table thead th:first-child { background: var(--bg-surface); }
.plans-compare__table tbody td:first-child {
    font-weight: 600; color: var(--text-primary); font-size: 0.875rem;
    box-shadow: -1px 0 0 var(--border);
}
.plans-compare__table tbody td:first-child i {
    color: var(--primary); width: 20px; text-align: center;
    margin-left: 8px; font-size: 0.85rem; opacity: 0.85;
}
.plans-compare__table tbody tr:not(.plans-compare__cta-row):hover td:first-child { background: var(--bg-card-hover); }
[data-theme="light"] .plans-compare__table tbody tr:not(.plans-compare__cta-row):hover td:first-child { background: #f6f9fc; }

/* ── Colonne du plan populaire : elevee et bordee ── */
.plans-compare__table th.plans-compare__col-pop {
    background: linear-gradient(-180deg, rgba(14,165,233,0.14), rgba(14,165,233,0.07));
    border-top: 3px solid var(--primary);
    box-shadow: inset -1px 0 0 rgba(14,165,233,0.30), inset 1px 0 0 rgba(14,165,233,0.30);
}
.plans-compare__table td.plans-compare__col-pop {
    background: rgba(14,165,233,0.05);
    box-shadow: inset -1px 0 0 rgba(14,165,233,0.22), inset 1px 0 0 rgba(14,165,233,0.22);
}
.plans-compare__table tbody tr:not(.plans-compare__cta-row):hover td.plans-compare__col-pop { background: rgba(14,165,233,0.10); }

/* Surbrillance de colonne au survol (JS pose .col-hover, pointer:fine) */
.plans-compare__table td.col-hover,
.plans-compare__table th.col-hover { background: rgba(14,165,233,0.08); }
.plans-compare__table td.plans-compare__col-pop.col-hover { background: rgba(14,165,233,0.12); }

/* ── Valeurs absentes + ligne CTA ── */
.plans-compare__na { color: var(--text-muted); opacity: 0.6; }
.plans-compare__cta-row td { padding: 20px 14px; }
.plans-compare__cta-row .btn { min-width: 132px; justify-content: center; }
.plans-compare__cta-row td:first-child { box-shadow: -1px 0 0 var(--border); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .plans-compare__title { font-size: 1.1rem; }
    .plans-compare__table thead th { padding: 16px 12px 14px; }
    .plans-compare__table tbody td { padding: 12px 12px; font-size: 0.85rem; }
    .plans-compare__table th:first-child,
    .plans-compare__table td:first-child { min-width: 132px; }
    .plans-compare__price strong { font-size: 1.2rem; }
    .plans-compare__cta-row .btn { min-width: 110px; padding: 10px 14px; font-size: 0.8rem; }
}

/* ── Selecteur de plans (anti-scroll) : N colonnes max + puces ── */
.plans-compare__picker {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: var(--space-4);
}
.plans-compare__chip {
    padding: 8px 16px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 600;
    transition: all var(--transition);
}
.plans-compare__chip:hover { border-color: var(--primary); color: var(--primary-text); }
.plans-compare__chip.active {
    background: rgba(14,165,233,0.10); border-color: var(--primary);
    color: var(--primary-text);
}
.plans-compare__table .col-hidden { display: none; }
/* Selecteur actif OU peu d'offres (--fits) : le tableau tient dans la largeur,
   plus de min-width de secours (qui forcait un scroll horizontal sur mobile
   pour un comparatif a 2 offres). Le min-width 680 ne reste que sans JS. */
.plans-compare--picked .plans-compare__table,
.plans-compare--fits .plans-compare__table { min-width: 0; }
@media (max-width: 580px) {
    .plans-compare__table thead th { padding: 14px 8px 12px; }
    .plans-compare__table tbody td { padding: 11px 8px; font-size: 0.8rem; }
    .plans-compare__table th:first-child,
    .plans-compare__table td:first-child { min-width: 104px; font-size: 0.78rem; }
    .plans-compare__table tbody td:first-child i { width: 16px; margin-left: 5px; }
    .plans-compare__plan-name { white-space: normal; font-size: 0.82rem; line-height: 1.25; }
    .plans-compare__price strong { font-size: 1.05rem; }
    .plans-compare__per { font-size: 0.68rem; }
    /* CTA : bouton cale sur la largeur de sa colonne (evite un leger debordement
       « Commander » sur les colonnes etroites en dessous de ~380px). */
    .plans-compare__cta-row td { padding: 16px 6px; }
    .plans-compare__cta-row .btn { min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 6px; font-size: 0.72rem; }
    .plans-compare__chip { padding: 7px 12px; font-size: 0.76rem; }
}
/* Mobile : layout fixe = les colonnes se partagent exactement la largeur */
@media (max-width: 580px) {
    .plans-compare--picked .plans-compare__table,
    .plans-compare--fits .plans-compare__table { table-layout: fixed; width: 100%; }
    .plans-compare--picked .plans-compare__table th:first-child,
    .plans-compare--picked .plans-compare__table td:first-child,
    .plans-compare--fits .plans-compare__table th:first-child,
    .plans-compare--fits .plans-compare__table td:first-child { width: 102px; min-width: 0; }
    .plans-compare__table td { overflow-wrap: break-word; }
    .plans-compare__price { flex-direction: column; align-items: center; gap: 0; line-height: 1.2; }
}
/* Tres petits ecrans : 1re colonne plus etroite (plus de place aux offres) et
   badge « Populaire » compact, pour que rien ne deborde en dessous de 380px. */
@media (max-width: 400px) {
    .plans-compare--picked .plans-compare__table th:first-child,
    .plans-compare--picked .plans-compare__table td:first-child,
    .plans-compare--fits .plans-compare__table th:first-child,
    .plans-compare--fits .plans-compare__table td:first-child { width: 84px; }
    .plans-compare__corner { font-size: 0.6rem; }
    .plans-compare__badge { padding: 2px 6px; font-size: 0.52rem; letter-spacing: 0.02em; }
    .plans-compare__table thead th { padding: 12px 5px 10px; }
    .plans-compare__table tbody td { padding: 10px 5px; }
}

/* ===================================================================
   Section « Noms de domaine »
   -------------------------------------------------------------------
   Tout passe par les jetons existants : --bg-surface, --border, --text,
   --primary. La section suit donc le theme clair comme le theme sombre
   sans une seule regle dupliquee, et suivra aussi un futur changement de
   palette.

   Deux exceptions assumees, et seulement deux :
     - le halo derriere le champ de recherche, en color-mix() sur
       --primary, parce qu'aucun jeton d'ombre coloree n'existe ;
     - la teinte du bandeau, meme raison.
   =================================================================== */

.domains { position: relative; overflow: hidden; }

/* Lueur discrete derriere le titre. En absolute + pointer-events:none :
   elle ne prend jamais le clic, meme si elle deborde. */
.domains::before {
    content: '';
    position: absolute;
    inset: -40% 30% auto 30%;
    height: 320px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 16%, transparent), transparent);
    pointer-events: none;
    z-index: 0;
}

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

.domains__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    margin-bottom: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-text);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* ── Champ de recherche ─────────────────────────────────────────── */

.domains__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 620px;
    margin: 0 auto var(--space-5);
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* :focus-within et non :focus : c'est le bloc entier qui doit reagir, pas
   seulement le champ, sinon la bordure et le champ s'allument separement. */
.domains__search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.domains__search-icon {
    margin-right: var(--space-3);
    color: var(--text-secondary);
    flex: 0 0 auto;
}

.domains__input {
    flex: 1 1 auto;
    min-width: 0;              /* sans cela, le champ refuse de retrecir en mobile */
    padding: 12px 4px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--fs-md);
}

.domains__input::placeholder { color: var(--text-muted); }
.domains__input:focus { outline: none; }   /* l'anneau est porte par le conteneur */

.domains__submit { flex: 0 0 auto; white-space: nowrap; }

/* ── Grille des extensions ──────────────────────────────────────── */

.domains__tlds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    max-width: 900px;
    margin: 0 auto var(--space-5);
    padding: 0;
    list-style: none;
}

.domains__tld-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-4) var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.domains__tld-link:hover {
    transform: translateY(-2px);      /* meme amplitude que les autres cartes du site */
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.domains__tld-ext {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.domains__tld-price { color: var(--primary-text); font-weight: 600; }
.domains__tld-unit { color: var(--text-muted); font-weight: 400; font-size: var(--fs-sm); }

/* ── Arguments ──────────────────────────────────────────────────── */

.domains__perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.domains__perks li { display: inline-flex; align-items: center; gap: var(--space-2); }
.domains__perks i { color: var(--primary); }

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    /* Le bouton passe sous le champ : cote a cote, il ne restait qu'une
       poignee de caracteres visibles pour saisir le domaine. */
    .domains__search { flex-wrap: wrap; }
    .domains__input { flex: 1 1 100%; order: 1; padding-right: var(--space-2); }
    .domains__search-icon { display: none; }
    .domains__submit { flex: 1 1 100%; order: 2; justify-content: center; }
    .domains__tlds { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

/* Le survol souleve la carte ; qui a demande a ne pas etre anime n'y a pas
   droit, et n'en a pas besoin. */
@media (prefers-reduced-motion: reduce) {
    .domains__tld-link { transition: none; }
    .domains__tld-link:hover { transform: none; }
}

/* ===================================================================
   Hero — bloc « nom de domaine », version 3
   -------------------------------------------------------------------
   La v2 etait correcte mais MESUREE a 707 px du haut pour une fenetre
   de 720 : elle n'etait jamais vue sans defiler. Ici le bloc remonte
   sous le sous-titre, et tout le hero est resserre pour tenir au-dessus
   de la ligne de flottaison.

   Les valeurs de resserrage ne sont pas estimees : chaque bloc a ete
   mesure avant (885 px de hero) et apres.

   Aucune couleur en dur : les deux themes suivent sans regle dupliquee.
   =================================================================== */

/* ── Resserrage du hero ─────────────────────────────────────────── */

/* La barre de navigation est en position fixed : le contenu doit demarrer
   sous elle. 28 px de bandeau de confiance + la hauteur de barre + une
   respiration. Calcule et non choisi : si --navbar-h change, la marge suit.

   Une version precedente posait 32 px en dur ; l'accroche passait alors
   64 px SOUS la barre, donc derriere elle. */
.hero--compact {
    padding-top: calc(28px + var(--navbar-h) + var(--space-4));
    padding-bottom: var(--space-6);
}

/* Sous 768 px, le bandeau de confiance retombe a 24 px — la meme regle que
   celle qui deplace la barre dans le CSS d'origine. */
@media (max-width: 768px) {
    .hero--compact { padding-top: calc(24px + var(--navbar-h) + var(--space-3)); }
}
.hero--compact .hero__eyebrow { margin-bottom: 14px; }
.hero--compact .hero__title { margin-bottom: 14px; }

/* Le sous-titre tenait sur trois lignes et coutait 94 px. Limite a deux,
   il en rend une trentaine sans rien perdre du sens. */
.hero--compact .hero__subtitle {
    max-width: 640px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: var(--space-4);
}

.hero--compact .hero__actions { margin-bottom: var(--space-4); }
.hero--compact .hero__proof { margin-bottom: 0; }

/* ── Le bloc ────────────────────────────────────────────────────── */

.hero__domain-block {
    max-width: 640px;
    margin: 0 auto var(--space-5);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* ── La barre ───────────────────────────────────────────────────── */

.hero__domain { display: flex; align-items: stretch; gap: 8px; }

.hero__domain-input {
    flex: 1 1 auto;
    min-width: 0;                 /* sans quoi le champ refuse de retrecir */
    height: 52px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--fs-base);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hero__domain-input::placeholder { color: var(--text-muted); }

.hero__domain-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.hero__domain-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--text-inverse);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease;
}

.hero__domain-submit:hover { background: var(--primary-dark); }
.hero__domain-submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ── Les tarifs ─────────────────────────────────────────────────── */

.hero__domain-tlds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

/* Chaque tarif est un lien cliquable : qui repere son extension n'a pas a
   retaper la recherche. */
.hero__domain-tlds a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-input);
    text-decoration: none;
    font-size: 0.84rem;
    line-height: 1.2;
    transition: border-color .18s ease, background .18s ease;
}

.hero__domain-tlds a:hover { border-color: var(--primary); background: var(--bg-card-hover); }

.hero__domain-ext { color: var(--text-primary); font-weight: 700; }
.hero__domain-price { color: var(--text-secondary); }

.hero__domain-more a {
    border-color: transparent;
    background: transparent;
    color: var(--primary-text);
    font-weight: 600;
}

.hero__domain-more a:hover { background: transparent; border-color: transparent; text-decoration: underline; }

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    /* Le bouton passe sous le champ : cote a cote, il ne restait qu'une
       poignee de caracteres visibles pour saisir le domaine. */
    .hero__domain { flex-wrap: wrap; }
    .hero__domain-input { flex: 1 1 100%; height: 48px; }
    .hero__domain-submit { flex: 1 1 100%; height: 46px; justify-content: center; }
    .hero__domain-tlds { gap: 5px; }
    .hero__domain-tlds a { padding: 5px 10px; font-size: 0.8rem; }
}

/* ===================================================================
   Bande LinkedIn — fin de la section de conversion
   -------------------------------------------------------------------
   Le reseau n'existait que comme septieme icone du pied de page. Ici il
   a une place a lui, mais DERRIERE les deux boutons de commande : on ne
   detourne pas vers un reseau social un visiteur venu commander.

   Une seule couleur figee dans tout le fichier, le bleu de la marque
   LinkedIn (#0a66c2). Elle ne vient pas de la palette du site et n'a pas
   a la suivre : c'est l'identite d'un tiers, elle reste la meme en
   theme clair et en theme sombre. Tout le reste passe par les jetons.
   =================================================================== */

.cta-linkedin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    max-width: 780px;
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: right;
}

.cta-linkedin__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: #0a66c2;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cta-linkedin__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
}

.cta-linkedin__sub {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* Le bouton porte le bleu LinkedIn et non le bleu du site : c'est ce qui
   le rend identifiable d'un coup d'oeil, et ce qui le distingue des deux
   boutons de commande juste au-dessus. */
.cta-linkedin__btn {
    flex: 0 0 auto;
    background: #0a66c2;
    border: 1px solid #0a66c2;
    color: #fff;
    white-space: nowrap;
}

.cta-linkedin__btn:hover {
    background: #084e96;
    border-color: #084e96;
    color: #fff;
}

/* L'anneau de focus reprend le bleu du bouton : un anneau de la couleur
   du site sur un bouton LinkedIn se lit comme une erreur d'affichage. */
.cta-linkedin__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, #0a66c2 35%, transparent);
}

@media (max-width: 620px) {
    /* Empile, et le bouton prend toute la largeur : a cheval sur deux
       lignes il devenait le plus petit element de la bande. */
    .cta-linkedin { flex-direction: column; align-items: stretch; text-align: center; }
    .cta-linkedin__eyebrow { justify-content: center; }
    .cta-linkedin__btn { justify-content: center; }
}

/* Menu compte (extremite droite de la barre) : le menu generique est centre
   sous son declencheur avec 340px de large — ici il deborderait de l ecran.
   Ancrage sur le bord droit, largeur reduite aux cinq entrees courtes. */
.navbar__account .navbar__dropdown-menu {
    right: auto; left: 0; transform: translateY(8px); min-width: 250px;
}
.navbar__account:hover .navbar__dropdown-menu { transform: translateY(0); }

/* -- Mise en avant de l'offre annuelle ---------- */
/* Pilote par les donnees cote PHP : ne s'affiche que si la gamme offre
   reellement deux mois ou plus. Le vert reprend celui du badge du selecteur,
   pour que l'oeil relie les deux elements. */
.annual-push {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    max-width: 880px; margin: 0 auto 36px; padding: 20px 26px;
    background: var(--bg-card);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-right: 4px solid #059669;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.12);
}
.annual-push__icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.25rem; color: #fff;
    background: linear-gradient(-135deg, #059669, #047857);
}
.annual-push__body { flex: 1 1 320px; min-width: 0; }
.annual-push__title {
    font-weight: 800; font-size: 1.08rem; line-height: 1.3;
    color: var(--text-primary); margin: 0 0 4px;
}
.annual-push__title em { font-style: normal; color: #059669; }
.annual-push__sub {
    margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary);
}
.annual-push__cta {
    flex: 0 0 auto; padding: 11px 20px; border-radius: var(--radius-full);
    background: linear-gradient(-135deg, #059669, #047857); color: #fff;
    font-size: 0.82rem; font-weight: 700; border: 0; cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
.annual-push__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4); }
.annual-push__cta:focus-visible { outline: 2px solid #059669; outline-offset: 3px; }
@media (max-width: 640px) {
    .annual-push { gap: 14px; padding: 16px 18px; }
    .annual-push__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .annual-push__cta:hover { transform: none; }
}

/* --- Plans de l'accueil : alignement par sous-grille (BYH-UI-20261002) ---
   L'en-tete absorbait la hauteur libre de la carte (flex:1 sur
   .plan-card__header, pour aligner les prix d'une rangee). Effet de bord :
   dans une rangee ou une offre a neuf caracteristiques (App Confort), ses
   voisines affichaient jusqu'a 165 px de vide entre la description et le
   prix, et le nom reservait une seconde ligne meme quand il tient sur une.

   La sous-grille fait mieux sans compromis : chacun des six blocs de la
   carte (en-tete, prix, caracteristiques, bouton, deux mentions) occupe la
   meme piste d'une carte a l'autre. Les prix restent alignes ; la hauteur
   libre se loge sous la liste de caracteristiques la plus courte, juste
   au-dessus des boutons, eux aussi alignes.
   Limite a l'accueil : category.php range ses blocs dans un autre ordre
   (caracteristiques avant le prix). */
@supports (grid-template-rows: subgrid) {
    .plans-section .plan-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 6;
        row-gap: 0;
        align-content: start;
    }
    .plans-section .plan-card__header {
        min-height: 0;
    }
    .plans-section .plan-card__name {
        min-height: 0;
    }
}

/* Navigateur sans sous-grille : la liste absorbe la hauteur libre a la place
   de l'en-tete. Les prix peuvent alors differer d'une ligne entre deux cartes,
   mais il n'y a plus de vide sous la description. */
@supports not (grid-template-rows: subgrid) {
    .plans-section .plan-card__header {
        flex: 0 0 auto;
        min-height: 0;
    }
    .plans-section .plan-card__name {
        min-height: 0;
    }
}

/* Lien « Voir les N caracteristiques » (accueil, liste ecourtee a six). */
.plan-card__specs .plan-card__specs-more {
    margin-top: 2px;
}
.plan-card__specs-more a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--primary-text); font-size: 0.84rem; font-weight: 600;
    text-decoration: none;
}
.plan-card__specs-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-card__specs-more a i { font-size: 0.72rem; transition: transform var(--transition); }
.plan-card__specs-more a:hover i { transform: translateX(-2px); }

/* --- HAUT DE PAGE au-dessus de la bulle du livechat (04/10/2026) ---
   Le bouton se plaçait exactement sous la bulle du chat (24 px du coin) :
   invisible et inaccessible. Le widget publie sa position sur la page :
   --vc-launcher-top (haut de la bulle, depuis le bas de l'écran) et
   --vc-launcher-x (centre de la bulle, depuis la droite). Sans widget, les
   valeurs de repli redonnent les 24 px d'origine. */
.back-to-top {
    left: calc(var(--vc-launcher-x, 46px) - 22px);
    bottom: calc(var(--vc-launcher-top, 12px) + 12px);
}

/* BYH-ARABE-20261031 : complément écriture arabe */
html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea {
  font-family: Inter, "Segoe UI", Tahoma, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Noto Kufi Arabic", system-ui, sans-serif;
}
html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: 0 !important; }
html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-angle-left, html[dir="rtl"] .fa-angles-right, html[dir="rtl"] .fa-angles-left,
html[dir="rtl"] .fa-caret-right, html[dir="rtl"] .fa-caret-left, html[dir="rtl"] .fa-arrow-right-long, html[dir="rtl"] .fa-arrow-left-long,
html[dir="rtl"] .fa-right-to-bracket, html[dir="rtl"] .fa-right-from-bracket, html[dir="rtl"] .fa-arrow-right-to-bracket,
html[dir="rtl"] .fa-arrow-right-from-bracket, html[dir="rtl"] .fa-reply, html[dir="rtl"] .fa-share { transform: scaleX(-1); }
html[dir="rtl"] .byh-fleche { display: inline-block; transform: scaleX(-1); }
/* Le code, les adresses IP, les commandes et les montants restent de gauche à droite. */
html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] kbd, html[dir="rtl"] samp { direction: ltr; unicode-bidi: isolate; text-align: left; }