/* ═══════════════════════════════════════════════════════════════════════════
   DRONE V2 — les trois effets choisis par Matt le 2026-08-10 :
     1. verre liquide sur la navigation et les cartes
     2. titres qui se dispersent puis se reforment
     4. fonds vivants au lieu du noir plat
   (le n° 2 de la liste — images révélées par distorsion — n'a pas été retenu)

   Ce fichier se pose PAR-DESSUS le style de drone.html sans le remplacer :
   on ne touche pas aux règles existantes, on ajoute des classes. Revenir en
   arrière = retirer une ligne dans le <head>.

   ⚠️ Chargé APRÈS le <style> de la page, sinon rien ne s'applique : les règles
   de drone.html sont dans la page elle-même, donc plus tardives à égalité de
   spécificité.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 4. LE FOND VIVANT ────────────────────────────────────────────────────
   UN SEUL canvas pour toute la page, en position fixe derrière tout.
   Pourquoi un seul : un contexte WebGL par section, c'est 5 à 9 contextes que
   le navigateur finit par recycler de force (« Too many active WebGL
   contexts »), et la première section perd son fond sans aucune erreur. */
#fond-vivant {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
}
/* La page a un fond noir opaque : sans ça, le canvas est parfaitement invisible
   et on cherche le bug dans le shader. */
body.v2 { background: transparent; }
body.v2::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #05070c;
}

/* ── 1. LE VERRE LIQUIDE ──────────────────────────────────────────────────
   Trois couches font le verre, et il en faut trois :
     · backdrop-filter : ce qui est DERRIÈRE est flouté et saturé
     · un dégradé très clair : la lumière qui glisse sur la surface
     · une bordure haute plus claire que la basse : l'épaisseur du bord
   Retirer l'une des trois et l'effet retombe en « rectangle flou ». */
/* ⚠️ AUCUN `position` ICI — leçon payée le 2026-08-10.
   La première version portait `position: relative`, ce qui a écrasé le
   `position: fixed` du <header> : la barre de navigation s'est mise à défiler
   avec la page et disparaissait dès le deuxième écran. Aucune erreur, aucun
   avertissement — juste une nav absente qu'on met dix minutes à expliquer.
   Une classe utilitaire ne doit JAMAIS imposer `position` : elle ne sait pas
   ce que l'élément était avant. Les éléments qui ont besoin d'un contexte pour
   leur `::after` le déclarent eux-mêmes (voir .carte-verre). */
.verre {
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,.07) 100%);
  backdrop-filter: blur(16px) saturate(175%);
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  border: 1px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.30);
  border-bottom-color: rgba(255,255,255,.07);
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

/* Le reflet qui court sur le haut de la surface — c'est lui qui donne
   l'impression de matière plutôt que de simple transparence. */
.verre::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.16) 42%,
    rgba(255,255,255,.05) 52%,
    transparent 70%);
  opacity: .8;
}

