/* ============================================================
   motion.css — PIC · compagnon de motion.js
   États initiaux (toujours sous .has-js) + micro-interactions.
   ============================================================ */

/* ── États initiaux — jamais nus, toujours sous .has-js ───────────────────── */
.has-js [data-reveal="decoffrage"] { clip-path: inset(0 50% 0 50%); }
.has-js [data-reveal="montee"]   { opacity: 0; transform: translateY(30px); }
.has-js .cote__trait { transform: scaleX(0); }
.has-js .cote__about { transform: scaleY(0); }
.has-js .cote__label { opacity: 0; transform: translateY(10px); }
.has-js [data-elevation] .ligne { overflow: hidden; }
.has-js [data-elevation] .ligne > span { display: block; transform: translateY(106%); }
.has-js [data-reveal="voile"]    { opacity: 0; filter: blur(8px); }

/* Le h1 du hero n'est PAS masqué : c'est le LCP. Son entrée est une @keyframes
   CSS qui démarre au PREMIER RENDU — pas une tween GSAP qui attendrait le
   script. Le mot glisse depuis son propre masque, rien n'est jamais opacité 0. */
.has-js [data-titre] .hero__mot { overflow: hidden; }
.has-js [data-titre] .hero__mot > span {
  display: block;
  animation: elevation 1.05s var(--ease) both;
}
.has-js [data-titre] .hero__mot:nth-child(2) > span { animation-delay: 0.11s; }
.has-js [data-titre] .hero__mot:nth-child(3) > span { animation-delay: 0.22s; }
@keyframes elevation { from { transform: translateY(104%); } to { transform: translateY(0); } }

/* ── Micro-interactions (7 sélecteurs distincts, chacun avec sa parité tactile) ── */
.lien-nav:hover::after         { transform: scaleX(1); }
.lien-nav:focus-visible::after { transform: scaleX(1); }
.bouton:hover                  { background: var(--or-clair); border-color: var(--or-clair); }
.bouton--creux:hover           { background: transparent; border-color: var(--or); color: var(--or); }
.bouton:hover .bouton__point   { transform: translateX(6px); opacity: 1; }
.bouton:active                 { transform: scale(0.98); }
.carte:hover .carte__media img { transform: scale(1.05); }
.carte:active .carte__media img { transform: scale(1.01); }
.carte:hover .carte__meta      { color: var(--or); letter-spacing: 0.22em; }
.metier:hover .metier__media img { transform: scale(1.04); filter: saturate(1.12); }
.contact__tel:hover            { color: var(--or); }
.contact__tel:focus-visible    { color: var(--or); }
.lien-texte:hover              { background-size: 0% 1px; color: var(--or); }
.lien-texte:focus-visible      { background-size: 0% 1px; }
.marque:hover .marque__pastille { transform: rotate(90deg); }

.lien-nav::after, .bouton, .bouton__point, .carte__media img, .carte__meta,
.metier__media img, .contact__tel, .lien-texte, .marque__pastille {
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease),
              letter-spacing var(--dur-med) var(--ease),
              filter var(--dur-med) var(--ease),
              opacity var(--dur-fast) var(--ease),
              transform var(--dur-med) var(--ease),
              background-size var(--dur-med) var(--ease);
}

/* Le survol n'existe pas au doigt : pas d'état collé après le tap. */
@media (hover: none) {
  .bouton:hover, .carte:hover .carte__media img,
  .metier:hover .metier__media img, .marque:hover .marque__pastille { transform: none; }
  .carte:hover .carte__meta { letter-spacing: 0.18em; }
}

/* ── Repli sans JavaScript ───────────────────────────────────────────────── */
.no-js [data-reveal], .no-js [data-elevation] .ligne > span,
.no-js .cote__trait, .no-js .cote__about, .no-js .cote__label {
  opacity: 1 !important; transform: none !important;
  clip-path: none !important; filter: none !important;
}

/* ── Mouvement réduit ─────────────────────────────────────────────────────
   La cote PORTE de l'information (elle désigne le visuel qu'elle annote) :
   elle n'est pas supprimée, elle est figée à son état RENSEIGNÉ — trait entier,
   tirets d'about posés, étiquette lisible. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-elevation] .ligne > span {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; filter: none !important;
  }
  .cote__trait { transform: scaleX(1) !important; }
  .cote__about { transform: scaleY(1) !important; }
  .cote__label { opacity: 1 !important; transform: none !important; }
}

/* ── Composants multipage : micro-interactions supplémentaires ───────────── */
.metier-carte:hover { background: var(--noir-2); }
.metier-carte:hover .metier-carte__lien .bouton__point { transform: translateX(6px); }
.qr summary:hover { color: var(--or); }
.qr summary:focus-visible { color: var(--or); outline: 2px solid var(--or); outline-offset: 4px; }
.metier-carte, .metier-carte__lien .bouton__point, .qr summary {
  transition: background var(--dur-med) var(--ease), color var(--dur-fast) var(--ease),
              transform var(--dur-med) var(--ease);
}
@media (hover: none) {
  .metier-carte:hover .metier-carte__lien .bouton__point { transform: none; }
}