/* ==========================================================================
   MEZI-LINE GUYANE — Feuille de styles unique
   --------------------------------------------------------------------------
   Organisation :
     1. Polices             2. Variables de marque      3. Reset & base
     4. Utilitaires         5. En-tête / navigation     6. Composants
     7. Sections            8. Formulaire               9. Pied de page
    10. Responsive         11. Accessibilité / impression
   Les couleurs sont extraites des documents de marque officiels.
   ========================================================================== */

/* ============================ 1. POLICES ================================= */
/* Auto-hébergées : aucun appel à un serveur tiers (conformité RGPD). */

@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ======================= 2. VARIABLES DE MARQUE =========================== */

:root{
  /* Bleus — extraits du logo et des fonds de la plaquette */
  --navy-900:#001A33;   /* fonds sombres, pied de page */
  --navy-800:#0A2145;   /* bleu du logo « Mezi » */
  --navy-700:#0F2E52;   /* cartes sur fond sombre */
  --navy-600:#1B4372;   /* survols, bordures actives */
  --charcoal:#2A2F3B;   /* gris du logo « Line » */

  /* Verts — territoire, durabilité */
  --green-900:#0B3F0F;  /* pastilles d'icônes */
  --green-700:#1C5E24;  /* titres de section */
  --green-500:#6BB043;  /* accent vif : mots surlignés */
  --green-100:#DDEBD4;
  --green-50:#F0F7EC;

  /* Ors — exigence, premium */
  --bronze-600:#9B640A; /* accent fort, chiffres */
  --bronze-500:#A87444; /* trait d'union du logo */
  --gold-300:#E6C391;   /* filets fins sur fond sombre */

  /* Neutres */
  --paper:#F7F7F7;
  --white:#FFFFFF;
  --ink:#17202E;
  --ink-soft:#4C5768;
  --line:#E2E6EC;
  --line-dark:rgba(230,195,145,.22);

  /* Typographie */
  --font-title:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Rythme */
  --gutter:20px;
  --maxw:1200px;
  --maxw-narrow:760px;
  --radius:14px;
  --radius-lg:22px;
  --section-y:clamp(56px,8vw,104px);

  /* Ombres */
  --shadow-sm:0 1px 2px rgba(0,26,51,.06),0 2px 8px rgba(0,26,51,.05);
  --shadow-md:0 2px 6px rgba(0,26,51,.07),0 12px 28px rgba(0,26,51,.08);
  --shadow-lg:0 4px 12px rgba(0,26,51,.09),0 22px 48px rgba(0,26,51,.12);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================== 3. RESET & BASE ============================== */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;            /* garde-fou : aucun défilement horizontal */
}

h1,h2,h3,h4{
  font-family:var(--font-title);
  line-height:1.15;
  color:var(--navy-800);
  margin:0 0 .5em;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,1.45rem + 2.6vw,3.35rem);font-weight:700;}
h2{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.5rem);font-weight:700;}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);font-weight:600;}
h4{font-size:1.0625rem;font-weight:600;}

p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
a{color:var(--navy-600);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--green-700);}
img,svg,video{max-width:100%;height:auto;display:block;}
ul,ol{margin:0 0 1.15em;padding-left:1.25em;}
li{margin-bottom:.4em;}
strong{font-weight:600;color:var(--navy-800);}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0;}

:focus-visible{
  outline:3px solid var(--green-500);
  outline-offset:3px;
  border-radius:4px;
}

/* Lien d'évitement — accessibilité clavier */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy-900);color:#fff;padding:12px 20px;
  font-family:var(--font-title);font-weight:600;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;color:#fff;}

