/* ============================================================
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* NAVIGATION (identique sur les 2 pages) */

/* HERO ACCUEIL — éditorial : nom géant + photo superposée */
/* Zone de scroll dédiée : sa hauteur = durée de l'effet (200vh = 1 écran de scroll pour tout ouvrir).
   ↑ augmente (ex: 260vh) pour ralentir l'effet, ↓ pour l'accélérer. */
/* Zone de scroll dédiée : sa hauteur = durée de l'effet (250vh). ↑ pour ralentir, ↓ pour accélérer. */
/* Le hero reste "collant" pendant toute l'ouverture du rideau */
/* Vidéo PLEIN ÉCRAN, révélée du centre vers les bords par clip-path. object-fit: contain => jamais rognée (letterbox noir si besoin). */
/* Nom : deux mots alignés, qui s'écartent (transform piloté par le scroll) */
.hero-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; margin: 0; display: flex; align-items: center; justify-content: center; gap: .1em; white-space: nowrap; font-family: var(--serif); font-weight: 700; font-size: var(--name-size); line-height: 1; color: var(--white); pointer-events: none; }
.hero-actions { position: absolute; left: 0; right: 0; bottom: 9vh; margin: 0 auto; width: fit-content; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.hero-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gray-dark); text-align: center; }
/* BOUTON D'ACTION — style LED bleu unique, dominant sur tout le site (voir aussi .nav-cta / .btn-line). */

/* HERO COURT (page Créations) — 40-50vh, pas plein écran */

/* ONGLETS (page Créations) — sticky sous la nav, scrollspy + smooth scroll (pas un filtre) */
/* top = hauteur de .nav en état "scrolled" (padding 15px + logo 27px + bordure 1px ≈ 58px) */

/* SECTIONS */

/* BANDEAU COMPÉTENCES (marquee, transition compétences → certificats) */
:root { --marquee-duration: 50s; } /* ↑ ralentit le défilement, ↓ l'accélère (durée d'un cycle complet) */
.marquee-skills:hover .marquee-track, .marquee-skills:focus-within .marquee-track { animation-play-state: paused; }
@media (max-width: 640px) {
  .marquee-group { padding: 22px 0; }
  .marquee-item { font-size: clamp(1.25rem, 5vw, 1.5rem); padding: 0 16px; }
}

/* CHIFFRES CLÉS (compteurs animés au scroll, transition hero → à propos) */

/* À PROPOS */
/* PUNCHLINE — machine à écrire en boucle */
/* Diaporama À propos : fondu N&B <-> couleur toutes les 4s */

/* OUTILS (Certificats, grille 3 colonnes pleine — 1ʳᵉ carte en 2 col. + bordure animée "shine") */
.tools { margin-top: clamp(56px, 8vw, 90px); text-align: center; }
.tools-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--white); margin-bottom: 40px; }
.tools-cards { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 24px; max-width: var(--maxw); margin: 0 auto; }
.tool-card:first-child { grid-column: span 2; }
.tool-card {
  --bd: 0ms; --shine-duration: 12s;
  position: relative; display: flex; flex-direction: column;
  border-radius: 8px; border: 1px solid var(--line-soft); background: var(--black);
  padding: 32px 28px; text-align: left; overflow: hidden;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease-in) var(--bd), transform .7s var(--ease-in) var(--bd), border-color .3s ease, background-color .3s ease;
}
.tools-cards.is-in .tool-card { opacity: 1; transform: translateY(0); }
.tool-card:hover, .tool-card:focus-within { border-color: var(--white); background: var(--surface); }
.tool-card:nth-child(2) { --bd: 90ms; }
.tool-card:nth-child(3) { --bd: 180ms; }
.tool-card:nth-child(4) { --bd: 270ms; }
.tool-card:nth-child(5) { --bd: 360ms; }
.tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: radial-gradient(circle at 50% 50%, transparent, transparent, #ff007f, #39ff14, #00ffff, transparent, transparent);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: tool-shine var(--shine-duration) linear infinite;
  pointer-events: none;
}
@keyframes tool-shine {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.tools-cat { position: relative; font-family: var(--sans); text-transform: uppercase; letter-spacing: .28em; font-size: .68rem; color: var(--gray); margin-bottom: 18px; }
.tools-items { position: relative; display: flex; flex-wrap: wrap; row-gap: 8px; }
.tool-item {
  --ii: 0; font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--gray-soft);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-in) calc(var(--bd) + var(--ii) * 30ms), transform .5s var(--ease-in) calc(var(--bd) + var(--ii) * 30ms), color .3s ease;
}
.tools-cards.is-in .tool-item { opacity: 1; transform: translateY(0); }
.tool-card:hover .tool-item, .tool-card:focus-within .tool-item { color: var(--white); }
/* Séparateur collé au mot SUIVANT (::before) : ne reste jamais orphelin en fin de ligne au retour à la ligne */
.tool-item:not(:first-child)::before { content: "·"; display: inline-block; margin: 0 10px; color: var(--gray-dark); }
.tool-item:nth-child(2) { --ii: 1; }
.tool-item:nth-child(3) { --ii: 2; }
.tool-item:nth-child(4) { --ii: 3; }
.tool-item:nth-child(5) { --ii: 4; }
.tool-item:nth-child(6) { --ii: 5; }
.tool-item:nth-child(7) { --ii: 6; }
@media (max-width: 900px) {
  .tools-cards { grid-template-columns: repeat(2, 1fr); }
  .tool-card:first-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .tools-cards { grid-template-columns: 1fr; }
  .tool-card:first-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card, .tool-item { opacity: 1; transform: none; transition: border-color .3s ease, background-color .3s ease; }
  .tool-item { transition: color .3s ease; }
  .tool-card::before { animation: none; }
}

