assets/styles.css
:root{
  --deep-sea:#0A3D62;
  --terracotta:#C96A4B;
  --sand:#EBDCCB;
  --white:#FFFFFF;
  --ink:#0B2239;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;scroll-behavior:smooth}
a{color:var(--deep-sea);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:38px;width:auto}
.brand{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:18px;letter-spacing:.06em;color:var(--deep-sea)}
.lang-switch{display:flex;gap:8px;align-items:center}
.lang-switch button{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer;font-size:12px}
.lang-switch button.active{border-color:var(--deep-sea);color:#fff;background:var(--deep-sea)}
.cta-row{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 32px;
  border-radius:999px;
  height:56px;
  line-height:56px;
  font-weight:600;
}

.btn-primary{background:var(--deep-sea);color:#fff}
.btn-outline{border-color:var(--deep-sea);color:var(--deep-sea);background:#fff}
.btn:hover{opacity:.92}
/* hero */
.hero{
  padding:80px 0 64px;
}

/* 2 colonnes en flex */
.hero-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
}

/* titre & texte : on garde tes réglages */
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:44px;
  line-height:1.1;
  margin:0 0 12px;
}

.hero .sub{
  font-size:18px;
  color:#4b5563;
  margin-bottom:24px;
}

.tag{
  display:inline-block;
  background:var(--sand);
  color:#6b3e2e;
  border:1px dashed #d5ba84;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:16px;
  font-weight:500;
}

/* >>> ICI on enlève VRAIMENT le cadre et l’ombre <<< */
.hero-card{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
  max-width:420px;
  width:100%;
}

/* l’image seule, sans bordure blanche */
.hero img{
  width:100%;
  height:auto;
  border:none;
  border-radius:24px;
  object-fit:cover;
}

/* colonnes gauche/droite */
.hero-left{
  flex:1 1 50%;
  max-width:650px;
}

.hero-right{
  flex:0 1 420px;
  display:flex;
  justify-content:flex-end;
}
/* Boutons de contact alignés */
.hero-contact{
  margin-top:32px;
  display:flex;
  flex-wrap:nowrap;
  gap:16px;
  justify-content:center;
  align-items:center;
}

.hero-contact > *{
    display:flex;
    align-items:center;
}
.email-pop{
    display:inline-flex;
    align-items:center;
}

/* LinkedIn / Instagram / WhatsApp */
.hero-contact > a.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  height:56px;
  white-space:nowrap;
}

/* E-mail (wrapper + bouton à l’intérieur) */
.hero-contact > .email-pop{
  display:flex;
  align-items:stretch;
}
/* Quand la fenêtre est moins large, on empile la photo au-dessus du texte */
@media (max-width: 1300px){
  .hero-grid{
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
  }

  .hero-right{
    order:-1;          /* photo AU-DESSUS */
    justify-content:center;
    width:100%;
  }

  .hero-card{
    max-width:380px;
    margin:0 auto;
  }

  .hero-contact{
    flex-wrap:wrap;    /* sur petit écran, les boutons peuvent passer sur 2 lignes */
  }
}

.hero-contact > .email-pop > a.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  height:56px;
  white-space:nowrap;
}

