/* Socle composants. Boutons, cartes, preuves, cas, tete, rail, formulaire, pied.
   Ils se taisent. Le copy porte la page. Tokens du contrat seulement. */

:root {
  --radius-btn: 2px;
  --radius-card: 4px;
}

.btn,
.btn--ghost,
.btn--accent,
.carte,
.carte__media,
.carte__corps,
.carte__verbe,
.preuve,
.cas,
.pied,
.tete,
.rail,
.formulaire,
.champ,
.champ__ctrl {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* 1. Bouton. Un verbe, 200 ms, pas de bounce, pas de scale(1.05).    */
/*    .btn et .btn--accent = le CTA. Accent = 10 % de la page.        */
/* ------------------------------------------------------------------ */

.btn,
.btn--accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-min, 48px);
  min-width: var(--tap-min, 48px);
  padding: 0 1.15rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm, 0.8125rem);
  font-weight: var(--fw-medium, 500);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    opacity var(--dur-ui, 200ms) var(--ease-ui, cubic-bezier(0.12, 0, 0.38, 0)),
    transform var(--dur-ui, 200ms) var(--ease-ui, cubic-bezier(0.12, 0, 0.38, 0));
}

.sur-decor a.btn:not(.btn--ghost),
.sur-decor .btn:not(.btn--ghost),
.sur-decor .btn--accent,
a.btn:not(.btn--ghost),
button.btn:not(.btn--ghost) {
  color: var(--accent-fg);
}

a.btn.btn--ghost,
button.btn.btn--ghost,
.sur-decor a.btn.btn--ghost,
.sur-decor .btn--ghost,
.btn--ghost {
  color: var(--accent);
}

.btn:hover,
.btn--accent:hover {
  opacity: 0.86;
}

.btn:active,
.btn--accent:active {
  opacity: 0.74;
  transform: translateY(1px);
}

.btn:focus,
.btn--accent:focus,
.btn--ghost:focus {
  outline: none;
}

.btn:focus-visible,
.btn--accent:focus-visible,
.btn--ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn[aria-busy="true"],
.btn--accent[aria-busy="true"],
.btn--ghost[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
  cursor: progress;
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn--accent:disabled,
.btn--accent[disabled],
.btn--accent[aria-disabled="true"],
.btn--ghost:disabled,
.btn--ghost[disabled],
.btn--ghost[aria-disabled="true"] {
  opacity: 0.38;
  pointer-events: none;
  cursor: not-allowed;
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-min, 48px);
  min-width: var(--tap-min, 48px);
  padding: 0 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm, 0.8125rem);
  font-weight: var(--fw-medium, 500);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    opacity var(--dur-ui, 200ms) var(--ease-ui, cubic-bezier(0.12, 0, 0.38, 0)),
    border-color var(--dur-ui, 200ms) var(--ease-ui, cubic-bezier(0.12, 0, 0.38, 0)),
    transform var(--dur-ui, 200ms) var(--ease-ui, cubic-bezier(0.12, 0, 0.38, 0));
}

.btn--ghost:hover {
  opacity: 1;
  border-color: var(--accent);
}

.btn--ghost:active {
  opacity: 0.72;
  transform: translateY(1px);
}

/* ------------------------------------------------------------------ */
/* 2. .tete  barre <= 56 px, CTA permanent a droite.                  */
/* ------------------------------------------------------------------ */

.tete {
  position: sticky;
  top: var(--safe-top, 0px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--header-h, 56px);
  max-height: var(--header-h, 56px);
  padding-inline: max(var(--gutter, 16px), var(--safe-left, 0px))
    max(var(--gutter, 16px), var(--safe-right, 0px));
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}

.tete__marque {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 48px);
  color: var(--fg);
  font-family: var(--font-display, var(--font-body, inherit));
  font-size: var(--fs-md, 1rem);
  font-weight: var(--fw-semibold, 600);
  text-decoration: none;
  white-space: nowrap;
}

.tete__nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}

.tete__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 48px);
  padding-inline: 0.7rem;
  color: var(--fg-mute);
  font-size: var(--fs-sm, 0.8125rem);
  text-decoration: none;
  white-space: nowrap;
}

.tete__nav a:hover,
.tete__nav a:focus-visible,
.tete__nav a[aria-current="page"] {
  color: var(--fg);
}

.tete__cta {
  margin-inline-start: auto;
  flex: 0 0 auto;
  max-height: calc(var(--header-h, 56px) - 8px);
  padding-block: 0;
}

