/* ============================================================
   L'AUTRE MONTÉNÉGRO — Feuille de style commune
   Une seule source de vérité pour tout le site.
   Palette Adriatique : encre marine / écume / laiton
   Titres : Marcellus · Texte : Karla
   ============================================================ */

:root{
  color-scheme:light only;
  --abysse:#0D2836;
  --mer:#164459;
  --brume:#3E6B80;
  --ecume:#F7F5EF;
  --sel:#EDE9DD;
  --laiton:#C29A45;
  --laiton-clair:#D3AB55;
  --encre:#17272F;
  --gris-mer:#5E6E76;
  --clair-sur-fonce:#C7D3D8;
  --display:'Marcellus',Georgia,serif;
  --body:'Karla',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--abysse)}
body{
  background:var(--ecume);color:var(--encre);font-family:var(--body);
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;color:var(--abysse)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:1060px;margin:0 auto;padding:0 26px}
section{padding:96px 0}

.eyebrow{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--laiton);font-weight:700;display:block;margin-bottom:16px;
}
.head{max-width:52ch;margin:0 auto 60px;text-align:center}
.head h2{font-size:clamp(30px,4.2vw,42px)}
.head p{color:var(--gris-mer);font-size:18px;margin-top:14px}

/* ---------- Filet de houle : séparateur signature ---------- */
.houle{display:block;width:100%;height:26px;color:var(--laiton)}
.houle path{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.85}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;padding:17px 30px;border-radius:2px;
  transition:transform .18s ease,box-shadow .18s ease,background .2s ease;
}
.btn-laiton{background:var(--laiton);color:#20180A;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.btn-laiton:hover{transform:translateY(-2px);background:var(--laiton-clair)}
.btn-ligne{border:1px solid rgba(247,245,239,.4);color:var(--ecume);font-weight:500;letter-spacing:.14em;font-size:13px}
.btn-ligne:hover{border-color:var(--ecume)}
.btn:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}
.cta-row{display:flex;flex-direction:column;gap:12px;margin-top:32px;max-width:360px}

/* ---------- Bandeau haut (pages intérieures) ---------- */
.bandeau{background:var(--abysse);padding:18px 0}
.bandeau .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bandeau a.marque{
  font-family:var(--display);font-size:13px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--laiton);
}
.bandeau nav{display:flex;gap:22px;flex-wrap:wrap}
.bandeau nav a{font-size:14px;color:var(--clair-sur-fonce)}
.bandeau nav a:hover{color:var(--ecume)}

/* ---------- Pages de texte (légales) ---------- */
.doc{max-width:760px;margin:0 auto;padding:64px 26px 90px}
.doc h1{font-size:clamp(30px,4.4vw,40px);margin-bottom:6px}
.doc .maj{color:var(--laiton);font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:44px}
.doc h2{
  font-size:20px;color:var(--mer);margin:40px 0 10px;
  border-bottom:2px solid var(--laiton);display:inline-block;padding-bottom:3px;
}
.doc p,.doc li{margin:10px 0;font-size:17px}
.doc ul{padding-left:22px}
.doc a{color:var(--mer);text-decoration:underline;text-decoration-color:rgba(194,154,69,.6);text-underline-offset:3px}
.doc a:hover{color:var(--laiton)}
.ph{background:#FBEFD2;padding:1px 6px;border-radius:3px;font-style:italic}

/* ---------- Page de remerciement ---------- */
.merci{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;
  background:linear-gradient(180deg,#0B2330 0%,var(--abysse) 60%,#0F2F40 100%);
}
.merci-carte{
  max-width:560px;width:100%;background:var(--ecume);
  border-radius:4px;padding:52px 34px 44px;position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.merci-sceau{
  width:56px;height:56px;margin:0 auto 22px;border-radius:50%;
  border:1px solid var(--laiton);display:flex;align-items:center;justify-content:center;
}
.merci-sceau svg{width:30px;height:30px;color:var(--laiton)}
.merci-carte h1{font-size:clamp(26px,4.4vw,33px);margin-bottom:12px}
.merci-carte h1 span{display:block;font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  font-family:var(--body);font-weight:700;color:var(--laiton);margin-bottom:12px}
.merci-carte .intro{color:var(--gris-mer);font-size:17px;margin-bottom:32px}
.dl{display:flex;flex-direction:column;gap:12px;margin:0 auto;max-width:400px}
.dl a{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:16px 20px;border-radius:2px;font-size:15px;font-weight:700;
  transition:transform .15s ease,background .2s ease;
}
.dl a:hover{transform:translateY(-2px)}
.dl .primaire{background:var(--laiton);color:#20180A}
.dl .primaire:hover{background:var(--laiton-clair)}
.dl .secondaire{border:1px solid rgba(22,68,89,.35);color:var(--mer)}
.dl .secondaire:hover{background:var(--mer);color:var(--ecume)}
.dl svg{width:20px;height:20px;flex:none}
.dl small{display:block;font-weight:400;font-size:13px;opacity:.75;letter-spacing:0;text-transform:none}
.merci-note{margin-top:28px;font-size:14px;color:var(--gris-mer);line-height:1.6}
.merci-pied{margin-top:34px;font-family:var(--display);font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--laiton)}

/* ---------- Pied de page commun ---------- */
.pied{background:#0A1F2A;padding:44px 26px 40px}
.pied-inner{max-width:1060px;margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:22px;align-items:center}
.pied .marque{font-family:var(--display);letter-spacing:.34em;text-transform:uppercase;
  color:var(--laiton);font-size:12px}
.pied .baseline{color:#7B909A;font-size:14px;margin-top:8px}
.pied ul{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none}
.pied ul a{color:rgba(247,245,239,.7);font-size:14px}
.pied ul a:hover{color:var(--laiton)}

@media(max-width:860px){
  section{padding:68px 0}
  .pied-inner{flex-direction:column;text-align:center}
  .bandeau .wrap{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}