/* Pages métier : socle commun (tatoueur, prothésiste ongulaire, coach sportif). Complète style.css (v5), tel.css et phone.css.
   Trois couches :
   1. La page, c'est le site : blanc, bleu, relief, verre dépoli. Classes .m-* (variables de style.css).
   2. L'intérieur des téléphones, c'est l'appli du métier : .m-app + pièces .a-*, tout en variables --app-*.
      Tailles en --u (1 % de la largeur de l'écran dessiné) : un écran garde ses proportions à toutes les tailles.
   3. Un thème par métier, en fin de fichier : .m-app--<métier> ne pose QUE des variables.
   Hors du bloc « Thèmes », rien n'est propre à un métier. Aucun style en ligne : variantes par classes ou data-*.
   Sans JS : tous les écrans du côté pro sont affichés l'un sous l'autre, chaque réglage montre son état de départ. */

/* =====================================================================
   1. La page
   ===================================================================== */
.m-page .section-head { max-width: 46rem; }
.m-page .section-head h2 { font-size: clamp(1.6rem, 4.8vw, 2.5rem); }
.m-coupe { overflow: hidden; }

/* ---------- Fil d'Ariane (discret, en haut du hero) ---------- */
.m-fil { margin-bottom: 1.1rem; font-size: .88rem; color: var(--muted); }
.m-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.m-fil li + li::before { content: "›"; margin-right: .4rem; color: rgb(11 11 15 / .35); }
.m-fil a { color: var(--muted); text-decoration: none; }
.m-fil a:hover { color: var(--blue); text-decoration: underline; }
.m-fil [aria-current] { color: var(--ink); font-weight: 500; }

/* ---------- Hero : texte à gauche, téléphone 3D à droite ---------- */
.m-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.m-hero h1 { margin-bottom: 1.1rem; font-size: clamp(2.05rem, 8vw, 3rem); }
.m-hero .lead { margin-bottom: 1.75rem; }
.m-hero .cta-note { max-width: 30rem; }
.m-real { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1.75rem; }
.m-real .show-tag { margin: 0; }
.m-real b { font-weight: 600; }
.m-real .show-actions { margin: 0; }
.m-hero-visuel { position: relative; isolation: isolate; display: grid; place-items: center; min-width: 0; padding: .5rem 0 1rem; }
.m-hero-visuel::before { content: ""; position: absolute; inset: 6% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(58 87 232 / .24), transparent); }
.m-hero .tel { --tw: min(200px, 54vw); }

/* Bulles en verre autour du téléphone (ce que reçoit la pro pendant que le client remplit) */
.m-bulle {
  position: absolute; z-index: 3; display: none; align-items: center; gap: .65rem; max-width: 12rem;
  padding: .55rem .85rem .55rem .55rem; border-radius: 18px; background: var(--glass); border: 1px solid rgb(255 255 255 / .9);
  backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--shadow), inset 0 1px 0 #fff; font-size: .82rem; line-height: 1.25; text-align: left;
  animation: m-flotte 5s ease-in-out infinite;
}
.m-bulle b { display: block; font-weight: 600; }
.m-bulle small { display: block; color: var(--muted); font-size: .76rem; }
.m-bulle-ico { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--app-accent); color: var(--app-sur-accent); font-size: 1rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 6px 10px -6px rgb(20 30 90 / .5); }
.m-bulle--1 { left: 0; top: 20%; }
.m-bulle--2 { right: 0; bottom: 18%; animation-delay: -2.5s; }
@keyframes m-flotte { 50% { transform: translateY(-8px); } }
@media (min-width: 560px) and (max-width: 767.98px) { .m-bulle { display: flex; } }
@media (min-width: 768px) {
  .m-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 2rem; }
  .m-hero h1 { font-size: clamp(2.2rem, 4.3vw, 3.5rem); }
  .m-hero .tel { --tw: clamp(190px, 30vh, 250px); }
}
@media (min-width: 1024px) {
  .m-bulle { display: flex; }
  .m-bulle--1 { left: -3rem; }
  .m-bulle--2 { right: -1.5rem; }
}

