/* ═══════════════════════════════════════════════════════════════════════
   PAGE RESSOURCES

   Tout est scopé sous .abcdt-ressources. Aucune règle sur html, body,
   :root ou * : la page cohabite avec le header et le footer globaux,
   avec Elementor et avec le thème.

   PARTI PRIS. Une revue, pas un tableau de bord. Le rythme vient de la
   typographie et du vide, pas d'une grille de cartes uniformes : un
   article en grand, deux en regard, puis le corpus en colonnes. Le bleu
   n'apparaît qu'à trois endroits — l'appel à l'action, le filtre actif,
   et le focus clavier.

   Références 21st.dev retenues : la composition « une grande carte +
   secondaires » de Blog Posts (aymanch-03), et les puces de filtre à
   compteur de Filter Grid (ddoemonn). Reprises comme idées de mise en
   page, réécrites entièrement en CSS natif.
   ═══════════════════════════════════════════════════════════════════════ */

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

  background: var(--rs-ink);
  color: var(--rs-text);
  font-family: var(--rs-ffb);
}

.abcdt-ressources .wrap {
  width: 100%;
  max-width: var(--rs-maxw);
  margin-inline: auto;
  padding-inline: var(--rs-gut);
}

/* ── Ouverture ─────────────────────────────────────────────────────────
   Le hero porte un fond animé, mais rien d'essentiel n'y repose : le
   titre, le chapô et le compteur sont du texte, lisibles si la vidéo ne
   se charge jamais. C'est une texture, pas un sujet. */
.abcdt-ressources .rs__hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 12vw, 9rem) clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--rs-line);
  overflow: hidden;
}

.abcdt-ressources .rs__heroBg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* Le poster est posé en fond du conteneur : il s'affiche même quand la
   balise <video> ne charge rien — petit écran, mouvement réduit, ou
   simple échec réseau. */
.abcdt-ressources .rs__heroBg {
  background: #06060A url('https://abcdigitaltouch.fr/wp-content/uploads/abc-home/se-trace.jpg') center / cover no-repeat;
}

.abcdt-ressources .rs__heroV {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.2s var(--rs-e);
}

.abcdt-ressources .rs__heroV.is-on { opacity: 1; }

/* VOILE LOCALISÉ, et c'est le second correctif.

   La version précédente posait un dégradé dense sur toute la largeur :
   .58 d'opacité au point le plus clair. Combiné à une vidéo à 31/255,
   il ne restait que 13/255 à l'écran — indiscernable du fond.

   Ici le voile protège la ZONE DU TEXTE, à gauche, et relâche à droite
   pour laisser la matière exister. Au point le plus ouvert il ne retient
   que 22 %, soit environ 45/255 pour une vidéo à 58 : sept fois l'écart
   précédent avec le fond de page. */
.abcdt-ressources .rs__heroVeil {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(95deg,
      rgba(6, 6, 10, .95) 0%,
      rgba(6, 6, 10, .90) 30%,
      rgba(6, 6, 10, .55) 52%,
      rgba(6, 6, 10, .22) 72%,
      rgba(6, 6, 10, .30) 100%),
    linear-gradient(to bottom, rgba(6, 6, 10, .45), transparent 26%, rgba(6, 6, 10, .55));
}

/* Sous 1000 px, la vidéo n'est jamais chargée : 24 Ko de poster au lieu
   de 493 Ko, sur les connexions qui en profitent le plus. */
@media (max-width: 999px) {
  .abcdt-ressources .rs__heroV { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .abcdt-ressources .rs__heroV { display: none; }
}

.abcdt-ressources .rs__heroIn { max-width: 62rem; }

.abcdt-ressources .rs__eyebrow,
.abcdt-ressources .rs__k,
.abcdt-ressources .rs__fam {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rs-text-3);
  margin: 0;
}

.abcdt-ressources .rs__h1 {
  margin: .9rem 0 1.4rem;
  font-family: var(--rs-ffd);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.02;
  font-size: clamp(2.1rem, 6.4vw, 4.4rem);
  text-wrap: balance;
}

