@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/* ✨ Animations globales — reprises du design */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@keyframes scin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes popin {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bob {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}
@keyframes bounceIn {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  55% {
    transform: scale(1.12);
    opacity: 1;
  }
  75% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ring {
  0% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  70%, 100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@keyframes glow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}
@keyframes beat {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.5;
  }
}
/* classes utilitaires d'apparition */
.sc {
  animation: scin 0.26s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.pop {
  animation: popin 0.45s ease both;
}

.slide {
  animation: slideIn 0.3s ease both;
}

/* décalage en cascade : à poser sur le parent d'une liste */
.stagger > * {
  animation: popin 0.45s ease both;
}
.stagger > *:nth-child(1) {
  animation-delay: 0.07s;
}
.stagger > *:nth-child(2) {
  animation-delay: 0.14s;
}
.stagger > *:nth-child(3) {
  animation-delay: 0.21s;
}
.stagger > *:nth-child(4) {
  animation-delay: 0.28s;
}
.stagger > *:nth-child(5) {
  animation-delay: 0.35s;
}
.stagger > *:nth-child(6) {
  animation-delay: 0.42s;
}
.stagger > *:nth-child(7) {
  animation-delay: 0.49s;
}
.stagger > *:nth-child(8) {
  animation-delay: 0.56s;
}
.stagger > *:nth-child(9) {
  animation-delay: 0.63s;
}
.stagger > *:nth-child(10) {
  animation-delay: 0.7s;
}
.stagger > *:nth-child(11) {
  animation-delay: 0.77s;
}
.stagger > *:nth-child(12) {
  animation-delay: 0.84s;
}

/* animation au scroll — pilotée par assets/js/composants/reveal.js */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.reveal.is_visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* 🔁 Reset SCSS moderne */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* filet de sécurité : aucun élément ne peut décaler la page vers la droite */
  overflow-x: hidden;
}

body {
  font-family: "work sans";
  line-height: 1.6;
  color: #242327;
  background-color: #FAF8F3;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  padding: 1rem;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* l'attribut hidden doit gagner contre un display: flex / grid */
[hidden] {
  display: none !important;
}

button {
  cursor: pointer;
  font-family: "work sans";
}
button:disabled {
  cursor: not-allowed;
}

/* les photos remplissent leur cadre (cover rogne volontairement) */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* les SVG (logo, mascotte) gardent leurs proportions : jamais rognés */
img[src$=".svg"] {
  object-fit: contain;
}

/* titres de section */
.section_title {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.35rem;
  line-height: 1.1;
}
.section_title::after {
  content: "";
  display: block;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: #FFC62E;
  margin-top: 0.4rem;
}

.section_subtitle {
  font-size: 0.8rem;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.3rem;
}

/* étiquettes de durée / prix */
.time::after {
  content: " min";
}

.price::after {
  content: " F";
}

/* 🔘 Boutons */
.main_btn {
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  background: #FFC62E;
  padding: 1rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 5px 0 #C98F00;
  color: #242327;
  font-family: "work sans";
  font-weight: bold;
  font-size: 1rem;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}
.main_btn:hover {
  box-shadow: 0 6px 0 #C98F00;
  transform: translateY(-3px);
}
.main_btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #C98F00;
}
.main_btn:disabled {
  background: rgba(36, 35, 39, 0.12);
  color: rgba(36, 35, 39, 0.4);
  box-shadow: none;
  transform: none;
}

.secondary_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "work sans";
  font-weight: bold;
  background: rgba(250, 248, 243, 0.1);
  color: #FAF8F3;
  border-radius: 1rem;
  border: 1.5px solid rgba(250, 248, 243, 0.4);
  transition: background 0.18s ease, transform 0.13s ease;
}
.secondary_btn:hover {
  background: rgba(250, 248, 243, 0.4);
  transform: translateY(-2px);
}
.secondary_btn:active {
  transform: translateY(1px);
}

/* bouton clair sur fond crème (agenda, whatsapp, refuser…) */
.ghost_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  min-height: 52px;
  padding: 0 1.2rem;
  border-radius: 1rem;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: white;
  color: #242327;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.12);
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}
.ghost_btn:hover {
  transform: translateY(-2px);
}
.ghost_btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(110, 48, 17, 0.12);
}

/* bouton sombre (retour accueil) */
.dark_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  min-height: 56px;
  width: 100%;
  border: none;
  border-radius: 1rem;
  background: #242327;
  color: #FAF8F3;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 4px 0 #6E3011;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}
.dark_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #6E3011;
}
.dark_btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #6E3011;
}

/* petit lien souligné : « Tout voir », « Modifier » */
.link_btn {
  border: none;
  background: none;
  /* zone tactile confortable, sans décaler le texte */
  padding: 0.6rem 0;
  margin: -0.6rem 0;
  font-weight: 600;
  font-size: 0.78rem;
  color: #6E3011;
  text-decoration: underline;
}

/* pilule : « Changer », « Quitter » */
.pill_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: #FAF8F3;
  border-radius: 999px;
  padding: 0.55rem 0.8rem;
  font-weight: 600;
  font-size: 0.75rem;
  color: #242327;
  box-shadow: 0 2px 0 rgba(36, 35, 39, 0.12);
  white-space: nowrap;
  transition: transform 0.13s ease;
}
.pill_btn:active {
  transform: translateY(1px);
}

/* bouton pleine largeur du bandeau bas */
.block_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 1.1rem;
  background: #FFC62E;
  color: #242327;
  font-weight: bold;
  font-size: 1.05rem;
  box-shadow: 0 4px 0 #C98F00;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}
.block_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #C98F00;
}
.block_btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #C98F00;
}
.block_btn:disabled {
  background: rgba(36, 35, 39, 0.12);
  color: rgba(36, 35, 39, 0.4);
  box-shadow: none;
  transform: none;
}

/* 📦 Cartes */
/* petite carte d'argument : « Zéro attente » */
.smail_box {
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1rem;
  padding: 0.75rem 0.6rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.smail_box .box_title {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.85rem;
  line-height: 1.15;
}
.smail_box .box_text {
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(36, 35, 39, 0.58);
  margin-top: 0.25rem;
}

/* grille des 3 arguments */
.smail_box_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

/* grande carte de prestation : photo + infos + réserver */
.big_box {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  background: white;
  padding: 0.7rem;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.big_box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(110, 48, 17, 0.12);
}
.big_box .cover {
  width: 64px;
  height: 64px;
  flex: none;
  align-self: center;
  overflow: hidden;
  border-radius: 0.875rem;
}
.big_box .infos {
  flex: 1;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
}
.big_box .infos .service_name {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.97rem;
  line-height: 1.15;
}
.big_box .infos .service_desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.2rem;
}
.big_box .infos .infos_etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  margin-top: 0.45rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.45rem;
  background: rgba(110, 48, 17, 0.08);
  color: #6E3011;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
}
.big_box .main_btn {
  flex: none;
  width: 78px;
  padding: 0.5rem;
  border-radius: 0.875rem;
  font-size: 0.81rem;
  line-height: 1.2;
  box-shadow: 0 3px 0 #C98F00;
}
.big_box .main_btn:hover {
  box-shadow: 0 5px 0 #C98F00;
}
.big_box .main_btn:active {
  box-shadow: 0 1px 0 #C98F00;
}

/* carte tarif : nom + prix, durée + réserver */
.tarif_box {
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  padding: 0.95rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tarif_box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(110, 48, 17, 0.12);
}
.tarif_box .tarif_head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.tarif_box .tarif_head .service_name {
  flex: 1;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.03rem;
  line-height: 1.2;
}
.tarif_box .tarif_head .service_price {
  font-weight: bold;
  font-size: 1.06rem;
  white-space: nowrap;
}
.tarif_box .service_desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.35rem;
}
.tarif_box .tarif_foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.tarif_box .tarif_foot .service_time {
  flex: 1;
  align-self: flex-start;
  padding: 0.38rem 0.55rem;
  border-radius: 0.45rem;
  background: rgba(110, 48, 17, 0.08);
  color: #6E3011;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
}
.tarif_box .tarif_foot .service_time::before {
  content: "⏱ ";
}
.tarif_box .tarif_foot .main_btn {
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 0.8rem;
  font-size: 0.84rem;
  box-shadow: 0 3px 0 #C98F00;
}

/* catégorie de tarifs : étiquette inclinée + pointillés */
.categorie {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.categorie_name {
  font-weight: bold;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FAF8F3;
  background: #6E3011;
  border-radius: 0.45rem;
  padding: 0.45rem 0.6rem;
  transform: rotate(-1.4deg);
}
.categorie::after {
  content: "";
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(110, 48, 17, 0.3) 0 5px, transparent 5px 10px);
}

/* carte « note de l'ours » : fond jaune pâle + mascotte */
.note_box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(255, 198, 46, 0.2);
  border: 1.5px solid rgba(255, 198, 46, 0.75);
  border-radius: 1.1rem;
  padding: 0.95rem;
}
.note_box img, .note_box .mascotte {
  width: 34px;
  height: 49px;
  flex: none;
}
.note_box p {
  font-size: 0.78rem;
  line-height: 1.5;
  font-weight: 500;
}

/* bandeau brun d'information (récap tunnel) */
.info_box {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(110, 48, 17, 0.08);
  border-radius: 1rem;
  padding: 0.8rem 0.875rem;
}
.info_box img, .info_box .mascotte {
  width: 31px;
  height: 45px;
  flex: none;
}
.info_box p {
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 600;
  color: #6E3011;
}

/* carte d'avis client */
.avis_box {
  position: relative;
  background: #6E3011;
  color: #FAF8F3;
  border-radius: 1.25rem;
  padding: 1.25rem 1.1rem;
  overflow: hidden;
}
.avis_box::before {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -30px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: #FFC62E;
  opacity: 0.13;
}
.avis_box .avis_text {
  position: relative;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.97rem;
  line-height: 1.45;
  color: #FFC62E;
}
.avis_box .avis_client {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.875rem;
}
.avis_box .avis_client .cover {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(250, 248, 243, 0.5);
}
.avis_box .avis_client span {
  font-size: 0.75rem;
  color: rgba(250, 248, 243, 0.72);
}

/* ligne cliquable : « Horaires & contact → » */
.link_box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  padding: 0.95rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.18s ease;
}
.link_box:hover {
  transform: translateY(-2px);
}
.link_box .link_icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  background: #FFC62E;
  color: #242327;
  box-shadow: 0 3px 0 #C98F00;
}
.link_box .link_icon.brun {
  background: #6E3011;
  color: #FAF8F3;
  box-shadow: 0 3px 0 rgba(36, 35, 39, 0.35);
}
.link_box .link_icon.noir {
  background: #242327;
  color: #FAF8F3;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.5);
}
.link_box .link_infos {
  flex: 1;
  min-width: 0;
}
.link_box .link_infos strong {
  display: block;
  font-family: "baloo 2";
  font-size: 0.94rem;
  line-height: 1.15;
}
.link_box .link_infos span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.2rem;
}
.link_box .link_arrow {
  font-weight: 600;
  color: #6E3011;
}

/* galerie horizontale : « Le repaire » */
.galerie {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  /* elle défile dans sa largeur : sans cette borne, les images
     élargissent toute la page et créent un décalage à droite */
  max-width: 100%;
  /* les images touchent les bords de l'écran pendant le défilement */
  padding-inline: 1rem;
  margin-inline: -1rem;
  scroll-padding-inline: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.galerie::-webkit-scrollbar {
  height: 0;
}
.galerie .galerie_item {
  width: 184px;
  height: 134px;
  flex: none;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 6px 14px -10px rgba(36, 35, 39, 0.5);
}

/* 📝 Formulaires */
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.champ {
  display: block;
}
.champ .champ_label {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(36, 35, 39, 0.5);
  margin-bottom: 0.5rem;
}
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  border-radius: 1rem;
  background: white;
  color: #242327;
  font-family: "work sans";
  font-weight: 500;
  font-size: 0.94rem;
  outline: none;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.champ input::placeholder,
.champ textarea::placeholder,
.champ select::placeholder {
  color: rgba(36, 35, 39, 0.35);
  font-weight: 400;
}
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  border-color: #FFC62E;
  box-shadow: 0 3px 0 #FFC62E;
}
.champ input,
.champ select {
  min-height: 54px;
  padding: 0 0.95rem;
}
.champ textarea {
  height: 90px;
  padding: 0.8rem 0.95rem;
  line-height: 1.4;
  font-weight: 400;
  resize: none;
}
.champ {
  /* état erreur */
}
.champ.erreur input, .champ.erreur textarea, .champ.erreur select {
  border-color: #C0392B;
  box-shadow: 0 3px 0 rgba(192, 57, 43, 0.4);
}
.champ .champ_erreur {
  display: block;
  font-size: 0.72rem;
  color: #C0392B;
  margin-top: 0.35rem;
}

/* case à cocher (consentement) */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
}
.checkbox .checkbox_case {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 0.5rem;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem;
  color: #242327;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.checkbox .checkbox_text {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.65);
}
.checkbox.actif .checkbox_case {
  background: #FFC62E;
  border-color: #FFC62E;
}

/* choix de prestation (radio en carte) */
.choix_service {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: white;
  border-radius: 1.1rem;
  padding: 0.875rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.13s ease, box-shadow 0.13s ease, border-color 0.18s ease;
}
.choix_service:hover {
  transform: translateY(-2px);
}
.choix_service:active {
  transform: translateY(1px);
}
.choix_service .choix_dot {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  border: 2px solid rgba(36, 35, 39, 0.2);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.75rem;
  color: #242327;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.choix_service .choix_infos {
  flex: 1;
  min-width: 0;
}
.choix_service .choix_infos .service_name {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.97rem;
  line-height: 1.2;
}
.choix_service .choix_infos .service_meta {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  color: #6E3011;
  margin-top: 0.3rem;
}
.choix_service.actif {
  border-color: #FFC62E;
  background: rgba(255, 198, 46, 0.12);
  box-shadow: 0 3px 0 #C98F00;
}
.choix_service.actif .choix_dot {
  background: #FFC62E;
  border-color: #FFC62E;
}

