/* ═══════════════════════════════════════════════════════════════
   ROVIRA NET — Feuille de style v4

   DIRECTION ARTISTIQUE
   Le métier, c'est la surface propre : le verre, le reflet, la trace
   que la raclette efface. Toute l'esthétique vient de là.

   · Matière      surfaces en verre dépoli, reflets rasants, profondeur
   · Signature    le coup de raclette — une lumière qui balaie l'écran
   · Identité     la senyera en relief, quatre lames de sang et d'or
   · Lumière      éclairage haut-gauche constant, ombres portées cohérentes

   CONTRAINTES TENUES
   L'application s'utilise dehors, en plein soleil, parfois avec des
   gants. Le décor ne prend jamais le pas sur la lisibilité : contrastes
   soutenus, zones tactiles de 52 px, aucune animation qui retarde une
   action. Tout est en CSS — pas une bibliothèque, pas un fichier chargé,
   pas une image. Un vieux téléphone suit sans peiner.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Identité ─────────────────────────────────────────────── */
  --sang:        #B2121B;
  --sang-vif:    #D0202A;
  --sang-nuit:   #6E0A11;
  --sang-voile:  rgba(178, 18, 27, .09);
  --or:          #F2C300;
  --or-vif:      #FFD429;
  --or-voile:    rgba(242, 195, 0, .13);

  /* ── Neutres chauds ───────────────────────────────────────── */
  --nuit:        #14100E;
  --encre:       #1C1613;
  --gris:        #6B615B;
  --gris-clair:  #9A8F88;
  --fond:        #F4F0EA;
  --trait:       rgba(28, 22, 19, .10);

  /* ── États ────────────────────────────────────────────────── */
  --vert:        #157A52;
  --vert-voile:  rgba(21, 122, 82, .11);
  --ambre:       #8A5A10;
  --ambre-voile: rgba(212, 150, 20, .15);
  --bleu:        #23568F;
  --bleu-voile:  rgba(35, 86, 143, .10);

  /* ── Verre ────────────────────────────────────────────────── */
  --verre:       rgba(255, 255, 255, .72);
  --verre-dense: rgba(255, 255, 255, .90);
  --verre-bord:  rgba(255, 255, 255, .85);

  /* ── Profondeur : une seule source de lumière, en haut à gauche ── */
  --relief-1: 0 1px 2px rgba(28, 22, 19, .05),
              0 2px 6px rgba(28, 22, 19, .04);
  --relief-2: 0 2px 4px rgba(28, 22, 19, .06),
              0 8px 20px rgba(28, 22, 19, .07),
              inset 0 1px 0 rgba(255, 255, 255, .7);
  --relief-3: 0 4px 10px rgba(28, 22, 19, .09),
              0 18px 44px rgba(28, 22, 19, .12),
              inset 0 1px 0 rgba(255, 255, 255, .8);
  --relief-sang: 0 3px 8px rgba(110, 10, 17, .28),
                 0 14px 30px rgba(110, 10, 17, .22),
                 inset 0 1px 0 rgba(255, 255, 255, .22);

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;

  --senyera: repeating-linear-gradient(
    90deg, var(--or) 0 11.11%, var(--sang) 11.11% 22.22%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

/* ── Décor de fond : lumière diffuse, comme derrière une vitre ── */
body {
  margin: 0;
  color: var(--encre);
  font: 16px/1.55 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background:
    radial-gradient(120% 60% at 8% -10%,  rgba(242, 195, 0, .15) 0%, transparent 52%),
    radial-gradient(90% 50% at 100% -4%,  rgba(178, 18, 27, .10) 0%, transparent 46%),
    var(--fond);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Grain très fin : évite l'aspect plastique des dégradés purs */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

#app { position: relative; z-index: 2; max-width: 540px; margin: 0 auto; min-height: 100vh; }

/* ═══════════════════════════════════════════════════════════════
   Bandeau — panneau sombre, lumière rasante
   ═══════════════════════════════════════════════════════════════ */
.entete {
  position: relative; overflow: hidden;
  background:
    linear-gradient(158deg, #241B17 0%, var(--nuit) 46%, #0D0908 100%);
  color: #fff;
  padding: 20px 18px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 10px 30px rgba(20, 16, 14, .22);
}
/* Reflet oblique : la lumière sur une vitre */
.entete::before {
  content: ''; position: absolute; inset: -50% -20%;
  background: linear-gradient(103deg,
    transparent 38%, rgba(255, 255, 255, .07) 47%,
    rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .05) 54%, transparent 62%);
  transform: translateX(-18%);
  pointer-events: none;
}
/* Les quatre lames de la senyera, en relief */
.entete::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--senyera);
  box-shadow: 0 -1px 6px rgba(242, 195, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}

.logo { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.logo-raclette {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(242, 195, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .3);
}
.logo-marque {
  font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.logo-marque span {
  background: linear-gradient(180deg, var(--or-vif), #D9A800);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-metier {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: 2.6px; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); margin-top: 5px;
}
.qui { font-size: 12px; color: rgba(255, 255, 255, .55); text-align: right;
       line-height: 1.4; position: relative; z-index: 1; }

.corps { padding: 20px 16px 48px; }

/* ═══════════════════════════════════════════════════════════════
   Surfaces de verre
   ═══════════════════════════════════════════════════════════════ */
.carte {
  position: relative;
  background: var(--verre);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--verre-bord);
  border-radius: var(--r-m);
  padding: 18px;
  margin-bottom: 13px;
  box-shadow: var(--relief-2);
}
/* Arête supérieure éclairée : donne l'épaisseur */
.carte::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  border-radius: 1px;
}
.carte.plate { box-shadow: var(--relief-1); }
.carte.vert {
  background: linear-gradient(150deg, rgba(255, 249, 226, .95), rgba(253, 244, 214, .82));
  border-color: rgba(242, 195, 0, .3);
}
.carte.bleu {
  background: linear-gradient(150deg, rgba(238, 244, 252, .95), rgba(231, 239, 249, .8));
  border-color: rgba(35, 86, 143, .18);
}
/* Carte du passage en cours : bloc sang, en avant-plan */
.carte.actif {
  background: linear-gradient(152deg, var(--sang-vif) 0%, var(--sang) 45%, var(--sang-nuit) 100%);
  border-color: transparent; color: #fff;
  box-shadow: var(--relief-sang);
  overflow: hidden;
}
.carte.actif::after {
  content: ''; position: absolute; inset: -60% -30%;
  background: linear-gradient(100deg, transparent 40%,
    rgba(255, 255, 255, .16) 49%, rgba(255, 255, 255, .05) 56%, transparent 64%);
  pointer-events: none;
}

h1 { font-size: 23px; margin: 0 0 5px; letter-spacing: -.5px; font-weight: 800; }
h2 { font-size: 18px; margin: 26px 0 11px; letter-spacing: -.3px; font-weight: 750; }
h3 { font-size: 16.5px; margin: 0 0 11px; font-weight: 700; letter-spacing: -.2px; }
p  { margin: 0 0 10px; }

.etiquette {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--gris); margin-bottom: 7px;
}
.discret { color: var(--gris); font-size: 13.5px; }
.centre  { text-align: center; }

/* ── Puces d'état, en léger relief ──────────────────────────── */
.puce {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(28, 22, 19, .06);
}
.puce.ok     { background: var(--vert-voile);  color: var(--vert);  border: 1px solid rgba(21, 122, 82, .2); }
.puce.attn   { background: var(--ambre-voile); color: var(--ambre); border: 1px solid rgba(212, 150, 20, .3); }
.puce.alerte { background: var(--sang-voile);  color: var(--sang);  border: 1px solid rgba(178, 18, 27, .22); }
.puce.info   { background: var(--bleu-voile);  color: var(--bleu);  border: 1px solid rgba(35, 86, 143, .18); }

/* ═══════════════════════════════════════════════════════════════
   Boutons — volumes, pas des rectangles plats
   ═══════════════════════════════════════════════════════════════ */
button, .bouton {
  position: relative; overflow: hidden;
  font: inherit; font-weight: 700; letter-spacing: -.1px;
  border: none; border-radius: 14px;
  padding: 15px 20px; min-height: 52px; width: 100%;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--sang-vif) 0%, var(--sang) 55%, #9C1017 100%);
  box-shadow: 0 2px 5px rgba(110, 10, 17, .28),
              0 10px 22px rgba(110, 10, 17, .20),
              inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .13s, filter .13s;
}
/* Le coup de raclette : une lumière balaie le bouton au survol */
button::after {
  content: ''; position: absolute; top: -60%; bottom: -60%; width: 45%;
  left: -70%;
  background: linear-gradient(100deg, transparent,
    rgba(255, 255, 255, .35), transparent);
  transform: skewX(-16deg);
  transition: left .5s cubic-bezier(.3,.8,.3,1);
  pointer-events: none;
}
button:hover::after { left: 130%; }
button:active {
  transform: translateY(1px) scale(.992);
  box-shadow: 0 1px 3px rgba(110, 10, 17, .3), inset 0 2px 5px rgba(0, 0, 0, .18);
}
button:disabled { opacity: .4; filter: grayscale(.35); cursor: default; transform: none; }
button:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

button.creux {
  background: var(--verre-dense); color: var(--sang);
  border: 1.5px solid rgba(178, 18, 27, .3);
  box-shadow: var(--relief-1), inset 0 1px 0 rgba(255, 255, 255, .9);
}
button.creux:hover { border-color: var(--sang); box-shadow: var(--relief-2); }
button.ambre {
  background: linear-gradient(180deg, #C8871C, #8A5A10);
  box-shadow: 0 2px 5px rgba(138, 90, 16, .3), 0 10px 22px rgba(138, 90, 16, .18),
              inset 0 1px 0 rgba(255, 255, 255, .3);
}
button.rouge { background: linear-gradient(180deg, var(--sang), var(--sang-nuit)); }
button.gris {
  background: rgba(255, 255, 255, .6); color: var(--gris);
  border: 1.5px solid var(--trait); box-shadow: var(--relief-1);
}
button.petit { min-height: 42px; padding: 9px 15px; font-size: 13.5px;
               width: auto; border-radius: 11px; }

.rangee { display: flex; gap: 9px; flex-wrap: wrap; }
.rangee > button { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   Champs — creusés dans la surface
   ═══════════════════════════════════════════════════════════════ */
input, textarea, select {
  font: inherit; width: 100%;
  padding: 14px 14px; margin-bottom: 13px;
  border: 1.5px solid var(--trait); border-radius: 13px;
  background: rgba(255, 255, 255, .82);
  color: var(--encre); min-height: 52px;
  box-shadow: inset 0 2px 5px rgba(28, 22, 19, .045);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; background: #fff;
  border-color: var(--sang);
  box-shadow: inset 0 2px 4px rgba(28, 22, 19, .03),
              0 0 0 4px rgba(178, 18, 27, .11);
}
input::placeholder, textarea::placeholder { color: var(--gris-clair); }
textarea { min-height: 130px; resize: vertical; }
label.case { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
label.case input { width: auto; min-height: auto; margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   Pavé du code PIN — touches en relief
   ═══════════════════════════════════════════════════════════════ */
.points { display: flex; justify-content: center; gap: 13px; margin: 26px 0 18px; }
.point {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(178, 18, 27, .4); background: transparent;
  transition: transform .2s cubic-bezier(.3,1.5,.5,1), background .2s, box-shadow .2s;
}
.point.plein {
  background: linear-gradient(180deg, var(--sang-vif), var(--sang));
  border-color: var(--sang);
  box-shadow: 0 2px 8px rgba(178, 18, 27, .45);
  transform: scale(1.18);
}
.point.faux { border-color: var(--sang-nuit); animation: secousse .45s; }
@keyframes secousse {
  0%,100% { transform: translateX(0) }
  20% { transform: translateX(-6px) } 40% { transform: translateX(6px) }
  60% { transform: translateX(-4px) } 80% { transform: translateX(4px) }
}

.pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
        max-width: 310px; margin: 0 auto; }
.pave button {
  background: var(--verre-dense); color: var(--encre);
  border: 1px solid var(--verre-bord);
  font-size: 26px; font-weight: 700; min-height: 66px; padding: 0;
  border-radius: 18px;
  box-shadow: var(--relief-2);
}
.pave button::after { display: none; }
.pave button:active { box-shadow: inset 0 3px 8px rgba(28, 22, 19, .12); }

/* ═══════════════════════════════════════════════════════════════
   Onglets — pilule glissante
   ═══════════════════════════════════════════════════════════════ */
.onglets {
  display: flex; gap: 7px; margin-bottom: 18px;
  overflow-x: auto; padding: 5px; scrollbar-width: none;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--verre-bord);
  border-radius: 16px;
  box-shadow: var(--relief-1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.onglets::-webkit-scrollbar { display: none; }
.onglets button {
  flex: 0 0 auto; width: auto; min-height: 42px; padding: 10px 17px;
  font-size: 14px; font-weight: 650; border-radius: 12px;
  background: transparent; color: var(--gris); box-shadow: none;
}
.onglets button::after { display: none; }
.onglets button.on {
  background: linear-gradient(170deg, #2C221D, var(--nuit));
  color: #fff;
  box-shadow: 0 2px 6px rgba(20, 16, 14, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ═══════════════════════════════════════════════════════════════
   Photos — tirages posés sur la surface
   ═══════════════════════════════════════════════════════════════ */
.photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.photos img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 13px; border: 2px solid #fff;
  background: var(--fond);
  box-shadow: var(--relief-2);
  transition: transform .18s cubic-bezier(.2,.8,.3,1.1), box-shadow .18s;
}
.photos img:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--relief-3); }

/* ═══════════════════════════════════════════════════════════════
   Messages
   ═══════════════════════════════════════════════════════════════ */
.msg {
  border-radius: 15px; padding: 14px 16px; font-size: 14.5px;
  font-weight: 600; margin-bottom: 13px;
  box-shadow: var(--relief-1);
  animation: surgit .35s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes surgit {
  from { opacity: 0; transform: translateY(-8px) }
  to   { opacity: 1; transform: none }
}
.msg.info { background: linear-gradient(150deg, rgba(238,244,252,.95), rgba(228,238,250,.85));
            color: var(--bleu); border: 1px solid rgba(35,86,143,.18); }
.msg.attn { background: linear-gradient(150deg, rgba(253,246,228,.96), rgba(250,240,212,.86));
            color: var(--ambre); border: 1px solid rgba(212,150,20,.3); }
.msg.ok   { background: linear-gradient(150deg, rgba(232,246,239,.96), rgba(222,241,232,.86));
            color: var(--vert); border: 1px solid rgba(21,122,82,.2); }
/* L'alerte est un aplat sombre : jamais confondue avec un bouton rouge */
.msg.err  {
  background: linear-gradient(150deg, #33161A, #200E11);
  color: #FFE2DE; border-left: 4px solid var(--or);
  box-shadow: 0 4px 14px rgba(32, 14, 17, .3);
}

/* Pastille du passage en cours */
.pastille {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF0AE, var(--or));
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 0 16px rgba(242, 195, 0, .8);
  animation: souffle 2.6s ease-in-out infinite;
}
@keyframes souffle {
  0%,100% { box-shadow: 0 0 0 5px rgba(255,255,255,.22), 0 0 16px rgba(242,195,0,.8) }
  50%     { box-shadow: 0 0 0 11px rgba(255,255,255,.06), 0 0 26px rgba(242,195,0,.45) }
}

.entre { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.charge { text-align: center; color: var(--gris); padding: 48px 0; }

/* ═══════════════════════════════════════════════════════════════
   ÉCRAN D'ACCUEIL — le drapeau en relief
   ═══════════════════════════════════════════════════════════════ */
.bienvenue { padding: 34px 4px 26px; position: relative; }

/* Quatre lames de sang et d'or, dans l'espace */
.enseigne {
  position: relative; height: 74px; margin-bottom: 24px;
  perspective: 620px;
}
.enseigne-lames {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(16deg) rotateY(-19deg) rotateZ(-3deg);
  animation: flotte 9s ease-in-out infinite;
}
@keyframes flotte {
  0%,100% { transform: rotateX(16deg) rotateY(-19deg) rotateZ(-3deg) }
  50%     { transform: rotateX(11deg) rotateY(-11deg) rotateZ(-1deg) translateY(-3px) }
}
.lame {
  position: absolute; top: 0; height: 100%; width: 15px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--sang-vif), var(--sang) 55%, var(--sang-nuit));
  box-shadow: 0 8px 20px rgba(110, 10, 17, .32),
              inset 0 1px 0 rgba(255, 255, 255, .3),
              inset -2px 0 4px rgba(0, 0, 0, .18);
}
.lame.or {
  background: linear-gradient(180deg, var(--or-vif), var(--or) 55%, #C79E00);
  box-shadow: 0 8px 20px rgba(199, 158, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .55),
              inset -2px 0 4px rgba(0, 0, 0, .12);
}
.lame:nth-child(1) { left:   0px; transform: translateZ(30px); }
.lame:nth-child(2) { left:  20px; transform: translateZ(22px); }
.lame:nth-child(3) { left:  40px; transform: translateZ(14px); }
.lame:nth-child(4) { left:  60px; transform: translateZ(6px); }
.lame:nth-child(5) { left:  80px; transform: translateZ(-2px); }
.lame:nth-child(6) { left: 100px; transform: translateZ(-10px); }
.lame:nth-child(7) { left: 120px; transform: translateZ(-18px); }
.lame:nth-child(8) { left: 140px; transform: translateZ(-26px); }

.bienvenue-marque {
  font-size: 11.5px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--sang); margin-bottom: 13px;
}
.bienvenue h1 {
  font-size: 35px; line-height: 1.1; letter-spacing: -1.4px;
  font-weight: 800; margin: 0 0 13px; max-width: 12ch;
  background: linear-gradient(168deg, var(--encre) 30%, #4A3B33);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bienvenue p { font-size: 16px; color: var(--gris); margin: 0; max-width: 34ch; }

.choix-liste { display: flex; flex-direction: column; gap: 13px; }

/* Cartes de choix : verre épais, léger basculement au survol */
.choix {
  display: flex; align-items: center; gap: 17px;
  width: 100%; text-align: left;
  min-height: 100px; padding: 19px;
  background: var(--verre-dense);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: var(--encre);
  border: 1px solid var(--verre-bord); border-radius: var(--r-l);
  box-shadow: var(--relief-2);
  position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.3,1.05), box-shadow .22s;
}
/* Tranche sang et or, en épaisseur */
.choix::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(180deg,
    var(--or) 0 14px, var(--sang) 14px 28px);
  box-shadow: 2px 0 8px rgba(178, 18, 27, .22);
  z-index: 1;
}
.choix:hover { transform: translateY(-3px); box-shadow: var(--relief-3); }
.choix:active { transform: translateY(0) scale(.99); }

.choix-picto {
  flex: 0 0 auto; width: 58px; height: 58px;
  display: grid; place-items: center; border-radius: 17px;
  background: linear-gradient(158deg, rgba(178,18,27,.13), rgba(178,18,27,.05));
  border: 1px solid rgba(178, 18, 27, .14);
  color: var(--sang); margin-left: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.choix-picto svg { width: 32px; height: 32px;
                   filter: drop-shadow(0 2px 3px rgba(178, 18, 27, .22)); }

.choix-texte { flex: 1; min-width: 0; }
.choix-titre { display: block; font-size: 19px; font-weight: 780;
               letter-spacing: -.4px; margin-bottom: 4px; }
.choix-sous  { display: block; font-size: 13.5px; font-weight: 400;
               line-height: 1.45; color: var(--gris); }
.fleche { width: 21px; height: 21px; flex: 0 0 auto; color: rgba(28,22,19,.2);
          transition: transform .22s, color .22s; }
.choix:hover .fleche { color: var(--sang); transform: translateX(4px); }

/* L'espace salarié, ouvert vingt fois par jour, porte l'accent */
.choix.principal {
  background: linear-gradient(158deg, #2A201B 0%, var(--nuit) 60%, #0B0806 100%);
  color: #fff; border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 4px 12px rgba(20,16,14,.3), 0 20px 44px rgba(20,16,14,.24),
              inset 0 1px 0 rgba(255,255,255,.1);
}
.choix.principal::after {
  content: ''; position: absolute; inset: -50% -20%;
  background: linear-gradient(102deg, transparent 42%,
    rgba(255,255,255,.09) 50%, transparent 58%);
  pointer-events: none;
}
.choix.principal .choix-picto {
  background: linear-gradient(158deg, rgba(242,195,0,.22), rgba(242,195,0,.06));
  border-color: rgba(242, 195, 0, .3); color: var(--or);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.choix.principal .choix-sous { color: rgba(255,255,255,.5); }
.choix.principal .fleche { color: var(--or); }

/* ── Apparition en cascade au chargement ────────────────────── */
.bienvenue, .choix-liste > .choix, .carte, .msg { animation-fill-mode: both; }
.choix-liste > .choix { animation: monte .5s cubic-bezier(.2,.85,.3,1) both; }
.choix-liste > .choix:nth-child(1) { animation-delay: .05s }
.choix-liste > .choix:nth-child(2) { animation-delay: .13s }
.choix-liste > .choix:nth-child(3) { animation-delay: .21s }
@keyframes monte {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: none }
}

/* ═══════════════════════════════════════════════════════════════
   Grand écran
   ═══════════════════════════════════════════════════════════════ */
.grille { display: flex; flex-direction: column; gap: 13px; }
.grille > .carte { margin-bottom: 0; }

@media (min-width: 900px) {
  #app.espace-admin, #app.espace-client { max-width: 1160px; }
  #app.espace-admin .entete, #app.espace-client .entete { padding: 24px 34px 22px; }
  #app.espace-admin .corps, #app.espace-client .corps { padding: 30px 34px 70px; }
  #app.espace-admin .logo-marque, #app.espace-client .logo-marque { font-size: 23px; }

  #app.espace-admin .grille, #app.espace-client .grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px; align-items: start;
  }
  #app.espace-admin .grille-serree, #app.espace-client .grille-serree {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 11px;
  }
  #app.espace-admin > .corps > .carte:not(.plate),
  #app.espace-admin > .corps > form,
  #app.espace-admin > .corps > button { max-width: 640px; }

  #app.espace-admin .onglets button { min-height: 46px; padding: 12px 22px; font-size: 15px; }
  #app.espace-admin .photos img, #app.espace-client .photos img { width: 104px; height: 104px; }
  #app.espace-accueil { max-width: 580px; }
  .bienvenue h1 { font-size: 42px; }
  .enseigne { height: 88px; }
}
@media (min-width: 1400px) {
  #app.espace-admin, #app.espace-client { max-width: 1380px; }
}
@media (hover: hover) and (min-width: 900px) {
  .grille > .carte { transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s; }
  .grille > .carte:hover { transform: translateY(-2px); box-shadow: var(--relief-3); }
}

/* ── Repli si le verre dépoli n'est pas géré ────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .carte, .choix, .onglets { background: rgba(255, 255, 255, .95); }
}

/* ── Mouvement réduit : on retire tout, on garde la matière ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .enseigne-lames { transform: rotateX(14deg) rotateY(-16deg); }
}

/* ═══════════════════════════════════════════════════════════════
   Affiches QR imprimables — l'encre plutôt que la lumière
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   Impression d'une affiche QR

   Pendant l'aperçu, le document porte la classe « mode-affiche ».
   Tout le reste est alors masqué : sans cela, l'imprimante sortait
   l'affiche, puis la liste des chantiers, puis la barre de recherche,
   sur des pages supplémentaires.
   ═══════════════════════════════════════════════════════════════ */
@media print {
  body::before, #decor, .entete, .onglets, button, .noimpression {
    display: none !important;
  }
  body, #app { background: #fff !important; }
  #app { max-width: none !important; min-height: 0 !important; }

  /* Seule l'affiche sort de l'imprimante */
  body.mode-affiche #app > *:not(.affiche) { display: none !important; }

  .affiche {
    border: 3px solid var(--encre); border-radius: 0;
    margin: 0; padding: 16mm 14mm;
    box-shadow: none; background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    /* Aucun saut forcé : une seule affiche ne doit pas produire
       une deuxième page vide. */
    page-break-after: auto; break-after: auto;
    page-break-inside: avoid; break-inside: avoid;
  }
  .affiche h1 { font-size: 26pt; margin: 0 0 6mm; }
  .affiche svg { width: 95mm !important; height: 95mm !important; }

  @page { size: A4; margin: 10mm; }
}
.affiche {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-l);
  padding: 28px; margin-bottom: 16px; text-align: center;
  position: relative; overflow: hidden; box-shadow: var(--relief-3);
}
.affiche::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: var(--senyera);
}
.affiche canvas, .affiche img { max-width: 270px; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════
   DÉCOR VÉGÉTAL

   Cinq plans en profondeur : rayons, collines, cyprès, feuillage,
   herbes. Les verts sont tirés vers l'olive et le pin — chauds — pour
   s'accorder au sang et à l'or. Un vert franc et froid aurait lutté
   contre l'identité au lieu de la porter.

   Règle tenue : le décor ne monte jamais au-dessus de 55 % d'opacité et
   reste sous une voile clair. Les cartes gardent tout leur contraste,
   y compris en plein soleil sur un chantier.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pin:    #22301F;
  --olive:  #5E7355;
  --mousse: #8FA07C;
}

#decor {
  position: fixed; inset: 0; z-index: 0;   /* sous le grain et sous l'application */
  pointer-events: none; overflow: hidden;
}
#decor .plan { position: absolute; inset: 0; }

