@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;
    /* Terracotta d'accent négatif dérivé de --c-error-soft : texte/icône posé
       SUR error-soft (croix des comparatifs, statuts « non accepté »). Remplace
       les red-100/red-700 tailwind hors charte. */
    --c-error-strong: #B4543A;
    --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;
    
    /* ============================================================
       WAVE 1a — tokens de surface « Excellence 2026 » (ADDITIF).
       Miroir CSS des tokens Tailwind (tailwind.config.ts). Ne remplacent
       rien : nouvelles capacités appliquées par Wave 2. DESIGN_SYSTEM §1.
       ============================================================ */
    --c-navy-900: #1E2B38; /* = molie-blue — bandes profondes / footer */
    --c-navy-800: #243646; /* fin de dégradé nuit / surfaces sombres */
    --c-navy-700: #2E4257; /* cartes & bordures sur fond navy / hover */
    --c-navy-tint: #EEF2F6; /* carte froide claire sur fond clair */
    --c-navy-mist: rgba(30, 43, 56, 0.04); /* voile navy subtil */
    --c-on-navy: #F5F1EB;        /* texte principal sur navy (blanc chaud) */
    --c-on-navy-muted: #A8B2BD;  /* texte secondaire sur navy */
    --c-beige-100: #FBF8F4; /* canvas (= molie-beige) */
    --c-beige-200: #F4EEE6; /* section claire alternée */
    --c-beige-300: #E8DECF; /* bordures / hairlines chaudes */
    --c-warm-white-elev: #FEFCFA; /* surfaces surélevées (cartes) */
    --grad-night: linear-gradient(160deg, #1E2B38 0%, #243646 100%);
    --grad-wash: linear-gradient(180deg, #FBF8F4 0%, #FEFCFA 100%);

    /* 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;
    /* Finition : ascenseur teinté sable (propriété standard uniquement,
       pas d'amincissement — document entier). */
    scrollbar-color: rgba(180, 156, 122, 0.4) transparent;
  }

  /* Ancres : dégagement sous la nav flottante (les cibles #id ne se calent
     plus SOUS la barre au clic sur une ancre / lien de sommaire). */
  [id] {
    scroll-margin-top: 96px;
  }
  
  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);
  }
}

/* ============================================================
   LIEN — soulignement animé qui glisse depuis la gauche (200ms
   ease-out-expo). Tasteful, restreint : la couleur du trait suit
   currentColor. À poser sur des liens texte inline.
   Respecte prefers-reduced-motion (apparition sans glissement).
   ============================================================ */
.link-underline {
  /* Trait via background-image (et non ::after width:100%) : se répartit
     correctement ligne par ligne si le lien passe à la ligne. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.link-underline:hover,
.link-underline:focus-visible {
  background-size: 100% 1.5px;
}
@media (prefers-reduced-motion: reduce) {
  .link-underline {
    transition: none;
  }
}

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

/* ============================================================
   WAVE 1a — SURFACE INVERSE « sur fond navy » (ADDITIF).
   Contexte pour le texte/eyebrows/hairlines posés SUR une bande navy
   (surface `inverse`). Wave 2 pose `.on-navy` (ou data-surface="inverse")
   sur le wrapper d'une section navy ; les enfants adoptent alors des
   couleurs lisibles sur sombre SANS avoir à reclasser chaque élément.
   DESIGN_SYSTEM §1/§2.

   Restreint : on ne force PAS #fff pur (blanc chaud #F5F1EB), on n'écrase
   PAS les boutons/liens colorés (or), et on cible surtout titres, paragraphes
   et petites étiquettes. `color` non-!important pour rester surchargeable.
   ============================================================ */
.on-navy,
[data-surface="inverse"] {
  color: var(--c-on-navy);
}
/* Titres : blanc chaud (les classes text-molie-* de titre deviennent lisibles) */
.on-navy :where(h1, h2, h3, h4, h5, h6),
[data-surface="inverse"] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--c-on-navy);
}
/* Corps / paragraphes / légendes : gris clair désaturé */
.on-navy :where(p, li, dd, dt, figcaption),
[data-surface="inverse"] :where(p, li, dd, dt, figcaption) {
  color: var(--c-on-navy-muted);
}
/* Étiquette secondaire explicite (eyebrow muette) */
.on-navy .on-navy-muted,
[data-surface="inverse"] .on-navy-muted {
  color: var(--c-on-navy-muted);
}
/* Hairlines par défaut : bordure claire discrète sur le fond navy */
.on-navy :where(hr),
[data-surface="inverse"] :where(hr) {
  border-color: rgba(245, 241, 235, 0.14);
}
/* CARTES CLAIRES imbriquées dans une bande navy : on RÉTABLIT le texte
   sombre normal (sinon la règle .on-navy ci-dessus déteint sur les cartes
   navy-tint/blanches et rend le texte gris fantôme illisible — WCAG 1.9:1).
   Spécificité (0,2,0) > (0,1,0) donc l'emporte. */