.abcdt-ressources .rs__lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.62;
  color: var(--rs-text-2);
}

.abcdt-ressources .rs__count {
  margin: 1.6rem 0 0;
  font-size: .875rem;
  color: var(--rs-text-3);
  font-variant-numeric: tabular-nums;
}

.abcdt-ressources .rs__count b { color: var(--rs-text); font-weight: 600; }

/* ── À la une ────────────────────────────────────────────────────────── */
.abcdt-ressources .rs__une { padding-block: clamp(2.5rem, 6vw, 4rem); }

.abcdt-ressources .rs__uneGrid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 1.25rem;
}

.abcdt-ressources .rs__lead,
.abcdt-ressources .rs__secI,
.abcdt-ressources .rs__c {
  display: grid;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
}

/* L'image garde son rapport : la place est réservée avant chargement,
   donc rien ne saute quand elle arrive. */
.abcdt-ressources .rs__leadImg,
.abcdt-ressources .rs__secImg,
.abcdt-ressources .rs__cImg {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--rs-line);
  background: var(--rs-ink-2);
  aspect-ratio: 16 / 9;
}

.abcdt-ressources .rs__leadImg { aspect-ratio: 16 / 8; }

.abcdt-ressources .rs__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .7s var(--rs-e), opacity .4s var(--rs-e);
}

.abcdt-ressources .rs__noimg {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(26, 111, 255, .10), transparent 60%),
    var(--rs-ink-2);
}

.abcdt-ressources a:hover .rs__img { transform: scale(1.035); }

.abcdt-ressources .rs__leadH {
  display: block;
  font-family: var(--rs-ffd);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  text-wrap: balance;
}

.abcdt-ressources .rs__leadX {
  display: block;
  margin-top: .5rem;
  max-width: 54ch;
  color: var(--rs-text-2);
  line-height: 1.6;
  font-size: .9375rem;
}

.abcdt-ressources .rs__secH,
.abcdt-ressources .rs__cH {
  display: block;
  margin-top: .3rem;
  font-family: var(--rs-ffd);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.22;
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  text-wrap: balance;
  transition: color .3s var(--rs-e);
}

.abcdt-ressources a:hover .rs__leadH,
.abcdt-ressources a:hover .rs__secH,
.abcdt-ressources a:hover .rs__cH { color: var(--rs-blue-2); }

.abcdt-ressources .rs__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
  font-size: .8125rem;
  color: var(--rs-text-3);
  font-variant-numeric: tabular-nums;
}

.abcdt-ressources .rs__meta i {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--rs-line-2); display: inline-block;
}

.abcdt-ressources .rs__sec { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

/* ── Barre : titre + recherche ───────────────────────────────────────── */
.abcdt-ressources .rs__all {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--rs-line);
}

.abcdt-ressources .rs__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.abcdt-ressources .rs__search {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--rs-line);
  border-radius: 999px;
  padding: .25rem .3rem .25rem 1rem;
  background: var(--rs-ink-2);
  transition: border-color .3s var(--rs-e);
}

.abcdt-ressources .rs__search:focus-within { border-color: var(--rs-line-2); }

.abcdt-ressources .rs__srLabel {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.abcdt-ressources .rs__search input[type="search"] {
  background: transparent;
  border: 0;
  color: var(--rs-text);
  font: inherit;
  font-size: .9375rem;
  min-width: 12rem;
  min-height: 40px;
  outline: none;
}

.abcdt-ressources .rs__search input::placeholder { color: var(--rs-text-3); }

.abcdt-ressources .rs__srBtn {
  border: 0;
  border-radius: 999px;
  background: var(--rs-ink-3);
  color: var(--rs-text-2);
  font: inherit;
  font-size: .8125rem;
  min-height: 40px;
  padding-inline: 1rem;
  cursor: pointer;
  transition: background-color .3s var(--rs-e), color .3s var(--rs-e);
}

.abcdt-ressources .rs__srBtn:hover { background: var(--rs-blue); color: #06060A; }

/* ── Filtres ─────────────────────────────────────────────────────────── */
.abcdt-ressources .rs__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem 0 2rem;
}

.abcdt-ressources .rs__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding-inline: .95rem;
  border: 1px solid var(--rs-line);
  border-radius: 999px;
  background: transparent;
  color: var(--rs-text-2);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
  transition: border-color .3s var(--rs-e), color .3s var(--rs-e), background-color .3s var(--rs-e);
}

