/* Maker Vidéo — feuille unique, pensée d'abord pour le téléphone.
   Parti pris : une salle de projection. L'interface reste neutre et sombre, la seule couleur vient des vidéos
   et d'un ton « lampe de projecteur » pour ce qui se clique. Thème clair automatique si l'appareil le préfère. */

:root {
  --fond: hsl(30 6% 7%);
  --fond-leve: hsl(30 5% 11%);
  --fond-creux: hsl(30 6% 4%);
  --trait: hsl(30 5% 19%);
  --trait-fort: hsl(30 5% 30%);
  --encre: hsl(40 22% 92%);
  --encre-douce: hsl(36 9% 68%);
  --encre-pale: hsl(34 6% 52%);
  --lampe: hsl(30 92% 60%);
  --lampe-vive: hsl(34 96% 68%);
  --sur-lampe: hsl(28 40% 8%);
  --bon: hsl(140 42% 58%);
  --alerte: hsl(4 78% 66%);
  --alerte-fond: hsl(4 45% 14%);

  --e1: 0.25rem;  --e2: 0.5rem;  --e3: 0.75rem;  --e4: 1rem;
  --e6: 1.5rem;   --e8: 2rem;    --e12: 3rem;    --e16: 4rem;

  --t-xs: 0.75rem;  --t-sm: 0.875rem;  --t-base: 1rem;  --t-lg: 1.125rem;
  --t-xl: 1.375rem; --t-2xl: 1.75rem;  --t-3xl: 2.25rem;

  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-chiffres: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --rayon: 6px;
  --aisance: cubic-bezier(0.4, 0, 0.2, 1);
  --vite: 150ms;
  --gouttiere: var(--e4);
  --hauteur-barre: 3.5rem;
  --z-barre: 10;
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: hsl(40 28% 96%);
    --fond-leve: hsl(0 0% 100%);
    --fond-creux: hsl(40 18% 90%);
    --trait: hsl(36 14% 84%);
    --trait-fort: hsl(34 10% 66%);
    --encre: hsl(30 12% 12%);
    --encre-douce: hsl(30 7% 34%);
    --encre-pale: hsl(30 6% 42%);
    --lampe: hsl(20 86% 36%);
    --lampe-vive: hsl(20 88% 30%);
    --sur-lampe: hsl(40 40% 98%);
    --bon: hsl(142 55% 28%);
    --alerte: hsl(2 70% 40%);
    --alerte-fond: hsl(4 70% 95%);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.5;
  padding-bottom: calc(var(--hauteur-barre) + env(safe-area-inset-bottom, 0px));
}

/* Éléments de base : rien ne doit tomber sur le style du navigateur. */
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--lampe); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--lampe-vive); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 600; }
code, pre { font-family: var(--police-chiffres); font-size: var(--t-sm); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
summary { cursor: pointer; }

:focus-visible { outline: 2px solid var(--lampe); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.page { min-height: 100dvh; }

.hors-ecran {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.evitement {
  position: absolute; left: var(--e2); top: -4rem;
  background: var(--lampe); color: var(--sur-lampe);
  padding: var(--e2) var(--e3); border-radius: var(--rayon); text-decoration: none;
}
.evitement:focus { top: var(--e2); }

/* ---------------------------------------------------------------- Ossature */

.entete {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--e4) var(--gouttiere) var(--e3);
  border-bottom: 1px solid var(--trait);
}
.entete__nom {
  color: var(--encre); text-decoration: none;
  font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em;
}
.entete__nom:hover { color: var(--encre); }
.entete__nom-fin { color: var(--lampe); }

/* Téléphone : la navigation est une barre en bas, sous le pouce. */
.menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre);
  display: flex;
  background: var(--fond-leve);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.menu__lien {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--hauteur-barre);
  padding: 0 var(--e1);
  color: var(--encre-douce); text-decoration: none; text-align: center;
  font-size: var(--t-sm); font-weight: 550; line-height: 1.15;
  border-top: 2px solid transparent;
  transition: color var(--vite) var(--aisance);
}
.menu__lien:hover { color: var(--encre); }
.menu__lien--actif { color: var(--encre); border-top-color: var(--lampe); }

.contenu {
  width: 100%; max-width: 72rem; margin: 0 auto;
  padding: var(--e6) var(--gouttiere) var(--e8);
}

