/* ==========================================================================
   Logic Fix — design tokens & base styles
   Style: Minimalism & Swiss Style (noir + accent unique, haute lisibilite)
   Typo: Space Grotesk (titres) + DM Sans (texte)
   ========================================================================== */

/* Polices hebergees sur le site (et non chargees depuis Google Fonts, pour ne
   pas transmettre l'adresse IP des visiteurs a Google -- RGPD). Fichiers
   variables : un fichier couvre toutes les graisses, decoupe latin / latin
   etendu comme sur Google Fonts. Licence SIL Open Font License. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --color-ink: #0a0a0a;
  --color-ink-muted: #4b5154;
  --color-ink-faint: #7a8082;

  --color-bg: #ffffff;
  --color-surface: #f6f8f8;
  --color-surface-alt: #eef2f2;
  --color-border: #e2e7e7;
  --color-border-strong: #c7cfcf;

  --color-primary: #00929a;        /* teal exact du logo : icones, bordures, grands textes */
  --color-primary-strong: #006a73; /* teal fonce : boutons pleins, liens dans le texte (AA 4.5:1) */
  --color-primary-tint: #e3f4f5;
  --color-primary-tint-strong: #cdebed;

  --color-success: #146c43;
  --color-success-tint: #e8f5ee;
  --color-error: #b3261e;
  --color-error-tint: #fbeae9;
  --color-warning-tint: #fff4e0;
  --color-warning-ink: #7a4a00;

  /* Typography */
  --font-heading: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* Spacing scale (8px base) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* Shape & elevation */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06), 0 1px 1px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 146, 154, 0.35);

  --container-max: 1440px;
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Garantit que l'attribut natif "hidden" l'emporte toujours, meme sur un
   element qui porte par ailleurs une classe display:flex/grid (.cluster,
   .grid...) - sans ca, la regle de classe gagne la cascade et l'element
   reste visible malgre "hidden". */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-3); color: var(--color-ink); }
.text-muted { color: var(--color-ink-muted); }

a {
  color: var(--color-primary-strong);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-ink); }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

ul, ol { padding-left: 1.2em; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }
.section--alt { background: var(--color-surface); }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.grid {
  display: grid;
  gap: var(--space-4);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  :root { --fs-3xl: 2.25rem; --fs-4xl: 2.5rem; --fs-2xl: 1.75rem; }
  .section { padding-block: var(--space-6); }
}

/* ---------- "Nos reparations" : un bloc par theme (titre + puces), 3
   symptomes par ligne pour eviter la colonne verticale interminable. Chaque
   theme dans son propre cadre pour bien separer les categories, avec un
   titre nettement plus marque que le texte des puces. ---------- */
.repair-block {
  margin-top: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.repair-block:first-child { margin-top: var(--space-6); }
.repair-block h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary-strong);
  margin: 0 0 var(--space-3);
}
.repair-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.repair-grid--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) {
  .repair-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .repair-block { padding: var(--space-4); }
}
.repair-grid li {
  position: relative;
  padding-left: 1.2em;
  color: var(--color-ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.repair-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Recuperation de donnees : seul point qui doit ressortir, fond teinte clair
   + accent gauche pour rester lisible (texte fonce sur fond clair), pas un
   pave uni sombre. */
.repair-highlight {
  margin-top: var(--space-6);
  background: var(--color-primary-tint);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.repair-highlight h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--color-primary-strong); margin: 0 0 0.3em; }
.repair-highlight p { margin: 0; color: var(--color-ink); font-size: var(--fs-base); line-height: var(--lh-normal); }

/* ---------- "Comment ca marche" : ligne du temps horizontale (vraie
   sequence, donc numerotee -- contrairement aux blocs parallels au-dessus). ---------- */
.timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding-top: var(--space-2);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 60px;
  right: 60px;
  height: 2px;
  background: var(--color-border-strong);
}
.timeline__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-3);
}
.timeline__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex: 0 0 auto;
  z-index: 1;
}
.timeline__step h3 { font-size: var(--fs-md); margin: var(--space-3) 0 var(--space-2); }
.timeline__step p { margin: 0; font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .timeline { flex-direction: column; align-items: stretch; gap: var(--space-5); padding-top: 0; }
  .timeline::before { display: none; }
  /* Numero a gauche, titre et texte empiles a sa droite. */
  .timeline__step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; text-align: left; padding: 0; }
  .timeline__dot { grid-row: 1 / span 2; margin-top: 2px; }
  .timeline__step h3 { grid-column: 2; margin: 0 0 var(--space-1); }
  .timeline__step p { grid-column: 2; }
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Pas de backdrop-filter ici : sur un ancetre du menu mobile (position:fixed),
     il deviendrait son containing block et casserait son dimensionnement plein ecran. */
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.brand img { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav__links {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--color-primary-strong);
  border-bottom-color: var(--color-primary);
}
/* "PC Portable" (lien direct dans le menu deroulant "Reparations et
   tarifs") est un <a>, comme les liens du nav principal -- sans ce
   correctif, .nav__links a (plus specifique que .wizard-option, et non
   scope au menu deroulant) lui vole son padding/border et le desaligne des
   autres options du menu, qui sont des <button> non concernes. Fonctionne a
   toutes les tailles d'ecran par specificite (2 classes), pas par media
   query. */
