/* Soleil Compté — univers « le cadran solaire et le relevé de compteur ».
   Tête de page : la course du soleil tracée comme dans un bureau d'études (arc du jour calculé pour la date, soleil placé à l'heure
   du visiteur, ombre du gnomon ; statique si « réduire les animations ») sur un fond bleu cellule quadrillé comme un panneau.
   Sous la tête : la règle du cadran (VI → XVIII), avec le repère à l'heure locale. Fond de lecture : papier ensoleillé,
   arcs du diagramme solaire en filigrane. Étiquettes façon relevé de compteur (Martian Mono clair sur ardoise).
   Titres Gloock, texte Newsreader, chiffres Martian Mono (Bunny Fonts). Boutons jaunes « acheter », bordure d'encre, ombre décalée.
   Aides réutilisables par les outils : .releve (fenêtre de compteur), .etiquette (libellé mono), var(--cellule), var(--soleil). */
:root {
  --papier: #fbf6ec;
  --papier-2: #f3eadb;
  --blanc: #fffdf8;
  --ardoise: #2b3440;
  --ardoise-2: #3a4652;
  --gris: #5a6370;
  --cellule: #1f3a5f;
  --cellule-2: #2c5282;
  --terre: #b5532e;
  --terre-texte: #9a4323;
  --soleil: #f2a33a;
  --jaune: #ffd23f;
  --titre: 'Gloock', Georgia, 'Times New Roman', serif;
  --mono: 'Martian Mono', ui-monospace, Consolas, monospace;
  --arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='520' viewBox='0 0 720 520'%3E%3Cg fill='none' stroke='%23b5532e' stroke-opacity='.11' stroke-width='1.2'%3E%3Cpath d='M40 470C120 120 600 120 680 470'/%3E%3Cpath d='M110 470C180 230 540 230 610 470'/%3E%3Cpath d='M190 470C240 330 480 330 530 470'/%3E%3Cpath d='M360 470V140M225 470l-45-250M495 470l45-250M150 470L70 300M570 470l80-170'/%3E%3Cpath d='M10 470H710' stroke-dasharray='2 6'/%3E%3C/g%3E%3C/svg%3E");
  --cellules: linear-gradient(rgba(251,246,236,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(251,246,236,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(251,246,236,.13) 2px, transparent 2px);
}

body { font-size: 19px; background-color: var(--papier); background-image: var(--arcs); background-position: center top; color: var(--ardoise); }
a { color: var(--cellule); text-underline-offset: 3px; text-decoration-color: var(--terre); }
a:hover { color: var(--cellule-2); }
h1, h2, h3, .logo, .produit-nom, .choix-nom, .quiz-titre, .quiz-verdict, .carte-nom, .proches h2, .groupe h2, .faq summary, .cartes a { font-family: var(--titre); font-weight: 400; }
h2 { font-size: 30px; line-height: 1.18; }
h3 { font-size: 22px; }
.meta, .ariane, .produit-cat, .produit-choix, .choix-label, .produit-specs dt, .quiz legend, .carte-label, .sommaire-lateral p,
.avertissement, .produit-source, .barre-choix span, .filtres button, thead th, .volumes-legende, .jauge > span:first-child, .jauge strong,
.cadran, .etiquette, .releve, .largeurs figcaption, .largeur-nom, .largeur strong, .achat-chapeau { font-family: var(--mono); }
.cartes p, .produit-source, .largeurs figcaption { color: var(--gris); }
.etiquette { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--terre-texte); }
/* Fenêtre de compteur : chiffres clairs sur ardoise, comme le relevé du kWh */
.releve { display: inline-block; background: var(--ardoise); color: var(--papier); border: 1.5px solid var(--cellule); border-radius: 3px;
  padding: 2px 9px; font-size: 14px; font-weight: 500; letter-spacing: .06em; line-height: 1.5; box-shadow: inset 0 0 0 1px rgba(251,246,236,.18); }
.releve b, .releve strong { color: var(--jaune); font-weight: 500; }

/* En-tête : ardoise de toit, logo précédé d'un soleil qui se lève */
.entete { background: var(--ardoise); border: 0; padding: 14px 0; }
.entete .conteneur, main.conteneur, .pied .conteneur { max-width: 1120px; }
.entete .logo { color: var(--papier); font-size: 24px; letter-spacing: .005em; }
.logo::before { content: ""; display: inline-block; width: 18px; height: 9px; margin-right: 10px; vertical-align: 1px;
  border-radius: 18px 18px 0 0; background: var(--soleil); box-shadow: 0 2px 0 var(--papier); }
.entete nav a { color: #dfe3e8; font-family: var(--mono); font-size: 13px; }
.entete nav a:hover { color: var(--jaune); }

/* Tête de page : la course du soleil sur le bleu cellule quadrillé */
.hero { color: var(--papier); background-color: var(--cellule); background-image: var(--cellules); background-size: 42px 42px, 42px 42px, 126px 42px; }
.hero-in { max-width: 1120px; margin: 0 auto; padding: 20px 16px 28px; display: grid; gap: 14px 32px; align-items: center; }
.hero h1 { font-size: clamp(31px, 5.4vw, 52px); line-height: 1.1; max-width: 20ch; margin: 16px 0; }
.hero .ariane ol { margin: 0; color: #d8dee8; }
.hero .ariane a, .hero .meta a { color: inherit; }
.hero .ariane li + li::before { color: var(--soleil); }
.hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: #d8dee8; }
.auteur { display: inline-flex; align-items: center; gap: 8px; }
.auteur img { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--papier); }
.hero-intro p { font-size: 20px; max-width: 46ch; }
.hero-intro a { color: var(--jaune); text-decoration-color: var(--jaune); }
.hero-intro strong { font-weight: 600; }
.course { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.course .co-grille { fill: none; stroke: var(--papier); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 2 4; }
.course .co-saison { fill: none; stroke: var(--papier); stroke-opacity: .22; stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
.course .co-horizon { fill: none; stroke: var(--papier); stroke-opacity: .7; stroke-width: 1.5; }
.course .co-arc { fill: none; stroke: var(--soleil); stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; }
.course .co-heures text { font: 500 10px var(--mono); fill: var(--papier); fill-opacity: .8; }
.course .co-tige { stroke: var(--papier); stroke-width: 2.4; stroke-linecap: round; }
.course .co-pointe { fill: var(--papier); }
.course .co-ombre { stroke: #0b1526; stroke-opacity: .7; stroke-width: 5; stroke-linecap: round; }
.course .co-soleil circle { fill: var(--jaune); stroke: var(--soleil); stroke-width: 2; }
.course .co-rayons { fill: none; stroke: var(--jaune); stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: co-rayons 24s linear infinite; }
.course.co-nuit .co-soleil { opacity: .3; }
.course.co-nuit .co-ombre { display: none; }
.course.co-nuit .co-lune { display: block; }
.course .co-lune { display: none; fill: var(--papier); fill-opacity: .9; }
@keyframes co-rayons { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .course .co-rayons { animation: none; } }
@media (min-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1fr) 360px; } .hero-grille { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (max-width: 599px) { .course { max-width: 300px; } }

/* Règle du cadran sous la tête de page : VI → XVIII, le repère jaune à l'heure locale (course.js) */
.cadran { --x: max(16px, calc(50% - 544px)); --h: 12; position: relative; height: 40px; background: var(--papier-2); border-bottom: 1.5px solid var(--ardoise); overflow: hidden; font-size: 10px; color: var(--ardoise); }
.cadran-ech { position: absolute; left: var(--x); top: 8px; width: 241px; height: 9px; border-left: 1.5px solid var(--ardoise); border-right: 1.5px solid var(--ardoise); border-bottom: 1.5px solid var(--ardoise); box-sizing: border-box;
  background-image: repeating-linear-gradient(90deg, var(--ardoise) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, var(--ardoise) 0 1.5px, transparent 1.5px 60px);
  background-size: 100% 4px, 100% 8px; background-position: 0 100%, 0 100%; background-repeat: repeat-x; }
.cadran b { position: absolute; top: 20px; left: calc(var(--x) + (var(--n) - 6) * 20px); transform: translateX(-50%); font-weight: 500; }
.cadran i { position: absolute; top: 2px; left: calc(var(--x) + (var(--h) - 6) * 20px); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 1.5px var(--ardoise); transition: left .8s ease-out; }
.cadran-note { position: absolute; left: calc(var(--x) + 262px); top: 13px; color: var(--gris); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cadran i { transition: none; } }

/* Mise en page : lecture + colonne collante sur grand écran */
.mise-en-page { display: grid; gap: 48px; margin-top: 8px; }
.mise-en-page > article { min-width: 0; }
.colonne { display: none; }
@media (min-width: 1040px) {
  .mise-en-page { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; }
  .colonne { display: block; }
  .colonne-in { position: sticky; top: 24px; display: grid; gap: 24px; padding-top: 24px; }
  .mobile-seul { display: none; }
}
.carte-choix { background: var(--blanc); border: 1.5px solid var(--ardoise); border-radius: 4px; padding: 16px; box-shadow: 5px 5px 0 var(--cellule); }
.carte-choix p { margin: 0 0 8px; }
.carte-label { display: inline-block; color: var(--terre-texte); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.carte-nom { font-size: 24px; line-height: 1.12; }
.carte-pourqui { font-size: 16px; color: var(--gris); }
.carte-choix .bouton { display: block; text-align: center; }
.sommaire-lateral p { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin: 0 0 8px; }
.sommaire-lateral ol { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.sommaire-lateral li { margin-bottom: 6px; }

/* Boutons jaunes : bordure d'encre, ombre décalée qui s'enfonce au clic */
.bouton { background: var(--jaune); color: var(--ardoise); border: 2px solid var(--ardoise); border-radius: 6px; box-shadow: 3px 3px 0 var(--ardoise);
  font-family: var(--titre); font-weight: 400; letter-spacing: .01em; transition: transform .08s, box-shadow .08s; }
.bouton:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ardoise); }
.bouton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ardoise); }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } }

.avertissement { font-family: inherit; font-size: 13px; line-height: 1.45; color: var(--gris); background: none; border: 0; border-radius: 0; padding: 0; margin: 4px 0 20px; }
.sommaire { background: var(--blanc); border: 1.5px solid var(--ardoise); border-radius: 4px; }

/* Choix rapide : des relevés numérotés */
.choix { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-carte { background: var(--blanc); border: 1.5px solid var(--ardoise); border-radius: 4px; padding: 14px; }
.choix-label { color: var(--terre-texte); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.choix-nom { font-size: 19px; line-height: 1.15; }
.choix-nom a { color: var(--ardoise); }
.choix-pourqui { font-size: 15px; color: var(--gris); }

/* Fiches produit : numéro dans une fenêtre de compteur */
.produit { background: var(--blanc); border: 1.5px solid var(--ardoise); border-radius: 4px; padding: 30px 20px 18px; margin: 48px 0; box-shadow: 6px 6px 0 var(--papier-2); }
.produit-rang { top: -18px; left: 16px; min-width: 46px; height: 34px; padding: 0 10px; display: grid; place-items: center; box-sizing: border-box;
  background: var(--ardoise); color: var(--papier); border: 1.5px solid var(--cellule); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(251,246,236,.18);
  font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: .12em; }
.produit-choix { color: var(--terre-texte); font-size: 12px; letter-spacing: .1em; }
.produit-nom { font-size: 28px; line-height: 1.12; }
.produit-cat { background: var(--papier-2); color: var(--ardoise); font-size: 11px; padding: 3px 9px; border-radius: 3px; letter-spacing: .06em; }
.jauge > span:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.jauge-barre { background: var(--papier-2); border: 1px solid var(--ardoise); }
.jauge-barre span { background: linear-gradient(90deg, var(--cellule), var(--cellule-2)); }
.produit-specs { gap: 0; background: transparent; margin: 14px 0; border-top: 1px solid var(--ardoise); }
.produit-specs div { padding: 8px 10px; border-bottom: 1px dashed #c9bda6; }
.produit-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.produit-specs dd { font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--cellule); }
.plus li::marker { color: var(--cellule); }
.moins li::marker { color: var(--terre-texte); }

/* L'avis de Clémence : une note au crayon sur le papier, un petit soleil pour la signaler */
blockquote { position: relative; background: var(--blanc); border: 1.5px dashed var(--terre); border-radius: 2px;
  padding: 18px 20px 14px 54px; margin: 32px 0; font-style: italic; font-size: 19px; }
blockquote::before { content: ""; position: absolute; left: 18px; top: 22px; width: 18px; height: 9px; border-radius: 18px 18px 0 0;
  background: var(--soleil); box-shadow: 0 2px 0 var(--ardoise); }
blockquote strong:first-child { font-family: var(--titre); font-style: normal; font-weight: 400; color: var(--cellule); }

/* Quiz : sur le bleu cellule, une question à la fois */
.quiz { color: var(--papier); border: 1.5px solid var(--ardoise); border-radius: 4px; padding: 22px; background-color: var(--cellule); background-image: var(--cellules); background-size: 42px 42px, 42px 42px, 126px 42px; }
.quiz-titre { font-size: 24px; }
.quiz-progres { background: rgba(251,246,236,.25); height: 6px; }
.quiz-progres span { background: var(--jaune); }
.quiz legend { color: var(--jaune); font-size: 13px; margin-bottom: 10px; }
.quiz label { display: flex; gap: 12px; align-items: center; background: rgba(11,21,38,.25); border: 1.5px solid rgba(251,246,236,.45); border-radius: 4px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 17px; }
.quiz label:hover { border-color: var(--jaune); }
.quiz input { accent-color: var(--jaune); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-resultat { border-top: 0; margin-top: 0; padding-top: 0; }
.quiz-verdict { font-size: 22px; }
.quiz-resultat a:not(.bouton) { color: var(--jaune); }
.quiz-recommencer { color: var(--papier); }

/* Tableau et filtres : le carnet de relevés */
.tableau { border: 1.5px solid var(--ardoise); border-radius: 4px; background: var(--blanc); }
thead th { background: var(--ardoise); color: var(--papier); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
tbody tr { border-color: var(--papier-2); }
tbody tr:hover { background: var(--papier); }
tbody th a { color: var(--ardoise); font-family: var(--titre); font-weight: 400; }
td { font-variant-numeric: tabular-nums; }
.filtres button { background: var(--blanc); border: 1.5px solid var(--ardoise); color: var(--ardoise); font-size: 13px; }
.filtres button[aria-pressed="true"] { background: var(--jaune); color: var(--ardoise); }

/* Schémas à l'échelle et graphiques : papier millimétré du bureau d'études */
.volumes, .largeurs { background-color: var(--blanc); border: 1.5px solid var(--ardoise); border-radius: 4px; padding: 16px;
  background-image: linear-gradient(rgba(31,58,95,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(31,58,95,.09) 1px, transparent 1px);
  background-size: 16px 16px; }
.largeur-barre { background: var(--cellule); }
.pastille { border: 1px solid var(--ardoise); }

.faq details { border-bottom: 1px dashed var(--terre); }
.proches, .cartes li { background: var(--blanc); border: 1.5px solid var(--ardoise); border-radius: 4px; }
.cartes li { box-shadow: 4px 4px 0 var(--papier-2); }
.cartes a { color: var(--ardoise); }
.groupe h2 a { color: var(--ardoise); text-decoration-color: var(--terre); }
.barre-choix { background: var(--ardoise); color: var(--papier); border: 0; }
.pied { background: var(--ardoise); color: #cfd5dd; border: 0; }
.pied .mention { color: var(--papier); }
.pied a { color: var(--papier); }

/* Outil diagnostic (dépannage pas à pas) : carnet du bureau d'études, bandeau bleu cellule, étapes relevées en Martian Mono */
.diagnostic { border: 1.5px solid var(--ardoise); border-radius: 4px; background: var(--blanc); padding: 0 20px 20px; overflow: hidden; }
.diag-titre { margin: 0 -20px 16px; padding: 16px 20px; font-family: var(--titre); font-weight: 400; font-size: 23px; color: var(--papier);
  background-color: var(--cellule); background-image: var(--cellules); background-size: 42px 42px, 42px 42px, 126px 42px; }
.diag-num, .diag-etape, .diag-gravite, .diag-source, .diag-fil button { font-family: var(--mono); }
.diag-num, .diag-etape { color: var(--terre-texte); }
.diag-question, .diag-sol-titre { font-family: var(--titre); font-weight: 400; color: var(--cellule); }
.diag-question { font-size: 21px; }
.diag-choix a { border: 1.5px solid var(--ardoise); border-radius: 4px; background: var(--papier); }
.diag-choix a:hover, .diag-choix a:focus-visible { background: var(--jaune); }
.diag-gravite { border-radius: 2px; }
.diag-etapes { list-style: none; counter-reset: etape; padding: 0; }
.diag-etapes li { counter-increment: etape; position: relative; padding-left: 42px; }
.diag-etapes li::before { content: "E" counter(etape); position: absolute; left: 0; top: 2px; padding: 0 4px; font: 500 13px/20px var(--mono); color: var(--papier);
  border: 1.5px solid var(--cellule); border-radius: 2px; background: var(--ardoise); }
.diag-fil button { background: var(--papier); border-radius: 4px; }
.diag-nav button { color: var(--cellule); }