/*
 * Collection Uchiha — landing page
 * =================================
 * Le CSS d'origine portait des selecteurs GLOBAUX qui auraient debordé sur tout le
 * site : `a {}`, `img {}`, `body {}`, `*` et surtout
 * `@media (prefers-reduced-motion) { * { animation: none !important } }`, qui aurait
 * supprime toutes les animations du theme pour les visiteurs concernes.
 *
 * Tout est donc cantonne a `.uchiha-root`. Ne pas retirer ce prefixe.
 *
 * Les `@keyframes` restent globales — c'est leur nature — mais portent deja le
 * prefixe « om- », sans collision connue avec le theme.
 */

/* ------------------------------------------------------------------ *
 * 1. Reglages de page (html / body)
 * ------------------------------------------------------------------ */

/* Le fond noir est pose sur html ET body : sans celui de html, un depassement de
 * defilement (« overscroll ») laisse apparaitre un bandeau blanc sur iOS. La classe
 * est ajoutee cote serveur par le filtre language_attributes, donc sans clignotement. */
html.uchiha-html {
  background: #000;
  scroll-behavior: smooth;
}

body.uchiha-landing {
  margin: 0;
  background: #000;
  color: #f4f2ef;
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Le theme ajoute une reserve haute pour son en-tete quand celui-ci est transparent.
 * Ici le hero doit demarrer sous l'en-tete, pas apres : on annule la reserve. */
body.uchiha-landing #site-content,
body.uchiha-landing .site-content-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ⚠️ CECI FAIT FONCTIONNER LES COLONNES D'IMAGE COLLANTES. NE PAS RETIRER.
 *
 * Le theme pose `overflow: hidden` sur `.site-wrapper`, qui enveloppe toute la page.
 * Or un ancetre dont l'`overflow` n'est pas `visible` devient le CONTENEUR DE
 * DEFILEMENT des elements `position: sticky` qu'il contient. Comme cette boite ne
 * defile jamais elle-meme, le collage n'a rien contre quoi s'accrocher : il est
 * silencieusement annule. Mesure : la colonne avait bien 1 379 px de marge de
 * deplacement disponible, et ne bougeait pas d'un pixel.
 *
 * `clip` decoupe exactement comme `hidden` — donc pas de barre de defilement
 * horizontale parasite, ce que le theme cherchait a eviter — mais ne cree PAS de
 * conteneur de defilement. Le sticky retrouve alors la fenetre comme reference.
 *
 * `overflow-y: visible` reste valide a cote de `clip` (contrairement a `hidden`, ou
 * `visible` serait recalcule en `auto`).
 *
 * Si un navigateur trop ancien ignore `clip`, il conserve le `hidden` du theme : les
 * colonnes ne collent pas, mais rien n'est casse. */
body.uchiha-landing .site-wrapper {
  overflow-x: clip;
  overflow-y: visible;
}

/* ------------------------------------------------------------------ *
 * 2. Cohabitation avec l'en-tete du theme
 * ------------------------------------------------------------------ */

/* ⚠️ L'en-tete de CE site n'est PAS `#masthead`, contrairement a ce que laisse croire
 * le fichier header.php du theme. Kitify fournit `elementor_theme_do_location()`, donc
 * le modele Elementor « Header #1 » (post 102) est rendu a la place, dans
 * `.elementor-location-header`. Cibler `#masthead` ne produisait aucun effet : l'en-tete
 * restait blanc et opaque par-dessus le hero noir. `#masthead` et le conteneur mobile
 * du theme sont conserves ici comme repli, au cas ou le modele Elementor serait
 * desactive un jour.
 *
 * L'en-tete est mis en `absolute` : il reste visible sur le hero puis s'en va avec le
 * defilement. C'est du CSS et non du JavaScript, donc aucun tremblement, et rien a
 * desactiver dans Headroom. */
body.uchiha-landing .elementor-location-header,
body.uchiha-landing #masthead,
body.uchiha-landing .header-mobiles-wrapper {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  transform: none !important;
}

/* Les fonds sont poses par Elementor sur les conteneurs INTERNES : rendre seulement le
 * wrapper transparent laisserait la bande blanche. */
body.uchiha-landing .elementor-location-header,
body.uchiha-landing .elementor-location-header .elementor-section,
body.uchiha-landing .elementor-location-header .elementor-container,
body.uchiha-landing .elementor-location-header .e-con,
body.uchiha-landing .elementor-location-header .e-con-inner,
body.uchiha-landing .elementor-location-header .elementor-widget-container,
body.uchiha-landing #masthead,
body.uchiha-landing .header-mobiles-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Le menu et les icones passent en clair : sur fond noir, la couleur du theme
 * (sombre) serait illisible. */
body.uchiha-landing .elementor-location-header,
body.uchiha-landing .elementor-location-header a,
body.uchiha-landing .elementor-location-header span,
body.uchiha-landing #masthead,
body.uchiha-landing #masthead a {
  color: #f4f2ef !important;
}
body.uchiha-landing .elementor-location-header a:hover,
body.uchiha-landing #masthead a:hover { color: #fff !important; }
body.uchiha-landing .elementor-location-header svg,
body.uchiha-landing #masthead svg { fill: currentColor; stroke: currentColor; }