/* ---------- Petit téléphone dessiné en CSS (aucune image) ---------- */
.m-mini {
  --mw: 11.5rem; position: relative; flex: none; width: var(--mw); height: calc(var(--mw) * 2.066);
  padding: calc(var(--mw) * .032); border-radius: calc(var(--mw) * .155); background: #0B0B0F;
  box-shadow: 0 0 0 1.5px #D5D8DF, 0 0 0 2.5px #9A9FAA, var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.m-mini::after { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(var(--mw) * .058); width: 27%; height: calc(var(--mw) * .05); border-radius: 999px; background: #0B0B0F; transform: translateX(-50%); }
.m-ecran { position: relative; overflow: hidden; container-type: inline-size; }
.m-mini .m-ecran { width: 100%; height: 100%; border-radius: calc(var(--mw) * .125); }

/* ---------- Parcours : étapes numérotées, reliées par un trait et une flèche ---------- */
.m-piste {
  margin: 0 -1.25rem; padding: 1rem 1.25rem 2rem; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
}
.m-piste::-webkit-scrollbar { display: none; }
.m-piste:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.m-parcours { --mw: 11.5rem; --ecart: 1.25rem; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--ecart); width: max-content; }
.m-etape { position: relative; display: grid; justify-items: center; align-content: start; gap: 1rem; width: calc(var(--mw) + 1rem); scroll-snap-align: start; }
.m-etape-tete { position: relative; display: flex; justify-content: center; width: 100%; }
.m-num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 13px;
  background: linear-gradient(160deg, #6F88FF, var(--blue) 60%, #2B41C4); color: #fff; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 3px 0 #2338A8, 0 12px 18px -10px rgb(58 87 232 / .7), 0 0 0 5px #FAFBFF;
}
/* Le trait court jusqu'au numéro suivant ; un reflet le parcourt */
.m-etape:not(:last-child) .m-etape-tete::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% + var(--ecart)); height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, #fff, transparent) -40% 0 / 30% 100% no-repeat, linear-gradient(90deg, var(--blue), rgb(58 87 232 / .28));
  animation: m-reflet 3.2s linear infinite;
}
/* La pointe de flèche, juste avant chaque numéro (sauf le premier) */
.m-etape:not(:first-child) .m-etape-tete::before {
  content: ""; position: absolute; z-index: 1; left: calc(50% - 2.4rem); top: 50%; width: .5rem; height: .5rem; margin-top: -.3rem;
  border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: rotate(45deg);
  animation: m-pointe 1.6s ease-in-out infinite;
}
@keyframes m-reflet { to { background-position: 140% 0, 0 0; } }
@keyframes m-pointe { 0%, 100% { transform: translateX(-3px) rotate(45deg); } 50% { transform: translateX(1px) rotate(45deg); } }
.m-etape-txt { max-width: 13rem; text-align: center; }
.m-etape-txt strong { display: block; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.01em; }
.m-etape-txt span { display: block; margin-top: .25rem; color: var(--muted); font-size: .88rem; line-height: 1.35; }
.m-parcours .m-etape.reveal.is-in:hover { transform: none; box-shadow: none; }
@media (hover: hover) {
  .m-etape:hover .m-mini { transform: translateY(-8px) rotate(-1.5deg); box-shadow: 0 0 0 1.5px #D5D8DF, 0 0 0 2.5px #9A9FAA, var(--shadow-up); }
}
@media (min-width: 768px) {
  .m-piste { margin: 0; padding: .5rem 0 0; overflow: visible; }
  .m-parcours { --mw: 11rem; --ecart: 1.5rem; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3rem; width: auto; }
  .m-etape { width: auto; }
  .m-etape:nth-child(3n) .m-etape-tete::after { width: 50%; background: linear-gradient(90deg, var(--blue), rgb(58 87 232 / 0)); animation: none; }
  .m-etape:nth-child(3n + 1) .m-etape-tete::before { content: none; }
}
@media (min-width: 1200px) {
  .m-large { max-width: 82rem; }
  .m-parcours { --mw: clamp(9.75rem, calc((100vw - 10.25rem) / 6 - .5rem), 11.75rem); --ecart: 1.25rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .m-etape:nth-child(3n):not(:last-child) .m-etape-tete::after { width: calc(100% + var(--ecart)); background: linear-gradient(90deg, transparent, #fff, transparent) -40% 0 / 30% 100% no-repeat, linear-gradient(90deg, var(--blue), rgb(58 87 232 / .28)); animation: m-reflet 3.2s linear infinite; }
  .m-etape:nth-child(3n + 1):not(:first-child) .m-etape-tete::before { content: ""; }
}

/* ---------- Tuiles : icône au trait, bleue, + 2 à 4 mots ---------- */
.m-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.m-tuile {
  display: grid; justify-items: start; align-content: start; gap: .55rem; padding: .85rem; border-radius: 16px;
  background: rgb(255 255 255 / .78); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 8px 14px -12px rgb(20 30 90 / .4);
  font-size: .9rem; font-weight: 600; line-height: 1.25;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .4s var(--ease);
}
.m-tuile svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .m-tuile:hover, .m-tuiles .m-tuile.reveal.is-in:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(58 87 232 / .3), 0 18px 24px -14px rgb(20 30 90 / .45); transition-delay: 0s !important; }
}
/* Variante en ligne : la suite d'un parcours (« Juste après ») */
.m-suite { display: grid; gap: .9rem; margin-top: 2.5rem; }
.m-suite-nom { color: var(--blue); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.m-tuiles--ligne { grid-template-columns: minmax(0, 1fr); }
.m-tuiles--ligne .m-tuile { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; }
@media (min-width: 768px) {
  .m-suite { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; margin-top: 3.5rem; }
  .m-tuiles--ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Côté pro : onglets (boutons aria-pressed), un téléphone annoté par écran ---------- */
.m-pro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.m-onglets { display: flex; flex-wrap: wrap; gap: .35rem; padding: .4rem; border-radius: 26px; background: rgb(255 255 255 / .7); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 14px 26px -18px rgb(20 30 90 / .4); }
.m-onglets[hidden] { display: none; }
.m-onglets button {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border: 0; border-radius: 999px; background: none; color: var(--ink);
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s;
}
.m-onglets button:hover { transform: translateY(-1px); color: var(--blue); }
.m-onglets button[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 0 2px 0 #2338A8, 0 10px 16px -8px rgb(58 87 232 / .7); }
.m-onglets button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.m-onglets svg { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-vues { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.m-vue {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.75rem; padding: 1.75rem 1.25rem; border-radius: 28px;
  background: var(--glass); border: 1px solid rgb(255 255 255 / .85);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--shadow), inset 0 1px 0 #fff;
}
.m-vue[hidden] { display: none; }
.m-vue .tel { --tw: min(18.5rem, 76vw); }
.m-vue-texte { display: grid; gap: 1.1rem; width: 100%; max-width: 30rem; }
.m-vue-texte h3 { font-size: 1.5rem; }
.m-exemple { color: var(--muted); font-size: .88rem; }
.m-pro.is-js .m-vue:not([hidden]) { animation: m-entre .4s var(--ease); }
@keyframes m-entre { from { opacity: 0; transform: translateY(10px); } }

/* Légende numérotée : le numéro répond à la pastille posée sur l'écran */
.m-legende { display: grid; gap: .55rem; counter-reset: m-pin; }
.m-legende li {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: .65rem .9rem .65rem .65rem; border-radius: 16px;
  background: rgb(255 255 255 / .78); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 8px 14px -12px rgb(20 30 90 / .4);
  font-weight: 500; line-height: 1.3; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.m-legende li::before {
  counter-increment: m-pin; content: counter(m-pin); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: linear-gradient(160deg, #6F88FF, var(--blue) 60%, #2B41C4); color: #fff; font-weight: 700; font-size: .9rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 2px 0 #2338A8, 0 8px 12px -6px rgb(58 87 232 / .7);
}
@media (hover: hover) {
  .m-legende li:hover { transform: translateX(4px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(58 87 232 / .35), 0 14px 20px -12px rgb(20 30 90 / .45); }
}
/* Pastille numérotée posée sur une zone de l'écran (.m-zone) : calque du site, pas de l'appli */
.m-zone { position: relative; }
.m-app .m-pin {
  position: absolute; z-index: 3; top: calc(var(--u) * -2.6); right: calc(var(--u) * -3.4); bottom: auto; left: auto; display: grid; place-items: center;
  width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; aspect-ratio: auto;
  background: linear-gradient(160deg, #6F88FF, #3A57E8 60%, #2B41C4); color: #fff; opacity: 1;
  font-family: var(--font); font-size: calc(var(--u) * 4.2); font-weight: 700; font-style: normal; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 calc(var(--u) * .7) #fff, 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgb(20 30 90 / .5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* Où poser la pastille par rapport à sa zone : à gauche, en bas, à mi-hauteur, au-dessus, en dehors (ne mord presque pas sur la zone), en petit */
.m-app .m-pin--g { right: auto; left: calc(var(--u) * -3.4); }
.m-app .m-pin--bas { top: auto; bottom: calc(var(--u) * -2.6); }
.m-app .m-pin--milieu { top: 50%; margin-top: calc(var(--u) * -3.8); }
.m-app .m-pin--dessus { top: calc(var(--u) * -6.2); }
.m-app .m-pin--hors { right: calc(var(--u) * -6.4); }
.m-app .m-pin--g.m-pin--hors { right: auto; left: calc(var(--u) * -6.4); }
.m-app .m-pin--petit { top: calc(var(--u) * -2.4); right: calc(var(--u) * -2.4); width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); font-size: calc(var(--u) * 3.3); }
.m-vue:has(.m-legende li:nth-child(1):hover) .m-pin[data-n="1"],
.m-vue:has(.m-legende li:nth-child(2):hover) .m-pin[data-n="2"],
.m-vue:has(.m-legende li:nth-child(3):hover) .m-pin[data-n="3"],
.m-vue:has(.m-legende li:nth-child(4):hover) .m-pin[data-n="4"],
.m-vue:has(.m-legende li:nth-child(5):hover) .m-pin[data-n="5"],
.m-vue:has(.m-legende li:nth-child(6):hover) .m-pin[data-n="6"],
.m-vue:has(.m-legende li:nth-child(7):hover) .m-pin[data-n="7"] { transform: scale(1.35); box-shadow: 0 0 0 calc(var(--u) * .7) #fff, 0 0 0 calc(var(--u) * 2.6) rgb(58 87 232 / .35), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgb(20 30 90 / .5); }
@media (min-width: 768px) {
  .m-vue { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 2.5rem; padding: 2.25rem 2.5rem; }
  .m-vue .tel { --tw: min(17.5rem, 38vw); margin: 0; }
  .m-vue-texte h3 { font-size: 1.9rem; }
}
@media (min-width: 1024px) {
  .m-pro.is-js { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; gap: 1.5rem; }
  .m-pro.is-js .m-onglets { flex-direction: column; flex-wrap: nowrap; gap: .25rem; padding: .6rem; border-radius: 28px; }
  .m-pro.is-js .m-onglets button { justify-content: flex-start; width: 100%; padding: .75rem 1rem; border-radius: 18px; font-size: 1rem; }
  .m-vue { gap: 3.5rem; padding: 2.5rem 3rem; }
  .m-vue .tel { --tw: 18.5rem; }
}

/* ---------- Réglages : « ton réglage → ce que voit ton client » ---------- */
.m-reglages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.m-reglage {
  display: grid; align-content: start; gap: 1.1rem; padding: 1.5rem 1.25rem; border-radius: 28px;
  background: var(--glass); border: 1px solid rgb(255 255 255 / .85);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--shadow), inset 0 1px 0 #fff; transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .4s var(--ease);
}
.m-reglage h3 { font-size: 1.2rem; }
.m-paire { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .9rem; }
.m-cote { display: grid; align-content: start; gap: .55rem; width: 100%; max-width: 17rem; }
.m-cote-nom { justify-self: start; padding: .2rem .7rem; border-radius: 999px; background: #fff; color: var(--ink); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 1px var(--line), 0 8px 14px -10px rgb(20 30 90 / .4); }
.m-cote-nom--toi { background: var(--blue); color: #fff; box-shadow: 0 2px 0 #2338A8, 0 10px 16px -8px rgb(58 87 232 / .7); }
.m-frag { --mw: 16rem; border-radius: 20px; overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.m-effet { color: var(--muted); font-size: .92rem; line-height: 1.35; min-height: 2.5em; }
.m-essai { color: var(--blue); font-size: .8rem; font-weight: 600; }
.m-essai[hidden] { display: none; }
/* La flèche entre les deux côtés : vers le bas sur téléphone, vers la droite dès qu'il y a la place */
.m-fleche { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--glass); color: var(--blue); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 12px 22px -14px rgb(20 30 90 / .4); transform: rotate(90deg); }
.m-fleche svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: m-pousse 1.6s ease-in-out infinite; }
@keyframes m-pousse { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
/* État du réglage : data-etat sur la carte, data-si sur ce qui ne se montre que dans un état */
.m-reglage[data-etat="on"] [data-si="off"], .m-reglage[data-etat="off"] [data-si="on"] { display: none; }
@media (min-width: 560px) {
  .m-reglage { padding: 1.75rem; }
  .m-paire { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; justify-items: stretch; gap: 1rem; }
  .m-cote { max-width: none; }
  .m-fleche { align-self: center; transform: none; }
}
@media (min-width: 900px) { .m-reglages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: hover) { .m-reglage:hover, .m-reglages .m-reglage.reveal.is-in:hover { transform: translateY(-6px); box-shadow: var(--shadow-up), inset 0 1px 0 #fff; transition-delay: 0s !important; } }

/* ---------- Carte des fonctions : trois groupes de tuiles ---------- */
.m-groupes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.m-groupe {
  padding: 1.5rem 1.25rem; border-radius: 28px; background: var(--glass); border: 1px solid rgb(255 255 255 / .85);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--shadow), inset 0 1px 0 #fff;
}
.m-groupe h3 { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; font-size: 1.3rem; }
.m-groupe-ico { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: linear-gradient(160deg, #6F88FF, var(--blue) 60%, #2B41C4); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 3px 0 #2338A8, 0 14px 20px -10px rgb(58 87 232 / .7); transform: rotate(-4deg); }
.m-groupe-ico svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 560px) and (max-width: 899.98px) { .m-groupe .m-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .m-groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .m-groupe { padding: 1.75rem 1.5rem; }
}

/* ---------- Autres métiers : deux cartes-liens ---------- */
.m-autres { padding-top: 0; }
.m-autres h2 { margin-bottom: 1.25rem; font-size: 1.35rem; }
.m-metiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.m-metier {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); color: var(--ink); font-weight: 600; text-decoration: none;
  background: var(--glass); border: 1px solid rgb(255 255 255 / .85);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--shadow), inset 0 1px 0 #fff; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.m-metier svg { flex: none; width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-metier-fleche { margin-left: auto; color: var(--blue); font-weight: 700; transition: transform .25s var(--ease); }
.m-metier:hover { transform: translateY(-6px); box-shadow: var(--shadow-up), inset 0 1px 0 #fff; }
.m-metier:hover .m-metier-fleche { transform: translateX(5px); }
@media (min-width: 640px) { .m-metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Pavé final : le prix, une fois, en petit sous le bouton ---------- */
.final-box .m-prix { margin-top: 1.25rem; color: rgb(255 255 255 / .86); }
.final-box .m-prix a { color: #fff; }

/* =====================================================================
   2. L'appli dans les écrans : .m-app + pièces .a-*
   Valeurs par défaut des variables (appli neutre, bleu du site) : un thème ne redéfinit que ce qui change.
   ===================================================================== */
:root {
  --app-fond: #FFFFFF; --app-fond-2: #F4F5F7; --app-fond-3: #E6E8EC; --app-carte: #FFFFFF;
  --app-encre: #0F172A; --app-doux: #64748B; --app-trait: #D9DDE5;
  --app-accent: #3A57E8; --app-accent-vif: #3A57E8; --app-accent-clair: #E4EAFF; --app-sur-accent: #FFFFFF;
  --app-fort: #0F172A; --app-sur-fort: #FFFFFF; --app-ok: #1E8A4C;
  --app-police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --app-police-titre: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-titre-graisse: 700; --app-titre-espace: -.01em; --app-titre-casse: none; --app-sur-espace: .08em; --app-btn-espace: 0em; --app-gras: 600;
  --app-r: 3.5; --app-r-bouton: 999px;
  --app-c1: #3A57E8; --app-c2: #B96A00; --app-c3: #6B3FD4; --app-c4: #0E7C7E; --app-c5: #1E8A4C; --app-c6: #C2337A;
}
/* --u : 1 % de la largeur de l'écran. Unités de conteneur si le navigateur les connaît, sinon calcul d'après la largeur du cadre. */
.m-app {
  --u: calc(var(--mw, 12rem) * .01 * var(--app-zoom, 1));
  background: var(--app-fond); color: var(--app-encre);
  font-family: var(--app-police); font-size: calc(var(--u) * 4.2); font-weight: 400; line-height: 1.35; letter-spacing: 0; text-align: left;
}
.m-mini .m-app { --app-zoom: 1.45; --u: calc(var(--mw) * .00936 * var(--app-zoom)); --app-haut: calc(var(--u) * 8.6); }
.tel .m-app { --u: calc(var(--tw) * .00922); --app-haut: calc(var(--u) * 14.5); }
.tel.is-34 .m-app { --u: calc(var(--tw) * .01071); }
@supports (width: 1cqw) { .m-app, .m-mini .m-app, .tel .m-app, .tel.is-34 .m-app { --u: calc(1cqw * var(--app-zoom, 1)); } }
.tel-screen > .m-app, .m-ecran > .m-app { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.m-frag > .m-app { --app-zoom: 1.3; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: calc(var(--u) * 3.4); min-height: calc(var(--u) * 48); padding: calc(var(--u) * 6); }
.m-app b, .m-app strong { font-weight: var(--app-gras); }
.m-app i, .m-app em { font-style: normal; }
.m-app small { font-size: calc(var(--u) * 3.3); color: var(--app-doux); }
.m-app button { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-app button:disabled { cursor: default; }
.m-app button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Largeurs en pourcentage (barres, curseurs, progression) : une classe par palier, jamais de style en ligne */
.a-p10 { --p: 10%; } .a-p17 { --p: 17%; } .a-p20 { --p: 20%; } .a-p30 { --p: 30%; } .a-p33 { --p: 33%; } .a-p40 { --p: 40%; } .a-p50 { --p: 50%; }
.a-p60 { --p: 60%; } .a-p67 { --p: 67%; } .a-p70 { --p: 70%; } .a-p80 { --p: 80%; } .a-p83 { --p: 83%; } .a-p90 { --p: 90%; } .a-p100 { --p: 100%; }
/* Couleur d'une catégorie (type de demande, prestation, formule…) : --c, tirée du thème */
.a-c1 { --c: var(--app-c1); } .a-c2 { --c: var(--app-c2); } .a-c3 { --c: var(--app-c3); } .a-c4 { --c: var(--app-c4); } .a-c5 { --c: var(--app-c5); } .a-c6 { --c: var(--app-c6); }

/* ---------- Structure d'un écran ---------- */
.a-barre { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); padding: var(--app-haut, calc(var(--u) * 5)) calc(var(--u) * 6) calc(var(--u) * 3.2); border-bottom: 1px solid color-mix(in srgb, var(--app-trait) 55%, transparent); }
.a-logo { font-family: var(--app-police-titre); font-weight: var(--app-titre-graisse); font-size: calc(var(--u) * 4.4); letter-spacing: var(--app-titre-espace); text-transform: var(--app-titre-casse); white-space: nowrap; }
.a-pilule { padding: calc(var(--u) * 1.9) calc(var(--u) * 3.2); border-radius: 999px; background: var(--app-accent); color: var(--app-sur-accent); font-size: calc(var(--u) * 3.3); letter-spacing: var(--app-btn-espace); white-space: nowrap; }
.a-menu { flex: none; display: block; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background-color: var(--app-fond-2); box-shadow: inset 0 0 0 1px var(--app-trait);
  background-image: linear-gradient(var(--app-encre), var(--app-encre)), linear-gradient(var(--app-encre), var(--app-encre)), linear-gradient(var(--app-encre), var(--app-encre));
  background-size: 44% calc(var(--u) * .55); background-position: 50% 34%, 50% 50%, 50% 66%; background-repeat: no-repeat; }
.a-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4) calc(var(--u) * 5) 0; }
.a-pile { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: calc(var(--u) * 3); }
.a-pile--serre { gap: calc(var(--u) * 1); }
.a-pile--centre { justify-items: center; text-align: center; }
.a-galerie { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.5); width: 100%; }
.a-galerie i { aspect-ratio: 4 / 5; border-radius: calc(var(--u) * 2.5); background: linear-gradient(160deg, var(--app-fond-3), var(--app-trait)); }
.a-galerie i:nth-child(2n) { background: linear-gradient(200deg, var(--app-fond-2), var(--app-fond-3)); }
.a-rangee { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }
.a-carte { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 3.6); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * var(--app-r) * 1.4); background: var(--app-carte); }
.a-bande { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 7) calc(var(--u) * 7) 0; background: var(--app-fond-2); }

/* ---------- Textes ---------- */
.a-titre { font-family: var(--app-police-titre); font-weight: var(--app-titre-graisse); font-size: calc(var(--u) * 5.6); line-height: 1.15; letter-spacing: var(--app-titre-espace); text-transform: var(--app-titre-casse); }
.a-titre--xl { font-size: calc(var(--u) * 9); line-height: 1.1; }
.a-titre--s { font-size: calc(var(--u) * 4.4); }
.a-nom { font-size: calc(var(--u) * 4.5); line-height: 1.25; }
.a-sur { font-size: calc(var(--u) * 3.4); letter-spacing: var(--app-sur-espace); text-transform: uppercase; color: var(--app-doux); }
.a-lab { font-family: var(--app-police-titre); font-weight: var(--app-titre-graisse); font-size: calc(var(--u) * 3.3); letter-spacing: var(--app-titre-espace); text-transform: var(--app-titre-casse); color: var(--app-doux); }
.a-texte { margin: 0; color: var(--app-doux); font-size: calc(var(--u) * 4.2); line-height: 1.45; }
.a-aide { color: var(--app-doux); font-size: calc(var(--u) * 3.4); line-height: 1.4; }
.a-lien { padding: 0; border: 0; background: none; color: var(--app-accent); font-size: calc(var(--u) * 3.5); text-align: left; text-decoration: underline; text-underline-offset: .15em; }
.a-ok { color: var(--app-ok); }
.a-orne { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); color: var(--app-accent-vif); font-size: calc(var(--u) * 4.2); line-height: 1; }
.a-orne::before, .a-orne::after { content: ""; width: calc(var(--u) * 15); border-top: 1px solid color-mix(in srgb, var(--app-doux) 55%, transparent); }
.a-hero { display: grid; justify-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 10) calc(var(--u) * 7) calc(var(--u) * 9); text-align: center; }
.a-hero .a-texte { text-align: center; }

/* ---------- Boutons, puces, repères ---------- */
.a-btn { display: block; padding: calc(var(--u) * 3.6) calc(var(--u) * 6); border-radius: var(--app-r-bouton); background: var(--app-accent); color: var(--app-sur-accent); font-size: calc(var(--u) * 4.2); line-height: 1.2; letter-spacing: var(--app-btn-espace); text-align: center; }
.a-btn--alt { background: none; color: var(--app-encre); box-shadow: inset 0 0 0 1px var(--app-encre); }
.a-btn--doux { background: var(--app-fond-2); color: var(--app-encre); box-shadow: inset 0 0 0 1px var(--app-trait); }
.a-btn--petit { display: inline-block; padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: calc(var(--u) * 3.2); white-space: nowrap; }
.a-champ > .a-btn--petit { justify-self: start; }
.a-btn--bas { margin-top: auto; }
.a-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
.a-puces { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.3); }
.a-puces > * { padding: calc(var(--u) * 1.4) calc(var(--u) * 2.6); border-radius: 999px; background: var(--app-fond-2); color: var(--app-encre); font-size: calc(var(--u) * 3.1); line-height: 1.3; white-space: nowrap; }
.a-puces > .on { background: var(--app-carte); box-shadow: inset 0 0 0 1px var(--app-doux); }
.a-puces--file { flex-wrap: nowrap; overflow: hidden; }
.a-puces--fort > .on { background: var(--app-fort); color: var(--app-sur-fort); box-shadow: none; }
.a-puces--accent > .on { background: var(--app-accent); color: var(--app-sur-accent); box-shadow: none; }
.a-badge { padding: calc(var(--u) * .9) calc(var(--u) * 2.6); border-radius: 999px; background: var(--app-accent); color: var(--app-sur-accent); font-size: calc(var(--u) * 3.1); white-space: nowrap; }
.a-cat { display: inline-block; padding: calc(var(--u) * .4) calc(var(--u) * 2.2); border: 1px solid var(--c, var(--app-trait)); border-radius: 999px; background: var(--app-fond-2); color: var(--app-encre); font-size: calc(var(--u) * 3); line-height: 1.35; white-space: nowrap; }
.a-repere { display: inline-block; padding: calc(var(--u) * .4) calc(var(--u) * 2.2); border-radius: 999px; background: var(--app-fond-2); color: var(--app-encre); font-size: calc(var(--u) * 2.9); line-height: 1.35; white-space: nowrap; }
.a-repere--fort { background: var(--app-accent); color: var(--app-sur-accent); }
.a-compte { display: inline-grid; place-items: center; min-width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); margin-left: calc(var(--u) * .8); padding: 0 calc(var(--u) * 1.2); border-radius: 999px; background: var(--app-accent); color: var(--app-sur-accent); font-size: calc(var(--u) * 2.9); vertical-align: calc(var(--u) * .3); }
.a-alerte { margin: 0; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * var(--app-r)); background: var(--app-accent-clair); color: var(--app-accent); font-size: calc(var(--u) * 3.7); line-height: 1.35; text-align: center; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .a-cat { border-color: color-mix(in srgb, var(--c, var(--app-trait)) 45%, var(--app-carte)); background: color-mix(in srgb, var(--c, var(--app-trait)) 14%, var(--app-carte)); color: color-mix(in srgb, var(--c, var(--app-encre)) 62%, var(--app-encre)); }
}

/* ---------- Formulaire côté client ---------- */
.a-etape { display: flex; align-items: center; gap: calc(var(--u) * 2.6); }
.a-etape-n { flex: none; display: grid; place-items: center; width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); border-radius: 50%; background: var(--app-accent-vif); color: var(--app-sur-accent); font-size: calc(var(--u) * 4); }
.a-prog { display: block; height: calc(var(--u) * 1.5); border-radius: 999px; background: var(--app-fond-3); overflow: hidden; }
.a-prog i { display: block; width: var(--p, 50%); height: 100%; border-radius: inherit; background: var(--app-accent); }
.a-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.a-choix > * { display: grid; align-content: center; min-height: calc(var(--u) * 13.5); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * var(--app-r)); background: var(--app-carte); font-family: var(--app-police-titre); font-size: calc(var(--u) * 3.7); line-height: 1.25; letter-spacing: calc(var(--app-titre-espace) * .5); }
.a-choix > .on { border-color: var(--app-accent); background: var(--app-accent-clair); }
.a-choix > .off { opacity: .42; }
.a-champ { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.6); }
.a-boite { display: block; padding: calc(var(--u) * 2.8) calc(var(--u) * 3); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * var(--app-r)); background: var(--app-carte); color: var(--app-doux); font-size: calc(var(--u) * 3.6); line-height: 1.35; }
.a-lignes { display: grid; gap: calc(var(--u) * 1.9); }
.a-lignes i { height: calc(var(--u) * 1.5); border-radius: 999px; background: currentColor; opacity: .22; }
.a-lignes i:last-child { width: 58%; }
.a-depot { display: flex; gap: calc(var(--u) * 1.8); }
.a-depot i { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: calc(var(--u) * 2.5); background: linear-gradient(160deg, var(--app-fond-3), var(--app-fond-2)); }
.a-depot i.plus { display: grid; place-items: center; background: none; box-shadow: inset 0 0 0 1px var(--app-trait); color: var(--app-doux); font-size: calc(var(--u) * 6); line-height: 1; }
.a-case { display: flex; align-items: flex-start; gap: calc(var(--u) * 2.4); font-size: calc(var(--u) * 3.5); line-height: 1.35; }
.a-case::before { content: ""; flex: none; display: grid; place-items: center; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 1.2); background: var(--app-carte); font-size: calc(var(--u) * 3.6); line-height: 1; }
.a-case.on::before { content: "✓"; border-color: var(--app-accent); background: var(--app-accent); color: var(--app-sur-accent); }
.a-bascule { display: inline-flex; padding: calc(var(--u) * .8); border-radius: 999px; background: var(--app-fond-2); font-size: calc(var(--u) * 3.4); }
.a-bascule > * { padding: calc(var(--u) * 1.2) calc(var(--u) * 3.6); border-radius: 999px; }
.a-bascule > .on { background: var(--app-fort); color: var(--app-sur-fort); }
.a-curseur { position: relative; display: block; flex: 1; height: calc(var(--u) * 1.5); border-radius: 999px; background: var(--app-fond-3); }
.a-curseur::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 50%); border-radius: inherit; background: var(--app-accent); }
.a-curseur i { position: absolute; left: var(--p, 50%); top: 50%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin: calc(var(--u) * -3) 0 0 calc(var(--u) * -3); border-radius: 50%; background: var(--app-accent); box-shadow: 0 0 0 calc(var(--u) * .8) var(--app-carte), 0 calc(var(--u) * .8) calc(var(--u) * 2) rgb(0 0 0 / .25); }
.a-legende { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2) calc(var(--u) * 3.2); font-size: calc(var(--u) * 3); color: var(--app-doux); }
.a-legende > * { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.3); white-space: nowrap; }
.a-legende > *::before { content: ""; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: var(--c, var(--app-accent)); }
.a-legende > .l-doux::before { background: var(--app-accent-clair); box-shadow: inset 0 0 0 1px var(--app-accent); }
.a-legende > .l-non::before { background: var(--app-fond-3); }
/* Dessin au trait dans un écran (silhouette, zone du corps, motif d'exemple…) : le tracé est dans la page, les couleurs ici */
.a-dessin { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--app-encre); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.a-dessin--haut { width: auto; height: calc(var(--u) * 90); margin: 0 auto; }
.a-dessin .sel { fill: var(--app-accent); stroke: none; }
.a-dessin .cas { fill: var(--app-accent-clair); stroke: none; }
.a-dessin .non { fill: var(--app-fond-3); stroke: none; }
.a-dessin .peau { fill: var(--app-fond-2); }
.a-dessin .fin { stroke-width: 1; vector-effect: non-scaling-stroke; }
.a-dessin .cote { stroke: var(--app-accent); stroke-width: 1.2; }
.a-merci { display: grid; justify-items: center; gap: calc(var(--u) * 1.8); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * var(--app-r) * 1.4); background: var(--app-carte); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgb(0 0 0 / .12); text-align: center; }
.a-rond { display: grid; place-items: center; width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: var(--app-accent-clair); color: var(--app-accent-vif); font-size: calc(var(--u) * 5); line-height: 1; }
.a-mail { display: grid; justify-items: start; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * var(--app-r) * 1.4); background: var(--app-carte); box-shadow: 0 0 0 1px var(--app-trait), 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgb(0 0 0 / .08); font-size: calc(var(--u) * 3.9); line-height: 1.3; }

