* { box-sizing: border-box; }

:root {
  /* Navy relevé directement sur le vrai site (couleur des boutons/texte de
     https://www.webfuel.be/joassin), plutôt qu'une couleur inventée. */
  --navy: #133a57;
}

/* html + body en 100% de hauteur : nécessaire pour que le "sticky footer"
   ci-dessous (body en colonne flex) puisse effectivement occuper toute la
   hauteur de l'écran sur une page courte. */
html { height: 100%; }

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background: #fff;
  color: #222;
  /* Retour JOASSIN : champs et police trop grands sur desktop (aucune
     taille explicite auparavant, donc taille par défaut du navigateur,
     16px — plus grande que les champs de formulaire, déjà à 14px). Fixée
     ici pour que tout le texte "de base" (libellés, tableaux, textes
     d'aide...) suive une échelle cohérente et plus compacte. */
  font-size: 14px;
  /* Marge de respiration après le pied de page : sans elle, quand le
     contenu de la page fait pile la hauteur de la fenêtre, certains
     navigateurs/OS (barre des tâches Windows en superposition, barre
     d'adresse mobile, etc.) empêchent de faire défiler assez bas pour voir
     le bas du bandeau navy en entier. Ce padding garantit toujours un peu
     de défilement possible après le pied de page. */
  padding-bottom: 40px;
  /* Pied de page collé en bas de l'écran (demandé par Serge le 06/09/2026,
     capture d'écran de la page de maintenance : le bandeau navy remontait
     juste sous le contenu au lieu de rester en bas de la fenêtre). Toutes
     les pages partagent la même structure : .bandeau, [nav], .conteneur,
     .separateur, .pied-page, tous enfants directs de body — body en
     colonne flex, min-height = hauteur de l'écran, et .conteneur (le
     contenu propre à chaque page, cf. plus bas) qui absorbe l'espace
     restant pousse le reste vers le bas quand le contenu est court, tout
     en laissant la page défiler normalement quand le contenu dépasse la
     hauteur de l'écran (flex ne limite pas la hauteur totale, seulement la
     hauteur minimale). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* En-tête : fond blanc, logo à gauche, titre de page (pastille navy) à
   droite — reprend la disposition du vrai site JOASSIN (logo + boîte
   "Commander votre Mazout" sur la même ligne), pas un bandeau plein qui
   couvre toute la largeur. */
.bandeau {
  background: #fff;
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid #e2e2e2;
}

.logo-lien { display: flex; align-items: center; }
.bandeau img.logo { height: 60px; width: auto; display: block; }

.titre-page {
  background: var(--navy);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  padding: 14px 28px;
  border-radius: 8px;
  text-align: center;
}

/* Remplace l'ancien "titre-page" ("Commander votre Mazout" en pastille
   navy, qui ressemblait à un bouton) sur les pages client — demandé par
   Serge le 11/09/2026 : "ça perturbe certains clients qui tentent de
   cliquer dessus". Reprend plutôt les libellés du vrai menu du site JOASSIN
   (webfuel.be/joassin), mais SANS les petites flèches de sous-menu et SANS
   aucune interactivité (aria-hidden, pas de lien ni de curseur pointeur) :
   uniquement décoratif, pour garder l'aspect du vrai site sans donner
   l'impression d'un menu cliquable qui ne l'est pas. */
.menu-decoratif {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 26px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  flex: 1 1 auto;
}

.login-info { font-size: 14px; color: var(--navy); }
.login-info a { color: var(--navy); margin-left: 10px; }

/* Menu principal (après login) : liens simples façon Feedback Tracker,
   plutôt que des gros boutons — Coordonnées / Historique / Nouvelle
   commande, toujours visible sur les pages internes une fois connecté. */
.menu-principal {
  display: flex;
  gap: 28px;
  padding: 10px 30px;
  background: #f5f6f7;
  border-bottom: 1px solid #e2e2e2;
  flex-wrap: wrap;
}