/* ============================ 4. UTILITAIRES ============================= */

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.container--narrow{max-width:var(--maxw-narrow);}
.section{padding-block:var(--section-y);position:relative;}
.section--paper{background:var(--paper);}
.section--tint{background:linear-gradient(180deg,var(--green-50),var(--white));}
.section--dark{background:var(--navy-900);color:#D9E2EC;}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark p{color:#C3CFDD;}
.section--dark a{color:var(--gold-300);}
/* …sauf à l'intérieur d'un bloc clair (formulaire, carte blanche). */
.section--dark .form-card a{color:var(--navy-600);}
.section--dark .form-card a:hover{color:var(--green-700);}
.section--dark strong{color:#fff;}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.text-center{text-align:center;}
.accent{color:var(--green-500);}
.section--dark .accent{color:var(--green-500);}
.accent-dark{color:var(--green-700);}

/* Sur-titre : petite capitale précédée d'un filet or */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-title);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-600);margin-bottom:14px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--bronze-500);flex:none;}
.section--dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow{color:var(--gold-300);}
.section--dark .eyebrow::before,
.hero .eyebrow::before,
.page-hero .eyebrow::before{background:var(--gold-300);}
.text-center .eyebrow,.eyebrow--center{justify-content:center;}

.section-head{max-width:800px;margin-bottom:clamp(32px,4vw,52px);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head--center .eyebrow{justify-content:center;}
.section-head .lede{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink-soft);}
.section--dark .section-head .lede{color:#B3C1D2;}

/* Grilles */
.grid{display:grid;gap:clamp(16px,2vw,26px);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--sidebar{grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(28px,4vw,64px);}
.grid--sidebar.grid--top{align-items:start;}

/* ============================ 5. EN-TÊTE ================================= */

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.site-header.is-scrolled{box-shadow:var(--shadow-sm);}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:76px;
}
.site-logo{display:flex;align-items:center;flex:none;}
.site-logo img{width:176px;height:auto;}

.nav-toggle{
  display:none;flex:none;
  width:46px;height:46px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle__bars{display:block;position:relative;width:20px;height:2px;background:var(--navy-800);border-radius:2px;transition:background .2s;}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy-800);border-radius:2px;
  transition:transform .28s var(--ease),top .28s var(--ease);
}
.nav-toggle__bars::before{top:-6px;}
.nav-toggle__bars::after{top:6px;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg);}

.site-nav{display:flex;align-items:center;gap:6px;}
.site-nav a{
  font-family:var(--font-title);font-size:.94rem;font-weight:500;
  color:var(--navy-800);text-decoration:none;
  padding:10px 13px;border-radius:9px;white-space:nowrap;
  transition:background .2s,color .2s;
}
.site-nav a:hover{background:var(--green-50);color:var(--green-700);}
.site-nav a[aria-current="page"]{color:var(--green-700);font-weight:600;background:var(--green-50);}

/* Un bouton placé dans la navigation doit garder ses propres couleurs :
   le sélecteur « .site-nav a » est plus spécifique que « .btn--primary »
   et écraserait sinon la couleur du texte (contraste insuffisant). */
.site-nav a.btn{padding:13px 22px;}
.site-nav a.btn--primary,
.site-nav a.btn--primary:hover{background:var(--green-700);color:#fff;}
.site-nav a.btn--primary:hover{background:var(--green-900);}

/* Sous-menu « Expertises » */
.has-sub{position:relative;}
.has-sub__btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-title);font-size:.94rem;font-weight:500;
  color:var(--navy-800);background:none;border:0;cursor:pointer;
  padding:10px 13px;border-radius:9px;
}
.has-sub__btn:hover{background:var(--green-50);color:var(--green-700);}
.has-sub__btn svg{width:11px;height:11px;transition:transform .25s var(--ease);}
.has-sub__btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.submenu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:310px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:8px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s var(--ease),visibility .2s;
}
.has-sub__btn[aria-expanded="true"] + .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.submenu li{margin:0;}
.submenu a{display:block;padding:11px 14px;border-radius:9px;font-size:.92rem;line-height:1.35;white-space:normal;}
.submenu .submenu__note{display:block;font-family:var(--font-body);font-size:.8rem;color:var(--ink-soft);font-weight:400;margin-top:2px;}

/* =========================== 6. COMPOSANTS =============================== */