.pied {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  max-width: 72rem; margin: 0 auto;
  padding: var(--e4) var(--gouttiere) var(--e6);
  border-top: 1px solid var(--trait);
  color: var(--encre-pale); font-size: var(--t-sm);
}
.pied__compte { overflow-wrap: anywhere; }
.pied__sortie { margin: 0; }

/* ---------------------------------------------------------------- Pièces communes */

.titre-page {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  margin-bottom: var(--e4);
}
.titre-page__texte { font-size: var(--t-2xl); }
.titre-page__compte {
  color: var(--encre-pale); font-size: var(--t-sm);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.chapeau { color: var(--encre-douce); max-width: 60ch; margin-bottom: var(--e6); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 var(--e4);
  background: var(--lampe); color: var(--sur-lampe);
  border: 1px solid var(--lampe); border-radius: var(--rayon);
  font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: background-color var(--vite) var(--aisance), border-color var(--vite) var(--aisance);
}
.bouton:hover { background: var(--lampe-vive); border-color: var(--lampe-vive); color: var(--sur-lampe); }
.bouton:active { transform: translateY(1px); }
.bouton--large { width: 100%; min-height: 3rem; font-size: var(--t-lg); }
.bouton--second { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.bouton--second:hover { background: var(--fond-leve); color: var(--encre); border-color: var(--encre-pale); }
.bouton--discret {
  min-height: 2.75rem; padding: 0 var(--e2);
  background: transparent; color: var(--encre-douce); border-color: transparent; font-weight: 500;
}
.bouton--discret:hover { background: transparent; color: var(--encre); border-color: transparent; text-decoration: underline; }
.bouton--danger { background: var(--alerte); border-color: var(--alerte); color: var(--sur-lampe); }
.bouton--danger:hover { background: var(--alerte); border-color: var(--alerte); filter: brightness(1.08); }

.champ {
  display: block; width: 100%; min-height: 2.75rem;
  padding: var(--e2) var(--e3);
  background: var(--fond-creux); color: var(--encre);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  font-size: var(--t-base);
  transition: border-color var(--vite) var(--aisance);
}
.champ::placeholder { color: var(--encre-pale); }
.champ:hover { border-color: var(--encre-pale); }
.champ:focus-visible { outline-offset: 0; border-color: var(--lampe); }
.champ--texte { min-height: 9rem; resize: vertical; line-height: 1.45; }

.erreur { color: var(--alerte); font-size: var(--t-sm); margin-top: var(--e2); }

.avis { margin-bottom: var(--e6); display: grid; gap: var(--e2); }
.avis__ligne {
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--trait-fort); background: var(--fond-leve);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.avis__ligne--success { border-left-color: var(--bon); }
.avis__ligne--error { border-left-color: var(--alerte); background: var(--alerte-fond); }
.avis__ligne--info, .avis__ligne--warning, .avis__ligne--debug { border-left-color: var(--lampe); }

.etat {
  display: inline-block; padding: 0 var(--e2);
  border: 1px solid var(--trait-fort); border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; line-height: 1.6; color: var(--encre-douce);
}
.etat--en_attente { border-color: var(--trait-fort); }
.etat--en_cours { border-color: var(--lampe); color: var(--lampe); }
.etat--erreur { border-color: var(--alerte); color: var(--alerte); }
.etat--annulee { border-style: dashed; }

.vide {
  display: grid; justify-items: start; gap: var(--e3);
  padding: var(--e8) var(--e4);
  border: 1px dashed var(--trait-fort); border-radius: var(--rayon);
}
.vide__titre { font-size: var(--t-lg); font-weight: 600; }
.vide__texte { color: var(--encre-douce); max-width: 48ch; }

/* ---------------------------------------------------------------- Bibliothèque */

.tiroir { margin-bottom: var(--e6); }
.tiroir__ouvrir {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--encre-douce); font-size: var(--t-sm); font-weight: 550; list-style: none;
}
.tiroir__ouvrir::-webkit-details-marker { display: none; }
.tiroir__ouvrir::after { content: "+"; margin-left: var(--e2); font-family: var(--police-chiffres); color: var(--lampe); }
.tiroir[open] .tiroir__ouvrir::after { content: "–"; }
.tiroir__ouvrir:hover { color: var(--encre); }

.filtres {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3);
  padding: var(--e4); margin-top: var(--e2);
  background: var(--fond-leve); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.filtres__recherche { grid-column: 1 / -1; }
.filtres__choix { min-width: 0; }
.filtres__choix:last-of-type { grid-column: 1 / -1; }
.filtres__libelle {
  display: block; margin-bottom: var(--e1);
  color: var(--encre-douce); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.filtres__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e4); }
