/* ABK Architecture & Ingénierie
   Composants et animations */

/* -- Chargement : ligne d'horizon puis toit du logo (1re visite) ------ */

.chargement {
  position: fixed; inset: 0; z-index: 100; background: var(--nuit);
  display: grid; place-items: center;
  animation: chargement-sortie .8s var(--courbe) 1.9s forwards;
}
/* Le logo s'élève depuis la ligne d'horizon */
.chargement__dessin { width: min(380px, 70vw); }
.chargement__dessin img { width: 100%; clip-path: inset(100% 0 0 0); animation: elevation 1s var(--courbe) .7s forwards; }
.chargement__horizon { display: block; height: 1.5px; margin-top: 10px; background: var(--blanc); transform: scaleX(0); animation: horizon .7s var(--courbe) .1s forwards; }
@keyframes horizon { to { transform: scaleX(1); } }
@keyframes elevation { to { clip-path: inset(0 0 0 0); } }
@keyframes chargement-sortie { to { transform: translateY(-100%); visibility: hidden; } }

/* -- Volets entre les pages : fermeture vers la ligne d'horizon ------ */

.volets { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.volets span { position: absolute; left: 0; right: 0; height: 50%; background: var(--nuit); transform: scaleY(0); transition: transform .5s var(--courbe); }
.volets span:first-child { top: 0; transform-origin: top; }
.volets span:last-child { bottom: 0; transform-origin: bottom; }
.volets i { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--blanc); transform: scaleX(0); transition: transform .4s var(--courbe); }
.volets.ferme span { transform: scaleY(1); }
.volets.ferme i { transform: scaleX(1); transition-delay: .2s; }
.volets.instant span, .volets.instant i { transition: none; }

/* -- Réticule de dessin (souris uniquement) --------------------------- */

.reticule { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0; transition: opacity .3s; }
.reticule.actif { opacity: 1; }
.reticule__h, .reticule__v { position: absolute; background: rgba(25, 55, 134, .16); }
.reticule__h { left: 0; right: 0; top: 0; height: 1px; }
.reticule__v { top: 0; bottom: 0; left: 0; width: 1px; }
.reticule__boite { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border: 1px solid var(--bleu); transition: background-color .2s, transform .2s; }
.reticule.survol .reticule__boite { background: var(--laterite); border-color: var(--laterite); transform: rotate(45deg); }
.reticule.sur-bleu .reticule__h, .reticule.sur-bleu .reticule__v { background: rgba(255, 255, 255, .16); }
.reticule.sur-bleu .reticule__boite { border-color: var(--blanc); }

/* -- Apparitions ------------------------------------------------------ */

/* Titres tracés : le texte se dessine de gauche à droite sur sa ligne de construction */
.trace { position: relative; clip-path: inset(-10% 100% -10% 0); transition: clip-path 1.1s var(--courbe); }
.trace::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 1px; background: currentColor; opacity: .5; transition: opacity .6s 1.1s; }
.trace.vu { clip-path: inset(-10% 0 -10% 0); }
.trace.vu::after { opacity: 0; }
.apparait { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s var(--courbe); }
.apparait.vu { opacity: 1; transform: none; }

/* -- Ouverture (accueil) ---------------------------------------------- */

.ouverture { padding: clamp(40px, 6vw, 80px) var(--marge) clamp(56px, 7vw, 96px); }
.ouverture__titre { position: relative; padding-top: .55em; max-width: 15em; }
.ouverture__toit { position: absolute; left: -1%; top: 0; width: 88%; height: .7em; overflow: visible; }
.ouverture__toit path { fill: none; stroke: var(--blanc); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--courbe) .3s; }
.ouverture.vu .ouverture__toit path { stroke-dashoffset: 0; }
.ouverture__horizon { display: block; height: 3px; margin-top: 28px; width: min(560px, 60%); background: linear-gradient(90deg, transparent, var(--blanc)); clip-path: polygon(0 50%, 100% 0, 100% 100%); transform-origin: right; transform: scaleX(0); transition: transform 1.2s var(--courbe) .8s; }
.ouverture.vu .ouverture__horizon { transform: scaleX(1); }
.ouverture__chapeau { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-top: clamp(28px, 3vw, 44px); }
.ouverture__chapeau p { max-width: 34rem; color: rgba(255,255,255,.78); }

