/* ============================================================
   AudioKit — Socle CSS partagé
   ------------------------------------------------------------
   À importer dans chaque outil via :
     <link rel="stylesheet" href="/socle/layout.css">

   Les variables ci-dessous sont la source de vérité pour tout
   le projet (couleurs, rayons, espacements). Ne jamais coder
   une couleur en dur dans un outil — passer par la variable.
   ============================================================ */

:root {
  /* Palette — cf. CLAUDE.md section 4 */
  --bg:            #f0ede8;
  --surface:       #ffffff;
  --text:          #2c2c2a;
  --text-soft:     #5f5e5a;
  --text-faint:    #888780;
  --border:        #e2ded6;
  --border-strong: #cfcabf;
  --accent:        #4d5ce5;
  --warn-bg:       #faeeda;
  --warn-text:     #854f0b;
  --info-bg:       #e6f1fb;
  --info-text:     #185fa5;

  /* Sémantique additionnelle (pas dans CLAUDE.md mais dérivée) */
  --danger-bg:     #fbe4e2;
  --danger-text:   #8b1c12;
  --success-bg:    #e3f4e7;
  --success-text:  #186432;

  /* ─── Dérivés de l'accent (préparation dark-mode : on garde
         tout en variables pour pouvoir basculer plus tard) ─── */
  --accent-deep:   #3f4cd6;                      /* hover accent solide */
  --accent-tint:   rgba(77, 92, 229, 0.09);      /* fond tuile / surfaces accent diluées */
  --accent-tint-2: rgba(77, 92, 229, 0.16);      /* hover surface accent */
  --accent-ring:   rgba(77, 92, 229, 0.28);      /* focus ring doux */

  /* ─── Palette par catégorie d'outils ─────────────────────────
     Chaque catégorie reçoit sa teinte propre, dans une famille
     harmonieuse (saturation/luminosité proches) qui reste sobre
     sur le fond gris chaud. Pour chaque entrée :
       --cat-X       : couleur pleine  (utilisée pour icône au hover
                       et accentuations)
       --cat-X-tint  : version diluée  (fond de tuile au repos ~10%)
       --cat-X-glow  : ombre teintée   (élévation au hover ~32%)
     Préparation dark-mode : il suffira de redéfinir ces variables
     dans `[data-theme="dark"]` (sans toucher au code des cartes).
     ─────────────────────────────────────────────────────────── */

  /* Analyse & détection — indigo (couleur de marque) */
  --cat-analyse:       #4d5ce5;
  --cat-analyse-tint:  rgba(77, 92, 229, 0.10);
  --cat-analyse-glow:  rgba(77, 92, 229, 0.32);

  /* Découpe & structure — teal (précision, lame) */
  --cat-decoupe:       #2c9d8e;
  --cat-decoupe-tint:  rgba(44, 157, 142, 0.12);
  --cat-decoupe-glow:  rgba(44, 157, 142, 0.32);

  /* Conversion & fichiers — ambre chaud (échange, déplacement) */
  --cat-conversion:       #cc7a33;
  --cat-conversion-tint:  rgba(204, 122, 51, 0.12);
  --cat-conversion-glow:  rgba(204, 122, 51, 0.32);

  /* Correction & restauration — rose poudré (réparer / soigner) */
  --cat-correction:       #d35377;
  --cat-correction-tint:  rgba(211, 83, 119, 0.12);
  --cat-correction-glow:  rgba(211, 83, 119, 0.32);

  /* Générateurs & mesure — sauge (mesure, instrument) */
  --cat-generateurs:       #45886b;
  --cat-generateurs-tint:  rgba(69, 136, 107, 0.12);
  --cat-generateurs-glow:  rgba(69, 136, 107, 0.32);

  /* Création & beats — cyan (créatif, distinct de l'indigo analyse
     et du teal découpe). Utilisée pour Beat Maker. */
  --cat-creation:       #2f88c5;
  --cat-creation-tint:  rgba(47, 136, 197, 0.12);
  --cat-creation-glow:  rgba(47, 136, 197, 0.32);

  /* AI Tools — violet électrique (IA, premium, distinct du violet doux
     écosystème). Choisi pour évoquer la dimension "IA / cutting edge". */
  --cat-ai:                #7b3fe4;
  --cat-ai-tint:           rgba(123, 63, 228, 0.12);
  --cat-ai-glow:           rgba(123, 63, 228, 0.32);

  /* Écosystème — violet doux (signature, hors-site) */
  --cat-ecosysteme:       #8460c8;
  --cat-ecosysteme-tint:  rgba(132, 96, 200, 0.12);
  --cat-ecosysteme-glow:  rgba(132, 96, 200, 0.32);

  /* ─── Surfaces stratifiées : un soupçon de chaleur pour
         différencier le fond global du fond "élevé"   ─── */
  --bg-warm:       #f5f2ec;                      /* variante un peu plus claire de --bg */
  --glass-bg:      rgba(240, 237, 232, 0.80);   /* fond translucide header + barres (verre dépoli) */

  /* ─── Échelle d'ombres (multi-couches, douces) ─── */
  --shadow-1: 0 1px 2px  rgba(44, 44, 42, 0.04),
              0 1px 0    rgba(44, 44, 42, 0.02);
  --shadow-2: 0 4px 12px rgba(44, 44, 42, 0.06),
              0 1px 2px  rgba(44, 44, 42, 0.04);
  --shadow-3: 0 14px 36px rgba(44, 44, 42, 0.09),
              0 4px 10px  rgba(44, 44, 42, 0.05);
  --shadow-accent: 0 14px 32px rgba(77, 92, 229, 0.20),
                   0 4px 12px  rgba(77, 92, 229, 0.12);

  /* Rayons */
  --radius-btn:    8px;
  --radius-card:   14px;
  --radius-pill:   999px;

  /* Hauteur du header partagé (compense le padding-top des pages) */
  --header-h:      64px;

  /* Easing standard pour les micro-interactions */
  --ease-out:      cubic-bezier(.2, .8, .2, 1);

  /* Typographie */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
}

