/* Atelier-3 (01/11) : « Mon travail » et la fiche de travail du mécanicien (préfixe at3-, libre dans front/
   au 01/11). Un mot, une couleur ; un seul bouton bleu ; au téléphone : 15 px, cibles de 44 px, rien de côté. */
.at3{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:1180px}
.at3-tete{display:flex;flex-direction:column;gap:8px}
.at3-choix{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.at3-filtres{display:none}
.at3-seg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--ap-r-m);background:hsl(var(--ap-gris-doux))}
.at3-seg button{border:0;background:transparent;padding:6px 12px;border-radius:var(--ap-r-s);font:inherit;font-size:var(--ap-t-m);font-weight:600;color:hsl(var(--ap-doux));cursor:pointer;min-height:36px}
.at3-seg button.on{background:hsl(var(--ap-carte));color:hsl(var(--ap-encre));box-shadow:0 1px 2px hsl(0 0% 0% / .08)}
.at3-mots{display:flex;flex-wrap:wrap;gap:6px}
.at3-k{display:inline-flex;align-items:baseline;gap:5px;border:1px solid hsl(var(--ap-trait));background:hsl(var(--ap-carte));border-radius:999px;padding:4px 10px;font:inherit;font-size:var(--ap-t-m);cursor:pointer;min-height:32px;color:hsl(var(--ap-encre))}
.at3-k b{font-size:15px}
.at3-k[data-ton="rouge"] b{color:hsl(var(--ap-rouge))}.at3-k[data-ton="orange"] b{color:hsl(var(--ap-ambre))}
.at3-k[data-ton="bleu"] b{color:hsl(var(--ap-action))}.at3-k[data-ton="vert"] b{color:hsl(var(--ap-vert))}
.at3-k.on{border-color:hsl(var(--ap-encre));box-shadow:inset 0 0 0 1px hsl(var(--ap-encre))}
.at3-autre{margin-left:auto;font-size:var(--ap-t-m);color:hsl(var(--ap-doux));text-decoration:none;padding:6px 10px;border:1px solid hsl(var(--ap-trait));border-radius:var(--ap-r-s);min-height:36px;display:inline-flex;align-items:center}
.at3-liste{display:flex;flex-direction:column;border:1px solid hsl(var(--ap-trait));border-radius:var(--ap-r-l);background:hsl(var(--ap-carte));overflow:hidden}
.at3-l{display:grid;grid-template-columns:76px minmax(0,1fr) auto 20px;align-items:center;column-gap:12px;min-height:60px;padding:6px 12px;color:inherit;text-decoration:none;border-top:1px solid hsl(var(--ap-trait))}
.at3-l:first-child{border-top:0}
.at3-l:hover{background:hsl(var(--ap-gris-doux))}
.at3-l[data-ton="rouge"]{box-shadow:inset 4px 0 0 hsl(var(--ap-rouge))}
.at3-l[data-ton="orange"]{box-shadow:inset 4px 0 0 hsl(var(--ap-ambre))}
.at3-l[data-ton="bleu"]{box-shadow:inset 4px 0 0 hsl(var(--ap-action))}
.at3-l[data-ton="vert"]{box-shadow:inset 4px 0 0 hsl(var(--ap-vert))}
.at3-img{width:76px;height:50px;object-fit:cover;border-radius:var(--ap-r-s);display:flex;align-items:center;justify-content:center;overflow:hidden}
.at3-tx{display:flex;flex-direction:column;min-width:0}
.at3-tx b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at3-pl{font-size:var(--ap-t-s);color:hsl(var(--ap-doux));white-space:nowrap}
.at3-urg{font-style:normal;color:hsl(var(--ap-rouge));margin-right:4px;font-size:11px}
@media (max-width:767px){.at3-urg{font-size:15px}}
.at3-ld{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.at3-dt{font-size:var(--ap-t-s);font-weight:600;color:hsl(var(--ap-doux))}
.at3-dt[data-ton="rouge"]{color:hsl(var(--ap-rouge))}.at3-dt[data-ton="orange"]{color:hsl(var(--ap-ambre))}
.at3-go{font-size:22px;font-weight:700;color:hsl(var(--ap-action));text-align:center}
.at3-vide{margin:0;padding:16px;color:hsl(var(--ap-doux));font-size:15px}

/* La fiche de travail. */
.at3-nav{display:flex;align-items:center;gap:8px}
.at3-retour{text-decoration:none;font-weight:600;color:hsl(var(--ap-action));min-height:40px;display:inline-flex;align-items:center}
.at3-esp{flex:1}
.at3-vois{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid hsl(var(--ap-trait));border-radius:var(--ap-r-m);font-size:22px;font-weight:700;color:hsl(var(--ap-encre));text-decoration:none;background:hsl(var(--ap-carte))}
.at3-vois.off{opacity:.35}
.at3-rang{font-size:15px;color:hsl(var(--ap-doux))}
.at3-id{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:14px}
.at3-photo{width:120px;height:80px;object-fit:cover;border-radius:var(--ap-r-m);display:flex;align-items:center;justify-content:center;overflow:hidden}
.at3-id h1{margin:0;font-size:22px;line-height:1.2}
.at3-ids{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:15px;color:hsl(var(--ap-doux))}
.at3-ids span:first-child{font-weight:700;color:hsl(var(--ap-encre))}
.at3-mot{font-size:15px!important;padding:4px 12px!important}
.at3-gestes{display:flex;flex-wrap:wrap;gap:8px}
.at3-b{min-height:44px;padding:0 18px;border-radius:var(--ap-r-m);border:1px solid hsl(var(--ap-trait-fort,var(--ap-trait)));background:hsl(var(--ap-carte));color:hsl(var(--ap-encre));font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.at3-b[aria-disabled="true"]{color:hsl(var(--ap-doux));cursor:not-allowed}
.at3-b.at3-bleu{background:hsl(var(--ap-action));border-color:hsl(var(--ap-action));color:#fff}
.at3-b:disabled{opacity:.55;cursor:not-allowed}
.at3-lien{margin-left:auto}
.at3-corps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:start}
.at3-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.at3-bloc{border:1px solid hsl(var(--ap-trait));border-radius:var(--ap-r-l);background:hsl(var(--ap-carte));padding:4px 0 6px;min-width:0}
.at3-bloc h2{display:flex;align-items:center;gap:8px;margin:0;padding:8px 14px;font-size:15px;font-weight:700}
.at3-n{margin-left:auto;font-size:15px;color:hsl(var(--ap-doux));font-weight:600}
.at3-r{display:flex;align-items:center;gap:10px;min-height:44px;padding:2px 14px;border-top:1px solid hsl(var(--ap-trait))}
.at3-r.fait .at3-lib{color:hsl(var(--ap-doux))}
.at3-r.defaut{box-shadow:inset 3px 0 0 hsl(var(--ap-rouge))}
.at3-lib{flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere}
.at3-qui,.at3-tps{font-size:var(--ap-t-s);color:hsl(var(--ap-doux));white-space:nowrap}
.at3-case{flex:0 0 auto;width:28px;height:28px;border-radius:7px;border:2px solid hsl(var(--ap-trait-fort,var(--ap-trait)));background:hsl(var(--ap-carte));color:#fff;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.at3-case[aria-checked="true"]{background:hsl(var(--ap-vert));border-color:hsl(var(--ap-vert))}
.at3-def,.at3-chrono,.at3-mini{min-width:36px;min-height:36px;border-radius:var(--ap-r-s);border:1px solid hsl(var(--ap-trait));background:hsl(var(--ap-carte));color:hsl(var(--ap-encre));font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:0 8px}
.at3-def{color:hsl(var(--ap-rouge))}
.at3-chrono.on{border-color:hsl(var(--ap-action));color:hsl(var(--ap-action))}
.at3-note{display:block;width:calc(100% - 28px);margin:6px 14px;box-sizing:border-box;font:inherit;font-size:15px;border:1px solid hsl(var(--ap-trait));border-radius:var(--ap-r-s);padding:8px;resize:vertical}
.at3-bloc[data-bloc="notes"] .at3-mini{margin:0 14px 4px}
.at3-demandes{padding:4px 14px 0}
/* Le bloc des demandes garde UN bouton bleu sur la fiche : le sien passe en gris. */
.at3-demandes .btn.primary,.at3-demandes .primary,.at3-demandes .da-b.prim{background:hsl(var(--ap-carte))!important;color:hsl(var(--ap-encre))!important;border:1px solid hsl(var(--ap-trait))!important}
.at3-erreur{margin:0;padding:10px 14px;border-radius:var(--ap-r-m);background:hsl(var(--ap-rouge-doux));color:hsl(var(--ap-rouge));display:flex;gap:10px;align-items:center;font-size:15px}
.at3-erreur button{margin-left:auto;border:0;background:transparent;font-size:22px;min-width:44px;min-height:44px;cursor:pointer;color:inherit}
.at3-voile{display:none}
.at3-voile.on{display:block;position:fixed;inset:0;background:hsl(0 0% 0% / .35);z-index:80}
.at3-boite{position:fixed;left:50%;top:20%;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));background:hsl(var(--ap-carte));border-radius:var(--ap-r-l);padding:16px;z-index:81;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px hsl(0 0% 0% / .25)}
.at3-boite h2{margin:0;font-size:18px}
.at3-champ{min-height:44px;font:inherit;font-size:16px;border:1px solid hsl(var(--ap-trait));border-radius:var(--ap-r-s);padding:0 10px}
.at3-bas{display:flex;justify-content:flex-end;gap:8px}
.at3-prendre{display:flex;align-items:center;justify-content:center;min-height:88px;border:2px dashed hsl(var(--ap-trait));border-radius:var(--ap-r-m);font-size:15px;cursor:pointer}
.at3-apercu{max-width:100%;max-height:240px;border-radius:var(--ap-r-m);object-fit:contain}
.at3-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:hsl(var(--ap-encre));color:hsl(var(--ap-carte));padding:10px 16px;border-radius:var(--ap-r-m);font-size:15px;z-index:90;max-width:calc(100vw - 32px)}