/* --- Boutons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-title);font-size:.95rem;font-weight:600;
  padding:14px 26px;border-radius:10px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn svg{width:17px;height:17px;flex:none;}
.btn--primary{background:var(--green-700);color:#fff;box-shadow:0 4px 14px rgba(28,94,36,.26);}
.btn--primary:hover{background:var(--green-900);color:#fff;box-shadow:0 8px 22px rgba(28,94,36,.32);}
.btn--gold{background:var(--bronze-600);color:#fff;box-shadow:0 4px 14px rgba(155,100,10,.26);}
.btn--gold:hover{background:#7d5008;color:#fff;}
.btn--outline{background:transparent;color:var(--navy-800);border-color:var(--navy-800);}
.btn--outline:hover{background:var(--navy-800);color:#fff;}
.btn--light{background:#fff;color:var(--navy-800);}
.btn--light:hover{background:var(--green-50);color:var(--navy-900);}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(230,195,145,.5);}
.btn--ghost-light:hover{background:rgba(255,255,255,.1);color:#fff;border-color:var(--gold-300);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.btn-row--center{justify-content:center;}

/* --- Pastille d'icône --- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:56px;height:56px;border-radius:50%;
  background:var(--navy-800);color:#fff;
  box-shadow:0 3px 10px rgba(0,26,51,.18);
}
.pill svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.pill--green{background:var(--green-900);}
.pill--bronze{background:var(--bronze-600);}
.pill--outline{background:transparent;border:2px solid var(--gold-300);color:var(--gold-300);box-shadow:none;}
.pill--sm{width:44px;height:44px;}
.pill--sm svg{width:21px;height:21px;}

/* --- Carte --- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
  display:flex;flex-direction:column;
}
.card h3{margin-top:16px;margin-bottom:8px;}
.card h3 a{color:inherit;text-decoration:none;}
.card--link:hover h3 a{color:var(--green-700);}
.card p{color:var(--ink-soft);font-size:.97rem;}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--green-100);}
.card__link{
  margin-top:auto;padding-top:16px;
  font-family:var(--font-title);font-weight:600;font-size:.92rem;
  color:var(--green-700);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;
}
.card__link svg{width:15px;height:15px;transition:transform .2s var(--ease);}
.card--link:hover .card__link svg{transform:translateX(4px);}
/* Rend toute la carte cliquable sans imbriquer de liens */
.card--link{position:relative;}
.card--link .stretched::after{content:"";position:absolute;inset:0;border-radius:inherit;}

.card__list{list-style:none;padding:0;margin:14px 0 0;}
.card__list li{
  position:relative;padding-left:22px;margin-bottom:8px;
  font-size:.94rem;color:var(--ink-soft);
}
.card__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--green-500);
}
.section--dark .card{background:var(--navy-700);border-color:rgba(230,195,145,.16);box-shadow:none;}
.section--dark .card p,.section--dark .card__list li{color:#B3C1D2;}

/* --- Chiffres clés --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);}
.stat{text-align:center;padding:clamp(18px,2vw,26px) 14px;position:relative;}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line-dark);
}
.stat__num{
  font-family:var(--font-title);font-weight:700;
  font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem);
  color:var(--gold-300);line-height:1;display:block;margin-bottom:8px;
}
.stat__label{font-size:.9rem;color:#B3C1D2;line-height:1.4;}

/* --- Liste « besoin / prestations » --- */
.checklist{list-style:none;padding:0;margin:0;}
.checklist li{position:relative;padding-left:32px;margin-bottom:12px;color:var(--ink-soft);}
.checklist li::before{
  content:"";position:absolute;left:0;top:.28em;width:19px;height:19px;border-radius:50%;
  background:var(--green-50);
  border:1.5px solid var(--green-500);
}
.checklist li::after{
  content:"";position:absolute;left:6px;top:.62em;
  width:7px;height:4px;border-left:2px solid var(--green-700);border-bottom:2px solid var(--green-700);
  transform:rotate(-45deg);
}
.section--dark .checklist li{color:#C3CFDD;}
.section--dark .checklist li::before{background:transparent;border-color:var(--green-500);}
.section--dark .checklist li::after{border-color:var(--green-500);}

/* --- Frise « méthode » --- */
.steps{
  counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);
  /* interligne plus large : la pastille numérotée déborde de 16px vers le haut */
  gap:clamp(32px,3.4vw,42px) clamp(18px,2vw,24px);
}
.step{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 24px 24px;
  box-shadow:var(--shadow-sm);
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:-16px;left:24px;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--navy-800);color:var(--gold-300);
  font-family:var(--font-title);font-weight:700;font-size:.95rem;
  box-shadow:0 4px 12px rgba(0,26,51,.22);
}
.step:nth-child(even)::before{background:var(--green-900);}
.step h3{margin-top:22px;font-size:1.08rem;}
.step p{font-size:.94rem;color:var(--ink-soft);margin:0;}
.section--dark .step{background:var(--navy-700);border-color:rgba(230,195,145,.16);box-shadow:none;}
.section--dark .step p{color:#B3C1D2;}

/* --- Bandeau citation --- */
.quote{
  background:var(--navy-800);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(28px,3.5vw,46px);position:relative;overflow:hidden;
}
.quote::before{
  content:"";position:absolute;top:18px;left:24px;
  width:46px;height:38px;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 38'%3E%3Cpath d='M0 38V20C0 9 7 1 19 0v8c-6 1-9 5-9 10h9v20H0Zm27 0V20C27 9 34 1 46 0v8c-6 1-9 5-9 10h9v20H27Z' fill='%23E6C391'/%3E%3C/svg%3E") no-repeat;
}
.quote blockquote{
  margin:0;padding-top:34px;
  font-family:var(--font-title);font-weight:500;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);line-height:1.42;
  color:#fff;text-wrap:balance;
}
.quote figcaption{margin-top:16px;font-size:.92rem;color:var(--gold-300);}

