/* Palette PurePro : bleu marine de la marque, goutte d'eau en accent. */

:root {
  --marine: #0c2b54;
  --marine-clair: #16457f;
  --goutte: #1b98da;
  --fond: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --texte: #14273f;
  --gris: #5b6b81;
  --bord: #dbe3ee;
  --accent-pale: #e6f2fa;
  --primaire: #0c5ca1;
  --primaire-actif: #0a4a83;
  --sur-primaire: #ffffff;
  --erreur-fond: #fdecea;
  --erreur-texte: #96271b;
  --erreur-bord: #f4cdc8;
  --alerte: #b3620f;
  --ombre: 0 1px 2px rgba(12, 43, 84, .05);
  color-scheme: light;
  --rayon: 12px;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* alias conserves pour la page d'administration */
  --encre: var(--marine); --blanc: var(--surface); --papier: var(--fond);
  --vert: var(--primaire); --vert-fonce: var(--primaire-actif); --vert-pale: var(--accent-pale);
}

/* Le theme "systeme" est resolu en clair ou sombre par le script, qui ecoute
   aussi les changements de reglage du telephone. */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #071324;
  --surface: #0f2038;
  --surface-2: #142943;
  --texte: #e7eef7;
  --gris: #93a6bd;
  --bord: #22385a;
  --accent-pale: #12314c;
  --primaire: #1b98da;
  --primaire-actif: #3fabe6;
  --sur-primaire: #ffffff;
  --erreur-fond: #3a1a17;
  --erreur-texte: #f4b3aa;
  --erreur-bord: #5c2822;
  --alerte: #e0973f;
  --ombre: none;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Le geste « tirer vers le bas » rechargeait toute la page : dans une
     application installee, cela relance l'ecran de demarrage natif d'Android
     pendant plusieurs secondes. L'actualisation passe par le bouton dedie. */
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  font-family: var(--police);
  background: var(--fond);
  color: var(--texte);
  font-size: 16px;
  line-height: 1.5;
}

.enveloppe { max-width: 620px; margin: 0 auto; padding: 0 16px 72px; overflow-x: hidden; }

/* ---------------------------------------------------------------- bandeau */

