/* ============================================================
   03 — COMPONENTS
   Éléments réutilisables, indépendants de toute page précise :
   boutons, signature graphique "print", grain de papier, tags,
   animation de révélation au scroll.
   ============================================================ */

/* ---------- BOUTONS ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:13.5px;
  letter-spacing:0.02em;
  padding:13px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn-brass{
  background:var(--text-light);
  color:var(--indigo);
}
.btn-brass:hover{ background:var(--indigo-tint-20); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(0,15,159,0.35); }

/* Repères de calage — au survol, deux équerres viennent se caler sur
   les coins du bouton, comme un repère d'impression qui se resserre
   sur l'élément. Écho direct des .corner-reg déjà utilisés dans le
   hero. Blanc/clair : ce bouton n'apparaît que sur fond indigo. */
.btn-brass::before,
.btn-brass::after{
  content:"";
  position:absolute;
  width:11px; height:11px;
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.btn-brass::before{
  top:-6px; left:-6px;
  border-top:1.5px solid var(--text-light);
  border-left:1.5px solid var(--text-light);
  transform:translate(5px, 5px);
}
.btn-brass::after{
  bottom:-6px; right:-6px;
  border-bottom:1.5px solid var(--text-light);
  border-right:1.5px solid var(--text-light);
  transform:translate(-5px, -5px);
}
.btn-brass:hover::before,
.btn-brass:hover::after{
  opacity:0.9;
  transform:translate(0, 0);
}

/* Inverse de .btn-brass — plein indigo, texte clair, pour un CTA fort
   sur fond clair (jusqu'ici le site n'avait qu'un ghost pour ce cas,
   .btn-ghost-light, pas assez appuyé pour une action principale
   comme dans la popup de détail service). Même structure/repères de
   calage, couleurs inversées. */
.btn-indigo{
  background:var(--indigo);
  color:var(--text-light);
}
.btn-indigo:hover{ background:var(--ink-soft); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(0,15,159,0.35); }
.btn-indigo::before,
.btn-indigo::after{
  content:"";
  position:absolute;
  width:11px; height:11px;
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.btn-indigo::before{
  top:-6px; left:-6px;
  border-top:1.5px solid var(--indigo);
  border-left:1.5px solid var(--indigo);
  transform:translate(5px, 5px);
}
.btn-indigo::after{
  bottom:-6px; right:-6px;
  border-bottom:1.5px solid var(--indigo);
  border-right:1.5px solid var(--indigo);
  transform:translate(-5px, -5px);
}
.btn-indigo:hover::before,
.btn-indigo:hover::after{
  opacity:0.9;
  transform:translate(0, 0);
}
.btn-ghost-dark{
  border-color:rgba(246,242,233,0.3);
  color:var(--text-light);
}
.btn-ghost-dark:hover{ border-color:var(--text-light); color:var(--text-light); }
.btn-ghost-light{
  border-color:rgba(33,31,48,0.25);
  color:var(--text-dark);
}
.btn-ghost-light:hover{ border-color:var(--indigo); color:var(--indigo); }

/* ---------- LIEN FLÉCHÉ ----------
   Utilisé pour renvoyer d'une section condensée (accueil) vers sa
   page dédiée, ou d'une page vers la suivante dans le parcours. */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:13.5px; letter-spacing:0.02em;
  color:var(--indigo);
}
.link-arrow .arrow{ display:inline-block; transition:transform .25s ease; }
.link-arrow:hover .arrow{ transform:translateX(5px); }
.link-arrow.on-dark{ color:var(--text-light); }
.link-arrow.on-dark:hover{ color:var(--indigo-lt); }

/* ---------- TAG ---------- */
.tag{
  font-family:var(--body); font-size:10px; letter-spacing:0.06em;
  padding:5px 9px;
  text-transform:uppercase;
  display:inline-block;
}
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- SIGNATURE "REGISTRATION MARK" (détail print-craft) ---------- */
.regmark{ display:inline-block; width:14px; height:14px; opacity:0.55; }
.regmark svg{ width:100%; height:100%; display:block; }

.corner-reg{
  position:absolute;
  width:16px; height:16px;
  opacity:0.35;
  color:var(--text-light); /* le symbole du sprite dessine son trait en currentColor */
}
.corner-reg svg{ width:100%; height:100%; }
.corner-reg.tl{ top:28px; left:var(--edge); }
.corner-reg.tr{ top:28px; right:var(--edge); }

/* ---------- GRAIN DE PAPIER (texture tactile sur fonds clairs) ---------- */
.grain{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- FILIGRANE DE MARQUE (grande empreinte à faible opacité) ----------
   Couleur via `color` (héritée), jamais `fill` sur svg path : le path
   réel vit dans l'arbre fantôme d'un <use>, inatteignable par un
   sélecteur CSS classique — voir le commentaire dans sprite.svg. */
.fp-watermark{
  position:absolute;
  pointer-events:none;
  opacity:0.06;
  color:#FFFFFF;
}
.fp-watermark svg{ width:100%; height:100%; display:block; }

/* ---------- ANIMATION DE RÉVÉLATION AU SCROLL ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }