/* Brin par Brin — univers « le plan du géomètre ».
   Tête de page : pelouse vue du dessus, bandes de tonte alternées et trajectoire du robot en pointillé, puis une échelle graphique.
   Fond : papier calque beige avec courbes de niveau. Bornes orange, rose des vents, antenne RTK sur le plan de l'accueil.
   Titres Young Serif, texte Lora, cotes et étiquettes DM Mono (Bunny Fonts). Boutons jaunes « acheter ». */
:root {
  --calque: #f4efe0;
  --calque-2: #e9e1c8;
  --papier: #fbf8ee;
  --encre: #23261c;
  --gris: #555749;
  --tonte-clair: #3d7c38;
  --tonte-fonce: #2c6129;
  --gazon: #8fbf5a;
  --haie: #1d3b1c;
  --terre: #6b4423;
  --borne: #e0661a;
  --borne-texte: #a3470c;
  --jaune: #ffd23f;
  --titre: 'Young Serif', Georgia, 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, Consolas, monospace;
  --niveaux: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='480' viewBox='0 0 640 480'%3E%3Cg fill='none' stroke='%236b4423' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M-20 90c80-30 150 20 240 0s150-70 240-50 140 40 200 20'/%3E%3Cpath d='M-20 130c90-28 160 26 250 4s140-66 230-44 130 44 200 26'/%3E%3Cpath d='M-20 176c96-24 170 32 260 10s130-60 220-40 120 46 200 30'/%3E%3Cpath d='M380 300c40-40 120-40 150 0s-20 90-80 86-110-46-70-86z'/%3E%3Cpath d='M410 304c26-24 80-22 96 4s-16 56-54 52-66-30-42-56z'/%3E%3Cpath d='M-20 400c100-20 170 30 270 12s170-50 260-30 90 30 150 22'/%3E%3C/g%3E%3C/svg%3E");
  --trajet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'%3E%3Cpath d='M10 236L96 4H140L54 236H98L184 4H228L142 236H186L272 4H316L230 236H274L360 4H404' fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='2' stroke-dasharray='4 7' stroke-linecap='round'/%3E%3Ccircle cx='404' cy='4' r='0'/%3E%3C/svg%3E");
}

body { font-size: 19px; background-color: var(--calque); background-image: var(--niveaux); color: var(--encre); }
a { color: var(--tonte-fonce); 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); font-weight: 400; }
h2 { font-size: 30px; letter-spacing: -.005em; line-height: 1.18; }
.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, .cote { font-family: var(--mono); }
.cartes p, .produit-source { color: var(--gris); }

/* En-tête : la haie, logo en borne de géomètre (tête orange) */
.entete { background: var(--haie); border: 0; padding: 14px 0; }
.entete .conteneur, main.conteneur, .pied .conteneur { max-width: 1120px; }
.entete .logo { color: var(--papier); font-size: 23px; letter-spacing: .01em; }
.logo::before { content: ""; display: inline-block; width: 11px; height: 17px; margin-right: 10px; vertical-align: -1px; border-radius: 2px 2px 0 0;
  background: linear-gradient(to bottom, var(--borne) 0 45%, var(--papier) 45%); box-shadow: 0 0 0 1.5px var(--papier); }