/* --- Image avec repli dégradé --- */
/* Tant que la photo n'est pas déposée dans /images/, le dégradé de marque
   s'affiche seul : le site reste présentable. */
.media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(145deg,var(--navy-800) 0%,var(--navy-900) 55%,var(--green-900) 100%);
  min-height:260px;box-shadow:var(--shadow-md);
}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 85% 10%,rgba(107,176,67,.24),transparent 60%),
    radial-gradient(90% 70% at 10% 95%,rgba(230,195,145,.16),transparent 60%);
}
.media img{
  width:100%;height:100%;object-fit:cover;position:relative;z-index:1;
  aspect-ratio:4/3;
}
.media--wide img{aspect-ratio:16/9;}
.media__deco{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;opacity:.5;
}
.media__deco svg{width:58%;max-width:230px;height:auto;}

/* --- Séparateur courbe (rappel de la courbe en S de la plaquette) --- */
.curve{display:block;width:100%;height:clamp(40px,5vw,78px);}
.curve path{fill:currentColor;}
/* Le fond reprend la couleur de la section PRÉCÉDENTE, le remplissage
   celle de la section SUIVANTE : la courbe fait la jonction entre les deux. */
.curve--to-dark{color:var(--navy-900);background:var(--white);}
.curve--to-paper{color:var(--paper);background:var(--navy-900);}
.curve--to-white{color:var(--white);background:var(--navy-900);}

/* --- Bandeau de rappel --- */
.notice{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--green-50);border-left:4px solid var(--green-500);
  border-radius:0 12px 12px 0;padding:20px 24px;
}
.notice svg{width:22px;height:22px;flex:none;margin-top:3px;stroke:var(--green-700);fill:none;stroke-width:1.7;}
.notice p{font-size:.96rem;color:var(--ink-soft);}
.notice strong{color:var(--green-700);}

/* --- Fil d'Ariane --- */
.breadcrumb{font-size:.86rem;color:var(--ink-soft);padding-block:18px 0;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:8px;}
.breadcrumb li + li::before{content:"›";color:var(--line);}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.breadcrumb a:hover{color:var(--green-700);text-decoration:underline;}

