:root {
 --blue:#010156;
 --indigo:#6812f3;
 --purple:#6f42c2;
 --pink:#e93f8e;
 --red:#a51f18;
 --orange:#fd7e17;
 --yellow:#ad6200;
 --green:#448344;
 --teal:#5abfdd;
 --cyan:#30638d;
 --white:#fff;
 --gray-100:#f9fafb;
 --gray-200:#eaedf0;
 --gray-300:#dfe3e7;
 --gray-400:#ced4da;
 --gray-500:#adb5bd;
 --gray-600:#6d757e;
 --gray-700:#484f56;
 --gray-800:#353b41;
 --gray-900:#22262a;
 --primary:#010156;
 --secondary:#6d757e;
 --success:#448344;
 --info:#30638d;
 --warning:#ad6200;
 --danger:#a51f18;
 --light:#f9fafb;
 --dark:#353b41;
 --primary-rgb:1,
 1,
 86;
 --secondary-rgb:109,
 117,
 126;
 --success-rgb:68,
 131,
 68;
 --info-rgb:48,
 99,
 141;
 --warning-rgb:173,
 98,
 0;
 --danger-rgb:165,
 31,
 24;
 --light-rgb:249,
 250,
 251;
 --dark-rgb:53,
 59,
 65;
 --white-rgb:255,
 255,
 255;
 --black-rgb:0,
 0,
 0;
 --body-color-rgb:34,
 38,
 42;
 --body-bg-rgb:255,
 255,
 255;
 --font-sans-serif:-apple-system,
 BlinkMacSystemFont,
 "Segoe UI",
 Roboto,
 "Helvetica Neue",
 Arial,
 "Noto Sans",
 sans-serif,
 "Apple Color Emoji",
 "Segoe UI Emoji",
 "Segoe UI Symbol",
 "Noto Color Emoji";
 --font-monospace:SFMono-Regular,
 Menlo,
 Monaco,
 Consolas,
 "Liberation Mono",
 "Courier New",
 monospace;
 --gradient:linear-gradient(180deg,
 hsla(0,
 0%,
 100%,
 .15),
 hsla(0,
 0%,
 100%,
 0));
 --body-font-family:var(--cassiopeia-font-family-body,
 -apple-system,
 BlinkMacSystemFont,
 "Segoe UI",
 Roboto,
 "Helvetica Neue",
 Arial,
 "Noto Sans",
 sans-serif,
 "Apple Color Emoji",
 "Segoe UI Emoji",
 "Segoe UI Symbol",
 "Noto Color Emoji");
 --body-font-size:1rem;
 --body-font-weight:400;
 --body-line-height:1.5;
 --body-color:#22262a;
 --body-bg:/*#E8ECFA*/#B8D2EA
}
/* ==========================================================================
ANIMATION ET EFFETS DU BLOC ACCUEIL (SMART SLIDER 3)
========================================================================== */
/* --- 1. COMPORTEMENT DE LA BOÎTE (COLONNE) & SURVOL --- */
.bouton-gite {
--couleur-texte: #010134;
--couleur-titre: #010134;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
cursor: pointer !important;

/* Lancement de la grosse animation (Nom corrigé !) */
animation: spGrosRotateIn 700ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
/* Dès que la colonne globale est survolée, on change les couleurs */
.bouton-gite:hover {
--couleur-texte: #ffffff !important;
--couleur-titre: #FFD700 !important;
transform: scale(1.02) !important; /* Petit effet de zoom au survol si désiré */
}
/* --- 2. DÉFINITION DE LA GROSSE ANIMATION D'ENTRÉE --- */
@keyframes spGrosRotateIn {
0% {
opacity: 0;
/* Part de très petit et incliné à -45 degrés (ou -180 si vous voulez un grand tour) */
transform: scale(0.1) rotate(-45deg);
}
70% {
/* Effet ressort : grandit un peu trop et dépasse l'angle */
transform: scale(1.08) rotate(5deg);
}
100% {
opacity: 1;
/* Se stabilise parfaitement droit et "relâche" le transform pour le hover */
transform: scale(1) rotate(0deg);
}
}
/* ==========================================================================
POSITIONNEMENT DE L'ICÔNE À CHEVAL SUR LE CADRE
========================================================================= */
.bouton-gite,
.bouton-gite a, 
.bouton-gite div.n2-ss-layer-heading {
position: relative !important;
overflow: visible !important;
}
.bouton-gite .icone-accueil {
position: absolute !important;
top: -20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10 !important;
content: url('https://www.gite-haute-savoie-les-hermones.com/images/Gite%20Accueil/home.png') !important;
transition: transform 0.3s ease, top 0.3s ease !important;
}
.bouton-gite:hover .icone-accueil {
content: url('https://www.gite-haute-savoie-les-hermones.com/images/Gite%20Accueil/home_hover.png') !important;
transform: translateX(-50%) !important;
}