/* La barre de navigation */
header.verre {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

/* Les cartes de contenu */
.carte-verre {
  position: relative;   /* ici c'est sûr : une carte n'est jamais fixe */
  border-radius: 18px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s;
}
.carte-verre:hover {
  transform: translateY(-6px);
  border-top-color: rgba(0,212,255,.55);
}

/* Le bouton fixe « Réserver un vol » : même matière, en teinte de marque. */
.cta-fixed.verre {
  background: linear-gradient(135deg, rgba(0,212,255,.22) 0%, rgba(0,212,255,.06) 100%);
  border-color: rgba(0,212,255,.45);
  border-top-color: rgba(120,235,255,.7);
}

/* Repli honnête : sans backdrop-filter (vieux navigateurs), on remplace par un
   fond sombre lisible plutôt que par un cadre transparent illisible. */
@supports not (backdrop-filter: blur(2px)) {
  .verre { background: rgba(8,12,20,.88); }
}

/* ── 2. LES TITRES QUI SE DISPERSENT ──────────────────────────────────────
   Les lettres de drone.html vivent déjà dans .sw > .sm > .sc, et .sm porte un
   `overflow:hidden` qui fait monter les lettres derrière une arête. Pour une
   DISPERSION, ce masque doit sauter — sinon les lettres partent et sont
   coupées net au bord, ce qui ressemble à un bug d'affichage. */
.js-eclat .sm { overflow: visible; }
.js-eclat .sc {
  will-change: transform, opacity, filter;
  /* aucune transition CSS : le JS écrit une position à chaque image, et deux
     animations sur la même propriété rendent le mouvement mou. */
}

/* ═══ LES DEUX PORTES — split-screen FPV / Modélisation 3D ═══════════════════
   Deux moitiés vivantes : au survol, celle qu'on vise prend la place de
   l'autre. C'est le motif « split-screen » relevé à la recherche du 10/08
   (Awwwards, layouts de hero 2026) — il fait choisir son monde AVANT d'entrer,
   là où deux boutons plats se contentent de nommer.
   ⚠️ Sur téléphone les deux moitiés s'empilent, elles ne rétrécissent pas :
   deux demi-écrans de 190 px de large ne montrent plus rien. */
.portes {
  display: flex;
  min-height: 74vh;
  border-top: 1px solid var(--line, rgba(255,255,255,.12));
  border-bottom: 1px solid var(--line, rgba(255,255,255,.12));
  overflow: hidden;
  background: #05070c;
  /* ⛔ AUCUNE MARGE INTERIEURE — le split-screen doit TOUCHER les bords.
     Defaut mesure le 2026-08-27, et c est une respiration ajoutee le meme
     jour qui l a cause : la regle generale `section{padding:clamp(...)}` de
     drone-3d.html s applique aussi ici, et comme cette section a un fond
     OPAQUE, ses 302 px de marge devenaient un grand rectangle NOIR sous le
     hero — 300 px de page morte, juste au-dessus des deux portes.
     ⚠️ Ce qu on voyait ressemblait trait pour trait a « le fond video ne
     s affiche pas ». La mesure a dit le contraire : la video etait a sa
     place (rect 45/0/1440/810), opaque, readyState 4, currentTime 0,09 —
     c est CETTE SECTION qui la recouvrait. Premier reflexe impose par
     reference_fond_video_page_pieges : relever getBoundingClientRect de la
     video AVANT d accuser l opacite, le voile ou le fichier.
     ⚠️ Une seconde regle `.portes` vit dans css/agence-web-v2.css avec un
     fond DIFFERENT (#0a0912) : c est celle-ci qui gagne. Deux sources de
     verite pour la meme valeur — ne pas corriger l une en croyant tenir
     l autre. */
  padding: 0;
}

.porte {
  position: relative;
  /* ⚠️ flex-basis à 0, PAS à 50 % — mesuré le 2026-08-10.
     Avec `flex: 1 1 50%`, les deux portes réclament déjà 100 % de la largeur :
     il ne reste aucun espace libre à distribuer, et `flex-grow` n'a donc plus
     rien à faire. Le survol ne changeait strictement rien, alors que le CSS
     était « correct ». À 0, c'est grow seul qui décide du partage. */
  flex: 1 1 0%;
  display: flex;
  align-items: flex-end;
  min-height: 74vh;
  padding: clamp(24px, 3.4vw, 56px);
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  /* `flex-grow` est la SEULE propriété animée pour l'agrandissement : animer
     `width` relance le calcul de mise en page de toute la section à chaque
     image, et le survol devient saccadé sur une machine modeste. */
  transition: flex-grow .65s cubic-bezier(.16, 1, .3, 1);
}
.porte + .porte { border-left: 1px solid var(--line, rgba(255,255,255,.12)); }

.porte-fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .6s;
  filter: grayscale(.55) brightness(.5);
}
.porte--fpv .porte-fond { background-image: url('../medias/portes/porte-fpv.jpg'); }
/* ⭐ 30/08 — la porte « Modelisation 3D » montre desormais le MODELE, pas une
   piscine vue du ciel. Source : Desktop/projet drone/video 3d projet/0830.png,
   le rendu photogrammetrique lui-meme. En WebP : 2,99 Mo -> quelques centaines
   de Ko. L ancienne porte-3d.jpg reste sur le disque, rien n est efface. */
.porte--3d  .porte-fond { background-image: url('../medias/portes/porte-3d-modele.webp'); }

/* Le voile : c'est lui qui rend le texte lisible ET qui donne à chaque porte
   sa couleur d'identité — chaud pour le film, froid pour la mesure. */
.porte-voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity .6s;
}
.porte--fpv .porte-voile {
  background: linear-gradient(0deg, rgba(5,7,12,.92) 0%, rgba(5,7,12,.35) 55%, rgba(255,90,40,.18) 100%);
}
.porte--3d .porte-voile {
  background: linear-gradient(0deg, rgba(5,7,12,.92) 0%, rgba(5,7,12,.35) 55%, rgba(0,150,255,.20) 100%);
}

.porte-contenu { position: relative; max-width: 30ch; }

.porte-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .3em;
  opacity: .65;
  margin-bottom: 14px;
}
.porte-titre {
  display: block;
  font-family: 'Anton', 'Anybody', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: .92;
  letter-spacing: .01em;
}
.porte-texte {
  display: block;
  margin-top: 16px;
  font-size: .95rem;
  line-height: 1.6;
  opacity: .85;
  /* Le texte n'apparaît qu'au survol sur grand écran : au repos, les deux
     portes ne montrent que leur titre, et le choix se fait d'un coup d'œil. */
  transition: opacity .5s, transform .5s;
}
.porte-lien {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  transition: background .3s, color .3s, border-color .3s;
}
.porte-lien em { font-style: normal; transition: transform .3s; }

