/**
 * papier.css — direction artistique « papier découpé » de LocNco.
 * Version 1.0 — 2026-08-25.
 *
 * Feuille de SURCOUCHE : elle se charge après tout le reste et ne remplace aucune
 * feuille existante. Elle neutralise ce qu'il faut de Tailwind (palette slate/indigo,
 * arrondis, ombres) pour que la page ait l'air découpée aux ciseaux et posée sur une
 * table. Retirer la ligne qui l'appelle suffit à revenir en arrière : rien d'autre
 * n'a été modifié dans les pages.
 *
 * Trois règles de survie, apprises en la construisant :
 *   1. Ne jamais clipper un conteneur qui doit laisser dépasser quelque chose
 *      (barre de nav collante, menus, listes déroulantes) — ça le fait disparaître.
 *   2. L'ombre d'une découpe est un `filter: drop-shadow`, jamais un `box-shadow` :
 *      elle doit suivre le bord irrégulier.
 *   3. Le papier vit sur `html`, jamais sur `html` ET `body` : quand `html` a un fond,
 *      celui du `body` cesse de se propager au canvas et se peint par-dessus les
 *      éléments en z-index négatif — dont la vidéo du hero.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=Manrope:wght@400;600;800&display=swap');

:root {
  --pap-fond: #F3EAD9;
  --pap-carte: #FBF6EC;
  --pap-encre: #141210;
  --pap-encre-douce: #5A5148;
  --pap-or: #C6A15B;
  --pap-or-clair: #E4CE9E;
  --pap-or-fonce: #9C7C3E;
  --pap-ombre: rgba(74, 56, 30, 0.28);
  --pap-ciseaux: polygon(
    0.5% 1.2%, 12% 0.2%, 26% 1%, 41% 0.1%, 58% 0.9%, 73% 0.2%, 88% 1%, 99.6% 0.4%,
    99.2% 14%, 99.8% 32%, 99.3% 51%, 99.9% 70%, 99.2% 87%, 99.6% 99.2%,
    86% 99.8%, 70% 99.1%, 54% 99.9%, 38% 99.2%, 22% 99.8%, 8% 99.1%, 0.4% 99.6%,
    0.9% 84%, 0.2% 66%, 0.8% 48%, 0.1% 30%, 0.7% 15%
  );
  --pap-etiquette: polygon(1% 6%, 30% 0%, 62% 7%, 99% 1%, 98% 92%, 66% 100%, 33% 93%, 2% 99%);
}

/* ══════════════════ 1. Le papier ══════════════════ */

/* Le fond vit sur html seul (voir règle 3 en tête de fichier). */
html {
  background-color: var(--pap-fond) !important;
  background-image: url('/da-papier/texture.jpg') !important;
  background-size: 900px auto !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
}

body {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--pap-encre) !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* Lumière rasante et chutes de découpe : sous le contenu, et sous les vidéos
   de fond (z-index -2) — d'où les z-index négatifs. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(70% 50% at 50% 25%, rgba(255,255,255,0.30), rgba(120,95,55,0.14) 100%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background-image:
    linear-gradient(105deg, var(--pap-or-clair) 0 100%),
    linear-gradient(-70deg, var(--pap-or) 0 100%),
    linear-gradient(35deg, var(--pap-or-clair) 0 100%);
  background-repeat: no-repeat;
  background-size: 120px 44px, 78px 30px, 96px 36px;
  background-position: 3% 12%, 94% 28%, 6% 86%;
  opacity: 0.28;
}

/* ══════════════════ 2. Typographie ══════════════════ */

h1, h2, h3,
.text-2xl, .text-3xl, .text-4xl, .text-5xl,
[class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"] {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: var(--pap-encre) !important;
}

.italic, em { font-style: italic !important; }

