@font-face{font-family:Kalam;src:url(polices/kalam-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:optional}
@font-face{font-family:Rubik;src:url(polices/rubik-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:optional}
:root{--ciel:#b9d6e2;--herbe:#6f9a55;--encre:#1f2a26;--doux:#46524d;--ok:#17663a;--non:#a3161a;--rouge:#c0392b;--papier:#f7f9f8;--filet:#d5dcd8;--bande:#dfe6e2;--manuscrit:Kalam,"Comic Sans MS",cursive}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);font:400 18px/1.5 Rubik,system-ui,sans-serif}
a{color:var(--encre)}
:focus-visible{outline:3px solid #1d5fa8;outline-offset:3px}
.evite{position:absolute;left:8px;top:-60px;background:#fff;padding:10px 14px;z-index:10;border-radius:6px}
.evite:focus{top:8px}
h1,h2,h3{font-family:var(--manuscrit);font-weight:700;overflow-wrap:anywhere}

/* ---- pages intérieures : bandeau de ciel, titre, texte ---- */
.haut{background:var(--ciel);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding:10px 24px}
.marque{font:700 28px/1.2 var(--manuscrit);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.haut ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px}
.haut nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.haut nav a[aria-current="page"]{text-decoration-thickness:3px}
.tete-page{max-width:980px;margin:0 auto;padding:28px 24px 0}
.tete-page h1{font-size:40px;line-height:1.1;margin:0}
.prose,.fiche{max-width:980px;margin:0 auto;padding:12px 24px 24px}
.prose{max-width:760px}
.prose h2,.fiche h2{font-size:30px;line-height:1.15;margin:30px 0 8px}
.prose p,.prose li{max-width:68ch}
.prose,.fiche{overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto}
.prose ul,.prose ol{padding-left:24px}

/* ---- accueil : la scène ---- */
.scene{position:relative;max-width:1440px;margin:0 auto;background:var(--ciel)}
.titre{position:absolute;left:36px;top:22px;max-width:540px;z-index:2;pointer-events:none}
h1.grand{font-size:46px;line-height:1;margin:0 0 6px}
.titre p{margin:0;font-size:18px;max-width:470px}
.verdict-zone{position:absolute;left:36px;top:176px;width:410px;z-index:2;padding:8px 14px 10px;background:rgba(247,249,248,.92);border-radius:8px;pointer-events:none}
.verdict{font:700 36px/1.05 var(--manuscrit);margin:0 0 6px}
.verdict:focus{outline:none}
.verdict.ok{color:var(--ok)}.verdict.non{color:var(--non)}
.verdict.ok::before{content:"✓ "}.verdict.non::before{content:"✗ "}
.pourquoi{margin:0;font-size:18px;font-weight:500}
.cadre{position:relative;overflow:hidden;aspect-ratio:1440/580}
.jardin{display:block;width:100%;height:auto}
.jardin .ciel{fill:var(--ciel)}
.jardin .traits{fill:none;stroke:var(--encre);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.jardin .traits .fin{stroke-width:1.4}
.jardin .limite{display:none;fill:rgba(192,57,43,.06);stroke:var(--rouge);stroke-width:3;stroke-linejoin:round}
.jardin .limite *{vector-effect:non-scaling-stroke}
.jardin .o.on .limite{display:inline}
.jardin .trait-div,.jardin .note-div{display:none}
.jardin .o-subdivide.on .trait-div{display:inline;stroke:var(--rouge);stroke-width:4}
.jardin .o-subdivide.on .note-div{display:inline;font:700 24px var(--manuscrit);fill:var(--non);paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:5px}
.jardin .o-chimney .commune{display:none}
.jardin.commune .o-chimney .seule{display:none}.jardin.commune .o-chimney .commune{display:inline}
.jardin .fleche-c{display:none}.jardin.commune .fleche-c{display:inline}
.jardin .etq[data-id="chimney"] .fleche:not(.fleche-c){display:inline}.jardin.commune .etq[data-id="chimney"] .fleche:not(.fleche-c){display:none}
.jardin .avis-chantier{display:none;pointer-events:none}
.jardin.besoin .avis-chantier{display:inline}
.jardin .planche{fill:#fff;stroke:var(--encre);stroke-width:1.5}.jardin .poteau{fill:#7a5536}
.jardin .avis-t1{font:800 25px Rubik,sans-serif;letter-spacing:.06em;fill:#111}
.jardin .avis-t2{font:500 21px Rubik,sans-serif;fill:#111}
.jardin .etq{cursor:pointer}
.jardin .zone{fill:transparent}
.jardin .etiq{font:700 26px var(--manuscrit);fill:var(--encre);paint-order:stroke;stroke:rgba(240,246,248,.8);stroke-width:5px}
.jardin .seuil-t{font:700 23px Rubik,sans-serif;fill:var(--non);paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:7px;stroke-linejoin:round}
.jardin .fleche{fill:none;stroke:var(--encre);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jardin .etq:hover .etiq{fill:var(--non)}
.jardin .etq.on .etiq{fill:var(--non);text-decoration:underline;text-decoration-thickness:2px}
.jardin .etq.on .fleche{stroke:var(--non)}
.jardin .v-m{display:none}
.ruban{max-width:1440px;margin:0 auto;padding:16px 36px 18px;background:var(--bande);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:6px 28px;align-items:center}
.ruban-l{font-weight:600;font-size:18px}
.ruban-mesure{display:flex;align-items:center;gap:16px}
.ruban input[type=range]{flex:1;min-width:0;height:44px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.ruban input[type=range]::-webkit-slider-runnable-track{height:30px;border-radius:3px;background:
  repeating-linear-gradient(90deg,#1f2a26 0 2px,transparent 2px 10%),repeating-linear-gradient(90deg,#1f2a26 0 1px,transparent 1px 2%) 0 0/100% 40% no-repeat,#c9d3cd}
.ruban input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:44px;margin-top:-7px;border-radius:3px;background:var(--rouge);border:2px solid #fff}
.ruban input[type=range]::-moz-range-track{height:30px;border-radius:3px;background:#c9d3cd}
.ruban input[type=range]::-moz-range-thumb{width:22px;height:44px;border-radius:3px;background:var(--rouge);border:2px solid #fff}
.saisie{display:inline-flex;align-items:center;gap:8px;flex:none}
.saisie input{font:600 24px Rubik,sans-serif;width:120px;min-height:48px;padding:4px 10px;border:2px solid #6b7672;border-radius:6px;color:#111;background:#fff}
.saisie .u{font-size:20px;font-weight:600;min-width:36px}
.ruban-aide{grid-column:1/-1;margin:0;font-size:16px;color:var(--doux)}
.ruban-aide[hidden]{display:none}
.oui-non{grid-column:2;border:0;padding:0;margin:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.oui-non[hidden]{display:none}
.oui-non legend{float:left;font-weight:600;margin-right:12px}
.oui-non label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600}
.oui-non input{width:22px;height:22px;accent-color:var(--rouge)}
.ruban.oui-non-actif .ruban-mesure,.ruban.oui-non-actif .ruban-l{display:none}
.regles{max-width:780px;margin:0 auto;padding:26px 24px 6px}
.regle{display:none}
.regle.on{display:block}
.regle:focus{outline:none}
.regle h2{font-size:34px;line-height:1.1;margin:0 0 8px}
.reponse-t{font-size:20px;margin:0 0 6px}
.plus summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.plus ul{margin:0 0 6px;padding-left:22px}
.avant,.src{font-size:16px;color:var(--doux);margin:0 0 6px}
.guide{font-size:18px;font-weight:600;margin:6px 0}
.liste{max-width:1440px;margin:0 auto;padding:24px 36px 10px}
.liste h2,.odds h2,.methode h2{font-size:34px;line-height:1.1;margin:0 0 10px}
.liste ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px}
.liste a{display:flex;justify-content:space-between;gap:12px;min-height:46px;align-items:center;text-decoration:none;border-bottom:1px solid var(--filet);font-weight:500}
.liste a span{color:var(--doux);font-weight:400;text-align:right}
.liste a:hover{text-decoration:underline}
.liste a[aria-current="true"]{color:var(--non)}
.general{font-size:16px;margin:16px 0 0;color:var(--doux);max-width:900px}
.odds,.methode{max-width:1440px;margin:0 auto;padding:30px 36px}
.methode{padding-top:6px;max-width:980px;margin-left:auto;margin-right:auto}
.methode h2{font-size:30px;margin-top:0}
.methode p{max-width:68ch}
.odds .chapo{max-width:900px;margin:0 0 14px}
.cotes{list-style:none;margin:0;padding:0;columns:2;column-gap:48px}
.cotes li{display:grid;grid-template-columns:150px 170px 1fr;align-items:center;gap:10px;min-height:50px;break-inside:avoid;border-bottom:1px solid #e0e6e3;overflow:hidden}
.cotes .n{font-weight:600;overflow-wrap:anywhere}
.cotes .chance{font-weight:600}
.cotes small{display:block;font-weight:400;font-size:16px;color:var(--doux)}
.cotes .piste{position:relative;height:30px;background:linear-gradient(#cfd8d3,#cfd8d3) 0 50%/100% 2px no-repeat}
.cotes .pt{position:absolute;top:50%;transform:translate(-6px,-50%);padding-left:16px;font-size:16px;white-space:nowrap}
.cotes .pt::before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--encre)}
.cotes .pt.g{transform:translate(calc(-100% + 6px),-50%);padding:0 16px 0 0}.cotes .pt.g::before{left:auto;right:0}
.cotes li.vieux .pt::before{background:#fff;box-shadow:inset 0 0 0 2px var(--encre)}
.cotes .note-v{grid-column:2/-1;font-size:16px;color:var(--doux);margin-top:-8px;padding-bottom:4px}
.cotes li.absent{color:var(--non)}
.cotes .vide{font-size:16px}
.cotes a{text-decoration:none}.cotes a:hover{text-decoration:underline}
.tableau{overflow-x:auto}
.tableau summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
table{border-collapse:collapse;width:100%;max-width:980px;font-size:16px}
caption{text-align:left;padding:6px 0}
td small,th small{font-size:16px}
th,td{text-align:left;padding:6px 10px;border-bottom:1px solid #e0e6e3;vertical-align:top}
tr.absent td,tr.absent th{color:var(--non)}
.odds .src{font-size:16px;color:var(--doux);max-width:900px}

/* ---- fiche d'un conseil ---- */
.fiche h1{font-size:40px;line-height:1.1;margin:18px 0 10px}
.fiche .reponse{font-size:20px;max-width:62ch;margin:0 0 10px}
.fraicheur{color:var(--non);font-weight:600;margin:10px 0 0;max-width:62ch}
.lignes{margin:0;padding:0}
.lignes>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2px 24px;align-items:center;min-height:56px;padding:6px 0;border-bottom:1px solid var(--filet)}
.lignes dt{font-weight:500}
.lignes dd{margin:0;font-weight:600;font-size:22px}
.lignes dd small{display:block;font-size:16px;font-weight:400;color:var(--doux)}
.lignes .manque{color:var(--non);font-size:18px}
.rang{position:relative;display:block;height:26px;margin-top:4px;background:linear-gradient(#cfd8d3,#cfd8d3) 0 50%/100% 2px no-repeat}
.rang i{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#aab6b0}
.rang b{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--rouge);border:2px solid #fff}
.rang-bornes{display:flex;justify-content:space-between;font-size:16px;font-weight:400;color:var(--doux)}
.annees{list-style:none;margin:0;padding:0;max-width:640px}
.annees li{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;align-items:center;gap:12px;min-height:40px}
.annees .an{font-weight:500}
.annees .barre{display:block;height:16px;background:var(--herbe);border-radius:2px}
.annees .partielle .barre{background:repeating-linear-gradient(135deg,var(--herbe) 0 6px,#b7d0a6 6px 12px)}
.annees .nb{text-align:right;font-weight:600}
.annees-note{font-size:16px;color:var(--doux);max-width:62ch}
.voir-tous{margin:26px 0 0}

/* ---- pied de page ---- */
.bas{max-width:1440px;margin:0 auto;padding:20px 36px 44px;font-size:16px;color:var(--doux)}
.bas h2{font-size:26px;line-height:1.15;margin:0 0 6px;color:var(--encre)}
.bas p{margin:6px 0;max-width:72ch}
.bas .sources{margin:8px 0 12px;padding-left:22px}
.bas .sources li{margin:2px 0;max-width:78ch}
.bas a{color:var(--encre)}
.bas .liens a{display:inline-flex;align-items:center;min-height:44px;margin-right:18px}

/* ---- tablette : le titre et le verdict passent autour de la scène ---- */
@media (max-width:1399px){
  .scene{display:flex;flex-direction:column}
  .titre,.verdict-zone{position:static;width:auto;max-width:none;pointer-events:auto}
  .titre{order:0;padding:16px 24px 0}
  .titre p{max-width:60ch}
  .cadre{order:1}
  .verdict-zone{order:2;padding:6px 24px 12px;background:var(--papier);border-radius:0}
  .cotes{columns:1}
}
/* ---- téléphone : une fenêtre de 700 unités sur le dessin, décalée selon l'objet choisi ---- */
@media (max-width:899px){
  h1.grand{font-size:34px}
  .titre{padding:14px 16px 0}
  .titre p{font-size:17px}
  .verdict-zone{padding:4px 16px 10px}
  .verdict{font-size:30px}
  .pourquoi{font-size:17px}
  .cadre{aspect-ratio:700/640;max-width:640px;margin:0 auto;width:100%}
  .jardin{width:205.714%;max-width:none;margin-left:calc(var(--dec,60) * -1%);transition:margin-left .3s}
  .jardin .v-d{display:none}.jardin .v-m{display:inline}
  .jardin .etiq{font-size:32px}
  .jardin .seuil-t{font-size:30px}
  .jardin .o-subdivide.on .note-div{font-size:30px}
  .ruban{grid-template-columns:minmax(0,1fr);padding:10px 16px 14px}
  .saisie input{width:96px}
  .oui-non{grid-column:1}
  .regles,.liste,.odds,.methode,.bas,.prose,.fiche,.tete-page{padding-left:16px;padding-right:16px}
  .haut{padding:6px 16px}
  .liste ul{grid-template-columns:1fr}
  .cotes li{grid-template-columns:1fr 1fr;gap:2px 10px;padding:6px 0}
  .cotes .piste{grid-column:1/-1}
  .cotes .note-v,.cotes .vide{grid-column:1/-1;margin-top:0}
  .tete-page h1,.fiche h1{font-size:32px}
  .lignes>div{grid-template-columns:1fr}
}
.scene{--dec:60}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* vues:début (généré par construction/jardin.py) */
@media (max-width:899px){
.cadre[data-vue="defaut"]{--dec:60.0}
.cadre[data-vue="defaut"] .avis-pos{transform:translate(430px,566px) scale(1.5)}
.cadre[data-vue="shed"]{--dec:31.429}
.cadre[data-vue="shed"] .avis-pos{transform:translate(290px,566px) scale(1.5)}
.cadre[data-vue="shed"] .etq[data-id="dormer"]{visibility:hidden;pointer-events:none}
.cadre[data-vue="shed"] .etq[data-id="heat-pump"]{visibility:hidden;pointer-events:none}
.cadre[data-vue="shed"] .etq[data-id="garden-house"]{visibility:hidden;pointer-events:none}
.cadre[data-vue="garden-house"]{--dec:85.714}
.cadre[data-vue="garden-house"] .avis-pos{transform:translate(360px,566px) scale(1.5)}
.cadre[data-vue="garden-house"] .etq[data-id="subdivide"]{visibility:hidden;pointer-events:none}
.cadre[data-vue="garden-house"] .etq[data-id="insulation"]{visibility:hidden;pointer-events:none}
.cadre[data-vue="garden-house"] .etq[data-id="bike-bin"]{visibility:hidden;pointer-events:none}
.cadre[data-vue="garden-house"] .etq[data-id="shed"]{visibility:hidden;pointer-events:none}
}
/* vues:fin */