/* ==========================================================================
   Edabos — Programme de la formation Shopify (section « Apprenez à gérer
   votre boutique, simplement. »). Utilisée sur l'accueil et sur la page
   Accompagnement. Vient après style.css : mêmes tokens (couleurs, radius,
   ombres, badges).
   ========================================================================== */

#formation .lead{max-width:720px;margin:0 auto 52px}

.prog__tabs{
  display:flex;gap:8px;margin-bottom:18px;
  justify-content:center;
  /* « safe » : si les pastilles ne tiennent pas (petits écrans d'ordinateur),
     elles repartent de la gauche au lieu d'être coupées au défilement. */
  justify-content:safe center;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.prog__tabs::-webkit-scrollbar{display:none}
.prog__tab{
  flex:none;cursor:pointer;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:-.2px;
  color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;transition:color .2s,background .2s,border-color .2s,box-shadow .2s;
}
.prog__tab:hover{color:var(--ink);border-color:#dcdce0}
.prog__tab.is-active{
  color:#fff;background:var(--ink);border-color:var(--ink);box-shadow:var(--shadow-soft);
}
.prog__tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.prog__body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:20px;align-items:start;
}

.prog__list{
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:26px 28px;text-align:left;
}
.prog__panel-head{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:15px;letter-spacing:-.3px;
  color:var(--ink);margin-bottom:6px;
}
.prog__panel-count{font-weight:500;color:var(--ink-mute)}
.prog__panel-count::before{content:" · ";color:var(--ink-mute)}
.prog__panel-desc{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:14px}
.prog__lessons{list-style:none;margin:0;padding:0;counter-reset:lecon}
.prog__lesson{
  counter-increment:lecon;
  display:flex;align-items:baseline;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.prog__lesson::before{
  content:counter(lecon,decimal-leading-zero);
  flex:none;width:22px;
  font-family:Geist,sans-serif;font-size:12.5px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink-mute);
}
.prog__lesson:last-child{border-bottom:0;padding-bottom:0}
.prog__lesson-title{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

.prog__preview{
  margin:0;background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);
  overflow:hidden;text-align:left;
}
.prog__preview img{display:block;width:100%;height:auto}

/* ----- Ordinateur portable / tablette ----- */
@media (max-width:1439.98px){
  .prog__body{gap:16px}
  .prog__list{padding:22px 22px}
}

/* ----- Téléphone ----- */
@media (max-width:809.98px){
  /* Programme de la formation : une seule colonne, aperçu avant les leçons */
  #formation .container{padding-inline:20px}
  #formation .h2{
    /* taille fluide : le titre tient sur deux lignes de 320px à 809px */
    font-size:clamp(27px,8.5vw,34px);line-height:1.13;letter-spacing:-1px;
    max-width:620px;text-wrap:balance;margin-bottom:18px;
  }
  #formation .lead{
    font-size:15px;line-height:1.55;letter-spacing:normal;
    max-width:330px;margin:0 auto 26px;
  }
  .prog__tabs{
    display:grid;grid-template-columns:1fr 1fr;gap:9px;
    overflow:visible;margin-bottom:24px;
  }
  .prog__tab{
    display:flex;align-items:center;justify-content:center;text-align:center;
    min-height:46px;padding:10px 12px;
    font-size:13px;line-height:1.25;white-space:normal;
  }
  .prog__body{display:flex;flex-direction:column;gap:24px}
  .prog__preview{order:1}
  .prog__list{order:2;padding:18px}
  .prog__panel-head{font-size:17px;line-height:1.35;letter-spacing:-.4px;margin-bottom:4px}
  .prog__panel-count{
    display:block;font-family:Geist,sans-serif;font-weight:500;font-size:13px;
    letter-spacing:normal;color:var(--ink-mute);margin-top:4px;
  }
  .prog__panel-count::before{content:none}
  .prog__panel-desc{font-size:14px;line-height:1.5;margin:10px 0 20px}
  .prog__lesson{padding:15px 0;gap:10px}
  .prog__lesson::before{width:20px;font-size:12px}
  .prog__lesson-title{font-size:14.5px;line-height:1.5}
}

/* ----- Très petits téléphones ----- */
@media (max-width:380px){
  #formation .container{padding-inline:16px}
  .prog__tabs{gap:8px}
  .prog__tab{font-size:12.5px;padding:10px 8px}
  .prog__list{padding:16px}
}