.nav__links .wizard-option {
  display: block;
  padding: 0.65em 0.8em;
  border-bottom: none;
  white-space: normal;
}

/* ---------- Nav dropdown (Reparations et tarifs) ---------- */
.nav__dropdown { position: relative; }
.nav__dropdown-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: none;
  border: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: var(--color-ink);
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.nav__dropdown-caret { transition: transform var(--transition-fast); flex: 0 0 auto; }
.nav__dropdown-trigger:hover,
.nav__dropdown.is-active .nav__dropdown-trigger,
.nav__dropdown.is-open .nav__dropdown-trigger {
  color: var(--color-primary-strong);
  border-bottom-color: var(--color-primary);
}
.nav__dropdown.is-open .nav__dropdown-caret { transform: rotate(180deg); }

.nav__dropdown-menu {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
}

@media (min-width: 1181px) {
  /* Ouverture au CLIC (pas au survol) : avec 2-3 niveaux de choix, un menu
     qui se referme des qu'on quitte la zone au survol serait perdu en
     descendant vers les options suivantes. Coherent avec le panneau mobile
     (accordeon), qui n'a de toute facon pas de survol tactile. */
  .nav__dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--space-2);
    min-width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 60;
  }
  .nav__dropdown.is-open .nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ---------- Selecteur guide (menu deroulant + module d'accueil) ---------- */
.wizard-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1);
}
.wizard-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0.65em 0.8em;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.wizard-option:hover { background: var(--color-primary-tint); color: var(--color-primary-strong); }

.wizard-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em;
  padding: var(--space-2) var(--space-2) var(--space-1);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.wizard-crumb {
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-primary-strong);
  cursor: pointer;
  padding: 0.25em 0.4em;
  border-radius: var(--radius-sm);
}
.wizard-crumb:last-child { color: var(--color-ink); }
.wizard-crumb:hover { background: var(--color-primary-tint); }
.wizard-crumb-sep { color: var(--color-ink-faint); font-size: var(--fs-xs); }

