/* Tropik — couleurs franches, bandes « tap-tap », festons d'auvent, cartes postales */
.theme-tropik { --vert: #0f7a4f; --soleil: #ffb703; --papier: var(--surface); --sombre: color-mix(in srgb, var(--primaire) 32%, #140a08); }
.theme-tropik:not(.fond-sombre) { --papier: #fffaf0; --teinte: color-mix(in srgb, var(--soleil) 13%, #fff); }
.theme-tropik .f-teinte { background: var(--teinte); }

/* Bande multicolore au-dessus de l'en-tête */
.theme-tropik .bande-taptap { height: 10px; background: linear-gradient(90deg, var(--primaire) 0 25%, var(--soleil) 25% 50%, var(--vert) 50% 75%, var(--accent) 75% 100%); }

/* En-tête */
.theme-tropik .entete { border-bottom: 0; box-shadow: 0 1px 0 var(--ligne); }
.theme-tropik .entete-int { min-height: 84px; }
.theme-tropik .marque { font-size: 1.55rem; }
.theme-tropik .nav-principale > .item > a { font-weight: 650; border-radius: 999px; padding: 9px 15px; }
.theme-tropik .nav-principale > .item > a:hover, .theme-tropik .nav-principale > .item > a[aria-current] { background: var(--primaire); color: var(--sur-primaire); }
.theme-tropik .bouton-entete { margin-left: 8px; }

/* Boutons dodus, avec une ombre pleine */
.theme-tropik .bouton { font-weight: 750; border-radius: 999px; box-shadow: 0 4px 0 color-mix(in srgb, currentColor 0%, rgba(0,0,0,.28)); }
.theme-tropik .bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.theme-tropik .bouton-contour { box-shadow: none; border-width: 2.5px; }

/* Bannière : feston d'auvent en bas */
.theme-tropik .banniere::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 20px; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 14px 0, transparent 13px, var(--fond) 13.5px) 0 0 / 28px 20px repeat-x; }
.theme-tropik .banniere.s-couleur { background: var(--primaire) radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--accent) 55%, transparent) 0 120px, transparent 121px) no-repeat; }
.theme-tropik .banniere.s-couleur::after { display: none; }
.theme-tropik .banniere h1 { font-size: clamp(2.7rem, 7vw, 5.6rem); line-height: .95; max-width: 13ch; }
.theme-tropik .banniere.s-image .fond-image::after { background: linear-gradient(100deg, color-mix(in srgb, var(--primaire) 78%, #000) 0%, color-mix(in srgb, var(--primaire) 40%, transparent) 60%, transparent 100%); }
.theme-tropik .banniere.s-image.a-centre .fond-image::after { background: color-mix(in srgb, var(--primaire) 55%, rgba(0,0,0,.35)); }
.theme-tropik .banniere.s-clair { background: var(--teinte); }
.theme-tropik .banniere.s-partage { background: var(--papier); }
/* Photo en carte postale : cadre blanc, ombre pleine de la couleur d'accent, léger angle */
.theme-tropik .banniere.s-partage .image-partage, .theme-tropik .visuel-it { border: 8px solid #fff; border-radius: 22px; box-shadow: 16px 16px 0 var(--accent); transform: rotate(-1.6deg); }
.theme-tropik .image-texte.img-gauche .visuel-it { transform: rotate(1.6deg); box-shadow: -16px 16px 0 var(--vert); }

/* Titres de section : petite barre aux quatre couleurs */
.theme-tropik .tete-section h2::after, .theme-tropik .image-texte h2::after, .theme-tropik .appel h2::after {
  content: ""; display: block; width: 84px; height: 7px; margin-top: 14px; border-radius: 4px;
  background: linear-gradient(90deg, var(--primaire) 0 25%, var(--soleil) 25% 50%, var(--vert) 50% 75%, var(--accent) 75%); }
.theme-tropik .tete-section.centre h2::after { margin-inline: auto; }

/* Services : bandeau de couleur différent pour chaque carte */
.theme-tropik .service { border: 0; border-radius: 22px; background: var(--papier); border-top: 8px solid var(--primaire); }
.theme-tropik .service:nth-child(4n+2) { border-top-color: var(--soleil); }
.theme-tropik .service:nth-child(4n+3) { border-top-color: var(--vert); }
.theme-tropik .service:nth-child(4n+4) { border-top-color: var(--accent); }
.theme-tropik .service .numero { background: var(--accent); color: var(--sur-accent); }

/* Menu (liste de prix) : prix en étiquette, deux colonnes sur grand écran */
.theme-tropik .tarifs { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 14px 24px; }
.theme-tropik .tarif { background: var(--fond); border: 2px solid color-mix(in srgb, var(--encre) 10%, transparent); border-radius: 18px; padding: 18px 20px; align-items: start; }
.theme-tropik .f-teinte .tarif { border-color: transparent; }
.theme-tropik .tarif h3 { font-size: 1.15rem; }
.theme-tropik .tarif h3::after { display: none; }
.theme-tropik .tarif p { text-align: left; }
.theme-tropik .tarif .p { background: var(--accent); color: var(--sur-accent); border-radius: 999px; padding: 4px 13px; font-size: 1rem; }

/* Témoignages en bulles */
.theme-tropik .temoignage { border: 0; border-radius: 24px; background: var(--fond); position: relative; margin-bottom: 14px; }
.theme-tropik .temoignage::after { content: ""; position: absolute; left: 34px; bottom: -14px; border: 14px solid transparent; border-top-color: var(--fond); border-bottom: 0; }
.theme-tropik .f-aucun .temoignage { background: var(--teinte); }
.theme-tropik .f-aucun .temoignage::after { border-top-color: var(--teinte); }

/* Produits et tuiles */
.theme-tropik .carte-produit .vis, .theme-tropik .tuile, .theme-tropik .galerie a { border-radius: 22px; }
.theme-tropik .carte-produit .prix { color: var(--primaire); font-weight: 750; font-size: 1.05rem; }
.theme-tropik .pastille-carte { background: var(--accent); color: var(--sur-accent); }

/* Chiffres */
.theme-tropik .chiffre strong { color: var(--primaire); }
.theme-tropik .chiffre:nth-child(4n+2) strong { color: var(--vert); }
.theme-tropik .chiffre:nth-child(4n+3) strong { color: var(--accent); }

/* Appel à l'action rayé */
.theme-tropik .section.f-primaire { background: var(--primaire) repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 18px, transparent 18px 36px); }

/* Pied de page : feston en haut */
.theme-tropik .pied { position: relative; background: var(--sombre); }
.theme-tropik .pied::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 20px;
  background: radial-gradient(circle at 14px 20px, transparent 13px, var(--fond) 13.5px) 0 0 / 28px 20px repeat-x; }
.theme-tropik .pied h2 { color: var(--accent); }
.theme-tropik .action-mobile { background: var(--accent); color: var(--sur-accent) !important; border-radius: 999px; text-align: center; font-weight: 750; border: 0 !important; margin: 8px 0; }

@media (max-width: 620px) {
  .theme-tropik .bouton-entete { display: none; }
  .theme-tropik .banniere.s-partage .image-partage, .theme-tropik .visuel-it { box-shadow: 10px 10px 0 var(--accent); border-width: 6px; }
}