/* ---------- Calendriers ---------- */
.a-mois { display: flex; gap: calc(var(--u) * 1.5); }
.a-mois > * { flex: 1; padding: calc(var(--u) * 2.2) calc(var(--u) * 2); border: 1px solid var(--app-trait); border-radius: 999px; font-size: calc(var(--u) * 3.6); text-align: center; white-space: nowrap; }
.a-mois > .on { border-color: var(--app-fort); background: var(--app-fort); color: var(--app-sur-fort); }
/* Côté client : les jours proposés (5 colonnes par défaut, .a-cal--7 pour la semaine entière) */
.a-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1.5); }
.a-cal--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.a-cal > * { display: grid; place-items: center; height: calc(var(--u) * 9.4); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 2.6); background: var(--app-fond); font-size: calc(var(--u) * 3.8); }
.a-cal > .h { height: auto; border: 0; background: none; color: var(--app-doux); font-size: calc(var(--u) * 2.9); }
.a-cal > .on { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-sur-accent); }
.a-cal > .off { border-color: transparent; background: none; color: var(--app-trait); text-decoration: line-through; }
/* Côté pro : les jours d'un mois à ouvrir ou fermer un par un */
.a-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(var(--u) * 1); }
.a-jours > * { display: grid; place-items: center; min-width: 0; height: calc(var(--u) * 6.8); padding: 0; border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 1.9); background: var(--app-carte); color: var(--app-encre); font-size: calc(var(--u) * 3.1); }
.a-jours > .h { height: auto; border: 0; background: none; color: var(--app-doux); font-size: calc(var(--u) * 2.7); }
.a-jours > .vide, .a-jours > .repos { border-color: transparent; background: none; color: var(--app-trait); }
.a-jours > .ouvre { border-color: var(--app-accent); color: var(--app-accent); }
.a-jours > .ferme, .a-jours > [aria-pressed="true"] { border-color: var(--app-accent); background: repeating-linear-gradient(135deg, var(--app-accent-clair) 0 calc(var(--u) * .9), var(--app-carte) calc(var(--u) * .9) calc(var(--u) * 1.8)); color: var(--app-accent); text-decoration: line-through; }
.m-frag .a-jours > * { height: calc(var(--u) * 12); font-size: calc(var(--u) * 3.8); }
.m-frag .a-jours > .h { height: auto; font-size: calc(var(--u) * 3); }
/* Côté pro : le mois avec les rendez-vous dans les cases */
.a-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.a-agenda > * { display: grid; align-content: start; gap: calc(var(--u) * .4); min-width: 0; min-height: calc(var(--u) * 9.6); padding: calc(var(--u) * .7) calc(var(--u) * .5); border-top: 1px solid color-mix(in srgb, var(--app-trait) 45%, transparent); font-size: calc(var(--u) * 2.9); line-height: 1.15; }
.a-agenda > .h { min-height: 0; border: 0; color: var(--app-doux); font-size: calc(var(--u) * 2.6); text-align: center; }
.a-agenda i { font-size: calc(var(--u) * 2.3); }
.a-agenda > .hors { opacity: .32; }
.a-agenda > .sel { border-radius: calc(var(--u) * 1.6); box-shadow: inset 0 0 0 calc(var(--u) * .5) var(--app-accent); }
.a-agenda > .ferme { background: repeating-linear-gradient(135deg, var(--app-fond-2) 0 calc(var(--u) * .9), transparent calc(var(--u) * .9) calc(var(--u) * 1.8)); color: var(--app-doux); }
.a-agenda .ev { display: block; overflow: hidden; padding: 0 calc(var(--u) * .5); border-left: calc(var(--u) * .5) solid var(--c, var(--app-doux)); border-radius: calc(var(--u) * .5); background: var(--app-fond-2); font-size: calc(var(--u) * 2.4); line-height: 1.3; white-space: nowrap; }
.a-agenda .dispo { color: var(--app-ok); font-size: calc(var(--u) * 2.2); white-space: nowrap; }
@supports (color: color-mix(in srgb, red 50%, blue)) { .a-agenda .ev { background: color-mix(in srgb, var(--c, var(--app-doux)) 16%, var(--app-carte)); } }
.a-rdv { display: grid; gap: calc(var(--u) * .3); padding: calc(var(--u) * 2.2) calc(var(--u) * 3); border-left: calc(var(--u) * 1) solid var(--c, var(--app-doux)); border-radius: calc(var(--u) * 1.8); background: var(--app-fond-2); font-size: calc(var(--u) * 3.6); line-height: 1.3; }
.a-creneau { display: grid; grid-template-columns: calc(var(--u) * 21) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 2); padding-top: calc(var(--u) * 2.2); border-top: 1px solid color-mix(in srgb, var(--app-trait) 60%, transparent); }
.a-creneau > em { color: var(--app-doux); font-size: calc(var(--u) * 2.9); letter-spacing: .1em; text-transform: uppercase; }
.m-frag .a-lien { padding: calc(var(--u) * 2) 0; }

