@tailwind base;
@tailwind components;
@tailwind utilities;

@import './styles/typography/index.css';
@import './styles/buttons.css';
@import './styles/cards.css';
@import './styles/animations.css';
@import './styles/optimized-animations.css';
@import './styles/layout.css';
@import './styles/accessibility/index.css';
@import './styles/images.css';
@import './styles/cookie/index.css';
@import './styles/mobile/index.css';

@layer base {
  :root {
    --background: 34 33% 97%;
    --foreground: 222 47% 20%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 20%;

    --primary: 216 61% 21%;
    --primary-foreground: 0 0% 100%;

    --secondary: 39 65% 65%;
    --secondary-foreground: 222 47% 20%;

    --muted: 216 20% 90%;
    --muted-foreground: 216 10% 45%;

    --accent: 39 65% 65%;
    --accent-foreground: 216 61% 21%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 216 15% 90%;
    --input: 216 15% 90%;
    --ring: 216 61% 21%;

    --radius: 1rem;
    
    /* Nouvelles couleurs premium */
    --c-warm-white: #FBF8F4;
    --c-light-grey: #F5F5F8;
    --c-pure-white: #FFFFFF;
    --c-hover-grey: #EBEBEF;
    --c-night-blue: #1E2B38;
    --c-warm-grey: #464754;
    --c-medium-grey: #656779;
    --c-light-text: #7A7A85;
    --c-beige-sable: #B49C7A;
    --c-beige-hover: #A38C6A;
    --c-premium-gold: #E0BB6D;
    --c-switch-active: #D6B37C;
    --c-switch-inactive: #E0E0E6;
    --c-soft-peach: #FDE1D3;
    --c-info-beige: #EFE6DA;
    --c-error-soft: #FFE5DA;
    --c-warning-soft: #FEF7CD;
    --c-info-soft: #D3E4FD;
    
    /* Variables sémantiques mises à jour */
    --c-heading: #1E2B38;
    --c-paragraph: #464754;
    --c-caption: #656779;
    --c-indigo500: #B49C7A;
    --c-blue500: #579dff;
    
    /* Ancienne palette (compatibilité) */
    --c-grey0: #ffffff;
    --c-grey100: #f5f5f8;
    --c-grey200: #ebebef;
    --c-grey300: #e0e0e6;
    --c-grey400: #cacad1;
    --c-grey500: #a5a5b4;
    --c-grey600: #8e8e9d;
    --c-grey700: #6f6f7e;
    --c-grey800: #46464f;
    --c-grey900: #282830;
  }

  html {
    scroll-behavior: smooth;
    font-size: 16px;
    @apply antialiased;
  }
  
  body {
    @apply bg-[var(--c-warm-white)] font-[Inter] text-[var(--c-night-blue)];
    overflow-x: hidden;
  }

  /* FORCED COOKIE BANNER STYLES - CRITICAL */
  .cookie-consent-container,
  body .cookie-consent-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20000 !important;
    position: fixed !important;
    bottom: 48px !important;
    left: 8px !important;
    transform: none !important;
    max-width: 320px !important;
    width: calc(100% - 16px) !important;
    border-radius: 12px !important;
    pointer-events: auto !important;
    background-color: white !important;
    box-shadow: 0 8px 20px rgba(30, 43, 56, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    padding: 14px 16px 12px !important;
  }

  body.force-cookie-banner .cookie-consent-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20000 !important;
  }

  .cookie-consent-container *,
  body .cookie-consent-container * {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .cookie-consent-actions {
    display: flex !important;
    visibility: visible !important;
  }

  .cookie-consent-actions button {
    display: inline-flex !important;
    visibility: visible !important;
  }

  #cookie-consent-description,
  body #cookie-consent-description {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .hero-text {
    @apply text-white;
  }

  .hero-button * {
    color: white !important;
  }

  /* Améliorations pour le texte "4,8/5 basé sur +500 avis" */
  .hero-rating {
    color: white !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.4) !important;
    letter-spacing: 0.01em !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Renforcement des contrastes en mode contraste élevé */
  @media (prefers-contrast: more) {
    .hero-rating {
      color: white !important;
      font-weight: 800 !important;
      background-color: rgba(0,0,0,0.7) !important;
      padding: 2px 6px !important;
      border-radius: 4px !important;
      box-shadow: 0 0 0 1px white !important;
    }
  }

  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .review-card {
    animation: reveal 0.5s forwards;
  }
  
  .info-box-container {
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
  }
  
  /* Unified toggle styles premium */
  .molie-toggle-container {
    position: relative;
    width: 65px;
    height: 24px;
    border-radius: 130px;
    background: var(--c-hover-grey);
    padding: 1px 2px;
    box-shadow: 0 0 0 2px var(--c-pure-white);
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .molie-toggle-input {
    display: none;
  }

  .molie-toggle-label {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 20px;
    background: var(--c-switch-inactive);
    border-radius: 80px;
    cursor: pointer;
    box-shadow: inset 0 0 16px rgba(0,0,0,.1);
    transition: background .5s;
  }

  .molie-toggle-input:checked + .molie-toggle-label {
    background: var(--c-switch-active);
  }

  .molie-toggle-handle {
    position: absolute;
    top: -8px;
    left: -10px;
    width: 35px;
    height: 35px;
    border: 1px solid var(--c-hover-grey);
    background: repeating-radial-gradient(circle at 50% 50%, rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, transparent 3%), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver 70%, white 80%, silver 95%, white 100%);
    border-radius: 50%;
    box-shadow: 3px 5px 10px 0 rgba(30, 43, 56, 0.2);
    transition: left .4s;
  }

  .molie-toggle-input:checked + .molie-toggle-label > .molie-toggle-handle {
    left: calc(100% - 35px + 10px);
  }

/* Modal: éviter les effets de style globaux pendant l'ouverture */
html.modal-open, 
body.modal-open {
  overflow: hidden !important;
}

/* iOS: pas de side-effects */
@supports (-webkit-touch-callout: none) {
  html.modal-open {
    position: static !important;
  }
  
  body.modal-open {
    width: 100% !important;
  }
}
}