/* Bassin Clair — univers « le bassin ».
   Eau bleue carrelée et reflets (caustiques) qui ondulent en tête de page, margelle en pierre, ligne d'eau de bouées,
   carrelage blanc pour la lecture. Titres Fredoka (ronds), texte Atkinson Hyperlegible, étiquettes DM Mono (Bunny Fonts).
   Boutons jaune bouée. */
:root {
  --bassin: #0d5f8a;
  --abysse: #083f5c;
  --carreau: #f3f8fa;
  --blanc: #ffffff;
  --joint: #d3e3ea;
  --bouee: #ffd23f;
  --bouee-fonce: #a67c00;
  --corail: #c8402e;
  --margelle: #e9e1d2;
  --titre: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, Consolas, monospace;
  --carrelage: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  --caustiques: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 40c30-18 52 14 80-4s46-30 74-6 44 10 66-4'/%3E%3Cpath d='M0 120c22 16 48-12 74 6s50 24 78 2 46-14 68 0'/%3E%3Cpath d='M0 190c26-14 50 10 76-6s44-22 72 0 48 12 72-2'/%3E%3Cpath d='M40 0c-14 30 16 48 0 76s-20 50 4 72 12 46 0 72'/%3E%3Cpath d='M150 0c16 26-12 50 4 78s22 46-2 70-10 48 4 72'/%3E%3C/g%3E%3C/svg%3E");
}
body { font-size: 19px; background-color: var(--carreau);
  background-image: linear-gradient(90deg, rgba(13,95,138,.045) 1px, transparent 1px), linear-gradient(rgba(13,95,138,.045) 1px, transparent 1px);
  background-size: 34px 34px; }
a { color: var(--bassin); text-underline-offset: 3px; }
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); }
h2 { font-size: 32px; font-weight: 600; letter-spacing: -.005em; line-height: 1.15; color: var(--abysse); }
h3 { font-weight: 600; color: var(--abysse); }
.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, .largeurs figcaption, .largeur strong { font-family: var(--mono); }

/* En-tête : le fond du bassin, logo en bouée */
.entete { background: var(--abysse); border: 0; padding: 14px 0; }
.entete .conteneur, main.conteneur, .pied .conteneur { max-width: 1120px; }
.entete .logo { color: var(--blanc); font-weight: 700; font-size: 24px; }
.logo::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -2px; border-radius: 50%;
  background: radial-gradient(circle, var(--abysse) 0 32%, transparent 33%), conic-gradient(var(--bouee) 0 25%, var(--blanc) 0 50%, var(--bouee) 0 75%, var(--blanc) 0); }