.abcdt-ressources .rs__chip:hover { border-color: var(--rs-line-2); color: var(--rs-text); }

.abcdt-ressources .rs__chip.is-on {
  border-color: var(--rs-blue);
  color: var(--rs-text);
  background: rgba(26, 111, 255, .10);
}

.abcdt-ressources .rs__n {
  font-size: .75rem;
  color: var(--rs-text-3);
  font-variant-numeric: tabular-nums;
}

.abcdt-ressources .rs__chip.is-on .rs__n { color: var(--rs-blue-2); }

.abcdt-ressources .rs__empty {
  margin: 2rem 0;
  color: var(--rs-text-3);
  font-size: .9375rem;
}

/* ── Grille du corpus ────────────────────────────────────────────────── */
.abcdt-ressources .rs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
}

.abcdt-ressources .rs__i { min-width: 0; }

/* Le focus clavier est visible partout, et jamais retiré. */
.abcdt-ressources a:focus-visible,
.abcdt-ressources button:focus-visible,
.abcdt-ressources input:focus-visible {
  outline: 2px solid var(--rs-blue-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Fin de page ─────────────────────────────────────────────────────── */
.abcdt-ressources .rs__end {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--rs-line);
  background: var(--rs-ink-2);
}

.abcdt-ressources .rs__endH {
  margin: .8rem 0 1rem;
  font-family: var(--rs-ffd);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.06;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  text-wrap: balance;
}

.abcdt-ressources .rs__endP {
  margin: 0;
  max-width: 44ch;
  color: var(--rs-text-2);
  line-height: 1.6;
}

.abcdt-ressources .rs__endA {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin: 1.75rem 0 0;
}

.abcdt-ressources .rs__cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 1.5rem;
  border-radius: 999px;
  background: var(--rs-blue);
  color: #06060A;
  font-weight: 500;
  font-size: .9375rem;
  text-decoration: none;
  transition: background-color .3s var(--rs-e), transform .3s var(--rs-e);
}

.abcdt-ressources .rs__cta:hover { background: var(--rs-blue-2); }

.abcdt-ressources .rs__lk {
  color: var(--rs-text-2);
  font-size: .9375rem;
  text-decoration: underline;
  text-decoration-color: var(--rs-line-2);
  text-underline-offset: .22em;
  transition: color .3s var(--rs-e);
}

.abcdt-ressources .rs__lk:hover { color: var(--rs-text); }

/* ── Largeurs ────────────────────────────────────────────────────────────
   Le corpus passe à deux colonnes dès qu'une carte tient sans écraser son
   titre, à trois quand la mesure le permet encore. La une passe en deux
   colonnes plus tard : elle a besoin de sa largeur pour exister. */
