/* Air Juste : la boutique-conseil (direction C validée le 01/11/2026). Nuit bleue profonde + lumière d'air (cyan pâle),
   jaune « acheter », une seule police à caractère (Plus Jakarta Sans) + une mono pour les étiquettes, beaucoup d'espace. */
:root {
  --nuit: #0c1630; --nuit-2: #13214a; --brume: #e9f3ff; --blanc: #fff; --fond: #f6f8fc; --encre: #0c1630; --doux: #4f5b7a;
  --trait: #dfe5f0; --lueur: #8fd3ff; --achat: #ffd23f; --achat-encre: #231a00; --vert: #157a55; --rouge: #b4362c;
  --police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--fond); color: var(--encre); font: 17px/1.6 var(--police) }
a { color: #1d4ed8 } a:hover { color: var(--encre) }
img { max-width: 100%; height: auto }
.saut { position: absolute; left: -9999px } .saut:focus { left: .5rem; top: .5rem; z-index: 99; padding: .5rem 1rem; background: #fff; color: var(--encre) }
.cadre { max-width: 1180px; margin: 0 auto; padding: 0 20px }
:focus-visible { outline: 3px solid var(--lueur); outline-offset: 2px }

/* En-tête : bande de nuit avec halo d'air */
.haut { background: var(--nuit); color: #fff; position: relative; overflow: hidden }
.haut::before { content: ""; position: absolute; width: 900px; height: 900px; right: -320px; top: -420px; background: radial-gradient(circle, rgba(143,211,255,.26), transparent 62%); pointer-events: none }
.haut::after { content: ""; position: absolute; left: -200px; bottom: -380px; width: 700px; height: 600px; background: radial-gradient(circle, rgba(143,211,255,.10), transparent 65%); pointer-events: none }
.entete .cadre { display: flex; align-items: center; gap: 28px; padding-top: 18px; padding-bottom: 18px; position: relative; z-index: 1 }
.logo { font: 800 22px var(--police); letter-spacing: -.03em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; color: inherit }
.logo:hover { color: inherit }
.logo i { width: 12px; height: 12px; border-radius: 50%; background: var(--lueur); box-shadow: 0 0 0 5px rgba(143,211,255,.2), 0 0 0 11px rgba(143,211,255,.08) }
.entete nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 15px }
.entete nav a { color: #c3cde6; text-decoration: none } .entete nav a:hover { color: #fff }
.badge-indep { margin-left: auto; font: 12px var(--mono); color: #a9b8db; border: 1px solid #2c3d6e; border-radius: 99px; padding: 6px 12px; white-space: nowrap }
.surtitre { font: 500 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lueur); margin: 0 0 12px }

/* Tête d'article */
.tete-article { position: relative; z-index: 1; padding-top: 30px; padding-bottom: 46px }
.tete-article h1 { font: 800 clamp(32px, 4.6vw, 54px)/1.04 var(--police); letter-spacing: -.04em; margin: 0 0 14px; max-width: 22ch }
.tete-article .meta { color: #b9c5e3; font-size: 15px; margin: 0 } .tete-article .meta a { color: #fff }

/* Accueil : promesse + parcours */
.hero { display: grid; grid-template-columns: 1fr 500px; gap: 48px; align-items: center; padding-top: 34px; padding-bottom: 64px; position: relative; z-index: 1 }
.hero h1 { font: 800 clamp(40px, 5.4vw, 74px)/.98 var(--police); letter-spacing: -.045em; margin: 0 0 20px }
.hero h1 span { color: var(--lueur); display: block }
.chapo { color: #c0cbe6; font-size: 19px; max-width: 34ch; margin: 0 0 28px }
.preuves { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; color: #c7d2ee }
.preuves b { display: block; font: 800 26px var(--police); color: #fff }
.quiz { background: var(--blanc); color: var(--encre); border-radius: 26px; padding: 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); min-height: 430px }
.etapes { display: flex; gap: 6px; margin-bottom: 18px } .etapes i { flex: 1; height: 5px; border-radius: 3px; background: var(--trait) } .etapes i.on { background: var(--encre) }
.quiz .q { font: 800 25px/1.15 var(--police); letter-spacing: -.02em; margin: 4px 0 16px }
.num { font: 500 12px var(--mono); color: var(--doux); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.choix button { text-align: left; border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 16px; padding: 14px; font: 700 15.5px var(--police); cursor: pointer; display: grid; gap: 4px; transition: border-color .15s, transform .15s }
.choix button small { font: 500 12.5px var(--police); color: var(--doux) }
.choix button:hover { border-color: var(--encre); transform: translateY(-1px) }
.retour { margin-left: auto; background: none; border: 0; color: var(--doux); font: 600 14px var(--police); cursor: pointer; padding: 6px 0 }
.verdict { display: grid; gap: 14px }
.v-tete { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center }
.ph { aspect-ratio: 1; border-radius: 18px; background: radial-gradient(circle, #fff, var(--brume)); display: grid; place-items: center; overflow: hidden }
.ph img { max-width: 82%; max-height: 88%; object-fit: contain }
.v-nom { margin: 0; font: 800 23px/1.12 var(--police); letter-spacing: -.02em }
.v-cat { margin: 4px 0 6px; color: var(--doux); font-size: 14px }
.prix-l { margin: 0; font: 800 26px var(--police) } .prix-l small { font: 400 11.5px/1.4 var(--mono); color: var(--doux); display: block; overflow-wrap: anywhere }
.v-tete > div { min-width: 0 }
.pourquoi { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 15px }
.pourquoi li { padding-left: 24px; position: relative } .pourquoi li::before { content: "✓"; position: absolute; left: 2px; color: var(--vert); font-weight: 800 }
.v-plus { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px }
.alternatives { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--trait); font-size: 14px; color: var(--doux) }
.alternatives button { border: 1px solid var(--trait); background: var(--fond); border-radius: 99px; padding: 6px 12px; margin: 4px 4px 0 0; font: 600 13.5px var(--police); color: var(--encre); cursor: pointer }

/* Boutons : le jaune « acheter » qui s'enfonce */
.btn, .bouton { display: flex; justify-content: center; align-items: center; gap: 8px; border-radius: 14px; padding: 15px 18px; font: 800 17px var(--police); text-decoration: none; border: 0; cursor: pointer; text-align: center }
.btn.achat, .bouton { background: var(--achat); color: var(--achat-encre); box-shadow: 0 3px 0 #b8901a }
.btn.achat:hover, .bouton:hover { color: var(--achat-encre); filter: brightness(1.04) }
.btn.achat:active, .bouton:active { transform: translateY(2px); box-shadow: none }
.bouton.petit { padding: 11px 18px; font-size: 15px }

/* Contenu */
main { padding-top: 26px; padding-bottom: 20px }
.ariane ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--doux) }
.ariane li + li::before { content: "›"; margin-right: 6px }
.article { max-width: 780px }
.article > p, .article li { font-size: 17.5px }
.article h2 { font: 800 clamp(26px, 3.2vw, 34px)/1.1 var(--police); letter-spacing: -.03em; margin: 52px 0 12px }
.article h3 { font: 800 21px/1.25 var(--police); margin: 30px 0 8px }
.article strong { font-weight: 700 }
.avertissement { font-size: 14px; color: var(--doux); background: var(--brume); border-radius: 12px; padding: 10px 14px; margin: 0 0 22px }
.sommaire { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 12px 18px; margin: 0 0 26px; font-size: 15px }
.sommaire summary { cursor: pointer; font-weight: 700 }
blockquote { margin: 22px 0; padding: 18px 22px; background: var(--nuit); color: #e3eaf9; border-radius: 20px; font-size: 16.5px }
blockquote p { margin: 0 } blockquote strong { color: var(--lueur) } blockquote a { color: #fff }
table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 15px; background: var(--blanc); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--trait) }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: top }
th { background: var(--nuit); color: #fff; font-weight: 700; font-size: 14px }
tr:last-child td { border-bottom: 0 }
.tableau-defile { overflow-x: auto }
.faq details { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 14px 18px; margin: 0 0 10px }
.faq summary { cursor: pointer; font-weight: 700 } .faq details p { margin: 10px 0 0 }
.proches { max-width: 780px; margin: 50px 0 0; padding: 22px 24px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px }
.proches h2 { font: 800 20px var(--police); margin: 0 0 8px } .proches ul { margin: 0; padding-left: 20px }

/* Fiche produit */
.fiche { background: var(--blanc); border: 1px solid var(--trait); border-radius: 24px; padding: 22px; margin: 22px 0 30px; display: grid; grid-template-columns: 210px 1fr; gap: 8px 24px; scroll-margin-top: 20px }
.f-media { position: relative; aspect-ratio: 1; border-radius: 18px; background: radial-gradient(circle, #fff, var(--brume)); display: grid; place-items: center; text-align: center }
.f-media img { max-width: 80%; max-height: 80%; object-fit: contain }
.f-media small { position: absolute; bottom: 8px; left: 0; right: 0; font: 10.5px var(--mono); color: var(--doux) }
.f-rang { position: absolute; top: 10px; left: 12px; font: 800 26px var(--police); color: var(--encre) }
.f-vide { font: 12px var(--mono); color: var(--doux) }
.f-choix { margin: 0 0 4px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--vert) }
.f-nom { margin: 0; font: 800 24px/1.15 var(--police); letter-spacing: -.02em }
.f-cat { margin: 2px 0 10px; color: var(--doux); font-size: 14px }
.f-pourqui { margin: 0 0 14px; font-size: 15.5px }
.f-marchands { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.f-marchands li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px }
.f-prix { font: 800 22px var(--police) } .f-prix small { font: 400 11.5px var(--mono); color: var(--doux) }
.f-carac { grid-column: 1 / -1; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px }
.f-carac div { background: var(--fond); border-radius: 12px; padding: 9px 12px }
.f-carac dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--doux) }
.f-carac dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600 }
.f-cols { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px }
.f-titre { margin: 0 0 4px; font-weight: 800; font-size: 15px }
.f-cols ul { margin: 0; padding: 0; list-style: none; font-size: 15px }
.f-cols li { padding-left: 22px; position: relative; margin: 4px 0 }
.plus li::before { content: "+"; position: absolute; left: 4px; color: var(--vert); font-weight: 800 }
.moins li::before { content: "−"; position: absolute; left: 4px; color: var(--rouge); font-weight: 800 }
.f-source { grid-column: 1 / -1; margin: 10px 0 0; font-size: 13px; color: var(--doux) }

/* Engagements, listes, pied */
.gage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 60px 0 10px }
.gage div { background: var(--nuit); color: #dbe4f7; border-radius: 22px; padding: 24px; font-size: 15.5px }
.gage b { display: block; color: #fff; font: 800 20px var(--police); margin-bottom: 6px }
.pied { margin-top: 70px; background: var(--nuit); color: #c3cde6; padding: 40px 0 120px; font-size: 14px }
.pied .logo { color: #fff } .pied-haut p { max-width: 60ch; margin: 10px 0 18px }
.pied a { color: #e6edfb } .pied ul { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 20px }
.mention { border: 1px solid #2c3d6e; border-radius: 14px; padding: 12px 14px; color: #e6edfb; margin: 0 }
.copie { color: #a9b8db; font-size: 13px }
.barre { position: fixed; left: 0; right: 0; bottom: 0; background: var(--blanc); border-top: 1px solid var(--trait); box-shadow: 0 -10px 30px -12px rgba(12,22,48,.25); z-index: 9 }
.barre .cadre { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px }
.barre img { width: 46px; height: 46px; object-fit: contain } .barre .t { font-weight: 800 } .barre small { color: var(--doux); font: 12px var(--mono); display: block }
.barre .bouton { margin-left: auto }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-bottom: 40px }
  .badge-indep { display: none }
  .entete .cadre { flex-wrap: wrap; gap: 10px 28px; padding-bottom: 8px }
  .entete nav { width: 100%; overflow-x: auto }
  .entete nav ul { gap: 18px; white-space: nowrap; padding-bottom: 6px }
  .gage { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  body { font-size: 16px } .cadre { padding: 0 16px }
  .quiz { padding: 18px; border-radius: 22px; min-height: 0 }
  .hero { padding-top: 14px }
  .chapo { font-size: 16.5px; margin-bottom: 4px }
  .preuves, .hero .surtitre { display: none }
  .quiz .q { font-size: 22px }
  .choix { grid-template-columns: 1fr }
  .v-tete { grid-template-columns: 96px 1fr }
  .fiche { grid-template-columns: 1fr; padding: 16px }
  .f-media { max-width: 220px }
  .f-cols { grid-template-columns: 1fr }
  .barre .t { font-size: 14px } .barre img { display: none }
  table { display: block; overflow-x: auto; white-space: nowrap }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important } }