/* ==========================================================================
   600ml - Comprendre l'IA
   Complement a cas-usage.css, charge uniquement sur le hub des ressources.
   La rubrique reprend les primitives des cas d'usage (bandes, fil d'Ariane,
   bloc de conversion) et n'ajoute que ce qui lui est propre : l'en-tete,
   les trois promesses et la carte de ressource.
   ========================================================================== */

/* ---------- 1. Le heros ----------
   Le titre a gauche, le visuel a droite. Le visuel suit le pointeur : c'est
   ce qui donne la sensation de volume, sans moteur 3D ni dependance. */
.rs-hero{
  padding-top:clamp(126px,15vh,168px);
  padding-bottom:clamp(48px,7vh,92px);
  overflow:hidden;
}
/* Le heros depasse la mesure du reste du site. Il lui faut deux colonnes
   confortables a la fois : un chapo qui ne se lit pas en colonne de journal,
   et une toile assez large pour que la camera de la scene ne rogne pas. */
.rs-hero .shell{max-width:1400px}
.rs-hero-grid{
  /* Le visuel prend la part large : la camera de la scene cadre en pixels
     et rogne le robot en dessous d'environ 600 px de toile. */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  align-items:center;gap:clamp(24px,4vw,64px);
}
.rs-h1{
  margin:0;
  font-size:clamp(2.6rem,6.4vw,5rem);line-height:.98;letter-spacing:-.042em;
  text-wrap:balance;
}
.rs-lead{
  margin:1.3rem 0 0;max-width:46ch;
  font-size:clamp(1.05rem,1.5vw,1.26rem);line-height:1.62;color:var(--ink-2);
  text-wrap:pretty;
}
/* Trois mentions sur une ligne. Le meme contenu en trois cartes a icone
   ressemblait a un gabarit, pas a la marque. */


/* La puce voyage avec son mot. En position absolue, elle restait collee au
   bord gauche des que la ligne passait a la ligne. */




/* ---------- 2. Le visuel ----------
   Une scene 3D chargee a la demande, posee sur le blanc de la page. Tant
   qu'elle n'est pas la (petit ecran, connexion econome, WebGL absent), une
   image tient la place, au meme endroit et a la meme taille. */
.rs-hero-art{
  position:relative;display:grid;place-items:center;
  /* Le robot a besoin de hauteur : trop plat, ses bras sortent du cadre. */
  min-height:clamp(300px,34vw,470px);
}
/* Nappe de couleur : elle remplace le fond noir de la demo d'origine. Le
   fond de la page reste blanc, la couleur ne vient que de la. */
.rs-halo{
  position:absolute;width:min(112%,600px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,
    rgba(127,12,242,.22), rgba(215,5,242,.15) 38%,
    rgba(242,68,181,.10) 58%, rgba(242,127,27,.09) 72%, transparent 78%);
  filter:blur(8px);
  animation:rs-respire 12s var(--ease) infinite;
}
@keyframes rs-respire{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.07) rotate(8deg)}
}

.rs-repli{
  position:relative;z-index:1;
  width:min(62%,280px);height:auto;
  filter:drop-shadow(0 34px 44px rgba(80,40,160,.26));
  animation:rs-flotte-art 9s var(--ease-out) infinite;
  transition:opacity .5s var(--ease);
}
@keyframes rs-flotte-art{0%,100%{transform:none}50%{transform:translateY(-16px)}}

/* La toile prend toute la place du bloc. Elle est en dessous du halo en
   z-index ? non : au-dessus, sinon la nappe voile le robot. */
.rs-spline-toile{
  position:absolute;inset:0;z-index:2;
  width:100%!important;height:100%!important;
  opacity:0;transition:opacity .8s var(--ease);
  /* La scene reagit au pointeur : il faut qu'elle le recoive. */
  touch-action:none;
  /* Le cadrage de la scene coupe le robot sous les epaules, et le bord de la
     toile faisait une arete nette en travers du blanc. Un fondu sur le bas et
     les cotes transforme cette coupe en degrade. */
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 97%),
    linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 97%),
    linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.rs-hero-art.is-charge .rs-spline-toile{opacity:1}