/* ---------- Selecteur guide "stylise" (module d'accueil) ---------- */
.wizard-panel {
  background: var(--color-primary-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
@media (max-width: 640px) {
  .wizard-panel { padding: var(--space-4); clip-path: none; }
}

.wizard-divider {
  position: relative;
  text-align: center;
  margin: var(--space-3) 0;
  border-top: 1px solid var(--color-border-strong);
}
.wizard-divider span {
  position: relative;
  top: -0.8em;
  background: var(--color-primary-tint);
  padding: 0 var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--fs-sm);
}

.wizard-steps { display: flex; flex-direction: column; }
.wizard-step { border-bottom: 1px solid var(--color-border-strong); }
.wizard-step:last-child { border-bottom: none; }

.wizard-step-header {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  font: inherit;
  text-align: left;
  padding: var(--space-3) 0;
  cursor: default;
  color: var(--color-ink);
  font-weight: 600;
}
.wizard-step-header[data-clickable="true"] { cursor: pointer; }
.wizard-step-header .wizard-step-caret {
  color: var(--color-primary-strong);
  flex: 0 0 auto;
  transition: transform var(--transition-fast);
}
.wizard-step.is-open .wizard-step-caret { transform: rotate(90deg); }
.wizard-step-answer { margin-left: auto; color: var(--color-primary-strong); font-weight: 700; animation: wizardFadeIn var(--transition-fast); }
.wizard-step-body { padding: 0 0 var(--space-4); animation: wizardFadeIn var(--transition-base); }

/* Chaque etape/sous-menu est entierement reconstruite en JS a chaque
   navigation (pas de transition DOM possible entre avant/apres) -- on joue
   donc une animation d'entree a chaque insertion plutot qu'un simple
   apparition brute. */
@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.wizard-list,
.wizard-crumbs {
  animation: wizardFadeIn var(--transition-base);
}

/* Flexbox + wrap plutot que grid : chaque ligne de cartes (meme incomplete,
   ex 3 cartes qui ne remplissent pas la largeur) se centre independamment,
   ce qu'un grid classique ne fait pas (il centre le bloc entier et laisse la
   derniere ligne incomplete collee a gauche). */
.wizard-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* Cartes "modele" : chaque ligne (calculee en JS, voir chunkBalanced) est son
   propre conteneur flex centre, empile verticalement avec le meme espacement
   que les cartes entre elles. */
.wizard-card-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.wizard-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 0 1 180px;
  min-height: 170px;
  background: #fff;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--color-ink);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.wizard-card svg { color: var(--color-primary-strong); flex: 0 0 auto; }
.wizard-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* Toutes les cartes avec un libelle (modele, type, ligne, console) ancrent
   l'icone en haut plutot que de la centrer verticalement, pour que tous les
   icones d'une meme grille restent alignes meme si un libelle fait 2 lignes
   (ex "Nintendo Switch 1 / Lite / OLED") alors que ses voisins tiennent sur
   une seule. */
.wizard-card--top { justify-content: flex-start; }

/* Cartes "modele" (icone processeur) : jamais plus de 4 par ligne, meme sur
   un tres large ecran -- au-dela, ca fait une ligne trop chargee et illisible
   (ex 8 references en 7+1). Base en % pour rester a 4/ligne quelle que soit
   la largeur du conteneur, avec un min-width pour retomber a moins par ligne
   sur mobile plutot que d'ecraser les cartes. */
.wizard-card--chip { flex-basis: calc(25% - 12px); min-width: 180px; }
/* Mobile : 2 cartes par ligne (type, ligne Mac, taille, console) au lieu
   d'une seule colonne etroite. Les cartes "modele" restent une par ligne,
   leurs references tiennent sur une ligne et ont besoin de la largeur. */
@media (max-width: 640px) {
  .wizard-card:not(.wizard-card--chip) { flex-basis: calc(50% - var(--space-3) / 2); min-height: 140px; padding: var(--space-3); }
}
.wizard-card-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 2.6em;
}
.wizard-card-sub-line { white-space: nowrap; }

/* Libelle console en 2 parties quand le nom regroupe plusieurs variantes
   (ex "Nintendo Switch" + "1 / Lite / OLED") : le nom principal ressort, la
   liste de variantes est secondaire et plus discrete. */
.wizard-card-label { font-weight: 700; }
.wizard-card-label-variant { display: block; font-size: 0.82em; font-weight: 500; color: var(--color-ink-muted); margin-top: 0.15em; }