/* --- En-tête de page intérieure --- */
.page-hero{
  background:var(--navy-900);color:#fff;
  padding-block:clamp(48px,6vw,84px);position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 120% at 88% 0%,rgba(107,176,67,.16),transparent 62%),
    radial-gradient(55% 100% at 0% 100%,rgba(230,195,145,.10),transparent 60%);
}
.page-hero > *{position:relative;}
.page-hero h1{color:#fff;max-width:17ch;}
.page-hero .lede{font-size:clamp(1.05rem,1rem + .4vw,1.28rem);color:#C3CFDD;max-width:62ch;margin-top:18px;}
.page-hero .breadcrumb{color:#8FA3B8;padding-top:0;margin-bottom:22px;}
.page-hero .breadcrumb a{color:#8FA3B8;}
.page-hero .breadcrumb a:hover{color:var(--gold-300);}
.page-hero .breadcrumb li + li::before{color:#4A6076;}

/* Badge carte Guyane / Cayenne du bandeau intérieur : une seule classe
   .hero__map, partagée avec le bandeau d'accueil — couleurs, taille
   réelle (svg max-width:330px), pointillé animé et libellé viennent
   tous des règles .hero__map définies plus bas, sans surcharge de
   contenu. On ne change ici que le positionnement, requis par le
   contexte .page-hero qui n'a pas de colonne de grille comme
   .hero__inner (texte sur une seule colonne), donc pas d'autre moyen
   de placer le badge à droite.
   width:330px explicite : en position absolute, .hero__map svg
   (width:100%) n'a sinon aucune largeur définie à résoudre en
   pourcentage (pas de piste de grille ici) et retombe sur la taille
   par défaut du SVG (300px) au lieu du plafond voulu de 330px.
   right en calc() plutôt que le clamp(20px,4vw,56px) d'origine : sur
   l'accueil, le badge est centré dans la colonne .92fr de .hero__inner
   (dans .container, max-width:1200px), ce qui l'installe bien plus
   loin du bord que ne le ferait un simple pourcentage de viewport.
   .page-hero n'a pas ce conteneur pour le badge (position absolute
   directement dans .page-hero, plein viewport) ; la formule ci-dessous
   reproduit la même distance au bord droit à l'écran, mesurée sur
   l'accueil à 1400/1600/1920px (respectivement ≈216/315/475px). */
.page-hero .hero__map{
  position:absolute;top:50%;
  right:max(20px, calc(50% - 485px));
  transform:translateY(-50%);
  width:330px;
  z-index:0;
}
/* Spécificité égale à « .page-hero .hero__map » (et non « .hero__map »
   seul) pour être certain de l'emporter sur .hero__map{display:grid}
   défini plus bas, quel que soit l'ordre dans la feuille de style :
   masquage complet sur mobile, contrairement au bandeau d'accueil qui
   garde une version compacte visible. */
@media (max-width:900px){
  .page-hero .hero__map{display:none;}
}

/* ============================ 7. SECTIONS ================================ */

/* --- Bandeau d'accueil --- */
.hero{
  position:relative;background:var(--navy-900);color:#fff;overflow:hidden;
  padding-block:clamp(64px,8vw,116px);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(65% 110% at 82% 8%,rgba(107,176,67,.2),transparent 60%),
    radial-gradient(60% 100% at 5% 100%,rgba(230,195,145,.12),transparent 62%);
}
.hero__inner{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4vw,64px);align-items:center;}
.hero h1{color:#fff;margin-bottom:20px;}
.hero__lede{font-size:clamp(1.08rem,1rem + .5vw,1.32rem);color:#C3CFDD;max-width:56ch;}
.hero__points{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;}
.hero__points li{
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--font-title);font-size:.88rem;font-weight:500;color:var(--gold-300);
}
.hero__points svg{width:16px;height:16px;stroke:var(--green-500);fill:none;stroke-width:2.2;flex:none;}

/* Carte de la Guyane dans le bandeau */
.hero__map{position:relative;display:grid;place-items:center;}
.hero__map svg{width:100%;max-width:330px;height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.35));}
.hero__map .map-shape{fill:rgba(107,176,67,.08);stroke:var(--green-500);stroke-width:2.4;stroke-linejoin:round;}
.hero__map .map-dot{fill:var(--bronze-500);}
.hero__map .map-ring{fill:none;stroke:var(--gold-300);stroke-width:1.6;opacity:.75;}
.hero__map .map-label{
  font-family:var(--font-title);font-size:15px;font-weight:600;fill:#fff;
}
@media (prefers-reduced-motion:no-preference){
  .hero__map .map-ring{animation:pulse 3.2s var(--ease) infinite;transform-origin:center;}
  @keyframes pulse{0%,100%{opacity:.75;r:14px;}50%{opacity:.18;r:26px;}}
}

/* --- Bloc « implantation » --- */
.implant{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center;}
.implant__map svg{width:100%;max-width:340px;margin-inline:auto;height:auto;}
.implant__map .map-shape{fill:var(--green-50);stroke:var(--green-700);stroke-width:2.6;stroke-linejoin:round;}
.implant__map .map-dot{fill:var(--bronze-600);}
.implant__map .map-label{font-family:var(--font-title);font-size:15px;font-weight:600;fill:var(--navy-800);}

/* --- Liste des 11 domaines --- */
.domains{
  display:flex;flex-wrap:wrap;gap:9px;
  padding:0;margin:clamp(28px,3vw,40px) 0 0;list-style:none;
  justify-content:center;
}
.domains li{
  margin:0;font-size:.87rem;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 16px;
}
.section--paper .domains li{background:#fff;}

/* --- Carrousel de logos (partenaires / clients) --- */
/* Bande à défilement continu, adaptée de l'ancien .logo-wall statique.
   Le fondu latéral masque l'entrée/sortie des logos ; la piste contient
   la liste des logos dupliquée une fois pour boucler sans à-coup :
   translater de -50% ramène exactement au point de départ visuel.
   Les deux groupes (partenaires / clients) partagent une seule section
   pour éviter le double padding vertical de deux <section> empilées. */
.logos-section{padding-block:clamp(28px,3.5vw,48px);}
.logos-group + .logos-group{margin-top:clamp(28px,3vw,40px);}
.logos-section .section-head{margin-bottom:clamp(10px,1.2vw,16px);}
.logo-carousel{
  --logo-w:210px;--logo-gap:24px;--logo-h:104px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
}
.logo-carousel__track{
  display:flex;align-items:center;gap:var(--logo-gap);
  width:max-content;
  animation:logo-scroll var(--logo-duration,40s) linear infinite;
}
@keyframes logo-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.logo-carousel__item{
  flex:0 0 var(--logo-w);height:var(--logo-h);
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;
}
.logo-carousel__item img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s;
}
.logo-carousel__item:hover img{filter:grayscale(0);opacity:1;}

/* Pause au survol : uniquement sur les dispositifs à pointeur précis
   (souris), jamais sur tactile où :hover resterait « collé ». */
@media (hover:hover) and (pointer:fine){
  .logo-carousel:hover .logo-carousel__track{animation-play-state:paused;}
}

@media (max-width:640px){
  .logo-carousel{--logo-w:calc(50vw - 30px);--logo-gap:16px;--logo-h:84px;}
  .logo-carousel__item{padding:8px 10px;}
  .logos-group + .logos-group{margin-top:clamp(20px,4vw,28px);}
}

/* =========================== 8. FORMULAIRE =============================== */

.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-md);
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 20px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field--full{grid-column:1/-1;}
.field label{
  font-family:var(--font-title);font-size:.88rem;font-weight:600;color:var(--navy-800);
}
.field .req{color:var(--bronze-600);}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;width:100%;transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:140px;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C6CEDA;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(107,176,67,.18);
}
.field__hint{font-size:.82rem;color:var(--ink-soft);}

.field--check{flex-direction:row;align-items:flex-start;gap:11px;grid-column:1/-1;}
.field--check input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:var(--green-700);}
.field--check label{font-family:var(--font-body);font-weight:400;font-size:.9rem;color:var(--ink-soft);line-height:1.5;}

