/* Le thème sombre du Hub : l'accueil des visiteurs (index.html), le questionnaire (commande.html),
   le compte des clients (compte.html) et l'espace du gérant (gerant.html). */

:root {
  --fond: #0a0d0c;
  --carte: #0e1412;
  --trait: #1e2a25;
  --trait-fort: #3a4a43;
  --texte: #e8eeea;
  --doux: #b4c0b9;
  --pale: #8fa097;
  --accent: #5cd6d0;
  --sur-accent: #06120c;
  --ambre: #ffb454;
  --erreur: #ff8f85;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: var(--texte); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.marque { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; color: var(--texte); text-decoration: none; }
.marque span { color: var(--accent); }
.marque:hover { color: var(--texte); }
.marque .logo-anime { width: 150px; }

/* ---- le logo animé : une lueur turquoise qui respire, et un reflet de lumière qui passe dessus toutes les six secondes.
   Le reflet est découpé à la forme exacte du logo (l'image sert de masque) : il ne déborde jamais sur le fond. */
.logo-anime { position: relative; display: inline-block; line-height: 0; transition: transform .3s ease; }
.logo-anime img { display: block; width: 100%; height: auto; animation: logo-lueur 4s ease-in-out infinite; }
.logo-anime::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .9) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  -webkit-mask: url(logo-uptonsite-480.webp) center / 100% 100% no-repeat;
  mask: url(logo-uptonsite-480.webp) center / 100% 100% no-repeat;
  animation: logo-reflet 6s ease-in-out infinite;
}
.marque:hover .logo-anime { transform: translateY(-1px) scale(1.04); }
@keyframes logo-lueur {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 229, 255, .25)); }
  50% { filter: drop-shadow(0 0 9px rgba(0, 229, 255, .55)); }
}
@keyframes logo-reflet {
  0%, 65% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
/* Le grand logo de l'accueil se dessine de gauche à droite, comme la flèche qui l'entoure, quand sa ligne de code est écrite. */
.logo-hero { width: min(440px, 80vw); }
.anime .logo-hero.vu img { animation: logo-dessin 1.4s cubic-bezier(.2, .7, .3, 1) both, logo-lueur 4s ease-in-out 1.4s infinite; }
.anime .logo-hero.vu .logo-anime::after { animation-delay: 1.4s; }
@keyframes logo-dessin {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-14px); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
.page-attente .marque .logo-anime { width: 200px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--sur-accent);
  font: 600 1.05rem var(--sans); text-decoration: none; cursor: pointer;
}
.bouton:hover { background: #7fe3de; border-color: #7fe3de; color: var(--sur-accent); }
.bouton.contour { background: transparent; border-color: var(--trait-fort); color: var(--texte); font-weight: 500; }
.bouton.contour:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.bouton.petit { min-height: 44px; padding: 0 16px; font-size: .98rem; }
.bouton.large { display: flex; width: 100%; }
.bouton.danger { background: transparent; border-color: var(--erreur); color: var(--erreur); font-weight: 500; }
.bouton.danger:hover { background: var(--erreur); border-color: var(--erreur); color: var(--sur-accent); }
.bouton:disabled { opacity: .5; cursor: wait; }

.voyant { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.voyant.attente { background: var(--ambre); }
.voyant.arret { background: transparent; border: 2px solid var(--pale); }

/* ================================================================ accueil des visiteurs */

html:has(.accueil) { scroll-behavior: smooth; scroll-padding-top: 84px; }
.accueil { overflow-x: hidden; }
.progression { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; }
.hero .page { position: relative; flex: 1; min-width: 0; padding: 120px clamp(20px, 5vw, 72px) 28px; display: flex; flex-direction: column; gap: 48px; }

/* Le code de la page, qui s'écrit tout seul derrière le contenu. Purement décoratif. */
.code-fond { position: absolute; inset: 0; padding: 104px 24px 32px; overflow: hidden; }
.code-fond .lignes { margin-left: auto; width: min(100%, 640px); font-family: var(--mono); font-size: 15px; line-height: 1.75; }
.code-fond .ligne { white-space: nowrap; min-height: 26px; }
/* Écran large mais plus haut que large : un téléphone en « version pour ordinateur », une tablette tenue debout. Le titre et les boutons
   y descendent au milieu de la page ; le code les suit et se range dans la moitié droite, en plus petit, au lieu de rester seul tout en haut.
   Un écran d'ordinateur (plus large que haut) n'est pas concerné, ni un téléphone en affichage normal. */
@media (min-width: 701px) and (max-aspect-ratio: 1/1) {
  .code-fond { display: flex; flex-direction: column; }
  .code-fond .lignes { flex: none; margin-top: auto; margin-bottom: auto; width: 42vw; font-size: clamp(10px, 1.25vw, 15px); }
  .code-fond .ligne { min-height: 1.75em; }
  .code-fond .no { width: 2em; margin-right: 1em; }
  .hero .hero-texte { max-width: 46vw; }
  .hero .voile { background: linear-gradient(90deg, rgba(10, 13, 12, .95) 0%, rgba(10, 13, 12, .8) 50%, rgba(10, 13, 12, 0) 62%); }
}
.code-fond .no { display: inline-block; width: 28px; margin-right: 18px; text-align: right; color: #2c3a34; }
.code-fond .t { white-space: pre; color: #8fa097; }
.code-fond .t-bal { color: #3fa672; }
.code-fond .t-att { color: #c9a24a; }
.code-fond .t-chn { color: #7fa7c9; }
.code-fond .t-egal { color: #5e6e66; }
.code-fond .t-cmd { color: #dce5e0; }
.code-fond .t-pts { color: #7c8c84; }
.code-fond .t-ok { color: var(--accent); }
.code-fond .curseur { display: inline-block; width: 9px; height: 18px; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 13, 12, .95) 0%, rgba(10, 13, 12, .72) 45%, rgba(10, 13, 12, 0) 80%); }

/* La barre du haut reste visible pendant le défilement ; elle prend un fond dès qu'on quitte le haut de la page. */
.accueil .haut.revele {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  padding: 12px clamp(20px, 5vw, 72px); border-bottom: 1px solid transparent; transition: opacity .45s ease, background .3s ease, border-color .3s ease;
}
.accueil .haut.defile { background: rgba(10, 13, 12, .92); backdrop-filter: blur(8px); border-bottom-color: var(--trait); }
.accueil .haut nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.accueil .haut nav a:not(.bouton) { display: inline-flex; align-items: center; min-height: 44px; color: var(--doux); text-decoration: none; }
.accueil .haut nav a:not(.bouton):hover { color: var(--accent); }
.hero-texte { margin: auto 0; display: flex; flex-direction: column; gap: 28px; max-width: 640px; }
.accueil h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.04; font-weight: 600; letter-spacing: -.02em; }
.hero .chapo { margin: 0; max-width: 520px; font-size: 1.19rem; line-height: 1.55; color: var(--doux); }
.accueil .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.accueil .bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: .9rem; color: var(--doux); }
.accueil .bas p { margin: 0; }
.descendre { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--mono); color: var(--doux); text-decoration: none; }
.descendre span { display: inline-block; color: var(--accent); animation: rebond 1.6s ease-in-out infinite; }
@keyframes rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Les sections qui défilent sous l'écran d'accueil. */
.section { padding: clamp(64px, 10vw, 112px) clamp(20px, 5vw, 72px); border-top: 1px solid var(--trait); }
.section > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.etiquette { margin: 0 0 14px; font: .9rem var(--mono); color: var(--accent); }
.entete h2 { margin: 0; max-width: 20em; font-size: clamp(1.8rem, 4.2vw, 2.9rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.entete > p:not(.etiquette) { margin: 16px 0 0; max-width: 56ch; font-size: 1.1rem; color: var(--doux); }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 48px; padding: 0; list-style: none; }
.grille.trois { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.carte { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); color: var(--texte); text-decoration: none; transition: transform .25s ease, border-color .25s ease; }
.carte:hover { transform: translateY(-4px); border-color: var(--accent); color: var(--texte); }
.carte .no { font: .82rem var(--mono); color: var(--accent); }
.carte h3 { margin: 10px 0 8px; font-size: 1.2rem; font-weight: 600; }
.carte p { margin: 0; color: var(--doux); }
.offre.vedette { border-color: var(--accent); }
.offre .badge { align-self: flex-start; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--sur-accent); font-size: .78rem; font-weight: 600; }
.offre .prix { margin-top: 8px; font: 600 1.8rem/1.15 var(--mono); letter-spacing: -.03em; color: var(--texte); }
.offre .ensuite { margin-top: 6px; font: .9rem var(--mono); color: var(--accent); }
.offre ul { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; color: var(--doux); }
.offre li { position: relative; padding-left: 26px; }
.offre li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.offre .bouton { margin-top: auto; }
.rassure { margin-top: 24px; margin-bottom: 0; font-size: .95rem; color: var(--pale); }
.etapes { counter-reset: etape; }
.etapes li { counter-increment: etape; }
.etapes li::before { content: "0" counter(etape); font: 600 2rem/1 var(--mono); color: var(--accent); }
.carte .metier { font: .82rem var(--mono); color: var(--accent); }
.carte .ouvrir { margin-top: auto; padding-top: 16px; font-weight: 600; color: var(--accent); }
.appel { text-align: center; }
.appel .entete h2, .appel .entete > p { margin-left: auto; margin-right: auto; }
.appel .actions { justify-content: center; margin-top: 28px; }
.pied-accueil { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 20px clamp(20px, 5vw, 72px); border-top: 1px solid var(--trait); font-size: .9rem; color: var(--doux); }
.pied-accueil p { margin: 0; }

/* ---- les bulles : chaque section de l'accueil est une grande bulle qui flotte, avec un code de chaque côté */
.section > .bulle { max-width: 1440px; }
.section:has(> .bulle) { padding-left: clamp(12px, 3vw, 40px); padding-right: clamp(12px, 3vw, 40px); }
.bulle {
  position: relative; display: grid; grid-template-columns: 212px minmax(0, 1fr) 212px; gap: 24px; padding: clamp(16px, 2.4vw, 36px);
  border: 1px solid var(--trait-fort); border-radius: 44px; background: radial-gradient(120% 70% at 50% 0%, #13231f 0%, var(--carte) 65%);
}
/* Le halo de la bulle, qui respire. */
.bulle::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; box-shadow: 0 0 70px -10px rgba(92, 214, 208, .45); opacity: .35; animation: respirer 5s ease-in-out infinite; pointer-events: none; }
@keyframes respirer { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
.anime .bulle.apparait { transform: translateY(40px) scale(.94); }
.bulle-contenu { min-width: 0; }
.bulle .grille { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 32px; }
.bulle .etapes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bulle .offre .prix { font-size: 1.3rem; }

/* Le code d'un côté de la bulle. */
.code-bulle { position: relative; min-height: 190px; overflow: hidden; border: 1px solid var(--trait); border-radius: 22px; background: rgba(10, 13, 12, .7); }
.code-bulle .lignes { position: absolute; top: 14px; left: 0; right: 0; padding: 0 12px; font-family: var(--mono); font-size: 12px; line-height: 1.75; transition: transform .25s ease; }
.code-bulle .ligne { white-space: nowrap; min-height: 21px; }
.code-bulle .no { display: inline-block; width: 16px; margin-right: 10px; text-align: right; color: #2c3a34; }
.code-bulle .t { white-space: pre; color: #8fa097; }
.code-bulle .t-bal { color: #3fa672; }
.code-bulle .t-att { color: #c9a24a; }
.code-bulle .t-chn { color: #7fa7c9; }
.code-bulle .t-pts { color: #7c8c84; }
.code-bulle .t-cmd { color: #dce5e0; }
.code-bulle .t-ok { color: var(--accent); }
.code-bulle .curseur { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: clignote 1s steps(1) infinite; }
.code-bulle .statuts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
.code-bulle .statut { display: inline-flex; align-items: center; gap: 8px; padding: 4px 9px; border: 1px solid var(--accent); border-radius: 6px; font-size: .86em; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity .4s ease; }
.code-bulle .statuts.pret .statut { opacity: 1; }
.code-bulle .statuts.pret .statut:nth-child(2) { transition-delay: .5s; }
.code-bulle .statut .voyant { flex: none; animation: battre 1.4s ease-in-out infinite; }

/* Écran moyen : les deux codes passent en haut de la bulle, côte à côte. Téléphone : un seul. */
@media (max-width: 1279px) {
  .bulle { grid-template-columns: 1fr 1fr; gap: 16px; border-radius: 32px; }
  .bulle-contenu { grid-column: 1 / -1; order: 3; }
  .code-bulle { height: 190px; }
}
@media (max-width: 700px) {
  .bulle { grid-template-columns: 1fr; padding: 16px; border-radius: 26px; }
  .code-bulle.gauche { display: none; }
  .code-bulle { height: 170px; }
}

/* ---- les cases numérotées (01, 02…) : leur numéro s'allume à tour de rôle, comme une vague */
.numerotee .carte .no, .numerotee.etapes li::before { display: inline-block; align-self: flex-start; transform-origin: 0 50%; animation: allumer 6s ease-in-out infinite; }
.numerotee .carte:nth-child(2) .no, .numerotee.etapes li:nth-child(2)::before { animation-delay: 1s; }
.numerotee .carte:nth-child(3) .no, .numerotee.etapes li:nth-child(3)::before { animation-delay: 2s; }
.numerotee .carte:nth-child(4) .no, .numerotee.etapes li:nth-child(4)::before { animation-delay: 3s; }
.numerotee .carte:nth-child(5) .no { animation-delay: 4s; }
.numerotee .carte:nth-child(6) .no { animation-delay: 5s; }
.numerotee .carte .no { font-size: 1.05rem; font-weight: 600; }
@keyframes allumer { 0%, 22%, 100% { transform: scale(1); text-shadow: none; } 8% { transform: scale(1.45); text-shadow: 0 0 16px var(--accent); } }

/* ---- les cases qui flottent et se retournent : le numéro et le titre devant, le texte derrière.
   Elles se retournent au survol sur ordinateur, au toucher sur téléphone (accueil.js), et avec Entrée au clavier.
   Chaque case grossit aussi un peu quand son numéro s'allume. « scale » et « translate » sont réglés à part de « transform » :
   le zoom et le flottement s'ajoutent à l'arrivée en glissant et au survol de la carte, sans les remplacer.
   Sans JavaScript (pas de classe « volets »), rien n'est caché : le texte s'affiche simplement sous le titre. */
.numerotee .carte.volet { animation: zoomer 6s ease-in-out infinite, flotter 5s ease-in-out infinite; }
.numerotee .carte.volet:nth-child(2) { animation-delay: 1s; }
.numerotee .carte.volet:nth-child(3) { animation-delay: 2s; }
.numerotee .carte.volet:nth-child(4) { animation-delay: 3s; }
.numerotee .carte.volet:nth-child(5) { animation-delay: 4s; }
.numerotee .carte.volet:nth-child(6) { animation-delay: 5s; }
@keyframes zoomer { 0%, 22%, 100% { scale: 1; } 8% { scale: 1.04; } }
@keyframes flotter { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.volet .indice { display: none; }
.etapes li.volet::before { content: none; }
.etapes li.volet .no { font-size: 1.05rem; font-weight: 600; }
.volets .volet { padding: 0; border: 0; background: none; perspective: 1000px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.volets .volet-int { display: grid; flex: 1; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.volets .volet .face { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 176px; padding: 24px; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: border-color .25s ease; }
.volets .volet .arriere { justify-content: center; border-color: var(--accent); transform: rotateY(180deg); }
.volets .volet .arriere p { color: var(--texte); }
.volets .volet .indice { display: block; margin-top: auto; padding-top: 14px; font: .78rem var(--mono); color: var(--pale); }
.volets .volet.retournee .volet-int { transform: rotateY(180deg); }
@media (hover: hover) {
  .volets .volet:hover .volet-int { transform: rotateY(180deg); }
}

/* Les blocs apparaissent en glissant quand ils entrent dans l'écran. Sans JavaScript, tout est visible d'emblée. */
.anime .apparait { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.anime .apparait.visible { opacity: 1; transform: none; }
.accueil .etat { display: flex; align-items: center; gap: 10px; font-family: var(--mono); }
.accueil .pied { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.accueil .pied a { display: inline-flex; align-items: center; min-height: 44px; color: var(--doux); }
.accueil .pied a:hover { color: var(--accent); }

/* Le contenu apparaît quand sa ligne de code vient d'être écrite. Sans JavaScript, tout est visible d'emblée. */
.anime .revele { opacity: 0; transition: opacity .45s ease; }
.anime .revele.vu { opacity: 1; }

@media (max-width: 860px) {
  .accueil .haut nav a:not(.bouton) { display: none; }
}
@media (max-width: 760px) {
  .voile { background: rgba(10, 13, 12, .86); }
  .code-fond { opacity: .4; } /* sur téléphone le code passe derrière le titre : il s'efface pour le laisser lire */
}

/* ================================================================ espace du gérant */

.connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.connexion form { width: min(100%, 400px); display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); }
.connexion h1 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
.connexion label { font-size: .95rem; color: var(--doux); }
.connexion input { min-height: 52px; padding: 0 14px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--fond); color: var(--texte); font: 1.05rem var(--sans); }
.connexion input:focus-visible { outline-offset: 0; border-color: var(--accent); }
.erreur { margin: 0; min-height: 1.5em; font-size: .95rem; color: var(--erreur); }

.tableau { display: flex; flex-wrap: wrap; min-height: 100vh; }
.menu { flex: 1 1 220px; padding: 24px 16px; background: var(--carte); display: flex; flex-direction: column; gap: 24px; }
.menu .marque { padding: 0 8px; }
.menu nav { display: flex; flex-direction: column; gap: 4px; }
.menu nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--doux); text-decoration: none; }
.menu nav a:hover { color: var(--texte); }
.menu nav a[aria-current] { background: #17211d; color: var(--texte); font-weight: 500; }
.menu nav a { justify-content: space-between; gap: 10px; padding: 8px 12px; line-height: 1.3; }
.menu .nb:not(:empty) { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--sur-accent); font: 600 .78rem var(--mono); text-align: center; }
.page-gerant { display: flex; flex-direction: column; gap: 24px; }
.bloc-liste select, .bloc-liste input { min-height: 44px; padding: 0 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--fond); color: var(--texte); font: .95rem var(--sans); }
.bloc-liste input[type="number"] { width: 110px; font-family: var(--mono); }
.bloc-liste select:focus-visible, .bloc-liste input:focus-visible { outline-offset: 0; border-color: var(--accent); }
.bloc-liste .erreur { padding: 0 16px; min-height: 0; }
.bloc-liste .erreur:empty { display: none; }
.page-gerant > .alerte, .page-gerant > .panneau { margin-top: 0; }

/* ---- facturation */
.ligne-facture { display: grid; grid-template-columns: 1fr 96px 150px 44px; gap: 8px; align-items: center; margin-top: 8px; }
.entetes.ligne-facture { margin-top: 14px; }
.formulaire .ligne-facture input { margin-top: 0; min-width: 0; }
.total-facture { margin: 18px 0 0; font-size: 1.05rem; color: var(--doux); }
.total-facture b { font: 600 1.3rem var(--mono); color: var(--accent); }
.actions-facture { display: flex; flex-wrap: wrap; gap: 10px; }
.page-gerant > .erreur:empty { display: none; }
/* La facture est une feuille claire, à l'écran comme sur le papier. */
.feuille { max-width: 800px; padding: clamp(20px, 5vw, 48px); border-radius: 6px; background: #fff; color: #17202e; font-size: .95rem; }
.feuille .f-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.feuille .f-bloc { display: flex; flex-direction: column; gap: 2px; }
.feuille .f-droite { text-align: right; align-items: flex-end; }
.feuille h2 { margin: 0 0 4px; font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; }
.feuille strong { font-size: 1.05rem; }
.feuille small { color: #5b6472; }
.feuille .f-client { margin-top: 36px; }
.feuille .f-objet { margin: 28px 0 0; font-weight: 600; }
.feuille table { width: 100%; margin-top: 14px; border-collapse: collapse; }
.feuille th { padding: 10px 8px; border-bottom: 2px solid #17202e; text-align: left; font-size: .82rem; font-weight: 600; }
.feuille td { padding: 12px 8px; border-bottom: 1px solid #dcdfe4; vertical-align: top; overflow-wrap: anywhere; }
.feuille th:not(:first-child), .feuille td:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feuille .f-totaux { display: grid; grid-template-columns: max-content max-content; justify-content: end; gap: 6px 32px; margin: 20px 0 0; }
.feuille .f-totaux dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.feuille .f-net { padding-top: 8px; border-top: 2px solid #17202e; font-size: 1.15rem; font-weight: 700; }
.feuille .f-mention { margin: 28px 0 0; font-size: .85rem; color: #5b6472; }

@media (max-width: 620px) {
  .ligne-facture { grid-template-columns: 1fr 1fr 44px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
  .ligne-facture [data-champ="designation"] { grid-column: 1 / 3; }
  .ligne-facture .retirer { grid-row: 1; grid-column: 3; }
}

@media print {
  .menu, .tete, .sans-impression { display: none !important; }
  body, .gestion { background: #fff; }
  .contenu { padding: 0; }
  .feuille { max-width: none; padding: 0; border-radius: 0; }
}
.menu .bouton { margin-top: auto; }

.contenu { flex: 999 1 560px; min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 40px; display: flex; flex-direction: column; gap: 24px; }
.tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tete h1 { margin: 0; font-size: 1.9rem; font-weight: 600; letter-spacing: -.01em; }
.pastille { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #26322d; border-radius: 8px; font: .82rem var(--mono); color: #dce5e0; }

.jauges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.jauges .jauge { grid-column: span 2; }
.jauges .compte { grid-column: span 2; }
.tuile { padding: 20px; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); }
.tuile strong { display: block; font-size: 1.05rem; font-weight: 600; }
.tuile small { display: block; margin-top: 4px; font-size: .88rem; color: var(--pale); }
.jauge { display: flex; align-items: center; gap: 18px; }
.anneau { flex: none; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--accent) calc(var(--v, 0) * 1%), #1c2823 0); }
.anneau span { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--carte); font: 600 .95rem var(--mono); }
.compte b { display: block; margin-bottom: 6px; font: 600 2.1rem/1 var(--mono); color: var(--accent); }

.bloc-liste { border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); }
.bloc-liste .titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 16px 16px 8px; }
.bloc-liste h2 { margin: 0; font-size: 1.13rem; font-weight: 600; }
.bloc-liste .titre span { font-size: .88rem; color: var(--pale); }
.defile { overflow-x: auto; }
.bloc-liste table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .95rem; }
.bloc-liste th { padding: 12px 16px; text-align: left; font-weight: 500; font-size: .82rem; color: var(--pale); border-bottom: 1px solid var(--trait); }
.bloc-liste td { padding: 14px 16px; border-bottom: 1px solid #18211d; vertical-align: middle; color: var(--doux); }
.bloc-liste tr:last-child td { border-bottom: 0; }
.bloc-liste td b { display: block; font-weight: 500; color: var(--texte); }
.bloc-liste td small { display: block; font-size: .82rem; color: var(--pale); }
.bloc-liste td a { color: var(--doux); }
.bloc-liste td a:hover { color: var(--accent); }
.bloc-liste .code { font-family: var(--mono); font-size: .88rem; }
.bloc-liste .etat-site { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bloc-liste .en-ligne { color: var(--accent); }
.bloc-liste .vide, .bloc-liste .note { margin: 0; padding: 14px 16px 18px; color: var(--pale); font-size: .95rem; }
.bloc-liste .note { border-top: 1px solid #18211d; }

/* ================================================================ questionnaire et compte des clients */

.barre {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  padding: 8px clamp(16px, 4vw, 40px); background: rgba(10, 13, 12, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait);
}
.barre nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.barre nav a:not(.bouton) { display: inline-flex; align-items: center; min-height: 44px; color: var(--doux); text-decoration: none; }
.barre nav a:not(.bouton):hover { color: var(--accent); }

/* ---- la page d'attente pendant une maintenance : tout ce qui est turquoise ailleurs devient orange */
.maintenance { --accent: var(--ambre); min-height: 100vh; display: flex; flex-direction: column; }
.page-attente { flex: 1; width: 100%; max-width: 620px; margin: 0 auto; padding: 48px 20px 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.page-attente .marque { margin: 0; }
.page-attente h1 { margin: 0; font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.page-attente .chapo { margin: 0; font-size: 1.1rem; color: var(--doux); }
.page-attente .aide { margin: 0; }
.page-attente .pastille { border-color: var(--ambre); color: var(--ambre); text-transform: uppercase; letter-spacing: .06em; }
.page-attente .pastille .voyant { animation: battre 1.4s ease-in-out infinite; }
/* La roue qui tourne : un anneau orange en pointillés, avec un point au centre. */
.outil { display: grid; place-items: center; width: 96px; height: 96px; border: 6px dashed var(--ambre); border-radius: 50%; animation: tourner 9s linear infinite; }
.outil span { width: 26px; height: 26px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 34px rgba(255, 180, 84, .7); }
@keyframes tourner { to { transform: rotate(360deg); } }
/* La barre d'avancement : un trait orange qui va et vient, puisqu'on ne connaît pas la durée. */
.avancement { position: relative; width: min(100%, 340px); height: 6px; overflow: hidden; border-radius: 999px; background: #2a2114; }
.avancement span { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: inherit; background: var(--ambre); animation: aller-retour 2.4s ease-in-out infinite; }
@keyframes aller-retour { 0% { transform: translateX(-100%); } 50% { transform: translateX(165%); } 100% { transform: translateX(-100%); } }

/* ---- l'onglet Maintenance de l'espace gérant */
.etat-maintenance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.etat-maintenance strong { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 600; }
.etat-maintenance .voyant { width: 14px; height: 14px; }
.etat-maintenance small { display: block; margin-top: 4px; font-size: .92rem; color: var(--pale); }
.etat-maintenance.coupe { border-color: var(--ambre); }
.etat-maintenance.coupe strong { color: var(--ambre); }
.bouton.orange { border-color: var(--ambre); background: var(--ambre); color: #1c1203; }
.bouton.orange:hover { border-color: #ffc77d; background: #ffc77d; color: #1c1203; }
.panneau ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; color: var(--doux); }
.pastille.coupe { border-color: var(--ambre); color: var(--ambre); }

/* Le pied de chaque page : les liens vers les pages légales. */
.pied-page { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; padding: 16px 20px; border-top: 1px solid var(--trait); font-size: .9rem; }
.pied-page a, .liens-legaux a { display: inline-flex; align-items: center; min-height: 44px; color: var(--doux); }
.pied-page a:hover, .liens-legaux a:hover { color: var(--accent); }
.pied-page a[aria-current] { color: var(--texte); text-decoration: none; }
.liens-legaux { margin: 0; display: flex; flex-direction: column; font-size: .85rem; }
.connexion .liens-legaux { flex-direction: row; flex-wrap: wrap; gap: 0 20px; }

/* Les pages légales (RGPD, CGU) : du texte à lire, sur une colonne étroite. */
.legal { max-width: 760px; margin: 0 auto; padding: 44px 20px 72px; }
.legal h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.legal .chapo { margin: 16px 0 0; font-size: 1.1rem; color: var(--doux); }
.legal h2 { margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--trait); font-size: 1.35rem; font-weight: 600; }
.legal h3 { margin: 22px 0 0; font-size: 1.02rem; font-weight: 600; }
.legal p, .legal ul { margin: 12px 0 0; color: var(--doux); }
.legal ul { padding-left: 22px; display: grid; gap: 8px; }
.legal .etiquette { margin: 0 0 14px; color: var(--accent); }
.legal strong { color: var(--texte); }
.legal a { color: var(--accent); }
.legal .defile { margin-top: 16px; overflow-x: auto; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .95rem; }
.legal th { padding: 12px 16px; border-bottom: 1px solid var(--trait); text-align: left; font-size: .82rem; font-weight: 500; color: var(--pale); }
.legal td { padding: 12px 16px; border-bottom: 1px solid #18211d; vertical-align: top; color: var(--doux); }
.legal tr:last-child td { border-bottom: 0; }
/* Une information légale pas encore renseignée dans hub.json : bien visible, pour ne pas l'oublier. */
.a-remplir { padding: 0 5px; border-radius: 4px; background: #3d2f05; color: #ffd166; font-weight: 600; }

/* Le code qui s'écrit sur la page de commande : du HTML à gauche, du C++ à droite. Purement décoratif.
   Sur un grand écran il occupe les marges, derrière la page ; en dessous, c'est un bandeau en haut de la page (voir plus bas). */
.code-page { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .75; }
.code-page .lignes { position: absolute; top: 96px; width: calc(50vw - 412px); padding: 0 20px; overflow: hidden; font-family: var(--mono); font-size: 14px; line-height: 1.75; transition: transform .25s ease; }
.code-page .gauche { left: 0; }
.code-page .droite { right: 0; }
.code-page .ligne { white-space: nowrap; min-height: 24px; }
.code-page .no { display: inline-block; width: 24px; margin-right: 14px; text-align: right; color: #2c3a34; }
.code-page .t { white-space: pre; color: #8fa097; }
.code-page .t-bal { color: #3fa672; }
.code-page .t-att { color: #c9a24a; }
.code-page .t-chn { color: #7fa7c9; }
.code-page .t-egal { color: #5e6e66; }
.code-page .t-pts { color: #7c8c84; }
.code-page .curseur { display: inline-block; width: 8px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: clignote 1s steps(1) infinite; }
.code-page .t-cmd { color: #dce5e0; }
.code-page .t-ok { color: var(--accent); }
/* Le mot de la fin, quand tout est écrit. */
.code-page .statuts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
.code-page .statut { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--accent); border-radius: 6px; font-size: .86em; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity .4s ease; }
.code-page .statuts.pret .statut { opacity: 1; }
.code-page .statuts.pret .statut:nth-child(2) { transition-delay: .5s; }
.code-page .statuts.pret .statut:nth-child(3) { transition-delay: 1s; }
.code-page .statut .voyant { flex: none; animation: battre 1.4s ease-in-out infinite; }
@keyframes battre { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Écran étroit et téléphone : les marges n'existent plus, le code devient un bandeau au-dessus du formulaire. */
@media (max-width: 1359px) {
  .code-page { position: relative; inset: auto; z-index: 0; height: 210px; opacity: 1; border-bottom: 1px solid var(--trait); background: var(--carte); }
  .code-page .lignes { top: 14px; width: 50%; font-size: 12px; }
  .code-page .ligne { min-height: 21px; }
  .code-page .droite { border-left: 1px solid var(--trait); }
}
/* Les pages à lire (RGPD, CGU) : le code s'écrit une seule fois puis ne bouge plus, plus discret ; sur téléphone il disparaît. */
@media (min-width: 1360px) { .code-page[data-boucle="non"] { opacity: .5; } }
@media (max-width: 700px) { .code-page[data-boucle="non"] { display: none; } }

/* Téléphone : un seul code, celui de droite, en plus gros. */
@media (max-width: 700px) {
  .code-page { height: 190px; }
  .code-page .gauche { display: none; }
  .code-page .droite { width: 100%; padding: 0 12px; border-left: 0; }
}

.commande, .espace { max-width: 760px; margin: 0 auto; padding: 44px 20px 72px; }
.acces { max-width: 460px; margin: 0 auto; padding: 44px 20px 72px; }
.commande h1, .espace h1, .acces h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.commande .chapo, .espace .chapo, .acces .chapo { margin: 16px 0 0; max-width: 56ch; font-size: 1.1rem; color: var(--doux); }
.info { margin: 20px 0 0; padding: 12px 14px; border: 1px solid var(--trait); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--carte); color: var(--doux); font-size: .95rem; }

/* Les étapes se numérotent toutes seules : une étape masquée (maintenance) ne laisse pas de trou. */
.formulaire { counter-reset: etape; }
.formulaire fieldset, .panneau { margin: 24px 0 0; min-width: 0; padding: 8px 22px 24px; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); }
.formulaire legend { padding: 0 8px; font-weight: 600; font-size: 1.12rem; }
.formulaire legend small { font-size: .85rem; font-weight: 400; color: var(--pale); }
#options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.formulaire .etape > legend::before { counter-increment: etape; content: counter(etape) ". "; font-family: var(--mono); color: var(--accent); }
.panneau h2 { margin: 16px 0 0; font-size: 1.12rem; font-weight: 600; }
.formulaire label { display: block; margin-top: 16px; font-size: .95rem; font-weight: 500; }
.formulaire input, .formulaire select, .formulaire textarea {
  display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--fond); color: var(--texte); font: 1rem var(--sans);
}
.formulaire textarea { min-height: 0; resize: vertical; }
.formulaire input:focus-visible, .formulaire select:focus-visible, .formulaire textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
.formulaire ::placeholder { color: #74857c; }
.formulaire input[type="color"] { padding: 4px; cursor: pointer; }
.formulaire input[type="checkbox"], .formulaire input[type="radio"] { display: inline-block; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
.deux { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.aide { margin: 10px 0 0; font-size: .88rem; color: var(--pale); }
.aide.centre { text-align: center; }
.choix { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 6px; }
.formulaire .option-carte { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 14px; border: 1px solid var(--trait-fort); border-radius: 10px; cursor: pointer; }
.formulaire .option-carte:has(input:checked) { border-color: var(--accent); background: #10201d; }
.option-carte strong { display: block; font-size: 1.05rem; font-weight: 600; }
.option-carte small { display: block; margin-top: 4px; font-size: .88rem; font-weight: 400; color: var(--doux); }
.option-carte .prix { font-family: var(--mono); font-size: .82rem; color: var(--accent); }
.formulaire .case { display: flex; gap: 10px; align-items: center; }
/* Une option avec sa description : la case reste en haut, la description passe sous le nom. */
.formulaire .case.option { align-items: flex-start; margin-top: 12px; }
.formulaire .case.option input { margin-top: 4px; }
/* Les échanges d'un ticket : les messages du client à gauche, ceux d'UpTonSite à droite. */
.fil { display: grid; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.fil .message { max-width: 85%; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); }
.fil .message.gerant { justify-self: end; border-color: var(--accent); }
.fil .message small { display: block; font-size: .8rem; color: var(--pale); }
.fil .message p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket { margin-top: 12px; }
.ticket summary { cursor: pointer; }
.formulaire .encadre { display: block; margin-top: 18px; padding: 14px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--carte); }
.formulaire .encadre textarea { margin-top: 8px; }
.formulaire .encadre .compteur { display: block; margin-top: 6px; text-align: right; font-size: .82rem; color: var(--pale); }
.formulaire .case.option.indisponible { opacity: .55; cursor: not-allowed; }
.case.option small { display: block; margin-top: 2px; font-size: .88rem; color: var(--doux); }
.piege { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.formulaire .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.formulaire .envoi { margin-top: 24px; }

.jour-horaire { display: grid; grid-template-columns: minmax(118px, 1fr) 1fr auto 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.jour-horaire:last-child { border-bottom: 0; }
.formulaire .jour-horaire .case, .formulaire .jour-horaire input { margin-top: 0; }
.jour-horaire .a { font-size: .9rem; color: var(--pale); }
.jour-horaire.ferme input[type="time"] { opacity: .35; }

.tableau-prestations { margin-top: 14px; }
.entetes, .prestation-ligne { display: grid; grid-template-columns: 2.2fr 1.3fr .9fr .9fr 44px; gap: 8px; align-items: center; }
.entetes { font-size: .78rem; color: var(--pale); }
.prestation-ligne { margin-top: 8px; }
.formulaire .prestation-ligne input { margin-top: 0; min-width: 0; }
.retirer { width: 44px; height: 44px; border: 1px solid var(--trait-fort); border-radius: 8px; background: transparent; color: var(--doux); font-size: 1.2rem; cursor: pointer; }
.retirer:hover { border-color: var(--erreur); color: var(--erreur); }
/* Sans l'option réservation, la colonne des durées disparaît. */
.sans-duree .col-duree, .sans-duree [data-champ="duree_min"] { display: none; }
.sans-duree .entetes, .sans-duree .prestation-ligne { grid-template-columns: 2.2fr 1.3fr .9fr 44px; }

.alerte { margin: 22px 0 0; padding: 12px 14px; border: 1px solid #6b2b25; border-radius: 8px; background: #241210; color: var(--erreur); }
.succes { margin: 16px 0 0; color: var(--accent); }
.merci { padding-top: 40px; text-align: center; }
.merci .chapo { margin: 16px auto 28px; }
.merci .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.coche { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; background: var(--accent); color: var(--sur-accent); font-size: 2.1rem; font-weight: 700; }

.onglets { display: flex; gap: 4px; margin-top: 24px; padding: 4px; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); }
.onglets button { flex: 1; min-height: 44px; border: 0; border-radius: 7px; background: transparent; color: var(--doux); font: 500 1rem var(--sans); cursor: pointer; }
.onglets button[aria-selected="true"] { background: #1c2823; color: var(--texte); }
.panneau .bouton { margin-top: 20px; }
.espace .tete { margin-bottom: 4px; }
.espace .bloc-liste { margin-top: 24px; }
/* Les informations du compte, en grand, avec l'état de la connexion. */
.profil { padding: 24px; border-color: var(--trait-fort); }
.profil h2 { margin-top: 24px; font-size: .88rem; font-weight: 500; color: var(--pale); }
.profil-etat { display: flex; flex-direction: column; gap: 4px; }
.profil-etat p { margin: 0; }
.profil-etat .en-ligne { display: flex; align-items: center; gap: 12px; font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; color: var(--accent); }
.profil-etat .en-ligne .voyant { width: 14px; height: 14px; box-shadow: 0 0 0 5px rgba(92, 214, 208, .18); animation: battre 1.6s ease-in-out infinite; }
.profil-etat .connecte { font: 1rem var(--mono); color: var(--doux); }
.fiche-compte { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 24px; }
.fiche-compte dt { font-size: .88rem; color: var(--pale); }
.fiche-compte dd { margin: 2px 0 0; font-size: 1.35rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.lien { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--doux); font: .95rem var(--sans); text-decoration: underline; cursor: pointer; }
.lien:hover { color: var(--accent); }
.espace details summary { margin-top: 16px; min-height: 44px; display: flex; align-items: center; color: var(--doux); cursor: pointer; }

@media (max-width: 620px) {
  .entetes { display: none; }
  .prestation-ligne, .sans-duree .prestation-ligne { grid-template-columns: 1fr 1fr 44px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
  .prestation-ligne [data-champ="nom"] { grid-column: 1 / 3; }
  .prestation-ligne [data-champ="categorie"] { grid-column: 1 / 3; grid-row: 2; }
  .prestation-ligne [data-champ="duree_min"] { grid-column: 1; grid-row: 3; }
  .prestation-ligne [data-champ="prix"] { grid-column: 2; grid-row: 3; }
  .sans-duree .prestation-ligne [data-champ="prix"] { grid-column: 1 / 3; }
  .prestation-ligne .retirer { grid-row: 1; grid-column: 3; }
}

@media (max-width: 980px) {
  .jauges { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .jauges .jauge, .jauges .compte { grid-column: auto; }
}

@media (max-width: 820px) {
  .menu { gap: 12px; }
  .menu nav { flex-direction: row; flex-wrap: wrap; }
  .menu .bouton { margin-top: 0; align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.accueil) { scroll-behavior: auto; }
  .descendre span { animation: none; }
  .outil, .avancement span, .page-attente .pastille .voyant { animation: none; }
  .avancement span { width: 100%; }
  .bulle::before, .numerotee .carte.volet, .numerotee .carte .no, .numerotee.etapes li::before, .code-bulle .curseur, .code-bulle .statut .voyant { animation: none; }
  .code-bulle .lignes, .volets .volet-int { transition: none; }
  .code-page .curseur, .code-page .statut .voyant, .profil-etat .en-ligne .voyant { animation: none; }
  .code-page .lignes { transition: none; }
  .carte { transition: none; }
  .carte:hover { transform: none; }
  .code-fond .curseur { animation: none; }
  .anime .revele { transition: none; }
  .logo-anime img, .anime .logo-hero.vu img { animation: none; }
  .logo-anime::after { display: none; }
  .marque:hover .logo-anime { transform: none; }
}

/* ================================================================ téléphone
   En dernier dans la feuille, pour passer après les règles des pages.
   La barre du haut tient sur une seule ligne : le logo à gauche, un ou deux boutons courts à droite. */
@media (max-width: 700px) {
  .marque { font-size: 1.02rem; }
  .marque .logo-anime { width: 118px; }
  .barre, .accueil .haut.revele { flex-wrap: nowrap; gap: 8px; padding: 6px 14px; }
  .barre nav, .accueil .haut nav { flex-wrap: nowrap; gap: 6px; }
  .barre nav a, .accueil .haut nav a { white-space: nowrap; }
  .barre nav a[href="/"] { display: none; } /* le logo ramène déjà à l'accueil */
  .barre nav a:not(.bouton) { padding: 0 6px; font-size: .95rem; }
  .barre .bouton.petit, .accueil .haut .bouton.petit { padding: 0 10px; font-size: .9rem; }
  .mot-long { display: none; }
  .barre nav a:has(.mot-long), .accueil .haut nav a:has(.mot-long) { text-transform: capitalize; }
  .hero .page { padding-top: 88px; gap: 32px; }
  .accueil h1 { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .commande, .espace, .acces, .legal { padding-top: 32px; padding-left: 16px; padding-right: 16px; }
  .formulaire fieldset, .panneau { padding-left: 16px; padding-right: 16px; }
  .pied-accueil { justify-content: center; text-align: center; }
  .accueil .pied { justify-content: center; }
}

/* Espace gérant sur téléphone et tablette : le menu devient une barre compacte qui reste en haut de l'écran
   (logo et déconnexion sur une ligne, les pages sur une ligne qui défile du doigt), au lieu d'occuper tout le premier écran. */
@media (max-width: 820px) {
  .menu { position: sticky; top: 0; z-index: 6; flex: 1 1 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 8px 12px; border-bottom: 1px solid var(--trait); }
  .menu .marque { padding: 0; }
  .menu .bouton { grid-row: 1; grid-column: 2; margin-top: 0; min-height: 40px; }
  .menu nav { grid-row: 2; grid-column: 1 / -1; flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .menu nav::-webkit-scrollbar { display: none; }
  .menu nav a { flex: none; min-height: 44px; white-space: nowrap; }
  .menu .liens-legaux { display: none; }
  .contenu { padding: 20px 14px 32px; gap: 18px; }
  .tete h1 { font-size: 1.5rem; }
  .tuile { padding: 16px; }
  .etat-maintenance .bouton { width: 100%; }
  .actions-facture .bouton { flex: 1 1 auto; }
}

/* Bandeau « vérifiez votre compte » : reste visible jusqu'à la vérification. */
.a-verifier { border-color: var(--accent); }
.a-verifier h2 { margin-top: 0; color: var(--accent); }

/* Sous « Statut : connecté » : l'état de vérification de l'e-mail. */
.profil-etat .etat-email { color: #e0a84a; }
.profil-etat .etat-email.verifie { color: var(--accent); }