/* Theme « L etal que l on garnit » (10/09/2026). Pastels, autocollants, un auvent raye sur chaque etal : chaque fournisseur tient le sien.
   Posee apres marche.css ; ne touche pas au HTML. Une seule police, Nunito, ronde et lisible. */
.mk[data-theme="etal"] {
  --mk-fond: #fbf6f4; --mk-carte: #ffffff; --mk-carte-2: #fff9d6;
  --mk-corps: #3b3b3b; --mk-encre: #2a2a2a; --mk-encre-2: #3b3b3b; --mk-muet: #6b5f63;
  --mk-trait: #ead9df; --mk-trait-2: #fbeff3; --mk-trait-fort: #d6bec7;
  --mk-accent: #3b3b3b; --mk-accent-2: #5a5a5a; --mk-accent-doux: #fff3b0; --mk-accent-texte: #ffffff;
  --mk-succes: #2f7a4f; --mk-succes-doux: #e2f3e8; --mk-succes-clair: #2f7a4f; --mk-succes-texte: #ffffff;
  --mk-danger: #c2413f; --mk-danger-doux: #fdecec; --mk-danger-trait: #f2b8b6;
  --mk-sombre: #f6d6e0; --mk-sombre-2: #cfe6f5; --mk-sombre-texte: #3b3b3b; --mk-sombre-muet: #5c4a52; --mk-sombre-trait: rgba(59,59,59,.18);
  --mk-ambre: #fff3b0; --mk-ambre-2: #ffe98a; --mk-ambre-fonce: #3b3b3b;
  --mk-primaire: #3b3b3b; --mk-primaire-2: #222222; --mk-primaire-texte: #ffffff;
  --mk-rose: #f6d6e0; --mk-bleu: #cfe6f5; --mk-jaune: #fff3b0; --mk-etoile: #d9a400;
  --mk-affiche: 'Nunito', system-ui, sans-serif; --mk-texte: 'Nunito', system-ui, sans-serif; --mk-chiffres: 'Nunito', sans-serif;
  --mk-gras: 700;
  --mk-rayon-petit: 10px; --mk-rayon: 14px; --mk-rayon-grand: 20px; --mk-pilule: 999px;
  --mk-ombre-carte: 0 16px 34px -18px rgba(59,59,59,.28);
  --mk-autocollant: 0 0 0 2px #fff, 0 6px 14px -8px rgba(59,59,59,.35);
}
body.mk[data-theme="etal"] { background: var(--mk-fond); font-size: 15.5px; }
.mk[data-theme="etal"] ::selection { background: var(--mk-jaune); color: #3b3b3b; }
.mk[data-theme="etal"] :focus-visible { outline: 3px solid #3b3b3b; outline-offset: 2px; }
.mk[data-theme="etal"] h1, .mk[data-theme="etal"] h2, .mk[data-theme="etal"] h3 { letter-spacing: -.015em; font-weight: 700; }
.mk[data-theme="etal"] a { text-decoration-color: rgba(59,59,59,.4); }

/* Boutons ronds a l encre ; les champs ont un bord doux */
.mk[data-theme="etal"] .mk-bouton, .mk[data-theme="etal"] a.mk-bouton { border-radius: var(--mk-pilule); font-weight: 700; font-family: var(--mk-affiche); }
.mk[data-theme="etal"] .mk-bouton:hover { box-shadow: 0 10px 22px -12px rgba(59,59,59,.5); }
.mk[data-theme="etal"] .mk-bouton--vert, .mk[data-theme="etal"] a.mk-bouton--vert { background: #3b3b3b; color: #fff; }
.mk[data-theme="etal"] .mk-bouton--vert:hover { background: #222; }
.mk[data-theme="etal"] .mk-bouton--ambre, .mk[data-theme="etal"] a.mk-bouton--ambre { box-shadow: none; }
.mk[data-theme="etal"] .mk-bouton--ambre:hover { box-shadow: 0 10px 22px -12px rgba(59,59,59,.5); }
.mk[data-theme="etal"] .mk-bouton--second, .mk[data-theme="etal"] a.mk-bouton--second { color: #3b3b3b; border: 2px solid #3b3b3b; }
.mk[data-theme="etal"] .mk-bouton--contour, .mk[data-theme="etal"] a.mk-bouton--contour { border-width: 2px; }
.mk[data-theme="etal"] .mk-bouton--contour-clair, .mk[data-theme="etal"] a.mk-bouton--contour-clair { color: #3b3b3b; border-color: #3b3b3b; }
.mk[data-theme="etal"] .mk-bouton--contour-clair:hover, .mk[data-theme="etal"] a.mk-bouton--contour-clair:hover { background: #3b3b3b; color: #fff; }
.mk[data-theme="etal"] .mk-champ { border: 2px solid var(--mk-trait); border-radius: 14px; }
.mk[data-theme="etal"] .mk-champ:focus { border-color: #3b3b3b; box-shadow: 0 0 0 3px var(--mk-jaune); }
.mk[data-theme="etal"] .mk-carte-recherche .mk-champ { background: #fff; }

.mk[data-theme="etal"] .mk-nav a.mk-bouton--ambre, .mk[data-theme="etal"] .mk-nav .mk-bouton--ambre { color: #ffffff; }
.mk[data-theme="etal"] .mk-nav a.mk-bouton--ambre:hover { color: #ffffff; text-decoration: none; }
/* En-tete : l allee s ouvre sur un fronton rose ; la marque est un autocollant rond */
.mk[data-theme="etal"] .mk-entete { background: var(--mk-rose); backdrop-filter: none; border-bottom: 2px solid #fff; color: #3b3b3b; }
.mk[data-theme="etal"] .mk-marque-logo { background: #fff; color: #3b3b3b; border-radius: 50%; box-shadow: var(--mk-autocollant); }
.mk[data-theme="etal"] .mk-marque em { color: #3b3b3b; text-decoration: underline; text-decoration-color: var(--mk-jaune); text-decoration-thickness: 4px; text-underline-offset: 2px; }
.mk[data-theme="etal"] .mk-nav a { color: #3b3b3b; font-weight: 700; }
.mk[data-theme="etal"] .mk-nav a:hover { background: #fff; color: #3b3b3b; }
.mk[data-theme="etal"] .mk-nav a.mk-bouton--contour, .mk[data-theme="etal"] .mk-nav .mk-bouton--contour { color: #3b3b3b; border-color: #3b3b3b; }
.mk[data-theme="etal"] .mk-nav a.mk-bouton--contour:hover, .mk[data-theme="etal"] .mk-nav .mk-bouton--contour:hover { background: #3b3b3b; color: #fff; border-color: #3b3b3b; }

/* Le heros : le panneau a l entree de l allee, bleu pastel sous un auvent raye ; la recherche porte son autocollant */
.mk[data-theme="etal"] .mk-hero { background: var(--mk-bleu); color: #3b3b3b; padding-top: 58px; }
.mk[data-theme="etal"] .mk-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: repeating-linear-gradient(90deg, var(--mk-rose) 0 34px, #fff 34px 68px); border-bottom: 2px solid #fff; }
.mk[data-theme="etal"] .mk-hero h1 { color: #2a2a2a; }
.mk[data-theme="etal"] .mk-hero h1 .mk-souligne { color: #2a2a2a; }
.mk[data-theme="etal"] .mk-hero h1 .mk-souligne svg { color: var(--mk-jaune); }
.mk[data-theme="etal"] .mk-hero p.mk-accroche { color: #3b3b3b; }
.mk[data-theme="etal"] .mk-hero .mk-sous, .mk[data-theme="etal"] .mk-preuve { color: #4a4046; }
.mk[data-theme="etal"] .mk-preuve b { color: #2a2a2a; }
.mk[data-theme="etal"] .mk-preuve .mk-ic { background: #fff; color: #3b3b3b; border-radius: 50%; box-shadow: var(--mk-autocollant); }
.mk[data-theme="etal"] .mk-carte-recherche { position: relative; border-radius: 22px; box-shadow: var(--mk-ombre-carte); border: 2px solid #fff; }
.mk[data-theme="etal"] .mk-carte-recherche h2 { display: inline-flex; background: var(--mk-jaune); padding: 6px 14px; border-radius: 12px; transform: rotate(-2deg); margin: -34px 0 14px -4px; box-shadow: var(--mk-autocollant); font-size: 15px; }
.mk[data-theme="etal"] .mk-carte-recherche h2 .mk-point { display: none; }
.mk[data-theme="etal"] .mk-carte-recherche .mk-etiquette { color: #3b3b3b; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; }
.mk[data-theme="etal"] .mk-recherche-note { color: #6b5f63; }

/* Le ruban : un autocollant jaune en travers */
.mk[data-theme="etal"] .mk-ruban { background: var(--mk-jaune); color: #3b3b3b; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.mk[data-theme="etal"] .mk-ruban b, .mk[data-theme="etal"] .mk-ruban a { color: #2a2a2a; }

/* L allee d etals : chaque famille est un etal, auvent raye a sa teinte, comptoir en bas, symbole sur un autocollant */
.mk[data-theme="etal"] .mk-section-tete .mk-plus { color: #3b3b3b; text-decoration: underline; text-decoration-color: var(--mk-jaune); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.mk[data-theme="etal"] .mk-famille { position: relative; padding: 34px 16px 28px; border: 2px solid #fff; border-bottom: 0; border-radius: 20px 20px 6px 6px; box-shadow: 0 10px 24px -16px rgba(59,59,59,.25);
  background: linear-gradient(to top, var(--mk-auvent, var(--mk-bleu)) 0 9px, color-mix(in srgb, var(--mk-auvent, var(--mk-bleu)) 72%, #3b3b3b) 9px 12px, #fff 12px); }
.mk[data-theme="etal"] .mk-famille:nth-child(3n+1) { --mk-auvent: var(--mk-rose); }
.mk[data-theme="etal"] .mk-famille:nth-child(3n+2) { --mk-auvent: var(--mk-bleu); }
.mk[data-theme="etal"] .mk-famille:nth-child(3n) { --mk-auvent: var(--mk-jaune); }
.mk[data-theme="etal"] .mk-famille::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-radius: 18px 18px 0 0; background: repeating-linear-gradient(90deg, var(--mk-auvent, var(--mk-bleu)) 0 18px, #fff 18px 36px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 15px no-repeat, radial-gradient(circle at 9px 0, #000 7px, transparent 7.5px) 0 15px / 18px 8px repeat-x; mask: linear-gradient(#000 0 0) 0 0 / 100% 15px no-repeat, radial-gradient(circle at 9px 0, #000 7px, transparent 7.5px) 0 15px / 18px 8px repeat-x; }
/* La face laterale de l etal : une perspective legere a droite, dans la teinte de l auvent, jusqu au comptoir */
.mk[data-theme="etal"] .mk-famille::after { content: ''; position: absolute; top: 14px; right: -11px; bottom: 0; width: 11px; background: color-mix(in srgb, var(--mk-auvent, var(--mk-bleu)) 80%, #3b3b3b); transform: skewY(-45deg); transform-origin: top left; border-radius: 0 3px 3px 0; }
.mk[data-theme="etal"] .mk-famille:hover::after { background: #3b3b3b; }
.mk[data-theme="etal"] .mk-famille:hover { transform: translateY(-3px); border-color: #fff; box-shadow: 0 18px 30px -16px rgba(59,59,59,.35); }
.mk[data-theme="etal"] .mk-familles { padding-right: 11px; gap: 16px 24px; }
.mk[data-theme="etal"] .mk-famille-icone { background: #fff; border-radius: 50%; box-shadow: var(--mk-autocollant); color: #3b3b3b; width: 46px; height: 46px; }
.mk[data-theme="etal"] .mk-famille .mk-compte { color: #2a2a2a; }
.mk[data-theme="etal"] .mk-famille .mk-compte--vide { color: #6b5f63; }

/* Les trois temps : trois etals pastel, rose, bleu, jaune, le chiffre sur un autocollant blanc */
.mk[data-theme="etal"] .mk-temps-carte { border: 2px solid #fff; box-shadow: 0 10px 24px -16px rgba(59,59,59,.25); }
.mk[data-theme="etal"] .mk-temps-carte[data-etape="1"] { background: var(--mk-rose); }
.mk[data-theme="etal"] .mk-temps-carte[data-etape="2"] { background: var(--mk-bleu); }
.mk[data-theme="etal"] .mk-temps-carte[data-etape="3"] { background: var(--mk-jaune); }
.mk[data-theme="etal"] .mk-temps-num { background: #fff; color: #3b3b3b; box-shadow: var(--mk-autocollant); }
.mk[data-theme="etal"] .mk-temps-carte p { color: #3b3b3b; }

/* La confiance : l etal officiel, sur fond bleu pastel, l exemple sous son auvent */
.mk[data-theme="etal"] .mk-confiance { background: var(--mk-bleu); color: #3b3b3b; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.mk[data-theme="etal"] .mk-confiance::after { display: none; }
.mk[data-theme="etal"] .mk-confiance h2 { color: #2a2a2a; }
.mk[data-theme="etal"] .mk-confiance h2 .mk-ok { color: #2a2a2a; text-decoration: underline; text-decoration-color: var(--mk-jaune); text-decoration-thickness: 5px; text-underline-offset: 3px; }
.mk[data-theme="etal"] .mk-confiance p, .mk[data-theme="etal"] .mk-controle p { color: #3b3b3b; }
.mk[data-theme="etal"] .mk-controle b { color: #2a2a2a; }
.mk[data-theme="etal"] .mk-controle .mk-c { background: #fff; color: #3b3b3b; border-radius: 50%; box-shadow: var(--mk-autocollant); }
.mk[data-theme="etal"] .mk-exemple { position: relative; overflow: hidden; padding-top: 40px; border: 2px solid #fff; box-shadow: var(--mk-ombre-carte); }
.mk[data-theme="etal"] .mk-exemple::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: repeating-linear-gradient(90deg, var(--mk-rose) 0 26px, #fff 26px 52px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 17px no-repeat, radial-gradient(circle at 13px 0, #000 9px, transparent 9.5px) 0 17px / 26px 10px repeat-x; mask: linear-gradient(#000 0 0) 0 0 / 100% 17px no-repeat, radial-gradient(circle at 13px 0, #000 9px, transparent 9.5px) 0 17px / 26px 10px repeat-x; }
.mk[data-theme="etal"] .mk-exemple-chiffres div { background: var(--mk-jaune); border: 0; border-radius: 12px; }

/* Autocollants : badge, puces, avatar, chiffres */
.mk[data-theme="etal"] .mk-badge { background: #fff; color: #3b3b3b; border: 2px solid #3b3b3b; box-shadow: var(--mk-autocollant); transform: rotate(-2deg); }
.mk[data-theme="etal"] .mk-puce { background: var(--mk-jaune); color: #3b3b3b; }
.mk[data-theme="etal"] .mk-avatar { background: var(--mk-rose); color: #3b3b3b; border: 2px solid #fff; border-radius: 50%; }
.mk[data-theme="etal"] .mk-chiffre { border: 2px solid #fff; box-shadow: 0 10px 24px -16px rgba(59,59,59,.25); }
.mk[data-theme="etal"] .mk-reactivite { color: #2f7a4f; }

/* Les tarifs et l appel */
.mk[data-theme="etal"] .mk-tarif { border: 2px solid #fff; box-shadow: 0 10px 24px -16px rgba(59,59,59,.25); }
.mk[data-theme="etal"] .mk-tarif--fort { border-color: #3b3b3b; box-shadow: var(--mk-ombre-carte); }
.mk[data-theme="etal"] .mk-tarif .mk-etiquette-tarif { background: var(--mk-jaune); color: #3b3b3b; box-shadow: var(--mk-autocollant); transform: translateX(-50%) rotate(-2deg); }
.mk[data-theme="etal"] .mk-tarif li .mk-l { color: #3b3b3b; }
.mk[data-theme="etal"] .mk-appel { background: var(--mk-jaune); color: #3b3b3b; border: 2px solid #fff; }
.mk[data-theme="etal"] .mk-appel::after { background: rgba(255,255,255,.45); }
.mk[data-theme="etal"] .mk-appel h2, .mk[data-theme="etal"] .mk-appel p, .mk[data-theme="etal"] .mk-appel .mk-fin { color: #3b3b3b; }
.mk[data-theme="etal"] .mk-appel .mk-bouton { background: #3b3b3b; color: #fff; box-shadow: none; }
.mk[data-theme="etal"] .mk-appel .mk-bouton:hover { background: #222; }

/* Le pied : le fronton rose se referme */
.mk[data-theme="etal"] .mk-pied { background: var(--mk-rose); color: #4a4046; border-top: 2px solid #fff; }
.mk[data-theme="etal"] .mk-pied h5, .mk[data-theme="etal"] .mk-pied a, .mk[data-theme="etal"] .mk-pied .mk-marque { color: #3b3b3b; }
.mk[data-theme="etal"] .mk-pied a:hover { color: #2a2a2a; text-decoration: underline; }
.mk[data-theme="etal"] .mk-pied-bas { border-top: 2px solid #fff; }
.mk[data-theme="etal"] .mk-pied .mk-apparence a.mk-apparence-choix { background: #fff; border-color: #fff; color: #3b3b3b; }
.mk[data-theme="etal"] .mk-pied .mk-apparence a.mk-apparence-choix[aria-current="true"] { border-color: #3b3b3b; }
.mk[data-theme="etal"] .mk-apparence-nuancier i { box-shadow: inset 0 0 0 1px rgba(59,59,59,.25); }

/* Les autres pages */
.mk[data-theme="etal"] .mk-selection { background: rgba(255,255,255,.96); border-top: 2px solid var(--mk-rose); }
.mk[data-theme="etal"] .mk-carte-choix:has(.mk-coche:checked) .mk-fournisseur { border-color: #3b3b3b; box-shadow: 0 0 0 3px var(--mk-jaune); }
.mk[data-theme="etal"] .mk-coche, .mk[data-theme="etal"] .mk-case input, .mk[data-theme="etal"] .mk-choix input { accent-color: #3b3b3b; }
.mk[data-theme="etal"] .mk-choix:has(input:checked) { border-color: #3b3b3b; background: var(--mk-jaune); }
.mk[data-theme="etal"] .mk-etapes span.mk-faite { background: #3b3b3b; }
.mk[data-theme="etal"] .mk-verrou { background: var(--mk-jaune); }
.mk[data-theme="etal"] .mk-fournisseur { border: 2px solid #fff; box-shadow: 0 10px 24px -16px rgba(59,59,59,.2); }
.mk[data-theme="etal"] .mk-fournisseur:hover { border-color: #3b3b3b; }
.mk[data-theme="etal"] .mk-page-erreur-code { color: #3b3b3b; }