/* Personnalisations Beaufrère.
   Fichier séparé de handyfix.css : une mise à jour du template ne l'écrasera pas. */

/* --- Bouton de dépannage urgent -------------------------------------------
   Repérable sans écraser le menu : dans l'en-tête la place est comptée, donc
   une seule ligne courte. La version --lg, plus bavarde, sert dans le corps
   des pages où l'espace ne manque pas. */

.urgence-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #d92d20;
  color: #fff;
  padding: 9px 16px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.25s ease;
  position: relative;
}

.urgence-btn:hover,
.urgence-btn:focus {
  background: #b42318;
  color: #fff;
}

.urgence-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  flex-shrink: 0;
  position: relative;
}

/* La pulsation est portée par un pseudo-élément : elle n'agrandit jamais la
   zone cliquable et ne décale rien autour du bouton. */
.urgence-btn__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: urgence-pulse 2s ease-out infinite;
  pointer-events: none;
}

.urgence-btn__label { display: block; }
.urgence-btn__label small { display: none; }

/* Version développée pour le corps des pages. */
.urgence-btn--lg {
  padding: 13px 24px;
  font-size: 15px;
  gap: 12px;
}

.urgence-btn--lg .urgence-btn__icon {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.urgence-btn--lg .urgence-btn__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.urgence-btn--lg .urgence-btn__label small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  text-transform: none;
  letter-spacing: 0;
}

@keyframes urgence-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .urgence-btn__icon::after { animation: none; }
}

/* Le bouton colle aux icônes recherche/compte du template, qui n'ont pas de
   marge à droite : on la pose ici plutôt que de toucher handyfix.css. */
.main-header__right .urgence-btn {
  margin-left: 16px;
}

/* Entre 768 et 1400px le menu devient serré : on ne garde que l'icône. */
@media (min-width: 768px) and (max-width: 1399px) {
  .main-header__right .urgence-btn { padding: 9px 12px; font-size: 0; gap: 0; }
  .main-header__right .urgence-btn__icon { font-size: 12px; }
}

/* Sous 768px il ferait doublon avec la barre fixe du bas, et il écrasait le
   logo : on le retire complètement de l'en-tête. */
@media (max-width: 767px) {
  .main-header__right .urgence-btn { display: none; }

  /* Le logo reprend la place libérée sans déborder sous les icônes. */
  .main-header__logo a,
  .main-header__logo > a { max-width: 100%; }
}

/* --- Barre d'urgence fixe sur mobile --------------------------------------
   Sur téléphone, l'en-tête disparaît au défilement : on garde un accès
   permanent à l'appel, c'est le geste le plus utile sur ce site. */

.urgence-mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  .urgence-mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #d92d20;
    color: #fff;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  }

  .urgence-mobile-bar:hover,
  .urgence-mobile-bar:focus {
    color: #fff;
    background: #b42318;
  }

  /* Évite que la barre masque le bas de page. */
  body { padding-bottom: 56px; }
}


/* --- Grille de services centrée quand il y en a peu ------------------------ */

.service-two__grid--centered {
  justify-content: center;
}


/* --- Logo ------------------------------------------------------------------
   Le client voulait les deux lignes rapprochées : un bloc centré avec un
   interlignage serré, et non réparti sur toute la hauteur de l'icône. */

.bf-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.bf-logo__icon {
  height: 42px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.bf-logo__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.bf-logo__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}

