/* =========================================================
DoctoCRM — un produit Opticontact
Palette dérivée du logo : bleu #375DD3, turquoise #20C6C6,
bleu clair #5B6EF5 (couleur de thème du site opticontact.fr).
========================================================= */
:root {
/* Marque */
--bleu: #375dd3;
--bleu-vif: #5b6ef5;
--bleu-fonce: #2a46a4;
--turquoise: #20c6c6;
--turquoise-f: #149a9a;
/* Neutres froids, teintés vers le bleu de marque */
--canvas: #eef1f9;
--canvas-deep: #dde3f2;
--ink: #101a33;
--ink-soft: #3a466b;
--muted: #6f7b9c;
--line: rgba(16, 26, 51, .10);
/* Verre */
--glass: rgba(255, 255, 255, .60);
--glass-strong: rgba(255, 255, 255, .80);
--glass-edge: rgba(255, 255, 255, .74);
--glass-shadow: 0 14px 44px -20px rgba(16, 26, 51, .40);
/* Les lignes de la liste sont du papier posé sur le verre : on y lit des
coordonnées et des statuts, pas une ambiance. Elles restent donc bien
plus opaques que les panneaux qui les entourent. */
--ligne-fond: rgba(255, 255, 255, .92);
--ligne-fond-survol: rgba(255, 255, 255, .99);
/* Hauteur de la barre supérieure. Le rail des filtres et l'en-tête de la
liste s'y accrochent tous les deux : une seule valeur les garde alignés. */
--dessous-barre: 84px;
/* Rôles */
--accent: var(--bleu);
--accent-ink: var(--bleu-fonce);
--accent-2: var(--turquoise);
--danger: #b1332f;
--warn: #a06a08;
--ok: #10795d;
--radius: 18px;
--radius-sm: 11px;
--display: 'Bricolage Grotesque', system-ui, sans-serif;
--body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { -webkit-tap-highlight-color: transparent; }
/* min-height et non height : un élément collant ne colle que dans les limites
de son bloc conteneur. Avec height: 100%, le mesurait une hauteur
d'écran et la barre supérieure repartait avec la page dès le premier écran
franchi — elle était bien en sticky, mais dans une boîte trop courte. */
html, body { min-height: 100%; }
body {
font-family: var(--body);
color: var(--ink);
background: var(--canvas);
/* clip plutôt que hidden : hidden fait du un conteneur de défilement
dans plusieurs moteurs, ce qui casse position:sticky sur ses descendants.
clip découpe sans créer de conteneur. La ligne hidden reste en repli. */
overflow-x: hidden;
overflow-x: clip;
font-size: 15px;
}
/* Halos d'ambiance : ce sont eux qui donnent sa matière au verre. */
.ambiance {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
background: linear-gradient(158deg, var(--canvas) 0%, var(--canvas-deep) 100%);
}
.ambiance span {
position: absolute;
border-radius: 50%;
filter: blur(96px);
}
.ambiance span:nth-child(1) { width: 46vw; height: 46vw; left: -9vw; top: -13vw; background: var(--turquoise); opacity: .40; }
.ambiance span:nth-child(2) { width: 40vw; height: 40vw; right: -7vw; top: 4vh; background: var(--bleu-vif); opacity: .34; }
.ambiance span:nth-child(3) { width: 34vw; height: 34vw; left: 32vw; bottom: -16vw; background: var(--bleu); opacity: .18; }
/* ------------------------------- Verre ----------------------------------- */
/* backdrop-filter crée un contexte d'empilement : tout z-index posé à
l'intérieur d'un .glass y reste enfermé. C'est pourquoi les panneaux
déroulants sont élevés au niveau de leur conteneur, jamais du panneau. */
.glass {
background: var(--glass);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid var(--glass-edge);
border-radius: var(--radius);
box-shadow: var(--glass-shadow);
}
/* ----------------------------- Typographie ------------------------------- */
.titre-section {
font-size: .68rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 .55rem;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* ------------------------------- Marque ---------------------------------- */
.logo-opticontact { display: block; height: 28px; width: auto; }
.logo-opticontact.grand { height: 46px; }
.marque {
display: inline-flex;
align-items: center;
gap: .55rem;
text-decoration: none;
color: inherit;
}
/* Le nom du sous-produit, discret à côté du logo de la marque mère. */
.marque .sous-produit {
font-family: var(--display);
font-weight: 600;
font-size: .82rem;
letter-spacing: .02em;
color: var(--muted);
padding-left: .55rem;
border-left: 1px solid var(--line);
white-space: nowrap;
}
/* --------------------------- Barre supérieure ---------------------------- */
.barre {
position: sticky;
top: 0;
z-index: 1030;
margin: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
border-top: 0;
background: rgba(255, 255, 255, .66);
}
.recherche { position: relative; flex: 1 1 auto; max-width: 480px; }
.recherche i {
position: absolute;
left: .85rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
font-size: .85rem;
pointer-events: none;
}
.recherche input {
width: 100%;
padding: .55rem .85rem .55rem 2.2rem;
border-radius: 100px;
border: 1px solid var(--glass-edge);
background: rgba(255, 255, 255, .72);
color: var(--ink);
font-size: .92rem;
}
.recherche input::placeholder { color: var(--muted); }
.recherche input:focus {
outline: 2px solid rgba(55, 93, 211, .35);
outline-offset: 1px;
background: #fff;
}
/* ------------------------------- Boutons --------------------------------- */
.btn-verre, .btn-plein {
border-radius: 100px;
font-size: .85rem;
font-weight: 500;
padding: .42rem .9rem;
border: 1px solid var(--glass-edge);
transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
}
.btn-verre { background: rgba(255, 255, 255, .58); color: var(--ink-soft); }
.btn-verre:hover { background: #fff; color: var(--ink); }
.btn-plein {
background: var(--bleu);
border-color: var(--bleu);
color: #fff;
box-shadow: 0 6px 18px -8px rgba(55, 93, 211, .8);
}
.btn-plein:hover { background: var(--bleu-fonce); color: #fff; }
.btn-verre:active, .btn-plein:active { transform: translateY(1px); }
.btn-verre:focus-visible, .btn-plein:focus-visible {
outline: 2px solid var(--turquoise);
outline-offset: 2px;
}
.icone-btn {
width: 30px; height: 30px;
display: grid;
place-items: center;
border-radius: 9px;
border: 1px solid transparent;
background: transparent;
color: var(--muted);
font-size: .82rem;
text-decoration: none;
flex: none;
}
.icone-btn:hover { background: rgba(255, 255, 255, .9); color: var(--bleu); border-color: var(--glass-edge); }
.icone-btn.danger:hover { color: var(--danger); }
.icone-btn.arme { background: var(--danger); color: #fff; border-color: var(--danger); }
.icone-btn:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
/* ------------------------------ Cases à cocher ---------------------------- */
/* Une case de 13 px est une cible dérisoire quand on en coche cinquante à la
suite. On redessine donc la case native : la coche est une image de fond
plutôt qu'un pseudo-élément, seule forme qui tienne dans tous les moteurs
sur un . */
input[type="checkbox"].case {
appearance: none;
-webkit-appearance: none;
width: 21px;
height: 21px;
margin: 0;
flex: none;
border-radius: 7px;
border: 1.5px solid rgba(16, 26, 51, .24);
background-color: rgba(255, 255, 255, .92);
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease, transform .1s ease;
}
input[type="checkbox"].case:hover { border-color: var(--bleu); }
input[type="checkbox"].case:active { transform: scale(.9); }
input[type="checkbox"].case:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
input[type="checkbox"].case:checked,
input[type="checkbox"].case:indeterminate {
background-color: var(--bleu);
border-color: var(--bleu);
}
input[type="checkbox"].case:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3.3 3.3 6.3-6.9'/%3E%3C/svg%3E");
}
input[type="checkbox"].case:indeterminate {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}
input[type="checkbox"].case:disabled {
opacity: .4;
cursor: default;
border-color: rgba(16, 26, 51, .16);
}
/* --------------------------- Panneau de filtres -------------------------- */
.rail {
padding: 1rem;
position: sticky;
top: var(--dessous-barre);
max-height: calc(100vh - var(--dessous-barre) - 20px);
overflow-y: auto;
scrollbar-width: thin;
}
/* En-tête collant du rail : compteur et actions restent toujours visibles. */
.rail-entete {
position: sticky;
top: -1rem;
z-index: 5;
margin: -1rem -1rem .9rem;
padding: .85rem 1rem;
background: rgba(255, 255, 255, .78);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
border-radius: var(--radius) var(--radius) 0 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
}
.rail-entete .intitule {
font-family: var(--display);
font-weight: 700;
font-size: .95rem;
letter-spacing: -.01em;
}
.compteur-filtres {
font-size: .68rem;
font-weight: 600;
padding: .1rem .42rem;
border-radius: 100px;
background: var(--bleu);
color: #fff;
}
.compteur-filtres.zero { background: rgba(16, 26, 51, .1); color: var(--muted); }
/* Les deux actions occupent leur propre ligne : le rail descend à ~190 px en
xl, où « Mémoriser » et « Réinitialiser » ne tiendraient pas à côté du
titre. Elles se replient l'une sous l'autre si la place manque encore. */
.rail-actions {
display: flex;
flex-wrap: wrap;
gap: .35rem;
width: 100%;
}
.rail-actions .btn-verre {
flex: 1 1 96px;
font-size: .76rem;
padding: .3rem .55rem;
white-space: nowrap;
}
#btn-reinit[disabled] { opacity: .4; pointer-events: none; }
#btn-memoire.memorise {
background: var(--bleu);
border-color: var(--bleu);
color: #fff;
}
#btn-memoire.memorise:hover { background: var(--bleu-fonce); }
/* Chaque groupe est une carte à part entière. Un filet de séparation ne
suffisait pas : dans une colonne haute où tout se ressemble, il faut une
bordure fermée pour que « Suivi » se distingue de « Coordonnées ». */
.groupe-filtre {
padding: .85rem .75rem .95rem;
margin-bottom: .6rem;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, .44);
transition: border-color .16s ease, background .16s ease;
}
.groupe-filtre:last-child { margin-bottom: 0; }
/* Un groupe qui filtre se détache du lot, sans avoir à lire son compteur. */
.groupe-filtre.actif {
border-color: rgba(55, 93, 211, .34);
background: rgba(255, 255, 255, .74);
}
/* L'intitulé porte deux informations plutôt qu'aucune : l'icône donne un
repère de balayage dans une colonne haute, le compteur dit lesquels
filtrent réellement. Sa taille et sa graisse doivent nettement dépasser
celles des libellés de champ, sinon la hiérarchie s'aplatit et tout se
lit comme une seule liste. */
.titre-groupe {
display: flex;
align-items: center;
gap: .5rem;
font-family: var(--display);
font-size: .95rem;
font-weight: 700;
letter-spacing: -.018em;
color: var(--ink);
margin: 0 0 .85rem;
}
.titre-groupe i {
width: 24px; height: 24px;
display: grid;
place-items: center;
flex: none;
border-radius: 8px;
font-size: .7rem;
color: var(--muted);
background: rgba(16, 26, 51, .06);
transition: background .16s ease, color .16s ease;
}
.groupe-filtre.actif .titre-groupe i {
color: #fff;
background: linear-gradient(135deg, var(--turquoise), var(--bleu));
}
.n-groupe {
margin-left: auto;
min-width: 19px;
padding: 0 .3rem;
text-align: center;
font-family: var(--body);
font-size: .66rem;
font-weight: 600;
line-height: 19px;
border-radius: 100px;
background: var(--bleu);
color: #fff;
}
.n-groupe:empty { display: none; }
/* Volontairement discrets : c'est l'écart avec le titre de groupe qui rend
la structure lisible. Le ton reste --ink-soft, jamais --muted, qui
descendrait sous le seuil de contraste à cette taille. */
.rail label.form-label { font-size: .72rem; font-weight: 500; color: var(--ink-soft); margin-bottom: .3rem; }
.aide-filtre {
font-size: .72rem;
line-height: 1.35;
color: var(--muted);
margin: .55rem 0 0;
}
.rail .form-select, .rail .form-control {
background: rgba(255, 255, 255, .72);
border: 1px solid var(--glass-edge);
border-radius: var(--radius-sm);
font-size: .86rem;
color: var(--ink);
}
.rail .form-select:focus, .rail .form-control:focus {
border-color: var(--bleu);
box-shadow: 0 0 0 3px rgba(55, 93, 211, .16);
}
/* Sélecteur segmenté : « Tous / Avec / Sans ». Un filtre à trois états se lit
d'un coup d'œil, là où deux cases à cocher laissaient l'utilisateur deviner
ce que « ni l'une ni l'autre » signifie. */
.segment {
display: flex;
border: 1px solid var(--glass-edge);
border-radius: 100px;
background: rgba(255, 255, 255, .55);
padding: 2px;
gap: 2px;
overflow: hidden;
}
.segment label {
flex: 1;
margin: 0;
cursor: pointer;
text-align: center;
}
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span {
display: block;
font-size: .76rem;
line-height: 1.5;
padding: .22rem .3rem;
border-radius: 100px;
color: var(--ink-soft);
white-space: nowrap;
transition: background .12s ease, color .12s ease;
}
.segment label:hover span { background: rgba(255, 255, 255, .9); }
.segment input:checked + span { background: var(--bleu); color: #fff; font-weight: 500; }
/* « Tous » sélectionné = absence de filtre : on le montre sans le mettre en avant. */
.segment label:first-child input:checked + span { background: rgba(16, 26, 51, .12); color: var(--ink-soft); }
.segment label:focus-within span { outline: 2px solid var(--turquoise); outline-offset: 1px; }
.bascules { display: flex; flex-wrap: wrap; gap: .35rem; }
.bascule {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .78rem;
padding: .3rem .6rem;
border-radius: 100px;
border: 1px solid var(--glass-edge);
background: rgba(255, 255, 255, .55);
color: var(--ink-soft);
cursor: pointer;
user-select: none;
}
.bascule input { display: none; }
.bascule:has(input:checked) { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bascule:focus-within { outline: 2px solid var(--turquoise); outline-offset: 2px; }
/* ------------------------ Sélecteur multiple maison ---------------------- */
.multi { position: relative; }
.multi-declencheur {
width: 100%;
display: flex;
align-items: center;
gap: .4rem;
min-height: 36px;
padding: .32rem .6rem;
border-radius: var(--radius-sm);
border: 1px solid var(--glass-edge);
background: rgba(255, 255, 255, .72);
color: var(--ink);
font-size: .84rem;
text-align: left;
cursor: pointer;
}
.multi-declencheur:hover { background: #fff; }
.multi-declencheur:focus-visible { outline: 2px solid var(--bleu); outline-offset: 1px; }
.multi.ouvert .multi-declencheur { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(55, 93, 211, .16); }
.multi-declencheur .chevron { margin-left: auto; color: var(--muted); font-size: .7rem; transition: transform .15s ease; }
.multi.ouvert .multi-declencheur .chevron { transform: rotate(180deg); }
.multi-declencheur .vide { color: var(--muted); }
.multi-jetons { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.jeton {
display: inline-flex;
align-items: center;
gap: .3rem;
max-width: 100%;
font-size: .74rem;
line-height: 1.3;
padding: .16rem .3rem .16rem .5rem;
border-radius: 100px;
background: rgba(55, 93, 211, .12);
color: var(--bleu-fonce);
}
.jeton span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jeton i { font-size: .62rem; opacity: .65; }
.jeton:hover i { opacity: 1; }
.jeton.reste { background: rgba(16, 26, 51, .08); color: var(--ink-soft); padding-right: .5rem; }
.multi-panneau {
position: absolute;
z-index: 1050;
left: 0; right: 0;
top: calc(100% + 4px);
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid var(--glass-edge);
border-radius: var(--radius-sm);
box-shadow: 0 18px 44px -18px rgba(16, 26, 51, .45);
display: none;
flex-direction: column;
overflow: hidden;
}
.multi.ouvert .multi-panneau { display: flex; }
/* Bascule au-dessus du déclencheur quand le bas du rail est trop proche. */
.multi-panneau.vers-haut { top: auto; bottom: calc(100% + 4px); }
.multi-recherche {
border: 0;
border-bottom: 1px solid var(--line);
padding: .5rem .7rem;
font-size: .84rem;
background: transparent;
color: var(--ink);
}
.multi-recherche:focus { outline: none; background: rgba(55, 93, 211, .05); }
.multi-options { max-height: 240px; overflow-y: auto; padding: .3rem; scrollbar-width: thin; }
.multi-option {
display: flex;
align-items: center;
gap: .5rem;
padding: .34rem .5rem;
border-radius: 8px;
font-size: .84rem;
cursor: pointer;
line-height: 1.25;
}
.multi-option:hover, .multi-option.survol { background: rgba(55, 93, 211, .09); }
/* La case est un témoin, pas une cible : tous les clics doivent atteindre le