/*
Theme Name: Blocksy Child
Template: blocksy
Description: Thème enfant Fiabily
*/

/* ============================================================
   DESIGN SYSTEM FIABILY
   Modifiez uniquement cette section pour changer le design
   global du site. Chaque variable est documentée.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COULEURS PRINCIPALES
     ---------------------------------------------------------- */

  --color-primary:         #593EC4;
  --color-primary-dark:    #432D9A;
  --color-primary-darker:  #2E1F6E;
  --color-primary-light:   #EDE9FB;
  --color-primary-ghost:   #F5F3FD;

  /* ----------------------------------------------------------
     COULEURS NEUTRES
     ---------------------------------------------------------- */

  --color-text:            #1A1A2E;
  --color-text-secondary:  #4A4A6A;
  --color-text-muted:      #7A7A9A;
  --color-bg:              #FFFFFF;
  --color-bg-secondary:    #F8F7FF;
  --color-bg-muted:        #F0EEF9;
  --color-border:          #E8E5F5;
  --color-border-dark:     #C5BEE8;

  /* ----------------------------------------------------------
     COULEURS SÉMANTIQUES
     ---------------------------------------------------------- */

  --color-success:         #0A8A5C;
  --color-success-light:   #E6F7F2;
  --color-warning:         #B45309;
  --color-warning-light:   #FEF3C7;
  --color-danger:          #C0392B;
  --color-danger-light:    #FDECEA;
  --color-info:            #1A6BA8;
  --color-info-light:      #E8F4FD;

  /* ----------------------------------------------------------
     COULEURS BADGES GRAVITÉ
     ---------------------------------------------------------- */

  --color-badge-mineur:      #0A8A5C;
  --color-badge-mineur-bg:   #E6F7F2;
  --color-badge-modere:      #B45309;
  --color-badge-modere-bg:   #FEF3C7;
  --color-badge-critique:    #C0392B;
  --color-badge-critique-bg: #FDECEA;

  /* ----------------------------------------------------------
     TYPOGRAPHIE
     ---------------------------------------------------------- */

  --font-family:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:          0.75rem;
  --font-size-sm:          0.875rem;
  --font-size-base:        1rem;
  --font-size-md:          1.125rem;
  --font-size-lg:          1.25rem;
  --font-size-xl:          1.5rem;
  --font-size-2xl:         1.875rem;
  --font-size-3xl:         2.25rem;
  --font-size-4xl:         3rem;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-tight:     1.2;
  --line-height-normal:    1.5;
  --line-height-relaxed:   1.75;

  /* ----------------------------------------------------------
     ESPACEMENTS
     ---------------------------------------------------------- */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;

  /* ----------------------------------------------------------
     BORDURES ET RAYONS
     ---------------------------------------------------------- */

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     OMBRES
     ---------------------------------------------------------- */

  --shadow-xs:  0 1px 2px rgba(89, 62, 196, 0.05);
  --shadow-sm:  0 2px 8px rgba(89, 62, 196, 0.08);
  --shadow-md:  0 4px 16px rgba(89, 62, 196, 0.12);
  --shadow-lg:  0 8px 32px rgba(89, 62, 196, 0.16);
  --shadow-xl:  0 16px 48px rgba(89, 62, 196, 0.20);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --container-max:  1200px;
  --container-pad:  var(--space-6);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */

  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ----------------------------------------------------------
     HERO ILLUSTRATION — modifiez ces variables facilement
     ---------------------------------------------------------- */

  --hero-illus-bottom:   -60px;
  --hero-illus-left:     -40px;
  --hero-illus-width:    400px;
  --hero-illus-opacity:  0.55;
  --hero-illus-rotate:   0deg;

}


/* ============================================================
   IMPORT GOOGLE FONTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* ============================================================
   RESET ET BASE
   ============================================================ */

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

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

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}


/* ============================================================
   TYPOGRAPHIE
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); }
h2 { font-size: var(--font-size-xl); margin-top: var(--space-10); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}


/* ============================================================
   COMPOSANTS PARTAGÉS
   ============================================================ */

/* Score global */
.score-global {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  background: var(--color-primary-light);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
}

.score-chiffre {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary-darker);
}

.score-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Badges gravité */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-mineur {
  color: var(--color-badge-mineur);
  background: var(--color-badge-mineur-bg);
}

.badge-modere {
  color: var(--color-badge-modere);
  background: var(--color-badge-modere-bg);
}

.badge-critique {
  color: var(--color-badge-critique);
  background: var(--color-badge-critique-bg);
}

/* Cards génériques */
.marque-card,
.modele-card,
.generation-card,
.moteur-card,
.segment-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-normal);
  color: var(--color-text);
  text-decoration: none;
}

.marque-card:hover,
.modele-card:hover,
.generation-card:hover,
.moteur-card:hover,
.segment-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--color-text);
}

/* Grilles */
.marques-grille,
.modeles-grille,
.generations-grille,
.moteurs-grille,
.segments-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}


