/* ============================================================================
   AAM OUTILS — habillage des quinze outils navigateur
   ----------------------------------------------------------------------------
   Règle héritée du thème : AUCUNE valeur en dur. Tout consomme les jetons de
   main.css (surfaces, encre, filets, espaces, rayons, ombres). Les classes
   sont préfixées .aam- pour ne jamais entrer en collision avec le thème, et
   les composants du thème (.yd-bouton, .yd-carte, .yd-notice…) sont
   réutilisés tels quels dans les gabarits.
   ========================================================================== */

/* ---------------------------------------------------------------- Structure */

.aam-outil__carte {
  display: grid;
  gap: var(--space-6);
}

/* L'intérieur de la carte outil : une grille, une ou deux colonnes. */
.aam-outil__interieur {
  display: grid;
  gap: var(--space-6);
}

/* Deux colonnes dès que l'écran le permet : le formulaire à gauche, le
   résultat à droite. Les outils purement verticaux gardent une colonne. */
@media (min-width: 64rem) {
  .aam-outil__carte--deux-colonnes {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.aam-outil__formulaire {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.aam-outil__sortie {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  align-content: start;
}

.aam-grille-2 {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40rem) {
  .aam-grille-2 { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------- Champs */

.aam-champ {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* Le fieldset arrive avec la gravure du navigateur : bordure biseautée,
   légende posée SUR le filet. C'est ce chrome par défaut qui faisait les
   pages outils « brutes » (constat Lucas du 21/08). On le rase, la légende
   devient un kicker du système. */
fieldset.aam-champ {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

legend.aam-champ__libelle {
  padding: 0;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.aam-champ__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.aam-champ__libelle {
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  font-weight: 500;
  color: var(--color-ink);
}

.aam-champ__aide {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--color-ink-subtle);
  margin: 0;
}

.aam-champ input[type="text"],
.aam-champ input[type="url"],
.aam-champ input[type="email"],
.aam-champ input[type="number"],
.aam-champ select,
.aam-champ textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  transition: border-color var(--duration-base) var(--ease-out-quint),
              box-shadow var(--duration-base) var(--ease-out-quint);
}

.aam-champ textarea {
  resize: vertical;
  min-height: 6.5rem;
}

.aam-champ input:focus-visible,
.aam-champ select:focus-visible,
.aam-champ textarea:focus-visible {
  outline: none;
  border-color: var(--color-line-brand);
  box-shadow: var(--shadow-focus);
}

/* Champ en dépassement : le filet passe au registre danger. */
.aam-champ--alerte input,
.aam-champ--alerte textarea {
  border-color: var(--color-danger);
}

/* ---------------------------------------------------------------- Compteurs */

.aam-compteur {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-subtle);
  white-space: nowrap;
}

.aam-compteur--proche { color: var(--color-warning-ink); }

.aam-compteur--alerte {
  color: var(--color-danger-ink);
  font-weight: 700;
}

/* -------------------------------------------------------- Cases et familles */

.aam-choix {
  display: grid;
  gap: var(--space-2);
}

.aam-choix--colonnes {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.aam-choix label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out-quint),
              background-color var(--duration-base) var(--ease-out-quint);
}

.aam-choix label:hover { border-color: var(--color-line-strong); }

.aam-choix input {
  accent-color: var(--color-primary-600);
  margin-top: 0.2em;
  flex: none;
}

.aam-choix label:has(input:checked) {
  border-color: var(--color-line-brand);
  background-color: var(--color-surface-brand-subtle);
}

.aam-choix__detail {
  display: block;
  color: var(--color-ink-subtle);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
}

/* ------------------------------------------------------------------ Actions */

.aam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Accusé de réception d'une copie : le bouton l'affiche lui-même. */
.aam-copie-ok {
  font-size: var(--text-sm);
  color: var(--color-success-ink);
}

/* ------------------------------------------------------------------ Sorties */

/* État vide : visible et assumé, jamais une zone blanche ambiguë. Surface
   creuse pleine plutôt que pointillés — le pointillé lisait « brouillon ». */
.aam-vide {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--color-ink-subtle);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  background-color: var(--color-surface-sunken);
}

/* La sortie suit le lecteur : sur grand écran elle reste sous les yeux
   pendant qu'il coche le formulaire. */
@media (min-width: 64rem) {
  .aam-outil__carte--deux-colonnes .aam-outil__sortie {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

.aam-resultat {
  display: grid;
  gap: var(--space-4);
}

.aam-resultat[hidden] { display: none; }

/* Bloc de code produit (page HTML, manifest, politique…). */
.aam-code {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-muted);
  max-height: 24rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Texte long produit (politique de confidentialité, notes de version). */
.aam-texte-produit {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: var(--space-5);
  max-height: 26rem;
  overflow: auto;
  font-size: var(--text-sm);
  line-height: var(--text-base-lh);
}

.aam-texte-produit h3 {
  font-size: var(--text-base);
  margin: var(--space-4) 0 var(--space-2);
}

/* Lignes de diagnostic (validateur, analyseur) : verdict par contrôle. */
.aam-controles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.aam-controles li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

.aam-controles__marque {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1.9;
}

.aam-controles li[data-etat="ok"] .aam-controles__marque { color: var(--color-success-ink); }
.aam-controles li[data-etat="attention"] .aam-controles__marque { color: var(--color-warning-ink); }
.aam-controles li[data-etat="echec"] .aam-controles__marque { color: var(--color-danger-ink); }

.aam-controles__explication {
  display: block;
  color: var(--color-ink-subtle);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
}

/* Verdict global (score, ratio LTV/CAC…). */
.aam-verdict {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  padding: var(--space-5) var(--space-6);
  display: grid;
  gap: var(--space-1);
  background-color: var(--color-surface-sunken);
}

.aam-verdict__valeur {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.aam-verdict--succes { border-color: var(--color-success-border); background-color: var(--color-success-subtle); }
.aam-verdict--attention { border-color: var(--color-warning-border); background-color: var(--color-warning-subtle); }
.aam-verdict--danger { border-color: var(--color-danger-border); background-color: var(--color-danger-subtle); }

/* Tableau de résultats (densité, tailles générées, budget par poste). */
.aam-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

.aam-tableau th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-subtle);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line-strong);
  background-color: var(--color-surface-sunken);
}

.aam-tableau td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.aam-tableau td.aam-tnum,
.aam-tableau th.aam-tnum {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.aam-tableau-defilant { overflow-x: auto; }

/* ------------------------------------------------------------------ Fichiers */

.aam-fichier {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-8) var(--space-6);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-sunken);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out-quint),
              background-color var(--duration-base) var(--ease-out-quint);
}

.aam-fichier:hover,
.aam-fichier:focus-within,
.aam-fichier--survol {
  border-color: var(--color-line-brand);
  background-color: var(--color-surface-brand-subtle);
}

.aam-fichier input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.aam-fichier__consigne {
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--color-ink-muted);
  margin: 0;
}

