/* =========================================================
   mav-ex.fr — trois tuiles, trois directions artistiques
   ========================================================= */

/* ---------- Polices (hébergées ici, licences OFL dans /fonts) ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 300; font-display: swap; src: url(/fonts/montserrat-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 300; font-display: swap; src: url(/fonts/montserrat-latin-300-italic.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(/fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/cinzel-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(/fonts/cinzel-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/great-vibes-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito-sans-latin.woff2) format('woff2'); }

/* ---------- Couleurs animables (fondu entre les DA) ---------- */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #c9ad7f; }
@property --texte  { syntax: '<color>'; inherits: true; initial-value: #f3efe8; }
@property --base   { syntax: '<color>'; inherits: true; initial-value: #111214; }

:root {
  --ease: cubic-bezier(.22, .8, .24, 1);
  --fondu: 1.1s;
  --sans: 'Montserrat', system-ui, sans-serif;
}

/* Neutre : MAV Ex, encre et champagne */
body                        { --accent: #c9ad7f; --texte: #f3efe8; --base: #111214; --police: var(--sans); }
/* Résidence de l'Arsenal Royal : pétrole et laiton */
body[data-marque="arsenal"] { --accent: #cdb079; --texte: #f6f8f9; --base: #0e2733; --police: var(--sans); }
/* Petra Gest : bleu et sable */
body[data-marque="gest"]    { --accent: #e6cdb7; --texte: #faf7f3; --base: #00113c; --police: 'Nunito Sans', system-ui, sans-serif; }
/* Petra Immo : vert sapin et pierre */
body[data-marque="immo"]    { --accent: #d9c3a9; --texte: #f6f2ea; --base: #0e1a13; --police: var(--sans); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--base);
  color: var(--texte);
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: --accent var(--fondu) var(--ease), --texte var(--fondu) var(--ease), --base var(--fondu) var(--ease);
}

img { display: block; max-width: 100%; }

/* =========================================================
   Fonds
   ========================================================= */
.fonds { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--base); }

.fond {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--fondu) var(--ease);
}
.fond.is-active { opacity: 1; }

.fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 9s cubic-bezier(.2, .6, .2, 1);
}
.fond.is-active img { transform: scale(1.02); }

/* Voile aux couleurs de chaque marque : lisibilité en haut et en bas */
.fond::after { content: ''; position: absolute; inset: 0; }

.fond--neutre {
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(201, 173, 127, .16), transparent 62%),
    radial-gradient(900px 520px at 85% 115%, rgba(201, 173, 127, .07), transparent 60%),
    radial-gradient(800px 520px at 8% 100%, rgba(255, 255, 255, .04), transparent 60%),
    #111214;
}
/* Fines lignes obliques, clin d'œil au tracé du logo MAV Ex */
.fond--neutre::after {
  background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(201, 173, 127, .045) 140px 141px);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 75%);
}

.fond--arsenal::after {
  background:
    linear-gradient(180deg, rgba(14, 39, 51, .82) 0%, rgba(14, 39, 51, .48) 38%, rgba(14, 39, 51, .62) 70%, rgba(14, 39, 51, .94) 100%),
    radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(8, 24, 32, .55) 100%);
}
.fond--gest::after {
  background:
    linear-gradient(180deg, rgba(0, 17, 60, .84) 0%, rgba(0, 27, 92, .52) 38%, rgba(0, 27, 92, .64) 70%, rgba(0, 17, 60, .95) 100%),
    radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(0, 10, 36, .55) 100%);
}
.fond--immo::after {
  background:
    linear-gradient(180deg, rgba(14, 26, 19, .84) 0%, rgba(21, 37, 27, .5) 38%, rgba(21, 37, 27, .64) 70%, rgba(14, 26, 19, .95) 100%),
    radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(8, 16, 11, .55) 100%);
}