.filtres__effacer { font-size: var(--t-sm); padding: var(--e3) 0; }

.mur { display: grid; grid-template-columns: 1fr; gap: var(--e6) var(--e4); }

.carte { min-width: 0; }
.carte__image {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--fond-creux);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  transition: border-color var(--vite) var(--aisance);
}
.carte__image:hover { border-color: var(--lampe); }
.carte__vignette { width: 100%; height: 100%; object-fit: cover; }
.carte--verticale .carte__vignette { object-fit: contain; }
.carte__attente {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--encre-pale); font-size: var(--t-sm);
}
.carte__duree {
  position: absolute; right: var(--e2); bottom: var(--e2);
  padding: 0 var(--e2);
  background: hsl(30 6% 4% / 0.82); color: hsl(40 22% 92%);
  border-radius: 3px;
  font-family: var(--police-chiffres); font-size: var(--t-xs); line-height: 1.7;
}
.carte__texte { padding-top: var(--e2); }
.carte__titre {
  display: block; color: var(--encre); text-decoration: none;
  font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.carte__titre:hover { color: var(--lampe); }
.carte__faits {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3);
  margin-top: var(--e1);
  color: var(--encre-pale); font-size: var(--t-sm);
}

/* ---------------------------------------------------------------- Création */

.deux-colonnes { display: grid; gap: var(--e8); }

.formulaire { display: grid; gap: var(--e6); align-content: start; }
.formulaire--court { max-width: 28rem; margin-top: var(--e8); gap: var(--e4); }
.formulaire__titre { font-size: var(--t-lg); }

.rang { display: grid; gap: var(--e2); }
.rang--groupe { gap: var(--e2); }
.rang__libelle { font-weight: 600; }
.rang__aide { color: var(--encre-douce); font-size: var(--t-sm); max-width: 60ch; }

.choix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin-top: var(--e2); }
.choix__option {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: var(--e2) var(--e3);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  text-align: center; font-size: var(--t-sm); line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--vite) var(--aisance), background-color var(--vite) var(--aisance);
}
.choix__option:hover { border-color: var(--encre-pale); }
.choix__option:has(.choix__case:checked) { border-color: var(--lampe); background: var(--fond-leve); }
.choix__option:has(.choix__case:focus-visible) { outline: 2px solid var(--lampe); outline-offset: 2px; }
.choix__case { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix__texte { font-weight: 550; }

.notice {
  padding: var(--e4); align-self: start;
  background: var(--fond-leve); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.notice__titre {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--encre-douce); margin-bottom: var(--e2);
}
.notice__titre:not(:first-child) { margin-top: var(--e6); }
.notice__etapes { display: grid; gap: var(--e2); padding-left: var(--e6); list-style: decimal; color: var(--encre-douce); font-size: var(--t-sm); }
.notice__exemple {
  padding: var(--e3); background: var(--fond-creux);
  border-left: 2px solid var(--lampe);
  font-size: var(--t-sm); color: var(--encre-douce);
}

/* ---------------------------------------------------------------- Détail */

.retour { margin-bottom: var(--e3); font-size: var(--t-sm); }
.retour__lien { color: var(--encre-douce); }
.retour__lien::before { content: "← "; }

.ecran {
  margin: 0 calc(-1 * var(--gouttiere));      /* le lecteur va d'un bord à l'autre du téléphone */
  background: var(--fond-creux);
}
.ecran__video { width: 100%; max-height: 80dvh; background: var(--fond-creux); }
.ecran--vertical .ecran__video { width: auto; margin: 0 auto; }

.suivi {
  display: grid; gap: var(--e2);
  padding: var(--e8) var(--e4);
  background: var(--fond-leve); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.suivi--en_cours { border-color: var(--lampe); }
.suivi--erreur { border-color: var(--alerte); }
.suivi--en_attente, .suivi--annulee, .suivi--terminee { border-color: var(--trait); }
.suivi__etat { font-size: var(--t-xl); font-weight: 650; }
.suivi__detail { color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.suivi__note { color: var(--encre-pale); font-size: var(--t-sm); }

.fiche__titre { font-size: var(--t-xl); margin: var(--e6) 0 var(--e4); overflow-wrap: anywhere; }
.fiche { display: grid; gap: var(--e6); }
.fiche__demande { min-width: 0; }
.fiche__sous-titre {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--encre-douce); margin-bottom: var(--e2);
}
.fiche__texte { color: var(--encre-douce); max-width: 68ch; overflow-wrap: anywhere; }

.faits { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--trait); }
.faits__ligne {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: var(--e2) 0; border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm);
}
.faits__ligne dt { color: var(--encre-pale); }
.faits__ligne dd { text-align: right; font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e4); margin-top: var(--e8); }

