/* ABK Architecture & Ingénierie
   Styles propres aux pages intérieures */

.tete-page { padding: clamp(48px, 7vw, 100px) var(--marge) clamp(40px, 5vw, 72px); }
.tete-page__titre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--marge); align-items: end; }
.tete-page__titre p { color: var(--gris); }
@media (max-width: 860px) { .tete-page__titre { grid-template-columns: 1fr; gap: 20px; } }

.persienne--vue { height: clamp(320px, 62vh, 640px); margin-inline: var(--marge); }

/* -- Agence : frise cotée --------------------------------------------- */

.frise { position: relative; padding-block: 120px; margin-inline: 8px; }
.frise__ligne { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--blanc); }
.frise__ligne::before, .frise__ligne::after { content: ""; position: absolute; top: -8px; width: 1px; height: 17px; background: var(--blanc); }
.frise__ligne::before { left: 0; }
.frise__ligne::after { right: 0; }
.jalon { position: absolute; top: 50%; left: var(--x); width: 0; }
.jalon::before { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; background: var(--laterite); transform: rotate(45deg); }
.jalon div { position: absolute; left: 0; width: 220px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.45); font-size: 14px; }
.jalon:nth-child(odd) div { bottom: 14px; padding-bottom: 4px; }
.jalon:nth-child(even) div { top: 14px; padding-top: 4px; }
.jalon b { display: block; font-size: 30px; font-stretch: 112%; font-weight: 350; line-height: 1.1; }
.jalon span { color: rgba(255,255,255,.7); display: block; }
.jalon--fin div { left: auto; right: 0; border-left: 0; border-right: 1px solid rgba(255,255,255,.45); padding-left: 0; padding-right: 14px; text-align: right; }
@media (max-width: 860px) {
  .frise { padding: 0 0 0 28px; margin: 0; }
  .frise__ligne { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .frise__ligne::before, .frise__ligne::after { left: -8px; width: 17px; height: 1px; top: 0; }
  .frise__ligne::after { top: auto; bottom: 0; right: auto; }
  .jalon, .jalon--fin { position: relative; left: auto; top: auto; width: auto; padding-block: 18px; }
  .jalon::before { left: -26px; top: 26px; }
  .jalon div, .jalon:nth-child(n) div, .jalon--fin div { position: static; width: auto; border: 0; padding: 0; text-align: left; }
}

/* -- Agence : organigramme ------------------------------------------- */

.orga { display: grid; gap: 0; }
.orga__niveau { --n: 1; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 16px; padding-top: 44px; }
.orga__niveau:first-child { padding-top: 0; }
.orga__niveau + .orga__niveau::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; width: 1px; background: var(--bleu); }
.orga__niveau + .orga__niveau::after { content: ""; position: absolute; top: 22px; height: 1px; background: var(--bleu); left: calc(50% / var(--n)); right: calc(50% / var(--n)); }
.orga__niveau + .orga__niveau .noeud::before { content: ""; position: absolute; top: -22px; left: 50%; height: 22px; width: 1px; background: var(--bleu); }
.noeud { position: relative; border: 1px solid var(--bleu); background: var(--blanc); padding: 18px 20px; }
.noeud--direction { border-width: 2px; }
.noeud h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.noeud p { font-size: 14px; color: var(--gris); margin-top: 6px; }
.noeud .note { display: block; margin-bottom: 8px; color: var(--bleu); }
.orga__lien { position: absolute; top: 50%; left: calc(50% - 8px); width: 16px; height: 1px; background: var(--bleu); }
.noeud--portrait { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; }
.noeud--portrait img { width: 110px; aspect-ratio: 1; object-fit: cover; }
.noeud--direction.noeud--portrait { grid-template-columns: 150px 1fr; }
.noeud--direction.noeud--portrait img { width: 150px; }
@media (max-width: 1100px) { .noeud--portrait, .noeud--direction.noeud--portrait { grid-template-columns: 1fr; } .noeud--portrait img, .noeud--direction.noeud--portrait img { width: 140px; } }
@media (max-width: 760px) {
  .orga__niveau, .orga__niveau:nth-child(n) { grid-template-columns: 1fr; padding-top: 24px; }
  .orga__niveau + .orga__niveau::before { height: 24px; }
  .orga__niveau + .orga__niveau::after, .orga__niveau + .orga__niveau .noeud::before, .orga__lien { display: none; }
}

/* -- Agence : quatre dimensions -------------------------------------- */

