/* Taïga — « Composez » (chargée seulement sur les pages composez-*) */

.cz-modeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.cz-modele { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.cz-modele img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cz-modele > div { padding: 1.5rem; }
.cz-modele h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 .5rem; }
.cz-modele p { color: var(--ink-soft); margin: 0 0 1rem; }
.cz-bientot { justify-content: center; background: var(--beige); color: var(--grey); min-height: 12rem; }

.cz { padding-block: 1.5rem 4rem; }
.cz-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr); gap: 2rem; align-items: start; }
.cz-vue { position: sticky; top: 6rem; }
.cz-3d { width: 100%; aspect-ratio: 4 / 3; background: #f4efe7; border: 1px solid var(--line); touch-action: none; }
.cz-3d canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.cz-resume { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-soft); }
.cz-resume ul { margin: .5rem 0; padding-left: 1.2rem; columns: 2; }
.cz-documents { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.cz-sous-titre { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 .5rem; }
.cz-documents ul { margin: 0; padding-left: 1.2rem; font-size: var(--fs-small); }
.cz-documents li { margin: .3rem 0; }
.cz-ok { color: var(--sage-deep); font-weight: 600; margin: 0; }
.cz-hors { color: var(--accent); font-weight: 600; margin: 0; }

.cz-panneau { background: var(--white); border: 1px solid var(--line); padding: 1.5rem; }
.cz-titre { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 1rem; }
.cz-panneau fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 1rem 0; }
.cz-panneau legend { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--oak); padding-right: .5rem; }
.cz-champ { display: grid; gap: .3rem; margin-bottom: .8rem; font-size: var(--fs-small); }
.cz-champ span { color: var(--ink-soft); }
.cz-champ input, .cz-champ select, .cz-champ textarea { border: 1px solid var(--beige-line); background: var(--bg); padding: .55rem .7rem; border-radius: 2px; }
.cz-champ small, .cz-note { color: var(--grey); font-size: .8rem; margin: .2rem 0; }
.cz-champ .cz-plage { color: var(--oak); }
.cz-fenetre { border: 1px solid var(--line); padding: .8rem .8rem .2rem; margin-bottom: .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
/* Libellés de longueurs différentes (« Allège (du sol au bas), en cm ») : les champs d'une même ligne restent alignés. */
.cz-fenetre > .cz-champ { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.cz-fenetre > .cz-champ > input, .cz-fenetre > .cz-champ > select { width: 100%; min-width: 0; box-sizing: border-box; }
.cz-fenetre-titre { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-small); font-weight: 600; margin-bottom: .4rem; }
.cz-fenetre .cz-case { grid-column: 1 / -1; }
.cz-paroi { border-bottom: 1px solid var(--line); padding-bottom: .4rem; margin-bottom: .6rem; }
.cz-travees { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: -.2rem 0 .3rem; }
.cz-travees .cz-case { margin: 0; }
.cz-retirer, .cz-ajout { background: none; border: 1px solid var(--beige-line); padding: .35rem .7rem; font-size: .8rem; cursor: pointer; color: var(--ink-soft); }
.cz-ajout { width: 100%; }
.cz-pro { padding-block: 1rem 3rem; }
.cz-pro-grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; align-items: start; }
.cz-prix { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; font-size: var(--fs-small); }
.cz-prix table { width: 100%; border-collapse: collapse; }
.cz-prix th, .cz-prix td { padding: .3rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cz-prix td.n, .cz-prix th.n { text-align: right; white-space: nowrap; }
.cz-prix tfoot td { font-weight: 600; border-bottom: 0; }
.cz-bandeau-pro { background: var(--beige); padding: .6rem .8rem; margin-bottom: 1rem; font-size: var(--fs-small); }
@media (max-width: 900px) { .cz-pro-grille { grid-template-columns: 1fr; } }
.cz-case { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-small); margin: .4rem 0; }
.cz-case > span { flex: 1; min-width: 0; }
.cz-case a { text-decoration: underline; }
.cz-lettre { background: var(--white); border-left: 3px solid var(--oak); padding: .7rem .9rem; margin-top: .8rem; }
.cz-panneau .btn { width: 100%; margin-top: .5rem; }

