body.SiteBackground{background-image:url('https://resx.octorate.com/content/786103/1776637749656.jpg')}/* ============================================================================
   AUROCHER × OCTORATE — Booking Engine
   Thème "Turquoise Atlas" — Version 12.0 (chirurgical, classes Octorate exactes)
   À coller dans : Octorate > Booking Engine > CSS
   (remplace entièrement le CSS précédent)
   ============================================================================ */

/* --- Import font --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400..700;1,400..700&family=Inter:wght@300..700&display=swap');

/* --- Variables --- */
:root, html:root, body {
    --color: #00A79E !important;
    --invert: #FFFFFF !important;
}

/* --- Fond crème officiel --- */
body {
    background-color: #F5F1E8 !important;
    background-image: none !important;
    color: #1E464B !important;
}

.SiteContent, .SiteMain {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* --- Labels --- */
.FontTopBar,
label, .label, [class*="Label"],
.ClusterText, .DesktopOn, .DesktopOff, .SmallTitle {
    color: #1E464B !important;
}

/* --- Contacts header --- */
.contacts a, .contacts a em,
header div.contacts a, header div.contacts a em,
.customHeaderLeft .contacts a, .customHeaderLeft .contacts a em {
    color: #1E464B !important;
}
.contacts a:hover, .contacts a:hover em,
.customHeaderLeft .contacts a:hover, .customHeaderLeft .contacts a:hover em {
    color: #00A79E !important;
}

/* --- Titres en Cormorant Garamond --- */
h1, h2, h3, h4, h5, h6,
.HotelHeader, .CardBigTopic, .CardSmallTopic {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
    color: #1E464B !important;
    font-weight: 500 !important;
}

/* --- Boutons principaux (ex: RECHERCHE) : QUE couleurs --- */
.button span.ui-button-text,
.customButton span.ui-button-text,
.GoldButton span.ui-button-text,
.GoldButton .ui-button-text,
.SiteButtons .GoldButton .ui-button-text,
button.button, button.customButton, .ui-button.GoldButton {
    background-color: #00A79E !important;
    color: #FFFFFF !important;
    border-color: #00A79E !important;
}
.button:hover span.ui-button-text,
.customButton:hover span.ui-button-text,
.GoldButton:hover span.ui-button-text,
.GoldButton.ui-button.ui-state-hover .ui-button-text {
    background-color: #007F78 !important;
}

/* --- SVG icons --- */
svg { fill: #00A79E !important; }
a:hover svg, .link:hover svg { fill: #007F78 !important; }

/* --- Boutons secondaires --- */
.LightButton .ui-button-text {
    border-color: #00A79E !important;
    color: #00A79E !important;
}
.LightButton:hover .ui-button-text {
    background-color: #00A79E !important;
    color: #FFFFFF !important;
}

/* --- Liens cartes --- */
.CardBigTopic a, .CardSmallTopic a, a.link { color: #00A79E !important; }
.link:hover, .CardBigTopic a:hover, .CardSmallTopic a:hover { color: #007F78 !important; }

/* --- Calendrier --- */
.ui-datepicker-calendar .ui-state-active,
.ui-datepicker-calendar td.selected a,
.CalendarDay.selected {
    background-color: #00A79E !important;
    color: #FFFFFF !important;
}

/* --- Inputs focus --- */
input:focus, select:focus, textarea:focus {
    border-color: #00A79E !important;
    outline: 2px solid rgba(0, 167, 158, 0.15) !important;
}

/* ============================================================================
   CORRECTIFS v12.0 — Classes Octorate exactes (extraites des CSS source)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. BOUTON "CHOISISSEZ LE TARIF" flottant (div.offert .button)
      ET BOUTONS "CONTINUER" (section.room div.options .row .action a.button)
      Couleurs Octorate : bg #129a12, hover #007b00, border #007b00
   ---------------------------------------------------------------------------- */
section.room div.offert .button,
.customButtonGreenOffert,
.customButtonGreen,
section.room div.options .row .action a.button {
    background-color: #00A79E !important;
    border-color: #00A79E !important;
    color: #FFFFFF !important;
}

section.room div.offert .button:hover,
.customButtonGreenOffert:hover,
.customButtonGreen:hover,
section.room div.options .row .action a.button:hover {
    background-color: #007F78 !important;
    border-color: #007F78 !important;
}

.customButtonGreenOffert span.ui-button-text,
.customButtonGreen span.ui-button-text {
    background-color: #00A79E !important;
    border: none !important;
    color: #FFFFFF !important;
}

.customButtonGreenOffert.ui-state-hover,
.customButtonGreenOffert.ui-state-hover .ui-button-text,
.customButtonGreen.ui-state-hover,
.customButtonGreen.ui-state-hover .ui-button-text {
    background-color: #007F78 !important;
    color: #FFFFFF !important;
}

/* Animation "Bounce" au hover — ancienne couleur de remplissage #175017 */
.BounceColor:before,
.BounceColor .ui-button-text:before {
    background: #007F78 !important;
}

/* ----------------------------------------------------------------------------
   2. PRIX ACTIF EN VERT (MAD 1170, 1350, 1530) → bleu profond
      Couleur Octorate : #227426 (vert foncé)
   ---------------------------------------------------------------------------- */
section.room div.offert .box .price,
section.room div.offert .box .price sup,
section.room div.options .row .action .price,
section.room div.options .row .action .price sup {
    color: #1E464B !important;
}

/* ----------------------------------------------------------------------------
   3. ANCIEN PRIX BARRÉ EN ROUGE (MAD 1300, 1500, 1700) → gris neutre
      Couleur Octorate : #a31518 / #a31618
   ---------------------------------------------------------------------------- */
section.room div.offert .box .old p,
section.room div.offert .box .old p sup,
section.room div.options .row .action .old p,
section.room div.options .row .action .old p sup,
section.room div.options .row .action strong {
    color: #6D6E71 !important;
}

/* Ligne de barré (trait oblique sur le prix) — était #6e0202 (rouge foncé) */
section.room div.offert .box .old .line,
section.room div.options .row .action .old .line {
    background-color: #6D6E71 !important;
}

/* ----------------------------------------------------------------------------
   4. BADGE "-10%" COIN ROUGE → turquoise
      Couleur Octorate : #a31618 (via border-color du triangle)
   ---------------------------------------------------------------------------- */
section.room div.offert .box .percentage .bg {
    border-color: transparent #00A79E transparent transparent !important;
}

.triangle {
    background: linear-gradient(to top right, transparent 0%, transparent 50%, #00A79E 50%, #00A79E 100%) !important;
}

/* ----------------------------------------------------------------------------
   5. PASTILLES VERT/ROUGE "policies" (icônes dans les détails)
      Convention Octorate : .green / .red / .blue
      On neutralise .green en turquoise et on garde .red/.blue tels quels (utiles)
   ---------------------------------------------------------------------------- */
section.room div.options .row .green svg,
section.room div.details .view .box .policies.green svg {
    fill: #00A79E !important;
}

/* ----------------------------------------------------------------------------
   6. CALENDRIER — jours disponibles (était vert pastel #c9ebc6)
      On garde le pastel mais teinté turquoise pour rester dans la charte
   ---------------------------------------------------------------------------- */
section.room div.calendar ul li.available {
    background-color: #C8E8E5 !important;
}
section.room div.calendar ul li.available:hover {
    background-color: #9DD3CF !important;
}
section.room div.calendar .legendtheme2 .colorstheme2 .colortheme2.green {
    background-color: #C8E8E5 !important;
}

/* ----------------------------------------------------------------------------
   7. FIX "i" ROUGE — icônes FontAwesome ou Primefaces info
   ---------------------------------------------------------------------------- */
i.fa-info,
i.fa-info-circle,
i.fas.fa-info-circle,
i.far.fa-info-circle,
i.pi-info,
i.pi-info-circle,
span.fa-info-circle,
span.pi-info-circle,
.ui-icon.ui-icon-info,
.ui-icon.ui-icon-help,
.ui-icon.ui-icon-circle-info {
    background-color: #00A79E !important;
    color: #FFFFFF !important;
    border-color: #00A79E !important;
}

/* ----------------------------------------------------------------------------
   8. Icônes info PNG Octorate → turquoise
      Filtre CSS calculé pour produire exactement #00A79E
   ---------------------------------------------------------------------------- */
img[src*="info.png"],
img[src*="Icons/info"],
img[src$="/info.png"] {
    opacity: 1 !important;
    filter: brightness(0) saturate(100%) invert(22%) sepia(56%) saturate(631%) hue-rotate(128deg) brightness(199%) contrast(125%) !important;
    transition: opacity 0.25s ease-in-out !important;
}

/* === FIN === */