/* ============================================================
   FORMATU — main.css · v2.1 · 2026/07/26
   Identité : Marine #2D435E · système à angles vifs · Montserrat
   ============================================================ */

/* ---------- polices locales (aucune requête tierce) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/montserrat-latin-300-normal.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:italic;font-weight:400;font-display:swap;
  src:url("../fonts/montserrat-latin-400-italic.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;font-display:swap;
  src:url("../fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/montserrat-latin-700-normal.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  --marine:#2D435E; --marine-deep:#1B2A3C; --ardoise:#5C6B7E;
  --papier:#F5F4F1; --blanc:#fff; --ligne:#E3E2DE;
  --display:"Montserrat",system-ui,sans-serif;
  --body:"Montserrat",system-ui,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--marine-deep);font-family:var(--body);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:var(--marine)}
h1,h2,h3,.ui,nav,button{font-family:var(--display)}
h2{font-size:clamp(1.7rem,3.2vw,2.1rem);font-weight:600;letter-spacing:-.01em;margin:0 0 20px;color:var(--marine)}
h3{font-size:1.15rem;font-weight:600;margin:0 0 6px}
p{margin:0 0 18px}
img{max-width:100%}
.eyebrow{font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ardoise);margin:0 0 14px}

/* ---------- élément signature : la règle et son point carré ---------- */
.rule{position:relative;height:3px;background:var(--marine);border:0;margin:0 0 28px}
.rule::after{content:"";position:absolute;right:0;top:9px;width:8px;height:8px;background:var(--marine)}
.rule.open::after{background:transparent;border:2px solid var(--marine);width:5px;height:5px}
.rule.light{background:#fff}
.rule.light::after{background:#fff}

/* ---------- en-tête ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--ligne)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.bar svg{width:132px;height:auto;display:block}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
nav a{font-size:.85rem;font-weight:500;text-decoration:none;color:var(--marine-deep);padding:4px 0;
  border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{border-bottom-color:var(--marine)}
.burger{display:none;background:none;border:1px solid var(--ligne);padding:8px 12px;font-size:.8rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{padding:120px 0 96px;border-bottom:1px solid var(--ligne)}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:1.08;letter-spacing:-.02em;margin:0 0 28px;max-width:16ch;color:var(--marine)}
.hero .lead{font-size:clamp(1.05rem,1.9vw,1.3rem);max-width:58ch;color:var(--marine-deep)}
.hero .rule{max-width:520px;margin-bottom:36px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:44px;
  font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ardoise)}

/* ---------- sections ---------- */
section{padding:88px 0}
.split{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pillar h3{color:var(--marine)}
.pillar p{font-size:.95rem;margin:0}
.pillar .rule{max-width:120px;margin-bottom:18px}

/* ---------- portefeuille ---------- */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{border:1px solid var(--ligne);border-radius:4px;background:var(--blanc);padding:28px;
  display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--marine);transform:translateY(-2px)}
.card .mark{height:64px;display:flex;align-items:center;margin-bottom:22px}
.card .mark img{max-height:60px;max-width:150px;object-fit:contain}
.card .fallback{font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--marine);letter-spacing:.02em}
.card .place{font-family:var(--display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ardoise);margin:0 0 12px}
.card p{font-size:.93rem;color:var(--marine-deep)}
.card .rule{margin:auto 0 14px}
.status{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ardoise)}

/* ---------- photos de ville, format réduit ---------- */
.cities{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
.cities figure{margin:0}
.cities img{width:100%;height:220px;object-fit:cover;border-radius:4px;display:block;
  filter:grayscale(.35) contrast(1.02)}
.cities figcaption{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ardoise);margin-top:10px}

/* ---------- président ---------- */
.pres{background:var(--papier);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.pres .split{grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:start}
.pres img{width:100%;max-width:260px;border-radius:4px;display:block;filter:grayscale(1);background:#ddd}

/* ---------- approche ---------- */
.dark{background:var(--marine-deep);color:#fff}
.dark h2{color:#fff}
.dark .eyebrow{color:rgba(255,255,255,.55)}
.dark p{color:rgba(255,255,255,.86)}

/* ---------- contact ---------- */
.contact a.mail{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3.6vw,2.1rem);
  color:var(--marine);text-decoration:none;border-bottom:3px solid var(--marine)}

/* ---------- pied de page ---------- */
footer{border-top:1px solid var(--ligne);padding:48px 0 60px;font-family:var(--display);font-size:.8rem;color:var(--ardoise)}
footer svg{width:118px;height:auto;margin-bottom:24px}
.foot-row{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:flex-start}
footer a{color:var(--ardoise);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{border-bottom-color:var(--ardoise)}
.legal{max-width:62ch;line-height:1.7}

:focus-visible{outline:2px solid var(--marine);outline-offset:3px}

/* ---------- animation d'entrée, sobre ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.js .hero .rule::after{transform:translateX(-14px);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1) .35s,opacity .5s .35s}
.js .hero.in .rule::after{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .hero .rule::after{transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media(max-width:900px){
  .split,.pres .split{grid-template-columns:1fr;gap:32px}
  .cols3,.parts,.cities{grid-template-columns:1fr;gap:32px}
  nav{display:none} .burger{display:block}
  nav.open{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--ligne);padding:16px 24px}
  nav.open ul{flex-direction:column;gap:14px}
  .hero{padding:72px 0 64px} section{padding:64px 0}
  .cities img{height:180px}
}