/* ============================================================
   Dark mode — palette fintech violet/lime
   ------------------------------------------------------------
   Activé par `data-theme="dark"` sur <html> (cf. socle/theme-init.js
   pour le boot anti-flash et socle/header.js pour le toggle).
   Le LIGHT ci-dessus n'est pas modifié : on redéfinit ici les
   mêmes variables, et tous les composants qui passent par ces
   variables suivent automatiquement.
   Lot 1 : socle uniquement. Les couleurs codées en JS dans les
   outils (waveforms, canvas, wavesurfer) restent à traiter dans
   un lot ultérieur.
   ============================================================ */
[data-theme="dark"] {
  --bg:            #191b1d;
  --surface:       #212427;
  --text:          #f4f4f1;
  --text-soft:     #b6b8b5;
  --text-faint:    #7c7e7b;
  --border:        #2d3033;
  --border-strong: #3a3e42;
  --accent:        #b9a3f5;

  --warn-bg:       #2e2716;  --warn-text:    #e8c578;
  --info-bg:       #182634;  --info-text:    #8fb8e0;
  --danger-bg:     #2e1c1a;  --danger-text:  #e88a8a;
  --success-bg:    #1e2a17;  --success-text: #c5e88a;

  --accent-deep:   #c9b8f7;
  --accent-tint:   rgba(185, 163, 245, 0.12);
  --accent-tint-2: rgba(185, 163, 245, 0.20);
  --accent-ring:   rgba(185, 163, 245, 0.40);

  --cat-analyse:      #b9a3f5;  --cat-analyse-tint:     rgba(185,163,245,0.14);  --cat-analyse-glow:     rgba(185,163,245,0.30);
  --cat-decoupe:      #5cc6b5;  --cat-decoupe-tint:     rgba(92,198,181,0.14);   --cat-decoupe-glow:     rgba(92,198,181,0.30);
  --cat-conversion:   #e0a05c;  --cat-conversion-tint:  rgba(224,160,92,0.14);   --cat-conversion-glow:  rgba(224,160,92,0.30);
  --cat-correction:   #e88aa6;  --cat-correction-tint:  rgba(232,138,166,0.14);  --cat-correction-glow:  rgba(232,138,166,0.30);
  --cat-generateurs:  #7fc89e;  --cat-generateurs-tint: rgba(127,200,158,0.14);  --cat-generateurs-glow: rgba(127,200,158,0.30);
  --cat-creation:     #6fc2ee;  --cat-creation-tint:    rgba(111,194,238,0.14);  --cat-creation-glow:    rgba(111,194,238,0.30);
  --cat-ai:           #c5e88a;  --cat-ai-tint:          rgba(197,232,138,0.14);  --cat-ai-glow:          rgba(197,232,138,0.30);
  --cat-ecosysteme:   #b9a3f5;  --cat-ecosysteme-tint:  rgba(185,163,245,0.14);  --cat-ecosysteme-glow:  rgba(185,163,245,0.30);

  --bg-warm:       #1c1f21;
  --glass-bg:      rgba(25, 27, 29, 0.80);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-3: 0 14px 36px rgba(0,0,0,0.50), 0 4px 10px rgba(0,0,0,0.35);
  --shadow-accent: 0 14px 32px rgba(185,163,245,0.22), 0 4px 12px rgba(185,163,245,0.14);

  color-scheme: dark;
}