/* ── AU SURVOL : la porte visée s'ouvre ──────────────────────────────────── */
@media (hover: hover) and (min-width: 861px) {
  .porte-texte { opacity: 0; transform: translateY(10px); }
  .portes:hover .porte { flex-grow: .72; }
  .portes .porte:hover { flex-grow: 1.9; }
  .porte:hover .porte-fond { transform: scale(1); filter: grayscale(0) brightness(.72); }
  .porte:hover .porte-texte { opacity: .9; transform: none; }
  .porte:hover .porte-lien { background: #fff; color: #05070c; border-color: #fff; }
  .porte:hover .porte-lien em { transform: translateX(5px); }
}

/* Sans survol (tactile) ou petit écran : tout est visible d'emblée, sinon le
   texte reste invisible pour de bon sur un téléphone. */
@media (hover: none), (max-width: 860px) {
  .porte-fond { filter: grayscale(.2) brightness(.6); }
}

@media (max-width: 860px) {
  .portes { flex-direction: column; }
  .porte { min-height: 62vh; flex: 1 1 auto; }
  .porte + .porte { border-left: 0; border-top: 1px solid var(--line, rgba(255,255,255,.12)); }
}

@media (prefers-reduced-motion: reduce) {
  .porte, .porte-fond, .porte-texte, .porte-lien { transition: none; }
}

/* ── NOTE DE MATT (10/08) : « donne un effet à ces cartes comme celui des prix »
   Les cartes de prix flottent en permanence (`priceFloat`) et respirent avec un
   halo pulsant (`priceGlow`). Les cartes `.feature`, elles, ne bougeaient qu'au
   survol : sur une capture, la section paraissait morte.
   ON RÉUTILISE LES DEUX ANIMATIONS DE LA PAGE, on n'en écrit pas de nouvelles :
   c'est ce qui garantit que les deux familles de cartes bougeront toujours
   pareil, même si Matt règle la vitesse plus tard — il n'y a qu'un endroit à
   changer.
   ⚠️ Le halo passe par un `box-shadow` sur l'élément et NON par ::after :
   `.feature::after` porte déjà le halo qui suit le curseur, et `::before` le
   trait qui balaye. Les écraser ferait disparaître deux effets existants. */
.feature {
  animation: priceFloat 3.6s ease-in-out infinite,
             featureRespire 3.2s ease-in-out infinite;
}
@keyframes featureRespire {
  0%, 100% { box-shadow: 0 0 14px rgba(0, 212, 255, .10); }
  50%      { box-shadow: 0 0 30px rgba(0, 212, 255, .26); }
}
/* ⚠️ CAUSE RACINE MESURÉE LE 2026-08-14 — NE PAS SUPPRIMER CETTE RÈGLE.
   `featureRespire` anime `box-shadow`, et EN CSS UNE ANIMATION BAT UNE RÈGLE
   NORMALE, `:hover` compris. En posant la respiration ci-dessus le 10/08, on a
   donc éteint sans le voir tout le halo néon du survol de `.feature:hover`
   (écrit dans le <style> de drone-fpv.html) : mesuré, l'ombre au repos et
   l'ombre au survol étaient RIGOUREUSEMENT IDENTIQUES — la carte ne réagissait
   plus du tout au curseur, elle continuait juste sa respiration.
   Personne ne l'a vu pendant 4 jours : à l'œil, « ça pulse », donc « ça marche ».
   La parade est de rendre la main au survol en retirant CETTE animation-là — le
   flottement `priceFloat` (la note de Matt) continue, lui.
   Barrière : npm run test:cartes, contrôle « la carte survolee porte bien un
   halo neon » — il compare les deux ombres et exige qu'elles diffèrent. */
.feature:hover {
  animation-name: priceFloat;
}

/* Décalages : sans eux les huit cartes montent et descendent EN CHŒUR, et
   l'ensemble ressemble à une page qui tremble plutôt qu'à des cartes vivantes.
   Les durées sont volontairement premières entre elles pour que le motif ne se
   resynchronise jamais à l'œil. */
.feature:nth-child(2) { animation-duration: 6.1s, 5.2s; animation-delay: .4s, .9s; }
.feature:nth-child(3) { animation-duration: 4.7s, 3.9s; animation-delay: .9s, .3s; }
.feature:nth-child(4) { animation-duration: 5.5s, 4.4s; animation-delay: 1.3s, .7s; }
.feature:nth-child(5) { animation-duration: 6.7s, 5.8s; animation-delay: .2s, 1.1s; }
.feature:nth-child(6) { animation-duration: 4.3s, 6.2s; animation-delay: 1.6s, .5s; }
.feature:nth-child(7) { animation-duration: 5.9s, 4.1s; animation-delay: .7s, 1.4s; }
.feature:nth-child(8) { animation-duration: 6.4s, 5.5s; animation-delay: 1.1s, .2s; }

@media (prefers-reduced-motion: reduce) {
  .feature { animation: none; }
}

/* ── LISIBILITÉ AU-DESSUS DU FOND VIVANT ───────────────────────────────── */
body.v2 .scroll-root { position: relative; z-index: 1; }

/* ── MOUVEMENT RÉDUIT ─────────────────────────────────────────────────────
   On coupe le fond animé et le reflet ; le verre reste, il ne bouge pas. */
@media (prefers-reduced-motion: reduce) {
  #fond-vivant { display: none; }
  .verre::after { animation: none; }
  .carte-verre { transition: none; }
}

/* ═══ NÉON DES CARTES — 30/08 ══════════════════════════════════════════════
   Matt : « les cartes sont trop transparentes, obscurcis-les · quand tu
   cliques qu'elles restent noires et non transparentes · je veux qu'elles
   aient un effet néon ».

   ⛔ ÉCRIT ICI ET PAS DANS LE <style> DE LA PAGE : drone-v2.css est le DERNIER
   fichier chargé. Une règle de même spécificité posée dans le <style> interne
   serait battue par celles d'ici — c'est le piège des deux sources de vérité
   CSS, déjà payé. Les règles de survol existantes (.feature:hover,
   .contact-info a:hover) sont justement dans ce <style>.

   ⚠️ CE QUI CAUSAIT L'EFFET « ça devient transparent au clic » : au survol,
   .contact-info a passait à `rgba(0,212,255,0.06)`, soit 6 % d'opacité. Sur un
   fond vidéo qui bouge, la carte disparaissait littéralement sous le doigt.
   Sur téléphone il n'y a pas de survol : l'état :hover reste COLLÉ après le
   tap, donc la carte restait transparente jusqu'à ce qu'on touche ailleurs. */
/* ⚠️ 30/08 — `.price-tableau tbody tr` MANQUAIT a cette liste. Sur telephone,
   chaque ligne du tableau des tarifs DEVIENT une carte (media 820px) : ce sont
   celles que Matt voyait encore translucides et sans reaction au doigt, alors
   que les autres etaient deja traitees. Une regle qui vise « les cartes » doit
   nommer TOUTES les cartes, y compris celles qui n en sont une qu a partir
   d une certaine largeur. */
.feature,
.contact-info a,
.contact-info .card,
.price-choix article,
.price-card,
.price-tableau tbody tr,
.price-faq details {
  /* Le néon au repos : discret, mais il détache la carte du fond animé. */
  box-shadow:
    0 0 0 1px rgba(0,212,255,.10),
    0 0 16px rgba(0,212,255,.07),
    0 8px 28px rgba(0,0,0,.45);
}

/* Survol, focus clavier ET doigt posé : la carte s'ALLUME et devient OPAQUE.
   Le fond noir est le point important — c'est lui qui rend le texte lisible. */
.feature:hover,
.feature:focus-within,
.contact-info a:hover,
.contact-info a:focus-visible,
.contact-info a:active,
.contact-info .card:hover,
.price-choix article:hover,
.price-card:hover,
.price-tableau tbody tr:hover,
.price-tableau tbody tr:active,
.price-faq details[open] {
  background: rgba(6,10,18,.96) !important;
  border-color: var(--electric);
  box-shadow:
    0 0 0 1px rgba(0,212,255,.55),
    0 0 22px rgba(0,212,255,.34),
    0 0 64px rgba(0,212,255,.16),
    inset 0 0 32px rgba(0,212,255,.08);
}

/* Le doigt POSÉ : encore plus noir, aucune transparence, et le néon monte.
   ⚠️ `:active` ne dure que le temps du contact — c'est voulu : ce qui doit
   RESTER après le doigt, c'est l'état ci-dessus, pas un clignotement. */
.feature:active,
.contact-info a:active,
.contact-info .card:active,
.price-choix article:active,
.price-tableau tbody tr:active,
.price-card:active {
  background: rgba(3,6,12,.99) !important;
  box-shadow:
    0 0 0 1px rgba(0,212,255,.75),
    0 0 26px rgba(0,212,255,.45),
    0 0 72px rgba(0,212,255,.22),
    inset 0 0 36px rgba(0,212,255,.10);
}

/* ⛔ Mouvement réduit demandé par le système : le néon reste, l'animation non. */
@media (prefers-reduced-motion: reduce) {
  .feature, .contact-info a, .contact-info .card,
  .price-choix article, .price-card { transition: none; }
}