.dimensions { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--bleu); }
.dimensions > div { padding: 24px 24px 0 0; }
.dimensions > div + div { padding-left: 24px; border-left: 1px solid var(--trait); }
.dimensions dt { font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.dimensions dd { color: var(--gris); font-size: 15px; }
@media (max-width: 860px) {
  .dimensions { grid-template-columns: 1fr 1fr; }
  .dimensions > div, .dimensions > div + div { padding: 20px 16px 20px 0; border-left: 0; border-bottom: 1px solid var(--trait); }
}

/* -- Projets : légende-filtre ----------------------------------------- */

.legende { display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--trait); background: var(--blanc); margin-bottom: clamp(32px, 4vw, 56px); }
.legende > * { padding: 14px 18px; }
.legende__titre { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); border-right: 1px solid var(--trait); }
.legende__statuts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.legende__statuts button { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; opacity: .4; transition: opacity .2s; }
.legende__statuts button[aria-pressed="true"] { opacity: 1; }
.legende__statuts small { font-family: var(--mono); font-size: 12px; color: var(--gris); }
.legende__categories { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; border-top: 1px solid var(--trait); }
.legende__categories button { font-size: 14px; color: var(--gris); padding-block: 2px; border-bottom: 1px solid transparent; }
.legende__categories button[aria-pressed="true"] { color: var(--bleu); border-bottom-color: var(--bleu); }
@media (max-width: 640px) {
  .legende { grid-template-columns: 1fr; }
  .legende__titre { border-right: 0; border-bottom: 1px solid var(--trait); }
}
.resultat { margin-bottom: 20px; }
.vide { padding: 60px 0; color: var(--gris); }

.tableau-projets { margin-top: clamp(64px, 8vw, 110px); }
.tableau-projets table { font-size: 15px; }
.tableau-projets th { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); text-align: left; padding: 10px 12px 10px 0; border-bottom: 1.5px solid var(--bleu); }
.tableau-projets td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--trait); }
.tableau-projets tr[hidden] { display: none; }
.tableau-projets td a { font-weight: 600; text-decoration: none; }
.tableau-projets td a:hover { color: var(--bleu); text-decoration: underline; text-underline-offset: 4px; }
.tableau-projets td:not(:first-child) { color: var(--gris); }
@media (max-width: 760px) { .tableau-projets th:nth-child(3), .tableau-projets td:nth-child(3), .tableau-projets th:nth-child(4), .tableau-projets td:nth-child(4) { display: none; } }

/* -- Fiche projet ----------------------------------------------------- */

.projet-tete { padding: clamp(40px, 6vw, 90px) var(--marge) clamp(32px, 4vw, 56px); }
.projet-tete__titre { font-size: clamp(38px, 6.4vw, 104px); font-stretch: 112%; font-weight: 300; line-height: 1.02; max-width: 16em; }
.projet-tete__meta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 28px; font-size: 16px; color: var(--gris); }
.projet-tete__meta .statut { color: var(--encre); font-size: 16px; }
.projet-image { height: min(82vh, 900px); overflow: hidden; background: #dde2ea; }
.projet-image img { width: 100%; height: 118%; object-fit: cover; transform: translateY(var(--decalage, 0px)); }

.projet-corps { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(40px, 7vw, 120px); padding-block: clamp(64px, 8vw, 120px); }
.projet-fiche { position: sticky; top: calc(var(--hauteur-entete) + 32px); align-self: start; display: grid; grid-template-columns: auto 1fr; gap: 0 24px; }
.projet-fiche dt, .projet-fiche dd { padding: 13px 0; border-bottom: 1px solid var(--trait); }
.projet-fiche dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); padding-top: 16px; }
.projet-fiche dd { font-size: 15px; }
.projet-texte .texte-grand { font-size: clamp(22px, 2.2vw, 32px); font-stretch: 106%; font-weight: 350; line-height: 1.35; margin-bottom: 32px; }
@media (max-width: 860px) {
  .projet-corps { grid-template-columns: 1fr; }
  .projet-fiche { position: static; order: 2; }
  .projet-image { height: 60vh; }
}

.planning { margin-top: clamp(48px, 6vw, 80px); }
.planning ol { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 16px; }
.planning li { font-size: 13px; }
.planning li i { display: block; height: 18px; border: 1.5px dashed var(--bleu); margin-bottom: 10px; color: var(--bleu); }
.planning li.faite i { background: var(--bleu); border-style: solid; }
.planning li.actuelle i { background: var(--hachures); border-style: solid; }
.planning li.actuelle { color: var(--bleu); font-weight: 600; }
@media (max-width: 640px) {
  .planning ol { grid-template-columns: 1fr; }
  .planning li { display: flex; align-items: center; gap: 12px; }
  .planning li i { width: 60px; margin: 0; }
}

