/* ═══════════════════════════════════════════════════════════════════════════
   SOBOX FORMATION — la frise, sa carte-module et son détail

   ⚠️ CETTE FEUILLE EST PARTAGÉE. Le fer à cheval est le même objet pour
      l'administrateur qui prépare le parcours et pour l'apprenant qui le
      suit : ils doivent le voir IDENTIQUE. Deux copies du même dessin
      auraient divergé à la première retouche, et l'apprenant se serait
      retrouvé avec la version d'avant.

   Elle suppose les jetons de couleur de la page hôte (--sb-*, --carte,
   --bord, --texte…). Elle ne les définit pas : c'est la page qui décide de
   sa palette, pas la frise.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── La frise ─────────────────────────────────────────────────────────── */
/* ⚠️ LE PAS DE LA FRISE ET LA LARGEUR DES CARTES SONT DEUX CHOSES.
   C'est tout le principe du fer à cheval de la propale, et c'était le défaut
   de la version précédente : une carte occupait une « colonne », donc plus
   les cartes étaient lisibles, plus la frise s'allongeait.

   Ici l'axe porte des JALONS NUMÉROTÉS, serrés (~80 px) : c'est lui, la ligne
   directrice, et il tient sur la page. Les cartes de description sont bien
   plus larges (~260 px) et DÉBORDENT sur les colonnes voisines — elles ne se
   juxtaposent pas pour autant, parce qu'elles sont décalées en hauteur sur
   plusieurs étages, au-dessus et au-dessous de l'axe.

   Deux étages par côté suffisent tant que 4 × pas ≥ largeur de carte : deux
   cartes du MÊME côté au MÊME étage sont alors toujours séparées. Le calcul
   est fait à l'écran, dans frise.js, parce qu'il dépend de la largeur réelle
   et du nombre de modules. */
.frise-cadre{padding:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scroll-behavior:smooth}
.frise{position:relative;min-height:340px}
/* L'axe du temps, sur toute la longueur de la frise. */
.frise::before{content:'';position:absolute;left:0;right:0;top:50%;height:3px;
  background:linear-gradient(90deg,var(--sb-turquoise),var(--sb-magenta),var(--sb-orange));
  border-radius:2px;opacity:.45}

/* Le jalon n'a pas de largeur : c'est un point sur l'axe, à l'abscisse --x.
   La carte, elle, est posée à --dx de ce point et fait --l de large. */
.jalon{position:absolute;top:0;bottom:0;left:var(--x);width:0}
/* La pastille sur l'axe, avec le rang du module. */
.pastille{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;background:var(--carte);
  border:3px solid var(--couleur,var(--sb-gris-clair));z-index:3;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:var(--couleur,var(--texte))}
/* La tige qui relie la carte à l'axe : elle part de la pastille et monte (ou
   descend) jusqu'à l'étage de la carte. C'est elle qui dit à quel numéro
   appartient une carte qui déborde sur les colonnes voisines. */
.tige{position:absolute;left:-1.5px;width:3px;background:var(--couleur,var(--bord));
  opacity:.5;z-index:1}
.jalon.haut .tige{bottom:50%;height:var(--gap,34px)}
.jalon.bas  .tige{top:50%;height:var(--gap,34px)}

.carte-module{position:absolute;left:var(--dx);width:var(--l);
  background:var(--carte);border:1px solid var(--bord);
  border-top:4px solid var(--couleur,var(--sb-gris-clair));
  border-radius:var(--rayon);padding:11px 13px;margin:0;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.05);transition:transform .12s,box-shadow .12s;
  text-align:left;z-index:2}
/* ⚠️ Une carte survolée ou ouverte passe DEVANT ses voisines. Les cartes se
   chevauchent horizontalement par construction : sans ce rehaussement, celle
   qu'on regarde pouvait passer sous celle d'à côté. */
.carte-module:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10);z-index:4}
.carte-module[aria-current="true"]{box-shadow:0 0 0 3px var(--couleur);z-index:4}
.jalon.haut .carte-module{bottom:calc(50% + var(--gap,34px))}
.jalon.bas  .carte-module{top:calc(50% + var(--gap,34px))}

.carte-module .quand{font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--couleur,var(--texte3))}
.carte-module .titre{font-weight:700;font-size:13.5px;line-height:1.28;margin:4px 0 6px}
.carte-module .meta{font-size:12px;color:var(--texte2);display:flex;
  gap:6px;flex-wrap:wrap;align-items:center}

.puce{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;
  font-weight:700;background:var(--fond-puce,var(--fond));color:var(--couleur,var(--texte2))}

/* ─── Le détail d'un module ────────────────────────────────────────────── */
.detail{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);
  padding:20px 22px;margin-top:8px;border-left:5px solid var(--couleur,var(--sb-magenta))}
.detail .quand{font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--couleur,var(--texte3))}
.detail h2{margin-top:5px}
.detail p{margin:8px 0 0;color:var(--texte2);max-width:80ch}
.detail .apercu{color:var(--texte3);font-style:italic}

/* ─── Les ressources d'un module ───────────────────────────────────────── */
.carte-module .compteur{margin-top:7px;font-size:11px;font-weight:700;
  color:var(--couleur)}
