/* =============================================================
   Immersion — Section 3, alternative « L'atelier du joueur ».

   Trois espaces au lieu d'un parcours en six étapes. Aucune courbe,
   aucun point A/B, aucune flèche. Le fond navy/grille, la palette et
   les polices sont ceux de la section source ; seuls les objets qui
   ont un sens sont encadrés, les colonnes ne le sont pas.
   Feuille isolée : elle ne s'applique qu'à `.ip-s3.at`, les autres
   versions ne la chargent pas.
   ============================================================= */

#parcours.at{--pad:60px}
.at{padding:clamp(58px,6vw,86px) 0 clamp(56px,6vw,80px)}
.at .ip-wrap3{max-width:1320px}

/* ---------- titre de section ---------- */

.at .at__title{
  margin:0 0 clamp(34px,3.6vw,54px);
  text-align:center;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.05rem,1.15rem + 2.4vw,3.1rem);
  line-height:1.04;
  letter-spacing:-.024em;
  color:var(--s3-ivoire);
}

/* ---------- les trois espaces ---------- */

.at .at__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;
  column-gap:clamp(32px,3vw,48px);
}
.at .at__col{margin:0;display:flex;flex-direction:column}
.at .at__stage{display:flex;flex-direction:column;min-height:352px}

/* Là où les rangées partagées existent, les trois scènes se calent sur une
   hauteur commune : les intitulés tombent au pixel près sur la même ligne et
   les objets de bas de scène s'alignent entre eux. Sinon, la hauteur
   minimale ci-dessus fait le même travail à quelques pixels près. */
@supports (grid-template-rows:subgrid){
  .at .at__col{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .at .at__stage{min-height:0}
}

.at .at__h{
  margin:clamp(20px,2vw,28px) 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.62rem;
  line-height:1.1;
  letter-spacing:-.018em;
  color:var(--s3-ivoire);
}
.at .at__p{
  margin:.5rem 0 0;
  font-size:.855rem;
  line-height:1.5;
  color:var(--s3-txt-2);
  max-width:31ch;
}

/* ---------- petits intitulés d'objet ---------- */

.at .at__objlb{
  margin:0 0 .5rem;
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--s3-sage);
}
.at .at__objlb--row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.at .at__objlb--live{display:flex;align-items:center}
/* La mention de replay suit le libellé du direct : même famille, plus discrète.
   Elle rassure sans peser sur la composition de la colonne. */
.at .at__replay{
  margin:.4rem 0 0;
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--s3-txt-3);
}
.at .at__chip{
  font-size:.58rem;letter-spacing:.12em;
  padding:.2rem .46rem;border-radius:4px;
  color:var(--s3-txt-2);
  border:1px solid rgba(217,222,230,.22);
}
.at .at__signal{
  width:6px;height:6px;border-radius:50%;
  background:var(--s3-or);flex:none;margin-right:.44rem;
}

.at .at__from{
  margin:.62rem 0 0;
  font-size:.665rem;
  line-height:1.35;
  color:var(--s3-txt-3);
}

/* =============================================================
   1 · FAIRE LE POINT
   ============================================================= */

.at .at__diag{
  margin:0;
  padding:.92rem .95rem 1rem;
  border-radius:var(--s3-radius);
  background:linear-gradient(150deg,rgba(243,241,237,.085),rgba(243,241,237,.032));
  border:1px solid rgba(243,241,237,.14);
  box-shadow:var(--s3-shadow);
}
.at .at__lb{
  margin:0 0 .34rem;
  font-size:.575rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--s3-txt-3);
}
.at .at__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .78rem;padding:0;list-style:none}
.at .at__tags li{
  font-size:.68rem;line-height:1;
  padding:.32rem .52rem;border-radius:5px;
  color:var(--s3-txt-2);
  border:1px solid rgba(217,222,230,.2);
}
.at .at__tags--faible li{color:#E4B39C;border-color:rgba(201,119,90,.42)}
.at .at__tags:last-of-type{margin-bottom:0}

.at .at__prio{
  display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
  margin:.85rem 0 0;
  padding:.56rem .68rem .6rem;
  border-radius:9px;
  background:var(--s3-ivoire);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.62);
}
.at .at__prio-lb{
  display:flex;align-items:center;gap:.5rem;
  font-size:.555rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(11,29,51,.5);
}
.at .at__star{width:11px;height:11px;fill:var(--s3-or);flex:none}
.at .at__prio-txt{
  font-family:var(--serif);font-size:1rem;line-height:1.12;color:var(--s3-navy);
}

/* le bilan est la conclusion humaine de la fiche : posé en dessous,
   avec un vrai intervalle, sans flèche ni carte englobante. */