.wizard-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wizard-pill {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.7em 1em;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wizard-pill:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

.wizard-result {
  background: #fff;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-2);
}
.wizard-result h3 { font-size: var(--fs-md); margin-bottom: 0.2em; }

.header-social { display: flex; gap: 0.4rem; }
.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header-social a:hover { background: var(--color-primary-tint); color: var(--color-primary-strong); }

/* Le bouton telephone ne rentre pas dans la barre desktop a cote des liens +
   reseaux + CTA "Envoyer votre machine" : il n'apparait que dans le panneau
   mobile plein ecran (regle plus bas), comme demande.
   Selecteur .nav .phone-cta (specificite 2 classes) pour primer sur .btn
   (display:inline-flex, 1 classe) defini plus loin dans ce fichier. */
.nav .phone-cta { display: none; }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1180px) {
  .nav__toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
    border-top: 1px solid var(--color-border);
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }

  /* Menu deroulant -> accordeon dans le panneau mobile (pas de survol tactile) */
  .nav__dropdown { border-bottom: 1px solid var(--color-border); }
  .nav__dropdown-trigger { width: 100%; justify-content: space-between; padding: var(--space-3) 0; }
  .nav__dropdown-menu {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height var(--transition-base);
  }
  .nav__dropdown.is-open .nav__dropdown-menu {
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: var(--space-2);
  }
  .nav__dropdown-menu .wizard-option { padding-left: var(--space-3); }

  .header-social { padding: var(--space-3) 0; }
  .nav .btn { margin-top: var(--space-3); width: 100%; justify-content: center; }
  .nav .phone-cta { display: inline-flex; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0.7em 1.4em;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--color-primary-strong); color: #fff; }
.btn--primary:hover { background: #00565e; color: #fff; }

.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.btn--outline:hover { border-color: var(--color-ink); color: var(--color-ink); }

.btn--ghost { background: transparent; color: var(--color-primary-strong); }

/* CTA de fin de fiche tarif : les 2 actions principales de la page, en
   cartes cote a cote pour sauter aux yeux bien plus qu'un simple cluster
   de boutons (option 3 validee sur le canvas de design). */
.tarif-cta-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 700px) {
  .tarif-cta-cards { grid-template-columns: 1fr; }
}
.tarif-cta-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tarif-cta-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tarif-cta-card__head h3 { margin: 0; }
.tarif-cta-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary-strong);
  font-size: var(--fs-base);
  font-weight: 700;
}
.tarif-cta-card h3 { font-size: var(--fs-md); font-weight: 700; }
.tarif-cta-card p { margin: 0; color: var(--color-ink-muted); font-size: var(--fs-sm); }
.tarif-cta-card__btn {
  margin-top: var(--space-1);
  align-self: flex-start;
  min-height: 56px;
  padding: 0.9em 1.8em;
  font-size: var(--fs-base);
  font-weight: 700;
}
.tarif-cta-card .btn--outline { border-width: 2px; }

.tarif-cta-card--primary {
  border: 2px solid var(--color-primary-strong);
  background: var(--color-primary-tint);
}
.tarif-cta-card--primary .tarif-cta-card__icon { background: var(--color-primary-strong); color: #fff; }
.tarif-cta-card--primary h3 { color: var(--color-primary-strong); }
.btn--ghost:hover { background: var(--color-primary-tint); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--color-primary-tint);
  color: var(--color-primary-strong);
}
.badge--neutral { background: var(--color-surface-alt); color: var(--color-ink-muted); }
.badge--warning { background: var(--color-warning-tint); color: var(--color-warning-ink); }

/* ---------- Cards ---------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.card--surface { background: var(--color-surface); }
.card--link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.two-col-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 1000px;
  margin: var(--space-5) auto 0;
}
.two-col-text p { margin: 0; text-align: justify; hyphens: auto; }
.two-col-text__divider { background: var(--color-border-strong); }
@media (max-width: 800px) {
  .two-col-text { grid-template-columns: 1fr; gap: var(--space-3); }
  .two-col-text p { text-align: left; } /* justifie sur une colonne etroite = gros trous entre les mots */
  .two-col-text__divider { display: none; }
}
.depot-info {
  display: grid;
  grid-template-columns: calc(180px + var(--space-5)) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 1000px;
  margin: var(--space-5) auto 0;
  padding: var(--space-5);
}
.depot-info__photo-btn {
  display: block;
  padding: 0;
  margin-right: var(--space-5);
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-md);
}
.depot-info__photo { display: block; width: 100%; height: auto; border-radius: var(--radius-md); transition: opacity var(--transition-fast); }
.depot-info__photo-btn:hover .depot-info__photo { opacity: 0.85; }