.carte-module .compteur.vide{color:var(--texte3);font-weight:600;font-style:italic}

.ressources{margin-top:18px;padding-top:14px;border-top:1px solid var(--bord)}
.ressources h3{font-size:14px;font-weight:800;margin:0 0 8px}
.ressources ul{list-style:none;margin:0;padding:0}
.ressource{display:flex;gap:10px;align-items:flex-start;padding:7px 0;
  border-top:1px dashed var(--bord)}
.ressource:first-child{border-top:0}
.ressource .icone{flex:none;font-size:15px;line-height:1.4}
.ressource .corps{flex:1;min-width:0}
.ressource a{color:var(--sb-bleu);font-weight:600;text-decoration:none}
.ressource a:hover{text-decoration:underline}

.puce-mini{display:inline-block;margin-left:7px;padding:0 7px;border-radius:20px;
  font-size:10.5px;font-weight:700;background:var(--fond);color:var(--texte3);
  vertical-align:1px}
.puce-mini.oblig{background:#fde8ee;color:var(--sb-rose)}
.puce-mini.attente{background:#fdf1e2;color:var(--sb-orange)}

.ajout{margin-top:12px}
.ajout summary{cursor:pointer;color:var(--sb-magenta);font-weight:700;font-size:13.5px}
.ajout form{margin-top:10px;padding-left:12px;border-left:3px solid var(--bord)}
.ajout .rang{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ajout .rang > input[name="titre"],
.ajout .rang > input[name="url"]{flex:1;min-width:190px}
.ajout select,.ajout input{font:inherit;padding:7px 9px;border-radius:8px;
  border:1px solid var(--bord);background:var(--carte);color:var(--texte);width:auto}
.ajout .ligne{display:flex;align-items:center;gap:5px;font-size:12.5px;
  color:var(--texte2);font-weight:600;margin:0}
.ajout .ligne input[type=checkbox]{width:16px;height:16px}

.transverses{margin-top:26px}
.transverses ul{margin:8px 0 0;padding-left:20px;color:var(--texte2)}
.transverses li{margin:5px 0}

/* Le module d'aujourd'hui. Sur une frise qui défile, savoir OÙ l'on en est
   compte autant que voir la suite. */
.jalon.courant .pastille{box-shadow:0 0 0 5px color-mix(in srgb,var(--couleur) 22%,transparent)}
.jalon.courant .carte-module{border-color:var(--couleur);
  box-shadow:0 6px 18px rgba(0,0,0,.10)}
.jalon.courant .quand::after{content:" · aujourd’hui";color:var(--couleur);font-weight:800}

@media (max-width:820px){
  /* Sur un écran étroit, la frise se redresse : une colonne, du haut vers
     le bas. Le zigzag n'a plus de sens quand il n'y a pas de largeur. */
  .frise-cadre{overflow-x:visible}
  .frise{display:block;min-height:0;height:auto !important;padding:0}
  .frise::before{left:26px;right:auto;top:0;bottom:0;width:3px;height:auto}
  /* ⚠️ Les `!important` neutralisent le placement calculé en JS : sur une
     colonne, les abscisses et les étages n'ont plus de sens. */
  .jalon{position:relative;left:auto !important;top:auto;bottom:auto;
    width:auto;padding-left:60px;margin:10px 0}
  .pastille{left:26px;top:26px}
  .tige{display:none}
  .jalon .carte-module{position:relative;left:auto !important;top:auto !important;
    bottom:auto !important;width:auto !important;height:auto !important;margin:0}
}

/* ─── Le mode édition ────────────────────────────────────────────────────
   Un parcours importé se corrige : coquilles de la lecture automatique,
   dates à confirmer, intitulés coupés. Sans ces formulaires, il fallait
   tout réimporter pour un accent. */
.rang-edit{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;align-items:flex-end}
.detail label{display:block;font-size:12px;font-weight:700;color:var(--texte2);
  margin-bottom:10px}
.detail label input,.detail label select,.detail label textarea{
  font:inherit;width:100%;margin-top:3px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--bord);background:var(--carte);color:var(--texte)}
.detail textarea{resize:vertical;line-height:1.45}
.detail .rang-edit label{margin-bottom:0}

.actions-ressource{flex:none;white-space:nowrap;opacity:0;transition:opacity .12s}
.ressource:hover .actions-ressource,
.ressource:focus-within .actions-ressource{opacity:1}
.edit-ressource{width:100%}
.edit-ressource .rang-edit{margin-bottom:8px}
.edit-ressource input,.edit-ressource select{font:inherit;padding:7px 9px;
  border-radius:8px;border:1px solid var(--bord);background:var(--carte);color:var(--texte)}

/* Le bouton de dépôt : un `input[type=file]` nu n'est ni stylable ni
   traduisible — « Choose File » en anglais au milieu d'un formulaire
   français. On l'habille d'un label. */
.depot-fichier{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 12px;border:1px dashed var(--bord);border-radius:9px;
  font-size:12.5px;font-weight:700;color:var(--texte2);margin:0}
.depot-fichier:hover{border-color:var(--sb-magenta);color:var(--sb-magenta)}