.vue { position: relative; margin-top: clamp(40px, 5vw, 72px); }
.vue__cote { display: flex; align-items: center; gap: 12px; height: 16px; margin-bottom: 14px; border-inline: 1px solid rgba(255,255,255,.5); font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.7); }
.vue__cote::before, .vue__cote::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.5); }
.vue__cote span { position: relative; }
.vue__cadre { position: relative; aspect-ratio: 21 / 8; overflow: hidden; border: 1px solid var(--trait-clair); }
.vue__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.vue__cadre img.courante { opacity: 1; }
.vue__cartouche {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; background: var(--blanc); color: var(--encre);
  display: grid; grid-template-columns: auto auto; font-size: 13px; min-width: 300px;
}
.vue__cartouche > * { padding: 7px 12px; border-bottom: 1px solid var(--trait); }
.vue__cartouche > :nth-child(odd) { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); border-right: 1px solid var(--trait); }
.vue__cartouche > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 700px) {
  .ouverture__chapeau { grid-template-columns: 1fr; }
  .vue__cadre { aspect-ratio: 4 / 3; }
  .vue__cartouche { left: 12px; right: 12px; bottom: 12px; min-width: 0; }
}

/* -- Nomenclature (chiffres de l'agence) ----------------------------- */

.nomenclature 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; border-bottom: 1.5px solid var(--bleu); }
.nomenclature td { padding: 16px 12px; border-bottom: 1px solid var(--trait); vertical-align: baseline; }
.nomenclature td:first-child { font-family: var(--mono); color: var(--bleu); width: 3em; }
.nomenclature td:last-child { text-align: right; font-size: clamp(26px, 2.6vw, 38px); font-stretch: 112%; font-weight: 350; white-space: nowrap; color: var(--bleu); }
.nomenclature th:last-child { text-align: right; }
.nomenclature small { font-size: 15px; color: var(--gris); margin-left: 4px; }

.agence-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--marge); align-items: start; }
@media (max-width: 860px) { .agence-intro { grid-template-columns: 1fr; } }

/* -- Carte des références -------------------------------------------- */

.carte { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.carte__plan { position: relative; border: 1px solid var(--trait-clair); }
.carte__plan svg { display: block; width: 100%; height: auto; }
.carte__graticule line { stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 3 5; }
.carte__graticule text, .carte__region { font-family: var(--mono); font-size: 10px; fill: rgba(255,255,255,.45); letter-spacing: .05em; }
.carte__region { font-size: 11px; fill: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .14em; }
.ville { cursor: pointer; outline: none; }
.ville circle { fill: transparent; stroke: var(--blanc); stroke-width: 1.5; transition: fill .25s, stroke .25s; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.carte.vu .ville circle { transform: scale(1); transition: fill .25s, stroke .25s, transform .6s var(--courbe) calc(var(--ordre) * 70ms); }
.ville text { font-family: var(--mono); font-size: 11px; fill: var(--blanc); opacity: 0; transition: opacity .4s calc(var(--ordre) * 70ms + .3s); }
.carte.vu .ville text { opacity: .85; }
.ville:hover circle, .ville:focus-visible circle { fill: rgba(255,255,255,.25); }
.ville.choisie circle { fill: var(--laterite); stroke: var(--laterite); }
.ville.choisie text { opacity: 1; font-weight: 500; }
.carte__plan .carte__boussole { position: absolute; right: 14px; top: 14px; width: 34px; }
.carte__echelle { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.55); }
.carte__echelle i { display: block; width: 63px; height: 6px; border: 1px solid rgba(255,255,255,.55); border-top: 0; margin-bottom: 4px; }

.carte__fiche { border: 1px solid var(--trait-clair); }
.carte__fiche header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--trait-clair); }
.carte__fiche ul { max-height: 430px; overflow-y: auto; padding: 6px 18px 12px; }
.carte__fiche li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 15px; display: flex; justify-content: space-between; gap: 16px; }
.carte__fiche li a { white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.carte__villes { display: none; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.carte__villes button { font-family: var(--mono); font-size: 12px; padding: 6px 10px; border: 1px solid var(--trait-clair); }
.carte__villes button[aria-pressed="true"] { background: var(--laterite); border-color: var(--laterite); }
@media (max-width: 960px) {
  .carte { grid-template-columns: 1fr; }
  .carte__villes { display: flex; }
  .ville text { font-size: 15px; }
}

/* -- Domaines d'expertise --------------------------------------------- */

.expertises { border-top: 1.5px solid var(--bleu); }
.expertises > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px clamp(24px, 5vw, 80px); padding-block: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--trait); }
.expertises dt { font-size: clamp(22px, 2.6vw, 38px); font-stretch: 108%; font-weight: 350; line-height: 1.15; transition: color .3s; }
.expertises > div:hover dt { color: var(--bleu); }
.expertises dd { color: var(--gris); padding-top: 6px; max-width: 34rem; }
@media (max-width: 760px) { .expertises > div { grid-template-columns: 1fr; } }

/* -- Partenaires ------------------------------------------------------ */