/* ---------- Tableau de bord côté pro ---------- */
.a-nav { flex: none; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: calc(var(--u) * .8); margin: calc(var(--u) * 3) calc(var(--u) * 5) 0; padding: calc(var(--u) * .9); border-radius: 999px; background: var(--app-fond-2); font-size: calc(var(--u) * 3.4); }
.a-nav > * { padding: calc(var(--u) * 2.3) 0; border-radius: 999px; text-align: center; white-space: nowrap; }
.a-nav > .on { background: var(--app-fort); color: var(--app-sur-fort); }
.a-liste { border: 1px solid var(--app-trait); border-radius: calc(var(--u) * var(--app-r) * 1.4); background: var(--app-carte); }
.a-liste > * { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.2) calc(var(--u) * 2); padding: calc(var(--u) * 3) calc(var(--u) * 3.6); }
.a-liste > * + * { border-top: 1px solid color-mix(in srgb, var(--app-trait) 55%, transparent); }
.a-liste b { font-size: calc(var(--u) * 4.4); }
.a-liste .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 1.2) calc(var(--u) * 1.6); color: var(--app-doux); font-size: calc(var(--u) * 3); }
.a-paie { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 2); }
.a-montant { padding: calc(var(--u) * 1.6) calc(var(--u) * 2.8); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 2.4); background: var(--app-carte); font-size: calc(var(--u) * 3.8); white-space: nowrap; }
.a-inter { flex: none; display: block; width: calc(var(--u) * 11); height: calc(var(--u) * 6.6); padding: 0; border: 0; border-radius: 999px; background: var(--app-fond-3); transition: background-color .2s; }
.a-inter::after { content: ""; display: block; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); margin: calc(var(--u) * .7); border-radius: 50%; background: #fff; box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .8) rgb(0 0 0 / .25); transition: transform .2s var(--ease); }
.a-inter.on, .a-inter[aria-checked="true"] { background: var(--app-accent); }
.a-inter.on::after, .a-inter[aria-checked="true"]::after { transform: translateX(calc(var(--u) * 4.4)); }
.m-frag .a-inter { width: calc(var(--u) * 15); height: calc(var(--u) * 9); }
.m-frag .a-inter::after { width: calc(var(--u) * 7); height: calc(var(--u) * 7); margin: calc(var(--u) * 1); }
.m-frag .a-inter[aria-checked="true"]::after { transform: translateX(calc(var(--u) * 6)); }
.a-mois-carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.6) calc(var(--u) * 2); padding: calc(var(--u) * 2.6) calc(var(--u) * 3.2); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * var(--app-r)); background: var(--app-fond); }
.a-mois-carte.ouvert { border-color: var(--app-accent); }
.a-mois-carte:has(.a-inter[aria-checked="true"]) { border-color: var(--app-accent); }
.a-mois-carte b { display: block; font-family: var(--app-police-titre); font-size: calc(var(--u) * 4.2); letter-spacing: calc(var(--app-titre-espace) * .5); }
.a-mois-carte.ouvert b + small { color: var(--app-accent); }
.a-mois-carte > .plein { grid-column: 1 / -1; }
.a-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.a-chiffres > * { display: grid; align-content: start; gap: calc(var(--u) * .6); padding: calc(var(--u) * 2.8) calc(var(--u) * 3); border-radius: calc(var(--u) * var(--app-r)); background: var(--app-carte); box-shadow: 0 1px 0 var(--app-fond-3); }
.a-chiffres b { font-family: var(--app-police-titre); font-size: calc(var(--u) * 3.9); line-height: 1.2; }
.a-barres { display: grid; gap: calc(var(--u) * 1.7); font-size: calc(var(--u) * 3.1); }
.a-barres > * { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 2); }
.a-barres i { display: block; height: calc(var(--u) * 2.2); border-radius: 999px; background: var(--app-fond-2); }
.a-barres i::before { content: ""; display: block; width: var(--p, 50%); height: 100%; border-radius: inherit; background: var(--app-doux); }
.a-table { display: grid; grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); font-size: calc(var(--u) * 3.1); }
.a-table > * { min-width: 0; padding: calc(var(--u) * 2.2) calc(var(--u) * .6); border-top: 1px solid color-mix(in srgb, var(--app-trait) 55%, transparent); text-align: right; white-space: nowrap; }
.a-table > .n { text-align: left; white-space: normal; }
.a-table > .n small { display: block; }
.a-table > .h { border-top: 0; color: var(--app-doux); font-size: calc(var(--u) * 2.7); }
.a-table > .t { font-size: calc(var(--u) * 3.2); }
.a-table > .plein { grid-column: 1 / -1; display: grid; gap: calc(var(--u) * 1); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6); border-top: 0; border-radius: calc(var(--u) * 2); background: var(--app-fond-2); text-align: left; white-space: normal; }
.a-table > .total { background: var(--app-fond-2); }
.a-planche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.5); }
.a-planche > * { aspect-ratio: 1; padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 2); background: var(--app-fond-2); color: var(--app-doux); font-size: calc(var(--u) * 2.9); }
.a-votes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(var(--u) * 1); }
.a-votes > * { display: grid; place-items: center; padding: calc(var(--u) * 1.1) 0; border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 1.8); background: var(--app-fond); font-size: calc(var(--u) * 3); line-height: 1.15; }
.a-votes > .aime { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-sur-accent); }
.a-votes > .pas { border-color: var(--app-fond-3); background: var(--app-fond-3); color: var(--app-doux); }

