/* =========================================================
   Comparateur LGV LNSO — feuille de styles
   ---------------------------------------------------------
   Sommaire :
   1. @font-face (BBB DM Sans Light / Regular / Bold)
   2. Variables (couleurs, espacements, typo)
   3. Reset minimal & base
   4. Typographie (titres, liens, focus)
   5. Layout général (header, main, footer, largeur max)
   6. Patterns RGAA (skip-link, visually-hidden)
   7. Bandeau sticky (form, fieldsets, radios, input number)
   8. Cartes (illustration + corps + sources)
   9. Méthodologie (details/summary)
  10. Responsive (mobile)
   ========================================================= */


/* ---------- 1. @font-face ---------- */
/* Les fichiers doivent être dans ./fonts/
   Format woff2 d'abord (plus léger, supporté par 99% des navigateurs)
   puis woff en fallback. font-display:swap = on affiche le texte avec
   une police système pendant le chargement, puis on swap. Évite le FOIT. */

@font-face {
  font-family: "BBB DM Sans";
  src: url("./fonts/BBBDMSans-Light.woff2") format("woff2"),
       url("./fonts/BBBDMSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BBB DM Sans";
  src: url("./fonts/BBBDMSans-Regular.woff2") format("woff2"),
       url("./fonts/BBBDMSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BBB DM Sans";
  src: url("./fonts/BBBDMSans-Bold.woff2") format("woff2"),
       url("./fonts/BBBDMSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Garabosse";
  src: url("./fonts/Garabosse-Parangonne.woff2") format("woff2"),
       url("./fonts/Garabosse-Parangonne.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Variables ---------- */

:root {
  /* Couleurs */
  --color-text:           #223843;  /* charbon — texte principal */
  --color-bg:             #EFF1F3;  /* blanc cassé — fond */
  --color-card-bg:        #FFFFFF;  /* blanc pur — fond des cartes */
  --color-rule:           #DBD3D8;  /* gris rosé — séparateurs */
  --color-hover:          #D8B4A0;  /* sable — survols */
  --color-accent:         #D77A61;  /* terracotta — accents visuels (bordures, fonds) */
  --color-accent-text:    #A04E36;  /* terracotta foncé — texte / liens (contraste OK) */

  /* Typographie */
  --font-title: "Garabosse", serif;
  --font-stack: "BBB DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-bold:    700;

  /* Échelle modulaire (base 16px, ratio 1.25) */
  --fs-xs:   0.75rem;   /* 12px — légendes, méta */
  --fs-sm:   0.875rem;  /* 14px — texte secondaire */
  --fs-base: 1rem;      /* 16px — texte courant */
  --fs-md:   1.25rem;   /* 20px — sous-titres */
  --fs-lg:   1.5rem;    /* 24px — h2 */
  --fs-xl:   6rem;      /* 32px — h1 */
  --fs-figure: 3.5rem;  /* 56px — chiffre clé des cartes */

  /* Espacements (échelle de 4px) */
  --sp-1: 0.25rem;   /* 4px */
  --sp-2: 0.5rem;    /* 8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */

  /* Layout */
  --container-width: 72rem;   /* 1152px max */
  --content-width:   44rem;   /* 704px pour la lecture */

  /* Bordures */
  --border-thin:   1px solid var(--color-rule);
  --border-strong: 2px solid var(--color-text);
}


/* ---------- 3. Reset minimal & base ---------- */

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

html {
  /* Évite que la police se redimensionne automatiquement sur mobile en paysage */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-stack);
  font-weight: var(--weight-regular);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-bg);
  background: radial-gradient(farthest-corner at 25% 31%, #D77A61ff 0%, #EFF1F3ff 100%), linear-gradient(to bottom left, #D77A61ff 0%, #EFF1F3ff 100%), linear-gradient(to top right, #0d98bfff 0%, #DBD3D8ff 100%);background-blend-mode: color;
  
  /* Lissage typo cohérent */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 960px;
  margin: 0 auto;
}

img {
  max-width: 175px;
  max-height: 175px;
  height: auto;
  display: block;
  filter: drop-shadow(2px 2px 3px var(--color-hover));
}

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

p {
  margin: 0 0 var(--sp-4) 0;
}


/* ---------- 4. Typographie ---------- */

h1, h2, h3 {
  font-weight: var(--weight-bold);
  line-height: 1.2;
  margin: 0 0 var(--sp-4) 0;
  font-family: var(--font-title);
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Focus visible — RGAA : indicateur clair, contrastée */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

strong, b {
  font-weight: var(--weight-bold);
}


/* ---------- 5. Layout général ---------- */

header,
footer,
main {
  padding: var(--sp-5) 0;
}

header {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-5);
}

header h1 {
  margin-bottom: var(--sp-2);
}

header > p {
  font-size: var(--fs-md);
  font-weight: var(--weight-light);
  margin: 0;
  max-width: var(--content-width);
}

main {
  max-width: var(--container-width);
  margin: 0 auto;
}

main > section {
  margin-bottom: var(--sp-7);
}

footer {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-top: var(--border-thin);
  font-size: var(--fs-sm);
  font-weight: var(--weight-light);
}


/* ---------- 6. Patterns RGAA ---------- */

/* Skip-link : invisible jusqu'au focus, puis visible en haut à gauche */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: var(--weight-bold);
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* Masque visuellement, accessible aux lecteurs d'écran */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- 7. Bandeau sticky ---------- */

.sticky-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 4px solid var(--color-accent);
  /* Permet au bandeau de prendre toute la largeur même si <main> est centré */
  margin: 0;
}

.sticky-bar fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-4) 0;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

.sticky-bar fieldset:last-child {
  margin-bottom: 0;
}

.sticky-bar legend {
  font-weight: var(--weight-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-3);
  padding: 0;
}

/* Groupe de radios : disposition côte à côte */
.radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* Chaque option : on cache le radio natif et on stylise le label */
.radio-group label {
  display: block;
  padding: var(--sp-4);
  border: 2px solid var(--color-bg);
  cursor: pointer;
  background: transparent;
  /* Pour que tout le bloc soit cliquable, pas juste le rond */
}

.radio-group input[type="radio"] {
  /* On garde l'input dans le flux pour l'accessibilité,
     mais on le rend invisible visuellement */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* État sélectionné : bordure terracotta */
.radio-group input[type="radio"]:checked + .radio-label {
  /* Le pseudo-élément checked est sur l'input, le style sur le span suivant */
}

.radio-group label:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(215, 122, 97, 0.15); /* terracotta très transparent */
}

/* Focus clavier sur le radio (puisque visuellement caché) */
.radio-group label:has(input:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.radio-group label:hover {
  border-color: var(--color-hover);
}

.radio-label {
  display: block;
}

.radio-label strong {
  display: block;
  font-size: var(--fs-md);
  margin-bottom: var(--sp-1);
}

.radio-desc {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--weight-light);
}

/* Champ km */
.sticky-bar input[type="number"] {
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--weight-bold);
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--color-bg);
  background: var(--color-bg);
  color: var(--color-text);
  width: 8rem;
  /* Retire les flèches sur Firefox */
  -moz-appearance: textfield;
}

