/* ============================================================
   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);

  /* É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 */

  /* ─── É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;
}

/* ----------------------------------------------------------- */
/* 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: rgba(240, 237, 232, 0.78);     /* --bg en translucide */
  -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;
}

@media (max-width: 480px) {
  .ak-header__inner { padding: 0 16px; gap: 10px; }
  .ak-brand__text   { font-size: 16px; }
  .ak-header__back  { font-size: 13px; padding: 0 8px; }
  .ak-header__tool  { font-size: 13px; }
}

/* 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). */
@media (max-width: 400px) {
  .ak-header__sep,
  .ak-header__tool { display: none; }
}

/* ----------------------------------------------------------- */
/* 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;
}