/* sections */
.section{padding:40px 0;border-top:1px solid #f2f2f2}
.section h2{font-family:'Playfair Display',serif;font-size:28px;margin:0 0 16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid #eee;border-radius:16px;padding:16px;background:#fff}
.card h3{margin:0 0 8px;font-size:18px}
.small{font-size:12px;opacity:.8;font-weight:500}
.footer{padding:30px 0;background:#0b2239;color:#c7d2fe;margin-top:40px}
.footer a{color:#c7d2fe}
/* email reveal */
.email-pop{position:relative}
.email-box{position:absolute;left:0;top:calc(100% + 8px);background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.08);padding:10px 12px;display:none;min-width:260px;z-index:40}
.email-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.email-text{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;word-break:break-all}
.copy-btn{padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer}
.notice{background:rgba(201,106,75,.1);border:1px dashed rgba(201,106,75,.5);padding:10px 12px;border-radius:12px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
}
/* --- Fix visibilité bouton e-mail --- */
.email-pop { display: inline-block !important; position: relative; }
#emailBox { display: none; }
.email-box { z-index: 50; } /* pour passer devant la photo */
/* === Correction finale : bouton E-mail visible === */
.btn-primary {
  background-color: #c96a4b !important; /* terracotta */
  color: #fff !important;
  border: 1px solid #c96a4b !important;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background-color: #a5533a !important;
}

/* assure que le conteneur ne cache rien */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
/* Assure l’affichage et la position du popover */
.email-pop { display: inline-block !important; position: relative; }
#emailBox { display: none; }
.email-box { z-index: 50; } /* passe devant la photo */

/* options de layout des boutons de contact */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Cartes cliquables */
.link-card {
  text-align: left;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.link-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.link-card h3 { margin: 0; }

/* Modales */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; }
.modal[aria-hidden="false"] { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.modal-dialog {
  position: relative; background: #fff; max-width: 720px; width: 92%;
  padding: 24px 22px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  outline: none;
}
.modal-close {
  position: absolute; top: 8px; right: 12px; border: 0; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
}
/* === Ajouts légers pour nouvelles sections === */
.section { padding: 48px 0; }
.section-alt { background: #f7f7f7; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}

.cta-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.btn-lg { padding:14px 24px; font-size:18px; }
.cta-top { border-top:1px solid #eee; }
.cta-bottom { border-top:1px solid #eee; border-bottom:1px solid #eee; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.cards .card {
  background:#fff; border:1px solid #eee; border-radius:12px; padding:18px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.card-emoji { font-size:32px; line-height:1; margin-bottom:8px; }

.features .check { list-style:none; margin:0; padding:0; }
.features .check li { padding-left:24px; position:relative; margin:8px 0; }
.features .check li:before {
  content:"✓"; color:#2a8f5b; position:absolute; left:0; top:0;
}

.kpi-table { border:1px solid #eee; border-radius:12px; overflow:hidden; }
.kpi-row { display:grid; grid-template-columns: 1fr 1fr; }
.kpi-head { background:#fafafa; font-weight:600; }
.kpi-cell { padding:14px 16px; border-top:1px solid #eee; }
.kpi-row:first-child .kpi-cell { border-top:none; }

.note { background:#fff9e6; border:1px solid #ffe2a8; padding:12px 14px; border-radius:8px; }
.muted { color:#666; }

/* ==== Harmonisation du bloc e-mail ==== */

.email-pop {
  margin: 18px 0 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.email-pop .btn {
  min-width: 160px;
  text-align: center;
}

.email-box {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: #fff8f6;
  border: 1px dashed rgba(201,106,75,0.4);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.email-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-text {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #333;
}

.copy-btn {
  border: 1px solid #c96a4b;
  background: #fff;
  color: #c96a4b;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
.copy-btn:hover {
  background: #c96a4b;
  color: #fff;
}

/* ==== Espacement global ajusté ==== */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.hero .container.hero-grid {
  gap: 36px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .email-pop { align-items: stretch; }
  .email-box { width: 100%; }
  .cta-row { flex-direction: column; align-items: stretch; }
}
/* === HERO : grille propre, alignement en haut === */
.hero .container.hero-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;  /* gauche plus large que droite */
  column-gap: 56px;
  align-items: start;                  /* aligne tout en haut */
}

/* La carte photo reste en colonne 2, en haut */
.hero .hero-card{
  grid-column: 2;
  align-self: start;
}
/* Évite que la photo recouvre le texte À propos */
@media (min-width: 900px) {
    main + .section {
        margin-top: 120px;
    }
}


/* Le bloc "À propos / Ce que j’apporte" (qui a .section)
   passe EN DESSOUS des deux colonnes du hero */
.hero .container.hero-grid > .section{
  grid-column: 1 / -1;   /* occupe toute la largeur */
  margin-top: 28px;      /* un petit air, mais sans trou */
}

/* Resserre un peu la tête du héros */
.tag{ margin-bottom: 8px; }
.hero h1{ margin-top: 6px; margin-bottom: 16px; }

/* Cartes "Ce que j’apporte" : écart régulier */
.grid-3{ gap: 16px; }

/* Espace cohérent entre les blocs CTA / e-mail */
.cta-row{ gap: 12px; margin-top: 12px; }

/* Option : réduit légèrement la marge haute du header si besoin
.header { padding-top: 18px; } */
/* === Ajustement photo (hero-card) === */

.hero {
  position: relative;
}

.hero-card {
  position: absolute;
  top: 10px;
  right: 6%;
  width: 230px;           /* taille réduite */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* === PHOTO PRO : intégrée et équilibrée === */

.hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Le portrait accompagne le texte à droite */
.hero-card {
  width: 260px;             /* taille plus naturelle */
  margin-left: 40px;
  margin-top: -10px;        /* remonte légèrement */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.2);
  flex-shrink: 0;           /* ne rétrécit pas */
}

.hero-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Ajuste la colonne texte à gauche */
.hero .container.hero-grid > div:first-child {
  flex: 1;
  min-width: 420px;
}

/* Mobile : photo centrée sous le texte */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    align-items: center;
  }
  .hero-card {
    width: 70%;
    margin: 20px auto 0;
  }
}

/* ===== HERO (titre + contact + photo) ===== */

.hero{
  padding: 28px 0 24px;
  background: #fff;
}

/* 2 colonnes : texte à gauche (1fr) / photo à droite (340px) */
.hero-grid{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

/* rangée de boutons (e-mail / Linkedin / IG / WhatsApp) */
.cta-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* HERO : texte à gauche, photo à droite */
.hero .container.hero-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* Colonne texte (gauche) */
.hero .container.hero-grid > div:first-child {
  flex: 1 1 0;
  min-width: 260px;
}

/* Colonne photo (droite) */
.hero-card {
  flex: 0 0 260px;
  max-width: 320px;
}

.hero-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Carte photo à droite : proche du texte, taille harmonieuse */

  width: 100%;
  max-width: 340px;                   
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.hero-card img{
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile : une colonne, photo centrée sous le texte */
@media (max-width: 900px) {
  .hero .container.hero-grid {
    flex-direction: column;
    align-items: center;
  }

  .hero .container.hero-grid > div:first-child {
    width: 100%;
  }

  .hero-card {
    max-width: 300px;
    margin: 24px auto 0;
  }
}

/* === Refonte layout hero : texte gauche, photo droite === */

.hero {
  padding: 80px 0 56px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

.hero-left {
  max-width: 620px;
}

.hero-left .tag {
  display: inline-block;
  margin-bottom: 16px;
}

.hero-left h1 {
  margin-bottom: 16px;
  line-height: 1.1;
}

.hero-left .sub {
  margin-bottom: 0;
}

/* Boutons de contact sous le texte */
.hero-contact {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Boutons pays sous la tagline */
.country-ctas {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.country-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #1f2933;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.country-btn:hover {
  background: #1f3c88;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}


/* Carte photo à droite */
.hero-right {
  display: flex;
  justify-content: center;
}

.hero-card {
  background: #ffffff;
  border-radius: 32px;
  padding: 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
  max-width: 420px;
  width: 100%;
}

.hero-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  object-fit: cover;
}

/* Responsive : pile tout en colonne sur mobile */
@media (max-width: 900px) {
  .hero {
    padding-top: 56px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-right {
    order: -1; /* photo au-dessus du texte sur mobile, optionnel */
  }

  .hero-card {
    max-width: 360px;
  }
}

/* === Overrides HERO : layout, suppression doublon, photo sans cadre === */

/* Mise en page : 2 colonnes en flex, photo à droite */
.hero-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.hero-left{
  flex:1 1 55%;
  max-width:650px;
}

.hero-right{
  flex:0 0 320px;
  display:flex;
  justify-content:flex-start; /* rapproche la photo du texte */
}

/* On enlève le cadre et l'ombre autour de la photo */
.hero-card{
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
}

.hero-card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px; /* tu peux mettre 0 si tu veux des angles droits */
  border:none;
  object-fit:cover;
}

/* On garde la rangée de boutons sous le texte */
.hero-contact{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* IMPORTANT : s'il reste un bloc hero-contact sous la photo, on le cache */
.hero-card .hero-contact{
  display:none;
}

/* Responsive : en dessous de 1100px, la photo passe au-dessus du texte */
@media (max-width:1100px){
  .hero{
    padding-top:56px;
  }

  .hero-grid{
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
  }

  .hero-right{
    order:-1;           /* photo au-dessus du texte */
    justify-content:center;
    width:100%;
  }

  .hero-card{
    max-width:360px;
    margin:0 auto;
  }
}
/* Force les boutons du HERO à rester alignés proprement */
.hero-contact .btn,
.hero-contact .email-pop {
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-width:150px;       /* largeur uniforme */
  height:52px;           /* hauteur uniforme */
  font-size:18px;
  white-space:nowrap;    /* empêche les coupures de ligne */
}

.hero-contact {
  flex-wrap:nowrap !important;   /* plus de retour à la ligne */
  gap:16px !important;           /* espace constant entre boutons */
}
/* Supprime le cadre blanc / ombre autour de la photo */
.hero-card {
  background:none !important;
  border:none !important;
  padding:0 !important;
  box-shadow:none !important;
}

.hero-card img {
  border:none !important;
  box-shadow:none !important;
  background:none !important;
}

/* === HERO : overrides propres (layout + boutons + photo) === */

/* Mise en page générale du hero */
.hero {
  padding: 80px 0 64px;
}

/* 2 colonnes souples, qui peuvent passer l'une sous l'autre si manque de place */
.hero-grid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  flex-wrap: wrap; /* si l'écran rétrécit, la photo passe dessous au lieu de chevaucher */
}

/* Colonne gauche : texte */
.hero-left {
  flex: 1 1 420px;
  max-width: 650px;
}

/* Colonne droite : photo */
.hero-right {
  flex: 0 1 420px;
  display: flex;
  justify-content: flex-start;
}

/* On supprime complètement le cadre / fond / ombre autour de la photo */
.hero-card {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 420px;
  width: 100%;
}

.hero-card img {
  display: block;
  width: 100%;
  height: auto;
  border: none !important;
  border-radius: 24px;
  object-fit: cover;
}

/* Boutons de contact : une seule rangée bien alignée */
.hero-contact {
  margin-top: 32px;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  justify-content: center; /* centre la rangée sous le texte */
}

.hero-contact .btn,
.hero-contact .email-pop {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 52px;
  white-space: nowrap;
}

/* Sur mobile : photo au-dessus, plus aucun risque de chevauchement */
@media (max-width: 900px) {
  .hero-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-right {
    order: -1;           /* photo au-dessus du texte */
    justify-content: center;
    width: 100%;
  }

  .hero-card {
    max-width: 360px;
    margin: 0 auto;
  }

  .hero-contact {
    flex-wrap: wrap;     /* sur tout petit écran, les boutons peuvent revenir sur 2 lignes */
  }
}
/* === SUPPRESSION ABSOLUE DE TOUT CADRE / FOND / OMBRE AUTOUR DE LA PHOTO === */

.hero-right,
.hero-right * {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Quand la fenêtre rétrécit, on empile la photo au-dessus du texte pour éviter tout chevauchement */
@media (max-width: 1400px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .hero-right {
    order: -1;              /* photo AU-DESSUS du texte */
    justify-content: center;
    width: 100%;
  }
/* ==== FIX FINAL HERO : alignement boutons + comportement photo ==== */

/* Layout desktop : 2 colonnes, sans chevauchement */
.hero-grid {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 40px !important;
  flex-wrap: nowrap !important;
}

.hero-left {
  flex: 1 1 50% !important;
  max-width: 650px !important;
}

.hero-right {
  flex: 0 1 420px !important;
  display: flex !important;
  justify-content: flex-end !important;
  position: static !important;
  margin: 0 !important;
}

.hero-card {
  max-width: 420px !important;
  width: 100% !important;
  position: static !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.hero-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: none !important;
  border-radius: 24px !important;
  object-fit: cover !important;
}

/* Boutons : même taille pour E-mail et les autres */
.hero-contact {
  margin-top: 32px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  justify-content: center !important;
}

/* Liens simples (LinkedIn / Instagram / WhatsApp) */
.hero-contact > a.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 170px !important;
  height: 56px !important;
  white-space: nowrap !important;
}

/* Bouton E-mail (avec son wrapper .email-pop) */
.hero-contact > .email-pop {
  display: flex !important;
  align-items: stretch !important;
}

.hero-contact > .email-pop > a.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 170px !important;
  height: 56px !important;
  white-space: nowrap !important;
}

/* RESPONSIVE : quand la fenêtre rétrécit, on empile la photo au-dessus du texte */
@media (max-width: 1300px) {
  .hero-grid {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }

  .hero-right {
    order: -1 !important;              /* photo au-dessus du texte */
    justify-content: center !important;
    width: 100% !important;
  }

  .hero-card {
    max-width: 380px !important;
    margin: 0 auto !important;
  }

  .hero-contact {
    flex-wrap: wrap !important;        /* sur petits écrans, les boutons peuvent repasser sur 2 lignes */
  }
}
/* Fix spécifique du bouton E-mail dans le hero */
.hero-contact{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.hero-contact > .email-pop{
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:stretch !important;
}

.hero-contact > .email-pop > a.btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:170px !important;
  height:56px !important;
  white-space:nowrap !important;
}

  .hero-card {
    max-width: 420px;
    margin: 0 auto;
  }
}
/* === FIX ALIGNEMENT BOUTON E-MAIL DANS LE HERO === */

.hero-contact{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  justify-content:center !important;
  align-items:stretch !important;
}

.hero-contact > a.btn,
.hero-contact > .email-pop > a.btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:170px !important;
  height:56px !important;
  white-space:nowrap !important;
}

/* le wrapper du bouton E-mail ne doit pas ajouter de décalage */
.hero-contact > .email-pop{
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:stretch !important;
}
/* === FIX CHEVAUCHEMENT PHOTO : MODE COLONNE SOUS 1500px === */

@media (max-width:1500px){
  .hero-grid{
    display:block !important;   /* on casse le flex/grid : chaque bloc prend toute la largeur */
  }

  .hero-left{
    max-width:100% !important;
  }

  .hero-right{
    margin-top:32px !important;
    max-width:420px !important;
  }

  .hero-card{
    margin:0 auto !important;
  }
}
/* ===== RESET FINAL DU HERO : layout + photo + boutons ===== */

/* Mise en page : 2 colonnes qui s'adaptent sans chevauchement */
.hero-grid{
  display:flex !important;
  flex-wrap:wrap !important;           /* si ça manque de place, la photo passe SUR LA LIGNE DU DESSOUS */
  align-items:flex-start !important;
  justify-content:center !important;
  gap:40px !important;
}

/* Colonne texte */
.hero-left{
  flex:1 1 420px !important;           /* minimum 420px, mais peut s'étirer */
  max-width:700px !important;
}

/* Colonne photo */
.hero-right{
  flex:0 1 360px !important;           /* la photo prend ~360px */
  display:flex !important;
  justify-content:flex-end !important;
}

/* Photo sans cadre */
.hero-card{
  max-width:360px !important;
  width:100% !important;
  margin:0 !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

.hero-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border:none !important;
  border-radius:24px !important;
  object-fit:cover !important;
}

/* Boutons : même taille POUR TOUS, y compris E-mail */
.hero-contact{
  margin-top:32px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  justify-content:center !important;
  align-items:stretch !important;
}

/* Chaque "bloc bouton" (E-mail, LinkedIn, Insta, WhatsApp) */
.hero-contact > a.btn,
.hero-contact > .email-pop{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  min-width:170px !important;
  height:56px !important;
}

/* Le <a> à l'intérieur de .email-pop (le bouton E-mail lui-même) */
.hero-contact > .email-pop > a.btn{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
/* === HERO : style "pills" colorés pour les boutons de contact === */

/* même taille / forme pour tous les boutons du hero */
.hero-contact .btn,
.hero-contact .email-pop > a.btn {
  border-radius: 999px !important;
  min-width: 170px !important;
  height: 56px !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  border: none !important;
  color: #fff !important;
  background: #145c7a !important; /* couleur par défaut : E-mail */
  text-decoration: none !important;
}

/* LinkedIn : bleu LinkedIn */
.hero-contact a.btn[href*="linkedin.com"] {
  background: #0a66c2 !important;
}

/* Instagram : dégradé */
.hero-contact a.btn[href*="instagram.com"] {
  background: linear-gradient(
    90deg,
    #f58529,
    #dd2a7b,
    #8134af,
    #515bd4
  ) !important;
}

/* WhatsApp : vert */
.hero-contact a.btn[href*="wa.me"] {
  background: #25d366 !important;
}

/* petit hover sympa */
.hero-contact .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}
/* === Alignement parfait texte dans les pills du hero === */
.hero-contact .btn,
.hero-contact .email-pop > a.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* === Centrage brutal du texte dans les pills du HERO === */
.hero-contact .btn,
.hero-contact .email-pop > a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px !important;
  line-height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* === À PROPOS : grille 2 colonnes === */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.about-photo img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.about-text h2 {
  font-size: 32px;
  margin-bottom: 16px;
}

.about-text p {
  font-size: 20px;
  line-height: 1.6;
}

/* Version mobile */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-photo {
    max-width: 350px;
    margin: 0 auto;
  }
}