/* Rayons obliques traversant le feuillage */
#decor .rayons {
  background:
    linear-gradient(101deg, transparent 30%, rgba(255, 232, 160, .22) 40%,
      transparent 47%),
    linear-gradient(97deg,  transparent 52%, rgba(255, 236, 178, .16) 60%,
      transparent 66%),
    linear-gradient(104deg, transparent 68%, rgba(242, 195, 0, .10) 76%,
      transparent 82%);
  animation: rayonne 26s ease-in-out infinite alternate;
}
@keyframes rayonne {
  from { opacity: .55; transform: translateX(-2%) }
  to   { opacity: 1;   transform: translateX(2%) }
}

/* La scène occupe le bas de l'écran : le contenu reste au clair */
#decor .scene { width: 100%; height: 100%; }

/* Parallaxe : les plans proches se déplacent davantage */
#decor .c1 { transform: translateY(var(--p1, 0)); }
#decor .c2 { transform: translateY(var(--p2, 0)); }
#decor .c3, #decor .c4 { transform: translateY(var(--p3, 0)); }

/* Respiration très lente du feuillage, comme un souffle de vent */
#decor .c2 { animation: brise 19s ease-in-out infinite alternate; }
#decor .c3 { animation: brise 24s ease-in-out infinite alternate reverse; }
#decor .c4 { animation: brise 11s ease-in-out infinite alternate; }
@keyframes brise {
  from { transform: translate(-4px, var(--p2, 0)) }
  to   { transform: translate(4px,  var(--p2, 0)) }
}

