/* app.css -- LA MISE EN PAGE DE L'APP « OUTILS » (lot O-01), mobile d'abord.
 *
 * La forme des maquettes validees : v2.html (B : l'accueil, la bande ; B2 : la signature « DVO ◇ Lem », essai 3c) et
 * v1 index.html (le telephone : boutons de 52 px, cartes, pastilles, barre du bas).
 * Charge en DERNIER (apres base, tokens, composants, tokens-outils). AUCUNE couleur litterale : que des var().
 */

/* ---- socle --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--dv-pt-14); }
body { margin: 0; min-height: 100vh; background: var(--fond-doux); color: var(--texte); overflow-x: clip;
  font-size: var(--dv-pt-14); }
main { display: block; width: 100%; max-width: var(--m-page-max); margin: 0 auto; padding: var(--dv-px-16) var(--dv-px-12) var(--dv-px-24); }
a { color: var(--lien); }
img, svg { max-width: 100%; }
.ic { width: var(--dv-px-20); height: var(--dv-px-20); flex: none; }
.ic-a1 { flex: none; }

/* ---- la bande de la plateforme, le filet orange LEM ------------------------------------- */
.bande { position: relative; height: var(--m-px-52); display: flex; align-items: center; gap: var(--dv-px-10);
  padding: 0 var(--dv-px-12); background: var(--bande); color: var(--texte-inverse); }
.bande::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--dv-px-3); background: var(--lem-filet); }
.bande :focus-visible { outline-color: var(--bande-anneau); }
.bande .ic-a1 { width: var(--dv-px-26); height: var(--dv-px-26); color: var(--texte-inverse); }
.bande__app { display: inline-flex; align-items: center; gap: var(--dv-px-8); min-width: 0; font-weight: var(--dv-graisse-700);
  font-size: var(--dv-pt-16); color: var(--texte-inverse); text-decoration: none; }
.bande__droite { margin-left: auto; display: flex; align-items: center; gap: var(--dv-px-6); flex: none; }

/* la signature « DVO ◇ Lem » (essai 3c) : le losange a la hauteur des capitales, comme une lettre de plus */
.signature { display: inline-flex; align-items: flex-end; gap: var(--dv-px-3); height: var(--dv-px-20); flex: none;
  text-decoration: none; border-radius: var(--dv-px-4); }
.signature img { display: block; height: var(--dv-px-20); width: auto; max-width: none; }
.signature .signature__losange { margin: 0 var(--dv-px-4); align-self: flex-end; }

.initiales { width: var(--dv-px-32); height: var(--dv-px-32); border-radius: var(--dv-px-999); background: var(--accent-doux);
  color: var(--texte); font-size: var(--dv-pt-12); font-weight: var(--dv-graisse-700); display: inline-flex; align-items: center;
  justify-content: center; flex: none; }
.deconnexion { margin: 0; display: flex; }
.bouton-bande { width: var(--m-cible); height: var(--m-cible); display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--dv-px-8); background: var(--bande); color: var(--bande-doux); cursor: pointer; font: inherit; }
.bouton-bande:hover { background: var(--bande-survol); color: var(--texte-inverse); }

/* ---- l'accueil : les tuiles (copie de l'accueil de la plateforme) ------------------------ */
.accueil { display: flex; justify-content: center; padding: var(--dv-px-4) 0; }
.tuiles { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--dv-px-12); }
.tuile { position: relative; aspect-ratio: 1 / 1; min-width: var(--m-cible); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--dv-px-10); border-radius: var(--dv-px-12); background: var(--fond); border: 1px solid var(--bordure);
  color: var(--texte); font-weight: var(--dv-graisse-600); font-size: var(--dv-pt-14); text-align: center; text-decoration: none;
  overflow: hidden; }
.tuile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--dv-px-6); background: var(--accent); }
.tuile--lem::before { background: var(--lem-filet); }
.tuile .tuile__icone { width: var(--m-tuile-icone-tel); height: var(--m-tuile-icone-tel); color: var(--primaire); }
a.tuile:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre-carte); }
.tuile--avenir { color: var(--texte-doux); background: var(--fond-doux); }
.tuile--avenir::before { display: none; }
.tuile--avenir .tuile__icone { color: var(--bordure-forte); }
.tuile__etat { position: absolute; top: var(--dv-px-8); right: var(--dv-px-8); font-size: var(--dv-pt-10-5); font-weight: var(--dv-graisse-700);
  padding: var(--dv-px-2) var(--dv-px-6); border-radius: var(--dv-px-999); background: var(--fond-inactif); color: var(--texte-moyen); }

