/* EMC74, bâtiments collectifs : l'électricité des immeubles d'habitation, pour les promoteurs, constructeurs et syndics.
   Signature : le cartouche de plan d'architecte et l'immeuble qui s'allume étage par étage. */
@property --vitre { syntax: '<color>'; inherits: false; initial-value: #1d3c45; }

/* ---------- haut de page : une planche de plan (en-tête, texte + photo, cartouche d'infos) ---------- */
.col-hero { padding-block: clamp(20px, 3vw, 36px) clamp(48px, 7vw, 88px); background: var(--bg); }
.col-planche { background: var(--surface); border: 1.5px solid var(--primary); box-shadow: 10px 10px 0 color-mix(in srgb, var(--primary) 10%, transparent); }
.col-planche__tete { display: flex; align-items: center; gap: 16px; padding: 10px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--primary); }
.col-planche__tete img { width: 64px; height: auto; }
.col-planche__tete p { font-family: var(--font-title); font-size: 1.2rem; line-height: 1.25; color: var(--primary); }
.col-planche__tete span { display: block; font-family: var(--font-body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.col-planche__corps { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.col-planche__texte { padding: clamp(22px, 3.2vw, 40px) clamp(20px, 3vw, 40px); }
.col-planche h1 { font-size: clamp(1.85rem, 3vw, 2.7rem); line-height: 1.1; }
.col-planche .lead { margin-top: 16px; }
.col-planche__photo { position: relative; margin: 0; border-left: 1px solid var(--primary); }
.col-planche__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.col-planche__infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--primary); }
.col-planche__infos div { padding: 12px clamp(20px, 3vw, 32px); }
.col-planche__infos div + div { border-left: 1px solid var(--primary); }
.col-planche__infos dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.col-planche__infos dd { margin: 2px 0 0; font-family: var(--font-title); font-size: 1.2rem; color: var(--primary); }

/* ---------- le lot électricité, étage par étage (du bas vers le haut) ---------- */
.col-etages { color: var(--primary-ink); background: var(--primary); }
.col-etages__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.col-etages h2 { color: var(--primary-ink); }
.col-etages__intro p { margin-top: 1em; color: color-mix(in srgb, var(--primary-ink) 82%, transparent); }
.col-immeuble { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; }
.col-immeuble::after { content: ""; width: calc(clamp(120px, 15vw, 190px) + 28px); height: 3px; margin: 0 0 0 -14px; background: color-mix(in srgb, var(--primary-ink) 85%, transparent); }
.col-niveau { display: grid; grid-template-columns: clamp(120px, 15vw, 190px) minmax(0, 1fr); --d: 0s; }
.col-niveau__facade { position: relative; border: 1.5px solid color-mix(in srgb, var(--primary-ink) 85%, transparent); border-top: 0; border-bottom: 2px solid var(--balcon); background-image: repeating-linear-gradient(90deg, var(--vitre) 0 12.87%, transparent 12.87% 21.78%); background-size: calc(100% - 26px) 34px; background-position: 13px 50%; background-repeat: no-repeat; transition: --vitre .6s var(--d); }
/* rez-de-chaussée : pas de fenêtre au milieu, c'est la porte d'entrée */
.col-niveau:first-child .col-niveau__facade { border-bottom: 1.5px solid color-mix(in srgb, var(--primary-ink) 85%, transparent); background-image: linear-gradient(90deg, var(--vitre) 0 12.87%, transparent 12.87% 21.78%, var(--vitre) 21.78% 34.65%, transparent 34.65% 65.35%, var(--vitre) 65.35% 78.22%, transparent 78.22% 87.13%, var(--vitre) 87.13% 100%); background-size: calc(100% - 26px) 30px; background-position: 13px 38%; }
.col-niveau:first-child .col-niveau__facade::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 40px; translate: -50% 0; background: var(--primary); border: 1.5px solid color-mix(in srgb, var(--primary-ink) 85%, transparent); border-bottom: 0; }
.col-niveau__txt { display: flex; flex-direction: column; justify-content: center; min-height: 92px; padding: 12px 0 12px 26px; border-bottom: 1px dashed color-mix(in srgb, var(--primary-ink) 30%, transparent); }
.col-niveau__num { font-family: var(--font-title); font-size: 1rem; color: var(--lumiere); }
.col-niveau h3 { margin: 2px 0; font-size: 1.3rem; color: var(--primary-ink); }
.col-niveau__txt p:last-child { font-size: .95rem; color: color-mix(in srgb, var(--primary-ink) 80%, transparent); }
.col-niveau:nth-child(1) { --d: .3s; } .col-niveau:nth-child(2) { --d: .7s; } .col-niveau:nth-child(3) { --d: 1.1s; } .col-niveau:nth-child(4) { --d: 1.5s; } .col-niveau:nth-child(5) { --d: 1.9s; }
.col-immeuble.is-visible .col-niveau__facade { --vitre: var(--lumiere); }
html:not(.js) .col-niveau__facade { --vitre: var(--lumiere); }

