/* ============================================================
   Scriptonic — outils-common.css
   CSS commun à tous les outils web.
   Source unique de vérité pour : variables, reset, boutons,
   FAQ, section SEO, footer local, encadrés, disclaimer,
   animations et utilitaires.

   Chargé AVANT nav.css et le style.css local de chaque outil.
   Ne contient AUCUN composant spécifique à un outil.

   Ordre de chargement dans chaque HTML :
     1. outils-common.css  (ce fichier)
     2. nav.css             (header/footer partagé)
     3. style.css           (composants spécifiques à l'outil)
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. VARIABLES CSS
   Source unique. Ne jamais redéfinir dans un style.css local.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Palette principale */
  --primary:        #fbba32;
  --primary-dark:   #e0a520;
  --primary-glow:   rgba(251, 186, 50, 0.12);
  --primary-border: rgba(251, 186, 50, 0.4);

  /* Fonds */
  --dark:           #1a1a1a;
  --surface:        #0a0a0a;
  --surface-hover:  #111111;

  /* Texte */
  --light:          #ffffff;
  --muted:          #888888;

  /* Bordures */
  --border:         #333333;

  /* États */
  --warning-bg:     rgba(251, 186, 50, 0.08);
  --error:          #f44336;
  --success:        #4caf50;

  /* Transitions */
  --transition-fast:   200ms ease;
  --transition-normal: 350ms ease;

  /* Typographie */
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   2. RESET ET BASE
   Appliqué globalement. Les outils locaux n'ont plus besoin
   de redéfinir *, html, body.
   ───────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-stack);
  background-color: var(--dark);
  color: var(--light);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
button { font-family: inherit; }

a {
  color: inherit;
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────
   3. UTILITAIRES
   Classes réutilisables dans tous les outils.
   ───────────────────────────────────────────────────────────── */

/* Masquer un élément (prioritaire) */
.hidden {
  display: none !important;
}

/* Masquage visuel pour accessibilité (contenu lisible par les lecteurs d'écran) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Étiquette de section (label uppercase au-dessus d'un bloc) */
/* Utilisée dans Budget Estimator, ROI Simulator */
.section-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}


/* Animation d'apparition standard */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ─────────────────────────────────────────────────────────────
   4. BANDEAU BRANDÉ
   Placé juste avant <main> dans chaque outil.
   Indépendant de nav.js. Toujours visible.
   Structure : <div class="tool-brand-banner">
                 <span class="tool-brand-name">Tempotonic</span>
                 <span class="tool-brand-by">by Scriptonic</span>
               </div>
   ───────────────────────────────────────────────────────────── */

.tool-brand-banner {
  text-align: center;
  padding: 0.5rem 1.5rem 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
}

.tool-brand-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.tool-brand-by {
  font-size: 0.875rem;
  color: var(--muted);
}


/* ─────────────────────────────────────────────────────────────
   4b. TITRE ET SOUS-TITRE D'OUTIL
   Communs à tous les outils. Le titre est le H1 principal,
   le sous-titre (tagline) est le paragraphe descriptif
   juste en dessous.
   Structure : <h1 class="tool-title">Nom de l'outil</h1>
               <p class="tool-tagline">Description courte.</p>
   Si un outil a besoin de valeurs différentes (ex: Brieftonic
   avec margin-bottom réduit), il override dans son style.css.
   ───────────────────────────────────────────────────────────── */

.tool-title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: var(--light);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.tool-title-beta {
  font-size: 0.5em;
  opacity: 0.6;
  font-weight: 400;
}

.tool-tagline {
  text-align: center;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}


/* ─────────────────────────────────────────────────────────────
   4c. CONTENEUR PRINCIPAL
   Conteneur flex centré pour tous les outils.
   Nom canonique : .tool-container (pas .tool-wrapper).
   ───────────────────────────────────────────────────────────── */

.tool-container {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}


/* ─────────────────────────────────────────────────────────────
   5. BOUTONS
   Système unifié. Noms canoniques : .btn, .btn-primary,
   .btn-secondary, .btn-ghost.
   Les variantes spécifiques (btn-next, btn-prev, cta-restart)
   restent dans le style.css local de l'outil concerné.
   ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--dark);
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

.btn-secondary {
  background-color: transparent;
  color: var(--light);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--light);
}

.btn-ghost {
  background-color: transparent;
  color: var(--muted);
  border: none;
}

.btn-ghost:hover {
  color: var(--light);
}

.btn-action {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-action:hover {
  background: var(--primary-glow);
}


/* ─────────────────────────────────────────────────────────────
   5. ENCADRÉS (notice-box)
   Encadré avec bordure jaune à gauche. Utilisé pour les
   conseils (Tempotonic), l'accompagnement (Budget Estimator),
   les bénéfices qualitatifs (ROI Simulator).
   ───────────────────────────────────────────────────────────── */