@media (max-width: 600px) {
  .tete__nav {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* 3. .carte  overlay = un verbe. Tap = hover (TAWlLFCqF1k).          */
/* ------------------------------------------------------------------ */

.carte {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border-radius: var(--radius-card);
  touch-action: manipulation;
}

.carte__lien {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.carte__media {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--bg-mute);
}

.carte__media img,
.carte__media video {
  display: block;
  width: 100%;
  height: auto;
}

.carte__corps {
  display: grid;
  gap: 0.2rem;
}

.carte__nom {
  margin: 0;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-md, 1rem);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-snug, 1.22);
  color: var(--fg);
}

.carte__resultat {
  margin: 0;
  font-size: var(--fs-sm, 0.8125rem);
  line-height: var(--lh-body, 1.55);
  color: var(--fg-mute);
}

.carte__verbe {
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  align-self: end;
  justify-self: start;
  margin: 0.75rem;
  padding: 0 0.95rem;
  min-height: var(--tap-min, 48px);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm, 0.8125rem);
  font-weight: var(--fw-medium, 500);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-ui, cubic-bezier(0.12, 0, 0.38, 0));
}

.carte__media > .carte__verbe {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  right: auto;
  top: auto;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .carte:hover .carte__verbe,
  .carte:focus-within .carte__verbe,
  .carte.is-ouvert .carte__verbe {
    opacity: 1;
  }
}

/* Sans JS, telephone.css laisse le verbe lu. Avec JS, tap 1 = hover. */
@media (hover: none) {
  html[data-socle-composants] .carte:not(.is-ouvert):not(:focus-within) .carte__verbe {
    opacity: 0;
  }

  html[data-socle-composants] .carte.is-ouvert .carte__verbe,
  html[data-socle-composants] .carte:focus-within .carte__verbe {
    opacity: 1;
  }
}

.carte.is-ouvert .carte__verbe {
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* 4. .preuve  citation ou use case. Photo seulement si Abygael.      */
/* ------------------------------------------------------------------ */

.preuve {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  max-width: 36rem;
  color: var(--fg);
  background: transparent;
}

.preuve__photo {
  display: none;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--bg-mute);
}

.preuve--photo .preuve__photo {
  display: block;
}

.preuve__mots {
  margin: 0;
  font-family: var(--font-display, var(--font-body, inherit));
  font-size: var(--fs-lg, 1.125rem);
  font-weight: var(--fw-regular, 400);
  line-height: var(--lh-body, 1.55);
  color: var(--fg);
}

.preuve__nom {
  margin: 0;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-md, 1rem);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-snug, 1.22);
  color: var(--fg);
}

.preuve__role {
  margin: 0;
  font-size: var(--fs-sm, 0.8125rem);
  line-height: var(--lh-body, 1.55);
  color: var(--fg-mute);
}

.preuve__qui {
  display: grid;
  gap: 0.15rem;
}

/* ------------------------------------------------------------------ */
/* 5. .cas  nom + 1 chiffre ou resultat + 1 verbe + tags metier.      */
/* ------------------------------------------------------------------ */

.cas {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 0;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.cas__nom {
  margin: 0;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-md, 1rem);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-snug, 1.22);
  color: var(--fg);
}

.cas__chiffre,
.cas__resultat {
  margin: 0;
  font-size: var(--fs-sm, 0.8125rem);
  line-height: var(--lh-body, 1.55);
  color: var(--fg-mute);
}

.cas__verbe {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 48px);
  width: fit-content;
  color: var(--accent);
  font-size: var(--fs-sm, 0.8125rem);
  font-weight: var(--fw-medium, 500);
  text-decoration: none;
}

.cas__verbe:hover,
.cas__verbe:focus-visible {
  text-decoration: underline;
}

.cas__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cas__tags li,
.cas__tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-regular, 400);
  letter-spacing: var(--ls-meta, 0.08em);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ------------------------------------------------------------------ */
/* 6. .preuves  liste typo (compat page demo). Un item, pas 3 cartes. */
/* ------------------------------------------------------------------ */

.preuves {
  display: block;
}

.preuves__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.preuves__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.preuves__index {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-regular, 400);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.preuves__nom {
  margin: 0;
  font-size: var(--fs-md, 1rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--fg);
}

.preuves__chiffre {
  margin: 0;
  flex: 1 1 12rem;
  font-size: var(--fs-sm, 0.8125rem);
  color: var(--fg-mute);
}

.preuves__verbe {
  margin-inline-start: auto;
  color: var(--accent);
  font-size: var(--fs-sm, 0.8125rem);
  font-weight: var(--fw-medium, 500);
  text-decoration: none;
  min-height: var(--tap-min, 48px);
  display: inline-flex;
  align-items: center;
}