@media (min-width: 640px) {
  .abcdt-ressources .rs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abcdt-ressources .rs__sec  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .abcdt-ressources .rs__uneGrid { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
  .abcdt-ressources .rs__sec     { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .abcdt-ressources .rs__grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1600px) {
  .abcdt-ressources .rs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Mouvement ───────────────────────────────────────────────────────────
   L'apparition est OPT-IN, jamais opt-out. Le contenu est visible par
   défaut ; c'est le script qui, s'il s'exécute, pose .js-motion et prend
   la main pour masquer puis révéler.

   Écrit dans l'autre sens — masquer par défaut et révéler au JS — une
   page sans JavaScript afficherait une grille vide. C'est exactement le
   défaut que la page corrigée présentait déjà pour une autre raison. */
@media (prefers-reduced-motion: no-preference) {
  .abcdt-ressources.js-motion .rs__i,
  .abcdt-ressources.js-motion .rs__lead,
  .abcdt-ressources.js-motion .rs__secI {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s var(--rs-e), transform .6s var(--rs-e);
  }
  .abcdt-ressources.js-motion.is-ready .rs__i,
  .abcdt-ressources.js-motion.is-ready .rs__lead,
  .abcdt-ressources.js-motion.is-ready .rs__secI { opacity: 1; transform: none; }
}

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


/* ═══════════════════════════════════════════════════════════════════════
   LETTRE D'INFORMATION

   Un élément éditorial de la revue, pas un encart importé : mêmes filets,
   même mesure, même typographie que le reste de la page. Il s'intercale
   entre « À la une » et le corpus.
   ═══════════════════════════════════════════════════════════════════════ */

.abcdt-ressources .rs__nl {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--rs-line);
  scroll-margin-top: calc(var(--nav-h, 76px) + 1.5rem);
}

.abcdt-ressources .rs__nlIn { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }

.abcdt-ressources .rs__nlH {
  margin: .55rem 0 .6rem;
  font-family: var(--rs-ffd);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  text-wrap: balance;
}

.abcdt-ressources .rs__nlP {
  margin: 0;
  max-width: 44ch;
  color: var(--rs-text-2);
  font-size: .9375rem;
  line-height: 1.6;
}

/* L'étiquette existe pour de bon : masquée à l'œil, lue par les
   lecteurs d'écran. Un placeholder n'est pas une étiquette. */
.abcdt-ressources .rs__nlLab,
.abcdt-ressources .rs__hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.abcdt-ressources .rs__hp { left: -9999px; clip-path: none; width: auto; height: auto; }

.abcdt-ressources .rs__nlRow { display: flex; flex-wrap: wrap; gap: .6rem; }

.abcdt-ressources .rs__nlEmail {
  flex: 1 1 15rem;
  min-height: 52px;
  padding: .75rem 1rem;
  border: 1px solid var(--rs-line);
  border-radius: 10px;
  background: var(--rs-ink-2);
  color: var(--rs-text);
  font: inherit;
  font-size: 1rem;                 /* 16 px : pas de zoom automatique iOS */
  transition: border-color .25s var(--rs-e), background-color .25s var(--rs-e);
}

.abcdt-ressources .rs__nlEmail::placeholder { color: var(--rs-text-3); }

.abcdt-ressources .rs__nlEmail:hover { border-color: var(--rs-line-2); }

.abcdt-ressources .rs__nlEmail:focus {
  outline: none;
  border-color: var(--rs-blue);
  background: var(--rs-ink-3);
  box-shadow: 0 0 0 3px rgba(26, 111, 255, .18);
}

.abcdt-ressources .rs__nlEmail:user-invalid { border-color: #FF6B6B; }

.abcdt-ressources .rs__nlBtn {
  min-height: 52px;
  padding-inline: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--rs-blue);
  color: #06060A;
  font: inherit;
  font-weight: 500;
  font-size: .9375rem;
  cursor: pointer;
  transition: background-color .3s var(--rs-e), opacity .2s var(--rs-e);
}

.abcdt-ressources .rs__nlBtn:hover { background: var(--rs-blue-2); }

.abcdt-ressources .rs__nlBtn[disabled] { opacity: .55; cursor: progress; }

.abcdt-ressources .rs__nlMsg {
  margin: .8rem 0 0;
  font-size: .875rem;
  line-height: 1.5;
  min-height: 1.25rem;
  color: var(--rs-text-2);
}

.abcdt-ressources .rs__nlMsg.is-ok { color: var(--rs-blue-2); }
.abcdt-ressources .rs__nlMsg.is-ko { color: #FF8A8A; }

.abcdt-ressources .rs__nlLeg {
  margin: .7rem 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--rs-text-3);
  max-width: 54ch;
}

.abcdt-ressources .rs__nlLeg a { color: var(--rs-text-2); text-underline-offset: .2em; }
.abcdt-ressources .rs__nlLeg a:hover { color: var(--rs-text); }

@media (min-width: 880px) {
  .abcdt-ressources .rs__nlIn { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}