/* ---------- savoir-faire ---------- */
.col-trois { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.col-trois li { padding-top: 22px; border-top: 2px solid var(--primary); }
.col-picto { width: 52px; height: 52px; margin-bottom: 16px; }
.col-picto__t { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.col-picto__accent { stroke: var(--accent); }
.col-trois h3 { margin-bottom: 8px; font-size: 1.35rem; }
.col-trois p { color: var(--muted); }

/* ---------- réalisations : un programme livré ---------- */
.col-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 20vw, 290px); gap: 12px; }
.col-grille figure:first-child { grid-column: span 2; grid-row: span 2; }
.col-grille figure, .col-chantier figure { position: relative; margin: 0; overflow: hidden; background: var(--ice); }
.col-grille img, .col-chantier img { width: 100%; height: 100%; object-fit: cover; }
.col-grille figcaption, .col-chantier figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 10px; font-size: .82rem; line-height: 1.35; color: var(--primary); background: var(--surface); border-left: 3px solid var(--accent); }
.col-real__titre { margin: clamp(36px, 5vw, 56px) 0 16px; font-size: 1.4rem; }
.col-chantier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 16vw, 230px); gap: 12px; }

/* ---------- fiche de consultation ---------- */
.col-devis { background: var(--ice); }
.col-devis__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.col-devis__intro { position: sticky; top: calc(var(--header-h) + 24px); }
.col-devis__contact { margin: 30px 0 0; border-top: 1px solid var(--primary); }
.col-devis__contact div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.col-devis__contact dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.col-devis__contact dd { margin: 0; color: var(--primary); }
.col-devis__contact a { color: var(--primary); }
.col-fiche { gap: 0; padding: 0; border: 1.5px solid var(--primary); border-radius: 0; box-shadow: 10px 10px 0 color-mix(in srgb, var(--primary) 10%, transparent); }
.col-fiche__titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 24px; font-family: var(--font-title); font-size: 1.4rem; color: var(--primary-ink); background: var(--primary); }
.col-fiche__titre span { font-family: var(--font-body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--glacier); }
.col-fiche__bloc { padding: 22px 24px 24px !important; border-bottom: 1px solid var(--border) !important; }
.col-fiche legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 1.3rem; }
.col-fiche legend span { display: grid; place-items: center; width: 30px; height: 30px; font-family: var(--font-body); font-size: .9rem; color: var(--primary-ink); background: var(--accent); }
.col-fiche legend + * { clear: both; }
.col-fiche > .consent { padding: 20px 24px 0; }
.col-fiche > .btn { width: calc(100% - 48px); margin: 18px 24px 0; }
.col-fiche > .form__status { padding: 0 24px 22px; }
.col-fiche > .form__status:empty { display: block; height: 22px; }

/* ---------- tablette et mobile ---------- */
@media (max-width: 960px) {
  .col-planche__corps { grid-template-columns: 1fr; }
  .col-planche__photo { height: 300px; border-left: 0; border-top: 1px solid var(--primary); }
  .col-etages__grid, .col-devis__grid { grid-template-columns: 1fr; }
  .col-devis__intro { position: static; }
  .col-trois { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .col-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .col-grille figure:first-child { grid-row: span 1; }
  .col-grille figure:last-child { grid-column: span 2; }
  .col-chantier { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .col-planche__infos { grid-template-columns: 1fr; }
  .col-planche__infos div + div { border-left: 0; border-top: 1px solid var(--primary); }
  .col-planche__tete img { width: 62px; }
  .col-niveau__txt { padding-left: 16px; min-height: 104px; }
  .col-niveau h3 { font-size: 1.1rem; }
  .col-fiche__bloc { padding: 18px 16px 20px !important; }
  .col-fiche > .consent { padding: 18px 16px 0; }
  .col-fiche > .btn { width: calc(100% - 32px); margin: 16px 16px 0; }
}