/* Retire les flèches sur Webkit */
.sticky-bar input[type="number"]::-webkit-outer-spin-button,
.sticky-bar input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.help-text {
  display: inline-block;
  margin-left: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--weight-light);
}


/* ---------- 8. Cartes ---------- */

main > section:first-of-type{
    background-color: var(--color-bg);
    color: var(--color-text);
    margin-bottom: 0;
    padding: var(--sp-6);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    box-shadow: 0px 0px 10px var(--color-hover);
    z-index: 99;
}

#summary {
  font-size: var(--fs-md);
  font-weight: var(--weight-light);
  max-width: var(--content-width);
  line-height: 1.4;
}

#summary strong {
  font-weight: var(--weight-bold);
}

#cards {
  display: flex;
  flex-flow: column;
  background-color: var(--color-bg);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  box-shadow: 0px 5px 10px var(--color-hover);
}

.card {
  display: flex;
  flex-direction: row;
  background: var(--color-bg);
  margin-bottom: var(--sp-6);
  color: var(--color-text)
}

.card:nth-of-type(2n){
    margin-left: var(--sp-8)
}
.card.card:nth-of-type(2n+1){
    margin-right: var(--sp-8);
}

/* Zone illustration : c'est ICI que tu mets tes images */
.card-illustration {
  /* Ratio carré pour la zone d'illustration */
  aspect-ratio: 1 / 1;
  /* Centre le contenu placeholder */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Style du placeholder texte (à supprimer quand tu mets de vraies images) */
  color: var(--color-text);
  font-weight: var(--weight-light);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 25px;
}

/* Quand tu mettras une <img> dans .card-illustration, ce style s'appliquera : */
.card-illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-figure {
  margin: 0 0 var(--sp-2) 0;
  display: flex;
  flex-direction: column;
}

.card-number {
  font-size: var(--fs-figure);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-text);
  /* Empêche que les très grands chiffres débordent */
  word-break: break-word;
}

