/* ProgLabAi — les aperçus de l'application, pour la page « Application ».
 *
 * ─────────────────────────────────────────────────────────── POURQUOI PAS DES
 * CAPTURES D'ÉCRAN. Une image pèse, vieillit et ment vite : au premier
 * changement dans l'application, la copie reste. Elle porte en plus tout ce qui
 * était à l'écran ce jour-là, c'est-à-dire les données de quelqu'un. Ces
 * aperçus-ci sont l'interface elle-même, redessinée en HTML : nets sur tous les
 * écrans, quelques kilo-octets, et aucune donnée réelle.
 *
 * TOUT EST CLOISONNÉ SOUS « .ap ». assets/program.css emploie des noms
 * ordinaires — .card, .field, .appbar — qui heurteraient ceux du site s'ils
 * étaient chargés ici. Les règles ci-dessous les reproduisent, préfixées, et ne
 * peuvent donc rien casser en dehors des aperçus.
 *
 * LES COULEURS SONT CELLES DU MODE CLAIR, en dur : l'aperçu montre
 * l'application telle qu'on la découvre, quel que soit le mode du visiteur.
 */

.ap{
  --ap-bg:#eef2f7;
  --ap-surface:#ffffff;
  --ap-surface-2:#e6ebf3;
  --ap-line:#c6d0de;
  --ap-text:#141a23;
  --ap-dim:#576375;
  --ap-acc:#116d7c;          /* l'accent du site, foncé pour tenir sur du blanc */
  --ap-acc-2:#3b2c8a;
  --ap-ok:#0f7a4f;

  background:var(--ap-bg);
  color:var(--ap-text);
  border:1px solid var(--ap-line);
  border-radius:20px;
  overflow:hidden;
  font-size:12px;
  line-height:1.45;
  /* La largeur d'un téléphone, à l'échelle : l'aperçu ne doit jamais dépasser
     sa colonne, et sur un vrai téléphone il occupe toute la largeur. */
  width:100%; max-width:300px;
  box-shadow:0 18px 40px -28px #26364d;
}
.ap *{ box-sizing:border-box; }

/* ---------------- la barre de titre ---------------- */
.ap-bar{
  background:linear-gradient(180deg,var(--ap-surface-2) 0%,var(--ap-surface) 100%);
  border-bottom:1px solid var(--ap-line);
  padding:11px 13px 9px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.ap-bar h4{ margin:0; font-size:14px; font-weight:800; letter-spacing:-0.3px; }
.ap-bar h4 span{ color:var(--ap-acc); }
.ap-bar .ap-sub{
  margin:1px 0 0; font-size:8.5px; letter-spacing:0.6px;
  text-transform:uppercase; color:var(--ap-dim); font-weight:600;
}
.ap-tools{ display:flex; gap:5px; align-items:center; flex:none; }
.ap-tool{
  width:24px; height:24px; border-radius:7px; flex:none;
  border:1px solid var(--ap-line); background:var(--ap-surface);
  display:flex; align-items:center; justify-content:center; color:var(--ap-acc);
}
.ap-tool svg{ width:12px; height:12px; }

/* ---------------- le corps ---------------- */
.ap-body{ padding:11px; display:grid; gap:9px; }
.ap-card{
  background:var(--ap-surface); border:1px solid var(--ap-line);
  border-radius:12px; padding:11px 12px;
}
.ap-card > h5{
  margin:0 0 7px; font-size:12.5px; font-weight:800; color:var(--ap-acc);
  letter-spacing:-0.2px;
}
.ap-lab{
  font-size:8px; letter-spacing:0.7px; text-transform:uppercase;
  color:var(--ap-dim); font-weight:700; margin:0 0 4px;
}
.ap-note{ color:var(--ap-dim); font-size:10.5px; margin:6px 0 0; }
.ap-champ{
  background:var(--ap-surface-2); border:1px solid var(--ap-line);
  border-radius:7px; padding:6px 8px; font-size:11.5px; font-weight:600;
}

/* ---------------- la barre du bas ---------------- */
.ap-nav{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--ap-line); background:var(--ap-surface);
  padding:6px 2px calc(6px + 2px);
}
.ap-nav span{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:7.5px; color:var(--ap-dim); font-weight:600;
}
.ap-nav span svg{ width:14px; height:14px; }
.ap-nav span.on{ color:var(--ap-acc); }