/* Les sur-titres deviennent des bandes de papier doré collées de travers. */
[class*="uppercase"][class*="tracking-wide"],
[class*="uppercase"][class*="tracking-widest"],
.badge, [class*="rounded-full"][class*="text-xs"] {
  display: inline-block !important;
  background: var(--pap-or) !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--pap-etiquette);
  padding: 0.5em 1.2em !important;
  transform: rotate(-1.1deg);
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
}
/* Encre sur l'or, enfants compris : un texte clair y serait illisible. */
[class*="uppercase"][class*="tracking-wide"],
[class*="uppercase"][class*="tracking-widest"],
[class*="uppercase"][class*="tracking-wide"] *,
[class*="uppercase"][class*="tracking-widest"] * {
  color: var(--pap-encre) !important;
}

/* ══════════════════ 3. La palette : slate/indigo → encre/or ══════════════════ */

[class*="text-slate-900"], [class*="text-slate-800"], [class*="text-gray-900"] { color: var(--pap-encre) !important; }
[class*="text-slate-700"], [class*="text-slate-600"], [class*="text-slate-500"],
[class*="text-slate-400"], [class*="text-gray-500"] { color: var(--pap-encre-douce) !important; }
[class*="text-indigo"], [class*="text-blue-6"], [class*="text-violet"] { color: var(--pap-or-fonce) !important; }
[class*="text-emerald"], [class*="text-green-5"] { color: #6E7B49 !important; }

[class*="bg-white"], [class*="bg-slate-50"], [class*="bg-gray-50"],
[class*="bg-indigo-50"], [class*="bg-slate-100"] {
  background-color: var(--pap-carte) !important;
  background-image: none !important;
}

[class*="border-slate"], [class*="border-gray"], [class*="border-indigo"] {
  border-color: rgba(74, 56, 30, 0.18) !important;
}

/* Textes en dégradé (posés en style inline la plupart du temps) : l'or, pas le bleu. */
.gradient-text, .gradient-text-light, [class*="text-transparent"], [style*="text-fill-color"] {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--pap-or-fonce) !important;
  color: var(--pap-or-fonce) !important;
}

/* ══════════════════ 4. Les blocs deviennent des morceaux de papier ══════════════════ */

[class*="rounded-3xl"], [class*="rounded-2xl"], [class*="rounded-xl"], [class*="rounded-["] {
  border-radius: 0 !important;
  clip-path: var(--pap-ciseaux);
  box-shadow: none !important;
}

[class*="shadow-xl"], [class*="shadow-2xl"], [class*="shadow-lg"] {
  box-shadow: none !important;
  filter: drop-shadow(5px 8px 9px var(--pap-ombre));
}

/* Une carte sur deux est posée de travers — jamais plus d'un degré. */
section > div[class*="rounded-3xl"]:nth-of-type(odd) { transform: rotate(-0.35deg); }
section > div[class*="rounded-3xl"]:nth-of-type(even) { transform: rotate(0.3deg); }

/* Les blocs sombres restent sombres : du carton noir découpé, posé sur la table.
   C'est ce qui garde le contraste et donne du rythme à la page. */