.card-unit {
  font-size: var(--fs-sm);
  font-weight: var(--weight-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-top: var(--sp-2);
}

.card-label {
  font-size: var(--fs-md);
  font-weight: var(--weight-bold);
  margin: var(--sp-3) 0 var(--sp-3) 0;
  /* Un trait terracotta sous le libellé */
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--color-accent);
}

.card-comment {
  font-size: var(--fs-sm);
  font-weight: var(--weight-light);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
  /* Pousse les sources en bas de la carte */
  flex-grow: 1;
}

.card-sources {
  font-size: var(--fs-xs);
  border-top: var(--border-thin);
  padding-top: var(--sp-3);
}

.card-sources summary {
  cursor: pointer;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--sp-1) 0;
}

.card-sources summary:hover {
  color: var(--color-accent-text);
}

.card-sources[open] summary {
  margin-bottom: var(--sp-2);
}

.card-unitcost {
  margin: var(--sp-2) 0;
  font-weight: var(--weight-light);
}

.card-sources ul {
  margin: var(--sp-2) 0 0 0;
  padding-left: 1.25em;
  font-weight: var(--weight-light);
}

.card-sources li {
  margin-bottom: var(--sp-1);
}

/* ---------- Animations cartes ---------- */

.card {
  /* État initial : invisible et légèrement décalé vers le bas */
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* État final : visible, en place. Déclenché par JS via IntersectionObserver */
.card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect des préférences système : pas d'anim si l'utilisateur les a désactivées */
@media (prefers-reduced-motion: reduce) {
  .card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 9. Méthodologie ---------- */

.methodo {
  border-top: var(--border-strong);
  padding-top: var(--sp-6);
  border-color: var(--color-hover);
}

.methodo-entry {
  border-bottom: var(--border-thin);
  padding: var(--sp-3) 0;
}

.methodo-entry summary {
  cursor: pointer;
  font-weight: var(--weight-bold);
  font-size: var(--fs-base);
  padding: var(--sp-2) 0;
}

.methodo-entry summary:hover {
  color: var(--color-accent-text);
}

.methodo-entry[open] summary {
  margin-bottom: var(--sp-3);
}

.methodo-entry p {
  font-weight: var(--weight-light);
  max-width: var(--content-width);
  line-height: 1.6;
}


/* ---------- 10. Responsive ---------- */

@media (max-width: 48rem) {
  /* < 768px */

  :root {
    --fs-figure: 2.5rem;
    --fs-xl: 3rem;       /* h1 plus petit qu'en desktop mais reste impactant */
    --fs-lg: 1.25rem;
  }

  /* Le body desktop est limité à 960px ; sur mobile on le laisse respirer */
  body {
    max-width: 100%;
  }

  header,
  main {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  header {
    padding-top: var(--sp-5);
  }

  .sticky-bar {
    padding: var(--sp-3) var(--sp-4);
  }

  /* Les radios passent en colonne sur mobile */
  .radio-group {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  .help-text {
    display: block;
    margin-left: 0;
    margin-top: var(--sp-2);
  }

  /* Cartes : on retire les marges alternées et on passe en colonne */
  .card {
    flex-direction: column;
    margin-bottom: var(--sp-5);
  }

  .card:nth-of-type(2n),
  .card:nth-of-type(2n+1) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* L'illustration : on la laisse au-dessus, centrée, taille raisonnable */
  .card-illustration {
    align-self: center;
    margin-bottom: var(--sp-3);
  }

  .card-illustration img {
    width: auto;     /* override du width:100% desktop */
    height: auto;    /* override du height:100% desktop */
  }

  main > section:first-of-type {
    padding: var(--sp-4);
  }
  /* Footer : padding latéral cohérent avec header/main */
  footer {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  /* Centrer l'illustration de chaque carte (l'align-self ne marche que
     sur les enfants directs de flex, et tu avais .card en row -> column) */
  .card-illustration,
  .card-illustration img {
    margin-left: auto;
    margin-right: auto;
  }

  /* Centrer le chiffre + l'unité sur mobile uniquement */
  .card-figure {
    align-items: center;
    text-align: center;
  }

  .card-body {
    text-align: center;
  }

  .card-label {
    /* Le trait terracotta sous le label : on le centre aussi */
    border-bottom: none;
    position: relative;
    padding-bottom: var(--sp-3);
  }

  .card-label::after {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    background: var(--color-accent);
    margin: var(--sp-3) auto 0;
  }
}


/* ---------- Préférence utilisateur : mouvement réduit ---------- */
/* RGAA recommande de respecter les préférences système */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}