/* ---------------- l'accueil : blocs et pastilles ---------------- */
.ap-bloc-t{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.ap-bloc-t b{ font-size:11.5px; }
.ap-bloc-t i{ font-style:normal; font-size:9px; color:var(--ap-dim); }
.ap-pastilles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:6px; }
.ap-pastille{
  aspect-ratio:1/1; border-radius:50%; border:1.5px solid var(--ap-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--ap-surface);
}
.ap-pastille b{ font-size:12px; font-weight:800; }
.ap-pastille i{ font-style:normal; font-size:6px; letter-spacing:0.4px; text-transform:uppercase; color:var(--ap-dim); }
.ap-pastille.a{ border-color:#4a9fb0; }
.ap-pastille.b{ border-color:#116d7c; }
.ap-pastille.c{ border-color:#4a4499; }
.ap-pastille.d{ border-color:#8a97ab; }
.ap-pastille.now{ border-style:dashed; border-color:var(--ap-acc); }

/* ---------------- une séance ---------------- */
.ap-seance{ border-left:3px solid var(--ap-acc); }
.ap-seance .ap-titre{ font-size:12.5px; font-weight:800; margin:0; }
.ap-seance .ap-quand{ font-size:9.5px; color:var(--ap-dim); margin:2px 0 8px; }
.ap-bloc-h{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin:8px 0 4px; }
.ap-bloc-h b{ font-size:8.5px; letter-spacing:0.6px; text-transform:uppercase; color:var(--ap-acc); font-weight:700; }
.ap-bloc-h i{ font-style:normal; font-size:9.5px; color:var(--ap-dim); font-weight:600; }
.ap-exo{ display:flex; gap:5px; align-items:flex-start; margin-top:5px; }
.ap-exo::before{ content:'•'; color:var(--ap-acc); line-height:1.2; }
.ap-exo .n{ font-size:11px; }
.ap-exo .d{ font-size:9.5px; color:var(--ap-dim); display:block; }
/* La pastille « ? » — le geste qui ouvre l'explication d'un exercice. */
.ap-q{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%; vertical-align:middle;
  background:var(--ap-surface-2); border:1px solid var(--ap-line);
  color:var(--ap-acc); font-size:8.5px; font-weight:800; margin-left:4px;
}
/* Le calcul automatique : ce que le moteur écrit à la place d'un jeton. */
.ap-calc{
  background:var(--ap-surface-2); border:1px dashed var(--ap-acc);
  border-radius:7px; padding:6px 8px; margin-top:5px;
  font-size:10.5px; font-weight:600;
}
.ap-calc em{ font-style:normal; color:var(--ap-acc); }

/* ---------------- le tableau des allures ---------------- */
.ap-tab{ width:100%; border-collapse:collapse; margin-top:6px; font-size:10.5px; }
.ap-tab th{
  text-align:left; font-size:7.5px; letter-spacing:0.7px; text-transform:uppercase;
  color:var(--ap-dim); padding:0 0 4px; font-weight:700;
}
.ap-tab th:last-child, .ap-tab td:last-child{ text-align:right; }
.ap-tab td{ padding:4px 0; border-top:1px solid var(--ap-line); }
.ap-tab td:last-child{ font-variant-numeric:tabular-nums; font-weight:600; }

/* ---------------- le calendrier ---------------- */
.ap-mois{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ap-mois b{ font-size:12px; font-weight:800; }
.ap-rond{
  width:20px; height:20px; border-radius:7px; flex:none;
  border:1px solid var(--ap-line); background:var(--ap-surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--ap-dim); font-size:9px;
}
.ap-filtres{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.ap-filtres span{
  border:1px solid var(--ap-line); border-radius:20px; padding:2px 7px;
  font-size:8.5px; color:var(--ap-dim); background:var(--ap-surface);
}
.ap-filtres span.on{ background:var(--ap-acc); border-color:var(--ap-acc); color:#fff; }
.ap-jours, .ap-grille{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.ap-jours{ margin-top:8px; }
.ap-jours span{ text-align:center; font-size:7px; text-transform:uppercase; color:var(--ap-dim); font-weight:700; }
.ap-grille{ margin-top:3px; }
.ap-case{
  aspect-ratio:1/1; border-radius:6px; background:var(--ap-surface);
  border:1px solid var(--ap-line); min-width:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:700;
}
.ap-case.vide{ background:transparent; border-color:transparent; }
.ap-case.auj{ border-color:var(--ap-acc); border-width:1.5px; }
.ap-point{ width:3.5px; height:3.5px; border-radius:50%; margin-top:2px; background:var(--ap-acc); }
.ap-point.b{ background:#4a4499; }
.ap-point.c{ background:#9a6b06; }
.ap-point.ok{ background:var(--ap-ok); }
.ap-leg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:8px; color:var(--ap-dim); }
.ap-leg span{ display:inline-flex; align-items:center; gap:3px; }

/* ---------------- le chronomètre ---------------- */
.ap-modes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.ap-modes span{
  border:1px solid var(--ap-line); border-radius:8px; padding:7px 3px;
  text-align:center; font-size:9px; font-weight:700; color:var(--ap-dim);
  background:var(--ap-surface-2);
}
.ap-modes span.on{ background:var(--ap-surface); border-color:var(--ap-acc); color:var(--ap-text); }
.ap-duo{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:7px; }
.ap-gros{
  background:var(--ap-surface-2); border:1px solid var(--ap-line); border-radius:8px;
  padding:7px; text-align:center; font-size:15px; font-weight:800;
}
.ap-raccourcis{ display:flex; gap:4px; margin-top:7px; flex-wrap:wrap; }
.ap-raccourcis span{
  background:var(--ap-surface-2); border-radius:20px; padding:2px 8px;
  font-size:9px; color:var(--ap-dim);
}
.ap-coche{ display:flex; align-items:center; gap:6px; margin-top:7px; font-size:10.5px; }
.ap-coche i{
  width:13px; height:13px; border-radius:4px; flex:none; font-style:normal;
  background:var(--ap-acc); color:#fff; font-size:9px;
  display:flex; align-items:center; justify-content:center;
}
.ap-bouton{
  background:var(--ap-acc); color:#fff; border-radius:9px; padding:9px;
  text-align:center; font-weight:800; font-size:12px; margin-top:9px;
}

/* ---------------- la recherche ---------------- */
.ap-res{ border-top:1px solid var(--ap-line); padding-top:7px; margin-top:7px; }
.ap-res:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.ap-res b{ font-size:11px; color:var(--ap-acc); }

/* ---------------- l'agencement de la page ---------------- */
.ap-rangee{
  display:grid; grid-template-columns:1fr; gap:22px; align-items:center;
  margin-top:26px;
}
.ap-rangee > .ap-mot h2{ font-size:19px; margin:0 0 8px; letter-spacing:-0.4px; }
.ap-rangee > .ap-mot p{ font-size:14px; line-height:1.62; color:var(--dim); margin:0; }
.ap-rangee > .ap-mot p + p{ margin-top:9px; }
.ap-vue{ display:flex; justify-content:center; }

@media (min-width:820px){
  .ap-rangee{ grid-template-columns:1fr 320px; gap:36px; }
  /* Une rangée sur deux inverse l'ordre : le regard descend en zigzag plutôt
     que de longer une colonne d'images. */
  .ap-rangee.inverse > .ap-mot{ order:2; }
  .ap-rangee.inverse > .ap-vue{ order:1; }
  .ap-rangee.inverse{ grid-template-columns:320px 1fr; }
}

/* ─── LES DEUX BLOCS D'INSTALLATION ────────────────────────────────────────
   Cote a cote sur un ecran large, l'un sous l'autre au telephone — et c'est
   au telephone que la page se lit, puisque c'est la que le geste se fait. */
.inst-duo{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:30px;
}
@media (min-width: 760px){
  .inst-duo{ grid-template-columns:1fr 1fr; }
}
/* MESURE : le second bloc partait 14 px plus bas. La regle « .card + .card »
   du site vise les cartes qui SE SUIVENT dans un flux vertical ; dans une
   grille, les deux sont voisines sans etre l une sous l autre, et la marge
   decale la seconde dans sa cellule. La grille gere son espacement par
   « gap » : elle annule donc la marge. */
.inst-duo .card + .card{ margin-top:0; }
.inst-bloc h2{
  display:flex; align-items:center; gap:9px;
  margin:0 0 12px; font-size:17px;
}
.inst-logo{ width:22px; height:22px; flex:none; color:var(--acc); }
/* L'AVERTISSEMENT VIENT AVANT LES ETAPES, jamais apres : quelqu'un qui lit
   « il faut Safari » a la fin a deja cherche le bouton dans Chrome. */
.inst-avant{
  margin:0 0 12px; padding:8px 11px; border-radius:10px;
  background:var(--surface-2); border-left:3px solid var(--acc);
  font-size:12.5px; line-height:1.55; color:var(--text);
}
.inst-duo .inst-liste{ margin:0 0 12px; padding-left:20px; }
.inst-duo .inst-liste li{ font-size:13.5px; line-height:1.65; margin:5px 0; }
.inst-bloc .sub{ margin:0; font-size:12.5px; line-height:1.6; }
.inst-note{
  margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line);
  font-size:12px; line-height:1.6; color:var(--dim);
}