/* ----------------------------------------------------------- */
/* Reset minimal + base de page                                */
/* ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

/* ============================================================
   Header partagé (composant /socle/header.js)
   ------------------------------------------------------------
   Bandeau collant en haut de chaque page (home + outils).
   On utilise une légère teinte translucide de --bg + backdrop
   blur pour donner un effet de profondeur moderne sans
   alourdir. Le focus visible passe par le :focus-visible
   global défini plus bas.
   ============================================================ */

.ak-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.ak-header__inner {
  max-width: 1160px;
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logo + texte de marque, cliquable vers "/" */
.ak-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  margin-left: -6px;                  /* aligne visuellement le logo sur la colonne */
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;                    /* signale explicitement l'interactivité */
  flex-shrink: 0;                     /* préserve le logo en mobile */
  transition: background .15s var(--ease-out),
              color .15s var(--ease-out);
}
/* Hover : fond teinté + bascule du mot-marque vers l'accent. La
   bascule de couleur du « Audio » (qui passe du texte sombre à
   l'accent) renforce le signal « ce truc est cliquable ». */
.ak-brand:hover            { background: var(--accent-tint); text-decoration: none; }
.ak-brand:hover .ak-brand__text { color: var(--accent); }
.ak-brand:focus-visible    { outline: 2px solid var(--accent); outline-offset: 2px; }

.ak-brand__logo {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}
.ak-brand__logo svg { width: 100%; height: 100%; }

.ak-brand__text {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.4px;
  line-height: 1;
  color: var(--text);
  transition: color .15s var(--ease-out);
}
.ak-brand__accent { color: var(--accent); }

/* Lien retour explicite « ← All tools ». N'apparaît QUE sur les
   pages d'outil (cf. socle/header.js : conditionné par toolName).
   On le veut visuellement reconnaissable comme un lien (couleur
   accent au repos), pas comme un simple texte secondaire. */
.ak-header__back {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-btn);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;                     /* jamais compressé même si le nom d'outil déborde */
  transition: background .15s var(--ease-out),
              color .15s var(--ease-out);
}
.ak-header__back:hover {
  background: var(--accent-tint);
  color: var(--accent-deep);
  text-decoration: none;
}
.ak-header__back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Séparateur entre le lien retour et le nom d'outil. */
.ak-header__sep {
  width: 1px;
  height: 22px;
  background: var(--border-strong);
  opacity: 0.9;
  flex-shrink: 0;
}

.ak-header__tool {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: -0.1px;
  /* on évite que le nom d'outil pousse le logo en mobile, et on lui
     laisse la priorité d'absorption d'espace (le lien retour ne se
     compresse pas, lui — cf. flex-shrink: 0 plus haut). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

/* Switch de langue (FR/EN). Placé après la zone d'auth dans
   le markup, donc visuellement au coin droit du header, juste
   après le bouton utilisateur. Petit lien sobre — discret au
   repos, accent au survol — pour ne pas concurrencer le CTA
   d'auth qui doit rester la cible principale. */
.ak-header__lang {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 9px;
  border-radius: var(--radius-btn);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s var(--ease-out),
              color .15s var(--ease-out);
}
.ak-header__lang:hover {
  background: var(--accent-tint);
  color: var(--accent);
  text-decoration: none;
}
.ak-header__lang:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Toggle thème (light/dark). Visible pour tous (connecté ou non),
   donc placé hors du slot d'auth. Calqué sur .ak-header__lang pour
   rester homogène avec lui (même hauteur, même hover). Bouton
   transparent au repos, icône en --text-soft ; au hover, fond
   --accent-tint et icône --accent. */
.ak-header__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-btn);
  color: var(--text-soft);
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s var(--ease-out),
              color .15s var(--ease-out);
}
.ak-header__theme svg {
  width: 16px;
  height: 16px;
  display: block;
}
.ak-header__theme:hover {
  background: var(--accent-tint);
  color: var(--accent);
}
.ak-header__theme:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Mobile : on condense la zone d'auth à l'avatar seul. Le nom (et le
   caret) prennent trop de largeur sur une seule ligne ; l'avatar suffit
   et le menu utilisateur reste accessible au clic. Sélecteur préfixé
   `.ak-header` (spécificité 0,2,0) car auth.css est injecté APRÈS
   layout.css au runtime : il faut battre sa règle de base sur le nom. */
@media (max-width: 600px) {
  .ak-header .ak-auth-user__name,
  .ak-header .ak-auth-user__caret { display: none; }
  .ak-header .ak-auth-user        { gap: 0; padding: 0 6px; }
}