.lightbox {
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(10, 10, 10, 0.8); }
/* Photo source en 287x510 : au-dela de ~1,5x elle devient floue. */
.lightbox img { display: block; width: auto; height: min(85vh, 765px); max-width: 90vw; object-fit: contain; border-radius: var(--radius-lg); }
.lightbox__close {
  position: absolute;
  top: calc(-1 * var(--space-5));
  right: calc(-1 * var(--space-5));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
}
.depot-info h3 { font-size: var(--fs-md); font-weight: 700; color: var(--color-primary-strong); margin-bottom: var(--space-2); }
.depot-info p { margin: 0; }
@media (max-width: 800px) {
  .depot-info { grid-template-columns: 1fr; gap: var(--space-4); }
  .depot-info__photo-btn { max-width: 220px; margin-right: 0; }
  .lightbox__close { top: var(--space-2); right: var(--space-2); }
}
.contact-card {
  width: fit-content;
  max-width: 100%;
  margin: var(--space-7) auto 0;
  padding-inline: var(--space-6);
  align-items: center;
  text-align: center;
}
.contact-card h3 { white-space: nowrap; }
.contact-card .tarif-cta-card__btn { align-self: center; }
@media (max-width: 700px) {
  .contact-card h3 { white-space: normal; }
}
.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary-strong);
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.card--link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.category-card__icon { display: block; color: var(--color-primary-strong); margin-bottom: var(--space-2); }
.category-card__icon svg { display: block; }

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-8) var(--space-7);
  background: linear-gradient(180deg, var(--color-primary-tint) 0%, rgba(255,255,255,0) 65%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-primary-strong);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.hero h1 { font-size: var(--fs-3xl); }
.hero__lead { font-size: var(--fs-md); color: var(--color-ink-muted); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------- Price table ---------- */
.price-table-wrap { overflow-x: auto; }
table.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 560px;
}
.price-table caption { text-align: left; padding: 0 0 var(--space-3); font-weight: 600; }
.price-table thead th {
  text-align: left;
  background: var(--color-primary-tint);
  color: var(--color-primary-strong);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
}
.price-table tbody td, .price-table tbody th {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.price-table tbody tr:hover { background: var(--color-surface); }
.price-table td.price, .price-table th.price { font-weight: 700; white-space: nowrap; }
.price-table tbody tr:last-child td { border-bottom: none; }

/* Page tarif individuelle : bloc "Tarifs" au meme gabarit que "Nos
   reparations" en accueil (cadre + puces), avec le prix de chaque prestation
   et les symptomes traites associes -- pour ne pas ressembler a un simple
   tableau de donnees comme "Modeles concernes" juste en dessous. */
.tarif-services { row-gap: var(--space-4); }
.tarif-services li::before { top: 1.2em; }
.tarif-services__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-3);
}
.tarif-services__label { color: var(--color-ink); font-weight: 700; font-size: var(--fs-lg); }
.tarif-services__price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--color-primary-strong);
  white-space: nowrap;
}
.tarif-services__symptoms {
  margin: 0.3em 0 0;
  color: var(--color-ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
@media (max-width: 480px) {
  .tarif-services__label { font-size: var(--fs-md); }
}
/* Tres petits ecrans : le prix passe sous l'intitule plutot que de deborder. */
@media (max-width: 360px) {
  .tarif-services__row { flex-wrap: wrap; }
}

.models-list__title { font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-muted); margin: 0 0 var(--space-2); }
.models-list .price-table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.models-list .price-table { font-size: var(--fs-xs); min-width: 480px; }
.models-list .price-table thead th { background: var(--color-surface-alt); color: var(--color-ink-muted); font-weight: 600; }

/* ---------- Forms ---------- */
.form-field { margin-bottom: var(--space-4); }
.form-field label,
.form-field legend {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-1);
}
.form-hint { font-size: var(--fs-xs); color: var(--color-ink-muted); margin-top: 0.35em; }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.75em 0.9em;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-ink);
  min-height: 44px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0 0 var(--space-4); }