/* ---------- Mouvement réduit : tout est en place, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-bulle, .m-fleche svg, .m-etape .m-etape-tete::after, .m-etape .m-etape-tete::before, .m-pro.is-js .m-vue:not([hidden]) { animation: none !important; }
  .m-mini, .m-tuile, .m-legende li, .m-pin, .m-reglage, .m-metier, .m-metier-fleche, .m-onglets button, .a-inter, .a-inter::after { transition: none; }
  .m-etape:hover .m-mini, .m-reglage:hover, .m-metier:hover, .m-tuile:hover, .m-legende li:hover { transform: none; }
}

/* =====================================================================
   3. Thèmes : un bloc de variables par métier, rien d'autre
   ===================================================================== */
/* Tatouage : crème, sable, brun, terracotta ; titres en capitales espacées (d'après l'appli Sifflitattoo).
   Catégories c1 à c6 : projet perso, flash, plusieurs, matching, retouche, chèque cadeau. */
.m-app--tatouage {
  --app-fond: #FAF1E4; --app-fond-2: #F2E3D0; --app-fond-3: #E6D0B8; --app-carte: #FFF9F0;
  --app-encre: #3A2118; --app-doux: #6E5244; --app-trait: #CDB39A;
  --app-accent: #A34E2E; --app-accent-vif: #C4673F; --app-accent-clair: #F3D9CB; --app-sur-accent: #FFFFFF;
  --app-fort: #3A2118; --app-sur-fort: #FAF1E4; --app-ok: #4F6B3A;
  --app-police: "Tenor Sans", "Helvetica Neue", Arial, sans-serif; --app-police-titre: "Marcellus", Georgia, "Times New Roman", serif;
  --app-titre-graisse: 400; --app-titre-espace: .12em; --app-titre-casse: uppercase; --app-sur-espace: .3em; --app-btn-espace: .06em; --app-gras: 400;
  --app-r: 3.5; --app-r-bouton: 999px;
  --app-c1: #C0704F; --app-c2: #C9A043; --app-c3: #8A6FA8; --app-c4: #5E83A6; --app-c5: #7A9A5E; --app-c6: #B0607F;
}