.bandeau {
  background: var(--marine);
  color: #ffffff;
  padding: 14px 16px;
  position: sticky; top: 0; z-index: 10;
}
.bandeau-inner {
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marque { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.marque img { height: 26px; width: auto; max-width: 100%; display: block; }
.marque .repli { font-size: 19px; font-weight: 700; letter-spacing: .04em; color: #fff; }
/* Le logo porte deja la signature de la marque : sur petit ecran, on masque
   le sous-titre plutot que de le laisser passer sous les boutons. */
.marque .sous { display: none; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9dc4e2; white-space: nowrap; }
@media (min-width: 620px) { .marque .sous { display: inline; } }
.actions-bandeau { display: flex; gap: 8px; flex-shrink: 0; }
.bandeau button {
  white-space: nowrap;
  background: none; border: 1px solid rgba(255,255,255,.28); color: #dbe9f6;
  padding: 7px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.bandeau button:hover { background: rgba(255,255,255,.1); }

/* ------------------------------------------------------------------ cartes */

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 22px 20px;
  margin-top: 18px;
  box-shadow: var(--ombre);
}
.carte.danger { border-color: var(--erreur-bord); }
h1 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 12px; }
.intro { color: var(--gris); margin: 0 0 18px; font-size: 15px; }

/* ------------------------------------------------------------- formulaires */

label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 5px; }
label .facultatif { font-weight: 400; color: var(--gris); }

input, textarea, select {
  width: 100%; max-width: 100%; font-family: inherit; font-size: 16px;
  padding: 11px 12px;
  border: 1px solid var(--bord); border-radius: 9px;
  background: var(--surface-2); color: var(--texte);
}
input:focus, textarea:focus, select:focus, button:focus-visible, .zone-photos:focus-visible {
  outline: 2px solid var(--goutte); outline-offset: 1px; border-color: var(--goutte);
}
textarea { min-height: 130px; resize: vertical; }
.duo { display: flex; gap: 12px; }
.duo > div { flex: 1; min-width: 0; }
.aide { font-size: 12px; color: var(--gris); margin-top: 5px; }

.principal {
  width: 100%; margin-top: 22px;
  background: var(--primaire); color: var(--sur-primaire);
  border: none; border-radius: 9px;
  padding: 15px; font-size: 16px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.principal:hover { background: var(--primaire-actif); }
.principal:disabled { opacity: .55; cursor: default; }
.secondaire {
  width: 100%; margin-top: 14px;
  background: transparent; color: var(--erreur-texte);
  border: 1px solid var(--erreur-bord); border-radius: 9px;
  padding: 13px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.lien {
  background: none; border: none; color: var(--goutte); font-family: inherit;
  font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0;
}
.centre { text-align: center; margin-top: 16px; }
.liens-bas { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------- segments */

.segments { display: flex; gap: 6px; background: var(--surface-2); padding: 4px; border-radius: 10px; border: 1px solid var(--bord); }
.segments button {
  flex: 1; padding: 10px 6px; border: none; background: none; border-radius: 7px;
  font-family: inherit; font-size: 14px; color: var(--gris); cursor: pointer;
}
.segments button[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); font-weight: 600; }

/* ------------------------------------------------------------ rattachement */

.rattachement {
  background: var(--accent-pale); border-radius: 10px; padding: 13px 15px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-inline-start: 3px solid var(--goutte);
}
.rattachement .etiquette { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.rattachement strong { font-size: 16px; }

/* ----------------------------------------------------------------- photos */

.zone-photos {
  border: 1.5px dashed var(--bord); border-radius: 10px; padding: 20px;
  text-align: center; cursor: pointer; background: var(--surface-2);
}
.zone-photos:hover { border-color: var(--goutte); }
.zone-photos p { margin: 0; font-size: 14px; color: var(--gris); }
.zone-photos b { display: block; font-size: 15px; margin-bottom: 3px; }

.jauge { height: 4px; background: var(--bord); border-radius: 2px; margin: 12px 0 6px; overflow: hidden; }
.jauge div { height: 100%; background: var(--goutte); width: 0; transition: width .25s ease; }
.compteur { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris); }
.compteur b { color: var(--texte); font-variant-numeric: tabular-nums; }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 12px; }
.vignette { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--accent-pale); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette button {
  position: absolute; top: 3px; inset-inline-end: 3px;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(7, 19, 36, .8); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}

/* --------------------------------------------------------------- messages */

.message { padding: 13px 15px; border-radius: 9px; font-size: 14px; margin-top: 16px; }
.message.erreur { background: var(--erreur-fond); color: var(--erreur-texte); border: 1px solid var(--erreur-bord); }
.message.info { background: var(--accent-pale); color: var(--texte); border: 1px solid var(--bord); }
.message .lien { color: inherit; }

/* ----------------------------------------------------------------- accuse */

.recu { text-align: center; padding: 34px 20px; }
.reference {
  display: inline-block; font-size: 24px; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--goutte); border-bottom: 2px solid var(--goutte);
  padding: 10px 20px; margin: 8px 0 18px;
}

/* ------------------------------------------------------------- historique */

.ligne { border-top: 1px solid var(--bord); padding: 14px 0; }
.ligne:first-of-type { border-top: none; }
.ligne-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ligne-tete b { font-size: 14px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ligne p { margin: 6px 0 0; font-size: 14px; color: var(--gris); }
.statut { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.statut.recu { background: var(--accent-pale); color: var(--texte); }
.statut.en_cours { background: rgba(179, 98, 15, .14); color: var(--alerte); }
.statut.traite { background: rgba(27, 152, 218, .16); color: var(--goutte); }
.statut.refuse { background: var(--erreur-fond); color: var(--erreur-texte); }

.vide { text-align: center; color: var(--gris); font-size: 14px; padding: 22px 0; }

/* ------------------------------------------------------------- parametres */

.rangee {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--bord); font-size: 15px;
}
.rangee:first-child { border-top: none; }
.rangee a { color: var(--goutte); text-decoration: none; }
.rangee a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- divers */

[dir="rtl"] .reference { letter-spacing: normal; }

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

/* ------------------------------------------------------------------ logo */
/* Le bandeau est toujours bleu marine : il porte la version blanche.
   Sur fond de carte, le logo passe du bleu au blanc avec le theme. */
.logo-auto { display: block; height: 34px; width: auto; margin: 0 auto 18px; }
.logo-auto.blanc { display: none; }
:root[data-theme="sombre"] .logo-auto.couleur { display: none; }
:root[data-theme="sombre"] .logo-auto.blanc { display: block; }

/* ----------------------------------------------------------------- suivi */
.fil { margin-top: 4px; }
.bulle {
  border: 1px solid var(--bord); border-radius: 12px;
  padding: 13px 15px; margin-top: 12px; background: var(--surface-2);
}
.bulle.pro { background: var(--accent-pale); border-color: var(--goutte); }
.bulle-tete {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--gris); margin-bottom: 6px;
}
.bulle-tete b { color: var(--texte); font-size: 13px; }
.bulle p { margin: 0; font-size: 15px; white-space: pre-wrap; }
.bulle .grille { margin-top: 10px; }
.bulle .grille img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.ligne.cliquable { cursor: pointer; }
.ligne.cliquable:hover .ligne-tete b { text-decoration: underline; }
.chevron { color: var(--goutte); font-size: 13px; }

/* ------------------------------------------------------ ecran de demarrage */
/* Android affiche d'abord une image fixe, il ne sait pas animer. L'animation
   prend donc le relais ici : la goutte puis la signature se dessinent en
   3,4 s. Tout est dans le SVG, qui s'anime seul meme si le JavaScript n'a
   pas encore demarre. Deux versions, une par theme. */

.demarrage {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  animation: dem-sortie .5s ease 3.5s forwards;
}
:root[data-theme="sombre"] .demarrage { background: #0d1117; }
@keyframes dem-sortie { to { opacity: 0; visibility: hidden; } }

.demarrage img { width: min(56vw, 212px); height: auto; display: block; }
.demarrage .sombre { display: none; }
:root[data-theme="sombre"] .demarrage .clair { display: none; }
:root[data-theme="sombre"] .demarrage .sombre { display: block; }

@media (prefers-reduced-motion: reduce) {
  .demarrage { animation: dem-sortie .3s ease .4s forwards; }
}

/* ------------------------------------------------- indicateur de compte */
.badge-admin {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}

/* ------------------------------------------------- bouton d'actualisation */
.bandeau button.icone {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
}
.bandeau button.icone.tourne { animation: pivot .7s linear; }
@keyframes pivot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bandeau button.icone.tourne { animation: none; } }