/* ===== FIX "À propos" — centrage parfait des images latérales ===== */

/* 1) Conteneur grille : largeur max, colonnes équilibrées, gap cohérent */
.presentation.about .wrap.about-grid{
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(18px, 3.2vw, 40px);
  display: grid;
  grid-template-columns: 
    minmax(280px, 1fr)      /* image gauche */
    minmax(620px, 700px)    /* texte (centre) */
    minmax(280px, 1fr);     /* image droite */
  align-items: center;
  justify-items: center;    /* centre chaque cellule */
  column-gap: clamp(28px, 4vw, 56px);
  overflow: visible;        /* évite tout crop involontaire */
}

/* 2) On enlève les "poussées" qui cassaient la symétrie */
.about-img.left,
.about-img.right{
  padding: 0 !important;
  margin: 0 !important;
  place-self: center;       /* centre dans la cellule */
}

/* 3) Taille d’image fluide et identique des deux côtés */
.about-img img{
  display: block;
  width: clamp(260px, 28vw, 420px);  /* même logique des deux côtés */
  height: auto;
  aspect-ratio: 3 / 4;               /* garde la proportion */
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(56,45,34,.20);
  box-shadow: 0 18px 40px rgba(8,11,13,.16);
}

/* 4) Titre + texte : parfaitement centré */
.about-text{
  text-align: center;
  padding: clamp(16px, 2vw, 28px);
  max-width: 700px;  /* borne propre pour éviter d’étirer la grille */
  margin: 0 auto;
}
.about-text h2{
  margin-bottom: clamp(16px, 2vw, 24px);
}

/* 5) Tablettes : réduit un peu les images, garde la symétrie */
@media (max-width: 1024px){
  .presentation.about .wrap.about-grid{
    grid-template-columns: 320px minmax(560px, 1fr) 320px;
    column-gap: clamp(20px, 3vw, 40px);
  }
  .about-img img{
    width: clamp(240px, 26vw, 360px);
  }
}

/* 6) Mobile : pile proprement (image gauche, texte, image droite) */
@media (max-width: 980px){
  .presentation.about .wrap.about-grid{
    grid-template-columns: 1fr;
    row-gap: clamp(22px, 4.5vw, 36px);
  }
  .about-img.left{ order: 1; }
  .about-text   { order: 2; }
  .about-img.right{ order: 3; }

  .about-img img{
    width: min(420px, 88vw);
    aspect-ratio: 4 / 5;
  }
}


/* ===== Contact (map + formulaire) ===== */
.contact-map.wrap{max-width:1100px;margin:0 auto;padding:32px 20px}
.contact-map h1{color:var(--brand);margin-bottom:8px;text-align:center}
.contact-map{margin:0;padding:0}
#map{width:100%;height:400px;border-radius:12px;overflow:hidden;margin:0 auto 2rem}

/* Form */
section h1{text-align:center;font-size:clamp(28px,3vw,36px);margin-bottom:1.5rem;color:var(--brand)}
form{
  max-width:640px;margin:0 auto;padding:2rem;background:#fffdf9;border-radius:16px;
  border:1px solid rgba(56,45,34,.18);box-shadow:0 12px 32px rgba(8,11,13,.12);
}
fieldset{border:none;padding:0}
legend{font-size:1.4rem;font-weight:700;margin-bottom:1rem;color:var(--brand)}
label{display:block;font-weight:600;margin:.8rem 0 .4rem;color:var(--olive)}
input,select,textarea{
  width:100%;padding:.75rem 1rem;border-radius:10px;border:1px solid rgba(56,45,34,.25);
  font-size:1rem;font-family:inherit;background:#fff;color:var(--ink);
  transition:border var(--transition), box-shadow var(--transition);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px rgba(56,52,37,.2)}
textarea{resize:vertical}
input[type="checkbox"]{width:auto;margin-right:.5rem}
label[for="rgpd"]{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:400;margin-top:1rem;color:var(--muted)}
button{
  display:inline-block;margin-top:1.5rem;padding:.8rem 1.6rem;font-weight:700;font-size:1rem;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#3d3a2b,var(--olive));color:var(--brand-2);box-shadow:0 10px 20px rgba(8,11,13,.18);
  transition:transform var(--transition), filter var(--transition);
}
button:hover{transform:translateY(-2px);filter:brightness(1.05)}


/* =============================
   Mode d’emploi — style Anacaona
   ============================= */
.how-to-anacaona{
  max-width: 940px;
  margin: clamp(20px,4vw,40px) auto;
  padding: clamp(18px,2.4vw,28px);
  background:#fffdf9; /* ton crème doux comme les cartes */
  border:1px solid rgba(56,45,34,.18);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(8,11,13,.12);
  color: var(--ink);             /* texte principal */
  line-height: 1.7;
  font-family: 'Open Sans', system-ui, sans-serif;
}

.how-to-anacaona h2{
  font-family: 'Playfair Display', serif; /* titres de ta charte */
  font-size: clamp(22px,2.6vw,30px);
  text-align: center;
  color: var(--brand);           /* olive/brun selon base.css */
  margin: 0 0 .5rem;
}

.how-to-anacaona p{
  text-align: center;
  color: var(--muted);
  margin: 0 0 1.2rem;
}

.how-to-anacaona ol{
  counter-reset: steps;
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: clamp(12px,1.8vw,16px);
}

.how-to-anacaona ol li{
  position: relative;
  counter-increment: steps;
  padding: 1rem 1rem 1rem 3rem;
  background: #fff;
  border: 1px solid rgba(56,45,34,.14);
  border-radius: 14px;
}

.how-to-anacaona ol li::before{
  content: counter(steps);
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--olive);      /* pastille numérotée = olive */
  color: var(--brand-2);         /* crème clair pour le texte */
  font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(8,11,13,.18);
}

.how-to-anacaona h3{
  font-size: 1.1rem;
  color: var(--brand);
  margin: 0 0 .35rem;
}

.how-to-anacaona ul{
  margin: .25rem 0 0 1.1rem;
  color: var(--muted);
}
.how-to-anacaona ul li{ margin: .28rem 0; }

.how-to-anacaona strong{ color: var(--brand); }
.how-to-anacaona em{ color: var(--muted); }

/* Petits écrans */
@media (max-width: 560px){
  .how-to-anacaona{ padding: 16px; border-radius: 14px; }
  .how-to-anacaona ol li{ padding-left: 2.6rem; }
  .how-to-anacaona ol li::before{ left: 10px; }
}

/* ===== Section vidéo explicative ===== */
.video-explique {
  padding: 60px 20px;
  background: #fffdf9;
  text-align: center;
}

.video-explique .section-head {
  margin-bottom: 24px;
}

.video-container {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(8,11,13,.12);
}

.video-container iframe {
  width: 100%;
  height: 450px;
  border: none;
}

@media (max-width: 560px) {
  .video-container iframe {
    height: 260px;
  }
}