/* Poussières en suspension dans la lumière */
#decor .poussieres i {
  position: absolute;
  width: var(--e, 3px); height: var(--e, 3px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    rgba(255, 255, 255, .95), rgba(255, 226, 140, .35));
  box-shadow: 0 0 7px rgba(255, 226, 140, .6);
  opacity: 0;
  animation: derive var(--t, 18s) linear var(--r, 0s) infinite;
}
@keyframes derive {
  0%   { opacity: 0;   transform: translate(0, 24px) }
  12%  { opacity: .85 }
  78%  { opacity: .55 }
  100% { opacity: 0;   transform: translate(34px, -140px) }
}

/* Voile clair : garantit la lisibilité par-dessus le décor */
#decor::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(244, 240, 234, .58) 0%,
    rgba(244, 240, 234, .40) 42%,
    rgba(244, 240, 234, .62) 100%);
}

/* Sur grand écran, la scène se déploie ; sur téléphone, elle reste sobre */
@media (max-width: 640px) {
  #decor .scene { opacity: .78; }
  #decor .poussieres i:nth-child(n+8) { display: none; }
}
@media (min-width: 900px) {
  #decor::after {
    background: linear-gradient(180deg,
      rgba(244, 240, 234, .48) 0%,
      rgba(244, 240, 234, .30) 45%,
      rgba(244, 240, 234, .55) 100%);
  }
}