.on-navy :where(.bg-navy-tint, .bg-white, .bg-warm-white),
[data-surface="inverse"] :where(.bg-navy-tint, .bg-white, .bg-warm-white) {
  color: var(--c-paragraph);
}
.on-navy :where(.bg-navy-tint, .bg-white, .bg-warm-white) :where(h1, h2, h3, h4, h5, h6),
[data-surface="inverse"] :where(.bg-navy-tint, .bg-white, .bg-warm-white) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--c-heading);
}
.on-navy :where(.bg-navy-tint, .bg-white, .bg-warm-white) :where(p, li, dd, dt, figcaption),
[data-surface="inverse"] :where(.bg-navy-tint, .bg-white, .bg-warm-white) :where(p, li, dd, dt, figcaption) {
  color: var(--c-paragraph);
}

/* ============================================================
   WAVE 1a — COUTURES DOUCES (seams). DESIGN_SYSTEM §3.
   RÈGLE ABSOLUE respectée : tout fondu part vers rgba(...,0), JAMAIS
   `transparent` (qui vire au gris sale sur du beige). Ces classes sont
   des OUTILS réutilisables que Wave 2 posera sur des sections/bandes.
   ============================================================ */

/* Fondu du bas d'un bloc (l'image/fond s'efface tout en bas via mask).
   Réutilisable quelle que soit la couleur de fond (le mask est agnostique).
   Le fondu s'arrête à 82% puis va vers l'alpha 0 → bord invisible propre. */
