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)
   ============================================================================ */

/* --- Police des titres : Cormorant Garamond (v12.2 — 10/10/2026)
   Un @import ne marche pas ici : Octorate place sa règle « body.SiteBackground »
   avant ce CSS, et un @import qui n'est pas en tête de feuille est ignoré
   (les titres s'affichaient en Times). On déclare donc la police directement. --- */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 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;
}

/* ----------------------------------------------------------------------------
   9. EN-TÊTE : dates d'arrivée et de départ toujours côte à côte
      (v12.1 — 10/10/2026)
      Les deux cases date (100 px chacune) flottent dans un bloc que la mise en
      page Octorate peut réduire à 198,7 px : à certaines largeurs d'écran
      (ex. 1440 px) ou quand les polices tardent à charger, la date de départ
      passe sous la date d'arrivée. On interdit à ce bloc de rétrécir.
   ---------------------------------------------------------------------------- */
header span:has(> [id$="checkinSelection"]) {
    flex-shrink: 0 !important;
    min-width: max-content !important;
}

/* ----------------------------------------------------------------------------
   10. PETITS INTITULÉS DES CARTES (h6 : Date d'arrivée, Occupants, Petit
       déjeuner…) — v12.2 : en Cormorant à 14 px ils sont trop fins à lire ;
       on leur rend la police des libellés Octorate. Les titres restent en
       Cormorant Garamond.
   ---------------------------------------------------------------------------- */
h6 {
    font-family: 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', Arial, sans-serif !important;
}

/* === FIN === */