@media (max-width: 480px) {
  .ak-header__inner  { padding: 0 16px; gap: 10px; }
  .ak-brand__text    { font-size: 16px; }
  .ak-header__tool   { font-size: 13px; }
  .ak-header__lang   { font-size: 11.5px; padding: 0 7px; }
  .ak-header__theme  { width: 28px; height: 28px; }

  /* Lien retour réduit à la flèche seule : le libellé complet
     (« ← Tous les outils ») déborde sur écran étroit. On masque le
     texte via font-size:0 et on réinjecte la flèche en ::before — le
     nœud texte reste dans le DOM, donc le nom accessible du lien est
     préservé pour les lecteurs d'écran. */
  .ak-header__back   { font-size: 0; padding: 0 6px; }
  .ak-header__back::before {
    content: "\2190";              /* ← */
    font-size: 18px;
    line-height: 1;
  }
}

/* Très petit viewport : on cache le nom d'outil pour préserver le
   lien retour, qui est plus utile que le rappel du nom (déjà visible
   dans le H1 de la page d'outil juste en dessous). On resserre aussi
   gaps et paddings pour tenir jusqu'à ~320px sans débordement. */
@media (max-width: 400px) {
  .ak-header__sep,
  .ak-header__tool { display: none; }
  .ak-header__inner { padding: 0 12px; gap: 8px; }
}

/* ----------------------------------------------------------- */
/* Layout d'un outil — conteneur centré                        */
/* ----------------------------------------------------------- */

.tool-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.tool-header {
  margin-bottom: 28px;
  text-align: left;
}

.tool-header__title {
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--text);
}

.tool-header__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
  max-width: 560px;
}

/* Carte (zone de travail principale d'un outil) */
.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  margin-top: 16px;
  box-shadow: var(--shadow-2);
}

@media (max-width: 540px) {
  .tool-page  { padding: 32px 16px 64px; }
  .tool-card  { padding: 20px; }
}

/* ----------------------------------------------------------- */
/* Boutons                                                      */
/* ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: background .15s var(--ease-out),
              border-color .15s var(--ease-out),
              color .15s var(--ease-out),
              box-shadow .15s var(--ease-out),
              transform .06s var(--ease-out);
}

.btn:hover  {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(77, 92, 229, 0.22);
}
.btn--primary:hover  {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn--primary:active { transform: translateY(1px); }

.btn[disabled],
.btn--primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------------------------------------------------------- */
/* Zone de drop / uploader                                      */
/* ----------------------------------------------------------- */

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  padding: 28px 20px;
  background: var(--bg);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-card);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.dropzone__icon {
  width: 32px;
  height: 32px;
  color: var(--text-faint);
}

.dropzone.is-dragover .dropzone__icon { color: var(--accent); }

.dropzone__label {
  font-size: 14px;
  color: var(--text);
}

.dropzone__hint {
  font-size: 12.5px;
  color: var(--text-soft);
}

.dropzone__input { display: none; }

/* Fichier sélectionné (affichage compact, remplace la dropzone) */
.file-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.file-summary__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-summary__meta {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-left: 8px;
  flex-shrink: 0;
}

.file-summary__reset {
  background: none;
  border: 0;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-btn);
}
.file-summary__reset:hover { color: var(--accent); background: var(--surface); }

/* ----------------------------------------------------------- */
/* Champs (label + select / input)                              */
/* ----------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-soft);
}

.field__select,
.field__input {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}

.field__select:focus,
.field__input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ----------------------------------------------------------- */
/* États : chargement, erreur, succès, info                     */
/* ----------------------------------------------------------- */

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  line-height: 1.4;
  margin-top: 12px;
}

.status--info    { background: var(--info-bg);    color: var(--info-text); }
.status--error   { background: var(--danger-bg);  color: var(--danger-text); }
.status--success { background: var(--success-bg); color: var(--success-text); }
.status--warn    { background: var(--warn-bg);    color: var(--warn-text); }

/* Barre de progression linéaire (load ffmpeg + traitement) */
.progress {
  margin-top: 12px;
}

.progress__label {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.progress__bar {
  position: relative;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--accent);
  border-radius: inherit;
  transition: width .15s linear;
}

/* Mode "indéterminé" — animation de balayage quand on n'a pas de % */
.progress__fill--indeterminate {
  width: 30% !important;
  animation: progress-sweep 1.2s ease-in-out infinite;
}

@keyframes progress-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(380%); }
}

/* ----------------------------------------------------------- */
/* Bloc résultat (audio + actions)                              */
/* ----------------------------------------------------------- */

.result {
  margin-top: 20px;
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.result__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
}

.result__audio {
  width: 100%;
  height: 44px;
  display: block;
  margin-bottom: 12px;
}

.result__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------- */
/* Utilitaires                                                  */
/* ----------------------------------------------------------- */

.hidden { display: none !important; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }

/* Lien discret pour le footer d'un outil */
.tool-footnote {
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

/* Accessibilité — focus visible cohérent */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}