/* Piège à robots — invisible pour les humains, rempli par les bots */
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;overflow:hidden;}

/* --- Bloc coordonnées --- */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:22px;}
.contact-list li{display:flex;gap:16px;align-items:flex-start;margin:0;}
.contact-list__label{
  font-family:var(--font-title);font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-600);
  display:block;margin-bottom:3px;
}
.section--dark .contact-list__label{color:var(--gold-300);}
.contact-list a{color:inherit;text-decoration:none;}
.contact-list a:hover{text-decoration:underline;}
.contact-list__value{font-size:1.02rem;}

/* ========================== 9. PIED DE PAGE ============================== */

.site-footer{background:var(--navy-900);color:#9FB0C4;padding-block:clamp(48px,5vw,72px) 0;}
.site-footer h2{
  color:#fff;font-family:var(--font-title);font-weight:600;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:18px;line-height:1.3;
}
.site-footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(28px,3vw,48px);padding-bottom:44px;
}
.site-footer__logo img{width:240px;margin-bottom:18px;}
.site-footer p{font-size:.92rem;line-height:1.6;color:#9FB0C4;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:10px;}
.site-footer a{color:#9FB0C4;text-decoration:none;font-size:.92rem;}
.site-footer a:hover{color:var(--gold-300);text-decoration:underline;}
.site-footer__bottom{
  border-top:1px solid rgba(230,195,145,.16);
  padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;
  font-size:.85rem;
}
.site-footer__baseline{color:var(--gold-300);font-family:var(--font-title);font-weight:500;}

/* =========================== 10. RESPONSIVE ============================== */

@media (max-width:1040px){
  .site-footer__grid{grid-template-columns:1fr 1fr;}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
  /* Navigation repliée en panneau */
  .nav-toggle{display:inline-flex;order:3;}
  .site-nav{
    position:fixed;inset:76px 0 auto;z-index:99;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 26px;
    box-shadow:var(--shadow-lg);
    max-height:calc(100dvh - 76px);overflow-y:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .22s,transform .22s var(--ease),visibility .22s;
  }
  .site-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;}
  .site-nav a,.has-sub__btn{padding:14px 12px;font-size:1rem;width:100%;}
  .has-sub{width:100%;}
  .has-sub__btn{justify-content:space-between;}
  .submenu{
    position:static;transform:none;min-width:0;box-shadow:none;border:0;
    border-left:2px solid var(--green-100);border-radius:0;
    margin:2px 0 8px 12px;padding:0 0 0 8px;
    opacity:1;visibility:visible;display:none;
  }
  .has-sub__btn[aria-expanded="true"] + .submenu{display:block;transform:none;}
  .site-nav .btn{margin-top:12px;}

  .hero__inner{grid-template-columns:1fr;}
  /* Après le texte et les boutons d'action (ordre naturel du DOM, pas de
     order:-1) et en format badge discret, pour ne pas retarder l'affichage
     du message principal ni prendre toute la largeur de l'écran. */
  .hero__map{max-width:140px;margin-inline:auto;}
  .grid--sidebar,.implant{grid-template-columns:1fr;}
  .implant__map{max-width:260px;margin-inline:auto;}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);gap:0;}
  .stat:nth-child(odd)::before{display:none;}
  .stat:nth-child(n+3){border-top:1px solid var(--line-dark);}
}