.seam-fade-b {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 82%, rgba(0, 0, 0, 0) 100%);
}
/* Symétrique : fondu du HAUT (pour enchaîner deux surfaces). */
.seam-fade-t {
  -webkit-mask-image: linear-gradient(to top, #000 82%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top, #000 82%, rgba(0, 0, 0, 0) 100%);
}

/* Bande NAVY arrondie « façon Alan » : grand rayon en haut + fond nuit.
   Wave 2 pose `.band-navy` (+ `.on-navy` pour le texte) sur une section, et
   la carte SUIVANTE peut la chevaucher via une marge négative (`-mt-*`) →
   profondeur, cartes qui se superposent. DESIGN_SYSTEM §3/§4. */
.band-navy {
  background: var(--grad-night);
  color: var(--c-on-navy);
  border-top-left-radius: 2.5rem;  /* rounded-t-band */
  border-top-right-radius: 2.5rem;
}

/* Lavage vertical doux beige-100 → warm-white (jamais un aplat plat).
   Équivalent utilitaire de bg-wash pour les coutures clair↔clair.
   ⚠ À n'utiliser QUE si le voisin du dessus est beige-100 et le voisin du
   dessous warm-white (ex : bloc waitlist /reservation). Sinon → bridges. */
.surface-wash {
  background: var(--grad-wash);
}

/* ============================================================
   FONDS 2.0 — PONTS PROGRESSIFS « neighbor-aware » (bridges).
   Un dégradé entre deux sections DOIT partir de la couleur exacte de la
   section du dessus et finir sur la couleur exacte de la section du
   dessous — jamais de bande qui « claque » (retour brutal au fond).

   Deux familles d'outils, toutes en background-image (elles se posent
   PAR-DESSUS la couleur de surface bg-* sans la combattre) :

   1. `.bridge-[from]-[to]`   : TOUTE la section dérive de la couleur du
      voisin du dessus vers celle du voisin du dessous (sections « pont »).
   2. `.seam-head-[from]-[to]`: la section démarre à la couleur du voisin
      du dessus puis se stabilise sur SA couleur en ~9rem (144px) — le
      reste de la section reste plat. Pour les jonctions plat↔plat.

   Rappels de teintes : canvas = beige-100 #FBF8F4 · raised = warm-white
   #FEFCFA · alt = beige-200 #F4EEE6. Clair↔navy = grammaire « bande
   arrondie + chevauchement » (band-navy / rounded-t-band), pas un bridge.
   ============================================================ */
.bridge-raised-alt {
  background-image: linear-gradient(180deg, var(--c-warm-white-elev) 0%, var(--c-beige-200) 100%);
}
.bridge-raised-canvas {
  background-image: linear-gradient(180deg, var(--c-warm-white-elev) 0%, var(--c-beige-100) 100%);
}
.bridge-alt-canvas {
  background-image: linear-gradient(180deg, var(--c-beige-200) 0%, var(--c-beige-100) 100%);
}
/* « Vallée surélevée » : part de l'alt du dessus, s'éclaircit en warm-white
   au cœur de la section, puis redescend vers l'alt du dessous. Pour une
   section pont posée ENTRE deux surfaces alt (ex : crédit d'impôt /tarifs). */
.bridge-alt-raised-alt {
  background-image: linear-gradient(
    180deg,
    var(--c-beige-200) 0%,
    var(--c-warm-white-elev) 11rem,
    var(--c-warm-white-elev) calc(100% - 11rem),
    var(--c-beige-200) 100%
  );
}
/* Vallée asymétrique : part de l'alt (beige-200) du dessus, s'éclaircit en
   warm-white au cœur, puis retombe sur le canvas que révèlent les coins
   arrondis d'une bande navy qui suit (ex : candidature /recrutement). */
.bridge-alt-raised-canvas {
  background-image: linear-gradient(
    180deg,
    var(--c-beige-200) 0%,
    var(--c-warm-white-elev) 9rem,
    var(--c-warm-white-elev) calc(100% - 9rem),
    var(--c-beige-100) 100%
  );
}
/* Même vallée depuis/vers le canvas : pour une section raised dont les DEUX
   voisins sont canvas (ou dont le bas doit retomber sur le canvas que
   révèlent les coins arrondis d'une bande navy/footer qui suit). */
.bridge-canvas-raised-canvas {
  background-image: linear-gradient(
    180deg,
    var(--c-beige-100) 0%,
    var(--c-warm-white-elev) 11rem,
    var(--c-warm-white-elev) calc(100% - 11rem),
    var(--c-beige-100) 100%
  );
}

/* Têtes de couture : drift ~9rem depuis la couleur du voisin du dessus,
   puis la section reste plate sur sa propre couleur (dernier stop tenu). */
.seam-head-canvas-raised {
  background-image: linear-gradient(180deg, var(--c-beige-100) 0%, var(--c-warm-white-elev) 9rem);
}
.seam-head-raised-canvas {
  background-image: linear-gradient(180deg, var(--c-warm-white-elev) 0%, var(--c-beige-100) 9rem);
}
.seam-head-alt-canvas {
  background-image: linear-gradient(180deg, var(--c-beige-200) 0%, var(--c-beige-100) 9rem);
}
.seam-head-raised-alt {
  background-image: linear-gradient(180deg, var(--c-warm-white-elev) 0%, var(--c-beige-200) 9rem);
}
.seam-head-alt-raised {
  background-image: linear-gradient(180deg, var(--c-beige-200) 0%, var(--c-warm-white-elev) 9rem);
}
/* Queue de couture : la section reste plate puis dérive vers la couleur du
   voisin du DESSOUS sur ses ~9 derniers rem (ex : avant un footer navy dont
   les coins arrondis révèlent le canvas du body). */
.seam-tail-raised-canvas {
  background-image: linear-gradient(180deg, var(--c-warm-white-elev) calc(100% - 9rem), var(--c-beige-100) 100%);
}

/* BANDE SABLE « façon Alan » — bloc inset chaud (trancher sans assombrir) :
   dégradé sable/or profond pour les moments signature clairs (CTA home).
   Texte navy dessus ; la carte warm-white posée DEDANS ressort fortement. */
.band-sand {
  background: linear-gradient(160deg, #f2e8d6 0%, #e7d9bf 100%);
}

/* ============================================================
   FINITION « 9.5→10 » — les ~30 lignes que personne ne saute.
   Sélection de texte, zoom photo deux-tempos, finition navy.
   ============================================================ */

/* Sélection de texte aux couleurs de la marque : voile or (gold #E0BB6D à
   30%), texte navy. Sur bande navy : voile or un peu plus présent, texte
   blanc chaud (jamais #fff pur). */
::selection {
  background: rgba(224, 187, 109, 0.3);
  color: #1e2b38;
}
.on-navy ::selection,
[data-surface="inverse"] ::selection {
  background: rgba(224, 187, 109, 0.35);
  color: #f5f1eb;
}

/* MÉDIA DE CARTE — règle des deux tempos (DESIGN_SYSTEM §6) :
   bordure/ombre de la carte répondent en 200ms (CARD_HOVER), la photo zoome
   1 → 1.03 en 500ms ease-out-quart. À poser sur le wrapper de l'image d'une
   carte `group` contenant une photo. Jamais sur des cartes sans média. */
.card-media {
  overflow: hidden;
}
.card-media img {
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1);
}
.group:hover .card-media img {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .card-media img {
    transition: none;
  }
  .group:hover .card-media img {
    transform: none;
  }
}

/* CARTE SUR FOND NAVY — finition « usinée » (refs §3a/3b) : anneau intérieur
   blanc 10% + surbrillance 1px en haut (la lumière vient d'en haut). Deux
   ombres inset combinées, aucune bordure layout (remplace border-white/10).
   Pour les cartes CLAIRES posées sur navy (navy-tint), préférer la variante
   tailwind `ring-1 ring-inset ring-navy-900/5` qui compose avec leur ombre. */
.card-on-navy {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}