en bloc casse
l'alignement vertical dans la rangée d'actions. */
.ac-apps {
position: relative;
display: inline-flex; align-items: center; flex: none;
}
.ac-apps__panel {
position: absolute; top: calc(100% + var(--sp-3)); right: 0; z-index: 95;
width: min(92vw, 460px);
padding: var(--sp-4);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
transform-origin: top right;
animation: ac-apps-in var(--dur-fast) var(--ease-out);
}
.ac-apps__panel[hidden] { display: none; }
/* Filet dégradé signature en tête du panneau — ornemental. */
.ac-apps__panel::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--edge-gradient); opacity: 0.55;
}
@keyframes ac-apps-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.ac-apps__title {
margin: 0 0 var(--sp-3); padding: 0 var(--sp-2);
font-family: var(--font-body);
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.ac-apps__grid { display: grid; gap: var(--sp-1); }
/* Deux colonnes dès que la largeur le permet — sept entrées en une colonne
font un menu qu'il faut faire défiler. */
@media (min-width: 420px) { .ac-apps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-apps__item {
display: flex; align-items: center; gap: var(--sp-3);
min-height: var(--tap-min);
padding: var(--sp-2) var(--sp-3);
text-decoration: none; color: var(--text);
border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease-out);
}
.ac-apps__item:hover { background: var(--surface-strong); }
.ac-apps__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ac-apps__item.is-current { background: var(--surface); }
.ac-apps__item.is-current .ac-apps__item-nom { color: var(--accent); }
.ac-apps__item.is-current .ac-apps__item-ico {
color: var(--deep-black); background: var(--accent); border-color: var(--accent);
}
.ac-apps__item-ico {
flex: none;
display: grid; place-items: center;
width: 36px; height: 36px;
color: var(--accent);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.ac-apps__item-ico .icon,
.ac-apps__item-ico svg { width: 18px; height: 18px; }
.ac-apps__item-txt { min-width: 0; display: grid; gap: 1px; }
.ac-apps__item-nom {
font-family: var(--font-body);
font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.3;
}
.ac-apps__item-desc {
font-size: var(--fs-xs); line-height: 1.35;
color: var(--text-tertiary);
/* Une description qui passe à trois lignes déséquilibre la grille : elle se
tronque plutôt qu'elle ne repousse la carte voisine. */
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.ac-apps__btn, .ac-apps__item, .ac-apps__item-ico { transition: none; }
.ac-apps__btn:active { transform: none; }
.ac-apps__panel { animation: none; }
}
/* — Le couple « thème + applications », réuni par ac-shell.js —
L'écart entre les deux appartient à CE conteneur, pas à l'en-tête qui
l'accueille. Chaque barre a son propre `gap` — 10px sur l'accueil, 12 puis
22px sur écran large dans /coran-app/, autre chose dans /marque-page/ — et
le couple paraissait donc plus ou moins serré d'une page à l'autre. Ici,
l'espacement est le même partout. */
.ac-actions {
display: inline-flex; align-items: center;
flex: 0 0 auto;
gap: 10px;
}
/* Placement — le groupe pousse tout le reste à gauche.
Le sélecteur est volontairement limité à un enfant DIRECT de .topbar :
dans /coran-app/, la marque porte déjà `margin-inline-end: auto` et deux
marges automatiques se partageraient l'espace libre, ce qui centrerait le
groupe au lieu de le coller à droite. Là-bas, il est descendant de
.coran-topbar__inner : la règle ne s'y applique pas, et la marge de la
marque suffit. */
.topbar > .ac-actions { margin-left: auto; }
@media print { .ac-apps { display: none !important; } }
/* Sous-liens du pied de page — conservés : une application peut de nouveau
en déclarer, et la règle ne coûte rien tant qu'aucune ne le fait. */
.site-footer__sublinks {
margin: 4px 0 8px 26px;
padding-left: var(--sp-3);
list-style: none;
border-left: 1px solid var(--border);
}
.site-footer__sublinks a {
display: inline-flex; align-items: center;
min-height: 34px;
font-size: var(--fs-sm);
color: var(--text-tertiary);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__sublinks a:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .site-footer__sublinks a { transition: none; } }
/* -------------------------------------------------------------------------
LIEN D'ÉVITEMENT — accessibilité clavier
Première cible tabulable de la page : permet de sauter l'en-tête et la
barre « applications » pour atteindre directement le contenu. Invisible
tant qu'il n'a pas le focus.
---------------------------------------------------------------------- */
.ac-skip {
position: fixed;
top: var(--sp-2);
left: 50%;
transform: translate(-50%, -160%);
z-index: 1000;
display: inline-flex; align-items: center;
min-height: var(--tap-min);
padding: 0 var(--sp-5);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--deep-black);
background: var(--accent);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-soft);
text-decoration: none;
transition: transform var(--dur-fast) var(--ease-out);
}
.ac-skip:focus-visible,
.ac-skip:focus {
transform: translate(-50%, 0);
outline: 2px solid var(--text);
outline-offset: 2px;
}
/* -------------------------------------------------------------------------
ATOMES DE MARQUE PARTAGÉS
Utilisés par l'en-tête et les deux variantes de pied de page (complet et
compact). Placés ici et non dans style.css : le Coran et les Adhkar ne
chargent pas la feuille racine. Le chemin ../icons/ est relatif à CE
fichier (assets/design/), donc valable depuis toutes les pages.
---------------------------------------------------------------------- */
.brand-logo {
display: inline-block; flex-shrink: 0;
/* Taille fluide : 128px sur un iPhone SE (320px), 179px à partir de ~430px.
La valeur fixe précédente occupait près de la moitié de la largeur d'écran
sur mobile et écrasait le contenu. */
width: clamp(128px, 34vw, 179px);
height: clamp(24px, 6.4vw, 34px);
background: url("../icons/logo.svg") no-repeat left center / contain;
}
[data-theme="light"] .brand-logo { background-image: url("../icons/logo-light.svg"); }
/* Le logo du pied de page marketing est cliquable et ramène à l'accueil, comme
celui de la variante compacte. `inline-flex` est nécessaire : sans lui,
l'ancre s'étendrait sur toute la largeur de la colonne et la zone cliquable
déborderait largement du logo. */
.site-footer__brand-link {
display: inline-flex;
border-radius: var(--radius-sm);
transition: opacity var(--dur-fast) var(--ease-out);
}
.site-footer__brand-link:hover { opacity: 0.82; }
.site-footer__brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .site-footer__brand-link { transition: none; } }
/* Déclinaison du pied de page complet — un cran sous le logo d'en-tête. */
.site-footer__brand-logo {
/* Minimum relevé de 120 à 136px : à 112-120px la signature devenait
difficile à lire sur petit écran. Le plafond desktop ne bouge pas. */
width: clamp(136px, 36vw, 158px);
height: clamp(26px, 6.8vw, 30px);
margin-bottom: 14px;
}
/* Réseaux sociaux — même famille visuelle que les contrôles ronds .ac-ctrl.
44px = cible tactile minimale (--tap-min). */
.site-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.site-footer__social-link {
display: inline-grid; place-items: center;
width: var(--tap-min); height: var(--tap-min);
color: var(--text-tertiary);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 50%;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.site-footer__social-link:hover {
color: var(--accent); background: var(--surface-strong);
border-color: var(--border-accent); transform: translateY(-2px);
}
.site-footer__social-link:active { transform: translateY(0) scale(0.95); }
.site-footer__social-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-footer__social-link .icon { width: 19px; height: 19px; }
/* Signature Kito Digital */
.kito-credit { color: var(--text-secondary); font-weight: 700; text-decoration: none; transition: color var(--dur-fast); }
.kito-credit:hover { color: var(--text); }
.kito-credit__digital {
background: linear-gradient(90deg, #7C5CFF, #2EE5FF);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* =============================================================================
SUITE STUDIO — bibliothèque commune aux outils de production
-----------------------------------------------------------------------------
Studio Versets · Studio Posts · Studio Vidéo partagent exactement ces
composants. Un même geste doit produire la même réaction visuelle dans les
trois modules : c'est ici, et nulle part ailleurs, que se décide l'apparence
d'un bouton, d'un champ, d'un onglet, d'un accordéon ou d'une notification.
AJOUT PUREMENT ADDITIF : aucune règle antérieure de ce fichier n'est
modifiée. Les applications Accueil, Player, Coran, Adhkar et Wallpapers ne
sont donc pas affectées.
Contrat de géométrie — à ne pas contourner dans les feuilles d'application :
• toute cible interactive ≥ 44px (--tap-min)
• bouton rayon pilule
• champ, carte compacte rayon 12px (--radius-sm)
• carte, panneau, modale rayon 18/28px (--radius-md / --radius-lg)
• état sélectionné fond émeraude plein, texte --deep-black
• anneau de focus 2px émeraude, décalage 2px
• réaction immédiate --dur-fast · déplacement de bloc --dur-base
========================================================================== */
:root {
--studio-appbar-h: 60px; /* hauteur de la barre supérieure des studios */
--studio-navbar-h: 62px; /* barre d'onglets basse (mobile) */
/* Place RÉELLEMENT occupée par la barre supérieure, encoche comprise.
C'est ce décalage — et non --studio-appbar-h seul — que doivent utiliser
les blocs collants placés dessous, sinon ils glissent sous la barre sur
iPhone en mode installé. Hors encoche, env() vaut 0 : valeurs inchangées. */
--studio-appbar-offset: calc(var(--studio-appbar-h) + env(safe-area-inset-top, 0px));
}
/* -------------------------------------------------------------------------
S1. BARRE SUPÉRIEURE DES STUDIOS
Identique dans les trois modules : marque, nom du module, actions propres à
l'outil, sélecteur de studio, bascule de thème — toujours dans cet ordre.
---------------------------------------------------------------------- */
.ac-appbar {
position: sticky; top: 0; z-index: 60; flex: 0 0 auto;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg) 82%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
/* Encoche iPhone — en mode « installé » (standalone), la barre commence à
y=0, donc sous l'heure et la batterie. Le retrait se pose ici, sur la
bande elle-même, et non sur .ac-appbar__inner : ainsi le fond flouté
monte bien jusqu'en haut de l'écran au lieu de laisser un bandeau nu.
Hors encoche, env() vaut 0 : aucun effet sur les autres plateformes. */
padding-top: env(safe-area-inset-top, 0px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.ac-appbar { background: var(--bg-elevated); }
}
/* Filet dégradé signature — ornemental, comme sur les cartes. */
.ac-appbar::after {
content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px;
background: var(--edge-gradient); opacity: 0.5; pointer-events: none;
}
.ac-appbar__inner {
display: flex; align-items: center; flex-wrap: nowrap; gap: var(--sp-3);
width: 100%; max-width: var(--container); margin-inline: auto;
min-height: var(--studio-appbar-h);
/* Mêmes gouttières que .topbar (style.css) : le logo et les pilules
s'alignent au pixel près entre le site public et les studios. */
padding-block: var(--sp-2);
padding-right: calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-right));
padding-left: calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-left));
}
/* Pleine largeur — utilisée par les trois studios, comme la .topbar publique. */
.ac-appbar--fluid .ac-appbar__inner { max-width: none; }
.ac-appbar__brand {
display: inline-flex; align-items: center; gap: var(--sp-2);
min-width: 0; text-decoration: none; color: var(--text);
border-radius: var(--radius-sm);
}
/* .ac-appbar__mark et .ac-appbar__name ont été retirés : ils habillaient la
marque textuelle « ◈ Audio-Coran », remplacée par le logo .brand-logo du
site public. Plus aucun élément ne les portait. */
/* Nom du module — ornement, donc or. Jamais un état, jamais cliquable. */
.ac-appbar__module {
flex: none;
display: inline-flex; align-items: center;
padding: 3px 11px;
font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em;
white-space: nowrap;
color: var(--accent-2-text);
background: color-mix(in srgb, var(--accent-2) 12%, transparent);
border: 1px solid var(--border-gold);
border-radius: var(--radius-pill);
}
.ac-appbar__actions { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--sp-2); margin-left: auto; min-width: 0; }
.ac-appbar__sep { flex: none; width: 1px; height: 24px; background: var(--border); }
@media (max-width: 640px) {
.ac-appbar__module { display: none; }
.ac-appbar__sep { display: none; }
.ac-appbar__inner { gap: var(--sp-2); }
/* Pictogramme seul : le libellé reste dans aria-label, la cible garde 44px. */
.ac-appbar__actions .ds-btn:not(.ds-btn--icon) {
width: var(--tap-min); padding: 0;
}
.ac-appbar__actions .ds-btn .btn-label { display: none; }
}
/* Même correction que .ac-apps : l'hôte du sélecteur de studio n'était pas
positionné, si bien que son menu — en `position: absolute` — s'ancrait sur
.ac-appbar (élément collant, donc bloc conteneur) et non sur son bouton.
Résultat : un menu plaqué au bord droit de la fenêtre, hors du gabarit et
sous l'encoche sur iPhone. C'est ce qui « cassait » visuellement l'en-tête
de Studio Versets et de Studio Posts. */
.studio-switch {
position: relative;
display: inline-flex; align-items: center; flex: none;
}
.studio-switch__menu {
position: absolute; top: calc(100% + var(--sp-2)); right: 0; z-index: 70;
/* Ne jamais déborder de la fenêtre sur petit écran, encoche comprise. */
max-width: calc(100vw - var(--sp-4) - env(safe-area-inset-right, 0px)
- env(safe-area-inset-left, 0px));
min-width: 232px; padding: var(--sp-2);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
transform-origin: top right;
animation: ac-menu-in var(--dur-fast) var(--ease-out);
}
.studio-switch__menu[hidden] { display: none; }
@keyframes ac-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.studio-switch__item {
display: flex; align-items: center; gap: var(--sp-3);
width: 100%; min-height: var(--tap-min);
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium);
text-align: left; text-decoration: none; color: var(--text);
background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.studio-switch__item:hover { background: var(--surface-strong); }
.studio-switch__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.studio-switch__item[aria-current="true"] { color: var(--accent); background: var(--surface); }
.studio-switch__ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.studio-switch__label { min-width: 0; }
.studio-switch__label small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-tertiary); }
.studio-switch__title {
padding: var(--sp-2) var(--sp-3) var(--sp-1);
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary);
}
/* -------------------------------------------------------------------------
S3. BOUTONS — complément à .ds-btn (mêmes proportions, mêmes états)
---------------------------------------------------------------------- */
.ds-btn--sm { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.ds-btn--danger {
background: var(--surface); color: var(--danger); border-color: var(--border);
}
.ds-btn--danger:hover {
background: color-mix(in srgb, var(--danger) 14%, transparent);
border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
/* Confirmation d'une action réussie — « Copié », « Enregistré ». */
.ds-btn.is-done {
background: var(--success); color: var(--deep-black);
border-color: transparent; box-shadow: none;
}
.ds-btn--icon.ds-btn--sm { width: 36px; height: 36px; min-height: 36px; }
.ds-btn svg, .ds-btn .icon { flex: none; width: 17px; height: 17px; }
.ds-btn--sm svg, .ds-btn--sm .icon { width: 15px; height: 15px; }
.ds-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* -------------------------------------------------------------------------
S4. CHAMPS — un seul gabarit pour input, select, textarea
---------------------------------------------------------------------- */
.ds-textarea, .ds-select {
display: block; width: 100%; min-width: 0; min-height: var(--tap-min);
padding: var(--sp-3) var(--sp-4);
/* 16px minimum : en dessous, Safari iOS zoome à la mise au point. */
font-family: var(--font-body); font-size: max(16px, var(--fs-sm)); line-height: 1.4;
color: var(--text); background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-sm);
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.ds-input { padding: var(--sp-3) var(--sp-4); font-size: max(16px, var(--fs-sm)); }
.ds-input:hover:not(:disabled),
.ds-textarea:hover:not(:disabled),
.ds-select:hover:not(:disabled) { border-color: var(--border-accent); }
.ds-textarea::placeholder { color: var(--text-tertiary); }
.ds-textarea:focus, .ds-select:focus {
outline: none; border-color: var(--border-accent); background: var(--surface-strong);
}
.ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled { opacity: 0.45; cursor: not-allowed; }
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"] {
border-color: var(--danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.ds-textarea { resize: vertical; min-height: 96px; line-height: var(--lh-relaxed); }
/* Chevron unique pour TOUS les menus déroulants de la suite. La data-URI ne
pouvant pas lire var(), la variante claire est fournie explicitement. */
.ds-select {
appearance: none; -webkit-appearance: none; cursor: pointer;
padding-right: var(--sp-10); text-overflow: ellipsis;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AEB9B2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right var(--sp-4) center;
}
[data-theme="light"] .ds-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6165' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.ds-select option { background: var(--bg-elevated); color: var(--text); }
/* Curseur — même piste, même pastille partout. */
.ds-range {
width: 100%; height: var(--tap-min); margin: 0; padding: 0;
background: transparent; appearance: none; -webkit-appearance: none;
cursor: pointer; border: none;
}
.ds-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: var(--surface-strong); }
.ds-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--surface-strong); }
.ds-range::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none;
width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--bg);
transition: transform var(--dur-fast) var(--ease-out);
}
.ds-range::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--bg);
}
.ds-range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.ds-range:active::-webkit-slider-thumb { transform: scale(1.25); }
.ds-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-pill); }
/* Interrupteur */
.ds-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap-min); }
.ds-switch__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ds-toggle {
position: relative; flex: none; width: 48px; height: 28px; padding: 0;
background: color-mix(in srgb, var(--text-secondary) 34%, transparent);
border: 0; border-radius: var(--radius-pill); cursor: pointer;
transition: background var(--dur-fast) var(--ease-out);
}
.ds-toggle::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
border-radius: 50%; background: #FFFFFF;
transition: transform var(--dur-fast) var(--ease-out);
}
.ds-toggle[aria-checked="true"] { background: var(--accent); }
.ds-toggle[aria-checked="true"]::after { transform: translateX(20px); }
.ds-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* -------------------------------------------------------------------------
S5. ONGLETS — variante filet (dans un panneau) et variante pilule (barre)
---------------------------------------------------------------------- */
.ds-tabs { display: flex; gap: var(--sp-1); }
.ds-tabs--line { padding: var(--sp-3) var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.ds-tabs--line .ds-tab {
flex: 1; min-height: var(--tap-min); padding: 0 var(--sp-2);
font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
color: var(--text-secondary); background: none;
border: 0; border-bottom: 2px solid transparent; cursor: pointer;
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ds-tabs--line .ds-tab:hover { color: var(--text); }
.ds-tabs--line .ds-tab[aria-selected="true"], .ds-tabs--line .ds-tab.is-active {
color: var(--accent); border-bottom-color: var(--accent);
}
.ds-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--radius-sm); }
.ds-tabs--pill {
padding: var(--sp-1); background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-pill);
overflow-x: auto; scrollbar-width: none;
}
.ds-tabs--pill::-webkit-scrollbar { display: none; }
.ds-tabs--pill .ds-tab {
flex: 1 0 auto;
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
min-height: var(--tap-min); padding: 0 var(--sp-4);
font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
color: var(--text-secondary); background: none; border: 0;
border-radius: var(--radius-pill); cursor: pointer;
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ds-tabs--pill .ds-tab:hover:not([aria-selected="true"]) { color: var(--text); background: var(--surface-strong); }
.ds-tabs--pill .ds-tab[aria-selected="true"] { color: var(--deep-black); background: var(--accent); }
/* -------------------------------------------------------------------------
S6. CONTRÔLE SEGMENTÉ — choix exclusif parmi 2 à 6 options
Une seule apparence dans toute la suite : puits en pilule, option retenue
en émeraude pleine. Fonctionne avec