/* ========================================================================== KHEWEUL — BARRE D'ONGLETS (composant unique) -------------------------------------------------------------------------- Le site portait trois styles d'onglets différents pour le même geste : .kw2-tab-nav / .kw2-tab-btn 9 modules vitrines (hébergement, VPS, cloud, messagerie, WordPress, G Suite, SiteLock, CodeGuard, dédiés) .kw-hosting-tabs / .kw-htab hebergement.tpl du thème enfant .kw-fam-tabs / .kw-fam-tab sélecteur de familles (addservice) .kw-ssl-panel-tabs panneau SSL — seul à être déjà un contrôle segmenté Ils sont désormais rendus par ce fichier avec la même présentation : le contrôle segmenté du panneau SSL, retenu parce qu'il lit mieux qu'une file de pastilles flottantes et qu'il indique clairement où l'on se trouve. DÉFAUT CORRIGÉ — les onglets s'empilaient verticalement sur téléphone. email_pro_redesign.css imposait sous 767px : body .kw2-tab-btn { flex: 1 1 auto; min-width: 44%; } L'intention était deux onglets par ligne, mais « Hébergement Linux » et « Hébergement Windows » dépassent à eux seuls la moitié d'un écran de 360px : chaque onglet prenait donc une ligne entière, étiré sur toute la largeur. La barre n'est plus jamais repliée — elle défile horizontalement, par à-coups calés sur les onglets (scroll-snap). SPÉCIFICITÉ : les feuilles des pages vitrines sont déclarées dans le corps du document, donc chargées après ce fichier. Tous les sélecteurs sont préfixés par « body » (0,1,1 contre 0,1,0) pour l'emporter sans !important. ========================================================================== */ :root { --kw-tabs-track: rgba(15, 23, 42, 0.055); --kw-tabs-track-border: rgba(15, 23, 42, 0.07); --kw-tabs-thumb: #ffffff; --kw-tabs-thumb-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.10); --kw-tabs-text: #64748b; --kw-tabs-text-hover: #0f172a; --kw-tabs-text-active: #0f172a; --kw-tabs-accent: #E89548; --kw-tabs-pad: 5px; --kw-tabs-gap: 4px; } body.dark-mode { --kw-tabs-track: rgba(255, 255, 255, 0.055); --kw-tabs-track-border: rgba(255, 255, 255, 0.09); --kw-tabs-thumb: #334155; --kw-tabs-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.40); --kw-tabs-text: #94a3b8; --kw-tabs-text-hover: #f1f5f9; --kw-tabs-text-active: #f8fafc; } /* ========================================================================== 1. LA PISTE Largeur ajustée au contenu et centrée : le contrôle se lit comme un objet unique, pas comme une rangée d'éléments indépendants. ========================================================================== */ body .kw2-tab-nav, body .kw-hosting-tabs, body .kw-fam-tabs, body .kw-ssl-panel-tabs { /* position:relative fait de la piste le bloc conteneur des onglets : sans elle, le offsetLeft lu par kw-tabs.js pour recentrer l'onglet actif se mesurait depuis un ancêtre positionné quelconque — souvent le — et incluait la position de la barre dans la page. Le recentrage visait alors à côté. */ position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; gap: var(--kw-tabs-gap); padding: var(--kw-tabs-pad); border: 1px solid var(--kw-tabs-track-border); border-radius: 999px; background: var(--kw-tabs-track); /* Jamais de retour à la ligne : la barre défile. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } body .kw2-tab-nav::-webkit-scrollbar, body .kw-hosting-tabs::-webkit-scrollbar, body .kw-fam-tabs::-webkit-scrollbar, body .kw-ssl-panel-tabs::-webkit-scrollbar { display: none; } /* Marges verticales propres à chaque contexte : le rythme des pages vitrines n'est pas celui d'un panneau de gestion. */ body .kw2-tab-nav { margin-bottom: 44px; } body .kw-hosting-tabs { margin-bottom: 40px; } body .kw-ssl-panel-tabs { margin-bottom: 32px; } body .kw-fam-tabs { margin-bottom: 18px; margin-left: 0; } /* ========================================================================== 2. LES ONGLETS Plus de bordure ni d'ombre individuelle : c'est la piste qui porte le cadre, l'onglet actif est une pastille claire qui glisse dessus. ========================================================================== */ body .kw2-tab-nav .kw2-tab-btn, body .kw-hosting-tabs .kw-htab, body .kw-fam-tabs .kw-fam-tab, body .kw-ssl-panel-tabs .kw-ssl-panel-tab { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--kw-tabs-text); font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; scroll-snap-align: center; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } body .kw2-tab-nav .kw2-tab-btn i, body .kw-hosting-tabs .kw-htab i, body .kw-fam-tabs .kw-fam-tab i, body .kw-ssl-panel-tabs .kw-ssl-panel-tab i { font-size: 0.9em; color: currentColor; opacity: 0.75; transition: opacity 0.2s ease, color 0.2s ease; } body .kw2-tab-nav .kw2-tab-btn:hover, body .kw-hosting-tabs .kw-htab:hover, body .kw-fam-tabs .kw-fam-tab:hover, body .kw-ssl-panel-tabs .kw-ssl-panel-tab:hover { background: rgba(15, 23, 42, 0.05); color: var(--kw-tabs-text-hover); border-color: transparent; } body.dark-mode .kw2-tab-nav .kw2-tab-btn:hover, body.dark-mode .kw-hosting-tabs .kw-htab:hover, body.dark-mode .kw-fam-tabs .kw-fam-tab:hover, body.dark-mode .kw-ssl-panel-tabs .kw-ssl-panel-tab:hover { background: rgba(255, 255, 255, 0.06); } /* ── Onglet actif ── */ body .kw2-tab-nav .kw2-tab-btn.active, body .kw-hosting-tabs .kw-htab.active, body .kw-fam-tabs .kw-fam-tab.active, body .kw-ssl-panel-tabs .kw-ssl-panel-tab.active { background: var(--kw-tabs-thumb); color: var(--kw-tabs-text-active); box-shadow: var(--kw-tabs-thumb-shadow); } /* L'orange ne marque plus le fond de l'onglet actif mais son icône : sur une pastille pleine orange, le libellé passait en blanc sur fond clair, un contraste insuffisant relevé sur .kw-fam-tab (texte #0f172a sur #E89548). */ body .kw2-tab-nav .kw2-tab-btn.active i, body .kw-hosting-tabs .kw-htab.active i, body .kw-fam-tabs .kw-fam-tab.active i, body .kw-ssl-panel-tabs .kw-ssl-panel-tab.active i { color: var(--kw-tabs-accent); opacity: 1; } /* ── Accessibilité au clavier ── .kw2-tab-btn portait outline:none sans rien mettre à la place : la tabulation devenait invisible. */ body .kw2-tab-nav .kw2-tab-btn:focus-visible, body .kw-hosting-tabs .kw-htab:focus-visible, body .kw-fam-tabs .kw-fam-tab:focus-visible, body .kw-ssl-panel-tabs .kw-ssl-panel-tab:focus-visible { outline: 2px solid var(--kw-tabs-accent); outline-offset: 2px; } /* Pastille de comptage du sélecteur de familles : elle suit le nouveau fond. */ body .kw-fam-tabs .kw-fam-tab .kw-fam-count { background: rgba(15, 23, 42, 0.08); color: inherit; } body .kw-fam-tabs .kw-fam-tab.active .kw-fam-count { background: rgba(232, 149, 72, 0.18); color: var(--kw-tabs-text-active); } body.dark-mode .kw-fam-tabs .kw-fam-tab .kw-fam-count { background: rgba(255, 255, 255, 0.10); } /* ========================================================================== 3. INDICE DE DÉFILEMENT .kw-tabs-overflow est posée par kw-tabs.js quand la barre est plus large que sa piste. Un dégradé au bord signale qu'il reste des onglets, et disparaît de chaque côté déjà atteint (.at-start / .at-end). ========================================================================== */ body .kw-tabs-overflow { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } body .kw-tabs-overflow.at-start { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%); } body .kw-tabs-overflow.at-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%); } body .kw-tabs-overflow.at-start.at-end { -webkit-mask-image: none; mask-image: none; } /* ========================================================================== 4. ADAPTATIONS ========================================================================== */ /* Sous 768px la barre occupe toute la largeur disponible et se cale à gauche : un contrôle segmenté centré mais plus large que l'écran cache ses premiers onglets, on ne verrait pas que celui de gauche est le premier. */ @media (max-width: 767.98px) { body .kw2-tab-nav, body .kw-hosting-tabs, body .kw-ssl-panel-tabs { width: 100%; margin-bottom: 28px; } body .kw2-tab-nav .kw2-tab-btn, body .kw-hosting-tabs .kw-htab, body .kw-fam-tabs .kw-fam-tab, body .kw-ssl-panel-tabs .kw-ssl-panel-tab { padding: 9px 16px; font-size: 0.82rem; } } /* Cible tactile : 44px de haut au doigt, conformément au critère WCAG 2.5.8 déjà appliqué dans responsive.css. */ @media (hover: none) and (pointer: coarse) { body .kw2-tab-nav .kw2-tab-btn, body .kw-hosting-tabs .kw-htab, body .kw-fam-tabs .kw-fam-tab, body .kw-ssl-panel-tabs .kw-ssl-panel-tab { min-height: 44px; } } @media (max-width: 400px) { body .kw2-tab-nav .kw2-tab-btn, body .kw-hosting-tabs .kw-htab, body .kw-fam-tabs .kw-fam-tab, body .kw-ssl-panel-tabs .kw-ssl-panel-tab { padding: 9px 13px; gap: 6px; font-size: 0.79rem; } } @media (prefers-reduced-motion: reduce) { body .kw2-tab-nav, body .kw-hosting-tabs, body .kw-fam-tabs, body .kw-ssl-panel-tabs { scroll-behavior: auto; } }