/* ============================================================
   HEADER FICHE — LAYOUT AVEC IMAGE
   ============================================================ */

.fiche-header-content {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.fiche-header-text {
  flex: 1;
  min-width: 0;
}

.fiche-header-image {
  flex-shrink: 0;
  width: 380px;
  height: 240px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.fiche-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .fiche-header-content {
    flex-direction: column;
  }

  .fiche-header-image {
    width: 100%;
    height: 200px;
  }
}


/* ============================================================
   EN-TÊTE DES FICHES
   ============================================================ */

.fiche-header {
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.fiche-header h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.fiche-millesimes {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}


/* ============================================================
   SECTIONS DES FICHES
   ============================================================ */

.fiche-resume,
.fiche-scores,
.fiche-points,
.fiche-problemes,
.fiche-rappels,
.fiche-technique,
.fiche-commercial,
.fiche-avis,
.fiche-faq,
.fiche-moteurs,
.fiche-generations,
.fiche-modeles,
.fiche-infos,
.fiche-description,
.fiche-fiabilite {
  margin-bottom: var(--space-12);
}

/* Résumé IA */
.fiche-resume {
  background: var(--color-bg-secondary);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6);
}

.fiche-resume h2 {
  margin-top: 0;
  color: var(--color-primary-darker);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.fiche-resume p {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}


/* ============================================================
   SCORES GRILLE
   ============================================================ */

.scores-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.score-nom {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-val {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary-darker);
}


/* ============================================================
   POINTS FORTS / FAIBLES
   ============================================================ */

.fiche-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.points-forts,
.points-faibles {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.points-forts {
  background: var(--color-success-light);
  border: 1px solid #A7E3CE;
}

.points-faibles {
  background: var(--color-danger-light);
  border: 1px solid #F1B7B0;
}

.points-forts h2,
.points-faibles h2 {
  margin-top: 0;
  font-size: var(--font-size-md);
  margin-bottom: var(--space-4);
}

.points-forts h2 { color: var(--color-success); }
.points-faibles h2 { color: var(--color-danger); }

.points-forts ul li,
.points-faibles ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.points-forts ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

.points-faibles ul li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}


/* ============================================================
   PROBLÈMES CONNUS
   ============================================================ */

.probleme-item {
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.probleme-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.probleme-header h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.probleme-item p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.probleme-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.probleme-meta span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.probleme-meta strong {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}


/* ============================================================
   DONNÉES TECHNIQUES ET COMMERCIALES
   ============================================================ */

.technique-grille,
.commercial-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.technique-item,
.commercial-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.technique-item .label,
.commercial-item .label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.technique-item .valeur,
.commercial-item .valeur {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}


/* ============================================================
   RAPPELS CONSTRUCTEURS
   ============================================================ */

.rappel-item {
  padding: var(--space-5);
  background: var(--color-warning-light);
  border: 1px solid #FDE68A;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.rappel-item h3 {
  font-size: var(--font-size-base);
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}

.rappel-item p {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.rappel-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.rappel-meta span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rappel-meta a {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: underline;
}


/* ============================================================
   FAQ
   ============================================================ */

.faq-item {
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-xs);
}

.faq-item h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-darker);
  margin-bottom: var(--space-3);
}

.faq-item p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--line-height-relaxed);
}


/* ============================================================
   MOTORISATIONS
   ============================================================ */

.moteur-card .moteur-nom {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.moteur-card .moteur-carburant {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  width: fit-content;
}

.moteur-card .moteur-puissance {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.moteur-card .moteur-score {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary-darker);
  margin-top: auto;
}


/* ============================================================
   AVIS UTILISATEURS
   ============================================================ */

.fiche-avis {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.avis-score {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.avis-score .note {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary-darker);
}

.avis-score .nb-avis {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}


/* ============================================================
   PAGES ARCHIVE
   ============================================================ */

.archive-header {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.archive-header h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-2);
}

.archive-header p {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  margin: 0;
}

.marque-card .marque-nom,
.modele-card .modele-nom,
.generation-card .generation-nom,
.segment-card .segment-nom {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.marque-card .marque-pays,
.modele-card .modele-marque,
.modele-card .modele-annees,
.generation-card .generation-annees,
.segment-card .segment-exemples {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.marque-card .marque-score,
.modele-card .modele-score,
.generation-card .generation-score,
.moteur-card .moteur-score {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary-darker);
  margin-top: auto;
}

.marque-logo img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: var(--space-2);
}

.segment-card .segment-nb-modeles {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  width: fit-content;
}


/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */

.hero {
  background: linear-gradient(135deg, #3D2A9E 0%, #593EC4 50%, #7B5FD4 100%);
  padding: var(--space-20) 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
  pointer-events: none;
}

.hero-container {
  position: relative;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-20);
}

.hero-bg-illustration {
  position: absolute;
  bottom: var(--hero-illus-bottom);
  left: var(--hero-illus-left);
  width: var(--hero-illus-width);
  opacity: var(--hero-illus-opacity);
  transform: rotate(var(--hero-illus-rotate));
  z-index: 1;
  pointer-events: none;
}

.hero-bg-illustration img {
  width: 100%;
  display: block;
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  color: #FFFFFF;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-5);
}

.hero-title-accent {
  color: #C4B5FD;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-10);
  line-height: var(--line-height-relaxed);
}

/* Barre de recherche */
.hero-search {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  transition: border-color var(--transition-fast);
}

.search-bar:focus-within {
  border-color: var(--color-primary);
}

.search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-family: var(--font-family);
  outline: none;
}