.cz-demande { padding-block: 3rem; }
.cz-formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; max-width: 46rem; }
.cz-large { grid-column: 1 / -1; }
.cz-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Contrôle anti-robot ALTCHA (09/10/2026) : une ligne discrète au-dessus du bouton d'envoi. */
.cz-altcha { display: block; margin: .25rem 0 .6rem; font-size: .8rem;
  --altcha-max-width: 240px; --altcha-border-width: 0; --altcha-color-base: transparent;
  --altcha-color-text: var(--muted, #6b6259); --altcha-border-radius: 0; }
.cz-altcha[hidden] { display: none; }

@media (max-width: 900px) {
  .cz-grille { grid-template-columns: 1fr; }
  .cz-vue { position: static; }
  .cz-formulaire { grid-template-columns: 1fr; }
  .cz-resume ul { columns: 1; }
}

/* ── Parcours (30/09/2026) : « Partir de… », étapes, récapitulatif, barre du bas, dialogues, jardin ── */
.cz-partir { margin-bottom: 2rem; }
.cz-partir-titre { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 1rem; }
.cz-partir-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem; }
.cz-carte { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); }
.cz-carte.cz-choisie { border-color: var(--oak); box-shadow: 0 0 0 1px var(--oak); }
.cz-carte.cz-rattachee { border-width: 2px; }
.cz-rattachee-note { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--oak); }
.cz-carte figure { margin: 0; position: relative; }
.cz-carte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #f4efe7; }
.cz-carte figcaption { position: absolute; left: .5rem; bottom: .5rem; background: rgba(255,255,255,.9); font-size: .7rem; letter-spacing: .06em; padding: .15rem .45rem; color: var(--ink-soft); }
.cz-carte-texte { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.cz-carte h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.cz-carte h3 small { font-family: var(--font-body); font-size: .75rem; color: var(--grey); font-weight: 400; margin-left: .3rem; }
.cz-carte p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); flex: 1; }
.cz-carte-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cz-carte .btn { padding: .65rem 1.1rem; }
.cz-lien { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--oak); text-decoration: underline; cursor: pointer; }

