/* ═══════════════════════════════════════════════════════════════════════
   PAGE AUTEUR — Florent Bronchain

   Tout est scopé sous .abcdt-auteur. Aucune règle sur html, body, :root
   ou * : cette page cohabite avec le header et le footer globaux, avec
   Elementor, et avec les styles hérités du thème. Elle ne doit rien leur
   imposer.

   Les couleurs viennent des jetons du design system, avec repli explicite
   pour le cas où la page serait rendue hors du socle global.
   ═══════════════════════════════════════════════════════════════════════ */

.abcdt-auteur {
  --au-ink:    var(--ink,    #06060A);
  --au-ink-2:  var(--ink-2,  #0B0B11);
  --au-text:   var(--text,   #E8E8F0);
  --au-text-2: var(--text-2, #B8B8C4);
  --au-text-3: var(--text-3, #9A9AB4);
  --au-line:   var(--line,   rgba(232, 232, 240, .12));
  --au-line-2: var(--line-2, rgba(232, 232, 240, .26));
  --au-blue:   var(--blue,   #1A6FFF);
  --au-blue-up:var(--blue-lift, #4A8CFF);
  --au-ffd:    var(--ff-d,   'Syne', system-ui, sans-serif);
  --au-ffb:    var(--ff-b,   'DM Sans', system-ui, sans-serif);
  --au-e:      var(--e,      cubic-bezier(.16, 1, .3, 1));
  --au-maxw:   var(--maxw,   1360px);

  background: var(--au-ink);
  color: var(--au-text);
  font-family: var(--au-ffb);
  padding: clamp(3rem, 9vw, 7rem) var(--gut, 1.25rem) clamp(4rem, 10vw, 8rem);
}

.abcdt-auteur > * {
  max-width: var(--au-maxw);
  margin-inline: auto;
}

/* ── Ouverture ────────────────────────────────────────────────────────
   Le portrait tient sa colonne sur grand écran et passe au-dessus du
   texte en dessous : c'est le seul ordre lisible sur téléphone, où une
   image en pleine largeur avant le nom vaut mieux qu'un nom flottant
   au-dessus d'une image coupée. */
.abcdt-auteur .au__hero {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
  border-bottom: 1px solid var(--au-line);
}

.abcdt-auteur .au__portrait {
  border-radius: 14px;
  overflow: hidden;
  background: var(--au-ink-2);
  border: 1px solid var(--au-line);
}

.abcdt-auteur .au__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
}

.abcdt-auteur .au__eyebrow {
  margin: 0 0 .75rem;
  font-size: .8125rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--au-text-3);
}

.abcdt-auteur .au__h1 {
  margin: 0 0 1.25rem;
  font-family: var(--au-ffd);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
  font-size: clamp(2.25rem, 7vw, 4rem);
  text-wrap: balance;
}

.abcdt-auteur .au__lede {
  margin: 0 0 1rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  color: var(--au-text-2);
}

/* ── Sections ─────────────────────────────────────────────────────────
   Une seule règle d'espacement pour tous les blocs : les marges par
   élément finissent toujours par se doubler ou se manger. */
.abcdt-auteur .au__bloc {
  display: grid;
  gap: 1rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--au-line);
}

.abcdt-auteur .au__fin {
  border-bottom: 0;
  padding-bottom: 0;
}

.abcdt-auteur .au__h2 {
  margin: 0;
  font-family: var(--au-ffd);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
}

.abcdt-auteur .au__p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.65;
  color: var(--au-text-2);
}

.abcdt-auteur .au__p a {
  color: var(--au-text);
  text-decoration: underline;
  text-decoration-color: var(--au-line-2);
  text-underline-offset: .22em;
  transition: text-decoration-color .25s var(--au-e), color .25s var(--au-e);
}

.abcdt-auteur .au__p a:hover {
  color: var(--au-blue-up);
  text-decoration-color: currentColor;
}

/* ── Domaines ─────────────────────────────────────────────────────────
   Sept liens vers les sept pages expertise. Ce n'est pas décoratif :
   c'est le maillage qui rattache la personne à ce que l'agence fait. */
.abcdt-auteur .au__dom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
}

.abcdt-auteur .au__dom a {
  display: inline-block;
  padding: .5rem .875rem;
  border: 1px solid var(--au-line);
  border-radius: 999px;
  font-size: .9375rem;
  color: var(--au-text-2);
  text-decoration: none;
  transition: border-color .25s var(--au-e), color .25s var(--au-e);
}

.abcdt-auteur .au__dom a:hover {
  border-color: var(--au-line-2);
  color: var(--au-text);
}

/* ── Articles ─────────────────────────────────────────────────────── */
.abcdt-auteur .au__art {
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.abcdt-auteur .au__art li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: .875rem 0;
  border-top: 1px solid var(--au-line);
}

.abcdt-auteur .au__art li:first-child {
  border-top: 0;
}

.abcdt-auteur .au__art a {
  color: var(--au-text);
  text-decoration: none;
  font-size: clamp(1rem, 1.7vw, 1.0625rem);
  line-height: 1.4;
  transition: color .25s var(--au-e);
}

.abcdt-auteur .au__art a:hover {
  color: var(--au-blue-up);
}

.abcdt-auteur .au__art time {
  font-size: .8125rem;
  color: var(--au-text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.abcdt-auteur .au__more {
  margin-top: .5rem;
  font-size: .9375rem;
}

/* ── Actions ─────────────────────────────────────────────────────────
   Un seul appel principal par bloc ; le lien LinkedIn reste secondaire
   et se lit comme un lien, pas comme un second bouton. */
.abcdt-auteur .au__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin: 1.25rem 0 0;
}

.abcdt-auteur .au__cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 1.375rem;
  border: 1px solid var(--au-line-2);
  border-radius: 999px;
  background: var(--au-ink-2);
  color: var(--au-text);
  font-size: .9375rem;
  text-decoration: none;
  transition: background-color .25s var(--au-e), border-color .25s var(--au-e);
}

.abcdt-auteur .au__cta:hover {
  background: #171722;
  border-color: var(--au-blue);
}

.abcdt-auteur .au__lk {
  color: var(--au-text-2);
  font-size: .9375rem;
  text-decoration: underline;
  text-decoration-color: var(--au-line-2);
  text-underline-offset: .22em;
  transition: color .25s var(--au-e);
}

.abcdt-auteur .au__lk:hover {
  color: var(--au-text);
}

/* ── Focus clavier ───────────────────────────────────────────────────
   Visible sur fond sombre, et jamais retiré. */
.abcdt-auteur a:focus-visible {
  outline: 2px solid var(--au-blue-up);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Grand écran ─────────────────────────────────────────────────────
   Deux colonnes seulement quand il y a réellement la place : en dessous,
   le portrait mangerait la largeur de lecture. */
@media (min-width: 860px) {
  .abcdt-auteur .au__hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }

  .abcdt-auteur .au__portrait {
    max-width: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abcdt-auteur * {
    transition-duration: .01ms !important;
  }
}