.entete nav a { color: #d9e6c8; font-family: var(--mono); font-size: 14px; }
.entete nav a:hover { color: var(--jaune); }

/* Tête de page : la pelouse vue du dessus, bandes de tonte et trajectoire du robot */
.hero { color: #fff; background-color: var(--tonte-fonce);
  background-image: var(--trajet), repeating-linear-gradient(100deg, var(--tonte-fonce) 0 70px, var(--tonte-clair) 70px 140px);
  background-position: right -40px center, 0 0; background-size: auto 100%, auto; background-repeat: no-repeat, repeat; }
.hero-in { max-width: 1120px; margin: 0 auto; padding: 20px 16px 32px; }
.hero h1 { font-size: clamp(32px, 5.6vw, 54px); line-height: 1.08; max-width: 19ch; margin: 18px 0; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.hero .ariane ol { margin: 0; color: #eef4e4; }
.hero .ariane a, .hero .meta a { color: inherit; }
.hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: #eef4e4; }
.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; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.hero-intro a { color: var(--jaune); }

/* Échelle graphique sous la tête de page, sur le calque ; limite de propriété en tirets */
.cote { --x: max(16px, calc(50% - 544px)); position: relative; height: 36px; background: var(--calque-2);
  border-bottom: 2px dashed var(--terre); color: var(--terre); font-size: 12px; }
.cote .echelle { position: absolute; left: var(--x); top: 8px; width: 120px; height: 7px; border: 1.5px solid var(--encre);
  background: repeating-linear-gradient(90deg, var(--encre) 0 30px, var(--papier) 30px 60px); }
.cote span:not(.echelle) { position: absolute; top: 17px; transform: translateX(-50%); }
.cote span:nth-child(2) { left: calc(var(--x) + 1px); }
.cote span:nth-child(3) { left: calc(var(--x) + 61px); }
.cote span:nth-child(4) { left: calc(var(--x) + 131px); }

/* Accueil et rubriques : le plan du jardin, avec le robot qui suit sa trajectoire */
.hero-grille { display: grid; gap: 24px; align-items: center; }
.plan { width: 100%; max-width: 340px; justify-self: center; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.22)); transform: rotate(1.2deg); }
.pl-feuille { fill: var(--papier); stroke: var(--terre); stroke-width: 1.5; }
.pl-parcelle { fill: url(#bandes); stroke: var(--terre); stroke-width: 2; }
.pl-bande-a { fill: var(--tonte-clair); }
.pl-bande-b { fill: #4c8d43; }
.pl-niveau { fill: none; stroke: #fff; stroke-opacity: .22; stroke-width: 1; }
.pl-fil { fill: none; stroke: var(--terre); stroke-width: 1.2; stroke-dasharray: 6 3 1.5 3; }
.pl-trace { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1632; stroke-dashoffset: 0;
  animation: trace 30s linear infinite; }
.pl-base { fill: var(--encre); }
.pl-robot { offset-path: path("M64 240V82H88V240H112V82H136V240H160V82H184V240H208V82H232V240H256V82"); offset-rotate: auto;
  offset-distance: 100%; animation: robot 30s linear infinite; }
.pl-robot rect { fill: var(--encre); stroke: var(--papier); stroke-width: 1.5; }
.pl-robot circle { fill: var(--borne); }
.pl-borne rect { fill: var(--papier); stroke: var(--encre); stroke-width: 1.2; }
.pl-borne circle { fill: var(--borne); }
.pl-antenne path, .pl-satellite path { fill: none; stroke: var(--encre); stroke-width: 1.5; stroke-linecap: round; }
.pl-antenne circle { fill: var(--borne); stroke: var(--encre); stroke-width: 1.2; }
.pl-antenne .pl-onde { stroke: var(--borne-texte); stroke-dasharray: 2 3; }
.pl-satellite rect { fill: var(--calque-2); stroke: var(--encre); stroke-width: 1.2; }
.pl-rose circle { fill: none; stroke: var(--terre); stroke-width: 1; }
.pl-rose path { fill: var(--terre); }
.pl-rose .pl-rose-n { fill: var(--borne); }
.pl-rose text, .pl-cote { font-family: var(--mono); font-size: 10px; fill: var(--terre); }
.pl-surface { fill: var(--encre); font-size: 11px; }
@keyframes trace { from { stroke-dashoffset: 1632; } 85%, to { stroke-dashoffset: 0; } }
@keyframes robot { from { offset-distance: 0%; } 85%, to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .pl-trace, .pl-robot { animation: none; } }
@media (min-width: 900px) { .hero-grille { grid-template-columns: 1fr 340px; } }

/* 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(--papier); border: 1.5px solid var(--encre); border-radius: 4px; padding: 16px; box-shadow: 5px 5px 0 var(--tonte-fonce); }
.carte-choix p { margin: 0 0 8px; }
.carte-label { display: inline-block; color: var(--borne-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(--encre); border: 2px solid var(--encre); border-radius: 6px; box-shadow: 3px 3px 0 var(--encre);
  font-family: var(--titre); letter-spacing: .01em; transition: transform .08s, box-shadow .08s; }
.bouton:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--encre); }
.bouton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } }

.avertissement { font-size: 13px; background: transparent; border: 1px dashed var(--terre); border-radius: 4px; color: var(--gris); }
.sommaire { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 4px; }

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

/* Fiches produit : numéro sur une borne de géomètre (tête orange) */
.produit { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 4px; padding: 30px 20px 18px; margin: 48px 0; box-shadow: 6px 6px 0 var(--calque-2); }
.produit-rang { top: -22px; left: 18px; width: 40px; height: 44px; padding: 0; display: grid; place-items: end center; padding-bottom: 4px; box-sizing: border-box;
  background: linear-gradient(to bottom, var(--borne) 0 38%, var(--papier) 38%); color: var(--encre); border: 1.5px solid var(--encre); border-radius: 4px 4px 0 0;
  font-family: var(--mono); font-weight: 500; font-size: 16px; }
.produit-choix { color: var(--borne-texte); font-size: 12px; letter-spacing: .1em; }
.produit-nom { font-size: 28px; line-height: 1.12; }
.produit-cat { background: var(--calque-2); color: var(--encre); 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(--calque-2); border: 1px solid var(--encre); }
.jauge-barre span { background: repeating-linear-gradient(100deg, var(--tonte-fonce) 0 8px, var(--tonte-clair) 8px 16px); }
.produit-specs { gap: 0; background: transparent; margin: 14px 0; border-top: 1px solid var(--encre); }
.produit-specs div { padding: 8px 10px; border-bottom: 1px dashed #b9ad8c; }
.produit-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.plus li::marker { color: var(--tonte-clair); }
.moins li::marker { color: var(--borne-texte); }

/* L'avis d'Agathe : une annotation au crayon sur le calque, épinglée d'une borne */
blockquote { position: relative; background: var(--papier); border: 1.5px dashed var(--terre); border-radius: 2px;
  padding: 18px 20px 14px 52px; margin: 32px 0; font-style: italic; font-size: 19px; }
blockquote::before { content: ""; position: absolute; left: 18px; top: 20px; width: 14px; height: 20px; border-radius: 2px 2px 0 0;
  background: linear-gradient(to bottom, var(--borne) 0 45%, var(--papier) 45%); box-shadow: 0 0 0 1.5px var(--encre); }
blockquote strong:first-child { font-family: var(--titre); font-style: normal; font-weight: 400; color: var(--tonte-fonce); }

/* Quiz : posé sur la pelouse, une question à la fois */
.quiz { color: #fff; border: 1.5px solid var(--encre); border-radius: 4px; padding: 22px; background-color: var(--tonte-fonce);
  background-image: repeating-linear-gradient(100deg, var(--tonte-fonce) 0 40px, var(--tonte-clair) 40px 80px); }
.quiz-titre { font-size: 24px; }
.quiz-progres { background: rgba(255,255,255,.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(0,0,0,.18); border: 1.5px solid rgba(255,255,255,.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); }

/* Tableau et filtres : le carnet de cotes */
.tableau { border: 1.5px solid var(--encre); border-radius: 4px; background: var(--papier); }
thead th { background: var(--haie); color: #eef4e4; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
tbody tr { border-color: var(--calque-2); }
tbody tr:hover { background: var(--calque); }
tbody th a { color: var(--encre); font-family: var(--titre); font-weight: 400; }
.filtres button { background: var(--papier); border: 1.5px solid var(--encre); color: var(--encre); font-size: 13px; }
.filtres button[aria-pressed="true"] { background: var(--jaune); color: var(--encre); }

/* Schémas à l'échelle : sur papier calque quadrillé */
.volumes { background-color: var(--papier); border: 1.5px solid var(--encre); border-radius: 4px; padding: 16px;
  background-image: linear-gradient(rgba(107,68,35,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(107,68,35,.08) 1px, transparent 1px);
  background-size: 16px 16px; }

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

/* Outils « Mon jardin » et « Calcul de pente » : une planche de géomètre (cotes en DM Mono, pelouse en bandes) */
.outil-jardin, .outil-pente { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 4px; padding: 18px; margin: 32px 0;
  box-shadow: 6px 6px 0 var(--tonte-fonce); display: grid; gap: 18px; min-width: 0; }
@media (min-width: 760px) { .outil-jardin, .outil-pente { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .oj-note { grid-column: 1 / -1; } }
.outil-jardin fieldset, .outil-pente fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.outil-jardin legend, .outil-pente legend, .oj-champ, .op-champ { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.outil-jardin legend, .outil-pente legend { margin-bottom: 6px; }
.outil-jardin fieldset label, .outil-pente fieldset label { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--encre); border-radius: 4px;
  padding: 6px 10px; margin: 0 6px 6px 0; font-size: 16px; cursor: pointer; background: var(--calque); }
.outil-jardin fieldset label:has(input:checked), .outil-pente fieldset label:has(input:checked) { background: var(--jaune); }
.outil-jardin input[type="radio"], .outil-pente input[type="radio"] { accent-color: var(--tonte-fonce); margin: 0; }
.oj-champs, .op-champs { display: grid; gap: 10px; margin-bottom: 12px; }
.op-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oj-champ, .op-champ { display: grid; gap: 4px; align-content: end; }
.oj-champ input, .op-champ input { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 18px; padding: 8px 10px; border: 1.5px solid var(--encre);
  border-radius: 4px; color: var(--encre); background: #fff; text-transform: none; letter-spacing: 0; }
.oj-cotes, .op-verdict { margin: 0 0 8px; font-size: 17px; }
.oj-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--mono); font-size: 12px; color: var(--gris); margin: 0 0 10px; }
.oj-pastille { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--encre); }
.oj-pastille-vous, .oj-vous { background: var(--tonte-clair); fill: var(--tonte-clair); }
.oj-pastille-max { background: var(--calque); border-style: dashed; border-color: var(--borne-texte); }
.oj-max { fill: var(--calque); stroke: var(--borne-texte); stroke-width: 1.5; stroke-dasharray: 4 3; }
.oj-vous { stroke: var(--haie); stroke-width: 1; }
.oj-bilan, .op-titre-robots { font-weight: 600; margin: 8px 0 6px; }
.oj-robots, .op-robots { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.oj-robot, .op-robot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; border: 1.5px solid var(--encre);
  border-radius: 4px; padding: 8px 10px; background: #fff; }
.oj-robot { grid-template-columns: 52px minmax(0, 1fr) auto; }
.oj-robot[hidden], .op-robot[hidden], .op-erreur[hidden] { display: none; }
.oj-mini { grid-row: 1 / span 2; width: 52px; height: 52px; }
.oj-nom, .op-nom { font-family: var(--titre); line-height: 1.2; overflow-wrap: anywhere; }
.oj-infos, .op-infos { font-family: var(--mono); font-size: 12px; color: var(--gris); overflow-wrap: anywhere; }
.oj-robot .oj-nom, .oj-robot .oj-infos { grid-column: 2; }
.oj-robot .bouton { grid-column: 3; grid-row: 1 / span 2; }
.op-infos { grid-column: 1; }
.op-robot .bouton { grid-column: 2; grid-row: 1 / span 2; }
.oj-plus, .oj-exclus, .op-plus, .op-exclus { font-size: 14px; color: var(--gris); margin: 8px 0 0; }
.oj-plus:empty, .oj-exclus:empty, .op-plus:empty, .op-exclus:empty { display: none; }
.oj-note { font-size: 15px; line-height: 1.55; color: var(--gris); border-top: 1px dashed var(--terre); padding-top: 12px; }
.oj-note strong { color: var(--encre); }
.op-erreur { font-size: 14px; color: var(--borne-texte); margin: 8px 0 0; }
.op-chiffres { margin: 0 0 4px; font-family: var(--mono); }
.op-pct { font-family: var(--titre); font-weight: 400; font-size: 34px; color: var(--tonte-fonce); }
.op-deg { font-size: 20px; }
.op-triangle { display: block; width: 100%; height: auto; margin: 6px 0 8px; border: 1px solid var(--calque-2);
  background-color: var(--calque); background-image: linear-gradient(rgba(107,68,35,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(107,68,35,.08) 1px, transparent 1px);
  background-size: 14px 14px; }
.op-triangle text { font-family: var(--mono); font-size: 12px; fill: var(--encre); }
.op-reperes line { stroke: var(--borne-texte); stroke-width: 1.2; stroke-dasharray: 5 4; }
.op-reperes text { fill: var(--borne-texte); font-size: 11px; }
.op-terrain { fill: var(--gazon); fill-opacity: .75; stroke: var(--haie); stroke-width: 2; stroke-linejoin: round; }