.aam-fichier__etat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
}

.aam-fichier__apercu {
  max-width: 7rem;
  max-height: 7rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
}

/* ------------------------------------------------------------- Aperçu iPhone */

.aam-iphone {
  width: min(20rem, 100%);
  margin-inline: auto;
  border: 10px solid var(--color-neutral-900);
  border-radius: 2.6rem;
  background-color: var(--color-surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.aam-iphone__ecran {
  padding: var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-4);
  min-height: 34rem;
  background-color: var(--color-surface);
}

.aam-iphone__entete {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.aam-iphone__icone {
  flex: none;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1rem;
  border: 1px solid var(--color-line);
  background-color: var(--color-surface-sunken);
  object-fit: cover;
}

.aam-iphone__nom {
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.25;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.aam-iphone__soustitre {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--color-ink-subtle);
  overflow-wrap: anywhere;
}

.aam-iphone__bouton {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 0.15rem 1rem;
  border-radius: 999px;
  background-color: var(--color-primary-600);
  color: var(--color-neutral-0);
  font-size: var(--text-xs);
  font-weight: 600;
}

.aam-iphone__meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  border-block: 1px solid var(--color-line);
  padding-block: var(--space-2);
}

.aam-iphone__captures {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

.aam-iphone__capture {
  flex: none;
  width: 9.5rem;
  aspect-ratio: 1290 / 2796;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface-sunken);
  object-fit: cover;
}

/* ------------------------------------------------------- Aperçus génériques */

.aam-apercu-visuel {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}

.aam-apercu-visuel canvas,
.aam-apercu-visuel img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

.aam-apercu-visuel--qr canvas { image-rendering: pixelated; }

/* Nuancier de dégradés de l'encadreur : des pastilles cliquables. */
.aam-nuancier {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.aam-nuancier button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-line);
  cursor: pointer;
  padding: 0;
}

.aam-nuancier button[aria-pressed="true"] {
  border-color: var(--color-line-brand);
  box-shadow: var(--shadow-focus);
}

/* --------------------------------------------------------------- Hub outils */

.aam-outil-carte {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.aam-outil-carte .yd-titre-sm { margin: 0; }

.aam-outil-carte p { margin: 0; }

/* ----------------------------------------------------------- Accessibilité */

@media (prefers-reduced-motion: reduce) {
  .aam-champ input,
  .aam-champ select,
  .aam-champ textarea,
  .aam-choix label,
  .aam-fichier {
    transition: none;
  }
}

/* -------------------------------------------------------- Grille d'icônes */

.aam-icones-grille {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

.aam-icone-vignette {
  margin: 0;
  display: grid;
  gap: var(--space-1);
  justify-items: center;
}

.aam-icone-vignette canvas {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

.aam-icone-vignette figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
}