@media (max-width:900px){.at3-corps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  /* Un seul « Filtres ▾ » : celui de la page ; celui de la coque est masqué. */
  body:has(section.at3) .n1-puce-filtres{display:none!important}
  /* Sans la puce, la rangée des onglets finirait juste au bord : on garde un onglet coupé (il défile de côté). */
  body:has(section.at3) .n1-onglets{max-width:calc(100% - 40px)}
  .at3{gap:10px}
  .at3-filtres{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 14px;border:1px solid hsl(var(--ap-trait));border-radius:var(--ap-r-m);background:hsl(var(--ap-carte));font:inherit;font-size:15px;font-weight:600;color:hsl(var(--ap-encre))}
  .at3-choix{display:none}
  .at3-ouvert .at3-choix{display:flex;flex-direction:column;align-items:stretch}
  .at3-seg{display:flex}.at3-seg button{flex:1;min-height:44px;font-size:15px}
  .at3-k{min-height:44px;font-size:15px}
  .at3-autre{margin-left:0;min-height:44px;font-size:15px;justify-content:center}
  .at3-l{grid-template-columns:56px minmax(0,1fr) auto 18px;column-gap:10px;min-height:64px;padding:6px 8px 6px 10px}
  .at3-img{width:56px;height:40px}
  .at3-tx b{font-size:16px}
  .at3-pl,.at3-dt{font-size:15px}
  .at3-ld .ot-mot,.at3 .ot-mot{font-size:15px;padding:2px 10px}
  .at3-img,.at3-photo{font-size:15px}
  .at3-id{grid-template-columns:88px minmax(0,1fr);gap:10px}
  .at3-photo{width:88px;height:60px}
  .at3-id h1{font-size:18px}
  .at3-mot{grid-column:1 / -1;justify-self:start}
  .at3-gestes .at3-b{flex:1 1 40%}
  .at3-lien{margin-left:0}
  .at3-qui,.at3-tps{font-size:15px}
  .at3-case{width:32px;height:32px}
  .at3-def,.at3-chrono,.at3-mini{min-width:44px;min-height:44px}
  .at3-r{padding:2px 10px}
  .at3-bloc h2{padding:8px 10px}
}