/* Manrope auto-hébergée (aucune requête vers un tiers). */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-latin-600-normal.woff2') format('woff2')}

/* Layout : une fiche de firme sobre. Bandes pleine largeur, contenu aligné à gauche sur une grille 4/8, une seule bande marine (le nom). */
:root{
  --marine:#0F1E2E; --ardoise:#2E3D4D; --glace:#8DB6C7; --creme:#F5F3EE; --blanc:#FFFFFF;
  --ligne:#D9DDE1; --texte-doux:#4A5866;
  --f:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s-1:.8125rem; --s0:1rem; --s1:1.125rem; --s2:1.5rem; --s3:2.25rem; --s4:clamp(2.25rem,5vw,3.5rem);
  --max:72rem; color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--creme);color:var(--marine);font-family:var(--f);font-size:var(--s0);line-height:1.6;-webkit-font-smoothing:antialiased}
.band{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:var(--max);margin:0 auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--glace);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-weight:500;letter-spacing:-.015em;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0;max-width:62ch}
.label{font-size:var(--s-1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)}

/* En-tête */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--creme)}
header.band{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--creme);border-bottom:1px solid transparent;transition:border-color .2s}
header.scrolled{border-bottom-color:var(--ligne)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem}
.bar .logo{height:34px;width:auto;display:block}
nav{display:flex;align-items:center;gap:1.75rem;font-size:.9375rem}
nav .links{display:flex;gap:1.75rem}
nav a{text-decoration:none;color:var(--ardoise)}
nav a:hover{color:var(--marine)}
.lang{display:flex;border:1px solid var(--ligne);border-radius:999px;padding:2px}
.lang button{font:inherit;font-size:var(--s-1);font-weight:600;letter-spacing:.08em;border:0;background:transparent;color:var(--texte-doux);padding:.25rem .6rem;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--marine);color:var(--creme)}
@media (max-width:760px){nav .links{display:none}}

/* Accueil */
.hero{padding-block:clamp(3rem,9vw,7rem) clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
.hero h1{font-size:var(--s4);margin-top:1.25rem}
.hero .sub{font-size:var(--s1);color:var(--ardoise);margin-top:1.25rem}
.pont{display:block;width:48px;height:2px;background:var(--glace);margin-top:2rem}
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;margin-top:2rem}
.btn{display:inline-block;background:var(--marine);color:var(--creme);text-decoration:none;font-weight:500;padding:.8rem 1.4rem;border-radius:2px}
.btn:hover{background:var(--ardoise)}
.link{text-decoration:none;font-weight:500;border-bottom:1px solid var(--glace);padding-bottom:2px}
.portrait{aspect-ratio:4/5;max-width:100%;background:var(--marine);display:grid;place-items:center;border-radius:2px}
.portrait .sym{width:38%;height:auto}
@media (max-width:760px){.hero-grid{grid-template-columns:1fr}.hero .portrait{display:none}}

/* Sections */
section.band{padding-block:clamp(3.5rem,8vw,6rem)}
.white{background:var(--blanc)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,5vw,4rem)}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.split h2{font-size:var(--s3)}
.prose{display:flex;flex-direction:column;gap:1.1rem;font-size:var(--s1);min-width:0}
.prose p{color:var(--ardoise)}
.prose p.lead{color:var(--marine)}

.domaines{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--ligne)}
.domaines li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.5rem 2rem;padding-block:1.25rem;border-bottom:1px solid var(--ligne)}
.domaines h3{font-size:var(--s1);font-weight:600}
.domaines p{font-size:var(--s0);color:var(--ardoise)}
@media (max-width:560px){.domaines li{grid-template-columns:1fr}}
.note{font-size:var(--s0);font-weight:600;color:var(--marine);margin-top:.5rem}

.founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
.founder .portrait{max-width:20rem}
@media (max-width:760px){.founder{grid-template-columns:1fr}.founder .portrait{max-width:12rem}}
.founder h2{font-size:var(--s3)}
.founder .role{color:var(--texte-doux);margin-top:.35rem}

.socials{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.socials a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;border:1px solid var(--ligne);padding:.45rem .8rem;border-radius:999px;font-size:.9375rem;color:var(--marine);background:var(--blanc)}
.socials a:hover{border-color:var(--marine)}
.socials svg{width:16px;height:16px;fill:var(--marine)}

/* Le nom */
.nom{background:var(--marine);color:var(--creme)}
.nom-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.nom .sym{width:clamp(64px,10vw,104px);height:auto}
.nom p{color:#C9D3DB;font-size:var(--s1)}
.nom .phrase{font-size:var(--s3);font-weight:500;color:var(--creme);letter-spacing:-.015em;line-height:1.2;max-width:none;margin-top:1rem}
.nom .pont{margin-top:1.5rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,5rem)}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
.contact-grid h2{font-size:var(--s3)}
.coord{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.coord .val{font-size:var(--s1);font-weight:500;user-select:all;word-break:break-word}
form{display:grid;gap:1rem;min-width:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:.35rem;font-size:var(--s-1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux)}
input,textarea{font:inherit;font-size:var(--s0);letter-spacing:0;text-transform:none;color:var(--marine);background:var(--blanc);border:1px solid var(--ligne);border-radius:2px;padding:.75rem .85rem;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--marine)}
textarea{min-height:9rem;resize:vertical}
.legal{font-size:var(--s-1);color:var(--texte-doux);max-width:none}
form .btn{border:0;cursor:pointer;justify-self:start;font:inherit;font-weight:500}
.merci{border-left:2px solid var(--glace);padding:.75rem 1rem;background:var(--blanc)}

footer.band{background:var(--marine);color:#C9D3DB;padding-block:2.25rem calc(2.25rem + env(safe-area-inset-bottom,0px))}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--s-1)}
.foot .logo{height:28px;width:auto;display:block}
.foot a{color:#C9D3DB}

/* Ajouts du site : ex-styles en ligne du prototype (CSP sans 'unsafe-inline'), formulaire, politique. */
.mt{margin-top:.75rem}
.nom p.label-glace{color:var(--glace)}
.legal a{color:inherit}
.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
form .btn:disabled{opacity:.6;cursor:default}
.politique h1{font-size:var(--s3);margin-top:.75rem}
.politique .maj{color:var(--texte-doux);margin-top:.75rem}
.politique h2{font-size:var(--s2);margin-top:1.25rem}
.politique ul{margin:0;padding-left:1.25rem;color:var(--ardoise);max-width:62ch;display:flex;flex-direction:column;gap:.5rem}
.politique strong{color:var(--marine);font-weight:600}
.introuvable{min-height:60vh;display:flex;align-items:center}
.introuvable h1{font-size:var(--s4)}