.bf-logo__tagline {
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sur mobile la barre est étroite : on réduit plutôt que de laisser le texte
   passer sous les icônes de recherche et de compte. */
@media (max-width: 767px) {
  .bf-logo { gap: 7px; }
  .bf-logo__icon { height: 34px; }
  .bf-logo__name { font-size: 15px; letter-spacing: 0.3px; }
  .bf-logo__tagline { font-size: 6.5px; }
}

@media (max-width: 400px) {
  .bf-logo__tagline { display: none; }
}

/* --- Pages juridiques ------------------------------------------------------
   Texte long : on privilégie la lisibilité (largeur de ligne limitée,
   interlignage confortable) sur l'esthétique du template. */

.legal-content {
  max-width: 820px;
  margin: 0 auto;
}

.legal-content h2 {
  font-size: 22px;
  margin-top: 44px;
  margin-bottom: 14px;
  scroll-margin-top: 120px;
}

.legal-content h2:first-of-type { margin-top: 0; }

.legal-content h3 {
  font-size: 17px;
  margin-top: 26px;
  margin-bottom: 10px;
}

.legal-content p,
.legal-content li {
  line-height: 1.85;
}

.legal-content ul { padding-left: 20px; margin-bottom: 18px; }
.legal-content li { margin-bottom: 8px; }

.legal-content table {
  width: 100%;
  margin: 20px 0 26px;
  border-collapse: collapse;
}

.legal-content th,
.legal-content td {
  border: 1px solid #e3e8ef;
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
}

.legal-content th { background: #f5f8fc; font-weight: 600; }

/* Encadré signalant une information que le client doit encore fournir. */
.legal-todo {
  background: #fff8e6;
  border-left: 4px solid #e0a800;
  padding: 16px 20px;
  border-radius: 4px;
  margin-bottom: 32px;
  font-size: 15px;
}

.legal-maj {
  color: #6b7a90;
  font-size: 14px;
  margin-bottom: 36px;
}

/* --- Retour en haut --------------------------------------------------------
   Remplace le bouton jQuery du template, qui ne survivait pas aux navigations
   côté client de Next. */

.bf-haut {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 999;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(15, 53, 103, 0.22);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.bf-haut[data-visible="false"] {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  pointer-events: none;
}

.bf-haut[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.bf-haut:hover { transform: scale(1.08); }

/* La pastille blanche laisse apparaître l'anneau de progression autour. */
.bf-haut__pastille {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: #16324A;
  display: grid;
  place-items: center;
  font-size: 15px;
}

/* Sur mobile, la barre d'urgence occupe le bas de l'écran. */
@media (max-width: 767px) {
  .bf-haut { right: 16px; bottom: 74px; width: 46px; height: 46px; }
  .bf-haut__pastille { width: 37px; height: 37px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-haut, .bf-haut:hover { transition: none; transform: none; }
}

/* --- Cartes de même hauteur ------------------------------------------------
   Le template laisse chaque carte prendre la hauteur de son texte, ce qui
   donne une grille en escalier dès que les descriptions ont des longueurs
   différentes. On étire les colonnes et on laisse la carte remplir la sienne.
   Le texte reste calé en haut : seul le fond s'allonge. */

.service-two .row > [class*="col-"],
.hero-service-two .row > [class*="col-"],
.service-page .row > [class*="col-"] {
  display: flex;
}

.service-two__item,
.hero-service-two__item,
.service-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Le bloc de texte occupe la place restante : les boutons éventuels en bas
   se retrouvent alignés d'une carte à l'autre. */
.service-two__content,
.service-card__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.service-two__link,
.service-card__btn {
  margin-top: auto;
}

/* Blocs « engagements » de la page Professionnels. */
.about-two .row > [class*="col-"] > .service-sidebar__single {
  height: 100%;
}

/* --- Cartes équipe ---------------------------------------------------------
   Le carrousel affiche autant de colonnes qu'il y a de membres (jusqu'à 3).
   Avec deux membres, chaque carte prenait donc la moitié de la largeur et
   devenait énorme. On plafonne à la largeur prévue par le template (370 px)
   et on centre, quel que soit le nombre de techniciens en base. */

.team-two__item {
  max-width: 370px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Formulaire newsletter -------------------------------------------------
   Le template ne stylise que `input[type=text]`. On utilise `type=email` pour
   la validation navigateur et le clavier @ sur mobile : il faut donc reprendre
   les mêmes règles pour ce type, sinon le champ s'affiche nu. */

.cta-two__form input[type="email"] {
  width: calc(100% - 182px);
  height: 100%;
  padding: 0 20px 0 44px;
  border: none;
  outline: none;
  font-family: var(--handyfix-font, "Rubik", serif);
  font-size: 16px;
  color: var(--handyfix-text, #616670);
  background-color: var(--handyfix-white, #fff);
  border-radius: 5px;
}

.cta-two__form input[type="email"]::placeholder {
  color: var(--handyfix-text, #616670);
}

/* Même correctif pour le champ email du pied de page. */
.footer-widget__newsletter input[type="email"] {
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
}

/* --- Parcours de demande ---------------------------------------------------
   Une seule page pour le contact et le devis : on commence par une question,
   et on n'affiche que ce qui sert ensuite. Cela évite le mur de champs qui
   fait fuir, et sépare naturellement celui qui veut filmer de celui qui
   préfère écrire. */

.parcours { max-width: 860px; margin: 0 auto; }

.parcours__question {
  font-size: 26px;
  text-align: center;
  margin-bottom: 32px;
}

/* --- Fil d'étapes --- */
.parcours__fil {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  flex-wrap: wrap;
}

.parcours__fil__etape {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  background: #f0f5fa;
  color: #8a97a8;
  transition: background 0.25s ease, color 0.25s ease;
}

.parcours__fil__etape[data-etat="actif"] { background: #16324A; color: #fff; }
.parcours__fil__etape[data-etat="fait"]  { background: #d8f3e3; color: #1c7a4a; }

.parcours__fil__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  flex-shrink: 0;
}

.parcours__fil__etape[data-etat="a-venir"] .parcours__fil__num { background: #dde5ee; }
.parcours__fil__etape[data-etat="fait"] .parcours__fil__num { background: rgba(28, 122, 74, 0.18); }

@media (max-width: 575px) {
  .parcours__fil__label { display: none; }
  .parcours__fil__etape { padding: 8px 12px; }
}

/* --- Cartes de choix --- */
.parcours__choix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.parcours__choix--deux { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 767px) {
  .parcours__choix,
  .parcours__choix--deux { grid-template-columns: 1fr; }
}

.parcours__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.parcours__carte:hover,
.parcours__carte:focus-visible {
  border-color: #2C6FB0;
  box-shadow: 0 8px 26px rgba(22, 50, 74, 0.1);
  transform: translateY(-3px);
}

.parcours__carte__icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eaf3fb;
  color: #2C6FB0;
  font-size: 21px;
}

.parcours__carte__titre { font-size: 18px; font-weight: 700; color: #16324A; }
.parcours__carte__texte { font-size: 14.5px; line-height: 1.65; color: #616670; }

.parcours__carte--urgence { border-color: #f3c9c5; }
.parcours__carte--urgence:hover { border-color: #d92d20; }
.parcours__carte--urgence .parcours__carte__icone { background: #fdeceb; color: #d92d20; }
.parcours__carte__tel { font-weight: 700; color: #d92d20; font-size: 17px; }

.parcours__carte__marque {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #d8f3e3;
  color: #1c7a4a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
}

/* --- Blocs du formulaire --- */
.parcours__bloc {
  background: #f7fafd;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 26px;
}

.parcours__camera-repos { text-align: center; }
.parcours__label { display: block; font-weight: 600; margin-bottom: 10px; font-size: 15px; }
.parcours__aide { font-size: 14px; color: #6b7a90; line-height: 1.65; margin-top: 14px; }
.parcours__ok { color: #1c7a4a; font-size: 14px; font-weight: 600; }

/* La zone vidéo garde une hauteur même avant que le flux ne démarre : sans
   rapport imposé, l'élément <video> vide s'effondre à zéro et le visiteur ne
   voit qu'un cadre gris. Format paysage sur écran large, portrait sur mobile,
   où l'on filme téléphone à la verticale. */
.parcours__video {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #0d1b2a;
}

.parcours__video video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0d1b2a;
}

@media (max-width: 767px) {
  .parcours__video video { aspect-ratio: 3 / 4; }
  .parcours__bloc { padding: 16px; }
  .parcours__question { font-size: 21px; margin-bottom: 24px; }
  .parcours__carte { padding: 22px 18px; }
}

.parcours__chrono {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: #d92d20;
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
}

.parcours__case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.6;
}

.parcours__case input { margin-top: 5px; flex-shrink: 0; }

.parcours__retour {
  background: none;
  border: none;
  padding: 0;
  color: #6b7a90;
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
}

.parcours__retour:hover { color: #16324A; }

@media (prefers-reduced-motion: reduce) {
  .parcours__carte, .parcours__carte:hover { transition: none; transform: none; }
}


/* --- Listes déroulantes ----------------------------------------------------
   Le template stylise les input et textarea, mais pas les `select` : il passe
   par le greffon bootstrap-select, que nous n'utilisons pas. Le menu natif
   apparaissait donc brut, à côté de champs gris et hauts.

   On reprend exactement les mêmes valeurs que `.form-one input[type=text]`,
   et on redessine la flèche, que `appearance: none` supprime. */

.form-one select {
  display: block;
  width: 100%;
  height: 50px;
  background-color: var(--handyfix-gray, #F6F6F6);
  color: var(--handyfix-text, #616670);
  font-size: 16px;
  font-weight: 400;
  font-family: inherit;
  border: none;
  outline: none;
  padding-left: 30px;
  padding-right: 48px;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23616670' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
}

.form-one select:focus {
  outline: 2px solid #2C6FB0;
  outline-offset: -2px;
}

/* Sur un select natif, le placeholder est une option vide : on la grise pour
   qu'elle se distingue des vrais choix. */
.form-one select:invalid,
.form-one select option[value=""] {
  color: #8a97a8;
}

/* --- Étiquettes d'état (site public) ---------------------------------------
   Le tableau de bord admin a ses propres utilitaires (bg-info-focus,
   text-secondary-light…) qui n'existent PAS dans le CSS du site. Les employer
   sur une page publique ne produit rien : le texte s'affiche nu. D'où ces
   classes dédiées, préfixées pour éviter toute confusion. */

.bf-etiquette {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.bf-etiquette--info    { background: #e4f1fb; color: #1d5f96; }
.bf-etiquette--attente { background: #fdf2dc; color: #8a6116; }
.bf-etiquette--succes  { background: #d8f3e3; color: #1c7a4a; }
.bf-etiquette--urgent  { background: #fdeceb; color: #b42318; }
.bf-etiquette--neutre  { background: #eef2f6; color: #6b7a90; }

.bf-discret { color: #6b7a90; }

/* --- Calendrier de rendez-vous ---------------------------------------------
   Une grille de mois plutôt qu'une liste de journées : le visiteur n'a qu'une
   date à choisir, lister 14 jours × 4 créneaux donnait une page interminable. */

.calendrier {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  padding: 22px;
}

.calendrier__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.calendrier__entete button {
  width: 36px;
  height: 36px;
  border: 1px solid #e3e8ef;
  background: #fff;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #16324A;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.calendrier__entete button:hover:not(:disabled) { background: #eaf3fb; border-color: #2C6FB0; }
.calendrier__entete button:disabled { opacity: 0.3; cursor: not-allowed; }

.calendrier__mois {
  font-weight: 700;
  font-size: 17px;
  color: #16324A;
  text-transform: capitalize;
}

.calendrier__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendrier__nom-jour {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #8a97a8;
  padding-bottom: 6px;
}

.calendrier__jour {
  aspect-ratio: 1;
  border: 1px solid transparent;
  background: #f5f8fc;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: #16324A;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.calendrier__jour:hover:not(:disabled) { background: #eaf3fb; border-color: #2C6FB0; }

.calendrier__jour:disabled {
  background: transparent;
  color: #c9d2dd;
  cursor: not-allowed;
}

.calendrier__jour[data-actif="true"] {
  background: #16324A;
  color: #fff;
  border-color: #16324A;
}

.calendrier__legende,
.calendrier__invite {
  font-size: 13px;
  color: #8a97a8;
  margin: 16px 0 0;
  text-align: center;
}

/* --- Horaires du jour retenu --- */

.calendrier__horaires {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e3e8ef;
}

.calendrier__horaires__titre {
  font-weight: 700;
  font-size: 15px;
  color: #16324A;
  margin: 0 0 12px;
  text-transform: capitalize;
}

.calendrier__horaires__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.calendrier__horaire {
  position: relative;
  padding: 12px 10px;
  border: 1px solid #e3e8ef;
  background: #fff;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: #16324A;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.calendrier__horaire:hover:not(:disabled) { border-color: #2C6FB0; background: #f5faff; }

.calendrier__horaire[data-actif="true"] {
  background: #16324A;
  border-color: #16324A;
  color: #fff;
}

.calendrier__horaire:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

.calendrier__pris {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  color: #b42318;
}

@media (max-width: 480px) {
  .calendrier { padding: 16px; }
  .calendrier__jour { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .calendrier__jour, .calendrier__horaire, .calendrier__entete button { transition: none; }
}

/* --- Indicateur de compte --------------------------------------------------
   Un client connecté doit le voir, et pouvoir se déconnecter depuis n'importe
   quelle page — sur un ordinateur partagé, ne pas trouver la sortie est un
   vrai problème. */

.compte { position: relative; }

.compte__pastille {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #16324A;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.compte__pastille:hover { background: #2C6FB0; }

/* Pastille verte : la session est ouverte. */
.compte__point {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}

.compte__voile {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: transparent;
  border: none;
  cursor: default;
}

.compte__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 999;
  min-width: 250px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(22, 50, 74, 0.14);
  padding: 8px;
}

.compte__menu__entete {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 12px;
  margin: 0 0 6px;
  border-bottom: 1px solid #eef2f6;
  font-size: 12px;
  color: #8a97a8;
}

.compte__menu__entete strong {
  font-size: 14px;
  color: #16324A;
  /* `break-all` coupait l'adresse en plein milieu d'un mot ("gmail.co / m").
     `anywhere` ne coupe que si la ligne déborde vraiment. */
  overflow-wrap: anywhere;
}

.compte__menu__lien {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 5px;
  font-size: 14.5px;
  color: #16324A;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.compte__menu__lien:hover { background: #f5f8fc; color: #2C6FB0; }
.compte__menu__lien--sortir { color: #b42318; }
.compte__menu__lien--sortir:hover { background: #fdeceb; color: #b42318; }

/* Texte réservé aux lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Le template impose `.main-header__info a { width:40px; height:40px;
   border-radius:50%; background: bleu }` à TOUS les liens descendants. Le menu
   du compte étant imbriqué dedans, ses entrées devenaient des pastilles rondes
   avec le texte qui débordait. On remet des liens normaux, pour ce menu seul. */

.main-header__info .compte__menu a,
.main-header__info .compte__menu button {
  width: 100%;
  height: auto;
  padding: 10px 12px;
  border-radius: 5px;
  background-color: transparent;
  color: #16324A;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  white-space: nowrap;
}

.main-header__info .compte__menu a:hover,
.main-header__info .compte__menu button:hover {
  background-color: #f5f8fc;
  color: #2C6FB0;
}

.main-header__info .compte__menu a i,
.main-header__info .compte__menu button i {
  font-size: 14px;
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}

.main-header__info .compte__menu .compte__menu__lien--sortir { color: #b42318; }
.main-header__info .compte__menu .compte__menu__lien--sortir:hover {
  background-color: #fdeceb;
  color: #b42318;
}

/* Le voile de fermeture est un bouton : il ne doit hériter d'aucun style. */
.main-header__info .compte__voile {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.compte__menu { min-width: 265px; }

/* --- Pied de page sur fond clair -------------------------------------------
   La variante `main-footer--two` du template passe le fond en clair (#EDF8FE)
   mais conserve `color: #fff` sur les liens : ils devenaient blancs sur blanc,
   donc invisibles. On rétablit un contraste lisible. */

.main-footer--two .footer-widget__links a,
.main-footer--two .footer-widget__contact a,
.main-footer--two .footer-widget__contact p {
  color: #16324A;
}

.main-footer--two .footer-widget__links a:hover,
.main-footer--two .footer-widget__contact a:hover {
  color: #2C6FB0;
}

.main-footer--two .footer-widget__text {
  color: #4a5b6e;
}

/* --- Espace client : liste compacte ----------------------------------------
   Une carte dépliée par demande rendait la page interminable dès la troisième.
   Une ligne par demande, avec pour seule mise en avant l'action à faire — le
   reste attend que le client ouvre le détail. */

.espace-carte {
  background: #f7fafd;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  padding: 20px 24px;
}

.espace-carte--rdv { border-left: 4px solid #22c55e; }

.espace-carte__date {
  font-weight: 700;
  font-size: 16px;
  color: #16324A;
  margin: 0 0 6px;
  text-transform: capitalize;
}

.espace-liste { margin: 0; }

.espace-liste__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.espace-liste__item + .espace-liste__item { margin-top: 12px; }

/* Une demande qui attend le client se repère d'un coup d'œil. */
.espace-liste__item[data-action="true"] {
  border-left: 4px solid #e0a800;
  background: #fffdf7;
}

.espace-liste__info { min-width: 0; }

.espace-liste__entete {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.espace-liste__titre {
  font-weight: 700;
  font-size: 16px;
  color: #16324A;
}

/* Le résumé tient sur une ligne : le détail complet vit sur sa propre page. */
.espace-liste__resume {
  margin: 0 0 6px;
  color: #616670;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62ch;
}

.espace-liste__action { flex-shrink: 0; }

@media (max-width: 767px) {
  .espace-liste__item {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .espace-liste__resume { white-space: normal; }
  .espace-liste__action .handyfix-btn { width: 100%; text-align: center; }
}

/* --- Espace technicien -----------------------------------------------------
   Conçu pour le téléphone d'abord : un technicien consulte ça debout, une main
   occupée, parfois dans une cave. Cibles de touche généreuses, contrastes
   francs, aucun geste de précision. */

.technicien {
  padding: 24px 0 60px;
  min-height: 70vh;
}

.technicien .container { max-width: 720px; }

.technicien__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.technicien__titre { font-size: 24px; margin: 0 0 2px; color: #16324A; }
.technicien__nom { color: #6b7a90; margin: 0; font-size: 15px; }

.technicien__jour {
  color: #6b7a90;
  text-transform: capitalize;
  margin: 0 0 28px;
  font-size: 15px;
}

.technicien__sortir {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid #e3e8ef;
  background: #fff;
  border-radius: 50%;
  color: #b42318;
  cursor: pointer;
}

.technicien__retour {
  display: inline-block;
  margin-bottom: 18px;
  color: #6b7a90;
  font-size: 15px;
}

.technicien__section {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: #16324A;
  margin: 32px 0 14px;
}

.technicien__compte {
  background: #16324A;
  color: #fff;
  border-radius: 50px;
  padding: 2px 10px;
  font-size: 13px;
}

.technicien__vide {
  color: #8a97a8;
  background: #f7fafd;
  border: 1px dashed #d8e1ea;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  margin: 0;
}

/* --- Cartes de mission --- */

.mission-liste { display: flex; flex-direction: column; gap: 12px; }

.mission {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  overflow: hidden;
}

.mission__lien {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 14px;
  padding: 16px;
  color: inherit;
}

.mission__heure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 56px;
  padding-right: 14px;
  border-right: 1px solid #eef2f6;
}

.mission__heure strong { font-size: 18px; color: #16324A; }
.mission__heure span { font-size: 13px; color: #8a97a8; }

.mission__corps { min-width: 0; }
.mission__entete { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mission__client { font-weight: 700; color: #16324A; margin: 0 0 2px; }
.mission__adresse { color: #616670; margin: 0 0 4px; font-size: 14.5px; }

.mission__travaux {
  color: #8a97a8;
  margin: 0;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission__jour {
  font-weight: 700;
  color: #16324A;
  text-transform: capitalize;
  margin: 18px 0 8px;
  font-size: 15px;
}

/* Appel direct depuis la liste : le geste le plus fréquent avant d'arriver. */
.mission__tel {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 60px;
  background: #eaf3fb;
  color: #2C6FB0;
  font-size: 18px;
  border-left: 1px solid #e3e8ef;
}

.mission__tel:hover { background: #2C6FB0; color: #fff; }

/* --- Fiche mission --- */

.mission__raccourcis { display: flex; gap: 10px; margin-bottom: 24px; }

.mission__raccourci {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  background: #16324A;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}

.mission__raccourci:hover { background: #2C6FB0; color: #fff; }

.mission__bloc {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.mission__bloc__titre {
  font-size: 15px;
  font-weight: 700;
  color: #8a97a8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.mission__etats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mission__etat {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid #e3e8ef;
  background: #f7fafd;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #16324A;
  cursor: pointer;
}

.mission__etat:hover { border-color: #2C6FB0; background: #eaf3fb; }

.mission__etat[data-actif="true"] {
  background: #16324A;
  border-color: #16324A;
  color: #fff;
}

.mission__label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #16324A;
  margin-bottom: 6px;
}

.mission__champ {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #e3e8ef;
  border-radius: 7px;
  font-size: 16px; /* 16px minimum : en dessous, iOS zoome à la saisie */
  font-family: inherit;
  margin-bottom: 18px;
  background: #fff;
}

.mission__champ:focus { outline: 2px solid #2C6FB0; outline-offset: -2px; }

.mission__valider {
  width: 100%;
  padding: 16px;
  background: #2C6FB0;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.mission__valider:hover { background: #16324A; }

/* --- Photos --- */

.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.photos__zone { text-align: center; }

.photos__bouton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 12px;
  border: 2px dashed #c9d8e6;
  border-radius: 8px;
  background: #f7fafd;
  color: #2C6FB0;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
}

.photos__bouton i { font-size: 22px; }
.photos__bouton:hover { border-color: #2C6FB0; background: #eaf3fb; }
.photos__bouton input { display: none; }

.photos__compte {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #1c7a4a;
  font-weight: 600;
}

@media (max-width: 400px) {
  .mission__etats { grid-template-columns: 1fr; }
}

/* ===========================================================================
   ESPACE TECHNICIEN — coque autonome
   Ces pages ne chargent plus handyfix.css : ni menu, ni carrousels, ni jQuery.
   Tout ce dont elles ont besoin est défini ici, et la page se charge donc
   beaucoup plus vite sur un téléphone en 3G.
   =========================================================================== */

body:has(.technicien-app) {
  margin: 0;
  background: #eef2f7;
  font-family: "Rubik", system-ui, -apple-system, sans-serif;
  color: #16324a;
  -webkit-font-smoothing: antialiased;
}

.technicien-app { min-height: 100vh; padding-bottom: 40px; }
.technicien-app a { text-decoration: none; color: inherit; }
.technicien-app * { box-sizing: border-box; }

.technicien-app .container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* --- Barre d'application --- */

.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #16324a;
  color: #fff;
  padding: 12px 0;
  box-shadow: 0 2px 10px rgba(22, 50, 74, 0.18);
}

.appbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.appbar__marque { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appbar__marque img { height: 30px; width: auto; }

.appbar__nom {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar__role { font-size: 11.5px; opacity: 0.7; display: block; }

.appbar__sortir {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
}

.appbar__sortir:hover { background: rgba(255, 255, 255, 0.22); }

.appbar__retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

/* --- Alertes autonomes --- */

.technicien-app .alert {
  padding: 13px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14.5px;
  border: 1px solid transparent;
}

.technicien-app .alert-success { background: #d8f3e3; color: #14603a; border-color: #b6e6cd; }
.technicien-app .alert-danger  { background: #fdeceb; color: #8f1d14; border-color: #f7cfcb; }
.technicien-app .alert-warning { background: #fdf2dc; color: #73510f; border-color: #f3e0b5; }
.technicien-app .alert-info    { background: #e4f1fb; color: #14507f; border-color: #c6e2f6; }

/* --- Chronomètre --- */

.chrono {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #16324a;
  color: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.chrono__valeur {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chrono__libelle { font-size: 12.5px; opacity: 0.75; display: block; margin-bottom: 3px; }
.chrono__depuis { font-size: 12.5px; opacity: 0.75; text-align: right; }

/* --- Étape suivante mise en avant --- */

.etape-suivante {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
  border: none;
  border-radius: 10px;
  background: #2c6fb0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.etape-suivante:hover { background: #16324a; }
.etape-suivante--fin { background: #1c7a4a; }
.etape-suivante--fin:hover { background: #14603a; }

.etapes-secondaires {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.etape-secondaire {
  flex: 1;
  min-width: 140px;
  padding: 11px;
  border: 1px solid #d8e1ea;
  background: #fff;
  border-radius: 8px;
  font-size: 13.5px;
  color: #6b7a90;
  cursor: pointer;
  font-family: inherit;
}

.etape-secondaire:hover { border-color: #b42318; color: #b42318; }

/* --- Frise d'avancement --- */

.frise {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
}

.frise__etape {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: #a4b0be;
  position: relative;
  padding-top: 22px;
}

.frise__etape::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #dbe3ec;
}

.frise__etape::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #dbe3ec;
}

.frise__etape:last-child::after { display: none; }

.frise__etape[data-fait="true"] { color: #1c7a4a; font-weight: 600; }
.frise__etape[data-fait="true"]::before { background: #1c7a4a; }
.frise__etape[data-fait="true"]::after { background: #1c7a4a; }
.frise__etape[data-actuel="true"] { color: #16324a; font-weight: 700; }
.frise__etape[data-actuel="true"]::before { background: #2c6fb0; box-shadow: 0 0 0 4px #d6e6f5; }

/* --- Signature manuscrite --- */

.signature { margin-bottom: 18px; }

.signature__zone {
  width: 100%;
  height: 170px;
  background: #fff;
  border: 2px dashed #c9d8e6;
  border-radius: 8px;
  touch-action: none; /* sans ça, signer fait défiler la page */
  display: block;
  cursor: crosshair;
}

.signature__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.signature__aide { font-size: 13px; color: #8a97a8; }

.signature__effacer {
  border: none;
  background: none;
  color: #b42318;
  font-size: 13.5px;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

/* --- Vignettes de photos --- */

.photos__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.photos__vignette {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: #eef2f7;
}

.photos__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photos__etiquette {
  font-size: 12px;
  font-weight: 700;
  color: #8a97a8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

/* L'intervention en cours doit sauter aux yeux à la réouverture du téléphone. */
.mission[data-vedette="true"] {
  border: 2px solid #2c6fb0;
  box-shadow: 0 4px 16px rgba(44, 111, 176, 0.18);
}

/* --- Planning du technicien ------------------------------------------------ */

.appbar__actions { display: flex; align-items: center; gap: 8px; }

.appbar__lien {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
}

.appbar__lien:hover { background: rgba(255, 255, 255, 0.22); }

.planning-tech__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.planning-tech__mois {
  font-size: 19px;
  margin: 0;
  text-transform: capitalize;
  color: #16324a;
}

.planning-tech__fleche {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #d8e1ea;
  border-radius: 50%;
  font-size: 22px;
  color: #16324a;
}

.planning-tech {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  background: #fff;
  border-radius: 10px;
  padding: 14px;
}

.planning-tech__nom-jour {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #a4b0be;
  padding-bottom: 4px;
}

.planning-tech__jour {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 7px;
  background: #f5f8fc;
  font-size: 14px;
  font-weight: 600;
  color: #16324a;
  position: relative;
}

/* La couleur de fond dit la nature du jour, la pastille dit la charge. */
.planning-tech__jour[data-nature="travail"]   { background: #d8f3e3; }
.planning-tech__jour[data-nature="astreinte"] { background: #fdf2dc; }
.planning-tech__jour[data-nature="absence"]   { background: #fdeceb; color: #b42318; }

.planning-tech__jour[data-aujourdhui="true"] {
  outline: 2px solid #2c6fb0;
  outline-offset: -2px;
}

.planning-tech__pastille {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #16324a;
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
}

.planning-tech__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 8px;
  font-size: 12.5px;
  color: #6b7a90;
}

.planning-tech__legende span { display: flex; align-items: center; gap: 6px; }

.planning-tech__puce {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  background: #eef2f7;
}

.planning-tech__puce[data-nature="travail"]   { background: #d8f3e3; }
.planning-tech__puce[data-nature="astreinte"] { background: #fdf2dc; }
.planning-tech__puce[data-nature="absence"]   { background: #fdeceb; }

/* Le technicien annoncé au client, comme le promettent les CGV. */
.espace-carte__tech {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #16324A;
  padding-top: 10px;
  border-top: 1px solid #e3e8ef;
  margin-top: 10px;
  flex-wrap: wrap;
}

.espace-carte__tech i { color: #1c7a4a; }
.espace-carte__tech a { color: #2C6FB0; font-weight: 500; }

/* --- Verrou du compte rendu ------------------------------------------------ */

.mission__bloc--verrou {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f4f6f9;
  border-style: dashed;
  color: #6b7a90;
}

.mission__bloc--verrou i { font-size: 20px; color: #a4b0be; }
.mission__bloc--verrou strong { color: #16324a; display: block; margin-bottom: 3px; }
.mission__bloc--verrou p { font-size: 14px; }

.mission__valider--brouillon {
  background: #eef2f7;
  color: #16324a;
}

.mission__valider--brouillon:hover { background: #dbe3ec; }

.mission__envoi {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #e3e8ef;
}

/* --- Glisser pour valider --------------------------------------------------
   Un envoi irréversible ne doit pas se déclencher par un appui accidentel. */

.glisser {
  position: relative;
  height: 64px;
  border-radius: 34px;
  background: #e8eef5;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  overflow: hidden;
}

.glisser[data-valide="true"] { background: #d8f3e3; }
.glisser[data-desactive="true"] { opacity: 0.5; }

.glisser__texte {
  position: absolute;
  font-size: 15px;
  font-weight: 600;
  color: #6b7a90;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.glisser__texte--fini { color: #1c7a4a; }

.glisser__curseur {
  position: absolute;
  left: 4px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #2c6fb0;
  color: #fff;
  font-size: 17px;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(22, 50, 74, 0.25);
}

.glisser__curseur:active { cursor: grabbing; }
.glisser[data-valide="true"] .glisser__curseur { background: #1c7a4a; cursor: default; }

/* --- Issue du chantier ----------------------------------------------------- */

.issue { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }

.issue__choix {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 2px solid #e3e8ef;
  background: #fff;
  border-radius: 9px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #16324a;
}

.issue__choix i { font-size: 17px; color: #a4b0be; margin-top: 2px; }
.issue__choix small { display: block; font-weight: 400; font-size: 12.5px; color: #8a97a8; margin-top: 3px; }

.issue__choix[data-actif="true"] { border-color: #2c6fb0; background: #f5faff; }
.issue__choix[data-actif="true"] i { color: #2c6fb0; }

@media (max-width: 480px) { .issue { grid-template-columns: 1fr; } }

/* Reste à régler, dans l'espace client. */
.espace-liste__solde {
  font-size: 13.5px;
  color: #8a6116;
  background: #fdf2dc;
  border-radius: 5px;
  padding: 6px 10px;
  margin-top: 8px;
  display: inline-block;
}

/* Les jours écoulés s'effacent, comme côté administration : le technicien
   cherche ce qui vient, pas ce qui est derrière lui. */
.planning-tech__jour[data-passe="true"] { opacity: 0.4; }
.planning-tech__jour[data-passe="true"] .planning-tech__pastille { background: #a4b0be; }

/* --- Acompte ou règlement intégral ----------------------------------------- */
/* Deux cartes plutôt qu'une liste déroulante : le client compare les montants
   d'un coup d'œil au lieu d'ouvrir un menu pour découvrir ce qu'il doit. */

.reglement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.reglement__choix {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.reglement__choix:hover { border-color: #b9cfe4; }

.reglement__choix[data-actif="true"] {
  border-color: #2c6fb0;
  background: #f5faff;
}

.reglement__choix input { margin-top: 4px; flex-shrink: 0; }

.reglement__corps { display: flex; flex-direction: column; gap: 3px; }

.reglement__titre { font-weight: 700; font-size: 15.5px; color: #1b2a3d; }

.reglement__montant {
  font-size: 22px;
  font-weight: 700;
  color: #2c6fb0;
  line-height: 1.2;
}

.reglement__corps small { font-size: 12.5px; color: #8a97a8; line-height: 1.5; }

/* --- Second passage : côté technicien --------------------------------------- */

.suite {
  margin-top: 22px;
  background: #fdf2dc;
  border: 1px solid #f0dcb0;
  border-radius: 10px;
  padding: 20px;
}

.suite--retenue { background: #eefaf3; border-color: #bfe6d1; }

.suite__titre { font-size: 17px; font-weight: 700; color: #73510f; margin: 0 0 10px; }
.suite--retenue .suite__titre { color: #14603a; }

.suite__date {
  font-size: 19px;
  font-weight: 700;
  color: #14603a;
  text-transform: capitalize;
  margin: 0 0 6px;
}

.suite__aide { font-size: 13px; color: #8a6116; line-height: 1.55; margin: 0 0 14px; }
.suite--retenue .suite__aide { color: #2f6b4e; margin: 0; }

.suite__attente {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: #73510f;
}

.suite__attente ul { margin: 8px 0 8px 18px; text-transform: capitalize; }

.suite__ligne { display: block; margin-bottom: 12px; }

.suite__ligne span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #73510f;
  margin-bottom: 5px;
}

.suite__ligne input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #e0cb9d;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  background: #fff;
}

.suite__envoyer {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 8px;
  background: #2c6fb0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.suite__envoyer:disabled { opacity: 0.5; cursor: not-allowed; }

.suite__erreur {
  background: #fdeceb;
  color: #8f1d14;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13.5px;
  margin: 0 0 12px;
}

.suite__confirme { font-size: 14.5px; color: #14603a; font-weight: 600; margin: 0; }

/* --- Second passage : côté client ------------------------------------------- */
/* En tête de l'espace, parce que c'est la seule chose qu'on lui demande et
   qu'un chantier qui attend une réponse prend une semaine de plus. */

.suite-client {
  border: 2px solid #2c6fb0;
  border-radius: 12px;
  background: #f5faff;
  padding: 26px 28px;
}

.suite-client__titre { font-size: 21px; font-weight: 700; color: #1b2a3d; margin: 0 0 12px; }

.suite-client__motif {
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: #4a5a6e;
  margin: 0 0 14px;
}

.suite-client__aide { font-size: 14px; color: #6b7a90; line-height: 1.6; margin: 0 0 18px; }

.suite-client__choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.suite-client__date {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  border: 1.5px solid #cfe0ef;
  border-radius: 10px;
  background: #fff;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.suite-client__date:hover:not(:disabled) {
  border-color: #2c6fb0;
  box-shadow: 0 3px 12px rgba(44, 111, 176, 0.14);
}

.suite-client__date:disabled { opacity: 0.6; cursor: wait; }

.suite-client__quand {
  font-size: 16px;
  font-weight: 700;
  color: #1b2a3d;
  text-transform: capitalize;
  line-height: 1.35;
}

.suite-client__adresse { font-size: 12.5px; color: #8a97a8; }

.suite-client__action { font-size: 13.5px; font-weight: 700; color: #2c6fb0; margin-top: 4px; }

.suite-client__erreur {
  background: #fdeceb;
  color: #8f1d14;
  border-radius: 6px;
  padding: 11px 13px;
  font-size: 13.5px;
  margin: 0 0 14px;
}

/* --- Passages précédents du chantier ---------------------------------------- */
/* Le rapport suit le chantier, pas le technicien : un remplaçant doit lire ce
   que son prédécesseur a fait avant de démonter quoi que ce soit. */

.passages__compte {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #2c6fb0;
  background: #eaf3fb;
  border-radius: 999px;
  padding: 3px 10px;
  vertical-align: middle;
}

.passage {
  border-left: 3px solid #cfe0ef;
  padding: 0 0 0 14px;
  margin-top: 16px;
}

.passage:first-of-type { margin-top: 10px; }

.passage__entete {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 14.5px;
  color: #1b2a3d;
  margin: 0 0 8px;
}

.passage__entete span { font-size: 13px; color: #8a97a8; }

.passage__texte {
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a5a6e;
  white-space: pre-wrap;
  margin: 0 0 8px;
}

.passage__pieces,
.passage__motif { font-size: 13.5px; color: #4a5a6e; margin: 0 0 8px; }

.passage__motif {
  background: #fdf2dc;
  border-radius: 6px;
  padding: 9px 11px;
  color: #73510f;
}

.passage__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.passage__photos img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

/* --- Déclaration d'absence -------------------------------------------------- */

.absence { margin: 24px 0 8px; }

.absence__ouvrir {
  width: 100%;
  min-height: 48px;
  border: 1px dashed #c3ccd8;
  border-radius: 8px;
  background: transparent;
  color: #6b7a90;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.absence__ouvrir:hover { border-color: #b42318; color: #b42318; border-style: solid; }

.absence__form {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 18px 20px;
}

.absence__titre { font-size: 15.5px; font-weight: 700; color: #1b2a3d; margin: 0 0 14px; }

.absence__form label { display: block; margin-bottom: 12px; }

.absence__form label span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4a5a6e;
  margin-bottom: 5px;
}

.absence__form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d5dbe7;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 15px;
}

.absence__aide { font-size: 12.5px; color: #8a97a8; line-height: 1.55; margin: 0 0 14px; }

.absence__actions { display: flex; gap: 10px; }

.absence__actions button {
  flex: 1;
  min-height: 48px;
  border: none;
  border-radius: 8px;
  background: #b42318;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.absence__actions button:disabled { opacity: 0.5; }

.absence__annuler { background: #eef2f7 !important; color: #4a5a6e !important; }

.absence__declarees {
  background: #fdeceb;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.absence__declarees ul { list-style: none; margin: 0; padding: 0; }

.absence__declarees li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #8f1d14;
  padding: 5px 0;
}

.absence__declarees li small { color: #a3564c; }

.absence__declarees li button {
  margin-left: auto;
  border: none;
  background: none;
  color: #8f1d14;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.absence__message {
  background: #eefaf3;
  color: #14603a;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 13.5px;
  margin: 0 0 12px;
}

.absence__erreur {
  background: #fdeceb;
  color: #8f1d14;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 13.5px;
  margin: 0 0 12px;
}

/* --- Avancement vu par le client -------------------------------------------
   « Il arrive quand ? » est l'appel le plus fréquent le jour J. Y répondre
   sans décrocher vaut mieux que n'importe quel rappel automatique. */

.espace-carte__suivi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 13px;
  margin: 0 0 10px;
}

.espace-carte[data-etat="en_route"] .espace-carte__suivi {
  background: #fdf2dc;
  color: #8a6116;
}

.espace-carte[data-etat="en_cours"] .espace-carte__suivi {
  background: #eefaf3;
  color: #14603a;
}

/* Le point clignote doucement : l'information est vivante, elle change
   pendant que la page est ouverte. */
.espace-carte[data-etat="en_route"] .espace-carte__suivi i,
.espace-carte[data-etat="en_cours"] .espace-carte__suivi i {
  animation: bf-pulse 2.4s ease-in-out infinite;
}

@keyframes bf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .espace-carte__suivi i { animation: none; }
}

/* --- Fin de passage, côté technicien ---------------------------------------
   Terminer sa journée n'est pas terminer le chantier. L'écran doit le dire,
   sinon le technicien croit avoir clos un dossier qu'il rouvrira demain. */

.avancement__fin {
  background: #eefaf3;
  border-radius: 10px;
  padding: 16px 18px;
  text-align: center;
}

.avancement__fin__titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #14603a;
  margin: 0 0 8px;
}

.avancement__fin__texte {
  font-size: 13.5px;
  line-height: 1.6;
  color: #2f6b4e;
  margin: 0;
}

.avancement__note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #8a97a8;
  text-align: center;
  line-height: 1.5;
}

/* --- Ce qui vient de se passer chez le client -------------------------------
   Le technicien reparti, la page redevenait identique à celle de la veille au
   moment précis où le client attend des nouvelles. */

.passage-fait {
  border-left: 4px solid #cfd8e3;
  background: #f7f9fb;
  border-radius: 10px;
  padding: 22px 24px;
}

.passage-fait[data-etat="termine"] { border-left-color: #1c7a4a; background: #eefaf3; }
.passage-fait[data-etat="poursuivre"] { border-left-color: #b8860b; background: #fdf7e8; }
.passage-fait[data-etat="relecture"] { border-left-color: #2c6fb0; background: #f5faff; }
.passage-fait[data-etat="absent"] { border-left-color: #b42318; background: #fdeceb; }

.passage-fait__titre {
  font-size: 18px;
  font-weight: 700;
  color: #1b2a3d;
  margin: 0 0 4px;
}

.passage-fait__quand {
  font-size: 13.5px;
  color: #8a97a8;
  text-transform: capitalize;
  margin: 0 0 14px;
}

.passage-fait__travaux {
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a5a6e;
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px;
}

.passage-fait__motif {
  font-size: 14px;
  color: #73510f;
  margin: 0 0 12px;
}

.passage-fait__suite {
  font-size: 14px;
  font-weight: 600;
  color: #4a5a6e;
  margin: 0;
}

/* --- Second passage : convenu sur place ou proposé ---------------------------
   L'interruption se constate chez le client : il est presque toujours là.
   Retenir la date tout de suite évite qu'il oublie de se connecter le soir,
   et qu'un chantier traîne une semaine pour ça. */

.suite__bascule {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1.5px solid #e0cb9d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  padding: 14px 16px;
  margin-bottom: 16px;
  cursor: pointer;
}

.suite__bascule[data-actif="true"] {
  border-color: #2c6fb0;
  background: #f5faff;
}

.suite__bascule input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: #2c6fb0;
}

.suite__bascule > span {
  font-size: 14.5px;
  font-weight: 700;
  color: #1b2a3d;
  line-height: 1.4;
}

.suite__bascule small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: #6b7a90;
  margin-top: 5px;
  line-height: 1.55;
}

.suite__ligne input[type="text"] { font-size: 15px; }