/* ============================================================
   PureSpec - shared.css
   ------------------------------------------------------------
   Composants des PAGES INTERNES (registry, contact, compte,
   tableau de bord, pages de texte, back-office).

   Le socle commun - reset, variables, barre de navigation, menu,
   pied de page, toast, anneau de focus, grille - a été extrait
   dans base.css, chargé avant celui-ci sur toutes les pages.
   Il n'est plus redéfini ici.
   ============================================================ */

.text-ink { color: var(--c-ink); }
.text-gray { color: var(--c-gray); }
.bg-ink { background: var(--c-ink); }
.bg-soft { background: var(--c-bg); }

/* ===== TYPO ===== */
.headline-xl { font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; }
.headline-lg { font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }

/* ===== PAGE HERO (réutilisable) ===== */
.page-hero {
  padding:64px 24px 32px;
  text-align: center;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
}
.page-hero-inner { max-width: 760px; margin:0 auto; }
.page-hero-eyebrow {
  display: inline-flex; align-items: center; gap:8px;
  padding:8px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow:0 1px 2px rgba(0,0,0,.02),0 2px 6px rgba(0,0,0,.03);
  border-radius:var(--r-sm, 8px);
  font-size: 12px; font-weight: 600;
  color: var(--c-ink);
  letter-spacing: 0.04em;
  margin-bottom:28px;
}
.page-hero-dot {
  width: 7px; height: 7px; border-radius:var(--r-full, 980px);
  background: var(--c-green);
  box-shadow: 0 0 0 0 rgba(52,199,89,0.5);
  animation: dotPulse 2.4s var(--ease-apple) infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(52,199,89,0); }
}
.page-hero-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--c-ink);
  margin:0;
}
.page-hero-lead {
  color: #6e6e73;
  font-size: clamp(15px, 1.4vw, 19px);
  margin-top:20px;
  line-height: 1.55;
  max-width: 580px;
  margin-left:auto;
  margin-right:auto;
}

/* ===== CARD ===== */
.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius:var(--r-xl, 24px);
  padding:28px;
  box-shadow:0 1px 2px rgba(0,0,0,.02),0 2px 6px rgba(0,0,0,.03);
}
.card-lg { padding:36px; border-radius:var(--r-xl, 24px); }
/* 36 px de marge interieure sur un ecran de 360 px ne laissent que 250 px
   utiles : le contenu s'y comprime au point de sembler coller aux bords.
   On resserre sur telephone, la ou chaque pixel compte. */
@media (max-width: 640px) {
  .card { padding: 20px; }
  .card-lg { padding: 22px; }
}
.card-tight { padding:20px; border-radius:var(--r-lg, 18px); }

/* ===== INPUT APPLE ===== */
.apple-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gray);
  margin-bottom:8px;
  letter-spacing: -0.01em;
}
.apple-input {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid transparent;
  border-radius:var(--r-md, 12px);
  padding:12px 16px;
  font-size: 15px;
  font-weight: 400;
  color: var(--c-ink);
  outline: none;
  transition: all var(--t-fast) var(--ease-apple);
  letter-spacing: -0.01em;
  font-family: inherit;
}
.apple-input:hover { background: #ececf0; }
.apple-input:focus { background: #fff; border-color: var(--c-ink); box-shadow: 0 0 0 4px rgba(29,29,31,0.08); }
.apple-input::placeholder { color: var(--c-gray); }
textarea.apple-input { min-height: 120px; resize: vertical; line-height: 1.5; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:8px;
  padding:12px 24px;
  border-radius:var(--r-sm, 8px);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-apple);
  border: none;
  font-family: inherit;
}
/* Bouton compact des cartes de l'admin. Il existe parce que les boutons
   secondaires y etaient poses avec des styles en ligne, chacun legerement
   different de son voisin : tailles et ecarts flottaient d'une carte a
   l'autre. Une seule definition, un seul rendu. */
.btn-compact {
  padding: 8px 14px;
  font-size: 13px;
  min-height: 36px;
}
/* Les boutons compacts alignes se separent par leur conteneur, pas par des
   marges posees a la main sur chacun. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.btn-primary {
  background: var(--c-ink);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: #000; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-secondary {
  background: var(--c-bg);
  color: var(--c-ink);
}
.btn-secondary:hover:not(:disabled) { background: #ececf0; }
.btn-ghost {
  background: transparent;
  color: var(--c-ink);
}
.btn-ghost:hover { background: var(--c-bg); }
.btn-danger {
  background: #fff;
  color: #8B1C23;
  border: 1px solid rgba(139,28,35,0.2);
}
.btn-danger:hover { background: #fff5f5; border-color: rgba(139,28,35,0.35); }
.btn-block { width: 100%; }
.btn-sm { padding:8px 12px; font-size: 13px; }

/* ===== ALERT / BANNER ===== */
.alert {
  padding:12px 16px;
  border-radius:var(--r-md, 12px);
  font-size: 14px;
  line-height: 1.5;
  margin:12px 0;
  display: flex;
  align-items: flex-start;
  gap:8px;
}
.alert svg { flex-shrink: 0; margin-top:2px; }
.alert-error { background: #fef2f2; color: #991b1b; }
.alert-success { background: #f0fdf4; color: #166534; }

/* ===== BADGE ===== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:8px;
  padding:4px 12px;
  border-radius:var(--r-sm, 8px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}
.badge-gray { background: var(--c-bg); color: var(--c-gray); }
.badge-blue { background: #eff6ff; color: #1e40af; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-green { background: #f0fdf4; color: #166534; }
.badge-red { background: #fef2f2; color: #991b1b; }

/* ===== TABLE ===== */
.table-wrap {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius:var(--r-lg, 18px);
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th {
  text-align: left;
  padding:12px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-gray);
  background: #fafafa;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.table td {
  padding:12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: var(--c-ink);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr.clickable { cursor: pointer; transition: background var(--t-fast); }
.table tr.clickable:hover { background: #fafafa; }
.table-empty {
  padding:60px 24px;
  text-align: center;
  color: var(--c-gray);
  font-size: 14px;
}
@media (max-width: 768px) {
  .table-mobile-stack thead { display: none; }
  .table-mobile-stack tr { display: block; padding:12px 16px; }
  .table-mobile-stack td { display: flex; justify-content: space-between; padding:8px 0; border: none; }
  .table-mobile-stack td::before {
    content: attr(data-label);
    color: var(--c-gray);
    font-size: 12px;
    font-weight: 500;
  }
  .table-mobile-stack tr { border-bottom: 1px solid rgba(0,0,0,0.06); }
}

/* ===== LOADING ===== */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.1);
  border-top-color: var(--c-ink);
  border-radius:50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, #f0f0f2 0%, #fafafa 50%, #f0f0f2 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius:var(--r-sm, 8px);
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== TIMELINE (suivi commande) ===== */
/* ===== Frise de suivi de commande =====
   Le vert vif et la coche blanche donnaient un rendu d'application Android.
   Ici tout est monochrome : c'est le REMPLISSAGE du point et l'epaisseur du
   trait qui portent l'information, pas la couleur. Une etape franchie est un
   point plein, l'etape en cours un anneau, le reste un contour clair.
   ===================================================================== */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 20px 0 4px;
}
.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  position: relative;
}
/* Le trait relie les points sans les toucher : il s'arrete au bord du point
   suivant, ce qui evite l'effet chaine soudee. */
.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 24px;
  bottom: -4px;
  width: 2px;
  border-radius: 2px;
  background: var(--c-line, #d2d2d7);
}
/* Le trait est plein tant que l'etape est derriere nous. */
.timeline-step.done:not(:last-child)::after { background: var(--c-ink, #1d1d1f); }

.timeline-dot {
  width: 14px; height: 14px;
  border-radius: var(--r-full, 980px);
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--c-line, #d2d2d7);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 4px;
  transition: box-shadow var(--t-fast) var(--ease-apple), background var(--t-fast) var(--ease-apple);
}
.timeline-step.done .timeline-dot {
  background: var(--c-ink, #1d1d1f);
  box-shadow: inset 0 0 0 2px var(--c-ink, #1d1d1f);
}
/* L'etape en cours : un anneau epais, creux. Elle se distingue du passe
   comme de l'a-venir sans avoir besoin d'une seconde couleur. */
.timeline-step.current .timeline-dot {
  background: #fff;
  box-shadow: inset 0 0 0 4px var(--c-ink, #1d1d1f), 0 0 0 4px rgba(29,29,31,.07);
}
.timeline-content { flex: 1; min-width: 0; padding-bottom: 2px; }
.timeline-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink, #1d1d1f);
  letter-spacing: -0.014em;
  line-height: 1.35;
}
.timeline-step.current .timeline-title { font-weight: 600; }
.timeline-step:not(.done):not(.current) .timeline-title { color: var(--c-gray-2, #86868b); font-weight: 400; }
.timeline-sub {
  font-size: 13px;
  color: var(--c-gray, #6e6e73);
  margin-top: 3px;
  letter-spacing: -0.006em;
  font-variant-numeric: tabular-nums;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius:var(--r-xs, 4px); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); }

/* ===== UTILS ===== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; } .gap-6 { gap:24px; }
.flex-1 { flex: 1; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.mt-2 { margin-top:8px; } .mt-4 { margin-top:16px; } .mt-6 { margin-top:24px; } .mt-8 { margin-top:32px; }
.mt-1 { margin-top:4px; } .mt-3 { margin-top:12px; }
.mb-1 { margin-bottom:4px; } .mb-3 { margin-bottom:12px; }
.pt-4 { padding-top:16px; } .pb-6 { padding-bottom:24px; }
.justify-end { justify-content: flex-end; }
.mb-2 { margin-bottom:8px; } .mb-4 { margin-bottom:16px; } .mb-6 { margin-bottom:24px; } .mb-8 { margin-bottom:32px; }
.space-y-2 > * + * { margin-top:8px; }
.space-y-3 > * + * { margin-top:12px; }
.space-y-4 > * + * { margin-top:16px; }
.space-y-6 > * + * { margin-top:24px; }
.grid { display: grid; }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; margin-left:auto; margin-right:auto; }
.max-w-lg { max-width: 32rem; margin-left:auto; margin-right:auto; }
.max-w-xl { max-width: 36rem; margin-left:auto; margin-right:auto; }
.max-w-2xl { max-width: 42rem; margin-left:auto; margin-right:auto; }
.max-w-4xl { max-width: 56rem; margin-left:auto; margin-right:auto; }
.max-w-6xl { max-width: 72rem; margin-left:auto; margin-right:auto; }
.px-4 { padding-left:16px; padding-right:16px; }
.px-6 { padding-left:24px; padding-right:24px; }
.py-8 { padding-top:32px; padding-bottom:32px; }
.py-12 { padding-top:48px; padding-bottom:48px; }
.py-16 { padding-top:64px; padding-bottom:64px; }
.p-4 { padding:16px; } .p-6 { padding:24px; } .p-8 { padding:32px; }
.divide-y > * + * { border-top: 1px solid rgba(0,0,0,0.06); }

/* ===== COOKIE BANNER ===== */

/* ===== HERO/PAGE refinements (Porsche-style) ===== */
/* ============================================================
   NOTICE D'INSTALLATION
   Ces règles remplacent quinze attributs style identiques répétés
   sur les cinq étapes. Une seule définition, thématisable.
   ============================================================ */
.notice-section {
  background: #fafafa;
  padding:8px 24px 88px;
}
.notice-inner {
  max-width: 760px;
  margin:0 auto;
}
.notice-steps {
  list-style: none;
  padding:0;
  margin:0;
  display: flex;
  flex-direction: column;
  gap:16px;
}
.notice-step {
  display: flex;
  gap:16px;
  align-items: flex-start;
}
.notice-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius:50%;
  background: #1d1d1f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice-step-text {
  font-size: 15px;
  color: #1d1d1f;
  line-height: 1.6;
  margin:0;
}


.badge-purple { background: #faf5ff; color: #6b21a8; }

/* ============================================================
   UTILITAIRES - echelle unique, identique dans tailwind.css et
   shared.css. Avant cet audit, .text-lg valait 18px sur l'accueil
   et 17px sur les autres pages, .rounded-xl 12px puis 18px : un
   meme composant ne se rendait pas pareil selon la page.
   Toute modification ici doit etre reportee dans l'autre fichier.
   ============================================================ */
.text-xs { font-size:12px;line-height:1.35; }
.text-sm { font-size:14px;line-height:1.45; }
.text-base { font-size:15px;line-height:1.5; }
.text-lg { font-size:17px;line-height:1.45; }
.text-xl { font-size:20px;line-height:1.35; }
.text-2xl { font-size:24px;line-height:1.25; }
.text-3xl { font-size:28px;line-height:1.2; }
.rounded-lg { border-radius:var(--r-sm, 8px); }
.rounded-xl { border-radius:var(--r-md, 12px); }
.rounded-2xl { border-radius:var(--r-lg, 18px); }
.rounded-full { border-radius:var(--r-full, 980px); }
.tracking-wider { letter-spacing:0.08em; }
.tracking-widest { letter-spacing:0.1em; }
.tracking-tight { letter-spacing:-0.025em; }
.hidden { display:none!important; }
.border-t { border-top:1px solid rgba(0,0,0,0.08); }
.border-b { border-bottom:1px solid rgba(0,0,0,0.08); }