.notice-box {
  border-left: 3px solid var(--primary);
  background-color: var(--surface);
  padding: 1rem 1.25rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 1.5rem;
}

.notice-box__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: 0.4rem;
}

.notice-box p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--light);
}


/* ─────────────────────────────────────────────────────────────
   6. DISCLAIMER
   Texte légal/contextuel en bas de résultat.
   ───────────────────────────────────────────────────────────── */

.disclaimer {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 28px;
}


/* ─────────────────────────────────────────────────────────────
   7. SECTION SEO
   Structure commune sous chaque outil. Contient le wrapper,
   le titre, l'intro, les colonnes et les styles de base.
   Le contenu des colonnes (dl/dt/dd, ul/li, p) peut varier
   par outil et reste dans le style.css local si nécessaire.
   ───────────────────────────────────────────────────────────── */

.seo-section {
  border-top: 1px solid var(--border);
  padding: 3rem 1.5rem;
}

.seo-container {
  max-width: 960px;
  margin: 0 auto;
}

.seo-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.seo-intro {
  margin-bottom: 2rem;
}

.seo-intro p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.seo-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.seo-column h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.7rem;
}

.seo-column p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 0.8rem;
}

/* Listes prix dans les colonnes SEO (Budget Estimator, etc.) */
.seo-column ul {
  list-style: none;
  padding: 0;
}

.seo-column ul li {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.seo-column ul li:last-child {
  margin-bottom: 0;
}

.seo-column ul li span {
  color: var(--light);
  font-weight: 500;
  white-space: nowrap;
}

/* Lien dans le contenu SEO */
.seo-column a,
.seo-section a {
  color: var(--primary);
  text-decoration: none;
}

.seo-column a:hover,
.seo-section a:hover {
  text-decoration: underline;
}

/* H3 autonomes dans la section SEO (hors colonnes) */
.seo-section > .seo-container > h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 2rem;
  margin-bottom: 0.7rem;
}

.seo-section > .seo-container > p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}


/* ─────────────────────────────────────────────────────────────
   8. FAQ
   Structure : <details class="faq-item">
                 <summary class="faq-question">...</summary>
                 <div class="faq-answer"><p>...</p></div>
               </details>
   Identique sur les 4 outils. Ne jamais utiliser de JS
   pour le toggle, details/summary est natif.
   ───────────────────────────────────────────────────────────── */

.seo-faq {
  margin-top: 2.5rem;
}

.seo-faq h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.faq-question {
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--light);
  cursor: pointer;
  list-style: none;
}

/* Supprimer le marker natif sur tous les navigateurs */
.faq-question::-webkit-details-marker {
  display: none;
}

/* Indicateur +/- à gauche */
.faq-question::before {
  content: '+';
  display: inline-block;
  width: 1.2rem;
  color: var(--primary);
  font-weight: 700;
  margin-right: 0.5rem;
}

details[open] .faq-question::before {
  content: '−';
}

.faq-answer {
  padding: 0 1rem 1rem 2.7rem;
}

.faq-answer p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
}


/* ─────────────────────────────────────────────────────────────
   9. (SUPPRIMÉ) Footer local — désormais géré par nav.js
   Les liens croisés outils sont injectés dynamiquement.
   ───────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────
   10. INFOBULLES (tooltip)
   Infobulle custom positionnée en haut à droite du curseur.
   Usage : <span class="tooltip" data-tooltip="Texte d'aide">?</span>
   Ne pas utiliser title="", le navigateur le positionne sous
   le curseur et le début du texte est masqué.
   ───────────────────────────────────────────────────────────── */

.tooltip {
  position: relative;
  cursor: help;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: calc(100% + 4px);
  background: var(--surface);
  color: var(--light);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  white-space: normal;
  width: max-content;
  max-width: 260px;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tooltip:hover::after,
.tooltip:focus::after {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────
   11. STEPPER (pastilles numérotées)
   Parcours séquentiel. Utilisé par Tempotonic (3 étapes),
   Brieftonic (5 étapes), ROI Simulator (4 étapes).
   Le nombre de pastilles est libre, le CSS s'adapte.
   ───────────────────────────────────────────────────────────── */

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: default;
  padding: 0.3rem;
  flex-shrink: 0;
  font-family: inherit;
}

.stepper-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  border: 2px solid var(--border);
  color: var(--muted);
  background: var(--surface);
  transition: all 0.3s ease;
}

.stepper-label {
  font-size: 0.875rem;
  color: var(--muted);
  transition: color 0.3s ease;
  white-space: nowrap;
}

.stepper-step.active .stepper-pill {
  border-color: var(--primary);
  color: var(--dark);
  background: var(--primary);
}

.stepper-step.active .stepper-label {
  color: var(--primary);
  font-weight: 600;
}

.stepper-step.completed .stepper-pill {
  border-color: var(--primary);
  background: transparent;
  font-size: 0;
}

.stepper-step.completed .stepper-pill::after {
  content: '✓';
  font-size: 0.875rem;
  color: var(--primary);
}

