/* ========================================================================== COMEDIA · design system + vues Palette dérivée de COULEURS REFRENCE.jpeg (bleu nuit → bleu électrique). ========================================================================== */ /* -------------------------------------------------------------------------- Deux thèmes. Le clair est le défaut ; le bleu s'active par data-theme="bleu" sur . Toute couleur passe par un jeton : n'écrivez jamais une valeur en dur dans une règle, sinon elle ne suivra pas la bascule. -------------------------------------------------------------------------- */ :root{ /* --- palette de marque, identique dans les deux thèmes --- */ --ink-900:#030B2E; --ink-850:#04123F; --ink-800:#01104B; --blue-700:#00198D; --blue-600:#0027B5; --blue-500:#0038AC; --electric:#1B54FF; --electric-2:#2E6BFF; --sky:#3D7BFF; --sky-soft:#8FB6FF; --amber:#B7791F; --vert:#12855F; --rouge:#C1442E; --sur-accent:#FFFFFF; /* --- mesures, communes --- */ --r-s:8px; --r-m:12px; --r-l:14px; --r-xl:18px; --carte-l:232px; --transition:280ms cubic-bezier(.22,.68,.32,1); --police:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --police-lecture:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* ======================= THÈME CLAIR (défaut) ======================= */ --texte:#0C1424; --texte-2:#4A5769; --texte-3:#77839A; --texte-vif:#0C1424; --fond:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F7FD; --surface-vitre:linear-gradient(155deg,#FFFFFF,#FBFCFE); --surface-creuse:#F7F9FC; --panneau:#FFFFFF; --panneau-fond:linear-gradient(180deg,#FFFFFF 0%,#FAFBFE 100%); --voile-tete:linear-gradient(to bottom,rgba(255,255,255,.94),rgba(255,255,255,.72) 70%,transparent); --voile-pied:linear-gradient(to top,rgba(255,255,255,.98),rgba(255,255,255,.9)); --bord:#E4E9F2; --bord-fort:#C3D0E6; --accent-doux:#EAF0FF; --accent-doux-2:#DDE8FF; --ombre:0 1px 2px rgba(16,24,40,.04),0 10px 26px -14px rgba(16,24,40,.16); --ombre-forte:0 2px 4px rgba(16,24,40,.05),0 24px 54px -18px rgba(16,24,40,.24); --ombre-panneau:0 30px 80px -30px rgba(16,24,40,.26); --ombre-douce:0 12px 30px -20px rgba(16,24,40,.28); --degrade-titre:linear-gradient(96deg,#0C1424 8%,#2E6BFF 62%,#1B54FF 100%); --lueur: radial-gradient(120% 100% at 88% 78%,rgba(46,107,255,.10) 0%,rgba(46,107,255,.04) 38%,rgba(255,255,255,0) 72%), radial-gradient(90% 80% at 8% 4%,rgba(46,107,255,.09) 0%,rgba(255,255,255,0) 60%), linear-gradient(160deg,#FFFFFF 0%,#F8FAFE 45%,#F2F6FD 100%); --trait-ciel:70,110,190; --point-ciel:70,110,190; --opacite-ciel:.30; --mini-fond:#FFFFFF; --mini-lien:rgba(70,110,190,.34); --mini-centre:#1B54FF; --mini-relation:rgba(183,121,31,.85); --mini-noeud:rgba(70,110,190,.62); --mini-cadre:rgba(12,20,36,.38); /* pastilles de type et retours de quiz */ --p-outil-f:#EAF0FF; --p-outil-t:#1B54FF; --p-outil-b:#CBDCFF; --p-methode-f:#E6F7F1; --p-methode-t:#0F6B4D; --p-methode-b:#BFE7D8; --p-domaine-f:#FDF3E0; --p-domaine-t:#8A5A10; --p-domaine-b:#F0DDB8; --p-relation-f:#FDF3E0;--p-relation-b:#EBD7AE; --juste-f:#E6F7F1; --juste-t:#0F6B4D; --faux-f:#FDECEA; --faux-t:#A5321F; --carte-centre-f:linear-gradient(150deg,#FFFFFF,#F6F9FF); --carte-centre-o:0 2px 6px rgba(16,24,40,.05),0 26px 60px -26px rgba(27,84,255,.28); --carte-centre-halo:radial-gradient(130% 110% at 92% 0%,rgba(46,107,255,.10),transparent 66%); --bloc-accent-f:linear-gradient(150deg,#F1F6FF,#FAFCFF); --citation-f:#F7F9FC; --relation-f:linear-gradient(150deg,#FDF6E9,#FEFCF8); --anneau-focus:rgba(46,107,255,.20); --electric-fonce:#0F3FD8; } /* ========================== THÈME BLEU ========================== */ :root[data-theme="bleu"]{ --electric:#003EF1; --electric-2:#2E6BFF; --sky:#6FA8FF; --sky-soft:#A9C8FF; --amber:#FFC24D; --vert:#3DD9A0; --rouge:#FF7B7B; --texte:#EAF0FF; --texte-2:#B6C7EF; --texte-3:#7F94C8; --texte-vif:#FFFFFF; --fond:#030B2E; --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.085); --surface-vitre:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.028)); --surface-creuse:rgba(3,11,46,.62); --panneau:rgba(6,18,64,.82); --panneau-fond:linear-gradient(180deg,#050f38 0%,#040c2c 100%); --voile-tete:linear-gradient(to bottom,rgba(3,11,46,.94),rgba(3,11,46,.62) 70%,transparent); --voile-pied:linear-gradient(to top,rgba(3,11,46,.97),rgba(3,11,46,.86)); --bord:rgba(140,175,255,.20); --bord-fort:rgba(140,175,255,.42); --accent-doux:rgba(46,107,255,.28); --accent-doux-2:rgba(46,107,255,.36); --ombre:0 18px 44px -20px rgba(0,0,0,.78); --ombre-forte:0 30px 70px -24px rgba(0,20,90,.92); --ombre-panneau:0 40px 100px -30px rgba(0,0,0,.95); --ombre-douce:0 20px 50px -30px rgba(0,0,0,.9); --degrade-titre:linear-gradient(96deg,#fff 8%,var(--sky-soft) 52%,var(--electric-2) 100%); --lueur: radial-gradient(120% 100% at 88% 78%,rgba(0,62,241,.60) 0%,rgba(0,38,170,.28) 38%,rgba(3,11,46,0) 72%), radial-gradient(90% 80% at 8% 4%,rgba(0,25,141,.55) 0%,rgba(3,11,46,0) 60%), linear-gradient(160deg,#020826 0%,#03103F 45%,#041a63 100%); --trait-ciel:110,160,255; --point-ciel:150,190,255; --opacite-ciel:.36; --mini-fond:rgba(3,11,46,.62); --mini-lien:rgba(110,160,255,.30); --mini-centre:#6FA8FF; --mini-relation:rgba(255,194,77,.75); --mini-noeud:rgba(160,195,255,.6); --mini-cadre:rgba(255,255,255,.42); --p-outil-f:rgba(0,62,241,.24); --p-outil-t:#9CC0FF; --p-outil-b:rgba(0,62,241,.36); --p-methode-f:rgba(61,217,160,.13); --p-methode-t:#7FE7C4; --p-methode-b:rgba(61,217,160,.22); --p-domaine-f:rgba(255,194,77,.12); --p-domaine-t:#FFD285; --p-domaine-b:rgba(255,194,77,.22); --p-relation-f:rgba(255,194,77,.14);--p-relation-b:rgba(255,194,77,.28); --juste-f:rgba(61,217,160,.14); --juste-t:#C6F5E4; --faux-f:rgba(255,123,123,.12); --faux-t:#FFD5D5; --carte-centre-f:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); --carte-centre-o:0 34px 90px -34px rgba(0,50,220,.85),0 0 0 1px rgba(110,160,255,.14) inset; --carte-centre-halo:radial-gradient(130% 110% at 92% 0%,rgba(0,62,241,.45),transparent 66%); --bloc-accent-f:linear-gradient(150deg,rgba(0,62,241,.16),rgba(255,255,255,.03)); --citation-f:rgba(255,255,255,.04); --relation-f:linear-gradient(150deg,rgba(255,194,77,.07),rgba(255,255,255,.02)); --anneau-focus:rgba(46,107,255,.16); --electric-fonce:#1B54FF; } *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:var(--police); color:var(--texte); background:var(--fond); -webkit-font-smoothing:antialiased; overflow:hidden; } /* fond : le dégradé de la référence, bleu vif poussé vers le bas-droite */ .lueur{ position:fixed; inset:0; z-index:-2; pointer-events:none; background:var(--lueur); } #ciel{position:fixed; inset:0; z-index:-1; pointer-events:none} .saut-contenu{ position:fixed; top:-100px; left:16px; z-index:200; background:var(--electric); color:var(--sur-accent); padding:12px 18px; border-radius:0 0 12px 12px; text-decoration:none; font-weight:600; } .saut-contenu:focus{top:0} .noscript{max-width:640px;margin:18vh auto;padding:0 24px;text-align:center} .noscript h1{font-size:44px;letter-spacing:.22em;margin:0 0 12px} .noscript p{color:var(--texte-2);line-height:1.65} /* ========================================================================== Éléments communs ========================================================================== */ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input{font:inherit} :focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px} .btn-icone{ width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto; border:1px solid var(--bord);border-radius:11px;background:var(--surface); color:var(--texte-2);transition:var(--transition); } .btn-icone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round} .btn-icone:hover{color:var(--texte-vif);border-color:var(--bord-fort);background:var(--surface-2);transform:translateY(-1px)} .btn-icone.actif{color:var(--sur-accent);background:var(--accent-doux);border-color:var(--electric-2)} .btn-icone[data-favori="1"] svg{fill:var(--amber);stroke:var(--amber)} .annonce{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ========================================================================== En-tête ========================================================================== */ .tete[hidden]{display:none} .tete{ position:fixed;top:0;left:0;right:0;height:64px;z-index:60; display:flex;align-items:center;gap:18px;padding:0 18px; background:var(--voile-tete); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texte);flex:0 0 auto} .marque-signe{width:26px;height:26px} .signe-liens line{stroke:var(--electric-2);stroke-width:1.2;opacity:.75} .signe-coeur{fill:var(--electric-2)} .signe-satellite{fill:var(--sky)} .marque-mot{font-weight:800;letter-spacing:.16em;font-size:15px} .fil{ flex:1 1 auto;display:flex;align-items:center;gap:4px;min-width:0; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .fil::-webkit-scrollbar{display:none} .fil a,.fil span{ flex:0 0 auto;font-size:13px;color:var(--texte-3);text-decoration:none; padding:5px 9px;border-radius:8px;transition:var(--transition);white-space:nowrap; } .fil a:hover{color:var(--texte-vif);background:var(--surface-2)} .fil .actuel{color:var(--texte);font-weight:650} .fil .sep{padding:0;color:var(--texte-3);opacity:.5} .tete-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto} .bascule-vue{display:flex;border:1px solid var(--bord);border-radius:11px;overflow:hidden;background:var(--surface)} .bascule-vue button{padding:8px 13px;font-size:12.5px;color:var(--texte-3);transition:var(--transition)} .bascule-vue button:hover{color:var(--texte-vif)} .bascule-vue button.actif{background:var(--accent-doux-2);color:var(--electric);font-weight:600} /* ========================================================================== Écrans ========================================================================== */ main{position:fixed;inset:0} .ecran{position:absolute;inset:0} .ecran[hidden]{display:none} /* ---------- Accueil ---------- */ .ecran-accueil{overflow-y:auto;overflow-x:hidden} .accueil-inner{ max-width:1100px;margin:0 auto;padding:clamp(48px,9vh,110px) 24px 90px; display:flex;flex-direction:column;align-items:center; } .accueil-marque{text-align:center;animation:monte .7s cubic-bezier(.22,.68,.32,1) both} .grand-signe{width:92px;height:92px;margin-bottom:14px} .grand-signe .signe-liens line{stroke:var(--electric-2);stroke-width:1.3;opacity:.45} .grand-signe .signe-coeur{fill:var(--electric-2)} .titre-marque{ margin:0;font-size:clamp(46px,8.5vw,88px);font-weight:800;letter-spacing:.16em; background:var(--degrade-titre); -webkit-background-clip:text;background-clip:text;color:transparent; } .signature{margin:12px 0 0;color:var(--texte-2);font-size:clamp(14px,2vw,17px);letter-spacing:.02em} .recherche-centrale{ position:relative;width:min(620px,100%);margin:38px 0 8px; animation:monte .7s cubic-bezier(.22,.68,.32,1) 80ms both; } .recherche-centrale input{ width:100%;padding:19px 66px 19px 54px;border-radius:18px; background:var(--surface);border:1px solid var(--bord);color:var(--texte); font-size:16.5px;transition:var(--transition); box-shadow:var(--ombre-douce); } .recherche-centrale input::placeholder{color:var(--texte-3)} .recherche-centrale input:hover{border-color:var(--bord-fort)} .recherche-centrale input:focus{ outline:none;border-color:var(--electric-2);background:var(--surface-2); box-shadow:0 0 0 4px var(--anneau-focus); } .loupe{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px; fill:none;stroke:var(--texte-3);stroke-width:1.8;stroke-linecap:round;pointer-events:none} .recherche-centrale kbd{ position:absolute;right:18px;top:50%;transform:translateY(-50%); font:600 12px var(--police);color:var(--texte-3); border:1px solid var(--bord);border-radius:7px;padding:3px 9px;background:var(--surface-creuse); } .portes{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px; width:100%;margin:34px 0 0;animation:monte .7s cubic-bezier(.22,.68,.32,1) 160ms both; } .porte{ position:relative;overflow:hidden;text-align:left; padding:34px 30px 30px;border-radius:var(--r-xl); border:1px solid var(--bord);background:var(--surface-vitre); transition:var(--transition);box-shadow:var(--ombre); } .porte::after{ content:"";position:absolute;inset:auto -30% -60% auto;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(0,62,241,.55),transparent 68%);opacity:.7;transition:var(--transition); } .porte:hover{transform:translateY(-6px);border-color:var(--bord-fort);box-shadow:var(--ombre-forte)} .porte:hover::after{opacity:1;transform:scale(1.15)} .porte-etiquette{font-size:11.5px;letter-spacing:.2em;color:var(--sky);font-weight:700;text-transform:uppercase} .porte h2{margin:12px 0 8px;font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.01em;position:relative;z-index:1} .porte p{margin:0;color:var(--texte-2);font-size:14.5px;line-height:1.6;position:relative;z-index:1;max-width:44ch} .porte-pied{display:flex;align-items:center;gap:14px;margin-top:22px;position:relative;z-index:1;flex-wrap:wrap} .porte-compte{font-size:12.5px;color:var(--texte-3)} .porte-fleche{ display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:650;font-size:14px;color:var(--sur-accent); padding:10px 18px;border-radius:12px;background:var(--accent-doux-2);border:1px solid var(--bord-fort); transition:var(--transition); } .porte:hover .porte-fleche{background:var(--electric);border-color:var(--electric)} .acces-rapide{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:30px 0 0; animation:monte .7s cubic-bezier(.22,.68,.32,1) 240ms both} .puce{ display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px; border:1px solid var(--bord);background:var(--surface);color:var(--texte-2); font-size:13px;text-decoration:none;transition:var(--transition); } .puce:hover{color:var(--texte-vif);border-color:var(--bord-fort);background:var(--surface-2);transform:translateY(-2px)} .puce b{color:var(--texte);font-weight:650} .suggestions{width:100%;margin-top:56px;animation:monte .7s cubic-bezier(.22,.68,.32,1) 320ms both} .titre-section{ font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-3); font-weight:700;margin:0 0 16px; } .grille-suggestions{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px} .pied-accueil{margin:56px 0 0;font-size:12.5px;color:var(--texte-3);text-align:center;line-height:1.7} /* ========================================================================== Carte · composant unique réutilisé partout ========================================================================== */ .carte{ position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;width:100%; padding:16px 16px 14px;border-radius:var(--r-l); border:1px solid var(--bord); background:var(--surface-vitre); box-shadow:var(--ombre);transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition),background var(--transition); isolation:isolate; } .carte::before{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; background:radial-gradient(120% 90% at 100% 0%,rgba(0,62,241,.30),transparent 62%); opacity:0;transition:opacity var(--transition); } .carte:hover,.carte:focus-visible{transform:translateY(-4px);border-color:var(--bord-fort);box-shadow:var(--ombre-forte)} .carte:hover::before,.carte:focus-visible::before{opacity:1} .carte-haut{display:flex;align-items:center;gap:8px} .type-pastille{ font-size:10px;font-weight:750;letter-spacing:.13em;text-transform:uppercase; padding:4px 8px;border-radius:6px;background:rgba(110,160,255,.16);color:var(--sky); border:1px solid rgba(110,160,255,.22); } .type-outil{background:var(--p-outil-f);color:var(--p-outil-t);border-color:var(--p-outil-b)} .type-methode{background:var(--p-methode-f);color:var(--p-methode-t);border-color:var(--p-methode-b)} .type-domaine{background:var(--p-domaine-f);color:var(--p-domaine-t);border-color:var(--p-domaine-b)} .type-ressource{background:var(--surface-2);color:var(--texte-2)} .carte-niveau{margin-left:auto;font-size:10.5px;color:var(--texte-3);letter-spacing:.05em} .carte h3{margin:0;font-size:16px;line-height:1.28;font-weight:700;letter-spacing:-.005em} .carte-resume{margin:0;font-size:12.8px;line-height:1.55;color:var(--texte-2); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .carte-pied{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px} .compteur{ display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sky);font-weight:600; } .compteur svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8} .carte-explorer{ margin-left:auto;display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:650;color:var(--texte-2); padding:6px 11px;border-radius:9px;border:1px solid var(--bord);transition:var(--transition); } .carte:hover .carte-explorer{color:var(--sur-accent);background:var(--electric);border-color:var(--electric)} .carte-explorer svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .carte-feuille .carte-explorer{background:transparent} .carte-favori{ position:absolute;top:12px;right:12px;width:28px;height:28px;display:none;place-items:center; border-radius:8px;color:var(--texte-3); } .carte:hover .carte-favori,.carte-favori[data-actif="1"]{display:grid} .carte-favori svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6} .carte-favori[data-actif="1"]{color:var(--amber)} .carte-favori[data-actif="1"] svg{fill:currentColor} .carte-favori:hover{color:var(--amber);background:var(--surface-2)} /* ========================================================================== Scène / constellation ========================================================================== */ .ecran-explorer{top:64px} .scene{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none} .scene.attrape{cursor:grabbing} .scene:focus{outline:none} .liens{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .lien{stroke:rgba(110,160,255,.30);stroke-width:1.3;fill:none} .lien-transversal{stroke:rgba(255,194,77,.45);stroke-width:1.2;stroke-dasharray:5 5;fill:none} .lien-actif{stroke:rgba(140,190,255,.85);stroke-width:2} .monde{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform} .noeud{position:absolute;width:var(--carte-l);transform:translate(-50%,-50%)} .noeud-centre{width:330px;z-index:5} .noeud-parent{width:186px;opacity:.72} .noeud-parent:hover{opacity:1} .noeud-relation{width:196px;opacity:.85} .carte-centre{ padding:26px 26px 22px;border-radius:var(--r-xl); border-color:var(--bord-fort); background:var(--carte-centre-f); box-shadow:var(--carte-centre-o); } .carte-centre::before{opacity:1;background:var(--carte-centre-halo)} .carte-centre h3{font-size:26px;line-height:1.18} .carte-centre .carte-resume{font-size:14px;-webkit-line-clamp:5} .carte-centre .type-pastille{font-size:10.5px} .carte-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .bouton{ display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px; font-size:13px;font-weight:650;border:1px solid var(--bord);background:var(--surface); color:var(--texte);transition:var(--transition); } .bouton:hover{background:var(--surface-2);border-color:var(--bord-fort);transform:translateY(-1px)} .bouton-primaire{background:var(--electric);border-color:var(--electric);color:var(--sur-accent)} .bouton-primaire:hover{background:var(--electric-fonce);border-color:var(--electric-fonce)} .bouton svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} .carte-relation{ border-style:dashed;border-color:var(--p-relation-b); background:var(--relation-f); } .carte-relation .type-pastille{background:var(--p-relation-f);color:var(--amber);border-color:var(--p-relation-b)} /* apparition des enfants */ @keyframes apparait{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} @keyframes monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .noeud.entre{animation:apparait .42s cubic-bezier(.2,.75,.3,1) both} .outils-scene{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:20} .minicarte{ position:absolute;left:18px;bottom:18px;width:160px;height:104px;z-index:20; border:1px solid var(--bord);border-radius:12px;overflow:hidden;background:var(--surface-creuse); backdrop-filter:blur(8px); } .minicarte canvas{width:100%;height:100%;display:block} /* pile mobile */ .pile{position:absolute;inset:0;overflow-y:auto;padding:18px 16px 120px;display:flex;flex-direction:column;gap:14px} .pile-centre{margin-bottom:6px} .pile-titre{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-3); font-weight:700;margin:14px 0 2px} /* ========================================================================== Vue plan ========================================================================== */ .ecran-plan{top:64px;overflow-y:auto} .plan-inner{max-width:940px;margin:0 auto;padding:28px 24px 96px} .plan-entete{margin-bottom:26px} .plan-entete h1{margin:0 0 8px;font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.015em} .plan-entete p{margin:0;color:var(--texte-2);line-height:1.65;max-width:70ch} .arbre,.arbre ul{list-style:none;margin:0;padding:0} .arbre ul{margin-left:20px;padding-left:18px;border-left:1px solid var(--bord)} .branche{margin:2px 0} .branche-ligne{ display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:12px; transition:background var(--transition); } .branche-ligne:hover{background:var(--surface)} .bascule{ width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;margin-top:1px; border-radius:6px;color:var(--texte-3);border:1px solid transparent; } .bascule:hover{color:var(--sur-accent);background:var(--surface-2);border-color:var(--bord)} .bascule svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round; transition:transform var(--transition)} .branche.ouverte>.branche-ligne .bascule svg{transform:rotate(90deg)} .bascule.vide{visibility:hidden} .branche-corps{min-width:0;flex:1} .branche-titre{ display:inline-flex;align-items:center;gap:9px;color:var(--texte);text-decoration:none; font-size:14.5px;font-weight:600; } .branche-titre:hover{color:var(--sky)} .branche-resume{margin:3px 0 0;font-size:12.5px;color:var(--texte-3);line-height:1.5;max-width:80ch} .branche-compte{font-size:11px;color:var(--texte-3);font-weight:600; padding:2px 7px;border-radius:6px;background:var(--surface);border:1px solid var(--bord)} .branche>ul{display:none} .branche.ouverte>ul{display:block;animation:monte .3s cubic-bezier(.22,.68,.32,1) both} /* ========================================================================== Fiche ========================================================================== */ .fiche{ position:fixed;top:0;right:0;bottom:0;width:min(680px,100%);z-index:80; background:var(--panneau-fond); border-left:1px solid var(--bord);box-shadow:var(--ombre-panneau); overflow-y:auto;overscroll-behavior:contain; transform:translateX(100%);transition:transform 340ms cubic-bezier(.22,.68,.32,1); } .fiche.ouverte{transform:none} .fiche[hidden]{display:block;visibility:hidden} .fiche.ouverte{visibility:visible} .voile{position:fixed;inset:0;z-index:70;background:rgba(2,6,24,.55); backdrop-filter:blur(3px);opacity:0;transition:opacity var(--transition)} .voile.ouverte{opacity:1} .voile[hidden]{display:none} .fiche-contenu{padding:26px 34px 90px} .fiche-tete{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px} .fiche-tete .btn-icone{margin-left:auto} .fiche-chemin{font-size:11.5px;color:var(--texte-3);letter-spacing:.04em;margin:0 0 12px;line-height:1.6} .fiche-chemin a{color:var(--texte-3);text-decoration:none} .fiche-chemin a:hover{color:var(--sky)} .fiche h1{margin:2px 0 10px;font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.14} .fiche-resume{margin:0 0 22px;font-size:15.5px;line-height:1.65;color:var(--texte-2)} .fiche-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .bloc{margin:0 0 26px;padding:0} .bloc h2{ font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky); font-weight:750;margin:0 0 10px; } .bloc p{margin:0 0 10px;font-size:15px;line-height:1.72;color:var(--texte)} .bloc p:last-child{margin-bottom:0} .bloc-accent{ padding:18px 20px;border-radius:var(--r-m);border:1px solid var(--bord); background:var(--bloc-accent-f); } .bloc-accent p{font-size:15.5px} .liste-num{counter-reset:e;list-style:none;margin:0;padding:0} .liste-num li{ counter-increment:e;position:relative;padding:9px 0 9px 42px;font-size:14.5px;line-height:1.6; color:var(--texte);border-bottom:1px solid rgba(140,175,255,.10); } .liste-num li:last-child{border-bottom:0} .liste-num li::before{ content:counter(e);position:absolute;left:0;top:9px;width:26px;height:26px; display:grid;place-items:center;border-radius:8px;font-size:11.5px;font-weight:750; background:var(--accent-doux);color:var(--sky);border:1px solid rgba(110,160,255,.24); } .liste-puces{list-style:none;margin:0;padding:0} .liste-puces li{position:relative;padding:7px 0 7px 26px;font-size:14.5px;line-height:1.6;color:var(--texte)} .liste-puces li::before{ content:"";position:absolute;left:6px;top:15px;width:7px;height:7px;border-radius:2px; background:var(--sky);transform:rotate(45deg); } .liste-erreurs li::before{background:var(--rouge)} .liste-bonnes li::before{background:var(--vert)} .liste-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;list-style:none;margin:0;padding:0} .liste-chiffres li{padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--bord); background:var(--surface);font-size:13.5px;line-height:1.5;color:var(--texte-2)} .citation{ margin:0;padding:18px 22px;border-left:3px solid var(--electric-2); background:var(--citation-f);border-radius:0 var(--r-m) var(--r-m) 0; font-family:var(--police-lecture);font-size:15.5px;line-height:1.7;color:var(--texte); } .relations{display:flex;flex-wrap:wrap;gap:8px} .relation{ display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:11px; border:1px dashed rgba(255,194,77,.34);background:rgba(255,194,77,.07); color:var(--texte);font-size:13px;text-decoration:none;transition:var(--transition); } .relation:hover{background:rgba(255,194,77,.14);border-color:var(--amber);transform:translateY(-2px)} .relation em{font-style:normal;color:var(--amber);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700} .grille-enfants{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} /* quiz */ .quiz{border:1px solid var(--bord);border-radius:var(--r-l);padding:20px 22px;background:var(--surface)} .quiz-q{margin:0 0 14px;font-size:15.5px;font-weight:650;line-height:1.5} .quiz-choix{display:flex;flex-direction:column;gap:8px} .quiz-choix button{ text-align:left;padding:12px 15px;border-radius:12px;border:1px solid var(--bord); background:var(--surface-creuse);font-size:14px;line-height:1.45;transition:var(--transition); } .quiz-choix button:hover:not(:disabled){border-color:var(--bord-fort);background:var(--surface-2)} .quiz-choix button:disabled{cursor:default} .quiz-choix button.juste{border-color:var(--vert);background:var(--juste-f);color:var(--juste-t)} .quiz-choix button.faux{border-color:var(--rouge);background:var(--faux-f);color:var(--faux-t)} .quiz-explication{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--texte-2); padding-left:14px;border-left:2px solid var(--bord-fort)} .quiz-progres{font-size:11.5px;color:var(--texte-3);letter-spacing:.1em;text-transform:uppercase; font-weight:700;margin-bottom:12px} .fiche-vide{padding:30px 0;color:var(--texte-3);font-size:14px;line-height:1.7} /* ========================================================================== Palette de recherche ========================================================================== */ .palette{position:fixed;inset:0;z-index:120;display:flex;justify-content:center; padding:12vh 20px 20px;background:rgba(2,6,24,.66);backdrop-filter:blur(6px)} .palette[hidden]{display:none} .palette-boite{ width:min(680px,100%);max-height:72vh;display:flex;flex-direction:column; border-radius:var(--r-l);border:1px solid var(--bord-fort);overflow:hidden; background:var(--panneau-fond);box-shadow:var(--ombre-panneau); animation:monte .28s cubic-bezier(.22,.68,.32,1) both; } .palette-champ{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--bord)} .palette-champ input{ flex:1;padding:20px 16px 20px 52px;background:none;border:0;color:var(--texte);font-size:16px; } .palette-champ input:focus{outline:none} .palette-champ .loupe{left:20px} .btn-fermer{margin-right:14px;font-size:11px;color:var(--texte-3);border:1px solid var(--bord); border-radius:7px;padding:4px 9px} .btn-fermer:hover{color:var(--texte-vif);border-color:var(--bord-fort)} .palette-filtres{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--bord); overflow-x:auto;scrollbar-width:none} .palette-filtres::-webkit-scrollbar{display:none} .filtre{flex:0 0 auto;font-size:12px;padding:6px 12px;border-radius:9px;border:1px solid var(--bord); color:var(--texte-3);transition:var(--transition)} .filtre:hover{color:var(--texte-vif)} .filtre.actif{background:var(--accent-doux);border-color:var(--electric-2);color:var(--sur-accent);font-weight:600} .palette-resultats{overflow-y:auto;padding:8px} .resultat{ display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border-radius:12px; text-align:left;transition:background var(--transition); } .resultat:hover,.resultat.survole{background:var(--surface-2)} .resultat-corps{min-width:0;flex:1} .resultat h4{margin:0 0 3px;font-size:14.5px;font-weight:650} .resultat h4 mark{background:var(--accent-doux-2);color:var(--electric);border-radius:3px;padding:0 2px} .resultat p{margin:0;font-size:12.5px;color:var(--texte-3);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .resultat-chemin{font-size:11px;color:var(--texte-3);opacity:.75;margin-top:4px} .palette-vide{padding:38px 20px;text-align:center;color:var(--texte-3);font-size:14px;line-height:1.7} /* ========================================================================== Adaptatif ========================================================================== */ @media (max-width:900px){ .fiche-contenu{padding:22px 22px 90px} .bascule-vue button{padding:8px 10px;font-size:12px} } @media (max-width:760px){ .tete{height:56px;gap:10px;padding:0 12px} .marque-mot{display:none} .fil{font-size:12px} .ecran-explorer,.ecran-plan{top:56px} .outils-scene,.minicarte{display:none} .bascule-vue button[data-vue="constellation"]{display:none} .noeud{position:static} .accueil-inner{padding:34px 18px 70px} .portes{grid-template-columns:1fr} .fiche{width:100%;border-left:0} .grille-suggestions{grid-template-columns:1fr} .plan-inner{padding:20px 16px 80px} .arbre ul{margin-left:10px;padding-left:12px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important} #ciel{display:none} } /* ========================================================================== Compléments : lisibilité au zoom, étiquettes de relation, ligne de plan ========================================================================== */ /* Sous 0,72 de zoom le résumé devient illisible : on ne garde que les titres. */ .monde.condense .carte-resume, .monde.condense .carte-niveau{display:none} .monde.condense .noeud:not(.noeud-centre) .carte h3{font-size:17px} .monde.condense .noeud:not(.noeud-centre) .carte{padding:14px} .etiquette-relation{ position:absolute;top:-24px;left:0;right:0;text-align:center; font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:750; color:var(--amber);opacity:.85;pointer-events:none; } .branche-titre-ligne{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .branche-compte{cursor:default} button.branche-compte{cursor:pointer;color:var(--sky)} button.branche-compte:hover{background:var(--surface-2);border-color:var(--bord-fort)} /* la scène et la pile ne coexistent jamais */ .scene[hidden],.pile[hidden]{display:none} /* Pastille « remonter » : le parent est un repère, pas une carte concurrente. */ .noeud-parent{width:auto;opacity:1} .pastille-parent{ display:inline-flex;align-items:center;gap:9px;white-space:nowrap; padding:9px 16px 9px 12px;border-radius:999px; border:1px solid var(--bord);background:var(--panneau); color:var(--texte-2);font-size:13px;font-weight:600; box-shadow:var(--ombre);transition:var(--transition);backdrop-filter:blur(6px); } .pastille-parent svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .pastille-parent:hover{color:var(--texte-vif);border-color:var(--bord-fort);background:rgba(10,28,92,.92);transform:translateY(-2px)} /* Les pastilles d'accès rapide portent une icône : elle doit être calibrée. */ .puce{align-self:flex-start} .puce svg{ width:15px;height:15px;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; } .puce svg *{fill:none} /* En-tête de fiche : type + niveau à gauche, actions groupées à droite. */ .fiche-tete{align-items:center} .fiche-tete .carte-niveau{margin-left:0} .fiche-tete .btn-icone{margin-left:0} .fiche-tete .btn-icone:first-of-type{margin-left:auto} /* ========================================================================== Professeur COMEDIA · l'assistant de conversation ========================================================================== */ .appel-tuteur{ position:fixed;right:18px;bottom:18px;z-index:90; display:inline-flex;align-items:center;gap:9px; padding:12px 18px 12px 14px;border-radius:999px; background:linear-gradient(135deg,var(--electric-2),var(--electric)); border:1px solid rgba(140,180,255,.45);color:var(--sur-accent);font-size:14px;font-weight:650; box-shadow:0 18px 40px -16px rgba(0,50,220,.9);transition:var(--transition); } .appel-tuteur svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .appel-tuteur:hover{transform:translateY(-2px);box-shadow:0 24px 52px -18px rgba(0,60,255,1)} .appel-tuteur.actif{background:var(--surface-2);border-color:var(--bord-fort)} .tuteur{ position:fixed;right:18px;bottom:18px;z-index:95; width:min(452px,calc(100vw - 36px));height:min(660px,calc(100vh - 36px)); display:flex;flex-direction:column;overflow:hidden; border-radius:var(--r-xl);border:1px solid var(--bord-fort); background:var(--panneau-fond); box-shadow:var(--ombre-panneau); opacity:0;transform:translateY(18px) scale(.98); transition:opacity 240ms ease,transform 260ms cubic-bezier(.22,.68,.32,1); } .tuteur.ouvert{opacity:1;transform:none} .tuteur[hidden]{display:none} .tuteur-tete{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 18px; border-bottom:1px solid var(--bord);flex:0 0 auto} .tuteur-titre{display:flex;align-items:center;gap:11px;flex:1;min-width:0} .tuteur-titre strong{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em} .tuteur-sous{display:block;font-size:11.5px;color:var(--texte-3);margin-top:1px} .tuteur-pastille{width:9px;height:9px;border-radius:50%;background:var(--vert);flex:0 0 auto; box-shadow:0 0 0 4px rgba(61,217,160,.16)} .tuteur-journal{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:16px; overscroll-behavior:contain} .tuteur-accueil p{margin:0 0 12px;font-size:14px;line-height:1.65;color:var(--texte-2)} .tuteur-contexte{font-size:12.5px !important;color:var(--sky) !important} .tuteur-exemples{display:flex;flex-direction:column;gap:7px;margin-top:16px} .tuteur-exemple{ text-align:left;padding:11px 14px;border-radius:12px;border:1px solid var(--bord); background:var(--surface);font-size:13px;line-height:1.45;color:var(--texte-2); transition:var(--transition); } .tuteur-exemple:hover{color:var(--texte-vif);border-color:var(--bord-fort);background:var(--surface-2);transform:translateX(2px)} .bulle{display:flex;flex-direction:column;gap:5px} .bulle-qui{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:var(--texte-3)} .bulle-vous .bulle-qui{color:var(--sky)} .bulle-corps{font-size:14px;line-height:1.68;color:var(--texte)} .bulle-vous .bulle-corps{ padding:11px 15px;border-radius:14px 14px 14px 4px; background:var(--accent-doux);border:1px solid rgba(110,160,255,.24); align-self:flex-start;max-width:92%; } .bulle-corps p{margin:0 0 10px} .bulle-corps p:last-child{margin-bottom:0} .bulle-titre{margin:14px 0 7px;font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--sky);font-weight:750} .bulle-liste{margin:0 0 10px;padding-left:20px} .bulle-liste li{margin:5px 0;line-height:1.6} .bulle-corps code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px; background:var(--surface-2);border-radius:5px;padding:1px 5px; } .lien-carte{ display:inline;padding:1px 8px;margin:0 1px;border-radius:7px; background:var(--accent-doux);border:1px solid rgba(110,160,255,.34); color:var(--sur-accent);font-size:12.5px;font-weight:600;line-height:1.5;transition:var(--transition); } .lien-carte:hover{background:var(--electric);border-color:var(--electric)} .tuteur-pense{display:inline-flex;gap:4px;align-items:center;height:18px} .tuteur-pense::before,.tuteur-pense::after{ content:"";width:6px;height:6px;border-radius:50%;background:var(--sky); animation:pulse 1.1s infinite ease-in-out; } .tuteur-pense::after{animation-delay:.22s} @keyframes pulse{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}} .tuteur-echec{color:var(--rouge);font-size:13.5px} .tuteur-echec-aide{color:var(--texte-3);font-size:12.5px} .tuteur-etat{margin:0;padding:10px 18px;font-size:12.5px;color:var(--texte-3); border-top:1px solid var(--bord)} .tuteur-etat[hidden]{display:none} .tuteur-saisie{display:flex;align-items:flex-end;gap:9px;padding:12px 14px 14px; border-top:1px solid var(--bord);flex:0 0 auto} .tuteur-champ{ flex:1;resize:none;min-height:44px;max-height:160px;padding:12px 14px; border-radius:14px;border:1px solid var(--bord);background:var(--surface-2); color:var(--texte);font-size:14px;line-height:1.5;font-family:inherit; } .tuteur-champ::placeholder{color:var(--texte-3)} .tuteur-champ:focus{outline:none;border-color:var(--electric-2);background:var(--surface-2)} .tuteur-envoyer{ width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:13px; background:var(--electric);color:var(--sur-accent);transition:var(--transition); } .tuteur-envoyer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round} .tuteur-envoyer:hover{background:var(--electric-fonce);transform:translateY(-1px)} @media (max-width:760px){ .appel-tuteur{right:12px;bottom:12px;padding:11px 15px 11px 12px;font-size:13px} .tuteur{right:0;left:0;bottom:0;width:100%;height:88vh;border-radius:var(--r-xl) var(--r-xl) 0 0} } /* ========================================================================== Correctifs de mise en page : hauteurs déterministes, outils dégagés, cartes déplaçables à la main ========================================================================== */ /* Le placement des cartes est calculé sur des dimensions fixes : elles doivent donc l'être réellement, sinon les cartes se chevauchent. */ .noeud-enfant .carte, .noeud-relation .carte{height:210px;overflow:hidden} .noeud-enfant .carte h3, .noeud-relation .carte h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .noeud-centre .carte-centre{height:344px;overflow:hidden} .noeud-centre .carte-centre h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .noeud-centre .carte-centre .carte-resume{-webkit-line-clamp:3;flex:0 1 auto;min-height:0} .noeud-centre .carte-actions{margin-top:auto} /* Déplacement manuel : le curseur annonce la possibilité. */ .noeud-enfant,.noeud-relation,.noeud-centre{cursor:grab} .noeud .carte,.noeud .pastille-parent{cursor:inherit} .noeud .carte button,.noeud .carte .carte-favori,.noeud .bouton{cursor:pointer} .noeud.deplace{cursor:grabbing;z-index:30} .noeud.deplace .carte{ border-color:var(--electric-2); box-shadow:0 30px 70px -20px rgba(0,60,255,.95),0 0 0 2px rgba(110,160,255,.35); transform:none; } .noeud.deplace .carte::before{opacity:1} /* Les outils de zoom remontent au-dessus du bouton Professeur. */ .outils-scene{bottom:82px} .minicarte{bottom:82px} /* La constellation reste accessible sur téléphone : c'est un choix de vue, pas une fatalité. La pile de cartes reste le mode par défaut. */ @media (max-width:760px){ .bascule-vue button[data-vue="constellation"]{display:inline-block} .bascule-vue button{padding:7px 9px;font-size:11.5px} .ecran-explorer .outils-scene{display:flex;right:12px;bottom:74px} .ecran-explorer .minicarte{display:none} .scene .noeud{position:absolute} .appel-tuteur span{display:none} .appel-tuteur{padding:12px;border-radius:50%} } /* Un bouton masqué doit l'être malgré display:grid. */ .btn-icone[hidden],.bascule-vue button[hidden]{display:none} /* En mode condensé le résumé disparaît : on recentre le contenu pour que la carte reste une tuile lisible au lieu d'un cadre à moitié vide. */ .monde.condense .noeud:not(.noeud-centre) .carte{justify-content:center;gap:12px} .monde.condense .noeud:not(.noeud-centre) .carte h3{font-size:19px;-webkit-line-clamp:3} .monde.condense .noeud:not(.noeud-centre) .carte-pied{margin-top:0} /* Les cartes connexes sont secondaires : plus compactes que les sous-cartes. */ .noeud-relation .carte{height:158px} .noeud-relation .carte-resume{-webkit-line-clamp:2} .monde.condense .noeud-relation .carte h3{font-size:15px;-webkit-line-clamp:3;line-height:1.28} .monde.condense .noeud-relation .carte{gap:8px} /* Vue « Cartes » : une colonne lisible, pas une bande pleine largeur. */ .pile{max-width:880px;margin:0 auto} .minicarte[hidden],.outils-scene[hidden]{display:none} /* ========================================================================== Téléphone : l'en-tête passe sur deux lignes, sinon le fil d'Ariane est écrasé par le sélecteur de vue. ========================================================================== */ @media (max-width:760px){ .tete{ height:88px;flex-wrap:wrap;align-content:flex-start; padding:9px 12px 0;row-gap:2px;column-gap:8px; } .marque{order:1} .tete-actions{order:2;margin-left:auto} .fil{order:3;width:100%;flex:0 0 100%;height:30px;align-items:center} .fil a,.fil span{padding:4px 7px;font-size:12px} .bascule-vue button{padding:7px 8px;font-size:11px;letter-spacing:-.01em} .ecran-explorer,.ecran-plan{top:88px} .tuteur{height:84vh} } /* Très petits écrans : le sélecteur de vue passe en pictogrammes courts. */ @media (max-width:400px){ .bascule-vue button{padding:7px 7px;font-size:10.5px} .btn-icone{width:36px;height:36px} } /* ========================================================================== Bandeau défilant « Se former » et annuaire des formations ========================================================================== */ .bandeau-formations{ position:fixed;left:0;right:0;bottom:0;z-index:55; display:flex;align-items:center;gap:14px;height:56px;padding:0 16px; background:var(--voile-pied); border-top:1px solid var(--bord); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .ecran-accueil[hidden] ~ * .bandeau-formations{display:none} .bandeau-etiquette{ flex:0 0 auto;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; font-weight:750;color:var(--sky); padding:6px 11px;border-radius:8px; background:var(--accent-doux);border:1px solid rgba(110,160,255,.26); } .bandeau-fenetre{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent); -webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)} .bandeau-piste{display:flex;width:max-content;animation:defile 180s linear infinite} .bandeau-formations:hover .bandeau-piste, .bandeau-piste:focus-within{animation-play-state:paused} @keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}} .bandeau-liste{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0} .bandeau-lien{ display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap; padding:8px 18px;text-decoration:none;color:var(--texte-2);font-size:13px; border-right:1px solid rgba(140,175,255,.14);transition:color var(--transition); } .bandeau-lien strong{font-weight:650;color:var(--texte)} .bandeau-lieu{font-size:11.5px;color:var(--texte-3)} .bandeau-lien:hover strong{color:var(--sky)} .bandeau-lien:hover{color:var(--sky)} .bandeau-tout{ flex:0 0 auto;padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:650; border:1px solid var(--bord);background:var(--surface);color:var(--texte-2); transition:var(--transition); } .bandeau-tout:hover{color:var(--texte-vif);border-color:var(--bord-fort);background:var(--surface-2)} /* Le bouton Professeur remonte pour ne pas recouvrir le bandeau. */ body.sur-accueil .appel-tuteur{bottom:74px} body.sur-accueil .accueil-inner{padding-bottom:120px} /* ---------------------------- annuaire complet ---------------------------- */ .formations{ position:fixed;top:0;right:0;bottom:0;width:min(780px,100%);z-index:120; background:var(--panneau-fond); border-left:1px solid var(--bord);box-shadow:var(--ombre-panneau); overflow-y:auto;overscroll-behavior:contain; transform:translateX(100%);transition:transform 340ms cubic-bezier(.22,.68,.32,1); } .formations.ouvert{transform:none} .formations[hidden]{display:none} #voile-formations{z-index:110} .formations-contenu{padding:26px 34px 80px} .formations-tete{display:flex;align-items:flex-start;gap:16px;margin-bottom:30px} .formations-tete h1{margin:0 0 8px;font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.02em} .formations-sous{margin:0;font-size:14.5px;line-height:1.6;color:var(--texte-2);max-width:60ch} .formations-tete .btn-icone{margin-left:auto;flex:0 0 auto} .formations-bloc{margin:0 0 34px} .formations-bloc h2{ font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky); font-weight:750;margin:0 0 6px; } .formations-note{margin:0 0 14px;font-size:13px;color:var(--texte-3);line-height:1.55} .formations-liste{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px} .formation{ display:flex;flex-direction:column;gap:3px;height:100%; padding:14px 16px;border-radius:var(--r-m);text-decoration:none; border:1px solid var(--bord);background:var(--surface); transition:var(--transition); } .formation:hover{border-color:var(--bord-fort);background:var(--surface-2);transform:translateY(-2px)} .formation-nom{font-size:14.5px;font-weight:650;color:var(--texte);line-height:1.3} .formation-lieu{font-size:11.5px;color:var(--sky);letter-spacing:.03em} .formation-quoi{font-size:12.5px;color:var(--texte-3);line-height:1.5;margin-top:3px} .formations-avertissement{ margin:8px 0 0;padding:14px 16px;border-radius:var(--r-m); border:1px dashed rgba(255,194,77,.3);background:rgba(255,194,77,.06); font-size:12.5px;line-height:1.6;color:var(--texte-2); } @media (max-width:760px){ .bandeau-formations{height:50px;gap:9px;padding:0 10px} .bandeau-etiquette{display:none} .bandeau-tout{padding:7px 10px;font-size:11.5px} .bandeau-lien{padding:8px 14px;font-size:12px} body.sur-accueil .appel-tuteur{bottom:62px} .formations-contenu{padding:22px 20px 80px} .formations-liste{grid-template-columns:1fr} } /* Un défilement automatique est une gêne pour certaines personnes : on l'arrête et on rend la liste parcourable à la main. */ @media (prefers-reduced-motion:reduce){ .bandeau-piste{animation:none} .bandeau-fenetre{overflow-x:auto;mask-image:none;-webkit-mask-image:none} } /* ========================================================================== Bouton de couleur et ajustements du thème clair ========================================================================== */ .theme-accueil{ position:absolute;top:20px;right:24px;z-index:5; display:inline-flex;align-items:center;gap:8px; padding:7px 14px 7px 10px;border-radius:999px; border:1px solid var(--bord);background:var(--surface); color:var(--texte-2);font-size:12.5px;font-weight:600; box-shadow:var(--ombre);transition:var(--transition); } .theme-accueil:hover{border-color:var(--bord-fort);color:var(--texte);transform:translateY(-1px)} .theme-accueil span[class^="pastille-"]{ width:13px;height:13px;border-radius:50%;display:inline-block;flex:0 0 auto; border:1px solid var(--bord-fort); } .pastille-clair{background:#FFFFFF} .pastille-bleu{background:linear-gradient(140deg,#0A1B5C,#003EF1);margin-left:-6px} .theme-accueil-mot{letter-spacing:.02em} /* ---- l'écriture, resserrée et plus contrastée ---- */ .titre-marque{letter-spacing:.1em;font-weight:850} .porte h2,.carte h3,.fiche-titre{letter-spacing:-.018em} .carte h3{font-weight:700} .bloc h3,.titre-section{letter-spacing:.14em} /* ---- angles et ombres : plus proches d'une interface de travail ---- */ .carte,.porte,.bloc,.puce,.bouton,.btn-icone,.bascule-vue{border-radius:var(--r-l)} .porte,.carte-centre{border-radius:var(--r-xl)} .recherche-centrale input{border-radius:var(--r-xl)} /* ---- corrections propres au thème clair ---- */ :root:not([data-theme="bleu"]) .porte::after{opacity:.35} :root:not([data-theme="bleu"]) .porte:hover::after{opacity:.5} :root:not([data-theme="bleu"]) .carte::before{opacity:.35} :root:not([data-theme="bleu"]) .signe-liens line{opacity:.55} :root:not([data-theme="bleu"]) .grand-signe .signe-liens line{opacity:.3} :root:not([data-theme="bleu"]) .tete{border-bottom:1px solid var(--bord)} :root:not([data-theme="bleu"]) .bandeau-formations{border-top:1px solid var(--bord)} :root:not([data-theme="bleu"]) .porte-fleche{background:var(--electric);border-color:var(--electric);color:var(--sur-accent)} :root:not([data-theme="bleu"]) .bascule-vue button.actif{background:var(--electric);color:var(--sur-accent)} :root:not([data-theme="bleu"]) .btn-icone.actif{background:var(--electric);border-color:var(--electric);color:var(--sur-accent)} :root:not([data-theme="bleu"]) .btn-icone:hover{background:var(--surface-2);color:var(--texte)} :root:not([data-theme="bleu"]) .fil a:hover{background:var(--surface-2);color:var(--texte)} :root:not([data-theme="bleu"]) .puce:hover{color:var(--texte)} :root:not([data-theme="bleu"]) .bandeau-lien:hover{color:var(--texte)} @media (max-width:640px){ .theme-accueil{top:14px;right:16px;padding:6px 12px 6px 9px;font-size:12px} .theme-accueil-mot{display:none} } /* ========================================================================== Pages institutionnelles et information sur le stockage ========================================================================== */ .liens-legaux{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px; margin:14px 0 0;font-size:12.5px; } .lien-legal{ color:var(--texte-3);text-decoration:none;padding:4px 8px;border-radius:8px; transition:var(--transition);font-size:12.5px; } .lien-legal:hover{color:var(--texte);background:var(--surface-2)} .sep-legal{color:var(--texte-3);opacity:.5} .voile-centre{ display:flex;align-items:center;justify-content:center;padding:24px; overflow-y:auto; } .voile-centre[hidden]{display:none} .page-contenu{ position:relative;width:min(760px,100%);max-height:min(88vh,900px);overflow-y:auto; margin:auto;padding:28px 30px 34px;border-radius:var(--r-xl); border:1px solid var(--bord);background:var(--panneau-fond);box-shadow:var(--ombre-panneau); } .page-tete{ display:flex;align-items:flex-start;justify-content:space-between;gap:18px; padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--bord); } .page-tete h1{margin:0;font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.02em} .page-sous{margin:8px 0 0;color:var(--texte-2);font-size:14px;line-height:1.6;max-width:52ch} .page-bloc{margin-top:26px} .page-bloc h2{ margin:0 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--texte-3);font-weight:700; } .page-bloc p{margin:0 0 11px;font-size:14.8px;line-height:1.72;color:var(--texte)} .page-bloc p:last-of-type{margin-bottom:0} .page-note{ margin-top:12px !important;padding:12px 14px;border-radius:var(--r-m); border:1px dashed var(--bord-fort);background:var(--surface-creuse); font-size:13.5px !important;color:var(--texte-2) !important; } .page-bloc .bouton{margin-top:14px} .page-signature{ margin:36px 0 0;padding-top:18px;border-top:1px solid var(--bord); padding-right:76px; display:flex;flex-direction:column;gap:2px;text-align:right; } .page-signature-nom{font-size:11.5px;font-weight:700;color:var(--texte-2);letter-spacing:.04em} .page-signature-role{font-size:10.5px;color:var(--texte-3);letter-spacing:.02em} .avis-stockage{ position:fixed;left:16px;bottom:16px;z-index:65;width:min(460px,calc(100vw - 32px)); padding:22px 24px;border-radius:var(--r-xl); border:1px solid var(--bord);background:var(--panneau-fond);box-shadow:var(--ombre-panneau); animation:monte .45s cubic-bezier(.22,.68,.32,1) both; } .avis-stockage h2{margin:0 0 10px;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--texte)} .avis-stockage p{margin:0;font-size:13.6px;line-height:1.65;color:var(--texte-2)} .avis-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px} .avis-actions .bouton{flex:1 1 auto;justify-content:center} @media (max-width:760px){ .voile-centre{padding:12px} .page-contenu{width:100%;max-height:92vh;padding:22px 20px 28px;border-radius:var(--r-l)} .avis-stockage{left:10px;right:10px;bottom:10px;width:auto;padding:18px 18px 20px} } /* un panneau institutionnel masque les contrôles flottants */ body.page-ouverte .appel-tuteur, body.page-ouverte .avis-stockage{display:none} /* le bandeau d'information passe avant le bouton du professeur */ body.avis-ouvert .appel-tuteur{display:none} @media (min-width:900px){ body.avis-ouvert .appel-tuteur{display:inline-flex} } /* liens de contact et réalisations, dans les pages institutionnelles */ .page-courriel{margin:2px 0 0 !important;font-size:14.8px;line-height:1.72;color:var(--texte)} .page-courriel a{color:var(--electric);text-decoration:none;font-weight:650} .page-courriel a:hover{text-decoration:underline} .page-liens{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:14px; } .page-lien{ display:flex;flex-direction:column;gap:3px;text-decoration:none; padding:14px 16px;border-radius:var(--r-m); border:1px solid var(--bord);background:var(--surface); transition:var(--transition); } .page-lien:hover{ border-color:var(--bord-fort);background:var(--surface-2);transform:translateY(-2px); box-shadow:var(--ombre); } .page-lien-nom{font-size:14.5px;font-weight:700;color:var(--texte);letter-spacing:-.01em} .page-lien-quoi{font-size:13px;line-height:1.5;color:var(--texte-2)} .page-lien-url{font-size:11.5px;color:var(--electric);letter-spacing:.01em;margin-top:3px}