.checkbox-field { display: flex; align-items: flex-start; gap: 0.6em; }
.checkbox-field input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 auto; margin-top: 0.2em; }
.checkbox-field label { font-weight: 400; font-size: var(--fs-sm); }

.form-message { padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.form-message--success { background: var(--color-success-tint); color: var(--color-success); }
.form-message--error { background: var(--color-error-tint); color: var(--color-error); }
.field-error { color: var(--color-error); font-size: var(--fs-xs); margin-top: 0.35em; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: #d8dcdc;
  padding-block: var(--space-7) var(--space-5);
}
.site-footer a { color: #fff; }
.site-footer h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
.site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5em; }
.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: #9aa1a1;
}
.contact-details { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.contact-details li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-ink-muted); }
.contact-details .icon-circle { width: 32px; height: 32px; margin: 0; flex-shrink: 0; }

.social-row { display: flex; gap: var(--space-3); }
.social-row a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(255,255,255,0.08); }
.social-row a:hover { background: var(--color-primary); }

/* ---------- Pages legales (mentions legales, CGV) ---------- */
.legal-page h2 { font-size: var(--fs-xl); margin: var(--space-6) 0 var(--space-2); }
.legal-page ul { padding-left: 1.2em; }
.legal-annex { margin-top: var(--space-6); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.legal-annex summary { cursor: pointer; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; color: var(--color-primary-strong); }
.legal-annex[open] summary { margin-bottom: var(--space-3); }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.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;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-ink); color: #fff;
  padding: 0.8em 1.2em; z-index: 100; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Print (fiche à imprimer) ---------- */
/* ---------- Formulaire d'envoi ---------- */
.envoi-tarif {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-tint);
}
.envoi-tarif__title { margin: 0 0 var(--space-2); font-weight: 700; color: var(--color-primary-strong); }
.envoi-tarif__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3em; }
.envoi-tarif__list li { display: flex; justify-content: space-between; gap: var(--space-3); }
.envoi-tarif__list strong { font-family: var(--font-heading); color: var(--color-primary-strong); white-space: nowrap; }
.envoi-tarif__note { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-ink-muted); }
.envoi-recap {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-tint);
}
.envoi-recap__title { margin: 0 0 var(--space-2); font-weight: 700; color: var(--color-primary-strong); }
.envoi-recap ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 0.35em; font-size: var(--fs-sm); }
.envoi-cp-ville { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-3); }
@media (max-width: 480px) {
  .envoi-cp-ville { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Fiche imprimable ---------- */
.fiche-check { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-3); }
.fiche-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.fiche-password {
  display: block;
  width: 100%;
  max-width: 340px;
  min-height: 0;
  margin-bottom: var(--space-4);
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  background: var(--color-primary-tint);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.print-only { display: none; }
@page { size: A4; margin: 10mm; }
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { color: #000; font-size: 10pt; }
  /* La fiche doit tenir sur une seule page A4. */
  .section { padding: 0 !important; }
  .container { padding-inline: 0 !important; max-width: none !important; }
  .fiche { border: 2px solid #000; padding: 16px 20px; }
  .fiche h4 { margin: 10px 0 2px; font-size: 11pt; }
  .fiche p { margin-bottom: 4px; }
  .fiche hr { margin: 10px 0 !important; }
  .fiche .form-message { padding: 8px 12px; margin-bottom: 0; font-size: 9pt; }
  .fiche-password-print {
    min-height: 32px;
    margin-bottom: 16px;
    padding: 4px 2px;
    border-bottom: 1px solid #000;
    font-family: var(--font-heading);
    font-size: 16pt;
    font-weight: 600;
    overflow-wrap: anywhere;
  }
}