.preuves__verbe:hover,
.preuves__verbe:focus-visible {
  text-decoration: underline;
}

.preuves--un .preuves__item {
  display: none;
  border-bottom: 0;
  padding-block: 0;
}

.preuves--un .preuves__item.is-courant,
.preuves--un:not(:has(.is-courant)) .preuves__item:first-child {
  display: block;
}

.preuves--un .preuves__nom {
  font-size: var(--fs-xl, 1.5rem);
  line-height: var(--lh-tight, 1.05);
}

.preuves--un .preuves__chiffre {
  margin-top: 0.4rem;
  font-size: var(--fs-md, 1rem);
}

.preuves--un .preuves__verbe {
  margin-inline-start: 0;
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* 7. .rail  snap horizontal, comparer, pas une camera 3D.            */
/* ------------------------------------------------------------------ */

.rail {
  display: flex;
  gap: var(--gutter, 16px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter, 16px);
  padding-inline: var(--gutter, 16px);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
}

.rail__item,
.rail > .carte,
.rail > .cas {
  flex: 0 0 80vw;
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 601px) {
  .rail__item,
  .rail > .carte,
  .rail > .cas {
    flex-basis: 22rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8. .formulaire  label visible, erreur --danger.                    */
/* ------------------------------------------------------------------ */

.formulaire {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  max-width: 32rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.champ__label {
  display: block;
  color: var(--fg);
  font-size: var(--fs-sm, 0.8125rem);
  font-weight: var(--fw-medium, 500);
}

.champ__ctrl {
  width: 100%;
  min-height: var(--tap-min, 48px);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: var(--font-body, inherit);
  font-size: max(16px, var(--fs-md, 1rem));
  line-height: var(--lh-body, 1.55);
  appearance: none;
  -webkit-appearance: none;
}

.champ__ctrl::placeholder {
  color: var(--fg-faint);
}

.champ__ctrl:focus {
  outline: none;
}

.champ__ctrl:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

textarea.champ__ctrl {
  min-height: 8rem;
  resize: vertical;
}

.champ__err {
  display: none;
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-xs, 0.75rem);
  line-height: var(--lh-snug, 1.22);
}

.champ.is-err .champ__err,
.champ:has([aria-invalid="true"]) .champ__err,
.champ__err:not(:empty) {
  display: block;
}

.champ.is-err .champ__ctrl,
.champ:has([aria-invalid="true"]) .champ__ctrl {
  border-color: var(--danger);
}

.formulaire > .btn,
.formulaire > .btn--accent,
.formulaire .btn[type="submit"] {
  align-self: start;
}

@media (max-width: 600px) {
  .formulaire > .btn,
  .formulaire > .btn--accent,
  .formulaire .btn[type="submit"] {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* 9. .pied  liens, mentions. Pas un dark slab, pas un second canvas. */
/* ------------------------------------------------------------------ */

.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.15rem max(var(--gutter, 16px), var(--safe-right, 0px))
    max(1.15rem, var(--safe-bottom, 0px))
    max(var(--gutter, 16px), var(--safe-left, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-mute);
  font-size: var(--fs-xs, 0.75rem);
  line-height: var(--lh-body, 1.55);
}

.pied__liens,
.pied__mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.pied__liens a,
.pied__mentions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 48px);
  color: var(--fg);
  text-decoration: none;
}

.pied__liens a:hover,
.pied__liens a:focus-visible,
.pied__mentions a:hover,
.pied__mentions a:focus-visible {
  color: var(--fg);
  text-decoration: underline;
}

.pied__note {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* 10. Appear. Un par section. opacity + transform seulement.         */
/* ------------------------------------------------------------------ */

html[data-socle-composants] [data-appear] {
  transition:
    opacity var(--dur-appear, 800ms) var(--ease-appear, cubic-bezier(0.12, 0.23, 0.5, 1)),
    transform var(--dur-appear, 800ms) var(--ease-appear, cubic-bezier(0.12, 0.23, 0.5, 1));
}

html[data-socle-composants] [data-appear]:not(.is-in) {
  opacity: 0;
  transform: translateY(30px);
}

html[data-socle-composants] [data-appear].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn--ghost,
  .btn--accent,
  .carte__verbe {
    transition: none;
    transform: none;
  }

  .carte__verbe,
  html[data-socle-composants] [data-appear],
  html[data-socle-composants] [data-appear]:not(.is-in) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}