@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --cream:#f5f0e6;
  --paper:#fbf9f4;
  --ink:#28352e;
  --green:#3f604d;
  --green-dark:#294434;
  --orange:#c96f3d;
  --line:#ddd5c6;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.7}
main{flex:1;width:100%}
a{color:inherit}

.site-header{
  min-height:92px;
  padding:18px 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
}

.brand{text-decoration:none;line-height:1.05}
.brand-title{display:block;font-family:"Playfair Display",serif;font-size:1.55rem;font-weight:700}
.brand-subtitle{display:block;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:var(--green)}
nav{display:flex;gap:28px;align-items:center}
nav a{text-decoration:none;font-weight:500;font-size:.95rem;position:relative;padding:8px 0}
nav a:hover{color:var(--orange)}
nav > a.donate-link{background:var(--green);color:white;padding:10px 16px;border-radius:999px}
.menu{display:none;border:0;background:none;font-size:1.6rem}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  line-height: 1.05;
}

.brand-logo {
  width: 65px;
  height: 65px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-logo {
  background: transparent;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.55rem;
  font-weight: 700;
}

.brand-subtitle {
  display: block;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 6px;
  color: var(--green);
}

@media (max-width: 700px) {
  .brand-logo {
    width: 48px;
    height: 48px;
  }

  .brand-title {
    font-size: 1.25rem;
  }

  .brand-subtitle {
    font-size: .68rem;
  }
  
}
/* Image d'accueil */
.hero{
  position:relative;
  width:100%;
  overflow:hidden;
  background:transparent;
}

.hero-image{
  width:100%;
  height:min(72vh,760px);
  object-fit:cover;
  object-position:center 35%;
  display:block;
}

/* Introduction */
.intro{
  max-width:900px;
  margin:0 auto;
  padding:72px 24px 90px;
  text-align:center;
}

.kicker{
  margin:0 0 12px;
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.78rem;
  line-height:1.4;
  font-weight:700;
  text-align:center;
}

h1,h2,h3{font-family:"Playfair Display",serif;line-height:1.15}
h1{font-size:clamp(2.5rem,6vw,5rem);margin:12px 0 28px}
h2{font-size:clamp(2rem,4vw,3.2rem);margin:10px 0 22px}
.intro p:not(.kicker){font-size:1.14rem;max-width:820px;margin:0 auto 18px}
.quote{margin-top:42px;font-family:"Playfair Display",serif;font-size:1.5rem;color:var(--green)}

.page-hero{background:var(--green-dark);color:white;padding:80px 5vw}
.page-hero .wrap{max-width:1100px;margin:auto}
.page-content{max-width:1000px;margin:auto;padding:70px 24px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--cream);padding:28px;border:1px solid var(--line);border-radius:18px}
.card h3{font-size:1.7rem;margin-bottom:10px}
.contact{text-align:center;background:var(--cream);padding:75px 24px}
.btn{display:inline-block;text-decoration:none;background:var(--orange);color:white;padding:12px 20px;border-radius:999px;font-weight:700;margin-top:12px}

/* Aventure / Polarsteps */
.live-adventure{
  text-align:center;
}

.polarsteps-section{
  padding:80px 5vw;
  background:var(--cream);
}

.polarsteps-intro{
  max-width:850px;
  margin:0 auto 35px;
  text-align:center;
}

.polarsteps-intro h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(2.2rem,5vw,3.8rem);
  margin:10px 0 20px;
}

.polarsteps-intro p:not(.kicker){
  font-size:1.1rem;
  margin:0 auto;
}

.polarsteps-map{
  width:100%;
  max-width:1200px;
  height:650px;
  margin:0 auto;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}

.polarsteps-map iframe{
  width:100%;
  height:100%;
  border:0;
}

.follow-us{
  padding:55px 24px 75px;
  text-align:center;
}

.follow-us > p{
  margin:0 0 20px;
  font-size:1.1rem;
  font-weight:500;
}

.social-buttons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

.social-button{
  display:inline-block;
  padding:13px 28px;
  border-radius:999px;
  color:white;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.05em;
  transition:transform .2s ease,opacity .2s ease;
}

.social-button:hover{
  transform:translateY(-3px);
  opacity:.9;
}

.youtube{background:var(--green)}
.polarsteps-button{background:var(--green)}

footer{background:var(--green-dark);color:white;padding:34px 5vw;margin-top:auto}
.footer-inner{max-width:1100px;margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.9rem;opacity:.9}