/* L'image s'efface une fois la scene en place, sans a-coup. */
.rs-hero-art.is-charge .rs-repli{opacity:0;animation:none}

/* ---------- 3. La carte de ressource ---------- */
.rs-liste{display:grid;gap:clamp(18px,2.4vw,28px)}
.rs-carte{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  align-items:center;gap:clamp(18px,3vw,44px);
  padding:clamp(20px,2.6vw,34px);border-radius:var(--r-xl);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.rs-carte:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-h)}
/* Le lien couvre toute la carte : on clique n'importe ou. Le bouton visible
   n'est donc qu'un reperage, d'ou le <span> et non un second <a>. */
.rs-lien{position:absolute;inset:0;z-index:2;border-radius:inherit}
.rs-lien:focus-visible{outline:2.5px solid var(--magenta);outline-offset:3px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.rs-visuel{
  display:grid;place-items:center;align-self:stretch;
  border-radius:var(--r-l);background:var(--grad-soft);
  padding:clamp(18px,2.4vw,32px);min-height:clamp(180px,22vw,280px);
}
.rs-visuel img{
  width:min(100%,260px);height:auto;
  filter:drop-shadow(0 20px 30px rgba(80,40,160,.22));
  animation:rs-flotte 9s var(--ease-out) infinite;
}
@keyframes rs-flotte{0%,100%{transform:none}50%{transform:translateY(-12px)}}

.rs-corps{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;min-width:0}
.rs-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.rs-format,.rs-duree{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .74rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.rs-format{background:var(--grad);color:#fff}
.rs-duree{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3)}
.rs-format svg,.rs-duree svg{width:13px;height:13px;stroke-width:2.2}

.rs-titre{
  margin:.1rem 0 0;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.032em;
  text-wrap:balance;
}
.rs-accroche{
  margin:0;font-family:var(--font-d);font-weight:600;
  font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.4;color:var(--violet);
  text-wrap:pretty;
}
.rs-resume{margin:0;font-size:.98rem;line-height:1.62;color:var(--ink-2);max-width:56ch;text-wrap:pretty}

.rs-sujets{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 0;padding:0}
.rs-sujets li{
  padding:.34rem .74rem;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:.78rem;font-weight:500;color:var(--ink-3);
}
.rs-go{margin:.5rem 0 0}
/* Repere visuel, pas une cible : le lien qui couvre la carte fait le travail,
   et deux zones cliquables imbriquees casseraient la navigation au clavier. */
.rs-go .btn{pointer-events:none}
.rs-carte:hover .rs-go .arw{transform:translateX(3px)}
.rs-date{margin:.2rem 0 0;font-size:.8rem;color:var(--ink-4)}

/* ---------- 4. Ecrans etroits ---------- */
/* Sous 980 px le heros passe sur une colonne, et la scene 3D ne se charge
   plus (voir assets/js/spline-hero.js) : c'est la fiole qui tient le visuel,
   au meme endroit et a la meme place. */
@media (max-width:980px){
  .rs-hero{padding-top:clamp(104px,13vh,132px);padding-bottom:clamp(36px,6vh,64px)}
  .rs-hero-grid{grid-template-columns:1fr;gap:6px}
}
@media (max-width:980px){
  /* Le visuel passe au-dessus du titre : sur un ecran haut, il annonce la
     rubrique avant qu'on ait lu un mot. */
  .rs-hero-art{order:-1;min-height:0;padding-block:8px}
  .rs-repli{width:min(52%,215px)}
  .rs-halo{width:min(80%,340px)}
  
  .rs-lead{max-width:60ch}
  .rs-carte{grid-template-columns:1fr;gap:20px}
  .rs-visuel{min-height:0;padding:22px}
  .rs-visuel img{width:min(70%,220px)}
}
@media (max-width:640px){
  .rs-carte{padding:18px;border-radius:var(--r-l)}
  .rs-go .btn{width:100%}
  .rs-resume{font-size:.94rem}
}
@media (prefers-reduced-motion:reduce){
  .rs-visuel img,.rs-repli,.rs-halo{animation:none}
  .rs-repli{transform:none}
  .rs-carte{transition:none}
}