.at .at__rdv{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-top:auto;
  padding:.72rem .8rem;
  border-radius:12px;
  background:rgba(243,241,237,.05);
  border:1px solid rgba(243,241,237,.13);
}
.at .at__rdv-ph{
  flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(243,241,237,.22);background:#16283E;
}
.at .at__rdv-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.at .at__rdv-id{display:flex;flex-direction:column;gap:.22rem;min-width:0;flex:1 1 auto}
.at .at__rdv-id b{font-size:.815rem;font-weight:500;line-height:1.15;color:var(--s3-ivoire)}
.at .at__rdv-id span{font-size:.665rem;line-height:1.25;color:var(--s3-txt-3)}
.at .at__rdv-cam{flex:none;width:19px;height:19px;color:var(--s3-sage);opacity:.7}
.at .at__rdv-cam svg{width:100%;height:100%;display:block}


/* La fiche domine, le rendez-vous conclut la colonne : depuis la suppression
   de la condition, il se cale en bas comme les objets secondaires des deux
   autres scenes, l'ecart avec la fiche faisant office de respiration. */
.at .at__col:first-child .at__rdv{margin-top:auto}

/* =============================================================
   2 · T'ENTRAÎNER
   ============================================================= */

.at .at__sheet{
  margin:0;
  padding:.85rem .9rem .95rem;
  border-radius:var(--s3-radius);
  background:var(--s3-ivoire);
  box-shadow:0 26px 52px -26px rgba(0,0,0,.72);
}
.at .at__sheet .at__objlb{color:rgba(11,29,51,.5)}
.at .at__sheet .at__chip{color:rgba(11,29,51,.62);border-color:rgba(11,29,51,.18)}
.at .at__sheet-img{
  display:block;width:100%;height:auto;border-radius:7px;
}
.at .at__sheet .at__from{color:rgba(11,29,51,.5)}

/* deux couvertures réelles, à peine inclinées, sous la planche */
.at .at__covers{margin-top:auto;padding-top:1.15rem}
.at .at__covers-list{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  margin:0;padding:0;list-style:none;
}
.at .at__covers-list li{
  flex:none;
  width:98px;
  border-radius:9px;
  overflow:hidden;
  border:1px solid rgba(243,241,237,.16);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.8);
}
.at .at__covers-list li:first-child{transform:rotate(-3deg)}
.at .at__covers-list li:last-child{transform:rotate(2.5deg) translateY(6px)}
.at .at__covers-list img{display:block;width:100%;height:auto}

/* =============================================================
   3 · ÉCHANGER
   ============================================================= */

/* Le module d'appariement est repris tel quel du composant parcours :
   portraits, trait pointille, graines qui filent d'un profil a l'autre,
   ondes concentriques et halo de rencontre. `parcours-homepage.css` est
   deja charge par cette page, on ne fait que cadrer sa largeur. */
.at .at__spar{max-width:310px}
/* le noeud central pulse a chaque passage, comme les graines et les ondes */
.at .at__spar .ip-spar__link::after{animation-iteration-count:infinite}

.at .at__live{margin:0;margin-top:auto;padding-top:1.15rem}
.at .at__live-win{
  position:relative;display:block;
  max-width:320px;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(243,241,237,.14);
  box-shadow:var(--s3-shadow);
  background:#16283E;
}
.at .at__live-win > img{display:block;width:100%;height:auto}
.at .at__live-share{
  position:absolute;left:7%;bottom:8%;
  width:33%;
  border-radius:6px;overflow:hidden;
  border:1px solid rgba(243,241,237,.3);
  box-shadow:0 14px 28px -14px rgba(0,0,0,.85);
}
.at .at__live-share img{display:block;width:100%;height:auto}

/* =============================================================
   Rythme : les bilans hebdomadaires, transversaux aux trois espaces
   -------------------------------------------------------------
   Ni carte, ni quatrieme colonne : une simple regle horizontale a
   quatre reperes, nettement plus discrete que les trois scenes.
   Elle dit le rythme du mois, entre les univers et la conclusion.
   ============================================================= */

.at .at__rythme{
  margin-top:clamp(46px,4.4vw,68px);
  text-align:center;
}

.at .at__weeks{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 auto;
  padding:0;
  max-width:860px;
  list-style:none;
}
/* le filet qui relie les quatre reperes */
.at .at__weeks::before{
  content:"";
  position:absolute;
  left:12.5%;right:12.5%;top:5px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(217,222,230,0) 0%,
    rgba(217,222,230,.22) 14%,
    rgba(217,222,230,.22) 86%,
    rgba(217,222,230,0) 100%);
}
.at .at__week{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.at .at__wdot{
  position:relative;
  z-index:1;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--s3-fond);
  border:1px solid rgba(201,119,90,.5);
}
.at .at__wdot::after{
  content:"";
  position:absolute;
  inset:2.5px;
  border-radius:50%;
  background:#C9775A;
  opacity:.9;
}
.at .at__wlb{
  font-size:.605rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--s3-txt-3);
  white-space:nowrap;
}
.at .at__wabbr{display:none}