@media(max-width:800px){
  .site-header{min-height:74px}
  .menu{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:74px;background:var(--cream);padding:20px 5vw;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  nav.open{display:flex}
  nav > a.donate-link{padding:9px 15px}

  .hero-image{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }

  .intro{padding:55px 22px 65px}
  .cards{grid-template-columns:1fr}
}

@media(max-width:700px){
  .polarsteps-section{padding:55px 20px}
  .polarsteps-map{height:500px;border-radius:12px}
  .follow-us{padding:45px 20px 60px}
}

/* =========================================
   PAGE PRÉPARATION / CONSTRUCTION
========================================= */
.page-hero .wrap {
  text-align: center;
}

.construction-story {
  text-align: center;
}

.story-intro {
  text-align: center;
}

.build-step {
  text-align: center;
}

.build-step h2,
.build-step p,
.build-step .kicker {
  text-align: center;
}

.featured-photo {
  text-align: center;
}

.featured-photo figcaption {
  text-align: center;
}

.test-section {
  text-align: center;
}
.construction-story {
  max-width: 1150px;
  margin: 0 auto;
  padding: 70px 24px 100px;
}

.story-intro {
  max-width: 850px;
  margin: 0 auto 90px;
  text-align: center;
  font-size: 1.18rem;
}

.story-intro p {
  margin-bottom: 18px;
}


/* ÉTAPES */

.build-step {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 110px;
  text-align: center;
}

.build-step h2 {
  max-width: 850px;
  margin: 12px auto 28px;
}

.build-step > p {
  max-width: 820px;
  margin: 0 auto 18px;
  font-size: 1.08rem;
}


/* NUMÉRO D'ÉTAPE */

.step-number {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  opacity: .12;
  margin-bottom: -10px;
}


/* LIENS PARTENAIRES */

.story-link {
  color: var(--green);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.story-link:hover {
  color: var(--orange);
}


/* TEXTE MIS EN AVANT */

.story-highlight {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem !important;
  color: var(--green);
  margin-top: 30px !important;
}


/* PHOTO PRINCIPALE CARLA CARGO */

.featured-photo {
  max-width: 900px;
  margin: 45px auto 0;
}

.featured-photo img {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
}

.featured-photo figcaption {
  margin-top: 12px;
  font-size: .9rem;
  opacity: .7;
}


/* GALERIES PHOTO */

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 45px;
}

.photo-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.photo-gallery img:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .15);
}


/* SECTION TEST */

.test-section {
  background: var(--cream);
  padding: 55px 30px;
  border-radius: 24px;
  margin-bottom: 0;
}

.video-button {
  margin-top: 20px;
}


/* TABLETTE */

@media (max-width: 900px) {

  .photo-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .construction-story {
    padding: 55px 18px 75px;
  }

  .story-intro {
    margin-bottom: 70px;
    font-size: 1.05rem;
  }

  .build-step {
    margin-bottom: 80px;
  }

  .step-number {
    font-size: 3rem;
  }

  .build-step > p {
    font-size: 1rem;
  }

  .story-highlight {
    font-size: 1.2rem !important;
  }

  .photo-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .photo-gallery img {
    border-radius: 8px;
  }

  .featured-photo img {
    border-radius: 12px;
  }

  .test-section {
    padding: 40px 20px;
    border-radius: 18px;
  }

}

/* =========================================
   PAGE CONTACT
========================================= */


/* BANDEAU DU HAUT */

.page-hero .wrap {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.page-hero .wrap h1,
.page-hero .wrap .kicker {
  text-align: center;
}


/* =========================================
   CONTENEUR PRINCIPAL
========================================= */

.contact-page {
  width: 100%;
  max-width: 900px;

  margin: 0 auto;

  padding: 70px 24px 100px;

  text-align: center;
}


/* FORCE LE CENTRAGE DE TOUS LES TEXTES */

.contact-page h2,
.contact-page p,
.contact-page .kicker,
.contact-page address {
  text-align: center;
}


/* =========================================
   INTRODUCTION
========================================= */

.contact-intro {
  width: 100%;
  max-width: 720px;

  margin: 0 auto 55px;

  text-align: center;
}

.contact-intro h2 {
  margin: 10px 0 20px;
}

.contact-intro p {
  max-width: 680px;

  margin: 0 auto 12px;

  font-size: 1.08rem;
  line-height: 1.8;

  text-align: center;
}


/* =========================================
   BLOCS E-MAIL ET TÉLÉPHONE
========================================= */

.contact-card {
  width: 100%;
  max-width: 720px;

  margin: 0 auto 30px;

  padding: 45px 35px;

  background: var(--cream);

  border: 1px solid var(--line);
  border-radius: 22px;

  text-align: center;
}

.contact-card h2 {
  margin: 0 0 18px;

  text-align: center;
}

.contact-card p {
  max-width: 600px;

  margin: 0 auto 18px;

  font-size: 1.05rem;
  line-height: 1.7;

  text-align: center;
}


/* E-MAIL ET NUMÉRO */

.contact-info {
  margin-top: 20px !important;

  font-family: "Playfair Display", serif;

  font-size: 1.35rem !important;
  font-weight: 700;

  color: var(--green);

  text-align: center;
}


/* =========================================
   ADRESSE POSTALE
========================================= */

.postal-address {
  width: 100%;
  max-width: 650px;

  margin: 70px auto 0;

  padding-top: 55px;

  border-top: 1px solid var(--line);

  text-align: center;
}

.postal-address .kicker {
  text-align: center;
}

.postal-address h2 {
  margin: 10px 0 20px;

  text-align: center;
}

.postal-address address {
  margin: 0 auto;

  font-family: "DM Sans", sans-serif;

  font-size: 1.08rem;
  font-style: normal;

  line-height: 1.9;

  color: var(--ink);

  text-align: center;
}

.postal-address strong {
  font-family: "Playfair Display", serif;

  font-size: 1.25rem;

  color: var(--green);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

  .contact-page {
    padding: 55px 18px 75px;
  }

  .contact-intro {
    margin-bottom: 40px;
  }

  .contact-intro p {
    font-size: 1rem;
  }

  .contact-card {
    padding: 35px 20px;

    border-radius: 18px;
  }

  .contact-card p {
    font-size: 1rem;
  }

  .contact-info {
    font-size: 1.2rem !important;
  }

}

/* PAGE VOYAGE */

.page-hero .wrap {
  text-align: center;
}


.voyage-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 24px 100px;
  text-align: center;
}


