@font-face{font-family:'Plus Jakarta Sans';src:url(/statique/plus-jakarta-sans-400-221a4135d06a.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'Plus Jakarta Sans';src:url(/statique/plus-jakarta-sans-600-8872bb5c9111.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'Plus Jakarta Sans';src:url(/statique/plus-jakarta-sans-700-2050755bf475.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}:root{--marque:#2CCED2;--marque-fonce:#C41E23;--marque-teinte:#FDECEC;--titre:'Plus Jakarta Sans',system-ui,"Segoe UI",Helvetica,Arial,sans-serif;--corps:'Plus Jakarta Sans',system-ui,"Segoe UI",Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r1:8px;--r2:12px;--r3:16px;--fond:#F5F5F8;--blanc:#FFFFFF;--surface:#F1F1F4;--survol:#F8F8FA;--rail:#F8F8FA;--encre:#14131A;--n100:#F8F8FA;--n200:#F1F1F4;--n300:#ECECF0;--n400:#D2D2DA;--n500:#9A9AA4;--n600:#82828C;--n700:#6A6A74;--n800:#54545F;--action:#3158d9;--action600:#2a4dbd;--action700:#26449f;--action100:#ecf1ff;--action200:#dbe4ff;--rouge:#E2272C;--rouge600:#C41E23;--rouge700:#9E181C;--rouge100:#FDECEC;--rouge200:#F8D6D7;--rouge300:#EFAAAC;--vert100:#dcfce7;--vert700:#166534;--ambre700:#b45309;--ambre100:#fef3c7;--e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:20px;--e6:24px;--e8:32px;--ombre:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);--ombre-legere:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);--police:'Plus Jakarta Sans',system-ui,"Segoe UI",Helvetica,Arial,sans-serif;--accent:#E2272C;--accent200:#FDECEC;--accent700:#C41E23;--cna:#0B6E72;--cna-fonce:#08575A;--cna-pale:#E8F4F4;--cna-alerte:#D9480F;--cna-alerte-fond:#FFF4EE;--cna-alerte-texte:#B4380B;--rc-accent:#0B6E72;--rc-accent-survol:#08575A;--rc-pale:#E8F4F4;--rc-pale2:#F3FAFA;--rc-texte:#1D2327;--rc-doux:#5B6670;--rc-tres-doux:#6B7680;--rc-trait:#ECEEF0;--rc-trait2:#E3E6E8;--rc-trait3:#D5DADD;--rc-pied:#FAFBFB;--rc-bulle:#F2F4F5;--rc-fond:#FFFFFF;--urgent:#FF5E4D;--sur-urgent:#14131A;--cx-fond:#FFFFFF;--cx-texte:#1D2327;--cx-doux:#5B6670;--cx-tres-doux:#6B7680;--cx-trait:#ECEEF0;--cx-bord:#D5DADD;--cx-carte:#E3E6E8;--cx-panneau:#FAFBFB;--cx-accent:#0B6E72;--cx-accent-survol:#08575A;--cx-sur-accent:#FFFFFF;--cx-pale:#E8F4F4;--cx-neutre:#F1F3F4;--cx-alerte-fond:#FFF4EE;--cx-alerte-texte:#9A3412;--cx-alerte-bord:#E0A58A;--tk-accent:#0B6E72;--tk-accent-survol:#08575A;--tk-pale:#E8F4F4;--tk-texte:#1D2327;--tk-doux:#5B6670;--tk-trait:#E3E6E8;--tk-fond:#fff;--tk-alerte-fond:#FFF4EE;--tk-alerte-texte:#B4380B;--tk-bord-champ:#D5DADD;--tk-bord-neutre:#C9D0D4;--tk-bord-tableau:#ECEEF0;--tk-trait-ligne:#F1F3F4;--tk-entete-fond:#FAFBFB;--tk-sous:#6B7680;--tk-ligne-cochee:#F3FAFA;--tk-puce-fond:#1D2327;--tk-puce-texte:#fff;--tk-plein-fond:#0B6E72;--tk-plein-texte:#fff;--tk-cours-fond:#FFF4E5;--tk-cours-texte:#B4380B;--tk-attente-fond:#EEF0F2;--tk-attente-texte:#4A545C;--tk-retard-fond:#FDECEA;--tk-retard-texte:#A32A12;--cp-accent:#0B6E72;--cp-accent2:#08575A;--cp-trait:#E3E6E8;--cp-doux:#5B6670;--cp-orange:#FFF4EE;--cp-orange-trait:#F0B99C;--mq-fond:#FFFFFF;--mq-manque-fond:#FFF4EE;--mq-manque-bord-doux:#F0B99C;--mq-manque-texte:#B4380B;--mq-texte:#1D2327;--mq-trait:#ECEEF0;--mq-bord:#D5DADD;--mq-attention-bord:#e08a00;--mq-attention-fond:#fff4e0;--mq-texte-doux:#5B6670;--mq-texte-discret:#6B7680;--mq-fond-doux:#F1F3F4;--mq-fond-entete:#FAFBFB;--mq-accent:#0B6E72;--mq-accent-pale:#E8F4F4;--mq-texte-estompe:#A0A8AE;--mq-bord-neutre:#C9D0D4;--mq-accent-tres-pale:#F3FAFA;--mq-manque-bord:#E0A58A;--mq-manque-bord-fort:#D9480F;--mq-trait-fort:#E3E6E8;--action-profond:#064a4d;--cna-pale-appuyee:#CFE9EA;--sombre-filet-tableau:rgba(255,255,255,.12);--sombre-filet-carte:rgba(255,255,255,.08);--sombre-survol-carte:rgba(255,255,255,.04);--sombre-pastille:rgba(255,255,255,.1);--sombre-bord-menu:rgba(255,255,255,.14);--sombre-choix-actif:rgba(255,255,255,.06);--sombre-bord-recherche:rgba(255,255,255,.2);--sombre-menu-fond:#1c1b24;--ombre-menu-choix:rgba(29,35,39,.14);--ombre-couverture:rgba(29,35,39,.12);--lecture-bouton-voile:rgba(255,255,255,.92);--ombre-lecture-bouton:rgba(0,0,0,.18);--lecture-grand-voile:rgba(255,255,255,.94);--ombre-lecture-grand:rgba(0,0,0,.2);--duree-voile:rgba(29,35,39,.78);--ombre-lecture-survol:rgba(0,0,0,.28);--voile-fenetre:rgba(29,35,39,.38);--ombre-fenetre:rgba(29,35,39,.22);--teinte-jour-choisi:rgba(0,0,0,.02);--ombre-menu-flottant:rgba(0,0,0,.14);--lecteur-fond:#000;--rc-texte2:#4A5560;--vert600:#1E7B4A;--orange600:#B26A00;} *{box-sizing:border-box} /* ⚠️ (31/10/2026, tour 3) UN ÉLÉMENT « hidden » RESTE CACHÉ, QUELLE QUE SOIT SA CLASSE. La règle du navigateur (« [hidden]{display:none} ») perd contre toute classe qui pose un « display » : le bouton « Pipette » de la palette des parcours (« .bouton-doux{display:inline-flex} ») restait visible, et inutile, dans un navigateur sans pipette. Une cinquantaine de règles « .x[hidden]{display:none} » réparaient le défaut écran par écran. Épreuve : tests/chat/test_champs_couleur_r3_31_10.py (toutes les classes qui posent un « display »). */ [hidden]{display:none!important} /* ── Les barres de defilement des panneaux ─────────────────────────── */ /* ⚠️ UNE BARRE NATIVE DANS UN PANNEAU INTERNE EST CE QUI SE VOIT LE PLUS MAL. Sous Windows, Chrome y dessine deux FLECHES et une piste grise pleine largeur : au milieu d'une application, ca ressemble a une fenetre d'un autre siecle. Vu par Richard en se connectant, pas dans une epreuve. ⚠️ LA CONSOLE N'EN STYLE AUCUNE, ET CE N'EST PAS UNE DIVERGENCE : ses pages font defiler la FENETRE, ou la barre du navigateur est a sa place. Le chat est une coquille a deux panneaux — c'est une forme que la console n'a pas, donc un traitement qu'elle n'a pas besoin d'avoir. ⚠️ LES DEUX FAMILLES DE PROPRIETES, parce qu'aucune ne suffit seule : « scrollbar-width » est la norme et vaut pour Firefox ; les selecteurs « ::-webkit-scrollbar » sont ce que Chrome et Edge lisent vraiment. */ .thr,.cote-liste,.grille-choix,.vol-menu,.rendu pre{ scrollbar-width:thin;scrollbar-color:var(--n400) transparent} .thr::-webkit-scrollbar,.cote-liste::-webkit-scrollbar, .grille-choix::-webkit-scrollbar,.vol-menu::-webkit-scrollbar, .rendu pre::-webkit-scrollbar{width:10px;height:10px} .thr::-webkit-scrollbar-track,.cote-liste::-webkit-scrollbar-track, .grille-choix::-webkit-scrollbar-track,.vol-menu::-webkit-scrollbar-track, .rendu pre::-webkit-scrollbar-track{background:transparent} /* ⚠️ UN BORD TRANSPARENT ET « background-clip », plutot qu'une barre plus etroite : le curseur garde ses dix pixels a saisir, et n'en montre que quatre. Une barre de 4 px est jolie et introuvable a la souris. */ .thr::-webkit-scrollbar-thumb,.cote-liste::-webkit-scrollbar-thumb, .grille-choix::-webkit-scrollbar-thumb,.vol-menu::-webkit-scrollbar-thumb, .rendu pre::-webkit-scrollbar-thumb{background:var(--n400); border-radius:999px;border:3px solid transparent;background-clip:padding-box} .thr::-webkit-scrollbar-thumb:hover, .cote-liste::-webkit-scrollbar-thumb:hover, .grille-choix::-webkit-scrollbar-thumb:hover, .vol-menu::-webkit-scrollbar-thumb:hover, .rendu pre::-webkit-scrollbar-thumb:hover{background:var(--n500); background-clip:padding-box} /* ⚠️ ET LES FLECHES DISPARAISSENT. C'est elles qu'on voit en premier, et personne ne clique sur une fleche de defilement depuis quinze ans. */ .thr::-webkit-scrollbar-button,.cote-liste::-webkit-scrollbar-button, .grille-choix::-webkit-scrollbar-button, .vol-menu::-webkit-scrollbar-button, .rendu pre::-webkit-scrollbar-button{display:none;width:0;height:0} .thr::-webkit-scrollbar-corner,.cote-liste::-webkit-scrollbar-corner, .grille-choix::-webkit-scrollbar-corner{background:transparent} /* ⚠️⚠️ LA LISTE DES DISCUSSIONS : UNE BARRE INVISIBLE AU REPOS (02/10/2026). Richard : « je n'aime pas la barre de scroll au niveau des discussions ». Elle se montre, fine, au survol de la liste ou quand le clavier y est ; la liste défile toujours (molette, clavier, glisser). Le fil garde la sienne. ⚠️ CHROME 121 ET PLUS LIT « scrollbar-color » DÈS QU'IL EST POSÉ, ET IGNORE ALORS « ::-webkit-scrollbar » : c'est cette couleur qu'on éteint (mesurée dans Chromium, style calculé). La largeur ne change pas : rien ne saute. Au survol et au clavier, la règle commune (plus haut) revient. La règle « -webkit- » suit, pour les navigateurs qui ne lisent qu'elle. */ .cote-liste:not(:hover):not(:focus-within){ scrollbar-color:transparent transparent} .cote-liste:not(:hover):not(:focus-within)::-webkit-scrollbar-thumb{ background:transparent} /* ⚠️⚠️ ET SANS FLÈCHES AU SURVOL (02/10/2026, revue). « scrollbar-width » posé, Chromium (151, mesuré) dessine la barre fine du système, AVEC ses deux flèches, et ignore « ::-webkit-scrollbar-button{display:none} ». Là où les « ::-webkit-scrollbar » existent (Chrome, Edge, Safari), la liste rend les deux propriétés à « auto » : ce sont les règles « -webkit- » qui dessinent (10 px, un curseur de 4, ni piste ni flèches), transparentes au repos. Firefox, qui ne les connaît pas, garde la barre fine. Le fil ne change pas. */ @supports selector(::-webkit-scrollbar){ .cote-liste,.cote-liste:not(:hover):not(:focus-within){ scrollbar-width:auto;scrollbar-color:auto} } /* ── Les champs : la regle de la console, mot pour mot ──────────────── */ /* ⚠️ ELLE EST POSEE ICI, EN TETE, pour que chaque ecran du chat en herite au lieu d'inventer son propre champ. Le chat en avait quatre — un par ecran — et pas un ne ressemblait a la console. */ /* ⚠️ (31/10/2026, tour 3, rejeu réel) Un champ COULEUR n'est pas un champ texte : cette règle lui imposait « min-height:38px ; padding:8px 12px », et le témoin « Autre couleur… » des groupes de tickets n'était qu'un trait de 6 px (la charte de la discussion et la palette des parcours perdaient de même leur marge). Il est exclu DANS le dernier « :not() » : la règle garde sa spécificité (0,4,1), et les règles d'écran à égalité qui la suivent (« .cr-page .cr-carte .cr-champ input:not(.cr-menu-cherche) ») gagnent toujours. Épreuve : tests/chat/test_champs_couleur_r3_31_10.py. */ input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit],[type=color]), select,textarea{font:inherit;font-size:14px;min-height:38px;padding:8px 12px; color:var(--encre);background:var(--n100);border:1px solid var(--n300); border-radius:var(--r1);max-width:100%} input:hover,select:hover,textarea:hover{border-color:var(--n400)} input:focus,select:focus,textarea:focus{background:var(--blanc); border-color:var(--action);outline:none;box-shadow:0 0 0 3px var(--action200)} input[type=checkbox],input[type=radio]{width:16px;height:16px;margin:0; accent-color:var(--encre);cursor:pointer} html,body{height:100%} body{margin:0;background:var(--fond);color:var(--encre); font:15px/1.55 var(--police)} a{color:var(--action);text-decoration:none} a:hover{color:var(--action600);text-decoration:underline} button{font:inherit} /* ⚠️ LE HALO DU FOCUS EST BLEU, COMME CELUI D'UN CHAMP (maquette validée) : le rouge dit le danger, et le focus n'en est pas un. */ :focus-visible{outline:2px solid var(--action);outline-offset:2px} ::placeholder{color:var(--n600)} /* ══════════════════════════════════════════════════════════════════════ LA COQUILLE — la barre de gauche et la colonne de lecture ══════════════════════════════════════════════════════════════════════ ⚠️ LA MAQUETTE VALIDÉE (27/09/2026), RETRANSCRITE EN CLASSES. Son HTML portait tout en attributs « style » : la politique de ce chat les refuse EN SILENCE. Chaque valeur passe donc ici, et par les SEULS jetons de la charte — une couleur écrite en dur est un jeton que la console ne suit pas. ⚠️ UNE SEULE BARRE POUR TOUS LES ÉCRANS : le fil, Mes contenus, les relectures, le référentiel, les modèles. Deux barres divergeaient déjà — celle du fil listait les logiciels, l'autre non. */ /* ⚠️ CACHÉ À L'ŒIL, PAS AU LECTEUR D'ÉCRAN. « display:none » retirerait aussi le texte de l'arbre d'accessibilité — et un bouton-icône sans nom se lit « bouton », rien de plus. */ .cache{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ⚠️ LA CASE QUI OUVRE LE TIROIR ET REPLIE LA BARRE, SANS SCRIPT. Invisible mais focalisable : au clavier, sans script, c'est elle qu'on atteint. Sur ordinateur, cochée veut dire « barre repliée » ; sur téléphone, « tiroir ouvert ». Les deux états par défaut sont ceux qu'on veut voir en arrivant. ⚠️ « input…[type=checkbox] », PAS « .bascule » SEUL : la règle des cases (« input[type=checkbox]{16 px} ») pesait plus lourd, et la case invisible occupait 16 px dans le coin de l'écran. */ input.bascule[type=checkbox]{position:absolute;top:0;left:0;width:1px; height:1px;margin:0;opacity:0;pointer-events:none} /* ⚠️ LA PAGE NE DÉFILE JAMAIS, SES PANNEAUX SI (29/09/2026). Richard : « faire disparaître le scroll sur la page d'accueil ». La coquille fait la hauteur de l'écran VISIBLE (« dvh » : sur téléphone, « 100vh » compte aussi la barre d'adresse repliée, et la page glissait de sa hauteur) ; ce qui a besoin de défiler — la liste des discussions, le fil — défile seul. ⚠️ (31/10/2026, test Chrome, tour 5) « clip », pas seulement « hidden » : un conteneur « hidden » se fait encore défiler par le navigateur (saut vers une ancre « #groupe-N », « scrollIntoView ») ; l'application remontait de 633 px sur la page des groupes, deux tiers d'écran vides, et la molette ne rattrapait rien. Seul le conteneur qui défile se déplace. (« hidden » reste pour un navigateur qui ne lit pas « clip ».) */ .app{display:flex;height:100vh;height:100dvh;width:100%;overflow:hidden;overflow:clip} .cote{flex:0 0 264px;width:264px;min-width:0;display:flex;flex-direction:column; background:var(--surface);border-right:1px solid var(--n300)} .cote-haut{padding:14px 12px 8px;display:flex;flex-direction:column;gap:12px} .cote-marque{display:flex;align-items:center;justify-content:space-between; gap:8px} /* ⚠️ (30/09/2026) Richard : « le menu de gauche est trop petit. Il faut retirer le logo et "Votre assistant" pour remonter le tout et gagner de la lisibilité sur les discussions ». « Nouvelle discussion » prend la ligne du haut, à côté du bouton qui replie la barre. */ .cote-marque .neuve{flex:1 1 auto;width:auto;min-width:0} /* ⚠️ LE SCEAU DE LA CONSOLE, PAS UN CARRE DE DIX PIXELS. Ce qu'on reconnait d'un produit est la forme des choses — la pastille, le rayon, l'ombre — pas la valeur hexadecimale de son rouge. Les deux ecrans portaient le meme rouge et ne se ressemblaient toujours pas. */ .marque{display:flex;align-items:center;gap:10px} .marque i{width:32px;height:32px;border-radius:9px;background:var(--encre); display:grid;place-items:center;flex:none;position:relative} .marque i::after{content:"";width:11px;height:11px;border-radius:3px; background:var(--accent)} .marque b{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2} .marque .sous{display:block;font-size:12px;color:var(--n700);margin-top:1px; font-weight:400;letter-spacing:0} /* ⚠️ LE LOGO DE L'ORGANISATION A LA PLACE DU CARRE (30/09/2026) : au-dessus de « Votre assistant », parce qu'un logo en longueur ne tient pas a cote dans une barre de 264 px qui porte aussi ses deux boutons. Hauteur fixee par le serveur, largeur bornee a la place laissee. Le texte d'un logo SVG en « currentColor » prend l'encre de la page. */ .marque{flex-direction:column;align-items:flex-start;gap:6px;min-width:0} .logo-org{display:flex;align-items:center;min-height:30px;max-width:100%; color:var(--encre)} .tete-nom .logo-org{min-height:0} .logo-org .logo{display:block;max-width:100%;height:auto} .marque .logo-org+b{font-size:13px;font-weight:600;color:var(--n700)} /* ⚠️ QUARANTE-QUATRE PIXELS, PARTOUT OÙ L'ON TOUCHE. C'est la cible qu'un doigt atteint sans viser ; les pastilles de 26 px d'avant se ratent. */ .icone-btn{width:44px;height:44px;flex:none;display:inline-flex; align-items:center;justify-content:center;padding:0;border:none; background:transparent;color:var(--n800);border-radius:10px;cursor:pointer; position:relative;text-decoration:none;list-style:none;font:inherit} .icone-btn::-webkit-details-marker{display:none} .icone-btn:hover{background:var(--n300);color:var(--encre);text-decoration:none} .neuve{display:flex;align-items:center;gap:8px;width:100%;min-height:44px; padding:0 18px;background:var(--encre);color:var(--fond); border:1px solid var(--encre);border-radius:10px;font-size:14px; font-weight:600;text-align:left;cursor:pointer;text-decoration:none; white-space:nowrap} .neuve:hover{background:var(--action);border-color:var(--action); color:var(--blanc);text-decoration:none} .rech{min-height:46px;display:flex;align-items:center;gap:8px;margin:0; padding:0 12px;background:var(--n100);border:1px solid var(--n300); border-radius:10px;color:var(--n800)} .rech svg{flex:none} .rech:focus-within{background:var(--blanc);border-color:var(--action); box-shadow:0 0 0 3px var(--action200)} /* ⚠️ PAR SON IDENTIFIANT, ET CE N'EST PAS UNE COQUETTERIE. La règle des champs posée en tête (« input:not(…):not(…)… ») pèse quatre attributs : une classe ne la bat pas, et le champ de recherche reprenait bord et fond gris DANS son cadre. */ #rech{flex:1;min-width:0;min-height:44px;margin:0;padding:0;border:none; background:transparent;box-shadow:none;outline:none;font-size:14px; color:var(--encre)} .cote-liens{display:flex;flex-direction:column;gap:2px;padding:4px 12px 10px; border-bottom:1px solid var(--n300)} .lien-barre{position:relative;min-height:44px;display:flex;align-items:center; gap:10px;padding:0 10px;border-radius:10px;color:var(--encre);font-size:14px; font-weight:500;text-decoration:none} .lien-barre svg{color:var(--n800);flex:none} .lien-barre:hover{background:var(--n300);color:var(--encre); text-decoration:none} .lien-barre[aria-current=page]{background:var(--blanc);font-weight:600; box-shadow:var(--ombre)} /* ⚠️ LE COMPTE SE VOIT. « Relectures » se lit comme un écran de plus ; un « 1 » rouge se lit comme du travail qui attend. */ .compte-lien{margin-left:auto;min-width:24px;height:24px;padding:0 7px; border-radius:999px;background:var(--rouge600);color:var(--blanc); font-size:13px;font-weight:700;display:inline-flex;align-items:center; justify-content:center} /* ⚠️ LE SOUS-MENU « ASSISTANT » (29/09/2026) : un « details », qui s'ouvre sans script. Son titre a la forme d'un lien de la barre, et le chevron dit qu'il se déplie ; ses quatre pages sont en retrait sous lui. */ .sous-menu>summary{list-style:none;cursor:pointer} .sous-menu>summary::-webkit-details-marker{display:none} .sous-menu-pli{margin-left:auto;display:inline-flex;color:var(--n700)} .sous-menu[open] .sous-menu-pli{transform:rotate(180deg)} .sous-liens{display:flex;flex-direction:column;gap:2px} .sous-liens .lien-barre{padding-left:36px} .cote-liste{flex:1;min-height:0;overflow-y:auto;display:flex; flex-direction:column;gap:6px;padding:6px 12px 12px} /* ⚠️ LA SECTION « DISCUSSIONS » (30/09/2026). Richard : « la partie discussion doit être groupée dans une section Discussion qu'on peut déplier au besoin ». Son titre a la forme d'un lien de la barre, comme « Assistant », et reste collé en haut de la liste qui défile : on la replie sans remonter. */ .section-discussions>summary{list-style:none;cursor:pointer} .section-discussions>summary::-webkit-details-marker{display:none} .section-t{position:sticky;top:-6px;z-index:2;min-height:44px;display:flex; align-items:center;gap:10px;padding:0 10px;border-radius:10px; background:var(--surface);color:var(--encre);font-size:14px;font-weight:600} .section-t:hover{background:var(--n300)} .section-discussions[open] .section-t .sous-menu-pli{transform:rotate(180deg)} .section-corps{display:flex;flex-direction:column;gap:6px} .grp{display:flex;flex-direction:column;gap:2px} .grp-t{margin:0;padding:10px 10px 4px;font-size:13px;font-weight:600; color:var(--n700)} .grp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column; gap:2px} .item{position:relative} .rang{display:flex;align-items:center;border-radius:10px} .rang:hover{background:var(--n300)} /* ⚠️ « .titre », PAS « .item a » : la seconde visait aussi le bouton de la ligne, avec une specificite plus forte que la sienne — les deux se partageaient la largeur, et le titre etait coupe a la moitie. ⚠️ UNE LIGNE ENTIÈRE, 44 PX : c'est toute la ligne qu'on touche. */ .titre{flex:1;min-width:0;display:block;padding:12px 10px;font-size:14px; line-height:20px;text-decoration:none;color:var(--n800); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .titre:hover{color:var(--encre);text-decoration:none} .item.ici .rang{background:var(--blanc);box-shadow:var(--ombre)} .item.ici .titre{color:var(--encre);font-weight:600} /* ⚠️ LA LIGNE QU'ON S'APPRÊTE À EFFACER RESTE DÉSIGNÉE (maquette) : la confirmation flotte à côté, et sans ce repère on ne sait plus de laquelle elle parle dès que la souris quitte la liste. */ .item.en-geste .rang{background:var(--blanc);box-shadow:var(--ombre)} .item.en-geste .titre{color:var(--encre);font-weight:600} .menu{position:relative;flex:none} .menu>summary{list-style:none} .menu>summary::-webkit-details-marker{display:none} /* ⚠️ LE « ⋯ » D'UNE LIGNE NE CRIE PAS. Il paraît au survol, au clavier, et sur la discussion ouverte ; sur un écran tactile, où rien ne se survole, il reste toujours visible. */ .item .menu{position:absolute;top:0;right:0} .item .menu>summary{opacity:0} .item:hover .menu>summary,.item:focus-within .menu>summary, .item.ici .menu>summary,.item.en-geste .menu>summary, .menu[open]>summary{opacity:1} /* ⚠️ LE « ⋯ » FLOTTE AU BOUT DE LA LIGNE AU LIEU D'Y PRENDRE SA PLACE : un bouton invisible de 44 px coupait tous les titres à mi-chemin. Le titre ne lui cède la place que lorsqu'il paraît. */ .item[data-sien]:hover .titre,.item[data-sien]:focus-within .titre, .item.ici[data-sien] .titre,.item.en-geste .titre{padding-right:48px} .menu[open]>summary{background:var(--n200)} @media (hover:none){.item .menu>summary{opacity:1} .item[data-sien] .titre{padding-right:48px}} /* ⚠️ HORS DU FLUX, SINON IL MANGE LE TITRE. Laisse dans la ligne, le panneau en prenait la largeur : « Quels salaries du dossier Beaumont » devenait « Quels s... » des qu'on ouvrait le menu. Il flotte donc sous le bouton — et, script allumé, À CÔTÉ de la ligne, vers le haut, hors de la liste qui défile (sans quoi la liste le rognerait). */ .vol-menu{position:absolute;top:100%;right:0;z-index:30;width:240px; display:flex;flex-direction:column;padding:6px;background:var(--blanc); border:1px solid var(--n400);border-radius:var(--r2); box-shadow:0 18px 48px rgba(15,23,42,.16)} /* ── Le thème sombre (#304), SEULEMENT SI ON LE CHOISIT ─────────────── */ /* ⚠️⚠️ (14/10/2026, décision de Richard : « thème sombre seulement si on le choisit ») PLUS DE « @media (prefers-color-scheme: dark) » : Windows en mode sombre changeait la palette validée. Le bloc ne vaut que pour la page dont le SERVEUR a posé « data-theme="sombre" » (« chat/apparence.py », réglage « Apparence » du menu du compte). Mêmes valeurs, mêmes contrastes. ⚠️ UN SEUL BLOC, ET QUE DES JETONS. Les autres feuilles n'emploient que « var(--…) » : elles se repeignent seules. Une règle ajoutée ici, ou une couleur écrite dans une règle, serait une valeur que la console ne suit pas. ⚠️ « --blanc » RESTE LA COULEUR DES CARTES (donc sombre) : le texte posé sur un aplat coloré (bouton d'action, pastille rouge, bouton vert) devient du texte sombre sur un aplat CLAIR — d'où les teintes 600/700 éclaircies. Contrastes mesurés (≥ 4,5:1) par tests/chat/test_theme_sombre_304.py. */ :root[data-theme="sombre"]{ color-scheme:dark; --fond:#0f0e14;--blanc:#17161e;--surface:#1d1c26;--survol:#22212c; --rail:#12111a;--encre:#F0F0F5; --n100:#1b1a24;--n200:#22212c;--n300:#2e2d3a;--n400:#42414f; --n500:#7c7c88;--n600:#9a9aa6;--n700:#b0b0ba;--n800:#c8c8d0; --action:#5fc4c8;--action600:#86d6d9;--action700:#a6e3e5; --action100:#12302f;--action200:#1a4443; --marque:#4fd1d5;--urgent:#ff7a6b;--sur-urgent:#14131a; --rouge:#ff7a7e;--rouge600:#ff9a9d;--rouge700:#ffb3b5; --rouge100:#3a1a1d;--rouge200:#52272b;--rouge300:#7a3b40; --vert100:#12301f;--vert700:#86efac; --ambre100:#3b2a0a;--ambre700:#fbbf24; --accent:#ff7a7e;--accent200:#3a1a1d;--accent700:#ffb3b5; --cna:#4fc3c8;--cna-fonce:#7dd8dc;--cna-pale:#12302f; --cna-alerte:#ff8a4c;--cna-alerte-fond:#2e1a10;--cna-alerte-texte:#ffb48a; --rc-accent:#5fc4c8;--rc-accent-survol:#86d6d9;--rc-pale:#12302f;--rc-pale2:#10201f; --rc-texte:#F0F0F5;--rc-doux:#b0b0ba;--rc-tres-doux:#9a9aa6;--rc-trait:#2e2d3a;--rc-trait2:#2e2d3a; --rc-trait3:#42414f;--rc-pied:#1d1c26;--rc-bulle:#22212c;--rc-fond:#17161e; /* (31/10/2026) Palettes déplacées des feuilles 40, 48 et 51 : leurs valeurs sombres d'origine, inchangées. */ --cx-fond:#17161E;--cx-texte:#F0F0F5;--cx-doux:#B0B0BA;--cx-tres-doux:#9A9AA6;--cx-trait:#2E2D3A; --cx-bord:#42414F;--cx-carte:#2E2D3A;--cx-panneau:#12111A;--cx-accent:#5CC0C4;--cx-accent-survol:#7ED0D3; --cx-sur-accent:#0F0E14;--cx-pale:#163A3D;--cx-neutre:#22212C;--cx-alerte-fond:#3A2118; --cx-alerte-texte:#FFB48A;--cx-alerte-bord:#8A5A43;--tk-accent:#5CC0C4;--tk-accent-survol:#7ED0D3; --tk-pale:#163A3D;--tk-texte:#F0F0F5;--tk-doux:#B0B0BA;--tk-trait:#2E2D3A;--tk-fond:#17161E; --tk-alerte-fond:#3A2118;--tk-alerte-texte:#FFB48A;--tk-bord-champ:#3E3D4A;--tk-bord-neutre:#4A4957; --tk-bord-tableau:#2E2D3A;--tk-trait-ligne:#25242F;--tk-entete-fond:#1D1C25;--tk-sous:#9A9AA6; --tk-ligne-cochee:#14292B;--tk-puce-fond:#F0F0F5;--tk-puce-texte:#17161E;--tk-plein-fond:#177E83; --tk-plein-texte:#fff;--tk-cours-fond:#3A2A12;--tk-cours-texte:#FFB074;--tk-attente-fond:#2A2C33; --tk-attente-texte:#C5C8CF;--tk-retard-fond:#3F1D18;--tk-retard-texte:#FF9E8A;--cp-trait:#3A4248; --cp-orange:#3A2A22;--cp-orange-trait:#8A5A40; } .vol-menu.vers-le-haut{top:auto;bottom:100%} .vol-menu a,.vol-menu button{min-height:44px;display:flex;align-items:center; gap:10px;width:100%;padding:0 10px;border:none;background:transparent; border-radius:var(--r1);font:inherit;font-size:14px;text-align:left; color:var(--encre);text-decoration:none;cursor:pointer} .vol-menu a svg,.vol-menu button svg{color:var(--n800);flex:none} .vol-menu a:hover,.vol-menu button:hover{background:var(--n200); color:var(--encre);text-decoration:none} .vol-menu .part,.vol-menu .part svg{color:var(--rouge700)} .vol-menu .part:hover{background:var(--rouge100);color:var(--rouge700)} .vol-menu form{margin:0} /* « Apparence : Clair / Sombre » (14/10/2026) : une ligne du menu du compte, deux boutons d'un formulaire ordinaire ; celui du thème en cours est « aria-pressed="true" ». Des jetons seulement. */ .vol-menu .apparence{min-height:44px;display:flex;align-items:center;gap:6px; padding:0 10px;font-size:14px;color:var(--encre)} .vol-menu .apparence-titre{flex:1} .vol-menu .apparence button{width:auto;min-height:32px;padding:0 10px; border:1px solid var(--n400);font-size:13px} .vol-menu .apparence button[aria-pressed="true"]{background:var(--action100); border-color:var(--action);color:var(--action700);font-weight:600} /* ⚠️ UNE ENTRÉE GRISÉE DIT POURQUOI (30/09/2026, « Voir la conversation » de « Mes contenus ») : son titre au survol, et le même texte pour les lecteurs d'écran. Ni lien ni bouton : rien ne se clique. */ .vol-menu .vol-grise{min-height:44px;display:flex;align-items:center;gap:10px; padding:0 10px;font-size:14px;color:var(--n700);cursor:not-allowed; opacity:.6} .vol-menu .vol-grise svg{color:var(--n700);flex:none} .ancre{display:block;height:0} .rien{font-size:13px;color:var(--n700);padding:8px 10px;margin:0} /* ⚠️ UNE LISTE QUI DISPARAIT SANS UN MOT SE LIT « C'EST CASSE ». Le message n'apparait que lorsque la recherche a tout filtre — jamais autrement. */ .sans-resultat{display:none} .sans-resultat.vu{display:block} /* ══════════════════════════════════════════════════════════════════════ LE MENU, PLUS LÉGER (02/10/2026) : la proposition A de la revue du menu ══════════════════════════════════════════════════════════════════════ Richard : « go pour l'option A ». RIEN NE CHANGE DE PLACE : des lignes de 34 px au lieu de 44, « Filtrer » en ligne simple, les entrées en graisse 400 et leurs icônes grises de 16 px, des titres discrets, plus aucun filet. Sur un écran de 1280 × 800, on voit six discussions au lieu de deux. ⚠️ SUR ORDINATEUR SEULEMENT (« min-width:768px », le seuil du tiroir) : le tiroir du téléphone garde ses cibles de 44 px, faites pour le doigt. ⚠️ LES SÉLECTEURS SONT CEUX DES RÈGLES QU'ILS DÉFONT, posés après elles : à spécificité égale, la règle d'ici l'emporte, et nulle autre plus bas dans la feuille ne les reprend. ⚠️ AUCUNE RÈGLE DE BARRE DE DÉFILEMENT ICI : celle de la liste a son bloc en tête de feuille. */ @media (min-width:768px){ .cote-haut{padding:10px 10px 4px;gap:4px} /* Le bouton noir reste, plus bas d'un cran. */ .neuve{min-height:36px;padding:0 12px;border-radius:8px} .cote-marque .icone-btn{width:36px;height:36px;border-radius:8px} /* « Filtrer » sans boîte : une ligne de la barre, la loupe en tête. Au focus, son bord bleu revient (« .rech:focus-within », plus haut) ; le survol ne le grise pas. */ .rech{min-height:34px;padding:0 10px;background:transparent; border-color:transparent;border-radius:8px} .rech:hover:not(:focus-within){background:var(--n300)} #rech{min-height:32px} /* ⚠️ LE TEXTE INDICATIF EN n700 : n600 donnait 3,59:1 dans la boîte, et 3,37:1 sans elle. n700 donne 4,74:1 sur la barre, 4,54:1 au survol. */ .rech #rech::placeholder{color:var(--n700)} /* Les entrées : pas de filet dessous, le blanc sépare. La page ouverte seule passe en 600 (« .lien-barre[aria-current=page] »). */ .cote-liens{padding:2px 10px 6px;gap:0;border-bottom:0} .lien-barre{min-height:34px;border-radius:8px;font-weight:400} .lien-barre svg{color:var(--n700);width:16px;height:16px} /* Le rond rouge des Relectures reste rouge : c'est du travail qui attend. */ .compte-lien{min-width:20px;height:20px;padding:0 6px;font-size:12px} .cote-liste{gap:2px;padding:4px 10px 10px} /* « Discussions » devient un titre de section, toujours repliable ; son chevron ne parle que quand on s'en sert, ou quand elle est fermée. */ .section-t{min-height:32px;font-size:12.5px;color:var(--n700);top:-4px} .section-t .sous-menu-pli{opacity:0} .section-t:hover .sous-menu-pli,.section-t:focus-visible .sous-menu-pli, .section-discussions:not([open]) .sous-menu-pli{opacity:1} .section-corps{gap:2px} /* Les dates en petit : un repère, pas un titre. */ .grp-t{padding:12px 10px 2px;font-size:12px;font-weight:500} /* Une ligne de 34 px (ChatGPT et Claude.ai : de 32 à 36). */ .titre{padding:7px 10px} .rang{border-radius:8px} .item .menu>summary{width:32px;height:34px} .item[data-sien]:hover .titre,.item[data-sien]:focus-within .titre, .item.ici[data-sien] .titre,.item.en-geste .titre{padding-right:36px} } /* (30/10/2026) Plainte « en mode sombre le logo CNA n'est pas lisible : mettre le logo avec fond blanc ». Le logo du CNA est dessiné pour un fond clair. Thème sombre : il se pose sur une pastille blanche (coins légers). « white » et non un hexadécimal : le bloc sombre de 01-coquille.css reste le seul à porter des couleurs en dur. */ :root[data-theme="sombre"] .logo-org{background:white;border-radius:8px;padding:4px 8px;box-sizing:border-box} /* Le signe de l'assistant, tout petit : la pastille est son avatar, sans marge qui rogne le logo. */ :root[data-theme="sombre"] .lui .lab i{background:white} :root[data-theme="sombre"] .lui .lab i .logo-org{padding:0;border-radius:0} /* Le filigrane est un décor à 6 % : pas de pastille. */ :root[data-theme="sombre"] .filigrane .logo-org{background:none;padding:0;border-radius:0} /* ── Rechercher partout, et les classeurs (29/09/2026) ──────────────── ⚠️ LA BARRE FILTRE, LE BOUTON « Ctrl K » CHERCHE PARTOUT. Deux gestes, deux formes : le champ garde son rôle (ses discussions, titre et messages), la touche ouvre la palette au milieu de la page — ou, sans script, la page « /rechercher ». */ .rech-partout{flex:none;display:inline-flex;align-items:center;min-height:32px; padding:0 6px;border-radius:6px;color:var(--n700);text-decoration:none} .rech-partout:hover{background:var(--n300);color:var(--encre); text-decoration:none} .rech-partout kbd,.palette-champ kbd{font:inherit;font-size:11px; font-weight:600;padding:2px 6px;border:1px solid var(--n400); border-radius:6px;background:var(--blanc);color:var(--n800);white-space:nowrap} /* ⚠️ SUR UN ÉCRAN TACTILE, PAS DE CLAVIER : « Ctrl K » n'y veut rien dire. */ .rech-partout-mot{display:none;font-size:12px;font-weight:600} @media (hover:none){.rech-partout kbd,.palette-champ kbd{display:none} .rech-partout-mot{display:inline}} /* ⚠️ LES CLASSEURS AVANT LES DATES, REPLIABLES SANS SCRIPT (« details »). Le nombre se lit à droite du nom : un classeur fermé dit encore ce qu'il contient. */ .classeurs{display:flex;flex-direction:column;gap:2px} .classeurs-t{display:flex;align-items:center;justify-content:space-between} .classeurs-t .icone-btn{width:36px;height:36px} .classeur>summary{list-style:none} .classeur>summary::-webkit-details-marker{display:none} .classeur-tete{min-height:44px;display:flex;align-items:center;gap:8px; padding:0 10px;border-radius:10px;font-size:14px;color:var(--n800); cursor:pointer} .classeur-tete:hover{background:var(--n300);color:var(--encre)} .classeur-tete svg{flex:none;color:var(--n700)} .classeur[open]>.classeur-tete{color:var(--encre);font-weight:600} .classeur-nom{flex:1;min-width:0;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .classeur-n{min-width:22px;height:22px;padding:0 6px;border-radius:999px; background:var(--n300);color:var(--n800);font-size:12px;font-weight:600; display:inline-flex;align-items:center;justify-content:center} .classeur>ul{padding-left:14px} .classeur>.rien{padding-left:24px} /* « Classer dans… » : une liste et un bouton, dans le menu « ⋯ ». */ .vol-menu form.classer{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 10px} .vol-menu form.classer label{flex:1;min-width:0;display:flex; align-items:center;gap:8px;margin:0} .vol-menu form.classer label svg{color:var(--n800);flex:none} .vol-menu form.classer select{flex:1;min-width:0;min-height:36px; font:inherit;font-size:13px;padding:0 6px;border:1px solid var(--n400); border-radius:var(--r1);background:var(--blanc);color:var(--encre)} .vol-menu form.classer button{width:auto;flex:none;min-height:36px; padding:0 10px;border:1px solid var(--n400);font-weight:600} .classeurs-liste{list-style:none;margin:0;padding:0} .classeurs-liste .rangee{align-items:center} .classeur-renommer{flex:1;display:flex;align-items:center;gap:8px; flex-wrap:wrap} .classeur-renommer input[name=nom]{flex:1;min-width:160px} /* ── La palette : au milieu de la page, comme une recherche Spotlight ── */ .palette{border:none;padding:0;margin:12vh auto auto;width:calc(100% - 32px); max-width:640px;max-height:76vh;border-radius:var(--r3); background:var(--blanc);color:var(--encre); box-shadow:0 24px 64px rgba(15,23,42,.28)} .palette::backdrop{background:rgba(15,23,42,.42)} .palette-cadre{display:flex;flex-direction:column;max-height:76vh} .palette-champ{display:flex;align-items:center;gap:10px;margin:0; padding:8px 14px;border-bottom:1px solid var(--n300);color:var(--n800)} .palette-champ svg{flex:none} #palette-q,#partout-q{flex:1;min-width:0;min-height:48px;margin:0;padding:0; border:none;background:transparent;box-shadow:none;outline:none; font-size:17px;color:var(--encre)} .palette-resultats{overflow-y:auto;padding:6px 8px 12px} .page-champ{background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2);box-shadow:var(--ombre)} .page-champ:focus-within{border-color:var(--action); box-shadow:0 0 0 3px var(--action200)} .resultats-groupe h2{margin:14px 8px 4px;font-size:13px;font-weight:600; letter-spacing:0;color:var(--n700)} .resultats-n{font-weight:500;color:var(--n700)} .resultats-groupe ul{list-style:none;margin:0;padding:0} .resultats-groupe form{margin:0} .resultat{width:100%;min-height:44px;display:flex;flex-direction:column; justify-content:center;gap:2px;padding:8px 10px;border:none; border-radius:var(--r1);background:transparent;font:inherit; text-align:left;color:var(--encre);text-decoration:none;cursor:pointer} .resultat:hover,.resultat:focus-visible{background:var(--n200); color:var(--encre);text-decoration:none} .resultat-titre{font-size:14px;font-weight:600} .resultat-detail{font-size:13px;color:var(--n800);overflow:hidden; text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical} .resultats-vide,.resultats-plus,.resultats-avis{margin:10px 8px; font-size:13px;color:var(--n700)} .recherche-partout .resultats{margin-top:12px} /* Le compte, en bas : qui est là, et son menu. */ .compte{position:relative;display:flex;align-items:center;gap:10px; padding:10px 12px;border-top:1px solid var(--n300)} .avatar{width:36px;height:36px;border-radius:999px;background:var(--action100); color:var(--action700);font-size:13px;font-weight:700;display:inline-flex; align-items:center;justify-content:center;flex:none} .compte-nom{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .compte .menu{position:static} .compte .vol-menu{right:12px;bottom:calc(100% - 4px)} /* LE MENU, PLUS LÉGER (02/10/2026, proposition A : voir « 01-coquille ») : « Ctrl K » se lit sans faire une touche dessinée ; le nombre d'un classeur est un chiffre gris ; le compte n'a plus de filet, 8 px de blanc au-dessus. ⚠️ Sur ordinateur seulement : le tiroir du téléphone garde ses 44 px. */ @media (min-width:768px){ .rech-partout kbd{border:0;background:transparent;color:var(--n700); font-weight:500} .classeurs-t .icone-btn{width:28px;height:28px} .classeur-tete{min-height:34px;border-radius:8px} .classeur-n{background:transparent;color:var(--n700);font-weight:500} .compte{border-top:0;padding:8px 10px 10px} .avatar{width:28px;height:28px;font-size:12px} .compte-nom{font-weight:500} .compte .menu>summary{width:34px;height:34px} } /* Le voile du tiroir : il n'existe que sur téléphone, tiroir ouvert. */ .voile{display:none} /* ── La colonne de lecture ───────────────────────────────────────────── */ main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--fond)} /* ⚠️ L'EN-TÊTE NE PORTE PLUS QUE LE TITRE, son crayon et son « ⋯ ». Ses six boutons sont partis dans la barre : deux rangées de liens pour les mêmes écrans, c'était deux endroits où chercher. */ .tete{min-height:64px;flex:none;display:flex;align-items:center; justify-content:space-between;gap:16px;padding:10px 16px 10px 28px; border-bottom:1px solid var(--n300)} .tete h1{margin:0;font-size:17px;font-weight:600;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;min-width:0} .tete-titre{display:flex;align-items:center;gap:2px;min-width:0;flex:1} .tete-nom{margin:0;font-size:16px;font-weight:600;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} .tete-actions{display:flex;align-items:center;gap:6px;flex:none} .menu-tete .vol-menu{top:calc(100% + 4px)} /* ⚠️⚠️ « CE QUE JE RETIENS DE CETTE DISCUSSION » (30/09/2026), sous l'en-tête : une ligne repliée, alignée sur la colonne du fil ; ouvert, un cadre qui défile seul et ne pousse jamais le composeur hors de l'écran. Sans script, c'est un « details » : il s'ouvre et se ferme tout seul. */ /* ⚠️ PROPOSITION B (02/10/2026), « plus de calme » : une ligne grise, sans pastille, alignée sur la colonne de 632 px. */ .retenu{flex:none;width:100%;max-width:688px;margin:0 auto;padding:8px 28px 0; box-sizing:border-box} .retenu>summary{display:flex;align-items:center;gap:10px;min-height:26px; width:fit-content;max-width:100%;padding:0;border:0; border-radius:999px;background:transparent;cursor:pointer;list-style:none; font-size:12.5px;color:var(--n800)} .retenu>summary::-webkit-details-marker{display:none} .retenu>summary::before{content:"";flex:none;width:0;height:0; border-left:6px solid currentColor;border-top:5px solid transparent; border-bottom:5px solid transparent} .retenu[open]>summary::before{transform:rotate(90deg)} .retenu>summary:hover{background:var(--n200);color:var(--encre)} .retenu-titre{font-weight:500;color:var(--encre)} .retenu-corps{margin:8px 0 2px;padding:14px 18px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r2);max-height:44vh; overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px} .retenu-part h2{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--n800)} .retenu-liste{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:6px} .retenu-liste li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px; font-size:14px;line-height:1.45;min-width:0} .retenu-cle{font-weight:600;color:var(--encre)} .retenu-valeur,.retenu-apercu{color:var(--encre);overflow-wrap:anywhere;min-width:0} .retenu-apercu{flex-basis:100%;font-size:13px;color:var(--n800)} .retenu-etat{padding:0 8px;border-radius:999px;background:var(--n200); color:var(--n800);font-size:12px;font-weight:600} .retenu-etat.valide{background:var(--action100);color:var(--action700)} .retenu-gestes{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 2px} .retenu-geste{display:inline;margin:0} .retenu-lien{background:none;border:none;padding:0 4px;min-height:28px;font:inherit; font-size:13px;color:var(--action700);cursor:pointer;text-decoration:underline; list-style:none} .retenu-corriger>summary::-webkit-details-marker{display:none} .retenu-corriger[open]{flex-basis:100%} .retenu-champ{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 2px} .retenu-champ form:first-child{display:flex;gap:6px;align-items:center;flex:1; min-width:220px;margin:0} .retenu-corriger input{flex:1;min-width:0;min-height:36px;padding:4px 10px; font:inherit;font-size:14px;border:1px solid var(--n300);border-radius:var(--r1)} .retenu-corriger .bouton-doux{min-height:36px;padding:0 12px;font-size:13px} .retenu-vide,.retenu-pied{grid-column:1/-1;margin:0;font-size:13px;color:var(--n800)} /* ⚠️ EN CLASSE, PAS EN ATTRIBUT « style ». La politique de contenu de cet écran refuse les attributs de style — mesuré dans le navigateur : le conteneur portait « min-width:0 » et le navigateur calculait « auto ». */ .tete-gauche{min-width:0} .titre-champ{flex:1;min-width:0} .marque-seule{margin-bottom:18px} .tete .sous{font-size:12.5px;color:var(--n700);margin:2px 0 0} /* ⚠️ CE QUI N'EXISTE QUE D'UN CÔTÉ. Le « ☰ » et le « + » ne servent que sur téléphone — ou quand la barre est repliée ; le crayon, que sur ordinateur. L'en-tête de l'accueil n'existe pas sur ordinateur : la barre dit déjà tout, et le bonjour est le titre. */ .ouvrir-barre,.neuve-tel,.fermer-tiroir{display:none} .tete.tete-accueil{display:none} .ouvrir-barre .compte-rond{position:absolute;top:3px;right:1px;min-width:19px; height:19px;padding:0 4px;border-radius:999px;background:var(--rouge600); color:var(--blanc);font-size:11px;font-weight:700;line-height:15px; text-align:center;border:2px solid var(--fond)} /* ⚠️ AU CLAVIER, SANS SCRIPT, C'EST LA CASE QUI A LE FOCUS : on le montre sur le bouton qu'elle commande, sinon on tabule dans le vide. */ .bascule:focus-visible~.app .ouvrir-barre, .bascule:focus-visible~.app .replier{outline:2px solid var(--action); outline-offset:2px} /* Renommer sur place : le champ remplace le titre, rien d'autre ne bouge. */ /* ⚠️ « hidden » PERD CONTRE « display:flex » : la ligne cachée pendant qu'on la renomme resterait à l'écran, doublée de son champ. */ .rang[hidden],.tete-titre[hidden]{display:none} .renommer-sur-place{display:flex;flex-direction:column;gap:2px;margin:0; padding:0 0 4px;flex:1;min-width:0} /* Par son identifiant : la règle générale des champs battait la classe. */ .renommer-sur-place #renommer-champ{width:100%;min-height:44px;font-weight:600} .renommer-sur-place .aide{padding:0 4px;font-size:12.5px;color:var(--n800); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tete .renommer-sur-place{padding:4px 0} /* ⚠️ LA CONFIRMATION D'EFFACER, À CÔTÉ DE LA LIGNE. Sans script, la même phrase occupe le haut du fil (« ?effacer=1 ») : le texte est le même des deux côtés, seul l'endroit change. */ .confirmer{background:var(--blanc);border:1px solid var(--n400); border-radius:var(--r2);box-shadow:0 18px 48px rgba(15,23,42,.16); padding:16px;display:flex;flex-direction:column;gap:10px;max-width:420px} .confirmer.flottant{position:fixed;z-index:40;width:340px; max-width:calc(100vw - 16px)} .confirmer h2{margin:0;font-size:15px;font-weight:700;line-height:1.4} .confirmer p{margin:0;font-size:14px;color:var(--n800)} .confirmer-gestes{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} .confirmer-gestes form{margin:0} .bouton-danger{min-height:44px;display:inline-flex;align-items:center; justify-content:center;padding:0 18px;background:var(--rouge600); color:var(--blanc);border:1px solid var(--rouge600);border-radius:10px; font:inherit;font-size:15px;font-weight:600;cursor:pointer} .bouton-danger:hover{background:var(--rouge700);border-color:var(--rouge700)} .bouton-doux{min-height:44px;display:inline-flex;align-items:center; justify-content:center;padding:0 18px;background:var(--blanc); color:var(--encre);border:1px solid var(--n400);border-radius:10px; font:inherit;font-size:15px;font-weight:600;cursor:pointer; text-decoration:none} .bouton-doux:hover{background:var(--n200);color:var(--encre); text-decoration:none} .bouton-plein{min-height:44px;display:inline-flex;align-items:center; justify-content:center;padding:0 18px;background:var(--action); color:var(--blanc);border:1px solid var(--action);border-radius:10px; font:inherit;font-size:15px;font-weight:600;cursor:pointer} .bouton-plein:hover{background:var(--action600);border-color:var(--action600)} /* Les gestes posés dans le fil sans script : renommer, garder, effacer. */ .carte-geste{background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2);box-shadow:var(--ombre);padding:16px 18px; margin:24px 0 0;display:flex;flex-direction:column;gap:10px} .carte-geste h2{margin:0;font-size:15px;font-weight:700} .carte-geste p{margin:0;font-size:14px;color:var(--n800)} .carte-geste form{display:flex;flex-direction:column;gap:10px;margin:0} .carte-geste label{display:flex;flex-direction:column;gap:6px;font-size:14px; font-weight:600} .carte-geste textarea{resize:vertical} .carte-geste .gestes{justify-content:flex-end;flex-wrap:wrap;margin-top:4px} /* Le retour d'un écran annexe : un lien, pas un bouton (maquettes). */ .retour-fil{min-height:44px;display:inline-flex;align-items:center;gap:8px; padding:0 12px;border-radius:10px;font-size:14px;font-weight:600; color:var(--action700);text-decoration:none;flex:none} .retour-fil svg{flex:none} .retour-fil:hover{background:var(--n200);color:var(--action600);text-decoration:none} .btn2{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;background:none; border:1px solid var(--n400);border-radius:var(--r1);font-size:12.5px; font-weight:600;cursor:pointer;color:inherit;text-decoration:none; flex:0 0 auto} .btn2:hover{border-color:var(--n400);background:var(--n200);color:inherit} .actions-tete{display:flex;align-items:center;gap:8px;flex:0 0 auto} .thr{flex:1;overflow-y:auto} /* ⚠️ LA COLONNE DU FIL A LA LARGEUR DU COMPOSEUR, comme la maquette « Réponse » : le texte s'aligne sur le bord gauche du champ, les bulles sur son bord droit. ⚠️⚠️ PROPOSITION B (02/10/2026), « plus de calme » : 632 px au lieu de 760, et le signe de l'assistant passe dans la marge (« 20-fil.css »). Mesuré à 1 280 px : la ligne de 110 caractères tombait à 75. ⚠️ ET LE SIGNE GARDE SA PLACE QUAND LA MARGE MANQUE : il dépasse de 12 px à gauche de la colonne ; sous 712 px de fil (une fenêtre de 960 px, barre ouverte), le fil, qui défile, le rognait. Le retrait de gauche grandit alors jusqu'à 40 px, et seulement alors. */ .bloc{max-width:688px;margin:0 auto; padding:0 28px 0 clamp(28px,40px - (100% - 688px) / 2,40px)} .moi{display:flex;justify-content:flex-end;padding:40px 0 4px} /* La question : une bulle blanche, sans bord (proposition B). */ .moi p{max-width:80%;margin:0;background:var(--blanc); border:1px solid transparent; border-radius:18px 18px 6px 18px; padding:10px 16px;font-size:16px;line-height:1.5;white-space:pre-wrap} .lui{padding:18px 0 26px} /* (18/10/2026) L'heure d'un message : petite, grise, à côté de la bulle (sous la question, à côté du nom de l'assistant). */ .heure{font-size:11px;line-height:1;color:var(--n600);font-variant-numeric:tabular-nums;white-space:nowrap} .heure-moi{display:block;text-align:right;padding:2px 4px 0} .lui .lab .heure{margin-left:2px} .lui .lab{display:flex;align-items:center;gap:8px;margin-bottom:8px} .lui .lab i{width:8px;height:8px;background:var(--accent);display:block; border-radius:3px} .lui .lab b{font-size:10.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;opacity:.55} /* ⚠️⚠️ « :where(.lui) p », PAS « .lui p » (02/10/2026). À 0,1,1, la règle générale battait toute classe posée sur un paragraphe de la réponse : la source (13 px voulus), le courriel préparé (13,5 px), l'état « en cours », la ligne « Courriel envoyé à… » s'affichaient en 15 px, comme le texte. Sans poids, elle ne vaut plus que pour un paragraphe sans classe. */ :where(.lui) p{margin:0;font-size:16px;line-height:1.7;white-space:pre-wrap} /* ── Ce que le modèle rend, mis en forme ─────────────────────────────── */ /* ⚠️ « white-space: pre-wrap » NE VAUT PLUS ICI. Le texte est désormais rendu en vrais nœuds — titres, listes, gras — et garder pre-wrap doublerait chaque saut de ligne du markdown d'origine. */ /* ⚠️ PROPOSITION B (02/10/2026) : 16 px, interligne 1,7 ; une échelle de titres qui monte (1,25 · 1,09 · 1 × le corps) ; paragraphes et puces plus espacés. */ .rendu{font-size:16px;line-height:1.7} .rendu>*:first-child{margin-top:0} .rendu>*:last-child{margin-bottom:0} /* ⚠️ 34 em, ENVIRON 75 CARACTÈRES PAR LIGNE : la prose s'arrête là, les tableaux (et le code) gardent toute la colonne. */ .rendu>:is(p,ul,ol,h3,h4,h5,h6){max-width:34em} .rendu p{margin:0 0 1em;white-space:normal} .rendu h3{font-family:var(--titre);font-size:20px;font-weight:700; letter-spacing:-.01em;margin:1.4em 0 .4em;line-height:1.3} .rendu h4{font-family:var(--titre);font-size:17.5px;font-weight:700; margin:1.5em 0 .4em;letter-spacing:-.005em;line-height:1.35} .rendu h5,.rendu h6{font-size:16px;font-weight:700;margin:1.2em 0 .35em; text-transform:none;letter-spacing:0;color:var(--encre)} .rendu ul,.rendu ol{margin:0 0 1em;padding-left:1.35em} .rendu li{margin:.35em 0} .rendu li::marker{color:var(--n500)} .rendu strong{font-weight:650} .rendu code{font-family:var(--mono);font-size:13px;background:var(--surface); border:1px solid var(--n300);border-radius:6px;padding:1px 5px} /* ⚠️ PLUS SOMBRE QUE --n300 : sur le fond clair du fil, un filet a #ECECF0 ne se voit pas — regarde dans le navigateur, pas deduit du jeton. */ .rendu hr{border:0;border-top:1px solid var(--n400);margin:1.5em 0} /* (30/10/2026) UNE CITATION du modèle (lignes « > » : un modèle de message cité) se lit comme telle : en retrait, un filet d'action à gauche, un fond doux, le texte à l'encre pleine (un modèle à copier doit rester lisible). ⚠️ DES JETONS SEULEMENT : le thème sombre ne redéfinit que des jetons (01-coquille), la citation s'y repeint seule. */ .rendu blockquote{margin:0 0 1em;padding:.7em 1em;border-left:3px solid var(--action);background:var(--surface); border-radius:0 var(--r2) var(--r2) 0;color:var(--encre)} .rendu>blockquote{max-width:34em} .rendu blockquote>*:first-child{margin-top:0} .rendu blockquote>*:last-child{margin-bottom:0} .rendu blockquote p{max-width:none} .rendu blockquote blockquote{margin:.6em 0;background:transparent;border-left-color:var(--n400)} /* Un tableau large defile dans son cadre au lieu de deborder du fil. */ .rendu .tableau{overflow-x:auto;margin:0 0 .85em} /* ⚠️ DES FILETS ENTRE LES LIGNES SEULEMENT, et les colonnes de nombres alignées à droite (« .nombre », posé par le rendu quand toute la colonne est un nombre). ⚠️ PROPOSITION B (02/10/2026) : la carte blanche disparaît ; un seul filet appuyé sous l'en-tête, sans aplat. */ .rendu table{width:100%;border-collapse:separate;border-spacing:0; background:transparent;border:0;border-radius:0; overflow:hidden;font-size:15px} .rendu th,.rendu td{padding:9px 16px 9px 0;text-align:left;vertical-align:top; border-bottom:1px solid var(--n300)} .rendu tbody tr:last-child td{border-bottom:none} .rendu th{background:transparent;border-bottom:1px solid var(--n400);font-size:13px; font-weight:600;color:var(--n800)} .rendu th.nombre,.rendu td.nombre{text-align:right;font-variant-numeric:tabular-nums} /* ── Pendant que le modèle travaille ─────────────────────────────────── */ /* ⚠️ UN MOT IMMOBILE SE LIT COMME UN ÉCRAN FIGÉ. Un échange qui lance trois agents dure une minute et demie ; sans signe de vie, on recharge la page — et on repaie l'échange. Demandé par Richard le 11/09/2026. */ .etat{display:flex;align-items:center;gap:7px} .pouls{width:7px;height:7px;border-radius:50%;background:var(--accent); flex:none;animation:pouls 1.1s ease-in-out infinite} .pointe{display:inline-block;width:9px;text-align:left} .pointe::after{content:"";animation:pointe 1.4s steps(4,end) infinite} @keyframes pouls{0%,100%{opacity:.25;transform:scale(.8)} 50%{opacity:1;transform:scale(1)}} @keyframes pointe{0%{content:""}25%{content:"."}50%{content:".."} 75%,100%{content:"..."}} /* ⚠️ CERTAINS DEMANDENT MOINS DE MOUVEMENT, et le système le dit déjà. */ @media (prefers-reduced-motion:reduce){ .pouls,.pointe::after{animation:none} .pouls{opacity:.85} .pointe::after{content:"..."} } /* ⚠️ « max-width:100% » N'EST PAS DE LA COQUETTERIE. Une image rendue en 1536 px de large dans une colonne de 720 pousserait la page entiere en defilement horizontal, sur tous les ecrans a la fois. */ .produite{display:block;max-width:100%;height:auto; border:1px solid var(--n300);border-radius:var(--r2);background:var(--blanc)} .src{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:14px} .src b{font-size:11px;opacity:.5;font-weight:400;margin-right:2px} .src span{font-size:11px;padding:3px 9px;background:var(--surface); border:1px solid var(--n300);border-radius:var(--r2)} .actes{display:flex;align-items:center;gap:2px;margin-top:12px;margin-left:-6px} .actes button{padding:6px;background:none;border:none;cursor:pointer; color:inherit;opacity:.45;display:flex} .actes button:hover{opacity:1;background:var(--surface);border-radius:8px} .cout{font-size:11px;opacity:.45;margin-left:8px} /* ⚠️ UN LIEN QUI SE COMPORTE COMME LES AUTRES ACTIONS. Souligné comme un lien ordinaire, il se lirait comme une navigation — or il ne quitte pas la page. */ .acte-lien{display:flex;align-items:center;gap:6px;padding:6px 9px; font-size:12px;font-weight:600;color:inherit;opacity:.55; text-decoration:none;border-radius:8px} .acte-lien:hover{opacity:1;background:var(--surface);color:inherit} .avert{border:1px solid var(--rouge300);background:var(--accent200); border-radius:var(--r1);padding:12px 15px;margin:24px 0 0;font-size:13.5px} .info{border:1px solid var(--n300);background:var(--blanc); border-radius:var(--r1);padding:12px 15px;margin:24px 0 0;font-size:13.5px} .info p,.avert p{margin:0} .gestes{display:flex;gap:8px;margin-top:12px} .gestes form{margin:0} .danger{padding:8px 12px;background:var(--accent);color:var(--fond);border:none; border-radius:var(--r1);font-size:12.5px;font-weight:600;cursor:pointer} .danger:hover{background:var(--accent700)} /* (30/10/2026) Capture de Richard : un tableau large débordait de la bulle. Il ne sort jamais de sa bulle (défilement horizontal au besoin) ; retourné (un lieu par colonne), la colonne des noms d'information reste lisible ; en fiches, une carte par ligne, chaque valeur précédée du nom de sa colonne (le même rendu que sur téléphone). */ .rendu .tableau{max-width:100%;overflow-x:auto} .rendu .tableau-retourne tbody td:first-child{font-weight:600;white-space:nowrap} .rendu .tableau-fiches table,.rendu .tableau-fiches tbody,.rendu .tableau-fiches tr,.rendu .tableau-fiches td{display:block;width:100%} .rendu .tableau-fiches table{min-width:0;border:none} .rendu .tableau-fiches thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .rendu .tableau-fiches tbody tr{border:1px solid var(--n300);border-radius:var(--r2);padding:10px 14px;margin:0 0 8px} .rendu .tableau-fiches td{border:none;padding:3px 0} .rendu .tableau-fiches td::before{content:attr(data-label);display:block;color:var(--n800);font-size:13px} /* ── L'accueil, quand rien n'a encore ete demande ─────────────────────── */ /* ⚠️ LE COMPOSEUR EST AU MILIEU, SOUS LES PUCES, sur ordinateur : c'est là que le regard arrive. Dès la première question, le script le descend en bas du fil. Sur téléphone, il colle au bas de l'écran (voir plus loin). */ /* ⚠️ L'ACCUEIL TIENT DANS L'ÉCRAN (29/09/2026). Richard : « faire disparaître le scroll sur la page d'accueil ». Le haut fixe de « 16vh » plus 40 px en bas faisait déborder la colonne dès qu'une fenêtre perdait la hauteur de ses barres : l'écart du haut se RETIRE avant que rien ne défile, et les tuiles se resserrent. */ /* ⚠️ ET IL RESPIRE (30/09/2026). Richard : « il faut aérer l'écran pour donner envie d'écrire, ajouter des espaces, ne pas tout coller ». L'écart entre le bonjour, les puces, le composeur et les tuiles suit la HAUTEUR de l'écran (« vh ») : large sur un grand écran, il se resserre avant que la page ne défile — la garde mesurée dans Chromium le tient. */ /* ⚠️⚠️ PROPOSITION C, « POINT DE DÉPART » (02/10/2026). Richard : « Go option C ». Le bonjour seul, centré, et le composeur au centre, un peu haut (le bas garde 16vh) : le panneau du départ s'ouvre dessous, PAR-DESSUS la page. Au repos, la colonne ne porte plus que le bonjour, l'alerte des crédits et le composeur : elle tient dans l'écran, et rien ne défile. */ /* ⚠️⚠️ ET LE PANNEAU OUVERT NE SORT JAMAIS DE LA FENÊTRE (02/10/2026, revue). À 1366 × 657 (un portable 1366 × 768, moins le navigateur), il descendait 30 px sous le bord. Sous 776 px de haut, le bas réserve « 900px - 100vh » au lieu de 16vh : la place sous le composeur vaut alors (900 px - la colonne) / 2, quelle que soit la hauteur, soit 340 px environ, assez pour le panneau le plus haut (≈ 320 px avec son écart). Le composeur remonte d'autant, et seulement là ; à 800 et 1 024 px de haut, rien ne bouge. */ /* ⚠️⚠️ MAIS CETTE RÉSERVE CÈDE AVANT QUE RIEN NE DÉFILE (02/10/2026, contre-vérification). Posée en marge du bas, elle GRANDISSAIT quand la fenêtre baissait : sous 556 px de haut, l'accueil AU REPOS débordait (1 280 × 520 : 36 px, 65 px avec l'alerte des crédits). Sur ordinateur, la marge du bas garde 16vh, et le reste de la réserve est un élément souple (« ::after », sa base « 900px - 116vh », l'écart avant lui rendu) : il se rétrécit le premier, jusqu'à zéro, quand la colonne ne tient plus. Tant qu'elle tient, la géométrie est la même qu'avant, au pixel ; en dessous, c'est le panneau OUVERT qui défile, jamais l'accueil au repos. ⚠️ « height:100% » ET NON « min-height » : sans hauteur fixée, la colonne grandit au lieu de rétrécir sa réserve. « safe center » : si rien ne tient, le bonjour reste en haut, jamais coupé au-dessus. */ .accueil{--ecart:clamp(16px,4vh,32px);width:100%;max-width:784px; margin:0 auto;padding:0 32px max(16vh,calc(900px - 100vh)); justify-content:center;display:flex;flex-direction:column; gap:var(--ecart);min-height:100%} @media (min-width:768px){ .accueil{height:100%;padding-bottom:16vh;justify-content:safe center} .accueil>*{flex-shrink:0} .accueil::after{content:"";flex:0 1 max(0px,calc(900px - 116vh)); margin-top:calc(-1 * var(--ecart))} } .accueil-haut{display:flex;flex-direction:column;gap:8px} .accueil h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.01em; line-height:1.2;text-align:center} .accueil-choix{display:flex;flex-direction:column;gap:10px} .accueil .note-espaces{margin:0;font-size:14px;line-height:1.5; color:var(--n700)} /* ⚠️ LES SUGGESTIONS EN LIGNES NUES (C, 02/10/2026) : le dessin des gestes du fil, ni bord ni aplat, gris n800 (6,9:1 sur le fond) ; le bleu reste au bouton d'envoi. Une liste, pas une grille de cartes. */ .tuiles{display:grid;grid-template-columns:1fr;gap:2px} .tuiles form{display:contents;margin:0} /* ⚠️ « hidden » NE SUFFIT PAS SEUL : « display:grid » l'emporte sur la règle du navigateur, et les tuiles de tous les domaines s'afficheraient à la fois. */ .tuiles[hidden]{display:none} .tuile{min-height:40px;width:100%;display:flex;align-items:center;gap:12px; padding:8px 12px;background:transparent;border:0; border-radius:var(--r1);color:var(--n800);font:inherit;font-size:14.5px; font-weight:400;line-height:1.4;text-align:left;cursor:pointer} .tuile svg{color:var(--n600);flex:none} .tuile:hover{background:var(--n200);box-shadow:none;color:var(--encre)} /* ── Le panneau du départ (proposition C) ───────────────────────────── */ /* ⚠️ LE VOLET DE LA LISTE « / », SOUS LE COMPOSEUR, FERMÉ AU REPOS. Il passe PAR-DESSUS la page, qui ne bouge pas. Dans cet ordre : « Pour vous » (sinon « Suggestions »), « Domaine », la ligne de l'entreprise. ⚠️⚠️ LE SCRIPT POSE « .ouvert » ; « :focus-within » N'EST QUE LE CHEMIN SANS SCRIPT (« .pilote » : posé par le script). Safari ne donne pas le focus à un bouton cliqué : au focus seul, le panneau se refermait AVANT le clic. Sans script, le survol le tient ouvert le temps d'un clic. ⚠️ SUR ORDINATEUR SEULEMENT : sur téléphone, l'accueil n'a ni domaines ni tuiles (« 19-mobile-simple.css »). */ .panneau-depart{display:none;position:absolute;left:0;right:0; top:calc(100% + 8px);z-index:20;background:var(--blanc); border:1px solid var(--n400);border-radius:var(--r3); box-shadow:0 18px 48px rgba(15,23,42,.16);padding:10px 8px 8px; flex-direction:column;gap:12px} /* ⚠️⚠️ ET IL TIENT DANS LA FENÊTRE À TOUTE LARGEUR (02/10/2026, v29). Sous 960 px de large, les domaines passent sur trois rangées (quatre à 768) : le panneau ouvert sortait jusqu'à 141 px sous le bord, la réserve du bas étant taillée pour le panneau d'un grand écran. S'il ne tient pas dans la place sous le composeur (moins 16 px), le script lui donne cette hauteur et « .defile » : il DÉFILE DEDANS, la page ne bouge pas. ⚠️ « .defile » SEULEMENT QUAND IL LE FAUT : un bloc qui peut défiler est peint à part, et ses bords arrondis changeaient de quelques pixels même quand il tenait. « scroll-padding » : l'élément que le clavier atteint se montre entier, son anneau compris, pas collé au bord. */ .panneau-depart.defile{overflow-y:auto;overscroll-behavior:contain; scroll-padding:8px 0;scrollbar-width:thin} @media (min-width:768px){ .cadre.ouvert .panneau-depart, .cadre:not(.pilote):focus-within .panneau-depart, .cadre:not(.pilote) .panneau-depart:hover{display:flex} /* ⚠️ « / » TAPÉ, LA LISTE DES MODÈLES PREND SA PLACE : au même endroit, par-dessus la page elle aussi. */ .accueil .menu-modeles{position:absolute;left:0;right:0; top:calc(100% + 8px);z-index:25;margin:0} /* ⚠️⚠️ L'ASSISTANT SUGGÉRÉ AUSSI (02/10/2026, revue). Resté dans le flux d'une colonne centrée, il faisait remonter le composeur de 66 à 86 px pendant qu'on tapait. Il prend la place du panneau, par-dessus la page, avec son ombre. */ .accueil .suggestion-assistant{position:absolute;left:0;right:0; top:calc(100% + 8px);z-index:25;margin:0; box-shadow:0 18px 48px rgba(15,23,42,.16)} } .cadre:has(#menu-modeles:not([hidden])) .panneau-depart{display:none} .panneau-t,.panneau-depart .pour-vous-tete h2{margin:0;padding:0 12px; font-size:13px;font-weight:600;color:var(--n700)} .panneau-depart .accueil-choix{gap:6px} /* Les domaines en petit ; le choisi en gris, avec sa coche : plus de pastille noire. */ .panneau-depart .puces{padding:0 8px;gap:4px 6px} .panneau-depart .puce{min-height:32px} .panneau-depart .puce>span{height:28px;padding:0 10px;font-size:13px; font-weight:400} .panneau-depart .puce[aria-checked=true]>span{background:var(--n200); color:var(--encre);border-color:var(--n400)} /* ⚠️ « L'ENTREPRISE » (01/10/2026) : une ligne discrète, à l'administrateur seul, tant que le questionnaire est vide. C : la dernière du panneau, sous un filet. */ .panneau-depart .note-entreprise{margin:0;padding:8px 12px 2px; border-top:1px solid var(--n300);font-size:12.5px;line-height:1.5; color:var(--n700)} /* ── LES ESPACES METIER — des puces, pas un popup ──────────────────── */ /* ⚠️ ILS PROPOSENT, ILS NE BLOQUENT PAS. Le champ de question reste ouvert : quelqu'un qui ne sait pas ou ranger sa question doit pouvoir la poser quand meme, sur toute la bibliotheque, comme avant les espaces. ⚠️⚠️ LE POPUP EST PARTI (maquette validée, 27/09/2026). Il interceptait tous les clics de la page et faisait perdre le texte déjà tapé ; les puces restent sous les yeux, « Tout » dit en clair qu'aucun domaine veut dire chercher partout, et le dernier choix revient de lui-même. */ .puces{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;margin:0} .puce{min-height:44px;flex:none;display:inline-flex;align-items:center; padding:0;border:none;background:transparent;cursor:pointer;font:inherit; color:inherit} .puce>span{height:34px;display:inline-flex;align-items:center;gap:6px; padding:0 14px;border-radius:999px;background:var(--blanc); color:var(--encre);border:1px solid var(--n400);font-size:14px; font-weight:500} .puce:hover>span{border-color:var(--n500)} .puce[aria-checked=true]>span{background:var(--encre);color:var(--fond); border-color:var(--encre)} .puce svg{display:none} .puce[aria-checked=true] svg{display:inline} .puce:focus-visible{outline:none} .puce:focus-visible>span{outline:2px solid var(--action);outline-offset:2px} .enligne{display:inline;margin:0} /* ── Le questionnaire : une question à la fois (refonte, lot 3) ───── */ /* ⚠️ LA MAQUETTE VALIDÉE : « · 2 sur 2 », une barre d'étapes, la réponse d'avant rappelée, la question en grand, Précédent et « Lancer l'assistant ». Les capitales grises (« QUESTION 1 SUR 2 ») sont parties. */ /* ⚠️⚠️ SOBRE, COMME LA CONSOLE (30/09/2026). Richard : « revoir l'esthétique des popups qui s'affichent car très grossier ; ça doit être plus léger et sobre ; c'est le texte en gras ou la taille de la question ». La question se lit en texte courant (16 px, poids normal), le cadre reprend celui des fenêtres de la console (bord fin, ombre 18/40), le voile s'éclaircit, le champ prend la règle des champs et un focus gris, le bouton rapetisse. Deux variantes comparées en captures : la plus sobre a été gardée. */ .popup-precision{border:1px solid var(--n300);border-radius:var(--r3); padding:20px 24px 22px;max-width:520px;width:calc(100% - 32px); background:var(--blanc);color:var(--encre); box-shadow:0 18px 40px rgba(15,23,42,.18)} .popup-precision[open]{display:flex;flex-direction:column;gap:14px} .popup-precision:not([open]){display:none} .popup-precision::backdrop{background:rgba(15,23,42,.28)} .precision-tete{display:flex;align-items:center;justify-content:space-between; gap:12px;margin:0 0 -8px} .popup-precision .ou{margin:0;font-size:13px;font-weight:500; color:var(--n700)} .precision-etapes{display:flex;gap:6px;margin-right:8px} .precision-etapes span{flex:1;height:3px;border-radius:999px; background:var(--n300)} .precision-etapes span.faite{background:var(--action)} .precision-rappel{margin:0 8px 0 0;display:flex;align-items:center;gap:8px; font-size:14px;color:var(--n800)} .precision-rappel svg{color:var(--vert700);flex:none} .precision-rappel[hidden]{display:none} /* ⚠️ CE QUE LA DISCUSSION A DÉJÀ ÉTABLI (30/09/2026) : montré, pas reposé ; « Corriger » le rend modifiable. */ .precision-retenu{margin:0 8px 0 0;padding:10px 12px;border-radius:var(--r1); background:var(--n100);border:1px solid var(--n300);display:flex; flex-direction:column;gap:6px;font-size:14px;color:var(--n800)} .precision-retenu[hidden]{display:none} .precision-retenu p{margin:0} .precision-retenu ul{margin:0;padding:0 0 0 18px;color:var(--encre)} .precision-retenu .bouton-doux{align-self:flex-start;min-height:36px; padding:0 12px;font-size:13px;font-weight:500} .popup-precision h2{font-size:16px;font-weight:400;margin:0 8px 0 0; line-height:1.5;letter-spacing:0} /* Un trou sans question se montre par son nom : « Dossier », pas « dossier ». */ .popup-precision h2::first-letter{text-transform:uppercase} .popup-precision textarea{width:calc(100% - 8px);min-height:48px; padding:10px 12px;font-size:15px;border:1px solid var(--n300); border-radius:var(--r1);background:var(--n100);color:var(--encre); resize:vertical} .popup-precision textarea:focus{border-color:var(--n600); background:var(--blanc);box-shadow:none} .popup-precision textarea[hidden]{display:none} .popup-precision .pied{display:flex;gap:8px;align-items:center; justify-content:flex-end;flex-wrap:wrap;margin:0 8px 0 0} .popup-precision .pied .bouton-plein,.popup-precision .pied .bouton-doux{ min-height:44px;padding:0 16px;font-size:14px;font-weight:500} .precision-aide{margin-right:auto;font-size:14px;color:var(--n800)} .popup-precision .pied [hidden]{display:none} /* ⚠️ LE MÊME QUESTIONNAIRE, SANS SCRIPT (02/10/2026) : un formulaire en tête de page, dans « noscript ». Il reprend le cadre du dialogue (bord fin, ombre, champs gris), mais toutes les questions à la fois : une question à la fois demande un script. */ .questionnaire-sans-script{max-width:520px;margin:24px auto 0; padding:20px 24px 22px;border:1px solid var(--n300);border-radius:var(--r3); background:var(--blanc);color:var(--encre); box-shadow:0 18px 40px rgba(15,23,42,.18)} .questionnaire-sans-script form{display:flex;flex-direction:column;gap:10px} .questionnaire-sans-script h2{margin:0 0 4px;font-size:16px;font-weight:600; line-height:1.5} .questionnaire-sans-script p{margin:0;font-size:15px;color:var(--n800)} .questionnaire-sans-script label{font-size:15px;line-height:1.5; color:var(--encre)} .questionnaire-sans-script label::first-letter{text-transform:uppercase} .questionnaire-sans-script textarea{width:100%;box-sizing:border-box; min-height:48px;padding:10px 12px;font-size:15px;border:1px solid var(--n300); border-radius:var(--r1);background:var(--n100);color:var(--encre); resize:vertical} .questionnaire-sans-script textarea:focus{border-color:var(--n600); background:var(--blanc)} .questionnaire-sans-script .pied{display:flex;gap:8px;align-items:center; justify-content:flex-end;flex-wrap:wrap;margin-top:6px} .questionnaire-sans-script .pied .bouton-plein, .questionnaire-sans-script .pied .bouton-doux{min-height:44px;padding:0 16px; font-size:14px;font-weight:500} /* Le trombone de la popup (30/09/2026) : le circuit du composeur, sa puce posée sous la réponse. ⚠️ L'aperçu « Voir » s'ouvre DANS la popup : posé en absolu, il sortait par le haut de la fenêtre. */ .precision-piece{display:flex;flex-direction:column;align-items:flex-start; gap:8px;margin:-4px 8px 0 0;min-width:0} .precision-piece:not(:has(>:not([hidden]))){display:none} .precision-piece [hidden]{display:none} .joindre-precision{gap:8px} .joindre-precision[aria-disabled=true]{color:var(--n500)} .precision-joindre-dit{margin:0;display:flex;align-items:center;flex-wrap:wrap; gap:8px 10px;font-size:14px;line-height:1.45;color:var(--n800)} .precision-joindre-dit svg{flex:none;color:var(--n500)} .precision-joindre-dit span{flex:1 1 220px;min-width:0} .precision-piece .piece-attente{margin:0;flex-wrap:wrap;max-width:100%; box-sizing:border-box} .precision-piece .piece-dit{flex:1 1 120px} .precision-piece .refus-fichier{margin:0;align-self:stretch} .precision-piece .apercu-joint[open]{flex-basis:100%;order:3} .precision-piece .apercu{position:static;box-shadow:none;padding:12px 14px} .precision-piece .apercu-texte{max-height:30vh} /* ── Ce que l'ecran propose de preparer ─────────────────────────── */ /* ⚠️ SOUS LA REPONSE, PAS A LA PLACE. Le modele a peut-etre dit quelque chose d'utile ; on ajoute une porte, on n'efface pas sa phrase. ⚠️ « Je peux le préparer pour vous. » puis un bouton par traitement (maquette validée) : plus de capitales grises au-dessus. */ .offres{margin:12px 0 0;display:flex;flex-direction:column;gap:12px} .offres p{margin:0;font-size:15px} .offres-gestes{display:flex;flex-wrap:wrap;gap:8px} .offre{min-height:44px;display:inline-flex;align-items:center;gap:8px; padding:8px 18px;background:var(--action);color:var(--blanc); border:1px solid var(--action);border-radius:10px;font:inherit; font-size:15px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer} .offre:hover{background:var(--action600);border-color:var(--action600)} .offre svg{flex:none} /* ── La liste « / » : assistants, puis modèles de question ─────────── */ /* ⚠️ DES BOUTONS DE FORMULAIRE EN DEUX GROUPES (role=group), PAS UNE « listbox » : chacun est un vrai bouton, qu'Entrée actionne. ⚠️ SOUS LE COMPOSEUR DE L'ACCUEIL, le script la raccourcit si elle sort de la fenêtre (« caler_la_liste », 02/10/2026, v29). */ .menu-modeles{background:var(--blanc);border:1px solid var(--n400); border-radius:var(--r3);box-shadow:0 18px 48px rgba(15,23,42,.16); padding:8px;display:flex;flex-direction:column;gap:2px; max-height:max(240px,min(460px,calc(100vh - 480px)));overflow-y:auto} .menu-modeles[hidden],.modeles-groupe[hidden],.modeles-groupe li[hidden], .menu-modeles-rien[hidden]{display:none} /* ⚠️ ELLE VIT DANS LE CADRE DU COMPOSEUR, ET LE SUIT : sous le champ sur l'accueil (à la place du panneau du départ, voir plus haut), au-dessus quand le composeur est descendu en bas du fil. */ .cadre{position:relative} .composeur .menu-modeles{position:absolute;left:0;right:0; bottom:calc(100% + 8px);z-index:25} .modeles-groupe{display:flex;flex-direction:column;gap:2px} .modeles-groupe h2{margin:0;padding:8px 12px 4px;font-size:13px; font-weight:600;color:var(--n700)} .modeles-groupe+.modeles-groupe h2{padding-top:12px} .modeles-groupe ul{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:2px} .modeles-groupe form{margin:0} .modele-ligne{width:100%;min-height:56px;display:flex;align-items:center; gap:12px;padding:8px 12px;border:none;border-radius:10px; background:transparent;color:var(--encre);font:inherit;text-align:left; cursor:pointer} .modele-ligne:hover{background:var(--n200)} .modele-ligne:focus-visible{outline:none;background:var(--action100); box-shadow:inset 0 0 0 2px var(--action)} .modele-ic{width:36px;height:36px;border-radius:8px;background:var(--surface); color:var(--action700);display:inline-flex;align-items:center; justify-content:center;flex:none} .modele-ligne:focus-visible .modele-ic{background:var(--blanc)} /* ⚠️ LA LIGNE QU'ENTRÉE CHOISIRA SE VOIT (maquette « Modèles ») : la première visible, tant que le curseur est dans le champ. Sans elle, « Entrée pour choisir » promettait un choix qu'on ne voyait pas. */ .modele-ligne.pressentie{background:var(--action100); box-shadow:inset 0 0 0 2px var(--action)} .modele-ligne.pressentie .modele-ic{background:var(--blanc)} /* Les flèches ont pris la main : c'est la ligne qui a le focus qui se voit. */ .menu-modeles:focus-within .modele-ligne.pressentie:not(:focus-visible){ background:transparent;box-shadow:none} .menu-modeles:focus-within .modele-ligne.pressentie:not(:focus-visible) .modele-ic{ background:var(--surface)} .modele-texte{display:flex;flex-direction:column;min-width:0} .modele-titre{font-size:15px;font-weight:600} .modele-demande{font-size:13px;color:var(--n800)} .modele-demande .cout-agent{margin:0;font-size:13px} .menu-modeles-rien{margin:0;padding:10px 12px;font-size:14px; color:var(--n800)} .menu-modeles-aide{margin:4px 0 0;padding:10px 12px 4px; border-top:1px solid var(--n300);font-size:13px;color:var(--n800)} /* ⚠️ L'ASSISTANT SUGGÉRÉ PENDANT QU'ON TAPE (30/09/2026) : la ligne de la liste « / », recopiée sous le champ ; le script seul la montre. */ .suggestion-assistant{margin-top:10px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r3);padding:6px} .suggestion-assistant[hidden]{display:none} .suggestion-assistant form{margin:0} .suggestion-titre{margin:0;padding:6px 12px 2px;font-size:13px; font-weight:600;color:var(--n700)} /* ── Le livrable d'un assistant : le visuel et son texte ─────────────── */ /* ⚠️ PROPOSITION B (02/10/2026) : la carte s'efface, le visuel et son texte tiennent ensemble sans cadre ; l'image garde ses 200 px (à 240, le texte du post serait plus étroit que le fil de LinkedIn). */ .carte-livrable{background:transparent;border:0; border-radius:var(--r3);padding:0;display:flex;flex-direction:column; gap:12px} .livrable-haut{display:flex;gap:20px;align-items:flex-start} .carte-livrable .produite{width:200px;max-width:40%;flex:none;border:none} /* ⚠️ UN VISUEL SANS TEXTE PREND LA LARGEUR : 200 px n'ont de sens qu'à côté d'un texte. Le texte d'une carte vivante arrive en fin d'échange. */ .livrable-haut:not(:has(.livrable-corps:not([hidden]))) .produite{width:auto; max-width:100%} .livrable-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .livrable-corps[hidden]{display:none} .geste .ic-avant,.geste .ic-fait{display:inline-flex} .geste .ic-fait,.geste.copie .ic-avant{display:none} .geste.copie .ic-fait{display:inline-flex} .lui .livrable-nom{margin:0;font-size:13px;font-weight:600;color:var(--n800)} .lui .livrable-texte{margin:0;font-size:15px;line-height:1.6; white-space:pre-wrap;word-break:break-word} .livrable-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:4px; padding-top:0;border-top:0} /* ⚠️ LA NOTE DE PRODUCTION, À PART DU POST (30/09/2026) : ce que l'image a coûté se lit, petit et gris, sous les gestes ; elle ne se publie pas. */ .lui .livrable-note{margin:0;font-size:12px;line-height:1.5;color:var(--n700); font-variant-numeric:tabular-nums} .lui .livrable-note[hidden]{display:none} /* Les gestes d'une carte : des boutons blancs à bord, 44 px, comme la maquette ; « Copié » vire au vert le temps de le lire. */ /* ⚠️ 14 PX, PAS 15 : à 15, les quatre gestes et le « ⋯ » ne tenaient pas sur une ligne dans la colonne de lecture (720 px) — vu dans le navigateur. */ .geste{min-height:44px;display:inline-flex;align-items:center;gap:7px; padding:0 10px;background:var(--blanc);color:var(--encre); border:1px solid var(--n400);border-radius:10px;font:inherit;font-size:14px; font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap} /* ⚠️⚠️ DANS LE FIL, DES GESTES NUS (proposition B, 02/10/2026) : quatre boutons bordés sous un visuel pesaient plus que le post. ⚠️ « :where(#thr) » NE PÈSE RIEN : « Mes contenus » garde ses boutons de 44 px, et chaque état d'un geste (survol, « Copié », « En relecture », « Publier ») garde la main. */ :where(#thr) .geste{min-height:36px;background:transparent;color:var(--n700); border:1px solid transparent;font-weight:500} @media (hover:none){:where(#thr) .geste{min-height:44px}} .geste:hover{background:var(--n200);color:var(--encre);text-decoration:none} .geste svg{flex:none} .geste.copie{color:var(--vert700)} /* « En relecture » sur la carte : un état, pas un bouton (maquette « Relire »). */ .geste.etat-relecture{background:var(--n200);border-color:transparent; color:var(--n800);cursor:default} .geste.etat-relecture:hover{background:var(--n200)} .geste[hidden],.menu-carte[hidden]{display:none} /* ── Mes contenus : une ligne par pièce, une recherche, des filtres ─── */ .contenus-page{width:100%;max-width:824px;margin:0 auto; padding:24px 32px 40px;display:flex;flex-direction:column;gap:16px} .contenus-intro{margin:0;font-size:15px;color:var(--n800)} .contenus-page .bandeau-ok{margin:0} .contenus-filtres{display:flex;flex-direction:column;gap:10px;margin:0} .contenus-rech{min-height:48px;display:flex;align-items:center;gap:10px; padding:0 14px;background:var(--blanc);border:1px solid var(--n400); border-radius:var(--r2);color:var(--n800)} .contenus-rech:focus-within{border-color:var(--action); box-shadow:0 0 0 3px var(--action200)} /* Par son identifiant : la règle générale des champs battait la classe. */ #contenus-q{flex:1;min-width:0;min-height:46px;margin:0;padding:0; border:none;background:transparent;box-shadow:none;outline:none; font-size:15px;color:var(--encre)} .contenus-liste{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:8px} .contenu{display:flex;align-items:center;gap:14px; padding:12px 12px 12px 16px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r2)} .contenu-signe{width:40px;height:40px;border-radius:10px; background:var(--action100);color:var(--action700);display:inline-flex; align-items:center;justify-content:center;flex:none;overflow:hidden} .contenu-vignette{width:40px;height:40px;object-fit:cover;display:block} .contenu-texte{flex:1;min-width:0;display:flex;flex-direction:column} .contenu-titre{font-size:15px;font-weight:600;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .contenu-meta{font-size:13px;color:var(--n800)} .contenu-gestes{display:flex;align-items:center;gap:6px;flex:none} .vol-note{margin:0;padding:8px 10px;font-size:13px;color:var(--n800); overflow-wrap:anywhere} /* ⚠️ LE MENU OUVERT PASSE AU-DESSUS DE TOUTE LA LISTE : sa ligne monte d'un cran, et le panneau ne se mêle plus aux lignes d'en dessous. */ .contenu:has(.menu[open]){position:relative;z-index:5} .contenu .vol-menu{width:280px} /* L'image du post, choisie SUR l'aperçu (formulaire GET, sans script). ⚠️ Les règles de « .seul » (connexion, erreurs) visaient ses champs et son bouton : on les défait ici, sinon le bouton prenait toute la largeur, en bleu. */ .seul .li-choix{flex-direction:row;align-items:center;gap:8px;margin:14px 0 0} .seul .li-choix label{font-size:14px;font-weight:600;letter-spacing:0; text-transform:none;color:var(--encre)} .seul .li-choix select{min-height:44px} .seul .li-choix>button{width:auto;margin:0;min-height:44px;padding:0 18px; background:var(--blanc);color:var(--encre);border:1px solid var(--n400); border-radius:10px;font-size:15px} .seul .li-choix>button:hover{background:var(--n200)} .seul .li-choix>button::before{content:none} /* ⚠️ LE TEXTE DU POST, CHOISI SUR L'APERÇU (30/09/2026). Richard : « le texte que tu as mis sur le post ne correspond pas ». Un vrai champ de travail, pas celui de la connexion : les règles de « .seul » (libellés en capitales, bouton bleu pleine largeur, filet au-dessus) sont défaites ici. */ /* ⚠️ CHOISIR LE TEXTE DU POST (02/10/2026) : sans texte, aucune maquette ne se compose ; le visuel se montre en petit au-dessus du champ, pour savoir de quel post on parle. */ .seul .li-choisir{width:320px;max-width:100%;margin:18px 0 0} .seul .li-edition{display:flex;flex-direction:column;gap:12px;margin:18px 0 6px; padding:16px 18px;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2)} .seul .li-edition form{gap:8px} .seul .li-edition label{font-size:15px;font-weight:600;letter-spacing:0; text-transform:none;color:var(--encre)} .seul .li-origine{margin:0;font-size:13px;color:var(--n800)} .seul .li-edition textarea{display:block;width:100%;box-sizing:border-box; min-height:180px;margin:0;padding:10px 12px;font:inherit;font-size:15px; line-height:1.55;color:var(--encre);background:var(--blanc); border:1px solid var(--n400);border-radius:var(--r1);resize:vertical} .seul .li-edition textarea:focus{border-color:var(--action);outline:none; box-shadow:0 0 0 3px var(--action200)} .seul .li-pied{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px} .seul .li-edition button{width:auto;margin:0;min-height:44px;padding:0 18px; border-radius:10px;font-size:15px} .seul .li-edition form>button::before{content:none} .seul .li-garde{font-size:13px;color:var(--n800)} .seul .li-reponses>summary{min-height:44px;display:flex;align-items:center; gap:8px;width:fit-content;cursor:pointer;list-style:none;font-size:14px; font-weight:600;color:var(--encre)} .seul .li-reponses>summary::-webkit-details-marker{display:none} .seul .li-reponses>summary::before{content:"";flex:none;width:0;height:0; border-left:6px solid currentColor;border-top:5px solid transparent; border-bottom:5px solid transparent} .seul .li-reponses[open]>summary::before{transform:rotate(90deg)} .seul .li-reponses-liste{list-style:none;margin:4px 0 0;padding:0;display:flex; flex-direction:column;gap:8px} .seul .li-reponse{display:flex;align-items:flex-start;gap:12px;padding:10px 12px; background:var(--n100);border:1px solid var(--n300);border-radius:var(--r1)} .seul .li-extrait{flex:1;min-width:0;margin:0;font-size:14px;line-height:1.5; color:var(--encre);overflow-wrap:anywhere} .seul .li-reprise{flex:none;margin:0} .seul .li-reprendre{background:var(--blanc);color:var(--encre); border:1px solid var(--n400)} .seul .li-reprendre:hover{background:var(--n200)} .seul .li-etiquette{flex:none;align-self:center;font-size:13px;font-weight:600; color:var(--n800)} .seul .li-fait{margin:12px 0 0;padding:10px 12px} /* ⚠️ SUR TÉLÉPHONE : la liste « / » monte juste au-dessus du composeur, qui colle au bas de l'écran ; le visuel d'une carte prend toute la largeur ; une ligne de « Mes contenus » passe ses gestes dessous. Ces règles ne touchent que les composants du lot 3 : l'ordre dans la feuille n'y change rien. */ @media (max-width:767px){ .accueil .menu-modeles{position:absolute;left:0;right:0; bottom:calc(100% + 8px);margin:0;z-index:25;max-height:50vh} .livrable-haut{flex-direction:column} .carte-livrable .produite{width:100%;max-width:100%} .contenus-page{padding:16px 16px 32px} .contenu{flex-wrap:wrap} .contenu-gestes{width:100%;justify-content:flex-end} .popup-precision{padding:14px 12px 20px 20px} } /* ── LES RELECTURES — le premier ecran qui montre ce que JE dois faire ── */ /* ⚠️ « plein » ET « etiquette » VENAIENT DE LA CONSOLE, et n'existent pas ici : les reemployer rendait un formulaire tout en ligne, sans marges. Vu en ouvrant l'ecran, pas en relisant. */ .carte-relecture label.plein{display:block;font-size:13px;font-weight:600; margin:0 0 14px} .carte-relecture label.plein input,.carte-relecture label.plein select{ display:block;width:100%;font:inherit; font-size:14px;margin-top:5px;padding:9px 12px;border:1px solid var(--n400); border-radius:var(--r1);background:var(--blanc);color:inherit} .carte-relecture .etiquette{display:block;font-size:11px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--n700); margin:18px 0 4px} .carte-relecture{background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2);padding:18px 20px;margin:0 0 14px; box-shadow:var(--ombre-legere)} .carte-relecture.petite{padding:13px 16px} /* Une carte entière qui mène quelque part : ni soulignée, ni bleue. */ .carte-lien{display:block;text-decoration:none;color:inherit} .carte-lien:hover{text-decoration:none;color:inherit;border-color:var(--n400)} /* Le bouton « Envoyer » d'une relecture approuvée : un lien habillé. */ .envoi-approuve{margin:12px 0 0} .lien-bouton{display:inline-block;text-decoration:none} .lien-bouton:hover{text-decoration:none;color:var(--blanc)} .carte-relecture .rendu{margin-top:10px;font-size:14px} .carte-relecture img.produite{max-width:280px;border-radius:var(--r1); margin-top:10px} /* ⚠️ L'ORDRE SE VOIT. Une liste a puces dirait qui valide, pas dans quel ordre — et l'ordre EST la regle du circuit. */ .etapes{margin:10px 0 0;padding-left:20px;font-size:13px} .etapes li{margin:2px 0} .etapes li.franchie{color:var(--vert700)} .etapes li.bloquee{color:var(--rouge700);font-weight:600} .decision{display:flex;gap:8px;align-items:center;flex-wrap:wrap; margin-top:12px} .decision input[type=text]{flex:1;min-width:220px;font:inherit; font-size:13px;padding:8px 11px;border:1px solid var(--n400); border-radius:var(--r1);background:var(--blanc);color:inherit} .btn-oui,.btn-non{font:inherit;font-size:13.5px;font-weight:600; padding:8px 15px;border-radius:var(--r1);cursor:pointer;border:0} .btn-oui{background:var(--vert700);color:var(--blanc)} .btn-non{background:var(--blanc);color:var(--rouge700);border:1px solid var(--rouge700)} .circuits{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px} .ligne-circuit{display:flex;gap:10px;align-items:flex-start; font-size:14px;cursor:pointer} .btn-envoi{font:inherit;font-size:13.5px;font-weight:600;padding:10px 16px; border:0;border-radius:var(--r1);background:var(--action); color:var(--blanc);cursor:pointer;margin-top:8px} /* ⚠️ LE COMPTE SE VOIT. « Relectures » se lit comme un ecran de plus ; « 3 relectures » se lit comme du travail qui attend. */ .btn2.en-attente{border-color:var(--rouge700);color:var(--rouge700);font-weight:600} .bandeau-non{background:var(--rouge100);color:var(--rouge700);border-radius:var(--r1); padding:11px 15px;font-size:13.5px;margin:0 0 16px} .bandeau-ok{background:var(--vert100);color:var(--vert700);border-radius:var(--r1); padding:11px 15px;font-size:13.5px;margin:0 0 16px} .lien-nu{font:inherit;font-size:inherit;background:none;border:0;padding:0; cursor:pointer;color:var(--action);text-decoration:underline} /* ── LA PRESENTATION COMPLETE (30/09/2026) ── Richard : « il doit vraiment proposer de creer des presentations completes ». L'ecran de choix de « Diaporama » : la carte de la relecture, un titre, le cout, ce qui part. */ .presentation-choix h2{margin:0 0 8px;font-size:16px} .presentation-choix p{margin:0 0 10px;font-size:14px;line-height:1.5} .presentation-choix .presentation-cout{color:var(--n700)} .presentation-choix details.presentation-envoi{border:1px solid var(--n300); border-radius:var(--r1);background:var(--fond);margin:0 0 12px} .presentation-choix details.presentation-envoi>summary{min-height:44px; display:flex;align-items:center;padding:0 12px;cursor:pointer;font-size:14px; font-weight:600} .presentation-choix details.presentation-envoi ul{margin:0; padding:4px 14px 12px 30px;font-size:13.5px;line-height:1.5} /* ── LE BOUTON QUI ATTEND UNE PRODUCTION LONGUE (30/09/2026) ── Richard : « il faut un bouton qui tourne pour dire que c'est en cours. On a l'impression que ça ne marche pas ». Une roue dans le bouton, une ligne qui dit ce qui se passe, le temps écoulé. Sans script, rien de tout cela ne paraît : les deux lignes sont vides, la roue cachée. */ .prod-attente .prod-attente-roue{display:none;width:16px;height:16px; margin-right:8px;flex:none;box-sizing:border-box;border:2px solid currentColor; border-right-color:transparent;border-radius:50%} .prod-attente.prod-attente-actif .prod-attente-roue{display:inline-block; animation:prod-attente-roue .8s linear infinite} .prod-attente .bouton-plein:disabled{cursor:progress;opacity:.85} .prod-attente .prod-attente-etat,.prod-attente .prod-attente-temps{margin:0; font-size:13.5px;line-height:1.5;overflow-wrap:anywhere} .prod-attente .prod-attente-etat:not(:empty){margin-top:10px;padding:10px 12px; background:var(--fond);border:1px solid var(--n300);border-radius:var(--r1)} .prod-attente .prod-attente-temps:not(:empty){margin-top:4px;color:var(--n700)} /* Un refus se lit au même endroit, aux couleurs du bandeau d'erreur. */ .prod-attente.prod-attente-refus .prod-attente-etat:not(:empty){ background:var(--rouge100);border-color:var(--rouge200);color:var(--rouge700)} @keyframes prod-attente-roue{to{transform:rotate(360deg)}} /* ⚠️ MOINS DE MOUVEMENT DEMANDÉ : pas de rotation. « Création en cours… » dans le bouton et la ligne en dessous le disent déjà. */ @media (prefers-reduced-motion:reduce){ .prod-attente.prod-attente-actif .prod-attente-roue{display:none;animation:none} } /* ── LA CHARTE D'UN SITE (30/09/2026) ── Richard : « il doit pouvoir aller chercher une charte graphique sur internet si besoin ». Les pastilles sont des champs « couleur » (le navigateur les dessine) et des SVG en data: : aucun style en ligne, la politique de contenu n'est pas ouverte. */ form.carte-relecture.charte-site-page h2{margin:0 0 8px;font-size:16px} .charte-couleurs{display:grid;gap:10px;margin:0 0 6px; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))} .charte-couleur{display:flex;align-items:center;gap:10px;min-height:44px; font-size:14px;min-width:0} .charte-couleur input[type=color]{width:44px;height:44px;flex:0 0 44px; padding:2px;border:1px solid var(--n400);border-radius:var(--r1); background:var(--blanc);cursor:pointer} .charte-couleur input[type=color]::-webkit-color-swatch-wrapper{padding:0} .charte-couleur input[type=color]::-webkit-color-swatch{border:0;border-radius:6px} .charte-couleur input[type=color]::-moz-color-swatch{border:0;border-radius:6px} .charte-couleur-nom{display:flex;flex-direction:column;min-width:0} .charte-code,.charte-codes{font-family:var(--mono);font-size:12.5px; color:var(--n700);overflow-wrap:anywhere} .charte-codes{margin:4px 0 0} .charte-source{font-size:12.5px;color:var(--n700)} .charte-polices{margin:0 0 8px;padding-left:18px;font-size:14px;line-height:1.6; overflow-wrap:anywhere} .charte-polices .charte-source{margin-left:4px} img.charte-logo{display:block;max-width:100%;max-height:72px;width:auto; height:auto;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r1);padding:8px;box-sizing:border-box} img.charte-apercu{display:block;width:100%;max-width:320px;height:auto; border-radius:var(--r1);border:1px solid var(--n300);margin:0 0 6px} img.charte-pastilles{display:block;width:auto;max-width:100%;height:28px;margin:4px 0; align-self:flex-start} .charte-retirer{margin:0 0 14px;display:flex;justify-content:flex-end} /* ── CONNAISSANCE — proposer a la memoire (29/09/2026) ───────────────── */ /* ⚠️ LE CHAMP DE TEXTE AU DESSIN DES AUTRES : « label.plein » ne stylait que « input » et « select », et une zone de texte nue jurait dans la carte. */ .carte-relecture label.plein textarea{display:block;width:100%;font:inherit; font-size:14px;margin-top:5px;padding:9px 12px;border:1px solid var(--n400); border-radius:var(--r1);background:var(--blanc);color:inherit;resize:vertical; box-sizing:border-box} .connaissance-explique{font-size:14px;line-height:1.5;margin:0 0 6px} .connaissance-forme .doux{margin:0 0 4px} .proposition .proposition-texte{margin:8px 0 6px;font-size:14px; white-space:pre-wrap;overflow-wrap:anywhere} .proposition .doux{margin:0} .connaissance-retenu{margin:0 0 6px;font-size:13.5px;color:var(--vert700)} /* ── LA DISCUSSION : demande guidée, mémoire, mes instructions (30/09/2026) ── */ /* ⚠️ L'INTERRUPTEUR (« Ma façon d'écrire ») se lit sans la couleur : « aria-checked » et la pastille qui glisse. La demande guidée ne s'en sert plus (variante A, 01/10/2026) : voir « LA PASTILLE GUIDÉE » plus bas. */ .interrupteur{display:inline-flex;align-items:center;gap:8px;min-height:32px; padding:0 6px 0 2px;border:0;background:none;font:inherit;font-size:13px; color:var(--n800);cursor:pointer;border-radius:var(--r1)} .interrupteur:hover{color:var(--encre)} .interrupteur:focus-visible{outline:2px solid var(--action);outline-offset:2px} .interrupteur-piste{position:relative;width:30px;height:18px;flex:none; border-radius:999px;background:var(--n400);transition:background .15s} .interrupteur-piste::after{content:"";position:absolute;top:2px;left:2px; width:14px;height:14px;border-radius:999px;background:var(--blanc); transition:left .15s} .interrupteur[aria-checked="true"] .interrupteur-piste{background:var(--action)} .interrupteur[aria-checked="true"] .interrupteur-piste::after{left:14px} .interrupteur[aria-checked="true"]{color:var(--encre);font-weight:600} /* ── LA PASTILLE GUIDÉE (variante A, 01/10/2026) ────────────────────── Richard : « Variante A pour la demande guidée ». La maquette « Guidée », retranscrite en classes et en jetons. Dans la barre du composeur, à droite du modèle : éteinte, neutre ; allumée, un bord bleu discret et cinq traits qui se remplissent selon les gestes repérés ; détail ouvert, le bord d'action et son halo. ⚠️ LE BLEU PLEIN RESTE AU BOUTON D'ENVOI. */ .guide{margin:0;display:flex;align-items:center} .pastille-guide{min-height:44px;display:inline-flex;align-items:center; padding:0 2px;border:none;background:transparent;cursor:pointer; font:inherit;color:inherit} .pastille-g{height:34px;display:inline-flex;align-items:center;gap:8px; padding:0 12px 0 10px;border-radius:999px;background:var(--blanc); border:1px solid var(--n400);font-size:14px;font-weight:600; color:var(--n800);white-space:nowrap} .pastille-g svg{color:var(--n700);flex:none} .pastille-guide:hover .pastille-g{background:var(--n100)} .guide-traits{display:inline-flex;align-items:center;gap:2px} .guide-traits span{width:4px;height:12px;border-radius:2px; background:var(--n400)} .guide[data-actif="1"] .pastille-g{color:var(--encre); border-color:color-mix(in srgb,var(--action) 45%,var(--blanc))} .guide[data-actif="1"] .pastille-g svg{color:var(--action700)} .guide[data-actif="1"] .guide-traits span.plein{background:var(--action)} .pastille-guide[aria-expanded="true"] .pastille-g{border-color:var(--action); box-shadow:0 0 0 3px var(--action200)} .pastille-guide:focus-visible{outline:none} .pastille-guide:focus-visible .pastille-g{outline:2px solid var(--action); outline-offset:2px} /* Le panneau. ⚠️ SANS SCRIPT, il vient sous le composeur, dans la page (la page vient de se recharger) ; AVEC, il flotte au-dessus (« .flottant ») et la page ne bouge plus. */ .guide-panneau{margin:8px 0 0;background:var(--blanc); border:1px solid var(--n400);border-radius:var(--r2);padding:6px 16px 14px; display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45; color:var(--encre)} .guide-panneau[hidden]{display:none} .guide-panneau.flottant{position:absolute;left:0;bottom:calc(100% + 8px); margin:0;z-index:30;width:min(400px,calc(100vw - 32px));overflow-y:auto; box-shadow:0 18px 48px rgba(15,23,42,.16)} .guide-panneau:focus{outline:none} .guide-panneau-tete{display:flex;align-items:center; justify-content:space-between;gap:12px} .guide-panneau-t{margin:0;font-size:15px;font-weight:600} .guide-compte{font-size:13px;font-weight:400;color:var(--n700)} .guide-eteindre{margin:0} .guide-desactiver{min-height:44px;padding:0 6px;margin-right:-6px;border:none; background:transparent;font:inherit;font-size:13px;font-weight:500; color:var(--n800);cursor:pointer;border-radius:var(--r1)} .guide-desactiver:hover{color:var(--encre);text-decoration:underline} .guide-desactiver:focus-visible{outline:2px solid var(--action);outline-offset:-2px} .guide-liste{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:6px} .guide-liste li{display:grid;grid-template-columns:20px 1fr;gap:10px; align-items:start;line-height:20px} .guide-liste li.guide-note{display:block;font-size:13px;color:var(--n800)} .guide-liste li[hidden]{display:none} .guide-liste svg{color:var(--n600)} .guide-liste .guide-deja svg,.guide-liste .guide-complet svg{color:var(--encre)} .guide-liste svg .coche-blanche{stroke:var(--blanc)} .guide-liste b{font-weight:600} .guide-deja-l{color:var(--n700)} .guide-conseil{display:block;font-size:13px;line-height:1.45; color:var(--n800)} .guide-panneau-dit{margin:0;font-size:13px;color:var(--rouge700)} .guide-panneau-dit[hidden]{display:none} .guide-avis{margin:0} .guide-panneau-pied{display:flex;align-items:center;gap:12px; border-top:1px solid var(--n300);padding-top:10px;margin-top:2px} .guide-ameliorer{padding:0 16px;font-size:14px;gap:8px;white-space:nowrap} .guide-ameliorer svg{color:var(--action700)} .guide-ameliorer[disabled]{opacity:.7;cursor:progress} .guide-annonce{font-size:12.5px;line-height:1.4;color:var(--n700)} /* La version du modèle, SANS SCRIPT : dans le panneau, avec son formulaire. */ .guide-proposition{padding:10px 12px;border:1px solid var(--n300); border-radius:var(--r1);background:var(--n100)} .guide-proposition-t{margin:0 0 4px;font-weight:600;font-size:12.5px} .guide-proposition-texte{margin:0;white-space:pre-wrap;overflow-wrap:anywhere; font-size:14px;color:var(--encre)} .guide-proposition form{margin:8px 0 0} /* ⚠️ LA VERSION PROPOSÉE, DANS LE CHAMP (maquette « Guidée, version proposée ») : une fine bande grise au-dessus, le texte du modèle à la place du champ, ses ajouts surlignés. « Accepter » le met dans le champ, « Garder la mienne » rend le texte d'avant. */ #poser.en-version #question{display:none} .guide-propose{display:flex;align-items:center;gap:10px;margin:0 0 6px -6px; padding:0 4px 0 10px;min-height:52px;background:var(--n100); border:1px solid var(--n300);border-radius:10px;font-size:13.5px} .guide-propose>svg{color:var(--action700);flex:none} .guide-propose p{margin:0;min-width:0;color:var(--encre)} .guide-propose b{font-weight:600} .guide-propose-ajout{color:var(--n700)} .guide-propose-gestes{margin-left:auto;display:flex;align-items:center;gap:2px; flex:none} .guide-accepter{padding:0 12px;font-size:13.5px;gap:8px} .guide-garder{min-height:44px;padding:0 10px;border:none;background:transparent; font:inherit;font-size:13.5px;font-weight:600;color:var(--n800); cursor:pointer;border-radius:10px} .guide-garder:hover{background:var(--n200);color:var(--encre)} .guide-garder:focus-visible{outline:2px solid var(--action);outline-offset:-2px} .guide-version{min-height:52px;max-height:180px;overflow-y:auto; padding:6px 0 0;font-size:16px;line-height:1.6;color:var(--encre); white-space:pre-wrap;overflow-wrap:anywhere} .guide-version:focus-visible{outline:2px solid var(--action);outline-offset:2px; border-radius:4px} .guide-version mark{background:var(--action100);color:var(--encre); border-radius:4px;padding:1px 2px} .guide-version .a-remplir{border-bottom:1px dashed var(--action700)} /* La fenêtre d'avertissement : la même dans un « dialog » et dans une page. */ .dialogue-memoire{border:none;border-radius:var(--r3);padding:22px 24px; max-width:560px;width:calc(100% - 32px);background:var(--blanc); color:var(--encre);box-shadow:0 18px 48px rgba(15,23,42,.24)} .dialogue-memoire::backdrop{background:rgba(15,23,42,.42)} .avert-memoire h2{display:flex;align-items:center;gap:8px;margin:0 0 8px; font-size:18px;line-height:1.3} .avert-memoire h2 svg{color:var(--rouge700);flex:none} .avert-memoire>p{margin:0 0 12px;font-size:14px;line-height:1.5; padding:10px 12px;border-radius:var(--r1);background:var(--rouge100); color:var(--rouge700)} .avert-memoire textarea{display:block;width:100%;box-sizing:border-box; min-height:96px;margin:6px 0 4px;padding:9px 12px;font:inherit;font-size:14px; border:1px solid var(--n400);border-radius:var(--r1);resize:vertical; background:var(--blanc);color:var(--encre)} .avert-memoire label{font-size:13.5px;font-weight:600} .avert-memoire .avert-trop{margin:0 0 8px;color:var(--rouge700)} .avert-memoire .avert-trop[hidden]{display:none} .avert-memoire-forme{margin:0 0 8px} .avert-sans-memoire{margin:4px 0 0;text-align:right} .avert-sans-memoire[hidden]{display:none} .lien-doux{font:inherit;font-size:13px;background:none;border:0;padding:6px 0; cursor:pointer;color:var(--n800);text-decoration:underline} .avert-page .avert-memoire{background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r3);padding:20px 22px;max-width:640px} .memoire-geste{margin:6px 0 0} .memoire-geste .acte{display:inline-flex;align-items:center;gap:6px;padding:6px 9px; background:none;border:0;font:inherit;font-size:13px;color:var(--n800);cursor:pointer} .instructions-forme textarea{display:block;width:100%;box-sizing:border-box; font:inherit;font-size:14px;margin-top:6px;padding:9px 12px; border:1px solid var(--n400);border-radius:var(--r1);resize:vertical} .instructions-forme label{font-weight:600;font-size:14px} /* ⚠️ L'ETAT SE LIT SANS LA COULEUR : le mot est ecrit, la teinte aide. */ .etat-proposition{display:inline-block;font-size:11.5px;font-weight:700; letter-spacing:.04em;padding:3px 9px;border-radius:999px; background:var(--surface);color:var(--n700)} .etat-proposition.ep-retenue,.etat-proposition.ep-corrigee{ background:var(--vert100);color:var(--vert700)} .etat-proposition.ep-retiree{background:var(--rouge100);color:var(--rouge700)} /* ── Le composeur ────────────────────────────────────────────────────── */ /* ⚠️ LE FORMULAIRE NE PORTE QUE LE CHAMP. La barre d'outils est À CÔTÉ de lui, dans la même carte : elle contient des formulaires à elle (joindre un fichier, retirer le domaine), et un formulaire ne s'imbrique pas dans un autre. Le bouton d'envoi se rattache au sien par « form=poser ». */ /* ⚠️ PROPOSITION B (02/10/2026) : le composeur suit la colonne du fil (632 px) et ne garde qu'une ligne au repos ; il grandit à la frappe (« grandir »). */ .composeur{flex:none;padding:4px 32px 16px} .composeur:empty{display:none} .cadre{width:100%;max-width:632px;margin:0 auto} .accueil .cadre{max-width:none} /* ⚠️ LA MEME CARTE QUE L'ECRAN DE CONNEXION : surface blanche, bord clair, rayon 16, ombre legere. C'est la forme qu'on reconnait d'un ecran a l'autre — et le composeur est ce qu'on regarde le plus longtemps. */ .carte-composeur{position:relative;background:var(--blanc); border:1px solid var(--n400);border-radius:var(--r3); box-shadow:0 1px 2px rgba(15,23,42,.05),0 4px 16px rgba(15,23,42,.06); padding:10px 10px 6px 16px;display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto auto; grid-template-areas:"champ champ champ champ champ champ" "outils puce etat jauge cumul envoyer"; align-items:center;column-gap:4px;row-gap:6px} /* ⚠️ UNE GRILLE, PAS UNE RANGÉE : sur téléphone, la puce du domaine passe AU-DESSUS du champ (maquette) sans qu'on écrive deux composeurs. */ .carte-composeur>.barre{display:contents} .carte-composeur #poser{grid-area:champ} .carte-composeur .outils-g{grid-area:outils} .carte-composeur .puce-domaine{grid-area:puce} .carte-composeur .etat{grid-area:etat} .carte-composeur #envoyer{grid-area:envoyer} /* ⚠️ PAS DE CONTOUR ACTIF AU FOCUS (30/09/2026). Richard : « il ne faut pas mettre en bordure active le contour du champ texte ». Le focus reste VISIBLE, mais sobre : le bord fonce d'un cran en gris (n600 sur blanc : 3,8:1, au-dessus des 3:1 d'un composant) et l'ombre s'épaissit un peu — aucune couleur, aucun halo. */ .carte-composeur:focus-within{border-color:var(--n600); box-shadow:0 1px 2px rgba(15,23,42,.06),0 6px 20px rgba(15,23,42,.09)} #poser{margin:0} /* ⚠️ PAR SON IDENTIFIANT, pour la même raison que la recherche : la règle générale des champs lui aurait remis un cadre gris DANS la carte. */ #question{display:block;width:100%;min-height:30px;height:30px;max-height:180px;margin:0; padding:6px 0 0;border:none;background:transparent;box-shadow:none; outline:none;resize:none;font:inherit;font-size:16px;line-height:1.5; color:var(--encre)} #question:focus{border:none;background:transparent;box-shadow:none} /* ⚠️ L'ACCUEIL GARDE SES DEUX LIGNES (02/10/2026) : la ligne unique de la proposition B vaut pour le fil. L'accueil est l'écran où l'on écrit sa demande ; une demande de deux lignes n'y fait pas descendre les tuiles. */ .accueil #question{min-height:52px;height:auto} .barre{display:flex;align-items:center;justify-content:space-between;gap:8px} .outils-g{display:flex;align-items:center;gap:2px;margin-left:-8px; min-width:0;position:relative;flex-wrap:wrap} /* ⚠️ DÈS 960 PX, LES OUTILS NE PASSENT PLUS À LA LIGNE (02/10/2026) : la colonne y fait toujours 632 px, et une rangée de plus coûtait 46 px de composeur. Faute de place, c'est le NOM du modèle qui se coupe (« … »), jamais son pays ; le nom entier reste dans son menu et pour le lecteur d'écran. Plus étroit, ils passent à la ligne, comme avant. */ @media (min-width:960px){.carte-composeur .outils-g{flex-wrap:nowrap}} .etat{font-size:12.5px;color:var(--n700);min-height:16px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;margin-left:6px} .choix-modele{width:100%} .envoyer{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px; background:var(--action);color:var(--blanc);border:none; border-radius:var(--r1);font-size:13.5px;font-weight:600;cursor:pointer} .envoyer.vif{background:var(--action)} .envoyer:hover{background:var(--action600)} .envoyer.rond{width:44px;height:44px;flex:none;padding:0;border-radius:999px} /* La pastille du modèle : ce qu'elle nomme, et le panneau qu'elle ouvre. ⚠️ ELLE RÉTRÉCIT AU LIEU DE DÉBORDER (02/10/2026), sur ordinateur comme sur téléphone : trop serrée, son texte sortait de sa boîte et passait SOUS l'élément suivant (le pays du modèle sous la jauge, à 375 et à 768 px). */ .pastille-modele{position:relative;min-width:0;flex:0 1 auto} .pastille-modele>summary{list-style:none;min-height:44px;display:inline-flex; align-items:center;padding:0 2px;cursor:pointer;max-width:100%} .pastille-modele>summary::-webkit-details-marker{display:none} .pastille-modele>summary:focus-visible{outline:none} .pastille-modele>summary:focus-visible .pastille{outline:2px solid var(--action); outline-offset:2px} /* ⚠️ LE MODÈLE, DISCRET (proposition B, 02/10/2026) : sans aplat, en 13 px. */ .pastille{height:34px;display:inline-flex;align-items:center;gap:6px; padding:0 10px 0 12px;border-radius:999px;background:transparent; font-size:13px;max-width:min(340px,100%);min-width:0} .pastille b{font-weight:500;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;min-width:0} .pastille-pays{color:var(--n800);white-space:nowrap} .pastille svg{color:var(--n800);flex:none} .vol-modele{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30; width:min(380px,calc(100vw - 32px));background:var(--blanc); border:1px solid var(--n400);border-radius:var(--r2); box-shadow:0 18px 48px rgba(15,23,42,.16);padding:14px 16px; display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5} /* ⚠️⚠️ LES CRÉDITS DU MOIS : UN ANNEAU DE 14 PX SUR LA LIGNE DU COÛT (02/10/2026). Richard : « il faut mettre un indicateur discret qui affiche au survol le reste à conso pour le mois ». La jauge et son texte prenaient une rangée à eux : 154 px de composeur au repos au lieu des 118 de B. L'arc dit la part qui RESTE (plein en début de mois) : vert, ambre au seuil d'alerte ; épuisé, la piste entière passe au rouge. ⚠️ UNE CASE DE 24 PX, PAS PLUS : la barre du composeur (trombone, modèle, « Guidée », coût, envoi) tient en 632 px à 5 px près. Le contour du focus est posé DEDANS (« outline-offset » négatif) : il ne mord ni le coût ni l'envoi, et il reste un cercle bleu de 2 px autour de l'anneau. */ /* ⚠️ L'ARC PART DU HAUT : le cercle tourne d'un quart de tour. Sans bout arrondi, une part nulle ne dessine rien (un bout rond ferait un point). */ /* ⚠️ LA BULLE DU CLAVIER : « title » ne se montre qu'au survol de la souris. Au focus, la feuille écrit le même texte (« attr(aria-label) », que le script tient à jour) ; sur un écran tactile, rien ne se survole : le toucher donne le focus, et la bulle. Au repos, aucun texte à l'œil. */ .vol-modele label{font-size:14px;font-weight:600} .vol-modele select{min-height:44px} /* ⚠️ QUATRE CLASSES OU ATTRIBUTS, POUR BATTRE LA RÈGLE GÉNÉRALE DES CHAMPS (« input:not(…)×4 ») : moins, et le champ du fichier gardait ses 38 px. */ .joindre .volet input:not([type=hidden]):not([type=submit]){min-height:44px} .vol-modele p{margin:0;color:var(--n800)} /* La puce du domaine, dans le composeur : « × » veut dire chercher partout. */ .puce-domaine{margin:0} .puce-domaine button{min-height:44px;display:inline-flex;align-items:center; padding:0 2px;border:none;background:transparent;cursor:pointer;font:inherit; color:inherit} .puce-domaine span{height:34px;display:inline-flex;align-items:center;gap:6px; padding:0 8px 0 12px;border-radius:999px;background:var(--blanc); border:1px solid var(--n400);font-size:14px;color:var(--encre)} .puce-domaine svg{color:var(--n800)} .puce-domaine button:focus-visible{outline:none} .puce-domaine button:focus-visible span{outline:2px solid var(--action); outline-offset:2px} /* ⚠️⚠️ L'ÉTIQUETTE DU DOMAINE, SUR L'ACCUEIL (ajout à la proposition C, 02/10/2026). Les puces sont dans le panneau, fermé au repos : le domaine choisi se lit ici, discret (le dessin de B : du texte n800, pas de pastille noire) ; « × » revient à « Tout ». */ .carte-composeur .etiquette-domaine{grid-area:puce} .etiquette-domaine{margin:0 0 0 6px;display:inline-flex;align-items:center; gap:0;font-size:13px;color:var(--n800);white-space:nowrap;min-width:0} /* ⚠️⚠️ C'EST L'ÉTIQUETTE QUI CÈDE LA PLACE, PAS LE MODÈLE (02/10/2026, revue). « Marketing et communication » coupait « GPT (abonnement ChatGPT) » d'un pixel. Les outils gardent leur largeur sur l'accueil (dès 960 px, où ils ne passent plus à la ligne) ; le nom du domaine prend ce qui reste, et se coupe (« … ») s'il le faut. Il reste entier au survol (« title ») et dans le nom de la croix. ⚠️ SANS ÉCART AVANT LA CROIX (son icône a déjà 7 px de marge dans ses 28) : à 2 px, « Marketing et communication », un domaine réel, perdait sa fin pour un pixel sur tout écran d'ordinateur (mesuré). */ .etiquette-nom{min-width:0;overflow:hidden;text-overflow:ellipsis} @media (min-width:960px){.accueil .carte-composeur .outils-g{min-width:max-content}} .etiquette-domaine[hidden]{display:none} .etiquette-domaine button{width:28px;height:28px;flex:none;display:inline-flex; align-items:center;justify-content:center;padding:0;border:0; border-radius:var(--r1);background:transparent;color:var(--n700); cursor:pointer} .etiquette-domaine button:hover{background:var(--n200);color:var(--encre)} /* Le trombone du composeur et son volet (fermés par défaut côté produit : sans fichiers joints ouverts, rien de tout cela n'existe dans la page). */ .joindre{position:relative} .joindre>summary{border-radius:999px} .joindre .volet{left:0;right:auto} .volet{position:absolute;bottom:calc(100% + 10px);right:0; width:min(560px,calc(100vw - 32px));background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r2); box-shadow:0 18px 48px rgba(15,23,42,.16);padding:16px 18px;z-index:30} .volet p{margin:0 0 10px;font-size:13px;color:var(--n800);line-height:1.45} .volet form{display:flex;flex-direction:column;gap:10px;margin:0} .volet button{align-self:flex-start;min-height:44px;padding:0 18px; background:var(--encre);color:var(--fond);border:none; border-radius:var(--r1);font-size:14px;font-weight:600;cursor:pointer} .volet button:hover{background:var(--action)} /* Le fichier joint : sa puce dans le composeur puis au-dessus de la question, et le texte transmis, relu tel que le modele l'a lu. */ .piece-jointe{margin:0 0 6px;font-size:12.5px;color:var(--n700); display:inline-flex;align-items:center;gap:6px} .moi:has(.piece-jointe),.moi:has(.piece-envoyee){flex-direction:column; align-items:flex-end;gap:6px} .moi .piece-jointe{margin:0} .texte-transmis{white-space:pre-wrap;word-break:break-word;font:inherit; font-size:13px;line-height:1.5;background:var(--blanc);padding:16px 18px; border:1px solid var(--n300);border-radius:var(--r2)} /* ══════════════════════════════════════════════════════════════════════ LOT 4 — RELIRE, ENVOYER, JOINDRE UN FICHIER (maquette validée, 27/09/2026) ══════════════════════════════════════════════════════════════════════ ⚠️ LA MAQUETTE, RETRANSCRITE EN CLASSES ET EN JETONS, comme au lot 1 : ses attributs « style » seraient refusés en silence par la politique du chat. ⚠️ TOUT CE QUI S'OUVRE SUR PLACE TIENT SANS SCRIPT : des « details », des liens de repli (« ?refus= », « ?onglet= ») et l'attribut « hidden ». */ .note-douce{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--n800)} .etiquette-douce{margin:18px 0 8px;font-size:13px;font-weight:600; color:var(--n800)} a.bouton-plein,a.bouton-doux{text-decoration:none} a.bouton-plein:hover{color:var(--blanc);text-decoration:none} .bouton-plein svg,.bouton-doux svg{flex:none} .bouton-plein.petit,.bouton-doux.petit{min-height:40px;padding:0 14px; font-size:14px;gap:8px} summary.bouton-doux{list-style:none} summary.bouton-doux::-webkit-details-marker{display:none} .lien-discret{min-height:40px;display:inline-flex;align-items:center; padding:0 8px;font-size:14px;font-weight:600;color:var(--action700)} /* ── Relectures : deux onglets, des cartes qui se tranchent sur place ── */ .liste.relectures{max-width:808px} .onglets{display:flex;gap:4px;border-bottom:1px solid var(--n300); margin:0 0 20px} .onglet{min-height:44px;display:inline-flex;align-items:center;padding:0 14px; margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--n800); font-size:15px;font-weight:500;text-decoration:none} .onglet:hover{color:var(--encre);text-decoration:none} .onglet[aria-selected=true]{color:var(--encre);font-weight:600; border-bottom-color:var(--encre)} .panneau-onglet[hidden]{display:none} /* ── « Suivi » (30/09/2026) : mes demandes, et ce que l'on partage avec moi. Les onglets sont ceux de « Relectures » ; l'etat se lit sans la couleur, comme les propositions. */ .suivi-liste{list-style:none;margin:0;padding:0} .suivi-ligne{display:flex;flex-direction:column;gap:4px} .suivi-ligne .doux{margin:0} .suivi-tete{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap} .suivi-genre{font-size:12.5px;font-weight:600;color:var(--n800)} .suivi-titre{font-size:15px;font-weight:600;color:var(--encre); overflow-wrap:anywhere} .suivi-quand{font-size:12.5px} .etat-suivi{display:inline-block;font-size:11.5px;font-weight:700; letter-spacing:.04em;padding:3px 9px;border-radius:999px; background:var(--surface);color:var(--n700)} .etat-suivi.sv-accepte{background:var(--vert100);color:var(--vert700)} .etat-suivi.sv-refuse{background:var(--rouge100);color:var(--rouge700)} .suivi-neuf{font-size:11.5px;font-weight:700;color:var(--action700)} /* ⚠️ LE CHIFFRE DU SUIVI EST DISCRET : ce n'est pas du travail qui attend, comme le rouge des relectures, seulement du nouveau a regarder. */ .compte-suivi{margin-left:auto;min-width:22px;height:22px;padding:0 6px; border-radius:999px;background:var(--n300);color:var(--encre); font-size:12px;font-weight:700;display:inline-flex;align-items:center; justify-content:center} /* (02/10/2026, menu plus léger) : plus de pastille, un chiffre gris suffit. Le lecteur d'écran, lui, entend toujours « : 1 nouveau » (« .cache »). */ @media (min-width:768px){ .compte-suivi{min-width:20px;height:20px;background:transparent; color:var(--n700);font-weight:600} } .vide{margin:24px 0;font-size:14px;color:var(--n800)} /* ── Partager une discussion (30/09/2026) ── Richard : « ajouter le bouton ; l'IA fera une synthèse […] dans une popup ». Le bouton de l'en-tête, la popup (le cadre de « .popup-precision »), la page sans script, et ce que le collègue reçoit dans « Partagés avec moi ». */ .bouton-partager{min-height:40px;display:inline-flex;align-items:center;gap:8px; padding:0 14px;border:1px solid var(--n300);border-radius:10px; background:var(--blanc);color:var(--encre);font-size:14px;font-weight:600; text-decoration:none;white-space:nowrap} .bouton-partager:hover{background:var(--n100);color:var(--encre); text-decoration:none} .popup-partage{max-width:640px;max-height:calc(100vh - 32px);overflow:auto} .popup-partage form,.page-partage form{display:flex;flex-direction:column; gap:8px;margin:0} .popup-partage .pied,.page-partage .pied{flex-direction:row;margin-top:6px} .partage-envoi label,.partage-annonce label{font-size:14px;font-weight:600; margin-top:4px} .partage-envoi input:not([type=checkbox]):not([type=hidden]), .partage-envoi select,.page-partage textarea{width:100%;box-sizing:border-box} .partage-envoi textarea{font-size:14.5px;line-height:1.5;width:100%; box-sizing:border-box} .popup-partage .pied .bouton-plein,.page-partage .pied .bouton-plein{gap:8px} .partage-envoi label.partage-case{display:flex;gap:10px;align-items:flex-start; font-weight:400;margin-top:8px} .partage-case input{margin-top:3px;flex:none} .partage-note,.partage-cout{margin:0;font-size:13.5px;line-height:1.5; color:var(--n800)} .partage-annonce{display:flex;flex-direction:column;gap:10px} .partage-annonce>p{margin:0;font-size:15px;line-height:1.5} .partage-part summary{cursor:pointer;font-size:13.5px;font-weight:600} .partage-part ul{margin:6px 0 0;padding-left:20px;font-size:13.5px; line-height:1.5} .partage-dit{margin:0;font-size:13.5px;line-height:1.5} .partage-dit:empty{display:none} .partage-dit.refus{padding:10px 12px;background:var(--rouge100); border:1px solid var(--rouge200);border-radius:var(--r1);color:var(--rouge700)} [data-partage-etape][hidden]{display:none} [data-partage-rediger][aria-busy=true]{cursor:progress;opacity:.85} .page-partage{display:flex;flex-direction:column;gap:12px} section.page-partage h2{margin:0;font-size:17px} .partage-recu{display:flex;flex-direction:column;gap:10px;margin-top:8px} .partage-bloc{border-left:3px solid var(--n300);padding:2px 0 2px 12px} .partage-bloc-t{margin:0;font-size:12.5px;font-weight:700;color:var(--n800)} .partage-bloc-texte{margin:2px 0 0;font-size:14.5px;line-height:1.5; white-space:pre-wrap;overflow-wrap:anywhere} .partage-gestes{align-items:flex-start} .partage-refus>summary{list-style:none} .partage-refus>summary::-webkit-details-marker{display:none} .partage-refus[open]{flex-basis:100%} .partage-refus-zone{display:flex;flex-direction:column;gap:8px;margin:10px 0 0} .partage-refus-zone label{font-size:14px;font-weight:600} .partage-refus-zone textarea{width:100%;box-sizing:border-box;min-height:60px; resize:vertical;font-size:15px} .partage-refus-zone button{align-self:flex-start} @media (max-width:767px){ .bouton-partager{padding:0 10px} .bouton-partager span{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} } /* ── Envoyer un courriel depuis une réponse (30/09/2026) ── Richard : « il faut pouvoir envoyer un mail !!! avec le mail de l'utilisateur connecté ». Le geste (dans la barre de la réponse, ou seul sans script), mis en avant quand la réponse est un courriel ; la fenêtre (le cadre de « .popup-precision ») et sa page ; la ligne « Courriel envoyé à… ». */ .lui>.courriel-geste{align-self:flex-start;min-height:44px;display:inline-flex; align-items:center;gap:6px;padding:0 12px;border:1px solid var(--n300); border-radius:10px;color:var(--encre);font-size:14px;font-weight:500; text-decoration:none} .actes .acte.courriel-geste.en-avant,.lui>.courriel-geste.en-avant, /* (26/10/2026) le fichier que la question demande (Excel, CSV, Word, PDF) */ .actes .acte.fichier-geste.en-avant{ color:var(--action700);font-weight:600; box-shadow:inset 0 0 0 1px var(--action200)} .courriel-parti{margin:0;display:flex;align-items:center;gap:8px; font-size:13.5px;color:var(--vert700)} .courriel-parti svg{flex:none} /* Le brouillon que l'assistant a préparé (30/09/2026) : dit, jamais parti. ⚠️ 13,5 px POUR DE BON (02/10/2026) : « .lui p » l'emportait, il s'affichait en 15 px ; voir « :where(.lui) p ». */ .courriel-brouillon{margin:0;display:flex;align-items:center;gap:8px; font-size:13.5px;line-height:1.45;color:var(--action700)} .courriel-brouillon svg{flex:none} .popup-courriel{max-width:680px;max-height:calc(100vh - 32px);overflow:auto} .form-courriel{display:flex;flex-direction:column;gap:8px;margin:0} .champ-courriel{display:flex;flex-direction:column;gap:4px;min-width:0} .champ-courriel label{font-size:14px;font-weight:600} .form-courriel input:not([type=hidden]),.form-courriel textarea{width:100%; box-sizing:border-box} /* ⚠️ LA FENÊTRE TIENT DANS UN ÉCRAN DE 800 PX, BOUTON D'ENVOI COMPRIS : un message long défile dans son champ, pas la fenêtre entière. */ .form-courriel textarea{min-height:150px;max-height:40vh;font-size:14.5px; line-height:1.5;resize:vertical} .courriel-copies{display:grid;grid-template-columns:1fr 1fr;gap:10px} .form-courriel .aide-envoi{margin:0} .courriel-de{display:flex;align-items:baseline;gap:12px;padding:10px 12px; background:var(--n100);border:1px solid var(--n300);border-radius:var(--r1)} .courriel-etiquette{font-size:14px;font-weight:600;flex:none} .courriel-boite{display:flex;flex-direction:column;gap:2px;min-width:0; overflow-wrap:anywhere} .courriel-boite span{font-size:13px;color:var(--n800)} .courriel-note{margin:0;display:flex;align-items:center;gap:8px; font-size:13.5px;color:var(--n800)} .courriel-note svg{flex:none} .form-courriel .pied{display:flex;gap:8px;align-items:center; justify-content:flex-end;flex-wrap:wrap;margin-top:4px} .form-courriel .pied .bouton-plein{gap:8px} .form-courriel [aria-busy=true]{cursor:progress;opacity:.85} .page-courriel{display:flex;flex-direction:column;gap:12px} section.page-courriel h2{margin:0;font-size:17px} /* Le courriel corrigé d'une relecture (01/10/2026) : qui l'a approuvé, et qu'on peut encore l'ajuster, en tête de la fenêtre. */ .courriel-relu{margin:0;padding:10px 12px;border-radius:var(--r1); background:var(--vert100);color:var(--vert700);font-size:14px; line-height:1.5} .courriel-relu[hidden]{display:none} /* ── « Ma façon d'écrire » (30/09/2026) ── Richard : « la manière d'écrire avec chaque personne de chaque utilisateur doit être apprise ». Sa boîte au menu du compte ; l'avis d'une lecture refusée, sous la réponse ; l'écran (réglages, style par défaut, correspondants repliés). Sans script. */ .vol-menu .boite-m365{margin:0;min-height:40px;display:flex;align-items:center; gap:10px;padding:4px 10px;font-size:13px;line-height:1.35;color:var(--n800); overflow-wrap:anywhere} .vol-menu .boite-m365 svg{color:var(--n800);flex:none} .vol-menu .boite-m365 b{font-weight:600;color:var(--encre)} .vol-menu .boite-m365 a{display:inline;min-height:0;padding:0;width:auto; font-size:13px;color:var(--action);text-decoration:underline} /* ⚠️ GRIS, AVEC UN CADENAS : un refus de Microsoft est une question de droits, pas une erreur (même règle que les refus de droits du fil). */ .style-avis{margin:0;display:flex;align-items:flex-start;gap:8px; font-size:13.5px;line-height:1.45;color:var(--n800)} /* Sans boîte reliée, le bouton d'envoi se voit grisé (la phrase au-dessus dit pourquoi) ; ⚠️ pas l'attente d'un envoi parti, qui garde son dessin. */ .form-courriel .bouton-plein[disabled]:not([aria-busy=true]){ background:var(--n400);border-color:var(--n400);cursor:not-allowed} .style-avis svg{flex:none;margin-top:2px} .style-page h2{margin:0 0 10px;font-size:17px} .style-page .carte-relecture h2{margin:0 0 10px} .style-section{margin:22px 0 0} .style-section>.doux{margin:0} .style-boite{margin:0 0 12px;display:flex;align-items:flex-start;gap:8px; font-size:14px;overflow-wrap:anywhere} .style-boite svg{flex:none;margin-top:3px} .style-bascule{margin:0 0 12px} .style-bascule .interrupteur{font-size:14px} .style-bascule .doux{margin:2px 0 0 40px} .interrupteur-muet{margin:0;font-size:14px;color:var(--n800)} .style-cout{margin:6px 0 0} /* ── « Ma boîte mail et ma façon d'écrire » (02/10/2026) ── la boîte, puis apprendre (avancement sans script), ce qui est retenu, ce qui est gardé. */ .style-page .style-sous-titre{margin:18px 0 8px;font-size:15px;font-weight:700} .boite-etat{margin:0 0 12px;display:flex;align-items:flex-start;gap:8px; font-size:14.5px;line-height:1.5;overflow-wrap:anywhere} .boite-etat svg{flex:none;margin-top:3px;color:var(--n800)} .boite-etat.reliee svg{color:var(--vert700)} .boite-gestes{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px; margin:0 0 10px} .boite-gestes a.bouton-plein,.boite-gestes a.bouton-doux{gap:8px; text-decoration:none} .boite-gestes a.bouton-plein,.boite-gestes a.bouton-plein:hover{color:var(--blanc)} .boite-debrancher summary,.style-tout-oublier summary{cursor:pointer; font-weight:600;color:var(--rouge700);min-height:32px;display:flex; align-items:center} .boite-debrancher p{margin:10px 0 0;font-size:14px;line-height:1.5; max-width:72ch} .apprendre-forme{margin:12px 0 0} .apprendre-forme textarea{resize:vertical} .apprendre-pied{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px; margin:12px 0 0} .apprendre-pied .bouton-plein{gap:8px} .apprendre-pied .doux{margin:0} .apprendre-forme .bouton-plein[disabled]{background:var(--n400); border-color:var(--n400);cursor:not-allowed} .style-apprendre .bouton-doux[disabled]{color:var(--n600);cursor:not-allowed} .apprendre-forme .style-avis{margin:10px 0 0} .apprentissage-suivi{margin:14px 0 0;padding:14px 16px;border-radius:var(--r2); border:1px solid var(--n300);background:var(--n100)} .apprentissage-suivi.fait{border-color:var(--vert100);background:var(--blanc)} .apprentissage-suivi.refuse{background:var(--blanc)} .apprentissage-suivi p{margin:0} .apprentissage-titre{display:flex;align-items:flex-start;gap:8px; font-size:14.5px;line-height:1.45} .apprentissage-titre svg{flex:none;margin-top:3px} .apprentissage-suivi.fait .apprentissage-titre svg{color:var(--vert700)} .apprentissage-etapes,.apprentissage-bilan{margin:10px 0 8px;padding:0 0 0 22px; font-size:14px;line-height:1.6} .apprentissage-etapes li.fait{color:var(--n800)} .apprentissage-etapes li.en-cours{font-weight:600} .apprentissage-etapes li.a-venir{color:var(--n600)} .apprentissage-credits{margin:8px 0} .apprentissage-dernier{margin:10px 0 0} .style-traits dd{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px} .trait-effacer{display:inline;margin:0} .lien-effacer{border:0;background:none;padding:0;min-height:24px;font:inherit; font-size:13px;color:var(--action);text-decoration:underline;cursor:pointer} .lien-effacer:hover{color:var(--rouge700)} .style-garde{margin:22px 0 0} .style-confidentialite{margin:0 0 10px;display:flex;align-items:flex-start; gap:8px;font-size:15px;line-height:1.5} .style-confidentialite svg{flex:none;margin-top:3px;color:var(--vert700)} .style-garde-liste{margin:0;padding:0 0 0 22px;font-size:14px;line-height:1.6; color:var(--n800)} .style-correspondant summary{display:flex;align-items:baseline;flex-wrap:wrap; gap:4px 12px;cursor:pointer;overflow-wrap:anywhere} .style-correspondant summary b{font-size:14.5px} .style-correspondant[open] summary{margin-bottom:12px} .style-traits{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px; margin:0 0 10px;font-size:14px} .style-traits dt{font-weight:600;color:var(--n800)} .style-traits dd{margin:0;overflow-wrap:anywhere} .style-forme{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--n300)} .style-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px} .style-grille label.plein:has(textarea){grid-column:1/-1} .style-geste{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px; margin:10px 0 0} .style-geste .doux{margin:0} .style-geste label.plein{flex:1;min-width:240px;margin:0} .style-tout-oublier summary{cursor:pointer;font-weight:600;color:var(--rouge700)} .style-tout-oublier p{margin:10px 0 0;font-size:14px} .style-confirme{display:flex;align-items:center;gap:8px;font-size:14px} .carte-a-relire,.carte-envoyee{background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r3); box-shadow:var(--ombre-legere);padding:20px;margin:0 0 20px;display:flex; flex-direction:column;gap:14px} .carte-tete{display:flex;align-items:baseline;justify-content:space-between; gap:6px 12px;flex-wrap:wrap} /* ⚠️ « article … h2 », PAS « .carte-tete h2 » : « .liste h2 » (plus bas dans la feuille, même poids) lui rendait 28 px de marge au-dessus du titre. */ article .carte-tete h2{margin:0;font-size:17px;font-weight:700;line-height:1.35; letter-spacing:0} .carte-qui{font-size:13px;color:var(--n800);white-space:nowrap} .carte-corps{display:flex;gap:16px;align-items:flex-start} .carte-corps .rendu{flex:1;min-width:0;font-size:15px} .vignette{width:120px;height:120px;object-fit:cover;flex:none; border-radius:var(--r2);border:1px solid var(--n300);background:var(--n100)} .carte-pied{display:flex;align-items:center;justify-content:space-between; gap:10px 12px;flex-wrap:wrap} .carte-pied[hidden],.zone-refus[hidden]{display:none} .carte-circuit{font-size:13.5px;color:var(--n800)} .carte-gestes{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .carte-gestes form{margin:0} .bouton-refuser,.bouton-refus{min-height:44px;display:inline-flex; align-items:center;padding:0 18px;border:1px solid var(--rouge200); border-radius:10px;background:var(--blanc);color:var(--rouge700); font:inherit;font-size:15px;font-weight:600;text-decoration:none; cursor:pointer} .bouton-refuser:hover,.bouton-refus:hover{background:var(--rouge100); color:var(--rouge700);text-decoration:none} .bouton-approuver{min-height:44px;display:inline-flex;align-items:center;gap:8px; padding:0 18px;border:1px solid var(--vert700);border-radius:10px; background:var(--vert700);color:var(--blanc);font:inherit;font-size:15px; font-weight:600;cursor:pointer} .bouton-approuver:hover{box-shadow:0 0 0 3px var(--vert100)} .zone-refus{display:flex;flex-direction:column;gap:8px;margin:0; padding-top:14px;border-top:1px solid var(--n300)} .zone-refus label{font-size:14px;font-weight:600} .zone-refus textarea{width:100%;min-height:76px;resize:vertical;font-size:15px} .zone-gestes{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} .motif-manque{margin:0;padding:8px 12px;border-radius:var(--r1); background:var(--rouge100);color:var(--rouge700);font-size:14px} .carte-etat{margin:0;font-size:14px;line-height:1.5;color:var(--n800)} .carte-envoyee.etat-approuvee .carte-etat b{color:var(--vert700)} .carte-envoyee.etat-refusee .carte-etat b{color:var(--rouge700)} .etape-qui{color:var(--n700)} /* ── Commentaire, « Modifier le texte », versions (30/09/2026) ───────── Richard : « ajoute la possibilité pour le relecteur de mettre un commentaire et de pouvoir modifier le contenu qui lui est envoyé ». Trois formulaires par carte, ouverts par l'adresse : sans script, tout marche ; l'écart se lit dans un « details ». */ .carte-pied.pied-decision{flex-direction:column;align-items:stretch;gap:10px} .carte-pied.pied-decision[hidden],.zone-modifier[hidden]{display:none} .pied-ligne{display:flex;align-items:center;justify-content:space-between; gap:10px 12px;flex-wrap:wrap} .champ-commentaire{display:flex;flex-direction:column;gap:6px} .champ-commentaire label{font-size:14px;font-weight:600} .champ-commentaire textarea{width:100%;box-sizing:border-box;min-height:52px; resize:vertical;font-size:15px} .facultatif{font-weight:400;color:var(--n700)} .modif-bloquee{margin:0;font-size:13.5px;line-height:1.5;color:var(--n800)} .zone-modifier{display:flex;flex-direction:column;gap:8px;margin:0; padding-top:14px;border-top:1px solid var(--n300)} .zone-modifier>label{font-size:14px;font-weight:600} .zone-modifier>textarea{width:100%;box-sizing:border-box;min-height:220px; resize:vertical;font-size:15px;line-height:1.55} .aide-modifier{margin:0;font-size:13.5px;line-height:1.5;color:var(--n800)} /* ⚠️ PROPOSITION B (02/10/2026) : un filet à gauche au lieu d'une boîte, et plus de boîte dans la boîte (l'écart, le courriel relu). */ .histo-relecture{display:flex;flex-direction:column;gap:8px;margin:0; padding:2px 0 2px 16px;background:transparent;border:0; border-left:2px solid var(--n300);border-radius:0} .histo-titre{margin:0;font-size:13px;font-weight:700;color:var(--n800)} .histo-liste{margin:0;padding:0;list-style:none;display:flex; flex-direction:column;gap:8px} .histo-tete{font-size:13.5px;line-height:1.45;color:var(--n800)} .histo-tete b{color:var(--encre)} .histo-courante{font-weight:600;color:var(--vert700)} .histo-dit{margin:2px 0 0;font-size:14.5px;line-height:1.5; white-space:pre-wrap;overflow-wrap:anywhere;color:var(--encre)} .histo-ecart{margin:4px 0 0} .histo-ecart>summary{cursor:pointer;font-size:13.5px;font-weight:600; color:var(--action);min-height:32px;display:inline-flex;align-items:center} .ecart-legende{margin:6px 0 0;font-size:12.5px;color:var(--n800)} .ecart-texte{margin:6px 0 0;padding:0;background:transparent; border:0;border-radius:var(--r1);font-size:14.5px; line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere; max-height:360px;overflow:auto} .ecart-texte del{background:var(--rouge100);color:var(--rouge700); text-decoration:line-through} .ecart-texte ins{background:var(--vert100);color:var(--vert700); text-decoration:underline;text-decoration-thickness:2px} /* Un mot remplacé : un souffle entre ce qui part et ce qui vient (01/10/2026), « BonjourSalut » se lisait comme un seul mot. */ .ecart-texte del+ins{margin-left:4px} .suivi-histo{flex:1 1 100%;min-width:0} .suivi.approuve .suivi-histo{margin:8px 0 0} /* La relecture dans sa discussion (01/10/2026) : le courriel relu, son objet, et l'envoi du courriel corrigé sous ce qu'on vient de lire. */ .retour-objet{margin:0;font-size:14px;line-height:1.5;color:var(--encre)} .retour-objet b{font-weight:600} .retour-texte{margin:2px 0 0;padding:0;background:transparent; border:0;border-radius:var(--r1);font-size:14.5px; line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere; max-height:360px;overflow:auto;color:var(--encre)} .suivi-envoi{display:flex;justify-content:flex-end;margin:10px 0 0} .suivi-envoi .bouton-vert{text-decoration:none} .carte-courriel{margin:0 0 8px;display:flex;align-items:center;gap:8px; font-size:13.5px;color:var(--n800)} .carte-courriel svg{flex:none} /* L'écran de choix du circuit (le repli de « Faire relire »). */ .champ-envoi{display:flex;flex-direction:column;gap:6px;margin:0 0 14px} .champ-envoi label{font-size:14px;font-weight:600} .champ-envoi>input{width:100%} fieldset.circuits{border:0;padding:0;margin:4px 0 8px;min-width:0} fieldset.circuits legend{font-size:14px;font-weight:600;padding:0; margin:0 0 8px} .ligne-circuit{min-height:44px} .circuit-etapes{display:block;font-size:13px;color:var(--n800)} /* ── Sous la réponse partie en relecture : où elle en est ────────────── */ /* ⚠️ PROPOSITION B, EN ATTENTE ET REFUSÉE AUSSI (02/10/2026) : plus de boîte blanche ni de bord rouge, une ligne de statut, comme l'approuvée. Le refus se dit en rouge (la croix et « … a refusé »), comme l'approbation en vert. Les gestes (« Changer », « Annuler l'envoi ») restent des boutons bordés : ils agissent, ils doivent se voir ; 32 px, la cible des gestes du fil, et le contour bleu du focus. */ .suivi{display:flex;align-items:center;justify-content:space-between; gap:6px 12px;flex-wrap:wrap;margin:-12px 0 24px;padding:0; background:transparent;border:0;border-radius:0} .suivi-dit{display:flex;align-items:flex-start;gap:10px;font-size:14px; line-height:1.45;color:var(--n800);min-width:0;flex:1 1 260px} .suivi-dit svg{flex:none;margin-top:1px;color:var(--vert700)} .suivi-dit b{color:var(--encre)} .suivi-gestes{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .suivi-gestes form{margin:0} .suivi-gestes .bouton-doux.petit{min-height:32px;padding:0 12px; font-size:13.5px} /* Sur un écran tactile, la cible d'un doigt, comme les gestes du fil (B). */ @media (hover:none){.suivi-gestes .bouton-doux.petit{min-height:44px}} .suivi.refuse .suivi-dit svg,.suivi.refuse .suivi-dit b{color:var(--rouge700)} .menu-changer .vol-menu{width:300px;top:calc(100% + 6px)} .vol-titre{margin:4px 10px 6px;font-size:12.5px;font-weight:600; color:var(--n700)} .menu-changer .vol-menu button{min-height:52px;align-items:flex-start; padding:8px 10px} .circuit-nom{display:flex;flex-direction:column;gap:2px} .circuit-nom span{font-size:12.5px;color:var(--n700)} .suivi.approuve{display:block;position:relative;padding:0;background:transparent; border:0} /* ⚠️ PROPOSITION B (02/10/2026) : plus de bandeau vert plein. La ligne dit l'approbation en vert ; l'envoi est un geste vert clair, pas une alerte. */ .suivi-bande{margin:0;min-height:36px;display:flex;align-items:center;gap:10px; padding:0 220px 0 0;background:transparent;color:var(--vert700); border-radius:var(--r2);font-size:14px;font-weight:500} .suivi-bande svg{flex:none} .suivi-bande b{font-weight:700} .suivi-note{margin:8px 0 0;font-size:14px;color:var(--n800)} .suivi.approuve .bandeau-ok{margin:8px 0 0} .envoi-courriel>summary{list-style:none;position:absolute;top:0;right:0} .envoi-courriel>summary::-webkit-details-marker{display:none} .bouton-vert{min-height:36px;display:inline-flex;align-items:center;gap:8px; padding:0 16px;border-radius:10px;background:var(--vert100); color:var(--vert700);font-size:14px;font-weight:600;cursor:pointer} .bouton-vert:hover{box-shadow:0 0 0 3px var(--blanc)} .panneau-envoi{margin:12px 0 0;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r3); box-shadow:var(--ombre-legere);padding:20px} section.panneau-envoi h2{margin:0 0 14px;font-size:17px;font-weight:700; letter-spacing:0} .panneau-envoi .bandeau-non{margin:0 0 14px} .form-envoi{margin:0} .destinataires>input{width:100%} .destinataires.en-puces{display:flex;flex-wrap:wrap;align-items:center;gap:6px; min-height:48px;padding:5px 8px;background:var(--n100); border:1px solid var(--n300);border-radius:var(--r1)} .destinataires.en-puces:focus-within{background:var(--blanc); border-color:var(--action);box-shadow:0 0 0 3px var(--action200)} /* ⚠️ CINQ SÉLECTEURS POUR BATTRE LA RÈGLE GÉNÉRALE DES CHAMPS (quatre) : moins, et le champ reprenait son cadre gris DANS le cadre des puces. */ .destinataires.en-puces input.saisie-adresse:not([type=hidden]):not([type=submit]){ flex:1;min-width:160px;width:auto;min-height:36px;margin:0;padding:0 4px; border:none;background:transparent;box-shadow:none} .puce-adresse{display:inline-flex;align-items:center;gap:2px;height:36px; padding:0 2px 0 12px;border-radius:999px;background:var(--n200); font-size:14px;color:var(--encre)} .puce-adresse button{width:32px;height:32px;display:inline-flex; align-items:center;justify-content:center;border:0;border-radius:999px; background:transparent;color:var(--n800);font:inherit;font-size:17px; cursor:pointer} .puce-adresse button:hover{background:var(--n300);color:var(--encre)} .aide-envoi{font-size:13px;color:var(--n800)} .part-ensemble{display:flex;align-items:center;gap:8px;margin:2px 0 16px; font-size:14px;color:var(--n800)} .part-ensemble svg{color:var(--vert700);flex:none} .gestes-envoi{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} .apercu-envoi{margin:20px 0 0} .apercu-envoi .produite{max-width:320px;margin-top:10px} /* Dans les actions d'une réponse : « Faire relire » d'un clic, ou sa puce. */ /* ⚠️ LE BOUTON PORTE « .acte » (assemblage des lots 2 et 4) : même taille, même encre que « Copier », comme la maquette « Réponse ». La règle du lot 4 (12 px, à 55 %) le faisait passer pour un geste désactivé. */ .relire-un-clic{display:inline-flex;margin:0} .puce-relecture{display:inline-flex;align-items:center;gap:6px;min-height:30px; padding:0 10px;margin-left:4px;border-radius:8px;background:var(--n200); font-size:12.5px;font-weight:600;color:var(--n800)} /* Les deux avis sous une réponse (30/09/2026). Sans script, le volet est sous la réponse et le second avis s'ouvre sur place ; avec, le script le range dans la barre, et le volet s'ouvre sous elle. */ .noter{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-left:-10px} .actes .noter{display:contents} .noter form{margin:0} .noter-utile{display:inline-flex} .noter .acte{min-height:44px;display:inline-flex;align-items:center;gap:6px; padding:0 10px;border:none;background:transparent;color:var(--n800); border-radius:10px;font:inherit;font-size:14px;font-weight:500;cursor:pointer} .noter .acte svg{flex:none;width:18px;height:18px} .noter .acte:hover{background:var(--n200);color:var(--encre)} .noter .acte.choisi{background:var(--n200);color:var(--encre);font-weight:600} .noter-pas-utile>summary{list-style:none} .noter-pas-utile>summary::-webkit-details-marker{display:none} .volet-noter{margin:8px 0 0;padding:14px 16px;border:1px solid var(--n300); border-radius:var(--r2);background:var(--blanc);display:flex; flex-direction:column;gap:12px;max-width:520px;box-sizing:border-box} .actes{position:relative} .actes .volet-noter{position:absolute;left:0;right:0;top:100%;z-index:20; box-shadow:var(--ombre)} .volet-noter fieldset{margin:0;padding:0;border:0;min-width:0} .volet-noter legend{padding:0;margin:0 0 8px;font-size:14px;font-weight:600; color:var(--encre)} .noter-cases{display:flex;flex-wrap:wrap;gap:6px} .noter-case{display:inline-flex;align-items:center;gap:6px;min-height:36px; padding:0 12px;border:1px solid var(--n300);border-radius:999px; font-size:13.5px;color:var(--encre);cursor:pointer} .noter-case:has(input:checked){border-color:var(--encre);background:var(--n200)} .noter-commentaire{display:flex;flex-direction:column;gap:6px;font-size:13.5px; color:var(--n800)} .noter-commentaire textarea{width:100%;box-sizing:border-box;font:inherit; font-size:14px;padding:8px 10px;border:1px solid var(--n400); border-radius:var(--r1);resize:vertical} .noter-aide{margin:0;font-size:12.5px;color:var(--n800)} /* ⚠️ « .actes button » (des icônes grises à 45 %) pèse sur tout bouton de la barre : l'envoi du volet y reprend sa forme pleine. */ .volet-noter .bouton-plein,.actes .volet-noter .bouton-plein{align-self:flex-end; min-height:44px;padding:0 18px;background:var(--action);color:var(--blanc); border:1px solid var(--action);border-radius:10px;opacity:1;font-weight:600} .actes .volet-noter .bouton-plein:hover{background:var(--action600)} /* ⚠️ « Noté : utile. » SE TAIT À L'ŒIL (proposition B, 02/10/2026) : le geste enfoncé le dit déjà. Le lecteur d'écran, lui, l'entend toujours. */ .noter-etat{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .noter-etat:empty{display:none} /* ── Le fichier joint dans le composeur ──────────────────────────────── */ .joindre-fichier{display:inline-flex;align-items:center;gap:6px;margin:0} .joindre-fichier[hidden],.joindre[hidden]{display:none} .trombone{cursor:pointer;border-radius:999px} .joindre-fichier:has(input[type=file]:focus-visible) .trombone{ outline:2px solid var(--action);outline-offset:2px} /* ⚠️ SANS SCRIPT, LE BOUTON PARAÎT DÈS QU'UN FICHIER EST CHOISI ; avec le script, le fichier part au choix, et le bouton ne se voit jamais. */ .joindre-envoyer{display:none;min-height:36px;padding:0 12px;border:0; border-radius:var(--r1);background:var(--encre);color:var(--fond);font:inherit; font-size:13.5px;font-weight:600;cursor:pointer} .joindre-fichier:has(input[type=file]:valid) .joindre-envoyer{display:inline-flex; align-items:center} .joindre.indisponible>summary{color:var(--n500)} .volet.sombre{background:var(--encre);color:var(--fond);border-color:var(--encre); width:min(460px,calc(100vw - 32px));display:flex;align-items:center;gap:12px; padding:12px 14px} .volet.sombre p{margin:0;color:var(--fond);font-size:14px;line-height:1.45} .volet .passer-a{flex:none;align-self:center;min-height:44px;padding:0 14px; border:1px solid var(--fond);border-radius:10px;background:transparent; color:var(--fond);font-size:14px;font-weight:600} .volet .passer-a:hover{background:var(--fond);color:var(--encre)} .volet .passer-a[hidden]{display:none} /* ⚠️ LA PUCE DU COMPOSEUR N'EST PAS « relative » : son aperçu s'ouvre sur la largeur de la carte du composeur, pas sur celle de la puce. */ .piece-envoyee{position:relative} .piece-attente,.piece-envoyee{display:inline-flex; align-items:center;gap:10px;max-width:100%;padding:6px 6px 6px 8px; border:1px solid var(--n300);border-radius:var(--r2);background:var(--n100)} .piece-attente{margin:4px 0 6px} /* « Lecture de … » (30/09/2026) : posée par le script dès le choix du fichier, remplacée par la vraie puce. Son signe de vie est « .pouls », qui s'arrête déjà quand le système demande moins de mouvement. */ .piece-lecture{padding-right:12px} .piece-lecture .piece-dit span{color:var(--n700)} .piece-envoyee{background:var(--blanc)} .piece-icone{width:34px;height:34px;flex:none;display:inline-flex; align-items:center;justify-content:center;border-radius:8px; background:var(--action100);color:var(--action700)} .piece-dit{display:flex;flex-direction:column;min-width:0;line-height:1.3} .piece-dit b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .piece-dit span{font-size:12.5px;color:var(--n800)} .apercu-joint>summary{list-style:none} .apercu-joint>summary::-webkit-details-marker{display:none} .lien-voir{min-height:36px;display:inline-flex;align-items:center;padding:0 8px; border-radius:8px;color:var(--action700);font-size:14px;font-weight:600; cursor:pointer;white-space:nowrap} .lien-voir:hover{background:var(--action100)} .retirer-piece.icone-btn{width:36px;height:36px} /* ⚠️ L'APERÇU S'OUVRE À CÔTÉ DU COMPOSEUR, pas dedans : au-dessus quand le composeur est en bas du fil, en dessous sur l'accueil (maquette). */ .apercu{position:absolute;left:0;right:0;bottom:calc(100% + 10px);z-index:25; background:var(--blanc);border:1px solid var(--n400);border-radius:var(--r3); box-shadow:0 18px 48px rgba(15,23,42,.16);padding:18px 20px;display:flex; flex-direction:column;gap:12px;text-align:left} .accueil .apercu{bottom:auto;top:calc(100% + 10px)} .dans-le-fil .apercu{left:auto;right:0;bottom:auto;top:calc(100% + 6px); width:min(560px,calc(100vw - 48px))} .apercu h2{margin:0;font-size:15px;font-weight:700} .apercu-texte{max-height:40vh;overflow:auto;white-space:pre-wrap; word-break:break-word;padding:12px 14px;background:var(--n100); border:1px solid var(--n300);border-radius:var(--r1);font-size:14px; line-height:1.55} .apercu-texte mark,.texte-transmis mark{background:var(--action100); color:var(--action700);padding:0 3px;border-radius:4px} .apercu-garantie{margin:0;display:flex;gap:8px;font-size:13px;line-height:1.45; color:var(--n800)} .apercu-garantie svg{flex:none;margin-top:2px} .apercu-garantie b{display:block;color:var(--encre);font-size:14px} /* La puce qui descend dans le fil avec la question, script allumé. */ .bloc>.piece-attente{display:flex;width:max-content;max-width:100%; margin:6px 0 0 auto} .bloc>.piece-attente .retirer-piece,.bloc>.piece-attente .apercu-joint{display:none} .refus-fichier{display:flex;align-items:flex-start;gap:10px;margin:4px 0 6px; padding:8px 4px 8px 12px;border:1px solid var(--rouge200); border-radius:var(--r2);background:var(--rouge100);color:var(--rouge700); font-size:14px;line-height:1.45} .refus-fichier svg{flex:none;margin-top:2px} .refus-fichier span{flex:1;min-width:0} .refus-fichier .icone-btn{width:32px;height:32px;color:var(--rouge700)} /* ⚠️ LE VOILE DU DÉPÔT COUVRE LA COLONNE, PAS LA BARRE : on dépose dans la discussion, pas n'importe où. */ #principal{position:relative} .voile-depot{position:absolute;inset:16px;z-index:50;display:flex; align-items:center;justify-content:center;border:2px dashed var(--action); border-radius:var(--r3); background:color-mix(in srgb,var(--action100) 90%,transparent)} .voile-depot[hidden]{display:none} .voile-carte{display:flex;flex-direction:column;align-items:center;gap:8px; text-align:center;pointer-events:none;padding:16px} .voile-icone{width:64px;height:64px;border-radius:999px;background:var(--blanc); color:var(--action700);display:inline-flex;align-items:center; justify-content:center;box-shadow:var(--ombre)} .voile-carte p{margin:0;font-size:15px;color:var(--n800)} /* ⚠️ APRÈS « .voile-carte p », ET PLUS PRÉCISE : « .voile-titre » seule perdait contre elle, et le titre de la maquette « Dépôt » (24 px) sortait à 15. */ .voile-carte .voile-titre{margin:0;font-size:24px;font-weight:700;color:var(--encre)} @media (max-width:767px){ .suivi-bande{padding-right:14px} .envoi-courriel>summary{position:static;margin-top:8px} .carte-corps{flex-direction:column} .vignette{width:100%;height:auto;max-height:240px} .carte-a-relire,.carte-envoyee,.panneau-envoi{padding:16px} .dans-le-fil .apercu{width:calc(100vw - 32px)} } /* ── Les ecrans de service : connexion, refus, prompts partages ───────── */ /* ── Les ecrans de service, au dessin de la console ──────────────────── */ /* ⚠️ UNE CARTE, PAS UN FORMULAIRE NU. La console pose son contenu dans une carte blanche a bord, rayon 16 et ombre legere, avec une en-tete separee par un filet. C'est ce qu'on reconnait d'un ecran a l'autre. */ /* ⚠️ LES CARTES DE « MES CONTENUS ». Un contenu qu'on ne voit pas n'existe pas pour la personne : la vignette est ce qui distingue cet ecran d'une liste de noms de fichiers. */ .contenus{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));align-items:start; margin:14px 0} .piece{border:1px solid var(--n400);border-radius:8px;padding:12px;background:var(--blanc)} .piece img{display:block;width:100%;height:auto;border-radius:5px;background:var(--n200)} .piece .meta{font-size:12px;opacity:.6;margin:8px 0 2px} .piece pre{white-space:pre-wrap;font-size:11px;max-height:6rem;overflow:auto; background:var(--n100);padding:6px;border-radius:5px} .piece form{display:inline} /* ⚠️⚠️ « EFFACER » NE DOIT PAS ETRE LE BOUTON LE PLUS VISIBLE. Le style par defaut du chat en faisait une grande pastille bleue — l'action principale de la carte, alors que c'est la seule qui detruit quelque chose. Vu en regardant l'ecran, pas en relisant le code. */ /* ⚠️ « .seul .piece » ET PAS « .piece » : « .seul button » porte la MEME specificite et est declaree plus bas, donc elle gagnait. Mon bouton d'effacement restait une grande pastille bleue — l'action principale de la carte, alors que c'est la seule qui detruit quelque chose. Vu en regardant l'ecran, puis en cherchant QUELLE regle gagnait, pas en empilant du CSS par-dessus. */ .seul .piece button{background:none;border:1px solid var(--n400); color:inherit;opacity:.6;font-size:12px;padding:4px 10px;width:auto; border-radius:5px;cursor:pointer;font-weight:400} .seul .piece button:hover{opacity:1;border-color:var(--rouge600);color:var(--rouge600)} /* ⚠️ « seul » FAIT 400 px : c'est une page de connexion ou d'erreur, pas une galerie. Une grille de vignettes comprimee a 400 px rend une colonne de timbres-poste — regarde avant de livrer, pas apres. */ .seul.large{max-width:900px} /* Dans la coquille, l'en-tête tient déjà le haut : pas de grand vide dessous. */ .app .thr>.seul{padding-top:28px} /* ⚠️ LA MAQUETTE A BESOIN DE 958 px : 555 + 375 + l'écart. Dans 900, les deux cartes s'empilent — et c'est justement la comparaison entre ordinateur et téléphone qu'on est venu voir. */ .seul.maquette{max-width:1010px} .seul{max-width:400px;margin:0 auto; padding:max(10vh,32px) 24px 32px} .seul .marque{margin:0 0 24px} .carte{background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2);box-shadow:var(--ombre-legere);overflow:hidden} .carte>.entete{padding:20px 24px;border-bottom:1px solid var(--n200)} .carte>.entete h2{margin:0;font-family:var(--titre);font-size:17px; font-weight:700;letter-spacing:-.01em} .carte>.corps{padding:20px 24px;display:flex;flex-direction:column;gap:16px} .seul h2{margin:0 0 10px;font-family:var(--titre);font-size:28px;line-height:1.15; letter-spacing:-.02em} .seul p{font-size:13.5px;line-height:1.55;color:var(--n800)} .seul label{display:block;font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--n700);margin:0} .seul input{display:block;width:100%;font:inherit;margin-top:5px;font-size:14px; min-height:38px;padding:8px 12px;border:1px solid var(--n300); border-radius:var(--r1);background:var(--n100);color:var(--encre); text-transform:none;letter-spacing:normal} .seul input:focus{background:var(--blanc);border-color:var(--action); outline:none;box-shadow:0 0 0 3px var(--action200)} .seul .carte>.corps{gap:14px} .seul button{width:100%;padding:11px 16px;background:var(--action); color:var(--blanc);border:none;border-radius:var(--r1);font-size:13.5px; font-weight:600;cursor:pointer;margin-top:6px;padding-top:11px} /* Le filet qui separe le pied du formulaire, comme sur la console. */ .seul form{display:flex;flex-direction:column;gap:14px} .seul form>button{margin-top:4px;position:relative} .seul form>button::before{content:'';position:absolute;left:-24px; right:-24px;top:-14px;height:1px;background:var(--n200)} .seul button:hover{background:var(--action600)} .seul .apres{margin:16px 4px 0;font-size:12.5px;color:var(--n700)} /* ── La connexion (maquette validée, 27/09/2026) ─────────────────────── */ /* ⚠️ UN SEUL BOUTON, ET IL DIT CE QU'IL FAIT. « Entrer » s'écrivait deux fois (le titre et le bouton) ; les libellés en capitales de 11 px se lisaient mal. La page n'a toujours AUCUN script : Tab puis Entrée suffisent. */ .seul.connexion{max-width:none;min-height:100vh;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:20px; padding:24px 16px} .seul.connexion .marque{margin:0;align-items:center} .seul.connexion .marque i{width:36px;height:36px;border-radius:10px} .seul.connexion .marque i::after{width:12px;height:12px} .seul.connexion .marque b{font-size:17px} .carte-connexion{width:400px;max-width:100%;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r3); box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06); padding:32px} .seul .carte-connexion{gap:18px} .carte-connexion h1{margin:0;font-size:26px;font-weight:700} .carte-connexion .champ{display:flex;flex-direction:column;gap:6px} .seul.connexion label{font-size:14px;font-weight:600;letter-spacing:0; text-transform:none;color:var(--encre)} /* ⚠️ PAR LEURS IDENTIFIANTS, comme la recherche et le champ de question : la règle générale des champs (« input:not(…)×4 ») pèse quatre attributs, et une classe ne la bat pas. Mesuré dans le navigateur le 28/09/2026 : les deux champs gardaient 38 px et, au focus, leur bord gris et leur fond gris — le champ où l'on tape ne se distinguait plus que par son halo. */ .seul.connexion #identifiant,.seul.connexion #mot-de-passe{margin-top:0; min-height:44px;padding:0 14px;font-size:15px;border-color:var(--n400)} .seul.connexion #identifiant:focus,.seul.connexion #mot-de-passe:focus{ background:var(--blanc);border-color:var(--action)} .seul.connexion form>button{min-height:44px;margin-top:4px;padding:0 18px; font-size:15px;border-radius:10px} .seul.connexion form>button::before{content:none} .seul .erreur-connexion{margin:0;padding:10px 12px;background:var(--rouge100); color:var(--rouge700);border-radius:var(--r1);font-size:14px} .seul.connexion .apres{margin:0;font-size:14px;color:var(--n800)} .liste{max-width:820px;margin:0 auto;padding:28px} /* ⚠️ 820 px SONT LA MESURE D'UNE COLONNE DE TEXTE, pas d'un tableau de comparaison. Huit propositions sur six faits n'y tiennent pas — et un ecran qui ne montre que trois colonnes a la fois ne compare plus rien. Cette page-la respire ; les autres gardent leur largeur de lecture. */ .liste.large{max-width:1180px} .liste h2{font-size:15px;letter-spacing:.02em;margin:28px 0 8px} /* ⚠️ DES CARTES SEPAREES, PAS DES LIGNES COLLEES. La marge de deux pixels entre deux rangees a bord franc dessine un tableau ; ici chacune est une fiche qu'on choisit, et c'est ce que la forme doit dire. */ .rangee{display:flex;gap:16px;align-items:flex-start;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r2); box-shadow:var(--ombre-legere);padding:14px 18px;margin:0 0 10px} .rangee:hover{border-color:var(--n400)} .rangee>div{flex:1;min-width:0} .rangee b{font-size:14px} .rangee .cle{font-size:11.5px;opacity:.5;font-family:ui-monospace,Menlo,monospace} .rangee p{margin:2px 0 0;font-size:13px} .rangee form{margin:0} /* « Utiliser » (refonte, lot 3) : 44 px, comme toute cible de la maquette. */ .rangee button{min-height:44px;padding:0 16px;background:var(--blanc); border:1px solid var(--n400);border-radius:10px;font-size:14px; font-weight:600;cursor:pointer;color:inherit;flex:none} .rangee button:hover{border-color:var(--encre);background:var(--fond)} .trous{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 0} /* ⚠️ L'ETIQUETTE AU-DESSUS DE SON CHAMP, comme a la connexion. Une etiquette en ligne colle au bord du champ et se lit comme un prefixe : « dossier[____] ». Regarde dans le navigateur. */ .trous label{display:flex;flex-direction:column;margin:0; font-size:11.5px;opacity:.7} .trous input{font:inherit;font-size:13px;margin-top:4px;padding:7px 10px; border:1px solid var(--n400);border-radius:var(--r1);background:var(--blanc); color:inherit} .trous input:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .doux{font-size:12.5px;opacity:.6} /* ⚠️ CE QUE ÇA COÛTE SE LIT AUTREMENT QUE CE QUE ÇA FAIT. Un chef d'orchestre lance plusieurs traitements, donc se facture plusieurs fois ; noyé dans le gris du « quand », personne ne le verrait. */ .cout-agent{margin:6px 0 0;font-size:12px;color:var(--accent700)} /* ── Les pages « Assistant » : une recherche, puis les cartes ────────── (29/09/2026). La recherche a le dessin de celle de « Mes contenus ». */ .assistant-page{display:flex;flex-direction:column;gap:14px} .assistant-intro{margin:0;font-size:15px;color:var(--n800)} .assistant-filtre{margin:0} #assistant-q,#catalogue-q{flex:1;min-width:0;min-height:46px;margin:0;padding:0; border:none;background:transparent;box-shadow:none;outline:none; font-size:15px;color:var(--encre)} .assistant-liste{list-style:none;margin:0;padding:0} .assistant-item[hidden]{display:none} .assistant-vide{margin:0;font-size:14px;opacity:1;color:var(--n800)} /* ── « Mes agents » et le catalogue (30/09/2026) ───────────────────────── Richard : « L'utilisateur final ne doit pas forcément tout activer ». En haut ce que la personne a activé ; « Catalogue » ouvre un calque. ⚠️ EN CSS PUR, PAR « :target » : sans script, le lien « #catalogue » l'ouvre et « #fermer » (une ancre que rien ne porte) le ferme sans faire remonter la page. Fenêtre ouverte, seul le calque défile. */ .mes-tete{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap} .mes-tete h2{margin:0;font-size:17px} .mes-n{display:inline-block;min-width:22px;padding:1px 8px;margin-left:4px; border-radius:999px;background:var(--surface);color:var(--n700); font-size:12.5px;text-align:center;vertical-align:2px} .mes-tete .bouton-plein{gap:6px;text-decoration:none} .mes-vide{display:flex;flex-direction:column;align-items:flex-start;gap:12px; padding:18px;border:1px dashed var(--n400);border-radius:var(--r2); background:var(--blanc)} .mes-vide p{margin:0;font-size:14px;color:var(--n800);max-width:60ch} .mien form.retirer{display:none} .rangee button.bouton-retirer{color:var(--n700);font-weight:500} .rangee button.bouton-retirer:hover{border-color:var(--rouge600); color:var(--rouge700);background:var(--blanc)} .catalogue-ligne form.ajouter button{min-height:44px;padding:0 16px; border-radius:10px;font:inherit;font-size:14px;font-weight:600;cursor:pointer} .catalogue-ligne form.ajouter button{background:var(--action); border-color:var(--action);color:var(--blanc)} .catalogue-ligne form.ajouter button:hover{background:var(--action600); border-color:var(--action600)} .fenetre-catalogue{display:none;position:fixed;inset:0;z-index:60; background:rgba(15,23,42,.55);padding:16px;overflow:auto; overscroll-behavior:contain} .fenetre-catalogue:target{display:grid;place-items:start center} html:has(.fenetre-catalogue:target){overflow:hidden} .fenetre-catalogue .voile{position:fixed;inset:0;z-index:0} .cadre-catalogue{position:relative;z-index:1;width:100%;max-width:760px; margin:5vh 0 24px;background:var(--fond);border:1px solid var(--n300); border-radius:var(--r2);box-shadow:0 18px 40px rgba(15,23,42,.18); padding:0 18px 18px;display:flex;flex-direction:column;gap:12px} /* ⚠️ (01/10/2026) L'EN-TÊTE COLLE AU BORD DU CALQUE, PAS À SA MARGE INTÉRIEURE : à « top:0 », il laissait au-dessus de lui une bande de 16 px où les lignes passaient en défilant. On la voit après chaque « Ajouter », qui revient le catalogue descendu. La valeur est cette marge intérieure. */ .entete-catalogue{position:sticky;top:-16px;z-index:1;display:flex; align-items:center;gap:12px;padding:14px 0 10px;background:var(--fond); border-bottom:1px solid var(--n300)} .entete-catalogue h2{flex:1;margin:0;font-size:17px} .catalogue-note{margin:0} /* ── Les logiciels d'un élément, et les fiches système (30/09/2026) ────── Richard : « chercher par mot clé d'outil, par exemple LinkedIn, Odoo ». Le nom du logiciel, jamais un identifiant ; « Toujours actif » se lit sans couleur. (Le marquage des fiches système au catalogue est retiré le soir même : elles vont dans la section « Système ».) */ .pastilles-logiciels{display:flex;flex-wrap:wrap;gap:4px 6px;list-style:none; margin:6px 0 0;padding:0} .pastille-logiciel{font-size:11.5px;font-weight:600;padding:2px 8px; border-radius:999px;background:var(--surface);color:var(--n700); border:1px solid var(--n300)} .etiquette-systeme{flex:none;align-self:center;font-size:11.5px; font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:999px; background:var(--vert100);color:var(--vert700)} /* ── Les cartes repliées, la section « Système » (30/09/2026) ─────────── Richard : « il faut pouvoir fermer les agents et les ouvrir pour afficher le détail, afin de gagner de la place », et « tout ce qui est système doit être dans une section Système, qui doit être fermée ». Des « details » : ils s'ouvrent sans script. Repliée, une carte tient sur une ligne (le nom, sa phrase coupée, l'état, les gestes) ; ouverte, la phrase entière et le détail. ⚠️ « .rangee>div{flex:1} » pèse sur « .pli-gestes » : défait ici. */ .rangee>.pli,.rangee>.pli-seul{flex:1;min-width:0} .rangee>.pli-gestes{flex:none;display:flex;align-items:center;gap:8px} .pli>summary{list-style:none;cursor:pointer;border-radius:8px} .pli>summary::-webkit-details-marker{display:none} .pli>summary:focus-visible{outline:2px solid var(--action);outline-offset:2px} .pli-tete{display:flex;align-items:center;gap:10px;min-height:44px; min-width:0} .pli-chevron{flex:none;display:inline-flex;color:var(--n700)} .pli[open]>summary .pli-chevron, .section-pliee[open]>summary .pli-chevron{transform:rotate(180deg)} .pli-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .pli-texte b,.pli-phrase{white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .pli-phrase{font-size:13px;color:var(--n700)} .pli[open] .pli-texte b,.pli[open] .pli-phrase, .pli-seul .pli-texte b{white-space:normal} .pli-detail{padding:2px 0 4px 26px} .pli-detail .trous{margin:10px 0 0} .pli-detail .routine-supprimer summary{justify-content:flex-start} .pli-detail .routine-supprimer p{max-width:none} .pli-tete .etat-routine{margin:0;flex:none} .etiquette-cout{flex:none;font-size:11.5px;font-weight:700; letter-spacing:.04em;padding:3px 10px;border-radius:999px; background:var(--accent200);color:var(--accent700)} /* (01/10/2026) Le coût estimé d'un agent, en crédits : lu, pas crié. */ .etiquette-credits{flex:none;font-size:11.5px;font-weight:600;padding:3px 10px; border-radius:999px;background:var(--surface);color:var(--n800)} .mes-tete-gestes{display:flex;align-items:center;gap:8px} .tout-plier{min-height:44px;padding:0 12px;border:none;background:none; border-radius:10px;font:inherit;font-size:14px;font-weight:600; color:var(--n800);cursor:pointer} .tout-plier:hover{background:var(--n300);color:var(--encre)} .section-pliee>summary{list-style:none;cursor:pointer;display:flex; align-items:center;gap:10px;min-height:44px;padding:0 8px; border-radius:10px} .section-pliee>summary::-webkit-details-marker{display:none} .section-pliee>summary:hover{background:var(--n300)} .section-pliee>summary:focus-visible{outline:2px solid var(--action); outline-offset:2px} .section-pliee>summary h2{margin:0;font-size:17px} .section-pliee>summary .mes-n{font-weight:700} .section-pliee>.doux{margin:6px 8px 10px} .section-systeme{border-top:1px solid var(--n300);padding-top:10px} /* « Déjà dans votre liste : … » : ce que la recherche du catalogue trouve ailleurs, parce que c'est déjà actif. Caché tant qu'on ne cherche pas. */ .deja-la{display:none;padding:10px 12px;border:1px dashed var(--n400); border-radius:var(--r1);background:var(--blanc)} .deja-la.vu{display:block} .deja-la p{margin:0 0 6px;font-size:13px;color:var(--n800)} .deja-la-liste{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0; padding:0} .deja-la-liste li{font-size:13px;font-weight:600;padding:3px 10px; border-radius:999px;background:var(--surface);border:1px solid var(--n300)} .deja-la-liste li[hidden]{display:none} .deja-ou{font-weight:500;color:var(--n700)} /* ── Le catalogue replié, et le retour à sa place (01/10/2026) ────────── Richard : les lignes du catalogue « replié », comme les cartes de « Mes agents » (« _carte_pliable », les règles « .pli » ci-dessus) ; après « Ajouter », le catalogue reste ouvert. ⚠️ SANS SCRIPT : « Ajouter » revient sur « #catalogue-ajoute », la phrase posée à la place de la ligne partie, et le calque s'ouvre parce qu'il CONTIENT la cible. ⚠️ UNE RÈGLE À PART, pas « :target, :has(:target) » : un navigateur sans « :has » jetterait la liste entière, et « #catalogue » ne s'ouvrirait plus. ⚠️ « À LA MÊME HAUTEUR » : la cible s'arrête vers 40 % de l'écran, pas en haut. On a cliqué quelque part dans la liste ; ramenée tout en haut, la ligne sauterait d'un écran, et celle d'avant disparaîtrait. Jamais sous l'en-tête collant du calque (84 px au moins). « :target » souligne la carte ou la ligne où mène « Voir dans votre liste » ou « Voir au catalogue ». */ .fenetre-catalogue:has(:target){display:grid;place-items:start center} html:has(.fenetre-catalogue :target){overflow:hidden} .fait-ici .bandeau-ok{margin:0 0 10px} .fait-ici .bandeau-ok a{color:inherit;font-weight:600;text-decoration:underline} #assistant-liste .fait-ici,.assistant-page>.fait-ici,#assistant-liste .mien{ scroll-margin-top:40vh} .fenetre-catalogue .fait-ici,.fenetre-catalogue .catalogue-ligne{ scroll-margin-top:max(84px,40vh)} .mien:target>.rangee,.catalogue-ligne:target{border-color:var(--action); box-shadow:0 0 0 1px var(--action)} @media (max-width:640px){ .mien .rangee{flex-wrap:wrap} .mien .rangee>div{flex:1 1 100%} .cadre-catalogue{margin:0;padding:0 12px 12px} .fenetre-catalogue{padding:8px} .entete-catalogue{top:-8px} .catalogue-ligne{flex-wrap:wrap} } /* ── « Workflows » : les routines de la personne (29/09/2026) ────────── ⚠️ L'ETAT SE LIT SANS LA COULEUR, comme les propositions : le mot est ecrit (« Proposée — en attente d'un administrateur »), la teinte aide. */ .etat-routine{display:inline-block;font-size:11.5px;font-weight:700; letter-spacing:.04em;padding:3px 9px;border-radius:999px;margin:0 0 6px; background:var(--surface);color:var(--n700)} .etat-routine.rt-active{background:var(--vert100);color:var(--vert700)} .etat-routine.rt-fermee{background:var(--rouge100);color:var(--rouge700)} /* (31/10/2026) « Lancer maintenant » ne fige plus la page : la ligne de la routine dit qu'elle TOURNE (ambre, comme ce qui attend), et la carte d'une fréquence impossible dit la limite à côté de son bouton. */ .etat-routine.rt-en-cours{background:var(--ambre100);color:var(--ambre700)} .routine-limite{margin:8px 0;padding:8px 12px;border-radius:var(--r1);font-size:14px;line-height:1.45; background:var(--ambre100);color:var(--ambre700)} .rangee.routine,.rangee.modele-de-routine{flex-wrap:wrap} /* (31/10/2026) La ligne d'une routine dit fréquence, heure, prochaine et dernière exécution : elle va à la ligne. */ .rangee.routine .pli-phrase{white-space:normal} .rangee .etat-routine+b{display:block} .routine-gestes{display:flex;flex-direction:column;gap:8px;align-items:flex-end; flex:none} .routine-supprimer summary{cursor:pointer;font-size:13px;color:var(--rouge700); min-height:32px;display:flex;align-items:center;justify-content:flex-end} .routine-supprimer p{margin:4px 0 6px;max-width:26ch} /* « Partir de ce modele » : un lien a l'allure du bouton « Utiliser ». */ .bouton-lien{display:inline-flex;align-items:center;min-height:44px; padding:0 16px;background:var(--blanc);border:1px solid var(--n400); border-radius:10px;font-size:14px;font-weight:600;color:inherit; text-decoration:none;flex:none} .bouton-lien:hover{border-color:var(--encre);background:var(--fond); text-decoration:none;color:inherit} /* « Workflows disponibles », puis « Transformer un prompt en workflow » (30/09/2026) : une liste de cartes, puis UNE liste déroulante. */ .workflows-disponibles h2,.transformer-prompt h2{margin:8px 0 6px;font-size:17px} .workflows-disponibles>.doux,.transformer-prompt>.doux{margin:0 0 10px} .disponibles-liste{list-style:none;margin:0;padding:0} .transformer-forme{margin:0} .transformer-forme select{max-width:100%} .routine-forme{margin:0} .routine-forme .trous{margin:0 0 14px} .routine-cadence{display:flex;flex-wrap:wrap;gap:0 14px} .routine-cadence label.plein{flex:1 1 180px} .routine-droits{border:1px solid var(--n300);border-radius:var(--r1); padding:10px 14px 4px;margin:0 0 14px;min-width:0} .routine-droits legend{font-size:13px;font-weight:700;padding:0 4px} .routine-droits .doux{margin:0 0 10px} .routine-droits .ligne-circuit{margin:0 0 10px} .routine-forme > .doux{margin:0 0 4px} /* ⚠️ SUR TELEPHONE, LES GESTES PASSENT SOUS LA CARTE : a cote, ils ecrasaient le texte a deux mots par ligne. */ /* ⚠️ (29/09/2026) « .rangee>div{flex:1} » pese plus lourd que « flex:none » : texte et gestes se partageaient la ligne a parts egales, et sur telephone les gestes ne passaient jamais dessous. L'etat « Active — l'administrateur en est informe », plus long, tenait sur trois lignes. */ .rangee>.routine-gestes{flex:none} @media (max-width:640px){ .rangee.routine>div,.rangee.routine>.routine-gestes{flex:1 1 100%} .routine-gestes{align-items:flex-start;width:100%} .rangee.modele-de-routine .bouton-lien{width:100%;justify-content:center} } /* ⚠️ UN AGENT INDISPONIBLE SE LIT, IL NE SE LANCE PAS (29/09/2026). Richard : « les agents indispo sont dans le catalogue et on pourra pas les ajouter, c'est tout ». Pas de bouton du tout : un bouton grisé se clique quand même, et se lit « panne ». Le mot est écrit ; la teinte n'est qu'une aide. */ .agent-indisponible{background:var(--surface);box-shadow:none} .agent-indisponible:hover{border-color:var(--n300)} .agent-indisponible b{color:var(--n800)} .etiquette-indispo{flex:none;align-self:center;font-size:11.5px; font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:999px; border:1px solid var(--n400);color:var(--n700);background:var(--blanc)} /* ── Apprendre (29/09/2026), REFAIT AU DESSIN DE LA REVUE DESIGN (01/10/2026) Richard : « appliquer les changements de design sur apprendre ». Maquettes « Main », « Exercice », « Résultat » : une action en tête, la progression par geste, les exercices trois à la fois ; l'exercice en mode concentré. ⚠️ TOUT EST SOUS « .apprendre » (la page, dans la coquille) OU SOUS « .concentre » (l'exercice, sans la coquille) : rien ne fuit ailleurs. ⚠️ « [hidden] » L'EMPORTE SUR CHAQUE « display » posé ici. */ .apprendre [hidden],.concentre [hidden]{display:none!important} .liste.apprendre{max-width:1100px;padding:28px 40px 40px;display:flex; flex-direction:column;gap:32px} .apprendre h2,.concentre h2{margin:0;font-size:17px;line-height:1.3; font-weight:600;letter-spacing:0} .apprendre h3,.concentre h3{margin:0;font-size:15px;line-height:1.3;font-weight:600} .apprendre h4{margin:0;font-size:15px;line-height:1.3;font-weight:600} .apprendre .section-tete{display:flex;align-items:flex-end; justify-content:space-between;gap:16px} .apprendre .section-tete p{margin:4px 0 0;font-size:13.5px;color:var(--n800)} .apprendre .lien-fort,.concentre .lien-fort{min-height:44px;display:inline-flex; align-items:center;gap:6px;padding:0 10px;border-radius:10px; color:var(--action700);font-size:14px;font-weight:600;text-decoration:none} .apprendre .lien-doux,.concentre .lien-doux{min-height:44px; display:inline-flex;align-items:center;gap:6px;padding:0 10px; border-radius:10px;color:var(--n800);font-size:14px;font-weight:600; text-decoration:none} .apprendre .lien-fort:hover,.apprendre .lien-doux:hover, .concentre .lien-fort:hover,.concentre .lien-doux:hover{ background:var(--n200);text-decoration:none} .apprendre .bouton-plein,.concentre .bouton-plein{gap:8px;padding:0 20px; text-decoration:none} .apprendre .bouton-doux,.concentre .bouton-doux{gap:8px;font-size:14px; padding:0 16px;text-decoration:none} .apprendre a.bouton-plein:hover,.concentre a.bouton-plein:hover{ color:var(--blanc);text-decoration:none} .concentre .bouton-plein:disabled{opacity:.7;cursor:progress} /* ── « Chercher dans l'aide », dans l'en-tête ─────────────────────────── */ .tete-outils{display:flex;align-items:center;gap:8px;min-width:0} .aide-recherche{position:relative;display:flex;align-items:center;gap:4px; width:280px;min-height:44px;margin:0;padding:0 12px 0 2px; background:var(--blanc);border:1px solid var(--n300);border-radius:10px; color:var(--n800)} .aide-recherche:focus-within{border-color:var(--action); box-shadow:0 0 0 3px var(--action200)} .aide-loupe{flex:none;width:40px;height:40px;display:inline-flex; align-items:center;justify-content:center;padding:0;border:none; background:transparent;color:var(--n800);border-radius:8px;cursor:pointer} .aide-loupe:hover{color:var(--encre)} .aide-champ{flex:1;min-width:0;display:flex} /* PAR SON IDENTIFIANT : la règle générale des champs (« 01-coquille ») pèse quatre « :not() » et lui poserait son cadre et son anneau. */ #aide-q{flex:1;min-width:0;min-height:40px;padding:0;border:none; border-radius:0;outline:none;background:transparent;box-shadow:none; color:var(--encre);font:inherit;font-size:14px} #aide-q:focus,#aide-q:hover{background:transparent;box-shadow:none} /* Les résultats, en tête du contenu */ .apprendre .aide-cherche{display:flex;flex-direction:column;gap:12px} .apprendre .aide-cherche:has(.aide-resultats[hidden]){display:none} .apprendre .aide-resultats{display:flex;flex-direction:column;gap:14px; padding:16px 18px;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r3)} .apprendre .aide-compte{margin:0;font-size:13px;color:var(--n700)} .apprendre .aide-compte:empty{display:none} .apprendre .aide-groupe h3{display:flex;align-items:center;gap:8px; margin:0 0 6px;font-size:14px} .apprendre .aide-n{min-width:22px;height:22px;padding:0 6px;display:inline-flex; align-items:center;justify-content:center;border-radius:999px; background:var(--n200);font-size:12px;font-weight:700} .apprendre ol.aide-liste{display:grid;gap:4px;margin:0;padding:0; list-style:none} .apprendre .aide-trouve{display:grid;gap:2px;padding:8px 10px; border-radius:var(--r1)} .apprendre .aide-trouve:hover{background:var(--n100)} .apprendre .aide-lien{font-weight:600;font-size:14px;color:var(--encre); overflow-wrap:anywhere} .apprendre .aide-ou{font-size:12px;font-weight:600;color:var(--action700)} .apprendre .aide-extrait{margin:0;font-size:13.5px;line-height:1.5; color:var(--n800);overflow-wrap:anywhere} .apprendre .aide-cherche mark{background:var(--action200);color:inherit; border-radius:3px;padding:0 1px} .apprendre .aide-rien p{margin:0;font-size:14px} .apprendre .aide-suggestions{display:flex;flex-wrap:wrap;gap:6px; margin-top:8px!important} .apprendre .aide-suggestion{min-height:36px;padding:0 12px; border:1px solid var(--n400);border-radius:999px;background:var(--blanc); color:var(--encre);font:inherit;font-size:14px;cursor:pointer} .apprendre .aide-suggestion:hover{border-color:var(--encre)} /* ── Le quiz par métier : la carte en tête ─────────────────────────────── */ .apprendre .quiz-entree{display:grid;grid-template-columns:minmax(0,1fr) 280px; gap:32px;padding:28px 32px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r3)} .apprendre .quiz-entree-gauche{display:flex;flex-direction:column;min-width:0} .apprendre .surtitre{margin:0;font-size:13px;font-weight:600; color:var(--action700)} .apprendre .quiz-entree h2{margin:6px 0 0;font-size:26px;line-height:1.2; font-weight:700;letter-spacing:-.01em} .apprendre .chapeau{margin:10px 0 0;font-size:15px;line-height:1.55; color:var(--n800);max-width:54ch} .apprendre .quiz-reprendre{display:flex;align-items:center; justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-top:20px; padding:12px 14px 12px 16px;background:var(--action100); border-radius:var(--r2)} .apprendre .quiz-reprendre p{margin:0;font-size:14px;font-weight:600; color:var(--action700)} .apprendre .quiz-choix{display:flex;align-items:flex-end;flex-wrap:wrap; gap:12px;margin:22px 0 0} .apprendre .quiz-champ{display:flex;flex-direction:column;gap:6px} .apprendre .quiz-champ label{font-size:13px;font-weight:600;color:var(--n800)} .apprendre .quiz-champ select{min-height:44px;min-width:260px;padding:0 12px; font:inherit;font-size:15px;color:var(--encre);background:var(--blanc); border:1px solid var(--n400);border-radius:10px} .apprendre .quiz-champ select:focus-visible{outline:2px solid var(--action); outline-offset:1px} .apprendre .quiz-cout{position:relative;display:flex;flex-wrap:wrap; align-items:baseline;gap:2px 6px;margin-top:14px;font-size:13px; color:var(--n700)} .apprendre .quiz-cout>p{margin:0} .apprendre details.quiz-envoi>summary{list-style:none;cursor:pointer; color:var(--action700);font-weight:600;text-decoration:underline; text-underline-offset:2px} .apprendre details.quiz-envoi>summary::-webkit-details-marker{display:none} .apprendre details.quiz-envoi>ul{position:absolute;left:0;top:calc(100% + 8px); z-index:20;width:min(560px,100%);margin:0;padding:14px 16px 14px 32px; display:grid;gap:6px;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2);box-shadow:0 12px 32px rgba(15,23,42,.12); font-size:13.5px;line-height:1.5;color:var(--encre)} .apprendre .quiz-ferme{margin:20px 0 0;padding:12px 14px;font-size:14px; line-height:1.5;background:var(--n100);border:1px solid var(--n300); border-radius:var(--r2)} .apprendre .quiz-jour{display:flex;flex-direction:column;gap:10px; align-self:start;padding:18px 20px;background:var(--n100); border:1px solid var(--n300);border-radius:var(--r2)} .apprendre .quiz-jour p{margin:0} .apprendre .quiz-jour-t,.apprendre .quiz-chaque-t{font-size:13px; font-weight:600;color:var(--n800)} .apprendre .quiz-ronds{display:flex;gap:8px} .apprendre .quiz-ronds span{width:18px;height:18px;border-radius:999px; border:2px solid var(--action)} .apprendre .quiz-ronds span.pris{background:var(--encre);border-color:var(--encre)} .apprendre .quiz-dispo{font-size:16px;font-weight:600} .apprendre .quiz-minuit{font-size:13px;color:var(--n700)} .apprendre .quiz-chaque{margin-top:2px;padding-top:12px; border-top:1px solid var(--n300)} .apprendre .quiz-chaque p:last-child{margin-top:4px;font-size:13.5px; line-height:1.5;color:var(--n800)} .apprendre .quiz-jour .lien-doux{align-self:flex-start;margin:-6px 0 -10px -10px} /* ── Vos cinq gestes ──────────────────────────────────────────────────── */ .apprendre .gestes-tete,.concentre .score-gestes{display:flex; flex-direction:column;gap:14px} .apprendre .grille-gestes,.concentre .grille-gestes{display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .geste-carte{position:relative;display:flex;flex-direction:column;gap:8px; padding:16px;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2)} .geste-carte.a-reprendre{border-color:var(--action); box-shadow:0 0 0 3px var(--action200)} .geste-carte .geste-rang{margin:0;font-size:12.5px;color:var(--n700)} .geste-carte.a-reprendre .geste-rang{font-weight:600;color:var(--action700)} .geste-carte h3{min-height:40px} .geste-carte .geste-bref{margin:0;font-size:13.5px;line-height:1.5; color:var(--n800);min-height:61px} /* La jauge juste sous le texte (titre et texte ont leur hauteur) : les cinq s'alignent, même quand « S'entraîner » ajoute une ligne en bas. */ .geste-carte .jauge{display:flex;align-items:center;gap:10px;margin-top:4px} .geste-carte .jauge-traits{display:flex;gap:4px;flex:1} .geste-carte .jauge-traits span{flex:1;height:6px;border-radius:999px; background:var(--n300)} .geste-carte .jauge-traits span.plein{background:var(--encre)} .geste-carte.a-reprendre .jauge-traits span.plein{background:var(--action)} .geste-carte .jauge-n{font-size:13px;font-weight:600;color:var(--n800); white-space:nowrap} .geste-carte .geste-pied{display:flex;flex-wrap:wrap;align-items:center; column-gap:12px;margin-top:auto} .geste-entrainer{min-height:44px;display:inline-flex;align-items:center;gap:6px; color:var(--action700);font-size:14px;font-weight:600;text-decoration:none} .geste-entrainer:hover{text-decoration:underline} details.geste-lire>summary{min-height:44px;display:flex;align-items:center; list-style:none;cursor:pointer;font-size:14px;font-weight:600; color:var(--n800)} details.geste-lire>summary::-webkit-details-marker{display:none} details.geste-lire>summary:hover{color:var(--encre);text-decoration:underline} /* Le texte entier d'un geste, EN SURIMPRESSION sous sa carte : la rangée des cinq ne bouge pas. Les deux dernières cartes l'alignent à droite. */ details.geste-lire>p{position:absolute;left:0;top:calc(100% + 6px);z-index:20; width:max(100%,300px);margin:0;padding:14px 16px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r2); box-shadow:0 12px 32px rgba(15,23,42,.12);font-size:13.5px;line-height:1.55; color:var(--encre)} .grille-gestes>.geste-carte:nth-child(n+4) details.geste-lire>p{left:auto;right:0} /* ── Exercices sans modèle ────────────────────────────────────────────── */ .apprendre .exos{display:flex;flex-direction:column;gap:16px; padding:24px 28px 28px;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r3)} .apprendre .exos .section-tete{align-items:flex-start} .apprendre .exos .section-tete p{max-width:70ch} .apprendre .exos-compte{margin:0!important;font-size:13px!important; color:var(--n700)!important;white-space:nowrap} .apprendre .domaines-choix{display:flex;flex-wrap:wrap;gap:6px} .apprendre .domaine-puce{min-height:44px;display:inline-flex;align-items:center; padding:0 14px;background:var(--blanc);color:var(--encre); border:1px solid var(--n400);border-radius:999px;font-size:14px; font-weight:600;text-decoration:none} .apprendre .domaine-puce:hover{border-color:var(--encre);text-decoration:none} .apprendre .domaine-puce[aria-current=true]{background:var(--encre); border-color:var(--encre);color:var(--blanc)} .apprendre .exos-domaine{display:flex;flex-direction:column;gap:12px} .apprendre .exos-domaine-tete p{margin:2px 0 0;font-size:13.5px; color:var(--n800)} .apprendre .exos-cartes{display:grid;gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .apprendre .exo{display:flex;flex-direction:column;gap:8px;padding:16px; background:var(--blanc);border:1px solid var(--n300);border-radius:var(--r2)} .apprendre .exo-tete{display:flex;align-items:center; justify-content:space-between;gap:8px;min-height:24px} .apprendre .exo-niveau{margin:0;font-size:12.5px;font-weight:600; color:var(--n700)} .apprendre .exo-fait{display:inline-flex;align-items:center;gap:4px; height:24px;padding:0 8px;border-radius:999px;background:var(--vert100); color:var(--vert700);font-size:12.5px;font-weight:600} .apprendre .exo-situation{margin:0;font-size:13.5px;line-height:1.5; color:var(--n800);display:-webkit-box;-webkit-line-clamp:5; -webkit-box-orient:vertical;overflow:hidden} .apprendre .exo-pied{margin-top:auto;padding-top:4px} .apprendre .exo-pied .bouton-doux{min-height:44px} /* ── Et maintenant, sans la grille ────────────────────────────────────── */ .apprendre .sans-filet{display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;gap:24px;padding:20px 28px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r3)} .apprendre .sans-filet h2{font-size:15px} .apprendre .sans-filet p{margin:4px 0 0;font-size:13.5px;color:var(--n800); max-width:78ch} .apprendre .sans-filet-gestes{display:flex;align-items:center;gap:8px} /* ── L'aide des autres écrans, dans sa page ───────────────────────────── */ .apprendre .carte-ap{padding:20px 24px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r3)} .apprendre .aide-intro{display:flex;flex-direction:column;gap:8px} .apprendre .aide-intro p,.apprendre .aide-intro li{font-size:14px;line-height:1.55} .apprendre .aide-intro p{margin:0} .apprendre .aide-intro ul{margin:0;padding-left:20px;display:grid;gap:6px} .apprendre .aide-des-ecrans{display:flex;flex-direction:column;gap:8px} .apprendre .aide-des-ecrans>p{margin:0 0 4px;font-size:14px;color:var(--n800)} .apprendre .aide-ecran>summary{gap:8px;flex-wrap:wrap} .apprendre .aide-ecran .reveler-corps p{margin:0;font-size:14px} .apprendre .aide-vers{align-self:flex-start;font-size:14px;font-weight:600} .apprendre details.reveler,.concentre details.reveler{border:1px solid var(--n300); border-radius:var(--r1);background:var(--blanc)} .apprendre details.reveler>summary,.concentre details.reveler>summary{ min-height:44px;display:flex;align-items:center;padding:0 12px; cursor:pointer;font-size:14px;font-weight:600} .apprendre details.reveler[open]>summary, .concentre details.reveler[open]>summary{border-bottom:1px solid var(--n300)} .apprendre .reveler-corps,.concentre .reveler-corps{display:flex; flex-direction:column;gap:10px;padding:10px 14px 12px} .apprendre .reveler-corps p,.concentre .reveler-corps p{margin:0;font-size:14px} /* ══ LE MODE CONCENTRÉ : l'exercice, rien d'autre (maquette « Exercice ») ══ */ .concentre{min-height:100vh;min-height:100dvh;display:flex; flex-direction:column;background:var(--fond)} .concentre-tete{position:sticky;top:0;z-index:30;height:64px;flex:none; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px; padding:0 20px;background:var(--blanc);border-bottom:1px solid var(--n300)} .concentre-quitter{min-height:44px;display:inline-flex;align-items:center; gap:8px;padding:0 12px;border-radius:10px;color:var(--encre);font-size:14px; font-weight:600;text-decoration:none} .concentre-quitter:hover{background:var(--n200);text-decoration:none} .concentre-centre{display:flex;flex-direction:column;align-items:center; gap:6px;min-width:0} .concentre-centre h1{margin:0;font-size:14px;line-height:1.3;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw} .concentre-etapes{display:flex;gap:6px;margin:0;padding:0;list-style:none} .concentre-etapes li{width:40px;height:6px;border-radius:999px; background:var(--n400)} .concentre-etapes li.faite{background:var(--encre)} .concentre-etapes li.ici{background:var(--action)} .concentre-etapes li span{position:absolute;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .concentre-droite{display:flex;justify-content:flex-end;align-items:center; gap:8px;min-width:0} .concentre-droite p{margin:0;font-size:13px;color:var(--n700); white-space:nowrap} .concentre-corps{flex:1;width:100%;max-width:1120px;margin:0 auto; padding:32px 20px 56px;box-sizing:border-box} .concentre-grille{display:grid;grid-template-columns:minmax(0,1fr) 320px; gap:28px;align-items:start} .concentre-principal{display:flex;flex-direction:column;gap:16px;min-width:0} .concentre-cote{display:flex;flex-direction:column;gap:12px;min-width:0} .concentre-seul{max-width:640px;margin:0 auto;display:flex; flex-direction:column;gap:16px} .concentre .carte-ap{padding:20px 24px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r3)} .concentre .carte-ap>p{margin:8px 0 0;font-size:14px;line-height:1.55} .concentre .carte-ap form{margin:14px 0 0} .concentre .surtitre-doux{margin:0;font-size:13px;font-weight:600; color:var(--n700)} .concentre .note{margin:0;font-size:13px;line-height:1.5;color:var(--n700); max-width:56ch} .concentre .quiz-note{margin:10px 0 0;font-size:13px;color:var(--n700)} .concentre .quiz-avis{margin:0;padding:10px 14px;border-radius:var(--r2); background:var(--rouge100);color:var(--rouge700);font-size:14px; font-weight:600} /* La situation, en grand */ .concentre .situation{padding:22px 26px} .concentre .situation h2,.concentre .spontanee-cadre h2{font-size:13px; font-weight:600;color:var(--n700)} .concentre .situation .surtitre-doux{margin-bottom:4px;color:var(--action700)} .concentre .situation-texte{margin:8px 0 0!important;font-size:18px!important; line-height:1.6!important;white-space:pre-wrap} .concentre pre.spontanee{margin:8px 0 0;padding:12px 14px;background:var(--n100); border:1px solid var(--n300);border-radius:var(--r1);white-space:pre-wrap; font:inherit;font-size:15px} .concentre .obtenu{color:var(--n800)} .concentre .defi{font-weight:600} /* La demande : le champ, et la grille qui s'allume à la frappe */ .concentre .demande-cadre{display:flex;flex-direction:column;gap:10px; padding:18px 22px 14px;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r3)} .concentre .demande-cadre:focus-within{border-color:var(--action); box-shadow:0 0 0 3px var(--action200)} .concentre .demande-cadre label{font-size:14px;font-weight:600} .concentre .demande-cadre textarea{width:100%;min-height:196px;margin:0; padding:0;border:none;border-radius:0;outline:none;resize:vertical; background:transparent;font:inherit;font-size:16px;line-height:1.6; color:var(--encre)} /* L'anneau est celui du cadre (« :focus-within »), pas celui du champ. */ .concentre .demande-cadre textarea:focus, .concentre .demande-cadre textarea:hover{background:transparent;box-shadow:none} .concentre .demande-pied{display:flex;align-items:center; justify-content:space-between;gap:12px;padding-top:12px; border-top:1px solid var(--n300)} .concentre .demande-reperes{display:flex;align-items:center;flex-wrap:wrap; gap:10px} .concentre .demande-reperes p,.concentre .demande-compte{margin:0;font-size:13px; color:var(--n700)} .concentre .demande-compte{white-space:nowrap} .concentre .reperes-frappe{display:flex;flex-wrap:wrap;gap:6px;margin:0; padding:0;list-style:none} .concentre .reperes-frappe li{display:inline-flex;align-items:center;gap:6px; height:28px;padding:0 10px 0 6px;border-radius:999px;background:var(--blanc); border:1px solid var(--n300);color:var(--n700);font-size:13px} .concentre .reperes-frappe li span{display:inline-flex} .concentre .reperes-frappe .ic-vide{color:var(--n600)} .concentre .reperes-frappe .ic-coche{display:none} .concentre .reperes-frappe li.repere{background:var(--action100); border-color:var(--action100);color:var(--action700);font-weight:600} .concentre .reperes-frappe li.repere .ic-vide{display:none} .concentre .reperes-frappe li.repere .ic-coche{display:inline-flex} .concentre .demande-envoi{display:flex;align-items:center; justify-content:space-between;gap:16px;margin-top:16px} .concentre form.quiz-reponse,.concentre form.exo-reponse{margin:0} /* Le geste de la question, à côté */ .concentre .geste-question{display:flex;flex-direction:column;gap:10px; padding:20px} .concentre .geste-question-tete{display:flex;align-items:flex-start;gap:10px} .concentre .geste-num{width:28px;height:28px;flex:none;display:inline-flex; align-items:center;justify-content:center;border-radius:999px; background:var(--action100);color:var(--action700);font-size:14px; font-weight:700} .concentre .geste-question h2{margin-top:3px;font-size:16px} .concentre .geste-question>p{margin:0;font-size:14px;line-height:1.55; color:var(--n800)} .concentre .geste-reperes{display:flex;flex-direction:column;gap:6px; margin-top:4px} .concentre .geste-mots{display:flex;flex-wrap:wrap;gap:6px;margin:0} .concentre .geste-mots span{padding:3px 8px;border-radius:8px; background:var(--n100);border:1px solid var(--n300);font-size:13px} .concentre .cinq-gestes{display:grid;gap:8px;margin:0;padding:0 0 0 18px; font-size:14px} .concentre .cinq-gestes li b{display:block;font-weight:600} .concentre .cinq-gestes li span{font-size:13px;color:var(--n800)} .concentre .pour-comparer{display:flex;flex-direction:column;gap:10px; padding:20px} .concentre .pour-comparer h2{font-size:15px} .concentre .pour-comparer>p{margin:0;font-size:13px;color:var(--n700)} .concentre ul.manques{display:grid;gap:8px;margin:0;padding:0;list-style:none} .concentre ul.manques li{display:grid;gap:2px;font-size:14px} .concentre .geste-l{font-size:12px;font-weight:600;color:var(--action700)} .concentre .critere{border-top:1px solid var(--n300);padding-top:8px; font-size:14px} .concentre .vers-fiche-form{margin:0} .concentre .vers-fiche{min-height:44px;display:inline-flex;align-items:center; gap:8px;padding:0 14px;background:var(--blanc);border:1px solid var(--n400); border-radius:10px;color:var(--encre);font:inherit;font-size:14px; font-weight:600;cursor:pointer} .concentre .vers-fiche:hover{border-color:var(--encre)} .cadre-details{background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2)} .cadre-details>summary{min-height:44px;display:flex;align-items:center; padding:0 16px;font-size:14px;font-weight:600;cursor:pointer} .cadre-details[open]>summary{border-bottom:1px solid var(--n300)} .cadre-details>ul{display:grid;gap:8px;margin:0;padding:12px 16px 14px 34px; font-size:13.5px;line-height:1.5} .details-discret>summary{min-height:44px;display:inline-flex;align-items:center; padding:0 10px;border-radius:10px;color:var(--n800);font-size:14px; font-weight:500;cursor:pointer;list-style:none} .details-discret>summary::-webkit-details-marker{display:none} .details-discret>summary:hover{background:var(--n200)} .details-discret>p{margin:4px 0 0;padding:12px 14px;background:var(--blanc); border:1px solid var(--n300);border-radius:var(--r2);font-size:13.5px; line-height:1.5;white-space:pre-wrap} /* ── Le retour (maquette « Résultat ») : le verdict d'abord ─────────── */ .concentre .retour,.concentre .score{display:flex;flex-direction:column;gap:20px} .concentre .verdict{display:grid;grid-template-columns:auto minmax(0,1fr); align-items:center;gap:32px;padding:22px 28px} .concentre .verdict h2{margin-top:2px;font-size:30px;line-height:1.2; font-weight:700;letter-spacing:-.01em} .concentre .verdict-droite{display:flex;flex-direction:column;gap:10px; min-width:0} .concentre .verdict-droite p{margin:0;max-width:none} .concentre .pastilles{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0; list-style:none} .concentre .geste-pastille{display:inline-flex;align-items:center;gap:6px;height:32px; padding:0 12px 0 6px;border-radius:999px;background:var(--blanc); border:1px solid var(--n400);color:var(--n800);font-size:14px} .concentre .geste-pastille svg{color:var(--n600)} .concentre .geste-pastille.presente{background:var(--n200);border-color:var(--n200); color:var(--encre);font-weight:600} .concentre .geste-pastille.presente svg{color:var(--encre)} .concentre .geste-pastille svg .coche-blanche{stroke:var(--blanc)} .concentre .comparaison{display:grid;gap:20px; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)} .concentre .mienne,.concentre .amelioree{display:flex;flex-direction:column; gap:10px} .concentre .mienne h2,.concentre .amelioree h2,.concentre .manquait h2, .concentre .quiz-historique h2{font-size:15px} .concentre .texte-demande{margin:0;font-size:15px;line-height:1.65; color:var(--n800);white-space:pre-wrap;overflow-wrap:anywhere} .concentre .amelioree{border-color:var(--action200)} .concentre .amelioree-tete{display:flex;align-items:center; justify-content:space-between;gap:12px} .concentre .amelioree-tete h2{display:flex;align-items:center;gap:8px} .concentre .amelioree-tete h2 svg{color:var(--action700)} .concentre .amelioree-tete .note{font-size:12.5px;white-space:nowrap} .concentre .texte-amelioree{margin:0;font-size:15px;line-height:1.75; white-space:pre-wrap;overflow-wrap:anywhere} .concentre .texte-amelioree mark{background:var(--action100); color:var(--encre);border-radius:4px;padding:1px 2px} .concentre .ajout-geste{display:inline-block;margin:0 2px 0 4px;padding:0 6px; border-radius:6px;background:var(--blanc);border:1px solid var(--action200); color:var(--action700);font-size:12px;font-weight:600;line-height:20px; vertical-align:1px;white-space:nowrap} .concentre .amelioree-gestes{display:flex;flex-wrap:wrap;align-items:center; gap:8px;margin-top:4px} .concentre .amelioree-gestes form{margin:0} .concentre .amelioree.sans-version .quiz-note{margin:0} .concentre .conseil{display:grid;grid-template-columns:auto minmax(0,1fr); gap:14px} .concentre .conseil-icone{width:36px;height:36px;display:inline-flex; align-items:center;justify-content:center;border-radius:999px; background:var(--action100);color:var(--action700)} .concentre .conseil p{margin:6px 0 0;font-size:15px;line-height:1.6; max-width:86ch;white-space:pre-wrap} .concentre .manquait{display:flex;flex-direction:column;gap:10px} /* La grille détaillée : la ligne de chaque geste, comme avant */ .concentre ul.quiz-grille{display:grid;gap:10px;margin:0; padding:14px 16px 16px;list-style:none} .concentre ul.quiz-grille li{margin:0;display:grid;grid-template-columns:auto 1fr; gap:10px;align-items:start;font-size:14px} .concentre ul.quiz-grille li>span:last-child{display:grid;gap:2px} .concentre ul.quiz-grille small{font-size:13px;color:var(--n700)} .concentre ul.quiz-grille small.quiz-mots{color:var(--action700);font-weight:600} .concentre .quiz-marque{min-width:64px;text-align:center;padding:2px 8px; border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--n400)} .concentre li.fait .quiz-marque{background:var(--encre);color:var(--blanc); border-color:var(--encre)} .concentre li.manque .quiz-marque{background:var(--blanc);color:var(--encre)} .concentre .retour-pied{display:flex;align-items:center;flex-wrap:wrap; justify-content:space-between;gap:16px;padding-top:4px} .concentre .retour-pied form{margin:0} .concentre .score-pied{justify-content:flex-end} /* ── Le score : le total, puis geste par geste ──────────────────────── */ .concentre .score-verdict .quiz-total{white-space:nowrap} .concentre .score-detail{font-size:15px;font-weight:600} .concentre .score-suite{display:flex;align-items:center;flex-wrap:wrap;gap:12px} .concentre .score-suite .quiz-ferme{margin:0;font-size:14px;font-weight:600} .concentre .quiz-historique{display:flex;flex-direction:column;gap:8px} .concentre .quiz-historique h3{margin:6px 0 0;font-size:14px} .concentre .quiz-scores,.concentre .quiz-jours{display:grid;gap:4px;margin:0; padding:0;list-style:none;font-size:14px} .concentre .quiz-scores li.ici{font-weight:600} .concentre .quiz-jours li span{display:inline-block;min-width:88px; color:var(--n700)} .concentre .quiz-ecart{color:var(--n700)} /* ── Les largeurs moindres (le téléphone n'est pas une cible) ─────────── */ @media (max-width:1100px){ .tete:has(.tete-outils){flex-wrap:wrap} .tete-outils{flex:1 1 100%;justify-content:space-between} .aide-recherche{flex:1;width:auto} } @media (max-width:900px){ .liste.apprendre{padding:20px 16px 32px} .apprendre .quiz-entree,.apprendre .sans-filet{grid-template-columns:1fr} .apprendre .quiz-champ select{min-width:0;width:100%} .apprendre .quiz-champ{flex:1 1 220px} .concentre-grille,.concentre .comparaison,.concentre .verdict{ grid-template-columns:1fr} .concentre .demande-envoi{flex-direction:column;align-items:stretch} } @media (max-width:767px){ .concentre-tete{grid-template-columns:auto 1fr;height:auto;min-height:64px; padding:8px 12px} .concentre-droite{display:none} .concentre-centre{align-items:flex-start} .concentre-centre h1{white-space:normal;max-width:none} .concentre-etapes li{width:28px} .concentre-corps{padding:20px 12px 40px} /* MOBILE : CHAT SIMPLE, la phrase discrète des écrans d'ordinateur. */ .concentre .pour-ordinateur{display:flex;flex-wrap:wrap;align-items:center; gap:0 8px;margin:0;padding:6px 16px 0;font-size:13px;line-height:1.45; color:var(--n800);background:var(--surface); border-bottom:1px solid var(--n300)} .concentre .pour-ordinateur a{min-height:40px;display:inline-flex; align-items:center;font-weight:600} .tete-outils .aide-recherche{min-width:0} } /* ── La maquette LinkedIn ─────────────────────────────────────────────── */ .li-maquettes{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start; margin:18px 0 8px} .li-colonne{display:flex;flex-direction:column;gap:8px;min-width:0} .li-legende{display:flex;align-items:baseline;gap:8px;font-size:12px; font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--n700)} .li-px{font-weight:400;letter-spacing:0;text-transform:none;color:var(--n500)} .li-carte{background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r1);overflow:hidden;max-width:100%; font-size:14px;line-height:20px;color:var(--encre)} .li-bureau{width:555px} .li-mobile{width:375px} .li-tete{display:flex;gap:10px;align-items:center;padding:12px 14px 6px} .li-rond{width:44px;height:44px;border-radius:50%;flex:none;display:grid; place-items:center;background:var(--n300);color:var(--n800); font-weight:700;font-size:17px} .li-qui{min-width:0;display:flex;flex-direction:column} .li-qui b{font-size:14px;line-height:18px} .li-sous{font-size:12px;line-height:16px;color:var(--n600)} .li-suppose{font-style:italic} /* ⚠️ LE TRAIT EST TOUTE LA RAISON D'ÊTRE DE CET ÉCRAN, et il est posé DANS LE FLUX — pas à une hauteur calculée. C'est ce qui le rend juste sur les deux largeurs : il tombe après le même SIGNE, donc à la ligne où chaque colonne l'amène. Posé en lignes, il annonçait sur téléphone une coupure qui n'existe pas. */ .li-texte{padding:0 14px 8px} .li-texte p{margin:0 0 20px} .li-texte p:last-of-type{margin-bottom:0} .li-pli{position:relative;border-top:1px dashed var(--rouge); margin:20px 0;height:0} .li-pli span{position:absolute;right:0;top:-9px;background:var(--blanc); padding:0 6px;font-size:11px;font-weight:600;color:var(--rouge600)} /* ⚠️ CE QUI EST REPLIÉ RESTE LISIBLE, en retrait. Le masquer ferait perdre la relecture du texte entier, qui est l'autre raison d'ouvrir cet écran. */ .li-replie{opacity:.55} .li-image{display:block;width:100%;height:auto;margin-top:10px; background:var(--n200)} .li-actions{display:flex;justify-content:space-around;gap:4px; border-top:1px solid var(--n300);padding:8px 6px;margin-top:8px; font-size:13px;font-weight:600;color:var(--n700)} .li-choix{display:flex;gap:6px;align-items:center;margin:8px 0 0; flex-wrap:wrap} .li-choix select{flex:1;min-width:0} .li-note{max-width:60ch;font-size:13px;color:var(--n700);margin:6px 0 0} .li-franc{color:var(--n600)} /* ── « Publier sur LinkedIn » (02/10/2026) ─────────────────────────────── Richard : « l'utilisateur trouve ça trop lourd ». Sous l'aperçu : le bouton et son mode d'emploi, puis le texte qui part, tel quel. ⚠️ LES RÈGLES DE « .seul » (paragraphes gris de 13,5 px) SONT DÉFAITES ICI, comme pour « .li-edition » ; le titre du bloc n'est lu qu'au lecteur d'écran. */ .li-publier{display:flex;flex-direction:column;gap:10px;margin:22px 0 6px; padding:16px 18px;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2)} .li-publier-geste{display:flex;flex-wrap:wrap;align-items:center; gap:10px 22px;margin:0} a.li-publier-bouton,.li-publier-bouton{gap:8px;white-space:nowrap} .li-publier-bouton[aria-disabled=true]{background:var(--n300); border-color:var(--n300);color:var(--n700);cursor:not-allowed} .li-mode-emploi{margin:0;padding-left:20px;font-size:13.5px;line-height:1.55; color:var(--n800)} .seul .li-publier-etat{margin:0;font-size:13.5px;font-weight:600; color:var(--vert700)} .li-publier-etat:empty,.livrable-publier-etat:empty{display:none} .seul .li-a-coller-legende{margin:4px 0 0;font-size:13px;color:var(--n700)} /* ⚠️ UN CLIC SÉLECTIONNE TOUT LE TEXTE, SANS SCRIPT (« user-select: all ») : c'est le filet quand LinkedIn ne reprend pas le texte et que le script manque. « pre-wrap » garde les retours à la ligne, à la copie aussi. */ .seul .li-a-coller{margin:0;max-height:10.5em;overflow:auto;padding:10px 12px; background:var(--n100);border:1px dashed var(--n400);border-radius:var(--r1); font-size:14px;line-height:1.55;color:var(--encre);white-space:pre-wrap; word-break:break-word;-webkit-user-select:all;user-select:all;cursor:text} /* ⚠️ (03/10/2026) LE TEXTE ALTERNATIF DANS L'ÉTAPE DE L'IMAGE : un clic le sélectionne, comme le texte à coller. */ .li-mode-emploi .li-alt{display:block;margin:4px 0 2px;padding:6px 10px; background:var(--n100);border:1px dashed var(--n400);border-radius:var(--r1); color:var(--encre);word-break:break-word;-webkit-user-select:all; user-select:all;cursor:text} .seul .li-avertissement,.lui .livrable-avertissement{margin:0; padding:10px 12px;background:var(--rouge100);color:var(--rouge700); border-radius:var(--r1);font-size:13.5px;line-height:1.5} .lui .livrable-avertissement[hidden]{display:none} /* Dans le fil : sous le texte du post de la carte. ⚠️ PAS DANS LA RANGÉE DES GESTES, qui tient sur une ligne à 720 px. Le geste y est le seul plein. */ .livrable-publier{display:flex;flex-wrap:wrap;align-items:center; gap:8px 14px;margin-top:4px} .livrable-publier[hidden]{display:none} .geste.geste-publier{background:var(--action);border-color:var(--action); color:var(--blanc)} .geste.geste-publier:hover{background:var(--action600); border-color:var(--action600);color:var(--blanc)} .lui .livrable-mode-emploi{margin:0;padding-left:18px;font-size:12.5px; line-height:1.5;color:var(--n700)} .lui .livrable-mode-emploi[hidden]{display:none} .lui .livrable-publier-etat{flex-basis:100%;margin:0;font-size:13px; font-weight:600;color:var(--vert700)} /* ── (18/10/2026) Les deux gabarits en ONGLETS, sans script ────────────── Deux cases radio puis trois blocs frères : la bascule, la colonne « ordinateur », la colonne « téléphone ». La case cochée décide laquelle s'affiche. ⚠️ Les cases se masquent mais restent au clavier (flèches). */ .li-onglets{display:block} .li-onglets .li-radio{position:absolute;opacity:0;width:1px;height:1px} .li-bascule{display:inline-flex;gap:4px;padding:3px;margin:0 0 12px; background:var(--n200);border-radius:var(--r2)} .li-bascule label{min-height:36px;padding:0 16px;display:inline-flex; align-items:center;border-radius:var(--r1);font-size:13.5px;font-weight:600; color:var(--n700);cursor:pointer} .li-onglets .li-radio:nth-of-type(1):checked ~ .li-bascule label:nth-child(1), .li-onglets .li-radio:nth-of-type(2):checked ~ .li-bascule label:nth-child(2){ background:var(--blanc);color:var(--encre)} .li-onglets .li-radio:focus-visible ~ .li-bascule{outline:2px solid var(--action)} .li-onglets .li-radio:nth-of-type(1):checked ~ div.li-colonne:nth-of-type(3), .li-onglets .li-radio:nth-of-type(2):checked ~ div.li-colonne:nth-of-type(2){display:none} @media (min-width:768px){ .bascule:checked~.app .cote{display:none} .bascule:checked~.app .ouvrir-barre, .bascule:checked~.app .neuve-tel{display:inline-flex} .bascule:checked~.app .tete.tete-accueil{display:flex} .bascule:checked~.app .tete{padding-left:12px} } @media (max-width:767px){ /* ⚠️ « visibility », PAS SEULEMENT UN DÉCALAGE : un tiroir poussé hors de l'écran reste atteignable à la tabulation, et le clavier s'y perdrait. */ /* ⚠️ LA VISIBILITÉ BASCULE D'UN COUP À L'OUVERTURE, et seulement après le glissement à la fermeture. Transitionnée dans les deux sens, elle valait encore « hidden » au premier instant de l'ouverture : le focus envoyé dans le tiroir tombait sur un élément invisible, donc nulle part. */ .cote{position:fixed;top:0;bottom:0;left:0;z-index:20;width:320px; max-width:calc(100vw - 48px);flex:none;visibility:hidden; transform:translateX(-100%); transition:transform .2s ease,visibility 0s linear .2s; box-shadow:0 18px 48px rgba(15,23,42,.24)} .bascule:checked~.app .cote{visibility:visible;transform:none; transition:transform .2s ease,visibility 0s} .bascule:checked~.app .voile{display:block;position:fixed;top:0;right:0; bottom:0;left:0;z-index:19;background:rgba(15,23,42,.42)} .replier{display:none} .fermer-tiroir,.ouvrir-barre,.neuve-tel{display:inline-flex; color:var(--encre)} .app .tete,.app .tete.tete-accueil{display:flex;min-height:56px; padding:0 6px;gap:4px} .app .tete h1{font-size:16px} .app .tete .crayon{display:none} .accueil{padding:16px 16px 0;gap:16px} .accueil h1{font-size:24px} .tuiles{grid-template-columns:1fr} .tuile{min-height:48px;padding:8px 14px;font-size:14px} /* ⚠️ LES PUCES SUR UNE LIGNE QUI GLISSE (29/09/2026) : douze domaines empilés prenaient quatre rangées et poussaient l'accueil hors de l'écran. Rien n'est caché — la dernière puce coupée dit qu'il y en a d'autres, et le doigt les fait venir. */ .accueil .puces{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; margin:0 -16px;padding:0 16px} .accueil .puces::-webkit-scrollbar{display:none} /* ⚠️ LE COMPOSEUR DE L'ACCUEIL COLLE AU BAS DE L'ÉCRAN : au milieu, il passait sous le clavier du téléphone. */ .accueil .cadre{order:10;position:sticky;bottom:0;margin-top:auto; padding:8px 0 16px;background:var(--fond);z-index:5} .carte-composeur{padding:8px 8px 4px 14px; box-shadow:0 4px 16px rgba(15,23,42,.08); grid-template-columns:minmax(0,auto) minmax(0,1fr) auto auto; grid-template-areas:"puce puce cumul cumul" "champ champ champ champ" "outils etat jauge envoyer"} /* ⚠️ L'ANNEAU DES CRÉDITS A SA CASE, CONTRE LE BOUTON D'ENVOI (02/10/2026) : dans les outils, la jauge et son texte recouvraient le pays du modèle (« États-Unis »). Hors d'eux, le nom du modèle se coupe avant de rien recouvrir. Sa bulle (au toucher) se pose au-dessus de la carte, calée à droite : accrochée à l'anneau, elle sortait de l'écran par la gauche. */ .carte-composeur .puce-domaine{justify-self:start;margin-left:-4px} .carte-composeur .outils-g{flex-wrap:nowrap;min-width:0} /* (La pastille du modèle rétrécit partout depuis le 02/10/2026 : voir « .pastille-modele », 08-discussion.css.) */ #question{min-height:44px;padding-top:8px} .composeur{padding:8px 16px 16px} .bloc{padding:0 16px} .liste{padding:16px} .pastille{max-width:100%} } @media (prefers-reduced-motion:reduce){.cote{transition:none}} .pour-ordinateur{display:none} @media (max-width:767px){ /* La barre : ni Assistant, ni Apprendre, ni Mes contenus, ni Suivi, ni Relectures, ni Connaissance, ni « Rechercher partout » ; et plus de compte des relectures sur le bouton du tiroir, qui ne mène plus à elles. */ .app .cote-liens,.app .rech-partout,.app .ouvrir-barre .compte-rond{display:none} /* Les classeurs restent des groupes de la liste ; on ne les gère pas ici, et l'on ne garde pas une discussion comme modèle. */ .app .classeurs-t,.app .vol-menu form.classer, .app .vol-menu a[href^="/classeurs"], .app .vol-menu a[href*="garder=1"]{display:none} /* L'accueil : le bonjour et le composeur. Ni domaines, ni tuiles d'assistants (le panneau du départ, proposition C), ni demande guidée, ni assistant suggéré. */ .app .accueil-choix,.app .panneau-depart,.app .guide, .app .suggestion-assistant{display:none} /* La demande guidée (variante A, 01/10/2026) : sa pastille est « .guide », dans la barre du composeur ; son panneau et la version proposée partent avec elle, et le champ reste le champ. */ .app .guide-panneau,.app .guide-propose,.app .guide-version{display:none} .app #poser.en-version #question{display:block} /* Sous une réponse, aucun geste de production : ni diaporama, ni « Faire relire », ni « ⋯ » (Word, PDF, modèle, mémoire), ni suivi de relecture, ni charte d'un site ; sous un visuel, ni aperçu, ni affiche, ni relecture. */ .app .actes a.acte[href^="/diaporama"],.app .actes .relire-un-clic, .app .actes .puce-relecture,.app .actes .menu-reponse,.app .memoire-geste, .app .bloc>.suivi,.app .bloc>.charte-site,.app .livrable-gestes [data-vers], .app .livrable-gestes a[href^="/affiche"], .app .livrable-gestes a[href^="/relecture"], .app .livrable-gestes a[href^="/contenus"], .app .livrable-gestes .etat-relecture{display:none} /* Partager une discussion (30/09/2026) : un geste d'ordinateur aussi. */ .app .bouton-partager,.app .vol-menu a[data-partager]{display:none} /* Envoyer un courriel depuis une réponse (30/09/2026) : de même. La ligne « Courriel envoyé à… » reste : elle se lit, elle ne se fait pas. */ .app .actes .acte.courriel-geste,.app .lui>.courriel-geste, .app .lui>.courriel-brouillon,.app .popup-courriel{display:none} /* « Ma façon d'écrire » et sa boîte reliée (30/09/2026) : des réglages d'ordinateur ; ni au menu du compte, ni sous une réponse. */ .app .vol-menu a[href^="/compte/facon-d-ecrire"],.app .vol-menu .boite-m365, .app .lui>.style-avis{display:none} /* « Ce que je retiens de cette discussion » (30/09/2026) : un volet d'ordinateur. La mémoire, elle, tient sur téléphone aussi. */ .app .retenu{display:none} /* ⚠️ UNE PHRASE DISCRÈTE, PAS UN BANDEAU : l'écran reste utilisable. Son lien remplace celui de l'en-tête, qui le doublait mot pour mot. */ .app .pour-ordinateur{display:flex;flex-wrap:wrap;align-items:center; gap:0 8px;flex:none;margin:0;padding:6px 16px 0;font-size:13px; line-height:1.45;color:var(--n800);background:var(--surface); border-bottom:1px solid var(--n300)} .app .pour-ordinateur a{min-height:40px;display:inline-flex; align-items:center;font-weight:600} .app .tete:has(+.pour-ordinateur){justify-content:flex-start} .app .tete:has(+.pour-ordinateur) .retour-fil{display:none} } /* L'assistant a un signe, à gauche de ce qu'il dit — plus une étiquette en capitales au-dessus. Son nom reste, pour le lecteur d'écran. */ /* ⚠️⚠️ PROPOSITION B (02/10/2026), « plus de calme » : le texte prend le bord de la colonne et le signe passe dans la marge. La réponse est une rangée qui passe à la ligne : chaque morceau prend la ligne entière, sauf la source et le détail des étapes replié, qui partagent UNE ligne grise. */ .lui{position:relative;padding:16px 0 12px 0;display:flex;flex-direction:row; flex-wrap:wrap;gap:8px 14px} .lui>*{margin-top:0;margin-bottom:0;flex:0 0 100%} /* ⚠️ CE QUI GARDAIT SA LARGEUR DANS LA COLONNE LA GARDE DANS LA RANGÉE : le refus gris et, sans script, le lien du courriel (« align-self:flex-start » ne les retient plus). */ .lui>:is(.source,.etapes:not([open]),.courriel-geste,.refus-gris){flex:0 1 auto} .lui .lab{position:absolute;left:-40px;top:16px;margin:0;display:block} .lui .lab i{width:24px;height:24px;display:block; background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NCA0NCI+PHBhdGggZmlsbD0iI0UyMjcyQyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwLjIpIiBkPSJNMTkuNzY3NSAwLjkzNTY0MkMxOS4xMzc4IDEuMDAxMDUgMTguNzAxOCAxLjA1Mzk5IDE4LjI4MiAxLjExOTM5QzExLjQ2MTQgMi4xNzIwOCA1LjUxOTE1IDYuMzI2NzcgMi4zNzA0MyAxMi4yNDExQzEuMDM5ODkgMTQuNzM1OCAwLjMwMzU3IDE3LjE3NzYgMC4wMTkzNzY4IDIwLjA0MjlMMCAyMC4yNTE1TDAuNDE2NjAxIDIwLjQ1NEMyLjA1MDcxIDIxLjI0NSAzLjkxMDg4IDIxLjc0MDIgNS43NTgxMyAyMS44ODA0QzYuMDE5NzIgMjEuOTAyMiA2LjIyOTY0IDIxLjkyMDkgNi4yMjY0MSAyMS45MjcxQzYuMjE5OTUgMjEuOTMwMiA2LjAzNTg3IDIxLjk0ODkgNS44MTMwNCAyMS45Njc2QzMuOTM5OTUgMjIuMTE3MSAyLjIyODMzIDIyLjU2NTYgMC41NDU3NzkgMjMuMzQ3M0wwLjAwMzIyOTQ2IDIzLjU5NjVWMjMuNzM5N0MwLjAwMzIyOTQ2IDIzLjk0ODQgMC4xMTk0OSAyNC44NjQgMC4yMTYzNzQgMjUuNDA2QzAuNTEzNDg1IDI3LjEwMzMgMS4wMjM3NCAyOC43ODIgMS42ODU3OCAzMC4yNDI3TDEuODE0OTYgMzAuNTI2MUwyLjA5NTkyIDMwLjM5MjJDMi44MjU3OCAzMC4wNDM0IDMuNTc1MDIgMjkuODE2IDQuNDc2MDQgMjkuNjY5N0M0Ljc1NyAyOS42MjYxIDUuMDA1NjcgMjkuNjEzNiA1LjY3MDk0IDI5LjYxMzZDNi41NDYxMiAyOS42MTM2IDYuODMwMzIgMjkuNjQxNiA3LjQ5NTU5IDI5Ljc4OEM5LjUxMDc3IDMwLjIzNjUgMTEuMjkzNCAzMS40Mzg3IDEyLjQ2MjUgMzMuMTMyOUMxMi43NDY3IDMzLjU0NzIgMTMuMTM0MiAzNC4yODg0IDEzLjMwNTQgMzQuNzUyNUMxMy40Nzk4IDM1LjIyMjcgMTMuNjM4IDM1LjgyNjkgMTMuNzE1NSAzNi4zMDk3QzEzLjc5OTUgMzYuODMyOSAxMy43OTk1IDM4LjAyNTggMTMuNzE1NSAzOC41MzY1QzEzLjU3OTkgMzkuMzY4MSAxMy4yNzk2IDQwLjI4MzcgMTIuOTExNCA0MC45ODQ1TDEyLjgyNzQgNDEuMTQ2NEwxMy4yNTM3IDQxLjMxNzdDMTUuMzQgNDIuMTYxOCAxNy42MzkzIDQyLjcxMyAxOS43ODM3IDQyLjg4NDNMMjAuMDQ1MyA0Mi45MDNMMjAuMjkwNyA0Mi40MTA5QzIxLjExMSA0MC43Njk2IDIxLjYyMTMgMzguOTQ3NiAyMS43MjQ2IDM3LjI4NDVDMjEuNzU2OSAzNi43NjQ0IDIxLjc4OTIgMzYuNzIzOSAyMS44MTE4IDM3LjE2NjJDMjEuOTAyMiAzOC44NzkxIDIyLjQ2MDkgNDAuODY5MyAyMy4zMTAzIDQyLjUwNDNDMjMuNDI2NSA0Mi43Mjg2IDIzLjUyMzQgNDIuOTE1NSAyMy41MjY2IDQyLjkxODZDMjMuNTMzMSA0Mi45Mjc5IDI0LjQzNDEgNDIuODM0NSAyNC43ODk0IDQyLjc4NDZDMjguOTg0NCA0Mi4yMjA5IDMyLjgxNDYgNDAuNTQyMiAzNi4wNzYzIDM3LjgzODlDMzYuNTU3NSAzNy40MzcxIDM3LjU2NTEgMzYuNDc3OSAzOC4wMzk5IDM1Ljk2NzFDNDAuNDMyOSAzMy4zODIxIDQyLjExMjIgMzAuMzE0MyA0Mi45NzEyIDI2Ljk0NzZDNDMuMTkwOCAyNi4wOTExIDQzLjQyNjYgMjQuNzMwMSA0My40ODggMjMuOTc2NEM0My40OTc3IDIzLjgzOTQgNDMuNTEzOCAyMy42OTYxIDQzLjUyMzUgMjMuNjU4N0M0My41MzY0IDIzLjU5NjUgNDMuNDk0NCAyMy41Njg0IDQzLjE0ODkgMjMuNDAwMkM0MS40NDY5IDIyLjU3OCAzOS40Mjg1IDIyLjA0ODYgMzcuNjEwMyAyMS45NDg5QzM3LjQwNjkgMjEuOTM2NCAzNy4yNDIyIDIxLjkyMDkgMzcuMjUxOSAyMS45MTQ2QzM3LjI1ODMgMjEuOTA4NCAzNy40NDI0IDIxLjg4OTcgMzcuNjYyIDIxLjg3MUMzOS42MDYxIDIxLjcyNDcgNDEuNDE0NiAyMS4yNDgyIDQzLjA5NCAyMC40Mzg0QzQzLjQ2NTQgMjAuMjU3OCA0My41MzY0IDIwLjIxMSA0My41MzY0IDIwLjE1MTlDNDMuNTM2NCAxOS45NzEyIDQzLjM5NDMgMTguODk5OSA0My4yOTQyIDE4LjMzOTJDNDMuMDEgMTYuNzM4NCA0Mi41NDgyIDE1LjIwNjEgNDEuOTAyMyAxMy43MzNMNDEuNzE4MiAxMy4zMTI1TDQxLjQ3MjggMTMuNDMwOUMzOS45Mzg4IDE0LjE3MjEgMzguMDY4OSAxNC40MjEzIDM2LjM2NyAxNC4xMTZDMzUuMzE3NCAxMy45MjYxIDM0LjI4NzIgMTMuNTI0MyAzMy40MTUzIDEyLjk2MzdDMzIuODU5OCAxMi42MDU1IDMyLjYyMDggMTIuNDE4NyAzMi4xNTkgMTEuOTc2NEMzMC44MzQ5IDEwLjcxNSAzMC4wMzcyIDkuMTY0MDUgMjkuNzk1IDcuMzgyNThDMjkuNzQwMSA2Ljk2MjEyIDI5LjczMDQgNS45OTY2NCAyOS43Nzg5IDUuNTY5OTZDMjkuODgyMiA0LjY4NTQ1IDMwLjE1MzUgMy43NzkxNCAzMC41NjA0IDIuOTc1NjFMMzAuNzA1NyAyLjY5MjJMMzAuMjAxOSAyLjQ5Mjg3QzI4LjI0ODEgMS43MTExNSAyNi4zMzk1IDEuMjM0NjMgMjQuMjU2NSAxLjAwNzI4QzIzLjM5NDIgMC45MTM4NDIgMjMuNTIwMiAwLjg1Nzc4IDIzLjIyMzEgMS40NDk1M0MyMi40MTU3IDMuMDcyMTYgMjEuOTYwNCA0LjcwMTAzIDIxLjc5NTcgNi41NjY1OUwyMS43NTY5IDcuMDMzNzZMMjEuNzAyIDYuNDQyMDFDMjEuNTI0NCA0LjU4NTc5IDIxLjAzMDMgMi44ODIxOCAyMC4yMDY4IDEuMzAzMTVDMTkuOTk2OCAwLjkwNzYxIDIwLjAwMzMgMC45MTA3MjYgMTkuNzY3NSAwLjkzNTY0MlpNMjEuODAyMSA4Ljc2MjI4QzIyLjA1NzIgMTEuODMzMSAyMy4yNTg2IDE0LjYyMDYgMjUuMzQxNiAxNi45NzJDMjUuNzEzIDE3LjM5MjUgMjYuNTUyNyAxOC4xOTI5IDI2Ljk4NTQgMTguNTQ0OEMyOS4zMTcxIDIwLjQzODQgMzIuMjMzMyAyMS42MTU3IDM1LjE0OTUgMjEuODQ2MUMzNS44NjY0IDIxLjkwMjIgMzUuOTMxIDIxLjkyMDkgMzUuNDk4MyAyMS45NDU4QzMyLjY4ODYgMjIuMTE3MSAyOS43OTUgMjMuMTc5MSAyNy41MzQ0IDI0Ljg2NEMyNi41MjA0IDI1LjYyMDkgMjUuNTI1NyAyNi41OTI2IDI0Ljc1MDYgMjcuNTc2N0MyMy43MzY2IDI4Ljg2NjEgMjIuOTIyNyAzMC40MDE2IDIyLjQxNTcgMzEuOTgzN0MyMi4xMDU3IDMyLjkzOTggMjEuODYwMiAzNC4yMzg2IDIxLjgxMTggMzUuMTY5OEMyMS43ODkyIDM1LjYxODMgMjEuNzU2OSAzNS41ODcxIDIxLjcyNDYgMzUuMDg1N0MyMS42NjMyIDM0LjA5NTMgMjEuNDE0NiAzMi44NTU3IDIxLjA2OSAzMS44MjQ5QzE5LjQ4OTggMjcuMTA2NSAxNS41MDc5IDIzLjUxODYgMTAuNTQ3NCAyMi4zNDEzQzkuNzQzMjkgMjIuMTQ4MiA5LjA2NTExIDIyLjA0ODYgNy45MzE1NiAyMS45NDg5TDcuNjczMjEgMjEuOTI0TDguMTU3NjMgMjEuODgzNUMxMC4xNDcgMjEuNzE4NCAxMS44MDA1IDIxLjI3NjIgMTMuNTUwOCAyMC40Mzg0QzE4LjIxNDIgMTguMjE0NyAyMS4zMDggMTMuNzkyMSAyMS43MTE3IDguNzg3MkMyMS43MzExIDguNTE2MjQgMjEuNzUzNyA4LjI5ODIzIDIxLjc1NjkgOC4zMDQ0NkMyMS43NjAxIDguMzA3NTcgMjEuNzc5NSA4LjUxMzEzIDIxLjgwMjEgOC43NjIyOFoiLz48L3N2Zz4=") center/contain no-repeat} .lui .lab b{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .lui .produite{margin:0} /* ⚠️ SANS SCRIPT, LA RÉPONSE GARDE SES LIGNES. Le chat tient désormais sans script (« /poser ») : le texte brut, posé dans un seul paragraphe, fondait un tableau et une liste en une ligne illisible. Avec le script, la classe part et le rendu prend la main. */ .rendu.a-rendre,.rendu.a-rendre p{white-space:pre-wrap} /* La source, datée, sous la réponse : en petit et en gris, sans son icône (proposition B, 02/10/2026). ⚠️ « n700 » SUR LE FOND DU FIL : 4,9:1. */ .source{margin:0;display:flex;align-items:center;gap:8px;font-size:12.5px; color:var(--n700);line-height:1.4} .source svg{display:none} /* Les gestes d'une réponse : des boutons qui disent ce qu'ils font. */ .actes{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0 0 0 -10px} /* ⚠️ « .actes .acte », PAS « .acte » SEUL : l'ancienne règle « .actes button » (des icônes grises à 45 %) pèse plus lourd qu'une classe, et « Copier » restait un pictogramme pâle sans son mot. */ .actes .acte{min-height:44px;display:inline-flex;align-items:center;gap:6px; padding:0 10px;border:none;background:transparent;color:var(--n800); border-radius:10px;font:inherit;font-size:14px;font-weight:500;cursor:pointer; text-decoration:none;opacity:1} .actes .acte svg{flex:none;width:18px;height:18px} .actes .acte:hover{background:var(--n200);color:var(--encre);text-decoration:none; opacity:1} /* ⚠️⚠️ LES GESTES REPLIÉS EN ICÔNES (proposition B, 02/10/2026). Le libellé est caché à l'œil, pas au lecteur d'écran (les déclarations de « .cache ») ; le script pose « title », l'infobulle dit ce que fait le geste. Le geste mis en avant (« Vérifier et envoyer le courriel ») garde son mot. */ .actes .acte:not(.en-avant)>span,.noter .acte>span{position:absolute;width:1px; height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap;border:0} .actes .acte:not(.en-avant),.noter .acte{min-height:32px;width:32px;padding:0; justify-content:center} .actes .acte,.noter .acte{color:var(--n700)} .actes .icone-btn{width:32px;height:32px} /* ⚠️ EFFACÉS HORS SURVOL, sauf sur la DERNIÈRE réponse (« .derniere », posée par le script) : ils reparaissent au survol et AU CLAVIER (« :focus-within » : le geste qui reçoit le focus se voit, avec son contour). */ .lui .actes :is(.acte,.icone-btn,.puce-relecture):not(.en-avant){opacity:0; transition:opacity .15s} .lui:hover .actes :is(.acte,.icone-btn,.puce-relecture):not(.en-avant), .lui:focus-within .actes :is(.acte,.icone-btn,.puce-relecture):not(.en-avant), .lui.derniere .actes :is(.acte,.icone-btn,.puce-relecture):not(.en-avant){opacity:1} /* ⚠️ SUR UN ÉCRAN TACTILE, RIEN NE SE SURVOLE : les gestes restent visibles, et reprennent leurs 44 px, la cible d'un doigt (comme le « ⋯ » des lignes de la barre). */ @media (hover:none){ .lui .actes :is(.acte,.icone-btn,.puce-relecture):not(.en-avant){opacity:1} .actes .acte:not(.en-avant),.noter .acte{min-height:44px;width:44px} .actes .icone-btn{width:44px;height:44px} } .acte-forme{display:contents;margin:0} .menu-reponse>.icone-btn svg{width:20px;height:20px} .menu-reponse>.icone-btn[aria-expanded=true]{background:var(--n200)} .menu-reponse .vol-menu{width:280px} /* ⚠️ « hidden » PERD CONTRE « display:flex » : le menu fermé restait ouvert. */ .vol-menu[hidden]{display:none} .menu-reponse .vol-menu [role=menu]{display:flex;flex-direction:column} .menu-reponse .vol-menu a:focus-visible{background:var(--n100)} /* Ce que fait l'assistant, dans le fil, à la place de la réponse qui vient. La zone du composeur garde la phrase pour le lecteur d'écran seulement. */ .etat-fil{margin:0;display:flex;align-items:center;gap:10px;color:var(--n800); font-size:14px} .etat-fil .pouls{width:8px;height:8px} /* ⚠️ LE FIL DES ÉTAPES (30/09/2026), sous l'indicateur puis sous la réponse. Richard : « quand la tâche est trop longue il faut pouvoir voir le détail des actions pour rassurer l'utilisateur ». Replié par défaut ; l'état est ÉCRIT (En cours, Fait, Refusé), la teinte aide. Le libellé se coupe où il peut : jamais de défilement horizontal, à 375 px comme à 1280. ⚠️ PROPOSITION B (02/10/2026) : 12,5 px, en gris ; replié, le détail tient sur la ligne de la source, sans retrait. */ .etapes{margin:0;font-size:12.5px;color:var(--n800);min-width:0;max-width:100%} .etapes>summary{display:flex;align-items:center;gap:8px;min-height:22px; width:fit-content;max-width:100%;margin-left:-10px;padding:0 10px; border-radius:10px;cursor:pointer;list-style:none;overflow-wrap:anywhere; color:var(--n700)} .etapes-rangees:not([open])>summary{margin:0;padding:0} .etapes>summary::-webkit-details-marker{display:none} .etapes>summary::before{content:"";flex:none;width:0;height:0; border-left:6px solid currentColor;border-top:5px solid transparent; border-bottom:5px solid transparent} .etapes[open]>summary::before{transform:rotate(90deg)} .etapes>summary:hover{background:var(--n200);color:var(--encre)} .etapes-liste{list-style:none;margin:2px 0 6px;padding:0;display:flex; flex-direction:column;gap:6px} /* ⚠️ REPLIÉ, LE DÉTAIL NE PART PAS DANS UNE COPIE (30/09/2026). Richard a collé « Voir le détail des 3 étapes » suivi de « 1. 2. 3. » vides : les libellés sont bien dans la page (des nœuds de texte, aucun pseudo-élément), mais une liste repliée pouvait partir en squelette dans le presse-papiers. Déplié, tout part, libellés compris. */ .etapes:not([open])>.etapes-liste{display:none} .etape{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline;gap:2px 10px;line-height:1.45;min-width:0} .etape-n1{padding-left:18px} .etape-n2{padding-left:36px} .etape-n3{padding-left:54px} /* ⚠️ L'ÉTAT S'ÉCRIT, SANS PASTILLE (proposition B, 02/10/2026) : le mot et sa teinte, aligné à gauche dans sa colonne. */ .etape-etat{min-width:58px;text-align:left;padding:0;background:transparent; color:var(--n800);font-size:12px;font-weight:600} .etape-en_cours .etape-etat,.etape-attente .etape-etat{color:var(--action700)} .etape-refuse .etape-etat,.etape-echec .etape-etat{color:var(--rouge700)} .etape-libelle{min-width:0;color:var(--encre);overflow-wrap:anywhere} .etape-mesure{font-size:13px;color:var(--n800);white-space:nowrap; font-variant-numeric:tabular-nums} #etat{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ⚠️ UN SEUL BANDEAU ROUGE pour les erreurs ordinaires, qui dit quoi faire et porte le geste (maquette « Erreurs »). */ .bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px; padding:8px 8px 8px 14px;background:var(--rouge100); border:1px solid var(--rouge200);border-radius:var(--r2)} .bandeau>svg{flex:none;color:var(--rouge700);align-self:flex-start;margin-top:3px} .bandeau-texte{flex:1;min-width:min(240px,100%);margin:0;font-size:15px; line-height:1.5;color:var(--rouge700);padding:3px 0} .bandeau-gestes{display:flex;flex-wrap:wrap;gap:6px;flex:none} .bandeau-gestes form{margin:0} .bandeau .commandes{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px; padding:0 0 4px 30px} .puce-commande{min-height:44px;padding:0 14px;border:1px solid var(--n400); border-radius:999px;background:var(--blanc);color:var(--encre);font:inherit; font-size:14px;font-family:var(--mono);cursor:pointer} .puce-commande:hover{border-color:var(--n500)} /* ⚠️ UN REFUS DE DROITS N'EST PAS UNE ERREUR : gris, avec un cadenas. */ .refus-gris{align-self:flex-start;margin:0;display:flex;align-items:center;gap:10px; padding:12px 16px;background:var(--surface);border-radius:var(--r2); color:var(--encre);font-size:15px;line-height:1.5} .refus-gris svg{flex:none;color:var(--n800)} /* Le jour de la question, entre deux échanges (maquette « Reprise ») : dans la colonne du fil, de bord à bord (proposition B, 02/10/2026). */ .jour{max-width:688px;margin:24px auto 0;padding:0 28px;display:flex; align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--n800)} .jour::before,.jour::after{content:"";flex:1;height:1px;background:var(--n300)} /* ⚠️ UNE DEMANDE EN ATTENTE SURVIT AU RECHARGEMENT : la ligne, au-dessus du composeur, et « Répondre » (maquette « Reprise »). */ .attente{display:flex;align-items:center;justify-content:space-between;gap:12px; margin:0 0 10px;padding:8px 8px 8px 16px;background:var(--action100); border:1px solid var(--action200);border-radius:var(--r2)} .attente>svg{flex:none;color:var(--action700)} .attente-texte{flex:1;min-width:0;font-size:15px;color:var(--encre)} .attente .repondre{flex:none;white-space:nowrap} /* ⚠️ UNE MARQUE DE MANQUE SE LIT « À compléter : … », en pastille discrète, jamais en crochets (30/09/2026). Et la fenêtre qui pose ses questions, sous la réponse, dans la colonne du fil. */ .a-completer{display:inline-block;padding:0 8px;margin:0 1px;border-radius:999px; background:var(--action100);border:1px solid var(--action200);color:var(--encre); font-size:.9em;line-height:1.6;white-space:normal} .volet-manques{max-width:632px;margin:0 auto 18px;padding:16px 18px; background:var(--blanc);border:1px solid var(--action200);border-radius:var(--r2); box-sizing:border-box;width:calc(100% - 56px)} .volet-manques .manques-titre{display:flex;align-items:center;gap:8px;margin:0 0 4px; font-size:16px;color:var(--encre)} .volet-manques .manques-titre svg{flex:none;color:var(--action700)} .manques-aide{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--n800)} .manque{display:flex;flex-direction:column;gap:6px;margin:0 0 14px} .manque>label:first-child{font-weight:600;font-size:15px;color:var(--encre)} .manque-source{font-weight:400;color:var(--n800)} .manque input[type=text]{min-height:44px;padding:8px 12px;font:inherit; border:1px solid var(--n300);border-radius:var(--r2);box-sizing:border-box;width:100%} .manque .plus-tard{display:flex;align-items:center;gap:8px;font-size:14px; color:var(--n800);min-height:32px} .manques-pied{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} /* Le formulaire du modèle à garder, replié sous son bandeau quand le refus propose une version : « Modifier » l'ouvre. */ .garder-replie>summary{list-style:none;cursor:pointer} .garder-replie>summary::-webkit-details-marker{display:none} .garder-replie:not([open]){padding:0;border:none;box-shadow:none;background:none; margin:0} .garder-replie:not([open])>summary{position:absolute;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0)} .erreur-page{padding-top:8px} .erreur-page .bloc{padding:0} @media (max-width:767px){ /* Le fil prend toute la largeur (maquette « Téléphone — réponse ») : le signe de l'assistant se retire, son nom reste pour le lecteur d'écran. */ .lui{padding-left:0} .lui .lab i{display:none} .jour{padding:0 16px} .attente{flex-wrap:wrap} .volet-manques{width:calc(100% - 32px)} .manques-pied .bouton-plein,.manques-pied .bouton-doux{flex:1 1 auto} /* ⚠️ SUR TÉLÉPHONE, UN TABLEAU SE LIT EN LIGNES (maquette) : une carte par ligne, chaque valeur précédée du nom de sa colonne — posé par le script, en attribut, donc du texte. L'en-tête reste là pour le lecteur d'écran. */ .rendu .tableau{overflow:visible} .rendu table,.rendu tbody,.rendu tr,.rendu td{display:block;width:100%} .rendu table{min-width:0;border:none;font-size:14px} .rendu thead{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0)} .rendu tbody tr{background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r2);padding:10px 14px;margin:0 0 8px} .rendu td{border:none;padding:2px 0;display:flex;justify-content:space-between; align-items:baseline;gap:12px;text-align:right} .rendu td::before{content:attr(data-label);color:var(--n800);font-size:13px; text-align:left;flex:none} .rendu td:first-child{font-weight:600;text-align:left} .rendu td:first-child::before{content:none} } /* ── Ce que la plateforme apprend de vous (02/10/2026) ────────────────── Richard : « il faut activer un apprentissage automatique de l'usage des utilisateurs et de la manière de créer des prompts aussi ». La rangée « Pour vous » de l'accueil, la page du menu du compte, la ligne du geste faible dans la demande guidée, et les jauges des vraies demandes d'« Apprendre ». Sans script, tout se lit et tout se clique. */ /* « Pour vous » : au-dessus des tuiles, du même dessin, un peu plus long. */ .pour-vous{display:flex;flex-direction:column;gap:8px} .pour-vous-tete{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px} .pour-vous-tete h2{margin:0;font-size:14px;font-weight:600;color:var(--encre)} .pour-vous-tete p{margin:0;font-size:13px;color:var(--n700)} /* ⚠️ C (02/10/2026) : la même ligne nue que les suggestions du panneau. */ .pour-vous-liste{display:flex;flex-direction:column;gap:2px} .pour-vous-liste form{margin:0} .pour-vous-tache{min-height:40px;width:100%;display:flex;align-items:center; gap:12px;padding:8px 12px;background:transparent; border:0;border-radius:var(--r1);color:var(--n800); font:inherit;font-size:14.5px;line-height:1.4;text-align:left;cursor:pointer} .pour-vous-tache svg{color:var(--n600);flex:none} .pour-vous-tache:hover{background:var(--n200);box-shadow:none;color:var(--encre)} .pour-vous-texte{flex:1;min-width:0;overflow-wrap:anywhere} .pour-vous-rythme{flex:none;font-size:12.5px;color:var(--n700); white-space:nowrap} /* La page du menu du compte. */ .profil-page h2{margin:0 0 10px;font-size:17px} .profil-page h3{margin:18px 0 8px;font-size:14.5px;font-weight:600} .profil-page .carte-relecture{margin:0 0 16px} .profil-bascule{margin:0} .profil-bascule .interrupteur{font-size:14px} .profil-bascule .doux{margin:4px 0 0 40px} .profil-coupe{margin:10px 0 0;padding:10px 14px;border-radius:var(--r1); background:var(--n100);font-size:13.5px;color:var(--n800)} .profil-faits{display:grid;grid-template-columns:max-content 1fr; gap:6px 18px;margin:10px 0 0;font-size:14px} .profil-faits dt{font-weight:600;color:var(--n800)} .profil-faits dd{margin:0;overflow-wrap:anywhere} .profil-demandes{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:6px} .profil-demandes li{display:flex;align-items:baseline;justify-content: space-between;gap:4px 16px;flex-wrap:wrap;padding:8px 12px; border:1px solid var(--n300);border-radius:var(--r1);font-size:14px} .profil-demandes a{min-width:0;overflow-wrap:anywhere} .profil-quand{font-size:12.5px;color:var(--n700);white-space:nowrap} /* Les cinq sur UNE rangée : quatre et un orphelin se lisaient comme un classement (vu à la capture du 02/10/2026). */ .profil-gestes{list-style:none;margin:10px 0 0;padding:0;display:grid; grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} @media (max-width:760px){.profil-gestes{grid-template-columns:repeat(2,minmax(0,1fr))}} .profil-gestes li{display:flex;flex-direction:column;gap:6px;padding:12px; border:1px solid var(--n300);border-radius:var(--r1)} .profil-geste-nom{font-size:14px;font-weight:600} .profil-geste-n{font-size:13px;font-weight:600;color:var(--n800)} .profil-jauge,.jauge-demandes .jauge-traits{display:flex;gap:3px} .profil-jauge span{flex:1;height:6px;border-radius:999px;background:var(--n300)} .profil-jauge span.plein{background:var(--action)} .profil-faible{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0; padding:12px 14px;border-radius:var(--r1);background:var(--action100); font-size:14px;line-height:1.5} .profil-faible svg{flex:none;margin-top:2px;color:var(--action700)} .profil-semaines{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:4px;font-size:14px} .profil-semaines li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .profil-semaines li>span:first-child{min-width:150px;color:var(--n800)} .profil-tout-effacer summary{cursor:pointer;font-weight:600; color:var(--rouge700)} .profil-tout-effacer p{margin:10px 0 0;font-size:14px} .profil-geste{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px; margin:10px 0 0} .profil-confirme{display:flex;align-items:center;gap:8px;font-size:14px} .profil-prive{display:flex;align-items:flex-start;gap:8px;margin:4px 0 0; font-size:13px} .profil-prive svg{flex:none;margin-top:2px} /* La demande guidée : SON geste le plus faible, en tête du panneau. */ .guide-liste li.guide-habitude{padding:8px 10px;margin:0 -6px 2px; border-radius:var(--r1);background:var(--action100)} .guide-liste li.guide-habitude svg{color:var(--action700)} /* « Apprendre » : d'où vient chaque jauge, quand il y en a deux. */ .geste-carte .jauge-quoi{margin:4px 0 -4px;font-size:12px;color:var(--n700)} .geste-carte .jauge-demandes .jauge-traits span.plein{background:var(--action)} .apprendre .gestes-progression{margin:0;font-size:13.5px;color:var(--n800)} /* ── Une animation dans le fil (02/10/2026) ───────────────────────────── Elle se joue dans une iframe isolée, servie par sa propre route : la carte ne porte que son cadre, sa légende et « Modifier ». La hauteur suit le format, avec la place des deux rangs de boutons du lecteur : l'image ne se réduit pas pour les loger (mesuré à 1280 px). */ .carte-animation{margin:0;background:var(--blanc);border:1px solid var(--n300); border-radius:var(--r3);padding:12px;display:flex;flex-direction:column;gap:10px} .animation-cadre{display:block;width:100%;border:0;border-radius:10px; background:var(--encre)} .animation-cadre.format-16-9{aspect-ratio:16/11.4} .animation-cadre.format-9-16{width:min(100%,420px);height:min(86vh,860px); margin:0 auto} .animation-cadre.format-1-1{width:min(100%,600px);aspect-ratio:1/1.28;margin:0 auto} .animation-pied{display:flex;flex-direction:column;gap:8px} .animation-legende{margin:0;font-size:13px;color:var(--n800)} .animation-modifier{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px; margin:0;padding-top:10px;border-top:1px solid var(--n300)} .animation-modifier-champ{flex:1 1 320px;display:flex;flex-direction:column;gap:4px; font-size:13px;font-weight:600;color:var(--n800)} .animation-modifier-champ textarea{font:inherit;font-size:14px;font-weight:400; color:var(--encre);padding:8px 10px;border:1px solid var(--n400); border-radius:10px;resize:vertical;min-height:44px} .animation-modifier-note{flex-basis:100%;margin:0;font-size:12px} .carte-animation-autrui{margin:0} /* ⚠️ DANS LE FIL, LA CARTE S'EFFACE comme celle d'un visuel (proposition B, 02/10/2026) : le lecteur, sa légende et « Modifier », sans cadre ni filet. « :where(#thr) » ne pèse rien : la page de l'animation, dans « Mes contenus », garde sa carte. */ :where(#thr) .carte-animation{background:transparent;border:0;padding:0} :where(#thr) .animation-modifier{border-top:0;padding-top:0} .animation-lecteur{display:block;width:100%;max-width:600px;margin:0 auto;border-radius:10px;background:var(--lecteur-fond)} .animation-lecteur.format-16-9{max-width:100%} .animation-bloc{display:flex;flex-direction:column;gap:8px} /* ⚠️⚠️ LES QUESTIONS VIVANTES, SUR UN ÉCRAN (02/10/2026). Une fiche qui écrit ses questions en bloc les pose toutes à la fois : les obligatoires (cinq au plus), un choix en boutons, « Je supposerai : … Modifier » pour les défauts. Le même dessin dans le dialogue (« .pv-ecran ») et dans le formulaire sans script (« .questionnaire-sans-script ») : deux écrans, un seul produit. */ .pv-ecran{display:flex;flex-direction:column;gap:16px;margin:0 8px 0 0; max-height:min(60vh,560px);overflow:auto} .pv-ecran[hidden]{display:none} .pv-question{margin:0;padding:0;border:0;min-width:0;display:flex; flex-direction:column;gap:6px} .pv-question[hidden]{display:none} .pv-question>label,.pv-question>legend{padding:0;font-size:15px; line-height:1.5;color:var(--encre)} .pv-question>legend{margin:0 0 6px} .pv-question>label::first-letter,.pv-question>legend::first-letter{ text-transform:uppercase} .pv-ecran textarea,.questionnaire-sans-script .pv-question textarea{ width:calc(100% - 4px)} .pv-facultatif{font-size:13px;color:var(--n700)} .pv-choix{display:flex;flex-wrap:wrap;gap:8px} .pv-bouton{position:relative;display:inline-flex;align-items:center;gap:6px; min-height:40px;padding:0 14px;border:1px solid var(--n400); border-radius:999px;background:var(--blanc);color:var(--encre); font-size:14px;cursor:pointer} .pv-bouton:hover{border-color:var(--n600)} /* Le bouton radio reste dans la page (le clavier et l'envoi sans script en ont besoin), sous la pastille : c'est elle qu'on voit et qu'on touche. */ .pv-bouton input{position:absolute;inset:0;width:100%;height:100%;margin:0; opacity:0;cursor:pointer} .pv-bouton:has(input:checked){border-color:var(--action); background:var(--action100);color:var(--action700)} .pv-bouton:has(input:focus-visible){outline:2px solid var(--action); outline-offset:2px} .pv-bouton small{font-size:12px;color:var(--n700)} .pv-bouton:has(input:checked) small{color:var(--action700)} .pv-suppose{display:flex;flex-direction:column;gap:8px;padding:10px 12px; border:1px solid var(--n300);border-radius:var(--r1);background:var(--n100); font-size:14px;color:var(--n800)} .pv-suppose[hidden],.pv-suppose p[hidden],.pv-detail[hidden], .pv-suppose .bouton-doux[hidden]{display:none} .pv-suppose p{margin:0} .pv-suppose .bouton-doux{align-self:flex-start;min-height:36px;padding:0 12px; font-size:13px;font-weight:500} .pv-detail{display:flex;flex-direction:column;gap:14px;padding-top:4px} .pv-erreur{margin:0;font-size:13px;color:var(--rouge700)} .pv-erreur[hidden]{display:none} .pv-a-repondre textarea{border-color:var(--rouge300)} /* Sans script, « Modifier » est le résumé d'un « details » : un clic le déplie. */ .questionnaire-sans-script details.pv-suppose>summary{cursor:pointer; list-style:none} .questionnaire-sans-script details.pv-suppose>summary::-webkit-details-marker{ display:none} .pv-modifier{margin-left:4px;color:var(--action700);font-weight:500; text-decoration:underline} .questionnaire-sans-script details[open].pv-suppose .pv-modifier{display:none} /* ⚠️ « CE QUE J'AI SUPPOSÉ », EN TÊTE DE LA CARTE D'UN VISUEL (03/10/2026) : une ligne par valeur supposée, à part de la note de production. */ .lui .livrable-suppose{display:flex;flex-direction:column;gap:6px; padding:10px 12px;border:1px solid var(--n300);border-radius:var(--r1); background:var(--n100)} .lui .livrable-suppose[hidden]{display:none} .lui .livrable-suppose ul{margin:0;padding-left:18px;font-size:14px; line-height:1.5;color:var(--n800)} .lui .livrable-suppose-aide{margin:0;font-size:12px;color:var(--n700)} /* ── « Visuel créé » : l'offre servie, grisée (03/10/2026) ────────────── Richard : « ok pour griser « Créer le visuel » après usage ». Le bouton est désactivé (rendu tel quel par le serveur au rechargement, grisé par le script en direct) ; le serveur refuse de toute façon de le refaire. */ .offre.offre-faite,.offre.offre-faite:hover,.offre:disabled,.offre:disabled:hover{ background:var(--n100);color:var(--n600);border-color:var(--n300); cursor:default} /* ── La carte d'une écriture proposée (A-05) ─────────────────────────── Écrite par le produit, jamais par le modèle : l'accès, le dossier, les valeurs, « proposée après lecture de… ». Rien n'est écrit avant « Confirmer ». Aucun style en ligne : la politique du site les refuse. */ .carte-ecriture{border:1px solid var(--rouge300);background:var(--accent200); border-radius:12px;padding:14px 16px;margin:12px 0;max-width:640px} .carte-ecriture h2{margin:0 0 4px;font-size:16px} .carte-ecriture p{margin:6px 0;font-size:14px;line-height:1.5} .carte-ecriture ul{margin:6px 0 10px;padding-left:18px;font-size:14px} .carte-ecriture-sous,.carte-ecriture-lecture{color:var(--n600)} .carte-ecriture-nom{font-weight:600;white-space:pre-wrap} .carte-ecriture-valeur{overflow-wrap:anywhere;white-space:pre-wrap} .carte-ecriture-geste{display:inline-block;margin:8px 8px 0 0} /* (#191) La discussion a lu un contenu de tiers : la phrase se voit. */ .carte-ecriture-tiers{color:var(--rouge700);font-weight:600} /* ⚠️ « AVANT DE VALIDER » (C2, 03/10/2026) : le contrôle que le produit fait sur ce qui part en relecture, sans modèle. Sur l'écran « Faire relire » et sur la carte du relecteur. Un point « À vérifier » se voit (ambre), un point « Conforme » se tait presque (gris) ; aucun bouton n'est grisé. */ .avant-de-valider{margin:0 0 12px;padding:10px 12px;border:1px solid var(--n300); border-left:3px solid var(--ambre700);border-radius:var(--r1); background:var(--blanc)} .avant-de-valider.cav-tout-bon{border-left-color:var(--vert700)} .cav-titre{margin:0 0 6px;display:flex;align-items:center;gap:8px; font-size:14px;color:var(--encre)} .cav-titre svg{flex:none;color:var(--ambre700)} .cav-tout-bon .cav-titre svg{color:var(--vert700)} .cav-resume{margin-left:auto;font-size:13px;color:var(--n700)} .cav-liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column; gap:4px} .cav-point{display:flex;align-items:baseline;gap:10px;font-size:13.5px; line-height:1.45;color:var(--n800)} .cav-etat{flex:none;min-width:76px;padding:1px 8px;border-radius:999px; font-size:12px;font-weight:600;text-align:center} .cav-a-verifier .cav-etat{background:var(--ambre100);color:var(--ambre700)} .cav-a-verifier .cav-libelle{color:var(--encre)} .cav-conforme .cav-etat{background:var(--vert100);color:var(--vert700)} .cav-libelle{min-width:0;overflow-wrap:anywhere} /* ══════════════════════════════════════════════════════════════════════ LES BANDEAUX ÉCRITS PAR LE PRODUIT (A-09, #39) ══════════════════════════════════════════════════════════════════════ ⚠️ LA MENTION « VOUS PARLEZ À UNE IA » ET LE BANDEAU « ENVOIS COUPÉS » sont posés par « pages.page() » en tête de CHAQUE page. Visibles : jamais « display:none », jamais « .cache ». Aucun style en ligne (CSP) : tout est ici. ⚠️ LA PAGE NE DÉFILE PAS (voir « .app » : hauteur de l'écran). Pour que les bandeaux prennent leur place sans pousser le bas de la coquille hors de l'écran, le corps devient une colonne : les bandeaux gardent leur hauteur, la coquille prend le reste. */ body:has(>.bandeaux-du-produit){display:flex;flex-direction:column; height:100vh;height:100dvh;overflow:hidden} body:has(>.bandeaux-du-produit)>.app{flex:1 1 auto;min-height:0;height:auto} body:has(>.bandeaux-du-produit)>.seul, body:has(>.bandeaux-du-produit)>.concentre{flex:1 1 auto;min-height:0; overflow:auto} .bandeaux-du-produit{flex:none;display:flex;flex-direction:column} .mention-ia{margin:0;padding:1px 12px;font-size:12px;font-weight:500;line-height:1.3; text-align:center;color:var(--n800);background:var(--surface); border-bottom:1px solid var(--n300)} .bandeau-coupe{margin:0;padding:8px 12px;font-size:13.5px;font-weight:600; line-height:1.4;text-align:center;color:var(--rouge700); background:var(--rouge100);border-bottom:1px solid var(--rouge700)} /* A-27 (#95) : la marque des agents qui ne sont pas phares, dans la liste « / » et sur les pages des agents. Un mot en toutes lettres (« expérimental ») : la couleur ne porte rien seule. Aucun style en ligne (CSP) : tout est ici. */ .marque-experimental{display:inline-block;flex:none;margin:0;padding:0 6px; white-space:nowrap; font-size:12px;font-weight:600;line-height:1.5;color:var(--n800); background:var(--surface);border:1px solid var(--n700);border-radius:4px} /* ── Relevé de preuve (A-16, #92) : le panneau sous la réponse et sa page ── Chaque nombre du livrable est un lien vers sa ligne source ; un nombre sans clé n'est pas lié et se lit comme non prouvé. Aucun style en ligne. */ .preuve{margin:12px 0 0;padding:10px 12px;border:1px solid var(--n300); border-radius:var(--r2);background:var(--surface)} .preuve-titre{margin:0 0 4px;font-size:14px;color:var(--n800)} .preuve-resume{margin:0 0 6px;font-size:13px;color:var(--n700)} .preuve-nombres{margin:0 0 6px;padding:0;list-style:none;display:flex; flex-wrap:wrap;gap:6px} .preuve-nombres li{padding:3px 8px;border-radius:var(--r1);font-size:13px} .preuve-ok{background:var(--action100)} .preuve-ok a{color:var(--action700);font-weight:600} .preuve-non{background:var(--rouge100);color:var(--rouge700)} .preuve-gris{background:var(--n100);color:var(--n800);border:1px solid var(--n300)} .preuve-ligne{background:var(--n100);border:1px dashed var(--n300)} .preuve-qui{margin-left:6px;color:var(--n700);font-size:12px} .preuve-liens{margin:0;display:flex;flex-wrap:wrap;gap:12px;font-size:13px} .preuve-page h2{font-size:16px;margin:16px 0 6px} .preuve-chiffre{margin:0 0 10px;padding:8px 10px;border:1px solid var(--n200); border-radius:var(--r1)} .preuve-chiffre h3{margin:0 0 4px;font-size:14px} .preuve-sources{margin:4px 0 0;padding-left:18px} .preuve-lignes{width:100%;border-collapse:collapse;font-size:13px} .preuve-lignes th,.preuve-lignes td{padding:4px 6px;border-bottom:1px solid var(--n200); text-align:left;vertical-align:top} .preuve-lignes tr:target,.preuve-chiffre:target{outline:2px solid var(--action)} /* Bouton Arrêter : remplace l'envoi pendant qu'une réponse se prépare. Aucun style en ligne (CSP). */ .carte-composeur #arreter { grid-area: envoyer; } #envoyer[hidden], #arreter[hidden] { display: none; } .arreter { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--encre); border: 1px solid var(--n700); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; flex: none; } .arreter:hover { background: var(--n200); } .arreter:focus-visible { outline: 2px solid var(--n700); outline-offset: 2px; } .arreter:disabled { cursor: wait; color: var(--n700); } /* Composeur pleine largeur (09/10/2026, Richard : élargir la barre, qu'elle prenne toute la place dédiée au chat). Un libellé trop long se coupe (« … ») au lieu de passer sous la pastille voisine ; le nom entier reste dans le menu du modèle et pour le lecteur d'écran. */ #cadre-composeur { max-width: none; } .carte-composeur { grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) auto auto auto; } .carte-composeur .outils-g { min-width: 0; } .pastille-modele > summary { min-width: 0; } .pastille-pays { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Le nom du modèle garde sa place ; c'est le lieu, plus long, qui se coupe en premier. */ .pastille .pastille-nom { flex: 0 0 auto; } /* Les vues interactives de la bulle (13/10/2026) : la carte autour de l'iframe. ⚠️ QUE DES JETONS (var(--…)) : la carte se repeint seule en thème sombre. */ .carte-vue{margin:0;background:var(--blanc);border:1px solid var(--n300); border-radius:12px;padding:8px 10px 10px} .vue-entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:6px 12px;margin-bottom:8px} .vue-titre{font-weight:650;font-size:14px} .vue-gestes{display:flex;flex-wrap:wrap;gap:6px} .vue-cadre{display:block;width:100%;height:min(70vh,560px);min-height:320px; border:1px solid var(--n300);border-radius:10px;background:var(--fond)} .vue-proposition{margin-top:8px;padding:8px 10px;border:1px solid var(--n300); border-radius:10px;background:var(--surface)} .vue-proposition[hidden]{display:none} .vue-resume{margin:0 0 6px;font-size:14px} .vue-pied{margin:8px 0 0;font-size:12.5px} .carte-vue-autrui{margin:0} .carte-vue.plein-ecran{display:flex;flex-direction:column;border-radius:0; border:0;padding:12px 16px;height:100%} .carte-vue.plein-ecran .vue-cadre{flex:1;height:auto;min-height:0} :where(#thr) .carte-vue{max-width:100%} /* Les parcours d'accompagnement (14/10/2026) : « Je t'accompagne pour ». ⚠️ PAS DE REFONTE : les messages, puces, tuiles et boutons sont ceux du chat ; ces règles ne font que les ranger (cartes de choix, brouillon, barre d'étapes). */ .parcours{display:block} .parcours-etapes{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:16px 0 0; padding:0;font-size:13px;color:var(--n600)} /* (31/10/2026, test Chrome, tour 5) Une phase FAITE du menu des étapes ramène à sa première question : un lien, pas un bouton. */ .parcours-etapes form{display:inline;margin:0} .parcours-etape-retour{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer; text-decoration:underline;text-underline-offset:2px} .parcours-etapes li{display:inline-flex;align-items:center;gap:6px} .parcours-etapes li::before{content:"";width:8px;height:8px;border-radius:50%; border:1.5px solid var(--n500)} .parcours-etapes li.fait::before{background:var(--n500)} .parcours-etapes li.passee{color:var(--n500)} .parcours-etapes li.passee::before{border-style:dashed} .etape-passee{font-size:11px;font-style:italic} /* (16/10/2026) Collée en haut du fil pendant tout le parcours, sobre. */ .parcours-barre{position:sticky;top:0;z-index:5;background:var(--fond);padding-bottom:6px} .parcours-barre .parcours-etapes{margin:0;padding:8px 0} .parcours-etapes li.ici{color:var(--encre);font-weight:600} .parcours-etapes li.ici::before{background:var(--accent);border-color:var(--accent)} .parcours-geste{margin:10px 0 0} .parcours-cartes{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px} .parcours-depart{margin:0} .tuile.parcours-carte{min-height:56px;height:auto;flex-direction:column;align-items:flex-start; gap:2px;padding:10px 14px;text-align:left;border:1px solid var(--n300); border-radius:10px;background:var(--blanc)} .parcours-carte b{font-size:15px;color:var(--encre)} .parcours-carte span{font-size:13px;color:var(--n600)} .puce.forte>span{background:var(--encre);color:var(--fond);border-color:var(--encre)} .parcours-brouillon{white-space:pre-wrap;margin:10px 0 0;padding:14px 16px; border:1px solid var(--n300);border-radius:10px;background:var(--blanc); font-size:15px;line-height:1.6} .parcours-ajout{background:var(--accent200);color:inherit} .parcours-compteur,.parcours-provenance{margin:6px 0 0;font-size:13px;color:var(--n600)} .parcours-coach{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--accent); background:var(--n100)} .parcours-coach p{margin:0} .parcours-retouches{display:flex;flex-wrap:wrap;gap:6px} .parcours-retouches .bouton-doux[aria-pressed=true]{border-color:var(--encre)} .parcours-action{margin-top:12px} .parcours-action dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0} .parcours-action dt{color:var(--n600)} .parcours-action dd{margin:0} .parcours-fait b{color:var(--encre)} .parcours-case{display:flex;align-items:center;gap:8px;min-height:36px} .parcours-avis{margin:8px 0 0;color:var(--accent700)} .parcours-apercu{margin-top:10px;overflow-x:auto} .parcours-accueil{margin:22px auto 0;max-width:720px;width:100%} .parcours-accueil .parcours-cartes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .parcours-rubrique form{margin:0} .parcours-rubrique .lien-barre{width:100%;background:none;border:0;text-align:left;cursor:pointer; font:inherit;color:inherit} /* « Autre… » : un champ dans la carte, sans script (
) */ .parcours-autre{margin-top:8px} .parcours-autre>summary{display:inline-flex;list-style:none;cursor:pointer} .parcours-autre>summary::-webkit-details-marker{display:none} .parcours-autre[open]>summary{margin-bottom:8px} .parcours-autre-corps{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .parcours-autre-champ{flex:1 1 220px;min-height:40px;padding:8px 12px;font:inherit; color:var(--encre);background:var(--blanc);border:1px solid var(--n300);border-radius:10px} .parcours-autre-champ:focus{outline:2px solid var(--accent);outline-offset:1px} /* Une question sans option : le champ est là, visible (jamais « Autre… » seul) */ .parcours-libre{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .parcours-libre .parcours-autre-champ{flex:1 1 260px} /* « Ce que le CNA a déjà publié sur ce sujet » (15/10/2026) */ .parcours-passe{margin:12px 0 0;padding:10px 14px;border:1px solid var(--n300); border-radius:10px;background:var(--blanc)} .parcours-passe-t{margin:0 0 6px;font-weight:600;color:var(--encre)} .parcours-passe ul{margin:0;padding:0 0 0 18px} .parcours-passe li{margin:6px 0} .parcours-passe-meta{font-size:13px;color:var(--n600)} .parcours-passe-resume{display:block;margin-top:2px;font-size:13px;color:var(--n600)} /* (15/10/2026) L'attente se VOIT : rond + « Je prépare la suite… » (script), ou le texte du bouton cliqué (sans script : le bouton garde le focus tant que la page se recharge). */ #parcours-courant{scroll-margin-top:12px} .parcours-occupe button{pointer-events:none;opacity:.55} .parcours-patience{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:14px; color:var(--n600)} .parcours-rond{width:14px;height:14px;border-radius:50%;border:2px solid var(--n300); border-top-color:var(--accent);display:inline-block} @media (prefers-reduced-motion:no-preference){ .parcours-rond{animation:parcours-tourne .8s linear infinite} } @media (prefers-reduced-motion:reduce){ .parcours-rond{animation:none;border-top-color:var(--n300);background:var(--accent200)} } @keyframes parcours-tourne{to{transform:rotate(360deg)}} .parcours-attente::after{content:" · Je prépare la suite…"} .parcours-geste button:focus:not(:disabled)>span::after, .parcours-geste .tuile:focus::after{content:" · Je prépare…";font-weight:400} .parcours-geste .tuile:focus::after{display:block;font-size:13px;color:var(--n600)} /* (17/10/2026, soir) ⚠️ LE TEXTE DU FOCUS NE CHANGE PAS LA TAILLE DU BOUTON. Il l'élargissait à l'APPUI de la souris : la ligne de gestes passait à la ligne, le bouton se dérobait sous le curseur, le relâchement tombait ailleurs et le clic n'avait jamais lieu (« Oui, je pars là-dessus · Je prépare… » puis plus rien). Le texte est posé SOUS le bouton, hors du flux. */ .parcours-geste button{position:relative} .parcours-geste button:focus:not(:disabled)>span::after{position:absolute;left:8px;top:100%;margin-top:2px; font-size:12px;color:var(--n600);white-space:nowrap;pointer-events:none} /* (15/10/2026) « Modifier » : le texte devient une zone éditable, sans script (
) */ .parcours-modifier{margin:10px 0 0} .parcours-modifier>summary{display:inline-flex;list-style:none;cursor:pointer} .parcours-modifier>summary::-webkit-details-marker{display:none} .parcours-modifier[open]>summary{margin-bottom:8px} .parcours-edition{display:block;width:100%;min-height:140px;box-sizing:border-box;padding:12px 14px; font:inherit;font-size:15px;line-height:1.6;color:var(--encre);background:var(--blanc); border:1px solid var(--n300);border-radius:10px;resize:vertical} .parcours-edition:focus{outline:2px solid var(--accent);outline-offset:1px} .parcours-rendu:has(.parcours-modifier[open])>.parcours-brouillon, .parcours-rendu:has(.parcours-modifier[open])>.parcours-compteur{display:none} .parcours-fab-etapes{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13px} .parcours-fab-etapes li{padding:3px 10px;border-radius:999px;border:1px solid var(--n300)} .parcours-fab-etapes li.fait{background:var(--accent200);color:var(--encre)} .parcours-fab-etapes li.ici{border-color:var(--accent);color:var(--encre);font-weight:600} /* (17/10/2026) L'attente montre son compteur. */ .parcours-chrono{font-variant-numeric:tabular-nums;color:var(--n600)} .parcours-reflexion{color:var(--encre)} /* (17/10/2026) « Partir d'un compte rendu » : une LISTE DE CARTES, une par ticket, jamais un tableau. Rien n'y a de largeur fixe et rien n'y défile : le titre prend toute la largeur, la ligne « Assignés / Pour quand / Temps » passe à la ligne, couleurs sobres du thème (fond blanc, bordure légère). */ .carte-ecriture.parcours-cr{background:var(--blanc);border-color:var(--n300);min-width:0;max-width:100%; box-sizing:border-box} .cr-cartes{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px} .cr-carte{min-width:0;box-sizing:border-box;padding:12px 14px;background:var(--blanc); border:1px solid var(--n300);border-radius:10px} .cr-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;margin:0 0 6px} .cr-badge{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--n300); background:var(--n100);font-size:12px;color:var(--accent700)} .cr-retirer{margin-left:auto;padding:2px 4px;background:none;border:0;font:inherit;font-size:13px; color:var(--n600);text-decoration:underline;cursor:pointer} .cr-retirer:hover,.cr-retirer:focus-visible{color:var(--encre)} .cr-champ{display:block;min-width:0} .cr-etiquette{display:block;margin:0 0 2px;font-size:12px;color:var(--n600)} .cr-champ input,.cr-champ textarea{display:block;width:100%;min-width:0;box-sizing:border-box;padding:8px 10px; font:inherit;font-size:15px;color:var(--encre);background:var(--blanc);border:1px solid var(--n300); border-radius:8px} .cr-champ textarea{resize:vertical;line-height:1.45;field-sizing:content;overflow-wrap:anywhere} .cr-champ input:focus,.cr-champ textarea:focus{outline:2px solid var(--accent);outline-offset:1px} .cr-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px;margin:8px 0 0} .cr-personnes{list-style:none;margin:8px 0 0;padding:0;font-size:13px;color:var(--n600)} .cr-pers{margin:4px 0;overflow-wrap:anywhere} .cr-choix-liste{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0} .cr-externe{margin:6px 0 0} .cr-externe>summary{display:inline-flex;list-style:none;cursor:pointer} .cr-externe>summary::-webkit-details-marker{display:none} .cr-externe[open]>summary{margin-bottom:6px} .cr-discret{font-size:12px} .cr-defaut{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px; padding:0;border:0;white-space:nowrap} /* (17/10/2026) Les gestes d'UNE proposition à la suite, sur une ligne ; retour seulement si l'écran est trop étroit. « Modifier » ouvert prend toute la ligne (la zone d'édition). Les formulaires n'empilent plus leurs marges. */ .parcours-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:10px 0 0} .parcours-actions>.parcours-geste,.parcours-actions>.parcours-modifier{margin:0} .parcours-actions>.parcours-modifier[open]{flex:1 1 100%} .parcours-actions>.parcours-envoi{margin:0} .parcours-actions>.parcours-envoi[open]{flex:1 1 100%} .parcours-envoi>summary{display:inline-flex;list-style:none;cursor:pointer} .parcours-envoi>summary::-webkit-details-marker{display:none} .parcours-envoi[open]>summary{margin-bottom:8px} .parcours-destinataire{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px} .parcours-destinataire select,.parcours-destinataire input{min-width:12em;padding:8px 10px;border-radius:8px; border:1px solid currentColor;background:transparent;color:inherit;font:inherit} .parcours-envois{margin:10px 0 0;padding:10px 14px;border-left:3px solid var(--accent);border-radius:6px} .parcours-envois p{margin:4px 0} .parcours-envois .parcours-reponse-avis{white-space:pre-wrap} /* (17/10/2026) Un texte du modèle rendu en markdown : plus de retours à la ligne figés, les tableaux défilent. */ .parcours-brouillon.rendu{white-space:normal} .parcours-brouillon.rendu>:last-child{margin-bottom:0} .parcours-brouillon.rendu .tableau{overflow-x:auto} /* (18/10/2026) Plus aucun style en ligne : la CSP du chat les ignore. */ .parcours-visuel{max-width:100%;height:auto} .parcours-fab-barre{display:block;width:100%;max-width:360px;height:6px;margin:10px 0 4px;accent-color:var(--accent)} /* (18/10/2026) L'encart d'avis / de validation : DANS la carte de la proposition, sous ses gestes. Pastille d'état, nom, heure ; la réponse (commentaire + texte modifié) ; une ligne discrète une fois la proposition validée. */ .avis-encart{margin:12px 0 0;padding:10px 12px;border:1px solid var(--n300);border-radius:10px;background:var(--n100)} .avis-tete{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px} .avis-quand{color:var(--n600);font-size:13px} .avis-pastille{display:inline-block;padding:1px 10px;border-radius:999px;font-size:12.5px;font-weight:600; background:var(--ambre100);color:var(--ambre700)} .avis-repondu,.avis-valide{--pastille:1} .avis-encart.avis-repondu .avis-pastille,.avis-encart.avis-valide .avis-pastille,.avis-pastille.avis-repondu, .avis-pastille.avis-valide{background:var(--vert100);color:var(--vert700)} .avis-pastille.avis-reprendre{background:var(--rouge100);color:var(--rouge700)} .avis-encart p{margin:6px 0} .avis-reponse,.avis-mot{white-space:pre-wrap} .avis-texte{margin:8px 0 0} .avis-texte>summary{cursor:pointer;font-weight:600} .avis-texte-plein{white-space:pre-wrap;margin:6px 0;padding:8px 10px;border-left:3px solid var(--accent); border-radius:6px;background:var(--blanc)} .avis-plie{margin:8px 0 0;color:var(--n600);font-size:14px} .avis-plie>summary{cursor:pointer} .avis-repris{color:var(--vert700);font-weight:600} .avis-demandes textarea{width:100%;box-sizing:border-box;margin:4px 0 10px;font:inherit} .avis-historique{margin:14px 0 0} .avis-historique>summary{cursor:pointer;font-weight:600} .avis-histo-ligne{margin:10px 0;padding:10px 12px;border:1px solid var(--n300);border-radius:10px} .avis-histo-etat{margin:4px 0;color:var(--n600)} /* (26/10/2026) Richard : la couleur comprise est affichee (pastille 64 px, nom, code) avant validation. */ .parcours-pastille{display:flex;align-items:center;gap:16px;margin:12px 0} .parcours-pastille-carre{flex:none;width:64px;height:64px} .parcours-pastille-texte{display:flex;flex-direction:column;gap:2px;min-width:0} .parcours-pastille-texte b{font-size:15px;color:var(--encre)} .parcours-pastille-texte code{font-size:13px;color:var(--n600)} .parcours-palette{display:flex;flex-direction:column;gap:6px;margin-top:12px} .parcours-palette-libelle{font-size:14px;color:var(--n600)} .parcours-palette-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* (31/10/2026, tour 3) Cette règle s'applique enfin entière (la règle des champs de la coquille ne vise plus un champ couleur) : son fond suit le thème (« var(--blanc) », comme la charte), sinon un anneau blanc entourait la couleur en thème sombre. */ .parcours-palette-champ{width:56px;height:40px;padding:2px;border:1px solid var(--n300);border-radius:10px;background:var(--blanc);cursor:pointer} /* (31/10/2026, tour 3) Comme les deux autres champs couleur du produit (charte, groupes de tickets) : la couleur occupe le champ, sans la marge intérieure ni le liseré gris que le navigateur pose autour d'elle. */ .parcours-palette-champ::-webkit-color-swatch-wrapper{padding:0} .parcours-palette-champ::-webkit-color-swatch{border:0;border-radius:7px} .parcours-palette-champ::-moz-color-swatch{border:0;border-radius:7px} /* ── « Mon historique » : posts LinkedIn et webinaires passés ───────────── */ .liste.hist{max-width:860px} .hist-bloc{margin:0 0 22px;display:flex;flex-direction:column;gap:10px} .hist-bloc h2{margin:0;font-size:16px;font-weight:700} .hist-bloc h3{margin:6px 0 0;font-size:14px;font-weight:700} .hist-bloc textarea,.hist-bloc input:not([type=checkbox]):not([type=file]),.hist-bloc select{ width:100%;box-sizing:border-box;font:inherit;padding:8px 10px; border:1px solid var(--n400);border-radius:var(--r1);background:var(--blanc); color:var(--encre)} .hist-reco{margin:0;padding:12px 14px;border-left:3px solid var(--action); background:var(--n200);font-weight:600} .hist-lignes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .hist-ligne{border:1px solid var(--n300);border-radius:var(--r2);padding:12px 14px; background:var(--blanc);display:flex;flex-direction:column;gap:8px} .hist-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .hist-champ{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600} .hist-large{grid-column:1/-1} .hist-garder{display:flex;gap:8px;align-items:flex-start;font-size:14px} .hist-notes{margin:0;padding-left:18px;font-size:13px;color:var(--rouge600)} .hist-rangee{gap:10px;flex-wrap:wrap} .hist-rangee form{margin:0} .diapos-apercu{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:8px 0} .diapo-carte{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--bordure,#cfd6e4);border-radius:8px;aspect-ratio:16/9;overflow:hidden;background:var(--fond-carte,transparent)} .diapo-rang{font-size:.75rem;opacity:.6} .diapo-titre{font-size:.9rem;line-height:1.25} .diapo-ligne{font-size:.78rem;opacity:.85;line-height:1.25} .parcours-propositions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:8px 0} .parcours-proposition{margin:0;display:flex;flex-direction:column;gap:6px} .parcours-proposition figcaption{font-size:.8rem;opacity:.7} .parcours-proposition .parcours-visuel{max-width:100%;height:auto} .parcours-nombre{font-size:.85rem;margin-right:8px} /* (18/10/2026) Le formulaire du son : chaque étiquette pose son texte AU-DESSUS de son champ, pleine largeur. */ .parcours-form-son{display:flex;flex-direction:column;gap:12px} .parcours-form-son label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600} .parcours-form-son textarea,.parcours-form-son input[type=text]{width:100%;box-sizing:border-box} .parcours-form-son textarea{resize:vertical} /* (19/10/2026) Carte « Prêt à créer les tickets » et son résultat : une liste lisible, sans barres verticales. */ .tk-liste{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px} .tk-ticket{padding:10px 12px;border:1px solid var(--n300);border-radius:10px;background:var(--n100)} .tk-rang{display:block;font-size:12px;color:var(--n600);margin-bottom:2px} .tk-titre{display:block;font-weight:700;color:var(--encre);line-height:1.35} .tk-puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .tk-puce{display:inline-flex;gap:5px;align-items:baseline;padding:2px 9px;border-radius:999px; background:var(--mq-fond);border:1px solid var(--n300);font-size:13px} .tk-etiquette{color:var(--n600)} .tk-etiquette::after{content:" :"} .tk-nouveau{border-color:var(--accent);background:var(--accent200)} .tk-personnes .tk-rang{display:none} .parcours-liste{margin:8px 0;padding-left:22px} .parcours-liste li{margin:4px 0} /* (20/10/2026) Le compte rendu au-dessus des tickets : une douzaine de lignes visibles, le reste défile. */ .cr-source{margin:8px 0 12px;padding:8px 12px;border:1px solid var(--n300);border-radius:10px;background:var(--n100)} .cr-source>summary{cursor:pointer;font-weight:700;color:var(--encre)} .cr-source-texte{margin-top:6px;max-height:17.5em;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere; line-height:1.45;font-size:14px} .cr-noota{margin:8px 0 12px;padding:8px 12px;border:1px solid var(--n300);border-radius:10px;background:var(--n100)} .cr-noota-titre{font-weight:700;color:var(--encre);overflow-wrap:anywhere} .cr-groupe-info{margin:6px 0 10px} /* ── Refonte 20/10/2026 : connexion du chat et pages « Mon compte » ─────── */ /* ⚠️ CE FRAGMENT EST LU DEUX FOIS : par le chat (recollé dans la feuille servie) ET par « serveur/liaison.py », qui le reprend tel quel dans sa propre feuille. C'est ce qui rend la connexion du chat et celle de /compte IDENTIQUES : une seule source, pas deux copies qui divergent. Tout est préfixé par « #cx » (un identifiant pèse plus que les quatre « :not » de la règle générale des champs) et n'emploie aucune variable du chat, sauf la police et ses propres « --cx-* » (31/10/2026 : déclarés dans « chat/jetons_de_role.py » et le bloc sombre de 01-coquille.css ; « serveur/liaison.py » les reprend de là pour sa propre feuille). Aucun style en attribut, aucun script. */ #cx{box-sizing:border-box;min-height:100vh;display:flex;align-items:center; justify-content:center;padding:24px 16px;background:var(--cx-fond); color:var(--cx-texte);font:15px/1.55 var(--police)} /*SOMBRE*/ :root[data-theme="sombre"] #cx{color-scheme:dark} /*FIN-SOMBRE*/ #cx *{box-sizing:border-box} #cx h1,#cx h2,#cx p{margin:0;letter-spacing:0;text-transform:none} #cx a{color:var(--cx-accent)} #cx a:hover{color:var(--cx-accent-survol)} #cx form{display:flex;flex-direction:column;gap:18px;margin:0} #cx .cx-logo,#cx .cx-logo .logo-org{display:flex;align-items:center} #cx .cx-logo .logo-org{height:100%} #cx .cx-logo svg,#cx .cx-logo img{display:block;height:100%;width:auto;max-width:100%} #cx .cx-cache{position:absolute;left:-9999px} /* La connexion */ #cx .cx-bloc{width:420px;max-width:100%;display:flex;flex-direction:column;gap:28px} #cx .cx-tete{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center} #cx .cx-logo-grand{height:56px} #cx .cx-titres{display:flex;flex-direction:column;align-items:center;gap:6px} #cx .cx-titres h1{font-size:28px;font-weight:700;line-height:1.25} #cx .cx-titres p{font-size:15px;color:var(--cx-doux)} #cx .cx-champ{display:flex;flex-direction:column;gap:8px;font-size:14px; font-weight:600;color:var(--cx-texte)} #cx .cx-saisie{display:block;width:100%;height:48px;min-height:48px;margin:0; padding:0 14px;font:inherit;font-size:15px;font-weight:400;color:var(--cx-texte); background:var(--cx-fond);border:1px solid var(--cx-bord);border-radius:12px; box-shadow:none} #cx .cx-saisie:hover{border-color:var(--cx-bord)} #cx .cx-saisie:focus{background:var(--cx-fond);border-color:var(--cx-accent); outline:none;box-shadow:0 0 0 3px var(--cx-pale)} #cx .cx-en-erreur .cx-saisie{border-color:var(--cx-alerte-bord)} #cx .cx-alerte{padding:12px 14px;border-radius:10px;background:var(--cx-alerte-fond); color:var(--cx-alerte-texte);font-size:14px;line-height:1.5} #cx .cx-message{padding:12px 14px;border-radius:10px;background:var(--cx-pale); color:var(--cx-accent);font-size:14px;font-weight:600;line-height:1.5} #cx .cx-note{text-align:center;font-size:13px;color:var(--cx-tres-doux);line-height:1.5} #cx .cx-bloc>.cx-note{margin-top:-8px} /* Les boutons : plein (l'action qui avance), bordé, discret */ #cx .cx-plein,#cx .cx-bord,#cx .cx-discret,#cx a.cx-plein,#cx a.cx-discret{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:36px;margin:0;padding:0 14px;border-radius:10px;font:inherit; font-size:13px;white-space:nowrap;cursor:pointer;text-decoration:none; border:1px solid transparent;background:transparent;color:var(--cx-texte)} #cx .cx-plein,#cx a.cx-plein{background:var(--cx-accent);color:var(--cx-sur-accent); font-weight:600;padding:0 16px} #cx .cx-plein:hover,#cx a.cx-plein:hover{background:var(--cx-accent-survol); color:var(--cx-sur-accent)} #cx .cx-bord{border-color:var(--cx-bord);background:var(--cx-fond)} #cx .cx-bord:hover{border-color:var(--cx-doux)} #cx .cx-discret,#cx a.cx-discret{color:var(--cx-doux);padding:0 10px} #cx .cx-discret:hover,#cx a.cx-discret:hover{color:var(--cx-texte)} #cx .cx-large{width:100%;height:50px;border-radius:12px;font-size:16px;margin-top:4px} #cx .cx-grand{height:44px;border-radius:12px;font-size:15px;padding:0 18px} #cx a.cx-discret.cx-grand{padding:0 12px;font-size:14px} /* Mon compte */ #cx.cx-compte{align-items:flex-start;padding:48px 40px} #cx .cx-colonne{width:760px;max-width:100%;display:flex;flex-direction:column;gap:22px} #cx .cx-entete{display:flex;align-items:center;gap:14px} #cx .cx-logo-petit{height:36px;flex:none} #cx .cx-identite{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} #cx .cx-identite h1{font-size:24px;font-weight:700;line-height:1.25} #cx .cx-identite span{font-size:14px;color:var(--cx-doux);overflow-wrap:anywhere} #cx .cx-intro{font-size:15px;line-height:1.6} #cx .cx-section{display:flex;flex-direction:column;gap:10px} #cx .cx-section h2{font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--cx-doux)} #cx .cx-liste{display:flex;flex-direction:column;border:1px solid var(--cx-trait); border-radius:14px;overflow:hidden} #cx .cx-ligne{display:flex;align-items:center;gap:14px;min-height:64px; padding:0 18px;border-bottom:1px solid var(--cx-trait)} #cx .cx-ligne:last-child{border-bottom:none} #cx .cx-ligne form{flex-direction:row;gap:0} #cx .cx-nom{display:flex;align-items:center;gap:10px;flex:1;min-width:0; font-size:15px;font-weight:600;overflow-wrap:anywhere} #cx .cx-pastille{font-size:12px;font-weight:600;color:var(--cx-doux); background:var(--cx-neutre);border-radius:6px;padding:3px 8px;white-space:nowrap} #cx .cx-pastille.cx-ok{color:var(--cx-accent);background:var(--cx-pale)} #cx .cx-code{display:flex;flex-direction:column;gap:10px;padding:16px 18px; border-bottom:1px solid var(--cx-trait)} #cx .cx-code:last-child{border-bottom:none} #cx .cx-code-ligne{display:flex;align-items:center;gap:8px} #cx .cx-code-ligne form.cx-jeton{display:contents} #cx .cx-code-ligne .cx-saisie-code{order:1;flex:1;min-width:0;height:40px; min-height:40px;padding:0 12px;font-size:14px;border-radius:10px} #cx .cx-code-ligne form.cx-retrait{order:2;flex-direction:row;gap:0} #cx .cx-code-ligne .cx-valider{order:3} #cx .cx-info{display:flex;align-items:flex-start;gap:8px;font-size:13px; color:var(--cx-doux);line-height:1.5} #cx .cx-info svg{flex:none;width:16px;height:16px;margin-top:2px; color:var(--cx-accent)} /* Autoriser l'accès, et les refus : une carte seule sur un fond de panneau */ #cx.cx-seule{background:var(--cx-panneau)} #cx .cx-carte{width:400px;max-width:100%;display:flex;flex-direction:column; gap:18px;padding:28px;border:1px solid var(--cx-carte);border-radius:16px; background:var(--cx-fond)} #cx .cx-logo-carte{height:32px;align-self:flex-start} #cx .cx-carte h2{font-size:20px;font-weight:700;line-height:1.3; letter-spacing:0;text-transform:none;color:var(--cx-texte)} #cx .cx-carte p{font-size:15px;line-height:1.6} #cx .cx-carte p.cx-petit{font-size:13px;color:var(--cx-doux);line-height:1.5} #cx .cx-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* (26/10/2026) Un logiciel au nom long (« ElevenLabs (voix off et sons) ») : le bouton passe à la ligne au lieu de pousser « Annuler » hors de la carte. */ #cx .cx-actions .cx-grand{white-space:normal;height:auto;min-height:44px;text-align:center;max-width:100%} @media (max-width:640px){ #cx.cx-compte{padding:24px 16px} #cx .cx-ligne{flex-wrap:wrap;padding:12px 16px} #cx .cx-entete{flex-wrap:wrap} } /* LE CADRE DU CHAT, REFONTE DU 20/10/2026 : menu de gauche, en-tête, composeur, accueil (maquettes Main, Accueil ; la fenêtre « Nouvelle demande » a été retirée le 20/10/2026). ⚠️ AFFICHAGE SEULEMENT, ET DES JETONS SEULEMENT : aucune couleur écrite ici (la feuille de base porte « --cna… », clair dans « pages.py », sombre dans « 01-coquille.css »). Aucun attribut « style » : la politique de contenu le refuse en silence. Ce fragment passe APRÈS les autres : il repeint, il ne remplace rien. */ /* ── Le fond : blanc, comme les maquettes ───────────────────────────── */ main{background:var(--blanc)} /* ── Le menu de gauche : 260 px, fond très clair ───────────────────── */ :root{--largeur-cote:260px} .cote{flex:0 0 var(--largeur-cote);width:var(--largeur-cote);background:var(--n100); border-right:1px solid var(--n300)} .cote-haut{padding:20px 14px 0;gap:0} .cote-marque{justify-content:space-between;gap:8px;padding:4px 10px 18px} .cote-marque .icone-btn{width:36px;height:36px} .marque-cna{display:flex;align-items:center;gap:10px;min-width:0; color:inherit;text-decoration:none} .marque-cna:hover{color:inherit;text-decoration:none} .marque-cna .logo-org{min-height:0} .marque-nom{font-size:15px;font-weight:600;color:var(--n800);white-space:nowrap} .neuve{height:44px;min-height:44px;padding:0 14px;border-radius:10px; font-size:15px;font-weight:600;gap:10px} .neuve:hover{background:var(--n800);border-color:var(--n800);color:var(--blanc)} .neuve:focus-visible{outline:2px solid var(--cna);outline-offset:2px} .rech{margin-top:14px;min-height:42px;border-radius:10px; background:var(--blanc);border-color:var(--n300)} .rech:focus-within{border-color:var(--cna);box-shadow:none} #rech{font-size:14px} .cote-principal{display:flex;flex-direction:column;gap:2px;padding:22px 14px 0} .cote-principal .lien-barre{min-height:42px;height:42px;font-size:15px; font-weight:400;gap:10px;padding:0 14px;border-radius:10px} .cote-principal .lien-barre svg{color:inherit} .cote-principal .lien-barre:hover{background:var(--n300)} .cote-principal .lien-barre[aria-current=page], .travail[aria-current=page]{background:var(--cna-pale);color:var(--cna); font-weight:600;box-shadow:none} .pastille-alerte{margin-left:auto;min-width:22px;height:22px;padding:0 6px; border-radius:11px;background:var(--cna-alerte);color:var(--blanc); font-size:12px;font-weight:700;display:inline-flex;align-items:center; justify-content:center} .cote-principal .compte-suivi{margin-left:auto;font-size:12px;font-weight:700;color:var(--cna)} .pastille-alerte~.compte-suivi{margin-left:8px} .cote-encours{display:flex;flex-direction:column;gap:2px;padding:22px 14px 0} .cote-encours-t{margin:0 14px 6px;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--n700)} /* « En cours » : une ligne = un titre sur UNE ligne (points de suspension) et une sous-ligne grise ; le « ⋯ » a sa place réservée à droite, il ne couvre jamais le texte et ne paraît qu'au survol, au clavier ou menu ouvert. */ .cote-encours-liste{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:2px} .travail-item>.rang{display:flex;align-items:center;gap:0;border-radius:10px; background:transparent} .travail-item>.rang:hover{background:var(--n300)} .travail{display:flex;flex-direction:column;justify-content:center;gap:2px; flex:1 1 auto;min-width:0;min-height:52px;padding:8px 0 8px 14px; border-radius:10px;color:var(--encre);text-decoration:none} .travail:hover{color:var(--encre);text-decoration:none} .travail-t,.travail-e{display:block;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .travail-t{font-size:14px;line-height:1.3} .travail-e{font-size:12px;line-height:1.3;color:var(--n700)} .travail-item .menu{position:static;flex:0 0 28px;width:28px;margin-right:2px} .travail-item .menu>summary{width:28px;height:32px;opacity:0} .travail-item:hover .menu>summary,.travail-item:focus-within .menu>summary, .travail-item .menu[open]>summary,.travail-item.en-geste .menu>summary{opacity:1} @media (hover:none){.travail-item .menu>summary{opacity:1}} /* La ligne courante : fond accent pâle, comme la maquette. */ .travail-item:has(.travail[aria-current=page])>.rang, .travail-item.en-geste>.rang{background:var(--cna-pale)} .travail[aria-current=page]{color:var(--cna);font-weight:400} .travail[aria-current=page] .travail-t{color:var(--encre);font-weight:600} .travail[aria-current=page] .travail-e{color:var(--cna)} .cote-encours .rien{padding:8px 14px} .voir-travaux{padding:12px 14px 10px;font-size:13px;font-weight:600;color:var(--cna)} .voir-travaux:hover{color:var(--cna-fonce)} /* Le menu entier défile quand l'écran est bas ; la personne reste collée en bas. */ .cote{overflow-y:auto} .cote-encours{flex:1 1 auto} .compte{position:sticky;bottom:0;background:var(--n100);margin:0; padding:10px 14px 12px} .compte{border-top:1px solid var(--n300);margin:0 14px;padding:10px 0 12px} .avatar{background:var(--cna-pale);color:var(--cna)} .compte-nom{font-weight:400} /* La poignée du menu (« 32-largeur-menu.js » la crée) : fine, sur son bord droit, un filet accent au survol, au focus et pendant le tirage. Sans script, rien. */ .poignee-cote{position:fixed;top:0;bottom:0;left:calc(var(--largeur-cote) - 3px); width:7px;z-index:30;cursor:col-resize;touch-action:none;outline:none} .poignee-cote::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px; background:transparent} .poignee-cote:hover::after,.poignee-cote:focus-visible::after, .poignee-cote.tire::after{background:var(--cna)} .bascule:checked~.poignee-cote{display:none} body.cote-en-tirage{cursor:col-resize;user-select:none} @media (max-width:767px){.poignee-cote{display:none}} /* ── L'en-tête de page : titre, ⋯ dans un cadre ─────────────────────── */ .tete{min-height:72px;padding:10px 20px 10px 40px;background:var(--blanc); border-bottom:1px solid var(--n300)} .tete h1{font-size:18px;font-weight:600;letter-spacing:-.01em} .menu-tete>summary{width:40px;height:40px;border:1px solid var(--n300); border-radius:10px;background:var(--blanc);color:var(--n800)} .menu-tete>summary:hover{background:var(--n200)} /* ── La zone de saisie ─────────────────────────────────────────────── */ .carte-composeur{border-color:var(--n300);box-shadow:none;border-radius:16px; padding:10px 10px 8px 16px} .carte-composeur:focus-within{border-color:var(--n400);box-shadow:none} .envoyer.rond{width:40px;height:40px;border-radius:12px; background:var(--n300);color:var(--n600)} .envoyer.rond.vif{background:var(--cna);color:var(--blanc)} .envoyer.rond.vif:hover{background:var(--cna-fonce)} /* La mention de transparence, en entier, sous la zone de saisie. */ .mention-saisie{min-width:0;flex:1;line-height:1.4;text-align:left} /* ── L'accueil ─────────────────────────────────────────────────────── */ .accueil-haut{align-items:flex-start;text-align:left} .accueil h1{text-align:left} .accueil-sous{margin:0;font-size:16px;color:var(--n800)} @media (min-width:768px){ /* (20/10/2026) Le bloc est CENTRÉ dans la zone principale, un peu plus haut que le milieu (~40 % / 60 %) : pas collé en haut. */ .accueil{max-width:884px;height:100%;min-height:0;justify-content:safe center; padding:0 32px 14vh;--ecart:clamp(16px,4vh,32px)} .accueil::after{display:none} .accueil h1{font-size:32px} .accueil .cadre{max-width:720px;width:100%;align-self:center} } .tuiles-depart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .parcours-depart{display:contents;margin:0} .tuile-depart{display:flex;flex-direction:column;align-items:flex-start;gap:8px; padding:20px;border:1px solid var(--n300);border-radius:16px; background:var(--blanc);color:var(--encre);text-align:left;font:inherit; text-decoration:none;cursor:pointer;min-width:0} .tuile-depart:hover{border-color:var(--cna);text-decoration:none;color:var(--encre)} .tuile-depart:focus-visible{outline:2px solid var(--cna);outline-offset:2px} .tuile-depart svg{color:var(--cna);flex:none} .tuile-depart b{font-size:16px;font-weight:700} .tuile-depart span{font-size:13px;line-height:1.45;color:var(--n800)} /* La carte « À traiter » : sous les tuiles, à gauche, une demi-rangée au plus. */ .accueil-bas{display:block} .a-traiter{display:flex;flex-direction:column;gap:10px;min-width:0; width:calc(50% - 6px);max-width:100%} .accueil-bas .panneau-t{padding:0;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--n800)} .a-traiter-carte{display:flex;flex-direction:column;gap:6px;padding:16px 18px; border-radius:14px;background:var(--cna-alerte-fond);color:var(--encre); text-decoration:none;font-size:14px;line-height:1.45} .a-traiter-carte:hover{text-decoration:none;color:var(--encre)} .a-traiter-n{font-size:28px;font-weight:700;color:var(--cna-alerte-texte)} .a-traiter-voir{font-size:13px;font-weight:600;color:var(--cna)} /* Étroit : tout passe en une colonne (le téléphone n'est pas une cible). */ @media (max-width:900px){ .tuiles-depart{grid-template-columns:minmax(0,1fr)} .a-traiter{width:100%} } /* Le pied est posé sous la carte sans pousser rien (les panneaux restent ancrés à elle). */ .composeur{padding-bottom:16px} /* Le composeur du fil suit la colonne des messages (720 px, maquette Main). */ .composeur #cadre-composeur{max-width:720px} /* Téléphone : « chat simple » (30/09/2026). Les tuiles et les travaux à reprendre se retrouvent par le menu. */ @media (max-width:767px){ .tuiles-depart,.accueil-bas{display:none} .composeur{padding-bottom:16px} } /* La place du pied (posé sous la carte) sur l'accueil. */ .accueil .cadre{margin-bottom:20px} /* ── La mention de transparence, AU MÊME ENDROIT PARTOUT (20/10/2026) ── Une ligne discrète fixée en bas de la zone principale, sur toutes les pages : sous la zone de saisie quand la page en a une, en bas de page sinon. (31/10/2026) Le coût de la discussion n'est plus montré sous la carte de saisie. */ .bandeaux-du-produit .mention-ia{position:fixed;left:0;right:0;bottom:0;z-index:5; padding:3px 16px 6px;font-size:12px;font-weight:400;line-height:1.3;color:var(--n700); background:transparent;border:0;text-align:center;pointer-events:none} body:has(.cote) .bandeaux-du-produit .mention-ia{left:var(--largeur-cote)} body:has(.cote) main{padding-bottom:22px} /* L'accueil est centré et n'a pas de zone de saisie collée en bas : il garde toute la hauteur. */ body:has(.accueil) main{padding-bottom:0} /* ── Barres de défilement sobres PARTOUT (20/10/2026) ────────────────── Richard : « le scroll est trop lourd ». Fines, claires, sans flèches ; celle du menu de gauche ne se montre qu'au survol. */ *{scrollbar-width:thin;scrollbar-color:var(--n300) transparent} *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-button{display:none;width:0;height:0} *::-webkit-scrollbar-thumb{background:var(--n300);border-radius:999px; border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:var(--n400);background-clip:padding-box} .cote:not(:hover):not(:focus-within){scrollbar-color:transparent transparent} .cote:not(:hover):not(:focus-within)::-webkit-scrollbar-thumb{background:transparent} /* ── « En cours » se plie et se déplie (20/10/2026) ─────────────────── */ details.cote-encours>summary{list-style:none;cursor:pointer;display:flex; align-items:center;justify-content:space-between;border-radius:8px} details.cote-encours>summary::-webkit-details-marker{display:none} details.cote-encours>summary:hover{color:var(--encre)} details.cote-encours>summary svg{transition:transform .15s ease} details.cote-encours:not([open])>summary svg{transform:rotate(-90deg)} @media (prefers-reduced-motion:reduce){details.cote-encours>summary svg{transition:none}} /* Au survol (ou au clavier), le titre complet d'une discussion, sans « … » (20/10/2026). */ .travail:hover .travail-t,.travail:focus-visible .travail-t{white-space:normal;overflow:visible; text-overflow:clip;overflow-wrap:anywhere} /* (22/10/2026) Richard : « réduire la taille des tuiles sur la première page pour avoir 4 tuiles par ligne », puis « corrige aussi la mise en page ». Quatre tuiles compactes par ligne, de même hauteur ; la dernière ligne incomplète (sept parcours : 4 + 3) est CENTRÉE au lieu de laisser un trou à droite. Entre 768 et 900 px, deux par ligne plutôt qu'une seule. */ .tuiles-depart,.tuiles-depart.sans-autre{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .tuiles-depart .tuile-depart{flex:0 0 calc((100% - 30px) / 4);padding:14px 14px 15px;gap:6px;border-radius:14px} .tuiles-depart .tuile-depart svg{width:22px;height:22px} .tuiles-depart .tuile-depart b{font-size:14px;line-height:1.3} .tuiles-depart .tuile-depart span{font-size:12px;line-height:1.4} @media (max-width:900px){ .tuiles-depart .tuile-depart{flex-basis:calc((100% - 10px) / 2)} } /* Refonte de la conversation (20/10/2026) : messages, gestes sous une réponse, brouillon, visuel, choix, suites. AFFICHAGE SEULEMENT. Couleurs de la maquette posées en variables locales ; le thème sombre les redéfinit. */ /* ── Messages ─────────────────────────────────────────────────────────── */ .moi p{background:var(--rc-bulle);border-radius:14px;padding:10px 16px} .heure-moi{display:block;text-align:right;padding:4px 4px 0;font-size:11.5px;color:var(--rc-tres-doux)} .heure-moi::before{content:"Vous \00b7 "} .lui .lab i{width:28px;height:28px;border-radius:50%;border:1px solid var(--rc-trait2); background-color:var(--rc-fond);background-size:16px;background-position:center;background-repeat:no-repeat} .lui .lab .heure{position:absolute;left:40px;top:6px;margin:0;font-size:11.5px;color:var(--rc-tres-doux)} .lui .lab .heure::before{content:"Assistant \00b7 "} .lui>.lab:has(.heure)+*{margin-top:26px} /* ── « Je peux aussi : … » : des liens texte ──────────────────────────── */ .offres{margin:2px 0 0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 14px} .offres p{font-size:13.5px;color:var(--rc-doux)} .offres-gestes{gap:2px 16px;align-items:center} .offre{min-height:32px;padding:0;background:transparent;border:none;color:var(--rc-accent); font-size:13.5px;font-weight:600} .offre:hover{background:transparent;color:var(--rc-accent-survol);text-decoration:underline} .offre svg{display:none} .offre.offre-faite,.offre:disabled{color:var(--rc-tres-doux);font-weight:500;text-decoration:none} /* ── UNE rangée de gestes sous une réponse libre ──────────────────────── */ .actes{margin:6px 0 0;gap:6px 8px} .lui.derniere .actes .acte.acte-bord:not(.en-avant){width:auto;min-height:34px;padding:0 14px;border:1px solid var(--rc-trait3); background:var(--rc-fond);color:var(--rc-texte);font-size:13px;font-weight:600} .lui.derniere .actes .acte.acte-bord:not(.en-avant)>span,.lui.derniere .actes .acte.acte-texte>span{position:static;width:auto;height:auto; margin:0;overflow:visible;clip:auto;white-space:nowrap} .lui.derniere .actes .acte.acte-bord:not(.en-avant):hover{background:var(--rc-pale2);border-color:var(--rc-accent)} .lui.derniere .actes .acte.acte-texte{width:auto;min-height:34px;padding:0 8px;color:var(--rc-doux);font-size:13px;font-weight:500} .lui.derniere .actes .acte.acte-texte:hover{background:transparent;color:var(--rc-texte);text-decoration:underline} .actes .acte.courriel-geste.en-avant{box-shadow:none;color:var(--rc-doux);font-weight:500} .actes .relire-un-clic,.actes .puce-relecture{order:1} .actes .acte-texte{order:2} .actes .acte-copie{order:4;margin-left:auto} .actes .noter>*{order:5} .actes .menu-reponse{order:6} .actes .icone-btn{color:var(--rc-doux)} /* ── Boutons bordés (summary de Faire valider / Demander un avis) ─────── */ .parcours-envoi>summary.bouton-bord{min-height:34px;padding:0 14px;gap:6px;border:1px solid var(--rc-trait3); background:var(--rc-fond);color:var(--rc-texte);font-size:13px;font-weight:600;border-radius:10px} .parcours-envoi>summary.bouton-bord:hover{background:var(--rc-pale2);border-color:var(--rc-accent)} .parcours-envoi>summary.bouton-bord svg{flex:none;color:var(--rc-accent)} .parcours-actions{gap:8px;margin:12px 0 0} .parcours-decision-finale{margin-left:auto} .parcours-actions .puce>span,.parcours-decisions .puce>span{height:34px;border-radius:10px} .puce.forte>span{background:var(--rc-accent);border-color:var(--rc-accent);color:var(--mq-fond)} :root[data-theme="sombre"] .puce.forte>span{color:var(--fond)} .puce.forte:hover>span{background:var(--rc-accent-survol);border-color:var(--rc-accent-survol)} /* ── Brouillon : l'encadré et son pied ────────────────────────────────── */ .brouillon-cadre{margin:10px 0 0;border:1px solid var(--rc-trait2);border-radius:12px;background:var(--rc-fond); overflow:hidden} .brouillon-cadre .parcours-brouillon{margin:0;border:0;border-radius:0;padding:16px 18px} .brouillon-pied{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 10px; background:var(--rc-pied);border-top:1px solid var(--rc-trait)} .brouillon-pied .parcours-compteur{margin:0 8px 0 0;font-size:12px;color:var(--rc-tres-doux)} .pied-retouches,.pied-retouches .parcours-retouches{display:contents;margin:0} .brouillon-pied .bouton-doux{min-height:30px;padding:0 8px;border:none;background:transparent; color:var(--rc-doux);font-size:12.5px;font-weight:500} .brouillon-pied .bouton-doux:hover{background:transparent;color:var(--rc-texte);text-decoration:underline} .brouillon-pied .parcours-retouches .bouton-doux[aria-pressed=true]{color:var(--rc-accent);font-weight:600} .brouillon-pied .pied-icone{margin-left:auto;padding:0 6px} .brouillon-pied .pied-icone svg{width:15px;height:15px} .brouillon-pied .parcours-modifier{margin:0 0 0 auto} .brouillon-pied .pied-copier{gap:5px} .brouillon-pied .pied-copier svg{width:14px;height:14px} .bouton-doux[data-copier-post][hidden]{display:none} .brouillon-pied .note:empty,.apercu-pied .note:empty{display:none} .apercu-pied{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 0} .apercu-pied .bouton-doux{min-height:30px;padding:0 8px;gap:5px;border:none;background:transparent; color:var(--rc-doux);font-size:12.5px;font-weight:500} .apercu-pied .bouton-doux:hover{background:transparent;color:var(--rc-texte);text-decoration:underline} .brouillon-pied .pied-icone~.parcours-modifier{margin-left:0} .brouillon-pied .parcours-modifier>summary{min-height:30px;padding:0 8px;border:none;background:transparent; color:var(--rc-texte);font-size:12.5px;font-weight:600} .brouillon-pied .parcours-modifier[open]{flex:1 1 100%;order:9;margin:6px 0 0} .brouillon-cadre:has(.parcours-modifier[open])>.parcours-brouillon{display:none} /* ── « Mon regard » : une simple ligne ───────────────────────────────── */ .parcours-coach{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:10px 0 0;padding:0; border:0;background:transparent;color:var(--rc-doux);font-size:13px} .parcours-coach>svg{flex:none;color:var(--rc-accent)} .parcours-coach p{font-size:13px;line-height:1.5;color:var(--rc-doux)} .parcours-coach .parcours-geste{margin:0} .parcours-coach .bouton-doux{min-height:28px;padding:0;border:none;background:transparent; color:var(--rc-accent);font-size:13px;font-weight:600} .parcours-coach .bouton-doux:hover{background:transparent;text-decoration:underline} /* ── Visuel fabriqué : outils dans le pied du cadre, décisions dessous ── */ .visuel-pied{margin:0;padding:6px 10px;border:1px solid var(--rc-trait2);border-top:0; border-radius:0 0 12px 12px;background:var(--rc-pied)} .visuel-outils{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px} .visuel-outils .bouton-doux{min-height:30px;padding:0 8px;gap:6px;border:none;background:transparent; color:var(--rc-doux);font-size:12.5px;font-weight:500} .visuel-outils .bouton-doux:hover{background:transparent;color:var(--rc-texte);text-decoration:underline} .visuel-outils .visuel-telecharger{margin-left:auto} .visuel-outils svg{flex:none} .parcours-decisions{margin:10px 0 0} .parcours-decisions .puces{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .parcours-decisions .puce:not(.forte)>span{border-color:transparent;background:transparent;color:var(--rc-doux); font-size:13px;font-weight:500} .parcours-decisions .puce.forte{margin-left:auto} /* ── Question à choix : des cartes ────────────────────────────────────── */ .parcours-cartes{gap:10px} .tuile.parcours-carte{position:relative;min-height:52px;justify-content:center;padding:12px 16px; border:1px solid var(--rc-trait2);border-radius:12px;background:var(--rc-fond);flex-direction:column} .tuile.parcours-carte:hover{border-color:var(--rc-accent)} .tuile.parcours-carte.conseillee{border:1.5px solid var(--rc-accent);background:var(--rc-pale2)} .etiquette-conseille{display:inline-block;align-self:flex-start;margin:0 0 4px;padding:1px 7px; border:1px solid var(--rc-accent);border-radius:5px;color:var(--rc-accent);font-size:11px;font-style:normal; font-weight:600;line-height:1.5} .parcours-autre>summary.puce{display:flex;width:100%;list-style:none} .parcours-autre>summary.puce>span{width:100%;box-sizing:border-box;height:auto;min-height:48px;padding:12px 16px; border:1px dashed var(--rc-trait3);border-radius:12px;background:transparent;color:var(--rc-doux); font-size:15px;font-weight:400} .parcours-autre>summary::-webkit-details-marker{display:none} /* ── Fin de parcours : la première suite pleine, les autres bordées ──── */ .parcours-suites{gap:10px;align-items:center} .parcours-suites .parcours-geste{margin:0} .parcours-suites .puce:not(.forte)>span{border-radius:10px;border-color:var(--rc-trait3);height:36px; font-size:13.5px;font-weight:600} .parcours-suites .puce.forte>span{height:38px;border-radius:10px;font-weight:600} .parcours-suites .bouton-doux{min-height:36px;padding:0 10px;border:none;background:transparent; color:var(--rc-doux);font-size:13px;font-weight:500} .parcours-suites .bouton-doux:hover{background:transparent;color:var(--rc-texte);text-decoration:underline} /* (20/10/2026) Relancer / Copier sous son dernier message, Copier sous une réponse. Discrets, au survol. */ .gestes-message{display:flex;gap:4px;margin-top:6px;opacity:.6;transition:opacity .15s} .moi .gestes-message{justify-content:flex-end} .bloc:hover .gestes-message,.gestes-message:focus-within{opacity:1} .geste-message{width:30px;height:30px;padding:0;border-radius:8px;border:0;display:inline-flex; align-items:center;justify-content:center;background:transparent;color:var(--rc-doux);cursor:pointer} .geste-message:hover{color:var(--rc-texte);background:var(--rc-pied)} .geste-message:focus-visible{outline:2px solid var(--rc-accent);outline-offset:1px} @media (prefers-reduced-motion:reduce){.gestes-message{transition:none}} .lui .gestes-message{opacity:0} .lui:hover .gestes-message,.lui .gestes-message:focus-within{opacity:1} .heure-moi .gestes-moi{display:inline-flex;vertical-align:middle;margin:0 0 0 6px} /* Au survol seulement, partout (ses messages comme les réponses), et toujours au clavier. */ .gestes-message{opacity:0} .bloc:hover .gestes-message,.lui:hover .gestes-message,.gestes-message:focus-within{opacity:1} @media (hover:none){.gestes-message{opacity:1}} /* (20/10/2026) Le message d'un geste refusé se lit DANS la colonne du fil, au-dessus de la saisie, pas collé au bord gauche de la page. */ .parcours-avis{box-sizing:border-box;max-width:720px;margin:10px auto 0;padding:10px 14px; border-radius:10px;background:var(--cna-alerte-fond);color:var(--cna-alerte-texte);font-size:14px;line-height:1.5} /* ── Refonte des écrans secondaires (20/10/2026) : Bibliothèque, À traiter, tickets ── Affichage seulement. Que des jetons du thème : ils suivent le thème sombre. */ /* ── Bibliothèque : le même en-tête d'onglets sur ses quatre écrans ──────── */ .onglets-biblio{display:flex;flex-wrap:wrap;gap:4px;margin:0 32px;padding:0; border-bottom:1px solid var(--n300)} .onglet-biblio{min-height:44px;display:inline-flex;align-items:center;gap:6px; padding:0 16px;margin-bottom:-1px;border-bottom:2px solid transparent; color:var(--n800);font-size:15px;font-weight:500;text-decoration:none} .onglet-biblio:hover{color:var(--encre);text-decoration:none} .onglet-biblio[aria-current=page]{color:var(--encre);font-weight:600; border-bottom-color:var(--encre)} .onglet-compte{font-weight:400;color:var(--n600)} /* ── Mes contenus : une grille de cartes (vignette, type, titre, méta) ───── */ .contenus-page{max-width:1100px} .contenus-filtres{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px} .contenus-rech{flex:1 1 260px;min-height:44px;border-radius:12px; border-color:var(--n300)} .contenus-filtres .puces{flex:1 1 100%;order:2;gap:0 8px} .contenus-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px} .contenu{position:relative;flex-direction:column;align-items:stretch;gap:10px; padding:0 0 10px;border-radius:14px;border-color:var(--n300);overflow:visible} .contenu-signe{order:0;width:100%;height:132px;border-radius:14px 14px 0 0; background:var(--n100);color:var(--n600)} .contenu-vignette{width:100%;height:132px;object-fit:cover} .contenu-texte{order:1;padding:0 14px;gap:2px} .contenu-titre{white-space:normal;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;line-height:1.3} .contenu-gestes{order:2;padding:0 8px 0 10px;justify-content:space-between} /* ── À traiter (relectures, suivi) : cartes aux rayons validés ───────────── */ .liste.relectures{max-width:1000px} .liste.relectures .onglets{margin-bottom:16px} .liste.relectures .carte-relecture, .liste.relectures .carte-envoyee, .liste.relectures .suivi-ligne{border-radius:14px} .liste.relectures .carte-etat{font-size:14px} .liste.relectures .bouton-plein{border-radius:10px} /* ── Tickets depuis un compte rendu : un tableau qui se corrige sur place ── */ .parcours-cr .cr-source{margin:0 0 12px;border-radius:12px} .parcours-cr .cr-source>summary{font-weight:600} .parcours-cr>h3{font-size:20px;margin:6px 0 2px} .parcours-cr .cr-groupe-info{margin:0 0 10px;font-size:13px} .cr-tableau{container-type:inline-size;margin-top:10px} .cr-entete{display:none} .cr-cartes{margin-top:0;gap:0;border:1px solid var(--n300); border-radius:12px;overflow:hidden} .cr-carte{border:0;border-radius:0;border-top:1px solid var(--n300);padding:10px 14px} .cr-carte:first-child{border-top:0} .cr-manque input{border-color:var(--ambre700);background:var(--ambre100)} .cr-manque input::placeholder{color:var(--ambre700)} .cr-badge{border-color:transparent;background:transparent;padding:0; color:var(--ambre700);font-weight:600} .parcours-cr-tableau .puces{margin-top:14px;gap:8px 12px;align-items:center} .parcours-cr-tableau .puces .puce:first-child>span{border-color:transparent; background:transparent;color:var(--action);padding:0 4px} .parcours-cr-tableau .puces .puce.forte{margin-left:auto} @container (min-width:560px){ .cr-entete{display:grid;grid-template-columns:minmax(0,1fr) 140px 110px 100px 28px; column-gap:10px;padding:0 14px 6px;font-size:12px;font-weight:600; letter-spacing:.04em;text-transform:uppercase;color:var(--n600)} .cr-carte{display:grid;grid-template-columns:minmax(0,1fr) 140px 110px 100px 28px; align-items:center;column-gap:10px;row-gap:2px} .cr-grille,.cr-tete{display:contents} .cr-carte>.cr-champ{grid-column:1;grid-row:1} .cr-grille>.cr-champ:nth-child(1){grid-column:2;grid-row:1} .cr-grille>.cr-champ:nth-child(2){grid-column:3;grid-row:1} .cr-grille>.cr-champ:nth-child(3){grid-column:4;grid-row:1} .cr-retirer{grid-column:5;grid-row:1;margin:0;font-size:0;text-decoration:none; width:28px;height:28px;border-radius:8px} .cr-retirer::before{content:"\00d7";font-size:20px;line-height:1} .cr-badge{grid-column:1 / -1;grid-row:2} .cr-personnes,.cr-carte>.doux{grid-column:1 / -1} .cr-etiquette{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} .cr-champ input,.cr-champ textarea{border-color:transparent;background:transparent} .cr-champ input:hover,.cr-champ textarea:hover{border-color:var(--n300)} .cr-manque input{border-color:var(--ambre700);background:var(--ambre100)} } /* ── « À traiter » (maquette ATraiter, 20/10/2026) : la liste à gauche, la fiche choisie à droite. AFFICHAGE SEULEMENT, DES JETONS SEULEMENT (ils suivent le thème sombre) ; aucun attribut « style ». Ce fragment passe après les autres : il repeint les cartes de « Relectures », il ne les remplace pas. */ /* L'en-tête de la page : un grand titre et sa phrase, sans filet */ .tete:has(~ .thr .a-traiter){min-height:0;border-bottom:0;padding-top:28px; padding-bottom:0;padding-left:48px} .tete:has(~ .thr .a-traiter) h1{font-size:26px;font-weight:700} .tete:has(~ .thr .a-traiter) .sous{font-size:14px;color:var(--n800);margin-top:4px} .liste.relectures.a-traiter{max-width:1240px;padding:12px 48px 28px} /* (24/10/2026) Refonte épurée V2 (jury) : les mêmes onglets que « Mon compte » (15 px, 46 px de haut, 3 px de turquoise sous l'onglet courant), et leurs compteurs en petites pastilles turquoise pâle. */ .a-traiter .onglets{gap:4px;margin:0 0 22px} .a-traiter .onglet{min-height:46px;padding:0 16px;gap:8px;border-bottom:3px solid transparent; font-size:15px;font-weight:500;color:var(--n800)} .a-traiter .onglet:hover{color:var(--encre);border-bottom-color:var(--n400)} .a-traiter .onglet[aria-selected=true]{font-weight:600;color:var(--encre); border-bottom-color:var(--marque)} .a-traiter .onglet:focus-visible{outline:2px solid var(--action);outline-offset:-2px; border-radius:6px} .a-traiter .onglet-pastille,.a-traiter .onglet-compte{min-width:22px;height:22px; padding:0 7px;box-sizing:border-box;border-radius:999px;background:var(--action100); color:var(--action700);font-size:13px;font-weight:700;display:inline-flex; align-items:center;justify-content:center} .atraiter-colonnes{display:grid;grid-template-columns:420px minmax(0,1fr); gap:24px;align-items:start} .atraiter-liste{display:flex;flex-direction:column;gap:10px} .atraiter-carte{display:flex;flex-direction:column;gap:6px;padding:16px; border:1px solid var(--n300);border-radius:14px;color:var(--encre); text-decoration:none;background:var(--blanc)} .atraiter-carte:hover{background:var(--n100);color:var(--encre);text-decoration:none} /* (24/10/2026) Refonte épurée V2 (jury) : la carte choisie a un trait de 2 px de la couleur d'action et un fond turquoise pâle (plus de contour noir) ; au clavier, un anneau distinct reste visible. */ .atraiter-carte.choisie{border:2px solid var(--action);padding:15px;background:var(--action100)} .atraiter-carte.choisie:hover{background:var(--action100)} .atraiter-carte:focus-visible{outline:3px solid var(--action);outline-offset:2px} .atraiter-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px} /* Les états en pastilles, en minuscules, 13 px : vert approuvée, ambre en relecture, rouge refusée, gris le reste. */ .atraiter-genre,.puce-etat{display:inline-flex;align-items:center;padding:3px 10px; border-radius:999px;border:1px solid var(--n300);background:var(--n100); font-size:13px;font-weight:600;line-height:1.3;color:var(--n800);white-space:nowrap} .atraiter-genre.ge-ok,.puce-etat.ge-ok{background:var(--vert100);color:var(--vert700); border-color:transparent} .atraiter-genre.ge-attente,.puce-etat.ge-attente{background:var(--ambre100); color:var(--ambre700);border-color:transparent} .atraiter-genre.ge-refus,.puce-etat.ge-refus{background:var(--rouge100); color:var(--rouge700);border-color:transparent} .puce-etat{grid-column:2;grid-row:1 / 3;align-self:start} .atraiter-quand{font-size:13px;color:var(--n800);white-space:nowrap} .atraiter-titre{font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere} .atraiter-sous{font-size:14px;color:var(--n800);overflow-wrap:anywhere} .atraiter-fin{margin:8px 4px 0;font-size:13px;color:var(--n800)} .atraiter-detail{min-width:0} .atraiter-fiche[hidden]{display:none} .a-traiter .avis-demandes{margin:0} .a-traiter .avis-historique{margin-top:24px} /* La fiche : un cadre, un en-tête, le texte, les décisions en pied */ .a-traiter .atraiter-fiche>article{padding:0;gap:16px;margin:0;border-radius:16px; border-color:var(--n300);box-shadow:none;overflow:hidden} .a-traiter .atraiter-fiche>article>*{margin-inline:24px} .a-traiter .atraiter-fiche>article>:last-child{margin-bottom:20px} .a-traiter .atraiter-fiche>article>.carte-tete{margin:0;padding:20px 24px; border-bottom:1px solid var(--n300);display:grid; grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:2px; align-items:center} .a-traiter .atraiter-fiche .carte-tete h2, .a-traiter .atraiter-fiche .carte-tete h3{margin:0;font-size:17px;font-weight:700; line-height:1.35} .a-traiter .atraiter-fiche .carte-qui{grid-column:1;white-space:normal; font-size:13px;color:var(--n800)} .puce-controle{grid-column:2;grid-row:1 / 3;font-size:12px;font-weight:600; color:var(--cna);background:var(--cna-pale);border-radius:6px;padding:4px 10px} .puce-controle.a-verifier{color:var(--cna-alerte-texte); background:var(--cna-alerte-fond)} .a-traiter .carte-corps .rendu{border:1px solid var(--n300);border-radius:12px; padding:14px 16px;min-height:200px;line-height:1.6} .a-traiter .champ-commentaire label, .a-traiter .avis-formulaire label{font-size:13px;font-weight:600;color:var(--n800)} .a-traiter .champ-commentaire textarea, .a-traiter .avis-formulaire textarea{border:1px solid var(--n300); border-radius:12px;padding:12px 16px;font:inherit;font-size:14px;width:100%; box-sizing:border-box} .a-traiter .champ-commentaire textarea{height:44px;min-height:44px;resize:vertical; background:var(--blanc)} .a-traiter .avis-formulaire{display:flex;flex-direction:column;gap:8px} .a-traiter .avis-formulaire textarea{margin:0;background:var(--blanc)} /* Les décisions : l'action qui avance, pleine, à droite ; refuser en texte */ .a-traiter .atraiter-fiche>article>.pied-decision{margin:0;padding:16px 24px; border-top:1px solid var(--n300);gap:12px} .a-traiter .pied-decision .champ-commentaire{margin:0} .a-traiter .pied-ligne{width:100%;display:flex;align-items:center; justify-content:space-between;gap:12px;flex-wrap:wrap} .a-traiter .carte-gestes{margin-left:auto;gap:10px} .a-traiter .bouton-approuver{border-radius:12px;border-color:var(--cna); background:var(--cna);color:var(--blanc);padding:0 22px} .a-traiter .bouton-approuver:hover{background:var(--cna-fonce); border-color:var(--cna-fonce);box-shadow:none} .a-traiter .bouton-refuser{border-color:transparent;background:transparent; color:var(--cna-alerte-texte)} .a-traiter .bouton-refuser:hover{background:var(--cna-alerte-fond); color:var(--cna-alerte-texte)} .a-traiter .bouton-modifier,.a-traiter .bouton-doux{border-radius:12px; border-color:var(--n400)} .a-traiter .bouton-plein{border-radius:12px;background:var(--cna); border-color:var(--cna);color:var(--blanc)} .a-traiter .bouton-plein:hover{background:var(--cna-fonce);border-color:var(--cna-fonce); color:var(--blanc)} .a-traiter .atraiter-fiche>article>.zone-modifier, .a-traiter .atraiter-fiche>article>.zone-refus{margin:0;padding:16px 24px 20px; border-top:1px solid var(--n300)} .a-traiter .atraiter-fiche>article>.zone-modifier[hidden], .a-traiter .atraiter-fiche>article>.zone-refus[hidden]{display:none} .a-traiter .bouton-refus{border-radius:12px} @media (max-width:900px){ .liste.relectures.a-traiter{padding:12px 16px 24px} .atraiter-colonnes{grid-template-columns:minmax(0,1fr)} } /* « Suivi » : ses deux sous-vues, plus discrètes que les vues de la page */ .a-traiter .sous-onglets{margin-bottom:16px} .a-traiter .sous-onglets .onglet{min-height:36px;font-size:14px} /* (20/10/2026) Richard : « on scrolle en bas de la page À traiter, énormément de vide ». La liste et la fiche défilent CHACUNE dans leur colonne, à la hauteur de l'écran : la page ne s'allonge plus au-delà de son contenu visible. */ @media (min-width:900px){ .atraiter-liste,.atraiter-detail{max-height:calc(100vh - 250px);overflow-y:auto; overscroll-behavior:contain;padding-right:4px} /* (24/10/2026) Refonte épurée V2 (jury) : la fiche colle en haut et garde une hauteur, elle ne flotte pas dans le vide. */ .atraiter-detail{position:sticky;top:16px;min-height:min(380px,calc(100vh - 250px))} } /* La page À traiter occupe TOUTE la largeur utile (le cadre la centrait en largeur de contenu). */ .thr .a-traiter{width:100%;max-width:none;align-self:stretch;box-sizing:border-box} .a-traiter .atraiter-colonnes,.a-traiter .onglets{width:100%} /* Passe de conformite (20/10/2026) : ecarts relevés entre le vrai chat et les maquettes validees. AFFICHAGE SEULEMENT. */ /* Le signe de l'assistant est le logo de l'organisation (posé dans le « i » par le serveur et le script). */ .lui .lab i{background-image:none;display:flex;align-items:center;justify-content:center;overflow:hidden} .lui .lab i .logo-org{display:flex;align-items:center;justify-content:center;line-height:0} .lui .lab i svg,.lui .lab i img{width:auto;height:auto;max-width:22px;max-height:16px} /* « Ça me va » : seul bouton plein, toujours à droite (la règle plus spécifique de 34 mettait sa marge à 0). */ .parcours-actions>.parcours-decision-finale{margin-left:auto} /* La barre d'étapes : dans l'en-tête, à droite du titre (maquette « Main »). Coche pleine = faite, rond numéroté = ici, texte seul = à venir. */ .parcours-barre{background:var(--rc-fond)} .parcours-barre .parcours-etapes{counter-reset:ph;flex-wrap:nowrap;gap:0;align-items:center;font-size:13px;color:var(--rc-doux);white-space:nowrap} .parcours-barre .parcours-etapes li{counter-increment:ph;gap:7px;color:var(--rc-doux);font-weight:400} .parcours-barre .parcours-etapes li:not(:last-child)::after{content:"";width:18px;height:1px;background:var(--rc-trait3);margin:0 8px 0 7px} .parcours-barre .parcours-etapes li::before{display:none} .parcours-barre .parcours-etapes li.fait::before,.parcours-barre .parcours-etapes li.passee::before,.parcours-barre .parcours-etapes li.ici::before{ display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:22px;height:22px;border-radius:50%; font-size:12px;font-weight:700;line-height:1} .parcours-barre .parcours-etapes li.fait::before{content:"\2713";background:var(--rc-accent);border:0;color:var(--mq-fond)} .parcours-barre .parcours-etapes li.passee::before{content:"\2013";background:var(--rc-trait2);border:0;color:var(--rc-doux)} .parcours-barre .parcours-etapes li.ici::before{content:counter(ph);background:var(--rc-fond);border:1.5px solid var(--rc-texte);color:var(--rc-texte)} .parcours-barre .parcours-etapes li.fait{color:var(--rc-doux)} .parcours-barre .parcours-etapes li.ici{color:var(--rc-texte);font-weight:600} @media (min-width:1100px){ .parcours-barre{position:fixed;top:0;left:auto;right:200px;width:auto;max-width:none;margin:0;height:72px;display:flex;align-items:center; background:transparent;padding:0;z-index:6} .parcours-barre .parcours-etapes{padding:0;margin:0} .app:has(.parcours-barre) .tete-titre{max-width:30%} } /* « Publier sur LinkedIn » : la couleur d'action du chat (plus le bleu de la marque) ; un lien de parcours en accent. */ .geste.geste-publier{background:var(--rc-accent);border-color:var(--rc-accent);color:var(--mq-fond)} .geste.geste-publier:hover{background:var(--rc-accent-survol);border-color:var(--rc-accent-survol);color:var(--mq-fond)} :root[data-theme="sombre"] .geste.geste-publier,:root[data-theme="sombre"] .geste.geste-publier:hover{color:var(--fond)} .parcours-provenance a{color:var(--rc-accent);font-weight:600} /* Tickets proposés : la liste prend la largeur de la maquette (920 px), les cases se lisent comme un tableau. */ .bloc:has(.parcours-cr){max-width:920px} .parcours-cr-tableau .puces .puce:first-child>span{color:var(--rc-accent);font-weight:600} @container (min-width:560px){ .cr-carte .cr-champ input:not(:focus):not(:hover){background:transparent;border-color:transparent} .cr-carte .cr-champ input:hover:not(:focus){background:transparent;border-color:var(--rc-trait3)} .cr-carte .cr-champ.cr-manque input:not(:focus):not(:hover),.cr-carte .cr-champ.cr-manque input:hover:not(:focus){background:var(--mq-manque-fond);border-color:var(--mq-manque-bord-doux);color:var(--mq-manque-texte)} .cr-carte .cr-manque input::placeholder{color:var(--mq-manque-texte)} } /* La couleur d'action du chat est l'accent de la maquette (#0B6E72), plus un bleu : liens, boutons « Catalogue », etc. Le thème sombre garde les siennes. */ :root{--action:var(--cna);--action600:var(--cna-fonce);--action700:var(--action-profond);--action100:var(--cna-pale);--action200:var(--cna-pale-appuyee)} /* Mode « Guidée » rangé dans les 4D de la maîtrise de l'IA (20/10/2026) : Délégation, Description, Discernement, Diligence. AFFICHAGE SEULEMENT. */ .guide-4d{display:flex;flex-direction:column;gap:8px} .guide-resume:empty,.guide-resume:not(:has(li:not([hidden]))){display:none} .guide-rub{display:flex;flex-direction:column;gap:4px} .guide-rub-t{margin:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rc-doux)} .guide-rub-rappel{margin:0;font-size:12.5px;line-height:1.4;color:var(--rc-texte)} .guide-rub .guide-liste svg,.guide-rub .guide-rub-ok svg{color:var(--rc-accent)} .guide-rub .guide-liste .guide-manque svg{color:var(--rc-tres-doux)} .guide-rub-ok{display:none!important;font-size:13px;color:var(--rc-doux)} .guide-rub:not(:has(.guide-manque:not([hidden]))) .guide-rub-ok{display:grid!important} .guide-rub+.guide-rub{padding-top:8px;border-top:1px solid var(--rc-trait)} .aide-4d{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--rc-doux)} /* En-tete du chat (20/10/2026) : le titre reste visible, la barre d'etapes ne deborde jamais. AFFICHAGE SEULEMENT. */ /* Plus de 6 etapes : la liste complete reste dans la page (lecteurs d'ecran), seule la forme compacte se voit. */ .parcours-compact{display:none} .parcours-barre-longue .parcours-etapes{display:none} .parcours-barre-longue .parcours-compact{display:flex;align-items:center;gap:10px;margin:0;padding:8px 0;min-width:0;max-width:100%; font-size:13px;line-height:1.2;color:var(--rc-doux);white-space:nowrap;overflow:hidden} .parcours-compact>span{flex:none;display:inline-flex;align-items:center;gap:7px} .parcours-compact .c-faites{color:var(--rc-accent);font-weight:600} .parcours-compact .c-ici{flex:0 1 auto;min-width:0;color:var(--rc-texte);font-weight:600;overflow:hidden;text-overflow:ellipsis} .parcours-compact .c-ici b{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box; width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rc-texte);font-size:12px;font-weight:700;line-height:1;margin-right:7px} .parcours-compact .c-suite{color:var(--rc-doux)} .parcours-compact .c-suite::before{content:"";width:12px;height:1px;background:var(--rc-trait3)} .parcours-compact .c-plus{color:var(--rc-doux);padding:1px 8px;border:1px solid var(--rc-trait3);border-radius:999px;font-size:12px} @media (min-width:1100px){ /* Le titre garde sa place (une ligne, points de suspension) ; la barre prend le reste, jusqu'aux boutons de droite. */ .parcours-barre-longue{max-width:min(520px,calc(100vw - 260px - 200px - 300px - 48px));overflow:hidden} .app:has(.parcours-barre-longue) .tete-titre{max-width:calc(100vw - 260px - 200px - min(520px,calc(100vw - 260px - 200px - 300px - 48px)) - 64px);min-width:180px} } .tete h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* (20/10/2026) Richard : « le titre en haut n'est pas lisible : réduire la police et l'afficher en entier ». Plus petit, sur DEUX lignes au besoin (au-delà : infobulle avec le titre complet). */ .tete h1{font-size:15px;line-height:1.3;white-space:normal;overflow:hidden;text-overflow:clip; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere} @media (min-width:1100px){.app:has(.parcours-barre) .tete-titre,.app:has(.parcours-barre-longue) .tete-titre{max-width:38%;flex:1 1 auto}} /* (22/10/2026) Richard : « le texte se chevauche ». La barre d'etapes est FIXE dans l'en-tete, le titre reservait 38 % : avec le menu elargi (« --largeur-cote »), les deux se recouvraient. La place se partage maintenant depuis la VRAIE largeur du menu : la barre a sa part (600px au plus), le titre le reste, sur deux lignes puis points de suspension. */ @media (min-width:1100px){ .app:has(.parcours-barre){--place-barre:min(600px,max(240px,calc(100vw - var(--largeur-cote) - 200px - 260px - 48px)))} .app .parcours-barre,.app .parcours-barre-longue{max-width:var(--place-barre);overflow:hidden} .app:has(.parcours-barre) .tete-titre,.app:has(.parcours-barre-longue) .tete-titre{ max-width:calc(100vw - var(--largeur-cote) - 200px - var(--place-barre) - 64px);min-width:120px;flex:0 1 auto} }/* (20/10/2026) Onglet « Tickets » : liste GLPI et formulaire de saisie. Sobre, sans style en attribut. */ /* (31/10/2026) Les jetons « --tk-* » (clair : chat/jetons_de_role.py ; sombre : bloc de 01-coquille.css) ne sont plus écrits ici : une couleur en dur dans une règle est une valeur que la charte ne suit pas. */ .tk-bouton-nouveau{margin-left:auto;text-decoration:none} .tk-defilement{overflow-x:auto;border:1px solid var(--tk-trait);border-radius:12px;background:var(--tk-fond)} .tk-tableau{width:100%;border-collapse:collapse;font-size:14px;color:var(--tk-texte)} .tk-tableau th{text-align:left;font-weight:600;font-size:12.5px;color:var(--tk-doux);padding:10px 12px;border-bottom:1px solid var(--tk-trait);white-space:nowrap} .tk-tableau td{padding:10px 12px;border-bottom:1px solid var(--tk-trait);vertical-align:top} .tk-tableau tbody tr:last-child td{border-bottom:0} .tk-tableau tbody tr:hover{background:var(--tk-pale)} .tk-num{color:var(--tk-doux);white-space:nowrap} .tk-titre-cellule{min-width:240px} .tk-titre-cellule a{color:var(--tk-texte);font-weight:600;text-decoration:none} .tk-titre-cellule a:hover{color:var(--tk-accent);text-decoration:underline} .tk-etat{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--tk-pale);color:var(--tk-accent);font-size:12.5px;white-space:nowrap} .tk-etat-resolu,.tk-etat-clos{background:transparent;border:1px solid var(--tk-trait);color:var(--tk-doux)} .tk-plafond{margin:10px 2px 0;font-size:13px} .tk-avis,.tk-erreur{padding:12px 14px;border-radius:10px;background:var(--tk-alerte-fond);color:var(--tk-alerte-texte);margin:0 0 16px} .tk-succes{padding:12px 14px;border-radius:10px;background:var(--tk-pale);color:var(--tk-accent);margin:0 0 16px} .tk-succes a{color:inherit;font-weight:600} .tk-formulaire{display:grid;gap:16px;max-width:760px} .tk-champ{display:grid;gap:6px;font-size:14px;color:var(--tk-texte)} .tk-champ>span{font-weight:600;font-size:13.5px} .tk-champ input,.tk-champ select,.tk-champ textarea{font:inherit;padding:10px 12px;border:1px solid var(--tk-trait);border-radius:10px;background:var(--tk-fond);color:var(--tk-texte);width:100%;box-sizing:border-box} .tk-champ input:focus,.tk-champ select:focus,.tk-champ textarea:focus{outline:2px solid var(--tk-accent);outline-offset:1px;border-color:var(--tk-accent)} .tk-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .tk-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px} @media (max-width:640px){.tk-grille{grid-template-columns:1fr}} .tk-statut{display:flex;gap:6px;align-items:center;margin:0} .tk-statut select{font:inherit;padding:4px 8px;border:1px solid var(--tk-trait);border-radius:8px;background:var(--tk-fond);color:var(--tk-texte)} .tk-sans-droit{margin:0 0 16px} /* (30/10/2026) Tableau simplifié (modèle : réunions) : case, bouton « Fermer », barre « Fermer la sélection ». */ .tk-selection{margin:0} .tk-selection .tk-actions{margin:12px 0 0} .tk-case{width:1%;white-space:nowrap} .tk-case input{width:18px;height:18px} .tk-actions-ligne{width:1%;white-space:nowrap} .tk-titre-cellule .tk-num{margin-left:6px;font-size:12.5px} /* Le menu ⋯ du compte (en bas du menu de gauche) et sa fenêtre « Changer mon mot de passe » (20/10/2026). */ /* ⚠️ LE MENU S'OUVRE AU-DESSUS DU BOUTON, ALIGNÉ SUR LE BORD GAUCHE DU MENU DE GAUCHE (16 px de marge) : « .compte » commence à 14 px de ce bord, d'où 2 px. Calé à droite, il débordait à gauche de l'écran dès que le menu était étroit. Sa largeur suit celle du menu réglé (220-440 px), jamais au-delà. */ .compte .vol-menu{left:2px;right:auto; width:min(260px,calc(var(--largeur-cote) - 32px))} /* La fenêtre : une carte centrée dans la page de la coquille. */ .fenetre-compte{max-width:440px;margin:24px auto;background:var(--blanc); border:1px solid var(--n300);border-radius:14px;box-shadow:var(--ombre); padding:22px 24px} .fenetre-compte h2{margin:0 0 14px;display:flex;align-items:center;gap:10px; font-size:18px;font-weight:600;color:var(--encre)} .fenetre-compte h2 svg{color:var(--cna);flex:none} .fenetre-compte-form{display:flex;flex-direction:column;gap:6px} .fenetre-compte-form label{margin-top:8px;font-size:14px;font-weight:600; color:var(--encre)} .fenetre-compte-form input[type=password]{min-height:44px;padding:0 12px; font:inherit;color:var(--encre);background:var(--blanc); border:1px solid var(--n400);border-radius:10px} .fenetre-compte-form input[type=password]:focus-visible{outline:2px solid var(--cna); outline-offset:1px} .fenetre-compte-note{margin:2px 0 0;font-size:13px;color:var(--n700)} .fenetre-compte-pied{display:flex;justify-content:flex-end;gap:10px;margin-top:20px} .fenetre-compte-pied .bouton-plein{background:var(--cna);border-color:var(--cna)} .fenetre-compte-pied .bouton-plein:hover{background:var(--cna-fonce); border-color:var(--cna-fonce)} .fenetre-compte .bandeau-ok,.fenetre-compte .bandeau-non{margin:0 0 10px} /* (30/10/2026) La page « Apparence » (« /compte/apparence », plainte « Method Not Allowed ») : deux choix côte à côte, à gauche, et celui du moment teinté comme dans le menu du compte (« 01-coquille.css », « .vol-menu .apparence »). Des jetons seulement : le thème sombre les redéfinit. */ .apparence-choix .fenetre-compte-pied{justify-content:flex-start;margin-top:14px} .apparence-choix button[aria-pressed="true"]{background:var(--action100);border-color:var(--action);color:var(--action700);font-weight:600} /* « MES TRAVAUX » (20/10/2026) : toutes les discussions, hors du menu de gauche. Style sobre de la refonte : lignes de 52 px, filets clairs. Des jetons seulement, aucun attribut « style ». */ .travaux-page{max-width:860px;margin:0 auto;padding:24px 32px 48px; display:flex;flex-direction:column;gap:16px} .travaux-recherche{display:flex;align-items:center;gap:10px;min-height:44px; padding:0 6px 0 14px;border:1px solid var(--n300);border-radius:10px; background:var(--blanc);color:var(--n700)} .travaux-recherche:focus-within{border-color:var(--cna)} .travaux-recherche input[type=search]{flex:1 1 auto;min-width:0;border:0; outline:0;background:transparent;font:inherit;font-size:14px; color:var(--encre);height:40px;background:transparent;box-shadow:none; padding:0} .travaux-recherche input[type=search]:focus{box-shadow:none} .travaux-classeurs{display:flex;flex-wrap:wrap;gap:8px} .puce-classeur{display:inline-flex;align-items:center;gap:6px;min-height:32px; padding:0 12px;border:1px solid var(--n300);border-radius:16px; background:var(--blanc);color:var(--encre);font-size:13px;text-decoration:none} .puce-classeur:hover{background:var(--n200);text-decoration:none;color:var(--encre)} .puce-classeur[aria-current=page]{background:var(--cna-pale);border-color:var(--cna); color:var(--cna);font-weight:600} .puce-gerer{border-style:dashed;color:var(--n700)} .liste-travaux{display:flex;flex-direction:column;gap:18px} .liste-travaux .grp{gap:0} .liste-travaux .grp-t{padding:0 0 8px;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--n800)} .liste-travaux .grp ul{gap:0;border:1px solid var(--n300);border-radius:14px; overflow:visible} .liste-travaux .item{border-bottom:1px solid var(--n300)} .liste-travaux .item:last-child{border-bottom:0} .liste-travaux .rang{min-height:52px;border-radius:0;position:relative} .liste-travaux .grp li:first-child .rang{border-radius:13px 13px 0 0} .liste-travaux .grp li:last-child .rang{border-radius:0 0 13px 13px} .liste-travaux .grp li:only-child .rang{border-radius:13px} .liste-travaux .rang:hover{background:var(--n100)} .liste-travaux .item .titre{flex:1 1 auto;min-width:0;display:block; padding:15px 48px 15px 18px;font-size:15px;color:var(--encre); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none} .liste-travaux .item .menu>summary{opacity:.55} .liste-travaux .item:hover .menu>summary, .liste-travaux .item:focus-within .menu>summary, .liste-travaux .item .menu[open]>summary{opacity:1} /* (30/10/2026) Plainte « Tous mes travaux : les boutons 3 points ne s'ouvrent pas ». Le « transform » centrait le bouton mais faisait de lui le repère de tout enfant en « position:fixed » : le script pose le panneau en fixe, aux coordonnées de l'ÉCRAN, et il partait hors de la fenêtre. Plus de transform : le menu occupe la hauteur de la ligne et centre son bouton. */ .liste-travaux .item .menu{top:0;bottom:0;right:8px;display:flex;align-items:center} .liste-travaux .classeur{border:1px solid var(--n300);border-radius:14px; background:var(--blanc)} .liste-travaux .classeur>summary{min-height:52px} .liste-travaux .classeur ul{border:0;border-radius:0;border-top:1px solid var(--n300)} .liste-travaux .classeurs-t{display:flex;align-items:center;justify-content:space-between; padding-bottom:8px} .liste-travaux .classeurs{display:flex;flex-direction:column;gap:8px} /* (20/10/2026) Ticket depuis un compte rendu : tableau des personnes, un seul bouton plein. */ /* (31/10/2026) Les jetons « --cp-* » : clair dans chat/jetons_de_role.py, sombre dans le bloc de 01-coquille.css. */ .cr-entete-page{margin:0 0 14px} .cr-titre-page{margin:0 0 2px;font-size:22px;line-height:1.25;font-weight:700} .cr-prefixe>summary{list-style:none;cursor:pointer;font-size:13px} .cr-prefixe>summary::-webkit-details-marker{display:none} .cr-modifier{color:var(--cp-accent);text-decoration:underline} .cr-prefixe[open] .cr-modifier{display:none} .cr-prefixe .cr-reunion{margin-top:8px;max-width:520px} .cr-section{margin:16px 0 0} .cr-page .cr-section-titre{margin:0 0 8px;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .cr-section-titre .doux{font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;margin-left:6px} .cr-personnes-table{border:1px solid var(--cp-trait);border-radius:12px;overflow-x:auto;background:var(--mq-fond)} .cr-personnes-table table{width:100%;border-collapse:collapse;min-width:820px} .cr-personnes-table th:last-child,.cr-personnes-table td:last-child{width:170px} .cr-personnes-table th:first-child{white-space:nowrap} .cr-personnes-table th{padding:9px 10px;text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase; color:var(--mq-texte);border-bottom:1px solid var(--cp-trait)} .cr-personnes-table tbody th{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600} .cr-personnes-table td{padding:6px 6px;border-top:1px solid var(--mq-trait)} .cr-personnes-table tbody tr:first-child td{border-top:0} .cr-page .cr-personnes-table input,.cr-page .cr-personnes-table select{width:100%;box-sizing:border-box;min-width:0;padding:7px 9px; font:inherit;font-size:14px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit} .cr-page .cr-personnes-table input:hover,.cr-page .cr-personnes-table select:hover{border-color:var(--mq-bord)} .cr-page .cr-personnes-table input:focus,.cr-page .cr-personnes-table select:focus{outline:2px solid var(--cp-accent);outline-offset:1px} .cr-page .cr-personnes-table input.cr-vide:not(:focus){background:var(--cp-orange);border-color:var(--cp-orange-trait)} .cr-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px; padding-top:14px;border-top:1px solid var(--mq-trait)} .cr-creer{margin-left:auto;padding:11px 22px;border:0;border-radius:10px;background:var(--cp-accent);color:var(--mq-fond); font:inherit;font-weight:600;cursor:pointer} .cr-creer:hover{background:var(--cp-accent2)} /* (31/10/2026) Thème sombre de la campagne (H2) : le sombre n'existe que CHOISI (« data-theme="sombre" », posé par le serveur). Ces règles suivaient la préférence du système et un « data-theme="dark" » que le chat ne pose jamais. */ :root[data-theme="sombre"] .cr-personnes-table{background:transparent} :root[data-theme="sombre"] .cr-personnes-table th{color:inherit} /* (20/10/2026) Tickets proposés : un vrai tableau compact, une ligne par ticket. */ .cr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .cr-propose{display:block;margin-top:1px;padding:0 10px;font-size:12px;line-height:1.3;color:var(--n600); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cr-reglages{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 8px;font-size:13px} .cr-reglages .cr-groupe,.cr-reglages .cr-categorie,.cr-reglages .cr-groupe-info{margin:0} .cr-reglages .cr-champ{display:flex;align-items:center;gap:8px} .cr-reglages .cr-etiquette{margin:0;display:inline} .cr-reglages select{width:auto;max-width:280px;padding:5px 8px;font:inherit;font-size:13px;border:1px solid var(--n300);border-radius:8px} .cr-reglages .cr-categorie::before{content:"\00b7";margin-right:10px;color:var(--n600)} .cr-reglages .cr-groupe-info+.cr-categorie{display:flex;align-items:center} .cr-carte>.cr-champ input{white-space:nowrap;text-overflow:ellipsis} .cr-carte{padding:6px 14px;min-height:48px} .cr-carte .cr-champ{align-self:center} .cr-carte>.doux{font-size:12px;margin:0} .cr-personnes{margin:2px 0 0} .cr-pers{margin:0} .cr-source{margin:0 0 14px} .cr-source-texte{max-height:320px;overflow-y:auto;font-size:15px;line-height:1.55} .cr-pers{font-size:12px;line-height:1.3} .cr-entete{padding-left:24px} /* (20/10/2026) Colonne « Pour » : pastilles + champ d'ajout (script 37-pour-multiple.js). */ .cr-pour{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:32px;padding:3px 6px;border:1px solid var(--n300);border-radius:8px;background:var(--mq-fond)} .cr-pour-pastilles{display:contents} .cr-pastille{display:inline-flex;align-items:center;gap:3px;padding:1px 4px 1px 8px;border-radius:999px;background:var(--n100);font-size:13px;line-height:1.5} .cr-pastille-x{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;padding:0 3px;color:var(--n600)} .cr-pour-ajout{flex:1 1 70px;min-width:70px;width:auto;border:0;outline:0;padding:2px 2px;font:inherit;font-size:13px;background:transparent} .cr-pour:focus-within{outline:2px solid var(--n600);outline-offset:1px} .cr-manque .cr-pour{border-color:var(--mq-attention-bord);background:var(--mq-attention-fond)} .cr-carte input[type=date]{font:inherit;font-size:13px} @container (min-width:560px){ .cr-entete,.cr-carte{grid-template-columns:minmax(0,1fr) 230px 150px 90px 28px} } .cr-champ .cr-pour input.cr-pour-ajout{border:0;background:transparent;box-shadow:none;outline:0;padding:2px;min-height:0;height:24px} .cr-champ .cr-pour input.cr-pour-ajout::-webkit-calendar-picker-indicator{opacity:.5} .cr-pour:focus-within{outline:2px solid var(--action)} .cr-carte input[type=date]{padding-right:4px} /* (20/10/2026) Tableau « Tickets proposés » sobre (maquette TableauTickets) : aucune case encadrée au repos, édition en place, pastilles pour les personnes, menu de membres, date en texte court. */ .cr-ligne-titre{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 12px} .cr-ligne-titre .cr-section-titre{margin:0;color:var(--mq-texte-doux);font-size:12px;letter-spacing:.06em} .cr-ligne-titre .cr-section-titre .doux{margin-left:10px;color:var(--mq-texte-discret)} .cr-ligne-titre .cr-reglages,.cr-ligne-titre .cr-groupe,.cr-ligne-titre .cr-categorie{display:contents} .cr-ligne-titre .cr-reglages{font-size:13px;color:var(--mq-texte-discret)} .cr-ligne-titre .cr-etiquette{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .cr-ligne-titre .cr-categorie::before{content:none} .cr-ligne-titre .cr-groupe>.cr-champ:first-child::before{content:"\00b7 groupe";margin-right:4px;color:var(--mq-texte-discret)} .cr-ligne-titre .cr-categorie>.cr-champ:first-child::before{content:"\00b7 cat\00e9gorie";margin-right:4px;color:var(--mq-texte-discret)} .cr-ligne-titre .cr-groupe-info{display:inline;margin:0;font-size:13px;color:var(--mq-texte-discret)} .cr-ligne-titre .cr-groupe-info::before{content:"\00b7 "} .cr-ligne-titre .cr-reglages select{padding:0 2px;border:0;border-radius:6px;background:transparent;color:var(--mq-texte);font:inherit; font-size:13px;max-width:260px;cursor:pointer;field-sizing:content} .cr-ligne-titre .cr-reglages select:hover,.cr-ligne-titre .cr-reglages select:focus-visible{background:var(--mq-fond-doux)} .cr-ligne-titre .cr-groupe>.doux,.cr-ligne-titre .cr-categorie>.doux,.cr-ligne-titre .cr-groupe>.cr-champ:not(:first-child){flex:1 0 100%;font-size:12px} .cr-page .cr-tableau{margin-top:0;border:1px solid var(--mq-trait);border-radius:14px;background:var(--mq-fond)} .cr-page .cr-cartes{padding:0;border:0;border-radius:0;overflow:visible;margin:0;gap:0;background:none} .cr-page .cr-carte{padding:8px 20px;min-height:56px;border:0;border-top:1px solid var(--mq-fond-doux);border-radius:0;background:transparent;position:relative} .cr-page .cr-carte:first-child{border-top:1px solid var(--mq-fond-doux)} .cr-page .cr-carte:last-child{border-radius:0 0 13px 13px} .cr-page .cr-carte:hover,.cr-page .cr-carte:focus-within{background:var(--mq-fond-entete)} .cr-page .cr-entete{display:none} .cr-page .cr-cartes>.cr-carte:has(.cr-menu-pour){z-index:5} /* Champs au repos : fond transparent, sans bordure ; trait fin au survol et au focus. */ .cr-page .cr-carte .cr-champ input:not(.cr-menu-cherche),.cr-page .cr-carte .cr-champ textarea{padding:6px 8px;margin:0 -8px;width:calc(100% + 16px); border:1px solid transparent;border-radius:8px;background:transparent;box-shadow:none;font:inherit;color:var(--mq-texte); resize:none;text-overflow:clip;white-space:normal} .cr-page .cr-carte .cr-champ input:not(.cr-menu-cherche):hover,.cr-page .cr-carte .cr-champ textarea:hover{border-color:var(--mq-bord);background:transparent} .cr-page .cr-carte .cr-champ input:not(.cr-menu-cherche):focus,.cr-page .cr-carte .cr-champ textarea:focus{border-color:var(--mq-accent);background:var(--mq-fond);outline:0;box-shadow:0 0 0 3px var(--mq-accent-pale)} .cr-page .cr-champ-titre textarea{font-size:14.5px;line-height:1.4;overflow:hidden;field-sizing:content;min-height:0;display:block} .cr-page .cr-carte .cr-champ:not(.cr-champ-titre):not(.cr-champ-pour):not(.cr-champ-date) input{font-size:13px;color:var(--mq-texte-doux)} .cr-page .cr-carte .cr-champ input::placeholder{color:var(--mq-texte-estompe)} /* Pour */ .cr-page .cr-champ-pour{position:relative} .cr-page .cr-pour{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:0;padding:0;border:0;border-radius:0;background:none} .cr-page .cr-pour:focus-within{outline:0} .cr-page .cr-pour-pastilles{display:contents} .cr-page .cr-pastille{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px;border-radius:14px;background:var(--mq-fond-doux);font-size:13px;line-height:1;color:var(--mq-texte)} .cr-page .cr-pastille-rond{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:10px;background:var(--mq-accent-pale);color:var(--mq-accent);font-size:11px;font-weight:700} .cr-page .cr-pastille-nom{padding-right:6px} .cr-page .cr-pastille-x{display:none;border:0;background:none;cursor:pointer;font-size:15px;line-height:1;padding:0 6px 0 0;margin-left:-2px;color:var(--mq-texte-discret)} .cr-page .cr-pastille:hover .cr-pastille-x,.cr-page .cr-pastille:focus-within .cr-pastille-x{display:inline-block} .cr-page .cr-pastille:hover .cr-pastille-nom,.cr-page .cr-pastille:focus-within .cr-pastille-nom{padding-right:0} .cr-page .cr-pastille-x:hover{color:var(--mq-texte)} .cr-page .cr-pour-plus{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px dashed var(--mq-bord-neutre);border-radius:14px; background:transparent;color:var(--mq-texte-discret);font:inherit;font-size:15px;line-height:1;cursor:pointer} .cr-page .cr-pour-plus:hover,.cr-page .cr-pour-plus:focus-visible{border-color:var(--mq-accent);color:var(--mq-accent);background:var(--mq-accent-tres-pale)} .cr-page .cr-pour-plus.cr-pour-vide{width:auto;padding:0 12px;border-color:var(--mq-manque-bord);color:var(--mq-manque-texte);font-size:13px} .cr-page .cr-pour-plus.cr-pour-vide:hover,.cr-page .cr-pour-plus.cr-pour-vide:focus-visible{background:var(--mq-manque-fond);border-color:var(--mq-manque-bord-fort);color:var(--mq-manque-texte)} .cr-page .cr-champ-pour.cr-manque .cr-pour{border:0;background:none} .cr-page .cr-propose{flex:1 0 100%;margin:2px 0 0;padding:0;white-space:normal} .cr-page .cr-champ-pour .cr-propose{display:block} /* Menu des membres */ .cr-menu-pour{position:absolute;z-index:20;left:0;top:calc(100% + 6px);width:260px;box-sizing:border-box;padding:8px;background:var(--mq-fond); border:1px solid var(--mq-trait-fort);border-radius:12px;box-shadow:0 12px 30px var(--ombre-menu-choix);display:flex;flex-direction:column;gap:2px} .cr-menu-pour .cr-menu-cherche{box-sizing:border-box;width:100%;height:36px;margin:0;padding:0 10px;border:1px solid var(--mq-bord);border-radius:8px;background:var(--mq-fond); font:inherit;font-size:13px;color:var(--mq-texte)} .cr-menu-pour .cr-menu-cherche:focus{outline:0;border-color:var(--mq-accent);box-shadow:0 0 0 3px var(--mq-accent-pale)} .cr-menu-titre{padding:8px 10px 2px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mq-texte-discret)} .cr-menu-liste{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto} .cr-menu-choix{display:flex;align-items:center;gap:6px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent; font:inherit;font-size:14px;color:var(--mq-texte);text-align:left;cursor:pointer} .cr-menu-choix:hover,.cr-menu-choix:focus-visible{background:var(--mq-fond-doux);outline:0} .cr-menu-choix.est-choisi{background:var(--mq-accent-tres-pale)} .cr-menu-coche{display:inline-block;color:var(--mq-accent)} .cr-menu-coche:empty{display:none} /* Échéance */ .cr-page .cr-champ-date{position:relative;display:flex;align-items:center} .cr-page .cr-champ-date .cr-date-texte{display:none} .cr-page .cr-champ-date.cr-date-js .cr-date-texte{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;margin-left:-10px;border-radius:8px; font-size:14px;color:var(--mq-texte);pointer-events:none;white-space:nowrap} .cr-page .cr-champ-date .cr-date-icone{flex:none;color:var(--mq-texte-discret)} .cr-page .cr-champ-date.cr-date-js:hover .cr-date-texte{background:var(--mq-fond-doux)} .cr-page .cr-champ-date.cr-date-js.cr-date-vide .cr-date-texte{margin-left:0;padding:0 12px;border:1px dashed var(--mq-manque-bord);border-radius:14px;color:var(--mq-manque-texte);font-size:13px} .cr-page .cr-champ-date.cr-date-js.cr-date-vide .cr-date-icone{color:var(--mq-manque-texte)} .cr-page .cr-champ-date.cr-date-js.cr-date-vide:hover .cr-date-texte{background:var(--mq-manque-fond);border-color:var(--mq-manque-bord-fort)} .cr-page .cr-carte .cr-champ-date.cr-date-js input[type=date]{position:absolute;left:-10px;top:0;margin:0;width:calc(100% + 10px);height:100%;opacity:0;cursor:pointer;padding:0;border:0} .cr-page .cr-carte .cr-champ-date:not(.cr-date-js) input[type=date]{font-size:13px} .cr-page .cr-carte .cr-champ-date.cr-manque input{background:transparent;border-color:transparent} /* × */ .cr-page .cr-retirer{color:var(--mq-texte-estompe);background:none;border:0} .cr-page .cr-retirer:hover,.cr-page .cr-retirer:focus-visible{color:var(--mq-texte);background:var(--mq-fond-doux)} .cr-page .cr-aide{margin:14px 0 0;font-size:13px;color:var(--mq-texte-discret)} .cr-page .cr-aide span{color:var(--mq-manque-texte)} @container (min-width:560px){ .cr-page .cr-entete{display:grid;grid-template-columns:minmax(0,1fr) 230px 130px 80px 28px;column-gap:12px;align-items:center;padding:10px 20px; background:var(--mq-fond-entete);border-radius:13px 13px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mq-texte-discret)} .cr-page .cr-carte{grid-template-columns:minmax(0,1fr) 230px 130px 80px 28px;column-gap:12px;align-items:center} .cr-page .cr-retirer{width:28px;height:28px;border-radius:14px;font-size:0} .cr-page .cr-retirer::before{font-size:18px} .cr-page .cr-carte .cr-champ input:not(.cr-menu-cherche):not(:focus):not(:hover),.cr-page .cr-carte .cr-champ textarea:not(:focus):not(:hover){background:transparent;border-color:transparent} .cr-page .cr-carte .cr-champ input:not(.cr-menu-cherche):hover:not(:focus),.cr-page .cr-carte .cr-champ textarea:hover:not(:focus){border-color:var(--mq-bord)} .cr-page .cr-carte .cr-champ.cr-manque input:not(:focus):not(:hover),.cr-page .cr-carte .cr-champ.cr-manque input:hover:not(:focus){background:transparent;border-color:transparent;color:inherit} } @container (max-width:559px){ .cr-page .cr-carte .cr-champ input:not(.cr-menu-cherche),.cr-page .cr-carte .cr-champ textarea{margin:0;width:100%;border-color:var(--mq-trait-fort)} } :root[data-theme="sombre"] .cr-page .cr-tableau{background:transparent;border-color:var(--sombre-filet-tableau)} :root[data-theme="sombre"] .cr-page .cr-carte{border-top-color:var(--sombre-filet-carte)} :root[data-theme="sombre"] .cr-page .cr-carte:hover,:root[data-theme="sombre"] .cr-page .cr-carte:focus-within,:root[data-theme="sombre"] .cr-page .cr-entete{background:var(--sombre-survol-carte)} :root[data-theme="sombre"] .cr-page .cr-carte .cr-champ input:not(.cr-menu-cherche),:root[data-theme="sombre"] .cr-page .cr-carte .cr-champ textarea,:root[data-theme="sombre"] .cr-page .cr-champ-date .cr-date-texte{color:inherit} :root[data-theme="sombre"] .cr-page .cr-pastille,:root[data-theme="sombre"] .cr-menu-choix:hover{background:var(--sombre-pastille);color:inherit} :root[data-theme="sombre"] .cr-menu-pour{background:var(--sombre-menu-fond);border-color:var(--sombre-bord-menu)} :root[data-theme="sombre"] .cr-menu-pour .cr-menu-cherche,:root[data-theme="sombre"] .cr-menu-choix{background:transparent;color:inherit} :root[data-theme="sombre"] .cr-menu-choix.est-choisi{background:var(--sombre-choix-actif)} :root[data-theme="sombre"] .cr-ligne-titre .cr-reglages select{color:inherit} .cr-page .cr-champ .cr-menu-pour .cr-menu-cherche{width:100%;margin:0;padding:0 10px;border:1px solid var(--mq-bord);background:var(--mq-fond);box-shadow:none;height:36px} .cr-page .cr-champ .cr-menu-pour .cr-menu-cherche:focus{border-color:var(--mq-accent);box-shadow:0 0 0 3px var(--mq-accent-pale)} :root[data-theme="sombre"] .cr-page .cr-champ .cr-menu-pour .cr-menu-cherche{background:transparent;border-color:var(--sombre-bord-recherche)} /* (21/10/2026) ACADÉMIE : les vidéos de prise en main (maquette Academie.png, validée). ⚠️ Jetons seulement (« --cna… », « --n… »), clair et sombre ; aucun attribut « style ». */ .page-academie{max-width:1060px;margin:0 auto;padding:12px 48px 48px;display:flex;flex-direction:column;gap:28px} .page-academie a{text-decoration:none} /* ── La mise en avant : la promo en grand, texte à droite ───────────── */ .ac-avant{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:center} .ac-couv{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--n300)} .ac-couv img{width:100%;height:100%;object-fit:cover;display:block} .ac-avant .ac-couv{border-radius:16px;box-shadow:0 10px 30px var(--ombre-couverture)} .ac-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%; background:var(--lecture-bouton-voile);color:var(--cna);display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px var(--ombre-lecture-bouton)} .ac-play-grand{width:72px;height:72px;margin:-36px 0 0 -36px;background:var(--lecture-grand-voile); box-shadow:0 6px 20px var(--ombre-lecture-grand)} .ac-play svg{margin-left:2px} .ac-duree{position:absolute;right:8px;bottom:8px;font-size:12px;font-weight:600;color:var(--mq-fond); background:var(--duree-voile);border-radius:6px;padding:2px 7px} .ac-avant-texte{display:flex;flex-direction:column;gap:12px} .ac-sur{font-size:12px;font-weight:700;color:var(--cna);text-transform:uppercase;letter-spacing:.06em} .ac-avant-texte h2{margin:0;font-size:22px;font-weight:700;line-height:1.3;color:var(--encre)} .ac-avant-texte p{margin:0;font-size:15px;line-height:1.6;color:var(--n700)} .ac-actions{display:flex;gap:10px;align-items:center;margin-top:4px} .ac-regarder{height:42px;padding:0 18px;border-radius:10px;background:var(--cna);color:var(--mq-fond);font-size:14px; font-weight:600;display:inline-flex;align-items:center;gap:8px} .ac-regarder:hover{background:var(--cna-fonce);color:var(--mq-fond)} .ac-doux{font-size:13px;color:var(--n600)} /* ── Le grand lecteur ───────────────────────────────────────────────── */ .ac-lecteur{display:flex;flex-direction:column;gap:10px} .ac-lecteur video{display:block;width:100%;max-width:820px;aspect-ratio:16/9;border-radius:16px;background:var(--mq-texte); box-shadow:0 10px 30px var(--ombre-couverture)} .ac-lecteur-titre{margin:0;font-size:18px;font-weight:700;color:var(--encre)} .ac-lecteur-duree{font-weight:400;color:var(--n600);font-size:14px} /* ── La grille des tutoriels : 4 colonnes ───────────────────────────── */ .ac-tutos{display:flex;flex-direction:column;gap:14px} .ac-tutos-tete{display:flex;align-items:baseline;justify-content:space-between} .ac-tutos-tete h2{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--n700)} .ac-compte{font-size:13px;color:var(--n600)} .ac-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px} .ac-carte{display:flex;flex-direction:column;gap:10px;color:var(--encre)} .ac-carte:hover{color:var(--encre)} .ac-carte:hover .ac-play{background:var(--mq-fond);box-shadow:0 6px 18px var(--ombre-lecture-survol)} .ac-carte:focus-visible{outline:2px solid var(--cna);outline-offset:4px;border-radius:12px} .ac-carte-haut{display:flex;align-items:center;gap:8px} .ac-numero{font-size:12px;font-weight:700;color:var(--n600);text-transform:uppercase;letter-spacing:.05em} .ac-vu{font-size:11px;font-weight:700;color:var(--cna);background:var(--cna-pale);border-radius:6px;padding:2px 7px} .ac-carte-titre{font-size:15px;font-weight:600;line-height:1.35;margin-top:-4px} .ac-carte[aria-current=true] .ac-couv{outline:2px solid var(--cna);outline-offset:2px} @media (max-width:1100px){ .ac-grille{grid-template-columns:repeat(3,minmax(0,1fr))} .ac-avant{grid-template-columns:1fr} } @media (max-width:760px){ .page-academie{padding:12px 16px 32px} .ac-grille{grid-template-columns:repeat(2,minmax(0,1fr))} } /* (21/10/2026) Le compte rendu rédigé d'une réunion Noota, au-dessus des tickets. */ .cr-source-texte.cr-compte-rendu{white-space:normal;max-height:none} .cr-compte-rendu h5{margin:14px 0 4px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--rc-doux)} .cr-compte-rendu h5:first-child{margin-top:2px} .cr-compte-rendu ul{margin:0;padding-left:20px} .cr-compte-rendu li{margin:2px 0} .cr-compte-rendu p{margin:4px 0} /* (21/10/2026) La description et la note d'un ticket du tableau, dans une fenêtre. */ .cr-desc{margin-top:8px} .cr-desc-bouton{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:15px; border:1px solid var(--rc-trait2);color:var(--rc-texte);font-size:13px;cursor:pointer;list-style:none; background:var(--rc-fond)} .cr-desc-bouton::-webkit-details-marker{display:none} .cr-desc-bouton:hover{border-color:var(--rc-trait3)} .cr-desc-bouton:focus-visible{outline:2px solid var(--rc-accent);outline-offset:2px} .cr-desc[open]::before{content:"";position:fixed;inset:0;background:var(--voile-fenetre);z-index:90} .cr-desc-fenetre{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:91; width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;box-sizing:border-box; display:flex;flex-direction:column;gap:14px;padding:22px 24px;border-radius:14px; background:var(--rc-fond);color:inherit;box-shadow:0 18px 50px var(--ombre-fenetre)} .cr-desc-titre{font-size:16px;font-weight:700;line-height:1.35} .cr-desc-champ{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--rc-doux)} .cr-desc-champ textarea{font:inherit;font-size:15px;font-weight:400;color:var(--rc-texte);resize:vertical; padding:10px 12px;border-radius:10px;border:1px solid var(--rc-trait2);background:var(--rc-fond)} .cr-desc-champ textarea:focus{outline:none;border-color:var(--rc-trait3)} .cr-desc-actions{display:flex;justify-content:flex-end;gap:10px} .tk-note textarea{min-height:72px} /* (21/10/2026) Le dépôt d'une image dans une étape du parcours (logo du partenaire, image reçue) et sa vignette. */ .parcours-depot{display:flex;flex-direction:column;gap:10px} .parcours-depot-champ{display:flex;flex-direction:column;gap:6px;font-size:14px} .parcours-depot-champ input[type=file]{max-width:100%;font-size:13px} .depot-vignette{display:block;max-width:160px;max-height:120px;width:auto;height:auto;margin:6px 0 0;padding:6px;box-sizing:border-box;border:1px solid var(--rc-trait2);border-radius:8px;background:var(--rc-fond)} /* (21/10/2026) Le pitch d'un événement (80 à 120 mots) tient dans une carte : texte courant, lu à gauche, sans gras. */ .parcours-carte-longue b{display:block;font-weight:400;line-height:1.5;text-align:left;white-space:pre-line} .parcours-carte-longue span{display:block;margin-top:6px;text-align:left} /* La trame du CNA : l'aperçu de ce qui a été rempli, ligne à ligne, avec le bouton de téléchargement dessous. */ .parcours-trame{display:flex;flex-direction:column;gap:6px;margin:8px 0;font-size:14px} .parcours-trame dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:4px 12px;margin:0} .parcours-trame dt{font-weight:600} .parcours-trame dd{margin:0;white-space:pre-line} /* (31/10/2026) La justification d'une proposition (« pourquoi cette proposition ») est À PART du texte publiable : filet, étiquette, plus discrète, non sélectionnable. */ .parcours-carte .parcours-pourquoi{display:block;margin-top:8px;padding-top:6px;border-top:1px dashed var(--n300);font-size:12px;font-style:italic;color:var(--n600);text-align:left;-webkit-user-select:none;user-select:none} /* (21/10/2026) La zone de dépôt du parcours (support du partenaire, logo, image reçue), dessinée dans le canevas. */ .depot-zone{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center; padding:30px 24px;border:1.5px dashed var(--rc-trait3);border-radius:16px;background:var(--rc-pale2);cursor:pointer; transition:border-color .15s,background .15s} .depot-zone:hover,.depot-zone.depot-survol{border-color:var(--rc-accent);background:var(--rc-pale)} .depot-zone:focus-within{outline:2px solid var(--rc-accent);outline-offset:2px} .depot-entree{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} .depot-icone{width:48px;height:48px;border-radius:24px;background:var(--rc-pale);color:var(--rc-accent); display:flex;align-items:center;justify-content:center} .depot-zone.depot-survol .depot-icone{background:var(--rc-accent);color:var(--rc-fond)} .depot-titre{font-size:16px;font-weight:600;color:var(--rc-texte)} .depot-ou{font-size:14px;color:var(--rc-doux)} .depot-lien{color:var(--rc-accent);font-weight:600;text-decoration:underline} .depot-formats{font-size:12.5px;color:var(--rc-tres-doux)} /* Le fichier choisi : la zone devient une ligne (type, nom, taille). */ .depot-zone.depot-pret{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:14px 16px; border-style:solid;border-color:var(--rc-trait2);background:var(--rc-fond);text-align:left} .depot-zone.depot-pret>.depot-icone,.depot-zone.depot-pret>.depot-titre,.depot-zone.depot-pret>.depot-ou, .depot-zone.depot-pret>.depot-formats{display:none} .depot-choisi{display:flex;align-items:center;gap:14px;min-width:0;flex-grow:1} .depot-choisi[hidden]{display:none} .depot-type{width:40px;height:40px;border-radius:10px;background:var(--cna-alerte-fond);color:var(--cna-alerte-texte); display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0} .depot-nom{font-size:14.5px;font-weight:600;color:var(--rc-texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .depot-taille{font-size:12.5px;color:var(--rc-doux);white-space:nowrap;margin-left:auto} @media (prefers-reduced-motion: reduce){.depot-zone{transition:none}} /* Les boutons sous la zone : « Envoyer » seul est plein (noir) et ne s'active qu'une fois le fichier choisi ; les autres réponses sont des boutons à contour. */ .depot-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .depot-envoyer,.depot-autre{min-height:40px;padding:0 18px;border-radius:20px;font:inherit;font-size:14px; font-weight:600;cursor:pointer;display:inline-flex;align-items:center} .depot-envoyer{background:var(--rc-texte);color:var(--rc-fond);border:1px solid var(--rc-texte)} .depot-envoyer:disabled{background:var(--rc-pale2);color:var(--rc-tres-doux);border-color:var(--rc-trait2);cursor:not-allowed} .depot-autre{background:var(--rc-fond);color:var(--rc-texte);border:1px solid var(--rc-trait2);font-weight:500} .depot-autre:hover{border-color:var(--rc-trait3)} .depot-envoyer:focus-visible,.depot-autre:focus-visible{outline:2px solid var(--rc-accent);outline-offset:2px} /* (21/10/2026) Parcours « Un événement à partir de mes mails » : les mails à cocher, le tableau « Ce que j'ai trouvé », le brouillon de mail au partenaire. Aucun style en ligne : tout passe par ces règles (CSP). Couleurs et rayons de la refonte (--rc-*). */ /* Les mails à cocher : l'objet en gras, puis qui, quand, un aperçu sur la ligne dessous. */ .parcours-case-detail{align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid var(--rc-trait);border-radius:10px; background:var(--blanc)} .parcours-case-detail+.parcours-case-detail{margin-top:6px} .parcours-case-detail input{margin-top:4px;flex:none} .parcours-case-detail:has(input:checked){border-color:var(--rc-accent);background:var(--rc-pale2)} .parcours-case-texte{display:flex;flex-direction:column;gap:2px;min-width:0} .parcours-case-texte b{font-weight:600;color:var(--rc-texte);overflow-wrap:anywhere} .parcours-case-texte small{font-size:13px;line-height:1.4;color:var(--rc-doux);overflow-wrap:anywhere} /* Le tableau de vérification. */ .mails-trouve{margin:12px 0 0;max-width:100%} .mails-titre{margin:14px 0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rc-doux)} .mails-titre:first-child{margin-top:0} .mails-table{width:100%;border-collapse:collapse;border:1px solid var(--rc-trait);border-radius:12px;overflow:hidden; background:var(--blanc);font-size:14px} .mails-table thead th{padding:8px 12px;text-align:left;font-size:12px;font-weight:600;color:var(--rc-doux); background:var(--rc-pale2);border-bottom:1px solid var(--rc-trait)} .mails-table tbody th,.mails-table tbody td{padding:8px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--rc-trait); overflow-wrap:anywhere} .mails-table tbody tr:first-child th,.mails-table tbody tr:first-child td{border-top:0} .mails-table tbody th{width:28%;font-weight:600;color:var(--rc-texte)} .mails-source{width:30%;font-size:13px;color:var(--rc-doux)} .mails-manque{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px} .mails-manque li{padding:4px 10px;border-radius:999px;font-size:13px;background:var(--cna-alerte-fond); color:var(--cna-alerte-texte);border:1px solid var(--cna-alerte)} .mails-note,.mails-vide{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--rc-doux)} .mails-vide{font-size:14px} @media (max-width:640px){ .mails-table thead{display:none} .mails-table,.mails-table tbody,.mails-table tr,.mails-table th,.mails-table td{display:block;width:auto} .mails-table tbody tr{padding:8px 0;border-top:1px solid var(--rc-trait)} .mails-table tbody tr:first-child{border-top:0} .mails-table tbody th,.mails-table tbody td{padding:2px 12px;border-top:0;width:auto} } /* Le brouillon de mail au partenaire. */ .mails-brouillon{background:var(--blanc);border-color:var(--rc-trait2);min-width:0;max-width:100%} .mails-dest,.mails-objet{margin:0 0 4px;font-size:14px;overflow-wrap:anywhere} .mails-incertain{color:var(--cna-alerte-texte)} .mails-corps{margin:10px 0;padding:12px 14px;border:1px solid var(--rc-trait);border-radius:10px; background:var(--rc-pale2);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55} .mails-brouillon .puces{align-items:center} /* Les pièces jointes repérées. */ .mails-pieces ul{margin:8px 0 0;padding:0 0 0 18px;font-size:14px} .mails-pieces li{margin:4px 0;overflow-wrap:anywhere} .mails-lien{margin:10px 0 0} /* (21/10/2026) Les intertitres de la sélection des mails : « Les plus probables » puis « Autres mails… ». */ .parcours-groupe{margin:22px 0 8px;font-size:.86rem;font-weight:600;color:var(--rc-texte2)} .parcours-groupe:first-child{margin-top:4px} /* (22/10/2026) La page « Suivi des mails » (ex « Agents ») et la veille des mails (« ecran_agents »). (23/10/2026) Refonte épurée validée par Richard : cartes blanches (bord fin, rayon 16 px depuis la V2, 18px 20px), UN bouton plein par carte (la couleur d'action), les autres au contour, renoncer en lien ; l'urgence en petite pastille corail clair, jamais en bord pointillé. Couleurs par variables (le thème sombre les redéfinit). Cibles de 44 px, rangées qui passent à la ligne sur un téléphone. */ /* (24/10/2026) Refonte épurée V2 (jury) : UNE colonne centrée, contenu de 880 px (960 px avec les retraits de 40 px), les cartes en pleine largeur de la colonne ; plus de zone morte à droite. */ .ag{width:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:28px;box-sizing:border-box; padding:28px 40px 56px} /* (22/10/2026) le retrait de l'en-tete (.tete : 40 px) : plus colle au menu */ .ag-avis{margin:0;padding:12px 16px;border-radius:12px;background:var(--action100);color:var(--encre);font-size:14px} .ag-carte{background:var(--blanc);border:1px solid var(--n300);border-radius:16px;padding:18px 20px; display:flex;flex-direction:column;gap:18px;min-width:0} /* (24/10/2026) Refonte épurée V2 (jury) : l'état du suivi dans l'en-tête, une pastille compacte (point turquoise décoratif, fond turquoise pâle, texte vert foncé) et l'interrupteur de mise en pause à côté (40 x 24). En pause : pastille grise. */ .ag-statut{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;background:none} .ag-pastille{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px 0 12px;border-radius:999px; background:var(--action100);color:var(--action700);font-size:13px;font-weight:600;white-space:nowrap} .ag-point{width:8px;height:8px;border-radius:50%;background:var(--marque,var(--action));flex:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--marque,var(--action)) 28%,transparent)} .ag-statut.coupee .ag-pastille{background:var(--n200);color:var(--n800)} .ag-statut.coupee .ag-point{background:var(--n500);box-shadow:none} .ag-interrupteur{display:flex;align-items:center;gap:12px;margin:0} .ag-switch{position:relative;width:40px;height:24px;min-height:24px;border-radius:12px;border:0;padding:2px;cursor:pointer; background:var(--n400);display:flex;justify-content:flex-start;flex:none} .ag-switch::after{content:"";position:absolute;inset:-10px -4px} /* la zone à toucher reste large */ .ag-switch.on{background:var(--action);justify-content:flex-end} .ag-switch span{width:20px;height:20px;border-radius:50%;background:var(--mq-fond);display:block} .ag-switch:focus-visible,.ag-btn:focus-visible,.ag-case:focus-visible,.ag-reglages>summary:focus-visible{ outline:2px solid var(--action);outline-offset:2px} .ag-mode{margin:0;font-size:13px;line-height:1.5;color:var(--n800)} .ag-section{display:flex;flex-direction:column;gap:12px} .ag-section-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px} .ag-titre-section{margin:0;font-size:18px;font-weight:600;color:var(--encre)} .ag-compte{font-weight:500;color:var(--n800)} .ag-sous-titre{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--encre)} .ag-vide{margin:0;padding:16px 18px;border:1px dashed var(--n300);border-radius:12px;font-size:14px;color:var(--n800)} /* (24/10/2026) « À regarder maintenant » sans mail : une carte turquoise pâle qui rassure, pas une boîte en pointillés. */ .ag-tout-va{margin:0;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px; background:var(--action100);border:1px solid var(--action200);font-size:15px;line-height:1.45;color:var(--encre)} .ag-tout-va-icone{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center; justify-content:center;background:color-mix(in srgb,var(--marque,var(--action)) 30%,var(--blanc));color:var(--action700)} .ag-note{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--n800)} /* Les boutons : l'action principale pleine (une par carte), les autres au contour, renoncer en lien. */ .ag-geste{margin:0;display:inline-flex} .ag-btn{opacity:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px; border-radius:10px;border:1px solid var(--n400);background:var(--blanc);color:var(--encre); font:inherit;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap} .ag-btn:hover{border-color:var(--action);color:var(--encre);text-decoration:none} .ag-btn.ag-plein{background:var(--action);border-color:var(--action);color:var(--blanc);font-weight:600} .ag-btn.ag-plein:hover{background:var(--action600,var(--action));color:var(--blanc)} .ag-btn.ag-contour{border-color:var(--action);color:var(--action);font-weight:600} .ag-btn.ag-contour:hover{background:var(--action100);color:var(--action)} .ag-btn.ag-lien{border-color:transparent;background:transparent;color:var(--action);padding:0 8px;font-weight:500} .ag-btn.ag-lien:hover{border-color:transparent;color:var(--action600,var(--action));text-decoration:underline} .ag-btn.ag-icone{width:44px;padding:0;color:var(--n800)} /* Un mail signalé. */ .ag-mail{background:var(--blanc);border:1px solid var(--n300);border-radius:16px;padding:18px 20px; display:flex;flex-wrap:wrap;align-items:center;gap:16px;min-width:0} .ag-avatar{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; font-weight:600;font-size:14px;background:var(--action100);color:var(--action700)} /* (24/10/2026) Un mail urgent : rond corail clair et « ! » (les autres : turquoise pâle et initiales). */ .ag-avatar.urgent{background:var(--rouge100);color:var(--rouge700);font-size:20px;font-weight:700} .ag-mail-texte{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere} .ag-mail-texte p{margin:0} .ag-mail-tete{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px} .ag-mail-tete span{font-size:13px;color:var(--n800)} .ag-mail-tete span.ag-urgent,.ag-mail-tete span.ag-puce{font-size:13px} .ag-mail-objet{font-size:15px} .ag-synthese{font-size:14px;line-height:1.5;color:var(--encre)} .ag-synthese.en-cours{color:var(--n800);font-style:italic} .ag-action{font-size:14px;line-height:1.5;padding:8px 12px;border-radius:10px;background:var(--action100)} .ag-action b{color:var(--action)} .ag-echeance{color:var(--n800)} .ag-mail-question{font-size:13px;color:var(--n800)} /* L'urgence : une petite pastille corail clair, texte foncé (jamais un bord pointillé ni un aplat plein). */ .ag-urgent{display:inline-flex;align-items:center;font-size:13px;font-weight:600;border-radius:999px;padding:3px 10px; background:var(--rouge100);color:var(--rouge700)} .ag-puce{align-self:flex-start;font-size:13px;font-weight:500;color:var(--action);background:var(--action100); border-radius:999px;padding:3px 10px} .ag-puce.neutre{color:var(--n800);background:var(--n200)} .ag-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px} /* (22/10/2026) Une réponse attendue : le sablier dans la couleur d'action ; reçue, l'avatar passe au neutre. */ .ag-attente .ag-avatar{background:var(--action100);color:var(--action)} .ag-attente.recue .ag-avatar{background:var(--n200);color:var(--n800)} /* (23/10/2026) Le repérage des mails urgents (dans « Réglages du suivi ») : la ligne de l'interrupteur, la raison de l'urgence, l'avis sur l'assistant, les expéditeurs écartés. */ .ag-reperage{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 18px;border-radius:12px; border:1px solid var(--n300);background:var(--n100)} .ag-reperage.on{background:var(--action100)} .ag-reperage-texte{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:3px} .ag-reperage-texte p{margin:0;font-size:13px;line-height:1.45;color:var(--n800)} .ag-reperage-texte p b{font-size:15px;color:var(--encre)} .ag-raison{margin:0;font-size:14px;line-height:1.5;padding:8px 12px;border-radius:10px; background:var(--rouge100);color:var(--encre)} .ag-raison b{color:var(--rouge700)} .ag-avis-agent{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-top:10px; border-top:1px solid var(--n200);font-size:13px;color:var(--n800)} .ag-avis-agent .ag-btn.ag-lien{min-height:36px} .ag-ecartes{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .ag-ecarte{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 4px 0 12px;border-radius:999px; background:var(--n200);font-size:13px} .ag-ecarte .ag-btn.ag-icone{width:32px;min-height:32px;border:0;background:transparent} /* (23/10/2026) L'analyse de la réponse arrivée : complète (couleur d'action) ou ce qui manque (couleur des alertes). */ .ag-analyse{margin:0;font-size:14px;line-height:1.5;padding:8px 12px;border-radius:10px} .ag-analyse.complete{background:var(--action100);color:var(--encre)} .ag-analyse.complete b{color:var(--action)} .ag-analyse.incomplete{background:var(--cna-alerte-fond);color:var(--cna-alerte-texte)} .ag-obtenus{margin:0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--n800)} /* Mes alertes : une phrase par alerte, « Afficher sur l'accueil », et un menu « … » (pause, suppression). */ .ag-liste{background:var(--blanc);border:1px solid var(--n300);border-radius:16px;display:flex;flex-direction:column} .ag-regle{display:flex;align-items:center;gap:12px 16px;padding:16px 20px;border-top:1px solid var(--n200)} .ag-regle:first-child{border-top:0} .ag-regle.en-pause{color:var(--n800)} .ag-regle-texte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px} .ag-regle-nom{font-weight:600;font-size:15px;line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:8px; overflow-wrap:anywhere} .ag-regle-perso{font-size:13px;color:var(--n800)} .ag-badge{font-size:13px;font-weight:500;color:var(--n800);background:var(--n200);border-radius:999px;padding:2px 8px} .ag-case{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 6px 0 0;border:0;background:none; font:inherit;font-size:14px;color:var(--encre);cursor:pointer} .ag-case span{width:18px;height:18px;border-radius:4px;border:2px solid var(--n500);box-sizing:border-box;flex:none} .ag-case.coche span{background:var(--action);border-color:var(--action); box-shadow:inset 0 0 0 3px var(--blanc)} .ag-menu{position:relative;flex:none} .ag-menu>summary{list-style:none} .ag-menu>summary::-webkit-details-marker{display:none} .ag-menu[open]>summary{border-color:var(--action)} .ag-menu-liste{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:230px;padding:6px; background:var(--blanc);border:1px solid var(--n300);border-radius:12px;box-shadow:var(--ombre); display:flex;flex-direction:column} .ag-menu-liste .ag-geste{display:flex} .ag-btn.ag-entree{width:100%;justify-content:flex-start;border-color:transparent;background:transparent;padding:0 12px} .ag-btn.ag-entree:hover{background:var(--n100);border-color:transparent} .ag-btn.ag-entree.ag-danger{color:var(--rouge600)} /* Le bas de la page : « Réglages du suivi » (fermé) et la note. */ .ag-bas{display:flex;flex-direction:column;gap:14px} .ag-reglages{background:var(--blanc);border:1px solid var(--n300);border-radius:16px} .ag-reglages>summary{min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:10px 20px;cursor:pointer;font-size:15px;font-weight:600;color:var(--encre);list-style:none} .ag-reglages>summary::-webkit-details-marker{display:none} .ag-reglages>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--n800); border-bottom:2px solid var(--n800);transform:rotate(45deg);margin-top:-4px;flex:none} .ag-reglages[open]>summary::after{transform:rotate(-135deg);margin-top:4px} .ag-reglages-corps{display:flex;flex-direction:column;gap:14px;padding:0 20px 18px} /* « Ajouter une alerte » : le formulaire à gauche, les mails qui y répondent à droite. */ .ag-nouvelle{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start} .ag-formulaire{flex:1 1 340px;gap:18px} .ag-reponses{flex:1.4 1 420px;gap:16px} .ag-reponses>p{margin:0;font-size:15px} .ag-champ{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500} .ag-champ input{min-height:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--n300);border-radius:10px; background:var(--blanc);color:var(--encre);font:inherit;font-size:15px;font-weight:400} .ag-champ input:focus{outline:2px solid var(--action);outline-offset:1px;border-color:var(--action)} .ag-aide,.ag-facultatif{font-size:13px;font-weight:400;color:var(--n800)} .ag-champ-case{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px} .ag-champ-case input{width:20px;height:20px;accent-color:var(--action)} .ag-exemples{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .ag-exemple{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--fond,var(--n100))} .ag-exemple>div{flex:1 1 auto;min-width:0;overflow-wrap:anywhere} .ag-exemple p{margin:0;font-size:14px} .ag-exemple-objet{color:var(--n800)} .ag-badge-sur,.ag-badge-confirmer{flex:none;font-size:13px;font-weight:600;border-radius:999px;padding:3px 10px} .ag-badge-sur{color:var(--action);background:var(--action100)} .ag-badge-confirmer{color:var(--n800);background:var(--n200)} .ag-pied{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--n200)} /* (23/10/2026) La carte de l'accueil (veille des mails) : une carte blanche, un carré d'icône corail clair, un titre (« 1 mail urgent »), une ligne courte et UN bouton plein « Voir ». Les mails restent dessous, sans cadre. */ .ag-accueil{display:flex;flex-direction:column;gap:14px;padding:18px 20px;border-radius:14px; background:var(--blanc);border:1px solid var(--n300)} .ag-accueil-tete{display:flex;flex-wrap:wrap;align-items:center;gap:14px} .ag-accueil-icone{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center; justify-content:center;background:var(--rouge100);color:var(--rouge700)} .ag-accueil.ag-arrivee .ag-accueil-icone{background:var(--action100);color:var(--action)} .ag-accueil-texte{flex:1 1 220px;min-width:0} .ag-accueil-texte h2{margin:0;font-size:17px;font-weight:600;color:var(--encre)} .ag-accueil-texte p{margin:2px 0 0;font-size:14px;color:var(--n800)} .ag-accueil-liste{display:flex;flex-direction:column;gap:8px} .ag-accueil .ag-mail{border:0;padding:14px 16px;border-radius:12px;background:var(--n100)} .ag-accueil .ag-attente.recue .ag-avatar{background:var(--blanc);color:var(--action)} .ag-accueil-note{margin:0;font-size:13px;color:var(--n800)} /* (23/10/2026) Le tableau des disponibilités (parcours « Quand planifier un événement ») : la date choisie au milieu, soulignée ; libre en vert d'action, occupé ou absent dans la couleur des alertes. Il défile en largeur sur un téléphone. */ .dispo-defile{overflow-x:auto;max-width:100%} .dispo-tableau{min-width:560px} .dispo-tableau td{font-size:13px;line-height:1.4;vertical-align:top} .dispo-tableau th.dispo-choisi{border-bottom:3px solid var(--action)} .dispo-tableau td.dispo-choisi{box-shadow:inset 0 0 0 9999px var(--teinte-jour-choisi)} .dispo-libre{background:var(--action100);color:var(--encre)} .dispo-partiel{background:var(--cna-alerte-fond)} .dispo-occupe,.dispo-absent{background:var(--cna-alerte-fond);color:var(--cna-alerte-texte)} .dispo-inconnu{color:var(--n800);font-style:italic} .dispo-cna th{font-style:italic} @media (max-width:640px){ .ag{padding:20px 16px 40px} .ag-carte{padding:16px} .ag-regle{flex-wrap:wrap} } /* (23/10/2026) Boucle de vérification : titres de sections discrets (comme l'accueil), l'état du suivi dans l'en-tête. */ .ag-titre-section{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--n800)} .ag-titre-section .ag-compte{font-weight:800;color:var(--n800)} .tete-outils .ag-statut{margin:0} /* (24/10/2026) Sur un téléphone, la pastille garde sa place dans l'en-tête et peut passer à la ligne. */ @media (max-width:640px){.ag-pastille{white-space:normal}} /* (24/10/2026) V2 (jury) : le titre de la page et l'état du suivi s'alignent sur la colonne des cartes (880 px). */ @media (min-width:761px){ .tete:has(~ .thr > .ag){padding-left:max(40px,calc((100% - 880px) / 2))} } /* (23/10/2026) « Mes parcours » et « Personnaliser » (chat/ecran_tuiles.py), maquette validée par Richard : le titre et le bouton au-dessus des tuiles ; en mode choix, un bandeau couleur d'action, les tuiles affichées au filet plein d'action, les masquées en pointillés grisés. La mise en forme seulement : les tuiles restent celles des parcours. */ .mes-parcours{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0} .mes-parcours-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px} .mes-parcours-tete h2{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--n800)} .mes-parcours-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .tuiles-masques{font-size:13px;color:var(--n800)} .bouton-regler{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px; border:1px solid var(--n400);border-radius:10px;background:var(--blanc);color:var(--encre);font:inherit; font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap} .bouton-regler:hover{border-color:var(--action);color:var(--encre);text-decoration:none} .bouton-regler:focus-visible,.tuile-choix:focus-visible{outline:2px solid var(--action);outline-offset:2px} .bouton-regler.contour{min-height:44px;border-color:var(--action);color:var(--action);font-weight:600} .bouton-regler.plein{min-height:44px;border-color:var(--action);background:var(--action);color:var(--blanc);font-weight:600} .bouton-regler.plein:hover{background:var(--action600,var(--action));color:var(--blanc)} .tuiles-vide{margin:0;padding:16px 18px;border:1px dashed var(--n300);border-radius:12px;font-size:14px;color:var(--n800)} /* Le mode choix. */ .choix-bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;padding:20px 24px;border-radius:16px; background:var(--action100);border:1px solid var(--action200,var(--action100))} .choix-texte{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:4px} .choix-texte h2{margin:0;font-size:18px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--encre)} .choix-texte p{margin:0;font-size:14px;line-height:1.45;color:var(--encre)} .choix-compte{font-size:14px;font-weight:600;color:var(--action)} .choix-gestes{display:flex;flex-wrap:wrap;gap:8px} .choix-gestes form{margin:0;display:inline-flex} .tuiles-depart .tuile-depart.tuile-choix{border:2px solid var(--action)} .tuiles-depart .tuile-depart.tuile-choix.masquee{border:1px dashed var(--n500);background:var(--n100); color:var(--n800)} .tuiles-depart .tuile-depart.tuile-choix.masquee svg{color:var(--n800)} .tuile-choix-tete{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px} .tuiles-depart .tuile-depart .tuile-etat{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px; font-size:13px;font-weight:600;line-height:1.3;background:var(--action100);color:var(--action)} .tuiles-depart .tuile-depart.masquee .tuile-etat{background:var(--n200);color:var(--n800)} .tuiles-depart .tuile-depart .tuile-etat svg{width:14px;height:14px;color:currentColor} .choix-note{margin:0;font-size:13px;color:var(--n800)} /* ── (24/10/2026) Refonte épurée V2 (jury) : six grandes tuiles, puis « Aussi » en petites ─────────────────────────────── Le groupe porte ``data-groupe`` (chat/ecran_tuiles.py) : seul le rangement change, les boutons restent ceux des parcours. Le mode « Choisir mes parcours » n'a pas cet attribut : il garde sa grille. Turquoise = décor seulement (jamais un texte). */ .mes-parcours .tuiles-depart[data-groupe]{display:grid;gap:14px;justify-content:stretch} .mes-parcours .tuiles-depart[data-groupe="grandes"]{grid-template-columns:repeat(3,minmax(0,1fr))} .mes-parcours .tuiles-depart[data-groupe="aussi"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .mes-parcours .tuiles-depart[data-groupe] .tuile-depart{position:relative;box-sizing:border-box;width:100%; border:1px solid var(--n400);border-radius:16px;background:var(--blanc);color:var(--encre)} .mes-parcours .tuiles-depart[data-groupe] .tuile-depart:hover{border-color:var(--marque,var(--rc-accent)); box-shadow:var(--ombre-douce);text-decoration:none;color:var(--encre)} .mes-parcours .tuiles-depart[data-groupe] .tuile-depart:focus-visible{outline:2px solid var(--action);outline-offset:2px} @media (prefers-reduced-motion:no-preference){ .mes-parcours .tuiles-depart[data-groupe] .tuile-depart{transition:transform .15s ease,box-shadow .15s ease, border-color .15s ease} .mes-parcours .tuiles-depart[data-groupe] .tuile-depart:hover{transform:translateY(-2px)} } .mes-parcours .tuile-icone{width:40px;height:40px;border-radius:12px;flex:none;display:inline-flex;align-items:center; justify-content:center;background:color-mix(in srgb,var(--marque,var(--rc-accent)) 16%,var(--blanc))} .mes-parcours .tuiles-depart .tuile-depart .tuile-icone svg{width:22px;height:22px;color:var(--action)} .mes-parcours .tuiles-depart .tuile-depart b{font-size:16px;font-weight:800;line-height:1.3;color:var(--encre)} .mes-parcours .tuiles-depart .tuile-depart .tuile-desc{font-size:14px;line-height:1.45;color:var(--n800)} /* Grandes tuiles : de même hauteur, l'icône au-dessus du titre. */ .mes-parcours .tuiles-depart[data-groupe="grandes"] .tuile-depart{min-height:132px;height:100%;padding:18px;gap:8px; justify-content:flex-start} /* Petites tuiles : une ligne, l'icône à gauche, 52 px de haut. Le sous-titre reste dans la page (lu par la voix), caché à l'oeil. */ .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart{flex-direction:row;align-items:center;gap:10px; min-height:52px;padding:8px 12px;border-radius:14px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone{width:32px;height:32px;border-radius:10px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone svg{width:18px;height:18px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart b{font-size:14px;font-weight:700;line-height:1.25} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-desc{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} @media (max-width:900px){ .mes-parcours .tuiles-depart[data-groupe="grandes"]{grid-template-columns:repeat(2,minmax(0,1fr))} .mes-parcours .tuiles-depart[data-groupe="aussi"]{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Téléphone : l'accueil n'a pas de tuiles (« chat simple ») ; « Mes parcours » suit. */ @media (max-width:767px){ .mes-parcours{display:none} } /* (23/10/2026) « Disposition de l'image » sous l'affiche CNA : les cinq dispositions et le réglage à la main. */ .affiche-reglage{margin:8px 0 4px;border:1px solid var(--rc-trait2);border-radius:10px;background:var(--rc-fond)} .affiche-reglage>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;cursor:pointer;font-size:14px;color:var(--rc-texte)} .affiche-reglage>summary svg{flex:none} .affiche-reglage[open]>summary{border-bottom:1px solid var(--rc-trait2)} .affiche-reglage-form{display:flex;flex-direction:column;gap:12px;padding:12px 14px 14px} .affiche-dispositions{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0} .affiche-dispositions legend{padding:0;margin:0 0 6px;font-size:13px;color:var(--rc-doux)} .affiche-choix{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--rc-trait3);border-radius:999px;font-size:13px;cursor:pointer;color:var(--rc-texte)} .affiche-choix:has(input:checked){border-color:var(--rc-accent);color:var(--rc-accent);font-weight:600} .affiche-choix input{margin:0;accent-color:var(--rc-accent)} .affiche-editeur{display:flex;flex-direction:column;gap:10px;min-width:0} .affiche-modes{display:flex;flex-wrap:wrap;gap:8px} .affiche-modes .bouton-doux{min-height:36px;padding:0 12px;font-size:13px} .affiche-mode.actif{border-color:var(--rc-accent);color:var(--rc-accent);font-weight:600} .affiche-apercu{display:block;width:100%;max-width:720px;height:auto;border-radius:8px;touch-action:none;user-select:none;-webkit-user-select:none} .affiche-contour{fill:transparent;stroke:#fff;stroke-width:2;stroke-dasharray:10 8;cursor:grab} .affiche-poignee{fill:#fff;stroke:var(--rc-accent);stroke-width:4;cursor:grab} .affiche-calque{pointer-events:none} .affiche-voile{display:none;pointer-events:none} .affiche-curseurs{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--rc-doux)} .affiche-curseurs label{display:flex;align-items:center;gap:8px} .affiche-curseurs input[type=range]{width:160px;max-width:100%;accent-color:var(--rc-accent)} .affiche-editeur .doux{margin:0;font-size:13px} /* Le script pose data-disposition et data-pret : sans lui, ni poignées ni modes (ils ne serviraient à rien). */ .affiche-editeur:not([data-pret]) .affiche-poignee,.affiche-editeur:not([data-pret]) .affiche-modes{display:none} .affiche-editeur[data-disposition=pleine] .affiche-voile{display:inline} .affiche-editeur[data-disposition=pleine] .affiche-contour,.affiche-editeur[data-disposition=pleine] .affiche-poignee, .affiche-editeur[data-disposition=pleine] .affiche-modes,.affiche-editeur[data-disposition=sans] .affiche-contour, .affiche-editeur[data-disposition=sans] .affiche-poignee,.affiche-editeur[data-disposition=sans] .affiche-modes, .affiche-editeur[data-disposition=sans] .affiche-curseurs{display:none} .affiche-editeur[data-disposition=horizontale] .affiche-rotation,.affiche-editeur[data-disposition=pleine] .affiche-rotation{display:none} .affiche-editeur[data-disposition=horizontale] .affiche-poignee{cursor:ns-resize} .affiche-editeur[data-mode=image] .affiche-apercu{cursor:move} .affiche-editeur[data-mode=image] .affiche-contour{cursor:move} .affiche-degres{min-width:3.5em;font-variant-numeric:tabular-nums;color:var(--rc-texte)} /* (01/11/2026) Les bandeaux de l'aperçu : on les fait glisser et on tire leur coin dans le mode « Déplacer un bandeau ». */ .affiche-modes-bandeaux{display:flex;flex-wrap:wrap;gap:8px} .affiche-modes-bandeaux .bouton-doux{min-height:36px;padding:0 12px;font-size:13px} .affiche-editeur:not([data-pret]) .affiche-modes-bandeaux{display:none} .affiche-bandeau-texte{font-family:Roboto,system-ui,sans-serif;font-weight:800;pointer-events:none} .affiche-bandeau-poignee{fill:#fff;stroke:var(--rc-accent);stroke-width:3;display:none} .affiche-bandeau{cursor:move} /* (01/11/2026) Le bandeau règle ses propres bandeaux : la zone de l'image et ses poignées s'effacent, et ne prennent plus le doigt. */ .affiche-editeur[data-mode=bandeau] .affiche-poignee{display:none} .affiche-editeur[data-mode=bandeau] .affiche-contour{pointer-events:none;stroke-opacity:.35} .affiche-editeur[data-mode=bandeau] .affiche-bandeau-forme{stroke:#fff;stroke-width:2;stroke-dasharray:8 6} .affiche-editeur[data-mode=bandeau] .affiche-bandeau-poignee{display:inline;cursor:nwse-resize} /* (01/11/2026) La poignée de rotation : un rond au bout d'une tige, au-dessus du bandeau, dans le mode « Déplacer un bandeau ». */ .affiche-bandeau-tige{stroke:#fff;stroke-width:2;display:none} .affiche-bandeau-rotation{fill:#fff;stroke:var(--rc-accent);stroke-width:3;display:none;cursor:grab} .affiche-editeur[data-mode=bandeau] .affiche-bandeau-tige,.affiche-editeur[data-mode=bandeau] .affiche-bandeau-rotation{display:inline} /* (01/11/2026, décision de Richard) La couleur de chaque bandeau : les couleurs de la charte (échantillons) et une saisie libre. */ .affiche-bandeau-couleurs{display:flex;flex-direction:column;gap:10px;margin:8px 0} .bandeau-couleur{border:1px solid var(--rc-trait2);border-radius:10px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px 8px;min-width:0} .bandeau-couleur legend{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--rc-texte);padding:0 4px} .bandeau-couleur .echantillon{flex:none} .bandeau-couleur .affiche-choix{min-height:32px;padding:0 10px 0 8px} .bandeau-couleur label:not(.affiche-choix){display:flex;align-items:center;gap:8px;font-size:13px;width:100%} .bandeau-couleur input[type=text]{min-height:34px;max-width:220px} /* (23/10/2026) Le visuel en cours dans un PANNEAU à droite de la discussion (maquette Claude Design « Visuel en panneau latéral ») : l'image ne remonte plus avec le fil. Largeur réglable (poignée, script 42-panneau-visuel.js), repli en bande, réglage de la disposition dans le panneau élargi. Sur téléphone et dans une fenêtre trop étroite pour le poser à côté (moins de 1240 px) : épinglé en haut du fil, repliable. */ :root{--panneau-visuel-l:520px} /* La place que prend le panneau : jamais plus de 820 px, ni de quoi laisser moins de 600 px à la discussion (le menu de gauche compté) ; élargi pour le réglage de la disposition ; 64 px replié. L'en-tête et la discussion s'en écartent. */ .app:has(.panneau-visuel){ --panneau-visuel-max:max(360px,min(820px,62vw,calc(100vw - var(--largeur-cote,260px) - 600px))); --place-panneau:min(var(--panneau-visuel-l),var(--panneau-visuel-max))} .app:has(.panneau-visuel details.affiche-reglage[open]){--place-panneau:var(--panneau-visuel-max)} /* Replié, la bande de 64 px l'emporte toujours, même si le réglage de la disposition est resté ouvert. */ .app:has(.panneau-visuel.replie),.app:has(.panneau-visuel.replie details.affiche-reglage[open]){--place-panneau:64px} .panneau-visuel{box-sizing:border-box;color:var(--rc-texte);background:var(--rc-pied)} .panneau-visuel *{box-sizing:border-box} .panneau-visuel-cadre{display:flex;flex-direction:column;min-width:0} .panneau-visuel-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 10px 20px; border-bottom:1px solid var(--rc-trait)} .panneau-visuel-titres{min-width:0;display:flex;flex-direction:column;gap:2px} .panneau-visuel-titre{margin:0;font-weight:650;font-size:15px} .panneau-visuel-sous-titre{margin:0;font-size:12px;color:var(--rc-doux);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .panneau-visuel-gestes{display:flex;gap:2px;flex:none} .panneau-visuel-gestes .icone-btn{width:40px;height:40px;color:var(--rc-doux)} .panneau-visuel-corps{display:flex;flex-direction:column;gap:16px;padding:20px} .panneau-visuel-image{display:block;width:100%;height:auto;border-radius:10px; box-shadow:0 1px 2px rgba(29,35,39,.08),0 8px 24px rgba(29,35,39,.10)} .panneau-visuel-statut{margin:0;padding:10px 12px;border-radius:10px;background:var(--rc-pale2); color:var(--rc-texte);font-size:13px} .panneau-visuel .visuel-pied{margin:0} .panneau-visuel .affiche-reglage{margin:0} .panneau-visuel-pied{flex:none;padding:12px 20px;border-top:1px solid var(--rc-trait);background:var(--blanc)} .panneau-visuel-pied .parcours-decisions{margin:0} .panneau-visuel-pied .puces{justify-content:flex-end} .panneau-versions{display:flex;flex-direction:column;gap:8px;margin:0} .panneau-versions-titre{margin:0;font-size:12px;font-weight:600;color:var(--rc-doux)} .panneau-versions-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px} .panneau-version{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:10px;cursor:pointer;text-align:left; border:1px solid var(--rc-trait2);background:var(--blanc);color:var(--rc-texte);font:inherit; font-size:12px;min-height:44px} .panneau-version img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px} .panneau-version span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--rc-doux)} .panneau-version strong{color:var(--rc-texte)} .panneau-version.courante{border:2px solid var(--rc-accent);cursor:default} .panneau-version:not(.courante):hover{border-color:var(--rc-accent)} .panneau-version:disabled:not(.courante){opacity:.6;cursor:default} .panneau-visuel-rail{display:none;border:0;background:transparent;color:var(--rc-texte);font:inherit; cursor:pointer} .panneau-visuel-poignee{display:none} .panneau-visuel-poignee:focus-visible,.panneau-visuel-rail:focus-visible,.panneau-version:focus-visible{ outline:2px solid var(--rc-accent);outline-offset:2px} /* La carte que le fil garde du visuel : elle ouvre le panneau. */ .carte-visuel{display:inline-flex;align-items:center;gap:12px;margin:6px 0;padding:8px 14px 8px 8px;border-radius:12px; border:1px solid var(--rc-accent);background:var(--rc-pale2);color:var(--rc-texte); text-decoration:none;max-width:100%} .carte-visuel:hover{background:var(--rc-pale)} .carte-visuel-image{display:block;width:96px;height:54px;object-fit:cover;border-radius:6px;flex:none} .carte-visuel-texte{display:flex;flex-direction:column;gap:2px;min-width:0} .carte-visuel-ou{font-size:12px;color:var(--rc-accent)} /* Grand écran (1240 px et plus) : à droite, toute la hauteur ; la discussion se pousse d'autant. */ @media (min-width:1240px){ .panneau-visuel{position:fixed;top:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:row; width:var(--place-panneau);border-left:1px solid var(--rc-trait2)} .app:has(.panneau-visuel) #principal{margin-right:var(--place-panneau)} .panneau-visuel-poignee{display:flex;width:10px;flex:none;cursor:col-resize;align-items:center;justify-content:center; touch-action:none} .panneau-visuel-poignee::after{content:"";width:4px;height:40px;border-radius:4px;background:var(--rc-trait3)} .panneau-visuel-poignee:hover::after{background:var(--rc-accent)} .panneau-visuel-cadre{flex:1 1 auto;height:100%} .panneau-visuel-tete{height:64px;flex:none} .panneau-visuel-corps{flex:1 1 auto;min-height:0;overflow-y:auto} .panneau-visuel.replie .panneau-visuel-cadre,.panneau-visuel.replie .panneau-visuel-poignee{display:none} .panneau-visuel.replie .panneau-visuel-rail{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%; padding:18px 0} .panneau-visuel-rail img{width:44px;height:25px;object-fit:cover;border-radius:4px} .panneau-visuel-rail span{writing-mode:vertical-rl;font-size:12px;font-weight:600} } /* Téléphone et fenêtre étroite : épinglé en haut du fil pendant qu'on le fait défiler ; replié, une ligne avec la vignette. */ @media (max-width:1239px){ .panneau-visuel{position:sticky;top:0;z-index:5;margin:0 0 12px;border-bottom:1px solid var(--rc-trait2); box-shadow:0 6px 12px -8px rgba(29,35,39,.25)} .panneau-visuel-gestes [data-panneau="agrandir"]{display:none} .panneau-visuel-gestes [data-panneau="replier"] svg{transform:rotate(-90deg)} .panneau-visuel-tete{padding:6px 6px 6px 12px} .panneau-visuel-corps{padding:10px 12px;gap:10px;max-height:46vh;overflow-y:auto} /* Épinglée en haut, l'affiche garde de la place pour la discussion : un bon tiers de l'écran au plus. */ .panneau-visuel-image{width:auto;max-width:100%;max-height:34vh;margin:0 auto} .panneau-visuel .animation-lecteur{max-height:34vh;width:auto;max-width:100%} .panneau-visuel-pied{padding:8px 12px} .panneau-versions-grille{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))} .panneau-visuel.replie .panneau-visuel-cadre{display:none} .panneau-visuel.replie .panneau-visuel-rail{display:flex;align-items:center;gap:10px;width:100%;min-height:52px; padding:6px 12px} .panneau-visuel-rail img{width:56px;height:31px;object-fit:cover;border-radius:5px} .panneau-visuel-rail span{font-weight:600} .panneau-visuel-rail::after{content:"Afficher";margin-left:auto;color:var(--rc-accent);font-weight:600} } @media (prefers-reduced-motion:reduce){.panneau-visuel{transition:none}} .panneau-visuel-tire,.panneau-visuel-tire *{user-select:none;-webkit-user-select:none;cursor:col-resize} /* L'en-tête (barre d'étapes fixée à droite, titre) se partage la place SANS celle du panneau (47-refonte-entete.css). */ @media (min-width:1240px){ .app:has(.panneau-visuel) .parcours-barre{right:calc(200px + var(--place-panneau))} .app:has(.panneau-visuel){ --place-barre:min(600px,max(240px,calc(100vw - var(--largeur-cote,260px) - var(--place-panneau) - 200px - 260px - 48px)))} .app:has(.panneau-visuel) .tete-titre{ max-width:calc(100vw - var(--largeur-cote,260px) - var(--place-panneau) - 200px - var(--place-barre) - 64px)} } /* Panneau ouvert : l'en-tête n'a plus la place de la barre d'étapes ET du titre. La barre se cache à l'œil (elle reste lue par les lecteurs d'écran) et revient quand le panneau est replié ; le titre reprend sa place. */ @media (min-width:1240px){ .app:has(.panneau-visuel:not(.replie)) .parcours-barre{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .app:has(.panneau-visuel:not(.replie)) .tete-titre{max-width:none;flex:1 1 auto;min-width:0} } /* (23/10/2026) Richard : « il y a du chevauchement ». À côté du panneau, la zone de saisie est plus étroite : le nom du modèle se coupe (« … ») après son lieu, au lieu de passer sous « Guidée ». Le nom entier reste dans son menu et pour le lecteur d'écran (32-composeur-pleine-largeur.css le gardait toujours entier). */ .app:has(.panneau-visuel) .pastille-modele>summary{max-width:100%} .app:has(.panneau-visuel) .pastille{min-width:0;max-width:100%;overflow:hidden} .app:has(.panneau-visuel) .pastille .pastille-nom{flex:0 1 auto;min-width:3em;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .app:has(.panneau-visuel) .pastille .pastille-pays{flex:0 1000 auto} /* (24/10/2026) Richard : « l'artefact à droite doit pouvoir s'agrandir à la souris comme c'est actuellement le cas mais également s'ouvrir en grand ». Plein écran : le panneau couvre toute la fenêtre (grand écran comme téléphone), l'image tient en entier ; le même bouton ou Échap le rend à sa place. La page dessous ne défile plus. */ .panneau-visuel.plein-ecran{position:fixed;inset:0;z-index:60;width:auto;margin:0;display:flex;flex-direction:row; border:0;box-shadow:none} .panneau-visuel.plein-ecran .panneau-visuel-poignee,.panneau-visuel.plein-ecran .panneau-visuel-rail{display:none} .panneau-visuel.plein-ecran .panneau-visuel-cadre{display:flex;flex:1 1 auto;height:100%;min-width:0} .panneau-visuel.plein-ecran .panneau-visuel-tete{height:64px;flex:none} .panneau-visuel.plein-ecran .panneau-visuel-corps{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto; align-items:center} .panneau-visuel.plein-ecran .panneau-visuel-image{width:auto;max-width:100%;max-height:calc(100vh - 220px);margin:0 auto; object-fit:contain} .panneau-visuel.plein-ecran .animation-lecteur{width:auto;max-width:100%;max-height:calc(100vh - 220px)} .panneau-visuel.plein-ecran .panneau-visuel-gestes [data-panneau="agrandir"]{display:none} .panneau-visuel-gestes [data-panneau="plein"][aria-pressed="true"]{color:var(--action)} html.panneau-plein{overflow:hidden} /* ── « Mon compte » : une page, cinq onglets (23/10/2026) ─────────────────── Refonte épurée validée par Richard : « plus épuré, plus simple pour les utilisateurs non experts ». Affichage seulement ; que des jetons du thème (ils suivent le thème sombre). Carte = fond blanc, trait fin, rayon 14 px ; bouton principal = aplat de la couleur d'action, 44 px, rayon 10 px. */ /* (24/10/2026) Refonte épurée V2 (jury) : UNE colonne. Le titre, les onglets et le contenu ont le même bord gauche et la même largeur (880 px, centrée). La réserve de la barre de défilement est faite des deux côtés (« scrollbar-gutter ») : le contenu, qui défile, et l'en-tête, qui ne défile pas, se centrent pareil. */ @media (min-width:761px){ .tete:has(~ .onglets-compte){padding-left:max(40px,calc((100% - 880px) / 2))} .thr:has(> .compte-page){padding:0 30px;scrollbar-gutter:stable both-edges} } /* La rangée d'onglets : défile à l'horizontale sur téléphone. 15 px, 46 px de haut, 3 px de turquoise sous l'onglet courant (le turquoise décore, il n'écrit jamais). */ .onglets-compte{display:flex;flex-wrap:nowrap;gap:4px;margin:0 auto;padding:0;width:min(880px,calc(100% - 80px));box-sizing:border-box; border-bottom:1px solid var(--n300);overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:thin; scrollbar-color:var(--n400) transparent} .onglet-compte-lien{flex:none;min-height:46px;display:inline-flex; align-items:center;padding:0 16px;margin-bottom:-1px;white-space:nowrap; border-bottom:3px solid transparent;color:var(--n800);font-size:15px; font-weight:500;text-decoration:none} .onglet-compte-lien:hover{color:var(--encre);text-decoration:none; border-bottom-color:var(--n400)} .onglet-compte-lien[aria-current=page]{color:var(--encre);font-weight:600; border-bottom-color:var(--marque)} .onglet-compte-lien:focus-visible{outline:2px solid var(--action); outline-offset:-2px;border-radius:6px} /* Le contenu : des cartes, un même espacement. */ .liste.compte-page{max-width:880px;padding:24px 0 40px} .compte-page .carte-relecture, .compte-page .fenetre-compte, .compte-page .hist-bloc, .compte-page .carte-geste{background:var(--blanc);border:1px solid var(--n300); border-radius:14px;box-shadow:none;padding:20px 22px;margin:0 0 16px} .compte-page .fenetre-compte{max-width:520px} .compte-page .carte-relecture h2, .compte-page .hist-bloc h2{margin:0 0 10px;font-size:17px;font-weight:600} .compte-page .carte-relecture.petite{padding:14px 18px} /* Le bouton principal : plein, 44 px, rayon 10 px. */ .compte-page .btn-envoi, .compte-page .bouton-plein{min-height:44px;display:inline-flex; align-items:center;justify-content:center;padding:0 18px;margin-top:8px; border-radius:10px;font-size:15px;font-weight:600} .compte-page .fenetre-compte-pied .bouton-plein{background:var(--action); border-color:var(--action);margin-top:0} .compte-page .fenetre-compte-pied .bouton-plein:hover{background:var(--action600); border-color:var(--action600)} /* Le texte d'introduction : une phrase, puis « en détail » à un clic. */ .compte-page .compte-intro{margin:0 0 8px;font-size:15px;line-height:1.5; color:var(--n800)} .compte-detail{margin:0 0 16px} .compte-detail summary{display:inline-flex;align-items:center;min-height:44px; cursor:pointer;font-size:14px;font-weight:600;color:var(--action700)} .compte-detail summary:hover{color:var(--action600)} .compte-detail p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--n800)} /* (24/10/2026) Refonte épurée V2 (jury) : « Apprendre de mes habitudes », l'interrupteur à droite ; plus de pastille « Activé » (l'état est dans « aria-checked »). */ .profil-reglage-ligne{display:flex;align-items:flex-start;justify-content:space-between;gap:20px} .profil-reglage-texte{flex:1;min-width:0} .profil-reglage-texte h2{margin:0 0 6px} .profil-reglage-texte .compte-intro{margin:0 0 4px} .profil-reglage-texte .compte-detail{margin:0} .profil-reglage .profil-bascule{flex:none} .profil-reglage .interrupteur{min-height:44px;min-width:56px;justify-content:center;padding:0 4px} .profil-reglage .interrupteur-piste{width:48px;height:28px} .profil-reglage .interrupteur-piste::after{top:3px;left:3px;width:22px;height:22px} .profil-reglage .interrupteur[aria-checked="true"] .interrupteur-piste::after{left:23px} .profil-reglage .profil-coupe{margin:12px 0 0;font-size:14px} /* Tout le texte d'information : 13 px au moins, un gris qui ne passe pas sous --n800. */ .compte-page .doux{font-size:14px;opacity:1;color:var(--n800)} .compte-page .profil-quand, .compte-page .profil-geste-n, .compte-page .profil-prive{font-size:13px;color:var(--n800)} .compte-page .profil-prive{font-size:14px} .compte-page .profil-coupe, .compte-page .profil-faible, .compte-page .profil-semaines{font-size:14px} /* « Ces 90 derniers jours » : trois grands nombres, puis le détail dans un bloc fermé. */ .profil-stats{list-style:none;margin:0 0 12px;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .profil-stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px; border-radius:12px;background:var(--action100)} .profil-stat-n{font-size:30px;font-weight:800;line-height:1.1;color:var(--action700)} .profil-stat-t{font-size:14px;color:var(--n800)} .compte-page .profil-phrase{margin:0 0 8px} .profil-voir-detail{margin:0 0 8px} .compte-page .profil-faits{display:grid;grid-template-columns:max-content minmax(0,1fr); gap:0;margin:4px 0 0;font-size:15px} .compte-page .profil-faits dt, .compte-page .profil-faits dd{margin:0;padding:12px 0;border-top:1px solid var(--n300); font-size:15px;color:var(--n800)} .compte-page .profil-faits dt{padding-right:24px;font-weight:700;color:var(--encre)} .compte-page .profil-faits dt:first-child, .compte-page .profil-faits dt:first-child+dd{border-top:0} /* « Mon historique » : la phrase d'explication d'hier, sous les onglets. */ .compte-sous-historique{margin:0 0 14px;font-size:14px;line-height:1.5} @media (max-width:760px){ .onglets-compte{margin:0 16px;width:auto} .thr:has(> .compte-page){padding:0 16px} .profil-reglage-ligne{flex-direction:column;gap:8px} .profil-stats{grid-template-columns:1fr} .compte-page .profil-faits{grid-template-columns:1fr} .compte-page .profil-faits dt{padding-bottom:0;border-bottom:0} .compte-page .profil-faits dd{padding-top:2px;border-top:0} .compte-page .carte-relecture, .compte-page .fenetre-compte, .compte-page .hist-bloc, .compte-page .carte-geste{padding:16px} } /* (23/10/2026) Refonte épurée validée par Richard : une étape de parcours plus calme et plus claire. MISE EN FORME SEULEMENT : mêmes formulaires, mêmes champs, mêmes scripts. Des jetons seulement (« --rc-* »), donc le thème sombre suit. Règles : un seul bouton plein par écran (accent sarcelle), les choix sont des cartes à contour, 44 px / 10 px pour le bouton plein, 52 px / 12 px pour une carte de choix. Le turquoise de la marque sert à la sélection (survol, focus). */ /* ── La barre d'étapes : « Étape N sur M · phase » et un mince trait de progression ─────────────────────────────── */ .app .parcours-barre,.app .parcours-barre-longue{overflow:visible} .parcours-progres{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0;padding:8px 0} @media (min-width:1100px){.parcours-progres{width:280px;max-width:100%;padding:0}} .parcours-detail{min-width:0} .parcours-detail>summary{display:flex;align-items:center;gap:8px;min-height:24px;list-style:none;cursor:pointer; font-size:13.5px;color:var(--rc-doux);border-radius:6px} .parcours-detail>summary::-webkit-details-marker{display:none} .parcours-detail>summary::after{content:"";flex:none;width:6px;height:6px;border:solid currentColor; border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s} .parcours-detail[open]>summary::after{transform:rotate(-135deg) translateY(-2px)} .parcours-detail>summary:focus-visible{outline:2px solid var(--rc-accent);outline-offset:2px} .progres-texte{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--rc-texte)} /* (24/10/2026) Refonte épurée V2 (jury) : la part faite en turquoise de la marque (accent décoratif, jamais du texte), le fond en gris clair, 6 px. */ .progres-barre{display:block;width:100%;height:6px;border:0;border-radius:999px;overflow:hidden; -webkit-appearance:none;appearance:none;background:var(--rc-trait2);color:var(--marque,var(--rc-accent))} .progres-barre::-webkit-progress-bar{background:var(--rc-trait2);border-radius:999px} .progres-barre::-webkit-progress-value{background:var(--marque,var(--rc-accent));border-radius:999px;transition:width .3s} .progres-barre::-moz-progress-bar{background:var(--marque,var(--rc-accent));border-radius:999px} /* La liste complète des phases : cachée, montrée en volet quand on ouvre « Étape N sur M » (un
, sans script). */ .parcours-barre .parcours-etapes{display:none} .parcours-barre:has(.parcours-detail[open]) .parcours-etapes{display:flex;flex-direction:column;flex-wrap:nowrap; align-items:flex-start;gap:10px;position:absolute;top:100%;left:0;min-width:240px;max-width:min(360px,92vw); max-height:60vh;overflow:auto;margin:0;padding:14px 16px;box-sizing:border-box;background:var(--rc-fond); border:1px solid var(--rc-trait2);border-radius:12px;box-shadow:0 8px 24px var(--ombre-menu-flottant);white-space:normal;z-index:7} .parcours-barre:has(.parcours-detail[open]) .parcours-etapes li:not(:last-child)::after{display:none} @media (min-width:1100px){ .parcours-barre:has(.parcours-detail[open]) .parcours-etapes{left:auto;right:0} } @media (prefers-reduced-motion:reduce){ .parcours-detail>summary::after,.progres-barre::-webkit-progress-value{transition:none} } /* ── Les choix d'une question : des cartes empilées, pleine largeur, à contour ───────────────────────────────────── */ .parcours-cartes{justify-items:stretch;gap:10px;margin-top:12px} .tuile.parcours-carte{box-sizing:border-box;width:100%;min-height:54px;height:auto;padding:12px 16px;display:flex; flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;cursor:pointer; border:1.5px solid var(--n600);border-radius:12px;background:var(--rc-fond);color:var(--rc-texte); transition:border-color .15s,background .15s} .tuile.parcours-carte:hover{border-color:var(--marque,var(--rc-accent));background:var(--rc-pale)} .tuile.parcours-carte:focus-visible{outline:2px solid var(--rc-accent);outline-offset:2px} .tuile.parcours-carte b{font-size:15px;font-weight:700;color:var(--rc-texte)} .tuile.parcours-carte span{font-size:13px;color:var(--rc-doux)} .parcours-autre>summary.puce>span:hover{border-color:var(--rc-accent)} @media (prefers-reduced-motion:reduce){.tuile.parcours-carte{transition:none}} /* ── Le bouton plein : UN seul par écran, 44 px, rayon 10 px, à droite après les choix ──────────────────────────── */ .parcours .puces:has(>.puce.forte:only-child){justify-content:flex-end} .parcours .puces:has(>.puce.forte:only-child)>.puce.forte{min-height:44px} .parcours .puces:has(>.puce.forte:only-child)>.puce.forte>span{height:44px;padding:0 24px;border-radius:10px;font-size:15px; font-weight:600} /* ── Le dépôt d'un fichier : la zone, les autres réponses en cartes, puis « Envoyer » plein ─────────────────────── */ .parcours-depot-epure .depot-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:14px} .parcours-depot-epure .depot-choix{display:flex;flex-direction:column;gap:10px} .parcours-depot-epure .depot-autre{box-sizing:border-box;width:100%;min-height:54px;padding:12px 16px;justify-content:flex-start; text-align:left;border:1.5px solid var(--n600);border-radius:12px;background:var(--rc-fond);color:var(--rc-texte); font-size:15px;font-weight:700;transition:border-color .15s,background .15s} .parcours-depot-epure .depot-autre:hover{border-color:var(--marque,var(--rc-accent));background:var(--rc-pale)} .parcours-depot-epure .depot-autre:focus-visible{outline:2px solid var(--rc-accent);outline-offset:2px} .parcours-depot-epure .depot-envoyer{align-self:flex-end;justify-content:center;min-height:44px;padding:0 24px; border-radius:10px;background:var(--rc-accent);border:1px solid var(--rc-accent);color:var(--rc-fond);font-size:15px;font-weight:600} .parcours-depot-epure .depot-envoyer:hover:not(:disabled){background:var(--rc-accent-survol);border-color:var(--rc-accent-survol)} /* (24/10/2026) Refonte épurée V2 (jury) : désactivé, « Envoyer » garde son look plein (sarcelle) à .45 d'opacité, il ne passe plus au gris pâle ; une aide à sa gauche dit quoi faire (visible seulement tant qu'il est désactivé). */ .parcours-depot-epure .depot-envoyer:disabled{background:var(--rc-accent);border-color:var(--rc-accent); color:var(--rc-fond);opacity:.45;cursor:not-allowed} .parcours-depot-epure .depot-envoi{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap} .parcours-depot-epure .depot-aide{display:none;font-size:14px;line-height:1.35;color:var(--rc-doux)} .parcours-depot-epure .depot-actions:has(.depot-envoyer:disabled) .depot-aide{display:inline} @media (max-width:640px){ .parcours-depot-epure .depot-envoi{flex-direction:column-reverse;align-items:stretch;gap:8px} .parcours-depot-epure .depot-aide{text-align:center} .parcours-depot-epure .depot-envoyer{align-self:stretch} .parcours .puces:has(>.puce.forte:only-child)>.puce.forte{flex:1 1 auto} .parcours .puces:has(>.puce.forte:only-child)>.puce.forte>span{width:100%;justify-content:center} } /* (23/10/2026) Boucle de vérification n° 2 : les choix d'une étape de dépôt se lisent comme ceux des autres étapes. */ .parcours-depot-epure .depot-autre span{font-weight:700} /* (24/10/2026) Refonte épurée V2 (jury) : la zone de dépôt se voit. Contour pointillé de 2 px en turquoise de la marque (décoratif), fond turquoise pâle, icône dans un rond de 44 px, titre 16 px / 800. Une fois le fichier choisi (« .depot-pret »), elle redevient une ligne à contour plein et discret. */ .parcours-depot-epure .depot-zone{border:2px dashed var(--marque,var(--rc-accent));background:var(--rc-pale2)} .parcours-depot-epure .depot-zone:hover,.parcours-depot-epure .depot-zone.depot-survol{border-color:var(--marque,var(--rc-accent)); background:var(--rc-pale)} .parcours-depot-epure .depot-icone{width:44px;height:44px;border-radius:50%;background:var(--rc-pale);color:var(--rc-accent)} .parcours-depot-epure .depot-zone.depot-survol .depot-icone{background:var(--marque,var(--rc-accent));color:var(--rc-fond)} .parcours-depot-epure .depot-titre{font-size:16px;font-weight:800} .parcours-depot-epure .depot-zone.depot-pret{border-style:solid;border-width:1.5px;border-color:var(--rc-trait2);background:var(--rc-fond)} .parcours-depot-epure .depot-zone:hover .depot-icone{background:var(--rc-fond)} /* (23/10/2026) Refonte épurée validée par Richard (canevas Claude Design « Assistant CNA, refonte épurée ») : l'accueil dit la prochaine étape (« À faire maintenant »), les tuiles se rangent en deux groupes, le composeur range le modèle et la demande guidée derrière « Options », les crédits restants s'écrivent en clair. */ /* ── Composeur : « Options » ─────────────────────────────────────────── */ .options-composeur{position:relative;display:inline-flex} .options-composeur>summary{list-style:none;cursor:pointer} .options-composeur>summary::-webkit-details-marker{display:none} .options-bouton{min-height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:999px; border:1px solid var(--n300);background:var(--blanc);color:var(--n800);font-size:13.5px;font-weight:600; white-space:nowrap} .options-bouton:hover{border-color:var(--action);color:var(--encre)} .options-composeur>summary:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:999px} .options-composeur[open]>.options-bouton{border-color:var(--action);color:var(--action)} .vol-options{position:absolute;left:0;bottom:calc(100% + 8px);z-index:31;display:flex;flex-direction:column; align-items:flex-start;gap:6px;min-width:300px;padding:10px 12px;background:var(--blanc); border:1px solid var(--n400);border-radius:14px} .vol-options .pastille-modele,.vol-options .pastille-guide{position:static} .vol-options .vol-modele{left:0;bottom:calc(100% + 8px)} /* ── Crédits restants, écrits ───────────────────────────────────────── */ /* ── Accueil : « À faire maintenant » ───────────────────────────────── */ .a-faire{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0} .a-faire-t,.tuiles-groupe{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--n800)} .afaire-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px} .afaire-carte{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--blanc); border:1px solid var(--n300);border-top:3px solid var(--n400);border-radius:14px;min-width:0} .afaire-icone{width:40px;height:40px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--marque,var(--rc-accent)) 16%,var(--blanc));color:var(--action)} .afaire-texte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .afaire-texte b{font-size:15px;font-weight:700;color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .afaire-texte span{font-size:13px;color:var(--n800)} .afaire-bouton{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px; border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;flex:none; border:1px solid var(--action)} .afaire-bouton.plein{background:var(--action);color:var(--blanc)} .afaire-bouton.plein:hover{background:var(--action600,var(--action));color:var(--blanc);text-decoration:none} .afaire-bouton.contour{background:var(--blanc);color:var(--action)} .afaire-bouton.contour:hover{background:var(--action100);text-decoration:none} .afaire-bouton:focus-visible{outline:2px solid var(--action);outline-offset:2px} /* (24/10/2026) Refonte épurée V2 (jury) : le filet du haut dit la nature de la carte. Turquoise = « reprendre » (décor, jamais un texte) ; corail = « urgent » seulement (une carte portant ``afaire-urgent``). */ .afaire-reprendre{border-top-color:var(--marque,var(--rc-accent))} .afaire-urgent{border-top-color:var(--urgent,var(--cna-alerte))} /* ── Tuiles : deux groupes ──────────────────────────────────────────── */ .mes-parcours .tuiles-groupe{margin-top:6px} .mes-parcours .tuiles-groupe+.tuiles-depart{margin-top:-2px} /* ── Menu : le compte actif (« Mon compte ») ────────────────────────── */ .compte.ici{background:var(--action100);border-radius:10px;padding-left:8px;padding-right:8px} .compte.ici .compte-nom{font-weight:700;color:var(--action)} /* ── Boucle de vérification n° 1 (23/10/2026) : écarts avec la maquette ── */ /* Tuiles alignées à gauche (une rangée incomplète ne se centre plus). */ .mes-parcours .tuiles-depart{justify-content:flex-start} /* Un seul titre au-dessus des tuiles : le premier groupe, et « Choisir mes parcours » en lien. */ .mes-parcours-tete .tuiles-groupe{margin:0} .lien-regler{min-height:44px;display:inline-flex;align-items:center;font-size:14px;font-weight:700; color:var(--action);text-decoration:none} .lien-regler:hover{text-decoration:underline;color:var(--action600,var(--action))} .lien-regler:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:6px} /* « Nouvelle demande » : le bouton principal de la charte (turquoise foncé), plus le noir. */ .neuve{background:var(--action);border-color:var(--action);color:var(--blanc)} .neuve:hover{background:var(--action600,var(--action));border-color:var(--action600,var(--action));color:var(--blanc)} /* Le bas du menu : le prénom, et « Mon compte » dessous. */ .compte-nom{display:flex;flex-direction:column;line-height:1.25;color:var(--encre);text-decoration:none;min-width:0} .compte-nom:hover{text-decoration:none;color:var(--action)} .compte-sous{font-size:12px;font-weight:500;color:var(--n800)} /* « Options » : un intitulé au-dessus de chaque réglage. */ .options-titre{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--n800); padding:4px 2px 0} /* ── (24/10/2026) Refonte épurée V2 (jury) : l'accueil prend la marque ─────────────────────────────────────────────── Turquoise (--marque) en décor seulement, jamais en texte ni en fond sous du blanc ; le corail (--urgent) reste à l'urgent. Aucune couleur écrite ici : des variables, le thème sombre les redéfinit. */ /* (24/10/2026) Une ombre qui suit le thème sans règle « data-theme » ici (le sombre ne vit que dans 01-coquille). */ .accueil{--ombre-douce:0 8px 24px color-mix(in srgb,var(--n800) 16%,transparent)} /* Le bandeau du bonjour : turquoise très pâle, qui s'efface dans le fond de la page sur environ 300 px. Il est le fond de la zone principale (et défile avec le bonjour) : le composeur reste un enfant direct de l'accueil. */ main:has(.accueil){background-color:var(--blanc);background-repeat:no-repeat;background-attachment:local; background-image:linear-gradient(to bottom,color-mix(in srgb,var(--marque,var(--rc-accent)) 12%,var(--blanc)), var(--blanc) 300px)} .accueil .accueil-haut h1{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.15} .accueil .accueil-sous{font-size:17px;line-height:1.4} @media (max-width:767px){.accueil .accueil-haut h1{font-size:28px}} /* La carte de saisie : un trait de 1,5 px assez sombre pour se voir (3:1 au moins sur le blanc) et une ombre douce. */ .accueil .carte-composeur{border:1.5px solid var(--n600);box-shadow:var(--ombre-douce)} @media (min-width:768px){ /* Le bonjour se tient en haut, sur le bandeau (plus centré à mi-hauteur), aligné avec la carte de saisie. */ /* (24/10/2026) La hauteur suit le contenu : à « height:100% », le bas de l'accueil passait sous la mention IA. */ .accueil{justify-content:flex-start;padding-top:clamp(28px,7vh,72px);gap:clamp(20px,4vh,32px);height:auto;min-height:100%} .accueil .accueil-haut{width:100%;max-width:720px;align-self:flex-start} .accueil .cadre{align-self:flex-start} /* « Options » s'ouvre VERS LE BAS : le composeur est en haut de l'accueil, vers le haut elle couvrirait le bonjour. Dans une conversation (composeur en bas), elle garde son ouverture vers le haut. */ .accueil .vol-options{top:calc(100% + 8px);bottom:auto;min-width:300px;border-radius:14px; box-shadow:var(--ombre-douce)} .accueil .vol-options .vol-modele{top:calc(100% + 8px);bottom:auto} } .options-aide{display:block;max-width:34ch;padding:0 2px 4px;font-size:13px;line-height:1.4;color:var(--n800)} /* (24/10/2026) V2 (jury) : la carte des mails urgents, dans « À faire maintenant », porte le liseré corail (urgent). */ .a-faire .ag-accueil{border-top:3px solid var(--action100)} .a-faire .ag-accueil:not(.ag-arrivee):has(#ag-accueil-t){border-top-color:var(--urgent)} /* (23/10/2026) Refonte épurée validée par Richard : UN en-tête de page pour tous les écrans annexes (À traiter, Tickets, Suivi des mails, Mon compte, Mes travaux, Rechercher…). Avant, trois tailles de titre se côtoyaient ; le titre d'une discussion (« .tete-titre ») garde la sienne. */ .tete .tete-gauche h1{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.01em;white-space:normal; overflow:visible} .tete .tete-gauche .sous{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--n800)} .tete .retour-fil{font-size:14px;font-weight:600} @media (max-width:767px){.tete .tete-gauche h1{font-size:18px}} /* ── V2 (24/10/2026, jury) : ce qui vaut pour tous les écrans ─────────── */ /* La mention « Vous parlez à une IA » ne recouvre plus rien : un fond, et la place qu'il faut sous le contenu. */ .bandeaux-du-produit .mention-ia{background:var(--blanc);border-top:1px solid var(--n300);padding-top:6px;padding-bottom:6px} #principal .thr{padding-bottom:56px} /* En-tête de page : 24 px, comme la maquette V2. */ .tete .tete-gauche h1{font-size:24px} /* Le menu : un repère turquoise devant l'entrée active (la marque, en accent). */ .cote-principal .lien-barre{position:relative} .cote-principal .lien-barre[aria-current=page]::before{content:"";position:absolute;left:-14px;top:10px;bottom:10px; width:4px;border-radius:0 4px 4px 0;background:var(--marque)} /* « Tous mes travaux » : une cible de 44 px. */ .voir-travaux{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0;font-size:14px} /* Le champ de saisie : un bord bien visible, un indicatif lisible, un anneau de focus net. */ .carte-composeur{border-color:var(--n600)} .carte-composeur:focus-within{outline:none;border-color:var(--action); box-shadow:0 0 0 3px color-mix(in srgb,var(--marque) 45%,transparent)} /* un halo doux, pas un double cadre */ #question::placeholder{color:var(--n700);opacity:1} /* Les sous-lignes grises : jamais sous 13 px. */ .travail-e{font-size:13px} /* ── V3 (24/10/2026, jury n° 2) ───────────────────────────────────────── */ /* Une seule voix : titres en 700, titres de section en casse normale (plus de capitales espacées). */ .accueil .accueil-haut h1,.accueil h1{font-size:32px;font-weight:700;letter-spacing:-.015em} .tete .tete-gauche h1{font-size:26px;font-weight:700} .a-faire-t,.mes-parcours .tuiles-groupe,.ag-titre-section{font-size:16px;font-weight:700;letter-spacing:0; text-transform:none;color:var(--encre)} .ag-titre-section .ag-compte{font-weight:600;color:var(--n800)} .mes-parcours .tuiles-depart .tuile-depart b{font-weight:700} /* La marque sur tous les écrans : un voile turquoise très léger derrière l'en-tête des pages. */ .tete:has(.tete-gauche){background:linear-gradient(180deg,color-mix(in srgb,var(--marque) 10%,var(--blanc)),var(--blanc))} /* Accueil : une tuile phare (le webinaire, le parcours complet) ; « Autres demandes » en simples liens. */ .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande{border-color:var(--marque); background:color-mix(in srgb,var(--marque) 9%,var(--blanc))} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite{border-color:transparent;background:transparent;box-shadow:none} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite:hover{background:var(--action100);border-color:transparent} /* Sélection : le soulignement des onglets en turquoise foncé (contraste 3:1 au moins). */ .onglet-compte-lien[aria-current=page],.a-traiter .onglet[aria-selected=true]{border-bottom-color:var(--action)} /* Boutons : « Options » au gabarit du kit (44 px, rayon 10) ; les liens d'action soulignés, cible de 44 px. */ .options-bouton{min-height:44px;border-radius:10px} .options-composeur>summary:focus-visible{border-radius:10px} .ag-btn.ag-lien{text-decoration:underline;text-underline-offset:3px;min-height:44px} .ag-switch-mot{font-size:13px;font-weight:600;color:var(--n800)} /* Étape : le bouton qui attend un fichier se lit (gris neutre lisible), les choix portent une flèche. */ .parcours-depot-epure .depot-envoyer:disabled{background:var(--n200);border-color:var(--n300);color:var(--n800);opacity:1} .parcours-depot-epure .depot-autre,.tuile.parcours-carte{border-width:1px;font-weight:600} .parcours-depot-epure .depot-autre{display:flex;align-items:center;justify-content:space-between;gap:12px} .parcours-depot-epure .depot-autre::after{content:"›";font-size:22px;line-height:1;color:var(--action)} /* À traiter : une seule famille de pastilles d'état (fond neutre, point de couleur). */ .atraiter-genre,.puce-etat{background:var(--n100);color:var(--encre);gap:6px} .atraiter-genre::before,.puce-etat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--n600);flex:none} .atraiter-genre.ge-ok,.puce-etat.ge-ok,.atraiter-genre.ge-attente,.puce-etat.ge-attente,.atraiter-genre.ge-refus, .puce-etat.ge-refus{background:var(--n100);color:var(--encre)} .ge-ok::before{background:var(--vert700)} .ge-attente::before{background:var(--ambre700)} .ge-refus::before{background:var(--rouge700)} /* ── V4 (24/10/2026, jury n° 3) ───────────────────────────────────────── */ /* Le logo de l'organisation en filigrane : l'élément de marque de l'accueil et des en-têtes (décor, 6 %). */ .filigrane{position:absolute;pointer-events:none;opacity:.06;line-height:0;z-index:0} .filigrane img,.filigrane svg{display:block;width:auto;height:100%} .accueil-haut{position:relative} .accueil-haut .filigrane{right:-24px;top:-28px;height:150px} .tete:has(> .filigrane){overflow:hidden} .tete > .filigrane{right:180px;top:-34px;height:120px} .tete > :not(.filigrane){position:relative;z-index:1} @media (max-width:767px){.filigrane{display:none}} /* Le corail dit « urgent », et lui seul : la pastille et l'avatar d'un mail urgent (texte foncé sur corail). */ .ag-urgent{background:var(--urgent);color:var(--encre);font-weight:700} .ag-avatar.urgent{background:var(--urgent);color:var(--encre)} /* La tuile phare se voit vraiment. */ .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande{border:2px solid var(--marque); background:color-mix(in srgb,var(--marque) 15%,var(--blanc))} /* « Autres demandes » : sur une ligne, sans retour. */ .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Les intitulés d'« Options » en casse normale, comme le reste. */ .options-titre{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;color:var(--encre)} /* Les liens d'action : un seul style, soulignés. */ .lien-regler,.compte-detail>summary,.profil-voir-detail>summary{text-decoration:underline;text-underline-offset:3px} /* Le bas du menu : « Mon compte » n'a plus de fond permanent (il ressemblait à un état figé). */ .compte.ici{background:transparent} /* Mon compte : des chiffres, pas des boutons (sans fond, séparés d'un filet). */ .profil-stats{gap:0} .profil-stat{background:transparent;border:0;border-radius:0;border-left:1px solid var(--n300);padding-left:18px} .profil-stat:first-child{border-left:0;padding-left:0} /* Les crédits : le chiffre seul, sans l'anneau qui ressemblait à un chargement ; la couleur dit le seuil. */ /* L'envoi au repos se voit (icône à 4,5:1). */ #envoyer:disabled,#envoyer[disabled]{color:var(--n700)} /* Une étape qui s'ouvre ne se cache pas sous l'en-tête. */ .bloc[id]{scroll-margin-top:24px} /* Le filigrane ne passe pas sous les outils d'un en-tête chargé (Suivi des mails : état et interrupteur). */ .tete:has(.tete-outils) > .filigrane{display:none} /* Une étape tient dans l'écran : zone de dépôt et choix un peu plus compacts. */ .parcours-depot-epure .depot-zone{padding-top:16px;padding-bottom:16px} .parcours-depot-epure .depot-autre,.tuile.parcours-carte{min-height:48px} /* Le compteur d'« À traiter » n'est pas une alerte : turquoise foncé (le corail reste à « urgent »). */ .cote-principal .pastille-alerte{background:var(--action);color:var(--blanc)} .tete > .filigrane{height:100px;max-width:280px;overflow:hidden} /* La zone de dépôt en ligne : l'icône à gauche du texte, toute l'étape tient au-dessus du champ de saisie. */ .parcours-depot-epure .depot-zone{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding:14px 18px;min-height:0} .parcours-depot-epure .depot-zone .depot-icone{width:36px;height:36px;margin:0} /* ── V5 (24/10/2026, jury n° 4) : un seul chemin évident, une seule grille ─────────────────────────────────────── */ /* Le pied du menu reste en bas, même sans travaux « En cours ». */ .cote > .compte{margin-top:auto} /* « En cours » en casse normale, comme les autres titres ; « Ctrl K » lisible (4,5:1). */ .cote-encours-t{text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;color:var(--n800)} .rech-partout kbd{color:var(--n700)} /* Une grille : le lien « Revenir » s'aligne sur le bord droit de la colonne des cartes (880 px). */ @media (min-width:761px){ .tete:has(~ .thr > .ag),.tete:has(~ .onglets-compte){padding-right:max(20px,calc((100% - 880px) / 2))} .tete:has(~ .thr .a-traiter){padding-right:48px} } /* La marque : un voile d'en-tête plus net, un filet turquoise sous chaque titre de page, un filigrane qui se voit. */ .tete:has(.tete-gauche){background:linear-gradient(180deg,color-mix(in srgb,var(--marque) 16%,var(--blanc)),var(--blanc))} .tete .tete-gauche h1::after{content:"";display:block;width:36px;height:3px;margin-top:8px;border-radius:2px; background:var(--marque)} .filigrane{opacity:.09} /* Le texte sur le corail : foncé dans les deux thèmes (le sombre éclaircit --encre). */ .ag-urgent,.ag-avatar.urgent{color:var(--sur-urgent)} /* Accueil · « À faire maintenant » : un liseré à gauche dit la nature (turquoise reprendre, corail urgent). */ .afaire-carte{border-top-width:1px;border-top-color:var(--n300);border-left:3px solid var(--n400)} .afaire-reprendre{border-top-color:var(--n300);border-left-color:var(--marque)} .a-faire .ag-accueil{border-top:1px solid var(--n300);border-left:3px solid var(--action100)} .a-faire .ag-accueil:not(.ag-arrivee):has(#ag-accueil-t){border-top-color:var(--n300);border-left-color:var(--urgent)} /* « Tout voir » : un lien ; le mail n'est plus une carte dans la carte (un filet), sans second « ! ». */ .ag-accueil-tete .ag-tout-voir{margin-left:auto;padding:0 4px;font-size:14px;font-weight:700} .a-faire .ag-accueil .ag-mail{background:transparent;border:0;border-top:1px solid var(--n300);border-radius:0; padding:14px 0 0} .a-faire .ag-accueil .ag-mail > .ag-avatar{display:none} .a-faire .ag-accueil .ag-accueil-note{margin:0;font-size:13px;color:var(--n800)} /* Accueil · tuiles : plus de tuile surlignée sans raison ; « Autres demandes » sont des boutons qui se voient. */ .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande{border:1px solid var(--n400); background:var(--blanc)} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite{border:1px solid var(--n300); background:var(--blanc);min-height:48px;border-radius:12px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite:hover{border-color:var(--marque); background:var(--blanc)} /* Étape · le dépôt d'abord : « Envoyer » n'apparaît qu'une fois le fichier choisi (le script le désactive avant ; sans script il reste visible et actif). Les autres réponses deviennent des recours, en lignes sans cadre. */ .parcours-depot-epure .depot-actions:has(.depot-envoyer:disabled) .depot-envoi{display:none} .parcours-depot-epure .depot-zone{border-color:var(--action)} .progres-barre::-webkit-progress-value{background:var(--action)} .progres-barre::-moz-progress-bar{background:var(--action)} .parcours-depot-epure .depot-choix{gap:0;margin-top:2px} .parcours-depot-epure .depot-sans{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--n800)} .parcours-depot-epure .depot-autre{min-height:44px;padding:0 4px;border:0;border-bottom:1px solid var(--n300); border-radius:0;background:transparent;color:var(--action)} .parcours-depot-epure .depot-autre:last-child{border-bottom:0} .parcours-depot-epure .depot-autre span{font-weight:600} .parcours-depot-epure .depot-autre:hover{background:var(--action100);border-color:var(--n300)} /* Options · le modèle : un vrai champ (bord, 44 px, chevron). « Guidée » : un interrupteur et son état écrit. */ .vol-options .pastille-modele,.vol-options .pastille-modele>summary{width:100%} .vol-options .pastille-modele .pastille{box-sizing:border-box;width:100%;min-height:44px;justify-content:space-between; padding:0 12px;border:1px solid var(--n600);border-radius:10px;background:var(--blanc)} .guide-etat{display:none} .vol-options .guide-etat{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--encre)} .vol-options .pastille-g{border:0;background:transparent;padding:0;gap:10px} .vol-options .pastille-guide:hover .pastille-g{background:transparent} .vol-options .pastille-g > svg,.vol-options .pastille-g > span:not(.guide-etat):not(.guide-traits){display:none} .guide-bascule{position:relative;width:40px;height:24px;border-radius:999px;background:var(--n500);flex:none} .guide-bascule::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%; background:var(--blanc)} .guide[data-actif="1"] .guide-bascule{background:var(--action)} .guide[data-actif="1"] .guide-bascule::after{left:19px} .guide .si-allumee,.guide[data-actif="1"] .si-eteinte{display:none} .guide[data-actif="1"] .si-allumee{display:inline} .vol-options .guide:not([data-actif="1"]) .guide-traits{display:none} /* À traiter · la décision toujours visible, « conforme » dit une fois, la liste des étapes titrée. */ .a-traiter .carte-corps .rendu{min-height:120px} .atraiter-detail .pied-decision{position:sticky;bottom:0;z-index:2;background:var(--blanc)} .avant-de-valider.cav-tout-bon .cav-etat,.avant-de-valider.cav-tout-bon .cav-resume{display:none} .etapes-t{margin:14px 0 4px;font-size:14px;font-weight:700;color:var(--n800)} .a-traiter .etapes{font-size:14px} /* La fiche ne coupe plus ce qui dépasse : la barre de décision peut coller en bas de la colonne. */ .a-traiter .atraiter-fiche>article{overflow:visible} .a-traiter .atraiter-fiche>article>.pied-decision{margin-inline:0;padding:12px 24px 16px;border-radius:0 0 16px 16px; box-shadow:0 -1px 0 var(--n300)} .a-traiter .atraiter-fiche>article>.etapes-t+.etapes{margin-top:-12px} .etapes-t{margin:6px 0 0} /* Le menu est visible : « Revenir à l'accueil » ferait doublon (il revient si le menu est replié). */ @media (min-width:768px){.bascule:not(:checked)~.app .tete .retour-fil[href="/"]{display:none}} .ag-switch-mot{white-space:nowrap} /* ── V6 (24/10/2026, jury n° 5) : un gabarit de page, une règle de bouton, la marque assumée ───────────────────── */ /* Un gabarit : l'en-tête des pages annexes respire (même marge haute partout) ; « À traiter » se centre sur une colonne de 1040 px (la liste et la fiche côte à côte), son en-tête suit la même verticale. */ .tete:has(.tete-gauche){min-height:0;padding-top:28px;padding-bottom:16px;align-items:flex-start} @media (min-width:900px){ .liste.relectures.a-traiter{box-sizing:border-box;width:min(1040px,calc(100% - 96px));max-width:none; margin-inline:auto;padding-left:0;padding-right:0} .tete:has(~ .thr .a-traiter){padding-left:max(48px,calc((100% - 1040px) / 2)); padding-right:max(48px,calc((100% - 1040px) / 2))} } /* Le filigrane des en-têtes : entier, jamais rogné. */ .tete > .filigrane{top:14px;height:64px;max-width:200px;overflow:visible} /* La marque assumée : voile plus net, entrée active du menu teintée, carte « Reprendre » teintée, filet sous le bonjour comme sous chaque titre de page. Turquoise en décor seulement, jamais sous un texte clair. */ .tete:has(.tete-gauche){background:linear-gradient(180deg,color-mix(in srgb,var(--marque) 22%,var(--blanc)),var(--blanc))} main:has(.accueil){background-image:linear-gradient(to bottom,color-mix(in srgb,var(--marque) 18%,var(--blanc)), var(--blanc) 340px)} .cote-principal .lien-barre[aria-current=page]{background:color-mix(in srgb,var(--marque) 18%,var(--n100))} .afaire-reprendre{background:color-mix(in srgb,var(--marque) 7%,var(--blanc))} .accueil .accueil-haut h1::after{content:"";display:block;width:44px;height:4px;margin-top:12px;border-radius:2px; background:var(--marque)} /* Le champ de saisie de l'accueil : l'objet le plus soigné de la page (plus rond, une ombre teintée). */ .accueil .carte-composeur{border-radius:18px;box-shadow:0 10px 30px color-mix(in srgb,var(--action) 14%,transparent)} .accueil .carte-composeur:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--marque) 45%,transparent), 0 10px 30px color-mix(in srgb,var(--action) 14%,transparent)} /* L'envoi au repos reste visible (flèche à 6:1). */ .carte-composeur .envoyer.rond:not(.vif){color:var(--n800)} /* Les tuiles : une icône plus grande, qui porte la marque. */ .mes-parcours .tuiles-depart[data-groupe="grandes"] .tuile-icone{width:46px;height:46px;border-radius:14px; background:color-mix(in srgb,var(--marque) 24%,var(--blanc))} .mes-parcours .tuiles-depart .tuile-depart .tuile-icone svg{width:24px;height:24px} /* La règle du bouton plein, la même partout : l'action d'un mail urgent est pleine ; quand elle est sur l'accueil, « Reprendre » passe au contour (un seul bouton plein à l'écran). */ .a-faire:has(#ag-accueil-t) .afaire-reprendre .afaire-bouton.plein{background:var(--blanc);color:var(--action)} .a-faire:has(#ag-accueil-t) .afaire-reprendre .afaire-bouton.plein:hover{background:var(--action100);color:var(--action)} /* Les pastilles d'information du suivi rejoignent la famille « statut » (fond neutre, point de couleur). */ .ag-mail .ag-puce{background:var(--n100);color:var(--encre);display:inline-flex;align-items:center;gap:6px} .ag-mail .ag-puce::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--action);flex:none} /* Options : plus large, l'aide lisible, un interrupteur éteint qui se voit (3:1). */ .vol-options{min-width:340px} .accueil .vol-options{min-width:340px} .options-aide{font-size:13px;max-width:38ch} .guide-bascule{background:var(--n700)} /* L'étape : une barre de progression qui se voit, la réponse conseillée signalée. */ .progres-barre{height:8px} .depot-conseille{margin-left:auto;margin-right:10px;display:inline-flex;align-items:center;height:24px;padding:0 10px; border-radius:999px;background:var(--action100);color:var(--action700);font-size:12.5px;font-weight:700} /* Mon compte : des chiffres affirmés. */ .profil-stat-n{font-size:40px;font-weight:800;letter-spacing:-.02em;color:var(--action)} /* À traiter : « Refuser » est un bouton du kit (contour), pas un texte rouge nu. */ .a-traiter .bouton-refuser{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--rouge700); border-radius:10px;background:var(--blanc);color:var(--rouge700);font-weight:700} /* Les liens d'action : une cible de 44 px. */ .compte-detail>summary,.profil-voir-detail>summary,.ag-btn.ag-lien,.lien-regler{min-height:44px;display:inline-flex; align-items:center} /* Suivi des mails : les gestes de chaque carte sur leur propre ligne, alignés sous le texte (même place partout). */ .ag-section .ag-mail{align-items:flex-start} .ag-section .ag-mail > .ag-gestes{flex:1 1 100%;padding-left:56px} @media (max-width:640px){.ag-section .ag-mail > .ag-gestes{padding-left:0}} /* L'en-tête sur la même verticale que les cartes (la colonne défile, sa barre décale le centre de 5 px). */ @media (min-width:900px){ .tete:has(~ .thr > .ag){padding-left:max(40px,calc((100% - 890px) / 2));padding-right:max(20px,calc((100% - 890px) / 2))} .tete:has(~ .thr .a-traiter){padding-left:max(48px,calc((100% - 1050px) / 2));padding-right:max(48px,calc((100% - 1050px) / 2))} } /* ── V7 (24/10/2026, jury n° 6) : un point focal, un accueil compact, des écrans qui respirent ───────────────────── */ /* Accueil : « Reprendre » devient la carte phare (fond turquoise foncé, texte clair ; dans le thème sombre, les deux jetons s'inversent et le contraste tient). Son bouton est blanc : le seul bouton turquoise plein reste l'action d'un mail urgent. */ .afaire-carte.afaire-reprendre{background:var(--action);border:0;border-radius:16px;padding:18px 20px; box-shadow:0 12px 28px color-mix(in srgb,var(--action) 28%,transparent)} .afaire-reprendre .afaire-texte b,.afaire-reprendre .afaire-texte span{color:var(--blanc)} .afaire-reprendre .afaire-texte span{opacity:.88} .afaire-reprendre .afaire-icone{background:color-mix(in srgb,var(--blanc) 18%,var(--action));color:var(--blanc)} .afaire-reprendre .afaire-bouton,.afaire-reprendre .afaire-bouton.plein, .a-faire:has(#ag-accueil-t) .afaire-reprendre .afaire-bouton.plein{background:var(--blanc);border-color:var(--blanc); color:var(--action)} .afaire-reprendre .afaire-bouton:hover,.a-faire:has(#ag-accueil-t) .afaire-reprendre .afaire-bouton.plein:hover{ background:color-mix(in srgb,var(--blanc) 88%,var(--action));color:var(--action)} .afaire-reprendre .afaire-bouton:focus-visible{outline-color:var(--blanc)} /* Le mail urgent de l'accueil tient en une ligne : qui, quoi, l'action. Le détail (synthèse, action attendue) est dans « Suivi des mails » (« Tout voir »). */ .a-faire .ag-accueil .ag-synthese,.a-faire .ag-accueil .ag-raison,.a-faire .ag-accueil .ag-action{display:none} .a-faire .ag-accueil{gap:10px;padding:16px 20px} .a-faire .ag-accueil .ag-mail{padding-top:12px;align-items:center} /* Les tuiles : un relief au repos, un titre plus grand, le même bord que les cartes. */ .mes-parcours .tuiles-depart[data-groupe] .tuile-depart{border-color:var(--n400); box-shadow:0 1px 2px color-mix(in srgb,var(--action) 10%,transparent)} .mes-parcours .tuiles-depart[data-groupe="grandes"] .tuile-depart b{font-size:17px} /* « Action attendue » : un filet turquoise à gauche, plus un bandeau plein. */ .ag-action{background:transparent;border-left:3px solid var(--marque);border-radius:0;padding:2px 0 2px 12px;width:fit-content} /* À traiter : une seule barre de défilement (la page) ; le texte à valider se lit en entier ; la barre de décision colle en bas de l'écran ; le circuit et le contrôle sont des pastilles de statut. */ @media (min-width:900px){ .atraiter-liste,.atraiter-detail{max-height:none;overflow:visible;padding-right:0} .atraiter-detail{position:static;min-height:0} } .a-traiter .carte-corps .rendu{min-height:200px} .carte-circuit{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px; background:var(--n100);color:var(--encre);font-size:13px} .puce-controle,.puce-controle.a-verifier{background:var(--n100);color:var(--encre);display:inline-flex;align-items:center;gap:6px} .puce-controle::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vert700);flex:none} .puce-controle.a-verifier::before{background:var(--ambre700)} /* Mon compte : chaque chiffre dans sa tuile teintée. */ .profil-stats{gap:12px} .profil-stat,.profil-stat:first-child{background:color-mix(in srgb,var(--marque) 10%,var(--blanc));border:0;border-radius:12px; padding:14px 18px} /* Les onglets : un seul gabarit (44 px, soulignement de 3 px), l'onglet courant légèrement teinté. */ .onglet-compte-lien,.a-traiter .onglet{min-height:44px;padding:0 16px} .onglet-compte-lien[aria-current=page],.a-traiter .onglet[aria-selected=true]{ background:color-mix(in srgb,var(--marque) 10%,transparent);border-radius:8px 8px 0 0} /* La marque : un filet plus long, un filigrane assumé. Les petits textes du menu passent à 13 px, sans troncature. */ .tete .tete-gauche h1::after,.accueil .accueil-haut h1::after{width:56px;height:4px} .filigrane{opacity:.12} .compte-sous{font-size:13px} .cote-encours .travail-e{white-space:normal;overflow:visible;text-overflow:clip} @media (prefers-reduced-motion:reduce){.afaire-carte,.mes-parcours .tuiles-depart[data-groupe] .tuile-depart{transition:none}} /* La colonne qui défile garde 56 px en bas (place de la mention IA) : la barre de décision descend jusqu'à la mention. */ .atraiter-detail .pied-decision{bottom:-48px} /* ── V8 (24/10/2026, jury n° 7) : des surfaces, une famille de pastilles, une famille de rouges ──────────────────── */ /* Des surfaces : un fond de page à peine teinté, des cartes blanches qui se posent dessus (ombre douce teintée). */ .thr:has(.ag),.thr:has(.a-traiter),.thr:has(.onglets-compte),main:has(.onglets-compte) .thr{background:color-mix(in srgb,var(--marque) 4%,var(--blanc))} main:has(.accueil){background-color:color-mix(in srgb,var(--marque) 4%,var(--blanc))} .ag-mail,.afaire-carte,.a-faire .ag-accueil,.mes-parcours .tuiles-depart[data-groupe] .tuile-depart, .a-traiter .atraiter-fiche>article,.atraiter-carte,.liste.compte-page .bloc-compte,.liste.compte-page section{ box-shadow:0 1px 2px color-mix(in srgb,var(--action) 6%,transparent),0 8px 24px -12px color-mix(in srgb,var(--action) 18%,transparent)} .afaire-carte.afaire-reprendre{box-shadow:0 14px 30px -10px color-mix(in srgb,var(--action) 45%,transparent)} /* Les icônes des tuiles : un dégradé de la marque (turquoise vers turquoise foncé), l'icône claire. */ .mes-parcours .tuiles-depart[data-groupe] .tuile-icone{background:linear-gradient(135deg,var(--marque),var(--action))} .mes-parcours .tuiles-depart .tuile-depart .tuile-icone svg{color:var(--blanc)} /* L'envoi au repos : turquoise pâle, flèche turquoise foncé (il se voit, sans paraître actif). */ .carte-composeur .envoyer.rond:not(.vif){background:var(--action100);color:var(--action)} /* L'interrupteur éteint : un gris moyen (3:1 sur blanc), plus léger que le sombre d'avant. */ .guide-bascule{background:var(--n600)} /* Une famille de pastilles : 24 px, arrondies, 13 px / 600. Trois tons : neutre (point de couleur), info (turquoise pâle), urgent (corail). */ .ag-urgent,.ag-puce,.atraiter-genre,.puce-etat,.puce-controle,.carte-circuit,.depot-conseille,.ag-pastille,.etiquette-conseille{ box-sizing:border-box;height:24px;min-height:24px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600; display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap} .depot-conseille,.etiquette-conseille{background:var(--action100);color:var(--action700)} /* Une famille de rouges : le corail seul dit « urgent » (pastille, liseré, avatar, icône de la carte d'accueil) ; « Refuser » est un bouton neutre. */ .ag-mail .ag-avatar.urgent{background:var(--urgent);color:var(--sur-urgent)} .a-faire .ag-accueil:has(#ag-accueil-t) .ag-accueil-icone{background:var(--urgent);color:var(--sur-urgent)} .a-traiter .bouton-refuser{border-color:var(--n600);color:var(--encre)} .a-traiter .bouton-refuser:hover{background:var(--n100);color:var(--encre)} /* Des gris lisibles : rien sous --n700 pour un texte. */ .cote-encours .travail-e,.travail-e{color:var(--n800)} .rech #rech::placeholder{color:var(--n700);opacity:1} /* Le menu : le repère turquoise collé à l'entrée active. */ .cote-principal .lien-barre[aria-current=page]::before{left:0;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0} /* Le filigrane, à la même place sur toutes les pages annexes, Suivi des mails compris (à gauche de ses réglages). */ .tete:has(.tete-outils) > .filigrane{display:block;right:380px} /* À traiter : de l'air avant la barre de décision. */ .a-traiter .atraiter-fiche>article>.pied-decision{padding-top:16px} .a-traiter .champ-commentaire textarea{resize:none} /* Le mail dans la carte d'accueil n'est pas une carte : pas d'ombre. */ .a-faire .ag-accueil .ag-mail{box-shadow:none} .tete:has(.tete-outils) > .filigrane{right:480px;top:6px} /* Les icônes des tuiles : un aplat turquoise foncé et le pictogramme clair (5,9:1 ; le dégradé tombait à 1,9:1 sur sa partie claire). Même famille que les boutons pleins. */ .mes-parcours .tuiles-depart[data-groupe] .tuile-icone{background:var(--action)} /* (25/10/2026) Richard : « Pas urgent » (geste pas_urgent) est rangé à DROITE de la ligne des gestes d'un mail « à surveiller », en lien gris discret souligné (cible 44 px déjà posée sur .ag-btn.ag-lien). */ .ag-gestes .ag-geste-droite{margin-left:auto} .ag-gestes .ag-geste-droite .ag-btn.ag-lien{color:var(--n600)} /* (24/10/2026) Refonte épurée V9 à V15 : la maquette HTML retenue par les jurys comparatifs (V15 contre V14 : 12 écrans contre 6) et le calibrage n° 4 (7,7 sur 10 de moyenne, au niveau des références). Les blocs se lisent dans l'ordre des tours ; le dernier l'emporte. Jetons seulement, aucune couleur écrite. */ /* ── 1. Un motif de marque à la place du logo fantôme : deux cercles flous turquoise et un point corail (l'étincelle du logo CNA), toujours au même endroit, au bord droit de la colonne. ────────────────────── */ .filigrane,.tete > .filigrane,.tete:has(.tete-outils) > .filigrane,.accueil-haut > .filigrane{display:none} .accueil-haut::after,.tete:has(.tete-gauche)::after{content:"";position:absolute;pointer-events:none;z-index:0; background: radial-gradient(circle 44px at 128px 74px,color-mix(in srgb,var(--marque) 50%,transparent) 98%,transparent), radial-gradient(circle 34px at 76px 112px,color-mix(in srgb,var(--marque) 26%,transparent) 98%,transparent), radial-gradient(circle 7px at 172px 32px,var(--action) 96%,transparent)} .accueil-haut::after{right:-6px;top:-30px;width:200px;height:170px;opacity:.5} .tete:has(.tete-gauche){position:relative;overflow:hidden} .tete:has(.tete-gauche)::after{right:max(20px,calc((100% - 880px) / 2 - 40px));top:-2px;width:200px;height:170px;opacity:.4;transform:scale(.62);transform-origin:top right} .tete:has(.tete-outils)::after{right:max(20px,calc((100% - 880px) / 2 + 300px))} /* ── 2. Un vrai bonjour. ─────────────────────────────────────────────────────────────────────────────── */ .accueil .accueil-haut h1{font-size:44px;font-weight:800;letter-spacing:-.025em} .accueil .accueil-sous{font-size:18px} /* ── 3. « À faire maintenant » : une seule langue de carte (blanche, liseré gauche de 4 px, même rythme). Le seul bouton plein est l'action du mail urgent ; « Reprendre » est au contour et montre l'avancement. ───────────── */ .afaire-carte.afaire-reprendre{background:var(--blanc);border:1px solid var(--n300);border-left:4px solid var(--marque); border-radius:14px;padding:16px 20px;box-shadow:0 1px 2px color-mix(in srgb,var(--action) 6%,transparent), 0 8px 24px -12px color-mix(in srgb,var(--action) 18%,transparent)} .afaire-reprendre .afaire-texte b{color:var(--encre)} .afaire-reprendre .afaire-texte span{color:var(--n800);opacity:1} .afaire-reprendre .afaire-icone{background:color-mix(in srgb,var(--marque) 18%,var(--blanc));color:var(--action)} .afaire-reprendre .afaire-bouton,.afaire-reprendre .afaire-bouton.plein, .a-faire:has(#ag-accueil-t) .afaire-reprendre .afaire-bouton.plein{background:var(--blanc);border:1px solid var(--action); color:var(--action)} .a-faire .ag-accueil{border-left-width:4px;border-radius:14px;padding:16px 20px} .afaire-barre{appearance:none;-webkit-appearance:none;display:block;width:180px;height:6px;margin-top:8px;border:0; border-radius:999px;background:var(--n200);overflow:hidden} .afaire-barre::-webkit-progress-bar{background:var(--n200);border-radius:999px} .afaire-barre::-webkit-progress-value{background:var(--action);border-radius:999px} .afaire-barre::-moz-progress-bar{background:var(--action);border-radius:999px} /* ── 4. Les tuiles : quatre colonnes ; le webinaire (le parcours complet) en vedette sur deux ; « Autres demandes » devient la dernière case, une liste courte. Icônes en aplat clair, pictogramme turquoise foncé. ────────────── */ .mes-parcours .tuiles-depart[data-groupe="grandes"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} /* (les formulaires sont « display:contents » : la case de la grille est le bouton) */ .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart{grid-column:span 2} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande{ background:linear-gradient(135deg,color-mix(in srgb,var(--marque) 22%,var(--blanc)),var(--blanc) 70%); border-color:color-mix(in srgb,var(--marque) 60%,var(--n400))} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande b{font-size:20px} .mes-parcours .tuiles-depart[data-groupe="grandes"] .tuile-depart{min-height:150px;padding:16px} .mes-parcours .tuiles-depart[data-groupe] .tuile-icone{background:color-mix(in srgb,var(--marque) 20%,var(--blanc))} .mes-parcours .tuiles-depart .tuile-depart .tuile-icone svg{color:var(--action)} .mes-parcours .tuiles-depart[data-groupe="grandes"] .tuile-depart .tuile-desc{font-size:13.5px} /* ── 5. Une étape : la conversation et le champ de saisie sur la même colonne ; la barre d'avancement se voit. ─ */ .parcours .bloc{max-width:720px} .progres-barre{height:8px} .qui,.heure,.bloc .meta{font-size:13px} /* ── 6. Les onglets : un seul modèle (souligné de 3 px, sans fond). ─────────────────────────────────────── */ .onglet-compte-lien[aria-current=page],.a-traiter .onglet[aria-selected=true]{background:transparent; color:var(--action);font-weight:700} /* ── 7. À traiter : le contrôle en une ligne, le commentaire replié, le texte à valider en grand. ────────────── */ .commentaire-repli>summary{min-height:44px;display:inline-flex;align-items:center;cursor:pointer;color:var(--action); font-weight:700;text-decoration:underline;text-underline-offset:3px;list-style:none} .commentaire-repli>summary::-webkit-details-marker{display:none} .commentaire-repli .champ-commentaire textarea{min-height:72px} .a-traiter .carte-corps .rendu{min-height:240px} .a-traiter .carte-tete .carte-circuit{margin-right:6px} /* ── 8. Les petits textes : rien sous 13 px. ─────────────────────────────────────────────────────────── */ .compte-sous,.travail-e,.atraiter-quand,.ag-mail-tete span{font-size:13px} .a-traiter .carte-tete .carte-circuit{margin-top:6px} /* ══ V10 (jury n° 9) ═══════════════════════════════════════════════════════════════════════════════════ */ /* La marque : un bandeau d'accueil plus franc et plus haut ; le motif cadré à droite du bonjour, absent des en-têtes qui portent des réglages (Suivi des mails). */ main:has(.accueil){background-image:linear-gradient(to bottom,color-mix(in srgb,var(--marque) 26%,var(--blanc)), var(--blanc) 380px)} .accueil-haut::after{right:0;top:-40px;width:200px;height:170px;opacity:.7;transform:scale(1.15);transform-origin:top right} .tete:has(.tete-outils)::after{display:none} .tete:has(.tete-gauche){background:linear-gradient(180deg,color-mix(in srgb,var(--marque) 26%,var(--blanc)),var(--blanc))} /* Accueil : l'urgent n'a que deux signaux (liseré, pastille) ; l'icône de la carte redevient discrète. */ .a-faire .ag-accueil:has(#ag-accueil-t) .ag-accueil-icone{background:color-mix(in srgb,var(--urgent) 16%,var(--blanc)); color:var(--encre)} /* La tuile vedette : un aplat turquoise foncé dégradé, texte clair (6:1). */ .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande{ background:linear-gradient(135deg,var(--action),color-mix(in srgb,var(--action) 70%,var(--marque)));border-color:var(--action); min-height:168px} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande b, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-desc{color:var(--blanc)} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone{ background:color-mix(in srgb,var(--blanc) 18%,var(--action));width:52px;height:52px;border-radius:16px} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone svg{color:var(--blanc);width:28px;height:28px} .mes-parcours .tuiles-depart[data-groupe="grandes"] .tuile-depart{min-height:168px} /* « Autres demandes » : toute la deuxième rangée à droite du support, six liens sur trois colonnes. */ /* Options : une flèche relie la fenêtre au bouton, un bord net ; le modèle se lit en noir. */ .vol-options{border-color:var(--n500)} .accueil .vol-options::before{content:"";position:absolute;top:-7px;left:24px;width:12px;height:12px;background:var(--blanc); border-left:1px solid var(--n500);border-top:1px solid var(--n500);transform:rotate(45deg)} .vol-options .pastille-modele .pastille-nom{color:var(--encre)} .vol-options .pastille-modele .pastille-pays{color:var(--n800)} /* Contrastes : le champ de recherche et « Options » ont un bord à 3:1, les indications à 4,5:1. */ .rech,.options-bouton{border-color:var(--n500)} #question::placeholder,#rech::placeholder{color:var(--n700)} /* L'étape : le message de l'assistant dans une bulle, sur un fond à peine teinté ; l'action conseillée est le bouton plein ; les deux autres restent des recours. */ .thr:has(.parcours){background:color-mix(in srgb,var(--marque) 5%,var(--blanc))} .parcours .bloc .lui.parcours-lui{background:var(--blanc);border:1px solid var(--n300);border-radius:16px;padding:18px 20px; box-shadow:0 1px 2px color-mix(in srgb,var(--action) 6%,transparent),0 8px 24px -12px color-mix(in srgb,var(--action) 18%,transparent)} .depot-conseil-plein{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:2px 0 6px; border:1px solid var(--action);border-radius:10px;background:var(--action);color:var(--blanc);font:inherit;font-size:15px; font-weight:700;cursor:pointer} .depot-conseil-plein:hover{background:var(--action600,var(--action))} .depot-conseil-plein:focus-visible{outline:3px solid var(--action);outline-offset:3px} /* Suivi des mails : le mail urgent porte le même liseré corail qu'à l'accueil. */ .ag-section .ag-mail.ag-mail-urgent{border-left:4px solid var(--urgent)} /* À traiter : « Refuser » en lien (Valider plein, Modifier au contour) ; le texte à valider sans grand vide. */ .a-traiter .bouton-refuser{border:0;background:transparent;padding:0 8px;text-decoration:underline;text-underline-offset:3px; color:var(--encre)} .a-traiter .carte-corps .rendu{min-height:140px} .puce-controle{background:color-mix(in srgb,var(--marque) 18%,var(--blanc));color:var(--action700)} .puce-controle::before{background:var(--action)} /* Mon compte : des chiffres-clés plus affirmés. */ .profil-stat-n{font-size:48px} /* Un seul anneau de focus, partout. */ a:focus-visible,button:focus-visible,summary:focus-visible,[role=tab]:focus-visible, .afaire-reprendre .afaire-bouton:focus-visible{outline:3px solid var(--action);outline-offset:3px} /* Des cibles confortables pour les liens d'action. */ .voir-travaux,.lien-regler,.ag-btn.ag-lien{min-height:44px} .vol-options,.accueil .vol-options{min-width:410px} .thr:has(.parcours) .parcours{padding-top:28px} .parcours .bloc .lui.parcours-lui{padding:16px 20px 6px} .parcours .bloc .lui.parcours-lui .parcours-depot-epure .depot-actions{margin-bottom:0} /* L'en-tête de la fiche en colonne : titre, ligne « Envoyé par », puis la pastille de vérification. */ .a-traiter .atraiter-fiche .carte-tete{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .a-traiter .atraiter-fiche .carte-tete h2{white-space:normal} .a-traiter .atraiter-fiche .carte-a-relire > .carte-tete{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .a-traiter .atraiter-fiche .carte-a-relire > .carte-tete > *{grid-area:auto} .vol-options .pastille-modele,.vol-options .pastille-modele>summary,.vol-options .pastille-modele .pastille{max-width:none;width:100%} .vol-options .pastille-modele .pastille-pays{white-space:nowrap;overflow:visible;margin-left:auto;padding-left:8px} /* ══ V11 (jury n° 10) ══════════════════════════════════════════════════════════════════════════════════ */ /* Contrastes non-texte : bords de champ, contour d'« Options », piste de l'interrupteur à 3,4:1 au moins. */ .rech,.options-bouton{border-color:color-mix(in srgb,var(--n800) 72%,var(--blanc))} .guide-bascule{background:color-mix(in srgb,var(--n800) 72%,var(--blanc))} .rech-partout kbd{color:var(--n700)} /* Le champ de saisie en focus : un trait turquoise foncé de 2 px sous le halo. */ .carte-composeur:focus-within{border:2px solid var(--action)} /* L'envoi : l'action principale du champ, en plein (flèche claire, 44 px). */ .carte-composeur .envoyer.rond,.carte-composeur .envoyer.rond:not(.vif){width:44px;height:44px;background:var(--action);color:var(--blanc)} /* Accueil : « Reprendre » est le seul bouton plein (le prochain pas) ; la carte reste blanche. */ .afaire-reprendre .afaire-bouton,.afaire-reprendre .afaire-bouton.plein, .a-faire:has(#ag-accueil-t) .afaire-reprendre .afaire-bouton.plein{background:var(--action);border-color:var(--action);color:var(--blanc)} .afaire-reprendre .afaire-bouton:hover{background:var(--action600,var(--action));color:var(--blanc)} /* La tuile vedette : un dégradé qui garde 5:1 sous le texte clair jusqu'au bout. */ .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande{ background:linear-gradient(135deg,var(--action),color-mix(in srgb,var(--action) 88%,var(--marque)))} /* Une rangée de hauteur fixe, et « Autres demandes » en pastilles contour (pas des liens soulignés). */ .mes-parcours .tuiles-depart[data-groupe="grandes"]{grid-auto-rows:168px} /* Un seul composant « compteur » : 22 px, fond turquoise pâle, chiffre turquoise foncé 13/700 (titres de section, onglets, menu). */ .ag-titre-section .ag-compte,.a-traiter .onglet-pastille,.a-traiter .onglet-compte,.cote-principal .pastille-alerte{ display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;margin-left:8px; border-radius:999px;background:color-mix(in srgb,var(--marque) 22%,var(--blanc));color:var(--action700);font-size:13px; font-weight:700;vertical-align:middle} /* Les pastilles : 24 px et 13 px partout. */ .ag-urgent,.puce-controle{height:24px;font-size:13px} /* À traiter : « Refuser » est un bouton contour neutre de 44 px, séparé des deux autres ; le texte sans grand vide. */ .a-traiter .bouton-refuser{min-height:44px;padding:0 16px;border:1px solid color-mix(in srgb,var(--n800) 72%,var(--blanc)); border-radius:10px;text-decoration:none;color:var(--encre);margin-right:auto} .a-traiter .carte-gestes{display:flex;width:100%;gap:10px} .a-traiter .carte-corps .rendu{min-height:0;max-height:280px;overflow:auto} /* Les liens d'action, tous soulignés et turquoise foncé. */ .voir-travaux{text-decoration:underline;text-underline-offset:3px} /* Rien sous 13 px : heures et indications de format. */ .heure,.depot-formats,time.heure{font-size:13px} .depot-formats{color:var(--n800)} /* Mon compte : la page par défaut est « Mes préférences » ; les onglets se lisent mieux (texte inactif plus foncé). */ .onglet-compte-lien{color:var(--n800)} /* Les gestes du message (copier…) se rangent en haut à droite de la bulle, au lieu d'une rangée vide en bas. */ .parcours .bloc .lui.parcours-lui{position:relative;padding-bottom:16px} .parcours .bloc .lui.parcours-lui .gestes-message{position:absolute;top:8px;right:10px;margin:0} /* Mes préférences : le champ de saisie sur fond blanc, bord lisible. */ .compte-page textarea{background:var(--blanc);border:1px solid color-mix(in srgb,var(--n800) 45%,var(--blanc))} /* ══ V12 (jury n° 11) ══════════════════════════════════════════════════════════════════════════════════ */ /* Accueil : une seule surface turquoise foncé forte (« Reprendre ») ; la tuile vedette passe en teinte claire. */ .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande{ background:linear-gradient(135deg,color-mix(in srgb,var(--marque) 22%,var(--blanc)),color-mix(in srgb,var(--marque) 8%,var(--blanc))); border:1.5px solid var(--action)} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande b, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-desc{color:var(--encre)} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone{background:var(--action)} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone svg{color:var(--blanc)} /* Une colonne commune de 880 px (accueil compris) : le bord gauche ne saute plus d'un écran à l'autre. */ @media (min-width:768px){.accueil .accueil-haut,.accueil .cadre,.accueil .a-faire,.accueil .mes-parcours{max-width:880px;width:100%}} /* Deux boutons au contour, pas trois : « action » (turquoise foncé, 1,5 px) et « neutre » (gris foncé, 3,7:1). */ .ag-btn.ag-contour,.afaire-bouton.contour{border:1.5px solid var(--action);color:var(--action)} .options-bouton,.btn-partager,.tete .partager,.a-traiter .bouton-modifier,.a-traiter .bouton-refuser,.tete .menu>summary{ border:1px solid color-mix(in srgb,var(--n800) 72%,var(--blanc));color:var(--encre)} /* Bords de champ et de pastille à 3:1 au moins. */ .compte-page textarea{border-color:color-mix(in srgb,var(--n800) 72%,var(--blanc));min-height:120px} /* Mon compte : « En savoir plus » termine la phrase d'introduction. */ .compte-intro{display:inline;margin-right:8px} .compte-page .compte-detail{display:inline-block;vertical-align:baseline} /* Les petits textes : 14 px sur les en-têtes teintés, et les métadonnées des fiches. */ .tete .tete-gauche .sous{color:var(--n800)} .heure,time.heure,.a-traiter .carte-qui,.avant-de-valider .cav-libelle{font-size:14px} .mes-parcours .tuiles-depart .tuile-depart .tuile-desc{font-size:14px} /* Un seul anneau de focus, aussi sur les pastilles du composeur. */ .pastille-modele>summary:focus-visible .pastille,.pastille-guide:focus-visible .pastille-g{outline:3px solid var(--action);outline-offset:3px} .compte-page .compte-detail{margin-left:6px} .compte-page textarea{height:120px} /* ══ V13 (jury comparatif n° 1 : V12 contre V8) ══════════════════════════════════════════════════════════ */ /* Accueil : la grille de la V8, préférée à l'unanimité (6 tuiles égales sur 3 colonnes, pas de tuile vedette) ; « Autres demandes » en rangée de pastilles dessous. */ .mes-parcours .tuiles-depart[data-groupe="grandes"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart{grid-column:auto} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande{background:var(--blanc); border:1px solid var(--n400);min-height:150px} .mes-parcours .tuiles-depart[data-groupe="grandes"] .tuile-depart{min-height:150px} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande b{color:var(--encre);font-size:17px} .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-desc{color:var(--n800)} .mes-parcours .tuiles-depart[data-groupe] .tuile-icone, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone{ width:46px;height:46px;border-radius:14px;background:var(--action)} .mes-parcours .tuiles-depart .tuile-depart .tuile-icone svg, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone svg{color:var(--blanc);width:24px;height:24px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite{border:1px solid color-mix(in srgb,var(--action) 72%,var(--blanc)); border-radius:12px;background:var(--blanc);min-height:48px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone{width:32px;height:32px;border-radius:10px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone svg{width:18px;height:18px} /* Le compteur « À traiter » du menu : une pastille pleine (plus visible que le chiffre nu). */ .cote-principal .pastille-alerte{background:var(--action);color:var(--blanc)} /* L'envoi : grisé tant que le champ est vide (flèche à 6:1), plein dès qu'on écrit. */ .carte-composeur .envoyer.rond:not(.vif){background:var(--n200);color:var(--n800)} .carte-composeur .envoyer.rond.vif{background:var(--action);color:var(--blanc)} /* Mon compte : le lien de détail sur sa propre ligne (cible plus grande). */ .compte-intro{display:block;margin-right:0} .compte-page .compte-detail{display:block;margin-left:0} /* L'étape : le bouton conseillé porte « Conseillé ». */ .conseil-pastille{margin-left:10px;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px; background:color-mix(in srgb,var(--blanc) 22%,var(--action));color:var(--blanc);font-size:12.5px;font-weight:700} /* Un seul motif d'en-tête (les bulles), sur toutes les pages, Suivi des mails compris (à gauche de ses réglages). */ .tete:has(.tete-outils)::after{display:block;right:max(20px,calc((100% - 880px) / 2 + 330px))} /* Les textes secondaires : 14 px et 4,5:1 au moins, y compris sur le dégradé des en-têtes. */ .tete .tete-gauche .sous,.accueil .accueil-sous{color:var(--n800)} .heure,time.heure,.ag-mail-tete span:not(.ag-urgent),.atraiter-quand,.atraiter-sous,.travail-e,.cote-encours .travail-e, .afaire-texte span,.ag-accueil-texte p,.ag-accueil-note,.depot-formats,.compte-sous{font-size:14px;color:var(--n800)} #question::placeholder{color:var(--n800)} /* ══ V14 (calibrage : Mercury pour le visuel, DeepL pour la clarté) ══════════════════════════════════════════ */ /* 1. Un fond calme et plat : plus de dégradé ni de bulles ; le turquoise ne reste que sur le filet sous le titre, le logo et le focus. */ main:has(.accueil),.thr,.thr:has(.ag),.thr:has(.a-traiter),.thr:has(.parcours){background:color-mix(in srgb,var(--n200) 45%,var(--blanc));background-image:none} .tete:has(.tete-gauche){background:var(--blanc);border-bottom:1px solid color-mix(in srgb,var(--n800) 14%,var(--blanc))} .accueil-haut::after,.tete:has(.tete-gauche)::after,.tete:has(.tete-outils)::after{display:none} /* 2. Une seule forme de carte : blanc, filet de 1 px, rayon 12, sans ombre lourde. */ .afaire-carte,.afaire-carte.afaire-reprendre,.a-faire .ag-accueil,.ag-mail,.mes-parcours .tuiles-depart[data-groupe] .tuile-depart, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande,.a-traiter .atraiter-fiche>article, .atraiter-carte,.parcours .bloc .lui.parcours-lui,.liste.compte-page section,.profil-bloc,.compte-page .bloc-compte{ background:var(--blanc);border:1px solid color-mix(in srgb,var(--n800) 16%,var(--blanc));border-radius:12px; box-shadow:0 1px 2px color-mix(in srgb,var(--encre) 5%,transparent)} .mes-parcours .tuiles-depart[data-groupe] .tuile-depart:hover{border-color:var(--action);transform:translateY(-1px)} /* 3. L'urgent : un simple filet corail à gauche et une pastille pâle ; rien d'autre en corail. */ .afaire-carte.afaire-reprendre{border-left:1px solid color-mix(in srgb,var(--n800) 16%,var(--blanc))} .a-faire .ag-accueil:has(#ag-accueil-t),.ag-section .ag-mail.ag-mail-urgent{border-left:4px solid var(--urgent)} .a-faire .ag-accueil:has(#ag-accueil-t) .ag-accueil-icone{background:var(--n100);color:var(--encre)} .ag-urgent{background:color-mix(in srgb,var(--urgent) 16%,var(--blanc));color:var(--rouge700)} /* 4. L'accent est rare : le turquoise foncé plein ne sert qu'à l'action principale (« Reprendre », envoyer, Valider). Icônes de tuiles en pastille claire, pastilles « Autres demandes » neutres. */ .mes-parcours .tuiles-depart[data-groupe] .tuile-icone, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone{ width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--marque) 16%,var(--blanc))} .mes-parcours .tuiles-depart .tuile-depart .tuile-icone svg, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone svg{color:var(--action);width:22px;height:22px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite{border:1px solid color-mix(in srgb,var(--n800) 16%,var(--blanc)); background:var(--blanc)} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite b{color:var(--encre)} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone{background:var(--n100)} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone svg{color:var(--n800)} .cote-principal .lien-barre[aria-current=page]{background:var(--blanc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--n800) 16%,var(--blanc))} /* 5. Un point focal : le bonjour en grand, les sections nettes, un champ de saisie calme (bord neutre au repos, turquoise foncé au focus) ; « Options » en bouton fantôme ; les crédits n'apparaissent que s'ils baissent. */ .accueil .accueil-haut h1{font-size:40px;font-weight:700;letter-spacing:-.02em} .accueil{padding-top:clamp(20px,4vh,40px)} .accueil .carte-composeur{border:1px solid color-mix(in srgb,var(--n800) 30%,var(--blanc));border-radius:16px; box-shadow:0 1px 2px color-mix(in srgb,var(--encre) 5%,transparent)} .accueil .carte-composeur:focus-within{border:2px solid var(--action);box-shadow:0 0 0 4px color-mix(in srgb,var(--marque) 22%,transparent)} .options-bouton{border-color:transparent;background:transparent;color:var(--action)} .options-bouton:hover{background:var(--action100)} /* 6. Moins d'éléments à l'accueil : cartes « À faire » compactes (les raccourcis remontent dans le premier écran). */ .a-faire{gap:8px} .afaire-carte.afaire-reprendre{padding:10px 16px} .afaire-barre{margin-top:6px} .a-faire .ag-accueil{padding:10px 16px;gap:6px} .a-faire .ag-accueil .ag-accueil-icone{width:32px;height:32px;border-radius:8px} .a-faire .ag-accueil .ag-tout-voir,.a-faire .ag-accueil .ag-accueil-note{display:none} .a-faire .ag-accueil .ag-mail{padding-top:8px} .mes-parcours .tuiles-depart[data-groupe="grandes"] .tuile-depart{min-height:120px;padding:14px} /* 7. Les titres de page des écrans annexes : une seule voix, sur fond blanc net. */ .tete .tete-gauche h1{font-size:28px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone{width:28px;height:28px;border-radius:8px} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-depart.tuile-petite b{font-size:14.5px} main:has(.onglets-compte) .thr,.thr:has(.onglets-compte){background:color-mix(in srgb,var(--n200) 45%,var(--blanc))} .profil-stat,.profil-stat:first-child{background:var(--n100)} /* À traiter : la liste des étapes tient sur une ligne (plus de liste coupée) ; la pastille de vérification est neutre. */ .a-traiter .etapes{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding-left:0;list-style-position:inside} .puce-controle{background:var(--n100);color:var(--encre)} .puce-controle::before{background:var(--vert700)} .a-traiter .avant-de-valider{padding-top:10px;padding-bottom:10px} /* ══ V15 (fusion : la V14 et la marque de la V13) ═══════════════════════════════════════════════════════════ */ /* Une présence de marque mesurée : un voile turquoise léger en haut de l'accueil et des en-têtes (sans bulles). */ main:has(.accueil){background-image:linear-gradient(to bottom,color-mix(in srgb,var(--marque) 12%,var(--blanc)),transparent 260px)} .tete:has(.tete-gauche){background:color-mix(in srgb,var(--marque) 9%,var(--blanc))} /* Icônes des tuiles en pastille pâle, pictogramme turquoise foncé (jury comparatif n° 4 : deux jurés sur trois ; le turquoise foncé plein reste aux actions) ; pastilles « Autres demandes » teintées. */ .mes-parcours .tuiles-depart[data-groupe] .tuile-icone, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone{ background:color-mix(in srgb,var(--marque) 16%,var(--blanc))} .mes-parcours .tuiles-depart .tuile-depart .tuile-icone svg, .mes-parcours .tuiles-depart[data-groupe="grandes"] > form:first-child .tuile-depart.tuile-grande .tuile-icone svg{color:var(--action)} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone{background:color-mix(in srgb,var(--marque) 18%,var(--blanc))} .mes-parcours .tuiles-depart[data-groupe="aussi"] .tuile-icone svg{color:var(--action)} /* L'entrée active du menu, teintée. */ .cote-principal .lien-barre[aria-current=page]{background:color-mix(in srgb,var(--marque) 18%,var(--n100));box-shadow:none} /* « Options » : un vrai bouton à contour (cible visible). */ .options-bouton{border:1px solid color-mix(in srgb,var(--n800) 72%,var(--blanc));background:var(--blanc);color:var(--encre)} .options-bouton:hover{border-color:var(--action);background:var(--blanc)} /* Mon compte : les tuiles de chiffres teintées. */ .profil-stat,.profil-stat:first-child{background:color-mix(in srgb,var(--marque) 10%,var(--blanc))} /* La phrase de confiance, visible sur l'accueil et en tête du suivi des mails. */ .a-faire .ag-accueil .ag-accueil-note{display:block;margin:2px 0 0;font-size:14px;color:var(--n800)} .ag-confiance{margin:-4px 0 10px;font-size:14px;color:var(--n800)} /* ══ Jury comparatif n° 4 : ce que les trois jurés demandent ensemble ════════════════════════════════════════════ */ /* Le même bandeau d'en-tête sur toutes les pages : mêmes marges, 24 px sous le sous-titre (« À traiter » compris). */ .tete:has(.tete-gauche){min-height:0;padding-top:28px;padding-bottom:24px;align-items:flex-start} /* « Options » : à contour fermé, teinté une fois ouvert (l'état se voit). */ .options-composeur[open]>.options-bouton{background:color-mix(in srgb,var(--marque) 18%,var(--blanc));border-color:var(--action); color:var(--action700)} /* « Vérifié à 08:53 » : une pastille blanche, lisible sur le bandeau teinté. */ .tete .ag-statut:not(.coupee) .ag-pastille{background:var(--blanc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--n800) 16%,var(--blanc))} /* La bulle de l'assistant (étape d'un parcours) : « Assistant · heure » dans la marge intérieure (20 px), plus sur le bord. */ .parcours .bloc .lui.parcours-lui .lab .heure{left:60px} /* Téléphone (vérification des marges, 24/10/2026) : la mention de transparence prend toute la largeur (le menu est replié ; elle gardait 260 px de décalage et se tassait en colonne sur le champ) ; le champ montre deux lignes (l'invite d'une étape n'est plus coupée) ; le logo, hors de la bulle, sortait de l'écran : il se retire. */ @media (max-width:767px){ body:has(.cote) .bandeaux-du-produit .mention-ia{left:0} .carte-composeur #question{min-height:56px} .parcours .bloc .lui.parcours-lui .lab i{display:none} } /* Mon compte, « Votre façon de demander » : les cinq tuiles passent à la ligne quand la place manque (à 820 px, le texte touchait leur bord droit). */ .profil-gestes{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))} /* ══ Bordures fines partout (24/10/2026, Richard : « je n'aime pas les bordures épaisses ») ════════════════════════════ Une seule épaisseur : 1 px (les 1,5 px s'arrondissaient à 2 sur les écrans haute définition). Le soulignement de l'onglet actif garde 2 px : c'est un trait, pas un cadre. L'urgent garde un contour corail, fin. */ .carte-composeur:focus-within,.accueil .carte-composeur:focus-within{border:1px solid var(--action); box-shadow:0 1px 2px color-mix(in srgb,var(--encre) 5%,transparent)} .a-faire .ag-accueil:has(#ag-accueil-t),.ag-section .ag-mail.ag-mail-urgent{ border:1px solid color-mix(in srgb,var(--urgent) 55%,var(--blanc))} .ag-action{border-left-width:1px} .ag-case span{border-width:1px} .depot-zone,.parcours-depot-epure .depot-zone,.parcours-depot-epure .depot-zone.depot-pret{border-width:1px} .atraiter-carte.choisie{border-width:1px;padding:16px} .avant-de-valider{border-left-width:1px} .onglet-compte-lien,.a-traiter .onglet{border-bottom-width:2px} .ag-btn.ag-contour,.afaire-bouton.contour,.tuile.parcours-carte,.tuile.parcours-carte.conseillee, .parcours-depot-epure .depot-autre{border-width:1px} .parcours-etapes li::before,.parcours-barre .parcours-etapes li.ici::before,.parcours-compact .c-ici b{border-width:1px} /* « Relire ma demande avant l'envoi ? » (24/10/2026) : l'interrupteur allume et éteint ; « Voir les conseils », à côté et seulement allumé, ouvre la liste des gestes. */ .vol-options .guide{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px} .guide-voir{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:transparent; color:var(--action);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px; cursor:pointer} .guide-voir[hidden]{display:none} .guide-voir:focus-visible{outline:3px solid var(--action);outline-offset:3px} /* « Mes travaux » : « Effacer toutes mes discussions » (24/10/2026), un bouton discret à droite, confirmé sur place. */ .travaux-effacer-tout{margin:4px 0 12px;display:flex;flex-direction:column;align-items:flex-end} .travaux-effacer-tout>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px} .travaux-effacer-tout>summary::-webkit-details-marker{display:none} .travaux-effacer-tout[open]>summary{color:var(--rouge700)} .travaux-effacer-confirmer{align-self:stretch;margin-top:8px;padding:16px 20px;border:1px solid color-mix(in srgb,var(--urgent) 55%,var(--blanc));border-radius:12px;background:var(--blanc)} .travaux-effacer-confirmer p{margin:0 0 8px;font-size:14px;color:var(--n800)} .travaux-effacer-confirmer .travaux-effacer-t{font-size:15px;font-weight:700;color:var(--encre)} .travaux-effacer-confirmer form{margin:12px 0 0} /* ── La zone de saisie sur un fond continu (option A de Claude Design, choisie par Richard le 25/10/2026) ── « Je ne valide pas ce design avec tout le blanc comme ça » : la conversation était sur un fond teinté, mais tout ce qui suivait (la bande du composeur, la mention de transparence) restait blanc pur, coupé par un filet. Désormais toute la colonne porte la teinte du fil ; le composeur devient une carte blanche posée dessus (ombre légère, bord neutre) ; la mention suit juste en dessous, sans filet ni fond. Canevas : « Assistant CNA — refonte épurée », section 7, planche « Zone de saisie · A ». */ /* 1. UNE seule teinte pour toute la colonne, portée par la zone principale ; le fil devient transparent dessus. (Vu sur l'essai : la teinte recopiée sur la colonne ne rendait pas celle du fil, une bande restait visible.) Le gris neutre de la charte (« --n100 »), celui que le fil montrait déjà. */ #principal:has(.thr .parcours),#principal:has(.thr .ag),#principal:has(.thr .a-traiter), #principal:has(.onglets-compte){background:var(--n100)} #principal .thr:has(.parcours),#principal .thr:has(.ag),#principal .thr:has(.a-traiter), #principal:has(.onglets-compte) .thr{background:transparent} /* 2. Plus de bande blanche sous le fil, plus de filet au-dessus de la mention. */ .composeur{background:transparent} .bandeaux-du-produit .mention-ia{background:transparent;border-top:0;padding-top:4px} /* 3. Le composeur d'une conversation : une carte blanche flottante, SANS bordure (« retire la bordure noire autour du chat », Richard, 25/10/2026) : l'ombre seule la détache du fond. Au focus, un halo turquoise doux remplace le bord sombre (le champ reste repérable au clavier). L'accueil garde le sien (« 68-accueil-epure », « 69-kit-epure »). */ body:not(:has(.accueil)) .composeur .carte-composeur, body:not(:has(.accueil)) .composeur .carte-composeur:focus-within{border:1px solid transparent; box-shadow:0 1px 2px color-mix(in srgb,var(--encre) 6%,transparent), 0 8px 24px color-mix(in srgb,var(--encre) 8%,transparent)} body:not(:has(.accueil)) .composeur .carte-composeur:focus-within{ box-shadow:0 0 0 3px color-mix(in srgb,var(--marque) 40%,transparent), 0 8px 24px color-mix(in srgb,var(--encre) 8%,transparent)} /* (26/10/2026) Richard : « corrige la mise en forme ». Le compteur de jetons, posé SOUS la carte de saisie (« .pied-composeur », en absolu), tombait sur la mention fixée en bas de page (« Vous parlez à une IA… ») : les deux se chevauchaient. La zone de saisie garde, sous la carte, la hauteur du compteur EN PLUS de celle de la mention, sur l'accueil comme dans une discussion. */ /* (31/10/2026) Le compteur est retiré (décision de Richard) ; la zone garde la même hauteur sous la carte : la mention fixée en bas de page ne la chevauche toujours pas, et le composeur ne saute pas. */ .composeur:has(#cadre-composeur){padding-bottom:48px} @media (max-width:767px){.composeur:has(#cadre-composeur){padding-bottom:16px}} /* (26/10/2026) Richard : « le blanc autour de la zone de texte libre ». La teinte continue (1. plus haut) ne couvrait que les parcours, Agents, À traiter et Mon compte : la DISCUSSION LIBRE gardait son fil teinté au-dessus d'une bande blanche autour de la carte de saisie. Même règle pour toute page qui a une zone de saisie, l'accueil excepté. */ #principal:has(#composeur):not(:has(.accueil)){background:var(--n100)} #principal:has(#composeur):not(:has(.accueil)) .thr{background:transparent} /* (26/10/2026) Richard : « le texte d'exemple doit être plus clair, on a l'impression que c'est écrit et qu'on peut l'envoyer ». L'invite passe du gris foncé (« --n800 », proche du texte tapé) au gris clair d'une indication. */ #question::placeholder{color:var(--n500);opacity:1} /* (25/10/2026) « Modifier le ticket » sur la carte du ticket d'un événement : une fenêtre, sur le modèle de « Description et note » (57). Rien n'est écrit dans GLPI avant « Confirmer ». */ .tk-modif{display:inline-block;margin:10px 0 0} /* comme les gestes voisins (.parcours-geste) */ .tk-modif-bouton{display:inline-flex;align-items:center;list-style:none;cursor:pointer} .tk-modif-bouton::-webkit-details-marker{display:none} .tk-modif-bouton:focus-visible{outline:2px solid var(--rc-accent);outline-offset:2px} .tk-modif[open]::before{content:"";position:fixed;inset:0;background:var(--voile-fenetre);z-index:90} .tk-modif-fenetre{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:91; width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;box-sizing:border-box; display:flex;flex-direction:column;gap:14px;padding:22px 24px;border-radius:14px; background:var(--rc-fond);color:var(--rc-texte);box-shadow:0 18px 50px var(--ombre-fenetre)} .tk-modif-titre{font-size:16px;font-weight:700;line-height:1.35} .tk-modif-aide{margin:0;font-size:13px;line-height:1.45} .tk-modif-erreur{margin:0;padding:8px 12px;border-radius:10px;font-size:13px;line-height:1.45; border:1px solid var(--rc-trait3);background:var(--rc-fond)} .tk-modif-champ{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;font-weight:600;color:var(--rc-doux)} .tk-modif-champ input,.tk-modif-champ select,.tk-modif-champ textarea{font:inherit;font-size:15px;font-weight:400; color:var(--rc-texte);padding:9px 12px;border-radius:10px;border:1px solid var(--rc-trait2); background:var(--rc-fond);min-width:0;box-sizing:border-box;width:100%} .tk-modif-champ textarea{resize:vertical;line-height:1.45} .tk-modif-champ input:focus,.tk-modif-champ select:focus,.tk-modif-champ textarea:focus{outline:none; border-color:var(--rc-trait3)} .tk-modif-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px} .tk-modif-actions{display:flex;justify-content:flex-end;gap:10px} @media (max-width:560px){.tk-modif-grille{grid-template-columns:minmax(0,1fr)}} /* (26/10/2026) Richard : les tâches principales d'un compte rendu se cochent ; une preuve introuvable se dit. */ .cr-etat-ligne{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px;font-size:13px} .cr-coche{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer} .cr-coche input[type="checkbox"]{width:auto;margin:0} .cr-a-verifier{color:var(--ambre700);font-weight:600} .cr-preuve{flex-basis:100%;margin:0;color:var(--n600)} .cr-decochee{opacity:.72} .cr-ecartes{margin:0 0 8px} /* (26/10/2026) Richard : « le tableau est illisible, prends toute la largeur de la page ». La colonne Ticket était écrasée à quelques pixels (une lettre par ligne) dès que la carte était étroite : le tableau prend toute la largeur, la colonne Ticket garde 240 px au moins, et sous 760 px le titre passe sur sa propre ligne au-dessus de Pour / Échéance / Temps. */ .bloc:has(.parcours-cr-tableau){max-width:none} @container (min-width:760px){ .cr-page .cr-entete,.cr-page .cr-carte{grid-template-columns:minmax(240px,1fr) 230px 130px 80px 28px} } @container (min-width:560px) and (max-width:759px){ .cr-page .cr-entete{display:none} .cr-page .cr-carte{grid-template-columns:minmax(0,1fr) 130px 80px 28px;row-gap:4px;padding-top:10px;padding-bottom:10px} .cr-page .cr-carte>.cr-champ{grid-column:1 / 4;grid-row:1} .cr-page .cr-retirer{grid-column:4;grid-row:1} .cr-page .cr-grille>.cr-champ:nth-child(1){grid-column:1;grid-row:2} .cr-page .cr-grille>.cr-champ:nth-child(2){grid-column:2;grid-row:2} .cr-page .cr-grille>.cr-champ:nth-child(3){grid-column:3 / 5;grid-row:2} .cr-page .cr-badge{grid-row:auto} } /* Onglet Tickets : même demande (« le tableau est trop petit, il faut élargir ») ; la page n'est plus bornée à 820 px. */ .liste.page-tickets{max-width:none;padding-left:40px;padding-right:40px} /* La page d'un ticket (26/10/2026) : les personnes chargées, chacune avec sa case « Retirer ». */ .tk-modifier{max-width:960px} .tk-personnes{border:0;padding:0;margin:0;min-width:0} .tk-personnes legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600} .tk-liste-personnes{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .tk-personne{display:inline-flex;align-items:center;gap:10px;padding:4px 6px 4px 12px;border-radius:16px;background:var(--n100)} .tk-retirer{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--n600);cursor:pointer} .tk-retirer input{margin:0} /* La catégorie de chaque ticket d'un compte rendu (26/10/2026), sur la ligne « Créer ce ticket ». */ .cr-categorie-tache{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--n600)} .cr-categorie-tache select{padding:2px 6px;border:1px solid transparent;border-radius:6px;background:transparent;font:inherit;color:var(--mq-texte);cursor:pointer} .cr-categorie-tache select:hover,.cr-categorie-tache select:focus-visible{border-color:var(--mq-bord);background:var(--mq-fond)} /* CONVERSATION PARTAGÉE (30/10/2026) : le bandeau, l'étiquette de la liste, l'auteur d'un message. */ .bandeau-partage{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:8px 16px 0;padding:10px 14px;border-radius:var(--r1,8px);background:var(--n100);font-size:14px;line-height:1.5} .bandeau-partage p{margin:0;flex:1 1 260px} .bandeau-partage form{margin:0} .alerte-partage{margin:0;padding:10px 12px;border-radius:var(--r1,8px);background:var(--rouge100);color:var(--rouge700);font-size:14.5px;line-height:1.5} .nouveaux-messages{display:inline-block;margin:6px 16px 0} .etiquette-partage{margin-left:8px;padding:1px 8px;border-radius:10px;background:var(--n100);color:var(--n700);font-size:12px;white-space:nowrap} .auteur-tour{display:block;margin:0 0 2px;font-size:12px;font-weight:600;color:var(--n700)} .auteur-tour.moi-meme{color:var(--n800)} /* (30/10/2026) « n700 » et non « n600 » pour l'étiquette et la pastille (12 px) : n600 donne 3,5:1 sur le fond clair, n700 5:1 (« lisible en clair et en sombre »). Les deux sont des jetons : le bloc sombre les redéfinit. Plainte « votre collègue » À GAUCHE de la bulle, collé au texte. « .moi » est une RANGÉE (« display:flex ») : l'étiquette y était une colonne de plus, et son « display:block » n'y changeait rien. Une bulle qui porte une étiquette devient une COLONNE (comme celle qui porte une pièce jointe, « 08-discussion.css ») : l'étiquette AU-DESSUS, alignée sur le bord droit de la bulle. Des jetons seulement : le thème sombre les redéfinit, l'étiquette reste lisible. */ .moi:has(.auteur-tour){flex-direction:column;align-items:flex-end;gap:2px} .auteur-tour .auteur-nom{display:inline-block} .auteur-tour .auteur-nom::first-letter{text-transform:uppercase} /* Sous le message d'un collègue, l'heure ne dit plus « Vous · 23:03 » (« 42-refonte-conversation.css ») : même forme, son nom. */ .heure-moi.heure-collegue::before{content:"Votre collègue \00b7 "} /* (30/10/2026) Plainte « Tous mes travaux : "partagée" chevauche le bouton ⋯ » (clair comme sombre : la mise en page est la même). La ligne est une rangée : titre, étiquette, puis le menu ⋯ POSÉ EN ABSOLU à 8 px du bord (50-refonte-travaux.css), qui ne prend aucune place. L'étiquette, dernier élément de la rangée, finissait au bord de la ligne, SOUS le bouton. Sa marge droite couvre maintenant la distance du menu au bord (8 px) et son bouton (44 px au plus), plus un souffle ; elle garde sa largeur (« flex:none ») et c'est le titre qui rétrécit, avec ses points de suspension. Sans menu (la ligne d'une discussion qu'un collègue m'a partagée), elle ne réserve rien mais ne touche pas le bord. */ .liste-travaux .item .etiquette-partage{flex:none;margin-right:56px} .liste-travaux .item:not([data-sien]) .etiquette-partage{margin-right:14px} .liste-travaux .item .titre:has(+ .etiquette-partage){padding-right:12px} /* (30/10/2026) Capture de Richard : avec « Inviter » en plus de « Partager », la barre « Étape N sur M » (fixée à 200 px du bord) passait sous les boutons de l'en-tête. On la décale de la place du bouton en plus. */ @media (min-width:1100px){ .app:has(.tete [data-conversation-partagee-bouton]) .parcours-barre{right:310px} .app:has(.tete [data-conversation-partagee-bouton]):has(.panneau-visuel) .parcours-barre{right:calc(310px + var(--place-panneau))} } /* (28/10/2026) Réunions du CNA : liste, fiche, tâches, modèles. Sans style en attribut ; réutilise .onglets/.onglet/.vide/.doux. */ .page-reunions{max-width:980px} .page-reunions h2{font-size:17px;margin:0 0 12px} .page-reunions h3{font-size:15px;margin:16px 0 8px} .ru-bloc{margin:0 0 28px} .ru-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px} .ru-tete h2{margin:0 auto 0 0} .ru-formulaire{display:grid;gap:14px;max-width:720px} .ru-champ{display:grid;gap:6px;font-size:14px} .ru-champ>span{font-weight:600;font-size:13.5px} .ru-champ input,.ru-champ select,.ru-champ textarea,.ru-formulaire textarea,.ru-section textarea,.ru-tour textarea,.ru-recherche input,.ru-modele select{font:inherit;padding:10px 12px;border:1px solid var(--n400);border-radius:10px;background:var(--blanc);color:var(--encre);width:100%;box-sizing:border-box} .ru-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} .ru-avis,.ru-erreur{padding:12px 14px;border-radius:10px;margin:0 0 16px;font-size:14px} .ru-avis{background:var(--n200);color:var(--encre)} .ru-erreur{background:var(--rouge100);color:var(--rouge700)} .ru-recherche{display:flex;gap:8px;margin:0 0 12px;max-width:520px} .ru-defilement{overflow-x:auto;border:1px solid var(--n300);border-radius:12px;background:var(--blanc)} .ru-tableau{width:100%;border-collapse:collapse;font-size:14px} .ru-tableau th{text-align:left;font-weight:600;font-size:12.5px;color:var(--n800);padding:10px 12px;border-bottom:1px solid var(--n300);white-space:nowrap} .ru-tableau td{padding:10px 12px;border-bottom:1px solid var(--n300);vertical-align:top} .ru-tableau tbody tr:last-child td{border-bottom:0} .ru-titre{min-width:220px} .ru-titre a{font-weight:600;color:var(--encre)} .ru-etat{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;white-space:nowrap;border:1px solid var(--n300)} .ru-etat-pret{background:var(--n200)} .ru-etat-echec{border-color:var(--rouge700);color:var(--rouge700)} .ru-salle{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0} .ru-salle form{margin:0} .ru-fiche-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px} .ru-renommer form{display:flex;gap:8px;margin:8px 0} .ru-panneau{display:grid;gap:16px} .ru-modele{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;justify-content:flex-end} .ru-modele .ru-champ{min-width:220px} .ru-section{display:grid;gap:8px} .ru-section h3{margin:8px 0 0} .ru-orateurs{display:grid;gap:8px} .ru-orateur{display:flex;gap:8px;align-items:center} .ru-orateur .ru-champ{flex:1;max-width:320px} .ru-tours{display:grid;gap:12px} .ru-tour{display:grid;gap:6px} .ru-tour-tete{margin:0;font-size:13.5px} .ru-instant{font-variant-numeric:tabular-nums;color:var(--n800);font-size:13px} .ru-taches{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px} .ru-tache{display:flex;gap:10px;align-items:flex-start} .ru-tache form{margin:0} .ru-tache-corps{display:grid;grid-template-columns:minmax(240px,1fr) 160px 130px auto auto auto;gap:8px;align-items:center;flex:1;min-width:0} .ru-tache-corps .ru-champ{min-width:0} .ru-faite .ru-large input{text-decoration:line-through;opacity:.6} .ru-rond{width:28px;height:28px;border-radius:50%;border:2px solid var(--n400);background:var(--blanc);color:var(--encre);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-top:8px} .ru-faite .ru-rond{background:var(--n200)} .ru-ajout{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;max-width:none} .ru-ajout .ru-large{flex:1;min-width:220px} .ru-groupe{margin:0 0 12px} .ru-modeles{list-style:none;margin:0;padding:0;display:grid;gap:10px} .ru-modele-ligne{display:grid;gap:2px} .ru-partie{border:1px solid var(--n300);border-radius:12px;padding:12px;display:grid;gap:10px} .ru-case{display:flex;gap:8px;align-items:flex-start;font-size:14px} .ru-rang{display:flex;gap:8px;flex-wrap:wrap} .ru-suppression{margin:12px 0 0} .ru-regenerer{margin:12px 0 0} /* LE JURY (30/10/2026) : le bouton sous la réponse, l'avis des trois jurés, le verdict. */ .jury-geste{margin:6px 0 0} .jury-geste .acte{display:inline-flex;align-items:center;gap:6px;padding:6px 9px} .actes .jury-geste{margin:0} .jury{margin:10px 0 0;padding:12px 14px;border-radius:var(--r1,8px);background:var(--n100);border-left:4px solid var(--n400);font-size:14.5px;line-height:1.5} .jury-tient{border-left-color:var(--vert600)} .jury-a-nuancer{border-left-color:var(--orange600)} .jury-a-revoir{border-left-color:var(--rouge700)} .jury-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 8px} .jury-tete h3{margin:0;font-size:16px;flex:1 1 220px} .jury-corriger{margin:0} .jure{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--n200)} .jure p{margin:0 0 4px} .jure ul{margin:0 0 4px;padding-left:20px} .jure-modele,.jury-modele{color:var(--n600);font-size:12.5px} .jure-verdict{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;background:var(--surface);font-size:12.5px;font-weight:600} .jure-correction{color:var(--n800)} /* (30/10/2026) Richard, sur la dev : « il faut un peu agrandir la zone de chat dans toute l'app et aussi mettre un scroll sur le tableau pour pas sortir de la zone ». La colonne des messages (et du composeur, qui suit « .bloc ») passe de 688/720 px à 920 px ; un tableau ne sort jamais de sa bulle : il défile dans sa zone. */ .bloc{max-width:920px;padding:0 28px 0 clamp(28px,40px - (100% - 920px) / 2,40px)} .parcours .bloc{max-width:920px} .mails-trouve{max-width:100%;overflow-x:auto} .mails-trouve .mails-tableau{min-width:100%} .mails-trouve .mails-tableau td,.mails-trouve .mails-tableau th{vertical-align:top} .rendu .tableau,.parcours-rendu .tableau{max-width:100%;overflow-x:auto} /* (30/10/2026) Écran Tickets : la maquette VALIDÉE par Richard (canevas Claude Design, « TicketsListe » et « TicketsSelection »), élément par élément. Les couleurs viennent des jetons de « .page-tickets » (48-onglet-tickets.css), clairs et sombres. « Nouveau ticket » est le SEUL bouton plein de la page. */ .tete-outils .tk-bouton-nouveau{min-height:48px;padding:0 22px;border-radius:12px;border:0;font-size:15px;font-weight:600; background:#0B6E72;color:#fff;text-decoration:none;box-sizing:border-box} .tete-outils .tk-bouton-nouveau:hover{background:#08575A} :root[data-theme="sombre"] .tete-outils .tk-bouton-nouveau{background:#177E83} :root[data-theme="sombre"] .tete-outils .tk-bouton-nouveau:hover{background:#1F9096} .tete-outils:has(.tk-bouton-nouveau){flex-direction:row-reverse;gap:16px} /* recherche et puces */ .tk-ligne-recherche{display:flex;align-items:center;gap:12px;margin:0 0 12px} .tk-recherche{flex:1 1 auto;margin:0;min-width:0} .tk-champ-recherche{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:10px; border:1px solid var(--tk-bord-champ);background:var(--tk-fond);box-sizing:border-box;color:var(--tk-sous)} .tk-champ-recherche:focus-within{outline:2px solid var(--tk-accent);outline-offset:1px;border-color:var(--tk-accent)} .tk-champ-recherche input{flex:1 1 auto;min-width:0;border:0;outline:0;padding:0;background:transparent; font:inherit;font-size:14px;color:var(--tk-texte)} .tk-puces{display:flex;gap:8px;flex:none} .tk-puce{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:16px;box-sizing:border-box; border:1px solid var(--tk-bord-champ);background:var(--tk-fond);color:var(--tk-texte);font-size:13px;text-decoration:none} .tk-puce:hover{border-color:var(--tk-accent)} .tk-puce[aria-pressed="true"]{background:var(--tk-puce-fond);border-color:var(--tk-puce-fond);color:var(--tk-puce-texte);font-weight:600} /* menus Statut / Attribué à / Catégorie / Période : des « details » dont les entrées sont des liens GET */ .tk-ligne-menus{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px} .tk-menu{position:relative} .tk-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px; box-sizing:border-box;border:1px solid var(--tk-bord-champ);background:var(--tk-fond);color:var(--tk-texte); font-size:13.5px;cursor:pointer} .tk-menu>summary::-webkit-details-marker{display:none} .tk-menu>summary:focus-visible{outline:2px solid var(--tk-accent);outline-offset:1px} .tk-menu-actif>summary{border-color:var(--tk-accent);background:var(--tk-pale);color:var(--tk-accent);font-weight:600} .tk-menu-liste{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:200px;max-height:320px;overflow:auto; margin:0;padding:6px;list-style:none;background:var(--tk-fond);border:1px solid var(--tk-bord-champ);border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14)} .tk-menu-liste a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--tk-texte); text-decoration:none;font-size:13.5px;white-space:nowrap} .tk-menu-liste a:hover{background:var(--tk-pale)} .tk-menu-liste a[aria-current="true"]{font-weight:600;color:var(--tk-accent)} .tk-menu-liste a[aria-current="true"]::before{content:"\2713"} .tk-menu-vide{padding:8px 10px;font-size:13px;color:var(--tk-doux)} .tk-ressort{flex:1 1 auto} .tk-effacer{padding:0 6px;font-size:13.5px;font-weight:600;color:var(--tk-accent);text-decoration:none} .tk-effacer:hover{text-decoration:underline} /* la ligne du compteur, remplacée par la barre de sélection dès qu'une case est cochée */ /* COLLÉE : la barre de sélection reste en haut pendant le défilement (maquette « Défilement ») */ .tk-ligne-compteur{position:sticky;top:0;z-index:6;display:flex;align-items:center;min-height:52px;margin:0 0 8px; box-sizing:border-box;background:var(--tk-fond)} .tk-compteur{margin:0;padding-left:4px;font-size:13px;color:var(--tk-doux)} .tk-barre-selection{display:none;align-items:center;gap:12px;flex:1 1 auto;height:52px;padding:0 12px 0 20px; border-radius:12px;background:var(--tk-pale);box-sizing:border-box} .tk-selection:has(.tk-case input:checked) .tk-compteur{display:none} .tk-selection:has(.tk-case input:checked) .tk-barre-selection{display:flex} .tk-selection.tk-avec-selection .tk-compteur{display:none} .tk-selection.tk-avec-selection .tk-barre-selection{display:flex} .tk-barre-texte{flex:1 1 auto;font-size:14px;font-weight:600;color:var(--tk-texte)} .tk-sur{font-weight:400;color:var(--tk-doux)} .tk-bouton-bord,.tk-bouton-neutre{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px; border-radius:10px;box-sizing:border-box;background:var(--tk-fond);font:inherit;font-size:14px;font-weight:600; text-decoration:none;cursor:pointer} .tk-bouton-bord{border:1px solid var(--tk-accent);color:var(--tk-accent)} .tk-bouton-neutre{border:1px solid var(--tk-bord-neutre);color:var(--tk-texte)} .tk-bouton-bord:hover{background:var(--tk-pale)} .tk-bouton-neutre:hover{border-color:var(--tk-accent)} .tk-bouton-texte{height:40px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--tk-doux); font:inherit;font-size:14px;font-weight:600;cursor:pointer} .tk-bouton-texte:hover{color:var(--tk-texte)} /* le tableau */ /* « clip » et non « auto » : un défilement propre au tableau empêcherait l'en-tête de rester collé à la page */ .tk-defilement{border:1px solid var(--tk-bord-tableau);border-radius:14px;overflow:clip} /* (31/10/2026) Menus coupés par le bas du tableau (liste courte : « Nouveau groupe… » et « Gérer les groupes… » cachés). AVEC script, un menu ancré se pose en position FIXE calculée depuis son bouton (46-tickets-tout.js) : aucun conteneur ne le coupe. SANS script, rien ne peut le poser : le conteneur ne coupe plus. */ html:not(.tk-js) .tk-defilement{overflow:visible} .tk-js .tk-ancre[open]:not([data-place])>.tk-menu-ancre{visibility:hidden} .tk-tableau thead th{padding:6px 8px;background:var(--tk-entete-fond);border-bottom:0;vertical-align:middle; font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tk-sous)} .tk-tableau th:first-child,.tk-tableau td:first-child{padding-left:20px} .tk-tableau th:last-child,.tk-tableau td:last-child{padding-right:20px} .tk-tableau td{height:60px;padding:8px;border-top:1px solid var(--tk-trait-ligne);border-bottom:0;vertical-align:middle; box-sizing:border-box} .tk-tableau tbody tr:hover{background:var(--tk-ligne-cochee)} .tk-ligne{cursor:pointer;scroll-margin-top:120px} .tk-ligne:has(.tk-case input:checked),.tk-ligne.tk-cochee{background:var(--tk-ligne-cochee)} .tk-case input,.tk-tout{width:18px;height:18px;margin:0;accent-color:var(--tk-accent)} .tk-tri-lien{display:inline-flex;align-items:center;gap:6px;height:28px;color:var(--tk-sous);text-decoration:none} .tk-tri-lien:hover{color:var(--tk-texte)} .tk-tri-actif{color:var(--tk-texte)} .tk-tri-double{opacity:.45} .tk-titre-cellule{position:relative;min-width:240px} .tk-titre-cellule .tk-lien-ligne{display:flex;flex-direction:column;gap:2px;min-width:0;font-weight:400; color:var(--tk-texte);text-decoration:none} .tk-titre-cellule a.tk-lien-ligne:hover{color:var(--tk-texte);text-decoration:none} .tk-lien-ligne:hover .tk-titre-texte{text-decoration:underline} .tk-lien-ligne::after{content:"";position:absolute;inset:0} .tk-titre-texte{font-size:14.5px;line-height:1.4} .tk-sous-ligne{font-size:12.5px;color:var(--tk-sous)} .tk-titre-cellule .tk-num{margin-left:0;font-size:12.5px;color:var(--tk-sous)} .tk-etat{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;box-sizing:border-box; background:var(--tk-pale);color:var(--tk-accent);font-size:12.5px;font-weight:600;white-space:nowrap} .tk-etat-en_cours{background:var(--tk-cours-fond);color:var(--tk-cours-texte)} .tk-etat-en_attente{background:var(--tk-attente-fond);color:var(--tk-attente-texte)} .tk-etat-retard{background:var(--tk-retard-fond);color:var(--tk-retard-texte)} .tk-etat-resolu,.tk-etat-clos{background:transparent;border:1px solid var(--tk-trait);color:var(--tk-doux)} .tk-charges{min-width:150px;font-size:13px;color:var(--tk-texte)} .tk-avatar{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:6px; border-radius:10px;vertical-align:middle;background:var(--tk-pale);color:var(--tk-accent);font-size:11px;font-weight:700} .tk-date{font-size:13px;color:var(--tk-doux);white-space:nowrap} .tk-actions-ligne{text-align:right;white-space:nowrap} .tk-fermer-ligne{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:8px; background:transparent;color:var(--tk-doux);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .tk-fermer-ligne:hover,.tk-fermer-ligne:focus-visible{background:var(--tk-pale);color:var(--tk-accent)} /* le pied : le compteur, « Afficher plus » */ .tk-pied{display:flex;align-items:center;gap:16px;margin-top:16px} .tk-pied::after{content:"";flex:1 1 0} .tk-pied-texte{flex:1 1 0;margin:0;font-size:13px;color:var(--tk-doux)} /* l'état vide */ .tk-vide{display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 24px;text-align:center; border:1px solid var(--tk-bord-tableau);border-radius:14px;color:var(--tk-sous)} .tk-vide-titre{margin:0;font-size:15px;font-weight:600;color:var(--tk-texte)} .tk-vide-aide{margin:0;font-size:13.5px;color:var(--tk-doux)} .tk-vide .tk-bouton-neutre{margin-top:8px} /* les groupes de tickets : le point (sa couleur est posée par 46-tickets-tout.js), les pastilles, la page de gestion */ .tk-point{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:baseline; background:var(--tk-sous)} .tk-groupe{white-space:nowrap} .tk-menu-liste .tk-point{margin-right:0} .tk-groupes-titre{margin:24px 0 12px;font-size:15px;font-weight:700;color:var(--tk-texte)} .tk-groupes{list-style:none;margin:0;padding:0;display:grid;gap:12px} .tk-groupe-ligne{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--tk-bord-tableau);border-radius:14px} .tk-groupe-nom{margin:0;display:flex;align-items:center;gap:6px;font-size:14.5px} .tk-groupe-formulaire{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0} .tk-couleurs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:0;margin:0;padding:0;min-width:0} .tk-couleurs legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600} .tk-couleurs label{font-size:13px;color:var(--tk-texte)} .tk-pastille{position:relative;display:inline-block;width:28px;height:28px;border-radius:14px;background:var(--tk-sous)} .tk-pastille input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .tk-pastille:has(input:checked){outline:2px solid var(--tk-texte);outline-offset:2px} .tk-couleur-autre input[type="text"]{width:96px;margin-left:6px;padding:6px 8px;border:1px solid var(--tk-bord-champ);border-radius:8px; font:inherit;background:var(--tk-fond);color:var(--tk-texte)} .tk-supprimer-groupe{font-size:13px;color:var(--tk-retard-texte)} .tk-confirmer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px;padding:14px 16px;border-radius:12px; background:var(--tk-retard-fond);color:var(--tk-retard-texte)} .tk-confirmer p{margin:0;flex:1 1 280px} .tk-groupe-ticket{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0 0 16px;max-width:960px} /* ── maquette « TicketsGroupes » (validée le 30/10/2026) ───────────────────────────────────────────── */ /* l'en-tête du tableau reste COLLÉ sous la barre (52 px + 8 px de marge) */ .tk-tableau thead th{position:sticky;top:60px;z-index:5} .tk-js-seulement{display:none} .tk-js .tk-js-seulement{display:inline-flex} .tk-js .tk-js-seulement[hidden]{display:none} .tk-bouton-lien{border:0;background:transparent;padding:0 6px;font:inherit;font-size:13.5px;font-weight:600;color:var(--tk-accent);cursor:pointer} .tk-aide{font-size:12.5px;color:var(--tk-doux)} .tk-barre-selection{gap:14px} .tk-barre-selection .tk-barre-texte{white-space:nowrap} /* la ligne des menus : « Groupes (N) » et « Regrouper par » */ .tk-separateur{width:1px;height:24px;margin:0 4px;background:var(--tk-bord-champ)} .tk-bouton-groupes{height:36px;padding:0 12px;gap:6px;font-size:13.5px} .tk-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px; background:var(--tk-pale);color:var(--tk-accent);font-size:12px} .tk-regrouper{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tk-doux)} .tk-regrouper>span{margin-right:2px} /* la colonne « Groupe » : la pastille (point coloré + NOM), ou « + Groupe » en pointillés ; un petit menu ancré */ .tk-groupe-cellule{position:relative} .tk-ancre{position:relative;display:inline-block} .tk-ancre>summary{list-style:none;cursor:pointer} .tk-ancre>summary::-webkit-details-marker{display:none} .tk-pastille-bouton{display:inline-flex;align-items:center;gap:6px;max-width:210px;height:28px;padding:0 8px;border-radius:14px; box-sizing:border-box;font-size:12.5px;font-weight:600;color:var(--tk-texte)} .tk-pastille-vide{border:1px dashed var(--tk-bord-neutre);color:var(--tk-doux);font-weight:500} .tk-pastille-vide:hover{border-color:var(--tk-accent);color:var(--tk-accent)} .tk-pastille-groupe{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:12px; background:var(--tk-pale);color:var(--tk-accent);font-size:12.5px;font-weight:600;max-width:190px} .tk-pastille-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-pastille-bouton .tk-chevron{flex:none;color:var(--tk-doux)} .tk-point-neutre{background:var(--tk-bord-neutre)} .tk-menu-ancre{position:absolute;z-index:30;top:calc(100% + 4px);left:0;display:grid;gap:2px;width:260px;padding:8px; background:var(--tk-fond);border:1px solid var(--tk-bord-champ);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.16)} .tk-actions-groupe .tk-menu-ancre{left:auto;right:0;width:230px} .tk-recherche-groupe{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--tk-bord-champ); border-radius:10px;box-sizing:border-box;color:var(--tk-sous)} .tk-recherche-groupe input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13.5px; color:var(--tk-texte);padding:0} .tk-menu-titre{margin:6px 8px 2px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tk-sous)} .tk-entree-groupe{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent; font:inherit;font-size:13.5px;color:var(--tk-texte);text-align:left;text-decoration:none;cursor:pointer;box-sizing:border-box} .tk-entree-groupe:hover{background:var(--tk-pale)} .tk-entree-groupe svg:last-child:not(:first-child){margin-left:auto;color:var(--tk-accent)} .tk-entree-groupe[hidden]{display:none} .tk-menu-pied{display:grid;gap:2px;margin-top:4px;padding-top:6px;border-top:1px solid var(--tk-trait-ligne)} .tk-danger{color:var(--tk-retard-texte)} /* l'échéance en retard, en rouge */ .tk-echeance-retard{color:var(--tk-retard-texte);font-weight:600} /* le regroupement : des sections (un tbody chacune), repliables */ .tk-section-tete td{padding:10px 20px;background:var(--tk-entete-fond);border-top:1px solid var(--tk-bord-tableau)} .tk-section-bande{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tk-replier{position:relative;display:inline-flex;align-items:center;cursor:pointer;color:var(--tk-sous)} .tk-replier .tk-chevron{transition:transform .15s} .tk-replie{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .tk-replie:checked+.tk-chevron{transform:rotate(-90deg)} tbody.tk-section:has(.tk-replie:checked) .tk-ligne,tbody.tk-section:has(.tk-replie:checked) .tk-section-plus{display:none} .tk-section-titre{font-size:14.5px;font-weight:700;color:var(--tk-texte)} .tk-section-n,.tk-section-sans{font-size:13px;color:var(--tk-doux)} /* (31/10/2026) l'en-tête d'une section « par groupe » est teinté de la couleur du groupe (fond et texte posés par la feuille des couleurs) ; le texte hérite de la teinte lisible. En thème sombre, l'en-tête garde son fond : seul le point colore. */ .tk-section-bande[data-texte] .tk-section-titre,.tk-section-bande[data-texte] .tk-section-n, .tk-section-bande[data-texte] .tk-section-sans{color:inherit} :root[data-theme="sombre"] .tk-section-tete td[data-fond]{background-color:var(--tk-entete-fond)!important} :root[data-theme="sombre"] .tk-section-bande[data-texte]{color:var(--tk-texte)!important} .tk-section-case{width:18px;height:18px;margin:0;accent-color:var(--tk-accent)} .tk-bouton-petit{height:32px;padding:0 12px;gap:6px;font-size:13px} .tk-section-plus td{padding:10px 20px;border-top:1px solid var(--tk-trait-ligne)} .tk-section-plus .tk-bouton-neutre{height:34px;padding:0 14px;font-size:13px;margin-right:12px} .tk-section-vues{font-size:13px;color:var(--tk-doux)} /* la fenêtre « Groupes » (un ) et ses deux modes : LISTE, RANGEMENT (des tickets sont cochés) */ /* (31/10/2026) Test réel de la cliente : sans ticket coché, CHAQUE groupe apparaissait deux fois (« Sans groupe » aussi), le bouton du mode rangement ET le lien du mode liste. Cause : « .tk-mode-rangement{display:none} » (un seul nom de classe) était battue par « .tk-dlg-ligne{display:flex} », de MÊME poids, placée plus bas. Les règles des deux modes sont maintenant plus FORTES que toute règle d'affichage d'un composant de la fenêtre, quel que soit l'ordre (épreuve : la cascade de la vraie feuille, « tests/chat/test_tickets_reel_31_10.py »). */ .tk-dialogue .tk-mode-rangement{display:none} .page-tickets:has(.tk-case input:checked) .tk-mode-liste{display:none} .page-tickets:has(.tk-case input:checked) .tk-mode-rangement{display:inline} .page-tickets:has(.tk-case input:checked) .tk-dialogue .tk-dlg-ligne.tk-mode-rangement{display:flex} .page-tickets:has(.tk-case input:checked) .tk-dialogue label.tk-mode-rangement{display:flex} .tk-dialogue{position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 48px));padding:0;border:1px solid var(--tk-bord-champ); border-radius:16px;background:var(--tk-fond);color:var(--tk-texte);box-shadow:0 24px 60px rgba(0,0,0,.28)} .tk-dialogue[open]{display:flex;flex-direction:column} /* (31/10/2026) maquette « Ranger dans un groupe » : le résumé de la sélection, et le COMPTE de chaque groupe (« Ranger ici » au survol) */ .tk-dlg-resume{margin:0;padding:0 20px 10px;font-size:13px;color:var(--tk-doux)} .page-tickets:has(.tk-case input:checked) .tk-dialogue p.tk-mode-rangement{display:block} .tk-dlg-ici{display:none} .tk-dlg-ligne:hover .tk-dlg-ici,.tk-dlg-ligne:focus-visible .tk-dlg-ici{display:inline;color:var(--tk-accent);font-weight:600} .tk-dlg-ligne:hover .tk-dlg-compte,.tk-dlg-ligne:focus-visible .tk-dlg-compte{display:none} /* l'aperçu de la pastille d'un nouveau groupe (maquette « B · Création ») */ .tk-apercu{display:flex;align-items:center;gap:10px} .tk-apercu-titre{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tk-sous)} .tk-dialogue::backdrop{background:rgba(20,24,28,.45)} .tk-dlg-entete{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 12px} .tk-dlg-entete>div{flex:1 1 auto} .tk-dlg-entete h2{margin:0;font-size:17px;font-weight:700} .tk-dlg-sous{margin:4px 0 0;font-size:13px;color:var(--tk-doux)} .tk-dlg-fermer{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:10px; background:transparent;color:var(--tk-doux);cursor:pointer} .tk-dlg-fermer:hover{background:var(--tk-pale)} .tk-dlg-outils{display:flex;gap:10px;padding:0 20px 12px} .tk-dlg-outils .tk-recherche-groupe{flex:1 1 auto} .tk-dlg-outils .tk-bouton-bord{height:36px;gap:6px;padding:0 12px;font-size:13.5px} .tk-creation{margin:0 20px 12px;padding:14px 16px;display:grid;gap:12px;border:1px solid var(--tk-bord-tableau);border-radius:12px; background:var(--tk-entete-fond)} .tk-creation[hidden]{display:none} .tk-creation h3{margin:0;font-size:14.5px} .tk-creation p{margin:0} .tk-ranger{display:none;align-items:center;gap:8px;font-size:13.5px} .tk-dlg-boutons{display:flex;align-items:center;gap:10px} .tk-dlg-boutons .tk-bouton-bord{height:36px;padding:0 14px;font-size:13.5px} .tk-dlg-fixe{padding:0 12px} .tk-dlg-fixe .tk-dlg-ligne{width:100%} /* (31/10/2026) le bouton « Sans groupe » du mode rangement prend toute la ligne, compte à droite */ .tk-dlg-liste{flex:1 1 auto;min-height:80px;overflow-y:auto;margin:6px 0;padding:6px 12px;border-top:1px solid var(--tk-trait-ligne); border-bottom:1px solid var(--tk-trait-ligne)} .tk-dlg-groupe{position:relative;display:block} .tk-dlg-groupe[hidden]{display:none} .tk-dlg-rang{display:flex;align-items:center;gap:4px} .tk-dlg-ligne{display:flex;flex:1 1 auto;align-items:center;gap:10px;min-width:0;padding:10px;border:0;border-radius:10px; background:transparent;font:inherit;font-size:14px;color:var(--tk-texte);text-decoration:none;text-align:left;cursor:pointer;box-sizing:border-box} .tk-dlg-ligne:hover{background:var(--tk-pale)} .tk-dlg-nom{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-dlg-n{flex:none;font-size:13px;color:var(--tk-doux)} .tk-actions-groupe>summary{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--tk-doux)} .tk-actions-groupe>summary:hover{background:var(--tk-pale)} .tk-bascule{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .tk-edition,.tk-suppression{display:none;margin:2px 10px 10px;padding:12px;gap:12px;border:1px solid var(--tk-bord-tableau);border-radius:12px; background:var(--tk-entete-fond)} .tk-bascule-edition:checked~.tk-edition{display:grid} .tk-bascule-suppression:checked~.tk-suppression{display:grid} .tk-suppression p{margin:0;font-size:13.5px} .tk-danger-bouton{border-color:var(--tk-retard-texte);color:var(--tk-retard-texte)} .tk-dlg-pied{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 16px;font-size:13px;color:var(--tk-doux)} .tk-dlg-pied .tk-bouton-neutre{height:36px;padding:0 14px;font-size:13.5px} .tk-couleur-auto,.tk-couleur-autre{display:inline-flex;align-items:center;gap:6px;margin-top:6px} .tk-couleur-autre input[type="color"]{width:32px;height:28px;padding:0;border:1px solid var(--tk-bord-champ);border-radius:6px;background:transparent} .tk-creation .tk-champ input,.tk-edition .tk-champ input{border-color:var(--tk-bord-champ)} /* ROUVRIR (30/10/2026) : « Annuler » dans le message d'une fermeture, « Rouvrir le ticket » sur la fiche, menu ⋯ d'une ligne */ div.tk-succes{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .tk-annuler{display:inline;margin:0} .tk-rouvrir,.tk-clore{margin:0 0 16px} /* (31/10/2026) « Fermer le ticket » touchait le libellé « Titre » */ .tk-actions-ticket{margin-left:4px;vertical-align:middle} .tk-actions-ticket>summary{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--tk-doux)} .tk-actions-ticket>summary:hover{background:var(--tk-pale)} .tk-actions-ticket .tk-menu-ancre{left:auto;right:0;width:170px} /* (31/10/2026) « la liste doit s'afficher tout de suite » : une case « Attribué à » encore en lecture, discrète */ .tk-charges-attente{color:var(--tk-texte);opacity:.55;letter-spacing:.08em} /* « Mes logiciels » (/compte), 31/10/2026 : une carte par logiciel relié par personne, son état en pastille. Vérification réelle sur la dev : la page s'affichait en liste à puces, sans carte, l'état perdu dans le texte. */ .ml-logiciels{list-style:none;margin:0 auto;padding:0;max-width:720px;display:flex;flex-direction:column;gap:14px} .ml-logiciel{background:var(--blanc);border:1px solid var(--n300);border-radius:14px;padding:18px 22px} .ml-nom{display:inline-block;margin:0 10px 6px 0;font-size:18px;font-weight:600;color:var(--encre)} .ml-etat{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600; border:1px solid var(--n400);color:var(--n700)} .ml-relie{border-color:var(--cna);color:var(--cna)} .ml-logiciel .doux{margin:4px 0 10px;font-size:13px;color:var(--n700)} .ml-code{display:flex;flex-direction:column;gap:6px;margin-top:8px} .ml-code input[type=password]{min-height:44px;padding:0 12px;font:inherit;color:var(--encre); background:var(--blanc);border:1px solid var(--n400);border-radius:10px} .ml-code .bouton-plein{align-self:flex-start;margin-top:6px} /* (31/10/2026) La cliente (campagne du 30/10, D8, D15, critère M8 « quitter puis revenir dans la discussion ») : « Reprendre » liste jusqu'à trois travaux, une carte par ligne (trois colonnes étroites coupaient les titres) ; la liste des questions en attente se lit sous la phrase de l'assistant, avec la typographie du texte de la bulle (« .rendu » n'est pas réemployé : le script lit « le dernier .rendu » comme la phrase de la réponse). */ .afaire-reprises{grid-template-columns:1fr;gap:10px} .afaire-reprises .afaire-carte.afaire-reprendre{padding-top:14px;padding-bottom:14px} .attente-liste{font-size:16px;line-height:1.7;margin-top:.7em} .attente-liste .attente-questions{margin:0;padding-left:1.35em;max-width:34em} .attente-liste li{margin:.35em 0} .attente-liste li::marker{color:var(--n500)} /* (31/10/2026) Campagne R2 « découverte » : les boutons des tuiles citées par une réponse, en ligne sous la bulle. */ .tuiles-citees { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .tuiles-citees form { margin: 0; } /* (31/10/2026, tour 3, test Chrome) Le témoin « Autre couleur… » n'était qu'un trait de 3 px : le carré de la couleur choisie occupe tout le champ (sans la marge intérieure du navigateur). Rejeu réel du 31/10 : toujours un trait, le navigateur gardait son apparence native du champ couleur ; elle est retirée (« appearance:none »). */ .tk-couleur-autre input[type="color"]{-webkit-appearance:none;appearance:none;width:32px;height:32px;padding:0;border:1px solid var(--tk-bord-champ);border-radius:6px;background:transparent;cursor:pointer} .tk-couleur-autre input[type="color"]::-webkit-color-swatch-wrapper{padding:0} .tk-couleur-autre input[type="color"]::-webkit-color-swatch{border:0;border-radius:5px} .tk-couleur-autre input[type="color"]::-moz-color-swatch{border:0;border-radius:5px} /* (31/10/2026, tour 3, test Chrome) « 5 à 10 s sans signe d'attente » : le bouton d'un geste long dit qu'il travaille (« 49-tickets-attente.js »), et un petit cercle tourne à côté de son texte. */ .tk-attente{cursor:progress;opacity:.85} .tk-attente::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:tk-tourne .8s linear infinite} @keyframes tk-tourne{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.tk-attente::after{animation:none}} /* (31/10/2026, soir) LE TABLEAU DES TICKETS SE MODIFIE COMME UN TABLEUR (cahier des charges validé par Richard) : cases modifiables, signe d'attente discret, case confirmée, refus dit dans la case, ligne surlignée, ligne de création, fenêtre du titre (description, notes). Mêmes jetons de couleur que la liste (thème sombre compris). */ .tk-modifiable{cursor:pointer;border-radius:6px} .tk-modifiable:hover{background:var(--tk-ligne-cochee)} .tk-modifiable:focus-visible{outline:2px solid var(--tk-accent);outline-offset:1px} .tk-cat.tk-modifiable,.tk-prio.tk-modifiable{padding:0 3px;text-decoration:underline dotted var(--tk-doux);text-underline-offset:3px} .tk-renommer{margin-left:6px;padding:0 5px;border:0;border-radius:6px;background:transparent;color:var(--tk-doux); font:inherit;font-size:13px;cursor:pointer;opacity:0;vertical-align:baseline} .tk-ligne:hover .tk-renommer,.tk-renommer:focus-visible{opacity:1} .tk-renommer:focus-visible{outline:2px solid var(--tk-accent)} .tk-editeur{font:inherit;font-size:13px;color:var(--tk-texte);background:var(--tk-fond);border:1px solid var(--tk-accent); border-radius:8px;padding:4px 6px;max-width:100%} input.tk-editeur[type=text]{width:min(420px,100%)} div.tk-editeur{position:relative;z-index:5;min-width:220px;max-height:260px;overflow:auto;padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.18)} .tk-choix-personnes .tk-cherche-personne,div.tk-editeur .tk-cherche-personne{width:100%;margin-bottom:6px;font:inherit; font-size:13px;color:var(--tk-texte);background:var(--tk-fond);border:1px solid var(--tk-bord-champ);border-radius:6px;padding:4px 6px} .tk-liste-choix{list-style:none;margin:0;padding:0} .tk-liste-choix li{padding:2px 0;font-size:13px} .tk-liste-choix label{display:flex;gap:6px;align-items:center;cursor:pointer} .tk-c-attente{opacity:.6;cursor:progress} .tk-c-attente::after{content:" …";color:var(--tk-doux)} .tk-c-ok{background:var(--tk-ligne-cochee);transition:background .8s} .tk-c-erreur{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--tk-retard-texte)} .tk-surligne>td{background:var(--tk-ligne-cochee)} .tk-nouvelle>td{background:var(--tk-entete-fond)} .tk-nouvelle input,.tk-nouvelle select{font:inherit;font-size:13px;color:var(--tk-texte);background:var(--tk-fond); border:1px solid var(--tk-bord-champ);border-radius:8px;padding:4px 6px;max-width:100%} .tk-nouvelle .tk-nouveau-titre{width:100%} .tk-nouveau-plus{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap} .tk-nouveau-charges input{width:100%} .tk-fenetre{position:fixed;inset:0;margin:auto;width:min(680px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 48px)); padding:0;border:1px solid var(--tk-bord-champ);border-radius:16px;background:var(--tk-fond);color:var(--tk-texte); box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:auto} .tk-fenetre:not([open]){display:none} .tk-fenetre::backdrop{background:rgba(20,24,28,.45)} .tk-fenetre-corps{padding:18px 22px;display:flex;flex-direction:column;gap:12px} .tk-fenetre-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .tk-fenetre-tete h2{margin:0;font-size:18px;line-height:1.3} .tk-fenetre-sous-titre{margin:6px 0 0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--tk-sous)} .tk-fenetre textarea{width:100%;font:inherit;font-size:14px;color:var(--tk-texte);background:var(--tk-fond); border:1px solid var(--tk-bord-champ);border-radius:10px;padding:8px 10px;box-sizing:border-box} .tk-fenetre form{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .tk-suivis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .tk-suivi{border-left:3px solid var(--tk-bord-tableau);padding:2px 0 2px 10px} .tk-suivi-tete{margin:0;font-size:12.5px;color:var(--tk-doux)} .tk-suivi-texte{margin:2px 0 0;white-space:pre-wrap;font-size:14px} /* (31/10/2026, r6) B1 « le clic sur le crayon, la catégorie ou la priorité ouvre la fenêtre » : le lien du titre était étiré sur toute la cellule (« ::after », inset:0). Dans le tableur, il ne couvre que le TEXTE du titre ; chaque case s'édite. */ .tk-tableau[data-tickets-modifiables] .tk-titre-cellule .tk-lien-ligne{display:inline-flex} .tk-tableau[data-tickets-modifiables] .tk-lien-ligne::after{content:none} .tk-tableau[data-tickets-modifiables] .tk-renommer{opacity:.55} /* la liste des personnes flotte au-dessus du tableau : les colonnes ne bougent pas */ td.tk-en-edition{position:relative} div.tk-editeur{position:absolute;left:0;top:100%} .tk-nouvelle [aria-invalid="true"]{border-color:var(--tk-retard-texte);outline:2px solid var(--tk-retard-texte);outline-offset:1px} /* la case garde sa largeur : le champ s'y plie (r6 : « les colonnes changent de largeur ») */ td.tk-en-edition>select.tk-editeur,td.tk-en-edition>input.tk-editeur{box-sizing:border-box;width:100%;min-width:0;max-width:100%} .tk-titre-cellule .tk-editeur{box-sizing:border-box;max-width:100%;min-width:0} /* (01/11/2026, demande de Richard) L'ONGLET « VISUELS DES ÉVÉNEMENTS » : la liste de « Mes contenus », plus le statut de l'événement (annulé, reporté), les choix d'événement et de mois, et deux gestes en bouton (repartir, retirer). ⚠️ Aucune couleur en dur : les jetons de la feuille de base, que le thème sombre redéfinit déjà. */ .visuels-partages .contenu-vignette{object-fit:cover} .visuel-statut{display:inline-block;margin-left:8px;padding:0 8px;border-radius:999px;font-size:12px;line-height:20px; font-weight:600;vertical-align:middle;background:var(--n200);color:var(--n800)} .visuel-statut-annule{background:var(--rouge100);color:var(--rouge700)} .visuel-statut-reporte{background:var(--ambre100);color:var(--ambre700)} .visuels-partages form{display:inline;margin:0} .visuels-partages button.geste{font:inherit;cursor:pointer} .contenus-filtres select{font:inherit;margin-left:6px;padding:4px 8px;border:1px solid var(--n400);border-radius:var(--r2); background:var(--blanc);color:var(--n800)} /* (01/11/2026, rejeu réel) dans une carte, les trois gestes passent à la ligne au lieu de déborder */ .visuels-partages .contenu-gestes{flex-wrap:wrap;justify-content:flex-start;gap:6px;padding:0 10px} .visuels-partages .contenu-gestes .geste{min-height:36px;padding:0 8px;font-size:13px} .visuels-partages button.part{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 8px; border:1px solid var(--n400);border-radius:10px;background:var(--blanc);color:var(--rouge700);font:inherit;font-size:13px; cursor:pointer} .visuels-partages .visuel-statut{margin:0 4px 0 0} /* (01/11/2026, décisions de Richard) Un petit échantillon de couleur dans chaque bouton de fond ; la case « Accorder l'image au fond » du panneau du visuel. Clair et sombre : le contour de l'échantillon prend la couleur du texte (currentColor). */ .tuile.parcours-carte .parcours-carte-nom{display:flex;align-items:center;gap:10px;font-size:inherit;color:inherit} .parcours-echantillon{flex:none;display:block;color:var(--rc-texte)} .accord-image{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;padding:10px 14px;border:1px solid var(--rc-trait2);border-radius:10px;background:var(--rc-fond)} .accord-image-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .accord-image-choix{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:14px;color:var(--rc-texte);cursor:pointer} .accord-image-choix input{width:18px;height:18px;margin:0;accent-color:var(--rc-accent)} .accord-image .bouton-doux{min-height:36px;padding:0 14px;font-size:13px} .accord-image-aide{margin:0;font-size:13px} /* (02/11/2026) Richard : « sur la création de ticket il faut une popup ». La fenêtre « Nouveau ticket » reprend la fenêtre du tableur (« .tk-fenetre », 91-tickets-tableur.css : cadre, voile, thème sombre) ; ici, sa mise en page seule. Aucune couleur écrite : les jetons de « .page-tickets », clairs et sombres. */ .tk-fenetre-creation{width:min(620px,calc(100vw - 32px))} .tk-fenetre-creation .tk-creation-formulaire{display:flex;flex-direction:column;gap:14px;align-items:stretch} .tk-fenetre-creation .tk-fenetre-tete h2{font-size:19px} .tk-creation-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} @media (max-width:560px){.tk-creation-grille{grid-template-columns:1fr}} .tk-requis,.tk-facultatif{font-weight:400;color:var(--tk-doux)} .tk-fenetre-creation .tk-erreur{margin:0} .tk-fenetre-creation [aria-invalid="true"]{border-color:var(--tk-retard-texte);outline:2px solid var(--tk-retard-texte);outline-offset:1px} .tk-creation-pied{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px} .tk-bouton-principal{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px; border-radius:10px;box-sizing:border-box;border:1px solid var(--tk-plein-fond);background:var(--tk-plein-fond);color:var(--tk-plein-texte); font:inherit;font-size:14px;font-weight:600;cursor:pointer} .tk-bouton-principal:hover{filter:brightness(1.1)} .tk-bouton-principal:focus-visible,.tk-creation-pied .tk-bouton-neutre:focus-visible{outline:2px solid var(--tk-accent);outline-offset:2px} .tk-bouton-principal[aria-busy="true"]{cursor:progress;opacity:.8}