.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 40px); }
.galerie figure:first-child { grid-column: 1 / -1; }
.galerie figure:nth-child(3) { margin-top: clamp(40px, 8vw, 140px); }
.galerie img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.galerie figure:first-child img { aspect-ratio: 21 / 9; }
.galerie figcaption { margin-top: 10px; }
@media (max-width: 640px) { .galerie { grid-template-columns: 1fr; } .galerie figure:nth-child(3) { margin-top: 0; } .galerie img { aspect-ratio: 4 / 3; } }

.suivant { position: relative; display: block; height: clamp(300px, 52vh, 560px); overflow: hidden; text-decoration: none; color: var(--blanc); background: var(--nuit); }
.suivant img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .6s, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.suivant:hover img { opacity: .7; transform: scale(1.03); }
.suivant div { position: absolute; left: var(--marge); right: var(--marge); bottom: clamp(28px, 4vw, 56px); }
.suivant .note { color: rgba(255,255,255,.75); }
.suivant strong { display: block; margin-top: 10px; font-size: clamp(32px, 5vw, 76px); font-stretch: 112%; font-weight: 300; line-height: 1.05; }

/* -- Contact : fiche de renseignements -------------------------------- */

.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }
.formulaire fieldset { border: 0; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.formulaire legend { grid-column: 1 / -1; width: 100%; font-weight: 600; font-size: 18px; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1.5px solid var(--bleu); }
.formulaire legend .note { margin-right: 10px; color: var(--bleu); }
.champ { display: grid; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ label, .champ > span { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--gris); }
.champ input, .champ textarea {
  font: inherit; font-size: 16px; color: var(--encre); background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 0; padding: 12px 14px; width: 100%; -webkit-appearance: none; appearance: none;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.cases label { display: flex; align-items: center; gap: 10px; font-family: var(--police); font-size: 15px; color: var(--encre); cursor: pointer; }
.cases input { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--bleu); background: var(--blanc); flex: none; cursor: pointer; }
.cases input:checked { background: var(--bleu); box-shadow: inset 0 0 0 3px var(--blanc); }
@media (max-width: 600px) { .formulaire fieldset, .cases { grid-template-columns: 1fr; } }
.formulaire__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.formulaire__merci { display: none; margin-top: 20px; padding: 16px 18px; border: 1.5px solid var(--bleu); color: var(--bleu); }
.formulaire.envoye .formulaire__merci { display: block; }

.situation { position: relative; border: 1px solid var(--trait); background: var(--blanc); margin-top: 28px; }
.situation iframe { display: block; width: 100%; height: 340px; border: 0; }
.situation figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--trait); }
.situation__nord { position: absolute; right: 10px; top: 10px; width: 34px; background: var(--blanc); border: 1px solid var(--trait); padding: 4px; }

/* -- Mentions légales ------------------------------------------------- */

.legal { display: grid; grid-template-columns: 260px 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.legal__sommaire { position: sticky; top: calc(var(--hauteur-entete) + 24px); border: 1px solid var(--trait); background: var(--blanc); }
.legal__sommaire > .note { display: block; padding: 10px 14px; border-bottom: 1px solid var(--trait); text-transform: uppercase; }
.legal__sommaire a { display: grid; grid-template-columns: 62px 1fr; padding: 9px 14px; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--trait); }
.legal__sommaire li:last-child a { border-bottom: 0; }
.legal__sommaire a:hover { color: var(--bleu); background: rgba(25, 55, 134, .05); }
.legal__articles { max-width: 48rem; }
.article-legal { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--trait); scroll-margin-top: calc(var(--hauteur-entete) + 24px); }
.article-legal:last-child { border-bottom: 0; }
.article-legal h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.article-legal h2 .note { color: var(--bleu); }
.article-legal p + p, .article-legal dl + p, .article-legal p + dl { margin-top: 14px; }
.fiche-legale { display: grid; grid-template-columns: 170px 1fr; border-top: 1.5px solid var(--bleu); }
.fiche-legale dt, .fiche-legale dd { padding: 11px 0; border-bottom: 1px solid var(--trait); }
.fiche-legale dt { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--gris); padding-top: 14px; }
.a-completer { color: var(--laterite); font-family: var(--mono); font-size: 14px; }
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; }
  .legal__sommaire { position: static; }
  .fiche-legale { grid-template-columns: 1fr; }
  .fiche-legale dt { border-bottom: 0; padding-bottom: 0; }
}
.formulaire__erreur { margin-top: 16px; color: var(--laterite); font-weight: 500; }
.formulaire__erreur:empty { display: none; }