.voyage-intro {
  max-width: 850px;
  margin: 0 auto 60px;
  text-align: center;
}


.voyage-intro p {
  max-width: 820px;
  margin: 0 auto 15px;
  font-size: 1.1rem;
  line-height: 1.8;
  text-align: center;
}


/* CARTES */

.voyage-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}


.voyage-card {
  display: flex;
  flex-direction: column;
  height: 100%;

  padding: 30px;

  background: var(--cream);

  border: 1px solid var(--line);
  border-radius: 20px;

  text-align: center;
}


.voyage-card h2 {
  margin: 15px 0 20px;
  text-align: center;
}


.voyage-card p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.75;
  text-align: center;
}


.voyage-card a {
  color: var(--green);
  font-weight: 700;

  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


.voyage-card a:hover {
  color: var(--orange);
}


/* IMAGES */

.voyage-image {
  width: 100%;
  height: 230px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 10px;

  background: transparent;
}


.voyage-image img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 280px;

  object-fit: contain;

  background: transparent;
}


/* BAS DE PAGE */

.voyage-future {
  max-width: 850px;

  margin: 90px auto 0;
  padding: 55px 40px;

  background: var(--cream);

  border-radius: 22px;

  text-align: center;
}


.voyage-future h2 {
  margin: 10px 0 25px;
  text-align: center;
}


.voyage-future p {
  max-width: 760px;

  margin: 0 auto 18px;

  font-size: 1.07rem;
  line-height: 1.8;

  text-align: center;
}


/* LIEN CONTACT */

.voyage-contact-link {
  display: inline-block;

  margin-top: 10px;

  color: var(--green);

  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  font-weight: 700;

  text-decoration: none;

  border-bottom: 2px solid var(--orange);

  transition: color .2s ease;
}


.voyage-contact-link:hover {
  color: var(--orange);
}


/* TABLETTE */

@media (max-width: 950px) {

  .voyage-cards {
    grid-template-columns: 1fr;
    max-width: 700px;
    margin: 0 auto;
  }

  .voyage-card {
    padding: 35px 30px;
  }

  .voyage-image {
    height: 260px;
  }

}


/* MOBILE */

@media (max-width: 650px) {

  .voyage-page {
    padding: 55px 18px 75px;
  }

  .voyage-intro {
    margin-bottom: 45px;
  }

  .voyage-intro p {
    font-size: 1rem;
  }

  .voyage-card {
    padding: 28px 20px;
    border-radius: 18px;
  }

  .voyage-image {
    height: 210px;
  }

  .voyage-image img {
    max-width: 240px;
  }

  .voyage-future {
    margin-top: 65px;
    padding: 40px 22px;

    border-radius: 18px;
  }

  .voyage-future p {
    font-size: 1rem;
  }

}
@media(max-width:650px){
  .footer-inner{
    justify-content:center;
    text-align:center;
  }
}


/* =========================================
   SÉLECTEUR DE LANGUE FR / EN
========================================= */
.language-switcher{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  flex-shrink:0;
}

.language-switcher .lang-link,
.language-switcher .lang-link:last-child{
  padding:2px 4px;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  line-height:1.2;
}

.language-switcher .lang-link:hover{
  color:var(--orange);
}

.language-switcher .lang-link.active{
  color:var(--green);
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}

.language-switcher .lang-separator{
  color:var(--line);
  font-weight:700;
  user-select:none;
}

@media(max-width:800px){
  .language-switcher{
    margin-top:4px;
  }
}