.entete nav a { color: #cfe3ee; font-family: var(--mono); font-size: 14px; }
.entete nav a:hover { color: var(--bouee); }

/* Tête de page : eau carrelée, reflets qui ondulent, puis margelle et ligne d'eau */
.hero { position: relative; overflow: hidden; color: var(--blanc); background-color: var(--bassin);
  background-image: var(--carrelage); background-size: 42px 42px; }
.hero::before, .hero::after { content: ""; position: absolute; inset: -50%; background-image: var(--caustiques); pointer-events: none;
  animation: reflets 38s linear infinite; }
.hero::after { background-size: 300px 300px; opacity: .7; animation-duration: 55s; animation-direction: reverse; }
@keyframes reflets { from { transform: translate(0, 0); } to { transform: translate(220px, 110px); } }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } }
.hero-in { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 20px 16px 36px; }
.hero h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.05; font-weight: 700; letter-spacing: -.01em; max-width: 19ch; margin: 18px 0; }
.hero .ariane ol { margin: 0; color: rgba(255,255,255,.85); }
.hero .ariane a, .hero .meta a { color: inherit; }
.hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: rgba(255,255,255,.92); margin: 0; }
.auteur { display: inline-flex; align-items: center; gap: 8px; }
.margelle { position: relative; z-index: 1; height: 10px; background: var(--margelle); border-top: 2px solid #cfc4ad; }
.ligne-eau { position: relative; z-index: 1; height: 22px; background-color: var(--carreau);
  background-image: radial-gradient(circle at 11px 11px, var(--bouee) 0 7px, transparent 7.5px), radial-gradient(circle at 33px 11px, var(--corail) 0 7px, transparent 7.5px),
    linear-gradient(transparent 10px, #8aa9b8 10px 12px, transparent 12px);
  background-size: 44px 22px, 44px 22px, auto; background-repeat: repeat-x; }
.hero-intro p { font-size: 20px; max-width: 46ch; }
.hero-intro a { color: var(--bouee); }

/* Accueil : coupe du bassin, le robot fait ses longueurs, la bouée flotte */
.hero-grille { display: grid; gap: 24px; align-items: center; }
.coupe { width: 100%; max-width: 340px; justify-self: center; }
.coupe .eau { fill: #1d7fb3; }
.coupe .carreaux { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; }
.coupe .bord { fill: var(--margelle); }
.coupe .surface { fill: none; stroke: #bfe3f3; stroke-width: 3; stroke-linecap: round; animation: vague 3.2s ease-in-out infinite alternate; }
.coupe .robot { animation: longueur 9s ease-in-out infinite; }
.coupe .robot-corps { fill: var(--blanc); stroke: var(--abysse); stroke-width: 2; }
.coupe .robot-brosse { fill: var(--abysse); }
.coupe .bouee-svg { animation: flotte 2.6s ease-in-out infinite alternate; transform-origin: center; }
.coupe .echelle { fill: none; stroke: #c9d6dc; stroke-width: 4; stroke-linecap: round; }
@keyframes vague { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes longueur { 0%, 6% { transform: translateX(0); } 46%, 54% { transform: translateX(196px); } 94%, 100% { transform: translateX(0); } }
@keyframes flotte { from { transform: translateY(-2px) rotate(-4deg); } to { transform: translateY(3px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .coupe .surface, .coupe .robot, .coupe .bouee-svg { animation: none; } }
@media (min-width: 900px) { .hero-grille { grid-template-columns: 1fr 360px; } }

/* 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: 2px solid var(--abysse); border-radius: 18px; padding: 16px; box-shadow: 0 6px 0 var(--joint); }
.carte-choix p { margin: 0 0 8px; }
.carte-label { display: inline-block; background: var(--bouee); color: var(--abysse); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 10px; border-radius: 999px; }
.carte-nom { font-size: 25px; font-weight: 700; line-height: 1.1; color: var(--abysse); }
.carte-pourqui { font-size: 16px; }
.carte-choix .bouton { display: block; text-align: center; }
.sommaire-lateral p { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #3f5a68; 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 jaune bouée, bordure d'encre, ombre qui s'enfonce */
.bouton { background: var(--bouee); color: var(--abysse); border: 2px solid var(--abysse); border-radius: 999px; padding: 10px 22px;
  box-shadow: 0 4px 0 var(--abysse); font-family: var(--titre); font-weight: 600; transition: transform .08s, box-shadow .08s; }
.bouton:hover { filter: none; transform: translateY(-1px); box-shadow: 0 5px 0 var(--abysse); }
.bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--abysse); }

.avertissement { font-size: 13px; background: var(--blanc); border: 1px dashed #9fbccb; border-radius: 10px; color: #33505f; }
.sommaire { background: var(--blanc); border: 1px solid var(--joint); border-radius: 14px; }

/* Choix rapide : des carreaux de mosaïque */
.choix { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-carte { background: var(--blanc); border: 2px solid var(--joint); border-radius: 16px; padding: 14px; box-shadow: inset 0 -5px 0 #e6f1f6; }
.choix-carte:hover { border-color: var(--bassin); }
.choix-label { color: var(--bassin); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.choix-nom { font-size: 20px; line-height: 1.15; }
.choix-nom a { color: var(--abysse); }
.choix-pourqui { font-size: 15px; color: #33505f; }

/* Fiches produit : le bassin vu de haut, numéro dans une bouée */
.produit { background: var(--blanc); border: 2px solid var(--abysse); border-radius: 22px; padding: 30px 20px 18px; margin: 48px 0;
  box-shadow: 0 8px 0 var(--joint); }
.produit-rang { top: -26px; left: 18px; width: 50px; height: 50px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, var(--blanc) 0 38%, transparent 39%), conic-gradient(var(--bouee) 0 25%, var(--corail) 0 50%, var(--bouee) 0 75%, var(--corail) 0);
  color: var(--abysse); border: 2px solid var(--abysse); font-family: var(--titre); font-weight: 700; font-size: 18px; }
.produit-choix { color: var(--bassin); font-size: 12px; letter-spacing: .08em; }
.produit-nom { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--abysse); }
.produit-cat { background: var(--abysse); color: var(--blanc); font-size: 11px; padding: 3px 9px; border-radius: 999px; letter-spacing: .06em; }
.produit-specs { gap: 6px; background: transparent; margin: 14px 0; }
.produit-specs div { background: var(--carreau); border: 1px solid var(--joint); border-radius: 10px; padding: 8px 10px; }
.produit-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #3f5a68; }
.plus li::marker { color: #1d7a4a; }
.moins li::marker { color: var(--corail); }

/* L'avis d'Hugo : un mot glissé au bord du bassin, signé d'une bouée */
blockquote { position: relative; background: var(--blanc); border: 2px solid var(--joint); border-radius: 18px;
  padding: 16px 20px 14px 58px; margin: 32px 0; font-size: 19px; }
blockquote::before { content: ""; position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--abysse);
  background: radial-gradient(circle, var(--blanc) 0 36%, transparent 37%), conic-gradient(var(--bouee) 0 25%, var(--corail) 0 50%, var(--bouee) 0 75%, var(--corail) 0); }
blockquote strong:first-child { font-family: var(--titre); color: var(--abysse); }

/* Quiz : sous l'eau, une question à la fois */
.quiz { color: var(--blanc); border: 0; border-radius: 22px; padding: 22px; background-color: var(--bassin); background-image: var(--carrelage); background-size: 42px 42px; }
.quiz-titre { font-size: 25px; font-weight: 700; }
.quiz-progres { background: rgba(255,255,255,.22); height: 6px; }
.quiz-progres span { background: var(--bouee); }
.quiz legend { color: var(--bouee); font-size: 13px; margin-bottom: 10px; }
.quiz label { display: flex; gap: 12px; align-items: center; border: 1.5px solid rgba(255,255,255,.45); border-radius: 999px;
  padding: 10px 16px; margin-bottom: 10px; font-size: 17px; }
.quiz label:hover { border-color: var(--bouee); }
.quiz input { accent-color: var(--bouee); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-resultat { border-top: 0; margin-top: 0; padding-top: 0; }
.quiz-verdict { font-size: 23px; }
.quiz-resultat a:not(.bouton) { color: var(--bouee); }

/* Tableau et filtres */
.tableau { border: 2px solid var(--abysse); border-radius: 16px; background: var(--blanc); }
thead th { background: var(--abysse); color: var(--blanc); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:nth-child(even) { background: var(--carreau); }
tbody tr:hover { background: #e6f1f6; }
tbody th a { color: var(--abysse); font-family: var(--titre); font-weight: 600; }
.filtres button { border: 1.5px solid var(--abysse); color: var(--abysse); font-size: 13px; }
.filtres button[aria-pressed="true"] { background: var(--bouee); color: var(--abysse); }

.faq details { border-bottom: 1px solid var(--joint); }
.proches, .cartes li { background: var(--blanc); border: 2px solid var(--joint); border-radius: 18px; box-shadow: inset 0 -5px 0 #e6f1f6; }
.cartes a { color: var(--abysse); }
.barre-choix { background: var(--abysse); color: var(--blanc); border: 0; }
.pied { background: var(--abysse); color: #b9d3e0; border: 0; border-top: 10px solid var(--margelle); }
.pied .mention { color: var(--blanc); }
.pied a { color: #e3f1f8; }

/* Outil signature : le calculateur de bassin (plan à l'échelle, volume, robots adaptés) */
.outil-bassin { background: var(--blanc); border: 2px solid var(--abysse); border-radius: 22px; padding: 18px; margin: 32px 0;
  box-shadow: 0 8px 0 var(--joint); display: grid; gap: 18px; }
@media (min-width: 760px) { .outil-bassin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.outil-bassin fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.outil-bassin legend { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #3f5a68; margin-bottom: 6px; }
.outil-bassin fieldset label { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--joint); border-radius: 999px;
  padding: 6px 12px; margin: 0 6px 6px 0; font-size: 16px; cursor: pointer; }
.outil-bassin fieldset label:has(input:checked) { border-color: var(--abysse); background: #e6f1f6; }
.outil-bassin input[type="radio"] { accent-color: var(--bassin); margin: 0; }
.ob-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ob-champ { display: grid; gap: 4px; align-content: end; font-size: 13px; font-family: var(--mono); color: #3f5a68; }
.ob-champ[hidden] { display: none; }
.ob-champ input { width: 100%; box-sizing: border-box; font: inherit; font-size: 18px; padding: 8px 10px; border: 1.5px solid var(--abysse);
  border-radius: 10px; color: var(--texte); background: var(--carreau); }
.ob-plan { display: block; width: 100%; height: auto; background: var(--margelle); border-radius: 14px; }
.ob-chiffres { font-size: 17px; margin: 10px 0; }
.ob-volume { font-family: var(--titre); font-size: 24px; font-weight: 600; color: var(--abysse); }
.ob-titre-robots { font-weight: 700; margin: 8px 0 6px; }
.ob-robots { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ob-robot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; border: 1.5px solid var(--joint);
  border-radius: 14px; padding: 8px 12px; }
.ob-robot[hidden] { display: none; }
.ob-nom { font-family: var(--titre); font-weight: 600; color: var(--abysse); }
.ob-pourquoi { grid-column: 1; font-size: 14px; color: #33505f; }
.ob-robot .bouton { grid-column: 2; grid-row: 1 / span 2; }
.ob-exclus { font-size: 14px; color: #33505f; margin: 10px 0 0; }

/* Outil : le spa sur votre terrasse (poids en charge, charge au sol, temps de chauffe) */
.os-form .ob-dims { margin-bottom: 8px; }
.os-hypotheses { font-size: 14px; color: #33505f; margin: 0; }
.os-spas { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.os-spa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; border: 1.5px solid var(--joint);
  border-radius: 14px; padding: 10px 12px; }
.os-spa p { margin: 0; grid-column: 1; }
.os-spa .bouton { grid-column: 2; grid-row: 1 / span 3; }
.os-chiffres { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; color: #33505f; }
.os-poids { font-weight: 700; color: var(--abysse); }
.os-alerte { font-size: 14px; color: #8c2a1d; background: #fdeee9; border-radius: 8px; padding: 4px 8px; }
.os-alerte[hidden] { display: none; }
.os-form .ob-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }