/* ═══════════════════════════════════════════════════════════════ FASUP' Entreprise — le peu de style propre à cette application. Tout le reste vient de fasup-ui.css, le kit partagé par les trois applications. Règle : si un style peut servir aux autres apps, il va dans le kit, pas ici. Les blocs communs à l'application interne — barre du haut, centrage du tableau de bord, page Campus — sont repris à l'identique : les deux applications doivent se ressembler au pixel près. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ Deux teintes en plus du kit, exactement comme dans l'interne : il manquait deux couleurs pour qu'aucun bloc n'ait la couleur d'un autre. Construites comme celles du kit — vif, fond, texte — et remappées en mode sombre. ═══════════════════════════════════════════════════════════════ */ :root{ --teal:#0E8C99; --teal-soft:#E2F3F5; --teal-ink:#0A6B75; --rose:#D6457F; --rose-soft:#FCE8F0; --rose-ink:#A62D5F; /* Les deux teintes de la vie de la classe, reprises de l'interne : l'olive des BTS blancs, le bronze des fiches. Les mêmes des deux côtés — une carte « BTS blanc » doit avoir la même couleur pour le campus et pour l'entreprise. */ --olive:#6E8F1F; --olive-soft:#EFF4DC; --olive-ink:#4E6714; --bronze:#9A6B3F; --bronze-soft:#F4EBE1; --bronze-ink:#6F4B29; /* L'avancée du temps sur la frise : le doré de la marque, un ton au-dessus, pour qu'il se voie sur un rail gris sans crier. */ --avance:#F0A02C; } body[data-theme="dark"]{ --teal:#3FBFC9; --teal-soft:#123338; --teal-ink:#7FDCE4; --rose:#F07AA8; --rose-soft:#3A1B29; --rose-ink:#FFA8C8; --olive:#A5C24E; --olive-soft:#26300F; --olive-ink:#CBE08A; --bronze:#C99A6B; --bronze-soft:#332415; --bronze-ink:#E3C4A3; --avance:#F5B459; } /* ═══════════════════════════════════════════════════════════════ Deux corrections d'assiette sur le kit, valables partout. ═══════════════════════════════════════════════════════════════ */ /* Le titre d'une carte se lit de gauche à droite : icône, texte, compte. Le kit les écarte (justify-content:space-between), ce qui centre le texte dès qu'il y a trois éléments — « Situations suivies » se retrouvait au milieu, sans raison. Seul le lien « voir » file à droite, c'est sa place. */ .card h4{justify-content:flex-start;gap:9px} .card h4 .see{margin-left:auto} /* Une ligne de réglage porte une valeur qui peut être longue. Sans min-width, le libellé se réduit à un mot par ligne pendant que la valeur déborde par-dessus. On la laisse plutôt passer à la ligne. */ .set-row{flex-wrap:wrap} .set-row .sr-b{flex:1 1 180px} .set-row>b{min-width:0;text-align:right;overflow-wrap:anywhere} /* — Barre du haut — Le logo à gauche, puis le fil d'ariane, la recherche, les actions. La recherche tient sur UNE ligne : sans nowrap, un libellé un peu long la fait doubler de hauteur et toute la barre grandit avec elle. — */ .topbar .brand{margin-right:4px} .topbar .brand .bw{font-size:1.24rem} .topbar .brand .bs{font-size:.56rem;letter-spacing:.2em} .topbar .searchbar{padding:7px 13px;max-width:320px;margin-left:auto} .topbar .searchbar>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1} .topbar .tb-actions{margin-left:0} /* Le campus dont dépend l'entreprise. Il ne se replie pas et ne s'abrège pas : c'est un repère, pas une phrase. Il occupe donc une largeur fixe qu'il faut lui reprendre quand l'écran se resserre — voir plus bas. */ .topbar .tb-campus{padding:8px 15px;font-size:.82rem} @media(max-width:1100px){ .topbar .tb-crumb{display:none} } @media(max-width:860px){ .topbar .brand .bs{display:none} } /* SUR TÉLÉPHONE, LA BARRE DU HAUT NE PEUT PLUS TOUT PORTER. Le logo, la recherche, le campus et deux boutons demandent 450 px de large : la page entière se mettait à défiler latéralement, sur les six écrans à la fois. On rend donc le campus au seul endroit qui le dit déjà en toutes lettres — la page Campus — et on garde ici ce qui est un geste : chercher, changer de thème, ouvrir la cloche. */ @media(max-width:720px){ .topbar{gap:10px;padding:10px 14px} .topbar .tb-campus{display:none} /* Ces deux-là ne rétrécissent pas ; on le dit, plutôt que de laisser le navigateur pousser la page. */ .topbar .tb-actions{flex:none} .topbar .brand{flex:none} } /* ═══════════════════════════════════════════════════════════════ LE LIEU — en entreprise, ou à l'école La pastille la plus lue de l'application. Elle est identique partout : tableau de bord, liste, fiche. Marron au travail, orange à l'école — on lit une rangée entière sans lire un mot. ═══════════════════════════════════════════════════════════════ */ .lieu{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px; border-radius:999px;font-size:.76rem;font-weight:800;white-space:nowrap} .lieu svg{width:13px;height:13px;flex:none} /* LE CODE COULEUR DU LIEU, UN SEUL POUR TOUTE L'APPLICATION — DEUX COULEURS DE LA CHARTE FASUP', ET PAS UNE DE PLUS (direction, 28 sept 2026 : « orange école, marron entreprise, pas d'autre couleur ») : orange #F69D00 à l'école — texte marron ; marron #2E2017 en entreprise — texte crème #FFF6E2 (le clair de la charte, seulement pour que le texte se lise). Rythme à préciser et hors contrat n'ont PAS de couleur : ils gardent l'aspect neutre du reste de l'application, jusqu'à ce que le planning les place à l'école ou en entreprise. Les deux aplats ne bougent pas avec le thème sombre. Ils valent partout où le lieu paraît — cartes du tableau de bord et de la liste, pastilles, bandes du planning et de l'agenda, légende. */ :root{ --charte-orange:#F69D00; --charte-marron:#2E2017; --charte-clair:#FFF6E2} .lieu-entreprise{background:var(--charte-marron);color:var(--charte-clair)} .lieu-ecole{background:var(--charte-orange);color:var(--charte-marron)} .lieu-inconnu, .lieu-hors{background:var(--bg-2);color:var(--ink-2)} /* ═══════════════════════════════════════════════════════════════ TABLEAU DE BORD Le contenu est centré dans la hauteur réellement disponible plutôt que collé en haut avec un grand vide en dessous. Deux pièges évités, dans cet ordre : 1. le centrage porte sur .page elle-même, qui occupe déjà toute la hauteur restante sous la barre du haut. Un calc() sur 100vh retombe toujours à côté et fait apparaître une barre de défilement pour quelques pixels ; 2. il se fait par MARGES AUTOMATIQUES, pas par justify-content:center — qui rogne le haut du contenu, sans moyen de le faire réapparaître, dès que la page devient plus haute que l'écran. ═══════════════════════════════════════════════════════════════ */ .page[data-vue="dashboard"]{display:flex;flex-direction:column;padding-bottom:22px} /* Le tableau de bord ne prend pas toute la largeur : sur un grand écran, des blocs étalés sur 1 600 px se lisent moins bien que les mêmes posés au milieu. On le borne, et on le centre — mais horizontalement seulement : verticalement il part du haut, parce qu'un contenu court centré laisse un grand vide au-dessus, juste là où l'œil commence. */ /* `flex:1 0 auto` : LA COLONNE DESCEND JUSQU'EN BAS DE L'ÉCRAN et ne se comprime jamais sous la taille de son contenu. Sans elle, les blocs restaient collés en haut et le tiers inférieur de la page était vide. C'est la dernière rangée qui prend la place gagnée. */ /* L'ÉCART ENTRE LES BLOCS EST LARGE — vingt pixels, contre quinze ailleurs dans l'application. Quatre blocs de plein pied les uns sous les autres se lisent comme un seul pavé s'ils se touchent presque ; c'est l'écart qui dit qu'ils répondent à quatre questions différentes. Il se resserre par paliers quand la fenêtre est courte, comme tout le reste. */ .dash{display:flex;flex-direction:column;gap:20px;width:100%;max-width:1120px; margin:0 auto;flex:1 0 auto} /* LA RANGÉE DU BAS ABSORBE LA HAUTEUR QUI RESTE — mais pas sans fin : au-delà de 460 px, deux listes de quatre lignes ne sont plus qu'un grand blanc autour de peu de choses. Sur un très grand écran, mieux vaut quelques pixels libres en bas de page qu'un bloc démesuré. */ .dash > .g2{flex:1 0 auto;max-height:320px;min-height:0} .dash > .g2 > .card{display:flex;flex-direction:column;min-height:0} /* Les listes occupent la carte : les lignes gardent leur hauteur, et c'est l'écart entre elles qui s'ouvre. Au-delà de dix-huit pixels il se lirait comme un trou, alors on s'arrête là et le reste tombe en bas de la carte. */ .dash > .g2 .mini, .dash > .g2 .fil{flex:1;justify-content:flex-start;gap:clamp(2px,1vh,12px)} /* LES LIGNES PRENNENT UNE PART DU VIDE, dans une limite stricte. Le fil porte souvent deux actualités quand le mini agenda en porte quatre : sans cela, tout le vide tombait au fond du fil. Au-delà de la limite, une ligne d'une seule phrase deviendrait un pavé, et le reste du vide retourne en bas de carte. */ .dash > .g2 .mini-l{flex:1 1 auto;max-height:64px} .dash > .g2 .fil-l{flex:1 1 auto;max-height:84px} /* Un état vide se centre dans la carte plutôt que de rester en haut. */ .dash > .g2 .empty, .dash > .g2 .bloc-vide{margin-top:auto;margin-bottom:auto} /* Les cartes du tableau de bord sont plus grandes et plus arrondies que partout ailleurs, et lèvent une ombre au survol : c'est le bloc du tableau de bord de l'espace interne, repris tel quel. */ .page[data-vue="dashboard"] .card{padding:16px 21px 17px;border-radius:var(--r-xl)} .page[data-vue="dashboard"] .card:not(.card-flat):hover{box-shadow:var(--sh-md)} /* ── L'ENTRÉE EN SCÈNE ────────────────────────────────────────── Chaque section monte de douze pixels en apparaissant, l'une après l'autre. Le délai est posé dans le HTML : c'est la page qui sait combien de sections elle a. */ @keyframes dashIn{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } .dash-sec{animation:dashIn .5s var(--ease) both} @media (prefers-reduced-motion:reduce){ .dash-sec{animation:none} } /* Les listes ne sont plus bornées ni défilantes : elles ne portent que trois lignes. C'est le rôle du tableau de bord — dire ce qui vient ensuite, pas dérouler l'agenda de l'année. */ /* L'EN-TÊTE D'UNE CARTE : une pastille d'icône, le titre, un filet. ⚠️ LA COULEUR S'ARRÊTE À LA PASTILLE, et c'est un choix, pas un oubli. Une version antérieure posait une bande en aplat plein en haut de chaque carte : le tableau de bord devenait un tableau de couleurs et plus un tableau de bord. La seule couleur qui compte ici est celle du LIEU des alternants, en haut de page ; tout le reste doit s'effacer derrière elle. Le filet sépare le titre de la première ligne : sans lui, les deux se touchent et se lisent d'un bloc. */ .dash .card h4{font-size:.97rem;padding-bottom:12px;margin-bottom:13px; border-bottom:1px solid var(--border);gap:10px;justify-content:flex-start} .dash-h-ic{width:34px;height:34px;border-radius:11px;flex:none; display:grid;place-items:center; background:var(--accent-soft,var(--bg-2));color:var(--accent-ink,var(--ink-2))} .dash-h-ic svg{width:17px;height:17px} .dash-h-t{font-weight:800;letter-spacing:-.01em;color:var(--ink); min-width:0;white-space:nowrap} /* La pastille prend trente pixels sur une ligne qui n'en avait pas de trop : sous 1080 px, « Mini agenda » et « Tout l'agenda » se coupaient tous les deux en deux. L'en-tête se replie donc, et le lien passe dessous plutôt que de rogner le titre. */ @media(max-width:1080px){ .dash .card h4{flex-wrap:wrap;row-gap:7px} } .dash .card h4 .see{margin-left:auto} .dash .card h4 .badge{margin-left:2px} .dash .row-item{padding:10px} .dash .g23{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px} @media(max-width:880px){ .dash .g23{grid-template-columns:minmax(0,1fr)} } /* Les deux blocs du bas : ce qui est calé · ce que publie le campus. Pas deux moitiés égales : le mini agenda ne porte que des dates et des titres courts, le fil porte des phrases écrites par le campus. On rend au fil la place que le mini agenda laissait vide à sa droite. Les propositions, elles, restent pleine largeur au-dessus : c'est le seul bloc de la page où quelque chose attend une décision, et ses boutons ont besoin de la place. Une version antérieure les mettait en troisième colonne — la rangée à trois colonnes a été écartée. */ .dash .g2{grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);gap:20px} @media(max-width:840px){ .dash .g2{grid-template-columns:minmax(0,1fr)} } /* Sur une colonne, l'état vide n'a pas besoin de sa grande illustration : il tasse tout le reste pour ne rien dire. */ .dash .empty{padding:24px 12px} .dash .empty .e-ic{width:46px;height:46px;border-radius:15px;margin-bottom:6px} .dash .empty .e-ic svg{width:21px;height:21px} .dash .empty b{font-size:.92rem} .dash .empty p{font-size:.79rem} /* Trois teintes, une par carte : violet pour ce qui attend une décision, bleu pour ce qui est calé, orange pour ce que le campus publie. La teinte n'habille qu'une chose, la pastille de l'en-tête. */ .dash .card[data-accent="violet"]{--accent-soft:var(--violet-soft);--accent-ink:var(--violet-ink)} .dash .card[data-accent="info"]{--accent-soft:var(--info-soft);--accent-ink:var(--info-ink)} .dash .card[data-accent="brand"]{--accent-soft:var(--brand-50);--accent-ink:var(--brand-800)} .dash-barre{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .dash-bonjour{font-size:1.05rem;font-weight:800;letter-spacing:-.015em;margin-right:2px} /* La date se présente comme un bouton, mais n'en est pas un : rien à cliquer, donc pas de curseur ni d'effet de survol trompeur. */ .chip-date{cursor:default;text-transform:capitalize} .chip-date:hover{border-color:var(--border-2);color:var(--ink-soft)} /* Poussé à droite tant qu'il partage la ligne ; seul sur la sienne, il revient à gauche avec le reste plutôt que de flotter dans le vide. */ .dash-barre .btn{margin-left:auto} /* SUR TÉLÉPHONE, IL DISPARAÎT. « Mon agenda » y prenait une ligne entière pour mener là où la barre du bas mène déjà d'un doigt — l'agenda est à deux centimètres, en permanence. Un raccourci qui double un bouton toujours visible ne vaut pas une ligne de tableau de bord. */ @media(max-width:720px){ .dash-barre .btn{display:none} } /* L'ENTÊTE D'UNE CARTE, SUR UN ÉCRAN ÉTROIT. Titre, badge et lien « voir tout » sur une seule ligne : à 320 px le titre se coupait en deux et le lien passait par-dessus. Ils se replient désormais, et le lien revient à gauche quand il est seul sur sa ligne — collé à droite, il paraissait appartenir à la ligne du dessous. */ @media(max-width:560px){ .card h4{flex-wrap:wrap;row-gap:6px} .card h4 .see{margin-left:0} .dash .card h4 .see{margin-left:0} } /* Le rappel du tableau de bord est plus discret qu'ailleurs : il vit au milieu d'une page déjà dense, il n'a pas à crier. */ .dash .rappel{padding:11px 14px} .dash .rappel b{font-size:.85rem} .dash .rappel small{font-size:.77rem} /* ══════════════════════════════════════════════════════════════ LA RANGÉE DES ALTERNANTS UNE CARTE PAR ALTERNANT, ESPACÉES du même écart que le reste de la page : la rangée doit se lire comme une grille, pas comme un bloc fondu. Elles ont été un temps réunies dans une seule carte à cases séparées d'un filet — des cartes qui se détachent se comparent mieux, et l'aplat de couleur y respire. Le nombre de colonnes vient de --cols, posé à l'affichage : au plus TROIS. On ne laisse pas le navigateur décider avec auto-fit — à cinq alternants il en alignerait cinq sur un écran large, et la rangée deviendrait illisible. ══════════════════════════════════════════════════════════════ */ .alt-rangees{display:flex;flex-direction:column;gap:14px} .alt-tuiles{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:14px} .alt-tuile{appearance:none;cursor:pointer;font:inherit; text-align:left;min-width:0;display:flex;flex-direction:column;gap:12px; padding:15px 18px 15px;border-radius:var(--r-xl); border:1px solid var(--bord,var(--border));box-shadow:var(--sh-sm); background:var(--fond,var(--surface));color:var(--texte,var(--ink)); transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .alt-tuile:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .alt-tuile:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* LA COULEUR SUIT LE LIEU, PAS LA PERSONNE — deux couleurs de la charte et rien d'autre (direction, 28 sept 2026) : ORANGE à l'école, MARRON en entreprise. Les encres secondaires sont la même encre, allégée — jamais une autre teinte. Sur une carte colorée, la pastille du lieu n'a pas de fond : un simple contour de l'encre de la carte (une pastille de la couleur de la carte n'existerait pas). Les deux aplats ne bougent pas avec le thème sombre. */ .alt-tuile.t-ecole, .alt-carte.t-ecole{ --fond:var(--charte-orange); --bord:transparent; --texte:var(--charte-marron); --texte-2:rgba(46,32,23,.72); --texte-3:rgba(46,32,23,.5); --part-fond:transparent; --part-encre:var(--charte-marron); --part-bord:var(--charte-marron); --filet:rgba(46,32,23,.2)} .alt-tuile.t-entreprise, .alt-carte.t-entreprise{ --fond:var(--charte-marron); --bord:transparent; --texte:var(--charte-clair); --texte-2:rgba(255,246,226,.78); --texte-3:rgba(255,246,226,.56); --part-fond:transparent; --part-encre:var(--charte-clair); --part-bord:var(--charte-clair); --filet:rgba(255,246,226,.22)} /* Rythme à préciser, hors contrat : PAS DE COULEUR — la carte neutre de l'application, qui suit le thème. Elle prendra l'orange ou le marron dès que le planning de sa classe la placera. */ .alt-tuile.t-inconnu, .alt-carte.t-inconnu, .alt-tuile.t-hors, .alt-carte.t-hors{ --fond:var(--surface); --bord:var(--border); --texte:var(--ink); --texte-2:var(--ink-soft); --texte-3:var(--ink-mute); --part-fond:var(--bg-2); --part-encre:var(--ink-2); --part-bord:transparent; --filet:var(--border)} /* ── ÉTAGE DU HAUT : QUI, et rien d'autre ── L'avatar est grand parce qu'il est le seul repère visuel de la carte : c'est lui qu'on cherche du regard quand on en a trois côte à côte, pas le nom qu'il faut lire. Quarante-huit pixels et pas cinquante-six : au-delà, l'étage du haut pèse plus lourd que les deux faits du bas, qui sont pourtant ce qu'on vient chercher. */ .alt-tuile .ava-lg{width:48px;height:48px;font-size:1rem} .alt-tuile .at-tete{display:flex;align-items:center;gap:12px;width:100%;min-width:0} .alt-tuile .at-qui{flex:1;min-width:0} .alt-tuile .at-qui b{display:block;font-size:1.02rem;font-weight:800;line-height:1.25; letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .alt-tuile .at-qui small{display:block;font-size:.77rem;font-weight:600; color:var(--texte-2);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── L'ANATOMIE D'UNE CARTE ── Deux étages, et la largeur entière occupée à chaque fois : en haut — QUI à gauche, OÙ IL EST à droite ; en bas — CE QUI VIENT DANS SON PARCOURS à gauche, SON PROCHAIN CHANGEMENT DE LIEU à droite. Aucun des quatre ne redit un autre. Une version antérieure portait la part du contrat courue ET la date de fin de contrat : deux façons de dire où l'on en est dans le temps, pour une carte qui n'apprenait rien. La fin de contrat n'apparaît plus qu'à moins de trois mois, en alerte. Sur les aplats de la charte, le filet est une ombre de l'encre de la carte et non un gris du kit (règles des cartes, plus haut) : un trait gris clair sur de l'orange ou du marron se voit comme une rayure. */ /* ── EN HAUT À DROITE : LE LIEU DU JOUR ── La pastille tient le bord droit de la carte. Une version antérieure empilait tout à gauche : la moitié droite de l'en-tête restait vide, et la carte paraissait mal remplie quel que soit son contenu. */ .alt-tuile .at-lieu{margin-left:auto;flex:none; display:inline-flex;align-items:center;gap:6px; font-size:.82rem;font-weight:800;line-height:1.2;white-space:nowrap; border-radius:var(--r-full);padding:4px 11px; border:1.5px solid var(--part-bord,transparent); background:var(--part-fond);color:var(--part-encre)} .alt-tuile .at-lieu svg{width:15px;height:15px;flex:none} /* ── EN BAS : DEUX FAITS QUI NE SE RÉPÈTENT PAS ── Ce qui vient dans le parcours à gauche, le prochain changement de lieu à droite, séparés d'un filet vertical. Ils occupent toute la largeur : c'est ce qui remplit la carte au lieu de la laisser à moitié nue. La colonne de gauche est la plus large : « Vérification finale des fiches » est trois fois plus long que « À l'école ». */ .alt-tuile .at-faits{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); width:100%;min-width:0;margin-top:auto;padding-top:11px; border-top:1px solid var(--filet,var(--border))} .alt-tuile .at-f{display:flex;flex-direction:column;gap:4px;min-width:0; padding-right:14px} .alt-tuile .at-f + .at-f{padding-right:0;padding-left:15px; border-left:1px solid var(--filet,var(--border))} .alt-tuile .at-lbl{font-size:.7rem;font-weight:700;color:var(--texte-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .alt-tuile .at-val{min-width:0;display:flex;align-items:center;gap:6px; white-space:nowrap;overflow:hidden} .alt-tuile .at-ic{flex:none;display:flex;align-items:center;color:var(--texte-3)} .alt-tuile .at-ic svg{width:15px;height:15px} /* La valeur en gras, sa date en retrait : la même hiérarchie des deux côtés du filet. Une seule ligne, toujours — un texte qui passerait à deux ferait grandir une carte et pas sa voisine. */ .alt-tuile .at-v{font-size:.86rem;font-weight:800;color:var(--texte); min-width:0;overflow:hidden;text-overflow:ellipsis} .alt-tuile .at-v.at-rien{font-weight:600;color:var(--texte-3)} .alt-tuile .at-q{flex:none;font-size:.78rem;font-weight:600;color:var(--texte-2)} /* ── QUAND LA CARTE SE RÉTRÉCIT, LES DEUX FAITS S'EMPILENT ── Côte à côte dans 130 px, « En entreprise » et « lundi 31 août » se coupent tous les deux, et une date coupée ne sert à rien. Ils passent alors l'un sous l'autre, étiquette à gauche et valeur en face. ⚠️ LE CHOIX SUIT LA DENSITÉ, PAS LA LARGEUR DE CHAQUE CARTE. Une requête de conteneur avait l'air plus juste, mais avec 3 + 2 elle empilait la première rangée pendant que la seconde, plus large, restait côte à côte : deux rangées du même bloc qui ne se ressemblaient plus. La densité, elle, est celle de la rangée la plus remplie, donc la même pour toutes. La media query prend le relais quand la grille elle-même se réduit : sous 900 px de fenêtre, deux cartes de front font moins de 300 px. */ /* ⚠️ L'ÉTIQUETTE RESTE AU-DESSUS DE SA VALEUR, même empilé. Une version antérieure la mettait à gauche dans une colonne de 70 px : « Prochaine étape » se coupait en « Prochaine… ». Ce qui saute quand la carte rétrécit, c'est la mise côte à côte et le filet vertical, pas la hiérarchie. */ .alt-rangees[data-densite="moyen"] .at-faits{display:flex;flex-direction:column;gap:9px} .alt-rangees[data-densite="moyen"] .at-f{padding-right:0} .alt-rangees[data-densite="moyen"] .at-f + .at-f{padding-left:0;border-left:0} @media(max-width:900px){ .alt-tuile .at-faits{display:flex;flex-direction:column;gap:9px} .alt-tuile .at-f{padding-right:0} .alt-tuile .at-f + .at-f{padding-left:0;border-left:0} } /* SUR TÉLÉPHONE, LA PASTILLE DU LIEU PASSE SOUS LE NOM. Sur la même ligne dans 343 px, elle réduisait « Théo Bernard » à « Théo Berna… » : entre le nom de quelqu'un et une pastille, c'est la pastille qui descend. */ @media(max-width:620px){ /* La grille plutôt que le repli : la pastille prend la deuxième rangée sur toute la largeur, sans s'y étirer. Un simple flex-wrap ne la faisait pas descendre, elle serrait le nom à sa gauche. */ .alt-tuile .at-tete{display:grid;grid-template-columns:auto minmax(0,1fr); align-items:center;gap:10px 12px} .alt-tuile .at-lieu{grid-column:1/-1;justify-self:start;margin-left:0} } /* Trois de front ne tiennent plus sur une fenêtre étroite : on repasse à deux, puis à une. Le découpage en rangées du JS reste, il se subdivise simplement. */ @media(max-width:1000px){ .alt-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:620px){ .alt-tuiles{grid-template-columns:minmax(0,1fr)} } /* ── Le palier « moyen » : trois cases de front ── À trois par rangée la case tombe à 364 px. Tout y tient encore, mais de justesse : le nom passe d'un cran, et les marges se resserrent. Le palier ne vaut que tant que les trois sont de front — sous 1000 px la grille repasse à deux colonnes, les cases redeviennent larges, et la forme complète doit revenir. D'où la media query qui l'enferme, plutôt que de le défaire ensuite règle par règle. */ /* DEUX RANGÉES DE CARTES prennent une centaine de pixels de plus que deux cartes seules : elles se resserrent d'un cran supplémentaire, et les deux listes du bas passent de quatre lignes à trois (décidé dans dashboard.js). C'est à ce prix que cinq alternants tiennent encore dans un écran de portable. */ .alt-rangees:not([data-rangees="1"]){gap:9px} .alt-rangees:not([data-rangees="1"]) .alt-tuiles{gap:9px} .alt-rangees:not([data-rangees="1"]) .alt-tuile{padding:6px 14px 6px;gap:5px} .alt-rangees:not([data-rangees="1"]) .ava-lg{width:32px;height:32px;font-size:.72rem} .alt-rangees:not([data-rangees="1"]) .at-tete{gap:10px} .alt-rangees:not([data-rangees="1"]) .at-qui b{font-size:.92rem} .alt-rangees:not([data-rangees="1"]) .at-qui small{font-size:.73rem;margin-top:1px} .alt-rangees:not([data-rangees="1"]) .at-faits{padding-top:6px;gap:3px} /* Pas de largeur imposée : l'étiquette est au-dessus de sa valeur, elle prend la colonne. Une largeur de 66 px, reste d'une mise en page où elle était à gauche, coupait « Prochaine étape » en « Prochaine… ». */ .alt-rangees:not([data-rangees="1"]) .at-lbl{font-size:.67rem} .alt-rangees:not([data-rangees="1"]) .at-val{font-size:.8rem} @media(min-width:1001px){ .alt-rangees[data-densite="moyen"] .alt-tuile{padding:13px 15px 14px;gap:9px} .alt-rangees[data-densite="moyen"] .at-qui b{font-size:.95rem} .alt-rangees[data-densite="moyen"] .ava-lg{width:46px;height:46px;font-size:.95rem} .alt-rangees[data-densite="moyen"] .at-val{font-size:.81rem} .alt-rangees[data-densite="moyen"]:not([data-rangees="1"]) .alt-tuile{padding:5px 14px 5px;gap:4px} .alt-rangees[data-densite="moyen"]:not([data-rangees="1"]) .ava-lg{width:30px;height:30px;font-size:.68rem} } /* — Le fil d'actualité — Trois ancrages, comme le mini agenda : QUAND à gauche, QUOI au milieu, OÙ à droite. Une actualité datée porte la pastille du mini agenda ; une actualité sans date porte la vignette du campus. — */ .fil{display:flex;flex-direction:column} /* UN SEUL AXE : la pastille, le texte et le lieu sont centrés les uns sur les autres. Alignés en haut, la pastille (34 px) et le lieu (une ligne) tombaient à deux hauteurs différentes et la ligne partait de travers. */ .fil-l{display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px; border-radius:var(--r-md);cursor:pointer;text-align:left;font:inherit;color:inherit; background:none;border:none;transition:background .13s} .fil-l:hover{background:var(--surface-2)} /* La pastille du mini agenda, en orange : ce bloc est celui du campus, et l'orange est sa couleur — c'est déjà celle de son liseré et de sa puce de titre. Le mini agenda garde le gris : deux blocs voisins, deux provenances, et la couleur le dit sans un mot. */ .fil-l .fl-date{width:40px;flex:none;text-align:center;border-radius:10px;padding:5px 3px; background:var(--brand-50);color:var(--brand-700)} .fil-l .fl-date b{display:block;font-size:1rem;font-weight:800;line-height:1} .fil-l .fl-date small{display:block;font-size:.62rem;font-weight:700;margin-top:1px; text-transform:lowercase} /* La vignette occupe la place de la pastille, à la même largeur : les lignes datées et non datées restent alignées entre elles. */ .fil-l .fl-img{width:40px;flex:none;display:flex} .fil-l .fl-img svg{width:40px;height:34px;display:block} .fil-l .fl-c{flex:1;min-width:0} .fil-l .fl-c b{display:block;font-size:.87rem;line-height:1.35} .fil-l .fl-c small{display:block;font-size:.79rem;color:var(--ink-soft);line-height:1.5;margin-top:2px} /* « En savoir plus », à droite, sur le même axe que la pastille de date. Il remplace l'adresse : une adresse entière ne tient pas sur une ligne de fil, et abrégée elle ne sert plus à rien. Le bouton, lui, tient toujours la même largeur — le bord droit du bloc reste droit, quelle que soit la longueur de ce que le campus a saisi. */ .fil-l .fl-plus{flex:none;padding:5px 11px;border-radius:999px; border:1px solid var(--border);background:var(--surface); font-size:.72rem;font-weight:700;color:var(--ink-soft);white-space:nowrap; transition:border-color .13s,color .13s,background .13s} .fil-l:hover .fl-plus{border-color:var(--brand);color:var(--brand-700); background:var(--brand-50)} /* Sous 520 px, le bouton mange le titre : la ligne entière reste cliquable, elle n'a plus besoin de l'annoncer. */ @media(max-width:520px){ .fil-l .fl-plus{display:none} } /* — Le détail d'une actualité, en modale — Les faits (quand, où) en tête, encadrés ; le texte du campus en dessous, au calme. C'est l'ordre dans lequel on les cherche. */ .actu-faits{display:flex;flex-direction:column;gap:2px;margin-bottom:16px; padding:12px 14px;border-radius:var(--r-md);background:var(--bg-2)} .actu-faits .af-l{display:flex;align-items:center;gap:11px;padding:5px 0} .actu-faits .af-ic{width:30px;height:30px;border-radius:9px;flex:none;display:flex; align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand-700)} .actu-faits .af-ic svg{width:15px;height:15px} .actu-faits .af-c{min-width:0} .actu-faits .af-c small{display:block;font-size:.7rem;font-weight:700;color:var(--ink-mute); text-transform:uppercase;letter-spacing:.05em;line-height:1} .actu-faits .af-c b{display:block;font-size:.88rem;margin-top:3px;line-height:1.35} .actu-texte{font-size:.9rem;line-height:1.65;color:var(--ink-2)} /* — Les propositions du campus, en NOTIFICATIONS — Une ligne pleine largeur, pas une carte : de quoi il s'agit à gauche, les boutons à droite. On répond sans quitter la page et sans descendre d'un pixel. Fond neutre, volontairement. L'orange d'une alerte disait « il y a un problème » alors qu'il s'agit d'une bonne nouvelle : quelqu'un vient voir votre alternant. La seule couleur est la pastille violette de l'icône — celle des rendez-vous partout ailleurs. — */ .notifs{display:flex;flex-direction:column;gap:9px} /* Plus hautes depuis le 29 sept 2026 : les propositions sont le bloc qu'on utilise le plus (Théo). */ .notif{display:flex;align-items:center;gap:14px;padding:15px 16px;min-height:68px; border:1px solid var(--border);border-radius:14px;background:var(--surface); transition:border-color .16s var(--ease),box-shadow .16s var(--ease)} .notif:hover{border-color:var(--border-2);box-shadow:var(--sh-sm)} .notif .nt-ic{width:40px;height:40px;border-radius:12px;flex:none;display:flex; align-items:center;justify-content:center;background:var(--violet-soft);color:var(--violet)} .notif .nt-ic svg{width:17px;height:17px} .notif .nt-c{flex:1;min-width:0} .notif .nt-c b{display:block;font-size:.93rem;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .notif .nt-c small{display:block;font-size:.77rem;color:var(--ink-soft);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .notif .nt-act{display:flex;align-items:center;gap:7px;flex:none} .notif .nt-act .btn{height:34px;padding:0 14px;font-size:.8rem} /* Au-delà de deux propositions : deux colonnes, pour que le bloc garde la hauteur qu'il a avec deux. Les lignes se resserrent — icône plus petite, boutons plus courts — plutôt que de renvoyer les boutons sous le texte, ce qui aurait rendu chaque ligne deux fois plus haute et annulé tout le gain. */ .notifs-2c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .notifs-2c .notif{gap:10px;padding:10px 12px} .notifs-2c .notif .nt-ic{width:32px;height:32px;border-radius:10px} .notifs-2c .notif .nt-ic svg{width:15px;height:15px} .notifs-2c .notif .nt-act{gap:5px} .notifs-2c .notif .nt-act .btn{height:30px;padding:0 9px;font-size:.75rem} /* « Préparer » est un raccourci de confort : c'est lui qui saute en premier quand la place manque, jamais « Valider ». */ @media(max-width:1080px){ .notifs-2c .notif .nt-act .btn-ghost{display:none} } @media(max-width:980px){ .notifs-2c{grid-template-columns:minmax(0,1fr)} } @media(max-width:760px){ .notif{flex-wrap:wrap} .notif .nt-act{width:100%;padding-left:49px} .notif .nt-act .btn{flex:1 1 auto;min-width:0} } /* ⚠️ SOUS 560 PX, « PRÉPARER » DISPARAÎT. Trois boutons se partageaient 260 px : « Autre date » passait sur deux lignes et « Valider » sortait de la carte. C'est la même règle qu'en deux colonnes — le raccourci de confort saute en premier, jamais « Valider ». La préparation reste accessible depuis la fiche de l'alternant. */ @media(max-width:560px){ .notif .nt-act .btn-ghost{display:none} } /* Le sous-titre du bloc : il dit quoi faire, il ne se clique pas. */ .see-muet{margin-left:auto;font-size:.77rem;font-weight:600;color:var(--ink-mute)} @media(max-width:900px){ .see-muet{display:none} } /* — Le mini agenda : la ligne de la page Agenda, à l'identique — Le quantième au-dessus du mois dans une pastille carrée, puis le titre et, SOUS lui, la nature et l'échéance. C'est ce qui justifie son nom : on retrouve la même ligne des deux côtés, et passer du tableau de bord à l'agenda ne demande pas de réapprendre à lire. — */ .mini{display:flex;flex-direction:column;gap:2px} .mini-l{display:flex;align-items:center;gap:12px;width:100%;padding:9px 8px; border-radius:var(--r-md);cursor:pointer;text-align:left;font:inherit;color:inherit; background:none;border:none;transition:background .13s} .mini-l:hover{background:var(--surface-2)} .mini-l .mini-d{width:40px;flex:none;text-align:center;border-radius:10px;padding:5px 3px; background:var(--bg-2);color:var(--ink-2)} /* LA DATE PREND LA COULEUR DE LA NATURE, exactement comme dans « À venir » sur la page Agenda : un rendez-vous est violet, une tâche orange, un afterwork rose, un événement du campus bleu. Trois pastilles grises côte à côte donnaient trois fois la même chose à lire. */ .mini-l.t-brand .mini-d{background:var(--brand-50);color:var(--brand-800)} .mini-l.t-violet .mini-d{background:var(--violet-soft);color:var(--violet-ink)} .mini-l.t-rose .mini-d{background:var(--rose-soft);color:var(--rose-ink)} .mini-l.t-info .mini-d{background:var(--info-soft);color:var(--info-ink)} /* La couleur s'arrête à la pastille de date. Une version antérieure la posait sur la ligne entière : quatre aplats dans un bloc, trois blocs dans la page, et le tableau de bord ne se lisait plus. */ .mini-l .mini-d b{display:block;font-size:1rem;font-weight:800;line-height:1} .mini-l .mini-d small{display:block;font-size:.62rem;font-weight:700;margin-top:1px; text-transform:lowercase} .mini-l .mini-c{flex:1;min-width:0} .mini-l .mini-c b{display:block;font-size:.84rem;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mini-l .mini-c small{display:block;font-size:.73rem;color:var(--ink-soft);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mini-l.retard .mini-d{background:var(--danger-soft);color:var(--danger-ink)} .mini-l.retard .mini-c b{color:var(--danger-ink)} .mini-l.retard .mini-c small{color:var(--danger)} /* Le mini agenda réemploie les lignes de la page Agenda (.ag-l), sans rien redéfinir : c'est le même objet, en plus court. Il n'y a plus de bloc « tâches » — une tâche est un élément d'agenda comme un autre. Une proposition encore en attente y porte une mention discrète. */ .ag-att{font-style:normal;font-size:.66rem;font-weight:800;text-transform:uppercase; letter-spacing:.04em;color:var(--warn);margin-left:5px;white-space:nowrap} /* — Trois chiffres côte à côte dans une carte — Séparés par un simple trait : plus léger que trois sous-cartes, et ça se lit comme une seule information en trois volets. — */ .chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0} .chiffre{padding:0 16px;border-left:1px solid var(--border)} .chiffre:first-child{padding-left:0;border-left:none} .chiffre b{display:block;font-size:1.62rem;font-weight:800;letter-spacing:-.03em; line-height:1.15;font-variant-numeric:tabular-nums} .chiffre span{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-top:6px} .chiffre small{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:2px;line-height:1.35} @media(max-width:600px){ .chiffres{grid-template-columns:minmax(0,1fr);gap:14px} .chiffre{padding:0;border-left:none} } /* Écran peu haut : on resserre l'échelle plutôt que de laisser la page défiler. Le tableau de bord doit se lire d'un seul regard — c'est toute sa raison d'être, et trois paliers suffisent à le tenir jusqu'à des fenêtres très basses. LE PREMIER PALIER EST À 930 PX, et ce n'est pas un chiffre rond choisi au hasard : c'est la hauteur de fenêtre en dessous de laquelle le dessin large ne tient plus (mesuré sur le banc : deux alternants, deux propositions, quatre lignes d'agenda). Au-dessus, rien ne se resserre. CE QUI CÈDE, CE SONT LES MARGES, JAMAIS LES CHIFFRES : les noms, les dates et les titres gardent leur taille à tous les paliers. Un écran de portable voit donc le même tableau de bord, simplement plus serré. */ @media(max-height:930px){ .page[data-vue="dashboard"]{padding-top:18px;padding-bottom:18px} /* L'écart, lui, ne bouge pas encore : c'est ce qui sépare les blocs, et c'est la dernière chose à céder. Les marges intérieures des cartes, elles, se resserrent. */ .dash{gap:20px} .dash .g2{gap:20px} .alt-tuiles{gap:13px} .alt-rangees{gap:13px} .alt-tuile{padding:13px 17px 14px;gap:9px} .alt-rangees[data-densite="moyen"] .alt-tuile{padding:11px 15px 12px;gap:8px} .page[data-vue="dashboard"] .card{padding:13px 19px 14px} .dash .card h4{padding-bottom:10px;margin-bottom:10px} .dash-h-ic{width:31px;height:31px;border-radius:10px} .dash-h-ic svg{width:16px;height:16px} .dash .notif{padding:9px 13px} .dash .fil-l{padding:9px 10px} .dash .mini-l{padding:7px 8px} } @media(max-height:800px){ .page[data-vue="dashboard"]{padding-top:16px;padding-bottom:16px} .dash{gap:16px} .dash .g2{gap:16px} .dash .g23{gap:13px} .alt-tuiles{gap:11px} .alt-rangees{gap:11px} .alt-tuile{padding:11px 16px 12px;gap:8px} .alt-rangees[data-densite="moyen"] .alt-tuile{padding:9px 15px 10px;gap:7px} .alt-tuile .ava-lg{width:42px;height:42px;font-size:.9rem} .alt-tuile .at-faits{padding-top:10px} .page[data-vue="dashboard"] .card{padding:11px 17px 12px} .dash .card h4{padding-bottom:8px;margin-bottom:8px} .dash-h-ic{width:29px;height:29px;border-radius:9px} .dash .notif{padding:7px 12px} .dash .fil-l{padding:7px 10px} .dash .mini-l{padding:5px 8px} } /* Sous 760 px de haut, une deuxième rangée de tuiles (cinq alternants et plus) ne passe qu'à cette échelle-là. Le dessin ne change pas, il se resserre. */ @media(max-height:760px){ .page[data-vue="dashboard"]{padding-top:8px;padding-bottom:8px} /* Le bloc des propositions est revenu pleine largeur : la colonne a un écart de plus à porter qu'à l'époque des trois colonnes. */ .dash{gap:10px} .dash .g2{gap:12px} .dash .g23{gap:10px} .dash > .g2 .mini, .dash > .g2 .fil{gap:clamp(2px,.8vh,10px)} .alt-tuiles{gap:8px} .alt-rangees{gap:8px} .alt-tuile{padding:8px 15px 8px;gap:6px} .alt-rangees[data-densite="moyen"] .alt-tuile{padding:7px 14px 8px;gap:5px} .alt-tuile .ava-lg{width:38px;height:38px;font-size:.82rem} .alt-tuile .at-tete{gap:10px} .alt-tuile .at-qui b{font-size:.95rem} .alt-tuile .at-faits{padding-top:8px;gap:5px} .alt-tuile .at-f{gap:3px} .alt-tuile .at-val{font-size:.82rem} /* Spécificité identique à la règle « moyen » écrite plus haut dans le fichier, et posée après elle : c'est l'ordre qui tranche. Sans cette ligne, cinq alternants sur deux rangées débordaient de huit pixels. */ .alt-rangees[data-densite="moyen"]:not([data-rangees="1"]) .alt-tuile{padding:6px 14px 7px;gap:4px} .page[data-vue="dashboard"] .card{padding:8px 15px 8px} .dash .card h4{padding-bottom:6px;margin-bottom:6px} .dash-h-ic{width:26px;height:26px;border-radius:8px} .dash-h-ic svg{width:14px;height:14px} .dash .notif{padding:4px 10px} /* Portée .dash comme aux paliers du dessus : sans elle, la règle du palier 800 (plus spécifique) l'emporterait ici. */ .dash .fil-l{padding:4px 8px} .dash .fil-l .fl-date{padding:3px} .dash .fil-l .fl-img svg{height:30px} .dash .mini-l{padding:3px 8px} .dash .mini-l .mini-d{padding:3px} } /* ═══════════════════════════════════════════════════════════════ AGENDA ═══════════════════════════════════════════════════════════════ */ /* Le kit réserve 80 px sous chaque page, pour que le contenu ne colle pas au bas de l'écran quand on a fini de défiler. L'agenda, lui, ne défile pas : ces 80 px ne servaient qu'à faire dépasser la page de l'écran, soit exactement ce qu'on cherche à éviter. */ /* La page tient dans l'écran : elle prend donc toute la largeur, sans le plafond de 1 240 px des pages qui se lisent en colonne. Un calendrier n'a rien à gagner à être étroit — chaque pixel donné aux cases est un titre de rendez-vous qui cesse d'être coupé. */ .page[data-vue="agenda"]{padding-bottom:22px;max-width:none} /* La colonne de droite : le filtre, puis ce qui vient. */ .ag-col{display:flex;flex-direction:column;gap:12px;min-width:0} /* Le filtre en tête de cette colonne : il commande le calendrier à sa gauche ET la liste sous lui, il se lit donc avant les deux. */ .ag-qui{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .ag-qui .fq{display:flex;align-items:center;gap:7px;padding:6px 13px 6px 7px; border-radius:99px;border:1.5px solid var(--border-2);background:var(--surface); font:inherit;font-size:.8rem;font-weight:700;color:var(--ink-soft);cursor:pointer; transition:background .15s,border-color .15s,color .15s} .ag-qui .fq:first-child{padding:6px 15px} .ag-qui .fq:hover{border-color:var(--ink-mute);color:var(--ink)} /* Un seul bouton allumé à la fois — le brun de la marque, celui du rail. */ .ag-qui .fq.on{background:var(--ink);border-color:var(--ink);color:#fff} .ag-qui .fq.on .ava{box-shadow:0 0 0 2px rgba(255,255,255,.35)} /* CE QUI VIENT à droite, le calendrier prend le reste. */ .ag-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start} @media(max-width:900px){ .ag-wrap{grid-template-columns:minmax(0,1fr)} } .ag-cal-h{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap} .ag-cal-h b{font-size:1.05rem;font-weight:800;margin-right:auto} .ag-nav{display:flex;align-items:center;gap:6px} /* LA GRILLE OCCUPE LA HAUTEUR RESTANTE : les rangées se partagent l'espace disponible tant que le mois y tient — quatre semaines donnent des cases plus courtes, deux semaines des cases deux fois plus hautes, et la page ne défile pas, ce qui est toute la raison d'être d'un calendrier. « Tant que le mois y tient » : c'est la seule chose qui a changé. Se partager la hauteur À TOUT PRIX revenait à écraser les journées chargées jusqu'à l'illisible (voir plus bas, grid-template-rows). La page garde donc sa hauteur, et c'est la grille — elle seule — qui défile les rares fois où une semaine déborde. La hauteur exacte est posée par le JS (ajusterHauteur), qui MESURE où la grille commence. Un calc(100vh - 280px) devinait la somme de tout ce qui la précède — barre du haut, titre, en-tête du calendrier — et se trompait de quelques pixels dès qu'un de ces blocs changeait. */ /* ═══════════════════════════════════════════════════════════════ LE CALENDRIER — au plus quatre semaines, des bandes de présence Une seule grille : cinq colonnes (le week-end ne porte rien) et autant de rangées que de semaines affichées. ═══════════════════════════════════════════════════════════════ */ /* ÉCART VERTICAL 6, HORIZONTAL 2. Les jours d'une semaine se suivent : les serrer permet aux bandes de présence de passer d'une case à l'autre sans coupure visible. Les semaines, elles, restent séparées. */ /* UNE RANGÉE PREND CE QU'IL LUI FAUT — `minmax(min-content, 1fr)`, pas `minmax(0, 1fr)`. Le seul mot qui change est le minimum, et c'est tout le sujet. Borné à zéro, il autorisait la rangée à devenir plus courte que ce qu'elle porte : les quatre semaines se partageaient la hauteur à parts égales quoi qu'elles contiennent, une journée à six rendez-vous recevait la même case qu'une journée vide, et ses pastilles étaient comprimées jusqu'à 8 px de haut — un trait de couleur où l'on devinait un mot. `min-content`, c'est la hauteur réellement nécessaire à la journée la plus chargée de la semaine. Pas un nombre de pixels : une valeur fixe, même généreuse, ne ferait que déplacer le seuil à partir duquel on écrase. Le plancher, lui, est posé sur la CASE (`--hj`), pour qu'une semaine vide garde l'allure d'une semaine. Le maximum reste `1fr`, et il compte autant : tant que le mois tient dans l'écran, les semaines se partagent la hauteur À PARTS ÉGALES, exactement comme avant. Seule celle qui déborde de sa part prend le supplément qu'il lui faut. (Avec `auto` à la place, les rangées devenaient inégales même dans un mois creux — chacune gardait sa hauteur de contenu et ne recevait qu'une part identique du reste, si bien qu'une semaine à deux rendez-vous dépassait visiblement sa voisine vide, sans que cela apprenne rien à personne.) Et si le total dépasse, c'est la grille qui défile — pas la page. Le calendrier reste à sa place, l'en-tête des jours aussi (il colle en haut), et l'on descend dans les semaines sans perdre ses repères. Un calendrier qui défile de trois centimètres se lit ; un calendrier illisible ne se lit pas. LA PREMIÈRE RANGÉE EST EN `min-content`, ET SURTOUT PAS EN `auto`. Une rangée à maximum `auto` prend sa part de l'espace que le mois n'a pas utilisé. La rangée des noms de jours en était une : elle s'étirait à 113 px pour porter cinq mots de 31 px, d'où un vide inexplicable entre LUN MAR MER JEU VEN et la première ligne de cases. `min-content` la sort du partage — elle prend la hauteur de son texte, et pas un pixel de plus. */ .ag-grille{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 2px; grid-template-rows:min-content repeat(var(--sem,4),minmax(min-content,1fr)); min-height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:var(--border-2) transparent} /* L'en-tête des jours reste visible quand la grille défile : sans lui, on ne sait plus quelle colonne est le mardi. */ .ag-jn{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-mute);text-align:center;padding:2px 0 6px; position:sticky;top:0;z-index:2;background:var(--surface)} /* PADDING SUR LES QUATRE CÔTÉS. Bandes de présence et rendez-vous partagent la même boîte de contenu : ils s'alignent entre eux, et aucun ne vient buter contre le contour de la carte. Les bandes ont bien traversé de bord à bord un temps, pour se raccorder d'une case à l'autre — mais collées au trait de la carte, elles donnaient l'impression d'un débordement. */ /* `--hj` : la hauteur SOUS laquelle une case ne descend pas, même vide. Une semaine sans rien n'a pas à s'aplatir en bandeau — c'est encore une semaine, et les quatre doivent se ressembler assez pour se comparer. */ .ag-jour{border:1px solid var(--border);border-radius:12px;padding:8px; background:var(--surface);display:flex;flex-direction:column;gap:6px; min-height:var(--hj,100px);cursor:pointer; transition:border-color .13s,box-shadow .13s} /* RIEN NE SE COMPRIME DANS UNE CASE. Par défaut, un enfant de colonne flexible accepte de rétrécir quand la place manque : le quantième, les bandes et les rendez-vous s'aplatissaient donc ensemble, chacun perdant la moitié de sa hauteur, jusqu'à ce que les derniers ne soient plus que des filets de couleur. Chaque élément garde désormais sa taille — c'est la rangée qui s'allonge pour les porter. */ .ag-jour > *{flex:0 0 auto} .ag-jour:hover{border-color:var(--border-2);box-shadow:var(--sh-sm)} /* Les jours passés ne sont PAS grisés. Le repère, c'est le contour orange d'aujourd'hui : il suffit, et il laisse les semaines écoulées aussi lisibles que les autres — une visite de la semaine dernière se relit sans plisser les yeux. */ .ag-jour.aujourdhui{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)} /* TOUT EST CENTRÉ DANS LA CASE — le quantième, les bandes, les rendez-vous. Aligné à gauche, le contenu s'entassait contre un bord et laissait la moitié droite vide ; centré, il occupe sa case et cinq cases côte à côte se lisent comme une grille, pas comme cinq colonnes de texte. */ .ag-jour .ag-q{display:block;text-align:center;font-size:.85rem;font-weight:800; color:var(--ink-2);line-height:1} .ag-jour .ag-q sup{font-size:.6em} /* Le nom du jour, écrit dans la case. Sur écran large la ligne LUN MAR MER JEU VEN le dit déjà en tête de colonne : il ne sert que sur téléphone, où il n'y a plus de colonnes à nommer. */ .ag-jsem{display:none} .ag-jour.aujourdhui .ag-q{color:var(--brand-700)} /* — LES BANDES, DANS LA CASE — ALIGNÉES SUR LES RENDEZ-VOUS : mêmes bords gauche et droit que les pastilles posées dessous. Elles débordaient auparavant jusqu'aux bords de la carte pour donner l'illusion d'un trait continu — mais rien ne tombait plus en face de rien, et c'est l'alignement qui fait qu'une case se lit d'un coup. La continuité, elle, se lit maintenant à la couleur répétée d'un jour à l'autre. Le liseré plein à gauche marque le premier jour de la période, et le prénom est écrit chaque jour : une bande muette au milieu de la semaine obligeait à remonter à lundi pour savoir de qui elle parlait. — */ .jbs{display:flex;flex-direction:column;gap:4px} .jb{display:flex;align-items:center;justify-content:center;gap:6px;height:26px; padding:0 8px;font-size:.76rem;font-weight:800;overflow:hidden;white-space:nowrap;flex:none} .jb svg{width:13px;height:13px;flex:none;opacity:.7} .jb b{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis} /* Arrondie aux seules extrémités de la période : au milieu, la bande est franche des deux côtés, et deux cases voisines redonnent un trait continu. */ .jb.deb{border-top-left-radius:8px;border-bottom-left-radius:8px} .jb.fin{border-top-right-radius:8px;border-bottom-right-radius:8px} /* LE MÊME CODE COULEUR QUE PARTOUT AILLEURS : orange l'école, marron l'entreprise, et rien d'autre (28 sept 2026). Les tâches restent en orange très pâle : elles ne se confondent pas avec une bande d'école. Les coins arrondis suffisent à marquer le début et la fin. */ .jb-entreprise{background:var(--charte-marron);color:var(--charte-clair)} .jb-ecole{background:var(--charte-orange);color:var(--charte-marron)} /* Une place gardée, pas une bande : un alternant hors contrat ne doit pas faire remonter d'une ligne les bandes de ses camarades. */ .jb-vide{background:transparent} /* SUR ÉCRAN LARGE, LE LIBELLÉ NE PARAÎT QU'AU DÉBUT DE LA PÉRIODE. La bande traverse alors les cinq colonnes d'un seul tenant : « Léa » écrit cinq fois de suite ferait lire cinq étiquettes pour une seule information. Le HTML l'écrit partout — c'est ici qu'on le retire, parce que c'est une affaire de mise en page, et que sur téléphone (où chaque jour est une ligne) il doit rester. */ @media(min-width:721px){ .jb:not(.deb) > svg, .jb:not(.deb) > b{display:none} } /* LE TITRE VA À LA LIGNE, il ne se coupe plus. « Faire le point — situation de Théo Bernard » tenait sur une ligne unique arrêtée à « Faire le point — si… » : il fallait ouvrir la journée pour savoir de qui l'on parlait. Une pastille qu'on ne peut pas lire ne dit rien de plus qu'une case vide — sauf qu'elle prend la place. Deux lignes suffisent presque toujours ; la case s'allonge du reste. */ .ag-ev{display:block;width:100%;text-align:center;font:inherit;border:none;cursor:pointer; font-size:.74rem;font-weight:700;line-height:1.3;padding:5px 9px;border-radius:8px; overflow-wrap:break-word;background:var(--bg-2);color:var(--ink-2)} .ag-ev i{font-style:normal;font-weight:800;opacity:.72} .ag-ev:hover{filter:brightness(.96)} /* ⚠️ Une étape faite ou passée reste NORMALE (Théo, 29 sept 2026 : « c'est pas parce que c'est passé que tu dois griser et barrer ») : c'est en cliquant qu'on lit qu'elle est faite. */ .ag-ev.t-brand{background:var(--brand-50);color:var(--brand-800)} .ag-ev.t-violet{background:var(--violet-soft);color:var(--violet-ink)} .ag-ev.t-rose{background:var(--rose-soft);color:var(--rose-ink)} .ag-ev.t-info{background:var(--info-soft);color:var(--info-ink)} /* ── L'agenda : trois semaines qui défilent ── Trois rangées au lieu de quatre laissent à chaque case une bonne trentaine de pixels de plus : les bandes de présence retrouvent leur hauteur, et un titre de rendez-vous tient sur deux lignes sans s'abréger. La quatrième semaine n'est pas perdue — elle est à un cran de molette. */ /* LES RANGÉES NE SE PARTAGENT PLUS LA HAUTEUR — elles ont la leur. `1fr` par rangée suppose que toutes les semaines tiennent dans l'écran ; le ruban de l'agenda en porte des dizaines, et chacune aurait reçu un trentième de la fenêtre. Chaque semaine prend donc `--hj` (posé par le JS pour que trois remplissent la fenêtre) et s'allonge au-delà si elle est trop chargée — `min-content` comme maximum, jamais moins que --hj. Le `position:relative` fait de la grille le repère des offsetTop que le JS mesure pour se positionner sur une semaine. */ /* ⚠️ `max-content`, ET NON `minmax(--hj, min-content)`. La règle disait pourtant ce qu'il fallait : au moins `--hj`, et plus si la semaine est chargée. Elle ne le faisait pas. Une case portait `overflow:hidden` — elle devenait donc une boîte qui défile, dont la taille intrinsèque vaut ZÉRO pour le navigateur. La rangée n'avait plus rien à mesurer et retombait sur son minimum, quoi qu'il y ait dedans : un lundi à deux rendez-vous perdait 45 px de contenu, purement et simplement invisibles, et rien ne le signalait. Le plancher n'est pas perdu pour autant : il vit maintenant dans le `min-height` de la case, que `max-content` respecte. Une semaine vide garde donc sa hauteur, une semaine chargée s'allonge — ce qui était l'intention depuis le début. Le `overflow:hidden` de la case est parti avec : c'est lui qui empêchait la mesure. */ .ag-grille[data-echelle="3"]{gap:7px 2px;--hj:132px;position:relative; grid-template-rows:min-content; grid-auto-rows:max-content; scroll-behavior:auto} .ag-grille[data-echelle="3"] .ag-jour{padding:10px;gap:7px;border-radius:13px} .ag-grille[data-echelle="3"] .ag-q{font-size:.95rem} .ag-grille[data-echelle="3"] .jb{height:29px;font-size:.8rem;gap:7px;padding:0 10px} .ag-grille[data-echelle="3"] .jb.deb{border-top-left-radius:9px;border-bottom-left-radius:9px} .ag-grille[data-echelle="3"] .jb.fin{border-top-right-radius:9px;border-bottom-right-radius:9px} .ag-grille[data-echelle="3"] .jb svg{width:14px;height:14px} .ag-grille[data-echelle="3"] .ag-ev{font-size:.78rem;padding:6px 9px;line-height:1.32} /* La flèche du haut est la même que celle du bas, retournée : deux chevrons opposés se lisent comme un seul mouvement à deux sens. */ .ag-haut svg{transform:rotate(180deg)} /* ── Vue 2 semaines : deux rangées au lieu de quatre ── Les cases sont deux fois plus hautes ; garder la même petite typographie reviendrait à laisser la place inutilisée. Tout grandit, et les rendez-vous passent sur deux lignes au lieu de s'abréger. */ .ag-grille[data-echelle="2"]{gap:8px 2px;--hj:170px} .ag-grille[data-echelle="2"] .ag-jour{padding:11px;gap:7px;border-radius:14px} .ag-grille[data-echelle="2"] .ag-q{font-size:1.05rem} .ag-grille[data-echelle="2"] .jbs{gap:5px} .ag-grille[data-echelle="2"] .jb{height:32px;font-size:.84rem;gap:7px;padding:0 12px} .ag-grille[data-echelle="2"] .jb.deb{border-top-left-radius:10px;border-bottom-left-radius:10px} .ag-grille[data-echelle="2"] .jb.fin{border-top-right-radius:10px;border-bottom-right-radius:10px} .ag-grille[data-echelle="2"] .jb svg{width:15px;height:15px} /* Le rembourrage horizontal reste à 9 px, comme en vue Mois : passé à 12, il ne restait que 100 px de texte dans une colonne de 148 — assez peu pour que « hebdomadaire » ne tienne plus sur une ligne et se coupe en deux. Ce sont les mots qui doivent tenir, pas la marge. */ .ag-grille[data-echelle="2"] .ag-ev{font-size:.82rem;padding:7px 9px; border-radius:9px;line-height:1.35} .ag-grille[data-echelle="2"] .ag-jn{font-size:.75rem;padding:4px 0 8px} /* SUR TÉLÉPHONE, LE TITRE REVIENT SUR UNE SEULE LIGNE. Cinq colonnes dans 375 px, ce sont des cases de 60 px : un titre qui va à la ligne y descend un mot par ligne et fabrique une colonne de vingt lignes. Le calendrier du mois ne se lit pas sur un téléphone — c'est la vue Semaine et la liste « À venir » qui servent là — et une pastille abrégée qu'on ouvre d'un doigt vaut mieux qu'une tour de mots. */ @media(max-width:760px){ .ag-jour{padding:6px} .ag-ev{font-size:.68rem;padding:4px 6px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jb{height:22px;font-size:.68rem;padding:0 6px;gap:4px} .ag-grille{--hj:88px;overscroll-behavior:auto} .ag-grille[data-echelle="3"]{--hj:88px} .ag-grille[data-echelle="3"] .ag-jour{padding:6px} .ag-grille[data-echelle="3"] .ag-ev{font-size:.68rem;padding:4px 6px} .ag-grille[data-echelle="3"] .jb{height:22px;font-size:.68rem;padding:0 6px} /* La vue Semaine porte [data-echelle="2"] (spécificité 0,2,0 ou 0,3,0) : sans le même préfixe ici, les règles mobiles perdent. */ .ag-grille[data-echelle="2"]{--hj:88px} .ag-grille[data-echelle="2"] .ag-jour{padding:6px} .ag-grille[data-echelle="2"] .ag-ev{font-size:.68rem;padding:4px 6px} .ag-grille[data-echelle="2"] .jb{height:22px;font-size:.68rem;padding:0 6px} } /* ═══════════════════════════════════════════════════════════════ L'AGENDA SUR TÉLÉPHONE : UNE SEMAINE, CINQ LIGNES Cinq colonnes dans 320 px, cela fait 56 px par jour : « Préparer la visite » y devenait « Pré… », « 18:30 Afterwork » devenait « 18:3… », et trois semaines de ces cases-là demandaient de déchiffrer quinze cellules à la loupe. Le ruban ne change pas — même défilement, mêmes cases, mêmes repères de lundi. Ce sont les cinq jours d'UNE semaine qui passent l'un sous l'autre, sur toute la largeur. Le nom du jour rejoint le quantième dans la case, et l'en-tête de colonnes disparaît : il n'y a plus de colonnes. Le nombre de semaines affichées, lui, se décide dans agenda.js (`semainesVues`) — la mise en page et le comptage doivent parler du même écran, ils lisent donc le même seuil de 720 px. ═══════════════════════════════════════════════════════════════ */ @media(max-width:720px){ .ag-grille, .ag-grille[data-echelle="3"], .ag-grille[data-echelle="2"]{grid-template-columns:minmax(0,1fr);gap:8px; grid-template-rows:none;grid-auto-rows:max-content} .ag-jn{display:none} /* La case n'est plus un carré à remplir mais une ligne : le contenu s'aligne à gauche, là où l'œil recommence à chaque ligne. */ .ag-grille .ag-jour, .ag-grille[data-echelle="3"] .ag-jour, .ag-grille[data-echelle="2"] .ag-jour{padding:10px 13px;gap:7px;border-radius:13px; align-items:stretch} /* « LUN 24 », en tête de ligne. */ .ag-grille .ag-q, .ag-grille[data-echelle="3"] .ag-q, .ag-grille[data-echelle="2"] .ag-q{display:flex;align-items:baseline;gap:8px; text-align:left;font-size:1.05rem} .ag-jsem{display:inline;font-style:normal;font-size:.7rem;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)} .ag-jour.aujourdhui .ag-jsem{color:var(--brand-700)} /* LES TITRES NE S'ABRÈGENT PLUS. C'est la largeur qui leur manquait, et elle est revenue : un titre long tient sur deux lignes plutôt que de se terminer en points de suspension. */ .ag-grille .ag-ev, .ag-grille[data-echelle="3"] .ag-ev, .ag-grille[data-echelle="2"] .ag-ev{font-size:.84rem;padding:8px 11px;line-height:1.35; white-space:normal;overflow:visible;text-overflow:clip;text-align:left} .ag-grille .jb, .ag-grille[data-echelle="3"] .jb, .ag-grille[data-echelle="2"] .jb{height:28px;font-size:.78rem;padding:0 11px;gap:7px} .ag-grille[data-echelle="3"] .jb svg, .ag-grille[data-echelle="2"] .jb svg{width:14px;height:14px} } /* « Cette semaine » : le retour au point de départ, posé devant les deux flèches, et affiché seulement quand on s'est éloigné. */ .ag-vue{padding:5px 12px;border-radius:9px;border:1px solid var(--border); background:var(--bg-2);font:inherit; font-size:.78rem;font-weight:700;color:var(--ink-soft);cursor:pointer;white-space:nowrap} .ag-vue:hover{color:var(--ink);border-color:var(--ink-mute)} /* — LA LÉGENDE, DANS L'EN-TÊTE — Deux couleurs et deux icônes portent toute la lecture du calendrier. Posée avant lui, elle se lit au moment où l'on en a besoin — et elle rend au calendrier la hauteur qu'elle lui prenait en pied. — */ .ag-legende{display:flex;align-items:center;gap:16px;flex-wrap:wrap} @media(max-width:1150px){ .ag-legende{display:none} } .ag-lg{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700; color:var(--ink-soft)} .ag-lg i{width:26px;height:17px;border-radius:6px;display:inline-flex;align-items:center; justify-content:center;flex:none} .ag-lg svg{width:11px;height:11px} .ag-lg-ecole i{background:var(--charte-orange);color:var(--charte-marron)} .ag-lg-entreprise i{background:var(--charte-marron);color:var(--charte-clair)} .ag-suite,.ag-retards{display:flex;flex-direction:column;gap:2px} .ag-retards{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)} .ag-l{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:var(--r-md); cursor:pointer;text-align:left;font:inherit;color:inherit;background:none;border:none; width:100%;transition:background .13s} .ag-l:hover{background:var(--surface-2)} /* La pastille de date prend la couleur de la NATURE de l'élément — le même code que les pastilles du calendrier. La colonne cesse d'être une liste grise : d'un coup d'œil on distingue un rendez-vous d'une tâche sans lire la ligne de détail. */ .ag-l .ag-l-d{width:40px;flex:none;text-align:center;border-radius:10px;padding:5px 3px; background:var(--bg-2);color:var(--ink-2)} .ag-l.t-brand .ag-l-d{background:var(--brand-50);color:var(--brand-800)} .ag-l.t-violet .ag-l-d{background:var(--violet-soft);color:var(--violet-ink)} .ag-l.t-rose .ag-l-d{background:var(--rose-soft);color:var(--rose-ink)} .ag-l.t-info .ag-l-d{background:var(--info-soft);color:var(--info-ink)} .ag-l .ag-l-d b{display:block;font-size:1rem;font-weight:800;line-height:1} .ag-l .ag-l-d small{display:block;font-size:.62rem;font-weight:700;margin-top:1px; text-transform:lowercase} .ag-l .ag-l-c{flex:1;min-width:0} .ag-l .ag-l-c b{display:block;font-size:.84rem;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ag-l .ag-l-c small{display:block;font-size:.73rem;color:var(--ink-soft);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Le retard prime sur la nature : une tâche en retard est rouge avant d'être une tâche. La règle vient après pour l'emporter. */ .ag-l.retard .ag-l-d{background:var(--danger-soft);color:var(--danger-ink)} .ag-l.retard .ag-l-c b{color:var(--danger-ink)} /* ── La journée ouverte par-dessus le calendrier ── */ .jr-bloc + .jr-bloc{margin-top:20px} .jr-bloc h5{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-mute);margin-bottom:9px} .jr-l{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-md); background:var(--bg-2);margin-bottom:6px} .jr-c{flex:1;min-width:0} .jr-c b{display:block;font-size:.88rem;line-height:1.3} .jr-c small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:2px} .jr-ev{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px; border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface); font:inherit;color:inherit;text-align:left;cursor:pointer;margin-bottom:6px; transition:border-color .13s,box-shadow .13s} .jr-ev:hover{border-color:var(--border-2);box-shadow:var(--sh-sm)} .jr-ic{width:34px;height:34px;border-radius:11px;flex:none;display:flex; align-items:center;justify-content:center;background:var(--bg-2);color:var(--ink-2)} .jr-ic svg{width:16px;height:16px} .jr-ev.t-brand .jr-ic{background:var(--brand-50);color:var(--brand-700)} .jr-ev.t-violet .jr-ic{background:var(--violet-soft);color:var(--violet)} .jr-ev.t-rose .jr-ic{background:var(--rose-soft);color:var(--rose)} .jr-ev.t-info .jr-ic{background:var(--info-soft);color:var(--info)} .jr-rien{font-size:.87rem;color:var(--ink-soft);padding:4px 2px} /* ═══════════════════════════════════════════════════════════════ MES ALTERNANTS ═══════════════════════════════════════════════════════════════ */ /* La fiche doit tenir dans un écran de portable : les 80 px que le kit réserve sous chaque page ne servaient ici qu'à faire apparaître une barre de défilement pour du vide — et tout le haut de la fiche se resserre d'un cran pour la même raison. Le profil se lit une fois, les rubriques se lisent tous les jours : c'est à elles que revient la hauteur. */ .page[data-vue="alternants"]{padding:20px 28px 20px} .page[data-vue="alternants"] .tabs{margin-bottom:18px} /* ⚠️ CE BLOC RESPIRE. Il portait cinq informations dans quatorze pixels de rembourrage : tout se touchait. Il n'en porte plus que trois depuis qu'on a retiré les doublons — autant leur laisser la place. */ .page[data-vue="alternants"] .fiche-tete{margin-bottom:16px;padding:20px 24px} .page[data-vue="alternants"] .fiche-tete .ava-xl{width:58px;height:58px;font-size:1.15rem} .page[data-vue="alternants"] .fiche-tete .camp-conseil{margin-top:10px;padding:9px 13px; font-size:.83rem} .page[data-vue="alternants"] .fiche-cols .rappel{padding:10px 13px} .page[data-vue="alternants"] .fiche-cols .rappel b{font-size:.84rem} .page[data-vue="alternants"] .fiche-cols .rappel small{font-size:.77rem} /* ── TROIS COLONNES QUI NE BOUGENT JAMAIS ── MCO à gauche, NDRC au milieu, GPME à droite : les trois BTS du campus (Config.FORMATIONS), et non les formations de l'entreprise qui regarde. La place d'un BTS ne dépend donc pas de qui est inscrit — c'est ce qui permet de savoir où regarder avant d'avoir lu, et ce qui fait qu'un alternant qui arrive ne déplace pas les autres. La grille COMMENCE AU BORD DE LA PAGE, sous le titre « Mes alternants » : elle n'est pas centrée. La colonne de gauche est alignée sur le titre, et c'est ce qui la désigne. Les colonnes sont égales et occupent toute la largeur utile : 1 184 = 3 × 384 + 2 × 16. Une carte fait donc 384 px, et c'est déjà la largeur qu'avait une colonne sur trois avant ce changement — la page ne gagne pas une deuxième taille de carte. */ .alt-grille{ --alt-carte-l:384px; /* le plafond de largeur d'une carte */ --alt-carte-min:300px; /* en dessous, l'avatar de 62 px et deux lignes de texte ne cohabitent plus : on préfère une carte de moins sur la rangée */ --alt-ecart:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px var(--alt-ecart); align-items:start; } /* Un quatrième BTS reprend la colonne de gauche d'une deuxième bande, sous la première, avec les mêmes colonnes. Deux bandes se lisent comme deux tableaux : l'écart entre elles est plus grand que l'écart entre deux blocs d'une même colonne. */ .alt-grille + .alt-grille{margin-top:28px} /* ── Le titre d'une colonne : le nom du BTS ── Il est là même quand la colonne est vide. C'est ce qui fait un cadre plutôt qu'une liste — sans lui, la troisième colonne disparaîtrait et les deux autres s'élargiraient, ce qui est exactement ce qu'on cherche à empêcher. */ .alt-col{min-width:0;display:flex;flex-direction:column;gap:16px} .alt-col-t{display:flex;align-items:center;gap:9px;color:var(--ink-2); min-width:0;flex-wrap:nowrap;padding-bottom:10px; border-bottom:1px solid var(--border)} .alt-col-t svg{width:16px;height:16px;color:var(--ink-mute);flex:none} /* Le nom s'abrège plutôt que de passer à la ligne : un titre sur deux lignes dans une colonne et sur une seule dans sa voisine, et les hauts de cartes ne tombent plus en face. L'infobulle posée par le JS porte ce que l'ellipse coupe. */ .alt-col-t b{font-size:1rem;font-weight:800;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .alt-col-t i{font-style:normal;font-size:.7rem;font-weight:800;flex:none; background:var(--bg-2);color:var(--ink-soft);padding:2px 9px;border-radius:99px} /* Une colonne sans personne s'efface sans disparaître : elle garde sa place et son nom, et dit ce qu'elle a à dire. */ .alt-col.vide{opacity:.55} .alt-col-rien{font-size:.82rem;color:var(--ink-mute);font-weight:600; padding:6px 2px} /* ── Dans une colonne : les années, la première au-dessus ── */ .alt-groupe{margin-bottom:0;min-width:0} .alt-groupe-t{display:flex;align-items:center;gap:9px;margin-bottom:10px; min-width:0;flex-wrap:nowrap} .alt-groupe-t span{font-size:.8rem;color:var(--ink-2);font-weight:800;flex:none; letter-spacing:.02em;text-transform:uppercase} /* L'année, en second : le nom de la classe est ce qu'on cherche, l'année ce qu'on vérifie. Deux poids, deux tailles, sur la même ligne. */ .alt-groupe-t span em{font-style:normal;font-weight:700;font-size:.72rem; color:var(--ink-mute);text-transform:none;letter-spacing:0;margin-left:7px} .alt-groupe-t i{font-style:normal;font-size:.7rem;font-weight:800;flex:none; background:var(--bg-2);color:var(--ink-soft);padding:2px 9px;border-radius:99px} /* ── Les cartes d'une année ── Un flex, et pas une grille. `auto-fill`, ce que faisait cette page, découpait toujours autant de pistes de 272 px que la largeur le permettait : une carte seule restait à 285 px, collée à gauche, devant trois pistes vides. C'est très précisément le défaut à corriger. Une piste `1fr` aurait fait l'inverse — étirer la carte seule en bandeau sur toute la colonne. Ici la carte demande 300 px, en accepte 384 au plus, et il n'y a rien d'autre à écrire : dans une colonne de 384 px il n'en tient qu'une par ligne, donc deux alternants du même BTS et de la même année s'empilent proprement sous leur année. */ .alt-cartes{display:flex;flex-wrap:wrap;gap:14px var(--alt-ecart,16px)} /* ── La carte ── 384 × 150 px au lieu de 285 × 110 : +75 % de surface. Mais on ne l'agrandit pas à vide — l'avatar, la typographie et surtout la structure grandissent avec elle. */ .alt-carte{position:relative;display:flex;flex-direction:column;gap:15px; /* 300 px de base, jamais plus de 384 : c'est cette borne qui empêche la carte seule de s'étirer sur toute la page. min-width:0 la laisse descendre plus bas quand la place manque vraiment (téléphone). */ flex:1 1 var(--alt-carte-min,300px);max-width:var(--alt-carte-l,384px);min-width:0; /* Une hauteur plancher commune : deux cartes côte à côte dont les pieds ne tombent pas en face se voient d'autant plus qu'elles sont grandes. */ min-height:150px; /* L'APLAT PLUTÔT QUE LE LISERÉ, comme sur le tableau de bord : blanc en entreprise, orange à l'école. Un trait de trois pixels sur le bord gauche ne se voyait pas dans une colonne de cartes. */ background:var(--fond,var(--surface));border:1px solid var(--bord,var(--border)); border-radius:var(--r-lg);padding:18px 20px 19px;box-shadow:var(--sh-sm); cursor:pointer;text-align:left;font:inherit;color:var(--texte,var(--ink)); transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .alt-carte:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} /* L'avatar suit la carte : à 56 px il flottait dans 384 px de large. Surcharge locale du kit (.ava-lg vaut 56 px / 1.1rem ailleurs). */ .alt-carte .ava-lg{width:62px;height:62px;font-size:1.2rem} .alt-carte .ac-tete{display:flex;align-items:center;gap:15px;min-width:0} .alt-carte .ac-qui{flex:1;min-width:0} /* Le NOM tient sur une ligne : un prénom-nom qui passerait à deux serait le signe d'un cas si rare qu'il vaut mieux l'abréger que déformer la carte. Le POSTE, lui, va à la ligne. « Assistante manager d'unité commerciale » ne tient pas sur une, et l'abréger reviendrait à cacher le métier de l'alternante sur la page qui le présente — dans une colonne de quatre formations, il ne resterait que « Chargé de développe… ». Trois lignes au plus, en garde-fou. Cela ne dérègle aucun alignement, et c'est le pied de carte qui le garantit : collé en bas (margin-top:auto) d'une carte que le flex met à la hauteur de sa voisine, le filet tombe toujours en face du filet d'à côté, quel que soit le nombre de lignes au-dessus. */ .alt-carte .ac-qui b{display:block;font-size:1.06rem;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .alt-carte .ac-qui small{display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;overflow:hidden; font-size:.82rem;color:var(--texte-2);margin-top:4px;line-height:1.35} .alt-carte .ac-pastille{width:24px;height:24px;border-radius:50%;background:var(--warn); color:#fff;font-size:.74rem;font-weight:800;display:flex;align-items:center; justify-content:center;flex:none} /* Le filet sépare QUI de OÙ. C'est lui qui autorise l'agrandissement : élargie sans rien de plus, la carte n'aurait fait que s'entourer de blanc — c'est sa structure, pas son contenu, qui la remplit. Même construction que les tuiles du tableau de bord. margin-top:auto colle le pied en bas quand une voisine plus haute étire la carte : les cartes d'une même rangée sont mises à la même hauteur par le flex, mais pas leur texte. */ /* Le pied revient sur deux lignes quand la colonne se resserre : abrégé, il ne resterait que « En entreprise → m… » et la date de retour — la seule information qu'on vient chercher — aurait disparu. Deux lignes ne décalent pas le filet : il est collé au bas de la carte, et les cartes d'une rangée ont la même hauteur. */ .alt-carte .ac-bas{margin-top:auto;display:flex;align-items:center;gap:10px; flex-wrap:wrap;min-width:0;padding-top:13px; border-top:1px solid var(--filet,var(--border))} .alt-carte .ac-bas small{font-size:.8rem;color:var(--texte-2);font-weight:600; min-width:0} /* La pastille se repose sur le fond de sa carte : une pastille orange sur un aplat orange n'existe pas, et une pastille grise sur du blanc se confond avec le filet. */ .alt-carte .ac-bas .lieu{flex:none; border:1.5px solid var(--part-bord,transparent); background:var(--part-fond);color:var(--part-encre)} /* ── Le repli ── Trois colonnes ne tiennent pas sur un écran étroit : sous 1 060 px elles passent à deux, sous 760 px à une seule. L'ordre, lui, ne change jamais — MCO, puis NDRC, puis GPME — de sorte qu'on retrouve la même page, simplement pliée. Sur une seule colonne, les BTS sans alternant disparaissent : le cadre n'a plus rien à tenir en place, et trois blocs « Aucun alternant » à faire défiler sur un téléphone ne renseignent personne. */ @media(max-width:1060px){ .alt-grille{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ .alt-grille{grid-template-columns:minmax(0,1fr);gap:22px} .alt-col.vide{display:none} } /* Sous 480 px la carte occupe déjà toute la largeur : on lui rend en hauteur ce qu'on lui reprend en marges. */ @media(max-width:480px){ .alt-carte{padding:15px 16px 16px;gap:13px;min-height:0} .alt-carte .ava-lg{width:56px;height:56px;font-size:1.1rem} .alt-carte .ac-qui b{font-size:1rem} .alt-carte .ac-bas{padding-top:11px} } /* — La fiche : profil en haut — */ .fiche-tete{margin-bottom:16px} .ft-haut{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .ft-qui{flex:1;min-width:220px} /* Trois informations sur une ligne : il leur faut de l'écart pour se lire comme trois choses et non comme une phrase. */ .ft-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px;font-size:.82rem; color:var(--ink-soft);font-weight:600} .ft-meta span{display:inline-flex;align-items:center;gap:7px} .ft-meta svg{width:13px;height:13px} .ft-etat{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none} .ft-etat small{font-size:.76rem;color:var(--ink-soft);font-weight:600;text-align:right} /* « Actuellement » n'est pas une donnée : c'est le mot qui introduit la pastille. Petit et gris, comme sur les tuiles du tableau de bord. */ .ft-actuel{display:inline-flex;align-items:center;gap:8px} .ft-actuel small{font-size:.72rem;font-weight:500;color:var(--ink-mute)} /* ── L'EN-TÊTE DE FICHE SUR TÉLÉPHONE : LE NOM À CÔTÉ DE LA PHOTO ── `.ft-qui` réclame 220 px de large. Sous cette largeur il basculait ENTIER sous l'avatar : la photo se retrouvait seule sur sa ligne, avec toute la droite de la carte vide, et le nom commençait 90 px plus bas. On dispose donc les quatre blocs nous-mêmes plutôt que de laisser le repli décider. `display:contents` efface les deux boîtes intermédiaires (`.ft-qui`, `.ft-meta`) pour que leur contenu devienne directement plaçable : l'avatar tient la colonne de gauche sur deux rangées, le nom et la classe se posent à sa droite — c'est le couple qu'on cherche d'un coup d'œil — puis le poste, la promotion et le lieu reprennent toute la largeur en dessous, où ils ont la place de s'écrire en entier. */ @media(max-width:640px){ .ft-haut{display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:14px;row-gap:7px;align-items:center} .ft-qui,.ft-haut .ft-meta{display:contents} .ft-haut > .ava{grid-column:1;grid-row:1/span 2;align-self:center} .ft-haut .h2{grid-column:2;grid-row:1;min-width:0;font-size:1.3rem;line-height:1.2} /* La classe : à droite de la photo, sous le nom. */ .ft-haut .ft-meta > span:nth-child(1){grid-column:2;grid-row:2;min-width:0} /* Le reste : toute la largeur, une information par ligne. */ .ft-haut .ft-meta > span:nth-child(n+2){grid-column:1/-1} .ft-etat{grid-column:1/-1;align-items:flex-start;flex-basis:auto;margin-top:3px} .ft-etat small{text-align:left} } /* — L'EN-TÊTE D'UN BLOC DE RUBRIQUE — Le même dans les six rubriques : icône, titre, ce qu'on met à droite, sous-titre s'il y en a un — et un filet qui le sépare du contenu. Sans ce filet, le titre et la première ligne se touchent et se lisent d'un bloc : on lisait « Sa rémunération aujourd'hui 53 % du SMIC » comme une seule phrase. Le poser à un seul endroit aurait donné six rubriques qui ne se ressemblent pas — c'est donc une règle, pas un correctif. */ /* Le titre d'une rubrique et son filet : de l'air au-dessus du filet, et de l'air en dessous. Serrés, le titre et le contenu se lisaient d'un seul bloc. */ .bloc-t{padding-bottom:17px;margin-bottom:24px;border-bottom:1px solid var(--border)} .bloc-t h4{margin:0;font-size:.95rem;justify-content:flex-start;gap:9px} .bloc-t h4 svg{width:16px;height:16px;color:var(--ink-mute);flex:none} /* Le badge file à droite : c'est un compte, pas un mot du titre. */ .bloc-t h4 .badge{margin-left:auto} .bloc-t p{font-size:.79rem;color:var(--ink-mute);line-height:1.55;margin-top:5px} /* ════════════════════════════════════════════════════════════════ FRISE ALTERNANT — LA MÊME QUE SUR L'ESPACE INTERNE. Recopiée telle quelle, et c'est le but : le tuteur et le campus doivent regarder le même dessin. Une ligne de temps horizontale, un groupe par mois large comme son contenu, chaque carte posée à SA date, reliée à la ligne par un mini-trait coloré par son statut. La ligne se remplit d'orange au fil des jours : quand la couleur atteint le trait d'une étape, c'est qu'elle s'ouvre. Toute correction faite ici se recopie dans l'espace interne, et réciproquement — les deux frises doivent rester superposables. ════════════════════════════════════════════════════════════════ */ /* ---- La mini-carte ---- */ .fet-carte{position:relative;background:var(--surface); border:1.5px solid var(--border-2);border-radius:var(--r-md); padding:11px 12px 12px;display:flex;flex-direction:column;gap:5px; cursor:pointer;text-align:left; transition:transform .15s var(--ease),box-shadow .15s var(--ease), border-color .15s var(--ease)} .fet-carte:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .fet-titre{font-size:.83rem;line-height:1.32;padding-right:24px;color:var(--ink); font-weight:800} .fet-sousdate{font-size:.68rem;font-weight:600;color:var(--ink-soft)} .fet-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px} .fet-actions .btn{padding:4px 10px;font-size:.72rem;min-height:0} .fet-actions .btn svg{width:12px;height:12px} /* ---- La bille de statut, en haut à droite, avec son infobulle ---- C'est ELLE qui porte le statut, pas le fond de la carte : une frise dont chaque carte est peinte d'une couleur différente ne se lit plus au-delà de cinq étapes. La carte reste blanche, la bille parle. */ .fet-bille{position:absolute;top:8px;right:8px;width:22px;height:22px; border-radius:50%;display:flex;align-items:center;justify-content:center} .fet-bille svg{width:13px;height:13px} .fet-bille::after{content:attr(data-tip);position:absolute; bottom:calc(100% + 8px);right:-4px;background:var(--ink);color:var(--surface); font-size:.7rem;font-weight:600;padding:5px 9px;border-radius:8px; white-space:nowrap;opacity:0;pointer-events:none; transition:opacity .15s var(--ease);z-index:20;box-shadow:var(--sh-md)} .fet-bille:hover::after{opacity:1} .fb-verrou{background:var(--bg-2);color:var(--ink-soft)} .fb-action{background:var(--info-soft);color:var(--info)} .fb-debloque{background:var(--ok-soft);color:var(--ok-ink)} .fb-planif{background:var(--warn-soft);color:var(--warn)} .fb-fait{background:var(--ok);color:#fff} .fb-retard{background:var(--danger);color:#fff} /* ---- La ligne de temps : un groupe par mois, large comme son contenu ---- */ .ft{position:relative} .fg-defil{display:flex;overflow-x:auto;padding:10px 2px 14px;align-items:flex-start} .fg-mois{flex:none;position:relative} .fg-nom{font-size:.7rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase; color:var(--ink-soft);text-align:left;white-space:nowrap;margin:0 0 11px 2px} .fg-nom b{color:var(--ink-2);font-weight:800} /* L'espace sous le trait : c'est lui qui fait respirer la frise. Les cartes collées au rail donnaient un pavé compact. */ .fg-points{position:relative;height:24px;margin-bottom:26px} .fg-points::before{content:'';position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:5px;background:var(--border-2)} .fg-avance{position:absolute;left:0;top:50%;transform:translateY(-50%); height:5px;background:var(--avance)} .fg-borne{position:absolute;left:2px;top:50%;transform:translateY(-50%); width:13px;height:13px;border-radius:50%;background:var(--surface); border:3px solid var(--ink-mute);z-index:1;box-shadow:0 0 0 3px var(--surface)} .fg-tick{position:absolute;top:10px;width:2.5px;height:26px;border-radius:99px; background:var(--ink-mute)} .fg-tick.fp-verrou{background:var(--ink-mute);opacity:.5} .fg-tick.fp-planif-verrou{background:var(--warn);opacity:.55} .fg-tick.fp-action{background:var(--avance)} .fg-tick.fp-planif{background:var(--warn)} .fg-tick.fp-fait{background:var(--ok)} .fg-tick.fp-retard{background:var(--danger)} /* Le trait d'un repère est plus court et plus pâle : il situe la carte sur la ligne sans prétendre à un statut. */ .fg-tick.fp-repere{background:var(--ink-mute);opacity:.32;height:16px;top:15px} .fg-cartes{display:flex;align-items:stretch} /* ⚠️ Cette largeur DOIT égaler `LARGE` dans js/frise-alternant.js : le moteur y calcule les abscisses des traits et les marges entre cartes. Les deux qui divergent, et les traits ne tombent plus au milieu. */ .fg-cale{flex:none;width:196px} /* Les cartes de la ligne de temps. Elles s'étirent sur la hauteur disponible : le titre en haut, la date sous lui, et les boutons repoussés EN BAS — sur une colonne de cartes de hauteurs égales, des boutons alignés se lisent d'un seul balayage de l'œil. */ .ft .fet-carte{padding:12px 13px 13px;gap:5px;box-shadow:var(--sh-sm)} /* LE TITRE D'UNE ÉTAPE VA JUSQU'AU BOUT — plus de coupe à deux lignes. Les cartes de la frise ont une largeur fixe : « Enquête de satisfaction — semestre 1 » y demande trois lignes, et se terminait en points de suspension quelle que soit la taille de l'écran. Or c'est le titre qui dit ce qu'on attend de vous ; à moitié lu, il ne sert plus à rien. Une carte plus haute ne coûte rien : la frise défile déjà de côté, et `align-items:stretch` les met toutes à la même hauteur — elles restent alignées, simplement un cran plus hautes. */ .ft .fet-titre{font-size:.82rem;line-height:1.32;padding-right:24px} .ft .fet-sousdate{font-size:.72rem;line-height:1.4} .ft .fet-actions{margin-top:3px;padding-top:6px} .ft .fet-actions .btn{padding:5px 11px;font-size:.72rem;min-height:0} .ft .fet-actions .btn svg{width:12px;height:12px} .ft .fet-bille{width:22px;height:22px;top:9px;right:9px} .ft .fet-bille svg{width:13px;height:13px} /* ── UNE COULEUR PAR TYPE D'ÉTAPE, sur le liséré gauche ── visite = doré (celles de l'entreprise) · mentorat = violet · documents = bleu. Le liséré garde sa couleur QUEL QUE SOIT le statut : c'est la bille qui dit où en est l'étape, jamais le fond. */ .ft .fet-carte{border-color:var(--border-2);border-left-width:5px; border-left-color:var(--ink-mute)} .ft .fet-carte.t-visite{border-left-color:var(--brand)} .ft .t-visite .fet-titre{color:var(--brand-800)} .ft .fet-carte.t-documents{border-left-color:var(--info)} .ft .t-documents .fet-titre{color:var(--info-ink)} /* La vie de la classe — mêmes teintes que sur la frise Classe du campus : olive pour les BTS blancs, bronze pour les fiches et leur envoi. */ .ft .fet-carte.t-bts{border-left-color:var(--olive)} .ft .t-bts .fet-titre{color:var(--olive-ink)} .ft .fet-carte.t-fiches,.ft .fet-carte.t-envoi{border-left-color:var(--bronze)} .ft .t-fiches .fet-titre,.ft .t-envoi .fet-titre{color:var(--bronze-ink)} /* Les enquêtes de satisfaction : le rose, la seule famille où le tuteur écrit quelque chose lui-même. */ .ft .fet-carte.t-enquete{border-left-color:var(--rose)} .ft .t-enquete .fet-titre{color:var(--rose-ink)} /* Les repères (fin d'année, épreuves, fin du parcours) : pas de couleur — ils n'appellent rien, ils situent. */ .ft .fet-carte.t-info{border-left-color:var(--ink-mute)} .ft .t-info .fet-titre{color:var(--ink-soft)} /* ══════════ UN REPÈRE N'EST PAS UNE ÉTAPE ══════════ BTS blanc, fiches, épreuves : le tuteur n'a rien à y faire, elles lui donnent une vision de l'année de son alternant. Quand les trente cartes se ressemblaient, il fallait toutes les ouvrir pour découvrir que douze ne demandaient rien. Un repère est donc une carte d'une AUTRE NATURE : trait discontinu, fond du plateau, pas de bille de statut, pas de bouton — et une étiquette « Repère » qui le dit en toutes lettres. Elle s'ouvre quand même : chacune explique ce qu'elle change pour l'entreprise. */ .ft .fet-carte.est-repere{background:transparent;box-shadow:none; border-style:dashed;border-left-style:dashed;border-left-width:3px} .ft .fet-carte.est-repere:hover{transform:none;box-shadow:none; background:var(--bg-2)} .ft .fet-carte.est-repere .fet-titre{font-weight:700;padding-right:0;opacity:.9} .ft .fet-carte.est-repere .fet-sousdate{color:var(--ink-mute)} .fet-repere{display:inline-flex;align-items:center;gap:4px;font-size:.62rem; font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-mute)} .fet-repere svg{width:10px;height:10px} /* Une enquête close, ou une visite dont la fenêtre n'est pas ouverte : toujours des étapes, mais qui n'appellent pas l'œil. */ .ft .fet-carte.est-close{background:var(--bg-2);box-shadow:none} .ft .fet-carte.est-close .fet-titre, .ft .fet-carte.est-apreslavisite .fet-titre{opacity:.82} /* LE HALO EST RARE, SINON IL NE VEUT PLUS RIEN DIRE. Deux cartes seulement le portent : une date de visite à répondre, et une enquête à remplir. Ce sont les deux seules choses que la frise attend du tuteur. Tout mettre en avant revient à ne rien mettre en avant. */ .ft .fet-carte.est-arepondre{border-color:var(--info); box-shadow:0 0 0 3px var(--info-soft)} .ft .fet-carte.est-aremplir{border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-soft)} /* ── La légende de la frise ── Elle n'est pas décorative. Sans elle, on devine qu'une carte grise est verrouillée, mais pas pourquoi les mentorats n'ont pas de couleur — et le tuteur conclut à une panne. Cinq lignes, une fois, sous la frise. */ .fg-legende{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px; padding-top:17px;border-top:1px solid var(--border)} .fg-legende span{display:flex;align-items:center;gap:7px;font-size:.74rem; font-weight:600;color:var(--ink-soft)} .fl-pt{width:3px;height:14px;border-radius:99px;flex:none;background:var(--ink-mute)} .fl-pt.fp-verrou{background:var(--ink-mute);opacity:.5} .fl-pt.fp-action{background:var(--avance)} .fl-pt.fp-planif{background:var(--warn)} .fl-pt.fp-fait{background:var(--ok)} .fl-pt.fp-retard{background:var(--danger)} .fl-pt.fp-repere{background:var(--ink-mute);opacity:.32} /* Les repères sont d'une autre nature : un filet les sépare du reste. */ .fg-legende span.fl-sep{margin-left:auto;padding-left:20px; border-left:1px solid var(--border)} @media(max-width:900px){ .fg-legende span.fl-sep{margin-left:0;padding-left:0;border-left:none} } /* ── LE QUESTIONNAIRE D'ENQUÊTE, dans le panneau ── Sept questions dans un tiroir : la seule chose que le tuteur remplit lui-même dans la frise. Les champs prennent toute la largeur — un formulaire en deux colonnes dans un panneau de 720 px se lit en zigzag. */ .enq-form{display:flex;flex-direction:column;gap:16px;margin-top:4px} .enq-q{display:flex;flex-direction:column;gap:8px} .enq-q>label{font-size:.85rem;font-weight:700;color:var(--ink-2);line-height:1.4} .enq-q .select,.enq-q textarea{width:100%} .enq-q textarea{resize:vertical;min-height:74px;font:inherit;line-height:1.5} /* Les étoiles : la seule échelle d'appréciation de l'application — elle sert déjà aux enquêtes de l'espace interne. On la reprend plutôt que d'en inventer une deuxième. */ .enq-etoiles{display:inline-flex;gap:4px;align-items:center} .enq-et{display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;padding:0;border:none;background:none;cursor:pointer; color:var(--border-2);transition:color .12s var(--ease),transform .12s var(--ease)} .enq-et svg{width:24px;height:24px} .enq-et:hover{transform:scale(1.12)} .enq-et.on{color:var(--brand)} .enq-et.on svg{fill:currentColor} /* En relecture, les étoiles ne se cliquent plus. */ .fd-bloc .enq-et{width:auto;height:auto;cursor:default} .fd-bloc .enq-et svg{width:16px;height:16px} .fd-bloc .enq-et:hover{transform:none} /* ── LA SIGNATURE, DESSINÉE (28 sept 2026) ── Un pavé au format 3 × 1 — le repère 600 × 200 de l'espace interne. Le fond reste le clair de la charte dans les deux thèmes : c'est une feuille, et l'encre marron doit s'y lire. */ .enq-pave{position:relative;width:100%;aspect-ratio:3/1;border:1.5px solid var(--border-2); border-radius:14px;background:var(--charte-clair);overflow:hidden;touch-action:none} .enq-pave canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair} .enq-pave-ligne{position:absolute;left:8%;right:8%;bottom:26%; border-bottom:1.5px dashed var(--border-2);pointer-events:none} .enq-pave-aide{position:absolute;left:0;right:0;bottom:10%;text-align:center; color:var(--ink-mute);font-size:.8rem;pointer-events:none} .enq-effacer{align-self:flex-start} /* ── LA FENÊTRE OBLIGATOIRE ── Au-dessus de toute autre fenêtre et du tiroir (600 / 595), sous les messages (1 000) : une note « signez d'abord » doit rester lisible. Pas de croix, pas de pied « Plus tard » : on ne sort qu'en signant. */ #enqueteRoot .overlay{z-index:800} #enqueteRoot .modal{width:min(600px,100%)} /* ── La bande de statut, en tête du panneau ── */ .fep-bande{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:14px 16px;border-radius:var(--r-md);background:var(--bg-2); border:1.5px solid var(--border-2);margin-bottom:16px} .fep-bande .fb-ic{width:42px;height:42px;border-radius:13px;flex:none; display:flex;align-items:center;justify-content:center; background:var(--surface);color:var(--ink-soft)} .fep-bande .fb-ic svg{width:20px;height:20px} .fep-bande .fb-txt{flex:1;min-width:180px} .fep-bande .fb-txt b{display:block;font-size:1.05rem;line-height:1.25} .fep-bande .fb-txt small{font-size:.78rem;color:var(--ink-soft);font-weight:600} .fep-bande.est-retard{background:var(--danger-soft);border-color:var(--danger)} .fep-bande.est-retard .fb-txt b{color:var(--danger-ink)} .fep-bande.est-retard .fb-ic{background:var(--surface);color:var(--danger)} .fep-bande.est-planifiee{background:var(--warn-soft);border-color:var(--warn)} .fep-bande.est-planifiee .fb-txt b{color:var(--warn-ink)} .fep-bande.est-planifiee .fb-ic{background:var(--surface);color:var(--warn)} .fep-bande.est-planifiee-verrouillee{background:var(--bg-2)} .fep-bande.est-effectuee{background:var(--ok-soft);border-color:var(--ok)} .fep-bande.est-effectuee .fb-ic{background:var(--surface);color:var(--ok)} /* — Le panneau d'étape : la moitié de l'écran, deux onglets — */ .drawer.drawer-demi{width:min(720px,calc(50vw))} @media(max-width:900px){ .drawer.drawer-demi{width:calc(100vw - 20px)} } .fd-tabs{margin-bottom:16px} .fd-tabs .tab svg{width:14px;height:14px;vertical-align:-2px;margin-right:3px} /* L'état plein-panneau : étape faite, ou verrouillée. */ .fd-etat{display:flex;flex-direction:column;align-items:center;text-align:center; gap:8px;padding:34px 18px} .fd-etat .fe-ic{width:58px;height:58px;border-radius:19px;display:flex;align-items:center; justify-content:center;margin-bottom:4px} .fd-etat .fe-ic svg{width:26px;height:26px} .fd-etat .fe-ic.ok{background:var(--ok-soft);color:var(--ok)} .fd-etat .fe-ic.verrou{background:var(--bg-2);color:var(--ink-mute)} .fd-etat b{font-size:1.02rem;font-weight:800} .fd-etat p{font-size:.86rem;color:var(--ink-soft);line-height:1.65;max-width:400px} .fd-etat p b{font-size:inherit} .fd-mission .btn-block{margin-top:6px} .fd-note{display:flex;align-items:flex-start;gap:9px;font-size:.8rem;color:var(--ink-soft); line-height:1.55;margin-top:14px;padding:11px 13px;border-radius:12px;background:var(--bg-2)} .fd-note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-mute)} /* ⚠️ Une note est un conteneur FLEX : chaque bout de texte séparé par un devient un élément à part, et le `gap` de 9 px s'insère au milieu de la phrase. « avant le 13 septembre . » — le point détaché d'un espace. Le texte est donc replié dans un seul enfant, et le gap ne sépare plus que l'icône de la phrase. */ .fd-note>span{flex:1;min-width:0} .fd-note>b{font-weight:800} .fd-bloc{padding:12px 0;border-bottom:1px solid var(--border)} .fd-bloc small{display:block;font-size:.7rem;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px} .fd-bloc p{font-size:.87rem;line-height:1.6;color:var(--ink-2)} /* Dans l'application, ou hors d'elle : deux teintes, une seule forme. */ .fd-app{display:flex;align-items:flex-start;gap:11px;margin:12px 0 2px;padding:12px 14px; border-radius:13px} .fd-app>svg{width:17px;height:17px;flex:none;margin-top:2px} .fd-app span{flex:1;min-width:0} .fd-app b{display:block;font-size:.85rem} .fd-app small{display:block;font-size:.78rem;margin-top:3px;line-height:1.5} .fd-app.oui{background:var(--ok-soft);color:var(--ok-ink)} .fd-app.oui>svg{color:var(--ok)} .fd-app.non{background:var(--warn-soft);color:var(--warn-ink)} .fd-app.non>svg{color:var(--warn)} /* Une pastille de compte sur un onglet — les visites à répondre. */ .tab-n{display:inline-flex;align-items:center;justify-content:center;margin-left:6px; min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:var(--warn); color:#fff;font-size:.64rem;font-weight:800;vertical-align:1px} .tabs .tab svg{width:14px;height:14px;vertical-align:-2px;margin-right:2px} /* — Planning : le calendrier de l'agenda, sur deux semaines — Aucun style nouveau pour la grille : ce sont les classes de la page Agenda (.ag-grille, .ag-jour, .jb…), filtrées sur un seul alternant. Les deux écrans doivent rester le même écran — passer de l'un à l'autre ne demande pas de réapprendre à lire. Seules trois choses changent, et elles tiennent ici. */ .plan-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start} @media(max-width:1000px){ .plan-wrap{grid-template-columns:minmax(0,1fr)} } /* 1. La hauteur. Sur la page Agenda, la grille prend tout l'écran et ne défile pas. Ici la fiche défile, et une case n'a qu'à être assez haute pour porter une bande et un ou deux rendez-vous. */ .plan-cal .ag-grille{min-height:0;--hj:122px;overflow:visible; grid-template-rows:min-content repeat(2,minmax(122px,auto))} /* 2. Rien ne s'ouvre. Le planning se LIT — c'est la page Agenda qui se pilote. Ni curseur de main, ni effet de survol qui promettrait un clic ; le contour d'aujourd'hui, lui, reste en toutes circonstances. */ .plan-cal .ag-jour,.plan-cal .ag-ev{cursor:default} .plan-cal .ag-jour:hover{border-color:var(--border);box-shadow:none} .plan-cal .ag-jour.aujourdhui, .plan-cal .ag-jour.aujourdhui:hover{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)} .plan-cal .ag-ev:hover{filter:none} /* 3. Le rythme, en deux mots et deux lignes. « 2 jours / 3 jours » dit la forme ; les deux lignes disent quels jours, en plus petit, avec la pastille de couleur du calendrier posé à côté. La phrase qui redisait les mêmes jours en toutes lettres prenait trois lignes pour n'ajouter aucun fait. */ .rythme{padding:14px 16px;border-radius:14px;background:var(--bg-2);margin-bottom:8px} .rythme>b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.015em; margin-bottom:9px} .ry-l{display:flex;align-items:baseline;gap:8px;font-size:.79rem;color:var(--ink-soft); line-height:1.5;padding:2px 0} .ry-l>span{min-width:0} .ry-l b{display:inline;font-weight:700;color:var(--ink-2)} .ry-p{width:9px;height:9px;border-radius:3px;flex:none} .ry-ecole{background:var(--charte-orange)} .ry-entreprise{background:var(--charte-marron)} /* ═══════════════════════════════════════════════════════════════ VISITES — répondre, préparer, relire Trois temps, trois blocs, dans l'ordre où ils arrivent : le campus propose une date, la date se cale et se prépare, la visite laisse un compte rendu. Chaque bloc a sa forme — une notification, un panneau de préparation, une liseuse de documents. ═══════════════════════════════════════════════════════════════ */ /* La rangée du haut : répondre à gauche, préparer à droite. Les deux gestes de la semaine tiennent côte à côte, et les récaps restent visibles sans défiler. Empilés, le bloc de préparation collait à la proposition et les repoussait tous les deux hors de l'écran. */ /* Pas d'align-items:start ici : le stretch par défaut étire les deux cartes à la même hauteur — la proposition et la vignette commencent et finissent au même trait. */ .vis-tete{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px} @media(max-width:980px){ .vis-tete{grid-template-columns:minmax(0,1fr)} } /* — La vignette de préparation : un titre, une phrase, un bouton — Elle ne saisit rien : elle rappelle, et elle ouvre l'écran où l'on coche les sujets. L'icône est DANS la ligne du titre, comme sur le bloc d'à côté : les deux commencent au même trait, et la vignette fait la hauteur de la proposition — plus de vide sous elle. */ .vi-prep{display:flex;flex-direction:column;align-items:flex-start;gap:8px; padding:16px 17px;border-color:var(--brand-100);background:var(--brand-50)} .vi-prep h4{display:flex;align-items:center;gap:9px;font-size:.95rem;justify-content:flex-start} .vi-prep .pr-ic{width:28px;height:28px;border-radius:9px;flex:none;display:flex; align-items:center;justify-content:center;background:var(--surface);color:var(--brand-700)} .vi-prep .pr-ic svg{width:14px;height:14px} .vi-prep>p{font-size:.8rem;color:var(--ink-soft);line-height:1.55} .vi-prep>p b{color:var(--ink-2);font-weight:800} .vi-prep .btn{width:100%;margin-top:auto} .vi-prep .pr-quand{font-size:.72rem;color:var(--ink-mute);line-height:1.4} /* Préparée : le vert de ce qui est fait, et un bouton discret — il n'y a plus rien à faire, seulement à corriger si l'on veut. */ .vi-prep.faite{border-color:var(--border);background:var(--surface)} .vi-prep.faite .pr-ic{background:var(--ok-soft);color:var(--ok)} /* Les blocs portent des états vides qui ne disent qu'une chose — « rien à valider », « aucun récap ». À pleine hauteur, celui du haut occupait un tiers de l'écran AVANT le bloc qui, lui, a quelque chose à dire. Il se resserre, comme sur le tableau de bord — et dans la rangée du haut il se couche en LIGNE : l'illustration, le titre et la phrase côte à côte font la hauteur d'une notification, et les récaps remontent d'autant. */ .vis-bloc .empty{padding:24px 12px} .vis-bloc .empty .e-ic{width:46px;height:46px;border-radius:15px;margin-bottom:6px} .vis-bloc .empty .e-ic svg{width:21px;height:21px} .vis-bloc .empty b{font-size:.95rem} .vis-bloc .empty p{font-size:.82rem} .vis-tete .empty{flex-direction:row;justify-content:flex-start;text-align:left; gap:13px;padding:12px 4px} .vis-tete .empty .e-ic{width:38px;height:38px;border-radius:12px;margin-bottom:0;flex:none} .vis-tete .empty .e-ic svg{width:17px;height:17px} .vis-tete .empty p{max-width:none} /* La pastille de date et l'intitulé, partagés par la notification et le panneau de préparation. */ .vi-d{width:50px;flex:none;text-align:center;border-radius:12px;padding:7px 4px; background:var(--bg-2);color:var(--ink-2)} .vi-d b{display:block;font-size:1.15rem;font-weight:800;line-height:1} .vi-d small{display:block;font-size:.66rem;font-weight:700;margin-top:2px} .vi-t{flex:1;min-width:180px} .vi-t b{display:block;font-size:.95rem} .vi-t small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:3px;line-height:1.45} .vi-t small svg{width:12px;height:12px;vertical-align:-2px} /* Le mot du campus, ou le vôtre : une phrase citée, jamais un bloc. */ .vi-note{font-size:.82rem;color:var(--ink-2);margin-top:12px;padding:10px 12px; border-radius:11px;background:var(--surface-2);line-height:1.55} /* — Les récaps : des documents qui se SÉLECTIONNENT — Un récap complet fait une page. Empilés dans la rubrique, trois d'entre eux enterraient tout le reste. Ils se rangent donc comme les documents du campus — une ligne, une icône, un état à droite. On réemploie .doc-ligne telle quelle : même objet, même lecture, rien à réapprendre d'une page à l'autre. La ligne choisie s'allume et déplie son récap sous la liste ; un second clic la referme. Le chevron pivote — sans lui, une ligne au fond coloré ne dit pas ce qui vient de se passer. Deux teintes sur la vignette : vert quand le récap est là, ambre quand le campus ne l'a pas encore déposé. La ligne reste, même sans récap — la retirer laisserait croire que la visite n'a pas eu lieu. */ .recaps{display:flex;flex-direction:column;gap:4px} .doc-ligne .d-ic.d-ok{background:var(--ok-soft);color:var(--ok)} .doc-ligne .d-ic.d-attente{background:var(--warn-soft);color:var(--warn)} .doc-ligne>.badge{flex:none} .doc-ligne .d-go svg{transition:transform .2s var(--ease)} .recaps .doc-ligne.cliquable.on{background:var(--brand-50)} .recaps .doc-ligne.cliquable.on .d-go{color:var(--brand-700)} .recaps .doc-ligne.cliquable.on .d-go svg{transform:rotate(180deg)} /* Le récap déplié, sous la liste. */ .cr-vue{margin-top:14px;padding:18px 20px;border-radius:16px;background:var(--surface-2); border:1px solid var(--border)} .cr-vue[hidden]{display:none} /* L'enquête relue dans la rubrique Documents (29 sept 2026) : une ligne par question, la note en étoiles orange de la charte, puis la signature. */ .enq-relue{display:flex;flex-direction:column;gap:10px} .enq-relue .er-titre{font-size:.98rem;font-weight:800;color:var(--ink)} .enq-relue .er-l{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px; padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border)} .enq-relue .er-q{flex:1 1 260px;font-size:.86rem;color:var(--ink-2)} .enq-relue .er-note{flex:none;font-size:1.05rem;letter-spacing:2px;color:#F69D00} .enq-relue .er-note i{font-style:normal;color:#FBDEAA} .enq-relue .er-com{flex:1 1 100%;margin:2px 0 0;font-size:.84rem;color:var(--ink);white-space:pre-wrap} .enq-relue .er-sign{display:flex;flex-direction:column;gap:4px;align-items:flex-start;margin-top:4px} .enq-relue .er-sign small{font-size:.76rem;color:var(--ink-soft)} .enq-relue .er-sign svg{width:240px;max-width:100%;height:80px;color:#2E2017; background:var(--surface);border:1px solid var(--border);border-radius:10px} /* Le récap ouvert : l'en-tête (quand, où, qui), puis le texte. */ .cr-tete{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border)} .cr-tete small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:3px; line-height:1.45} .cr-tete small:first-child{margin-top:0} .cr-tete small svg{width:12px;height:12px;vertical-align:-2px;margin-right:3px} /* Le résumé est le seul paragraphe qui se lit toujours : il porte donc un cran de plus que le corps du compte rendu. */ .cr-resume{font-size:.89rem;line-height:1.7;color:var(--ink-2)} .cr-sec{margin-top:16px} .cr-sec>b{display:block;font-size:.82rem;font-weight:800;margin-bottom:5px} .cr-sec p{font-size:.86rem;line-height:1.7;color:var(--ink-2)} /* ══════════ LE QUESTIONNAIRE COMPLET D'UNE VISITE ══════════ Le tuteur relit ce qui a été rempli, question par question, dans les sections d'origine — il doit pouvoir suivre avec son référent, ligne à ligne. D'où la forme d'un document, et non d'une fiche de résumé : le libellé en petit, la réponse en dessous, un filet entre chaque. */ .cr-sec .cr-qr{padding:9px 0;border-bottom:1px solid var(--border)} .cr-sec .cr-qr:last-child{border-bottom:none;padding-bottom:0} .cr-sec .cr-qr small{display:block;font-size:.74rem;font-weight:700;line-height:1.45; color:var(--ink-soft);margin-bottom:3px} .cr-sec .cr-qr p{font-size:.86rem;line-height:1.65;color:var(--ink); white-space:pre-wrap;overflow-wrap:anywhere} /* Une question restée sans réponse se voit, en creux : c'est une information, pas un blanc à cacher. */ .cr-sec .cr-qr.est-vide small{color:var(--ink-mute);font-weight:600} .cr-sec .cr-qr.est-vide p{color:var(--ink-mute)} /* La bande d'un groupe de sections (les blocs de compétences du référentiel, par exemple). */ .cr-bande{margin-top:22px;font-size:.66rem;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--brand-800); padding-bottom:5px;border-bottom:2px solid var(--brand-100)} /* Ce qui n'est pas transmis, dit franchement. Une section qui disparaît sans un mot passe pour un oubli — et la question revient à la visite suivante. */ .cr-retenu{margin-top:22px;padding:13px 15px;border-radius:var(--r-md); background:var(--bg-2);border:1px dashed var(--border-2)} .cr-retenu>b{display:flex;align-items:center;gap:7px;font-size:.78rem; color:var(--ink-2);margin-bottom:6px} .cr-retenu>b svg{width:14px;height:14px;color:var(--ink-mute)} .cr-retenu p{font-size:.79rem;line-height:1.6;color:var(--ink-soft);margin-top:5px} .vi-liste{margin-top:11px} .vi-liste small{display:block;font-size:.7rem;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-mute);margin-bottom:5px} .vl{display:flex;align-items:flex-start;gap:7px;font-size:.82rem;line-height:1.5; padding:3px 0;color:var(--ink-2)} .vl svg{width:13px;height:13px;flex:none;margin-top:3px} .vl-ok svg{color:var(--ok)} .vl-warn svg{color:var(--warn)} /* Ce qui va bien à gauche, ce qui inquiète à droite : côte à côte, on voit du premier coup d'œil de quel côté penche la visite. */ .cr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px; padding-top:16px;border-top:1px solid var(--border)} .cr-cols:empty{display:none} .cr-cols .vi-liste{margin-top:0} @media(max-width:700px){ .cr-cols{grid-template-columns:minmax(0,1fr);gap:10px} } /* Le seul bloc qui engage quelqu'un : chaque ligne porte donc un nom en face d'elle. Sans ce nom, une décision de visite n'est qu'un vœu. */ .cr-suites{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)} .cr-suites>small{display:block;font-size:.7rem;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-mute);margin-bottom:9px} .cr-suite{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px; background:var(--surface);border:1px solid var(--border);margin-bottom:7px} .cr-suite:last-child{margin-bottom:0} .cr-suite b{flex:none;width:98px;font-size:.78rem;font-weight:800;color:var(--brand-700)} .cr-suite span{flex:1;min-width:0;font-size:.85rem;line-height:1.6;color:var(--ink-2)} @media(max-width:560px){ .cr-suite{flex-direction:column;gap:4px} .cr-suite b{width:auto} } /* Les sujets à aborder : des cases assez grandes pour qu'on voie d'un coup lesquelles sont cochées. */ .sujets{display:flex;flex-direction:column;gap:7px} .sujet{position:relative;display:flex;align-items:center;gap:11px;padding:10px 13px; border:1.5px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer; font-size:.86rem;transition:all .16s var(--ease)} .sujet input{position:absolute;opacity:0;pointer-events:none} .sujet .su-c{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-2); display:flex;align-items:center;justify-content:center;color:transparent;flex:none; transition:all .16s var(--ease)} .sujet .su-c svg{width:12px;height:12px;stroke-width:3} .sujet:hover{border-color:var(--border-2)} .sujet.on{border-color:var(--brand);background:var(--brand-50)} .sujet.on .su-c{background:var(--brand);border-color:var(--brand);color:#fff} /* — Contrat et Rémunération : deux cartes, un seul écran — Les deux rubriques se lisent d'un regard, sans défiler. Tout est donc un cran plus serré que le kit — lignes, titres, marges — et les deux cartes s'étirent à la même hauteur : la grille ne porte pas d'align-items:start, le stretch par défaut fait l'alignement. */ .fiche-cols .card{padding:15px 19px 16px;display:flex;flex-direction:column} .fiche-cols .card>*{flex:none} /* margin-top:auto sur un enfant (le bouton « Voir le contrat ») le cale au bas de la carte : les deux cartes finissent au même trait. */ .fiche-cols .bloc-t{padding-bottom:10px;margin-bottom:8px} .fiche-cols .set-row{padding:8px 0} .fiche-cols .set-row .sr-b b{font-size:.85rem} .fiche-cols .set-row .sr-b small{font-size:.73rem} /* L'anneau et sa légende, côte à côte : empilés, ils prenaient à eux seuls la moitié de la carte. */ .jauge-c{display:flex;align-items:center;justify-content:center;gap:16px; padding:2px 0 6px;border-bottom:1px solid var(--border)} .jauge-c p{max-width:150px;line-height:1.45} /* — Rémunération — Deux moitiés de même largeur, chacune centrée, séparées d'un filet : le montant qu'il touche, puis le pourcentage qui l'explique. La version en drapeau collait le pourcentage au bord gauche et le montant flottait à côté — rien ne se répondait. La ligne de base SMIC sort du cadre : c'est une note, pas un chiffre à encadrer. */ .remu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 0;border-radius:16px; background:var(--brand-50);border:1px solid var(--brand-100)} .re-brut,.re-part{text-align:center;padding:0 14px} .re-part{border-left:1px solid var(--brand-100)} .re-brut b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.025em;line-height:1.1; font-variant-numeric:tabular-nums} .re-brut span{display:block;font-size:.76rem;font-weight:700;color:var(--ink-soft);margin-top:5px} .re-part b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.025em;line-height:1.1; color:var(--brand-800)} .re-part span{display:block;font-size:.76rem;font-weight:700;color:var(--brand-700);margin-top:5px} .remu-base{font-size:.74rem;color:var(--ink-mute);text-align:center;margin:8px 0 14px} @media(max-width:560px){ .remu{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 0} .re-part{border-left:none;border-top:1px solid var(--brand-100);padding-top:14px} } /* — Les paliers : à partir de quel mois le salaire passe à combien — Un rail vertical, un point par changement, du premier au dernier mois du contrat. Ce qui est passé s'efface, ce qui vient reste plein : on ne vient pas ici relire l'historique, on vient voir la prochaine hausse — celle que personne n'annonce et qu'aucun avenant ne rappelle. — */ .remu-evo{display:flex;flex-direction:column} .re-et{position:relative;display:flex;gap:13px;padding:8px 0} /* Le rail relie un point au suivant, et s'arrête au dernier. */ .re-et::before{content:"";position:absolute;left:15px;top:38px;bottom:-2px;width:2px; background:var(--border);border-radius:2px} .re-et:last-child::before{display:none} .re-pt{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center; justify-content:center;background:var(--bg-2);color:var(--ink-mute); box-shadow:0 0 0 1px var(--border);position:relative;z-index:1} .re-pt svg{width:15px;height:15px} .re-c{flex:1;min-width:0;padding-top:1px} .re-l{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .re-l>b{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .re-l>span{font-size:.76rem;font-weight:700;color:var(--ink-soft)} .re-plus{font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:99px; background:var(--ok-soft);color:var(--ok-ink)} /* Le MOIS, en gras : c'est ce qu'on retient d'une augmentation. Le quantième exact est écrit dessous, avec le motif. */ .re-quand{display:block;font-size:.84rem;font-weight:700;color:var(--ink-2);margin-top:3px} .re-c>small{display:block;font-size:.74rem;color:var(--ink-mute);margin-top:2px;line-height:1.45} .re-et.passe{opacity:.6} .re-et.actuel .re-pt{background:var(--brand);color:#fff;box-shadow:0 0 0 1px var(--brand)} .re-et.actuel .re-l>b{color:var(--brand-800)} .re-et.avenir .re-pt{background:var(--ok-soft);color:var(--ok);box-shadow:0 0 0 1px var(--ok)} /* — Un rappel : ce qui mérite d'être dit, sans crier — */ .rappel{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px; background:var(--warn-soft);border:1px solid transparent;margin-bottom:0} .rappel>svg{width:20px;height:20px;flex:none;color:var(--warn)} .rappel span{flex:1;min-width:0} .rappel b{display:block;font-size:.87rem} .rappel small{display:block;font-size:.79rem;color:var(--ink-soft);margin-top:2px;line-height:1.5} .rappel-fort{background:var(--danger-soft);margin:0 0 18px} .rappel-fort>svg{color:var(--danger)} .rappel .btn{flex:none} @media(max-width:640px){ .rappel{flex-wrap:wrap} .rappel .btn{width:100%} } /* ═══════════════════════════════════════════════════════════════ DEMANDE CAMPUS ═══════════════════════════════════════════════════════════════ */ .gestes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:12px} @media(max-width:760px){ .gestes{grid-template-columns:minmax(0,1fr)} } .geste{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:20px 22px 18px; border:1.5px solid var(--border);border-radius:var(--r-xl);background:var(--surface); cursor:pointer;text-align:left;font:inherit;color:inherit;box-shadow:var(--sh-sm); transition:all .18s var(--ease)} .geste:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .geste .ge-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center; justify-content:center;margin-bottom:5px} .geste .ge-ic svg{width:20px;height:20px} .geste b{font-size:1.02rem;font-weight:800} .geste .ge-quoi{font-size:.84rem;color:var(--ink-soft);line-height:1.55} .geste .ge-suite{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700; color:var(--ink-mute);margin-top:4px} .geste .ge-suite svg{width:12px;height:12px} .geste .ge-pied{font-size:.74rem;font-weight:700;color:var(--ink-mute);margin-top:8px; padding-top:10px;border-top:1px solid var(--border);width:100%} .g-mail .ge-ic{background:var(--brand-50);color:var(--brand-700)} .g-mail:hover{border-color:var(--brand)} .g-pb .ge-ic{background:var(--danger-soft);color:var(--danger)} .g-pb:hover{border-color:var(--danger)} .geste-note{display:flex;align-items:center;gap:7px;font-size:.79rem;color:var(--ink-mute); line-height:1.55;margin-bottom:18px} .geste-note svg{width:14px;height:14px;flex:none} .dm-filtres{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px} .dm-f{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px; border:1.5px solid var(--border-2);background:var(--surface);color:var(--ink-soft); font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .16s var(--ease)} .dm-f:hover{border-color:var(--ink-mute);color:var(--ink)} .dm-f.on{background:var(--ink);border-color:var(--ink);color:#fff} .dm-f-n{font-size:.72rem;font-weight:800;opacity:.7} .dm-f-a{min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:var(--danger); color:#fff;font-size:.64rem;font-weight:800;display:inline-flex;align-items:center; justify-content:center} /* Une ligne de demande, ou de situation. */ .req{display:flex;align-items:center;gap:13px;padding:12px 10px;border-radius:var(--r-md); cursor:pointer;transition:background .13s;border-bottom:1px solid var(--border)} .req:last-child{border-bottom:none} .req:hover{background:var(--surface-2)} .req .rq-ic{width:36px;height:36px;border-radius:11px;flex:none;display:flex;align-items:center; justify-content:center;background:var(--bg-2);color:var(--ink-soft)} .req .rq-ic svg{width:17px;height:17px} .req .rq-ic-pb{background:var(--danger-soft);color:var(--danger)} .req .rq-c{flex:1;min-width:0} .req .rq-c b{display:block;font-size:.89rem;line-height:1.35} .req .rq-p{display:block;font-size:.79rem;color:var(--ink-soft);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .req .rq-p i{font-style:normal;font-weight:700;color:var(--ink-2)} .req .rq-c small{display:block;font-size:.73rem;color:var(--ink-mute);margin-top:3px} .req .rq-r{display:flex;align-items:center;gap:9px;flex:none} .req .rq-n{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--brand); color:#fff;font-size:.68rem;font-weight:800;display:inline-flex;align-items:center; justify-content:center} .req .rq-go{color:var(--ink-mute);display:flex} .req .rq-go svg{width:17px;height:17px} .req.en-retard .rq-n{background:var(--danger)} @media(max-width:620px){ .req .rq-r .badge{display:none} } /* — La conversation — */ .conv-fil{display:flex;flex-direction:column;gap:16px;padding-bottom:20px; border-bottom:1px solid var(--border);margin-bottom:18px} .msg-row{display:flex;gap:11px;align-items:flex-start} .msg-row.moi{justify-content:flex-end} .msg-b{max-width:min(560px,86%)} .msg-q{display:flex;align-items:baseline;gap:8px;margin-bottom:4px} .msg-q b{font-size:.79rem;font-weight:800} .msg-q span{font-size:.71rem;color:var(--ink-mute)} .msg-t{padding:12px 15px;border-radius:16px;font-size:.87rem;line-height:1.65; white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--border)} .msg-row.moi .msg-q{justify-content:flex-end} .msg-row.moi .msg-t{background:var(--brand-50);border-color:var(--brand-100)} .conv-pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px} .conv-pied .btn{margin-left:auto} /* ═══════════════════════════════════════════════════════════════ MON COMPTE ═══════════════════════════════════════════════════════════════ */ .compte-tete{display:flex;align-items:center;gap:16px;padding-bottom:16px; border-bottom:1px solid var(--border);margin-bottom:6px;flex-wrap:wrap} .compte-ent{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:14px; background:var(--bg-2);margin-bottom:8px} .compte-ent .ce-ic{width:42px;height:42px;border-radius:13px;flex:none;display:flex; align-items:center;justify-content:center;background:var(--surface);color:var(--brand-700); border:1px solid var(--border)} .compte-ent .ce-ic svg{width:20px;height:20px} .compte-ent b{display:block;font-size:.95rem} .compte-ent small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px} /* ═══════════════════════════════════════════════════════════════ PAGE CAMPUS Reprise à l'identique de l'application interne : mêmes blocs, même ordre, même présentation. Seules les commandes d'édition ont disparu — d'où quelques variantes « fixe », qui retirent le curseur et l'effet de survol de ce qui n'est plus cliquable. ═══════════════════════════════════════════════════════════════ */ .camp-hero{margin-bottom:20px} .camp-hero .ch-haut{display:flex;align-items:flex-start;justify-content:space-between; gap:18px;flex-wrap:wrap} .camp-hero h1{font-size:1.9rem;font-weight:800;letter-spacing:-.025em;line-height:1.15} .camp-hero .ch-sous{color:var(--ink-soft);font-size:.92rem;margin-top:7px} .camp-hero .ch-sous svg{width:13px;height:13px;vertical-align:-2px} /* `flex:none` empêchait le repli de jouer : les deux boutons réclamaient 370 px côte à côte, personne ne rétrécissait, et le bandeau poussait la page. On les laisse se serrer — c'est ce qui déclenche le passage à la ligne quand la place manque. */ .camp-hero .ch-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 1 auto;min-width:0} /* Sur téléphone, les deux gestes prennent toute la largeur : côte à côte ils ne tiennent pas, et l'un sous l'autre ils sont enfin cliquables au pouce. */ @media(max-width:560px){ .camp-hero .ch-actions{width:100%} .camp-hero .ch-actions .btn{flex:1 1 100%;justify-content:center} } /* Deux colonnes, deux rangées, et les quatre blocs posés directement dedans. Chaque rangée n'a qu'une hauteur : les blocs commencent et finissent au même trait. C'est pour cela qu'il n'y a pas d'align-items:start ici — la valeur par défaut (stretch) est exactement ce qu'on veut. */ .camp-grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px} .camp-grille > .card{display:flex;flex-direction:column} .camp-grille > .card > .empty{margin-top:auto;margin-bottom:auto} @media(max-width:980px){ .camp-grille{grid-template-columns:minmax(0,1fr)} } .camp-titre{display:flex;align-items:center;gap:9px;font-size:1.02rem;font-weight:800; margin-bottom:14px} .camp-titre .ct-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center; justify-content:center;background:var(--bg-2);color:var(--ink-soft);flex:none} .camp-titre .ct-ic svg{width:15px;height:15px} .camp-titre .ct-txt{flex:1;min-width:0} /* — L'équipe — */ .equipe-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media(max-width:620px){ .equipe-grille{grid-template-columns:minmax(0,1fr)} } .membre{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px; background:var(--surface-2);border:1px solid var(--border);text-align:left;font:inherit; color:inherit;width:100%} .membre .m-txt{flex:1;min-width:0} .membre .m-txt b{display:block;font-size:.92rem;line-height:1.3} .membre .m-txt small{display:block;font-size:.78rem;color:var(--ink-soft);line-height:1.4;margin-top:2px} /* Le numéro, troisième ligne : chiffres alignés, sans icône — le contexte suffit à savoir que c'est un téléphone. Ici il se compose. */ .membre .m-tel{font-variant-numeric:tabular-nums;color:var(--brand-700);font-weight:700; text-decoration:none} .membre .m-tel:hover{text-decoration:underline} .membre .m-vide{color:var(--ink-mute);font-weight:600} /* Cette carte n'ouvre rien : elle ne doit ni changer de couleur ni lever le curseur. Une carte qui réagit au survol promet un clic. */ .membre-fixe{cursor:default} /* — Le bon réflexe — */ .camp-conseil{display:flex;gap:11px;margin-top:16px;padding:14px 16px;border-radius:14px; background:var(--brand-50);border:1px solid var(--brand-100);font-size:.87rem;line-height:1.6} .camp-conseil .cc-txt{flex:1;min-width:0} .camp-conseil b{font-weight:800} /* — Actualités : la pastille de date, puis le texte — */ .actu{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:14px; transition:background .13s} .actu:hover{background:var(--surface-2)} .actu-fixe:hover{background:transparent} .actu .a-date{width:52px;flex:none;text-align:center;border-radius:12px;padding:7px 4px; background:var(--brand-50);color:var(--brand-800)} .actu .a-date b{display:block;font-size:1.15rem;font-weight:800;line-height:1} .actu .a-date small{display:block;font-size:.68rem;font-weight:700;margin-top:2px} .actu .a-txt{flex:1;min-width:0} .actu .a-txt b{display:block;font-size:.92rem} .actu .a-txt p{font-size:.82rem;color:var(--ink-soft);margin-top:2px;line-height:1.5} .actu .a-pub{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:5px} /* — Documents — */ .doc-ligne{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px; transition:background .13s} .doc-ligne.cliquable{cursor:pointer} .doc-ligne.cliquable:hover{background:var(--surface-2)} .doc-ligne .d-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex; align-items:center;justify-content:center;background:var(--bg-2);color:var(--ink-soft)} .doc-ligne .d-ic svg{width:17px;height:17px} .doc-ligne .d-txt{flex:1;min-width:0} .doc-ligne .d-txt b{display:block;font-size:.89rem;line-height:1.35} .doc-ligne .d-txt small{font-size:.75rem;color:var(--ink-mute)} .doc-ligne .d-go{color:var(--ink-mute);display:flex;flex:none} .doc-ligne.cliquable:hover .d-go{color:var(--brand-700)} .doc-ligne .d-go svg{width:17px;height:17px} /* — Questions fréquentes — */ .faq{border-bottom:1px solid var(--border)} .faq:last-of-type{border-bottom:none} .faq summary{display:flex;align-items:center;gap:10px;padding:13px 2px;cursor:pointer; font-size:.9rem;font-weight:700;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary .f-q{flex:1;min-width:0} .faq summary .f-chev{margin-left:auto;color:var(--ink-mute);transition:transform .2s var(--ease);flex:none} .faq[open] summary .f-chev{transform:rotate(180deg)} .faq .f-rep{padding:0 2px 14px;font-size:.85rem;line-height:1.65;color:var(--ink-2)} .faq-pied{text-align:center;padding-top:14px;margin-top:6px;border-top:1px solid var(--border)} /* Un bandeau aux couleurs de la marque, pour ce qui appelle une action plutôt que pour ce qui prévient. */ .bandeau-brand{background:var(--brand-50);border-color:var(--brand)} /* — Écran de connexion : quelques ajustements sur le patron du kit — */ .auth-side .as-points{display:flex;flex-direction:column;gap:14px;margin-top:30px; position:relative;z-index:2} .auth-side .as-pt{display:flex;gap:12px;align-items:flex-start} .auth-side .as-pt .as-ic{width:32px;height:32px;border-radius:10px;flex:none; background:rgba(245,157,0,.16);color:var(--brand);display:flex;align-items:center; justify-content:center} .auth-side .as-pt .as-ic svg{width:15px;height:15px} .auth-side .as-pt b{font-size:.88rem;display:block} .auth-side .as-pt small{font-size:.78rem;color:rgba(255,255,255,.58);line-height:1.5} .auth-aide{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg); padding:14px 16px;margin-top:22px;font-size:.8rem;color:var(--ink-soft);line-height:1.6} .auth-aide b{color:var(--ink)} /* ═══════════════════════════════════════════════════════════════ BOÎTE MAIL — le même écran que dans les applications interne et étudiante : la liste à gauche, le fil à droite, l'écriture en bas. Les règles sont recopiées telles quelles de l'application interne : c'est voulu. Le jour où le kit partagé accueillera la messagerie, elles s'y installeront et ces lignes disparaîtront des trois applications d'un coup. UNE SEULE RÈGLE EST DIFFÉRENTE, et il faut savoir pourquoi : le fil des messages est écrit `#lecture-mail .fil`, pas `.fil`. Cette application-ci emploie déjà `.fil` pour le fil d'actualité du campus, sur le tableau de bord et la page Campus. Une règle nue lui aurait posé un fond gris, une hauteur de conversation et un défilement interne — la liste d'actualités se serait pliée en deux. ═══════════════════════════════════════════════════════════════ */ /* — Deux colonnes, liste + lecture, pleine hauteur. Le tout est centré et borné en largeur : sur un grand écran, la conversation reste une colonne lisible, pas une nappe blanche. — (La barre Réception · Envoyés n'est plus ici : ses pastilles `.mail-barre`/`.mail-vues` ont laissé la place aux onglets de l'App interne, voir « Boîte mail — visuel aligné sur l'App interne » plus bas. L'ancienne version est dans app.css.avant-29-09-mail.) */ .mail-wrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:stretch; width:100%;max-width:1180px;margin:0 auto; height:calc(100vh - 248px);height:calc(100dvh - 248px);min-height:440px} .mail-col{display:flex;flex-direction:column;min-height:0;gap:10px} .mail-cherche{display:flex;align-items:center;gap:8px;padding:9px 13px;flex:none; background:var(--surface);border:1px solid var(--border);border-radius:999px; color:var(--ink-mute);box-shadow:var(--sh-sm)} .mail-cherche svg{width:14px;height:14px;flex:none} .mail-cherche input{border:none;background:transparent;outline:none;width:100%; font:inherit;font-size:.84rem;color:var(--ink)} /* La liste s'arrête à sa dernière conversation : pas de grande carte blanche vide sous une liste courte. */ .mail-liste{flex:0 1 auto;min-height:0;overflow-y:auto; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl); box-shadow:var(--sh-sm)} .mail-item{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer; border-bottom:1px solid var(--border);transition:background .13s} .mail-item:last-child{border-bottom:none} .mail-item:hover{background:var(--surface-2)} .mail-item.on{background:var(--brand-50)} .mail-item.nonlu b{font-weight:800} .mail-item.nonlu small{color:var(--ink);font-weight:600} .mail-item .ava{flex:none} .mail-item .mi-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .mail-item .mi-l1{display:flex;align-items:center;gap:6px;min-width:0} .mail-item .mi-l1 b{flex:1;min-width:0;font-size:.86rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mail-item .mi-l2{display:flex;align-items:center;gap:8px;min-width:0} .mail-item .mi-l2 small{flex:1;min-width:0;font-size:.76rem;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mail-item .mi-d{font-size:.68rem;color:var(--ink-mute);font-weight:600;white-space:nowrap;flex:none} .mail-item .mi-n{display:inline-flex;align-items:center;justify-content:center;flex:none; min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:var(--brand); color:#fff;font-size:.66rem;font-weight:800} .ml-tete{display:flex;align-items:center;gap:12px;padding-bottom:13px; border-bottom:1px solid var(--border);margin-bottom:4px;flex:none} .ml-retour{display:none;flex:none;padding:6px} .ml-pied{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} /* ── Le fil d'une conversation : les siens à droite, les autres à gauche. La carte occupe toute la hauteur : en-tête fixe, messages qui défilent, barre d'écriture en bas. ── */ .fil-carte{display:flex;flex-direction:column;min-height:0;height:100%} #lecture-mail{min-height:0;display:flex;flex-direction:column} #lecture-mail>.card{flex:1;min-height:0} #lecture-mail>.card-flat{display:flex;align-items:center;justify-content:center} /* La zone de conversation a son propre fond, comme toute messagerie : les bulles s'y détachent. AUCUN espace inutile à droite : chaque rangée est poussée contre son bord par ses MARGES AUTOMATIQUES — les vôtres à droite, les leurs à gauche. La colonne se cale en bas : une conversation courte s'affiche près de la zone d'écriture. */ #lecture-mail .fil{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column; align-items:stretch;background:var(--bg);border-radius:14px;margin:10px 0 0; padding:14px 18px} .fil-colonne{width:100%;min-width:100%;margin-top:auto; display:flex;flex-direction:column;align-items:stretch} #lecture-mail .fil::-webkit-scrollbar{width:5px} #lecture-mail .fil::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px} #lecture-mail .fil::-webkit-scrollbar-track{background:transparent} .fil-jour{display:flex;justify-content:center;margin:14px auto 10px;flex:none;align-self:center} .fil-jour span{font-size:.68rem;font-weight:700;color:var(--ink-mute); background:var(--bg-2);border-radius:999px;padding:3px 12px} /* `.msg` existe déjà dans le kit (l'ancien composant de chat) : ces règles viennent après et reprennent la main sur ce qui compte — l'alignement, la largeur, et le collage des messages consécutifs. */ /* LA LARGEUR MAXIMALE EST SUR LA RANGÉE, PAS SUR LA BULLE — c'est le bogue de la bulle debout, celui qui affichait « TEST » en colonne, une lettre par ligne. La bulle portait `max-width:72%` : 72 % de la rangée, qui n'a elle-même aucune largeur définie puisqu'elle se règle sur son contenu. Un pourcentage rapporté à une largeur indéfinie, Safari le résout contre la largeur MINIMALE du contenu — la bulle recevait la largeur de sa lettre la plus large. La rangée, elle, est dans une colonne qui fait 100 % : son pourcentage a un sens. */ #lecture-mail .msg{display:flex;align-items:flex-end;gap:8px;margin-top:10px;flex:none; max-width:82%;animation:msg-in .18s var(--ease, ease)} #lecture-mail .msg.suite{margin-top:2px} #lecture-mail .msg.eux{margin-right:auto} #lecture-mail .msg.moi{margin-left:auto;justify-content:flex-end} #lecture-mail .msg .msg-ava{width:28px;flex:none;align-self:flex-end} @keyframes msg-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .bulle{max-width:100%;min-width:0;background:var(--surface);border:1px solid var(--border); border-radius:16px 16px 16px 5px;padding:8px 12px 6px; box-shadow:0 1px 2px rgba(16,24,40,.05)} .msg.suite .bulle{border-radius:8px 16px 16px 5px} .bulle.moi{background:var(--brand);border-color:var(--brand); border-radius:16px 16px 5px 16px} .msg.suite .bulle.moi{border-radius:16px 8px 5px 16px} .bulle p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5; font-size:.88rem;color:var(--ink-2)} .bulle.moi p{color:#fff} .bulle small{display:block;margin-top:1px;font-size:.6rem;color:var(--ink-mute); text-align:right} .bulle.moi small{color:rgba(255,255,255,.75)} /* — Supprimer un de ses messages — Le bouton vit DANS la bulle, en haut à l'extérieur du côté opposé au bord de l'écran, et n'apparaît qu'au survol de la rangée : un fil se lit, il ne s'administre pas. Il ne s'affiche que sur ses propres messages — on ne supprime pas la parole de l'autre. */ .bulle{position:relative} .bl-suppr{position:absolute;top:-7px;left:-9px;width:24px;height:24px;border-radius:50%; border:1px solid var(--border);background:var(--surface);color:var(--ink-mute); cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; opacity:0;transform:scale(.85);transition:opacity .13s,transform .13s,color .13s; box-shadow:var(--sh-sm)} .bl-suppr svg{width:12px;height:12px} .msg:hover .bl-suppr,.bl-suppr:focus-visible{opacity:1;transform:none} .bl-suppr:hover{color:var(--danger);border-color:var(--danger)} /* Doigt sur un écran tactile : pas de survol, le bouton reste visible. */ @media(hover:none){ .bl-suppr{opacity:1;transform:none} } /* La barre d'écriture, collée en bas du fil */ .fil-repondre{display:flex;gap:9px;align-items:flex-end;flex:none;padding-top:12px} .fr-champ{flex:1;min-width:0;resize:none;font:inherit;font-size:.88rem; line-height:1.45;color:var(--ink);background:var(--surface-2); border:1.5px solid var(--border);border-radius:19px;padding:9px 15px; max-height:120px;overflow-y:auto;transition:border-color .15s} .fr-champ:focus{outline:none;border-color:var(--brand);background:var(--surface)} .fr-envoyer{width:40px;height:40px;flex:none;border:none;border-radius:50%; background:var(--brand);color:#fff;cursor:pointer;display:flex; align-items:center;justify-content:center;transition:filter .15s,transform .1s} .fr-envoyer svg{width:17px;height:17px} .fr-envoyer:hover{filter:brightness(.94)} .fr-envoyer:active{transform:scale(.94)} .fr-envoyer:disabled{opacity:.5;cursor:default} /* ── Écrire, ou signaler : un formulaire, pas un questionnaire ── Plus de cartes d'intention ni de sélecteur de personne : l'intention vient du bouton sur lequel on a cliqué, et le destinataire est posé d'avance. Il ne reste que les champs du formulaire (classes `field` du kit) et cette ligne-ci. — */ /* « À l'attention de » : un réglage sous le message, pas une question avant. La phrase qui suit dit ce qui est vrai — le message arrive dans la boîte du campus, toute l'équipe le voit — pour que le nom choisi ne soit pas pris pour une adresse privée. */ .dest{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:18px; padding-top:15px;border-top:1px solid var(--border)} .dest label{font-size:.8rem;font-weight:700;color:var(--ink-2);flex:none} .dest .select{flex:0 1 240px;min-width:160px;width:auto} .dest small{flex-basis:100%;font-size:.75rem;color:var(--ink-soft);line-height:1.5} .dest svg{width:13px;height:13px;vertical-align:-2px} /* Le compte, écrit en toutes lettres avant d'envoyer. */ .redac-bilan{flex:1;min-width:0;font-size:.8rem;font-weight:700;color:var(--ink-mute); text-align:left;line-height:1.4} .redac-bilan.pret{color:var(--ok)} @media(max-width:620px){ .redac-bilan{flex-basis:100%;margin-bottom:8px} } /* Petit écran : un seul panneau à la fois — la liste, OU le fil ouvert (plein écran, avec un bouton retour dans son en-tête). */ @media(max-width:1020px){ .mail-wrap{grid-template-columns:minmax(0,1fr);height:calc(100vh - 218px);height:calc(100dvh - 218px)} .mail-wrap.fil-ouvert .mail-col{display:none} .mail-wrap:not(.fil-ouvert) #lecture-mail{display:none} .mail-wrap.fil-ouvert .ml-retour{display:inline-flex} .msg{max-width:92%} } /* ═══════════════════════════════════════════════════════════════ Boîte mail — visuel aligné sur l'App interne (29 sept 2026) Demande de la direction : « la cohérence visuelle des boîtes mail : reproduis visuellement celle de l'app interne sur l'app entreprise ». Ces règles sont RECOPIÉES du bloc « La boîte mail, habillée comme l'app étudiante » et du bloc « Pièce jointe d'un message » de css/app.css de l'App interne. Elles rhabillent les classes ci-dessus ; la mécanique de la page (js/pages/demandes.js) ne bouge pas. Trois écarts, voulus : · `.fil` et `.msg` restent préfixés `#lecture-mail` (voir plus haut : le kit et le fil d'actualité emploient déjà ces noms) ; · la barre d'onglets reste bornée à la largeur de la boîte, comme l'était l'ancienne barre : sur un grand écran, onglets et recherche restent alignés sur la liste et le fil ; · le mode sombre est tenu (l'onglet actif est clair, son texte doit donc être foncé) et le téléphone aussi (recherche sur toute la largeur, sous les onglets). Pas de trombone : l'App Entreprise n'envoie pas de pièce jointe. ═══════════════════════════════════════════════════════════════ */ /* La barre : le bloc d'onglets (l'actif en noir), la recherche à droite. */ .cr-barre{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px; width:100%;max-width:1180px;margin-left:auto;margin-right:auto} .cr-onglets{display:flex;background:var(--surface);border:1px solid var(--border-2); border-radius:14px;padding:4px;gap:4px} .cr-onglet{display:flex;align-items:center;gap:7px;padding:8px 14px;min-height:40px; border:none;border-radius:10px;background:none;font:inherit;font-size:.85rem; font-weight:700;color:var(--ink-soft);cursor:pointer; transition:background .18s,color .18s} .cr-onglet svg{width:15px;height:15px} .cr-onglet.on{background:var(--ink);color:#fff} .cr-n{background:var(--bg-2);border-radius:99px;padding:1px 7px;font-size:.72rem; color:var(--ink-mute)} .cr-onglet.on .cr-n{background:rgba(255,255,255,.18);color:#fff} .cr-cherche{margin-left:auto;flex:0 1 300px;min-width:180px} /* La recherche, arrondie comme les champs. */ .mail-cherche{border:1.5px solid var(--border-2);border-radius:14px;background:var(--surface)} /* La liste : des lignes arrondies séparées par l'espace, plus de filets. */ .mail-item{border-bottom:none;border-radius:15px;padding:12px 11px;gap:12px; transition:background .14s} .mail-item+.mail-item{margin-top:2px} .mail-item:hover{background:var(--bg-2)} .mail-item.on{background:var(--brand-50);box-shadow:inset 0 0 0 1.5px var(--brand-100)} .mail-item .ava{width:44px;height:44px} .mail-item .mi-l1 b{font-size:.88rem} .mail-item .mi-n{background:var(--brand);color:var(--ink);min-width:18px;height:18px; border-radius:99px;font-size:.66rem;font-weight:800;padding:0 5px} /* La tête du fil. */ .ml-tete{padding:16px 18px 13px;border-bottom:1px solid var(--border-2)} /* Les filets de jour. */ .fil-jour{display:flex;align-items:center;gap:12px;margin:12px 0 6px;color:var(--ink-mute); align-self:stretch;justify-content:stretch} .fil-jour::before,.fil-jour::after{content:"";flex:1;height:1px;background:var(--border-2)} .fil-jour span{background:none;border:none;padding:0;font-size:.66rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)} /* Les bulles : claires des deux côtés — les miennes en orangé doux, texte encre (fini le blanc sur orange). */ .bulle{background:var(--bg-2);border:none;border-radius:14px;padding:12px 14px} .msg.suite .bulle{border-radius:14px} .bulle.moi{background:var(--brand-50);border:none;border-radius:14px} .msg.suite .bulle.moi{border-radius:14px} .bulle p,.bulle.moi p{color:var(--ink);font-size:.88rem;line-height:1.6} .bulle small,.bulle.moi small{color:var(--ink-mute);font-size:.66rem;font-weight:700} /* La zone de réponse : le champ et le bouton sur une ligne (`.fr-ligne`), sous un filet. */ .fil-repondre{border-top:1px solid var(--border-2);padding-top:13px; flex-direction:column;align-items:stretch;gap:8px} .fil-repondre .fr-champ{border:1.5px solid var(--border-2);border-radius:14px; padding:11px 13px;font-size:.88rem;background:var(--surface)} .fr-ligne{display:flex;align-items:flex-end;gap:8px} .fr-ligne .fr-champ{flex:1;min-width:0} /* Petit écran : les rangées prennent la largeur de l'App interne (la règle nue `.msg{max-width:92%}` ci-dessus ne passait pas devant `#lecture-mail .msg`). Sur téléphone, la recherche passe sous les onglets, sur toute la largeur. */ @media(max-width:1020px){ #lecture-mail .msg{max-width:92%} } @media(max-width:620px){ .cr-cherche{flex:1 1 100%;min-width:0;margin-left:0} } /* Téléphone, fil ouvert : la barre s'efface. Onglets et recherche ne servent qu'à la liste — cachée à ce moment-là — et la conversation récupère leur hauteur (sans cela, il restait trois lignes de messages au-dessus du champ). La flèche retour ramène la liste ET la barre. */ @media(max-width:720px){ #zone-mail:has(.mail-wrap.fil-ouvert) > .cr-barre{display:none} } /* Mode sombre : l'encre s'éclaircit, l'onglet actif devient clair — son texte et son compteur passent au marron fixe du kit, comme les badges `.b-ink` et `.rn-badge`. Même chose pour le compteur orange. */ body[data-theme="dark"] .cr-onglet.on{color:var(--always-dark)} body[data-theme="dark"] .cr-onglet.on .cr-n{background:var(--bg-2);color:var(--ink)} body[data-theme="dark"] .mail-item .mi-n{color:var(--always-dark)} /* La pastille d'icône d'un bandeau : le kit ne la dimensionne que dans les notifications éclair, or la page Campus et la boîte mail s'en servent aussi. Sans cette règle, la couleur posée en ligne épouse l'icône au pixel et le bandeau perd son alignement. */ .bandeau .nf-ic{width:34px;height:34px;border-radius:11px;flex:none; display:flex;align-items:center;justify-content:center} .bandeau .nf-ic svg{width:17px;height:17px} /* ── UN VIDE QUI TIENT SA PLACE ── Les blocs « Propositions du campus » et « Fil d'actualité » gardent leur hauteur quand ils n'ont rien à montrer : sans cela, le tableau de bord se réorganisait selon ce que le campus avait publié, et l'on cherchait un bloc qui n'avait pas disparu — il n'existait juste pas encore. La bordure en pointillé dit « en attente », pas « erreur ». */ .bloc-vide{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;text-align:center;min-height:132px;padding:18px 20px; border:1.5px dashed var(--border-2);border-radius:14px;background:var(--bg-2)} .bloc-vide .bv-ic{width:36px;height:36px;border-radius:12px;flex:none; display:flex;align-items:center;justify-content:center;margin-bottom:3px; background:var(--surface);border:1px solid var(--border);color:var(--ink-mute)} .bloc-vide .bv-ic svg{width:18px;height:18px} .bloc-vide b{font-size:.88rem;color:var(--ink-2)} .bloc-vide small{font-size:.78rem;color:var(--ink-mute);line-height:1.5;max-width:44ch} /* La version nue, demandée pour « Propositions du campus » : l'icône et la phrase, rien d'autre — pas de fond gris, pas de cadre, une carte courte. */ .bloc-vide.bloc-vide-nu{background:none;border:none;min-height:0;padding:12px 0 8px} /* Écran peu haut : le tableau de bord doit encore tenir d'un seul regard. */ @media(max-height:800px){ .bloc-vide{min-height:104px;padding:14px 16px} .bloc-vide.bloc-vide-nu{min-height:0;padding:10px 0 6px} .bloc-vide small{display:none} } /* ── Le parcours découverte ── Sept écrans courts qui défilent au premier passage : une carte centrée sur un voile, une idée par écran, « Continuer » ou « Passer ». Les points disent où l'on en est. */ .dec-ov{position:fixed;inset:0;z-index:220;display:flex;align-items:center; justify-content:center;padding:22px;background:rgba(24,16,8,.55); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); animation:dec-voile .25s ease} @keyframes dec-voile{from{opacity:0}to{opacity:1}} .dec-carte{width:min(480px,100%);background:var(--surface);border-radius:20px; padding:30px 30px 22px;box-shadow:0 24px 70px rgba(0,0,0,.28); display:flex;flex-direction:column;align-items:center;text-align:center; animation:dec-entree .3s var(--ease)} @keyframes dec-entree{from{opacity:0;transform:translateY(14px) scale(.97)} to{opacity:1;transform:none}} .dec-ic{width:58px;height:58px;border-radius:18px;display:flex;align-items:center; justify-content:center;background:var(--brand-50);color:var(--brand-700); margin-bottom:16px} .dec-ic svg{width:26px;height:26px} .dec-carte h2{font-size:1.22rem;font-weight:800;letter-spacing:-.01em;margin-bottom:9px} .dec-carte p{font-size:.88rem;line-height:1.65;color:var(--ink-soft);max-width:38ch} .dec-points{display:flex;gap:6px;margin:20px 0 18px} .dec-pt{width:7px;height:7px;border-radius:50%;background:var(--border-2); transition:all .2s var(--ease)} .dec-pt.on{background:var(--brand);width:20px;border-radius:99px} .dec-pied{display:flex;justify-content:space-between;align-items:center; width:100%;gap:10px} /* ── La visite guidée : le bloc net, le reste grisé, la bulle ancrée ── Le voile = QUATRE panneaux autour du bloc visé (haut, bas, gauche, droite) : aucun bloc de la page ne peut passer devant, quel que soit son empilement. Le bloc visé garde un liseré orange, comme sur l'application Étudiante. Un calque transparent bloque les clics partout ; seule la bulle vit. */ .visite-cible{outline:2.5px solid var(--brand);outline-offset:3px; border-radius:16px} .visite-voile-p{position:fixed;z-index:300;background:rgba(24,16,8,.55); transition:all .2s ease} .visite-stop{position:fixed;inset:0;z-index:302} .visite-bulle{position:fixed;z-index:303;background:var(--surface); border-radius:16px;padding:16px 18px 14px; box-shadow:0 18px 50px rgba(0,0,0,.30);animation:dec-entree .25s var(--ease)} .visite-bulle::after{content:'';position:absolute;left:var(--fleche-x,40px); bottom:-8px;width:16px;height:16px;background:var(--surface); transform:translateX(-50%) rotate(45deg);border-radius:3px} .visite-bulle.en-bas::after{bottom:auto;top:-8px} .vb-titre{display:flex;gap:10px;align-items:center;font-weight:800; font-size:.95rem;margin-bottom:6px} .vb-ic{width:28px;height:28px;border-radius:9px;background:var(--brand); color:#291D13;font-weight:900;font-size:.8rem;display:flex; align-items:center;justify-content:center;flex:none} .visite-bulle p{font-size:.84rem;line-height:1.6;color:var(--ink-soft)} .vb-pied{display:flex;align-items:center;gap:10px;margin-top:12px} .vb-n{font-size:.74rem;font-weight:800;color:var(--ink-mute);flex:none} .vb-boutons{margin-left:auto;display:flex;gap:6px} /* ── L'accueil de la première connexion : PLEIN ÉCRAN, avant l'espace ── La forme de l'onboarding FASUP' Mentor : logo en haut, barre de progression, « Passer », une question par écran, Retour / Continuer. */ .acc-ov{position:fixed;inset:0;z-index:230;background:var(--bg); display:flex;flex-direction:column;animation:dec-voile .25s ease} .acc-tete{display:flex;align-items:center;justify-content:space-between; gap:22px;padding:20px 28px;flex:none} .acc-tete .brand{flex:none} .acc-prog{flex:1;max-width:560px;height:6px;border-radius:99px; background:var(--border);overflow:hidden} .acc-prog i{display:block;height:100%;background:var(--brand); border-radius:99px;transition:width .35s var(--ease)} .acc-passer{border:none;background:none;font:inherit;font-weight:700; color:var(--ink-mute);cursor:pointer;padding:6px 10px} .acc-passer:hover{color:var(--ink)} .acc-corps{flex:1;overflow-y:auto;display:flex;flex-direction:column; align-items:center;justify-content:flex-start;gap:22px;padding:26px 20px 50px} /* Centré par des marges automatiques, PAS par justify-content:center : quand l'écran déborde (téléphone, formulaire d'erreur), ce dernier poussait le haut du contenu au-dessus de la zone de défilement — la bulle du campus était rognée et inatteignable. Les marges auto centrent quand il y a la place, et s'effacent sinon. */ .acc-corps>:first-child{margin-top:auto} .acc-corps>:last-child{margin-bottom:auto} .acc-bulle{display:flex;gap:12px;align-items:center;background:var(--surface); border-radius:16px;padding:12px 18px;box-shadow:0 8px 26px rgba(41,29,19,.08); max-width:620px;font-size:.85rem;line-height:1.5} .acc-bulle b{display:block;color:var(--brand-700);font-size:.78rem} .acc-bulle small{color:var(--ink-soft);font-size:.85rem} .acc-bulle-ic{width:38px;height:38px;border-radius:12px;background:var(--brand); color:#291D13;font-weight:900;display:flex;align-items:center; justify-content:center;flex:none} .acc-titre{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:800; letter-spacing:-.02em;text-align:center} .acc-sous{font-size:.92rem;color:var(--ink-soft);text-align:center; max-width:52ch;line-height:1.6;margin-top:-10px} .acc-intro{display:flex;flex-direction:column;align-items:center;gap:14px} .acc-intro-ic{width:62px;height:62px;border-radius:20px;background:var(--brand-50); color:var(--brand-700);display:flex;align-items:center;justify-content:center} .acc-intro-ic svg{width:28px;height:28px} .acc-intro-tag{font-size:.72rem;font-weight:800;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-mute)} .acc-grille{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:820px} .acc-chip{font:inherit;font-weight:700;padding:14px 26px;border-radius:14px; background:var(--surface);border:1.5px solid var(--border);cursor:pointer; transition:all .15s var(--ease)} .acc-chip:hover{border-color:var(--ink-mute)} .acc-chip.on{border-color:var(--brand);background:var(--brand-50);color:var(--brand-700)} .acc-cartes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:860px} .acc-carte{font:inherit;width:230px;background:var(--surface);position:relative; border:1.5px solid var(--border);border-radius:16px;padding:20px 18px; cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px; transition:all .15s var(--ease)} .acc-carte:hover{border-color:var(--ink-mute)} .acc-carte.on{border-color:var(--brand);box-shadow:0 8px 24px rgba(245,157,0,.14)} .acc-carte b{font-size:.92rem} .acc-carte small{font-size:.78rem;color:var(--ink-soft);line-height:1.5} .acc-carte-ic{width:42px;height:42px;border-radius:12px;background:var(--bg-2); display:flex;align-items:center;justify-content:center;color:var(--ink-2)} .acc-carte-coche{position:absolute;top:12px;right:12px;width:22px;height:22px; border-radius:50%;border:1.5px solid var(--border);display:flex; align-items:center;justify-content:center;color:transparent; transition:all .15s var(--ease)} .acc-carte-coche svg{width:12px;height:12px} .acc-carte.on .acc-carte-coche{background:var(--brand);border-color:var(--brand);color:#fff} .acc-form{width:min(440px,100%)} .acc-recap{width:min(480px,100%);background:var(--surface);border-radius:18px; padding:22px 24px;box-shadow:0 14px 40px rgba(41,29,19,.10);text-align:left} .acc-recap-l{display:flex;gap:13px;align-items:center;padding:11px 0; border-bottom:1px solid var(--border)} .acc-recap-l:last-of-type{border-bottom:none} .acc-recap-l small{display:block;font-size:.68rem;font-weight:800; letter-spacing:.12em;color:var(--ink-mute)} .acc-recap-l b{font-size:.9rem} .acc-recap-ic{width:36px;height:36px;border-radius:11px;background:var(--brand-50); color:var(--brand-700);display:flex;align-items:center;justify-content:center;flex:none} .acc-pied{display:flex;gap:12px;justify-content:center;align-items:center; flex-wrap:wrap;margin-top:6px} /* L'entreprise à CONFIRMER : l'adresse et le SIRET sous le nom. */ .acc-recap-d{display:block;font-size:.8rem;color:var(--ink-soft);line-height:1.45;margin-top:2px} /* « C'est noté » : l'erreur est partie au campus. */ .acc-intro-ic.acc-intro-ok{background:var(--ok-soft);color:var(--ok-ink)} .acc-echec{display:flex;gap:8px;align-items:flex-start;margin-top:10px;text-align:left; color:var(--danger-ink);line-height:1.5} .acc-echec svg{width:15px;height:15px;flex:none;margin-top:2px} /* ── L'invitation, sur l'écran de connexion ── */ .auth-invitation{margin-top:18px;padding:14px 16px;border:1.5px dashed var(--border-2); border-radius:14px;display:flex;flex-direction:column;gap:10px} .auth-invitation b{font-size:.85rem} /* ═══════════════════════════════════════════════════════════════ LE BAS DES PAGES, SOUS LA BARRE DE NAVIGATION À lire en dernier, et c'est volontaire : plusieurs pages posent leur propre rembourrage (`padding` en raccourci, ou `padding-bottom` dans une media query de hauteur), et chacune écrasait à son tour la réserve du kit. Le tableau de bord finissait avec 22 px sous le dernier bloc, la fiche alternant avec 20 : dans les deux cas la barre de navigation recouvrait la fin de la page, sans qu'on puisse la faire remonter. Ce bloc reprend la main une fois pour toutes. La valeur elle-même vit dans le kit (`--bas-barre`), avec la hauteur de la barre et la zone gestuelle des iPhone : il n'y a qu'un endroit à corriger le jour où la barre change de taille. ═══════════════════════════════════════════════════════════════ */ @media(max-width:720px){ .page, .page[data-vue="dashboard"], .page[data-vue="agenda"], .page[data-vue="alternants"]{padding-bottom:var(--bas-barre)} } /* ═══════════════════════════════════════════════════════════════ LA BOÎTE MAIL SUR TÉLÉPHONE : LA PLACE QUI RESTE, PAS UN CALCUL La conversation a une hauteur ferme et son propre défilement — c'est ce qui garde le champ d'écriture en bas et fait remonter les messages dessous. Cette hauteur était déduite de la fenêtre : `100dvh - 218px`, où 218 était la place estimée de tout ce qui la précède. L'estimation ne tenait pas sur téléphone. Le titre de page y passe sur deux lignes, le bandeau d'aperçu s'ajoute, et la barre de navigation recouvre encore 96 px en bas : le panneau descendait presque 200 px sous l'écran, et le champ d'écriture — le seul geste de cette page — se retrouvait dessous, invisible. On ne calcule plus rien. `.page` remplit déjà la fenêtre moins la barre du haut (`.main` est en colonne, `.page` en `flex:1`), et son rembourrage du bas réserve déjà la barre de navigation. Il suffit que la boîte mail soit, elle aussi, l'élément qui prend la place restante : elle s'arrête alors exactement où l'écran s'arrête, quel que soit le nombre de lignes du titre. ═══════════════════════════════════════════════════════════════ */ @media(max-width:720px){ /* La coquille prend EXACTEMENT la fenêtre, ni plus ni moins. `.main` se contentait d'un minimum (`min-height:100vh`) : dès que le contenu dépassait, tout le monde grandissait avec lui et la chaîne des hauteurs ne voulait plus rien dire. Avec une hauteur ferme, chaque `flex:1` reçoit une part exacte, et le champ d'écriture tombe précisément au-dessus de la barre de navigation. */ body:has(.page[data-vue="demandes"]) .main{height:100dvh;min-height:0} .page[data-vue="demandes"]{display:flex;flex-direction:column;min-height:0;overflow:hidden} .page[data-vue="demandes"] #zone-mail{flex:1 1 auto;min-height:0; display:flex;flex-direction:column} .page[data-vue="demandes"] .mail-wrap{flex:1 1 auto;min-height:0;height:auto} } /* ═══════════════════════════════════════════════════════════════════ LA MÊME PORTE QUE L'APPLICATION ÉTUDIANTE (8 septembre 2026). Accueil animé (lion sur encre), puis carte de connexion centrée sur le fond à motifs. Les classes .auth/.auth-side de l'ancien écran en deux panneaux restent au-dessus, éteintes : plus personne ne les rend. Seuls les mots changent d'une application à l'autre. ═══════════════════════════════════════════════════════════════════ */ .auth2{min-height:100vh;display:flex;align-items:stretch; background:var(--bg) url("data:image/svg+xml,%3Csvg width='56' height='97' viewBox='0 0 56 97' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0L56 16.17v32.33L28 64.67 0 48.5V16.17L28 0zm0 64.67L56 80.83V97H0V80.83L28 64.67z' fill='%23291D13' fill-opacity='.016'/%3E%3C/svg%3E")} .a2-form{flex:1;display:flex;flex-direction:column;padding:24px 16px} .a2-card{width:min(410px,100%);margin:auto} .a2-card .h1{margin-bottom:6px} .a2-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--orange-700);margin-bottom:14px} .a2-intro{color:var(--ink-soft);font-size:.9rem;margin-bottom:28px} .a2-label-ligne{display:flex;justify-content:space-between;align-items:baseline} .a2-oubli{color:var(--orange-700);cursor:pointer;font-size:.76rem} .a2-oubli:hover{text-decoration:underline} .a2-rester{margin-bottom:20px} .a2-foot{text-align:center;font-size:.84rem;color:var(--ink-soft);margin-top:24px} .a2-aide{margin-top:14px;font-size:.82rem;color:var(--ink-soft)} .a2-aide summary{cursor:pointer;text-align:center;color:var(--ink-mute);font-weight:600; list-style:none} .a2-aide summary::-webkit-details-marker{display:none} .a2-aide summary:hover{color:var(--ink)} .a2-aide>div{margin-top:10px;padding:12px 14px;border:1px solid var(--border-2); border-radius:12px;line-height:1.65;background:var(--bg-2)} /* Le code reçu par e-mail : six chiffres bien espacés, faciles à relire. */ .ac-code{letter-spacing:.45em;font-size:1.25rem;font-weight:800;text-align:center} .a2-card .page-enter,.page-enter{animation:pageIn .35s var(--ease)} @keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ── L'accueil animé ── */ .splash{position:fixed;inset:0;background:var(--always-dark);z-index:900;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:12px; transition:opacity .45s var(--ease)} .splash.out{opacity:0;pointer-events:none} .splash .sp-lion{width:min(272px,68vw);animation:spLion .9s var(--spring)} .splash .sp-lion img{width:100%;height:auto;display:block; filter:drop-shadow(0 10px 34px rgba(245,157,0,.32)); animation:spRespire 3.2s var(--ease) infinite} .splash .sp-nom{color:rgba(255,255,255,.85);font-size:.78rem;font-weight:800; letter-spacing:.42em;text-indent:.42em;margin-top:2px; animation:fadeUp .6s .25s var(--ease) backwards} .splash small{color:rgba(255,255,255,.5);font-size:.8rem;animation:fadeUp .6s .4s var(--ease) backwards} .splash .sp-bar{width:172px;height:3px;background:rgba(255,255,255,.12);border-radius:99px; overflow:hidden;margin-top:12px;animation:fadeUp .6s .5s var(--ease) backwards} .splash .sp-bar i{display:block;height:100%;width:44%;border-radius:99px; background:linear-gradient(90deg,transparent,var(--orange) 30%,#FFC24D 60%,transparent); animation:spLoad 1.3s cubic-bezier(.45,0,.35,1) infinite} @keyframes spLion{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}} @keyframes spRespire{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes spLoad{from{transform:translateX(-180%)}to{transform:translateX(420%)}} @media (prefers-reduced-motion:reduce){ .splash .sp-lion,.splash .sp-lion img,.splash .sp-nom,.splash small,.splash .sp-bar, .splash .sp-bar i,.page-enter{animation:none} } /* ══════════ LE COMPTE RENDU EN DOCUMENT (29 sept 2026) ══════════ La feuille du compte rendu, telle que l'App interne l'affiche : papier blanc, encre marron, bandes de thèmes, tableau d'émargement signé. Elle reste une FEUILLE en mode sombre aussi — c'est un document. */ .crdoc-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:4px 0 12px} .crdoc{background:#FFF;color:#291D13;border:1px solid var(--border);border-radius:12px; padding:22px 22px 16px;font-size:14px;line-height:1.55;box-shadow:var(--sh-sm)} .crdoc h1{font-size:18px;margin:0 0 4px;color:#291D13} .crdoc .st{color:#6E6155;font-size:13px;margin:0 0 18px} .crdoc table{width:100%;border-collapse:collapse;margin-bottom:20px} .crdoc table.entete td{padding:7px 0;border-bottom:1px solid #E7E1D8;font-size:13px;color:#291D13} .crdoc table.entete td:last-child{text-align:right;font-weight:700} .crdoc h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;color:#6E6155; margin:30px 0 12px;padding-top:14px;border-top:2px solid #291D13} .crdoc h2:first-of-type{margin-top:6px;padding-top:0;border-top:0} .crdoc h3{font-size:14px;margin:20px 0 6px;padding-left:10px;border-left:3px solid #E29A2D;color:#291D13} .crdoc .q{font-size:12px;color:#6E6155;margin:12px 0 2px} .crdoc .r{margin:0;white-space:pre-wrap;color:#291D13;overflow-wrap:anywhere} .crdoc table.sign{margin:8px 0 16px} .crdoc table.sign th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px; color:#6E6155;padding:6px 8px 6px 0;border-bottom:1px solid #291D13} .crdoc table.sign td{padding:12px 8px 12px 0;font-size:13px;text-align:left;vertical-align:bottom; border-bottom:1px solid #E7E1D8;color:#291D13} .crdoc table.sign td:last-child{border-bottom:1px solid #291D13;width:36%} .crdoc .signe{display:block;font-size:10px;color:#8A7B6B} .crdoc .note{margin-top:20px;padding:12px 14px;background:#F5EFE5;border-radius:8px;font-size:12px} .crdoc .pied{margin-top:26px;font-size:11px;color:#8A7B6B;border-top:1px solid #E7E1D8;padding-top:10px} @media (max-width:640px){ .crdoc{padding:16px 14px 12px} .crdoc-actions .btn{flex:1;justify-content:center} } /* Le calque plein écran — le même que celui de l'App interne. */ .doc-calque{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;background:var(--bg-2)} .doc-barre{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border); font-size:.95rem;font-weight:800;color:var(--ink);flex:none} .doc-actions{display:flex;align-items:center;gap:8px;flex:none} .doc-scene{flex:1;min-height:0;overflow:auto;padding:26px 20px; background:linear-gradient(180deg,#3A2C20,#2E241A)} .doc-cadre{display:block;width:min(940px,100%);height:100%;margin:0 auto;border:0; background:#FFF;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.34)} body.doc-ouvert{overflow:hidden} @media (max-width:640px){ .doc-barre{flex-wrap:wrap;gap:10px;padding:10px 14px} .doc-actions{width:100%;justify-content:flex-end} .doc-scene{padding:12px 8px} } /* ══════════ EN PHYSIQUE OU PAR APPEL (29 sept 2026) ══════════ Le même dessin que dans l'App interne : deux grands boutons côte à côte, le choix en encre pleine. */ .mode-rdv{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mode-opt{position:relative;display:block;cursor:pointer} .mode-opt input{position:absolute;opacity:0;pointer-events:none} .mode-opt span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px; padding:10px 12px;border:1.5px solid var(--border-2);border-radius:12px;background:var(--surface); font-weight:700;font-size:.88rem;color:var(--ink-2);transition:border-color .15s,background .15s} .mode-opt span svg{width:17px;height:17px;flex:none} .mode-opt:hover span{border-color:var(--ink)} .mode-opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--surface)} .mode-opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px} /* ══════════ LA RÉCLAMATION DE L'ENTREPRISE (29 sept 2026) ══════════ Le bouton cerclé de rouge (comme dans l'app Étudiante), le cadre qui dit ce qu'est une réclamation, le choix du destinataire en deux cartes, et le fil avec sa bande de délai. */ .btn-reclam{border-color:var(--danger);color:var(--danger-ink)} .btn-reclam:hover{border-color:var(--danger);background:var(--danger-soft)} .reclam-cadre{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px; background:var(--danger-soft);color:var(--danger-ink);font-size:.84rem;line-height:1.5} .reclam-cadre svg{width:17px;height:17px;flex:none;margin-top:2px} .reclam-cadre a{color:inherit;font-weight:700;text-decoration:underline} .dest-reclam{display:block} .dest-reclam > label{display:block;margin-bottom:8px} .dest-choix{display:grid;grid-template-columns:1fr 1fr;gap:8px} .dest-opt{position:relative;display:block;cursor:pointer} .dest-opt input{position:absolute;opacity:0;pointer-events:none} .dest-opt span{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;height:100%; padding:11px 13px;border:1.5px solid var(--border-2);border-radius:12px;background:var(--surface)} .dest-opt span svg{width:17px;height:17px;grid-row:span 2;color:var(--ink-2)} .dest-opt b{font-size:.86rem;color:var(--ink)} .dest-opt small{flex-basis:auto;font-size:.74rem;color:var(--ink-soft);line-height:1.4} .dest-opt:hover span{border-color:var(--ink)} .dest-opt input:checked + span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--bg-2)} .dest-opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px} @media (max-width:560px){ .dest-choix{grid-template-columns:1fr} } .rcl-ava{background:var(--danger-soft);color:var(--danger-ink)} .rcl-ava svg{width:15px;height:15px} .rcl-ava.rcl-ok{background:var(--ok-soft);color:var(--ok-ink)} .rcl-ava.rcl-cours{background:var(--warn-soft);color:var(--warn-ink)} .rcl-bande{display:flex;gap:9px;align-items:flex-start;margin:0 0 4px;padding:10px 14px; font-size:.82rem;line-height:1.5;border-bottom:1px solid var(--border)} .rcl-bande svg{width:16px;height:16px;flex:none;margin-top:2px} .rcl-bande.rcl-cours{background:var(--warn-soft);color:var(--warn-ink)} .rcl-bande.rcl-retard{background:var(--danger-soft);color:var(--danger-ink)} .rcl-bande.rcl-ok{background:var(--ok-soft);color:var(--ok-ink)} .bulle .bl-qui{display:block;font-size:.72rem;margin-bottom:3px;color:var(--ink-2)} /* Une carte de destinataire est un