.stepper-step.completed .stepper-label {
  color: var(--muted);
}

.stepper-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 24px;
  max-width: 80px;
  transition: background 0.3s ease;
}

.stepper-line.active {
  background: var(--primary);
}


/* ─────────────────────────────────────────────────────────────
   12. CARTE CLIQUABLE GÉNÉRIQUE
   Base commune pour tous les éléments interactifs type "card".
   Chaque outil ajoute sa classe spécifique pour les variantes
   (padding, layout interne, hover transform, etc.).
   Usage : <button class="card profile-card" ...>
   ───────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--light);
}

.card:hover {
  border-color: var(--primary-border);
  background-color: var(--surface-hover);
}

.card.selected,
.card.active {
  border-color: var(--primary);
  background: var(--primary-glow);
}

.card-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--light);
  display: block;
}

.card.selected .card-label,
.card.active .card-label {
  color: var(--primary);
}


/* ─────────────────────────────────────────────────────────────
   13. PARCOURS SÉQUENTIEL
   Composants pour les outils à étapes : step-title, step-content,
   step-nav, step-summary.
   ───────────────────────────────────────────────────────────── */

/* Titre d'étape : sémantiquement H2, visuellement niveau 4 */
.step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--light);
  margin-bottom: 1.5rem;
}

/* Contenu d'étape : caché par défaut, affiché avec .active */
.step-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.step-content.active {
  display: block;
}

/* Navigation entre étapes (Suivant / Précédent) */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Résumé replié d'une étape validée */
.step-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  animation: fadeIn 0.25s ease;
}

.step-summary__check {
  color: var(--primary);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.step-summary__text {
  flex: 1;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.4;
}

.step-summary__edit {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  flex-shrink: 0;
  font-family: inherit;
}

.step-summary__edit:hover {
  opacity: 0.75;
}


/* ─────────────────────────────────────────────────────────────
   14. CTA DE SORTIE
   Conteneur horizontal pour les boutons de fin de parcours.
   ───────────────────────────────────────────────────────────── */

.cta-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}


/* ─────────────────────────────────────────────────────────────
   15. CHAMPS DE FORMULAIRE
   Labels, inputs, textes d'aide partagés entre outils.
   ───────────────────────────────────────────────────────────── */

.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.field-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--light);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.field-input:focus {
  outline: none;
  border-color: var(--primary);
}

.field-help {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.param-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}


/* ─────────────────────────────────────────────────────────────
   16. SECTION RÉSULTAT (show/hide)
   ───────────────────────────────────────────────────────────── */

.result-section {
  display: none;
  animation: fadeIn 0.3s ease;
}

.result-section.visible {
  display: block;
}


/* ─────────────────────────────────────────────────────────────
   17. LIEN RETOUR CONTEXTUEL
   Bandeau affiché quand l'utilisateur arrive depuis un autre outil.
   ───────────────────────────────────────────────────────────── */

.return-link {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1.5rem;
}

.return-link a {
  color: var(--primary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--transition-fast);
}

.return-link a:hover {
  color: var(--primary-dark);
}


/* ─────────────────────────────────────────────────────────────
   18. LIGNE DE DÉTAIL (label + valeur)
   ───────────────────────────────────────────────────────────── */

.detail-row {
  display: flex;
  align-items: baseline;
  font-size: 0.875rem;
}

.detail-row-label {
  color: var(--muted);
}

.detail-row-value {
  font-weight: 600;
  color: var(--light);
}


/* ─────────────────────────────────────────────────────────────
   19. BLOC DÉPLIABLE (toggle JS)
   Bloc avec bouton toggle et contenu caché.
   Le toggle JS ajoute/retire .expert-params-open sur le body.
   ───────────────────────────────────────────────────────────── */

.expert-params-block {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.expert-params-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background: var(--surface);
  border: none;
  color: var(--light);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
  font-family: inherit;
}

.expert-params-toggle:hover {
  background: var(--surface-hover);
}

.expert-toggle-icon {
  color: var(--muted);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.expert-params-body {
  display: none;
  padding: 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-direction: column;
  gap: 1.5rem;
}

.expert-params-body.expert-params-open {
  display: flex;
}


/* ─────────────────────────────────────────────────────────────
   20. CURSEUR (input range)
   ───────────────────────────────────────────────────────────── */

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
}


/* ─────────────────────────────────────────────────────────────
   21. BADGE / ÉTIQUETTE
   ───────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}

.badge--primary {
  background: var(--primary);
  color: var(--dark);
}

.badge--ghost {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
}


/* ─────────────────────────────────────────────────────────────
   22. RESPONSIVE COMMUN
   Breakpoint principal : 768px.
   Les breakpoints spécifiques restent dans le style.css local.
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .tool-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .tool-container {
    padding: 1.5rem 1rem 2rem;
  }

  .seo-section {
    padding: 2rem 1rem;
  }

  .seo-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}