@media (max-width:640px){
  :root{--gutter:16px;}
  .grid--2,.grid--3,.grid--4,.steps,.form-grid{grid-template-columns:1fr;}
  .site-footer__grid{grid-template-columns:1fr;gap:32px;}
  .site-logo img{width:150px;}
  .btn{width:100%;}
  .btn-row{flex-direction:column;}
  .hero__points{flex-direction:column;gap:10px;}
  .step::before{width:38px;height:38px;font-size:.85rem;top:-14px;}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;text-align:left;}
}

/* ================== 11. ACCESSIBILITÉ / IMPRESSION ======================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .btn:hover,.card--link:hover{transform:none;}

  /* Carrousels de logos : grille statique plutôt qu'un défilement figé
     à mi-course (la règle générale ci-dessus raccourcit l'animation
     mais ne la supprime pas, ce qui laisserait la piste décalée). */
  .logo-carousel{-webkit-mask-image:none;mask-image:none;overflow:visible;}
  .logo-carousel__track{
    animation:none;transform:none;
    flex-wrap:wrap;width:100%;justify-content:center;
  }
  .logo-carousel__item--clone{display:none;}
}

@media print{
  .site-header,.nav-toggle,.site-nav,.btn,.curve,.hero__map{display:none!important;}
  body{color:#000;font-size:11pt;}
  .section{padding-block:12pt;}
  .section--dark,.hero,.page-hero{background:#fff!important;color:#000!important;}
  .section--dark h2,.section--dark h3,.hero h1,.page-hero h1{color:#000!important;}
  .card{border:1px solid #999;box-shadow:none;break-inside:avoid;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}