/* bandeau des jours */
.jours {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.jours::-webkit-scrollbar {
  height: 0;
}
.jours {
  /* marge en haut : la pastille de sélection déborde du bouton */
  padding: 8px 2px 2px;
  margin: -8px -2px -2px;
}
.jours .jour {
  width: 60px;
  flex: none;
  padding: 0.6rem 0 0.7rem;
  border-radius: 1rem;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: white;
  color: #242327;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  box-shadow: 0 2px 0 rgba(36, 35, 39, 0.1);
  transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.18s ease;
}
.jours .jour:hover {
  transform: translateY(-2px);
}
.jours .jour:active {
  transform: translateY(1px);
}
.jours .jour .jour_dow {
  font-weight: 600;
  font-size: 0.66rem;
  opacity: 0.75;
}
.jours .jour .jour_num {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 1.15;
}
.jours .jour .jour_mois {
  font-weight: 500;
  font-size: 0.6rem;
  opacity: 0.7;
}
.jours .jour {
  /* ── le jour choisi ───────────────────────────────────────
     on garde la date lisible (contrairement au créneau, on peut
     encore changer d'avis) : une pastille cochée vient s'y poser */
  position: relative;
}
.jours .jour .jour_coche {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #6E3011;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.jours .jour .jour_coche svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #FAF8F3;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.jours .jour.actif {
  background: #FFC62E;
  border-color: #FFC62E;
  box-shadow: 0 3px 0 #C98F00;
  animation: jour_prend 0.42s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.jours .jour.actif .jour_num {
  animation: jour_num 0.42s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.jours .jour.actif .jour_coche {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.jours .jour.actif .jour_coche svg {
  animation: creneau_coche 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both;
}
.jours .jour:disabled {
  background: rgba(36, 35, 39, 0.04);
  color: rgba(36, 35, 39, 0.35);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* grille des créneaux horaires */
.creneaux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.creneaux .creneau {
  min-height: 50px;
  border-radius: 0.875rem;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: white;
  color: #242327;
  font-weight: 600;
  font-size: 0.94rem;
  box-shadow: 0 2px 0 rgba(36, 35, 39, 0.1);
  animation: popin 0.3s ease both;
  transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.18s ease;
}
.creneaux .creneau:hover {
  transform: translateY(-2px);
}
.creneaux .creneau:active {
  transform: translateY(2px);
  box-shadow: none;
}
.creneaux .creneau.actif {
  background: #FFC62E;
  border-color: #FFC62E;
  box-shadow: 0 3px 0 #C98F00;
}
.creneaux .creneau {
  /* ── le moment où le créneau devient le tien ──────────────
     l'heure s'efface, une coche se trace, « Réservé » apparaît */
  position: relative;
  overflow: hidden;
}
.creneaux .creneau .creneau_heure {
  display: block;
  transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.creneaux .creneau .creneau_pris {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.creneaux .creneau .creneau_pris svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #242327;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.creneaux .creneau .creneau_pris span {
  font-size: 0.55rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(36, 35, 39, 0.7);
}
.creneaux .creneau.reserve {
  background: #FFC62E;
  border-color: #FFC62E;
  box-shadow: 0 3px 0 #C98F00;
  /* la case se referme sur le choix */
  animation: creneau_prend 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.creneaux .creneau.reserve .creneau_heure {
  opacity: 0;
  transform: translateY(-10px) scale(0.85);
}
.creneaux .creneau.reserve .creneau_pris {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease 0.16s, transform 0.32s cubic-bezier(0.2, 1.5, 0.4, 1) 0.16s;
}
.creneaux .creneau.reserve .creneau_pris svg {
  animation: creneau_coche 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.26s both;
}
.creneaux .creneau {
  /* déjà pris : hachuré */
}
.creneaux .creneau:disabled {
  border-style: dashed;
  border-color: rgba(36, 35, 39, 0.22);
  background: repeating-linear-gradient(45deg, rgba(36, 35, 39, 0.09) 0 3px, transparent 3px 6px);
  color: rgba(36, 35, 39, 0.4);
  text-decoration: line-through;
  box-shadow: none;
  transform: none;
}
.creneaux .creneau:nth-child(1) {
  animation-delay: 0.04s;
}
.creneaux .creneau:nth-child(2) {
  animation-delay: 0.08s;
}
.creneaux .creneau:nth-child(3) {
  animation-delay: 0.12s;
}
.creneaux .creneau:nth-child(4) {
  animation-delay: 0.16s;
}
.creneaux .creneau:nth-child(5) {
  animation-delay: 0.2s;
}
.creneaux .creneau:nth-child(6) {
  animation-delay: 0.24s;
}
.creneaux .creneau:nth-child(7) {
  animation-delay: 0.28s;
}
.creneaux .creneau:nth-child(8) {
  animation-delay: 0.32s;
}
.creneaux .creneau:nth-child(9) {
  animation-delay: 0.36s;
}

@keyframes jour_prend {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.09);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes jour_num {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes creneau_prend {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes creneau_coche {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* légende des créneaux */
.legende {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.legende_item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
  font-size: 0.72rem;
  color: rgba(36, 35, 39, 0.55);
}
.legende_item::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 0.3rem;
  display: block;
}
.legende_item.choisi::before {
  background: #FFC62E;
  box-shadow: 0 2px 0 #C98F00;
}
.legende_item.pris::before {
  border: 1.5px dashed rgba(36, 35, 39, 0.22);
  background: repeating-linear-gradient(45deg, rgba(36, 35, 39, 0.09) 0 3px, transparent 3px 6px);
}

/* barre de progression du tunnel */
.etapes {
  display: flex;
  gap: 0.4rem;
}
.etapes .etape {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.etapes .etape_barre {
  height: 6px;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.12);
  transition: background 0.3s ease;
}
.etapes .etape_label {
  font-weight: 600;
  font-size: 0.6rem;
  line-height: 1.2;
  color: rgba(36, 35, 39, 0.4);
  transition: color 0.3s ease;
}
.etapes .etape.actif .etape_barre, .etapes .etape.faite .etape_barre {
  background: #FFC62E;
}
.etapes .etape.actif .etape_label, .etapes .etape.faite .etape_label {
  color: #242327;
}

/* 🐻 Mascotte — SVG injecté inline par assets/js/composants/mascotte.js */
.mascotte {
  display: block;
  line-height: 0;
}
.mascotte .mascotte_svg {
  width: 100%;
  height: 100%;
}

/* Les yeux : deux cercles groupés par le JS.
   Deux animations se combinent sur un seul transform :
     1. translate — le regard suit le curseur (variables posées en JS)
     2. scaleY    — le clignement (classe .cligne, rythme aléatoire)
   L'ordre compte : translate d'abord, sinon le décalage serait écrasé
   par le scaleY pendant le clignement. */
.mascotte_yeux {
  /* fill-box : l'origine est relative à la boîte des deux cercles,
     donc 50% 50% = le centre des yeux, quelle que soit la taille affichée */
  transform-box: fill-box;
  transform-origin: 50% 50%;
  --oeil-x: 0px;
  --oeil-y: 0px;
  --paupiere: 1;
  transform: translate(var(--oeil-x), var(--oeil-y)) scaleY(var(--paupiere));
  /* le regard glisse doucement, la paupière claque */
  transition: transform 0.12s ease-out;
}
.mascotte_yeux.cligne {
  --paupiere: .08;
  transition: transform 0.07s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mascotte_yeux {
    transform: none;
    transition: none;
  }
  .mascotte_yeux.cligne {
    transform: none;
  }
}
/* 🐻 Hero d'accueil */
.hero {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.125rem 1.625rem;
  color: #FAF8F3;
  background: #262626;
  background-image: radial-gradient(circle at 82% 8%, rgba(255, 198, 46, 0.28), transparent 46%), radial-gradient(rgba(250, 248, 243, 0.07) 1px, transparent 1px);
  background-size: auto, 14px 14px;
  /* halo jaune animé */
}
.hero::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -52px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: #FFC62E;
  opacity: 0.16;
  animation: glow 5s ease-in-out infinite;
}
.hero .hero_marque {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.hero .hero_marque .hero_logo {
  width: 176px;
  height: 81px;
  flex: none;
}
.hero .hero_marque .hero_mascotte {
  width: 52px;
  height: 75px;
  flex: none;
  margin-top: 0.25rem;
  /* l'animation vient de .mascotte[data-anim~="dandine"] */
}
.hero .hero_badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: #FFC62E;
  color: #242327;
  padding: 0.375rem 0.7rem;
  border-radius: 0.5rem;
  font-weight: bold;
  font-size: 0.69rem;
  line-height: 1;
  transform: rotate(-1.6deg);
  margin-top: 0.375rem;
  box-shadow: 0 3px 0 #C98F00;
}
.hero .hero_titre {
  font-family: "baloo 2";
  font-weight: 800;
  font-size: 2.06rem;
  line-height: 1.06;
  margin-top: 0.875rem;
  text-wrap: pretty;
}
.hero .hero_text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(250, 248, 243, 0.78);
  margin-top: 0.625rem;
  max-width: 292px;
}
.hero .hero_actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.hero .hero_actions .main_btn {
  flex: 1;
  min-height: 52px;
  padding: 0 1rem;
  box-shadow: 0 4px 0 #C98F00;
}
.hero .hero_actions .secondary_btn {
  flex: none;
  min-height: 52px;
  padding: 0 1.06rem;
  font-size: 0.875rem;
}

/* photo de couverture qui remonte sur le hero */
.hero_photo {
  /* dans le hero : elle déborde sur le fond crème en dessous,
     comme dans la maquette. Sur grand écran elle passe à droite. */
  position: relative;
  height: 190px;
  margin: 1.5rem 0 0;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 3px solid #FAF8F3;
  box-shadow: 0 14px 28px -16px rgba(36, 35, 39, 0.6);
}

/* en-tête du tunnel de réservation */
.tunnel_head {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(250, 248, 243, 0.94);
  backdrop-filter: blur(8px);
  padding: 0.8rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(36, 35, 39, 0.08);
}
.tunnel_head .tunnel_barre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.tunnel_head .tunnel_barre .back_btn {
  width: 40px;
  height: 40px;
  flex: none;
  /* Une icône plutôt que le caractère « ← » : le glyphe a des
     approches asymétriques et se posait un pixel trop à gauche.
     Le flex centre aussi le <a>, qui sinon aligne son contenu
     à gauche là où le <button> le centre tout seul. */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: white;
  font-size: 0.88rem;
  color: #242327;
  box-shadow: 0 2px 0 rgba(36, 35, 39, 0.12);
  transition: transform 0.13s ease;
}
.tunnel_head .tunnel_barre .back_btn:hover {
  transform: translateX(-2px);
}
.tunnel_head .tunnel_barre .back_btn:active {
  transform: translateY(1px);
}
.tunnel_head .tunnel_barre .tunnel_titre {
  flex: 1;
  min-width: 0;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.03rem;
  line-height: 1.1;
}
.tunnel_head .tunnel_barre .tunnel_compteur {
  font-weight: bold;
  font-size: 0.69rem;
  background: #242327;
  color: #FAF8F3;
  border-radius: 999px;
  padding: 0.375rem 0.625rem;
  white-space: nowrap;
}
.tunnel_head .etapes {
  margin-top: 0.75rem;
}

/* écran de confirmation */
.confirm {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 2.25rem 1.25rem 2rem;
  color: #FAF8F3;
  background: #6E3011;
  background-image: radial-gradient(circle at 50% 18%, rgba(255, 198, 46, 0.3), transparent 55%);
}
.confirm .confirm_medaille {
  position: relative;
  width: 124px;
  height: 124px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm .confirm_medaille::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #FFC62E;
  animation: ring 2.4s ease-out infinite;
}
.confirm .confirm_medaille::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: rgba(250, 248, 243, 0.12);
}
.confirm .confirm_medaille img, .confirm .confirm_medaille .mascotte {
  position: relative;
  width: 66px;
  height: 95px;
  animation: bounceIn 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.confirm .confirm_titre {
  font-family: "baloo 2";
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.1;
  margin-top: 1.25rem;
}
.confirm .confirm_text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(250, 248, 243, 0.8);
  margin: 0.55rem auto 0;
  max-width: 272px;
}

/* pastille d'état : « En attente de confirmation » */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFC62E;
  color: #242327;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 0 #C98F00;
}
.etat::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #242327;
  animation: blink 1.6s ease-in-out infinite;
}
.etat.confirme {
  background: rgba(110, 48, 17, 0.12);
  color: #6E3011;
  box-shadow: none;
}
.etat.confirme::before {
  background: #3E8E5A;
  animation: none;
}
.etat.refuse {
  background: rgba(36, 35, 39, 0.1);
  color: rgba(36, 35, 39, 0.6);
  box-shadow: none;
}
.etat.refuse::before {
  background: rgba(36, 35, 39, 0.4);
  animation: none;
}

/* carte récapitulative (relecture + confirmation) */
.recap {
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(110, 48, 17, 0.1);
}
.recap .recap_ligne {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.95rem;
  border-bottom: 1px solid rgba(36, 35, 39, 0.07);
}
.recap .recap_ligne .recap_infos {
  flex: 1;
  min-width: 0;
}
.recap .recap_ligne .recap_infos .recap_label {
  display: block;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(36, 35, 39, 0.45);
}
.recap .recap_ligne .recap_infos .recap_valeur {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.97rem;
  line-height: 1.2;
  margin-top: 0.3rem;
}
.recap {
  /* total jaune */
}
.recap .recap_total {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.06rem 0.95rem;
  background: #FFC62E;
  border-bottom: none;
}
.recap .recap_total .recap_total_label {
  flex: 1;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.03rem;
}
.recap .recap_total .recap_total_prix {
  font-weight: bold;
  font-size: 1.3rem;
  white-space: nowrap;
}

/* liste simple clé → valeur (ticket de confirmation) */
.ticket {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.25rem;
  padding: 1.06rem;
  box-shadow: 0 4px 0 rgba(110, 48, 17, 0.1);
}
.ticket .ticket_ligne {
  display: flex;
  gap: 0.625rem;
}
.ticket .ticket_ligne .ticket_label {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: rgba(36, 35, 39, 0.55);
}
.ticket .ticket_ligne .ticket_valeur {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.84rem;
  text-align: right;
}
.ticket .ticket_ligne.separe {
  border-top: 1px solid rgba(36, 35, 39, 0.08);
  padding-top: 0.75rem;
}

/* état vide : « Rien à traiter » */
.vide {
  background: rgba(36, 35, 39, 0.04);
  border-radius: 1.1rem;
  padding: 1.4rem;
  text-align: center;
}
.vide img, .vide .mascotte {
  width: 40px;
  height: 58px;
  margin: 0 auto;
  opacity: 0.75;
  animation: bob 5s ease-in-out infinite;
}
.vide p {
  font-weight: 500;
  font-size: 0.81rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.625rem;
}

/* 🔐 Espace Malik */
.admin_head {
  padding: 1.125rem 1rem 1.375rem;
  color: #FAF8F3;
  background: #242327;
  background-image: radial-gradient(rgba(250, 248, 243, 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
}
.admin_head .admin_barre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.admin_head .admin_barre img, .admin_head .admin_barre .mascotte {
  width: 33px;
  height: 48px;
  flex: none;
}
.admin_head .admin_barre .admin_infos {
  flex: 1;
  min-width: 0;
}
.admin_head .admin_barre .admin_infos strong {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.1;
}
.admin_head .admin_barre .admin_infos span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(250, 248, 243, 0.6);
  margin-top: 0.2rem;
}
.admin_head .admin_barre .quitter_btn {
  flex: none;
  border: 1.5px solid rgba(250, 248, 243, 0.3);
  background: none;
  color: #FAF8F3;
  border-radius: 999px;
  padding: 0.55rem 0.8rem;
  font-weight: 600;
  font-size: 0.72rem;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.admin_head .admin_barre .quitter_btn:hover {
  background: rgba(250, 248, 243, 0.12);
}
.admin_head .admin_stats {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.125rem;
}
.admin_head .admin_stats .stat {
  flex: 1;
  border-radius: 1rem;
  padding: 0.75rem;
  background: rgba(250, 248, 243, 0.08);
  border: 1.5px solid rgba(250, 248, 243, 0.16);
}
.admin_head .admin_stats .stat .stat_num {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.63rem;
  line-height: 1;
}
.admin_head .admin_stats .stat .stat_label {
  display: block;
  font-weight: 600;
  font-size: 0.66rem;
  line-height: 1.2;
  color: rgba(250, 248, 243, 0.65);
  margin-top: 0.25rem;
}
.admin_head .admin_stats .stat.jaune {
  background: #FFC62E;
  border-color: #FFC62E;
  color: #242327;
  box-shadow: 0 4px 0 #C98F00;
}
.admin_head .admin_stats .stat.jaune .stat_label {
  color: #242327;
}

/* titre + compteur : « À traiter (3) » */
.admin_titre {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.admin_titre strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.19rem;
  line-height: 1.1;
}
.admin_titre .compteur {
  background: #FFC62E;
  color: #242327;
  border-radius: 999px;
  padding: 0.3rem 0.625rem;
  font-weight: bold;
  font-size: 0.69rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 0 #C98F00;
}

/* demande en attente */
.demande {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1.5px solid rgba(255, 198, 46, 0.9);
  border-radius: 1.25rem;
  padding: 0.95rem 0.95rem 0.95rem 1.19rem;
  box-shadow: 0 4px 0 rgba(255, 198, 46, 0.55);
  animation: slideIn 0.3s ease both;
  /* liseré jaune à gauche */
}
.demande::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #FFC62E;
}
.demande .demande_head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.demande .demande_head .demande_qui {
  flex: 1;
  min-width: 0;
}
.demande .demande_head .demande_qui strong {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.06rem;
  line-height: 1.15;
}
.demande .demande_head .demande_qui span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: rgba(36, 35, 39, 0.5);
  margin-top: 0.2rem;
}
.demande .demande_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.demande .demande_tags .tag {
  background: rgba(36, 35, 39, 0.05);
  border-radius: 0.55rem;
  padding: 0.5rem 0.625rem;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}
.demande .demande_contact {
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6E3011;
  margin-top: 0.7rem;
}
.demande .demande_actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.875rem;
}
.demande .demande_actions .main_btn {
  flex: 1;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: 0.875rem;
  font-size: 0.875rem;
  box-shadow: 0 3px 0 #C98F00;
}
.demande .demande_actions .ghost_btn {
  flex: none;
  min-height: 48px;
  border-radius: 0.875rem;
  padding: 0 1.19rem;
  font-size: 0.875rem;
  box-shadow: 0 3px 0 rgba(36, 35, 39, 0.1);
}
.demande .demande_actions .ghost_btn:active {
  box-shadow: none;
}

/* rendez-vous confirmé */
.rdv {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  padding: 0.8rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.18s ease;
}
.rdv:hover {
  transform: translateY(-2px);
}
.rdv .rdv_date {
  width: 54px;
  flex: none;
  text-align: center;
  background: #6E3011;
  color: #FAF8F3;
  border-radius: 0.8rem;
  padding: 0.5rem 0;
}
.rdv .rdv_date .rdv_dow {
  display: block;
  font-weight: 600;
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.75;
}
.rdv .rdv_date .rdv_num {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.19rem;
  line-height: 1.15;
}
.rdv .rdv_infos {
  flex: 1;
  min-width: 0;
}
.rdv .rdv_infos strong {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.94rem;
  line-height: 1.15;
}
.rdv .rdv_infos span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.2rem;
}

/* rendez-vous refusé — version grisée */
.rdv.refuse {
  background: rgba(36, 35, 39, 0.04);
  border-color: transparent;
  box-shadow: none;
}
.rdv.refuse .rdv_infos strong {
  font-family: "work sans";
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(36, 35, 39, 0.6);
}
.rdv.refuse .rdv_infos span {
  color: rgba(36, 35, 39, 0.45);
}

/* tableau des horaires */
.horaires {
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.horaires .horaire {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.8rem 0.875rem;
  border-bottom: 1px solid rgba(36, 35, 39, 0.07);
}
.horaires .horaire:last-child {
  border-bottom: none;
}
.horaires .horaire .horaire_jour {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
}
.horaires .horaire .horaire_heure {
  font-weight: 500;
  font-size: 0.84rem;
  opacity: 0.8;
  white-space: nowrap;
}
.horaires .horaire .horaire_today {
  font-weight: bold;
  font-size: 0.6rem;
  background: #242327;
  color: #FFC62E;
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
}
.horaires .horaire {
  /* jour de fermeture */
}
.horaires .horaire.ferme {
  background: rgba(36, 35, 39, 0.03);
}
.horaires .horaire.ferme .horaire_jour, .horaires .horaire.ferme .horaire_heure {
  color: rgba(36, 35, 39, 0.45);
}
.horaires .horaire {
  /* jour courant */
}
.horaires .horaire.actif {
  background: rgba(255, 198, 46, 0.14);
}

/* 🐻 En-tête — générée par assets/js/composants/header.js */
header {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(250, 248, 243, 0.98);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(36, 35, 39, 0.08);
  box-shadow: 0 2px 12px -8px rgba(36, 35, 39, 0.25);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
header .gauche {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
header .gauche .icon {
  flex: none;
  cursor: pointer;
  transition: transform 0.13s ease;
}
header .gauche .icon:active {
  transform: scale(0.9);
}
header .gauche .brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
header .gauche .brand_name {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.03rem;
  line-height: 1;
}
header .gauche .brand_details {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
  font-size: 0.69rem;
  line-height: 1.3;
  color: #6E3011;
  margin-top: 0.2rem;
}
header .gauche .brand_details .disponibility {
  display: flex;
  align-items: center;
  gap: 5px;
}
header .gauche .brand_details .disponibility::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
header .gauche .brand_details .disponibility.open::before {
  background: #3E8E5A;
  animation: blink 2.4s ease-in-out infinite;
}
header .gauche .brand_details .disponibility.close::before {
  background: #C0392B;
}
header .droite {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* bouton son : discret, il ne doit pas voler la vedette à l'appel */
}
header .droite .son_btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  border-radius: 999px;
  background: white;
  color: rgba(36, 35, 39, 0.45);
  font-size: 0.85rem;
  transition: color 0.18s ease, background 0.18s ease, transform 0.13s ease;
}
header .droite .son_btn:active {
  transform: scale(0.92);
}
header .droite .son_btn.actif {
  background: rgba(255, 198, 46, 0.25);
  border-color: rgba(255, 198, 46, 0.8);
  color: #6E3011;
}
header .droite .main_btn {
  border-radius: 999px;
  padding: 0;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 #C98F00;
}
header .droite .main_btn:hover {
  box-shadow: 0 5px 0 #C98F00;
}
header .droite .main_btn:active {
  box-shadow: 0 1px 0 #C98F00;
}

/* 🧭 Barre de navigation basse — générée par assets/js/composants/footer.js */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  gap: 0.375rem;
  background: rgba(250, 248, 243, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(36, 35, 39, 0.09);
  padding: 0.5rem 0.625rem 0.875rem;
}
footer .tab {
  flex: 1;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 0.875rem;
  padding: 0.55rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  transition: background 0.18s ease;
}
footer .tab .tab_mark {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.18s ease;
}
footer .tab .tab_label {
  font-weight: 600;
  font-size: 0.72rem;
  color: rgba(36, 35, 39, 0.5);
  transition: color 0.18s ease;
}
footer .tab:active {
  transform: scale(0.96);
}
footer .tab.actif {
  background: rgba(255, 198, 46, 0.22);
}
footer .tab.actif .tab_mark {
  background: #FFC62E;
}
footer .tab.actif .tab_label {
  color: #242327;
}

/* bandeau d'action collé au dessus de la nav : « Prendre rendez-vous » */
.barre_action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 68px;
  z-index: 998;
  padding: 0.75rem 1rem 0.8rem;
  background: rgba(250, 248, 243, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(36, 35, 39, 0.09);
}
.barre_action .barre_hint {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.3;
  color: rgba(36, 35, 39, 0.5);
  text-align: center;
  margin-bottom: 0.55rem;
}
.barre_action {
  /* seule au bas de page (tunnel, sans nav) */
}
.barre_action.seule {
  bottom: 0;
}

/* 💬 Retours utilisateur : toast, modale, bouton en chargement */
/* ── TOAST : message flash en haut de l'écran ────────────────────── */
.toasts {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 420px;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  padding: 0.8rem 0.95rem;
  box-shadow: 0 8px 20px -10px rgba(36, 35, 39, 0.45);
  pointer-events: auto;
  animation: toast_entre 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  /* liseré coloré à gauche */
}
.toast::before {
  content: "";
  width: 4px;
  align-self: stretch;
  flex: none;
  border-radius: 999px;
  background: #FFC62E;
}
.toast .toast_icone {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 198, 46, 0.25);
  color: #6E3011;
  font-size: 0.8rem;
}
.toast .toast_texte {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 500;
}
.toast .toast_fermer {
  flex: none;
  border: none;
  background: none;
  padding: 0.2rem;
  color: rgba(36, 35, 39, 0.4);
  font-size: 0.9rem;
  line-height: 1;
}
.toast .toast_fermer:hover {
  color: #242327;
}
.toast.succes::before {
  background: #3E8E5A;
}
.toast.succes .toast_icone {
  background: rgba(62, 142, 90, 0.18);
  color: #3E8E5A;
}
.toast.erreur::before {
  background: #C0392B;
}
.toast.erreur .toast_icone {
  background: rgba(192, 57, 43, 0.15);
  color: #C0392B;
}
.toast.parti {
  animation: toast_sort 0.28s ease both;
}

@keyframes toast_entre {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toast_sort {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
}
/* ── MODALE : confirmation d'action ──────────────────────────────── */
.modale {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(36, 35, 39, 0.55);
  backdrop-filter: blur(3px);
  animation: fondu 0.25s ease both;
}
.modale.parti {
  animation: fondu 0.2s ease reverse both;
}
.modale .modale_boite {
  width: 100%;
  max-width: 340px;
  background: #FAF8F3;
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
  box-shadow: 0 20px 40px -16px rgba(36, 35, 39, 0.5);
  animation: modale_entre 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.modale .modale_boite .modale_ours {
  width: 56px;
  height: 81px; /* ratio 68x98 */
  margin: 0 auto 0.875rem;
}
.modale .modale_boite .modale_titre {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.2;
}
.modale .modale_boite .modale_texte {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(36, 35, 39, 0.6);
  margin-top: 0.5rem;
}
.modale .modale_boite .modale_actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.modale .modale_boite .modale_actions > * {
  flex: 1;
}
.modale .modale_boite .modale_actions .main_btn {
  min-height: 48px;
  padding: 0 1rem;
  font-size: 0.9rem;
}
.modale .modale_boite .modale_actions .ghost_btn {
  min-height: 48px;
  font-size: 0.9rem;
}
.modale .modale_boite .modale_actions {
  /* action destructive */
}
.modale .modale_boite .modale_actions .danger_btn {
  min-height: 48px;
  border: none;
  border-radius: 1rem;
  background: #C0392B;
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
  box-shadow: 0 3px 0 #96271C;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}
.modale .modale_boite .modale_actions .danger_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #96271C;
}
.modale .modale_boite .modale_actions .danger_btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #96271C;
}

@keyframes fondu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modale_entre {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ── BOUTON EN CHARGEMENT ────────────────────────────────────────── */
/* évite le double envoi : le bouton se bloque et montre qu'il travaille */
.main_btn, .block_btn, .ghost_btn {
  position: relative;
}
.main_btn.charge, .block_btn.charge, .ghost_btn.charge {
  color: transparent;
  pointer-events: none;
  /* trois points qui pulsent */
}
.main_btn.charge::after, .block_btn.charge::after, .ghost_btn.charge::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #242327;
  box-shadow: -12px 0 0 #242327, 12px 0 0 #242327;
  animation: points 1s ease-in-out infinite;
}

.block_btn.charge::after,
.main_btn.charge::after {
  background: #242327;
}

@keyframes points {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .modale, .modale_boite {
    animation: none !important;
  }
}
/* ── POPUP D'INSTALLATION (PWA) ──────────────────────────────────── */
.install {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: rgba(36, 35, 39, 0.5);
  backdrop-filter: blur(3px);
  animation: fondu 0.3s ease both;
}
.install.parti {
  animation: fondu 0.22s ease reverse both;
}
.install .install_boite {
  width: 100%;
  max-width: 400px;
  background: #FAF8F3;
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
  box-shadow: 0 20px 40px -16px rgba(36, 35, 39, 0.5);
  animation: install_monte 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.install .install_ours {
  width: 52px;
  height: 75px;
  margin: 0 auto 0.75rem;
}
.install .install_titre {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.15rem;
  line-height: 1.2;
}
.install .install_texte {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(36, 35, 39, 0.6);
  margin-top: 0.5rem;
}
.install .install_texte strong {
  color: #242327;
  font-weight: 600;
}
.install .install_actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.install .install_actions > * {
  flex: 1;
  min-height: 48px;
  padding: 0 1rem;
  font-size: 0.9rem;
}

@keyframes install_monte {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .install, .install_boite {
    animation: none !important;
  }
}
/* ── PROFIL RETENU ──────────────────────────────────────────────
   Bandeau au-dessus d'un formulaire pré-rempli : il dit d'où
   viennent les données et permet d'en changer. */
.profil_connu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 198, 46, 0.16);
  border: 1.5px solid rgba(255, 198, 46, 0.6);
  border-radius: 1.1rem;
  padding: 0.75rem 0.875rem;
  margin-bottom: 1rem;
}
.profil_connu .mascotte {
  width: 34px;
  height: 49px;
  flex: none;
}
.profil_connu .profil_infos {
  flex: 1;
  min-width: 0;
}
.profil_connu .profil_infos strong {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.88rem;
  line-height: 1.25;
  text-wrap: balance;
}
.profil_connu .profil_infos span {
  display: block;
  font-size: 0.76rem;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.1rem;
}
.profil_connu .pill_btn {
  flex: none;
  font-size: 0.7rem;
  padding: 0.45rem 0.65rem;
}

/* 🚀 Bouton d'envoi animé — l'ours part porter la demande à Malik

   Trois états, comme le modèle de référence :
     1. repos    le bouton normal
     2. envoi    le bouton se contracte en pastille, l'ours file sur sa courbe
     3. envoye   la pastille se déplie, coche + « C'est parti ! »

   Fait en SVG + CSS natif : pas de GSAP (MorphSVG et DrawSVG sont payants,
   et la librairie pèse plus lourd que tout notre CSS réuni). */
.envoi {
  position: relative;
  width: 100%;
  height: 56px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.envoi svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.envoi {
  /* ── la capsule du bouton ── */
}
.envoi .envoi_fond {
  fill: #FFC62E;
  transition: rx 0.45s cubic-bezier(0.65, 0, 0.35, 1), x 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1), fill 0.3s ease;
}
.envoi {
  /* l'ombre portée, comme sur tes autres boutons */
}
.envoi .envoi_ombre {
  fill: #C98F00;
  transition: rx 0.45s cubic-bezier(0.65, 0, 0.35, 1), x 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}
.envoi .envoi_texte {
  fill: #242327;
  font-family: "work sans";
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease, transform 0.3s ease;
  transform-origin: center;
}
.envoi {
  /* ── la trajectoire de l'ours ── */
}
.envoi .envoi_route {
  fill: none;
  stroke: rgba(250, 248, 243, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  opacity: 0;
}
.envoi {
  /* ── l'ours voyageur ── */
}
.envoi .envoi_ours {
  opacity: 0;
  transform-origin: center;
}
.envoi {
  /* ── la coche finale ── */
}
.envoi .envoi_coche {
  fill: none;
  stroke: #242327;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  opacity: 0;
}
.envoi .envoi_fini {
  fill: #242327;
  font-family: "work sans";
  font-weight: bold;
  font-size: 15px;
  opacity: 0;
}
.envoi:hover .envoi_fond {
  filter: brightness(1.04);
}
.envoi:active {
  transform: translateY(2px);
}
.envoi {
  /* ═══ ÉTAT : ENVOI EN COURS ═══════════════════════════════════ */
}
.envoi.envoi_actif {
  pointer-events: none;
  /* la capsule se contracte en pastille au centre */
}
.envoi.envoi_actif .envoi_fond {
  x: 158px;
  width: 56px;
  rx: 28px;
}
.envoi.envoi_actif .envoi_ombre {
  x: 158px;
  width: 56px;
  rx: 28px;
  opacity: 0;
}
.envoi.envoi_actif .envoi_texte {
  opacity: 0;
  transform: scale(0.7);
}
.envoi.envoi_actif {
  /* la route se dessine */
}
.envoi.envoi_actif .envoi_route {
  opacity: 1;
  animation: route_trace 0.9s cubic-bezier(0.4, 0, 0.6, 1) 0.25s both;
}
.envoi.envoi_actif {
  /* l'ours suit la courbe */
}
.envoi.envoi_actif .envoi_ours {
  animation: ours_vole 1.15s cubic-bezier(0.45, 0, 0.55, 1) 0.2s both;
}
.envoi {
  /* ═══ ÉTAT : ENVOYÉ ═══════════════════════════════════════════ */
}
.envoi.envoi_fait {
  pointer-events: none;
  /* la pastille se déplie en capsule verte */
}
.envoi.envoi_fait .envoi_fond {
  fill: #3E8E5A;
  x: 88px;
  width: 196px;
  rx: 26px;
  transition-delay: 0.05s;
}
.envoi.envoi_fait .envoi_ombre {
  opacity: 0;
}
.envoi.envoi_fait .envoi_texte {
  opacity: 0;
}
.envoi.envoi_fait .envoi_ours {
  opacity: 0;
}
.envoi.envoi_fait .envoi_route {
  opacity: 0;
}
.envoi.envoi_fait .envoi_coche {
  stroke: white;
  opacity: 1;
  animation: coche_trace 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}
.envoi.envoi_fait .envoi_fini {
  fill: white;
  animation: fini_entre 0.3s ease 0.42s both;
}

@keyframes route_trace {
  from {
    stroke-dashoffset: 190;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* l'ours décolle, monte en arc, puis plonge vers le centre */
@keyframes ours_vole {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.45) rotate(-12deg);
  }
  14% {
    opacity: 1;
    transform: translate(18px, -5px) scale(0.8) rotate(6deg);
  }
  45% {
    opacity: 1;
    transform: translate(72px, -13px) scale(0.9) rotate(10deg);
  }
  76% {
    opacity: 1;
    transform: translate(126px, -7px) scale(0.8) rotate(-5deg);
  }
  100% {
    opacity: 0;
    transform: translate(158px, 1px) scale(0.45) rotate(-14deg);
  }
}
@keyframes coche_trace {
  from {
    stroke-dashoffset: 26;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fini_entre {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .envoi .envoi_fond, .envoi .envoi_ombre, .envoi .envoi_texte {
    transition: none;
  }
  .envoi .envoi_route, .envoi .envoi_ours, .envoi .envoi_coche, .envoi .envoi_fini {
    animation: none;
  }
  .envoi.envoi_fait .envoi_coche, .envoi.envoi_fait .envoi_fini {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
/* 📜 Effets de scroll — pilotés par assets/js/composants/reveal.js */
/* ── apparitions ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
  /* par défaut : monte en fondu */
  transform: translateY(22px);
}
.reveal[data-reveal=gauche] {
  transform: translateX(-26px);
}
.reveal[data-reveal=droite] {
  transform: translateX(26px);
}
.reveal[data-reveal=bas] {
  transform: translateY(-22px);
}
.reveal[data-reveal=zoom] {
  transform: scale(0.94);
}
.reveal {
  /* l'ours arrive en se dandinant */
}
.reveal[data-reveal=ours] {
  transform: translateY(26px) rotate(-6deg) scale(0.9);
}
.reveal.is_visible {
  opacity: 1;
  transform: none;
}

/* cascade : chaque enfant part 70 ms après le précédent
   (--i est posé par le JS) */
.stagger_scroll > .reveal {
  transition-delay: calc(var(--i, 0) * 0.07s);
}

/* ── parallaxe ───────────────────────────────────────────────────── */
.parallaxe {
  --para: 0px;
  will-change: transform;
  transform: translateY(var(--para));
}

/* ── en-tête qui réagit au scroll ────────────────────────────────── */
header {
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), padding 0.25s ease, box-shadow 0.25s ease;
  /* compactée : moins haute, avec une ombre pour se détacher */
}
header.compact {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  box-shadow: 0 4px 16px -8px rgba(36, 35, 39, 0.35);
}
header {
  /* cachée : on descend, elle s'efface pour libérer l'écran */
}
header.cachee {
  transform: translateY(-100%);
}

/* ── retour en haut ──────────────────────────────────────────────── */
.haut_btn {
  position: fixed;
  right: 1rem;
  bottom: 11.5rem; /* au-dessus de la barre d'action et de la nav */
  z-index: 900;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: #242327;
  color: #FAF8F3;
  font-size: 0.9rem;
  box-shadow: 0 4px 0 #6E3011;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), visibility 0.25s;
}
.haut_btn.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.haut_btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #6E3011;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .parallaxe {
    transform: none !important;
  }
  header.cachee {
    transform: none;
  }
}
/* 📄 Mise en page des pages du site */
body {
  padding: 0; /* le padding de démo n'a plus lieu d'être */
}

/* Le header est fixe : on décale le contenu pour qu'il ne passe pas
   dessous. Le hero, lui, remonte volontairement jusqu'au header (fond
   sombre continu), donc on décale son contenu interne et non le bloc. */
.page {
  padding-bottom: 13rem; /* barre d'action (~80px) + nav basse (~68px) */
  /* premier enfant : il démarre sous le header */
}
.page > *:first-child:not(.hero) {
  margin-top: 62px;
}

.hero {
  padding-top: calc(62px + 1.5rem);
  /* rogné : le halo décoratif est en position absolue hors cadre,
     sans ça il élargit la page et décale tout vers la droite */
  overflow: hidden;
}

/* l'en-tête du tunnel est collant : il doit passer devant le contenu */
.tunnel .tunnel_head {
  z-index: 950;
}

/* la page de réservation a son propre en-tête et pas de nav basse */
.tunnel .page {
  padding-top: 0;
  padding-bottom: 9rem;
}
.tunnel .page > *:first-child {
  margin-top: 0;
}

/* bloc de contenu : la marge latérale commune */
.bloc {
  padding: 1.25rem 1rem 0;
}
.bloc_entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.bloc_titre {
  padding-top: 1.5rem;
}

/* grande accroche de page (Tarifs, Infos) */
.page_titre {
  font-family: "baloo 2";
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.05;
}

.page_trait {
  display: block;
  width: 60px;
  height: 6px;
  border-radius: 999px;
  background: #FFC62E;
  margin-top: 0.625rem;
}

.page_intro {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.6);
  margin-top: 0.75rem;
}

.page_note {
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.5);
  text-align: center;
  margin-top: 1rem;
}

/* liste verticale de cartes */
.liste_services {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* pendant le chargement d'une liste */
.etat_chargement {
  font-size: 0.82rem;
  color: rgba(36, 35, 39, 0.5);
  padding: 1rem 0;
  text-align: center;
}

/* pied de page discret : accès à l'espace de Malik */
.espace_malik {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.75rem 0 0.5rem;
}
.espace_malik .mascotte {
  width: 19px;
  height: 27px;
  opacity: 0.5;
}
.espace_malik .link_btn {
  color: rgba(36, 35, 39, 0.42);
  font-weight: 500;
}

/* le plan sur la page Infos */
.galerie_item.plan {
  width: 100%;
  height: 154px;
}

/* ── page de connexion de l'admin ────────────────────────────────── */
/* L'écran de connexion couvre tout : sans ça, la grille de l'admin
   (colonne de navigation + contenu) le comprimerait dans 68 px. */
.connexion {
  position: fixed;
  inset: 0;
  z-index: 9000;
  grid-column: 1/-1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: #242327;
  background-image: radial-gradient(rgba(250, 248, 243, 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
}
.connexion_boite {
  width: 100%;
  max-width: 340px;
  background: #FAF8F3;
  border-radius: 1.25rem;
  padding: 1.75rem 1.25rem 1.25rem;
  text-align: center;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.5);
}
.connexion_ours {
  width: 56px;
  height: 81px;
  margin: 0 auto 0.875rem;
}
.connexion_titre {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.3rem;
}
.connexion_texte {
  font-size: 0.8rem;
  color: rgba(36, 35, 39, 0.6);
  margin-top: 0.35rem;
}
.connexion .form {
  margin: 1.25rem 0 1rem;
  text-align: left;
}
.connexion .champ_label {
  text-align: left;
}

/* l'espace admin n'a pas de nav basse : on récupère la place */
body[data-page=admin] .page {
  padding-top: 0;
  padding-bottom: 2rem;
}

/* ── tunnel : sortie et transitions entre les étapes ─────────────── */
.quitter_tunnel {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  color: rgba(36, 35, 39, 0.5);
  font-size: 0.82rem;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.13s ease;
}
.quitter_tunnel:hover {
  background: rgba(36, 35, 39, 0.1);
  color: #242327;
}
.quitter_tunnel:active {
  transform: scale(0.9);
}

/* Chaque étape entre en glissant. Le sens dépend du chemin :
   en avant elle arrive de la droite, en arrière de la gauche. */
.etape_vue {
  animation: etape_avance 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.tunnel_page.recule .etape_vue {
  animation-name: etape_recule;
}

@keyframes etape_avance {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes etape_recule {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* la barre de progression se remplit en glissant */
.etape_barre {
  transform-origin: left center;
}

.etape.actif .etape_barre,
.etape.faite .etape_barre {
  animation: barre_remplit 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes barre_remplit {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .etape_vue, .etape_barre {
    animation: none !important;
  }
}
/* ⏳ Loader — l'ours se réveille pendant que les images chargent */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: #262626;
  background-image: radial-gradient(circle at 50% 42%, rgba(255, 198, 46, 0.18), transparent 55%), radial-gradient(rgba(250, 248, 243, 0.07) 1px, transparent 1px);
  background-size: auto, 14px 14px;
  transition: opacity 0.45s ease, visibility 0.45s;
  /* le logo : il arrive en rebondissant (l'ours est dedans) */
}
.loader .loader_logo {
  width: 200px;
  height: 92px; /* ratio 335x154 */
  animation: bounceIn 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.loader {
  /* la barre de progression : jaune, fine, sous le logo */
}
.loader .loader_barre {
  width: 132px;
  height: 3px;
  border-radius: 999px;
  background: rgba(250, 248, 243, 0.15);
  overflow: hidden;
}
.loader .loader_barre_jauge {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #FFC62E;
  /* la largeur est posée en JS selon les images réellement chargées */
  transition: width 0.3s ease-out;
}
.loader .loader_texte {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(250, 248, 243, 0.55);
  min-height: 1.2em;
}
.loader {
  /* sortie : le loader s'efface, la page est déjà dessous */
}
.loader.parti {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* pendant le chargement, on bloque le défilement */
body.charge {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .loader .loader_logo {
    animation: none;
    opacity: 1;
  }
}
/* boutons de test (page composants) */
.demo_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.demo_actions .ghost_btn {
  min-height: 44px;
  font-size: 0.8rem;
  padding: 0 0.9rem;
}

/* 🔀 Transitions entre les pages — fondu + glissement court */
/* ── Navigateurs récents : API View Transitions ──────────────────
   Fonctionne en PHP classique (pages séparées), sans SPA.
   Chrome/Edge/Safari récents ; ailleurs la navigation reste normale. */
@view-transition {
  navigation: auto;
}
@keyframes page_entre {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes page_sort {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
::view-transition-old(root) {
  animation: page_sort 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: page_entre 0.26s cubic-bezier(0, 0, 0.2, 1) both;
}

/* l'en-tête et la nav basse ne bougent pas : elles sont communes
   à toutes les pages, les faire clignoter serait désagréable */
header, footer {
  view-transition-name: none;
}

/* ── Repli pour les autres navigateurs ───────────────────────────
   assets/js/composants/transitions.js pose ces classes à la main */
.page_sortante {
  animation: page_sort 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

.page_entrante {
  animation: page_entre 0.26s cubic-bezier(0, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .page_sortante,
  .page_entrante {
    animation: none !important;
  }
}
/* 💀 Squelettes de chargement

   Plutôt qu'un tourniquet qui ne dit rien, on affiche la FORME du contenu
   à venir. L'œil comprend la structure avant d'avoir les données, et
   l'arrivée du vrai contenu ne fait pas sauter la page. */
.squelette {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: rgba(36, 35, 39, 0.07);
  /* le texte éventuel reste réservé mais invisible */
  color: transparent;
  user-select: none;
  pointer-events: none;
  /* le balayage lumineux qui indique « ça charge » */
}
.squelette::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: squelette_balaye 1.4s ease-in-out infinite;
}
.squelette {
  /* variantes de forme */
}
.squelette.ligne {
  height: 0.8rem;
}
.squelette.ligne_courte {
  height: 0.8rem;
  width: 45%;
}
.squelette.titre {
  height: 1.1rem;
  width: 65%;
}
.squelette.rond {
  border-radius: 999px;
}
.squelette.bloc {
  height: 100%;
  border-radius: 1rem;
}

@keyframes squelette_balaye {
  100% {
    transform: translateX(100%);
  }
}
/* ── squelettes composés : la forme exacte des vraies cartes ────── */
/* remplace une .big_box pendant le chargement */
.squelette_service {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  padding: 0.7rem;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
}
.squelette_service .sq_cover {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 0.875rem;
}
.squelette_service .sq_infos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.squelette_service .sq_btn {
  width: 78px;
  height: 56px;
  flex: none;
  border-radius: 0.875rem;
}

/* remplace une ligne de liste admin */
.squelette_ligne {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  padding: 0.8rem;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
}
.squelette_ligne .sq_rond {
  width: 44px;
  height: 44px;
  flex: none;
}
.squelette_ligne .sq_texte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.squelette_ligne .sq_etat {
  width: 78px;
  height: 24px;
  flex: none;
  border-radius: 999px;
}

/* remplace un créneau */
.squelette_creneau {
  min-height: 50px;
  border-radius: 0.875rem;
}

/* décalage en cascade : les squelettes ne pulsent pas tous ensemble,
   sinon l'écran clignote d'un bloc */
.squelettes > *:nth-child(1) .squelette::after {
  animation-delay: 0.09s;
}
.squelettes > *:nth-child(2) .squelette::after {
  animation-delay: 0.18s;
}
.squelettes > *:nth-child(3) .squelette::after {
  animation-delay: 0.27s;
}
.squelettes > *:nth-child(4) .squelette::after {
  animation-delay: 0.36s;
}
.squelettes > *:nth-child(5) .squelette::after {
  animation-delay: 0.45s;
}
.squelettes > *:nth-child(6) .squelette::after {
  animation-delay: 0.54s;
}
.squelettes > *:nth-child(7) .squelette::after {
  animation-delay: 0.63s;
}
.squelettes > *:nth-child(8) .squelette::after {
  animation-delay: 0.72s;
}

@media (prefers-color-scheme: dark) {
  .squelette::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .squelette::after {
    animation: none;
  }
}
/* 🎛 Contrôles de l'espace Malick */
/* ── INTERRUPTEUR ────────────────────────────────────────────────
   Activer / désactiver une prestation, un produit, la boutique.
   Un interrupteur dit « c'est en marche », une case dit « c'est coché » —
   ici on parle bien d'un état, pas d'un choix. */
.interrupteur {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
}
.interrupteur_piste {
  flex: none;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.16);
  padding: 3px;
  transition: background 0.18s ease;
}
.interrupteur_piste::after {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 1px 3px rgba(36, 35, 39, 0.3);
  transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.interrupteur_texte {
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.3;
}
.interrupteur_texte small {
  display: block;
  font-size: 0.72rem;
  color: rgba(36, 35, 39, 0.5);
  font-weight: 400;
}
.interrupteur.actif .interrupteur_piste {
  background: #3E8E5A;
}
.interrupteur.actif .interrupteur_piste::after {
  transform: translateX(19px);
}
.interrupteur:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── ONGLETS / SEGMENTS ──────────────────────────────────────────
   Filtrer une liste : toutes / à traiter / confirmées… */
.onglets {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.28rem;
  background: rgba(36, 35, 39, 0.05);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}
.onglets::-webkit-scrollbar {
  height: 0;
}
.onglets .onglet {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-family: "work sans";
  font-weight: 600;
  font-size: 0.82rem;
  color: rgba(36, 35, 39, 0.55);
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.onglets .onglet:hover {
  color: #242327;
}
.onglets .onglet .onglet_nb {
  font-size: 0.68rem;
  font-weight: bold;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.1);
  line-height: 1.4;
}
.onglets .onglet.actif {
  background: white;
  color: #242327;
  box-shadow: 0 1px 3px rgba(36, 35, 39, 0.12);
}
.onglets .onglet.actif .onglet_nb {
  background: #FFC62E;
  color: #242327;
}

/* ── RECHERCHE ───────────────────────────────────────────────────── */
.recherche {
  position: relative;
  display: flex;
  align-items: center;
}
.recherche input {
  width: 100%;
  min-height: 46px;
  padding: 0 2.4rem 0 2.5rem;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  border-radius: 999px;
  background: white;
  font-family: "work sans";
  font-size: 0.88rem;
  color: #242327;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.recherche input::placeholder {
  color: rgba(36, 35, 39, 0.4);
}
.recherche input:focus {
  border-color: #FFC62E;
  box-shadow: 0 0 0 3px rgba(255, 198, 46, 0.25);
}
.recherche_icone {
  position: absolute;
  left: 0.95rem;
  color: rgba(36, 35, 39, 0.35);
  font-size: 0.85rem;
  pointer-events: none;
}
.recherche_vider {
  position: absolute;
  right: 0.6rem;
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.08);
  color: rgba(36, 35, 39, 0.5);
  font-size: 0.7rem;
}
.recherche_vider:hover {
  background: rgba(36, 35, 39, 0.14);
}
.recherche.remplie .recherche_vider {
  display: flex;
}

/* ── COMPTEUR DE QUANTITÉ ────────────────────────────────────────
   Stock d'un produit, quantité au panier. */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  border-radius: 999px;
  background: white;
  overflow: hidden;
}
.stepper button {
  width: 40px;
  height: 40px;
  flex: none;
  border: none;
  background: none;
  color: #242327;
  font-size: 0.95rem;
  transition: background 0.18s ease;
}
.stepper button:hover {
  background: rgba(36, 35, 39, 0.06);
}
.stepper button:active {
  background: rgba(36, 35, 39, 0.12);
}
.stepper button:disabled {
  color: rgba(36, 35, 39, 0.25);
  cursor: not-allowed;
  background: none;
}
.stepper input {
  width: 46px;
  border: none;
  background: none;
  text-align: center;
  font-family: "work sans";
  font-weight: bold;
  font-size: 0.95rem;
  color: #242327;
  outline: none;
  font-variant-numeric: tabular-nums;
  /* on retire les flèches natives : les boutons les remplacent */
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── TÉLÉVERSEMENT D'IMAGE ──────────────────────────────────────── */
.televerser {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 150px;
  padding: 1.25rem;
  border: 2px dashed rgba(36, 35, 39, 0.2);
  border-radius: 1.1rem;
  background: rgba(36, 35, 39, 0.02);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.televerser:hover, .televerser.survol {
  border-color: #FFC62E;
  background: rgba(255, 198, 46, 0.08);
}
.televerser input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.televerser_icone {
  font-size: 1.4rem;
  color: rgba(36, 35, 39, 0.35);
}
.televerser_texte {
  font-weight: 600;
  font-size: 0.85rem;
}
.televerser_texte small {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  color: rgba(36, 35, 39, 0.5);
  margin-top: 0.2rem;
}
.televerser {
  /* une fois l'image choisie, elle remplit la zone */
}
.televerser_apercu {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  overflow: hidden;
  display: none;
}
.televerser_apercu img {
  object-fit: cover;
}
.televerser.remplie {
  border-style: solid;
  border-color: transparent;
  padding: 0;
}
.televerser.remplie .televerser_apercu {
  display: block;
}
.televerser.remplie .televerser_icone,
.televerser.remplie .televerser_texte {
  display: none;
}
.televerser_retirer {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.6);
  color: white;
  font-size: 0.75rem;
  backdrop-filter: blur(4px);
}
.televerser.remplie .televerser_retirer {
  display: flex;
}
.televerser {
  /* ── envoi en cours ──
     Un voile sur la photo, une barre et le pourcentage : sur une
     connexion mobile une photo de 3 Mo prend plusieurs secondes,
     il faut montrer que ça avance vraiment. */
}
.televerser_progres {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(36, 35, 39, 0.62);
  backdrop-filter: blur(2px);
  color: white;
}
.televerser.envoi {
  pointer-events: none;
}
.televerser.envoi .televerser_progres {
  display: flex;
}
.televerser_barre {
  width: min(180px, 80%);
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.televerser_barre span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #FFC62E;
  transition: width 0.2s ease-out;
}
.televerser_pourcent {
  font-family: "work sans";
  font-weight: bold;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.televerser_etape {
  font-size: 0.72rem;
  opacity: 0.8;
}

/* ── SÉLECTEUR DE PÉRIODE ───────────────────────────────────────
   Bloquer un créneau, une journée, des congés. */
.periode {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.periode_ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  align-items: end;
}
.periode_raccourcis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.periode_raccourcis button {
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: white;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-family: "work sans";
  font-weight: 600;
  font-size: 0.75rem;
  color: rgba(36, 35, 39, 0.6);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.periode_raccourcis button:hover {
  border-color: #FFC62E;
  color: #242327;
}
.periode_raccourcis button.actif {
  background: #FFC62E;
  border-color: #FFC62E;
  color: #242327;
}

/* ── PASTILLE DE NOTIFICATION ───────────────────────────────────
   Le nombre d'éléments qui attendent, sur un onglet ou une icône. */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: #C0392B;
  color: white;
  font-family: "work sans";
  font-weight: bold;
  font-size: 0.66rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pastille.jaune {
  background: #FFC62E;
  color: #242327;
}
.pastille.calme {
  background: rgba(36, 35, 39, 0.15);
  color: rgba(36, 35, 39, 0.6);
}
.pastille {
  /* posée en coin d'une icône */
}
.pastille.coin {
  position: absolute;
  top: -5px;
  right: -5px;
  border: 2px solid #FAF8F3;
}
.pastille {
  /* attire l'œil trois fois, puis se calme : au-delà c'est du harcèlement */
}
.pastille.neuve {
  animation: pastille_bat 0.7s ease-in-out 3;
}

@keyframes pastille_bat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.22);
  }
}
/* ── COMPTEUR ANIMÉ ─────────────────────────────────────────────
   Le chiffre monte de 0 à sa valeur : l'œil est attiré là où il faut.
   La valeur est posée en JS, la classe ne fait que réserver la place. */
.compteur {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .pastille.neuve {
    animation: none;
  }
}
/* 🗂 La coque de l'espace Malick : navigation, panneaux, tableaux */
/* ── NAVIGATION DES MODULES ──────────────────────────────────────
   Sur mobile : une barre basse comme le site public.
   Sur ordinateur : une colonne à gauche, toujours visible. */
.admin_nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  gap: 0.2rem;
  padding: 0.45rem 0.5rem 0.8rem;
  background: rgba(250, 248, 243, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(36, 35, 39, 0.09);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin_nav::-webkit-scrollbar {
  height: 0;
}
.admin_nav .nav_item {
  position: relative;
  flex: 1 0 auto;
  min-width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.35rem;
  border: none;
  background: none;
  border-radius: 0.8rem;
  color: rgba(36, 35, 39, 0.5);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.admin_nav .nav_item i {
  font-size: 0.95rem;
}
.admin_nav .nav_item .nav_label {
  font-family: "work sans";
  font-weight: 600;
  font-size: 0.64rem;
  line-height: 1.2;
  white-space: nowrap;
}
.admin_nav .nav_item:active {
  transform: scale(0.95);
}
.admin_nav .nav_item.actif {
  background: rgba(255, 198, 46, 0.28);
  color: #242327;
}

/* la zone des modules dégage la barre de navigation basse */
.admin_zone {
  padding-bottom: 6.5rem;
}

/* ── EN-TÊTE DE MODULE ─────────────────────────────────────────── */
.module_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1rem 0.75rem;
}
.module_head_titre {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.35rem;
  line-height: 1.15;
}
.module_head_titre small {
  display: block;
  font-family: "work sans";
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.2rem;
}
.module_head_actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* barre de filtres au-dessus d'une liste */
.barre_filtres {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0 1rem 0.875rem;
}
.barre_filtres .recherche {
  flex: 1;
  min-width: 190px;
}

/* ── PANNEAU LATÉRAL (création / édition) ────────────────────────
   Sur mobile il monte du bas, sur ordinateur il glisse de la droite.
   Une modale plein écran couperait le lien avec la liste derrière. */
.panneau_fond {
  position: fixed;
  inset: 0;
  z-index: 9400;
  background: rgba(36, 35, 39, 0.45);
  backdrop-filter: blur(2px);
  animation: fondu 0.25s ease both;
}
.panneau_fond.parti {
  animation: fondu 0.2s ease reverse both;
}

.panneau {
  position: fixed;
  z-index: 9450;
  background: #FAF8F3;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px -12px rgba(36, 35, 39, 0.4);
  /* mobile : feuille qui monte du bas */
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  border-radius: 1.25rem 1.25rem 0 0;
  animation: panneau_monte 0.34s cubic-bezier(0.2, 1, 0.3, 1) both;
}
.panneau.parti {
  animation: panneau_monte 0.25s ease reverse both;
}
.panneau_poignee {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.18);
  margin: 0.6rem auto 0.2rem;
  flex: none;
}
.panneau_head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(36, 35, 39, 0.08);
  flex: none;
}
.panneau_head strong {
  flex: 1;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.2;
}
.panneau_fermer {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  color: rgba(36, 35, 39, 0.5);
  font-size: 0.85rem;
  transition: background 0.18s ease, color 0.18s ease;
}
.panneau_fermer:hover {
  background: rgba(36, 35, 39, 0.12);
  color: #242327;
}
.panneau_corps {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.panneau_pied {
  display: flex;
  gap: 0.6rem;
  padding: 0.875rem 1rem;
  padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(36, 35, 39, 0.08);
  background: #FAF8F3;
  flex: none;
}
.panneau_pied > * {
  flex: 1;
  min-height: 48px;
}

@keyframes panneau_monte {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@keyframes panneau_glisse {
  from {
    transform: translateX(100%);
  }
  to {
    transform: none;
  }
}
/* ── TABLEAU DE DONNÉES ─────────────────────────────────────────
   Sur mobile, chaque ligne devient une carte : un tableau qui défile
   horizontalement est inutilisable au pouce. */
.tableau {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tableau_ligne {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1rem;
  padding: 0.8rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tableau_ligne:hover {
  transform: translateY(-1px);
}
.tableau_visuel {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 0.7rem;
  overflow: hidden;
  background: rgba(36, 35, 39, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(36, 35, 39, 0.3);
}
.tableau_infos {
  min-width: 0;
}
.tableau_infos strong {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tableau_infos span {
  display: block;
  font-size: 0.76rem;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.15rem;
}
.tableau_droite {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tableau_valeur {
  font-weight: bold;
  font-size: 0.92rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tableau {
  /* une ligne désactivée reste lisible mais s'efface */
}
.tableau_ligne.inactif {
  background: rgba(36, 35, 39, 0.03);
  border-color: transparent;
  box-shadow: none;
}
.tableau_ligne.inactif .tableau_infos strong {
  color: rgba(36, 35, 39, 0.5);
}
.tableau_ligne.inactif .tableau_visuel {
  opacity: 0.5;
}
.tableau {
  /* alerte : stock bas, client signalé */
}
.tableau_ligne.alerte {
  border-color: rgba(255, 198, 46, 0.9);
  box-shadow: 0 3px 0 rgba(255, 198, 46, 0.4);
}

/* bouton d'action discret en bout de ligne */
.action_btn {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.05);
  color: rgba(36, 35, 39, 0.5);
  font-size: 0.8rem;
  transition: background 0.18s ease, color 0.18s ease;
}
.action_btn:hover {
  background: rgba(36, 35, 39, 0.12);
  color: #242327;
}
.action_btn.danger:hover {
  background: rgba(192, 57, 43, 0.15);
  color: #C0392B;
}

/* ── GRANDS ÉCRANS : la navigation passe à gauche ───────────────── */
@media (min-width: 1000px) {
  /* La colonne reste étroite — juste les icônes — et se déploie au
     survol. Malick garde tout l'écran pour son contenu, sans perdre
     la navigation. La grille ne bouge pas : le déploiement se fait
     par-dessus, sinon la page sauterait à chaque passage de souris. */
  /* Pas de grille : la colonne est en position fixe pour pouvoir se
     déployer par-dessus le contenu. Une grille la ferait sortir du
     flux et le contenu occuperait sa place. */
  body[data-page=admin] {
    min-height: 100vh;
  }
  .admin_nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    z-index: 940;
    width: 68px;
    height: 100vh;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.25rem 0.75rem;
    border-top: none;
    border-right: 1px solid rgba(36, 35, 39, 0.09);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.22s ease;
  }
  .admin_nav .nav_item {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.65rem 0.78rem;
    border-radius: 0.7rem;
    white-space: nowrap;
  }
  .admin_nav .nav_item i {
    width: 18px;
    flex: none;
    text-align: center;
    font-size: 1rem;
  }
  .admin_nav .nav_item {
    /* le libellé s'efface quand la colonne est repliée, mais
       reste dans le flux : il ne doit pas décaler l'icône */
  }
  .admin_nav .nav_item .nav_label {
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.16s ease;
  }
  .admin_nav .nav_item:hover {
    background: rgba(36, 35, 39, 0.05);
  }
  .admin_nav .nav_marque {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.55rem 1.25rem;
    white-space: nowrap;
  }
  .admin_nav .nav_marque .mascotte {
    width: 30px;
    height: 43px;
    flex: none;
  }
  .admin_nav .nav_marque strong {
    font-family: "baloo 2";
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.1;
    opacity: 0;
    transition: opacity 0.16s ease;
  }
  .admin_nav {
    /* la pastille se recentre sur l'icône quand c'est replié */
  }
  .admin_nav .pastille.coin {
    top: 2px;
    right: auto;
    left: 30px;
  }
  .admin_nav {
    /* ── déploiement ── */
  }
  .admin_nav:hover, .admin_nav:focus-within {
    width: 232px;
    box-shadow: 8px 0 24px -14px rgba(36, 35, 39, 0.4);
  }
  .admin_nav:hover .nav_label,
  .admin_nav:hover .nav_marque strong, .admin_nav:focus-within .nav_label,
  .admin_nav:focus-within .nav_marque strong {
    opacity: 1;
    transition-delay: 0.06s;
  }
  .admin_nav:hover .pastille.coin, .admin_nav:focus-within .pastille.coin {
    left: auto;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .admin_zone {
    min-width: 0;
    margin-left: 68px; /* la place de la colonne repliée */
    padding-bottom: 3rem; /* la nav est à gauche, plus rien en bas */
  }
  /* le panneau glisse de la droite au lieu de monter */
  .panneau {
    left: auto;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(460px, 100%);
    max-height: none;
    border-radius: 0;
    animation-name: panneau_glisse;
  }
  .panneau_poignee {
    display: none;
  }
  .panneau_head {
    padding: 1.25rem 1.25rem 0.875rem;
  }
  .panneau_corps {
    padding: 1.25rem;
  }
  .panneau_pied {
    padding: 1rem 1.25rem;
  }
  .module_head {
    padding: 1.75rem 1.5rem 1rem;
  }
  .barre_filtres {
    padding: 0 1.5rem 1rem;
  }
}
/* la marque n'apparaît que dans la colonne latérale */
.nav_marque {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .panneau, .panneau_fond {
    animation: none !important;
  }
}
/* ── LE FAUTEUIL : qui est dessus, ou qui vient ──────────────────── */
.encours {
  background: white;
  border: 1.5px solid rgba(255, 198, 46, 0.9);
  border-radius: 1.25rem;
  padding: 1.1rem;
  box-shadow: 0 4px 0 rgba(255, 198, 46, 0.5);
}
.encours_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.encours_cle {
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(36, 35, 39, 0.45);
}
.encours_client {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.2;
}
.encours_service {
  font-size: 0.82rem;
  color: rgba(36, 35, 39, 0.6);
  margin-top: 0.15rem;
}
.encours_temps {
  margin: 1rem 0 1.1rem;
}
.encours {
  /* le chronomètre à gauche, le réglage de durée à droite */
}
.encours_ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.encours_chrono {
  font-weight: 600;
  font-size: 0.85rem;
  color: #6E3011;
  font-variant-numeric: tabular-nums;
}
.encours {
  /* ── rallonger ou raccourcir ─────────────────────────────────
     Deux boutons de 34 px : Malick a une tondeuse dans l'autre
     main, il ne vise pas une cible de 20 px. */
}
.encours_reglage {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  padding: 0.15rem;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.05);
}
.encours_reglage button {
  width: 34px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: white;
  color: #242327;
  font-family: "work sans";
  font-weight: bold;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(36, 35, 39, 0.12);
  transition: transform 0.13s ease, background 0.13s ease;
}
.encours_reglage button:hover {
  background: #FFC62E;
}
.encours_reglage button:active {
  transform: scale(0.92);
}
.encours_reglage button:disabled {
  opacity: 0.45;
}
.encours_duree {
  min-width: 54px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: bold;
  color: rgba(36, 35, 39, 0.7);
  font-variant-numeric: tabular-nums;
  /* la durée vient de changer : un battement, pas une animation */
}
.encours_duree.bouge {
  animation: duree_bouge 0.4s cubic-bezier(0.3, 1.6, 0.4, 1);
}
.encours_barre {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.1);
  overflow: hidden;
}
.encours_jauge {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #FFC62E;
  transition: width 0.6s ease;
}
.encours_bornes {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: rgba(36, 35, 39, 0.45);
  font-variant-numeric: tabular-nums;
}
.encours {
  /* le temps prévu est dépassé : on le signale sans dramatiser */
}
.encours.depasse {
  border-color: rgba(192, 57, 43, 0.7);
  box-shadow: 0 4px 0 rgba(192, 57, 43, 0.35);
}
.encours.depasse .encours_chrono {
  color: #C0392B;
}
.encours.depasse .encours_jauge {
  background: #C0392B;
}

@keyframes duree_bouge {
  from {
    transform: scale(1.25);
    color: #C98F00;
  }
  to {
    transform: scale(1);
  }
}
/* fauteuil libre : l'invitation à démarrer */
.fauteuil_libre {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.25rem;
  padding: 1.1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.fauteuil_libre .mascotte {
  width: 40px;
  height: 58px;
  flex: none;
}
.fauteuil_libre .fauteuil_texte {
  flex: 1;
  min-width: 130px;
}
.fauteuil_libre .fauteuil_texte strong {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.02rem;
  line-height: 1.2;
}
.fauteuil_libre .fauteuil_texte span {
  display: block;
  font-size: 0.78rem;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.15rem;
}
.fauteuil_libre .main_btn {
  flex: none;
  min-height: 48px;
  padding: 0 1.25rem;
  font-size: 0.9rem;
}

/* l'heure en tête de ligne dans la journée */
.creneau_heure_bloc {
  flex: none;
  min-width: 46px;
  font-weight: bold;
  font-size: 0.88rem;
  color: #6E3011;
  font-variant-numeric: tabular-nums;
}

.compteur_jour {
  font-size: 0.78rem;
  color: rgba(36, 35, 39, 0.5);
  font-weight: 500;
}

/* ── FICHE CLIENT (dans le panneau) ──────────────────────────────── */
.fiche_client .fiche_stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.fiche_client .stat_mini {
  background: rgba(36, 35, 39, 0.04);
  border-radius: 0.8rem;
  padding: 0.7rem 0.5rem;
  text-align: center;
}
.fiche_client .stat_mini strong {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fiche_client .stat_mini span {
  display: block;
  font-size: 0.66rem;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.2rem;
}
.fiche_client .stat_mini.alerte {
  background: rgba(192, 57, 43, 0.1);
}
.fiche_client .stat_mini.alerte strong {
  color: #C0392B;
}
.fiche_client .fiche_titre {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1rem;
  margin: 1.5rem 0 0.6rem;
}
.fiche_client .link_box {
  padding: 0.7rem;
}
.fiche_client .link_icon {
  width: 36px;
  height: 36px;
  font-size: 0.8rem;
}

/* ── HORAIRES DE LA SEMAINE (réglages) ──────────────────────────── */
.horaires_grille {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.horaire_jour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1rem;
  padding: 0.7rem 0.875rem;
}
.horaire_jour .interrupteur {
  flex: 1;
  min-width: 130px;
}
.horaire_jour .horaire_heures {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.18s ease;
}
.horaire_jour .horaire_heures input {
  min-height: 40px;
  padding: 0 0.5rem;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  border-radius: 0.6rem;
  background: white;
  font-family: "work sans";
  font-size: 0.82rem;
  color: #242327;
  outline: none;
}
.horaire_jour .horaire_heures input:focus {
  border-color: #FFC62E;
}
.horaire_jour .horaire_heures span {
  color: rgba(36, 35, 39, 0.35);
}
.horaire_jour {
  /* jour fermé : les heures ne servent plus à rien */
}
.horaire_jour.ferme {
  background: rgba(36, 35, 39, 0.03);
}
.horaire_jour.ferme .horaire_heures {
  opacity: 0.35;
  pointer-events: none;
}

/* petite aide sous un champ */
.champ_aide {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(36, 35, 39, 0.5);
  margin-top: 0.35rem;
}

/* ── COMMANDES ──────────────────────────────────────────────────── */
/* une commande déjà traitée ne doit plus attirer l'œil */
.demande.calme {
  border-color: rgba(36, 35, 39, 0.09);
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.demande.calme::before {
  background: rgba(36, 35, 39, 0.12);
}

.cmd_articles {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.8rem 0;
  padding: 0.7rem 0.8rem;
  background: rgba(36, 35, 39, 0.04);
  border-radius: 0.8rem;
}

.cmd_article {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.84rem;
}
.cmd_article .cmd_qte {
  font-weight: bold;
  color: #6E3011;
  font-variant-numeric: tabular-nums;
}
.cmd_article .cmd_nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmd_article .cmd_prix {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cmd_total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.1rem;
  font-size: 0.82rem;
  color: rgba(36, 35, 39, 0.6);
}
.cmd_total strong {
  font-size: 1.05rem;
  color: #242327;
  font-variant-numeric: tabular-nums;
}
.cmd_total i {
  color: rgba(36, 35, 39, 0.4);
}

/* ── FICHES PRODUIT (admin) ─────────────────────────────────────
   Une grille plutôt qu'une liste : Malick reconnaît ses produits à
   la photo avant de lire leur nom. Le stock s'ajuste sur place. */
.fiches_produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.8rem;
  align-items: start;
}

.fiche_produit {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fiche_produit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(110, 48, 17, 0.12);
}
.fiche_produit_photo {
  position: relative;
  aspect-ratio: 16/10;
  background: rgba(36, 35, 39, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(36, 35, 39, 0.22);
  font-size: 1.6rem;
}
.fiche_produit_photo img {
  object-fit: cover;
}
.fiche_produit_corps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem 0.875rem 0.875rem;
  flex: 1;
}
.fiche_produit_haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.fiche_produit_nom {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.95rem;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche_produit_cat {
  flex: none;
  font-size: 0.66rem;
  color: rgba(36, 35, 39, 0.45);
  white-space: nowrap;
}
.fiche_produit_prix {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.fiche_produit_prix .prix_actuel {
  font-weight: bold;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.fiche_produit_prix .prix_barre {
  font-size: 0.74rem;
  color: rgba(36, 35, 39, 0.4);
  text-decoration: line-through;
}
.fiche_produit_stock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.5rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(36, 35, 39, 0.07);
}
.fiche_produit_stock .stock_libelle {
  flex: none;
  white-space: nowrap;
  font-size: 0.76rem;
  color: rgba(36, 35, 39, 0.55);
}
.fiche_produit_stock .stock_libelle b.rupture {
  color: #C0392B;
}
.fiche_produit_stock .stock_libelle b.bas {
  color: #C98F00;
}
.fiche_produit_stock .stepper {
  flex: none;
}
.fiche_produit_stock .stepper button {
  width: 32px;
  height: 32px;
  font-size: 0.82rem;
}
.fiche_produit_stock .stepper input {
  width: 38px;
  font-size: 0.82rem;
}
.fiche_produit_actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}
.fiche_produit {
  /* l'état saute aux yeux avant même de lire le stock */
}
.fiche_produit.rupture {
  border-color: rgba(192, 57, 43, 0.55);
}
.fiche_produit.bas {
  border-color: rgba(255, 198, 46, 0.85);
}
.fiche_produit.inactif {
  background: rgba(36, 35, 39, 0.03);
  box-shadow: none;
}
.fiche_produit.inactif .fiche_produit_photo img {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.fiche_produit.inactif .fiche_produit_nom {
  color: rgba(36, 35, 39, 0.5);
}

/* Sur mobile, une photo pleine largeur ne laisse voir qu'un produit et demi
   par écran. Malick parcourt son stock : la fiche se couche, la photo devient
   une vignette, et on passe de ~530 px à ~150 px par produit. */
@media (max-width: 560px) {
  .fiches_produits {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .fiche_produit {
    flex-direction: row;
  }
  .fiche_produit_photo {
    width: 104px;
    flex: none;
    aspect-ratio: auto;
    align-self: stretch;
    font-size: 1.2rem;
  }
  .fiche_produit_photo .produit_tag {
    font-size: 0.58rem;
    padding: 0.18rem 0.4rem;
  }
  .fiche_produit_corps {
    padding: 0.6rem 0.7rem 0.65rem;
    gap: 0.35rem;
    min-width: 0;
  }
  .fiche_produit {
    /* le nom a besoin de toute la largeur : la catégorie passe dessous */
  }
  .fiche_produit_haut {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
  }
  .fiche_produit_cat {
    font-size: 0.62rem;
  }
  .fiche_produit_prix .prix_actuel {
    font-size: 0.94rem;
  }
  .fiche_produit_stock {
    border-top: 0;
    padding-top: 0;
  }
  .fiche_produit_stock .stepper button {
    width: 28px;
    height: 28px;
  }
  .fiche_produit_stock .stepper input {
    width: 32px;
  }
  .fiche_produit_actions {
    margin-top: -0.15rem;
  }
}
/* ── FICHES ANNONCE (admin) ─────────────────────────────────────
   Une liste, pas une grille : une annonce se lit en entier, et
   Malick en a rarement plus d'une poignée à l'écran. */
.fiches_annonces {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fiche_annonce {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fiche_annonce:hover {
  box-shadow: 0 6px 0 rgba(110, 48, 17, 0.12);
}
.fiche_annonce_icone {
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  color: rgba(36, 35, 39, 0.6);
  font-size: 0.82rem;
}
.fiche_annonce_icone.ouverture {
  background: rgba(62, 142, 90, 0.16);
  color: #3E8E5A;
}
.fiche_annonce_icone.produit, .fiche_annonce_icone.promo, .fiche_annonce_icone.message {
  background: rgba(255, 198, 46, 0.28);
  color: #C98F00;
}
.fiche_annonce_icone.fermeture {
  background: rgba(192, 57, 43, 0.14);
  color: #C0392B;
}
.fiche_annonce_icone.conge {
  background: rgba(110, 48, 17, 0.14);
  color: #6E3011;
}
.fiche_annonce_corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fiche_annonce_haut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fiche_annonce_haut strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.92rem;
  line-height: 1.25;
}
.fiche_annonce .etiquette {
  flex: none;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 198, 46, 0.25);
  color: #C98F00;
  font-size: 0.6rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* une annonce automatique se distingue d'un mot de Malick */
}
.fiche_annonce .etiquette.auto {
  background: rgba(36, 35, 39, 0.07);
  color: rgba(36, 35, 39, 0.5);
}
.fiche_annonce_texte {
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.6);
}
.fiche_annonce_pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fiche_annonce_pied time {
  font-size: 0.68rem;
  color: rgba(36, 35, 39, 0.4);
}
.fiche_annonce_pied .etat {
  font-size: 0.66rem;
}
.fiche_annonce_image {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 0.7rem;
  object-fit: cover;
}
.fiche_annonce_actions {
  display: flex;
  flex: none;
  gap: 0.3rem;
}
.fiche_annonce {
  /* éteinte : encore là pour Malick, invisible pour les clients */
}
.fiche_annonce.eteinte {
  background: rgba(36, 35, 39, 0.03);
  box-shadow: none;
}
.fiche_annonce.eteinte .fiche_annonce_haut strong,
.fiche_annonce.eteinte .fiche_annonce_texte {
  color: rgba(36, 35, 39, 0.45);
}
.fiche_annonce.eteinte .fiche_annonce_image {
  opacity: 0.5;
  filter: grayscale(0.6);
}
.fiche_annonce.expiree {
  border-color: rgba(192, 57, 43, 0.35);
}

/* sur mobile les actions passent sous le texte : trois boutons de plus
   sur la ligne écraseraient le titre */
@media (max-width: 560px) {
  .fiche_annonce {
    flex-wrap: wrap;
  }
  .fiche_annonce_corps {
    flex: 1 1 60%;
  }
  .fiche_annonce_image {
    width: 48px;
    height: 48px;
    order: 3;
  }
  .fiche_annonce_actions {
    order: 4;
    width: 100%;
    justify-content: flex-end;
    padding-top: 0.2rem;
  }
}
/* ── CATALOGUE DE PRESTATIONS (« Je commence ») ─────────────────
   Malick reconnaît ses prestations à la photo bien avant d'avoir lu
   leur nom : une liste déroulante l'obligeait à décoder douze
   libellés pendant qu'un client attend sur le fauteuil. */
.choix_prestas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.55rem;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.15rem;
}

.choix_presta {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: white;
  border: 2px solid rgba(36, 35, 39, 0.1);
  border-radius: 0.9rem;
  overflow: hidden;
  transition: border-color 0.13s ease, transform 0.13s ease, box-shadow 0.13s ease;
}
.choix_presta:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.choix_presta_photo {
  aspect-ratio: 3/2;
  background: rgba(36, 35, 39, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(36, 35, 39, 0.22);
  font-size: 1.1rem;
}
.choix_presta_photo img {
  object-fit: cover;
}
.choix_presta_corps {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem 0.6rem;
}
.choix_presta_nom {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.82rem;
  line-height: 1.2;
}
.choix_presta_meta {
  font-size: 0.68rem;
  color: rgba(36, 35, 39, 0.48);
  font-variant-numeric: tabular-nums;
}
.choix_presta {
  /* la coche n'apparaît qu'une fois choisie */
}
.choix_presta_coche {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FFC62E;
  color: #242327;
  font-size: 0.68rem;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.13s ease, transform 0.13s ease;
}
.choix_presta.choisie {
  border-color: #FFC62E;
  box-shadow: 0 0 0 3px rgba(255, 198, 46, 0.22);
}
.choix_presta.choisie .choix_presta_coche {
  opacity: 1;
  transform: scale(1);
}

/* 🛍 Boutique : produits, panier, commande */
/* ── CARTE PRODUIT ──────────────────────────────────────────────
   Hiérarchie de lecture d'un acheteur : la photo attire, le nom
   identifie, le prix décide, le bouton agit. La description reste
   en retrait — elle ne sert qu'en cas d'hésitation. */
.produit_carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.produit_carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(110, 48, 17, 0.12);
  border-color: rgba(255, 198, 46, 0.5);
}
.produit_carte:hover .produit_carte_photo img {
  transform: scale(1.05);
}
.produit_carte_photo {
  position: relative;
  aspect-ratio: 4/3;
  background: rgba(36, 35, 39, 0.04);
  overflow: hidden;
}
.produit_carte_photo img {
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.produit_carte_infos {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.8rem 0.875rem 0.875rem;
  flex: 1;
}
.produit_carte_nom {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.97rem;
  line-height: 1.2;
  /* deux lignes maximum : les cartes gardent la même hauteur */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.produit_carte_desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(36, 35, 39, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.produit_carte {
  /* Prix et action sur une même ligne tant qu'elle tient, sinon le
     bouton passe dessous et prend toute la largeur. Le prix ne cède
     jamais : squeezé, il se coupait en « 4 / 500 / F ». */
}
.produit_carte_pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.6rem;
  margin-top: auto;
  padding-top: 0.7rem;
}
.produit_carte_prix {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex: none;
  white-space: nowrap;
}
.produit_carte_prix .prix_actuel {
  font-weight: bold;
  font-size: 1.06rem;
  font-variant-numeric: tabular-nums;
}
.produit_carte_prix .prix_barre {
  font-size: 0.72rem;
  color: rgba(36, 35, 39, 0.4);
  text-decoration: line-through;
}
.produit_carte {
  /* c'est lui qui cède la place : il s'étire sur la largeur restante
     et bascule sur sa propre ligne quand la carte est trop étroite */
}
.produit_carte_ajout {
  flex: 1 0 auto;
  /* plafonné pour que toutes les pastilles se ressemblent : sans ça
     une carte large donnait un bouton de 200 px, une étroite 108 */
  min-width: 104px;
  max-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.85rem;
  border: none;
  border-radius: 999px;
  background: #FFC62E;
  color: #242327;
  font-family: "work sans";
  font-weight: bold;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 0 #C98F00;
  transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.18s ease;
}
.produit_carte_ajout i {
  font-size: 0.75rem;
}
.produit_carte_ajout:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #C98F00;
}
.produit_carte_ajout:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #C98F00;
}
.produit_carte_ajout {
  /* déjà au panier : on le dit, sans empêcher d'en reprendre */
}
.produit_carte_ajout.dedans {
  background: rgba(255, 198, 46, 0.28);
  box-shadow: 0 3px 0 rgba(201, 143, 0, 0.4);
}
.produit_carte_ajout {
  /* confirmation immédiate de l'ajout */
}
.produit_carte_ajout.vient {
  background: #3E8E5A;
  color: white;
  box-shadow: 0 3px 0 #2E6B43;
  animation: ajout_pop 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.produit_carte {
  /* rupture : la carte reste visible — la masquer donnerait
     l'impression d'une boutique vide */
}
.produit_carte.rupture .produit_carte_photo {
  opacity: 0.4;
  filter: grayscale(0.6);
}
.produit_carte.rupture .produit_carte_nom,
.produit_carte.rupture .produit_carte_prix {
  color: rgba(36, 35, 39, 0.45);
}
.produit_carte.rupture .produit_carte_ajout {
  background: rgba(36, 35, 39, 0.08);
  color: rgba(36, 35, 39, 0.4);
  box-shadow: none;
  pointer-events: none;
}
.produit_carte.rupture .produit_carte_ajout i {
  display: none;
}

@keyframes ajout_pop {
  0%, 100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.1);
  }
}
/* étiquettes posées sur la photo */
.produit_tag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  padding: 0.34rem 0.55rem;
  border-radius: 0.5rem;
  font-family: "work sans";
  font-weight: bold;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  line-height: 1;
  background: #FFC62E;
  color: #242327;
  box-shadow: 0 2px 0 #C98F00;
}
.produit_tag.rupture {
  background: rgba(36, 35, 39, 0.7);
  color: white;
  box-shadow: none;
  backdrop-filter: blur(2px);
}
.produit_tag.dernier {
  background: #C0392B;
  color: white;
  box-shadow: none;
  animation: tag_bat 2.2s ease-in-out infinite;
}

@keyframes tag_bat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
/* grille de la boutique */
.produits_grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

/* ── PANIER FLOTTANT ────────────────────────────────────────────
   Toujours accessible pendant qu'on parcourt la boutique. */
.panier_flottant {
  position: fixed;
  right: 1rem;
  bottom: 11.5rem;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 999px;
  background: #242327;
  color: #FAF8F3;
  font-family: "work sans";
  font-weight: bold;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 6px 20px -8px rgba(36, 35, 39, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), visibility 0.18s ease;
}
.panier_flottant.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.panier_flottant:active {
  transform: scale(0.94);
}
.panier_flottant {
  /* rebond quand un article vient d'être ajouté */
}
.panier_flottant.ajoute {
  animation: panier_rebond 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes panier_rebond {
  0%, 100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.12);
  }
}
/* ── LIGNE DE PANIER ────────────────────────────────────────────── */
.panier_ligne {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1rem;
  padding: 0.7rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.panier_ligne_photo {
  width: 64px;
  height: 64px;
  border-radius: 0.7rem;
  overflow: hidden;
  background: rgba(36, 35, 39, 0.05);
}
.panier_ligne_infos {
  min-width: 0;
}
.panier_ligne_infos strong {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
}
.panier_ligne_infos .prix_unite {
  display: block;
  font-size: 0.75rem;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.15rem;
}
.panier_ligne_infos .stepper {
  margin-top: 0.45rem;
}
.panier_ligne_droite {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.panier_ligne_total {
  font-weight: bold;
  font-size: 0.95rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.panier_ligne {
  /* la ligne s'efface quand on la retire */
}
.panier_ligne.retiree {
  animation: ligne_part 0.3s ease both;
}

@keyframes ligne_part {
  to {
    opacity: 0;
    transform: translateX(-20px);
    max-height: 0;
    padding-block: 0;
    margin-bottom: -0.7rem;
  }
}
/* ── RÉCAPITULATIF DE COMMANDE ─────────────────────────────────── */
.recap_commande {
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.25rem;
  padding: 1.1rem;
  box-shadow: 0 4px 0 rgba(110, 48, 17, 0.1);
}
.recap_commande_ligne {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: rgba(36, 35, 39, 0.65);
}
.recap_commande_ligne span:last-child {
  font-weight: 600;
  color: #242327;
  font-variant-numeric: tabular-nums;
}
.recap_commande_total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(36, 35, 39, 0.1);
}
.recap_commande_total .libelle {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1rem;
}
.recap_commande_total .montant {
  font-weight: bold;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

/* choix du retrait et du paiement */
.choix_mode {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.choix_mode .mode {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  background: white;
  border-radius: 1rem;
  padding: 0.8rem 0.875rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.choix_mode .mode_icone {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  color: rgba(36, 35, 39, 0.5);
  font-size: 0.9rem;
  transition: background 0.18s ease, color 0.18s ease;
}
.choix_mode .mode_texte {
  flex: 1;
  min-width: 0;
}
.choix_mode .mode_texte strong {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}
.choix_mode .mode_texte span {
  display: block;
  font-size: 0.75rem;
  color: rgba(36, 35, 39, 0.55);
  margin-top: 0.15rem;
}
.choix_mode .mode.actif {
  border-color: #FFC62E;
  background: rgba(255, 198, 46, 0.12);
}
.choix_mode .mode.actif .mode_icone {
  background: #FFC62E;
  color: #242327;
}

@media (min-width: 700px) {
  .produits_grille {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1000px) {
  .produits_grille {
    grid-template-columns: repeat(4, 1fr);
  }
  .panier_flottant {
    bottom: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .produit_tag.dernier,
  .panier_flottant.ajoute {
    animation: none;
  }
}
/* placeholder quand un produit n'a pas de photo */
.produit_vide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 35, 39, 0.05);
  color: rgba(36, 35, 39, 0.25);
  font-size: 1.4rem;
}

/* le bouton confirme lui-même l'ajout */
.produit_carte_ajout.ajoute {
  background: #3E8E5A;
  color: white;
  box-shadow: 0 3px 0 #2E6B43;
}

/* 🔔 La cloche et son panneau — chez Malick comme chez le client */
.cloche {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── le bouton ──────────────────────────────────────────────────── */
.cloche_btn {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(36, 35, 39, 0.16);
  border-radius: 999px;
  background: white;
  color: #242327;
  font-size: 0.95rem;
  box-shadow: 0 2px 0 rgba(36, 35, 39, 0.12);
  transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.18s ease;
}
.cloche_btn:hover {
  transform: translateY(-2px);
}
.cloche_btn:active {
  transform: translateY(1px);
  box-shadow: none;
}
.cloche_btn.actif {
  background: #FFC62E;
  box-shadow: 0 2px 0 #C98F00;
}
.cloche_btn {
  /* il y a du neuf : le bouton se teinte sans crier */
}
.cloche_btn.pleine i {
  color: #C98F00;
}
.cloche_btn {
  /* une notification vient d'arriver */
}
.cloche_btn.sonne i {
  animation: cloche_sonne 0.7s cubic-bezier(0.3, 1.6, 0.4, 1);
  transform-origin: 50% 15%;
}

.cloche_pastille {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #C0392B;
  color: white;
  font-size: 0.62rem;
  font-weight: bold;
  line-height: 1;
  border: 2px solid #FAF8F3;
}

@keyframes cloche_sonne {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(16deg);
  }
  40% {
    transform: rotate(-13deg);
  }
  60% {
    transform: rotate(9deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}
/* ── le panneau ─────────────────────────────────────────────────── */
/* Sur mobile il monte du bas et prend la largeur : un menu de 300 px
   ancré à un bouton de coin serait illisible sur un écran de 360 px.
   Il se pose AU-DESSUS de la barre de navigation, pas dessus : sinon
   les onglets disparaissent sous lui et on ne sait plus où on est. */
.cloche_voile {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(36, 35, 39, 0.42);
  backdrop-filter: blur(2px);
  animation: cloche_voile_entre 0.22s ease;
}

@keyframes cloche_voile_entre {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cloche_panneau {
  position: fixed;
  left: 0.6rem;
  right: 0.6rem;
  bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.2rem;
  box-shadow: 0 18px 50px rgba(36, 35, 39, 0.22);
  overflow: hidden;
  animation: cloche_monte 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes cloche_monte {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cloche_haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(36, 35, 39, 0.08);
}
.cloche_haut strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.95rem;
}
.cloche_haut .link_btn {
  font-size: 0.72rem;
}

.cloche_liste {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cloche_vide {
  padding: 1.6rem 1.2rem;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(36, 35, 39, 0.5);
}

/* ── une ligne ──────────────────────────────────────────────────── */
.cloche_item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border: none;
  border-bottom: 1px solid rgba(36, 35, 39, 0.06);
  background: none;
  text-align: left;
  transition: background 0.13s ease;
}
.cloche_item:last-child {
  border-bottom: none;
}
.cloche_item:hover {
  background: rgba(255, 198, 46, 0.09);
}
.cloche_item {
  /* pas encore lue : un liseré, pas un fond criard */
}
.cloche_item.neuf {
  background: rgba(255, 198, 46, 0.1);
  box-shadow: inset 3px 0 0 #FFC62E;
}
.cloche_item_icone {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  color: rgba(36, 35, 39, 0.6);
  font-size: 0.78rem;
  /* la couleur dit la nature de la nouvelle avant qu'on la lise */
}
.cloche_item_icone.rendezvous, .cloche_item_icone.ouverture {
  background: rgba(62, 142, 90, 0.16);
  color: #3E8E5A;
}
.cloche_item_icone.commande, .cloche_item_icone.produit, .cloche_item_icone.promo {
  background: rgba(255, 198, 46, 0.28);
  color: #C98F00;
}
.cloche_item_icone.annulation, .cloche_item_icone.fermeture, .cloche_item_icone.stock {
  background: rgba(192, 57, 43, 0.14);
  color: #C0392B;
}
.cloche_item_icone.conge {
  background: rgba(110, 48, 17, 0.14);
  color: #6E3011;
}
.cloche_item_corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.cloche_item_corps strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.84rem;
  line-height: 1.25;
}
.cloche_item_corps span {
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(36, 35, 39, 0.58);
  /* deux lignes : le détail complet est au bout du clic */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cloche_item_corps time {
  font-size: 0.66rem;
  color: rgba(36, 35, 39, 0.4);
  margin-top: 0.1rem;
}
.cloche_item_image {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 0.6rem;
  object-fit: cover;
}

/* ── sur grand écran, le panneau s'ancre à sa cloche ─────────────── */
/* Au-dessus de 700 px, c'est le JS qui pose top/left/right : il connaît
   la position réelle de la cloche, que ce soit dans l'en-tête du site ou
   dans la barre latérale de l'admin. Le CSS ne garde que l'allure. */
@media (min-width: 700px) {
  /* ancré à sa cloche, le panneau se lit sans qu'on assombrisse la page */
  .cloche_voile {
    display: none;
  }
  .cloche_panneau {
    left: auto;
    right: 0.6rem;
    bottom: auto;
    top: 0.6rem;
    width: 340px;
    max-height: 460px;
    animation: cloche_descend 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  @keyframes cloche_descend {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* Dans la barre latérale de l'admin, la cloche est une ligne du menu :
   elle suit le repli comme les autres, et son panneau sort sur le côté. */
.nav_cloche {
  display: flex;
  justify-content: center;
  padding: 0.15rem 0 0.35rem;
}
.nav_cloche .cloche_btn {
  width: 40px;
  height: 40px;
}

@media (min-width: 900px) {
  .nav_cloche {
    justify-content: flex-start;
    padding: 0.2rem 0.2rem 0.6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cloche_panneau {
    animation: none;
  }
  .cloche_btn.sonne i {
    animation: none;
  }
}
/* 👤 Mon espace — le profil du client, côté public */
/* ── la carte d'identité ────────────────────────────────────────── */
.carte_identite {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.2rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.carte_identite_initiales {
  width: 52px;
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FFC62E;
  color: #242327;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 3px 0 #C98F00;
}
.carte_identite_corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.carte_identite_corps strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.02rem;
  line-height: 1.2;
}
.carte_identite_corps span {
  font-size: 0.82rem;
  color: rgba(36, 35, 39, 0.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carte_identite_corps span.discret {
  font-size: 0.74rem;
  color: rgba(36, 35, 39, 0.42);
}
.carte_identite_actions {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.35rem;
}
.carte_identite {
  /* personne n'est encore passé : la mascotte accueille */
}
.carte_identite.vierge {
  flex-direction: column;
  text-align: center;
  gap: 0.7rem;
  padding: 1.6rem 1.1rem;
}
.carte_identite.vierge .mascotte {
  width: 54px;
  height: 78px;
}
.carte_identite.vierge .carte_identite_corps {
  align-items: center;
}
.carte_identite.vierge .carte_identite_corps span {
  white-space: normal;
  line-height: 1.45;
}

/* sur un petit écran, deux boutons à droite écrasent le nom */
@media (max-width: 420px) {
  .carte_identite:not(.vierge) {
    flex-wrap: wrap;
  }
  .carte_identite:not(.vierge) .carte_identite_corps {
    flex: 1 1 55%;
  }
  .carte_identite:not(.vierge) .carte_identite_actions {
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
  }
}
/* ── ce que tu attends ──────────────────────────────────────────── */
.suivis {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.suivi {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-left: 4px solid rgba(36, 35, 39, 0.12);
  border-radius: 1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  /* le liseré dit l'état avant même la lecture */
}
.suivi.vert {
  border-left-color: #3E8E5A;
}
.suivi.rouge {
  border-left-color: #C0392B;
}
.suivi.attente {
  border-left-color: #FFC62E;
}
.suivi_icone {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  color: rgba(36, 35, 39, 0.55);
  font-size: 0.82rem;
}
.suivi_corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.suivi_haut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.suivi_haut strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.92rem;
  line-height: 1.25;
}
.suivi_quand {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(36, 35, 39, 0.6);
}
.suivi_message {
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.55);
}
.suivi_ref {
  font-size: 0.68rem;
  font-family: monospace;
  color: rgba(36, 35, 39, 0.35);
  letter-spacing: 0.04em;
}

/* ── le mur d'annonces ──────────────────────────────────────────── */
.mur_annonces {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.annonce {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.annonce:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(110, 48, 17, 0.12);
}
.annonce_icone {
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  color: rgba(36, 35, 39, 0.55);
  font-size: 0.84rem;
}
.annonce {
  /* chaque nature a sa couleur, la même que dans la cloche */
}
.annonce.ouverture .annonce_icone {
  background: rgba(62, 142, 90, 0.16);
  color: #3E8E5A;
}
.annonce.fermeture .annonce_icone {
  background: rgba(192, 57, 43, 0.14);
  color: #C0392B;
}
.annonce.conge .annonce_icone {
  background: rgba(110, 48, 17, 0.14);
  color: #6E3011;
}
.annonce.produit .annonce_icone, .annonce.promo .annonce_icone, .annonce.message .annonce_icone {
  background: rgba(255, 198, 46, 0.28);
  color: #C98F00;
}
.annonce_corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.annonce_corps strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.95rem;
  line-height: 1.25;
}
.annonce_corps p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(36, 35, 39, 0.58);
}
.annonce_corps time {
  font-size: 0.68rem;
  color: rgba(36, 35, 39, 0.38);
}
.annonce_image {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 0.7rem;
  object-fit: cover;
}
.annonce {
  /* le lien couvre toute la carte : on clique où on veut */
}
.annonce_lien {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.9rem;
  border-radius: 1rem;
  color: rgba(36, 35, 39, 0.25);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.13s ease;
}
.annonce_lien:hover {
  color: #C98F00;
}
.annonce {
  /* une image et une flèche au même endroit se marcheraient dessus */
}
.annonce:has(.annonce_image) .annonce_lien {
  padding-right: 4.6rem;
}

/* ── être prévenu ───────────────────────────────────────────────── */
.alerte_etat {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.alerte_etat > i {
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 198, 46, 0.24);
  color: #C98F00;
  font-size: 0.88rem;
}
.alerte_etat > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.alerte_etat > div strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1.25;
}
.alerte_etat > div span {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.55);
}
.alerte_etat .main_btn {
  flex: none;
}
.alerte_etat.vert > i {
  background: rgba(62, 142, 90, 0.16);
  color: #3E8E5A;
}

@media (max-width: 420px) {
  .alerte_etat {
    flex-wrap: wrap;
  }
  .alerte_etat > div {
    flex: 1 1 60%;
  }
  .alerte_etat .main_btn {
    width: 100%;
  }
}
/* ── sur grand écran, deux colonnes ─────────────────────────────── */
@media (min-width: 900px) {
  body[data-page=espace] .suivis,
  body[data-page=espace] .mur_annonces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    align-items: start;
  }
}
/* 📊 Les chiffres du salon */
/* ── les quatre cartes du haut ──────────────────────────────────── */
.stats_cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.stat_carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 1rem 0.95rem 0.9rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  overflow: hidden;
  /* un liseré de couleur plutôt qu'un fond teinté : quatre cartes
     colorées côte à côte deviennent illisibles */
}
.stat_carte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(36, 35, 39, 0.12);
}
.stat_carte.or::before {
  background: #FFC62E;
}
.stat_carte.vert::before {
  background: #3E8E5A;
}
.stat_carte_icone {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.05);
  color: rgba(36, 35, 39, 0.35);
  font-size: 0.74rem;
}
.stat_carte.or .stat_carte_icone {
  background: rgba(255, 198, 46, 0.26);
  color: #C98F00;
}
.stat_carte.vert .stat_carte_icone {
  background: rgba(62, 142, 90, 0.16);
  color: #3E8E5A;
}
.stat_carte_titre {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(36, 35, 39, 0.42);
  padding-right: 2.4rem;
}
.stat_carte_valeur {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.55rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat_carte_detail {
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(36, 35, 39, 0.48);
  margin-top: 0.25rem;
}

.stat_evolution {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  align-self: flex-start;
  margin-top: 0.2rem;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  color: rgba(36, 35, 39, 0.5);
  font-size: 0.68rem;
  font-weight: bold;
}
.stat_evolution i {
  font-size: 0.6rem;
}
.stat_evolution.hausse {
  background: rgba(62, 142, 90, 0.16);
  color: #3E8E5A;
}
.stat_evolution.baisse {
  background: rgba(192, 57, 43, 0.13);
  color: #C0392B;
}
.stat_evolution.neuve {
  background: rgba(255, 198, 46, 0.26);
  color: #C98F00;
}

/* ── l'alerte lapins ────────────────────────────────────────────── */
.stat_alerte {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.9rem;
  background: rgba(192, 57, 43, 0.07);
  border: 1.5px solid rgba(192, 57, 43, 0.3);
  border-radius: 1rem;
}
.stat_alerte > i {
  flex: none;
  margin-top: 0.1rem;
  color: #C0392B;
  font-size: 0.9rem;
}
.stat_alerte strong {
  display: block;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.9rem;
}
.stat_alerte span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.58);
  margin-top: 0.1rem;
}

/* ── un bloc de graphique ───────────────────────────────────────── */
.stat_bloc {
  padding: 1rem;
  margin-bottom: 0.8rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.stat_bloc_haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.stat_bloc_haut strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.98rem;
}

.stat_legende {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: rgba(36, 35, 39, 0.45);
}

.puce {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 0.18rem;
  vertical-align: -1px;
  background: rgba(36, 35, 39, 0.2);
}
.puce.or {
  background: #FFC62E;
}
.puce.vert {
  background: #3E8E5A;
}

.stat_sous_titre {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(36, 35, 39, 0.42);
  margin-bottom: 0.6rem;
}

.stat_rien {
  font-size: 0.78rem;
  color: rgba(36, 35, 39, 0.42);
  padding: 0.8rem 0;
}

/* ── l'histogramme ──────────────────────────────────────────────── */
/* En CSS pur : quelques dizaines de barres et deux couleurs empilées
   ne justifient pas de charger une bibliothèque de graphiques. */
.histogramme {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 130px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(36, 35, 39, 0.1);
}

.histo_barre {
  flex: 1;
  min-width: 3px;
  height: var(--h, 0%);
  display: flex;
  align-items: flex-end;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  background: rgba(36, 35, 39, 0.05);
  transition: opacity 0.13s ease;
  /* une barre à zéro reste visible : le trou dans la semaine est une
     information, pas un vide */
}
.histo_barre[style*="--h:0%"] {
  height: 3px;
}
.histo_barre:hover {
  opacity: 0.75;
}

.histo_pile {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  height: 100%;
}

.histo_part {
  width: 100%;
}
.histo_part.or {
  background: #FFC62E;
}
.histo_part.vert {
  background: #3E8E5A;
}

.histo_axe {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.66rem;
  color: rgba(36, 35, 39, 0.4);
  font-variant-numeric: tabular-nums;
}

/* ── la jauge de répartition ────────────────────────────────────── */
.jauge_double {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(36, 35, 39, 0.06);
}

.jauge_part {
  height: 100%;
  transition: width 0.18s ease;
}
.jauge_part.or {
  background: #FFC62E;
}
.jauge_part.vert {
  background: #3E8E5A;
}

.jauge_legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.5rem;
  font-size: 0.74rem;
  color: rgba(36, 35, 39, 0.55);
}

/* ── des lignes chiffrées ───────────────────────────────────────── */
.stat_lignes {
  display: flex;
  flex-direction: column;
  margin-top: 0.9rem;
}
.stat_lignes > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(36, 35, 39, 0.06);
  font-size: 0.82rem;
}
.stat_lignes > div:last-child {
  border-bottom: none;
}
.stat_lignes > div span {
  color: rgba(36, 35, 39, 0.58);
  min-width: 0;
}
.stat_lignes > div span small {
  display: block;
  font-size: 0.68rem;
  color: rgba(36, 35, 39, 0.35);
}
.stat_lignes > div b {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.stat_lignes > div b.rouge {
  color: #C0392B;
}

/* ── barres horizontales ────────────────────────────────────────── */
.barres_h {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.barre_h {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.barre_h_nom {
  width: 34px;
  flex: none;
  font-size: 0.72rem;
  color: rgba(36, 35, 39, 0.5);
}
.barre_h_piste {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  overflow: hidden;
}
.barre_h_jauge {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #FFC62E;
  transition: width 0.18s ease;
}
.barre_h_valeur {
  width: 24px;
  flex: none;
  text-align: right;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

/* ── le classement ──────────────────────────────────────────────── */
.classement {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
}

.classement_ligne {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* le premier se détache : c'est le seul qu'on retient */
}
.classement_ligne:first-child .classement_rang {
  background: #FFC62E;
  color: #242327;
}
.classement_ligne:first-child .classement_jauge {
  background: #FFC62E;
}

.classement_rang {
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.07);
  color: rgba(36, 35, 39, 0.5);
  font-size: 0.68rem;
  font-weight: bold;
}

.classement_corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.classement_nom {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classement_piste {
  height: 6px;
  border-radius: 999px;
  background: rgba(36, 35, 39, 0.06);
  overflow: hidden;
}

.classement_jauge {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 198, 46, 0.5);
  transition: width 0.18s ease;
}

.classement_chiffres {
  flex: none;
  text-align: right;
  line-height: 1.2;
}
.classement_chiffres b {
  display: block;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.classement_chiffres span {
  font-size: 0.66rem;
  color: rgba(36, 35, 39, 0.42);
}

/* ── deux colonnes quand la place le permet ─────────────────────── */
.stat_deux {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 760px) {
  .stat_deux {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
  }
}
/* ⭐ Les avis clients — public et admin */
/* ── les étoiles, partout pareil ────────────────────────────────── */
.etoiles {
  display: inline-flex;
  gap: 0.1rem;
  color: rgba(36, 35, 39, 0.18);
  font-size: 0.78rem;
  line-height: 1;
}
.etoiles .pleine {
  color: #FFC62E;
}

/* sur fond sombre, les étoiles éteintes doivent rester visibles */
.avis_box .etoiles {
  color: rgba(250, 248, 243, 0.22);
}

/* ── page d'accueil : le bandeau de note ────────────────────────── */
.avis_entete {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.9rem;
}

.avis_note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.avis_note strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1;
}
.avis_note .etoiles {
  font-size: 0.92rem;
}

.avis_compte {
  font-size: 0.76rem;
  color: rgba(36, 35, 39, 0.48);
}

.avis_liste {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* deux colonnes dès qu'il y a la place : quatre avis empilés font
   une page qui n'en finit pas */
@media (min-width: 720px) {
  .avis_liste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
/* ── la carte d'avis (complète l'existant dans _boxes.scss) ─────── */
.avis_box {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* l'initiale remplace la photo : on n'en a pas, et en demander une
     ferait fuir la moitié des clients */
}
.avis_box .avis_initiale {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 198, 46, 0.9);
  color: #242327;
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.88rem;
}
.avis_box .avis_client {
  margin-top: 0;
}
.avis_box {
  /* la réponse de Malick, en retrait sous l'avis */
}
.avis_box .avis_reponse {
  position: relative;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.8rem;
  background: rgba(250, 248, 243, 0.08);
  border-left: 3px solid rgba(255, 198, 46, 0.6);
}
.avis_box .avis_reponse strong {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 198, 46, 0.9);
}
.avis_box .avis_reponse p {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(250, 248, 243, 0.8);
  margin-top: 0.15rem;
}

/* ── noter sa coupe, depuis « Mon espace » ──────────────────────── */
.noter {
  padding: 1.1rem 1rem;
  background: white;
  border: 1.5px solid rgba(255, 198, 46, 0.55);
  border-radius: 1.1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  text-align: center;
}

.noter_question {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(36, 35, 39, 0.7);
}
.noter_question strong {
  color: #242327;
}

.noter_etoiles {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.9rem 0 0.2rem;
}

.noter_etoile {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 999px;
  color: rgba(36, 35, 39, 0.18);
  font-size: 1.5rem;
  transition: transform 0.13s ease, color 0.13s ease;
}
.noter_etoile:hover {
  transform: scale(1.15);
}
.noter_etoile:active {
  transform: scale(0.92);
}
.noter_etoile {
  /* remplies jusqu'à celle qu'on a choisie */
}
.noter_etoile.pleine {
  color: #FFC62E;
  animation: noter_pop 0.3s cubic-bezier(0.3, 1.6, 0.4, 1);
}

@keyframes noter_pop {
  from {
    transform: scale(0.7);
  }
  to {
    transform: scale(1);
  }
}
.noter_suite {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.7rem;
  animation: noter_ouvre 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes noter_ouvre {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.noter_texte {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 0.9rem;
  background: rgba(36, 35, 39, 0.02);
  font-family: "work sans";
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}
.noter_texte:focus {
  outline: none;
  border-color: rgba(255, 198, 46, 0.7);
  background: white;
}

.noter_merci {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
}
.noter_merci .mascotte {
  width: 48px;
  height: 69px;
}
.noter_merci p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(36, 35, 39, 0.65);
}

/* ── admin : le résumé ──────────────────────────────────────────── */
.avis_resume {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-radius: 1.1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
}
.avis_resume.vierge {
  flex-direction: column;
  text-align: center;
  gap: 0.7rem;
}
.avis_resume.vierge .mascotte {
  width: 48px;
  height: 69px;
}
.avis_resume.vierge p {
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(36, 35, 39, 0.55);
  max-width: 42ch;
}

.avis_moyenne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: none;
  padding-right: 1.4rem;
  border-right: 1px solid rgba(36, 35, 39, 0.08);
}
.avis_moyenne strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1;
}
.avis_moyenne .etoiles {
  font-size: 0.88rem;
}
.avis_moyenne span {
  font-size: 0.7rem;
  color: rgba(36, 35, 39, 0.45);
}

.avis_repartition {
  flex: 1;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (max-width: 520px) {
  .avis_moyenne {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(36, 35, 39, 0.08);
    padding-bottom: 0.8rem;
    width: 100%;
  }
}
/* ── admin : une fiche d'avis ───────────────────────────────────── */
.fiches_avis {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fiche_avis {
  padding: 0.9rem;
  background: white;
  border: 1.5px solid rgba(36, 35, 39, 0.09);
  border-left: 4px solid rgba(36, 35, 39, 0.12);
  border-radius: 1rem;
  box-shadow: 0 3px 0 rgba(110, 48, 17, 0.1);
  /* l'état saute aux yeux avant la lecture */
}
.fiche_avis.en_attente {
  border-left-color: #FFC62E;
}
.fiche_avis.publie {
  border-left-color: #3E8E5A;
}
.fiche_avis.masque {
  border-left-color: rgba(36, 35, 39, 0.2);
  background: rgba(36, 35, 39, 0.03);
  box-shadow: none;
}
.fiche_avis {
  /* deux étoiles ou moins : à traiter en premier */
}
.fiche_avis.severe.en_attente {
  border-left-color: #C0392B;
}
.fiche_avis_haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fiche_avis_qui {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fiche_avis_qui strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.92rem;
}
.fiche_avis_meta {
  font-size: 0.7rem;
  color: rgba(36, 35, 39, 0.42);
}
.fiche_avis_texte {
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(36, 35, 39, 0.68);
  margin-top: 0.45rem;
}
.fiche_avis_texte.muet {
  font-style: italic;
  color: rgba(36, 35, 39, 0.35);
}
.fiche_avis_reponse {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  background: rgba(255, 198, 46, 0.12);
  border-left: 3px solid rgba(255, 198, 46, 0.7);
}
.fiche_avis_reponse_qui {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #C98F00;
  font-weight: bold;
}
.fiche_avis_reponse p {
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(36, 35, 39, 0.65);
  margin-top: 0.1rem;
}
.fiche_avis_pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(36, 35, 39, 0.06);
}
.fiche_avis_actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}
.fiche_avis_actions .action_btn.actif {
  background: rgba(255, 198, 46, 0.3);
  color: #C98F00;
}
.fiche_avis {
  /* le rappel de l'avis dans le panneau de réponse */
}
.fiche_avis_rappel {
  padding: 0.8rem;
  border-radius: 0.9rem;
  background: rgba(36, 35, 39, 0.04);
}
.fiche_avis_rappel strong {
  font-family: "baloo 2";
  font-weight: bold;
  font-size: 0.9rem;
  margin-right: 0.5rem;
}
.fiche_avis_rappel p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(36, 35, 39, 0.6);
  margin-top: 0.35rem;
}

@media (max-width: 480px) {
  .fiche_avis_actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    padding-top: 0.3rem;
  }
}
/* 📐 Tablette et ordinateur

   Mobile d'abord — c'est là que sont les clients de Malik. Mais sur un
   grand écran on ne se contente pas de contenir la largeur : la mise en
   page change. Le hero devient deux colonnes (discours + photo), la
   navigation remonte dans l'en-tête, les listes deviennent des grilles. */
/* ══════════ TABLETTE ══════════════════════════════════════════ */
@media (min-width: 700px) {
  .page > *:not(.hero),
  .hero_photo,
  #tarifs > .bloc,
  #services {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero > * {
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero .hero_badge {
    width: auto;
  }
  .hero .hero_titre {
    font-size: 2.3rem;
  }
  .hero .hero_text {
    font-size: 1rem;
    max-width: 520px;
  }
  .barre_action > * {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
  header {
    padding-left: 0;
    padding-right: 0;
  }
  header .gauche {
    flex: 1;
    max-width: calc(780px / 2);
    margin-left: auto;
    padding-left: 1rem;
  }
  header .droite {
    flex: 1;
    justify-content: flex-end;
    max-width: calc(780px / 2);
    margin-right: auto;
    padding-right: 1rem;
  }
  .liste_services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    align-items: start;
  }
  .liste_services.pleine {
    grid-template-columns: 1fr;
  }
  .creneaux {
    grid-template-columns: repeat(5, 1fr);
  }
  .galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }
  .galerie .galerie_item {
    width: 100%;
    height: 180px;
  }
  .page_titre {
    font-size: 2.2rem;
  }
}
/* ══════════ ORDINATEUR ═══════════════════════════════════════ */
@media (min-width: 1000px) {
  /* ── la navigation remonte dans l'en-tête ────────────────────
     Une barre collée en bas est un geste du pouce : sur un écran
     large elle n'a plus de sens, et elle masque le contenu. */
  header {
    height: 72px;
    padding: 0;
  }
  header .gauche {
    flex: none;
    max-width: none;
    margin-left: 0;
    padding-left: 2rem;
  }
  header .droite {
    flex: none;
    max-width: none;
    margin-right: 0;
    padding-right: 2rem;
  }
  footer {
    position: fixed;
    top: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 1000;
    height: 72px;
    width: auto;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
  }
  footer .tab {
    flex: none;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
  }
  footer .tab .tab_mark {
    width: 7px;
    height: 7px;
    border-radius: 999px;
  }
  footer .tab .tab_label {
    font-size: 0.88rem;
  }
  footer .tab:hover {
    background: rgba(36, 35, 39, 0.05);
  }
  footer .tab.actif {
    background: rgba(255, 198, 46, 0.3);
  }
  /* ── le hero : deux colonnes ─────────────────────────────────
     Le discours à gauche, la photo à droite dans le fond sombre,
     au lieu d'un empilement qui laisse la moitié de l'écran vide. */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "marque  photo" "badge   photo" "titre   photo" "texte   photo" "actions photo";
    align-content: start;
    align-items: start;
    column-gap: 3rem;
    /* le fond couvre la largeur, le contenu suit la colonne du site */
    padding: calc(72px + 3.5rem) calc((100% - 1120px) / 2) 3.5rem;
    padding-left: max(2rem, (100% - 1120px) / 2);
    padding-right: max(2rem, (100% - 1120px) / 2);
  }
  .hero > * {
    width: auto;
    max-width: none;
    margin: 0;
  }
  .hero .hero_marque {
    grid-area: marque;
  }
  .hero .hero_badge {
    grid-area: badge;
    width: auto;
    justify-self: start;
  }
  .hero .hero_titre {
    grid-area: titre;
    font-size: 2.9rem;
    margin-top: 1rem;
  }
  .hero .hero_text {
    grid-area: texte;
    max-width: none;
    font-size: 1.02rem;
  }
  .hero .hero_actions {
    grid-area: actions;
    justify-self: start;
    margin-top: 1.75rem;
  }
  .hero .hero_actions .main_btn {
    flex: none;
    padding: 0 2rem;
  }
  /* la photo entre dans le hero, à droite */
  .hero_photo {
    grid-area: photo;
    align-self: center;
    height: 380px;
    margin: 0;
    max-width: none;
    border-width: 4px;
  }
  /* le débordement mobile n'a plus lieu d'être : la photo est dans la grille */
  .hero + * {
    margin-top: 0;
  }
  /* ── plus de barre d'action fixe ─────────────────────────────
     Le bouton du hero et celui de chaque carte suffisent quand
     toute la page est visible d'un coup d'œil. */
  body:not(.tunnel) .barre_action {
    position: static;
    border-top: none;
    background: none;
    backdrop-filter: none;
    padding: 2rem 1rem 0;
    text-align: center;
  }
  body:not(.tunnel) .barre_action .block_btn {
    max-width: 320px;
    margin: 0 auto;
  }
  body:not(.tunnel) .page {
    padding-top: 0;
    padding-bottom: 3rem;
  }
  /* le tunnel garde sa barre : c'est l'action du moment */
  .tunnel .barre_action {
    text-align: center;
  }
  .tunnel .barre_action > * {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .tunnel .tunnel_head > * {
    max-width: 1120px;
    margin: 0 auto;
  }
  /* le contenu du tunnel suit la même colonne que son en-tête */
  .tunnel .etape_vue > .bloc,
  .tunnel .etape_vue > .info_box,
  .tunnel .etape_vue > .page_intro,
  .tunnel #choix_services > .bloc,
  .tunnel #zone_creneaux > .bloc {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  .haut_btn {
    bottom: 1.5rem;
  }
  .tunnel .haut_btn {
    bottom: 6.5rem;
  }
  /* ── contenu ─────────────────────────────────────────────── */
  .page > *:not(.hero),
  #tarifs > .bloc,
  #services {
    max-width: 1120px;
  }
  .liste_services {
    grid-template-columns: repeat(3, 1fr);
  }
  .liste_services.large {
    grid-template-columns: repeat(2, 1fr);
  }
  .liste_services.pleine {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin: 0 auto;
  }
  .creneaux {
    grid-template-columns: repeat(6, 1fr);
  }
  .galerie .galerie_item {
    height: 240px;
  }
  .smail_box_grid {
    gap: 1rem;
  }
  .smail_box {
    padding: 1.1rem 1rem;
  }
  .smail_box .box_title {
    font-size: 0.95rem;
  }
  .smail_box .box_text {
    font-size: 0.78rem;
  }
  .page_titre {
    font-size: 2.6rem;
  }
  .section_title {
    font-size: 1.55rem;
  }
  /* la durée est une étiquette, pas une barre : elle ne s'étire pas */
  .tarif_box .tarif_foot .service_time {
    flex: none;
  }
  /* le tableau des horaires reste sur une colonne de lecture */
  .horaires {
    max-width: 780px;
    margin: 0 auto;
  }
  /* le plan aussi */
  .galerie_item.plan {
    max-width: 780px;
    margin: 0 auto;
    height: 300px;
  }
  .bloc > .page_intro {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
  /* le survol existe enfin : il guide le regard */
  .big_box:hover, .tarif_box:hover, .link_box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 0 rgba(110, 48, 17, 0.12);
  }
}
/* ══════════ TRÈS GRAND ÉCRAN ═════════════════════════════════ */
@media (min-width: 1400px) {
  .hero {
    padding-top: calc(72px + 4.5rem);
    padding-bottom: 4.5rem;
  }
  .hero .hero_titre {
    font-size: 3.3rem;
  }
  .hero_photo {
    height: 440px;
  }
  .creneaux {
    grid-template-columns: repeat(8, 1fr);
  }
}
/* ══════════ ESPACE MALIK ═════════════════════════════════════ */
@media (min-width: 700px) {
  .admin_head > *,
  body[data-page=admin] .page > * {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1000px) {
  .admin_head > *,
  body[data-page=admin] .page > * {
    max-width: 1120px;
  }
  body[data-page=admin] .page {
    padding-top: 0;
  }
  #attente {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    align-items: start;
  }
  /* deux colonnes seulement : à trois, les noms cassent sur trois lignes */
  #confirmes, #refuses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    align-items: start;
  }
  /* le titre de la carte ne doit pas se couper mot à mot */
  .rdv .rdv_infos strong {
    text-wrap: balance;
  }
  .rdv .rdv_infos span {
    text-wrap: pretty;
  }
  .admin_stats .stat {
    padding: 1.1rem;
  }
  .admin_stats .stat .stat_num {
    font-size: 2rem;
  }
}
/* ══════════ PAYSAGE SUR MOBILE ═══════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 999px) {
  .hero {
    padding-top: calc(62px + 0.75rem);
    padding-bottom: 1rem;
  }
  .hero .hero_titre {
    font-size: 1.5rem;
  }
  .hero .hero_text {
    display: none;
  }
  .loader .loader_logo {
    width: 140px;
    height: 64px;
  }
}