/* Console d'administration — même identité que le portail, format manager. * * La console partageait autrefois peu de choses avec le portail : fond sombre * d'un côté, clair de l'autre, pour qu'un opérateur ne les confonde jamais. * Les deux surfaces portent désormais la même marque, et la distinction passe * par la FORME plutôt que par la couleur : le portail est une colonne de * formulaire, la console est un rail de navigation et des tableaux. Le bandeau * « Administration » du rail achève de lever le doute — il est visible sur * tous les écrans. */ :root { /* Palette du logo du propriétaire (décision du 25/09/2026, couleurs * échantillonnées sur les pixels du logo) : sombre dominant #293239 (le * boîtier, le texte « BIMO »), accent #FAA820 (le toit, l'accent du « i »). * Remplace le bleu du thème précédent. * * --bleu / --bleu-sombre / --marine GARDENT LEUR NOM — ils ne sont plus * bleus, mais renommer aurait rouvert chacun de leurs points d'usage * (boutons, liens, focus, éléments actifs) sans bénéfice fonctionnel ; à * corriger un jour pour l'honnêteté du nom, pas aujourd'hui. * --accent est le seul nom neuf : réservé au DÉCORATIF (bordures, aplats, * touches sur fond sombre) — jamais en texte sur fond clair. Mesuré : * #FAA820 sur blanc = 1,96:1, sous le minimum de 3:1 déjà pour un simple * composant, très en dessous des 4.5:1 d'un texte. */ --bleu: #293239; --bleu-sombre: #1f262b; --marine: #171c1f; --accent: #faa820; --encre: #0b1220; --texte: #1c2333; --doux: #5b6577; --bord: #dfe3ea; --blanc: #ffffff; --gris: #f4f6f9; --vert: #0f7b3f; --rouge: #d0342c; --ambre: #9a6700; /* Montserrat : géométrique, caractères bloc — la famille auto-hébergée la * plus proche du style du logo (services/portal/public/polices/polices.css, * licence SIL OFL 1.1, copiée ici dans services/console/polices/, aucun * CDN). Plage déclarée 400-700 : une graisse à 800 rend à 700, la plus * forte disponible dans cette police. */ --police: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } body { min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--texte); background: var(--blanc); font: 15px/1.6 var(--police); -webkit-font-smoothing: antialiased; } .marque { display: inline-flex; text-decoration: none; } .marque img { height: 27px; width: auto; display: block; } /* -------------------------------------------------------------------------- * Écran de connexion — deux colonnes, comme le portail * ------------------------------------------------------------------------ */ #racine.connexion { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .volet { display: flex; flex-direction: column; padding: 30px clamp(24px, 6vw, 72px) 34px; } .volet > main { width: 100%; max-width: 400px; margin: auto; padding: 44px 0; } .volet > main > h2 { font-size: 30px; line-height: 1.15; font-weight: 700; /* 700 = plage max de Montserrat, voir --police */ letter-spacing: -.03em; color: var(--encre); margin: 0 0 8px; text-transform: none; } .volet > footer { color: var(--doux); font-size: 13px; margin-top: auto; } .vitrine { position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; padding: 60px clamp(32px, 5vw, 76px); background: linear-gradient(135deg, transparent 62%, rgba(255,255,255,.05) 62%), linear-gradient(160deg, var(--bleu) 0%, var(--marine) 55%, #0a0d0e 100%); } .vitrine::before, .vitrine::after { content: ""; position: absolute; width: 0; height: 0; pointer-events: none; } /* Décorations teintées à l'accent du logo (#FAA820), deux opacités pour garder les deux triangles distincts — une seule couleur d'accent fournie, contrairement au bleu et au sarcelle d'origine. */ .vitrine::before { right: -60px; bottom: 6%; border-top: 210px solid transparent; border-bottom: 210px solid transparent; border-right: 200px solid rgba(250, 168, 32, .30); } .vitrine::after { right: 26%; bottom: -70px; border-top: 130px solid transparent; border-bottom: 130px solid transparent; border-right: 124px solid rgba(250, 168, 32, .14); } .propos { position: relative; max-width: 470px; } .propos h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.14; font-weight: 700; /* 700 = plage max de Montserrat, voir --police */ letter-spacing: -.03em; margin: 0 0 20px; color: #fff; text-transform: none; letter-spacing: -.03em; } /* #dcd3c8 sur le fond le plus clair du dégradé (var(--bleu), #293239) : 8.82:1 — largement au-dessus des 4.5:1 requis. */ .propos p { font-size: 16px; line-height: 1.65; color: #dcd3c8; margin: 0; } /* -------------------------------------------------------------------------- * Coquille applicative — rail, barre, contenu * ------------------------------------------------------------------------ */ #racine.appli { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 250px minmax(0, 1fr); } /* La colonne de droite empile la barre de titre et le contenu, et le contenu * prend ce qui reste. Sans cela, un écran court laisse son fond gris s'arrêter * au milieu de la page et du blanc dessous. */ #racine.appli > div { display: flex; flex-direction: column; } .rail { background: var(--blanc); border-right: 1px solid var(--bord); padding: 22px 0; display: flex; flex-direction: column; } .rail .marque { padding: 0 20px 20px; } .rail .sceau { margin: 0 20px 22px; padding: 7px 11px; border-radius: 5px; background: #fcefda; color: var(--bleu-sombre); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .rail nav { display: flex; flex-direction: column; } .rail nav a { display: block; padding: 10px 20px; color: var(--texte); text-decoration: none; font-size: 14.5px; font-weight: 600; border-left: 3px solid transparent; } .rail nav a:hover { background: var(--gris); } .rail nav a.actif { color: var(--bleu); background: #fcefda; border-left-color: var(--bleu); } .rail .pied { margin-top: auto; padding: 18px 20px 0; border-top: 1px solid var(--bord); font-size: 13px; color: var(--doux); } .rail .pied strong { display: block; color: var(--texte); font-size: 14px; } .rail .pied button { margin-top: 10px; width: 100%; } .barre { background: var(--blanc); border-bottom: 1px solid var(--bord); padding: 0 28px; height: 62px; display: flex; align-items: center; gap: 14px; } .barre h1 { /* 700 = plage max de Montserrat, voir --police */ font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--encre); margin: 0; } .barre .fil { color: var(--doux); font-size: 13.5px; } .contenu { background: var(--gris); padding: 24px 28px 60px; flex: 1; } .panneau { background: var(--blanc); border: 1px solid var(--bord); border-radius: 8px; padding: 20px; margin-bottom: 18px; } .panneau > h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--doux); margin: 0 0 16px; font-weight: 700; } .panneau > h2.titre { /* 700 = plage max de Montserrat, voir --police */ font-size: 19px; text-transform: none; letter-spacing: -.02em; color: var(--encre); font-weight: 700; } /* -------------------------------------------------------------------------- * Champs, boutons, messages — identiques au portail * ------------------------------------------------------------------------ */ h2 { margin: 0 0 14px; } label { display: block; font-size: 13.5px; font-weight: 600; color: var(--encre); margin: 16px 0 6px; } input, select { width: 100%; padding: 10px 12px; background: var(--blanc); border: 1px solid #c8cfda; border-radius: 6px; color: var(--texte); font: inherit; } input::placeholder { color: #9aa3b2; } /* Le code de vérification de la connexion, une case par chiffre (capture * « 02 » du propriétaire, 26/09/2026 — même motif que * services/accueil/style.css, implémenté séparément : rien de partagé entre * les deux services). `input:hover` / `input:focus` plus bas suffisent à * montrer l'état courant d'une case, sans en inventer un troisième pour * « complet ». */ .code-cases { display: flex; gap: 8px; margin-top: 4px; } .code-cases input { width: 42px; height: 46px; padding: 0; text-align: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Les intitulés de section dans l'écran générique des paramètres, et les * cases qu'il peut rendre. */ .intitule { display: block; margin: 22px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--doux); } label.case { display: flex; align-items: center; gap: 9px; margin: 8px 0 0; font-weight: 400; cursor: pointer; } label.case input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--bleu); cursor: pointer; } /* L'œil d'un champ de mot de passe. * * Posé DANS le champ et non à côté : une colonne de boutons alignés à droite * des saisies décalerait tous les champs voisins, et l'œil finirait par * appartenir visuellement au champ suivant. */ .secret { position: relative; display: block; } .secret input { padding-right: 42px; } .oeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 6px 8px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--doux); } .oeil:hover { background: transparent; } .oeil:focus-visible { outline: 2px solid var(--bleu); border-radius: 4px; } input:hover, select:hover { border-color: #9aa3b2; } input:focus, select:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(41, 50, 57, .16); } button { padding: 10px 20px; border: 0; border-radius: 6px; background: var(--bleu); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s; } button:hover:not(:disabled) { background: var(--bleu-sombre); } button:disabled { opacity: .5; cursor: not-allowed; } button.pleine { width: 100%; margin-top: 24px; } button.discret { background: transparent; border: 1px solid var(--bord); color: var(--texte); } button.discret:hover:not(:disabled) { background: var(--gris); } button.rouge { background: var(--rouge); } button.rouge:hover:not(:disabled) { background: #a92920; } /* UN CHOIX QUI MANQUE SE VOIT. Une liste déroulante vide au milieu d'une ligne remplie se lit comme une valeur facultative ; celle-ci empêche l'enregistrement. */ select.a-choisir { border-color: var(--ambre); color: var(--ambre); } .erreur { color: #a4201a; background: #fdf0ef; border: 1px solid #f6cfcc; } .succes { color: #0a5a2e; background: #eefaf2; border: 1px solid #bfe8ce; } .info { color: #0b3a7a; background: #eef4fe; border: 1px solid #c9dcfb; } /* AVERTISSEMENT : entre l'information et l'erreur. Rien ne s'est mal passé, mais l'écran fait autre chose que ce qu'on croit — l'ambre est la couleur qui arrête sans alarmer, et les trois autres teintes étaient prises. */ .avertissement { color: #7a4a06; background: #fdf6e7; border: 1px solid #f0dcae; } .erreur, .succes, .info, .avertissement { padding: 12px 14px; border-radius: 6px; margin: 14px 0; font-size: 14px; } .ligne { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .ligne > * { flex: 1; min-width: 170px; } .ligne > button { flex: 0 0 auto; min-width: 0; } .barre-outils { margin-bottom: 16px; } /* -------------------------------------------------------------------------- * Cases à cocher — le choix des métiers * * Une entreprise du bâtiment en exerce souvent plusieurs. Une liste déroulante * n'en laisse choisir qu'un, et rien à l'écran ne dit que c'était une limite * plutôt qu'une question. * * La largeur des cases est fixée explicitement : la règle générale des champs * les étirerait sur toute la colonne, et une case à cocher de 420 px n'est * plus une case à cocher. * ------------------------------------------------------------------------ */ .intitule { display: block; font-size: 13.5px; font-weight: 600; color: var(--encre); margin: 18px 0 6px; } .intitule .facultatif { font-weight: 400; color: var(--doux); } /* LA LISTE QUI S'OUVRE. Repliee elle tient sur une ligne et dit ce qui est retenu ; ouverte elle montre tout. Le catalogue des metiers grandit depuis la console : une liste a plat serait devenue illisible sans que personne ne decide rien. */ /* LES ONGLETS D'UNE FICHE. Un sujet a la fois, donc un seul bouton « Enregistrer » visible : c'est ce qui leve l'ambiguite sur ce que chaque bouton enregistre. */ .onglets { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--rule, #dde3ec); margin: -4px 0 24px; } .onglets .onglet { padding: 10px 16px; min-height: 44px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--doux); font: inherit; font-weight: 500; cursor: pointer; border-radius: 0; } .onglets .onglet:hover { color: var(--encre); background: var(--gris); } .onglets .onglet.actif { color: var(--bleu); border-bottom-color: var(--bleu); font-weight: 600; } /* Le contenu d'un onglet. NOM PROPRE, et non `.volet` : cette classe designe deja le panneau de l'ecran de connexion, dont le `display: flex` ecrasait le `display: none` de `[hidden]` — les quatre onglets s'affichaient alors en meme temps, et cliquer ne changeait rien. La regle `[hidden]` est explicite : elle ne depend plus de la feuille du navigateur, qu'une declaration d'auteur peut battre. */ .onglet-volet[hidden] { display: none; } .onglets .onglet:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; } .choix { position: relative; } .choix-tete { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 13px; gap: 10px; background: var(--blanc); color: var(--encre); border: 1px solid #c8cfda; border-radius: 6px; font: inherit; font-weight: 400; text-align: left; cursor: pointer; } .choix-tete:hover { background: var(--blanc); border-color: #9aa3b2; } .choix-tete:focus-visible { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(41, 50, 57, .16); } .choix-fleche { color: var(--doux); font-size: 12px; } .choix-tete[aria-expanded="true"] .choix-fleche { transform: rotate(180deg); } .choix-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; padding: 6px 12px; background: var(--blanc); border: 1px solid #dde3ec; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); } /* UNE ENTREE PAR LIGNE DANS LA LISTE DEROULANTE. `.cases` est une grille multi-colonnes, faite pour les cases posees a plat sous un titre. Dans une liste qui s'ouvre, elle cassait les libelles longs sur deux lignes — « Ravalement / Façades » au-dessus de son compteur — et l'oeil ne savait plus quelle mention allait avec quelle case. La regle existait deja cote inscription ; elle manquait ici. */ .choix-liste .cases { grid-template-columns: 1fr; gap: 0; } /* La mention reste SUR LA LIGNE, a cote du libelle : en bloc, elle doublait la hauteur de chaque entree pour trois mots. */ .choix-liste .cases em { display: inline; margin-left: 6px; } /* LE FILTRE D'UNE LONGUE LISTE DÉROULANTE, COLLÉ EN HAUT. Sans `sticky`, il défile avec les cases : sur 250 pays, il disparaît dès le premier geste de recherche, au moment même où on en a besoin. */ .choix-liste input[data-filtre] { position: sticky; top: 0; z-index: 1; background: var(--blanc); margin: 0 0 8px; } .cases { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .cases label.case { display: flex; align-items: baseline; gap: 9px; margin: 0; padding: 7px 0; font-size: 14px; font-weight: 400; cursor: pointer; } .cases input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--bleu); cursor: pointer; } .cases em { font-style: normal; color: var(--doux); font-size: 12.5px; display: block; } /* -------------------------------------------------------------------------- * Titres de section, dans un formulaire long * * Un formulaire de six blocs sans respiration se lit comme une liste de * champs : on ne voit plus ce qui va ensemble. L'espace au-dessus fait le * regroupement, le filet le confirme. * ------------------------------------------------------------------------ */ h3.section { font-size: 13.5px; font-weight: 600; color: var(--encre); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bord); } h3.section:first-of-type { margin-top: 24px; } /* -------------------------------------------------------------------------- * Jetons — le catalogue des métiers * * Une liste verticale de dix métiers pousserait l'éditeur sous la ligne de * flottaison : on choisit un métier POUR l'éditer, les deux doivent se voir * ensemble. Le compte de métriques est sur le jeton parce que c'est la seule * chose qu'on veut savoir avant de cliquer. * ------------------------------------------------------------------------ */ .jetons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .jetons button { padding: 8px 14px; font-weight: 400; } .jetons button b { font-weight: 600; color: var(--doux); margin-left: 6px; font-size: 12.5px; } .jetons button.choisi { border-color: var(--bleu); color: var(--bleu); background: var(--gris); } .jetons button.choisi b { color: var(--bleu); } /* -------------------------------------------------------------------------- * Tableau — la vue dense du manager * ------------------------------------------------------------------------ */ /* -------------------------------------------------------------------------- * La fenêtre de suivi du déploiement * * Modale plutôt que panneau : l'opérateur vient de décider, et ce qui suit est * la conséquence directe de son geste. La glisser en bas de fiche l'aurait * laissée hors de vue au moment précis où elle compte. * ------------------------------------------------------------------------ */ #suivi { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(11, 18, 32, .45); padding: 20px; animation: suivi-fond .25s ease-out; } @keyframes suivi-fond { from { opacity: 0; } to { opacity: 1; } } .suivi-carte { background: var(--blanc); border-radius: 10px; padding: 26px; width: 100%; max-width: 480px; box-shadow: 0 18px 48px rgba(11, 18, 32, .22); animation: suivi-carte .3s cubic-bezier(.22, .61, .36, 1); } @keyframes suivi-carte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .suivi-carte h2 { /* 700 = plage max de Montserrat, voir --police */ font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--encre); text-transform: none; margin: 0 0 18px; } ul.etapes { list-style: none; margin: 0 0 18px; padding: 0; } .etape { display: flex; gap: 13px; align-items: flex-start; padding: 0 0 16px; position: relative; } /* Le trait qui relie les étapes : il dit que c'est une suite, pas une liste * de cases indépendantes. */ .etape:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 2px; width: 2px; background: var(--bord); } .etape .puce { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; margin-top: 3px; background: var(--bord); position: relative; z-index: 1; } .etape strong { display: block; font-size: 14.5px; color: var(--doux); } .etape em { display: block; font-style: normal; font-size: 13px; color: var(--doux); } .etape.fait .puce { background: var(--vert); } .etape.fait strong { color: var(--encre); } .etape.encours .puce { background: var(--bleu); box-shadow: 0 0 0 4px rgba(41, 50, 57, .18); animation: etape-battement 1.6s ease-in-out infinite; } .etape.encours strong { color: var(--bleu); font-weight: 700; } @keyframes etape-battement { 0%, 100% { box-shadow: 0 0 0 3px rgba(41, 50, 57, .16); } 50% { box-shadow: 0 0 0 7px rgba(41, 50, 57, .07); } } @media (prefers-reduced-motion: reduce) { #suivi, .suivi-carte { animation: none; } .etape.encours .puce { animation: none; } } .apercu-logo { margin: 14px 0; padding: 18px; border: 1px dashed var(--bord); border-radius: 8px; background: var(--gris); text-align: center; } /* 96 = la borne haute du réglage de taille (tâche 49 ter, * `control/parametres.py`, paramètre `taille_logo`) : un garde-fou contre * l'éclair d'une image à sa taille native le temps que la poignée reçoive la * hauteur réglée, jamais une limite que la poignée pourrait dépasser. */ .apercu-logo img { max-height: 96px; max-width: 100%; display: block; } /* Enveloppe qui épouse exactement l'image (`inline-block`, `line-height: 0` * pour ne pas laisser l'interligne du texte l'agrandir) : la poignée s'y * ancre à l'angle bas-droit quelle que soit la taille réglée. */ .cadre-logo { display: inline-block; position: relative; line-height: 0; } .poignee-taille { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 999px; background: var(--blanc); border: 2px solid var(--bleu); cursor: ns-resize; touch-action: none; } .poignee-taille:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; } .badge-taille { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--encre); color: var(--blanc); font-size: 12px; font-weight: 700; vertical-align: middle; } .badge-taille[hidden] { display: none; } /* LE BANDEAU DE LA VITRINE — tâche 53, 27/09/2026. `.apercu-bandeau` réutilise * le cadre pointillé de `.apercu-logo` (même classe posée en plus sur le * conteneur, `console.js`) ; seule la hauteur maximale de l'image change : * 96 px convient à un logo, pas à une photo plein cadre au format large * (1983 × 793 par défaut) — 96 px l'aurait réduite à un timbre-poste. Aucune * poignée ici : le bandeau est toujours affiché en `cover`, une hauteur * réglable n'a pas de sens pour lui (voir le commentaire de `peindreBandeau`, * console.js). */ .apercu-bandeau img { max-height: 200px; max-width: 100%; display: block; margin: 0 auto; border-radius: 4px; } input[type="file"] { padding: 8px; background: var(--blanc); } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-weight: 700; color: var(--doux); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding: 0 12px 10px; border-bottom: 1px solid var(--bord); } td { padding: 12px; border-bottom: 1px solid #eef0f4; vertical-align: top; } tr.cliquable:hover { background: #f7f9fc; cursor: pointer; } tbody tr:last-child td { border-bottom: 0; } .etat { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; } .etat-en_attente_validation { background: #fdf3e0; color: #8a5a06; } .etat-approuve, .etat-provisionnement { background: #eef4fe; color: #0b3fb0; } .etat-provisionne, .etat-actif { background: #eefaf2; color: #0a5a2e; } .etat-refuse, .etat-echec_provisionnement { background: #fdf0ef; color: #a4201a; } .etat-soumis, .etat-en_attente_verification { background: var(--gris); color: var(--doux); } .vide { color: var(--doux); padding: 30px 0; text-align: center; } dl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 9px 18px; margin: 0; font-size: 14px; } dt { color: var(--doux); } dd { margin: 0; } .journal { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--doux); white-space: pre-wrap; background: var(--gris); border: 1px solid var(--bord); border-radius: 6px; padding: 14px; max-height: 320px; overflow: auto; } /* -------------------------------------------------------------------------- * Écrans étroits * ------------------------------------------------------------------------ */ /* L'OEIL : un dessin, et une cible qu'on peut viser au doigt. Il mesurait 27 px — sous les 44 px d'une cible tactile, donc rate une fois sur trois sur un telephone. */ .secret .oeil { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .secret .oeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 980px) { #racine.connexion { grid-template-columns: 1fr; } #racine.connexion .vitrine { display: none; } #racine.appli { grid-template-columns: 1fr; } .rail { border-right: 0; border-bottom: 1px solid var(--bord); } .rail nav { flex-direction: row; flex-wrap: wrap; } .rail nav a { border-left: 0; border-bottom: 3px solid transparent; } .rail nav a.actif { border-left: 0; border-bottom-color: var(--bleu); } .rail .pied { margin-top: 16px; } .contenu { padding: 18px 16px 50px; } dl { grid-template-columns: 1fr; gap: 2px 0; } dt { margin-top: 8px; } } /* LE TELEPHONE. Mesure a 390 px avant correction : la page debordait de 147 px, le tableau sortait de l'ecran, et rien ne le disait — on ne voyait simplement pas la moitie des colonnes. */ @media (max-width: 640px) { #racine.appli { min-width: 0; } .contenu { padding: 14px 12px 48px; min-width: 0; } .panneau { min-width: 0; } .panneau { padding: 16px 14px; border-radius: 10px; } /* Sans elle, le rail (item de grille) garde la largeur minimale de son