/* Grain très léger, pour la matière */
.grain {
  position: absolute; inset: -50%;
  opacity: .07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   En-tête : logo + accroche qui changent avec la marque
   ========================================================= */
.entete {
  padding: clamp(28px, 5.5vh, 64px) 16px 0;
  text-align: center;
}

.scene { display: grid; justify-items: center; align-items: center; }
.couche {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.couche.is-active { opacity: 1; transform: none; transition-delay: .12s; pointer-events: auto; }

.scene--logo { --h: clamp(80px, 14vh, 140px); height: var(--h); grid-template-rows: var(--h); }
.logo { height: var(--h); width: auto; max-width: min(80vw, 420px); object-fit: contain; }
.logo--arsenal { height: calc(var(--h) * .92); }

.scene--titre { margin-top: clamp(18px, 3.2vh, 34px); }
.titre {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(26px, 3.3vw, 46px);
  line-height: 1.12;
  font-weight: 300;
  letter-spacing: .01em;
  text-wrap: balance;
  color: var(--texte);
}
.titre em { font-style: normal; color: var(--accent); }

.titre--neutre { font-family: var(--sans); max-width: 24ch; }
.titre--neutre em { font-style: italic; }

.titre--arsenal { font-family: var(--sans); font-weight: 300; max-width: 24ch; }
.titre--arsenal em {
  display: block;
  font-family: 'Great Vibes', cursive;
  font-size: 1.45em;
  line-height: 1.05;
  letter-spacing: 0;
  color: #cdb079;
}

.titre--gest { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.titre--gest em { font-style: italic; color: #e6cdb7; }

.titre--immo { font-family: 'Cinzel', Georgia, serif; font-weight: 400; letter-spacing: .03em; font-size: clamp(22px, 2.5vw, 36px); max-width: 30ch; }
.titre--immo em { color: #d9c3a9; }

.lieu {
  display: inline-flex; align-items: center; gap: 14px;
  margin: clamp(14px, 2.4vh, 22px) 0 0;
  font-family: var(--police);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
}
.lieu::before, .lieu::after { content: ''; width: 34px; height: 1px; background: currentColor; opacity: .55; }
.lieu__point { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* =========================================================
   Tuiles
   ========================================================= */
main { display: grid; align-items: center; }

.tuiles {
  --l: min(330px, 27vw, calc((100svh - 490px) * .75));
  display: grid;
  grid-template-columns: repeat(3, max(var(--l), 230px));
  justify-content: center;
  gap: clamp(20px, 2.6vw, 40px);
  padding: clamp(22px, 3.6vh, 40px) 16px;
}

.tuile--arsenal { --t-accent: #cdb079; --t-base: 14, 39, 51; }
.tuile--gest    { --t-accent: #e6cdb7; --t-base: 0, 17, 60; }
.tuile--immo    { --t-accent: #d9c3a9; --t-base: 14, 26, 19; }

.tuile {
  --mx: 50%; --my: 30%;
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  outline: none;
  background: rgb(var(--t-base));
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
  transform: translateZ(0);
  transition:
    transform .65s var(--ease),
    box-shadow .65s var(--ease),
    opacity .55s var(--ease),
    filter .55s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* Le rebord : fin au repos, lumineux et doublé d'un halo sur la tuile active */
.tuile::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 5;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .2);
  pointer-events: none;
  transition: border-color .5s var(--ease), border-width .3s var(--ease), box-shadow .6s var(--ease);
}

.tuile__photo { position: absolute; inset: 0; z-index: -2; }
.tuile__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.4s var(--ease);
}

.tuile__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--t-base), .55) 0%, rgba(var(--t-base), 0) 26%, rgba(var(--t-base), 0) 38%, rgba(var(--t-base), .78) 66%, rgba(var(--t-base), .97) 100%);
  transition: opacity .6s var(--ease);
}

/* Reflet qui suit la souris */
.tuile__lumiere {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .16), transparent 45%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

.tuile__haut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 22px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.tuile__metier { color: var(--t-accent); }

.tuile__corps {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 24px 22px;
}

.tuile__nom { display: block; color: #fff; }
.tuile__desc {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, .82);
  text-wrap: pretty;
}
.tuile__desc sup { font-size: .7em; line-height: 0; }

.tuile__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t-accent);
}
.tuile__trait { width: 22px; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.tuile__fleche { display: inline-block; letter-spacing: 0; font-size: 14px; transition: transform .6s var(--ease); }

.tuile__domaine {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
  max-height: 0; opacity: 0;
  transition: max-height .6s var(--ease), opacity .5s var(--ease);
}

/* --- Typographie propre à chaque marque --- */
.tuile--arsenal .tuile__nom {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(19px, 1.75vw, 24px);
  line-height: 1.15;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tuile--arsenal .tuile__nom small {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .32em;
}
.tuile--arsenal .tuile__metier {
  font-family: 'Great Vibes', cursive;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.tuile--gest .tuile__nom {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 2.3vw, 32px);
  line-height: 1.05;
}
.tuile--gest .tuile__desc { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; }

.tuile--immo .tuile__nom {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(23px, 2.1vw, 29px);
  line-height: 1.05;
  letter-spacing: .06em;
}

/* --- Tuile active (survol, focus clavier, ou au centre de l'écran sur mobile) --- */
.tuile.is-active {
  z-index: 2;
  transform: translateY(-8px) scale(1.06);
  box-shadow:
    0 40px 80px -24px rgba(0, 0, 0, .8),
    0 0 60px -10px color-mix(in srgb, var(--t-accent) 40%, transparent);
}
.tuile.is-active::after {
  border: 2px solid var(--t-accent);
  box-shadow:
    inset 0 0 0 4px rgba(var(--t-base), .35),
    inset 0 0 0 5px color-mix(in srgb, var(--t-accent) 35%, transparent);
}
.tuile.is-active .tuile__photo img { transform: scale(1.12); }
.tuile.is-active .tuile__lumiere { opacity: 1; }
.tuile.is-active .tuile__trait { width: 46px; }
.tuile.is-active .tuile__fleche { transform: translateX(6px); }
.tuile.is-active .tuile__domaine { max-height: 20px; opacity: 1; }

/* Les autres tuiles s'effacent légèrement */
.tuiles.a-une-active .tuile:not(.is-active) {
  opacity: .8;
  filter: saturate(.45) brightness(.62);
  transform: scale(.97);
}

.tuile:focus-visible::after { outline: 2px solid var(--t-accent); outline-offset: 6px; }

/* =========================================================
   Pied de page
   ========================================================= */
.pied {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 0 clamp(16px, 3vw, 40px) clamp(16px, 2.6vh, 26px);
  font-family: var(--police);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--texte) 55%, transparent);
}

/* =========================================================
   Écrans étroits / tactiles : tuiles empilées
   ========================================================= */
@media (max-width: 860px) {
  .tuiles {
    grid-template-columns: min(420px, 100%);
    gap: 26px;
    padding-top: 34px;
    padding-bottom: 40px;
  }
  .tuile { aspect-ratio: 4 / 5; }
  .tuile.is-active { transform: scale(1.025); }
  .tuiles.a-une-active .tuile:not(.is-active) { transform: scale(.98); opacity: .85; }
  .tuile__desc { font-size: 14px; }
  .pied { justify-content: center; text-align: center; }
  .lieu { gap: 10px; letter-spacing: .2em; white-space: nowrap; }
  .lieu::before, .lieu::after { width: 18px; }
}

/* Écrans larges mais peu hauts (portable 1366×768…) */
@media (min-width: 861px) and (max-height: 760px) {
  .scene--logo { --h: 76px; }
  .titre { font-size: clamp(22px, 2.6vw, 34px); }
  .tuiles { --l: max(230px, min(300px, 25vw, calc((100svh - 300px) * .75))); }
}

@media (prefers-reduced-motion: reduce) {
  .fond img, .fond.is-active img { transform: none; transition: none; }
  .tuile, .tuile.is-active, .tuiles.a-une-active .tuile:not(.is-active) { transform: none; }
  .tuile__photo img, .tuile.is-active .tuile__photo img { transform: none; }
  .couche { transform: none; }
}