.cz-onglets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: 0 0 1rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.cz-onglet { background: var(--bg); border: 1px solid var(--beige-line); padding: .5rem .3rem; font: inherit; font-size: .74rem; color: var(--ink-soft); cursor: pointer; text-align: center; line-height: 1.25; }
.cz-onglet b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--oak); }
.cz-onglet[aria-selected="true"] { background: var(--oak); border-color: var(--oak); color: #fff; }
.cz-onglet[aria-selected="true"] b { color: #fff; }
.cz-suite { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.cz-panneau .cz-suite .btn { width: auto; margin: 0; }
.cz-precedent { background: none; border: 0; font: inherit; font-size: .85rem; color: var(--ink-soft); cursor: pointer; padding: .4rem 0; }
.cz-precedent::before { content: "\2039  "; }

.cz-comparer { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .4rem; }
.cz-comparer > div { border: 1px solid var(--line); padding: .7rem .8rem; background: var(--bg); }
.cz-comparer h4 { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--oak); }
.cz-comparer ul { margin: 0; padding-left: 1rem; font-size: .8rem; color: var(--ink-soft); }
.cz-comparer li { margin: .2rem 0; }

.cz-recap dl { margin: 0 0 .8rem; }
.cz-recap-ligne { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.cz-recap dt { color: var(--grey); }
.cz-recap dd { margin: 0; }
.cz-recap > p { font-size: var(--fs-small); }
.cz-assurance { list-style: none; margin: 1rem 0; padding: .8rem .9rem; background: var(--beige); font-size: .82rem; color: var(--ink-soft); }
.cz-assurance li { margin: .35rem 0; }
.cz-assurance strong { color: var(--oak-deep); display: block; }
.cz-rdv-boutons { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 1rem; }
.cz-rdv-boutons .cz-outil { flex: 1 1 12rem; }

.cz-3d { position: relative; overflow: hidden; }
.cz-3d canvas { position: relative; z-index: 1; }
/* réglage hors calcul : dit sur la maquette, qui garde le dernier réglage calculé */
.cz-3d-hors { position: absolute; left: .5rem; top: .5rem; right: .5rem; max-width: 34rem; z-index: 3; pointer-events: none;
  background: rgba(255, 255, 255, .94); border-left: 3px solid var(--accent); padding: .45rem .7rem; font-size: .8rem; line-height: 1.35; color: var(--ink, #2b2622); }
.cz-3d-hors strong { color: var(--accent); }
.cz-3d-hors ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.cz-jardin-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cz-3d.cz-en-jardin { background: #222; max-height: 75vh; }
.cz-vue-outils { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; align-items: center; }
.cz-vue-outils > span:not([hidden]) { display: contents; }
.cz-outil { background: var(--white); border: 1px solid var(--beige-line); padding: .45rem .8rem; font: inherit; font-size: .8rem; cursor: pointer; color: var(--ink-soft); }
.cz-outil:hover { border-color: var(--oak); color: var(--oak-deep); }
.cz-bascule { display: inline-flex; }
.cz-vue-outils .cz-bascule { display: inline-flex !important; }
.cz-bascule .cz-outil + .cz-outil { border-left: 0; }
.cz-outil[aria-pressed="true"] { background: var(--oak); border-color: var(--oak); color: #fff; }

.cz-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(28,28,28,.08); padding-bottom: env(safe-area-inset-bottom, 0px); transition: transform var(--t) var(--ease); }
.cz-barre.cz-barre-cachee { transform: translateY(110%); }
.cz-barre-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
.cz-barre-resume { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); min-width: 0; }
.cz-barre-resume .cz-ok, .cz-barre-resume .cz-hors { display: inline; margin-left: .4rem; font-size: .78rem; }
.cz-barre-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cz-barre .btn { padding: .75rem 1.2rem; }
body.cz-avec-barre { padding-bottom: 5rem; }

.cz-dialogue { margin: auto; border: 0; padding: 0; width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; box-shadow: var(--sh-lg); background: var(--white); color: var(--ink); }
.cz-dialogue::backdrop { background: rgba(20,17,14,.45); }
.cz-dialogue form { padding: 1.5rem; position: relative; }
.cz-dialogue .btn { margin-top: .6rem; }
.cz-fermer { position: absolute; top: .5rem; right: .6rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--grey); padding: .2rem .4rem; }
.cz-formulaire-dialogue { max-width: none; }
.cz-bascule-large { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.cz-bascule-large label { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--beige-line); padding: .45rem .7rem; font-size: var(--fs-small); cursor: pointer; }
.cz-bascule-large label:has(input:checked) { border-color: var(--oak); background: var(--beige); }
.cz-dialogue [hidden] { display: none !important; }

@media (max-width: 900px) {
  /* Téléphone : la maquette reste visible en haut pendant le réglage. */
  .cz-grille { display: flex; flex-direction: column; gap: 1rem; }
  .cz-vue { display: contents; }
  .cz-3d { position: sticky; top: var(--header-h); z-index: 5; order: 1; aspect-ratio: 16 / 10; box-shadow: 0 6px 12px -8px rgba(0,0,0,.25); }
  .cz-3d.cz-en-jardin { max-height: 55vh; }
  .cz-vue-outils { order: 2; margin-top: 0; }
  #cz-jardin-aide { order: 2; }
  .cz-panneau { order: 3; padding: 1rem; }
  .cz-resume { order: 4; margin-top: 0; }
  .cz-prix { order: 5; }
  .cz-documents { order: 6; }
  .cz-onglets { scroll-margin-top: calc(var(--header-h) + 62.5vw + .5rem); }
  .cz-comparer { grid-template-columns: 1fr; }
  .cz-partir-liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
  .cz-carte { scroll-snap-align: start; }
  .cz-barre-in { flex-direction: column; align-items: stretch; gap: .4rem; padding-block: .5rem; }
  .cz-barre-resume { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cz-barre-actions .btn { flex: 1; justify-content: center; padding: .7rem .5rem; font-size: .66rem; letter-spacing: .08em; }
  body.cz-avec-barre { padding-bottom: 7.5rem; }
  .cz-recap-ligne { grid-template-columns: 5.5rem 1fr auto; }
}
.cz-arreter { border: 1px solid var(--oak); background: var(--white); padding: 1rem 1.2rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; }
.cz-arreter p { margin: 0; font-size: var(--fs-small); }
.cz-arreter > div { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cz-arreter #cz-arreter-etat { flex-basis: 100%; }
.cz-grille > *, .cz-panneau, .cz-etape, .cz-panneau fieldset { min-width: 0; }
.cz-champ select, .cz-champ input { max-width: 100%; min-width: 0; }

/* Le bac à plantes : prix affiché en direct et commande en ligne (04/10/2026). */
.cz-bac-prix { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.cz-bac-montant { margin: 0; }
.cz-bac-ttc { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--oak-deep); }
.cz-bac-montant small { color: var(--grey); font-size: .8rem; }
.cz-bac-remise { margin: .8rem 0; }
.cz-bac-detail table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.cz-bac-detail td { padding: .25rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cz-bac-detail td.n { text-align: right; white-space: nowrap; }
.cz-bac-detail tfoot td { font-weight: 600; }
.cz-bac-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 .4rem; }
@media (max-width: 900px) { .cz-bac-prix { order: 5; } }

/* ── Téléphone (04/10/2026) : saisie sans zoom, maquette qui se fait petite, barre mince, cibles au doigt.
   Le comportement est dans assets/js/composez-telephone.js. ── */
.cz-pas { display: flex; align-items: stretch; min-width: 0; }
.cz-pas > input { flex: 1; min-width: 0; text-align: center; }
.cz-pas-bouton { display: none; }
.cz-aide-bouton { display: none; }
.cz-agrandir { display: none; }
@media (max-width: 900px) {
  /* 16 px : en dessous, l'iPhone zoome la page à chaque saisie */
  .cz input, .cz select, .cz textarea, .cz-dialogue input, .cz-dialogue select, .cz-dialogue textarea,
  .cz-demande input, .cz-demande select, .cz-demande textarea { font-size: 16px; }
  .cz-champ input, .cz-champ select { min-height: 44px; }
  .cz-pas-bouton { display: block; flex: 0 0 44px; border: 1px solid var(--beige-line); background: var(--white); color: var(--oak-deep);
    font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
  .cz-pas-bouton:first-child { border-right: 0; }
  .cz-pas-bouton:last-child { border-left: 0; }
  .cz-pas-bouton:active { background: var(--beige); }
  .cz-fenetre > .cz-champ > .cz-pas { width: 100%; }
  .cz-fenetre .cz-pas-bouton { flex-basis: 36px; }

  /* cases et outils : au moins 44 px sous le doigt */
  .cz-case { min-height: 44px; align-items: center; margin: .1rem 0; }
  .cz-case input[type="checkbox"], .cz-case input[type="radio"] { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; }
  .cz-outil, .cz-retirer, .cz-ajout, .cz-lien { min-height: 44px; }
  .cz-bascule-large label { min-height: 44px; }

  /* aides repliées derrière « ? » ; ouvertes quand le champ a la main */
  .cz-aide-bouton { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: .2rem;
    border: 1px solid var(--beige-line); border-radius: 50%; background: var(--white); color: var(--oak); font: inherit; font-size: .8rem;
    font-weight: 600; cursor: pointer; vertical-align: middle; }
  .cz-champ:not(.cz-aide-ouverte):not(:focus-within) > small:not(.cz-plage):not([id]) { display: none; }
  .cz-note-pliee { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; position: relative; }
  .cz-note-pliee::after { content: "… lire"; position: absolute; right: 0; bottom: 0; background: var(--white); padding-left: .3rem; color: var(--oak); }

  /* la maquette se fait petite pendant le réglage ; « Agrandir » la rend le temps de regarder */
  body.cz-3d-reduite .cz-3d { aspect-ratio: auto; height: 34vw; }
  body.cz-3d-reduite.cz-3d-agrandie .cz-3d { height: 62.5vw; }
  body.cz-3d-reduite .cz-agrandir { display: block; position: absolute; right: .4rem; bottom: .4rem; z-index: 2; min-height: 32px;
    padding: .3rem .7rem; border: 1px solid var(--beige-line); background: rgba(255,255,255,.92); font: inherit; font-size: .75rem;
    color: var(--ink-soft); cursor: pointer; }
  body.cz-3d-reduite .cz-onglets { scroll-margin-top: calc(var(--header-h) + 34vw + .5rem); }

  /* pendant une saisie au clavier : pas de barre du bas, maquette au plus petit */
  body.cz-saisie .cz-barre { transform: translateY(110%); }
  body.cz-saisie .cz-3d { height: 24vw; aspect-ratio: auto; }

  /* barre du bas mince : une ligne de résumé, « Recevoir mon devis » et « Par courriel » côte à côte */
  .cz-barre-in { gap: .3rem; padding-block: .4rem; }
  .cz-barre-actions { gap: .4rem; }
  .cz-barre-actions .btn { min-height: 44px; padding: .5rem .6rem; font-size: .7rem; }
  .cz-barre-actions .btn-oak { flex: 2; }
  .cz-barre-actions .cz-ouvrir-courriel { flex: 1; }
  body.cz-avec-barre { padding-bottom: 6rem; }

  /* « Partir d'une de nos réalisations » : un bandeau de vignettes, le configurateur suit tout de suite */
  .cz-partir { margin-bottom: 1rem; }
  .cz-partir-titre { font-size: 1.05rem; margin-bottom: .5rem; }
  .cz-partir-liste { grid-auto-columns: 58%; gap: .6rem; }
  .cz-carte img { aspect-ratio: 16 / 9; }
  .cz-carte figcaption { display: none; }
  .cz-carte-texte { padding: .6rem .7rem .7rem; gap: .4rem; }
  .cz-carte h3 { font-size: .95rem; }
  .cz-carte h3 small { display: block; margin: .1rem 0 0; }
  .cz-carte p { display: none; }
  .cz-carte .btn { width: 100%; justify-content: center; padding: .55rem .4rem; font-size: .66rem; min-height: 40px; }
  .cz-partir > .cz-note { display: none; }

  /* page Composez : image à gauche, texte à droite — trois ou quatre modèles par écran */
  .cz-modeles { grid-template-columns: 1fr; gap: .8rem; margin-top: 1.5rem; }
  .cz-modele { flex-direction: row; align-items: stretch; }
  .cz-modele img { width: 36%; aspect-ratio: auto; height: auto; min-height: 7.5rem; flex: 0 0 36%; }
  .cz-modele > div { padding: .8rem .9rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .cz-modele h3 { font-size: 1.05rem; margin-bottom: .3rem; }
  .cz-modele p { font-size: .82rem; margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Vue en plan cotée (bouton « Plan » à côté de la 3D, 04/10/2026) : même cadre que la maquette */
.cz-plan { width: 100%; aspect-ratio: 4 / 3; background: #f4efe7; border: 1px solid var(--line); overflow: hidden; }
.cz-plan svg { display: block; width: 100%; height: 100%; }
/* petit écran (05/10/2026) : le cadre suit la hauteur du dessin, un plan élargi défile de côté */
.cz-plan.cz-plan-libre { aspect-ratio: auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.cz-plan.cz-plan-libre svg { height: auto; }
.cz-plan-vide { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--grey); font-size: var(--fs-small); }
#cz-plan-note { margin-top: .5rem; }

/* Mode interne (05/10/2026) : la page ouverte dans l'onglet « Maquette » d'un devis de l'ERP (iframe,
   ?interne=…). On garde les cartes « Partir de », la 3D, le plan et les réglages ; tout ce qui parle au
   visiteur ou envoie quelque chose disparaît (l'ERP enregistre la maquette sur son devis). */
.cz-interne .site-header, .cz-interne .site-footer, .cz-interne .breadcrumb, .cz-interne .consentement,
.cz-interne #cz-barre, .cz-interne #cz-demande, .cz-interne #cz-commande, .cz-interne .cz-dialogue,
.cz-interne #cz-vers-demande, .cz-interne .cz-ouvrir-courriel, .cz-interne .cz-rdv-boutons, .cz-interne #cz-note-prix,
.cz-interne .cz-assurance, .cz-interne #cz-prix, .cz-interne .cz-bac-actions, .cz-interne .cz-arreter { display: none !important; }
.cz-interne body.cz-avec-barre { padding-bottom: 0; }
.cz-interne .cz { padding-top: 1rem; }

/* Bacs à l'atelier (page Composez bac) */
.cz-atelier-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1.2rem; }
.cz-atelier-grille figure { margin: 0; }
.cz-atelier-grille img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.cz-atelier-grille figcaption { font-size: .85rem; margin-top: .4rem; color: var(--muted, #6b5d4f); }
@media (max-width: 760px) { .cz-atelier-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Suite : les réalisations de la famille et le reste du site (Composez n'est pas un cul-de-sac) */
.cz-reals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.2rem; }
.cz-real img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cz-real span { display: block; margin-top: .5rem; font-weight: 500; line-height: 1.35; }
.cz-ailleurs-liens { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.cz-interne .cz-ailleurs { display: none !important; }
@media (max-width: 760px) { .cz-reals { grid-template-columns: 1fr; } }