/* Le logo. L'en-tete Elementor n'a qu'UNE image, sans variante claire — contrairement
 * a l'en-tete du theme, qui en fournit deux. On le rend donc en silhouette blanche.
 * A valider a l'oeil : si la version doree est preferable, retirer ce filtre. */
body.uchiha-landing .elementor-location-header .elementor-widget-image img {
  filter: brightness(0) invert(1);
}

/* Repli si l'en-tete du theme reprend un jour la main : il a deux logos. */
body.uchiha-landing #masthead .logo-dark { display: none !important; }
body.uchiha-landing #masthead .logo-light { display: inline-block !important; }

/* La barre de la landing prend le relais : masquee tant que l'en-tete du theme est
 * a l'ecran, elle glisse ensuite en place. La bascule est posee par le script, qui
 * ajoute `uch-bar-on` — la valeur par defaut reste donc « masquee », ce qui evite
 * qu'elle recouvre l'en-tete si le script ne se charge pas. */
.uchiha-root [data-uch-bar] {
  transform: translateY(-100%);
  transition: transform 620ms cubic-bezier(.16,.84,.24,1);
}
body.uch-bar-on .uchiha-root [data-uch-bar] {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .uchiha-root [data-uch-bar] { transition: none; }
}

/* ------------------------------------------------------------------ *
 * 3. Protection de la landing CONTRE le theme
 * ------------------------------------------------------------------ */

/* ⚠️ C'EST LA SECTION QUI REND LES TEXTES VISIBLES. NE PAS LA RETIRER.
 *
 * Le fichier d'origine posait `body { color: #f4f2ef }` et `a { color: inherit }` en
 * GLOBAL. En les cantonnant pour proteger le site, les regles de type du theme se sont
 * mises a gagner a l'interieur de la landing :
 *
 *   h1,h2,h3,h4,h5,h6 { color: var(--site-heading-color) }   <- theme, specificite 0,0,1
 *
 * La landing, elle, ne comptait que sur l'HERITAGE depuis sa racine. Or l'heritage perd
 * toujours face a une regle qui matche, quelle que soit sa specificite. Resultat : tous
 * les titres prenaient la couleur sombre du theme, donc invisibles sur fond noir.
 *
 * L'isolation doit donc aller dans les DEUX sens : le site est protege de la landing
 * (section suivante), et la landing est protegee du site (ici). */

.uchiha-root,
.uchiha-root h1,
.uchiha-root h2,
.uchiha-root h3,
.uchiha-root h4,
.uchiha-root h5,
.uchiha-root h6,
.uchiha-root p,
.uchiha-root span,
.uchiha-root div,
.uchiha-root li,
.uchiha-root strong,
.uchiha-root em,
.uchiha-root figcaption,
.uchiha-root button {
  color: inherit;
}

/* La racine est le seul endroit ou la couleur est POSEE : tout le reste en herite. */
.uchiha-root {
  color: #f4f2ef;
}

/* Les titres du theme portent aussi une famille, une graisse et des marges. La landing
 * fixe les siennes en style en ligne pour la taille, mais pas pour ces trois-la. */
.uchiha-root h1,
.uchiha-root h2,
.uchiha-root h3,
.uchiha-root h4 {
  font-family: Archivo, sans-serif;
  font-weight: 500;
  text-align: inherit;
  text-transform: none;
  margin: 0;
}
/* Le theme ajoute un trait decoratif sous les h1 (`h1:before`) : il n'a rien a faire
 * ici et se superposerait au titre. */
.uchiha-root h1::before,
.uchiha-root h2::before,
.uchiha-root h3::before { content: none !important; }

/* `p { margin-bottom: 2rem }` du theme deregle l'espacement de la page, qui gere ses
 * propres rythmes. */
.uchiha-root p {
  margin: 0;
  line-height: inherit;
  font-size: inherit;
}