/* Mouvement réduit : la scène reste, tout s'immobilise */
@media (prefers-reduced-motion: reduce) {
  #decor .rayons, #decor .c2, #decor .c3, #decor .c4,
  #decor .poussieres i { animation: none !important; }
  #decor .poussieres i { opacity: .5; }
}

/* Impression : aucun décor, de l'encre en moins */
@media print { #decor { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   Barre de recherche

   Posée en haut de chaque liste. Le filtrage se fait dans le
   navigateur, sur des données déjà chargées : le résultat est
   instantané, sans aller-retour serveur. Sur 140 chantiers, c'est
   ce qui fait la différence entre chercher et retrouver.
   ═══════════════════════════════════════════════════════════════ */

.recherche {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  background: var(--verre-dense);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--verre-bord);
  border-radius: 15px;
  padding: 4px 14px;
  margin-bottom: 14px;
  box-shadow: var(--relief-2);
  transition: border-color .15s, box-shadow .15s;
}
.recherche:focus-within {
  border-color: var(--sang);
  box-shadow: var(--relief-2), 0 0 0 4px rgba(178, 18, 27, .1);
}
.recherche > svg {
  width: 20px; height: 20px; flex: 0 0 auto; color: var(--gris);
}
.recherche:focus-within > svg { color: var(--sang); }

.recherche input {
  flex: 1; min-width: 0;
  border: none; background: transparent; box-shadow: none;
  margin: 0; padding: 12px 0; min-height: 44px;
  font-size: 16px;                  /* 16 px évite le zoom automatique sur iPhone */
}
.recherche input:focus { outline: none; box-shadow: none; }
.recherche input::-webkit-search-cancel-button { display: none; }

.recherche .compteur {
  flex: 0 0 auto; font-size: 12px; font-weight: 700;
  color: var(--gris); background: rgba(28, 22, 19, .06);
  padding: 4px 9px; border-radius: 8px; white-space: nowrap;
}

.recherche .vider {
  flex: 0 0 auto; width: 30px; height: 30px; min-height: 30px;
  padding: 0; border-radius: 50%; font-size: 14px; line-height: 1;
  background: rgba(28, 22, 19, .07); color: var(--gris);
  box-shadow: none;
}
.recherche .vider::after { display: none; }
.recherche .vider:hover { background: var(--sang); color: #fff; }

@media (min-width: 900px) {
  #app.espace-admin .recherche { max-width: 560px; }
}