/* =====================================================================
   sobre.css — la fiche sobre et compacte, commune à toutes les applis
   Des symboles plutôt que des phrases, des cases plus petites, les champs
   serrés : on voit la fiche d'un coup d'œil et on la remplit vite.
   Chargée après le style propre de l'appli, elle le resserre.
   ===================================================================== */
.block{padding:14px 14px 6px;margin-bottom:10px}
.block > h2,.block h2{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:650;margin:0 0 10px}
.block h2 svg.ic{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.legend{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 6px}
.hint{font-size:12.5px;margin:6px 0 8px}
.hint:empty{display:none}
label.f{margin-bottom:10px}
label.f > span{font-size:12px;font-weight:600;color:var(--ink-3);margin-bottom:4px}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=search],textarea,select{
  min-height:42px;padding:9px 11px}
select{background-position:calc(100% - 17px) 18px, calc(100% - 11px) 18px}
/* une date ou une heure tient dans sa colonne (sur iPhone, elle débordait de la fiche) */
input[type=date],input[type=time],input[type=datetime-local]{min-width:0;max-width:100%;width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;display:block}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0}
textarea{min-height:76px}
.grid2.toujours{grid-template-columns:1fr 1fr}
@media (min-width:340px){
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2 > label.f > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.chips{gap:6px;margin-bottom:10px}
.chip{min-height:36px;padding:6px 12px;font-size:13.5px;border-radius:9px}
.chip.on{box-shadow:none}
.chips label.chip{border-radius:9px}

/* les choix à symbole : de petites tuiles, le pictogramme au-dessus d'un mot */
/* rangées équilibrées (sobre.js) : 5 choix sur un téléphone font 3 + 2, jamais 4 + 1 tout seul ;
   le pictogramme en haut de chaque tuile, à la même hauteur même si un mot passe sur deux lignes */
.chips.tuiles{display:flex;flex-wrap:wrap;gap:6px}
.chips.tuiles .chip{flex:1 1 78px;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:60px;padding:9px 4px 8px;
  font-size:11.5px;font-weight:600;line-height:1.15;text-align:center;background:var(--card);border:1px solid var(--champ-bord);color:var(--ink-2);border-radius:10px}
.note .chips.tuiles .chip{padding:10px 4px 9px;min-height:64px}
.chips.tuiles .chip svg{flex:0 0 auto;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chips.tuiles .chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-fonce)}
.chips.tuiles .chip.on svg{stroke:var(--accent)}

/* les boutons, plus bas */
button.act,a.act{min-height:42px;padding:9px 14px;font-size:14px}
button.act.dict{min-height:32px;padding:4px 12px;font-size:12.5px}
button.act.mini{min-height:34px;padding:4px 12px;font-size:13px;gap:6px}
button.act.mini svg{width:16px;height:16px}

/* en haut de la fiche : Reprendre, Nouveau, et à qui elle est */
.barre-fiche{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.barre-fiche button.act.mini{display:inline-flex;align-items:center}
.barre-fiche button.act.mini svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.barre-fiche .par-qui{margin-left:auto;min-width:0;font-size:12px;color:var(--sur-fond-2,#AEB7BF);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-fiche button[hidden]{display:none}

.tuiles-act{display:flex;gap:6px;margin-bottom:8px}
.tuiles-act > .act{flex:1 1 0;min-width:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:6px 4px;font-size:12px;text-decoration:none}
.tuiles-act > .act svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tuiles-act > [hidden]{display:none}

/* le micro dans le coin du champ */
.avec-micro{position:relative;margin-bottom:10px}
.avec-micro > label.f{margin-bottom:0}
.avec-micro textarea{padding-right:50px}
.avec-micro button.act.micro{position:absolute;right:6px;bottom:8px;width:36px;min-height:36px;height:36px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:0}
.avec-micro.sur-ligne input{padding-right:48px}
.avec-micro.sur-ligne button.act.micro{bottom:3px;right:4px}
.avec-micro .micro svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.avec-micro button.act.micro.dictating{background:#C62828;color:#fff;animation:sobre-micro 1.2s ease-in-out infinite}
@keyframes sobre-micro{50%{box-shadow:0 0 0 6px rgba(198,40,40,.18)}}
@media (prefers-reduced-motion:reduce){.avec-micro button.act.micro.dictating{animation:none}}

details.plus{margin:0 0 8px}
details.plus summary{font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;padding:4px 0}

/* les longues aides, repliées derrière un « i » dans le titre */
.aide-i{margin-left:auto;flex:0 0 auto;width:22px;height:22px;min-height:0;padding:0;border-radius:50%;
  border:1px solid var(--champ-bord);background:transparent;color:var(--ink-3);
  font:italic 700 12px/20px Georgia,serif;text-align:center;cursor:pointer}
.aide-i::before{content:"i"}
.aide-i[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-fonce)}
.aide-repliee{display:none}
.aide-ouverte > .aide-repliee{display:block}

/* L'en-tête change de texte à chaque saisie (référence, nombre de photos) :
   sans ceci, le navigateur recalait la page de quelques dizaines de pixels
   au moment où l'on quitte un champ, et le toucher suivant (✎, ×, un
   bouton) tombait à côté. */
header{overflow-anchor:none}