[class*="bg-slate-7"], [class*="bg-slate-8"], [class*="bg-slate-9"],
[class*="bg-gray-7"], [class*="bg-gray-8"], [class*="bg-gray-9"],
[class*="bg-black"], [class*="from-slate-9"],
[class*="bg-indigo-4"], [class*="bg-indigo-5"], [class*="bg-indigo-6"], [class*="bg-indigo-7"],
[class*="bg-violet"], [class*="bg-purple"] {
  background-color: var(--pap-encre) !important;
  background-image: none !important;
  color: #F5EFE3 !important;
  filter: drop-shadow(6px 10px 12px var(--pap-ombre));
}
[class*="bg-slate-7"] *, [class*="bg-slate-8"] *, [class*="bg-gray-7"] *, [class*="bg-gray-8"] *,
[class*="bg-indigo-5"] *, [class*="bg-indigo-6"] *, [class*="bg-violet"] * { color: inherit !important; }
[class*="bg-slate-9"] h1, [class*="bg-slate-9"] h2, [class*="bg-slate-9"] h3,
[class*="bg-black"] h2, [class*="bg-gray-9"] h2 { color: #F5EFE3 !important; }
/* Le texte discret d'un carton noir passe en crème — mais pas celui d'un bouton,
   qui est posé sur du papier clair et doit rester à l'encre. */
[class*="bg-slate-9"] [class*="text-slate"]:not(a):not(button),
[class*="bg-slate-9"] p { color: #CFC4AD !important; }

/* Les blancs translucides (bg-white/5, bg-white/10) sont des voiles posés sur un fond
   sombre, pas des cartes en papier : les repeindre en crème rendait leur texte illisible. */
[class*="bg-slate-7"] [class*="bg-white/"], [class*="bg-slate-8"] [class*="bg-white/"],
[class*="bg-slate-9"] [class*="bg-white/"], [class*="bg-black"] [class*="bg-white/"],
[class*="bg-gray-9"] [class*="bg-white/"] {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #F5EFE3 !important;
}

/* ══════════════════ 5. Boutons : des étiquettes découpées ══════════════════ */

button, .btn, a[class*="bg-indigo"], button[class*="bg-indigo"],
[class*="bg-gradient-to-r"], [class*="from-indigo"], [class*="from-blue"],
.gradient-brand, .gradient-brand:hover {
  background: var(--pap-or) !important;
  background-image: none !important;
  color: var(--pap-encre) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: var(--pap-etiquette);
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  filter: drop-shadow(4px 6px 6px var(--pap-ombre));
  transition: transform 0.12s steps(2) !important;
}

/* Un bouton reste doré même quand il était en fond sombre :
   le carton noir sert aux blocs, pas aux boutons. */
a[class*="bg-slate-9"], button[class*="bg-slate-9"],
a[class*="bg-black"], button[class*="bg-black"],
[class*="bg-indigo-6"] a, [class*="bg-indigo-6"] button {
  background: var(--pap-or) !important;
  color: var(--pap-encre) !important;
  filter: drop-shadow(4px 6px 6px var(--pap-ombre));
}

button:hover, .btn:hover, a[class*="bg-indigo"]:hover, [class*="from-indigo"]:hover {
  transform: rotate(-0.8deg) translateY(-2px);
}

/* ══════════════════ 6. Champs : des bandes de papier ══════════════════ */

input, select, textarea, .form-input {
  background: #FFFDF7 !important;
  border: 0 !important;      /* une bordure serait tranchée par la découpe */
  border-radius: 0 !important;
  clip-path: polygon(0.6% 8%, 25% 1%, 55% 7%, 99.4% 2%, 99% 92%, 58% 99%, 27% 93%, 0.8% 98%);
  filter: drop-shadow(2px 3px 3px rgba(74, 56, 30, 0.22));
  padding: 0.85em 1em !important;
  font-family: 'Manrope', sans-serif !important;
  color: var(--pap-encre) !important;
}
input:focus, select:focus, textarea:focus {
  outline: 0 !important;
  background: #FFFFFF !important;
  filter: drop-shadow(0 0 0 2px var(--pap-or)) drop-shadow(2px 3px 3px rgba(74, 56, 30, 0.22));
}
::placeholder { color: rgba(90, 81, 72, 0.55) !important; }

/* ══════════════════ 7. Images : des tirages posés sur la table ══════════════════ */

img:not([src*="logo"]):not([class*="h-6"]):not([class*="w-6"]) {
  background: var(--pap-carte);
  padding: 6px;
  border-radius: 0 !important;
  clip-path: var(--pap-ciseaux);
  filter: drop-shadow(4px 7px 8px var(--pap-ombre)) sepia(0.10) saturate(0.94) contrast(1.02);
}

/* Traitement commun, plus léger, pour les images qu'on ne découpe pas (logos exclus). */
img[class*="h-6"], img[class*="w-6"] { filter: sepia(0.10) saturate(0.94); }

/* ══════════════════ 8. Barre de nav : une bande collée, jamais découpée ══════════════════ */

nav, header, [class*="fixed"][class*="top-0"], .glass-nav {
  background: rgba(251, 246, 236, 0.92) !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  clip-path: none !important;
  box-shadow: 0 3px 0 rgba(74, 56, 30, 0.10) !important;
}
nav *, header * { clip-path: none !important; }

/* Au-dessus du hero, la nav reste transparente comme prévu par le site ;
   c'est une fois défilée qu'elle devient une bande de papier. */
#mainNav.nav-over-hero { background: transparent !important; box-shadow: none !important; }
#mainNav.nav-scrolled { background: rgba(251, 246, 236, 0.94) !important; }

/* Le site croise déjà un logo blanc (sur le hero) et un noir (défilé) : on ne force
   rien, on répare seulement le display — les sortir du flux les faisait disparaître. */
.logo-light, .logo-dark { display: block !important; }

/* ══════════════════ 9. Hero vidéo : la photo pleine page ══════════════════ */

/* Le hero garde son film : c'est le tirage collé en couverture, le papier commence
   en dessous. Aucun fond sur le conteneur (il masquerait la vidéo, en z-index -2) ;
   le repli sombre vit sur la vidéo elle-même. */
.hero-v2 { background: transparent !important; }
.hero-v2 div[class*="bg-white"]:not([class*="rounded"]),
.hero-v2 [class*="bg-slate-5"]:not(a):not(button),
.hero-v2 [class*="bg-gray-5"]:not(a):not(button) { background: transparent !important; }
.hero-v2 a[class*="bg-white"], .hero-v2 button[class*="bg-white"] {
  background: var(--pap-carte) !important;
  color: var(--pap-encre) !important;
}
/* Le hero est écrit SUR un film : son texte reste clair. La règle générale qui met
   les titres à l'encre s'applique au papier, pas ici — sinon le titre disparaît. */
.hero-v2 h1, .hero-v2 h2, .hero-v2 h3,
.hero-v2 p, .hero-v2 [class*="text-slate"], .hero-v2 [class*="text-white"],
#film h2, #film p, #film span {
  color: #FBF6EC !important;
}
#film .font-editorial,
.hero-v2 .gradient-text, .hero-v2 .gradient-text-light,
.hero-v2 [style*="text-fill-color"], .hero-v2 [class*="text-transparent"] {
  -webkit-text-fill-color: #E4CE9E !important;
  color: #E4CE9E !important;
}
/* Sauf ce qui est posé sur du papier clair : un bouton garde son encre. */
.hero-v2 a[class*="bg-white"], .hero-v2 button[class*="bg-white"],
.hero-v2 a[class*="bg-white"] *, .hero-v2 button[class*="bg-white"] *,
#film a[class*="bg-white"], #film a[class*="bg-white"] * {
  color: var(--pap-encre) !important;
}

.film-bg-video { border: 0 !important; clip-path: none !important; filter: saturate(0.96) sepia(0.04) !important; }

.hero-bg-video {
  background-color: var(--pap-encre) !important;
  border: 0 !important;
  clip-path: none !important;
  filter: saturate(0.95) sepia(0.05) !important;
}

/* Les autres vidéos, elles, sont des fenêtres découpées dans la feuille. */
video:not(.hero-bg-video):not(.film-bg-video) {
  border: 10px solid var(--pap-carte) !important;
  border-radius: 0 !important;
  clip-path: var(--pap-ciseaux);
  filter: drop-shadow(6px 9px 10px var(--pap-ombre)) saturate(0.92) sepia(0.06);
}

/* ══════════════════ 10. Divers ══════════════════ */

[href*="/tour/"] { text-decoration: none !important; }