/* ---- les cartes, les boutons de 52 px, les puces, les pastilles (maquette v1, le telephone) */
.carte { display: flex; gap: var(--dv-px-12); align-items: center; padding: var(--dv-px-10); background: var(--fond);
  border: 1px solid var(--bordure); border-radius: var(--m-rayon); color: var(--texte); text-decoration: none; }
.carte img { flex: none; width: var(--m-px-52); height: var(--m-px-52); object-fit: contain; border-radius: var(--dv-px-8);
  background: var(--fond); border: 1px solid var(--bordure-fine); }
.carte__txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--dv-px-4); }
.carte__nom { font-weight: var(--dv-graisse-600); font-size: var(--dv-pt-14); line-height: 1.25; }
.carte__meta { font-size: var(--dv-pt-12); color: var(--texte-doux); }
.carte--retard { border-color: var(--danger); box-shadow: inset var(--dv-px-4) 0 0 var(--danger); }
.carte--lem { box-shadow: inset var(--dv-px-3) 0 0 var(--lem-filet); }

.btn { min-height: var(--m-bouton); width: 100%; padding: 0 var(--dv-px-16); border-radius: var(--m-rayon); border: 1px solid var(--primaire);
  background: var(--primaire); color: var(--texte-inverse); font: inherit; font-size: var(--dv-pt-16); font-weight: var(--dv-graisse-700);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dv-px-10); text-decoration: none; cursor: pointer; }
.btn .ic { width: var(--m-px-22); height: var(--m-px-22); }
.btn:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); }
.btn--sec { background: var(--fond); color: var(--primaire-fonce); border-color: var(--bordure-forte); }
.btn--sec:hover { background: var(--fond-survol); color: var(--primaire-fonce); border-color: var(--bordure-forte); }
.btn--succes { background: var(--succes); border-color: var(--succes); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--fond-inactif); color: var(--texte-doux); border-color: var(--bordure); cursor: default; }
.pile { display: flex; flex-direction: column; gap: var(--dv-px-10); }

.puces { display: flex; flex-wrap: wrap; gap: var(--dv-px-8); }
.puces .puce { height: var(--m-cible); padding: 0 var(--dv-px-16); border-radius: var(--dv-px-999); font-size: var(--dv-pt-14);
  font-weight: var(--dv-graisse-600); }

.pastille { display: inline-flex; align-items: center; gap: var(--dv-px-4); width: fit-content; height: var(--m-px-22);
  padding: 0 var(--dv-px-8); border-radius: var(--dv-px-999); font-size: var(--dv-pt-11); font-weight: var(--dv-graisse-600); white-space: nowrap; }
.pastille--ok { background: var(--succes-fond); color: var(--succes); }
.pastille--neutre { background: var(--fond-inactif); color: var(--texte-moyen); }
.pastille--danger { background: var(--danger-fond); color: var(--danger); }
.pastille--alerte { background: var(--alerte-fond); color: var(--alerte-texte); }

/* ---- la page d'erreur ------------------------------------------------------------------ */
.erreur { max-width: 420px; margin: var(--dv-px-32) auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--dv-px-8);
  text-align: center; }
.erreur__code { margin: 0; font-size: var(--dv-pt-14); font-weight: var(--dv-graisse-700); color: var(--texte-doux);
  font-variant-numeric: tabular-nums; }
.erreur__mot { margin: 0; font-size: var(--dv-pt-22); }
.erreur__message { margin: 0; color: var(--texte-moyen); }
.erreur__retour { margin-top: var(--dv-px-16); width: auto; }

/* ---- le bureau (au-dela du telephone) ------------------------------------------------- */
@media (min-width: 640px) {
  .bande { padding: 0 var(--dv-px-20); gap: var(--m-px-14); }
  .signature, .signature img { height: var(--dv-px-26); }
  .signature .signature__losange { margin: 0 var(--dv-px-6); }
  main { padding: var(--dv-px-24) var(--dv-px-20) var(--dv-px-32); }
  .accueil { min-height: 60vh; align-items: center; }
  .tuiles { width: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dv-px-20); }
  .tuile { width: var(--m-tuile); gap: var(--m-px-14); font-size: var(--dv-pt-16); }
  .tuile .tuile__icone { width: var(--m-tuile-icone); height: var(--m-tuile-icone); }
  .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}