.partenaires { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--trait); border-left: 1px solid var(--trait); }
.partenaires li { display: grid; place-items: center; height: clamp(120px, 12vw, 170px); padding: 20px clamp(16px, 2.4vw, 40px); background: var(--blanc); border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.partenaires img { max-width: 100%; max-height: 90px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 640px) { .partenaires { grid-template-columns: 1fr 1fr; } .partenaires img { max-height: 60px; } }

/* -- Fiches projet ---------------------------------------------------- */

/* Deux colonnes décalées, grandes images, informations en légende */
.fiches { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(56px, 7vw, 110px) clamp(24px, 4vw, 72px); }
.fiches > .fiche:nth-of-type(even):not([hidden]) { transform: translateY(clamp(0px, 9vw, 160px)); }
.fiches { padding-bottom: clamp(0px, 9vw, 160px); }
@media (max-width: 760px) {
  .fiches { grid-template-columns: 1fr; padding-bottom: 0; }
  .fiches > .fiche:nth-of-type(even):not([hidden]) { transform: none; }
}
.fiche { display: block; text-decoration: none; }
.fiche[hidden] { display: none; }
.fiche__image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #dde2ea; }
.fiche__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.fiche:hover .fiche__image img { transform: scale(1.045); }
.fiche__infos { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding-top: 20px; margin-top: 16px; border-top: 1px solid var(--trait); transition: border-color .4s; }
.fiche:hover .fiche__infos { border-top-color: var(--bleu); }
.fiche__infos h3 { font-size: clamp(22px, 2.2vw, 32px); font-stretch: 108%; font-weight: 400; line-height: 1.15; }
.fiche__annee { font-family: var(--mono); font-size: 13px; color: var(--gris); padding-top: 8px; }
.fiche__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-size: 15px; color: var(--gris); }
.fiche__meta .statut { color: var(--encre); font-size: 14px; }
.fiche__lire { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--bleu); display: inline-flex; align-items: center; gap: 10px; }
.fiche__lire svg { width: 22px; transition: transform .4s; }
.fiche:hover .fiche__lire svg { transform: translateX(6px); }

/* -- Méthode : quatre principes sur une trame d'axes ----------------- */

.trame { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--trait-clair); border-left: 1px solid var(--trait-clair); }
.trame article { position: relative; padding: clamp(28px, 3.4vw, 52px); border-right: 1px solid var(--trait-clair); border-bottom: 1px solid var(--trait-clair); }
.trame h3 { margin-bottom: 12px; }
.trame p { color: rgba(255,255,255,.72); max-width: 30rem; }
.axe { position: absolute; top: -13px; left: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: var(--nuit); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; }
@media (max-width: 700px) { .trame { grid-template-columns: 1fr; } }

/* -- Persienne : l'image s'ouvre comme un brise-soleil ---------------- */

.persienne { position: relative; overflow: hidden; display: flex; background: var(--nuit); }
.persienne span {
  flex: 1; height: 100%;
  background-image: var(--image); background-size: calc(var(--lames) * 100%) 100%; background-position: calc(var(--i) / (var(--lames) - 1) * 100%) center;
  transform: scaleX(clamp(0, calc(var(--p, 1) * 1.7 - var(--i) * .07), 1));
}
.persienne--citation { height: clamp(420px, 70vh, 720px); }
.persienne--citation::after { content: ""; position: absolute; inset: 0; background: rgba(13, 29, 74, .55); }
.persienne__texte { position: absolute; inset: 0; z-index: 2; display: grid; align-content: end; padding: var(--marge); color: var(--blanc); }
.persienne__texte blockquote { margin: 0; font-size: clamp(26px, 3.6vw, 52px); font-stretch: 112%; font-weight: 350; line-height: 1.15; max-width: 24em; }
.persienne__texte figcaption { margin-top: 18px; color: rgba(255,255,255,.7); }

/* -- Bordereau (références, distinctions) ----------------------------- */

.bordereaux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--marge); }
@media (max-width: 860px) { .bordereaux { grid-template-columns: 1fr; } }
.bordereau caption { text-align: left; padding-bottom: 12px; }
.bordereau th, .bordereau td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.bordereau thead th { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); border-bottom: 1.5px solid var(--bleu); }
.bordereau td + td { color: var(--gris); font-size: 15px; padding-left: 16px; }

@media (prefers-reduced-motion: reduce) {
  .chargement { display: none; }
  .trace, .apparait, .ville circle, .ville text { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .ouverture__toit path { stroke-dashoffset: 0; transition: none; }
  .ouverture__horizon { transform: none; transition: none; }
  .persienne span { transform: none; }
  .vue__cadre img { transition: none; }
  .volets { display: none; }
}