.menu-principal a {
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.menu-principal a:hover,
.menu-principal a.actif { text-decoration: underline; }

/* flex: 1 0 auto (et non 1 1 auto) : absorbe l'espace vertical restant sur
   une page courte, mais ne se laisse jamais compresser sous sa taille
   naturelle sur une page longue — cf. commentaire sur body ci-dessus
   (sticky footer). Les pages qui surchargent max-width en style inline
   (ex. historique.ejs) ne sont pas affectées, ce n'est qu'une propriété
   supplémentaire. */
.conteneur { padding: 30px; max-width: 1080px; margin: 0 auto; flex: 1 0 auto; }

/* Bandeau photos défilant (pages d'entrée : bienvenue, login) — reprend les
   3 photos utilisées comme fond tournant sur le vrai site (déjà présentes,
   simplement affichées une par une sans transition côté ancien site ; on
   garde ici un léger fondu, plus agréable). */
.carrousel {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 330px;
  margin: 0 auto 30px;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #d9d9d9;
}

.carrousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.carrousel img.actif { opacity: 1; }

.carte + .carrousel,
.panneau-login + .carrousel {
  margin-top: 24px;
}

.carte {
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px 30px;
  max-width: 500px;
  margin: 0 auto;
}

label { display: block; margin-top: 12px; font-weight: bold; color: var(--navy); font-size: 13px; }
/* Champs resserrés (retour JOASSIN, cf. plus haut) : padding et police
   réduits par rapport à la version précédente (8px / 14px), en gardant
   1px de bordure et une hauteur encore confortable au clic/tactile. */
input, select, textarea {
  width: 100%;
  padding: 6px 8px;
  margin-top: 4px;
  box-sizing: border-box;
  border: 1px solid #aaa;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  background: white;
}

textarea { resize: vertical; }

/* Champ court, pour un petit nombre de chiffres (ex. numéro de client
   JOASSIN, numéro de note d'envoi) — sans ça, ces champs prennent toute la
   largeur de la carte comme un champ adresse, alors qu'ils ne contiennent
   que 7-8 caractères (retour JOASSIN, cf. journal). */
.champ-court { max-width: 160px; }

h4 { color: var(--navy); margin-bottom: 0; }

/* Boutons : gris clair, bord et texte navy, coins arrondis — reprend le
   style exact des boutons "Login" / "Je désire m'inscrire" du vrai site
   (fond #dcdcdc, bordure 1px navy, radius 6px), plutôt qu'un bouton plein
   navy inventé. */
button, .bouton {
  margin-top: 20px;
  padding: 10px 22px;
  background: #dcdcdc;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

button:hover, .bouton:hover { background: #cfcfcf; }

.erreur { color: #b00020; font-weight: bold; }

/* Champ mot de passe avec bouton "oeil" pour afficher/masquer la saisie. */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 40px; }
.champ-mdp .oeil {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 4px 6px;
  background: none;
  border: none;
  color: #666;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.champ-mdp .oeil:hover { background: none; color: #222; }

/* Liste à cocher en direct de la politique de mot de passe (cf.
   public/js/mdp-force.js) — un cercle neutre par défaut, coché en vert dès
   que le critère est respecté pendant la saisie. */
.liste-criteres-mdp {
  list-style: none;
  margin: 6px 0 16px;
  padding: 0;
  font-size: 13px;
}
.critere-mdp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  color: #666;
}
.critere-mdp-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #999;
}
.critere-mdp.critere-mdp-ok {
  color: #1a7a1a;
}
.critere-mdp.critere-mdp-ok .critere-mdp-icone {
  color: #1a7a1a;
  font-weight: bold;
}

/* Bouton "Générer un mot de passe" (public/js/mdp-generateur.js) — variante
   secondaire (fond blanc) du bouton standard, plus petite, pour ne pas
   concurrencer visuellement le bouton "Valider" du formulaire. Le mot de
   passe généré s'affiche ensuite à côté en clair (illisible à deviner de
   toute façon) avec un bouton pour le copier. */
.bouton-generer-mdp {
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 400;
}
.mdp-genere {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0 10px;
  font-size: 13px;
  vertical-align: middle;
}
.mdp-genere code {
  background: #eef3f7;
  border: 1px solid #cdd8e0;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--navy);
}
.bouton-copier-mdp {
  margin-top: 0;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 400;
  background: #fff;
}
.copie-ok { color: #1a7a1a; font-weight: bold; }

@media (max-width: 560px) {
  .bouton-generer-mdp { width: auto; }
  .mdp-genere { margin: 8px 0 0; }
}

/* Liste de suggestions "maison" (Code postal <-> Ville), à la place d'un
   <datalist> natif : affichée/masquée entièrement en JavaScript, pour
   garantir qu'elle apparaît immédiatement dès qu'il y a des résultats,
   sans dépendre du focus ou du comportement (peu fiable d'un navigateur à
   l'autre) d'un <datalist>. */
.champ-suggestions { position: relative; }

.liste-suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.liste-suggestions.visible { display: block; }

.liste-suggestions li {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
}

.liste-suggestions li:hover { background: #eef4fa; }

table.fiche { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.fiche td { padding: 6px 4px; border-bottom: 1px solid #eee; }
table.fiche td:first-child { color: #555; width: 160px; }

/* Page Gestion (/gestion) : liste des produits, seuls les prix sont éditables
   (le reste vient du backoffice WinDev et s'affiche en lecture seule). */
table.table-produits { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.table-produits th, table.table-produits td {
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 14px;
}
table.table-produits th { color: var(--navy); }
table.table-produits input[type="text"] {
  width: 90px;
  margin-top: 0;
  padding: 6px;
}

.table-scroll { overflow-x: auto; }

/* ==========================================================================
   Page de connexion (login.ejs) : panneau à deux colonnes reprenant la
   disposition du vrai site — "J'ai déjà un compte client" à gauche,
   "Je n'ai pas encore de compte client" à droite, dans un seul encadré
   gris clair.
   ========================================================================== */
.panneau-login {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  max-width: 1080px;
  margin: 0 auto 30px;
  overflow: hidden;
}

.panneau-login .colonne {
  flex: 1;
  padding: 20px 26px;
}

.panneau-login .colonne + .colonne {
  border-left: 1px solid #ccc;
}

.panneau-login h2 {
  color: var(--navy);
  font-size: 17px;
  margin: 0 0 16px;
}

.panneau-login .ligne-login {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.panneau-login .champs { flex: 1; min-width: 200px; }

.aide-bulle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2a6fb0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin-left: 6px;
  cursor: help;
  vertical-align: middle;
}

.lien-oublie { display: block; margin-top: 14px; font-size: 14px; }

.case-memoriser {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.case-memoriser input { width: auto; margin: 0; }

/* ==========================================================================
   Pied de page : bandeau navy avec logo (petit) à gauche et coordonnées
   JOASSIN à droite, séparé du contenu par une fine barre grise — reprend
   la disposition du bas du vrai site.
   ========================================================================== */
.separateur { height: 6px; background: #9a9a9a; }

.pied-page {
  background: var(--navy);
  color: #fff;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.pied-page img.logo { height: 46px; width: auto; }

.pied-gauche { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.pied-copyright { font-size: 13px; line-height: 1.7; }
.pied-copyright a { text-decoration: underline; }

.pied-page .coordonnees { text-align: right; font-size: 14px; line-height: 1.5; }
.pied-page .coordonnees strong { font-weight: 700; }
.pied-page a { color: #fff; }

/* ==========================================================================
   Page Nouvelle commande (/nouvelle-commande) : deux colonnes sur desktop
   (produit + livraison à gauche, antigel + citerne à droite), une colonne
   empilée en dessous de 900px (cf. media query dédiée plus bas). Étape
   cosmétique uniquement : le calcul des prix/totaux et la logique métier
   (règles citerne, adresses enregistrées, etc.) viendront dans une
   prochaine itération, une fois cette mise en page validée.
   ========================================================================== */
.commande-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.commande-colonne { display: flex; flex-direction: column; gap: 20px; }

.bloc-commande {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 18px 20px;
  background: #fafafa;
}

.bloc-commande h3 { color: var(--navy); font-size: 16px; margin: 0 0 14px; }

.bloc-produit-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

/* Pastille ronde navy à la place des vraies photos produit (pas encore
   disponibles côté site) — garde le repère visuel "logo produit" du site
   d'origine sans dépendre d'un fichier image externe. */
.badge-produit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  flex-shrink: 0;
}

.badge-produit-secondaire { background: #2a6fb0; font-size: 10px; }

/* Vrai logo Mazout ECO+ Joassin (demandé par Serge, 03/09/2026), en
   remplacement de la pastille navy texte utilisée en attendant que le
   fichier soit disponible (cf. commentaire ci-dessus) — uniquement pour le
   Gasoil ECO+ ; l'Antigel garde sa pastille .badge-produit-secondaire. */
.lien-logo-eco-plus { display: inline-flex; flex-shrink: 0; }
.logo-eco-plus { height: 54px; width: auto; }

.lien-info { font-size: 13px; display: inline-block; margin: 4px 0 10px; }

.ligne-champs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Aligne les champs d'une même ligne entre eux même quand un des libellés
   est plus long et passe sur 2 lignes (ex. "Anti-débordement :", "Total
   commande HTVA :") — sans cette réservation de hauteur, le champ dont le
   libellé tient sur une seule ligne remonte et ne s'aligne plus avec ses
   voisins. Hauteur ET interligne fixés ensemble (pas juste une hauteur
   minimum) pour que 2 lignes de texte occupent exactement cette hauteur,
   quel que soit le nombre de lignes réellement utilisé. */
.ligne-champs > div > label {
  height: 38px;
  line-height: 19px;
  overflow: hidden;
}

.champ-lecture input[readonly] { background: #eee; color: #444; }

.ligne-champs small { display: block; margin-top: 4px; color: #666; font-size: 12px; }

#detailAdresseLivraison input[readonly] { background: #eee; color: #444; }
/* Étendu de "select" à "input"/"textarea" (demandé par Serge, 04/09/2026) :
   le champ Capacité (un <input>, pas un <select>) restait blanc/actif à
   l'oeil une fois désactivé, contrairement aux listes déroulantes juste à
   côté — incohérence visuelle sur la fiche citerne. */
#detailCiterne select:disabled,
#detailCiterne input:disabled,
#detailCiterne textarea:disabled { background: #eee; color: #444; }

/* Page /nouvelle-commande resserrée verticalement (demandé par Serge,
   31/08 puis 03/09/2026) : ses libellés sont tous courts et ne passent
   jamais sur 2 lignes, contrairement à d'autres usages de .ligne-champs
   (ex. récap de /finalisation-commande) qui ont besoin de la hauteur de
   38px réservée par défaut (cf. commentaire plus haut sur cette règle) —
   ici elle ne fait que gonfler inutilement chaque ligne de champ. Scopé à
   #formNouvelleCommande (id du <form>) pour ne pas affecter les autres
   pages qui partagent .bloc-commande/.ligne-champs/.commande-grille. Même
   police partout, seuls les espacements changent. */
#formNouvelleCommande .bloc-commande { padding: 14px 20px; }
#formNouvelleCommande .bloc-commande h3 { margin-bottom: 10px; }
#formNouvelleCommande label { margin-top: 8px; }
#formNouvelleCommande .ligne-champs > div > label { height: auto; overflow: visible; }
#formNouvelleCommande textarea { margin-bottom: 0; }
#formNouvelleCommande > .bloc-commande + .bloc-commande,
#formNouvelleCommande > .bloc-commande + .commande-grille,
#formNouvelleCommande > .commande-grille + .bloc-commande,
#formNouvelleCommande > .commande-grille + .commande-grille {
  margin-top: 14px;
}

/* Fenêtre modale générique (recommandations citerne, etc.) : fond grisé
   plein écran + boîte centrée, sans dépendance JS externe. */
.modale-fond {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modale-contenu {
  background: #fff;
  border-radius: 6px;
  padding: 22px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.modale-contenu p { margin: 0 0 18px; line-height: 1.5; color: var(--navy); }
.modale-actions { text-align: right; }
.modale-actions .bouton { width: auto; padding: 8px 24px; }

/* Logo In4Fuels inséré à la place de l'hyperlien texte "voir Informazout"
   (demandé par Serge, 03/09/2026) : cliquable dans la modale des
   recommandations citerne, ouvre la page législation In4Fuels dans un
   nouvel onglet. Hauteur calée sur le texte environnant pour rester
   discret dans la phrase. */
.lien-logo-in4fuels { display: inline-block; vertical-align: middle; line-height: 0; }
.logo-in4fuels { height: 16px; width: auto; vertical-align: middle; }

/* Champ mis en évidence (jaune pâle) pour signaler une saisie obligatoire —
   reprend le repère visuel du champ "Quantité" sur l'ancien site. */
.champ-attention { background: #fdf6d8 !important; }

.case-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: normal;
  margin-top: 4px;
  color: #222;
}
.case-option input { width: auto; margin: 3px 0 0; }

.produit-antigel { display: flex; gap: 16px; align-items: flex-start; }

.prix-antigel { font-weight: bold; color: var(--navy); font-size: 14px; margin: 6px 0 0; }

.choix-adresse {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.choix-adresse label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  color: #222;
}
.choix-adresse input { width: auto; margin: 0; }

.totaux { margin-top: 16px; }
.totaux input[readonly] { font-weight: bold; }

/* Zones qui s'estompent (sans disparaître) selon les cases cochées, via le
   petit script en bas de page — purement visuel à ce stade. */
.zone-desactivable { transition: opacity 0.15s ease; }
.zone-desactivable.desactivee { opacity: 0.45; pointer-events: none; }

.action-continuer { text-align: center; margin-top: 24px; }
.action-continuer button { min-width: 220px; }

/* Le passage en une seule colonne se fait un peu plus tôt (900px) que le
   point de rupture général (600px) : ce formulaire est plus dense que les
   autres pages du site et reste illisible en deux colonnes sur une
   tablette portrait. */
@media (max-width: 900px) {
  .commande-grille { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page Finalisation de la commande (/finalisation-commande) : récapitulatif,
   planification de livraison (interrupteurs par demi-journée), notification
   et choix de paiement. Étape cosmétique uniquement, comme la page
   précédente — le sélecteur "auto-fit" des cartes-jour et le point de
   rupture à 900px du bloc ci-dessus suffisent à rendre l'ensemble lisible
   du desktop au smartphone sans media query supplémentaire dédiée.
   ========================================================================== */
form > .bloc-commande + .bloc-commande,
form > .bloc-commande + .commande-grille,
form > .commande-grille + .bloc-commande {
  margin-top: 20px;
}

table.table-recap { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.table-recap th, table.table-recap td {
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 14px;
}
table.table-recap th { color: var(--navy); }
/* .ligne-secondaire grisait la ligne antigel du récapitulatif — retiré
   (demandé par Serge, 03/09/2026) : les deux lignes produit doivent être
   de la même couleur (noir), pas de hiérarchie visuelle entre elles. */
/* Colonnes de montants alignées à droite (demandé par Serge, 03/09/2026) :
   avec un nombre de décimales fixe par colonne (formatMontant(), cf.
   lib/format.js), l'alignement à droite aligne visuellement les montants
   sur la virgule décimale. Seule la colonne "Produits" (1re) reste à
   gauche. */
table.table-recap th:not(:first-child), table.table-recap td:not(:first-child) {
  text-align: right;
}
table.table-recap tfoot td {
  font-weight: bold;
  border-top: 2px solid #ccc;
  border-bottom: none;
  padding-top: 10px;
}

/* Historique des commandes (historique.ejs) : lignes cliquables pour
   afficher le détail de la commande en dessous du tableau — demandé par
   Serge le 04/09/2026. Même teinte que .liste-suggestions li:hover, pour
   rester cohérent avec le reste du site. */
tr.ligne-historique { cursor: pointer; }
tr.ligne-historique:hover td { background: #eef4fa; }
tr.ligne-historique.ligne-selectionnee td { background: #dceafb; }

.planification {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.carte-jour {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  background: #fff;
  text-align: center;
}

.carte-jour-entete { margin-bottom: 10px; }
.jour-nom { display: block; font-weight: 700; color: var(--navy); font-size: 14px; }
.jour-numero { display: block; font-weight: 700; font-size: 22px; line-height: 1.2; }
.jour-mois { display: block; font-size: 12px; color: #777; }

.creneau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 8px;
}

.compteur-creneaux { font-weight: bold; color: #1a7a1a; margin: 6px 0 0; }
.compteur-creneaux.compteur-insuffisant { color: #b00020; }

/* Interrupteur ON/OFF (case à cocher habillée en curseur coulissant), à la
   place des cases à cocher brutes de l'ancien site — reprend le style
   demandé par Serge (curseur qui glisse, vert quand actif). */
.interrupteur { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.interrupteur input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interrupteur .curseur {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.interrupteur .curseur::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.interrupteur input:checked + .curseur { background: #2e9e4f; }
.interrupteur input:checked + .curseur::before { transform: translateX(18px); }
.interrupteur input:focus-visible + .curseur { outline: 2px solid var(--navy); outline-offset: 2px; }

.avertissement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff8e6;
  border: 1px solid #e8c766;
  border-radius: 6px;
  padding: 14px 16px;
  color: #6b5300;
}
.icone-avertissement { color: #c99a00; flex-shrink: 0; margin-top: 2px; }
.avertissement p { margin: 0; font-size: 13px; line-height: 1.5; }

.case-cgv {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 14px;
  background: #fff;
}

.actions-finalisation {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
/* Équivalent du bloc d'actions, mais affiché en haut de la page (juste le
   bouton "Retour page précédente", pas de bouton "Continuer" en double) :
   marges réduites vu sa position, pas de retrait par rapport au titre. */
.actions-finalisation-haut {
  margin-top: 10px;
  margin-bottom: 20px;
}
.actions-finalisation-haut .bouton { margin-top: 0; }
.bouton-secondaire { background: #fff; }

/* Page "bienvenue" (migration login numéro -> identifiant, cf.
   views/bienvenue.ejs) : mise en avant demandée par Serge (11/09/2026,
   mockup annoté) pour mieux orienter le client, souvent perdu entre
   "j'ai déjà mon identifiant" et "je dois encore le créer". */
.texte-securite { color: #b00020; font-weight: bold; }
.aide-bienvenue { font-weight: bold; margin-top: 18px; }
.actions-bienvenue {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
.actions-bienvenue .bouton,
.actions-bienvenue button { margin-top: 0; }
/* Bordure rouge (comme sur le mockup) pour bien distinguer ce second bouton
   de "Continuer" : un client déjà réinscrit ne doit pas cliquer dessus par
   réflexe. */
.bouton-reinscription { border-color: #b00020; color: #b00020; }
.bouton-reinscription:hover { background: #fdeaea; }

/* ==========================================================================
   Responsive (mobile-first prévu dès le départ du projet — cf. cahier des
   charges initial). Un seul point de rupture à 600px suffit vu la simplicité
   des pages actuelles (formulaires en une colonne, pas de tableau complexe).
   ========================================================================== */
@media (max-width: 600px) {
  .bandeau {
    padding: 12px 16px;
    justify-content: center;
    text-align: center;
  }

  .titre-page { font-size: 15px; padding: 10px 18px; }

  .menu-decoratif { font-size: 12px; gap: 6px 14px; }

  .bandeau img.logo { height: 42px; }

  .login-info { width: 100%; text-align: center; }

  .menu-principal { justify-content: center; text-align: center; padding: 10px 16px; gap: 18px; }

  .conteneur { padding: 14px; }

  /* Empêche Safari iOS de zoomer automatiquement sur un champ au moment du
     focus (ça n'arrive qu'en dessous de 16px) — un des vrais irritants de
     l'ancien site sur smartphone, à éviter absolument sur celui-ci. */
  input, select, textarea { font-size: 16px; }

  .carte {
    max-width: 100%;
    padding: 16px;
  }

  .carrousel { height: 160px; }

  .panneau-login { flex-direction: column; }
  .panneau-login .colonne + .colonne { border-left: none; border-top: 1px solid #ccc; }
  .panneau-login .ligne-login { flex-direction: column; align-items: stretch; }

  table.fiche td:first-child { width: auto; padding-right: 10px; }

  table.fiche, table.fiche tr, table.fiche td { display: block; width: 100%; }
  table.fiche td:first-child { padding-bottom: 0; font-weight: bold; border-bottom: none; }
  table.fiche td:last-child { padding-top: 2px; }

  button, .bouton { width: 100%; }
  /* Le bouton "oeil" (.oeil) est un <button> positionné en absolu par
     dessus le champ mot de passe (cf. .champ-mdp .oeil) : la règle
     ci-dessus le mettrait sinon à width:100%, donc à la largeur ENTIÈRE
     du champ (position absolute + right:6px + width:100%) — le rendant
     invisible mais cliquable sur toute la zone du champ. Sur mobile, ça
     empêchait le clavier de s'ouvrir (le clic touchait le bouton, jamais
     le vrai champ en dessous), sauf en paysage où ce point de rupture
     n'est plus actif (>600px de large). Corrigé le 06/09/2026, signalé
     par Serge. */
  .champ-mdp .oeil { width: auto; }

  .toast { max-width: calc(100% - 40px); }

  .smtp-col { min-width: 100%; }

  .pied-page { flex-direction: column; text-align: center; }
  .pied-gauche { flex-direction: column; }
  .pied-page .coordonnees { text-align: center; }

  /* Nouvelle commande : les grilles de champs (3 colonnes) et les blocs
     produit/antigel passent en une seule colonne, comme le reste du
     formulaire. */
  .ligne-champs { grid-template-columns: 1fr; }
  .bloc-commande { padding: 14px 16px; }
  .produit-antigel { flex-direction: column; align-items: flex-start; }
  .bloc-produit-entete { gap: 10px; }

  /* Finalisation de commande : boutons empilés (Continuer reste accessible
     au pouce sans avoir à viser une petite cible à côté d'une autre), et
     cartes-jour un peu plus compactes. */
  .actions-finalisation { flex-direction: column; }
  .actions-finalisation .bouton,
  .actions-finalisation button { width: 100%; }
  .actions-bienvenue { flex-direction: column; }
  .planification { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .carte-jour { padding: 10px 8px; }
}