/* C'etait `a { color: inherit; text-decoration: none }` en global dans l'original. */
.uchiha-root a {
  color: inherit;
  text-decoration: none;
  background: none;
  line-height: inherit;
  transition: none;
}
.uchiha-root a:hover { color: #ffffff; }

/* Le theme met les images en `max-width:100%;height:auto` et des bordures sur certains
 * conteneurs : les visuels de la page portent leurs propres dimensions. */
.uchiha-root img {
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Les boutons du theme ont un fond, un padding et une bordure par defaut. */
.uchiha-root button {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: inherit;
}

/* ------------------------------------------------------------------ *
 * 4. Styles de la page, cantonnes
 * ------------------------------------------------------------------ */

.uchiha-root *, .uchiha-root *::before, .uchiha-root *::after { box-sizing: border-box; }
.uchiha-root::selection { background: rgba(255,255,255,0.16); }
.uchiha-root a { color: inherit; text-decoration: none; }
.uchiha-root a:hover { color: #ffffff; }
.uchiha-root [data-cta] { position: relative; overflow: hidden; isolation: isolate; }
.uchiha-root [data-cta]:hover { border-color: var(--accent, oklch(0.62 0.20 25)); }
.uchiha-root [data-cta] [data-slash] { position: absolute; top: -2px; bottom: -2px; left: -18%; width: 136%; z-index: 1; background: var(--accent, oklch(0.62 0.20 25)); transform: skewX(-16deg) translateX(-112%); transition: transform 720ms cubic-bezier(.22,.92,.14,1); }
.uchiha-root [data-cta]:hover [data-slash] { transform: skewX(-16deg) translateX(0); }
.uchiha-root [data-cta] [data-label] { position: relative; z-index: 2; transition: letter-spacing 720ms cubic-bezier(.22,.92,.14,1); }
.uchiha-root [data-cta]:hover [data-label] { letter-spacing: 0.26em; }
.uchiha-root [data-cta] [data-track] { position: relative; z-index: 2; display: block; width: 1.2em; overflow: hidden; }
.uchiha-root [data-cta] [data-track-inner] { display: flex; transform: translateX(0); transition: transform 640ms cubic-bezier(.22,.92,.14,1); }
.uchiha-root [data-cta] [data-track-inner] > span { flex: none; width: 1.2em; text-align: center; font-size: 1.1em; line-height: 1; }
.uchiha-root [data-cta]:hover [data-track-inner] { transform: translateX(-1.2em); }
.uchiha-root [data-cta]:active { transform: scale(0.975); }
.uchiha-root [data-cta]:focus-visible { outline: 2px solid var(--accent, oklch(0.62 0.20 25)); outline-offset: 3px; }
@keyframes om-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } }
.uchiha-root img { -webkit-user-drag: none; }
.uchiha-root [data-rail]::-webkit-scrollbar { height: 0; }
.uchiha-root [data-rail] { scrollbar-width: none; }
@keyframes om-rise { from { transform: translateY(106%); } to { transform: translateY(0); } }
@keyframes om-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes om-img { from { opacity: 0; transform: translateY(46px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes om-glow { 0%, 100% { opacity: 0.28; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 0.52; transform: translate(-50%,-50%) scale(1.1); } }
@keyframes om-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes om-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes om-spin { to { transform: rotate(360deg); } }
@keyframes om-spin-rev { to { transform: rotate(-360deg); } }
@keyframes om-pupil { 0%, 68%, 100% { transform: scale(1); } 76% { transform: scale(0.72); } 84% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {.uchiha-root * { animation: none !important; } }
@media (max-width: 860px) {
  .uchiha-root [data-uch-sticky] { position: static !important; height: auto !important; padding: 8px 0 26px !important; }
  .uchiha-root [data-uch-sticky-col] { align-self: auto !important; }
  .uchiha-root [data-uch-sticky] img { max-height: min(66svh, 520px) !important; }
  .uchiha-root [data-vert] { display: none !important; }
  .uchiha-root [data-col] { padding-top: 8px !important; }
  .uchiha-root [data-nav-list] { gap: 14px !important; font-size: 10.5px !important; letter-spacing: 0.1em !important; }
  .uchiha-root [data-nav] span { display: none !important; }
  .uchiha-root [data-edition] { display: none !important; }
  .uchiha-root [data-wordmark] { font-size: 11px !important; letter-spacing: 0.16em !important; }
  .uchiha-root [data-scroll-cue] span:first-child, .uchiha-root [data-scroll-cue] span:last-child { display: none !important; }
  .uchiha-root [data-ghost] { font-size: 26vw !important; }
  .uchiha-root [data-chapter-num] { font-size: 42vw !important; }
}
@media (max-width: 700px) {
  .uchiha-root [data-gal] { height: clamp(300px, 54vh, 460px) !important; }
  .uchiha-root [data-lb-title] { max-width: 58vw; }
  .uchiha-root [data-lb-ui] button { width: 48px !important; height: 48px !important; }
}
@media (max-width: 460px) {
  .uchiha-root [data-hero-row] { grid-template-columns: 1fr !important; }
  .uchiha-root [data-hero-fig] img { max-height: 60svh !important; }
}

/* ------------------------------------------------------------------ *
 * 5. Collision d'attributs avec Foundation — a ne pas reintroduire
 * ------------------------------------------------------------------ *
 * Le theme embarque Foundation (21 plugins enregistres dans son app.js). Deux de ses
 * composants portent des noms que l'export d'origine utilisait aussi :
 *
 *   data-reveal  -> composant MODAL de Foundation. Il enveloppait chaque element dans
 *                   un `.reveal-overlay`, y posait `role="dialog" aria-hidden="true"`
 *                   et le sortait de la page. Les 19 blocs concernes — dont TOUTES les
 *                   descriptions longues des trois figurines — disparaissaient donc a
 *                   l'affichage. La page mesurait 7 241 px au lieu de 12 125 px.
 *   data-sticky  -> composant STICKY de Foundation, qui reprenait la main sur les
 *                   colonnes d'image des chapitres.
 *
 * Ils sont renommes `data-uch-reveal` et `data-uch-sticky`. NE PAS revenir aux noms
 * courts : la collision est silencieuse, aucune erreur n'apparait en console.
 */

/* ------------------------------------------------------------------ *
 * 6. Ecrans etroits : la mention sous le bouton du hero
 * ------------------------------------------------------------------ *
 * « 1000 exemplaires par piece · licence officielle » vit dans une rangee flex SANS
 * `flex-wrap`, en capitales avec 0.16em d'interlettrage. A 390 px de large, la ligne
 * depassait et se faisait couper au bord droit — visible sur la capture mobile du
 * 2026-08-04. La rangee passe donc a la ligne, et l'interlettrage se resserre.
 *
 * C'est la page que la campagne e-mail montrera surtout sur telephone. */
@media (max-width: 560px) {
  .uchiha-root [data-uch-tagline] {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.5;
  }
}

/* ------------------------------------------------------------------ *
 * 7. Menu mobile : lisibilite
 * ------------------------------------------------------------------ *
 * MESURE DU 2026-08-04, qui explique le defaut signale :
 *
 *   .main-navigation, dans l'en-tete
 *     desktop (1424 px) : background = rgba(0,0,0,0)  -> texte clair correct
 *     mobile  (< 1024)  : background = rgb(255,255,255) <- fond BLANC pose par le theme
 *
 * Or la section 2 force `color: #f4f2ef` sur tout l'en-tete, pour que le menu reste
 * lisible au-dessus du hero noir. Resultat en mobile : du blanc sur du blanc.
 *
 * On rend donc au menu mobile un fond sombre, plutot que de rendre le texte sombre :
 * un bloc blanc au milieu de cette page noire jurerait. Seule la couleur de fond est
 * touchee — aucune geometrie, pour ne pas deranger la mise en page du theme.
 *
 * Le palier est 1024 px : c'est celui que declare Kitify sur ce menu
 * (`data-mobile-breakpoint="1024"`).
 *
 * Le panneau hors-ecran de Kitify (`[id^="MenuOffCanvas"]`, `.nova-offcanvas`) vit EN
 * DEHORS de l'en-tete : il n'est touche ni par la section 2 ni par celle-ci, et garde
 * ses propres couleurs, mesurees lisibles (texte noir sur blanc). */
@media (max-width: 1024px) {
  body.uchiha-landing .elementor-location-header .main-navigation,
  body.uchiha-landing .elementor-location-header .main-navigation ul,
  body.uchiha-landing .elementor-location-header .main-navigation li,
  body.uchiha-landing .elementor-location-header .main-navigation .sub-menu {
    background-color: rgba(8, 8, 8, 0.97) !important;
  }

  /* Un filet discret pour detacher le menu ouvert du fond de la page. */
  body.uchiha-landing .elementor-location-header .main-navigation {
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Les libelles restent clairs, et le survol franchement blanc. */
  body.uchiha-landing .elementor-location-header .main-navigation a,
  body.uchiha-landing .elementor-location-header .main-navigation a span {
    color: #f4f2ef !important;
  }
  body.uchiha-landing .elementor-location-header .main-navigation a:hover,
  body.uchiha-landing .elementor-location-header .main-navigation a:hover span {
    color: #ffffff !important;
  }
}