:root{
--rouge:#E30613; --rouge-fonce:#B00410; --rouge-pale:#FDECEE;
--noir:#000; --encre:#16150F; --encre-2:#5C5A54; --encre-3:#8A8781;
--fond:#F4F3F1; --surface:#fff; --ligne:#DFDDD8; --ligne-forte:#C6C3BC;
--ok:#1F6B3B; --attention:#8A5A00;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fond);color:var(--encre);
font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
/* ---- marque ---- */
.marque{display:flex;flex-direction:column;line-height:1}
.marque .mot{font-size:25px;font-weight:800;font-style:italic;letter-spacing:-.02em;color:var(--noir)}
.marque .mot em{color:var(--rouge);font-style:italic}
.marque .barre{height:5px;background:linear-gradient(90deg,var(--noir) 0 38%,var(--rouge) 38% 100%);
transform:skewX(-18deg);margin:4px 3px 0 0;border-radius:1px}
.marque .lieu{font-size:10.5px;color:var(--encre-3);margin-top:6px;letter-spacing:.04em}
/* ---- structure application ---- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--ligne);display:flex;flex-direction:column}
.rail .tete{padding:18px 20px 16px;border-bottom:1px solid var(--ligne)}
.rail nav{padding:12px 10px;flex:1}
.rail a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
color:var(--encre);text-decoration:none;font-size:14.5px;font-weight:500;margin-bottom:2px}
.rail a .ic{width:20px;text-align:center;font-size:16px;flex:none}
.rail a:hover{background:var(--fond)}
.rail a.actif{background:var(--rouge-pale);color:var(--rouge-fonce);font-weight:700;
box-shadow:inset 3px 0 0 var(--rouge)}
.rail a.inactif{color:var(--encre-3);cursor:default}
.rail a.inactif:hover{background:transparent}
.rail .etiq{margin-left:auto;font-size:10px;background:#EFEDE8;color:var(--encre-3);
padding:2px 7px;border-radius:20px;font-weight:600;letter-spacing:.03em}
.rail .sep{margin:12px 12px;border-top:1px solid var(--ligne)}
.rail .pied{padding:14px 20px;border-top:1px solid var(--ligne);font-size:12px;color:var(--encre-3)}
.rail .pied b{display:block;color:var(--encre);font-size:13px;margin-bottom:2px}
.zone{padding:26px 34px 60px;max-width:1180px}
.fil{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;gap:20px}
.fil h1{margin:0;font-size:23px;letter-spacing:-.01em}
.fil p{margin:5px 0 0;color:var(--encre-2);font-size:14px}
/* ---- éléments ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
background:var(--rouge);color:#fff;border:1px solid transparent;border-radius:7px;
font:600 14.5px/1 inherit;cursor:pointer;white-space:nowrap}
.btn.sec{background:var(--surface);color:var(--encre);border-color:var(--ligne-forte)}
.btn.grand{height:48px;padding:0 26px;font-size:16px}
.rangee{display:flex;gap:10px;flex-wrap:wrap}
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:10px;padding:20px}
.carte h2{margin:0 0 3px;font-size:16px}
.carte .sub{margin:0 0 16px;color:var(--encre-2);font-size:13.5px}
/* ---- portail ---- */
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tuile{background:var(--surface);border:1px solid var(--ligne);border-radius:10px;padding:22px;
display:flex;flex-direction:column;min-height:172px;text-decoration:none;color:inherit}
.tuile:hover{border-color:var(--ligne-forte);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.tuile .ic{font-size:26px;margin-bottom:12px}
.tuile h3{margin:0 0 6px;font-size:16.5px}
.tuile p{margin:0;color:var(--encre-2);font-size:13.5px;line-height:1.4}
.tuile .bas{margin-top:auto;padding-top:14px;font-size:13px;color:var(--rouge);font-weight:600}
.tuile.off{opacity:.62;background:#FAFAF8}
.tuile.off .bas{color:var(--attention)}
.tuile.off:hover{border-color:var(--ligne);box-shadow:none}
/* ---- tableaux ---- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{border:1px solid var(--ligne-forte);padding:7px 8px;text-align:center}
th{background:#EDEBE6;font-weight:700;font-size:13px}
td.nom{text-align:left;font-weight:600}
td.vide{color:var(--encre-3)}
/* les plages horaires ne doivent jamais se couper en deux lignes */
tbody td:not(.nom){white-space:nowrap}
.deux{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.note{font-size:11.5px;font-style:italic;color:var(--encre-3);margin:8px 0 0}
.titre-doc{text-align:center;font-size:17px;font-weight:800;letter-spacing:.03em;
text-decoration:underline;text-underline-offset:4px;margin:0 0 14px}
.titre-pause{text-align:center;font-size:14.5px;font-weight:800;letter-spacing:.05em;
text-decoration:underline;text-underline-offset:4px;margin:0 0 10px}
/* ---- barre d'outils ---- */
.outils{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
select,input[type=text],input[type=password]{height:40px;padding:0 11px;border:1px solid var(--ligne-forte);
border-radius:7px;background:var(--surface);font:inherit;color:inherit}
.pastille{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--encre-2);
background:var(--surface);border:1px solid var(--ligne);border-radius:20px;padding:6px 13px}
.point{width:7px;height:7px;border-radius:50%;background:var(--ok)}
/* ---- écran de connexion ---- */
.connexion{min-height:100vh;display:grid;place-items:center;background:var(--fond)}
.boite{width:460px;background:var(--surface);border:1px solid var(--ligne);border-radius:12px;
padding:34px 34px 28px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.boite .marque{align-items:center;margin-bottom:26px}
.boite .marque .barre{width:132px}
.scan{border:2px dashed var(--ligne-forte);border-radius:10px;padding:26px 20px;background:#FBFAF8}
.scan .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--encre-3);
letter-spacing:.02em;margin-top:14px}
.barres{height:52px;display:flex;gap:2px;justify-content:center;align-items:stretch}
.barres i{display:block;background:var(--noir)}
.boite h2{margin:0 0 4px;font-size:17px}
.boite p{margin:0;color:var(--encre-2);font-size:13.5px}
.champ{margin-top:18px}
.ou{margin:20px 0 14px;display:flex;align-items:center;gap:12px;color:var(--encre-3);font-size:12.5px}
.ou::before,.ou::after{content:"";flex:1;border-top:1px solid var(--ligne)}
.lien{color:var(--rouge-fonce);font-size:13.5px;text-decoration:none;font-weight:600}
/* ---- fichiers ---- */
.depot{border:2px dashed var(--ligne-forte);border-radius:10px;padding:34px;text-align:center;
background:#FBFAF8;margin-bottom:18px}
.depot .ic{font-size:30px;display:block;margin-bottom:10px}
.depot p{margin:0 0 4px;font-weight:600}
.depot span{color:var(--encre-2);font-size:13px}
.liste{width:100%;border-collapse:collapse;font-size:13.5px}
.liste th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
color:var(--encre-3);background:transparent;border:0;border-bottom:1px solid var(--ligne);padding:8px}
.liste td{text-align:left;border:0;border-bottom:1px solid var(--ligne);padding:11px 8px;vertical-align:middle}
.liste .f{font-weight:600}
.liste .meta{color:var(--encre-3);font-size:12px}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em}
.badge.attente{background:#FFF4E0;color:var(--attention)}
.badge.prive{background:#EDEBE6;color:var(--encre-2)}
.badge.lien{background:var(--rouge-pale);color:var(--rouge-fonce)}
/* ================================================================== *
* Ajouts propres à l'application (la maquette s'arrêtait au visuel). *
* ================================================================== */
a{color:var(--rouge-fonce)}
button{font-family:inherit}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.danger{background:var(--surface);color:var(--rouge-fonce);border-color:var(--rouge)}
.btn.petit{height:32px;padding:0 12px;font-size:13px}
.cache{display:none !important}
/* -- messages -- */
.msg{padding:11px 14px;border-radius:8px;font-size:13.5px;margin:0 0 14px;border:1px solid}
.msg.err{background:var(--rouge-pale);border-color:#F3C2C6;color:#8A0710}
.msg.ok{background:#EAF5EE;border-color:#BFE0CB;color:var(--ok)}
.msg.info{background:#FFF8E8;border-color:#EDD9A8;color:var(--attention)}
.msg ul{margin:6px 0 0;padding-left:20px}
/* -- formulaires -- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;text-align:left}
input[type=text],input[type=password],input[type=time],input[type=date],
input[type=number],select,textarea{width:100%;font:inherit;color:inherit;
background:var(--surface);border:1px solid var(--ligne-forte);border-radius:7px;
padding:9px 11px;min-width:0}
textarea{min-height:150px;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:12.5px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rouge);outline-offset:1px}
.champs{display:grid;gap:14px}
.champs.deux-col{grid-template-columns:repeat(2,minmax(0,1fr))}
fieldset{border:1px solid var(--ligne);border-radius:9px;padding:16px;margin:0 0 16px}
legend{font-weight:700;font-size:13.5px;padding:0 7px}
/* -- planning : plan et pauses côte à côte, sans défilement -- */
.deux .carte{overflow-x:auto}
tbody tr.modifiee{background:#FFFCF0}
/* Les ont une largeur minimale intrinsèque : sans
table-layout fixed, ils imposent leur taille au tableau et font
déborder la page. Avec « fixed », les colonnes obéissent au tableau. */
.plan-edit{table-layout:fixed;width:100%}
.plan-edit td{padding:4px}
.plan-edit th:nth-child(1),.plan-edit td:nth-child(1){width:22%}
.plan-edit th:nth-child(2),.plan-edit td:nth-child(2),
.plan-edit th:nth-child(3),.plan-edit td:nth-child(3){width:36%}
.plan-edit th:nth-child(4),.plan-edit td:nth-child(4){width:6%}
.plan-edit input[type=time]{padding:5px 7px;font-size:13px;text-align:center;
min-width:0;max-width:100%}
.sup{background:transparent;border:0;color:var(--encre-3);cursor:pointer;font-size:16px;
line-height:1;padding:4px 7px;border-radius:6px}
.sup:hover{background:var(--rouge-pale);color:var(--rouge-fonce)}
/* -- import photo -- */
.vignettes{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.vignette{position:relative;width:104px}
.vignette img{width:104px;height:104px;object-fit:cover;border-radius:8px;
border:1px solid var(--ligne-forte);display:block}
.vignette .nom{font-size:10.5px;color:var(--encre-3);margin-top:4px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.vignette .x{position:absolute;top:-7px;right:-7px;width:23px;height:23px;border-radius:50%;
background:var(--surface);border:1px solid var(--ligne-forte);cursor:pointer;
font-size:13px;line-height:1;color:var(--encre-2)}
details{margin-top:12px}
summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--rouge-fonce)}
details pre{background:#FBFAF8;border:1px solid var(--ligne);border-radius:8px;padding:14px;
font-size:11.5px;line-height:1.5;white-space:pre-wrap;max-height:340px;overflow:auto;margin-top:10px}
/* -- attente -- */
.attente{display:flex;align-items:center;gap:10px;color:var(--encre-2);font-size:13.5px}
.rouet{width:16px;height:16px;border:2px solid var(--ligne-forte);border-top-color:var(--rouge);
border-radius:50%;animation:tourne .8s linear infinite;flex:none}
@keyframes tourne{to{transform:rotate(360deg)}}
/* -- pastille de comptage sur les tuiles et le rail -- */
.compte{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
padding:0 6px;border-radius:20px;background:var(--rouge);color:#fff;font-size:11.5px;
font-weight:700;margin-left:auto}
.tuile .compte{margin-left:0}
/* -- code de la carte, à recopier -- */
.code-carte{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;letter-spacing:.08em;
background:#FBFAF8;border:1px solid var(--ligne-forte);border-radius:8px;padding:14px;
text-align:center;word-break:break-all;margin:12px 0}
/* -- page d'erreur -- */
.page-erreur{display:grid;place-items:center;min-height:100vh;text-align:center}
.page-erreur h1{font-size:56px;margin:0;color:var(--ligne-forte)}
/* ================================================================== *
* Adaptation aux écrans *
* *
* Trois paliers, correspondant aux appareils réellement utilisés : *
* *
* ≥ 1024 px PC de l'accueil — écran de référence. Rail latéral, *
* plan et pauses CÔTE À CÔTE, sans défilement : c'est *
* le gain concret par rapport au téléphone. *
* 641-1023 tablette — rail en bandeau, contenu sur une colonne, *
* tuiles par deux. *
* ≤ 640 px téléphone — tout empilé, cibles tactiles élargies, *
* tableaux larges en défilement encadré. *
* *
* La feuille est écrite « téléphone d'abord » pour les composants *
* ajoutés ici : on part du plus contraint, on élargit ensuite. *
* ================================================================== */
/* -- ce qui vaut dès qu'on n'est plus sur un grand écran -- */
@media (max-width: 1023px) {
.app { grid-template-columns: 1fr; }
.rail {
border-right: 0;
border-bottom: 1px solid var(--ligne);
position: sticky; top: 0; z-index: 20;
background: var(--surface);
}
.rail .tete { padding: 12px 16px; }
.rail .mot { font-size: 21px; }
.rail nav { display: flex; overflow-x: auto; padding: 8px 10px; gap: 4px;
-webkit-overflow-scrolling: touch; }
.rail nav a { margin: 0; white-space: nowrap; }
.rail a.actif { box-shadow: inset 0 -3px 0 var(--rouge); }
.rail .sep { display: none; }
.rail .pied { padding: 10px 16px; display: flex; align-items: baseline;
gap: 10px; flex-wrap: wrap; }
.rail .pied b { display: inline; margin: 0; }
.zone { padding: 20px 18px 48px; }
.deux { grid-template-columns: 1fr; }
.tuiles { grid-template-columns: repeat(2, 1fr); }
.qr-bloc img { width: 240px; height: 240px; }
}
/* -- téléphone -- */
@media (max-width: 640px) {
.zone { padding: 16px 14px 44px; }
/* Le bandeau occupait près d'un tiers de la hauteur avant le contenu.
La marque se resserre, et le pied tient sur une ligne. */
.rail .tete { padding: 8px 14px 6px; }
.rail .mot { font-size: 18px; }
.rail .barre { height: 3px; margin-top: 2px; }
.rail .lieu { font-size: 9.5px; margin-top: 3px; }
.rail nav { padding: 5px 8px; }
.rail nav a { padding: 9px 11px; font-size: 14px; }
.rail nav a .ic { display: none; }
.rail .pied { padding: 7px 14px; font-size: 11.5px; gap: 8px; }
.rail .pied b { font-size: 12px; }
.fil { flex-direction: column; align-items: stretch; gap: 12px; }
.fil h1 { font-size: 20px; }
.tuiles { grid-template-columns: 1fr; }
.tuile { min-height: 0; padding: 18px; }
.champs.deux-col { grid-template-columns: 1fr; }
.carte { padding: 16px; }
/* Les boutons prennent toute la largeur : plus faciles à viser, et
l'ordre de lecture reste clair une fois empilés. */
.rangee { flex-direction: column; align-items: stretch; }
.rangee .btn { width: 100%; }
/* Sauf les paires de boutons courts, qui restent côte à côte. */
.rangee.serree { flex-direction: row; }
.rangee.serree .btn { width: auto; flex: 1; }
/* La barre du jour : les flèches et le choix du jour tiennent sur une
ligne, les pastilles d'information passent en dessous. Sans cela le
sélecteur est écrasé à 90 px et son libellé devient illisible. */
.outils { gap: 8px; }
.outils .sel-jour { flex: 1 1 auto; min-width: 150px; }
.outils .pastille { flex: 1 1 100%; justify-content: center; }
.outils .pastille.a-droite { margin-left: 0; }
.qr-bloc { flex-direction: column; }
.qr-bloc img { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; }
/* Sans cela la boîte touche les bords de l'écran. */
.boite { width: auto; max-width: 460px; margin: 16px; padding: 24px 20px; }
.code-carte { font-size: 15px; letter-spacing: .04em; }
}
/* -- appareils tactiles : cibles plus généreuses --
Sur un écran tactile, un bouton de 16 px se rate une fois sur deux.
On ne se fie pas à la largeur : une tablette en paysage est large,
et pourtant on la touche du doigt. */
@media (pointer: coarse) {
.sup { font-size: 20px; padding: 10px 12px; }
.vignette .x { width: 30px; height: 30px; font-size: 15px; }
.btn.petit { height: 40px; padding: 0 14px; }
.plan-edit input[type=time] { padding: 9px 7px; font-size: 14px; }
.rail a { padding: 12px 14px; }
/* 16 px empêche l'agrandissement automatique du champ au focus sur
iPhone, qui décale toute la page. */
input[type=text], input[type=password], input[type=time],
input[type=date], input[type=number], select, textarea {
font-size: 16px; padding: 11px 12px; min-height: 44px;
}
.btn { height: 46px; }
.btn.grand { height: 52px; }
}
/* -- pouvoir rétrécir --
Dans une grille, un élément refuse par défaut de descendre sous la
largeur minimale de son contenu (min-width: auto). Un tableau à
min-width: 420px élargirait donc toute la page sur un téléphone, au
lieu de défiler dans sa carte. « min-width: 0 » lève ce blocage :
c'est le même piège que les , côté grille. */
.zone { min-width: 0; }
.app > * { min-width: 0; }
.deux > * { min-width: 0; }
.tuiles > * { min-width: 0; }
.champs > * { min-width: 0; }
.qr-bloc > * { min-width: 0; }
/* Les noms de fichiers déposés par un client peuvent être longs et sans
espace : sans quoi ils élargissent leur colonne indéfiniment. */
.liste .f, .recu b, #liste b { overflow-wrap: anywhere; }
/* -- tableaux larges --
Le plan de caisse a cinq colonnes, le journal en a cinq aussi : sur
un écran étroit, aucun réglage typographique ne les fera tenir. On
les laisse défiler horizontalement DANS leur carte, plutôt que de
faire déborder toute la page — un défilement latéral de la page
entière est bien plus désagréable. */
.carte { overflow-x: auto; }
.carte > table, .carte > .liste { min-width: 480px; }
.deux .carte > table { min-width: 0; }
@media (max-width: 1023px) {
/* Le plan a cinq colonnes : il lui faut de la place, quitte à
défiler. Les pauses n'en ont que deux et tiennent partout — leur
imposer la même largeur les ferait défiler pour rien. */
.deux .carte > #table-plan { min-width: 420px; }
.deux .carte > #table-pauses { min-width: 0; }
}
/* -- édition des horaires sur téléphone --
Le tableau devient une suite de blocs, un par personne : sur 375 px,
quatre champs d'heure alignés seraient illisibles et intouchables.
Les libellés viennent de l'attribut data-libelle posé par planning.js. */
@media (max-width: 640px) {
.carte > .plan-edit { min-width: 0; }
.plan-edit thead { display: none; }
.plan-edit, .plan-edit tbody, .plan-edit tr, .plan-edit td { display: block; width: auto; }
/* Les largeurs de colonnes en pourcentage du mode tableau ont une
spécificité plus forte que « width: auto » ci-dessus : sans les
neutraliser, la cellule reste à 36 % de la ligne et les deux champs
d'heure n'ont plus la place de tenir côte à côte. */
.plan-edit td:nth-child(1), .plan-edit td:nth-child(2),
.plan-edit td:nth-child(3), .plan-edit td:nth-child(4) { width: auto; }
.plan-edit tr {
border: 1px solid var(--ligne); border-radius: 9px;
padding: 10px 12px; margin-bottom: 8px; position: relative;
}
.plan-edit tr.modifiee { background: #FFFCF0; }
.plan-edit td { border: 0; padding: 0; text-align: left; }
.plan-edit td.nom { font-size: 15px; margin-bottom: 6px; padding-right: 40px; }
/* Le libellé au-dessus, en une ligne discrète : à côté des champs, il
leur volait 80 px et les faisait passer l'un sous l'autre — donc
deux fois plus haut, pour rien. */
.plan-edit td[data-libelle] { margin-top: 8px; }
.plan-edit td[data-libelle]::before {
content: attr(data-libelle);
display: block; margin-bottom: 3px;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--encre-3); line-height: 1.2;
}
.plan-edit td:last-child { position: absolute; top: 6px; right: 6px; }
}
/* -- champs d'heure : leur laisser de quoi s'afficher --
Android rend « 08:30 » avec ses propres contrôles et TRONQUE dès que
le champ est trop étroit : on lit alors « 0 » et « 1 », ce qui ne
veut plus rien dire. Les deux champs d'une période partagent donc la
largeur, avec un plancher : s'ils ne tiennent pas côte à côte, ils
passent l'un sous l'autre plutôt que de se réduire. */
.grille-heures {
display: flex; flex-wrap: wrap; gap: 6px;
}
.grille-heures input[type=time] {
flex: 1 1 108px; min-width: 108px; width: auto;
text-align: center;
}
@media (max-width: 640px) {
.plan-edit input[type=time] { font-size: 15px; padding: 8px 4px; }
}
/* -- impression : le plan du jour sur papier --
Le PDF reste la sortie de référence, mais une impression directe
depuis le navigateur ne doit pas sortir le menu et les boutons. */
@media print {
.rail, .fil .rangee, .outils, #vue-import, .plan-edit,
.btn, .sup, #message { display: none !important; }
.app { display: block; }
.zone { padding: 0; max-width: none; }
.deux { grid-template-columns: 1.55fr 1fr; }
.carte { border: 0; padding: 0; overflow: visible; }
body { background: #fff; }
}
/* ---- classes utilitaires ----
La politique de sécurité interdit les attributs style= : tout passe
par des classes, y compris les petits ajustements d'espacement. */
.esp-h{margin-top:8px}
.esp{margin-top:12px}
.esp-p{margin-top:14px}
.esp-m{margin-top:16px}
.esp-g{margin-top:18px}
.esp-xg{margin-top:20px}
.bas-g{margin-bottom:18px}
.a-droite{margin-left:auto}
.a-gauche{text-align:left}
.fleche{width:40px;padding:0}
.col-caisse{width:64px}
/* Le choix du jour prend la largeur de son contenu, pas celle de toute
la barre : « select { width: 100% } » l'étirait sur 960 px pour
afficher une date. */
.sel-jour{min-width:230px;width:auto;max-width:100%}
.discret{font-weight:400;color:var(--encre-3)}
.mini{font-size:13px;color:var(--encre-2)}
.etroit{max-width:180px}
.bloc{display:block}
.au-bout{justify-content:flex-end}
.demi{opacity:.5}
.point.tiede{background:var(--attention)}
.cache-copie{position:fixed;opacity:0;pointer-events:none}
.barres i.b1{width:1px}.barres i.b2{width:2px}
.barres i.b3{width:3px}.barres i.b4{width:4px}
.barres i.creux{opacity:0}
.depot.survol{border-color:var(--rouge)}
.a-droite-txt{text-align:right}
/* ---- réception d'un document d'un client ---- */
.etapes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.etape{display:flex;align-items:center;gap:7px;font-size:13px;padding:6px 12px;
border:1px solid var(--ligne);border-radius:20px;color:var(--encre-3)}
.etape .n{width:19px;height:19px;border-radius:50%;background:var(--ligne);
color:var(--surface);font-size:11.5px;font-weight:700;display:flex;
align-items:center;justify-content:center;flex:none}
.etape.en-cours{border-color:var(--rouge);color:var(--rouge-fonce);
background:var(--rouge-pale);font-weight:600}
.etape.en-cours .n{background:var(--rouge)}
.etape.faite{color:var(--ok);border-color:#BFE0CB;background:#EAF5EE}
.etape.faite .n{background:var(--ok)}
.qr-bloc{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.qr-bloc img{width:280px;height:280px;border:1px solid var(--ligne);
border-radius:10px;background:#fff;flex:none}
.qr-texte{flex:1;min-width:220px}
.qr-texte p{margin:0 0 8px}
.recu{display:flex;align-items:center;gap:10px;padding:11px 13px;
border:1px solid #BFE0CB;background:#EAF5EE;border-radius:9px;margin-top:9px}
.recu .ic{font-size:17px}
.recu b{word-break:break-word}
.recu .meta{color:var(--encre-2);font-size:12.5px;margin-left:auto;white-space:nowrap}