.suppression { min-width: 0; }
.suppression__ouvrir {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--encre-douce); font-size: var(--t-sm); list-style: none;
}
.suppression__ouvrir::-webkit-details-marker { display: none; }
.suppression__ouvrir:hover { color: var(--alerte); }
.suppression__corps {
  display: grid; gap: var(--e3); justify-items: start;
  margin-top: var(--e2); padding: var(--e4);
  background: var(--alerte-fond); border: 1px solid var(--alerte); border-radius: var(--rayon);
}
.suppression__texte { font-size: var(--t-sm); }

/* ---------------------------------------------------------------- File d'attente */

.file { border-top: 1px solid var(--trait); }
.file__ligne {
  display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: var(--e3);
  min-height: 3.25rem; padding: var(--e2) 0;
  border-bottom: 1px solid var(--trait);
}
.file__ligne--mienne { background: var(--fond-leve); padding-left: var(--e3); padding-right: var(--e3); border-left: 2px solid var(--lampe); }
.file__rang { font-family: var(--police-chiffres); font-size: var(--t-sm); color: var(--encre-douce); }
.file__titre { min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.file__titre--autre { color: var(--encre-pale); font-weight: 400; }
.file__qui { color: var(--lampe); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------------------------------------------------------------- Comptes */

.lien-cree {
  display: grid; gap: var(--e2);
  padding: var(--e4); margin-bottom: var(--e6);
  background: var(--fond-leve); border: 1px solid var(--lampe); border-radius: var(--rayon);
}
.lien-cree__titre { font-weight: 600; }
.lien-cree__adresse { font-family: var(--police-chiffres); font-size: var(--t-sm); }
.lien-cree__aide { color: var(--encre-douce); font-size: var(--t-sm); }

.tableau { font-size: var(--t-sm); }
.tableau th {
  padding: var(--e2) var(--e2) var(--e2) 0;
  color: var(--encre-douce); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--trait-fort);
}
.tableau td { padding: var(--e2) var(--e2) var(--e2) 0; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau__role { color: var(--lampe); font-size: var(--t-xs); font-weight: 600; }
.tableau__action { text-align: right; padding-right: 0; }

/* ---------------------------------------------------------------- Seuil (pages sans session) */

.seuil { display: grid; gap: var(--e4); justify-items: start; max-width: 34rem; padding: var(--e12) 0 var(--e8); }
.seuil__titre { font-size: var(--t-3xl); letter-spacing: -0.03em; }
.seuil__texte { color: var(--encre-douce); font-size: var(--t-lg); }
.page--acces { padding-bottom: 0; }

/* ================================================================ Écrans plus larges */

@media (min-width: 40rem) {
  :root { --gouttiere: var(--e6); }
  .mur { grid-template-columns: repeat(2, 1fr); }
  .filtres { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; }
  .filtres__recherche, .filtres__choix:last-of-type, .filtres__actions { grid-column: auto; }
  .ecran { margin: 0; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--trait); }
  .fiche { grid-template-columns: 3fr 2fr; gap: var(--e8); }
  .bouton--large { width: auto; min-width: 16rem; }
}

@media (min-width: 52rem) {
  /* Bureau : la navigation remonte dans l'en-tête. */
  body { padding-bottom: 0; }
  .entete { align-items: center; padding-top: var(--e3); padding-bottom: 0; }
  .menu { position: static; background: transparent; border-top: 0; padding-bottom: 0; gap: var(--e6); }
  .menu__lien {
    flex: 0 0 auto; min-height: 3rem; padding: 0;
    border-top: 0; border-bottom: 2px solid transparent; font-size: var(--t-base);
  }
  .menu__lien--actif { border-bottom-color: var(--lampe); }
  .deux-colonnes { grid-template-columns: 3fr 2fr; }
  .titre-page__texte { font-size: var(--t-3xl); }
}

@media (min-width: 64rem) {
  .mur { grid-template-columns: repeat(3, 1fr); }
}