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

/* ============================================================
   POLITIQUE CSS — dev == prod, AUCUN @import ici.
   Les @import placés après les directives @tailwind étaient
   silencieusement SUPPRIMÉS du build de production (mais chargés
   en dev) : cette divergence dev/prod a causé un incident.
   Le CSS livré en production se limite STRICTEMENT à :
     1. ce fichier (index.css) ;
     2. les imports JS de src/main.tsx :
        - styles/accessibility/index.css
        - styles/optimized-animations.css
        - styles/images.css
     3. styles/cookie/index.css (importé par CookieConsent.tsx) ;
     4. les utilitaires générés par Tailwind (tailwind.config.ts).
   N'ajoutez JAMAIS de @import dans ce fichier. Pour livrer du CSS,
   importez le fichier depuis un module TS/TSX ou utilisez Tailwind.
   ============================================================ */

@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-beige-deep: #8A6A3A;
    --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-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 {
    /* font-inter (token) = pile Inter complète avec fallbacks système */
    @apply bg-[var(--c-warm-white)] font-inter text-[var(--c-night-blue)];
    overflow-x: hidden;
  }

  /* Bloc "FORCED COOKIE BANNER STYLES" supprimé : il vivait dans le layer
     `base` et ses !important layerisés écrasaient la géométrie du bandeau
     redessiné (src/styles/cookie/). Le composant gère sa propre visibilité. */

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

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

  /* 🛡️ HERO IMMUNISÉ — toutes tailles d'écran.
     Neutralise tout `opacity:0`, `transform`, animation ou transition qu'une
     classe Tailwind, un framer-motion ou un IntersectionObserver pourrait
     poser sur le titre/sous-titre/CTA du Hero. Le Hero ne doit JAMAIS être
     animé à l'apparition (bug historique récurrent). */
  #hero-heading,
  [data-hero],
  [aria-labelledby="hero-heading"] .hero-text,
  [aria-labelledby="hero-heading"] .hero-button,
  [data-no-reveal-zone],
  [data-no-reveal-zone] * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    /* Safari iOS : content-visibility:auto ne rend le texte qu'au premier
       scroll (titre/sous-titre invisibles au chargement). 4e niveau
       d'immunité : on l'interdit définitivement sur le hero. */
    content-visibility: visible !important;
    contain: none !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;
  }
}

/* ============================================
   PROTECTION BLOG CONTENT - Anti-disparition
   ============================================ */

/* Le wrapper ne peut jamais être invisible */
#blog-content {
  opacity: 1 !important;
  visibility: visible !important;
  content-visibility: visible !important;
}

/* Neutralise les classes d'animation connues dans le blog */
#blog-content .reveal-on-scroll,
#blog-content .animate-fade-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Exception : permettre les transitions sur les liens et boutons */
#blog-content a,
#blog-content button {
  opacity: unset !important;
}