/* ==========================================================================
Bel Rive Wealth Management - feuille de style unique
Aucun framework externe, aucune requete sortante.
========================================================================== */
/* --- Polices, servies depuis static/ --------------------------------------
Sous-ensembles latin et latin-ext uniquement. Le navigateur ne telecharge
latin-ext que si un caractere l'exige (nom etranger, par exemple).
Les deux fichiers sont des polices variables : une seule ressource couvre
toute la plage de graisses declaree.
------------------------------------------------------------------------ */
@font-face {
font-family: "Oswald BRWM";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../polices/oswald-latin.5f49329007f1.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Oswald BRWM";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../polices/oswald-latin-ext.4276e5fb1957.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter BRWM";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../polices/inter-latin.260c81a4759b.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter BRWM";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../polices/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --- Systeme de design (lot 38, allege au lot 40) ------------------------------------------
TOUTES les valeurs de l'interface viennent d'ici : couleurs, espacements,
rayons, ombres, tailles et graisses de texte. Une valeur ecrite en dur
dans une regle est un defaut ; un test verifie qu'aucune couleur n'est
ecrite hors de ce bloc (tests/test_design.py).
LA LEGERETE (lot 40). Blanc, moderne, dans l'esprit des systemes
d'Apple : un fond blanc a peine grise, des surfaces blanches separees par
l'espace et des filets gris tres clairs, une ombre diffuse presque
imperceptible au repos et une elevation douce au survol, des coins
nettement arrondis, Inter partout (titres de page compris, en semi-gras
resserre), une barre laterale claire. L'identite se reconnait au marine
et a l'or, doses avec parcimonie : le marine porte le texte et l'action
principale, l'or ne marque que le focus et quelques reperes rares, et
jamais un texte sur fond clair.
LA FINESSE (lot 39, conservee). Un filet fait 1 px, jamais plus. Un champ
de formulaire a un filet fin (3:1, il delimite une zone ou l'on ecrit),
et au focus un anneau doux dans l'accent de la charte.
LE MOUVEMENT (lot 40). 200 ms et un amorti doux ; une carte s'eleve de
2 px au survol et s'enfonce a 98 % a l'appui ; les listes apparaissent
en fondu decale ; les replis se deplient. Tout est coupe quand le systeme
demande moins d'animation, et aucune animation ne retarde une action.
CONTRASTE. Rapports mesures, verifies par tests/test_identite.py et
tests/test_design.py :
or #B99A5A sur blanc ....... 2,68:1 -> JAMAIS de texte, reperes seulement
or #B99A5A sur marine ...... 6,16:1 -> texte autorise
marine sur le fond #fafafa . 15,2:1 -> texte courant
gris attenue sur le fond .... 6,1:1 (5,6:1 sur le remplissage)
filet de champ sur blanc .... 3,3:1
focus (or fonce) sur blanc .. 6,0:1 (5,4:1 sur le remplissage)
Tout couple introduit ici doit atteindre 4,5:1 pour du texte courant et
3:1 pour une bordure porteuse de sens.
------------------------------------------------------------------------ */
:root {
/* -- Couleurs de charte. L'identite tient au marine et a l'or, employes
avec parcimonie ; depuis le lot 40, le fond n'est plus l'ivoire mais un
blanc a peine grise. L'ivoire reste declare : c'est une couleur de la
charte, elle ne sert plus que de texte clair sur le marine. */
--marine: #0b1f3a;
--or: #b99a5a;
--ivoire: #f5f1e8;
/* -- La matiere (lot 40) : du blanc, des gris neutres tres clairs, et de
l'espace. Rien de beige. */
--fond: #fafafa; /* fond general */
--blanc: #ffffff; /* surfaces : blocs, barre laterale */
--survol: #f5f5f7; /* survol d'une ligne, fond a peine pose */
--remplissage: #f0f0f3; /* bouton secondaire, champ de recherche,
segment, rubrique active */
--remplissage-fort: #e6e6ea; /* le meme, au survol ou a l'appui */
--filet-clair: #ececec; /* le filet des blocs : a peine visible */
--filet-visible: #dcdce0; /* filet d'une pastille, d'un separateur */
--filet-action: #d1d1d6; /* contour d'une relance au survol */
--marine-clair: #16304f; /* survol d'une action pleine */
--or-fonce: #7a5f24; /* or assombri : 6:1 sur blanc, texte autorise */
--or-pale: #f7f1e3; /* carre d'une icone d'accent */
--info-carre: #eef2f8; /* carre pale d'une icone */
/* -- Texte : marine pour le principal, gris pour le secondaire. */
--texte: #0b1f3a;
/* Gris des mentions secondaires : 6,4:1 sur blanc, 6,1:1 sur le fond,
5,6:1 sur le remplissage. */
--texte-attenue: #55606d;
/* Ivoire attenue sur marine : 9,4:1 (bulle de la carte du patrimoine). */
--texte-sur-marine-attenue: #b9c4d2;
/* Filet d'un champ de formulaire : un gris neutre a 3,3:1 sur blanc, le
minimum d'un contour qui delimite une zone ou l'on ecrit. */
--bordure-champ: #8e8e93;
/* Le focus clavier : l'or assombri, 6:1 sur blanc, 5,4:1 sur le
remplissage. */
--focus: #7a5f24;
/* L'anneau doux d'un champ au focus. */
--anneau: rgba(185, 154, 90, 0.32);
/* -- Etats. Verifies a plus de 4,5:1 sur leur fond et sur blanc. */
--succes: #1c6b45;
--succes-fond: #e9f3ee;
--alerte: #8a4b12;
--alerte-fond: #fbf1e6;
--erreur: #9b1c1c;
--erreur-fond: #fbeaea;
--info-fond: #edf1f6;
/* Filets teintes des encarts d'etat : decoratifs, le mot porte le sens. */
--succes-filet: #c9e0d3;
--alerte-filet: #efdcc6;
--erreur-filet: #f0cccc;
--info-filet: #d6dfea;
/* -- Typographie (lot 40). INTER POUR TOUT, titres de page compris, en
semi-gras et a l'interlettrage resserre. Oswald ne sert plus qu'au
logotype. Sept tailles, pas une de plus : la hierarchie se fait par la
graisse et la couleur. */
--titre: "Oswald BRWM", "Arial Narrow", Impact, sans-serif; /* logotype */
--courant: "Inter BRWM", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--taille-xs: 0.75rem; /* 12 px : mentions, pastilles */
--taille-s: 0.8125rem; /* 13 px : texte secondaire */
--taille-m: 0.9375rem; /* 15 px : texte courant */
--taille-lecture: 1rem; /* 16 px : reponses de l'assistant, textes longs */
--taille-l: 1.0625rem; /* 17 px : titre de bloc */
--taille-xl: 1.25rem; /* 20 px : titre de section, chiffre */
--taille-titre: 1.875rem; /* 30 px : titre de page */
--taille-chiffre: 2.25rem; /* 36 px : le chiffre majeur du tableau de bord */
--graisse-normale: 400;
--graisse-moyenne: 500;
--graisse-forte: 600;
--interligne: 1.6;
--interligne-serre: 1.3;
--interlettrage-titre: -0.022em;
--mesure: 72ch; /* longueur de ligne confortable */
/* -- Espacement, sur une base de 8 px */
--esp-demi: 0.25rem; /* 4 px */
--esp-1: 0.5rem; /* 8 px */
--esp-2: 1rem; /* 16 px */
--esp-3: 1.5rem; /* 24 px */
--esp-4: 2rem; /* 32 px */
--esp-5: 2.5rem; /* 40 px */
--esp-6: 3rem; /* 48 px */
--esp-8: 4rem; /* 64 px */
/* -- Rayons (lot 40), nettement arrondis a la maniere d'Apple : trois
valeurs et la pilule. 6 px : pastilles de code, petits reperes ; 10 px :
champs, boutons, encarts ; 14 px : cartes, bulles, panneaux. */
--rayon-s: 6px;
--rayon: 10px;
--rayon-l: 14px;
--rayon-pilule: 999px;
/* -- Profondeur (lot 40) : au repos, une ombre diffuse presque
imperceptible ; au survol, une elevation douce ; les panneaux qui
flottent (menus, saisie) ont la leur. */
--ombre: 0 1px 2px rgba(11, 31, 58, 0.04), 0 4px 14px rgba(11, 31, 58, 0.03);
--ombre-survol: 0 2px 6px rgba(11, 31, 58, 0.05), 0 12px 28px rgba(11, 31, 58, 0.09);
--ombre-flottante: 0 2px 8px rgba(11, 31, 58, 0.05), 0 14px 36px rgba(11, 31, 58, 0.12);
--ombre-segment: 0 1px 2px rgba(11, 31, 58, 0.08), 0 1px 1px rgba(11, 31, 58, 0.04);
/* -- Verre depoli de l'en-tete collant : blanc translucide, flou dessous. */
--verre: rgba(250, 250, 250, 0.78);
--flou: saturate(180%) blur(18px);
/* -- Mouvement (lot 40) : 200 ms, un amorti doux ; coupe pour qui demande
moins d'animation (voir « prefers-reduced-motion »). */
--duree: 200ms;
--amorti: cubic-bezier(0.2, 0.8, 0.2, 1);
--transition: var(--duree) var(--amorti);
--elevation: translateY(-2px);
--enfoncement: scale(0.98);
--decalage-apparition: 35ms;
--or-voile: rgba(185, 154, 90, 0.14); /* fond d'un accent or */
--marine-voile: rgba(11, 31, 58, 0.04); /* fond a peine teinte */
/* -- Filets */
--filet: 1px solid var(--filet-clair);
--filet-fort: 1px solid var(--filet-visible);
--filet-champ: 1px solid var(--bordure-champ);
/* -- Ossature */
--barre: 248px;
}
/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--courant);
font-size: var(--taille-m);
line-height: var(--interligne);
color: var(--texte);
background: var(--fond);
font-feature-settings: "tnum" 0;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
/* LA HIERARCHIE (lot 40). Inter partout, titres de page compris : grand,
semi-gras, l'interlettrage legerement resserre, dans l'esprit des titres
d'Apple. Casse de phrase, jamais de capitales systematiques. Oswald ne
sert plus qu'au logotype. */
h1, h2, h3, h4 {
font-family: var(--courant);
font-weight: var(--graisse-forte);
color: var(--texte);
margin: 0 0 var(--esp-1);
line-height: var(--interligne-serre);
}
h1 {
font-family: var(--courant);
font-weight: var(--graisse-forte);
font-size: var(--taille-titre);
letter-spacing: var(--interlettrage-titre);
line-height: 1.15;
margin-bottom: var(--esp-1);
}
h2 { letter-spacing: -0.012em; }
/* Le rythme vertical (lot 39) : un titre de section prend de l'air AU-DESSUS
de lui, pas en dessous — il appartient a ce qui le suit. */
* + h2 { margin-top: var(--esp-4); }
* + h3 { margin-top: var(--esp-3); }
h2 { font-size: var(--taille-xl); }
h3 { font-size: var(--taille-l); }
h4 { font-size: var(--taille-m); }
p { margin: 0 0 var(--esp-2); }
p:last-child { margin-bottom: 0; }
/* Un lien se souligne d'un trait fin ; au survol, le trait prend la couleur
du texte plutot que de s'epaissir. */
a {
color: var(--texte);
text-decoration-color: var(--filet-action);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover { text-decoration-color: currentColor; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* Les transitions de la plateforme, et leur absence pour qui demande moins
de mouvement : aucune animation n'est necessaire a la comprehension. */
button, summary, .bouton, .filtre, .onglets__lien, .barre__lien {
transition: color var(--transition), background-color var(--transition),
border-color var(--transition), box-shadow var(--transition),
transform var(--transition);
}
/* LES ANIMATIONS (lot 40). Discretes, courtes, jamais sur le chemin d'une
action : un clic part tout de suite, l'animation accompagne.
- apparition : fondu tres court des elements d'une liste au chargement,
decale de 35 ms d'un element a l'autre (douze au plus, au-dela ils
arrivent ensemble) ;
- depliement : le contenu d'un repli glisse et apparait ;
- survol et appui : voir .carte-lien et .bouton.
L'apparition ne remplit QUE vers l'arriere (« backwards ») : remplie vers
l'avant, elle figerait « transform » a la fin et annulerait l'elevation
du survol. */
@keyframes apparition {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes depliement {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.apparait > * { animation: apparition 260ms var(--amorti) backwards; }
.apparait > :nth-child(2) { animation-delay: calc(1 * var(--decalage-apparition)); }
.apparait > :nth-child(3) { animation-delay: calc(2 * var(--decalage-apparition)); }
.apparait > :nth-child(4) { animation-delay: calc(3 * var(--decalage-apparition)); }
.apparait > :nth-child(5) { animation-delay: calc(4 * var(--decalage-apparition)); }
.apparait > :nth-child(6) { animation-delay: calc(5 * var(--decalage-apparition)); }
.apparait > :nth-child(7) { animation-delay: calc(6 * var(--decalage-apparition)); }
.apparait > :nth-child(8) { animation-delay: calc(7 * var(--decalage-apparition)); }
.apparait > :nth-child(9) { animation-delay: calc(8 * var(--decalage-apparition)); }
.apparait > :nth-child(10) { animation-delay: calc(9 * var(--decalage-apparition)); }
.apparait > :nth-child(11) { animation-delay: calc(10 * var(--decalage-apparition)); }
.apparait > :nth-child(n+12) { animation-delay: calc(11 * var(--decalage-apparition)); }
details[open] > :not(summary) { animation: depliement var(--duree) var(--amorti); }
/* Qui demande moins d'animation n'en recoit aucune : durees ramenees a
rien, et les elements sont a leur place finale d'emblee. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* LES REPLIS (lot 39) : un seul signe pour tout ce qui se deplie, le
chevron du jeu d'icones — un trait de 1,5 px, dessine par la feuille,
qui pivote a l'ouverture. Plus de triangle du navigateur, dont la forme
change d'un systeme a l'autre. */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before {
content: "";
display: inline-block;
width: 0.4rem;
height: 0.4rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--transition);
margin: 0 0.5rem 0.125rem 0.125rem;
vertical-align: middle;
}
details[open] > summary::before { transform: rotate(45deg); }
.attenue { color: var(--texte-attenue); }
.petit { font-size: var(--taille-s); }
/* Reserve aux lecteurs d'ecran. */
.hors-ecran {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%);
white-space: nowrap;
}
/* Lien d'evitement, visible seulement au clavier. */
.evitement {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--marine); color: var(--ivoire);
padding: var(--esp-1) var(--esp-2);
}
.evitement:focus { left: 0; }
/* --- Ossature ------------------------------------------------------------ */
.application {
display: grid;
grid-template-columns: var(--barre) minmax(0, 1fr);
min-height: 100vh;
/* La colonne de la barre reste blanche sur toute la hauteur de la page,
sous la barre collante (lot 40), filet de separation compris. */
background: linear-gradient(90deg, var(--blanc) calc(var(--barre) - 1px),
var(--filet-clair) calc(var(--barre) - 1px), var(--filet-clair) var(--barre),
var(--fond) var(--barre));
}
/* --- Barre laterale (lot 40) ----------------------------------------------
CLAIRE, comme la barre laterale d'une application du Mac : fond blanc, un
filet a droite, des icones au trait fin et des libelles en marine, la
rubrique ouverte sur une pastille gris tres clair aux coins arrondis, les
sections titrees en petit gris. Le logo est la version pour fond clair.
Elle reste en place quand la page defile. */
.barre {
background: var(--blanc);
color: var(--texte);
border-right: var(--filet);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.barre__entete {
padding: var(--esp-3) var(--esp-3) var(--esp-2);
display: flex;
align-items: center;
gap: var(--esp-1);
}
.barre__monogramme {
width: 30px;
height: 36px;
flex: none;
color: var(--or); /* le SVG est en currentColor */
}
/* Le logotype : la seule capitale de l'interface, parce que c'est une
marque, pas un titre ; la seule place d'Oswald. */
.barre__marque {
font-family: var(--titre);
text-transform: uppercase;
line-height: 1.1;
}
.barre__marque strong {
display: block;
font-size: var(--taille-l);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--texte);
}
.barre__marque span {
display: block;
font-size: 0.6rem;
letter-spacing: 0.22em;
color: var(--or-fonce); /* or assombri sur blanc : 6:1 */
margin-top: 2px;
}
.barre__navigation { padding: var(--esp-1) 0 var(--esp-2); flex: 1; }
.barre__titre-groupe {
font-size: var(--taille-xs);
font-weight: var(--graisse-moyenne);
color: var(--texte-attenue);
margin: 0;
padding: var(--esp-3) var(--esp-3) var(--esp-1);
}
.barre__titre-groupe:first-child { padding-top: var(--esp-1); }
.barre__lien {
display: flex;
align-items: center;
gap: 0.625rem;
margin: 1px var(--esp-2);
padding: 0.4375rem var(--esp-1);
border-radius: var(--rayon);
color: var(--texte);
text-decoration: none;
font-family: var(--courant);
font-size: var(--taille-m);
font-weight: var(--graisse-normale);
}
.barre__lien > span:not(.barre__mention) { flex: 1; min-width: 0; }
.barre__icone {
width: 20px;
height: 20px;
flex: none;
color: var(--texte-attenue);
stroke-width: 1.5;
}
.barre__icone * { vector-effect: non-scaling-stroke; }
.barre__lien:hover { background: var(--survol); }
.barre__lien:active { background: var(--remplissage-fort); }
.barre__lien[aria-current="page"] {
background: var(--remplissage);
font-weight: var(--graisse-forte);
}
.barre__lien[aria-current="page"] .barre__icone { color: var(--texte); }
/* Pastille « a venir » : discrete, en gris. */
.barre__mention {
font-family: var(--courant);
font-size: var(--taille-xs);
color: var(--texte-attenue);
border-radius: var(--rayon-pilule);
padding: 0 var(--esp-1);
background: var(--remplissage);
flex: none;
}
.barre__pied {
border-top: var(--filet);
padding: var(--esp-2) var(--esp-3);
font-size: var(--taille-s);
}
.barre__identite { margin-bottom: var(--esp-1); }
.barre__identite strong { display: block; color: var(--texte); font-weight: var(--graisse-forte); }
.barre__identite span { color: var(--texte-attenue); font-size: var(--taille-xs); }
.barre__deconnexion {
background: var(--remplissage);
border: 0;
border-radius: var(--rayon-pilule);
color: var(--texte);
font-family: var(--courant);
font-size: var(--taille-xs);
font-weight: var(--graisse-moyenne);
padding: 0.3125rem 0.75rem;
cursor: pointer;
}
.barre__deconnexion:hover { background: var(--remplissage-fort); }
/* --- Contenu (lot 40) ------------------------------------------------------
L'EN-TETE COLLANT EN VERRE DEPOLI. Le fil d'Ariane et le titre restent en
haut de l'ecran quand la page defile, sur un blanc translucide qui floute
ce qui passe dessous ; un filet n'apparait que sous le verre. Le
navigateur qui ne sait pas flouter recoit un blanc opaque (@supports).
La phrase d'introduction defile avec la page. */
.contenu { min-width: 0; display: flex; flex-direction: column; }
.contenu__entete {
position: sticky;
top: 0;
z-index: 20;
padding: var(--esp-4) var(--esp-5) var(--esp-2);
width: 100%;
background: var(--fond);
border-bottom: 1px solid transparent;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.contenu__entete {
background: var(--verre);
-webkit-backdrop-filter: var(--flou);
backdrop-filter: var(--flou);
}
}
.contenu__entete > * { max-width: 1280px; }
.contenu__entete h1 { margin: 0; }
.contenu__fil {
font-family: var(--courant);
font-size: var(--taille-s);
color: var(--texte-attenue);
margin: 0 0 var(--esp-demi);
}
.contenu__fil a { color: var(--texte-attenue); text-decoration: none; }
.contenu__fil a:hover { color: var(--texte); text-decoration: underline; }
.contenu__fil-separateur { margin: 0 var(--esp-1); }
.contenu__fil:empty { display: none; }
.contenu__intro {
padding: 0 var(--esp-5);
max-width: calc(1280px + 2 * var(--esp-5));
color: var(--texte-attenue);
}
.contenu__intro > * { max-width: var(--mesure); margin-top: 0; }
.contenu__intro .attenue { font-size: var(--taille-m); }
.contenu__corps {
padding: var(--esp-4) var(--esp-5) var(--esp-8);
flex: 1;
max-width: calc(1280px + 2 * var(--esp-5));
width: 100%;
}
/* --- Blocs et grilles (lot 40) -------------------------------------------
Un bloc : une surface blanche sur le fond a peine grise, un filet tres
clair et l'ombre diffuse du repos, des coins de 14 px, de l'air a
l'interieur. Un paragraphe n'y depasse pas la longueur de ligne
confortable. */
.carte {
background: var(--blanc);
border: var(--filet);
border-radius: var(--rayon-l);
box-shadow: var(--ombre);
padding: var(--esp-3);
}
.carte p { max-width: var(--mesure); }
/* Pas de marge automatique entre blocs : dans une grille elle decalerait
la seconde colonne. L'espacement se demande explicitement (.espace-haut). */
.carte__titre {
font-family: var(--courant);
font-size: var(--taille-l);
font-weight: var(--graisse-forte);
color: var(--texte);
margin: 0 0 var(--esp-2);
display: block;
}
/* Trois colonnes au plus sur grand ecran, deux sur tablette, une sur
telephone : l'air entre les blocs compte autant que les blocs. */
.grille { display: grid; gap: var(--esp-3); }
.grille--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
.grille--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.grille--deux, .grille--trois { grid-template-columns: minmax(0, 1fr); }
/* Des compteurs : deux par ligne, meme sur un telephone (lot 40). */
.grille--trois:has(> .compteur), .grille--deux:has(> .compteur) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-1); }
}
/* Liste de couples libelle / valeur. */
.champs { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem var(--esp-3); margin: 0; }
.champs dt { color: var(--texte-attenue); font-size: var(--taille-s); }
.champs dd { margin: 0; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }
/* --- Etiquettes et pastilles ---------------------------------------------
Petites, en casse de phrase, sans bordure : un fond a peine teinte, et une
pastille de couleur pour le sens. Le sens ne tient jamais a la seule
couleur : le mot est toujours ecrit. */
.etiquette {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-size: var(--taille-xs);
font-weight: var(--graisse-moyenne);
line-height: 1.5;
padding: 0.05rem var(--esp-1);
border-radius: var(--rayon-pilule);
border: 0;
background: var(--survol);
color: var(--texte-attenue);
white-space: nowrap;
}
.etiquette::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: none;
}
.etiquette--marine { color: var(--texte); background: var(--info-fond); }
.etiquette--mentor { color: var(--alerte); background: var(--alerte-fond); }
.etiquette--actif { color: var(--succes); background: var(--succes-fond); }
.etiquette--inactif { color: var(--erreur); background: var(--erreur-fond); }
/* Une liste de mots-cles : un texte fin, separe par des points. */
.mots {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
font-size: var(--taille-s);
color: var(--texte-attenue);
}
.mots li:not(:last-child)::after { content: "·"; margin: 0 var(--esp-1); }
/* --- Tableaux ------------------------------------------------------------ */
/* Un tableau large defile DANS SA PROPRE ZONE, jamais en poussant la page.
« position: relative » n'est pas decoratif : sans lui, un element place en
absolu a l'interieur — le « Actions » reserve aux lecteurs d'ecran dans un
en-tete de colonne, par exemple — prend pour reference le coin de la page
et non celui de cette zone. Il echappe alors au decoupage, et traine la
largeur du document avec lui : mesure sur l'ecran des comptes, 973 px de
document pour un telephone de 375. */
.cadre-tableau { overflow-x: auto; position: relative; }
/* Lot 39 et 40 : un filet fin autour et l'ombre diffuse des surfaces ; des
lignes aerees separees d'un trait a peine visible ; des en-tetes
discrets, en casse de phrase ; les chiffres en chiffres tabulaires (et a
droite quand la colonne est un montant ou un nombre : classe « montant »
ou « nombre »). */
.cadre-tableau { border-radius: var(--rayon-l); border: var(--filet); background: var(--blanc); box-shadow: var(--ombre); }
table.liste {
width: 100%;
border-collapse: collapse;
background: var(--blanc);
font-size: var(--taille-s);
font-variant-numeric: tabular-nums;
}
table.liste th {
text-align: left;
font-family: var(--courant);
font-size: var(--taille-xs);
font-weight: var(--graisse-moyenne);
color: var(--texte-attenue);
padding: 0.625rem var(--esp-2);
border-bottom: var(--filet);
white-space: nowrap;
}
table.liste td {
padding: 0.75rem var(--esp-2);
border-bottom: var(--filet);
vertical-align: middle;
}
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste tbody tr { transition: background-color var(--transition); }
table.liste tbody tr:hover { background: var(--survol); }
table.liste td.actions { white-space: nowrap; text-align: right; }
/* Le motif d'une ligne sans action se lit en entier : il passe a la ligne
au lieu de pousser le tableau hors de son cadre. */
table.liste td.actions .actions__motif { display: inline-block; white-space: normal; min-width: 14rem; max-width: 20rem; text-align: left; }
table.liste td.nombre, table.liste th.nombre { text-align: right; white-space: nowrap; }
/* --- Actions (lot 40) -----------------------------------------------------
UNE SEULE ACTION PRINCIPALE PLEINE PAR ECRAN (.bouton), en marine, aux
coins de 10 px. Les autres sont sur un fond gris tres clair, sans bordure
(.bouton--secondaire), ou en texte (.bouton--discret, .lien-action). Un
bouton s'enfonce legerement a l'appui. Dans une grille, c'est la carte
entiere qui s'ouvre. */
.bouton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-1);
font-family: var(--courant);
font-size: var(--taille-s);
font-weight: var(--graisse-forte);
padding: 0.5625rem var(--esp-2);
border-radius: var(--rayon);
border: 1px solid var(--marine);
background: var(--marine);
color: var(--blanc); /* blanc sur marine : 16,5:1 */
text-decoration: none;
cursor: pointer;
line-height: 1.35;
}
.bouton:hover { background: var(--marine-clair); border-color: var(--marine-clair); }
.bouton:active { transform: var(--enfoncement); }
.bouton--secondaire {
background: var(--remplissage);
color: var(--texte);
border-color: transparent;
font-weight: var(--graisse-moyenne);
}
.bouton--secondaire:hover { background: var(--remplissage-fort); color: var(--texte); border-color: transparent; }
.bouton--discret {
background: transparent;
color: var(--texte);
border-color: transparent;
font-weight: var(--graisse-moyenne);
padding: var(--esp-demi) var(--esp-1);
text-decoration: underline;
text-decoration-color: var(--filet-visible);
text-underline-offset: 3px;
}
.bouton--discret:hover { background: var(--survol); border-color: transparent; text-decoration-color: currentColor; }
.bouton--danger { border-color: transparent; color: var(--erreur); background: var(--erreur-fond); font-weight: var(--graisse-moyenne); }
.bouton--danger:hover { background: var(--erreur-fond); color: var(--erreur); border-color: var(--erreur-filet); }
.barre-actions { display: flex; gap: var(--esp-1); flex-wrap: wrap; align-items: center; }
/* Le chevron d'une carte cliquable (lot 40) : plus de « Ouvrir → » ecrit
sur chaque carte, un chevron discret au trait de 1,5 px, qui glisse au
survol. Le libelle complet reste pour les lecteurs d'ecran. */
.ouvrir {
display: inline-flex;
align-items: center;
gap: var(--esp-demi);
font-size: var(--taille-s);
font-weight: var(--graisse-moyenne);
color: var(--texte);
text-decoration: none;
}
.ouvrir__fleche { transition: transform var(--transition); }
.chevron {
display: inline-block;
flex: none;
width: 0.5rem;
height: 0.5rem;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
color: var(--texte-attenue);
transition: transform var(--transition), color var(--transition);
}
/* LA CARTE CLIQUABLE. Un seul lien (ou bouton) dans la carte ; son
pseudo-element couvre la carte entiere. Au clavier, c'est ce lien qui
prend le focus, et la carte entiere le montre. Au survol, elle s'eleve de
2 px sous une ombre plus presente ; a l'appui, elle s'enfonce a 98 %. */
.carte-lien {
position: relative;
transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.carte-lien:hover { box-shadow: var(--ombre-survol); border-color: var(--filet-visible); transform: var(--elevation); }
.carte-lien:active { transform: var(--enfoncement); box-shadow: var(--ombre); }
.carte-lien:hover .ouvrir__fleche { transform: translateX(3px); }
.carte-lien:hover .chevron { transform: translateX(2px) rotate(45deg); color: var(--texte); }
.carte-lien .carte-lien__cible::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte-lien .carte-lien__cible:focus-visible { outline: none; }
/* Le contour de la carte suit le focus CLAVIER de son lien : un clic a la
souris ne l'allume pas (lot 40). */
.carte-lien:has(.carte-lien__cible:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.carte-lien .carte-lien__cible { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; text-align: left; }
/* --- Filtres, segments et onglets (lot 40) --------------------------------
LES FILTRES : des pastilles grises sans bordure ; l'actif passe en marine
plein, texte blanc. LES SEGMENTS, a la maniere d'iOS : une piste grise,
et le segment choisi pose dessus en blanc, avec une ombre fine. */
.filtres { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin: 0; padding: 0; list-style: none; }
.filtre {
display: inline-flex;
align-items: center;
gap: var(--esp-1);
padding: 0.3125rem 0.875rem;
border-radius: var(--rayon-pilule);
font-size: var(--taille-s);
font-weight: var(--graisse-moyenne);
color: var(--texte);
background: var(--remplissage);
border: 0;
text-decoration: none;
line-height: 1.5;
}
.filtre:hover { background: var(--remplissage-fort); }
.filtre:active { transform: var(--enfoncement); }
.filtre--actif, .filtre[aria-current="true"] {
background: var(--marine);
color: var(--blanc);
font-weight: var(--graisse-forte);
}
.filtre__nombre { font-size: var(--taille-xs); color: var(--texte-attenue); font-weight: var(--graisse-normale); }
.filtre--actif .filtre__nombre, .filtre[aria-current="true"] .filtre__nombre { color: var(--texte-sur-marine-attenue); }
.segments {
display: inline-flex;
flex-wrap: wrap;
gap: 2px;
padding: 2px;
border-radius: var(--rayon);
background: var(--remplissage);
}
.segment {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.3125rem 0.875rem;
border-radius: var(--rayon-s);
font-size: var(--taille-s);
font-weight: var(--graisse-moyenne);
color: var(--texte-attenue);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.segment:hover { color: var(--texte); }
.segment--actif, .segment[aria-current="true"] {
background: var(--blanc);
color: var(--texte);
font-weight: var(--graisse-forte);
box-shadow: var(--ombre-segment);
}
/* --- Formulaires --------------------------------------------------------- */
/* Tout champ, ou qu'il soit pose (lot 38) : les champs hors d'une ligne de
formulaire — filtres, recherches — ne restent plus au dessin du
navigateur. Les regles plus precises (formulaire, saisie du chat,
atelier) l'emportent. */
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
font-family: var(--courant);
font-size: var(--taille-s);
color: var(--texte);
background: var(--blanc);
border: var(--filet-champ);
border-radius: var(--rayon);
padding: var(--esp-1) 0.75rem;
max-width: 100%;
transition: border-color var(--transition), box-shadow var(--transition);
}
/* LE FOCUS D'UN CHAMP (lot 39) : le filet passe au marine (15:1), et un
anneau doux d'or l'entoure. Le contour transparent n'est pas decoratif :
en mode de contraste force, ou les ombres disparaissent, c'est lui que
le systeme redessine. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
select:focus, textarea:focus {
border-color: var(--marine);
box-shadow: 0 0 0 3px var(--anneau);
outline: 2px solid transparent;
outline-offset: 0;
}
input::placeholder, textarea::placeholder { color: var(--texte-attenue); opacity: 1; }
.formulaire { max-width: 640px; }
.formulaire__ligne { margin-bottom: var(--esp-3); }
.formulaire__ligne label {
display: block;
font-size: var(--taille-s);
font-weight: var(--graisse-forte);
color: var(--texte);
margin-bottom: var(--esp-demi);
}
.formulaire__ligne input[type="text"],
.formulaire__ligne input[type="email"],
.formulaire__ligne input[type="password"],
.formulaire__ligne input[type="date"],
.formulaire__ligne input[type="search"],
.formulaire__ligne input[type="number"],
.formulaire__ligne input[type="url"],
.formulaire__ligne select,
.formulaire__ligne textarea {
width: 100%;
font-family: var(--courant);
font-size: var(--taille-m);
color: var(--texte);
background: var(--blanc);
border: var(--filet-champ);
border-radius: var(--rayon);
padding: 0.5625rem 0.75rem;
}
.formulaire__ligne--case { display: flex; align-items: flex-start; gap: var(--esp-1); }
.formulaire__ligne--case label { font-weight: var(--graisse-normale); font-size: var(--taille-m); margin: 0; }
.formulaire__ligne--case input { margin-top: 0.3rem; accent-color: var(--marine); }
.formulaire__aide { font-size: var(--taille-s); color: var(--texte-attenue); margin-top: var(--esp-demi); }
.formulaire__aide ul { margin: var(--esp-demi) 0 0; padding-left: var(--esp-2); }
.formulaire__erreur { color: var(--erreur); font-size: var(--taille-s); margin-top: var(--esp-demi); font-weight: var(--graisse-moyenne); }
.groupe-champs {
border: var(--filet);
border-radius: var(--rayon-l);
background: var(--blanc);
padding: var(--esp-2) var(--esp-3) var(--esp-3);
margin: 0 0 var(--esp-3);
box-shadow: var(--ombre);
/* Un fieldset prend par defaut la largeur minimale de son contenu : un
champ de fichier le ferait deborder sur un telephone. */
min-inline-size: 0;
}
.groupe-champs input[type="file"] { max-width: 100%; }
.groupe-champs legend {
font-family: var(--courant);
font-size: var(--taille-m);
font-weight: var(--graisse-forte);
color: var(--texte);
padding: 0 var(--esp-1);
}
/* --- Messages ------------------------------------------------------------ */
.messages { list-style: none; margin: 0 0 var(--esp-3); padding: 0; }
/* Lot 39 : plus de barre epaisse a gauche. Un filet fin, un fond a peine
teinte selon l'etat — et le message lui-meme, qui dit ce qui se passe. */
.message {
border: 1px solid var(--info-filet);
border-radius: var(--rayon);
background: var(--info-fond);
padding: 0.625rem var(--esp-2);
font-size: var(--taille-s);
}
.message + .message { margin-top: var(--esp-1); }
.message--success { background: var(--succes-fond); border-color: var(--succes-filet); }
.message--error { background: var(--erreur-fond); border-color: var(--erreur-filet); }
.message--warning { background: var(--alerte-fond); border-color: var(--alerte-filet); }
.encart-erreur {
border: 1px solid var(--erreur-filet);
border-radius: var(--rayon);
background: var(--erreur-fond);
color: var(--erreur);
padding: var(--esp-1) var(--esp-2);
font-size: var(--taille-s);
margin-bottom: var(--esp-2);
}
/* --- Utilitaires d'espacement -------------------------------------------- */
.espace-haut { margin-top: var(--esp-3); }
.espace-haut-court { margin-top: var(--esp-2); }
.espace-bas { margin-bottom: var(--esp-3); }
.en-ligne { display: inline-block; }
.champ-recherche {
font-family: var(--courant);
font-size: var(--taille-s);
color: var(--texte);
background: var(--blanc);
border: var(--filet-champ);
border-radius: var(--rayon);
padding: var(--esp-1) 0.75rem;
min-width: 220px;
}
/* LE CHAMP DE RECHERCHE (lot 40), a la maniere d'iOS : un fond gris tres
clair, pas de bordure au repos, une loupe au trait fin (un fichier du
domaine, static/images/loupe.svg). Au focus, il redevient blanc, avec le
filet marine et l'anneau doux de tous les champs. */
input[type="search"], input[type="search"].champ-recherche {
background: var(--remplissage) url("../images/loupe.2ed818f778d3.svg") no-repeat 0.75rem center / 1rem 1rem;
border-color: transparent;
padding-left: 2.25rem;
}
input[type="search"]:hover { background-color: var(--remplissage-fort); }
input[type="search"]:focus { background-color: var(--blanc); }
/* --- Actualite economique ------------------------------------------------ */
.entete-encart {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.actualite { list-style: none; margin: 0; padding: 0; }
.actualite__point {
padding: var(--esp-2) 0;
border-bottom: var(--filet);
}
.actualite__point:last-child { border-bottom: 0; padding-bottom: 0; }
.actualite__point--relecture {
border: var(--filet);
border-radius: var(--rayon-l);
padding: var(--esp-2);
margin-bottom: var(--esp-1);
background: var(--blanc);
}
.actualite__meta {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin: 0 0 var(--esp-demi);
}
.actualite__source {
font-family: var(--courant);
color: var(--texte-attenue);
}
.actualite__titre { margin: 0 0 var(--esp-demi); font-size: var(--taille-m); font-weight: var(--graisse-moyenne); }
.actualite__titre a { text-decoration: none; }
.actualite__titre a:hover { text-decoration: underline; text-decoration-color: var(--or); }
.actualite__resume {
margin: 0;
font-size: var(--taille-s);
color: var(--texte-attenue);
max-width: var(--mesure);
}
/* --- Assistant : ecran de discussion ------------------------------------
Une seule surface blanche, des traits a peine poses, et de l'air. Rien
n'est emprunte a une marque ; ce sont les couleurs et la police du lot 1,
employees avec parcimonie.
L'OR EST UNE TOUCHE, PAS UN CADRE. Il ne marque plus qu'une chose dans cet
ecran : le focus clavier de la charte. Les bulles, les fils et les amorces
s'en passent. Un accent qui se repand partout n'accentue plus rien.
CONTRASTES employes ici, tous mesures :
marine sur blanc .................. 15,9:1
marine sur #faf8f4 (bulle) ........ 15,6:1
marine sur #f3eee2 (fil actif) .... 14,3:1
gris attenue (#55606d) sur blanc .. 6,4:1
gris attenue sur #faf8f4 .......... 6,0:1
gris attenue sur #f3eee2 .......... 5,5:1
erreur (#9b1c1c) sur blanc ........ 8,2:1
LES TRAITS. La charte demande 3:1 d'une bordure PORTEUSE DE SENS, et
4,5:1 d'un texte. Les filets de separation et le cadre d'une amorce ne
portent aucun sens : la colonne se lit a sa place, la suggestion a son
texte. Celui de la zone de saisie, si — un champ vide sans bordure ne se
verrait pas — et il tient 3,5:1 (le filet de champ du lot 39), assez
pour se voir sans peser. Le focus clavier, lui, reste celui de la
charte, et la zone de saisie recoit au focus l'anneau doux des champs.
------------------------------------------------------------------------ */
/* Un trait presque imperceptible, pour les separations qui ne portent rien. */
:root {
--filet-leger: 1px solid var(--filet-clair);
--bordure-saisie: var(--bordure-champ);
}
/* L'ecran de discussion occupe la hauteur de la fenetre : le fil defile,
la saisie reste sous la main. Seule cette page le demande, d'ou la classe
posee sur le corps plutot qu'une regle generale. */
.application-page--chat .application { height: 100vh; min-height: 0; }
/* Lot 40 : tout l'ecran est blanc ; le titre et la phrase de
confidentialite tiennent sur une bande fine, au-dessus d'un filet. */
.application-page--chat .contenu { min-height: 0; background: var(--blanc); }
.application-page--chat .contenu__entete {
position: static;
padding: var(--esp-3) 2.4rem 0;
background: var(--blanc);
}
.application-page--chat .contenu__entete h1 { font-size: var(--taille-xl); }
.application-page--chat .contenu__intro {
padding: var(--esp-demi) 2.4rem var(--esp-2);
border-bottom: var(--filet-leger);
font-size: var(--taille-s);
}
.application-page--chat .contenu__intro .attenue { font-size: var(--taille-s); }
.application-page--chat .contenu__corps {
padding: 0;
min-height: 0;
display: flex;
background: var(--blanc);
}
.application-page--chat .contenu__corps > .chat { flex: 1; min-height: 0; }
.chat {
display: grid;
grid-template-columns: 272px minmax(0, 1fr);
min-height: 0;
}
/* --- La colonne des fils ------------------------------------------------- */
/* Pas de carte, pas de fond : un trait a peine visible, et de la marge. */
.chat__colonne {
border-right: var(--filet-leger);
padding: 1.8rem 1.3rem 1.8rem 2.2rem;
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
}
.chat__nouvelle { width: 100%; text-align: center; }
.chat__recherche {
display: flex;
gap: 0.4rem;
margin: 1.3rem 0 1.8rem;
}
.chat__recherche .champ-recherche {
flex: 1 1 auto;
min-width: 0;
border-color: var(--filet-visible);
}
.chat__fils { list-style: none; margin: 0; padding: 0; }
.chat__ligne {
position: relative;
border-radius: var(--rayon);
transition: background-color var(--transition);
}
.chat__ligne:hover, .chat__ligne:focus-within { background: var(--survol); }
/* Le fil ouvert se repere a un fond a peine pose et a la graisse de son
titre : deux signaux, dont un qui ne tient pas a la couleur. */
.chat__ligne--actif { background: var(--remplissage); }
.chat__ligne--actif .chat__titre { font-weight: 600; }
.chat__fil {
display: block;
padding: 0.58rem 2rem 0.58rem 0.7rem;
text-decoration: none;
color: var(--marine);
}
.chat__titre {
display: block;
font-size: var(--taille-m);
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Renommer et supprimer : discrets, mais jamais caches au clavier. Une
action qu'on ne peut atteindre qu'a la souris n'existe pas pour qui
navigue au clavier, d'ou le « focus-within ». */
.chat__menu { position: absolute; top: 0.42rem; right: 0.35rem; }
.chat__menu > summary {
list-style: none;
cursor: pointer;
border-radius: var(--rayon-s);
padding: 0.05rem 0.35rem;
color: var(--texte-attenue);
font-size: var(--taille-m);
line-height: 1.2;
opacity: 0;
}
.chat__menu > summary::-webkit-details-marker { display: none; }
.chat__menu > summary::before { content: none; }
.chat__ligne:hover .chat__menu > summary,
.chat__ligne--actif .chat__menu > summary,
.chat__menu > summary:focus,
.chat__menu[open] > summary { opacity: 1; }
.chat__menu > summary:hover { background: var(--filet-clair); color: var(--marine); }
.chat__menu-panneau {
position: absolute;
right: 0;
top: 1.6rem;
z-index: 5;
width: 232px;
background: var(--blanc);
border: var(--filet-leger);
border-radius: var(--rayon-l);
box-shadow: var(--ombre-flottante);
padding: 0.75rem;
}
.chat__renommer { display: flex; flex-direction: column; gap: 0.4rem; }
.chat__renommer .champ-recherche { min-width: 0; width: 100%; }
.lien-danger {
display: inline-block;
margin-top: 0.7rem;
font-size: var(--taille-s);
color: var(--erreur);
}
.chat__vide { margin: 0.4rem 0.2rem; }
/* --- Le fil courant ------------------------------------------------------ */
.chat__principal {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
/* Aucun trait sous l'entete : c'est l'espace qui separe. */
.chat__entete {
position: relative;
display: flex;
align-items: baseline;
gap: 0.9rem;
flex-wrap: wrap;
padding: 1.5rem 2.6rem 1rem;
}
.chat__nom {
margin: 0;
font-size: var(--taille-m);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat__date {
margin: 0;
flex: 1;
font-size: var(--taille-xs);
color: var(--texte-attenue);
}
/* L'etat du raccordement : une pastille, pas un bandeau. */
.etat-assistant {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: var(--taille-xs);
color: var(--texte-attenue);
white-space: nowrap;
}
.etat-assistant__pastille {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--alerte);
flex: none;
}
.etat-assistant--actif .etat-assistant__pastille { background: var(--succes); }
/* Ce que l'assistant peut consulter : toujours consultable, jamais
encombrant. Le repli est ferme par defaut. */
.chat__outils > summary {
cursor: pointer;
font-size: var(--taille-xs);
color: var(--texte-attenue);
text-decoration: underline;
text-underline-offset: 3px;
}
.chat__outils > summary:hover { color: var(--marine); }
.chat__outils-panneau {
position: absolute;
z-index: 6;
right: 2.6rem;
margin-top: 0.6rem;
max-width: 34rem;
background: var(--blanc);
border: var(--filet-leger);
border-radius: var(--rayon-l);
box-shadow: var(--ombre-flottante);
padding: 1.2rem 1.3rem;
}
.chat__outils-panneau ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.chat__outils-panneau li { margin-bottom: 0.35rem; }
.chat__outils-panneau p:last-child { margin-bottom: 0; }
/* La confirmation de suppression vit HORS du fil, entre l'entete et les
messages : dans le fil, le defilement automatique l'emportait hors du
champ de vision et la suppression paraissait sans effet. */
.chat__confirmation { margin: 0 2.6rem 0.8rem; }
/* --- Le fil de messages -------------------------------------------------- */
.chat__conversation {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.4rem 2.6rem 0.6rem;
display: flex;
flex-direction: column;
}
.chat__conversation:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Les messages se posent en bas : un fil court ne flotte pas en haut d'une
zone vide, il attend juste au-dessus de la saisie. */
.messages-fil {
list-style: none;
margin: auto 0 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* Le moins de decor possible : pas de cadre, pas de filet, de l'air. */
.bulle {
border-radius: var(--rayon-l);
padding: 0.1rem 0;
margin-bottom: var(--esp-4);
font-size: var(--taille-m);
line-height: var(--interligne);
width: fit-content;
max-width: min(40rem, 82%);
}
/* Ce que le conseiller a ecrit : a droite, sur un fond a peine pose. */
.bulle--collaborateur {
background: var(--remplissage);
align-self: flex-end;
padding: 0.625rem var(--esp-2);
border-bottom-right-radius: var(--rayon-s);
}
/* Ce que l'assistant a repondu : a gauche, sur le blanc, sans rien autour.
Juste le texte — c'est la reponse, elle n'a pas besoin d'etre encadree.
LA LECTURE (lot 39) : 16 px, un interligne large, et une ligne qui ne
depasse pas ~70 signes. */
.bulle--assistant {
align-self: flex-start;
max-width: min(42rem, 100%);
font-size: var(--taille-lecture);
line-height: 1.7;
}
/* Un message de la plateforme se distingue nettement d'une reponse de
l'assistant : il ne doit jamais pouvoir passer pour l'un d'eux. C'est la
seule bulle qui garde un signe distinctif, et c'est voulu. */
.bulle--service {
align-self: flex-start;
background: var(--alerte-fond);
border-left: 1px solid var(--alerte);
border-radius: 0 var(--rayon-l) var(--rayon-l) 0;
padding: 0.625rem var(--esp-2);
}
.bulle__entete {
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin-bottom: var(--esp-1);
}
.bulle__texte { margin: 0; white-space: pre-wrap; }
/* Dire que le message est parti anonymise, sur le message lui-meme : c'est
la seule version qui existe, et le conseiller doit le savoir en le
relisant. */
.etiquette-anonyme {
display: inline-block;
margin-left: 0.3rem;
border: 1px solid var(--filet-visible);
border-radius: var(--rayon-pilule);
padding: 0 0.45rem;
font-size: var(--taille-xs);
color: var(--texte-attenue);
}
/* --- L'attente, dite et non simulee -------------------------------------
Elle est ecrite par le script au moment ou le message part, et retiree des
que le premier morceau de reponse arrive. Elle ne simule rien : les points
disent que la plateforme attend, le compteur dit depuis combien de temps.
------------------------------------------------------------------------ */
.attente {
display: flex;
align-items: center;
gap: 0.55rem;
align-self: flex-start;
margin-bottom: var(--esp-4);
font-size: var(--taille-s);
color: var(--texte-attenue);
}
.attente__points { display: inline-flex; gap: 4px; }
.attente__points i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--texte-attenue);
animation: attente-respire 1.3s ease-in-out infinite;
}
.attente__points i:nth-child(2) { animation-delay: 0.18s; }
.attente__points i:nth-child(3) { animation-delay: 0.36s; }
.attente__compte {
font-variant-numeric: tabular-nums;
color: var(--texte-attenue);
}
@keyframes attente-respire {
0%, 60%, 100% { opacity: 0.28; }
30% { opacity: 1; }
}
/* La passerelle termine son demarrage (lot 38) : l'etat est ecrit, et
marque par l'accent de la charte. */
.attente--demarrage .attente__mot { color: var(--texte); font-weight: 600; }
.attente--demarrage .attente__points i { background: var(--or-fonce); }
/* Qui demande moins de mouvement n'en recoit pas : le texte suffit. */
@media (prefers-reduced-motion: reduce) {
.attente__points i { animation: none; opacity: 0.6; }
}
/* --- L'accueil d'un fil vide et les amorces ------------------------------ */
.accueil { max-width: 48rem; margin: auto; text-align: center; padding: 1.5rem 0; }
.accueil__salut {
font-family: var(--courant);
font-size: var(--taille-xl);
margin: 0 0 var(--esp-1);
}
.accueil__texte { color: var(--texte-attenue); font-size: var(--taille-m); }
.amorces {
list-style: none;
margin: var(--esp-4) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
gap: var(--esp-1);
text-align: left;
}
/* Une suggestion, pas un bouton : un trait a peine pose, et un fond qui ne
vient qu'au survol. */
.amorce {
display: block;
width: 100%;
height: 100%;
font-family: var(--courant);
background: transparent;
border: var(--filet-leger);
border-radius: var(--rayon-l);
padding: var(--esp-2);
cursor: pointer;
color: var(--marine);
text-align: left;
transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.amorce:hover { background: var(--survol); border-color: var(--filet-visible); box-shadow: var(--ombre-survol); }
.amorce[disabled] { cursor: default; opacity: 0.45; }
.amorce__intitule {
display: block;
font-family: var(--courant);
font-size: var(--taille-xs);
font-weight: var(--graisse-forte);
color: var(--marine);
margin-bottom: var(--esp-demi);
}
.amorce__message {
display: block;
font-size: var(--taille-s);
line-height: 1.55;
color: var(--texte-attenue);
}
/* --- La saisie, ancree en bas -------------------------------------------- */
/* La saisie flottante (lot 40) : une barre aux coins arrondis, posee sur
le fil avec une ombre douce, en bas de l'ecran. */
.chat__saisie { padding: var(--esp-1) 2.6rem var(--esp-3); }
.saisie__options {
display: flex;
align-items: baseline;
gap: 0.8rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.saisie__bascule { margin: 0; flex: none; }
.saisie__case {
font-size: var(--taille-s);
font-weight: var(--graisse-moyenne);
white-space: nowrap;
cursor: pointer;
}
/* La limite est dite a cote de la case, pas dans une page d'aide : c'est la
qu'on decide de cocher. */
.saisie__avertissement {
flex: 1;
min-width: 15rem;
font-size: var(--taille-xs);
color: var(--texte-attenue);
}
/* Une barre de message : un contour leger, le rayon des blocs, rien dessous.
C'est le seul cadre de l'ecran, parce qu'il delimite l'endroit ou l'on
ecrit. */
.saisie__ligne {
display: flex;
align-items: flex-end;
gap: 0.6rem;
border: 1px solid var(--bordure-saisie);
border-radius: var(--rayon-l);
padding: 0.5rem 0.5rem 0.5rem 1rem;
background: var(--blanc);
box-shadow: var(--ombre-flottante);
transition: border-color var(--transition), box-shadow var(--transition);
}
.saisie__ligne:focus-within { border-color: var(--marine); box-shadow: 0 0 0 3px var(--anneau), var(--ombre-flottante); }
/* L'anneau est pose sur la ligne entiere : le champ, lui, n'en dessine pas. */
.saisie__ligne textarea:focus { box-shadow: none; }
.saisie__ligne textarea {
flex: 1;
min-width: 0;
resize: none;
border: 0;
outline: none;
font-family: var(--courant);
font-size: var(--taille-m);
line-height: 1.55;
color: var(--marine);
background: transparent;
padding: 0.35rem 0;
max-height: 11rem;
}
.saisie__ligne textarea:disabled { color: var(--texte-attenue); }
/* Discret : petit, arrondi, sans eclat. Il reste plein parce qu'il est la
seule action primaire de l'ecran. */
.saisie__envoi {
flex: none;
border-radius: var(--rayon);
padding: 0.375rem var(--esp-2);
font-size: var(--taille-s);
font-weight: var(--graisse-moyenne);
}
.saisie__note { margin: 0.7rem 0 0; }
/* Ecrit par assistant.js, et seulement quand le raccourci existe vraiment. */
.saisie__raccourci {
flex-basis: 100%;
font-size: var(--taille-xs);
color: var(--texte-attenue);
}
@media (max-width: 900px) {
/* La hauteur pleine vaut aussi sur telephone : sans elle, la page entiere
defile et la saisie se retrouve a deux mille pixels du regard. « dvh »
suit la barre d'adresse mobile, qui se retracte au defilement ;
« 100vh » reste en secours pour les navigateurs qui l'ignorent. */
.application-page--chat .application {
height: 100vh;
height: 100dvh;
min-height: 0;
grid-template-rows: auto minmax(0, 1fr);
}
.chat {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
}
.chat__colonne {
border-right: 0;
border-bottom: var(--filet-leger);
padding: 1.2rem 1.3rem;
}
.application-page--chat .contenu__entete,
.application-page--chat .contenu__intro { padding-left: 1.3rem; padding-right: 1.3rem; }
.chat__entete, .chat__conversation, .chat__saisie { padding-left: 1.3rem; padding-right: 1.3rem; }
.chat__confirmation { margin-left: 1.3rem; margin-right: 1.3rem; }
.chat__outils-panneau { right: 1.3rem; }
}
/* --- Assistant : la reponse mise en forme --------------------------------
Le Markdown est interprete par le serveur (assistant/rendu.py) ; il ne
reste ici qu'a l'habiller. Sobre : la reponse doit se lire, pas se
remarquer. Les titres descendent d'un cran par rapport a ceux de la page,
parce qu'ils vivent A L'INTERIEUR d'un message.
------------------------------------------------------------------------ */
.reponse > *:first-child { margin-top: 0; }
.reponse > *:last-child { margin-bottom: 0; }
.reponse p { margin: 0 0 var(--esp-2); }
/* Une adresse sans espace ne pousse pas la page de cote. */
.reponse { overflow-wrap: anywhere; }
/* LE RENDU EST DEJA MIS EN PAGE (lot 39). Le « pre-wrap » de .bulle__texte
vaut pour le texte brut du conseiller ; applique a la reponse rendue, il
dessinait chaque retour a la ligne place ENTRE deux balises — une ligne
blanche sous chaque intertitre, avant et apres chaque liste. Les retours
voulus y sont des
, et un bloc de code garde les siens. */
.bulle__texte.reponse { white-space: normal; }
.reponse h1, .reponse h2, .reponse h3,
.reponse h4, .reponse h5, .reponse h6 {
font-family: var(--courant);
font-weight: var(--graisse-forte);
color: var(--marine);
margin: var(--esp-3) 0 var(--esp-1);
line-height: var(--interligne-serre);
}
.reponse h1 { font-size: var(--taille-l); }
.reponse h2 { font-size: var(--taille-lecture); }
.reponse h3, .reponse h4, .reponse h5, .reponse h6 { font-size: var(--taille-m); }
/* Un paragraphe fait d'un seul gras — « **Principe** » — est un intertitre :
il se colle a ce qu'il annonce et prend l'air au-dessus. */
.reponse p:has(> strong:only-child) { margin: var(--esp-3) 0 var(--esp-1); }
.reponse > p:first-child:has(> strong:only-child) { margin-top: 0; }
/* La reponse vit dans un « li » du fil : sans ces deux lignes, le navigateur
compte une imbrication et dessine des puces de second niveau. */
.reponse ul { list-style-type: disc; }
.reponse ol { list-style-type: decimal; }
.reponse ul, .reponse ol { margin: 0 0 var(--esp-2); padding-left: 1.25rem; }
.reponse li { margin-bottom: var(--esp-1); }
.reponse li::marker { color: var(--texte-attenue); }
.reponse li:last-child { margin-bottom: 0; }
.reponse blockquote {
margin: 0 0 var(--esp-2);
padding: 0.1rem 0 0.1rem var(--esp-2);
border-left: 1px solid var(--filet-visible);
color: var(--texte-attenue);
}
/* Le seul trait un peu marque de la reponse : il separe deux idees. */
.reponse hr {
border: 0;
border-top: var(--filet-leger);
margin: 1.3rem 0;
}
.reponse code {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 0.87em;
background: var(--remplissage);
border-radius: var(--rayon-s);
padding: 0.08em 0.34em;
}
.reponse pre {
margin: 0 0 var(--esp-2);
padding: 0.75rem var(--esp-2);
background: var(--survol);
border-radius: var(--rayon);
/* Une ligne de code longue defile DANS SON BLOC. */
overflow-x: auto;
max-width: 100%;
}
.reponse pre code { background: none; padding: 0; font-size: 0.84em; }
.reponse a { color: var(--marine); text-underline-offset: 2px; }
/* --- Les tableaux de la reponse ------------------------------------------
C'est le point le plus visible d'une comparaison d'enveloppes. Le tableau
defile DANS SA PROPRE ZONE : sur un telephone, un comparatif a cinq
colonnes ne doit pas pousser la page entiere de cote. L'enveloppe est
posee par le rendu, pas par une regle qu'on pourrait oublier d'appliquer.
------------------------------------------------------------------------ */
.tableau-deroulant {
margin: 0 0 1rem;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tableau-deroulant table {
border-collapse: collapse;
font-size: var(--taille-s);
min-width: 100%;
font-variant-numeric: tabular-nums;
}
.tableau-deroulant th,
.tableau-deroulant td {
padding: 0.625rem 0.75rem;
text-align: left;
vertical-align: top;
border-bottom: var(--filet-leger);
}
.tableau-deroulant th {
font-family: var(--courant);
font-size: var(--taille-xs);
font-weight: var(--graisse-moyenne);
color: var(--texte-attenue);
white-space: nowrap;
border-bottom: 1px solid var(--filet-visible);
}
.tableau-deroulant tbody tr:last-child td { border-bottom: 0; }
.tableau-deroulant tbody tr:hover { background: var(--survol); }
/* --- Assistant sur telephone ---------------------------------------------
L'onglet sera montre plus souvent sur un telephone que sur un ecran. La
liste des fils passe au-dessus du fil et se fait discrete : le fil de
discussion et la saisie prennent toute la largeur, et toute la hauteur
qui reste.
------------------------------------------------------------------------ */
@media (max-width: 900px) {
/* La bulle de l'assistant prend la largeur : a cette taille, la marge de
lecture coute plus qu'elle ne rapporte. */
.bulle--assistant { max-width: 100%; }
.bulle--collaborateur, .bulle--service { max-width: 92%; }
.amorces { grid-template-columns: 1fr; }
.chat__recherche { margin: 0.8rem 0 0.9rem; }
.chat__outils-panneau { max-width: calc(100vw - 2.6rem); }
}
@media (max-width: 560px) {
/* Sur un telephone, chaque ligne de l'ossature compte : le sous-titre de
la page repete ce que le repli des outils dit deja plus bas. */
.application-page--chat .contenu__entete { padding: 0.8rem 1rem 0.7rem; border-bottom: var(--filet-leger); }
.application-page--chat .contenu__intro { display: none; }
.application-page--chat .contenu__fil { display: none; }
.application-page--chat .contenu__entete h1 { font-size: var(--taille-l); }
.chat__entete, .chat__conversation, .chat__saisie { padding-left: 1rem; padding-right: 1rem; }
.chat__confirmation { margin-left: 1rem; margin-right: 1rem; }
.chat__entete { padding-top: 0.7rem; padding-bottom: 0.5rem; gap: 0.3rem 0.7rem; }
.chat__nom { font-size: var(--taille-m); max-width: 100%; }
.chat__date { flex: none; }
.bulle { margin-bottom: var(--esp-3); }
.accueil { padding: 0.5rem 0; }
.accueil__salut { font-size: var(--taille-xl); }
.amorces { margin-top: 1.2rem; }
/* La saisie au pouce : une cible d'au moins 44 px, et un texte a 16 px,
taille en dessous de laquelle les navigateurs mobiles zooment d'office
en arrivant dans le champ. */
.saisie__ligne { padding: 0.45rem 0.45rem 0.45rem 0.9rem; }
.saisie__ligne textarea { font-size: 16px; }
.saisie__envoi { min-height: 44px; padding: 0.5rem 1rem; }
.chat__saisie { padding-top: 0.5rem; padding-bottom: 0.7rem; }
.saisie__options { margin-bottom: 0.4rem; }
.saisie__note { margin-top: 0.45rem; }
.tableau-deroulant th, .tableau-deroulant td { padding: 0.45rem 0.6rem; }
}
/* --- La liste des fils sur telephone -------------------------------------
Empilee, elle mangeait un tiers de l'ecran. Elle devient une rangee de
pastilles qui defile DANS SA PROPRE ZONE, comme la rangee d'onglets de la
plateforme juste au-dessus : le fil de discussion et la saisie recuperent
la hauteur.
Le repli « ... » de chaque fil ne disparait pas — une action qu'on ne peut
plus atteindre n'existe plus. Il s'affiche sur la pastille du fil ouvert,
celle qu'on vient de toucher.
------------------------------------------------------------------------ */
@media (max-width: 720px) {
.chat__colonne {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.5rem;
align-items: center;
padding: 0.7rem 1rem 0.6rem;
overflow: visible;
}
.chat__nouvelle { width: auto; padding: 0.42rem 0.75rem; font-size: var(--taille-s); }
.chat__recherche { margin: 0; min-width: 0; position: relative; }
/* Sur telephone, la touche « Rechercher » du clavier envoie le champ : le
bouton s'efface de la vue (lot 40) et reparait s'il recoit le focus. */
.chat__recherche .bouton:not(:focus) {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%);
white-space: nowrap;
}
.chat__recherche .champ-recherche { min-width: 0; }
.chat__fils {
grid-column: 1 / -1;
display: flex;
gap: 0.35rem;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.15rem;
}
.chat__ligne { flex: none; }
.chat__fil { padding: 0.36rem 1.9rem 0.36rem 0.7rem; }
.chat__titre { font-size: var(--taille-s); max-width: 11rem; }
.chat__menu { top: 0.22rem; right: 0.3rem; }
/* Le panneau d'actions ne sort pas de l'ecran : pose sous la rangee, il
s'aligne a gauche et ne depasse jamais la largeur disponible. */
.chat__menu-panneau {
position: fixed;
left: 1rem;
right: 1rem;
top: auto;
width: auto;
max-width: none;
}
.chat__vide { grid-column: 1 / -1; margin: 0.2rem 0 0; }
}
/* --- Contacts : compteurs, postes de bilan, montants --------------------- */
.compteur {
background: var(--survol);
border: 0;
border-radius: var(--rayon);
padding: var(--esp-2);
}
.compteur--fort { background: var(--info-fond); }
.compteur__valeur {
font-family: var(--courant);
font-size: var(--taille-xl);
font-weight: var(--graisse-forte);
color: var(--texte);
margin: 0;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.compteur__libelle {
margin: var(--esp-demi) 0 0;
font-size: var(--taille-xs);
color: var(--texte-attenue);
}
.poste {
background: var(--blanc);
border: var(--filet);
border-radius: var(--rayon-l);
margin-bottom: var(--esp-1);
box-shadow: var(--ombre);
}
.poste__resume {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--esp-2);
padding: 0.75rem var(--esp-2);
cursor: pointer;
list-style: none;
}
.poste__resume::-webkit-details-marker { display: none; }
.poste__resume::before {
/* Le chevron du jeu d'icones (lot 39) : un trait fin dessine par la
feuille, qui pivote a l'ouverture. Marine et non or : il porte du sens
(replie ou deplie), il doit rester lisible. */
content: "";
flex: none;
align-self: center;
width: 0.4rem;
height: 0.4rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
color: var(--marine);
transform: rotate(-45deg);
transition: transform var(--transition);
margin: 0 0.25rem 0 0.125rem;
}
.poste[open] > .poste__resume::before { transform: rotate(45deg); }
.poste__libelle {
font-family: var(--courant);
font-size: var(--taille-m);
color: var(--marine);
flex: 1;
}
.poste__total {
font-weight: var(--graisse-forte);
color: var(--marine);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.poste > .cadre-tableau { border-top: var(--filet); }
td.montant, th.montant {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* --- Dashboard du cabinet -------------------------------------------------
Des cartes aerees, de grands chiffres, un graphe circulaire et beaucoup de
blanc. L'identite reste celle du lot 1 : le marine porte, l'or accentue une
seule fois, l'ivoire repose.
CONTRASTES, mesures :
marine sur blanc .................. 15,9:1
gris attenue (#55606d) sur blanc .. 6,4:1
gris attenue sur #faf8f4 .......... 6,0:1
ivoire sur marine ................. 14,7:1
or sur marine ..................... 6,2:1
Les aplats du graphe ne portent aucun texte : chaque valeur est ecrite en
toutes lettres dans la legende, a cote de sa pastille.
------------------------------------------------------------------------ */
.cartes-cles {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 1rem;
align-items: stretch;
}
/* Cinq cartes secondaires au plus — la sixieme n'existe que si
l'environnement declare un encours de demonstration. Le minimum est
calcule pour qu'elles tiennent sur une ligne d'ecran de bureau. */
.cles-secondaires {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
gap: 0.9rem;
align-content: start;
}
.cle {
background: var(--blanc);
border: var(--filet);
border-radius: var(--rayon-l);
padding: var(--esp-3);
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: var(--ombre);
}
/* Le patrimoine net est LE chiffre de l'ecran : il prend le marine plein,
toute la hauteur, et la plus grande typographie de la plateforme. */
.cle--majeure {
background: var(--marine);
border-color: var(--marine);
padding: 1.8rem;
}
.cle--majeure .cle__libelle { color: var(--or); }
.cle--majeure .cle__valeur { color: var(--ivoire); font-size: var(--taille-chiffre); }
.cle--majeure .cle__detail { color: var(--texte-sur-marine-attenue); }
/* Une dette n'est pas un avoir : le filet le dit sans le dramatiser. */
.cle--dette { border-color: var(--alerte-filet); background: var(--alerte-fond); }
.cle__libelle {
font-family: var(--courant);
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin: 0 0 var(--esp-1);
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.cle__valeur {
font-family: var(--courant);
font-size: var(--taille-titre);
font-weight: var(--graisse-moyenne);
line-height: 1.1;
color: var(--marine);
margin: 0 0 var(--esp-demi);
overflow-wrap: anywhere;
font-variant-numeric: tabular-nums;
}
.cle__detail {
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin: 0;
min-height: 1.2em;
}
.carte--aeree { border-radius: var(--rayon-l); padding: var(--esp-3); }
.carte__entete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.carte__entete .carte__titre { margin-bottom: 0; }
.bascule-anonyme { margin: 0; }
/* --- Le graphe circulaire ------------------------------------------------ */
.donut {
position: relative;
width: 100%;
max-width: 17rem;
margin: 1.4rem auto 1.6rem;
aspect-ratio: 1;
}
.donut__dessin { display: block; width: 100%; height: 100%; }
.donut__segment {
transition: opacity var(--transition), stroke-width var(--transition);
cursor: pointer;
}
.donut__segment--eteint { opacity: 0.28; }
.donut__segment:hover { stroke-width: 21; }
.donut__centre {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
padding: 0 3rem;
}
.donut__centre-valeur {
font-family: var(--courant);
font-size: var(--taille-xl);
color: var(--marine);
margin: 0;
line-height: 1.1;
}
.donut__centre-libelle {
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin: 0.2rem 0 0;
line-height: 1.25;
}
.legende { list-style: none; margin: 0; padding: 0; }
.legende__ligne {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto;
align-items: baseline;
gap: 0.3rem 0.7rem;
padding: var(--esp-1);
border-radius: var(--rayon);
cursor: pointer;
transition: background-color var(--transition);
}
.legende__ligne--vive, .legende__ligne:hover { background: var(--survol); }
.legende__pastille {
width: 10px;
height: 10px;
border-radius: var(--rayon-s);
align-self: center;
}
.legende__libelle { font-size: var(--taille-m); color: var(--marine); min-width: 0; }
.legende__part {
font-family: var(--courant);
font-size: var(--taille-s);
color: var(--marine);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.legende__montant {
grid-column: 2 / -1;
font-size: var(--taille-xs);
color: var(--texte-attenue);
}
.legende__reste { margin-top: 0.9rem; }
.legende__reste > summary {
cursor: pointer;
font-size: var(--taille-xs);
color: var(--texte-attenue);
text-decoration: underline;
text-underline-offset: 3px;
}
.legende__reste > summary:hover { color: var(--marine); }
.legende__reste .champs { margin-top: 0.7rem; }
/* --- Les flux ------------------------------------------------------------ */
.flux { display: grid; gap: 0.9rem; }
.flux__poste {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.55rem;
border-bottom: var(--filet-leger);
}
.flux__poste--solde { border-bottom: 0; padding-bottom: 0; }
.flux__libelle {
margin: 0;
font-family: var(--courant);
font-size: var(--taille-xs);
color: var(--texte-attenue);
}
.flux__valeur {
margin: 0;
font-family: var(--courant);
font-size: var(--taille-l);
color: var(--marine);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.flux__poste--solde .flux__valeur { font-size: var(--taille-xl); }
/* --- Le point d'entree vers l'outil d'agregation ------------------------- */
.espace-externe {
background: var(--blanc);
border: var(--filet-leger);
border-radius: var(--rayon-l);
padding: 3rem 2rem;
text-align: center;
max-width: 34rem;
margin: 1rem auto 0;
}
/* Une signature, et non un second titre : le nom est deja en tete de page. */
.espace-externe__filet {
display: block;
width: 56px;
height: 1px;
background: var(--or);
margin: 0 auto 1.6rem;
}
.espace-externe__texte {
color: var(--texte-attenue);
font-size: var(--taille-m);
max-width: 28rem;
margin: 0 auto 1.8rem;
}
.espace-externe__acces { min-height: 46px; padding-left: 1.6rem; padding-right: 1.6rem; }
.espace-externe__mention {
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin: 1.4rem auto 0;
max-width: 28rem;
}
@media (max-width: 900px) {
.cartes-cles { grid-template-columns: 1fr; }
.cle--majeure { padding: 1.4rem; }
.cle--majeure .cle__valeur { font-size: var(--taille-chiffre); }
}
@media (max-width: 760px) {
.cles-secondaires { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 0.7rem; }
.cle { padding: var(--esp-2); }
.cle__valeur { font-size: var(--taille-titre); }
.carte--aeree { padding: var(--esp-2); }
.donut { max-width: 13rem; margin: 1.1rem auto 1.3rem; }
.donut__centre { padding: 0 2.4rem; }
.espace-externe { padding: 2rem 1.2rem; }
}
/* --- Onglets internes a un module ---------------------------------------- */
/* Lot 39 : l'onglet ouvert se dit par un soulignement fin et la graisse ;
le trait de 2 px se pose SUR le filet de la rangee, sans l'epaissir. */
.onglets {
display: flex;
gap: var(--esp-3);
border-bottom: var(--filet);
margin-bottom: var(--esp-3);
overflow-x: auto;
}
.onglets__lien {
font-family: var(--courant);
font-size: var(--taille-s);
color: var(--texte-attenue);
text-decoration: none;
padding: var(--esp-1) 0 0.625rem;
margin-bottom: -1px;
box-shadow: inset 0 -2px 0 transparent;
white-space: nowrap;
}
.onglets__lien:hover { color: var(--marine); box-shadow: inset 0 -2px 0 var(--filet-visible); }
.onglets__lien--actif {
color: var(--marine);
box-shadow: inset 0 -2px 0 var(--or);
font-weight: var(--graisse-forte);
}
.onglets__lien--actif:hover { box-shadow: inset 0 -2px 0 var(--or); }
/* --- Studio : choix, accroches, trames, mosaique -------------------------- */
.formulaire--large { max-width: 860px; }
.choix { display: grid; gap: 0.4rem; }
.choix__option {
display: flex;
align-items: flex-start;
gap: 0.6rem;
border: var(--filet);
border-radius: var(--rayon);
padding: var(--esp-1) 0.75rem;
font-size: var(--taille-m);
cursor: pointer;
transition: border-color var(--transition), background-color var(--transition);
}
.choix__option:hover { border-color: var(--bordure-champ); }
.choix__option input { margin-top: 0.2rem; accent-color: var(--marine); }
.choix__option:has(input:checked) {
border-color: var(--marine);
background: var(--marine-voile);
}
.prereglages, .accroches { list-style: none; margin: 0; padding: 0; }
.prereglages { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.accroches { display: flex; flex-direction: column; gap: 0.3rem; }
.accroche {
display: block;
width: 100%;
text-align: left;
font-family: var(--courant);
font-size: var(--taille-s);
color: var(--marine);
background: transparent;
border: var(--filet);
border-radius: var(--rayon);
padding: var(--esp-1) 0.75rem;
cursor: pointer;
transition: border-color var(--transition), background-color var(--transition);
}
.accroche:hover { background: var(--survol); border-color: var(--bordure-champ); }
.accroche--fixe { cursor: default; }
.accroche--fixe:hover { background: transparent; border-color: var(--filet-clair); }
.conseil {
border: 1px solid var(--info-filet);
border-radius: var(--rayon);
background: var(--info-fond);
padding: 0.75rem var(--esp-2);
font-size: var(--taille-s);
}
.conseil__titre {
font-family: var(--courant);
font-weight: var(--graisse-forte);
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin-bottom: 0.25rem;
}
.carte--bloquee { border-color: var(--erreur-filet); }
/* Un ecran dont l'action est irreversible ou sort de l'ordinaire : le filet
rouge pale et le titre rouge le distinguent d'un formulaire courant. */
.carte--attention { border-color: var(--erreur-filet); }
.carte--attention .carte__titre { color: var(--erreur); }
pre.trame {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: var(--taille-s);
line-height: 1.55;
color: var(--marine);
background: var(--survol);
border: var(--filet);
border-radius: var(--rayon);
padding: 0.9rem 1rem;
white-space: pre-wrap;
overflow-x: auto;
margin: 0;
}
.mosaique {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 0.5rem;
}
.mosaique__case {
display: block;
border: var(--filet);
border-radius: var(--rayon);
overflow: hidden;
background: var(--blanc);
}
.mosaique__case:hover { border-color: var(--bordure-champ); box-shadow: var(--ombre-survol); }
.mosaique__case img { display: block; width: 100%; height: auto; }
/* --- Studio : grille d'images et apercus --------------------------------- */
.grille-images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 0.8rem;
}
.vignette { margin: 0; }
.vignette__bouton {
display: block;
width: 100%;
padding: 0;
border: var(--filet);
border-radius: var(--rayon);
background: var(--blanc);
cursor: pointer;
overflow: hidden;
text-align: left;
}
.vignette__bouton:hover { border-color: var(--bordure-champ); box-shadow: var(--ombre-survol); }
.vignette__bouton img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.vignette__credit {
display: block;
padding: 0.35rem 0.5rem;
font-family: var(--courant);
font-size: var(--taille-xs);
color: var(--texte-attenue);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.apercu-visuel, .apercu-fond {
display: block;
width: 100%;
max-width: 460px;
height: auto;
border: var(--filet);
border-radius: var(--rayon);
}
.apercu-fond { max-width: 260px; margin-bottom: 0.4rem; }
/* --- Formation : progression, parcours, modules (refondus au lot 38) -----
Plus de bandeau sombre : un bloc clair, une barre fine. Les modules sont
des cartes entierement cliquables ; « en production », commun a tout le
catalogue, n'est plus une etiquette sur chacune mais un mot discret. */
.progression {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--esp-4);
margin-bottom: var(--esp-2);
}
.progression__valeur {
font-size: var(--taille-xl);
font-weight: var(--graisse-forte);
line-height: 1.1;
margin: 0;
font-variant-numeric: tabular-nums;
}
.progression__libelle { font-size: var(--taille-xs); color: var(--texte-attenue); margin: var(--esp-demi) 0 0; }
.progression__detail { margin: var(--esp-1) 0 0; font-size: var(--taille-s); color: var(--texte-attenue); }
.progression__jauge { min-width: 0; }
.catalogue-formation__resume { margin: 0 0 var(--esp-5); }
.parcours { margin-bottom: var(--esp-6); }
.parcours__entete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--esp-2);
margin-bottom: var(--esp-1);
}
.parcours__entete h2 { margin: 0; }
.parcours__compte {
margin: 0;
font-size: var(--taille-xs);
color: var(--texte-attenue);
white-space: nowrap;
}
.parcours__description {
font-size: var(--taille-s);
color: var(--texte-attenue);
max-width: var(--mesure);
margin-bottom: var(--esp-3);
}
.grille-modules {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-3);
}
@media (max-width: 1100px) {
.grille-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.grille-modules { grid-template-columns: minmax(0, 1fr); }
}
/* Lot 40 : compacte, l'ombre diffuse du repos, deux lignes de resume au
plus, un chevron a la place du « Ouvrir » ecrit. */
.module {
background: var(--blanc);
border-radius: var(--rayon-l);
border: var(--filet);
box-shadow: var(--ombre);
padding: var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-2);
display: flex;
flex-direction: column;
}
.module__titre { font-size: var(--taille-m); margin: 0 0 var(--esp-1); line-height: var(--interligne-serre); }
.module__titre a { text-decoration: none; }
.module__meta {
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin: 0 0 var(--esp-2);
}
.module__resume {
font-size: var(--taille-s);
color: var(--texte-attenue);
margin: 0 0 var(--esp-2);
flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.module__avancement { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); }
.module__avancement .chevron { margin-left: auto; }
.etiquette--production { color: var(--alerte); background: var(--alerte-fond); }
@media (max-width: 760px) {
.progression { grid-template-columns: 1fr; gap: var(--esp-2); }
.parcours__entete { flex-direction: column; align-items: flex-start; gap: var(--esp-demi); }
}
/* --- Academy : chiffres cles, jauges, lecteur ---------------------------- */
.chiffre-cle {
font-size: var(--taille-xl);
font-weight: var(--graisse-forte);
color: var(--texte);
margin: 0 0 var(--esp-demi);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
/* La jauge : une barre fine, sans cadre ; la part faite en marine. */
progress.jauge {
display: block;
width: 100%;
height: 6px;
margin: var(--esp-1) 0;
border: 0;
border-radius: var(--rayon-pilule);
background: var(--filet-visible);
overflow: hidden;
appearance: none;
}
progress.jauge::-webkit-progress-bar { background: var(--filet-visible); border-radius: var(--rayon-pilule); }
progress.jauge::-webkit-progress-value { background: var(--marine); border-radius: var(--rayon-pilule); }
progress.jauge::-moz-progress-bar { background: var(--marine); border-radius: var(--rayon-pilule); }
progress.jauge--fine { height: 4px; min-width: 110px; margin: var(--esp-demi) 0; }
.lecteur {
display: block;
width: 100%;
max-width: 100%;
background: var(--marine);
border-radius: var(--rayon);
}
/* --- Grille de cartes cliquables (lot 38) ---------------------------------
Trois colonnes au plus, deux sur tablette, une sur telephone. */
.grille-cartes {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-3);
}
@media (max-width: 1100px) { .grille-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grille-cartes { grid-template-columns: minmax(0, 1fr); } }
/* --- Mentorat : l'annuaire (lot 38) --------------------------------------- */
.mentor {
display: flex;
flex-direction: column;
gap: var(--esp-1);
background: var(--blanc);
border-radius: var(--rayon-l);
border: var(--filet);
box-shadow: var(--ombre);
padding: var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-2);
min-width: 0;
}
.mentor__nom { font-size: var(--taille-l); margin: 0; }
.mentor__nom a { text-decoration: none; }
.mentor__poste { margin: 0; font-size: var(--taille-s); color: var(--texte-attenue); min-height: 1.2em; }
.mentor__presentation {
margin: var(--esp-1) 0;
font-size: var(--taille-s);
color: var(--texte-attenue);
flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.mentor__pied {
margin: var(--esp-1) 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--esp-1);
font-size: var(--taille-s);
}
/* --- Mentorat : creneaux et fil de discussion ---------------------------- */
.creneau {
background: var(--blanc);
border-radius: var(--rayon-l);
border: var(--filet);
padding: var(--esp-2);
margin-bottom: var(--esp-2);
box-shadow: var(--ombre);
}
.creneau__horaire { margin-bottom: var(--esp-1); font-size: var(--taille-m); font-weight: var(--graisse-moyenne); }
/* Creneau montre mais non reservable : on affiche l'interface complete,
neutralisee, plutot que de la masquer. */
.creneau--inerte { opacity: 0.75; }
.bouton[disabled], .bouton:disabled { cursor: not-allowed; opacity: 0.55; }
.formulaire__ligne input[disabled] { background: var(--fond); cursor: not-allowed; }
.fil { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.fil__message {
background: var(--blanc);
border: var(--filet);
border-radius: var(--rayon-l);
padding: var(--esp-1) var(--esp-2);
margin-bottom: var(--esp-1);
font-size: var(--taille-s);
}
.fil__message--moi { background: var(--survol); border-color: transparent; }
.fil__entete {
font-size: var(--taille-xs);
color: var(--texte-attenue);
margin-bottom: 0.25rem;
}
/* --- Ecrans d'apercu ----------------------------------------------------- */
.apercu { max-width: 660px; }
.apercu__bandeau {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--courant);
font-size: var(--taille-xs);
color: var(--blanc);
background: var(--marine);
padding: 0.125rem var(--esp-1);
border-radius: var(--rayon-pilule);
margin-bottom: var(--esp-2);
}
.apercu__resume { font-size: var(--taille-lecture); }
.apercu__note {
margin-top: 1.2rem;
padding-top: 1rem;
border-top: var(--filet);
color: var(--texte-attenue);
font-size: var(--taille-m);
}
/* Etat vide assume : on dit qu'il n'y a rien, on n'invente pas. Lot 39 :
plus un bloc gris, une phrase utile et, quand il y en a une, l'action
qui remplit l'ecran (.vide__action). Un filet pointille discret dit
« emplacement », sans peser. */
.vide {
border: 1px dashed var(--filet-visible);
border-radius: var(--rayon-l);
padding: var(--esp-3);
color: var(--texte-attenue);
font-size: var(--taille-s);
background: transparent;
text-align: center;
}
.vide > * { margin-left: auto; margin-right: auto; max-width: var(--mesure); }
.vide__action { margin: var(--esp-2) 0 0; }
.vide__action .bouton { font-size: var(--taille-s); }
/* --- Page de connexion (lot 40) ------------------------------------------
Claire, comme toute la plateforme : le logo pour fond clair, une carte
blanche a l'ombre diffuse, beaucoup d'air. */
.connexion {
min-height: 100vh;
background: var(--fond);
color: var(--texte);
display: flex;
align-items: center;
justify-content: center;
padding: var(--esp-4) var(--esp-2);
}
.connexion__panneau { width: 100%; max-width: 380px; }
.connexion__marque { text-align: center; margin-bottom: var(--esp-4); }
.connexion__monogramme { width: 58px; height: 70px; color: var(--or); }
.connexion__nom {
font-family: var(--titre);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0.9rem 0 0;
color: var(--texte);
}
.connexion__baseline {
font-family: var(--titre);
font-size: 0.66rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--or-fonce);
margin: 0.3rem 0 0;
}
.connexion__carte {
background: var(--blanc);
color: var(--texte);
border: var(--filet);
border-radius: var(--rayon-l);
box-shadow: var(--ombre-flottante);
padding: var(--esp-4) var(--esp-4) var(--esp-4);
}
.connexion__carte h2 { font-size: var(--taille-xl); margin-bottom: var(--esp-3); }
.connexion__carte .bouton { width: 100%; text-align: center; }
.connexion__pied {
margin-top: var(--esp-3);
text-align: center;
font-size: var(--taille-s);
color: var(--texte-attenue);
line-height: 1.5;
}
/* --- Responsive ----------------------------------------------------------
Sous 900 px la barre laterale passe en bandeau horizontal defilant : la
navigation reste entierement accessible sans script.
------------------------------------------------------------------------ */
@media (max-width: 1180px) {
:root { --barre: 220px; }
.contenu__entete { padding: var(--esp-3) var(--esp-3) var(--esp-2); }
.contenu__intro { padding: 0 var(--esp-3); }
.contenu__corps { padding: var(--esp-3) var(--esp-3) var(--esp-6); }
}
@media (max-width: 900px) {
.application { grid-template-columns: 1fr; background: var(--fond); }
.barre {
border-right: 0;
border-bottom: var(--filet);
position: sticky; top: 0; z-index: 30;
height: auto;
overflow: visible;
/* SANS CETTE LIGNE, TOUTE LA PLATEFORME DEBORDE SOUS 900 px. La barre
est un element de grille, et la taille minimale automatique d'un
element de grille est celle de son contenu : la rangee d'onglets,
805 px de large, imposait sa largeur a la page entiere. Le
« overflow-x: auto » pose juste en dessous ne servait donc a rien —
il n'avait rien a faire defiler. Avec « min-width: 0 », la colonne
revient a la largeur de l'ecran et la rangee defile toute seule,
comme elle a toujours voulu le faire. */
min-width: 0;
}
.barre__entete { padding: 0.85rem 1rem; }
.barre__navigation {
display: flex;
overflow-x: auto;
padding: 0;
border-top: var(--filet);
-webkit-overflow-scrolling: touch;
}
.barre__titre-groupe { display: none; }
.barre__lien {
border-left: 0;
white-space: nowrap;
padding: 0.6rem 0.85rem;
}
.barre__mention { display: none; }
.barre__pied {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 0.6rem 1rem;
}
.barre__identite { margin: 0; }
/* Sur telephone, c'est la barre du menu qui reste en haut : l'en-tete de
page defile avec le contenu. */
.contenu__entete { position: static; padding: var(--esp-3) var(--esp-2) var(--esp-1); }
.contenu__intro { padding: 0 var(--esp-2); }
.contenu__corps { padding: var(--esp-2) var(--esp-2) var(--esp-5); }
h1 { font-size: calc(var(--taille-titre) * 0.87); }
}
@media (max-width: 560px) {
body { font-size: var(--taille-m); }
.champs { grid-template-columns: 1fr; gap: 0.15rem 0; }
.champs dd { margin-bottom: 0.5rem; }
.barre-actions { width: 100%; }
}
@media print {
.barre, .barre-actions { display: none; }
.application { display: block; }
body { background: var(--blanc); }
}
/* --- Cadre d'un outil exterieur ------------------------------------------
PROVISOIRE : l'etude patrimoniale vit encore hors de la plateforme et s'y
affiche telle quelle. Le cadre prend toute la hauteur disponible pour que
l'outil ne defile pas a l'interieur d'une page qui defile elle-meme.
------------------------------------------------------------------------ */
/* La page confie toute sa hauteur au cadre. Aucune hauteur n'est calculee a
la main : le corps devient une colonne souple, le cadre prend ce qui
reste, et la page ne defile pas autour de lui. */
.page-cadre .contenu__corps {
display: flex;
flex-direction: column;
padding-bottom: 1.6rem;
min-height: 0;
}
.cadre-externe {
display: flex;
flex-direction: column;
gap: 0.8rem;
flex: 1 1 auto;
min-height: 420px;
}
.cadre-externe__bandeau {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.8rem;
background: var(--blanc);
border: var(--filet);
border-radius: var(--rayon-l);
padding: 0.75rem var(--esp-2);
flex: none;
}
.cadre-externe__texte {
margin: 0;
font-size: var(--taille-s);
color: var(--texte-attenue);
max-width: var(--mesure);
}
.cadre-externe__texte strong { color: var(--marine); }
.cadre-externe__cadre {
flex: 1 1 auto;
width: 100%;
min-height: 0;
border: var(--filet);
border-radius: var(--rayon-l);
background: var(--blanc);
}
@media (max-width: 900px) {
/* Sur petit ecran la barre passe en haut et le contenu defile : le cadre
se contente d'une hauteur fixe, et le lien « plein ecran » prend le
relais pour travailler a l'aise. */
.page-cadre .contenu__corps { display: block; }
.cadre-externe { display: block; }
.cadre-externe__bandeau { margin-bottom: 0.8rem; }
.cadre-externe__cadre { height: 70vh; }
}
/* --- Etude patrimoniale ---------------------------------------------------
L'outil occupe toute la zone de travail. Il porte sa propre feuille de
style, compilee (static/etude/etude.css) ; ce qui suit ne fait que lui
menager la place.
------------------------------------------------------------------------ */
.etude {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
/* Le contenu de la plateforme respire ; l'outil, lui, gere ses propres
marges intérieures. On lui rend la largeur entiere. */
margin: -1.6rem -2rem -1.6rem;
}
.etude__cadre {
flex: 1 1 auto;
width: 100%;
min-height: 0;
border: 0;
display: block;
background: var(--survol);
}
@media (max-width: 900px) {
.etude { margin: 0; }
.etude__cadre { height: 78vh; }
}
/* --- L'avertissement de l'anonymisation sur telephone ---------------------
Sur un ecran etroit, ces quatre lignes prenaient plus de place que le fil
de discussion lui-meme. Elles ne disparaissent pas : elles apparaissent au
moment ou elles ont un objet, c'est-a-dire quand la case est cochee. Une
mise en garde sur une anonymisation qui n'a pas lieu ne met en garde
contre rien.
------------------------------------------------------------------------ */
@media (max-width: 720px) {
.saisie__avertissement { display: none; }
.saisie__bascule:checked ~ .saisie__avertissement {
display: block;
flex-basis: 100%;
min-width: 0;
}
}
/* --- La plateforme sur telephone ------------------------------------------
Le lot 26 avait rendu l'onglet Assistant utilisable au doigt et corrige la
cause du debordement general ; ces regles etendent le traitement a TOUS
les ecrans. Elles ne s'appliquent qu'en dessous du seuil : en grand, rien
ne change.
TROIS PRINCIPES
- ce qui est large defile dans sa propre zone, jamais en poussant la
page ;
- ce qui se touche fait au moins 44 px de haut ;
- un champ de saisie fait au moins 16 px de texte, taille en dessous de
laquelle les navigateurs mobiles zooment d'office en arrivant dedans,
et ne dezooment jamais.
------------------------------------------------------------------------ */
@media (max-width: 760px) {
/* Une valeur sans espace — un identifiant d'appareil, une adresse, un
courriel — ne pousse pas la page : elle se coupe. */
.champs dd,
.champs dt,
.carte,
.contenu__corps { overflow-wrap: anywhere; }
/* MAIS UN BOUTON NE SE COUPE PAS AU MILIEU D'UN MOT (lot 36). Il heritait
de la regle ci-dessus : sa largeur minimale tombait a une lettre, et
dans une rangee flexible — la recherche des fils de l'assistant, celle
du catalogue des cartes — le champ voisin l'ecrasait jusqu'a « Cher /
cher ». Un libelle de bouton passe a la ligne entre ses mots, jamais
dedans : c'est alors le champ qui cede la place. */
.bouton { overflow-wrap: normal; }
/* Une cellule de tableau, elle, ne se coupe PAS au milieu d'un mot :
« Collaborateur » rendu « Coll abo rate ur » est illisible. Le tableau a
sa zone de defilement, c'est elle qui absorbe la largeur. */
table.liste td, table.liste th { overflow-wrap: normal; }
/* Les formulaires passent en pleine largeur et sur une colonne. */
.formulaire { max-width: none; }
/* TOUT champ de saisie, et pas seulement ceux du gabarit commun : les
ecrans qui ont leurs propres champs — le Studio, une heure de creneau,
un filtre de liste — sont ceux ou le zoom automatique surprend le plus.
La regle porte donc sur l'element, pas sur la classe. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.formulaire__ligne input,
.formulaire__ligne select,
.formulaire__ligne textarea,
.champ-recherche { font-size: 16px; }
/* Un menu deroulant reclame par defaut la largeur de sa plus longue
option — « Justificatif de domicile » suffit a elargir la carte qui le
contient, et la carte pousse la page. « min-width: 0 » lui retire ce
droit ; le libelle long se tronque a l'affichage, la liste ouverte le
montre en entier. */
.formulaire__ligne input,
.formulaire__ligne select,
.formulaire__ligne textarea { min-width: 0; max-width: 100%; }
.carte, .grille > *, .formulaire { min-width: 0; }
.champ-recherche { min-width: 0; width: 100%; }
/* Ce qui se touche se touche vraiment. Les boutons d'une barre d'actions
prennent la largeur : viser une cible de 80 px au pouce, sur un ecran
qui tremble, est une source d'erreur. */
.bouton { min-height: 44px; display: inline-flex; align-items: center;
justify-content: center; }
/* Les actions se partagent la largeur et passent a la ligne quand elles
ne tiennent plus : deux boutons courts restent cote a cote, un bouton
long prend la ligne pour lui. */
.barre-actions { gap: 0.5rem; }
.barre-actions > * { flex: 1 1 auto; }
.barre-actions > * > .bouton, .barre-actions > .bouton { width: 100%; }
/* Dans un tableau, les actions restent cote a cote : la colonne defile. */
table.liste .barre-actions > * { flex: 0 0 auto; }
table.liste .barre-actions .bouton { width: auto; }
/* Les grilles de cartes tiennent sur une colonne. */
.grille--deux, .grille--trois { grid-template-columns: 1fr; }
/* Les formulaires de recherche et de filtre s'empilent. */
.filtres, .barre-recherche { flex-wrap: wrap; }
.filtres > *, .barre-recherche > * { min-width: 0; }
/* Se deconnecter est une action comme une autre : elle se touche. */
.barre__deconnexion { min-height: 44px; padding: 0.4rem 0.9rem; }
}
/* --- Le logo de la plateforme, quand il est depose ------------------------
Le monogramme vectoriel est colore par « currentColor » ; un PNG ne l'est
pas. Ces deux regles lui donnent la meme place et la meme hauteur, pour
que l'en-tete ne bouge pas le jour ou le fichier arrive.
------------------------------------------------------------------------ */
/* LE LOGO EST UN BLOC COMPLET : monogramme, nom et signature. Il est servi
recadre au plus pres de son dessin (« manage.py recadrer_logo »), ce qui
laisse l'entete compact : le vide autour vient des marges choisies ici, et
non de la toile du fichier. */
.barre__entete--logo { padding: var(--esp-3) var(--esp-3) var(--esp-1); display: block; }
.barre__logo { display: block; width: 100%; max-width: 168px; height: auto; }
.connexion__logo { display: block; width: 100%; max-width: 240px; margin: 0 auto; }
@media (max-width: 900px) {
.barre__entete--logo { padding: 0.7rem 1rem; }
.barre__logo { max-width: 150px; margin: 0; }
}
/* --- Base documentaire (lot 32) -------------------------------------------
Une liste de resultats de recherche, et le texte d'un passage de droit.
Deux exigences, et elles se voient : un resultat doit se lire d'un coup
d'oeil — reference, extrait, provenance —, et un texte de loi doit se lire
tout court : mesure de ligne bornee, interlignage large.
------------------------------------------------------------------------ */
.resultats {
list-style: none;
margin: 1.2rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.resultat {
border: var(--filet);
border-radius: var(--rayon-l);
background: var(--blanc);
padding: var(--esp-2);
min-width: 0;
box-shadow: var(--ombre);
}
.resultat__entete {
font-family: var(--courant);
font-size: var(--taille-lecture);
margin: 0 0 0.25rem;
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
overflow-wrap: anywhere;
}
.resultat__titre {
margin: 0 0 0.4rem;
font-size: var(--taille-m);
color: var(--texte-attenue);
}
.resultat__extrait { margin: 0 0 0.5rem; font-size: var(--taille-m); }
.resultat__pied { margin: 0; overflow-wrap: anywhere; }
/* Une mention courte, posee a cote d'un titre. Le marine sur ivoire tient
7,7:1 : elle reste lisible sans crier. */
.mention {
font-family: var(--courant);
font-size: var(--taille-xs);
color: var(--marine);
background: var(--remplissage);
border-radius: var(--rayon-pilule);
padding: 0.0625rem var(--esp-1);
}
.passage {
border-top: var(--filet);
padding-top: 1rem;
margin-top: 1rem;
min-width: 0;
}
.passage__titre { margin: 0 0 0.3rem; }
.passage__texte {
margin: 0.75rem 0 0;
font-size: var(--taille-lecture);
line-height: 1.7;
max-width: var(--mesure);
overflow-wrap: anywhere;
}
/* --- Ce que la plateforme dit d'une reponse (lots 33 a 36, allege au lot 39)
Sous la bulle et non dedans : le texte de l'assistant lui appartient, le
verdict appartient a la plateforme.
LE LOT 39 ALLEGE SANS RIEN RETIRER. Les verdicts restent ecrits SUR
l'element, dans la reponse, en petites pastilles teintees. Sous la
reponse, chaque bloc — preuves, fidelite, elements a relire — tient en une
ligne fine : son nom et son compte. Le detail se deplie d'un clic, au
clavier comme a la souris (un natif, annonce « replie » ou
« deplie » par les lecteurs d'ecran). Les references verifiees, courtes
et porteuses du lien officiel, restent affichees.
Chaque couleur de texte tient 4,5:1 sur son fond (tests), et le mot dit
toujours le verdict : la couleur n'est jamais seule.
------------------------------------------------------------------------ */
.citations {
list-style: none;
margin: var(--esp-3) 0 0;
padding: var(--esp-1) 0 0;
border-top: var(--filet);
display: flex;
flex-direction: column;
gap: var(--esp-demi);
min-width: 0;
}
.citation {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem var(--esp-1);
font-size: var(--taille-s);
line-height: 1.5;
overflow-wrap: anywhere;
}
.citation__marque {
font-family: var(--courant);
font-weight: var(--graisse-forte);
flex: 0 0 auto;
width: 1.1em;
text-align: center;
}
.citation__lien { color: var(--texte); text-decoration-color: var(--succes-filet); }
.citation__lien:hover { text-decoration-color: currentColor; }
.citation__texte { font-weight: var(--graisse-moyenne); }
.citation__mention { color: var(--texte-attenue); }
.citation--verifiee .citation__marque { color: var(--succes); }
.citation--introuvable .citation__marque,
.citation--introuvable .citation__texte,
.citation--hors_date .citation__marque,
.citation--hors_date .citation__texte,
.citation--mauvais_code .citation__marque,
.citation--mauvais_code .citation__texte { color: var(--erreur); }
.citation--indisponible .citation__marque,
.citation--indisponible .citation__texte { color: var(--alerte); }
/* Le diagnostic d'une reference en defaut (lot 34 ter) : ce que la base en
dit, et, quand elle le connait, le lien du bon article. Il passe a la
ligne sous la reference : c'est une phrase, pas une etiquette. */
.citation__diagnostic {
flex: 1 0 100%;
padding-left: 1.55em;
color: var(--texte);
}
.citation__lien--suggere { padding-left: 1.55em; }
.citation__mention--defaut { color: var(--erreur); font-weight: var(--graisse-moyenne); }
.citation--non_consultee .citation__marque { color: var(--erreur); }
@media (max-width: 760px) {
/* Sur un telephone, la reference et sa mention s'empilent plutot que de
pousser la bulle. */
.citation__mention { flex: 1 0 100%; padding-left: 1.55em; }
}
/* --- Le bloc repliable : une ligne, un compte, le detail au clic --------- */
.verification {
margin: 0;
min-width: 0;
font-size: var(--taille-s);
line-height: 1.5;
}
.citations + .verification, .relecture + .verification { margin-top: var(--esp-1); }
.reponse + .verification { margin-top: var(--esp-3); }
.verification__resume {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem var(--esp-1);
padding: var(--esp-1) 0;
border-top: var(--filet);
cursor: pointer;
list-style: none;
color: var(--texte-attenue);
}
.verification__resume::-webkit-details-marker { display: none; }
/* Le chevron du jeu d'icones : trait de 1,5 px, dessine par la feuille. */
.verification__resume::before {
content: "";
flex: none;
width: 0.4rem;
height: 0.4rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--transition);
margin: 0 0.25rem 0 0.125rem;
}
.verification[open] > .verification__resume::before { transform: rotate(45deg); }
.verification__resume:hover { color: var(--texte); }
.verification__resume:hover .verification__titre { text-decoration: underline; text-decoration-color: var(--filet-visible); text-underline-offset: 3px; }
.verification__titre {
margin: 0;
font-family: var(--courant);
font-size: var(--taille-s);
font-weight: var(--graisse-moyenne);
color: var(--texte);
}
.verification__compte { font-size: var(--taille-xs); color: var(--texte-attenue); }
.verification--alerte .verification__compte { color: var(--alerte); font-weight: var(--graisse-moyenne); }
.verification__corps { padding: var(--esp-demi) 0 var(--esp-2) 1.125rem; }
/* Une ligne de verdict dans un bloc deplie : la pastille, puis le texte. */
.preuves__liste, .marques__liste, .fidelites__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.preuves__note, .marques__note, .fidelites__note {
margin: 0.75rem 0 0;
font-size: var(--taille-xs);
line-height: 1.5;
color: var(--texte-attenue);
max-width: var(--mesure);
}
/* Les pastilles de verdict : teintees, sans contour, le mot en clair. */
.marque__etiquette,
.fidelite-avis__verdict,
.preuve-avis__verdict {
display: inline-block;
font-family: var(--courant);
font-size: var(--taille-xs);
font-weight: var(--graisse-moyenne);
line-height: 1.5;
border-radius: var(--rayon-pilule);
padding: 0 var(--esp-1);
margin-right: var(--esp-1);
white-space: nowrap;
color: var(--alerte);
background: var(--alerte-fond);
}
/* --- Elements non sources (lot 34) ---------------------------------------
Le bloc porte sa propre phrase : sans elle, l'absence de marque se lirait
« tout est verifie », ce qui est exactement le defaut que ce lot corrige. */
.marques { min-width: 0; }
.marque {
font-size: var(--taille-s);
line-height: 1.5;
overflow-wrap: anywhere;
}
.marque--lien .marque__etiquette { color: var(--erreur); background: var(--erreur-fond); }
.marque__extrait { color: var(--texte); }
.marque__rubrique {
display: block;
color: var(--texte-attenue);
font-size: var(--taille-xs);
margin-top: 0.125rem;
}
/* --- Fidelite des citations (lot 34 quater) -------------------------------
Sur l'element : une pastille courte, rouge pour « ne soutient pas », brune
pour « partiellement » et « indeterminee », neutre quand le controle n'a
pas eu lieu. Sous la reponse : le bloc qui donne la raison et l'extrait. */
.fidelite {
display: inline;
font-size: 0.75em;
font-weight: var(--graisse-moyenne);
padding: 0.0625em 0.5em;
border-radius: var(--rayon-pilule);
color: var(--texte-attenue);
background: var(--remplissage);
overflow-wrap: anywhere;
white-space: nowrap;
}
.fidelite--non_soutenue { color: var(--erreur); background: var(--erreur-fond); }
.fidelite--partielle,
.fidelite--indeterminee { color: var(--alerte); background: var(--alerte-fond); }
.fidelites { min-width: 0; }
.fidelites__resume { margin: 0 0 0.75rem; color: var(--texte); }
.fidelite-avis { overflow-wrap: anywhere; }
.fidelite-avis--non_soutenue .fidelite-avis__verdict { color: var(--erreur); background: var(--erreur-fond); }
.fidelite-avis--non_verifiee .fidelite-avis__verdict { color: var(--texte-attenue); background: var(--remplissage); }
.fidelite-avis__affirmation { color: var(--texte); }
.fidelite-avis__detail,
.fidelite-avis__source {
display: block;
color: var(--texte-attenue);
font-size: var(--taille-xs);
margin-top: 0.125rem;
}
@media (max-width: 760px) {
.marque__etiquette, .fidelite-avis__verdict, .preuve-avis__verdict { white-space: normal; }
}
/* --- Relecture d'une reponse (lot 34 ter) ---------------------------------
Une mention sobre, sous le texte : elle dit que la reponse a ete relue,
ou que la verification des sources est en cours. Pendant la relecture, le
filet prend l'accent de la charte ; ensuite, le simple filet des blocs.
------------------------------------------------------------------------ */
.relecture {
margin: var(--esp-3) 0 0;
padding: var(--esp-1) 0 0;
border-top: var(--filet);
font-size: var(--taille-s);
line-height: 1.5;
color: var(--texte-attenue);
}
.relecture + .citations { margin-top: var(--esp-1); }
.relecture__mention { margin: 0; }
.relecture--a_faire,
.relecture--en_cours {
border-top-color: var(--or);
color: var(--marine);
}
.relecture__compte { margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
.relecture__lancer { margin: 0.4rem 0 0; }
/* --- Lien neutralise dans une reponse (lot 34 ter) ------------------------
Une adresse Legifrance ou BOFiP que la base n'a pas fournie : le texte
reste, il n'est plus cliquable, et la mention le dit sur place. Le
pointille n'est pas celui d'un lien : on ne doit pas croire pouvoir
cliquer.
------------------------------------------------------------------------ */
.lien-retire {
color: var(--marine);
text-decoration: underline dotted var(--erreur);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
overflow-wrap: anywhere;
}
.lien-retire__mention {
color: var(--erreur);
font-size: 0.75em;
white-space: nowrap;
}
/* --- Banc d'essai (lot 34) ------------------------------------------------ */
.banc-score {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.8rem;
}
.banc-question {
border: var(--filet);
border-radius: var(--rayon-l);
background: var(--blanc);
padding: 0.9rem 1rem;
margin-bottom: 0.9rem;
min-width: 0;
}
.banc-question__entete {
font-family: var(--courant);
margin: 0 0 0.3rem;
display: flex;
gap: 0.6rem;
align-items: baseline;
flex-wrap: wrap;
}
.banc-question__mesures { margin: 0.4rem 0; font-size: var(--taille-s); }
.banc-question__reponse {
margin: 0.6rem 0 0;
font-size: var(--taille-s);
line-height: 1.6;
max-width: var(--mesure);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
@media (max-width: 760px) {
.marque__etiquette { white-space: normal; }
}
/* --- Experts IA (cartes specialistes, lots 35 a 39 ; refondus au lot 40) --
Un catalogue d'applications : les experts regroupes par categorie sous un
petit titre et un filet ; chaque carte compacte porte une icone sur un
carre pale, le nom, deux lignes de description au plus (coupees
proprement : tout se lit a l'ouverture), la categorie en petite pastille
grise et un chevron. La carte ENTIERE s'ouvre (un seul bouton, etendu).
Le statut est une pastille de coin, et son mot est dit aux lecteurs
d'ecran.
------------------------------------------------------------------------ */
.catalogue__outils {
display: flex;
flex-wrap: wrap;
gap: var(--esp-1) var(--esp-2);
align-items: center;
margin-bottom: var(--esp-2);
}
.catalogue__recherche { display: flex; gap: var(--esp-1); align-items: center; flex: 1 1 18rem; min-width: 0; }
.catalogue__recherche .champ-recherche { flex: 1 1 auto; min-width: 0; }
/* Les categories passent a la ligne : aucune ne se cache hors de l'ecran. */
.catalogue__categories { margin-bottom: var(--esp-2); }
.catalogue__statuts { margin-bottom: var(--esp-3); }
.catalogue__groupe + .catalogue__groupe { margin-top: var(--esp-5); }
.catalogue__section {
margin: 0 0 var(--esp-2);
padding-bottom: var(--esp-1);
border-bottom: var(--filet);
font-size: var(--taille-m);
font-weight: var(--graisse-forte);
color: var(--texte);
}
.specialistes { list-style: none; margin: 0; padding: 0; }
.specialistes--grille {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-2);
}
@media (max-width: 1100px) {
.specialistes--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.specialistes--grille { grid-template-columns: minmax(0, 1fr); }
}
.specialiste {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: var(--esp-2);
min-width: 0;
background: var(--blanc);
border-radius: var(--rayon-l);
border: var(--filet);
box-shadow: var(--ombre);
padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-2);
}
.specialiste__carre {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: var(--rayon);
background: var(--remplissage);
color: var(--texte);
flex: none;
}
.specialiste__carre--fiscalite { background: var(--info-carre); }
.specialiste__carre--transmission { background: var(--or-pale); }
.specialiste__carre--epargne { background: var(--succes-fond); }
.specialiste__carre--immobilier { background: var(--alerte-fond); }
.specialiste__carre--ifi { background: var(--info-fond); }
.specialiste__carre--conformite { background: var(--remplissage); }
.specialiste__icone {
width: 22px;
height: 22px;
color: var(--texte);
flex: none;
}
.specialiste__icone--petite { width: 22px; height: 22px; vertical-align: -5px; }
.specialiste__corps { min-width: 0; }
.specialiste__titre {
font-family: var(--courant);
font-size: var(--taille-m);
font-weight: var(--graisse-forte);
line-height: var(--interligne-serre);
margin: 0 var(--esp-2) var(--esp-demi) 0;
}
/* Deux lignes au plus ; le texte complet se lit a l'ouverture. */
.specialiste__description {
font-size: var(--taille-s);
line-height: 1.45;
color: var(--texte-attenue);
margin: 0 0 var(--esp-1);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.specialiste__categorie {
display: inline-block;
font-size: var(--taille-xs);
font-weight: var(--graisse-moyenne);
color: var(--texte-attenue);
background: var(--remplissage);
border-radius: var(--rayon-pilule);
padding: 0 var(--esp-1);
}
/* Le statut : une pastille de coin, et le mot pour qui ne voit pas la
couleur (dans le libelle du bouton). */
.specialiste__statut {
position: absolute;
top: var(--esp-2);
right: var(--esp-2);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--alerte);
}
.specialiste__statut--validee { background: var(--succes); }
.specialiste__ouvrir { margin: 0; align-self: center; }
.specialiste__ouvrir .carte-lien__cible { display: inline-flex; padding: var(--esp-1) 0 var(--esp-1) var(--esp-1); }
.pastille-statut {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--alerte);
}
.pastille-statut--validee { background: var(--succes); }
/* La liste : une ligne par expert, pleine largeur, la description sur une
ligne. */
.specialistes--liste { display: flex; flex-direction: column; gap: var(--esp-1); }
.specialistes--liste .specialiste { align-items: center; padding: 0.75rem var(--esp-2); }
.specialistes--liste .specialiste__description { -webkit-line-clamp: 1; line-clamp: 1; margin-bottom: var(--esp-demi); }
.specialistes--liste .specialiste__statut { top: 50%; right: 2.75rem; transform: translateY(-50%); }
.gestion-carte { display: inline-flex; align-items: center; gap: 0.45rem; }
.encart-note {
border: var(--filet);
background: var(--blanc);
border-radius: var(--rayon);
padding: 0.625rem var(--esp-2);
font-size: var(--taille-s);
}
.edition-carte {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.4rem;
align-items: start;
}
.edition-carte__formulaire { max-width: none; }
.edition-carte__apercu { position: sticky; top: 1rem; min-width: 0; }
.apercu-cadrage {
margin: 0;
max-height: 70vh;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: var(--taille-s);
line-height: 1.55;
background: var(--survol);
border-radius: var(--rayon-l);
padding: 0.75rem var(--esp-2);
}
.versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.version__entete { margin: 0 0 0.35rem; }
.version__detail { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0.5rem 0 0; font-size: var(--taille-s); }
.version__detail dt { color: var(--texte-attenue); }
.version__detail dd { margin: 0; overflow-wrap: anywhere; }
.version__contenu { margin-top: 0.6rem; font-size: var(--taille-s); }
.version__contenu > summary { cursor: pointer; color: var(--texte-attenue); }
/* L'en-tete d'un fil ouvert par une carte : la carte, sa version, son statut,
et, deplie, tout ce qu'elle demande a l'assistant. */
.chat__carte { flex-basis: 100%; min-width: 0; }
.chat__carte > summary {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: var(--taille-s);
color: var(--marine);
list-style: none;
}
.chat__carte > summary::-webkit-details-marker { display: none; }
.chat__carte-icone {
width: 24px;
height: 24px;
padding: 3px;
border-radius: var(--rayon);
background: var(--survol);
flex: none;
}
.chat__carte-panneau {
margin-top: 0.75rem;
max-width: 46rem;
border-left: 1px solid var(--filet-visible);
padding: 0.25rem 0 0.25rem var(--esp-2);
}
.chat__carte-panneau ul, .chat__carte-panneau ol { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.chat__carte-panneau li { margin-bottom: 0.2rem; }
.accueil--carte { text-align: left; }
.accueil__icone {
width: 32px;
height: 32px;
padding: 6px;
border-radius: var(--rayon);
background: var(--survol);
vertical-align: -8px;
}
.accueil__liste { margin: 1rem 0; padding-left: 1.2rem; font-size: var(--taille-m); line-height: 1.6; }
.accueil__rappel {
font-size: var(--taille-s);
color: var(--texte-attenue);
border-left: 1px solid var(--filet-visible);
padding-left: var(--esp-2);
}
@media (max-width: 900px) {
.edition-carte { grid-template-columns: 1fr; }
.edition-carte__apercu { position: static; }
}
@media (max-width: 760px) {
.catalogue__outils > * { flex: 1 1 100%; }
.catalogue__outils > .segments { display: flex; }
.segments .segment { flex: 1; min-height: 40px; }
.filtre { min-height: 36px; }
.version__detail { grid-template-columns: minmax(0, 1fr); }
.version__detail dd { margin-bottom: 0.4rem; }
}
/* --- La navigation sur telephone : un menu, plus une rangee (lot 35) -------
LE DEFAUT. Sous 900 px, la barre laterale devenait une rangee d'onglets
qui defilait dans sa zone : 766 px d'onglets pour un ecran de 375. La page
ne debordait pas — mais la rangee, elle, sortait de l'ecran : les onglets
etaient coupes au bord, rien ne disait qu'il y en avait d'autres, et
l'onglet ouvert — l'Assistant, huitieme — etait hors de vue. Une
navigation dont on ne voit ni la fin ni la page ou l'on est n'est pas une
navigation, et chaque onglet ajoute l'aggravait.
LA CORRECTION. Les entrees ne sont plus sur une ligne : elles passent en
grille, qui tient dans la largeur quel qu'en soit le nombre, derriere un
bouton « Menu » qui dit la page ouverte. Sans script : une case a cocher
et son libelle, que la feuille de style relie. Au-dessus de 900 px, la
case et le bouton n'existent pas, et la barre laterale est celle d'avant.
------------------------------------------------------------------------ */
.barre__bascule, .barre__menu { display: none; }
@media (max-width: 900px) {
.barre {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.barre__entete { grid-column: 1; border-bottom: 0; min-width: 0; }
.barre__entete--logo { padding: 0.6rem 1rem; }
.barre__logo { max-width: 140px; margin: 0; }
/* La case reste atteignable au clavier : hors de l'ecran, pas absente. */
.barre__bascule {
display: block;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.barre__menu {
grid-column: 2;
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 44px;
margin: 0 1rem 0 0;
padding: 0.35rem 0.875rem;
border: 0;
border-radius: var(--rayon-pilule);
background: var(--remplissage);
color: var(--texte);
font-family: var(--courant);
font-size: var(--taille-s);
cursor: pointer;
max-width: 48vw;
}
.barre__menu-courant {
color: var(--texte-attenue);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Trois traits, dessines par la feuille de style : un trace vectoriel
dans la barre passerait pour un logo (voir tests/test_identite.py). */
.barre__menu-trait {
flex: none;
width: 16px;
height: 1.5px;
background: currentColor;
box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.barre__bascule:focus-visible + .barre__menu { outline: 2px solid var(--focus); outline-offset: 2px; }
.barre__bascule:checked + .barre__menu { background: var(--remplissage-fort); }
.barre__navigation,
.barre__pied { grid-column: 1 / -1; display: none; }
.barre__bascule:checked ~ .barre__navigation {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
overflow-x: visible;
overflow-y: auto;
max-height: calc(100vh - 9rem);
max-height: calc(100dvh - 9rem);
padding: 0.3rem 0 0.6rem;
}
.barre__bascule:checked ~ .barre__pied { display: flex; }
.barre__bascule:checked ~ .barre__navigation .barre__titre-groupe {
display: block;
grid-column: 1 / -1;
padding: 0.7rem 1rem 0.2rem;
}
.barre__bascule:checked ~ .barre__navigation .barre__lien {
white-space: normal;
min-height: 44px;
margin: 1px var(--esp-1);
padding: 0.55rem var(--esp-1);
}
}
/* --- La preuve a la source (lot 36, allegee au lot 39) ---------------------
Sur l'element : le verdict de sa citation litterale, en petite pastille
teintee. Une citation exacte est attestee a l'endroit meme, avec le lien
vers le passage ; une citation absente et une regle sans citation sont
signalees la ou on les lit. Le vert du succes et le rouge de l'erreur
tiennent 4,5:1 sur leurs fonds, et le texte dit le verdict : la couleur
n'est jamais seule.
------------------------------------------------------------------------ */
.preuve {
display: inline;
font-size: 0.75em;
font-weight: var(--graisse-moyenne);
padding: 0.0625em 0.5em;
border-radius: var(--rayon-pilule);
color: var(--alerte);
background: var(--alerte-fond);
overflow-wrap: anywhere;
}
.preuve--exacte { color: var(--succes); background: var(--succes-fond); }
.preuve--exacte a { color: var(--succes); text-decoration-color: var(--succes-filet); }
.preuve--exacte a:hover { text-decoration-color: currentColor; }
.preuve--absente { color: var(--erreur); background: var(--erreur-fond); }
.preuve--sans_citation,
.preuve--non_verifiee { color: var(--alerte); background: var(--alerte-fond); }
.preuves { min-width: 0; }
.preuve-avis { overflow-wrap: anywhere; }
.preuve-avis--exacte .preuve-avis__verdict,
.preuve-avis--par_extraits .preuve-avis__verdict { color: var(--succes); background: var(--succes-fond); }
.preuve-avis--absente .preuve-avis__verdict { color: var(--erreur); background: var(--erreur-fond); }
.preuve-avis__citation { color: var(--texte); }
.preuve-avis__lien { margin-left: 0.35rem; color: var(--texte); }
.preuve-avis__detail {
display: block;
color: var(--texte-attenue);
font-size: var(--taille-xs);
margin-top: 0.125rem;
}
/* --- Les lignes du gabarit « affirmation — Citation : « … » — reference »
(lot 39). Transformation d'AFFICHAGE, posee par assistant.js apres le
rendu : le texte enregistre et les controles ne changent pas, et sans
script la ligne s'affiche telle qu'ecrite. L'affirmation se lit en clair ;
dessous, une ligne fine : la citation repliee (un clic, ou Entree, la
deplie), la reference en petit, et les verdicts de la plateforme.
------------------------------------------------------------------------ */
.gabarit__affirmation { display: block; }
.gabarit__pied {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.75rem;
margin-top: 0.25rem;
font-size: var(--taille-s);
line-height: 1.5;
color: var(--texte-attenue);
}
.gabarit__pied .preuve, .gabarit__pied .fidelite { font-size: var(--taille-xs); }
/* La bascule : un bouton au texte, qui dit son etat (aria-expanded) et
commande l'extrait (aria-controls). Son chevron pivote a l'ouverture. */
.gabarit__bascule {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font: inherit;
cursor: pointer;
color: var(--texte);
font-weight: var(--graisse-moyenne);
background: none;
border: 0;
padding: 0;
border-radius: var(--rayon-s);
}
.gabarit__bascule::before {
content: "";
flex: none;
width: 0.35rem;
height: 0.35rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--transition);
margin-right: 0.125rem;
}
.gabarit__bascule[aria-expanded="true"]::before { transform: rotate(45deg); }
.gabarit__bascule:hover { text-decoration: underline; text-decoration-color: var(--filet-visible); text-underline-offset: 3px; }
.gabarit__extrait {
display: block;
margin: 0.25rem 0 0.125rem;
padding: 0.125rem 0 0.125rem 0.75rem;
border-left: 1px solid var(--filet-visible);
color: var(--texte);
font-size: var(--taille-s);
line-height: 1.6;
}
.gabarit__extrait[hidden] { display: none; }
.gabarit__reference { color: var(--texte-attenue); overflow-wrap: anywhere; }
a.gabarit__reference { text-decoration-color: var(--filet-visible); }
a.gabarit__reference:hover { color: var(--texte); text-decoration-color: currentColor; }
/* L'indicateur principal du banc (lot 36) : un filet de succes, sans
agrandir la tuile — la grille reste reguliere sur telephone. */
.cle--majeure-banc { border-color: var(--succes-filet); }
/* ------------------------------------------------------------------------
Les relances suggerees (lot 38, affinees au lot 39) : des pastilles fines
sous la derniere reponse, cote a cote, un filet a peine visible et
l'ombre legere au survol. Un clic envoie la question.
------------------------------------------------------------------------ */
.relances { margin-top: var(--esp-3); }
.relances__titre {
margin: 0 0 var(--esp-1);
font-size: var(--taille-xs);
color: var(--texte-attenue);
}
.relances__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--esp-1);
}
.relance {
font: inherit;
font-size: var(--taille-s);
line-height: 1.45;
text-align: left;
color: var(--marine);
background: var(--blanc);
border: 1px solid var(--filet-visible);
border-radius: var(--rayon-pilule);
padding: 0.3125rem 0.875rem;
cursor: pointer;
max-width: 100%;
}
.relance:hover { border-color: var(--filet-action); background: var(--survol); box-shadow: var(--ombre-survol); }
.relance:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.relance:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
/* La carte suggeree (lot 38) : une pastille fine sous la question, alignee
a droite avec elle. */
.carte-suggeree {
list-style: none;
align-self: flex-end;
max-width: 100%;
margin: calc(-1 * var(--esp-3)) 0 var(--esp-4);
padding: 0.25rem 0.875rem;
border: 1px solid var(--filet-visible);
background: var(--blanc);
border-radius: var(--rayon-pilule);
font-size: var(--taille-s);
}
.carte-suggeree__forme { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; margin: 0; }
.carte-suggeree__libelle { color: var(--texte-attenue); }
.carte-suggeree__titre { font-weight: var(--graisse-forte); color: var(--marine); }
.lien-action {
font: inherit;
color: var(--marine);
background: none;
border: 0;
padding: 0;
text-decoration: underline;
text-decoration-color: var(--or);
text-underline-offset: 3px;
cursor: pointer;
}
.lien-action:hover { text-decoration-color: currentColor; }
.lien-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* --- Le jeu d'icones (lot 39) ---------------------------------------------
Toutes les icones au trait de la plateforme ont LA MEME EPAISSEUR : 1,5 px
a l'ecran, quelle que soit leur taille d'affichage (« non-scaling-stroke »
annule l'effet de l'agrandissement sur le trait). Le trace ne change pas ;
la feuille de style l'emporte sur l'attribut du SVG. Elles sont posees
dans un carre de 24 ou 32 px, au rayon des champs, et alignees sur le
texte par leur centre optique. */
.specialiste__icone, .chat__carte-icone, .accueil__icone { stroke-width: 1.5; overflow: visible; }
.specialiste__icone *, .chat__carte-icone *, .accueil__icone * { vector-effect: non-scaling-stroke; }
/* --- Studio (lot 41) -------------------------------------------------------
La page du Studio confie toute la hauteur sous l'en-tete a son document,
encadre sur le meme domaine. La fenetre ne defile pas : seul le document
le fait, a l'interieur du cadre. Aucun double defilement, sur ordinateur
comme sur telephone. « dvh » suit la barre d'adresse mobile ; « vh » reste
en secours pour les navigateurs qui l'ignorent.
------------------------------------------------------------------------ */
.page-studio .application { height: 100vh; height: 100dvh; min-height: 0; }
.page-studio .contenu { min-height: 0; overflow: hidden; }
.page-studio .contenu__entete {
position: static;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--esp-1) var(--esp-2);
padding: var(--esp-2) var(--esp-4) var(--esp-1);
}
.page-studio .contenu__intro:empty { display: none; }
.page-studio .contenu__corps {
flex: 1 1 auto;
min-height: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.studio-cadre { flex: 1 1 auto; min-height: 0; display: flex; }
/* Lot 43 : plein ecran simule du teleprompteur (l'iPhone ne met en plein
ecran qu'une video) : le cadre du Studio couvre toute la page, barres
d'adresse comprises (100dvh), le temps de la prise. */
.studio-plein-ecran, .studio-plein-ecran body { overflow: hidden; }
.studio-plein-ecran .studio-cadre__document {
position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 10000;
}
.studio-cadre__document { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: var(--fond); }
@media (max-width: 900px) {
.page-studio .application { grid-template-rows: auto minmax(0, 1fr); }
.page-studio .contenu__entete { padding: var(--esp-1) var(--esp-2); }
.page-studio .contenu__entete h1 { font-size: var(--taille-l); }
.page-studio .page-cadre .contenu__corps,
.page-studio.page-cadre .contenu__corps { display: flex; }
}
/* ---------------------------------------------------------------------------
Documents reglementaires (lot 50) : apercu d'une piece ou d'un gabarit.
Le champ vide est surligne (erreur sur fond d'erreur, 7,1:1) : il ne se
confond jamais avec une valeur.
--------------------------------------------------------------------------- */
.document { max-width: 78ch; font-size: var(--taille-s); line-height: 1.6; overflow-wrap: anywhere; }
.document h2 { font-size: var(--taille-m); color: var(--marine); margin: var(--esp-3) 0 var(--esp-1); }
.document h2:first-child { margin-top: 0; }
.document p { margin: 0 0 var(--esp-1); }
.document ul { margin: 0 0 var(--esp-1); padding-left: var(--esp-3); }
.document__manquant { background: var(--erreur-fond); color: var(--erreur); font-weight: var(--graisse-forte);
padding: 0 0.25em; border-radius: var(--rayon-s); }
.document__pied { color: var(--texte-attenue); font-size: var(--taille-xs); border-top: var(--filet);
padding-top: var(--esp-1); margin-top: var(--esp-3); }
.liste-manquants { list-style: none; padding: 0; margin: 0 0 var(--esp-2); }
.liste-manquants li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-1);
padding: 0.4rem 0; border-bottom: var(--filet); }
.source-gabarit pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--taille-xs);
max-height: 60vh; overflow: auto; }
.source-gabarit summary { cursor: pointer; font-weight: var(--graisse-moyenne); }
.champ-gabarit { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; min-height: 50vh; }
.empreinte { overflow-wrap: anywhere; font-size: var(--taille-xs); }
/* ---------------------------------------------------------------------------
Recueil et profil de risque (lot 51).
--------------------------------------------------------------------------- */
.parties-recueil { list-style: none; padding: 0; margin: 0; }
.parties-recueil li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1);
padding: 0.5rem 0; border-bottom: var(--filet); }
.parties-recueil li a { flex: 1 1 12rem; }
.question-recueil { padding: var(--esp-1) 0; border-bottom: var(--filet); }
.question-recueil:last-child { border-bottom: 0; }
.choix { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.choix legend { font-weight: var(--graisse-moyenne); margin-bottom: var(--esp-demi); padding: 0; }
.choix__option { display: flex; align-items: flex-start; gap: var(--esp-1); padding: 0.35rem 0; cursor: pointer; }
.choix__option input { margin-top: 0.2rem; flex: none; }
.refus-recueil { display: inline-flex; align-items: center; gap: var(--esp-1); margin-top: var(--esp-demi);
color: var(--alerte); font-size: var(--taille-s); cursor: pointer; }
.profil-resume { font-size: var(--taille-l); font-weight: var(--graisse-forte); color: var(--marine); margin: 0; }
.profil-resume__niveau { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem;
border-radius: var(--rayon-pilule); background: var(--marine); color: var(--blanc); margin-right: var(--esp-1); }
.dimensions-profil { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--esp-2);
margin-top: var(--esp-2); }
.dimension-profil { border: var(--filet); border-radius: var(--rayon); padding: var(--esp-2); }
.dimension-profil h3 { margin: 0 0 var(--esp-demi); font-size: var(--taille-m); }
.dimension-profil__niveau { font-weight: var(--graisse-forte); color: var(--marine); margin: 0; }
.dimension-profil--contrainte { border-color: var(--or-fonce); background: var(--or-pale); }
.reglages-bareme td { vertical-align: middle; }
.reglages-bareme input { width: 100%; min-width: 6rem; }
.reglages-bareme .reglage-nombre { max-width: 8rem; }
.liste-valeurs { list-style: none; padding: 0; margin: 0; }
.liste-valeurs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem var(--esp-2);
padding: 0.45rem 0; border-bottom: var(--filet); }
.liste-valeurs li span { color: var(--texte-attenue); font-size: var(--taille-s); }
.liste-valeurs li strong { font-weight: var(--graisse-moyenne); text-align: right; margin-left: auto; }
/* Lot 52 : une reponse cadree par une carte encore « à valider ». */
.mention-carte { margin: var(--esp-1) 0 0; font-size: var(--taille-xs); color: var(--texte-attenue); font-style: italic; }
/* ---------------------------------------------------------------------------
Dossier client (lot 53) : une donnee, un seul endroit.
--------------------------------------------------------------------------- */
.grille-dossier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--esp-3); }
.bloc-dossier { display: flex; flex-direction: column; min-width: 0; }
.bloc-dossier .barre-actions { margin-top: auto; padding-top: var(--esp-2); }
.bloc-dossier__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-1); }
.bloc-dossier--incomplet { border-color: var(--erreur-filet); }
.bloc-dossier--a_confirmer { border-color: var(--alerte-filet); }
.etat-dossier--complet { color: var(--succes); background: var(--succes-fond); }
.etat-dossier--incomplet { color: var(--erreur); background: var(--erreur-fond); }
.etat-dossier--a_confirmer { color: var(--alerte); background: var(--alerte-fond); }
.champs-dossier { margin: 0; }
.champs-dossier__ligne { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--esp-1) var(--esp-2);
padding: 0.45rem 0; border-bottom: var(--filet); }
.champs-dossier dt { color: var(--texte-attenue); font-size: var(--taille-s); }
.champs-dossier dd { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; overflow-wrap: anywhere; }
.provenance { font-size: var(--taille-xs); color: var(--texte-attenue); margin: 0.15rem 0 0; }
.manquant-dossier { color: var(--erreur); font-size: var(--taille-s); font-weight: var(--graisse-moyenne); }
.champ-dossier { margin-bottom: var(--esp-2); }
.champ-dossier--a-confirmer .provenance { color: var(--alerte); }
@media (max-width: 520px) {
.champs-dossier__ligne { grid-template-columns: minmax(0, 1fr); }
}
/* Lot 53 : documents de cabinet, deux regimes. */
.document__bandeau-travail { margin: 0 0 var(--esp-2); padding: 0.5rem var(--esp-2); border-radius: var(--rayon-s);
background: var(--erreur-fond); color: var(--erreur); font-weight: var(--graisse-forte); text-align: center;
font-size: var(--taille-s); }
.mentions--completes { border-color: var(--succes-filet); }
.document__signatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--esp-2);
margin-top: var(--esp-2); }
.document__signature { border: var(--filet); border-radius: var(--rayon-s); padding: var(--esp-1) var(--esp-2);
min-height: 6rem; color: var(--texte-attenue); font-size: var(--taille-s); }
/* --- Lot 54 : le logo du cabinet ------------------------------------------- */
.logo-cabinet__cadre { display: flex; align-items: center; justify-content: flex-start; padding: var(--esp-2);
border: var(--filet); border-radius: var(--rayon-s); background: var(--blanc); margin-bottom: var(--esp-1);
max-width: 100%; }
.logo-cabinet__image { display: block; max-width: min(100%, 22rem); max-height: 6rem; width: auto; height: auto;
object-fit: contain; }
.document__logo { margin: 0 0 var(--esp-2); }
.document__logo img { display: block; max-width: min(100%, 15rem); max-height: 4.5rem; width: auto; height: auto;
object-fit: contain; }
/* --- Lot 54 : le suivi de conformité -------------------------------------- */
.message--info { background: var(--info-fond); border-color: var(--filet-clair); }
.bouton--petit { padding: 0.3rem 0.7rem; font-size: var(--taille-s); }
.bloc-conformite__tete, .volet-conformite__tete { display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--esp-1) var(--esp-2); }
.conformite-resume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4);
margin: var(--esp-1) 0 var(--esp-2); }
.conformite-resume__taux { margin: 0; display: flex; flex-direction: column; }
.conformite-resume__valeur { font-size: var(--taille-xl); font-weight: var(--graisse-forte); color: var(--marine);
line-height: 1.1; }
.conformite-resume__feux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
gap: var(--esp-1) var(--esp-3); font-size: var(--taille-s); }
.conformite-resume__feux li { display: inline-flex; align-items: center; gap: 0.4rem; }
.feu { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.feu--rouge { background: var(--erreur); }
.feu--orange { background: var(--alerte); }
.feu--vert { background: var(--succes); }
.feu--aucun { background: var(--texte-attenue); }
.feu-etiquette--rouge, .etat-exigence--manquante, .etat-exigence--perimee { color: var(--erreur);
background: var(--erreur-fond); }
.feu-etiquette--orange, .etat-exigence--a_renouveler { color: var(--alerte); background: var(--alerte-fond); }
.feu-etiquette--vert, .etat-exigence--satisfaite { color: var(--succes); background: var(--succes-fond); }
.feu-etiquette--aucun, .etat-exigence--sans_objet { color: var(--texte); background: var(--info-fond); }
.filtres-conformite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-1) var(--esp-2);
margin: 0 0 var(--esp-2); }
.filtres-conformite__champ { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 9rem;
max-width: 16rem; }
.filtres-conformite__champ label { font-size: var(--taille-s); color: var(--texte-attenue); }
.liste-conformite__ligne { position: relative; }
.liste-conformite__ligne:hover { background: var(--survol); }
.liste-conformite__lien { font-weight: var(--graisse-moyenne); }
.liste-conformite__lien::after { content: ""; position: absolute; inset: 0; }
.volet-conformite { margin-bottom: var(--esp-3); }
.volet-conformite__synthese { margin: var(--esp-1) 0 var(--esp-2); }
.volet-conformite__categorie { font-size: var(--taille-m); color: var(--marine); margin: var(--esp-3) 0 var(--esp-1); }
.exigences { list-style: none; margin: 0; padding: 0; }
.exigence { padding: var(--esp-1) 0; border-top: var(--filet); min-width: 0; overflow-wrap: anywhere; }
.exigence__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 0.3rem var(--esp-2); }
.exigence__libelle { font-weight: var(--graisse-moyenne); }
.exigence__raison { margin: 0.25rem 0 0.15rem; }
.exigence__explication { margin: 0 0 var(--esp-1); }
.volet-conformite__sans-objet, .volet-conformite__etape, .volet-conformite__actes { margin-top: var(--esp-2); }
.volet-conformite details > summary, .volet-conformite__sans-objet > summary { cursor: pointer;
font-weight: var(--graisse-moyenne); }
.volet-conformite__gestes { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin-top: var(--esp-2); }
.formulaire--en-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem var(--esp-1);
margin-top: 0.4rem; }
.formulaire--en-ligne input { flex: 1 1 12rem; min-width: 0; }
.exigence-reglage { min-width: 0; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
/* Une liste en tableau devient une pile de fiches sur un ecran etroit (lot 54) : rien ne deborde. */
@media (max-width: 640px) {
table.liste-empilee thead { display: none; } /* chaque cellule porte son intitule (data-label) */
table.liste-empilee, table.liste-empilee tbody, table.liste-empilee tr, table.liste-empilee td { display: block;
width: 100%; }
table.liste-empilee tr { padding: var(--esp-1) var(--esp-2); border-bottom: var(--filet); }
table.liste-empilee tbody tr:last-child { border-bottom: 0; }
table.liste-empilee td { padding: 0.15rem 0; border-bottom: 0; white-space: normal; text-align: left; }
table.liste-empilee td.actions { white-space: normal; text-align: left; padding-top: var(--esp-1); }
table.liste-empilee td[data-label]::before { content: attr(data-label) "\00a0: "; color: var(--texte-attenue);
font-size: var(--taille-s); }
.liste-empilee__titre { font-weight: var(--graisse-moyenne); }
}
@media (min-width: 1000px) {
.exigence-reglage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-3); }
.exigence-reglage > legend, .exigence-reglage > p, .exigence-reglage > .encart-erreur { grid-column: 1 / -1; }
}
/* --- Lot 55 : lettre de mission, recommandation, parcours ------------------- */
.grille-conseil { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--esp-3);
align-items: start; }
@media (max-width: 900px) { .grille-conseil { grid-template-columns: minmax(0, 1fr); } }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: var(--esp-3); }
.ligne-support { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--esp-2); border-bottom: var(--filet); margin-bottom: var(--esp-1); }
@media (max-width: 640px) { .ligne-support { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.solution-saisie { padding: var(--esp-1) 0; border-top: var(--filet); min-width: 0; overflow-wrap: anywhere; }
.solution-saisie__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 0.3rem var(--esp-2); }
.appariement--adaptee { color: var(--succes); background: var(--succes-fond); }
.appariement--signalee { color: var(--alerte); background: var(--alerte-fond); }
.appariement--a_justifier { color: var(--erreur); background: var(--erreur-fond); }
.case { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 var(--esp-1); }
.case input { margin-top: 0.3rem; flex: none; }
.retraits > summary { cursor: pointer; font-weight: var(--graisse-moyenne); }
.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.parcours__etape { background: var(--blanc); border: var(--filet); border-radius: var(--rayon-l);
padding: var(--esp-2) var(--esp-3); min-width: 0; overflow-wrap: anywhere; }
.parcours__etape--courante { border-color: var(--marine); box-shadow: var(--ombre); }
.parcours__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); }
.parcours__rang { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem;
height: 1.75rem; border-radius: 50%; background: var(--info-fond); color: var(--texte);
font-weight: var(--graisse-forte); font-size: var(--taille-s); }
.parcours__titre { margin: 0; font-size: var(--taille-m); flex: 1 1 auto; }
.parcours__constat { margin: var(--esp-1) 0; }
.etat-etape--fait { color: var(--succes); background: var(--succes-fond); }
.etat-etape--en_cours, .etat-etape--a_renouveler { color: var(--alerte); background: var(--alerte-fond); }
.etat-etape--a_faire { color: var(--erreur); background: var(--erreur-fond); }
/* Des cases a cocher multiples : un groupe nomme par sa legende, une case par ligne (lot 55). */
.formulaire__groupe-cases { border: 0; padding: 0; min-width: 0; }
.formulaire__groupe-cases legend { padding: 0; margin-bottom: 0.4rem; font-weight: var(--graisse-moyenne);
font-size: var(--taille-s); color: var(--texte); }
.formulaire__groupe-cases label { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: normal;
margin: 0 0 0.35rem; }
.formulaire__groupe-cases input[type="checkbox"] { margin-top: 0.25rem; flex: none; }
.justification__libelle { display: block; margin: var(--esp-1) 0 0.25rem; font-weight: var(--graisse-moyenne); }
.justification__texte { display: block; width: 100%; max-width: 100%; }
/* --- Lot 56 : les entretiens -------------------------------------------- */
.onglets-contact { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin: 0 0 var(--esp-3); }
.onglets-contact a { padding: 0.45rem 0.9rem; border-radius: var(--rayon-s); background: var(--info-fond);
color: var(--texte); text-decoration: none; font-size: var(--taille-s); font-weight: var(--graisse-moyenne); }
.onglets-contact a[aria-current="page"] { background: var(--marine); color: var(--blanc); }
.captation [hidden] { display: none; }
.temoin { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--esp-1);
padding: 0.6rem var(--esp-2); margin: 0 0 var(--esp-2); border-radius: var(--rayon-s); background: var(--erreur-fond);
color: var(--erreur); font-weight: var(--graisse-forte); }
.temoin__point { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--erreur); flex: none;
animation: temoin-battement 1.2s ease-in-out infinite; }
.temoin--pause { background: var(--alerte-fond); color: var(--alerte); }
.temoin--pause .temoin__point { background: var(--alerte); animation: none; }
.temoin__chrono { margin-left: auto; font-variant-numeric: tabular-nums; }
@keyframes temoin-battement { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .temoin__point { animation: none; } }
.captation__boutons .bouton { min-height: 3rem; }
.envoi__barre { width: 100%; height: 0.6rem; }
.recherche-entretiens { margin: 0 0 var(--esp-3); }
.recherche-entretiens label { display: block; font-weight: var(--graisse-moyenne); margin-bottom: 0.3rem; }
.recherche-entretiens__ligne { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.recherche-entretiens__ligne input { flex: 1 1 14rem; min-width: 0; }
.liste-entretiens { list-style: none; margin: 0; padding: 0; }
.entretien-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem var(--esp-2);
padding: var(--esp-1) 0; border-top: var(--filet); min-width: 0; overflow-wrap: anywhere; }
.entretien-ligne__lien { font-weight: var(--graisse-moyenne); }
.etat-entretien--terminee, .etat-entretien--pret { color: var(--succes); background: var(--succes-fond); }
.etat-entretien--en_attente, .etat-entretien--en_cours, .etat-entretien--a_assembler { color: var(--alerte);
background: var(--alerte-fond); }
.etat-entretien--echec { color: var(--erreur); background: var(--erreur-fond); }
.etat-entretien--supprime { color: var(--texte); background: var(--info-fond); }
.extraits { margin: 0 0 var(--esp-2); padding-left: 1.1rem; }
.extraits li { margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.resultat__titre { font-size: var(--taille-m); margin: var(--esp-2) 0 0.3rem; }
.lecteur { width: 100%; margin: var(--esp-1) 0; }
.grille-entretien { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--esp-3);
align-items: start; }
@media (max-width: 960px) { .grille-entretien { grid-template-columns: minmax(0, 1fr); } }
.transcription { list-style: none; margin: var(--esp-2) 0 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.replique { display: flex; width: 100%; gap: var(--esp-1); padding: 0.35rem 0; border-top: var(--filet); }
.replique--lu { background: var(--info-fond); }
.replique__instant { flex: none; border: 0; background: none; color: var(--marine); font-size: var(--taille-xs);
font-variant-numeric: tabular-nums; cursor: pointer; padding: 0.2rem 0.3rem; min-width: 3.2rem; text-align: left;
text-decoration: underline; text-underline-offset: 2px; }
.replique__texte { min-width: 0; overflow-wrap: anywhere; }
.replique__locuteur { font-weight: var(--graisse-moyenne); color: var(--texte-attenue); }
.propositions { list-style: none; margin: 0; padding: 0; }
.proposition { padding: var(--esp-1) 0; border-top: var(--filet); min-width: 0; overflow-wrap: anywhere; }
.proposition__champ { margin: 0 0 0.25rem; font-weight: var(--graisse-moyenne); }
.proposition__decision input { width: 100%; }
.citation-entretien { margin: 0.3rem 0; padding: 0.35rem 0.6rem; background: var(--info-fond);
border-radius: var(--rayon-s); font-size: var(--taille-s); }
.etat-proposition--acceptee { color: var(--succes); background: var(--succes-fond); }
.etat-proposition--refusee { color: var(--texte); background: var(--info-fond); }
.etat-proposition--proposee { color: var(--alerte); background: var(--alerte-fond); }
.point-attention { color: var(--alerte); background: var(--alerte-fond); }
.locuteurs > summary, .suppression-entretien > summary { cursor: pointer; font-weight: var(--graisse-moyenne); }
/* --- Lot 57 : l'espace client ------------------------------------------------------------
PENSE POUR LE TELEPHONE. Une colonne, des cibles de 48 px au moins, le logo
du cabinet en tete. Les memes jetons que la plateforme ; aucun vocabulaire
d'ecran interne. */
.espace { background: var(--fond); color: var(--texte); font-family: var(--courant); margin: 0;
min-height: 100vh; display: flex; flex-direction: column; }
.espace__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
padding: var(--esp-2); background: var(--blanc); border-bottom: var(--filet); }
.espace__marque { min-width: 0; }
.espace__logo { display: block; max-height: 48px; max-width: min(240px, 60vw); height: auto; width: auto; }
.espace__nom-cabinet { font-weight: var(--graisse-forte); font-size: var(--taille-l); overflow-wrap: anywhere; }
.espace__sortie { margin: 0; }
.espace__corps { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: var(--esp-2);
box-sizing: border-box; min-width: 0; }
.espace__pied { padding: var(--esp-2); text-align: center; color: var(--texte-attenue); font-size: var(--taille-xs);
overflow-wrap: anywhere; }
.espace__pied p { margin: 0.2rem 0; }
.espace__titre { font-size: var(--taille-xl); font-weight: var(--graisse-forte);
letter-spacing: var(--interlettrage-titre); margin: var(--esp-1) 0 var(--esp-2); overflow-wrap: anywhere; }
.espace__sous-titre { font-size: var(--taille-l); font-weight: var(--graisse-forte); margin: 0 0 var(--esp-2); }
.espace__carte { background: var(--blanc); border: var(--filet); border-radius: var(--rayon-l);
box-shadow: var(--ombre); padding: var(--esp-2); margin-bottom: var(--esp-2); min-width: 0; overflow-wrap: anywhere; }
.espace__carte .formulaire { max-width: none; }
.espace__carte .formulaire input:not([type="hidden"]):not([type="file"]),
.espace__carte .formulaire textarea { width: 100%; box-sizing: border-box; min-height: 48px; font-size: var(--taille-lecture); }
.espace__repli > summary { cursor: pointer; padding: var(--esp-1) 0; color: var(--marine);
text-decoration: underline; text-underline-offset: 3px; }
.bouton--large { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
box-sizing: border-box; font-size: var(--taille-m); margin-top: var(--esp-1); }
.espace__carte .formulaire input.champ-code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums;
font-size: var(--taille-xl); }
.espace__demandes, .espace__documents { list-style: none; margin: 0; padding: 0; }
.demande-client { padding: var(--esp-2) 0; border-top: var(--filet); }
.demande-client:first-child { border-top: 0; padding-top: 0; }
.demande-client__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--esp-1); }
.etat-client { color: var(--texte); background: var(--info-fond); }
.etat-client--attente { color: var(--alerte); background: var(--alerte-fond); }
.etat-client--refus { color: var(--erreur); background: var(--erreur-fond); }
.etat-client--fait { color: var(--succes); background: var(--succes-fond); }
.parcours-client { list-style: none; margin: 0; padding: 0; }
.parcours-client__etape { display: flex; gap: var(--esp-2); padding: var(--esp-1) 0; }
.parcours-client__rang { flex: none; width: 2rem; height: 2rem; border-radius: var(--rayon-pilule);
display: flex; align-items: center; justify-content: center; background: var(--remplissage);
font-weight: var(--graisse-forte); font-size: var(--taille-s); }
.parcours-client__etape--fait .parcours-client__rang { background: var(--succes-fond); color: var(--succes); }
.parcours-client__etape--en_cours .parcours-client__rang,
.parcours-client__etape--a_renouveler .parcours-client__rang { background: var(--marine); color: var(--ivoire); }
.parcours-client__titre { margin: 0.2rem 0; font-weight: var(--graisse-moyenne); }
.parcours-client__etape p { margin-top: 0; }
.document-client { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--esp-1) var(--esp-2);
margin-bottom: var(--esp-1); border: var(--filet); border-radius: var(--rayon); color: var(--texte);
text-decoration: none; min-height: 48px; justify-content: center; }
.document-client:hover { background: var(--survol); }
.coordonnees-client { margin: 0; }
.coordonnees-client__ligne { padding: var(--esp-1) 0; border-top: var(--filet); }
.coordonnees-client dt { font-weight: var(--graisse-moyenne); }
.coordonnees-client dd { margin: 0.2rem 0 0; }
.conseils-photo { background: var(--info-fond); border-radius: var(--rayon); padding: var(--esp-1) var(--esp-2);
margin-bottom: var(--esp-2); }
.conseils-photo__titre { font-weight: var(--graisse-moyenne); margin: 0.2rem 0; }
.conseils-photo ul { margin: 0; padding-left: 1.1rem; }
.zone-depot { border: 1px dashed var(--bordure-champ); border-radius: var(--rayon-l); padding: var(--esp-2);
text-align: center; }
.zone-depot--survol { background: var(--survol); }
.zone-depot__texte { margin: 0 0 var(--esp-1); }
.zone-depot__boutons { display: grid; gap: var(--esp-1); }
.zone-depot__boutons .bouton { position: relative; cursor: pointer; }
.zone-depot__entree { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.apercus-depot { list-style: none; margin: var(--esp-2) 0 0; padding: 0; }
.apercu-depot { border: var(--filet); border-radius: var(--rayon); padding: var(--esp-1); margin-bottom: var(--esp-1); }
.apercu-depot__image { display: block; max-width: 100%; max-height: 260px; margin: 0 auto var(--esp-1);
border-radius: var(--rayon-s); }
.apercu-depot__fichier p { margin: 0.2rem 0; overflow-wrap: anywhere; }
.depot-client [hidden] { display: none; }
@media (min-width: 720px) {
.espace__tete { padding: var(--esp-2) var(--esp-4); }
.zone-depot__boutons { grid-template-columns: 1fr 1fr; }
}
/* Lot 57 : le cote conseiller — l'onglet « Espace client » du contact. */
.pastille-onglet { display: inline-flex; min-width: 1.25rem; height: 1.25rem; align-items: center;
justify-content: center; margin-left: 0.3rem; border-radius: var(--rayon-pilule); background: var(--marine);
color: var(--ivoire); font-size: var(--taille-xs); padding: 0 0.3rem; }
.acces-client { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-1);
padding: var(--esp-1) 0; border-top: var(--filet); min-width: 0; overflow-wrap: anywhere; }
.depot-a-verifier { border-top: var(--filet); padding: var(--esp-2) 0; min-width: 0; overflow-wrap: anywhere; }
.fichiers-depot { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--esp-1);
margin: var(--esp-1) 0; }
.fichiers-depot figure { margin: 0; }
.fichiers-depot img { display: block; width: 100%; height: auto; border: var(--filet); border-radius: var(--rayon-s); }
.fichiers-depot figcaption { font-size: var(--taille-xs); color: var(--texte-attenue); }
.attente-client { color: var(--alerte); background: var(--alerte-fond); }
.attente-conseiller { color: var(--texte); background: var(--info-fond); }
/* --- Lot 58 : le referentiel produits ---------------------------------------------------
La source de chaque donnee se voit : lu dans le document (le passage exact),
saisi a la main, propose par l'assistant. La fraicheur et la fenetre de
commercialisation se disent en etiquettes. */
.produit-a-jour { color: var(--succes); background: var(--succes-fond); }
.produit-a-verifier { color: var(--alerte); background: var(--alerte-fond); }
.produit-ferme { color: var(--erreur); background: var(--erreur-fond); }
.produit-main { color: var(--texte); background: var(--info-fond); }
.produit-propose { color: var(--alerte); background: var(--alerte-fond); }
.etat-lecture--en_attente, .etat-lecture--en_cours { color: var(--alerte); background: var(--alerte-fond); }
.etat-lecture--a_valider { color: var(--texte); background: var(--info-fond); }
.etat-lecture--validee { color: var(--succes); background: var(--succes-fond); }
.etat-lecture--echec { color: var(--erreur); background: var(--erreur-fond); }
.lectures-dic { list-style: none; margin: 0; padding: 0; }
.lecture-dic { padding: var(--esp-2) 0; border-top: var(--filet); min-width: 0; overflow-wrap: anywhere; }
.lecture-dic:first-child { border-top: 0; padding-top: 0; }
.lecture-dic__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--esp-1); }
.lecture-dic__nom { min-width: 0; overflow-wrap: anywhere; }
.donnees-lues { list-style: none; margin: 0; padding: 0; }
.donnee-lue { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--esp-2);
padding: var(--esp-1) 0; border-top: var(--filet); }
.donnee-lue:first-child { border-top: 0; }
.donnee-lue__saisie .formulaire__ligne { margin-bottom: 0; }
.donnee-lue__saisie input, .donnee-lue__saisie textarea, .donnee-lue__saisie select { width: 100%;
box-sizing: border-box; }
.donnee-lue__source { min-width: 0; overflow-wrap: anywhere; padding-top: var(--esp-3); }
.passage-dic { margin: 0.3rem 0 0; padding: 0.4rem 0.6rem; background: var(--info-fond); border-radius: var(--rayon-s);
font-size: var(--taille-s); white-space: pre-line; overflow-wrap: anywhere; }
.passage-dic--refuse { background: var(--alerte-fond); }
@media (max-width: 760px) {
.donnee-lue { grid-template-columns: minmax(0, 1fr); gap: var(--esp-1); }
.donnee-lue__source { padding-top: 0; }
}
.formulaire--large { max-width: none; }
.differences { margin: 0 0 var(--esp-2); padding-left: 1.1rem; overflow-wrap: anywhere; }
.grille-produit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: var(--esp-2); align-items: start; }
.champs-produit { margin: 0; }
.champs-produit__ligne { padding: 0.45rem 0; border-top: var(--filet); min-width: 0; overflow-wrap: anywhere; }
.champs-produit__ligne:first-child { border-top: 0; }
.champs-produit dt { font-size: var(--taille-s); color: var(--texte-attenue); }
.champs-produit dd { margin: 0.15rem 0 0; }
.source-produit > summary { cursor: pointer; font-size: var(--taille-xs); color: var(--succes); }
.sri { display: inline-flex; min-width: 1.6rem; justify-content: center; border-radius: var(--rayon-s);
background: var(--remplissage); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; }
.comparaison th[scope="row"] { text-align: left; font-weight: var(--graisse-moyenne); white-space: nowrap; }
.comparaison td, .comparaison th { vertical-align: top; overflow-wrap: anywhere; min-width: 9rem; }
.ligne-support--referentiel { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr)
minmax(0, 1fr); align-items: end; }
.ligne-support--referentiel select { width: 100%; max-width: 100%; }
@media (max-width: 900px) {
.ligne-support--referentiel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ligne-support--referentiel > .formulaire__ligne:first-child { grid-column: 1 / -1; }
}
.apercu-repartition { margin-top: var(--esp-2); padding: var(--esp-1) var(--esp-2); background: var(--info-fond);
border-radius: var(--rayon); }
.apercu-repartition p { margin: 0.2rem 0; }
.groupe-champs [hidden], .formulaire [hidden] { display: none; }