/* CERTIFICATS (grille de cards retournables) */

/* COMPÉTENCES (blocs alternés image / texte) */
.skill-label { color: var(--gray); text-transform: uppercase; letter-spacing: .3em; font-size: .7rem; margin-bottom: 18px; }
/* Entrée au scroll : image et texte arrivent chacun de leur côté (texte en léger décalage) */

/* MA MÉTHODE (sticky + crossfade, transition identité → portfolio) */

/* CRÉATIONS */
/* CAMPAGNES VISUELS — filtres pastille + grille 4:5 uniforme (animation FLIP au changement) */
.campaign-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.campaign-filter { font-family: var(--sans); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--gray); padding: 10px 18px; border: 1px solid var(--line-soft); border-radius: 100px; transition: background .3s var(--ease-in), color .3s var(--ease-in), border-color .3s var(--ease-in); }
.campaign-filter:hover, .campaign-filter:focus-visible { border-color: var(--white); color: var(--white); }
.campaign-filter[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
/* BROCHURE — colonne texte (40%) + accordéon horizontal d'images (60%) */
/* PAGE CAMPAGNE — état vide + section "À voir" (mini-cards vers les autres campagnes) */
.campaign-empty { text-align: center; padding: 60px 0; }
.campaign-more { margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(48px, 6vw, 72px); text-align: center; }
.campaign-more-links { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 32px; text-align: left; }
.mini-campaign-card { display: block; text-align: center; }
.mini-campaign-card .frame-media { border: 1px solid var(--line-soft); transition: border-color .3s ease; }
.mini-campaign-card:hover .frame-media, .mini-campaign-card:focus-visible .frame-media { border-color: rgba(255,255,255,.4); }
.mini-campaign-card:hover .frame-media .real, .mini-campaign-card:focus-visible .frame-media .real { transform: scale(1.05); }
.mini-campaign-label { display: block; margin-top: 10px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; color: var(--gray); line-height: 1.4; }
@media (max-width: 1080px) { .campaign-more-links { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .campaign-more-links { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .campaign-more-links { grid-template-columns: repeat(2, 1fr); } }
.btn-line { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 17px 32px; background: #0a0a0a; border: 1.5px solid #60a5fa; text-transform: uppercase; letter-spacing: .22em; font-size: .7rem; color: #ffffff; box-shadow: 0 0 10px rgba(59,130,246,.55), 0 0 36px rgba(59,130,246,.28); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.btn-line:hover, .btn-line:focus-visible { transform: scale(1.04); border-color: #93c5fd; box-shadow: 0 0 16px rgba(59,130,246,.85), 0 0 56px rgba(59,130,246,.5); }

/* CARDS CATÉGORIES CRÉATIONS (accueil) — panneaux dégradés premium au survol */

/* CONTACT */

/* FOOTER */

/* LIGHTBOX */

/* ============================================================
   footer, liens de contact directs, chiffres et filigranes
   décoratifs (restent en blanc plein, lisibilité prioritaire).
   ============================================================ */

/* Halo LED renforcé au repos sur mobile : pas de survol tactile, donc le halo "hover" ne se voit jamais sans ce coup de pouce. */
@media (max-width: 768px) {
  .btn, .nav-cta, .btn-line {
    box-shadow: 0 0 16px rgba(59,130,246,.85), 0 0 56px rgba(59,130,246,.5);
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .section-head { margin-bottom: 40px; }
  .lb-info { flex-direction: column; }
  .tabs { gap: 16px; padding: 30px var(--gut); }
  .tab { font-size: .64rem; letter-spacing: .2em; }
  /* Hero mobile : même effet rideau (les mots sortent). Le JS bascule en fondu si le nom ne tient pas en largeur. */
  .hero-title { font-size: clamp(2rem, 13vw, 3.6rem); }
  .hero-actions { bottom: 12vh; }
  /* Compétences mobile : pile verticale (image au-dessus, texte en dessous), entrée par le bas */
  .skill-block, .skill-block--1, .skill-block--2, .skill-block--3, .skill-block--rev { grid-template-columns: 1fr; gap: 22px; }
  .skill-block .skill-media, .skill-block--rev .skill-media { grid-column: 1; grid-row: 1; }
  .skill-block .skill-text, .skill-block--rev .skill-text { grid-column: 1; grid-row: 2; }
  .skill-media, .skill-text, .skill-block--rev .skill-media, .skill-block--rev .skill-text { transform: translate(0, 32px); }
  .skill-num { font-size: clamp(5rem, 26vw, 9rem); }
  .page-hero { padding: 140px var(--gut) 52px; }
}