/* ============================================================ TABLETTE ET ORDINATEUR ------------------------------------------------------------ Jusqu'ici l'application restait une colonne de 520 px, centree sur un fond vide, quelle que soit la taille de l'ecran. Sur un MacBook ca ressemblait a un telephone pose au milieu de la page — Cedric l'a dit, et il avait raison. TROIS TAILLES, TROIS MISES EN PAGE : telephone < 680 px la colonne, la barre en bas tablette 680–1059 une colonne plus large, barre en bas ordinateur >= 1060 un RAIL a gauche, le contenu en large Le HTML ne change pas d'une taille a l'autre. Sur ordinateur, « .bas » — la barre du bas — devient simplement la colonne de gauche, par une grille. Un seul jeu de composants, trois dispositions : c'est ce qui evite deux applications a tenir. ============================================================ */ /* ------------------------------------------------------------ LA MARQUE DU RAIL N'EXISTE QUE SUR ORDINATEUR Ecrite dans le HTML a toutes les tailles, elle est masquee partout ailleurs : dans une barre du bas de telephone, elle volerait la place d'un onglet. ------------------------------------------------------------ */ .marque-rail { display: none; } /* ------------------------------------------------------------ LES STATISTIQUES, DES 680 px Ces trois dessins sont dimensionnes en POURCENTAGE de leur conteneur. Sur un telephone c'est ce qu'il faut ; sur un ordinateur le calendrier devenait un damier de 750 px de large avec des cases de 62 px, et les barres des colonnes epaisses. On leur rend une taille fixe, alignee a gauche. ------------------------------------------------------------ */ @media (min-width: 680px) { .calendrier { grid-auto-columns: 18px; justify-content: start; gap: 4px; /* Le cadre epouse les cases au lieu de s'etirer : sinon il restait un rectangle vide de 750 px avec le damier serre dans un coin. */ width: -moz-max-content; width: max-content; max-width: 100%; } .calendrier i { width: 18px; } .cal-legende { justify-content: flex-start; max-width: 286px; } .barres { max-width: 520px; } .barres .bar u { font-size: 10px; } } /* ------------------------------------------------------------ TABLETTE — 680 a 1059 px La barre du bas reste : on est encore sur un ecran tactile, et le pouce ne monte pas chercher un menu en haut. ------------------------------------------------------------ */ @media (min-width: 680px) and (max-width: 1059px) { .app { left: 50%; right: auto; /* « max-width: none » D'ABORD : sans lui, le plafond de 520 px pose dans app.css annule la largeur qu'on demande ici, en silence. La colonne restait celle du telephone. */ max-width: none; width: 680px; margin-left: -340px; } .dedans { padding: 24px 26px 34px; } .haut { padding: calc(env(safe-area-inset-top, 0px) + 14px) 26px 14px; } .onglet { font-size: 12px; } .onglet svg { width: 26px; height: 26px; } /* Deux parcours cote a cote : la largeur est la pour ca. */ .grille-parcours { grid-template-columns: 1fr 1fr; gap: 14px; } /* Le chemin garde SA largeur. Etire sur 680 px, les noeuds s'eloignent tellement que la courbe devient un zigzag plat. */ .chemin { max-width: 520px; margin: 0 auto; } .lecon-corps { padding: 14px 26px 24px; } .lecon-corps > *, .lecon-pied > * { max-width: 620px; margin-left: auto; margin-right: auto; } } /* ------------------------------------------------------------ ORDINATEUR — a partir de 1060 px ------------------------------------------------------------ */ @media (min-width: 1060px) { /* --- la grille generale --- Une seule regle transforme toute la disposition : la barre du bas devient la colonne de gauche, et le contenu s'etale. */ body:not(.en-lecon) .app { display: grid; grid-template-columns: 256px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "rail haut" "rail contenu"; left: 0; right: 0; width: auto; max-width: none; margin-left: 0; border-left: 0; border-right: 0; box-shadow: none; } body:not(.en-lecon) .haut { grid-area: haut; } body:not(.en-lecon) .contenu { grid-area: contenu; } body:not(.en-lecon) .bas { grid-area: rail; } /* --- le rail de gauche --- */ body:not(.en-lecon) .bas { flex-direction: column; align-items: stretch; gap: 4px; padding: 20px 14px calc(env(safe-area-inset-bottom, 0px) + 20px); border-top: 0; border-right: 1px solid var(--bord); overflow-y: auto; } body:not(.en-lecon) .marque-rail { display: flex; align-items: center; gap: 11px; padding: 0 12px 22px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--texte); } body:not(.en-lecon) .marque-rail em { font-style: normal; color: var(--texte-3); } body:not(.en-lecon) .marque-rail svg { flex: none; border-radius: 9px; } /* Un onglet devient une LIGNE : l'icone, puis le mot. C'est la forme qu'on lit d'un coup d'oeil a la souris. */ body:not(.en-lecon) .onglet { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; height: 50px; padding: 0 14px; border-radius: var(--r-m); font-size: 15px; font-weight: 700; transition: background var(--transition), color var(--transition); } body:not(.en-lecon) .onglet svg { width: 24px; height: 24px; } body:not(.en-lecon) .onglet span { max-width: none; } body:not(.en-lecon) .onglet:hover { background: var(--surface); color: var(--texte-2); } body:not(.en-lecon) .onglet.actif { background: var(--surface-2); color: var(--accent); } body:not(.en-lecon) .onglet:active { transform: none; } /* --- la barre du haut --- Les pastilles cessent de s'etirer : trois compteurs larges de 300 px chacun, c'etait du remplissage. Elles se rangent a droite, alignees sur la colonne de contenu. */ body:not(.en-lecon) .haut { justify-content: flex-end; gap: 12px; padding: 18px 34px; } body:not(.en-lecon) .pastille { flex: none; min-width: 104px; padding: 0 16px; } /* --- le contenu --- CHAQUE ECRAN A SA LARGEUR. Tout mettre a la meme donnerait soit des lignes de texte interminables, soit des tuiles minuscules. On ne contraint donc PAS bloc par bloc : ca desalignerait un titre par rapport a la grille qu'il annonce. C'est la vue entiere qui porte sa largeur. */ body:not(.en-lecon) .dedans { max-width: 820px; /* du texte : 820 px se lit encore */ margin: 0 auto; padding: 8px 34px 56px; } /* Le choix du parcours respire : deux tuiles par ligne. */ body:not(.en-lecon) .dedans.vue-choix { max-width: 980px; } .grille-parcours { grid-template-columns: 1fr 1fr; gap: 16px; } .tuile-parcours { padding: 22px 22px 22px 24px; } .tuile-parcours h3 { font-size: 20px; } .tuile-parcours p { font-size: 14px; } /* LE CHEMIN NE S'ETIRE PAS. Ses noeuds sont poses en POURCENTAGE de sa largeur : sur 980 px ils se retrouveraient a un demi-metre l'un de l'autre et la courbe deviendrait une ligne presque droite. Toute la vue garde donc une colonne etroite — c'est cette forme-la qui veut dire « un parcours ». */ body:not(.en-lecon) .dedans.vue-chemin { max-width: 620px; } .chemin { max-width: 540px; margin: 0 auto; } .chapitre-titre { margin-top: 30px; } /* --- l'ecran de lecon --- Il garde sa colonne : une question et quatre reponses etalees sur tout un ecran de MacBook, on ne sait plus ou regarder. */ body.en-lecon .app { left: 0; right: 0; width: auto; max-width: none; margin-left: 0; border-left: 0; border-right: 0; } .lecon-haut { width: 100%; max-width: 760px; margin: 0 auto; padding: 22px 20px 16px; } .lecon-corps { padding: 10px 20px 28px; } .lecon-corps > * { max-width: 720px; margin-left: auto; margin-right: auto; } .enonce { font-size: 27px; } /* Le pied garde son fond sur toute la largeur — c'est lui qui annonce juste ou faux — mais son contenu reste dans l'axe. */ .lecon-pied > * { max-width: 720px; margin-left: auto; margin-right: auto; } .lecon-pied .btn { max-width: 720px; } /* --- la connexion --- */ /* Elle prenait deja toute la page : rien a changer, sinon laisser le robot respirer. Voir « .ecran-plein » dans app.css. */ /* Le bouton « Retour au site » n'existe que dans le site en un seul fichier : son reglage grand ecran est dans faire-site.js, juste apres la regle qu'il corrige. Le mettre ici ne marchait pas — le