.search-input::placeholder {
  color: var(--color-text-muted);
}

.search-btn {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

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

/* Filtres */
.search-filters {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.filter-select {
  flex: 1;
  min-width: 140px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-family: var(--font-family);
  background: var(--color-bg);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}

.filter-select:focus {
  border-color: var(--color-primary);
}

/* Suggestions */
.search-suggestions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.suggestions-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.suggestion-tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.suggestion-tag:hover {
  background: var(--color-primary);
  color: #FFFFFF;
}


/* ============================================================
   HOMEPAGE — SECTIONS
   ============================================================ */

.section-marques,
.section-fiches,
.section-comment,
.section-temoignages {
  padding: var(--space-16) 0;
}

.section-marques  { background: var(--color-bg); }
.section-fiches   { background: var(--color-bg-secondary); }
.section-comment  { background: var(--color-bg); }
.section-temoignages { background: var(--color-primary-light); }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.section-header h2 {
  margin: 0;
  font-size: var(--font-size-2xl);
}

.section-header.centered {
  flex-direction: column;
  text-align: center;
  gap: var(--space-2);
}

.section-header.centered p {
  margin: 0;
  color: var(--color-text-muted);
}

.section-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
}

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


/* ============================================================
   HOMEPAGE — FICHES CARDS
   ============================================================ */

.fiches-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

.fiche-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-normal);
  color: var(--color-text);
  text-decoration: none;
}

.fiche-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--color-text);
}

.fiche-card-image {
  height: 180px;
  overflow: hidden;
}

.fiche-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.fiche-card:hover .fiche-card-image img {
  transform: scale(1.05);
}

.fiche-card-content {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.fiche-card-titre {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.fiche-card-modele,
.fiche-card-annees {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.fiche-card-score {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-top: auto;
}

.fiche-card-score .score-chiffre {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary-darker);
}

.fiche-card-score .score-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ============================================================
   HOMEPAGE — COMMENT ÇA MARCHE
   ============================================================ */

.etapes-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.etape-card {
  text-align: center;
  padding: var(--space-8);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.etape-numero {
  width: 56px;
  height: 56px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}

.etape-card h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
}

.etape-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--line-height-relaxed);
}


/* ============================================================
   HOMEPAGE — TÉMOIGNAGES
   ============================================================ */

.temoignages-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.temoignage-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.temoignage-etoiles {
  color: #F59E0B;
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-4);
  letter-spacing: 2px;
}

.temoignage-texte {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-5);
  font-style: italic;
  flex: 1;
}

.temoignage-auteur {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.auteur-nom {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.auteur-ville {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.auteur-ville::before {
  content: "— ";
}

.auteur-date {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.auteur-date::before {
  content: "· ";
}


/* ============================================================
   RESPONSIVE — GLOBAL
   ============================================================ */

@media (max-width: 768px) {

  :root {
    --container-pad: var(--space-4);
  }

  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-lg); }

  .fiche-points {
    grid-template-columns: 1fr;
  }

  .scores-grille {
    grid-template-columns: repeat(2, 1fr);
  }

  .marques-grille,
  .modeles-grille,
  .generations-grille,
  .moteurs-grille,
  .segments-grille {
    grid-template-columns: repeat(2, 1fr);
  }

  .technique-grille,
  .commercial-grille {
    grid-template-columns: 1fr;
  }

  .probleme-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .etapes-grille,
  .temoignages-grille {
    grid-template-columns: 1fr;
  }

  .fiches-grille {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Hero mobile */
  .hero {
    padding: var(--space-12) 0 0;
  }

  .hero-title {
    font-size: var(--font-size-2xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .search-filters {
    flex-direction: column;
  }

  .filter-select {
    width: 100%;
  }

  .hero-content {
    padding-bottom: var(--space-8);
  }

  /* Illustration mobile — centrée en bas */
  .hero-bg-illustration {
    position: relative;
    bottom: auto;
    left: auto;
    width: 80%;
    margin: 0 auto;
    opacity: 0.9;
    transform: none;
  }

}

@media (max-width: 480px) {

  .scores-grille {
    grid-template-columns: 1fr;
  }

  .marques-grille,
  .modeles-grille,
  .generations-grille,
  .moteurs-grille,
  .segments-grille {
    grid-template-columns: 1fr;
  }

  .fiche-avis {
    padding: var(--space-5);
  }

}


/* ============================================================
   UTILITAIRES
   ============================================================ */

.text-center  { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.mt-0         { margin-top: 0; }
.mb-0         { margin-bottom: 0; }