.at .at__rythme-lb{
  margin:clamp(24px,2.2vw,32px) 0 0;
}
.at .at__rythme-p{
  margin:.55rem auto 0;
  max-width:560px;
  font-size:.855rem;
  line-height:1.5;
  color:var(--s3-txt-2);
  text-wrap:balance;
}

/* =============================================================
   Conclusion + CTA
   ============================================================= */

.at .at__out{
  margin:clamp(46px,4.4vw,64px) auto 0;
  max-width:640px;
  text-align:center;
  font-size:clamp(1rem,.9rem + .3vw,1.15rem);
  line-height:1.5;
  color:var(--s3-txt-2);
}
.at .at__out em{font-style:normal;color:var(--s3-ivoire)}

.at .ip-s3__cta{margin-top:clamp(24px,2.4vw,34px)}

/* =============================================================
   Responsive
   ============================================================= */

/* deux colonnes deviennent illisibles bien avant trois : on passe
   en pile dès que les scènes se resserrent trop. */
@media(max-width:1023px){
  .at .at__grid{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(42px,5vw,60px);
  }
  .at .at__stage{min-height:0}
  .at .at__col{max-width:520px;margin-inline:auto;width:100%}
  .at .at__col:first-child .at__rdv{margin-top:1.15rem}
  .at .at__covers,
  .at .at__live{margin-top:0}
  .at .at__p{max-width:none}
}

@media(max-width:767px){
  /* v19 — mobile seulement : chaque univers devient une carte, pour que les
     éléments qui vont ensemble se lisent comme un ensemble. Bleu sur bleu,
     un filet très fin : la matière de la section ne change pas. */
  .at .at__grid{row-gap:16px}
  .at .at__col{
    padding:22px 18px 24px;
    border:1px solid rgba(243,241,237,.1);
    border-radius:18px;
    background:rgba(243,241,237,.028);
  }
  .at .at__col:first-child .at__rdv{margin-top:1.15rem}

  .at{padding:52px 0 58px}
  .at .at__title{margin-bottom:30px;font-size:2rem}
  .at .at__h{font-size:1.42rem;margin-top:18px}
  .at .at__p{font-size:.9rem}
  .at .at__covers-list li{width:88px}
  .at .at__spar{max-width:none}
  .at .at__out{font-size:1rem;margin-top:40px}
  .at .at__rythme{margin-top:40px}
  .at .at__weeks{max-width:270px}
  .at .at__weeks::before{left:11%;right:11%}
  .at .at__wfull{display:none}
  .at .at__wabbr{display:inline}
  .at .at__wlb{font-size:.58rem;letter-spacing:.1em}
  .at .at__rythme-p{font-size:.85rem}
}

@media(prefers-reduced-motion:reduce){
  .at .ip-rv3{opacity:1;transform:none;transition:none}
}

/* --- CTA de fin de section : fond terracotta plein, lumiere par ombres -----
   Aucun degrade sur le bouton. Le halo est un box-shadow diffus, tres discret
   au repos, qui s'ouvre au survol. La fleche avance de 3 px, le bouton monte
   de 2 px : le bouton s'allume, il ne clignote pas. */
#parcours.at .ip-s3__btn{
  gap:.6rem;
  padding:14px 30px 14px 34px;
  background:#C9775A;
  border:1px solid rgba(226,163,133,.55);
  box-shadow:
    0 0 0 1px rgba(201,119,90,.3),
    0 0 24px -4px rgba(201,119,90,.4),
    0 18px 38px -18px rgba(201,119,90,.8);
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    background-color .45s cubic-bezier(.16,1,.3,1),
    border-color .45s cubic-bezier(.16,1,.3,1),
    box-shadow .45s cubic-bezier(.16,1,.3,1);
}
#parcours.at .ip-s3__btn-arw{width:17px;height:17px;flex:none;transition:transform .45s cubic-bezier(.16,1,.3,1)}
#parcours.at .ip-s3__btn:hover{
  transform:translateY(-2px);
  background:#CE7E60;
  border-color:rgba(240,192,169,.8);
  box-shadow:
    0 0 0 1px rgba(201,119,90,.55),
    0 0 38px -2px rgba(201,119,90,.72),
    0 26px 50px -18px rgba(201,119,90,.95);
}
#parcours.at .ip-s3__btn:hover .ip-s3__btn-arw{transform:translateX(3px)}
#parcours.at .ip-s3__btn:focus-visible{outline:2px solid #F3F1ED;outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  #parcours.at .ip-s3__btn,#parcours.at .ip-s3__btn-arw{transition:none}
}