/*
  Système typographique consolidé ANTILLES.FR.
  Une seule famille visible : Montserrat.
  Ce fichier est chargé en dernier sur toutes les pages propriétaires.
*/

@font-face {
  font-family: "Montserrat";
  src: url("assets-site/fonts/montserrat-regular.ttf?v=20260924-montserrat-verifie") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets-site/fonts/montserrat-semibold.ttf?v=20260924-montserrat-verifie") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets-site/fonts/montserrat-bold.ttf?v=20260924-montserrat-verifie") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-display: "Montserrat", sans-serif;
  --font-editorial: "Montserrat", sans-serif;
  --serif: "Montserrat", sans-serif;
  --sans: "Montserrat", sans-serif;
  --type-h1: clamp(44px, 3.55vw, 52px);
  --type-h2: clamp(32px, 2.55vw, 38px);
  --type-h3: clamp(24px, 1.85vw, 28px);
  --type-card-title: clamp(18px, 1.32vw, 20px);
  --type-intro: clamp(17px, 1.26vw, 19px);
  --type-body: clamp(15px, 1.04vw, 16px);
  --type-card-body: clamp(14px, .98vw, 15px);
  --type-small: clamp(13px, .94vw, 14px);
  --type-label: clamp(11px, .8vw, 12px);
  --editorial-max: 1200px;
  --editorial-shell: min(var(--editorial-max), calc(100% - clamp(44px, 12vw, 192px)));
  --editorial-edge: max(clamp(22px, 6vw, 96px), calc((100vw - var(--editorial-max)) / 2));
  --reading-width: 67ch;
  --section-space: clamp(56px, 6vw, 84px);
  --section-padding: clamp(34px, 4vw, 54px);
  --content-gap: clamp(24px, 3vw, 42px);
  --text-image-gap: clamp(34px, 4.8vw, 64px);
  --wide: var(--editorial-max);
  --max: 1080px;
}

html,
body,
body *,
body *::before,
body *::after {
  font-family: var(--font-editorial) !important;
}

body,
body * {
  font-weight: 400 !important;
}

body {
  font-size: var(--type-body);
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ul,
ol,
dl {
  margin-block-start: 0;
}

h1,
h2,
h3,
strong,
b {
  font-weight: 700 !important;
}

h4,
h5,
h6 {
  font-weight: 600 !important;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h1 {
  max-width: 20ch;
  font-size: var(--type-h1) !important;
  line-height: 1.07 !important;
  letter-spacing: -.03em;
}

h2 {
  max-width: 28ch;
  font-size: var(--type-h2) !important;
  line-height: 1.12 !important;
  letter-spacing: -.024em;
}

h3 {
  max-width: 32ch;
  font-size: var(--type-h3) !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em;
}

h4,
h5,
h6,
.card-title,
.tool-card h3,
.carnet-feature h3,
.orientation-card h3,
.about-tool h3,
.about-audience h3,
.funnel-method .fusion-pillars h3,
[class*="-card"] h3,
[class*="-card"] h4 {
  font-size: var(--type-card-title) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -.008em !important;
}

.site-footer h3,
.authority-footer h3,
.footer-grid h3,
.footer-grid h4 {
  font-size: clamp(15px, 1.08vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

p,
li,
dd,
dt,
blockquote,
figcaption {
  font-size: var(--type-body);
  line-height: 1.62;
  text-wrap: pretty;
}

p,
blockquote {
  max-width: var(--reading-width);
}

em,
i,
blockquote em,
.editorial-quote {
  font-style: italic;
  font-weight: 400 !important;
}

small,
.microcopy,
.form-status,
.share-status,
.answer-description,
.helper,
.hint,
.muted {
  font-size: var(--type-small) !important;
  line-height: 1.5 !important;
}

.eyebrow,
.section-label,
.band-label,
.step-number,
.panel-level-label,
.guide-title,
.marker-label,
.badge,
.score-label,
.fact-label,
.result-score-label,
.about-audience > span,
.about-tool span,
.orientation-card > span,
.about-collaboration-principle > span,
.funnel-method .fusion-pillars span,
.funnel-result-proof figcaption span,
.funnel-carnet-peek small {
  font-size: var(--type-label) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .075em !important;
}

nav a,
.main-nav a,
.authority-header nav a,
.authority-footer nav a {
  font-size: clamp(15px, 1.04vw, 16px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap;
}

button,
.button,
.cta,
.header-cta,
.nav-primary,
.share-button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-size: clamp(15px, 1.05vw, 16px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.button-primary,
.header-cta,
.nav-primary,
.contact-form button[type="submit"],
#next-button {
  font-weight: 700 !important;
}

.button,
.cta,
.header-cta,
.share-button,
.contact-form button[type="submit"],
#next-button,
#prev-button {
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 7px;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.button:hover,
.cta:hover,
.header-cta:hover,
.share-button:hover,
.contact-form button[type="submit"]:hover,
#next-button:hover,
#prev-button:hover {
  transform: translateY(-1px);
}

.button:focus-visible,
.cta:focus-visible,
.header-cta:focus-visible,
.share-button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #d5a653;
  outline-offset: 3px;
}

.button-ghost,
.button-light-secondary,
.text-button,
.nav-link,
.carnet-text-link,
.text-link,
.quit,
#prev-button {
  font-size: clamp(14px, .98vw, 15px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

label:not(.consent):not(.form-honeypot) {
  font-size: clamp(13px, .98vw, 15px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

input,
select,
textarea,
option {
  font-size: clamp(15px, 1.04vw, 16px) !important;
  line-height: 1.5 !important;
}

input::placeholder,
textarea::placeholder {
  font-size: clamp(13px, .96vw, 15px) !important;
}

.consent,
.consent *,
.form-status,
.validation-message,
[role="status"],
[role="alert"] {
  font-size: clamp(12px, .88vw, 13px) !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
}

/* Grille éditoriale commune. Les visuels s'adaptent au texte, pas l'inverse. */
.site-header,
.funnel-hero-inner,
.funnel-method,
.funnel-voyage,
.funnel-questionnaire,
.funnel-carnet,
.funnel-cap,
.authority-header,
.authority-hero,
.authority-content,
.hub-grid,
.next-section,
.authority-footer,
.about-hero,
.about-section,
.about-final,
.product-hero,
.product-section,
.product-decision-band,
.contact-layout {
  width: var(--editorial-shell) !important;
  max-width: var(--editorial-max) !important;
  margin-inline: auto !important;
}

.site-footer {
  padding-inline: var(--editorial-edge) !important;
}

.site-footer .footer-brand,
.authority-footer .footer-brand {
  display: block;
  width: min(190px, 100%);
  height: auto;
  margin: 0 0 13px;
}

.funnel-method,
.funnel-voyage,
.funnel-questionnaire,
.funnel-carnet,
.funnel-cap,
.about-section,
.product-section,
.product-decision-band,
.authority-content,
.next-section {
  margin-top: var(--section-space);
}

.funnel-method,
.funnel-questionnaire,
.funnel-carnet,
.funnel-cap,
.about-section,
.product-section,
.product-decision-band,
.next-section {
  padding-top: var(--section-padding) !important;
  padding-bottom: var(--section-padding) !important;
}

.funnel-hero-inner {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr) !important;
  gap: var(--text-image-gap) !important;
}

.funnel-hero h1 {
  max-width: 17ch !important;
}

.funnel-hero .hero-copy,
.authority-hero-copy > p:not(.eyebrow),
.product-hero-copy > p:not(.eyebrow),
.about-hero-copy > p:not(.eyebrow),
.contact-intro > p:not(.eyebrow) {
  max-width: 58ch;
  font-size: var(--type-intro) !important;
  line-height: 1.58 !important;
}

.funnel-result-proof {
  width: min(100%, 470px);
  justify-self: end;
}

.funnel-method .fusion-intro h2 {
  max-width: 25ch !important;
}

.funnel-method .fusion-intro > p {
  max-width: 64ch !important;
}

.funnel-method .fusion-pillars {
  gap: clamp(18px, 2.2vw, 28px) !important;
}

.funnel-method .fusion-pillars article {
  min-height: 0 !important;
}

.funnel-method .fusion-pillars h3 {
  min-height: 0 !important;
  font-size: var(--type-card-title) !important;
}

.funnel-method .fusion-pillars p,
.funnel-checks li,
.funnel-carnet-list li {
  font-size: var(--type-card-body) !important;
}

.funnel-method-footer p {
  max-width: 54ch !important;
  font-size: var(--type-intro) !important;
  line-height: 1.48 !important;
}

.funnel-voyage {
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
}

.funnel-voyage-media {
  min-height: clamp(455px, 43vw, 570px) !important;
}

.funnel-voyage-heading {
  width: min(45%, 520px) !important;
}

.funnel-voyage-window {
  width: min(45%, 520px) !important;
}

.funnel-questionnaire,
.funnel-carnet {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr) !important;
  gap: var(--text-image-gap) !important;
  align-items: center;
}

.funnel-questionnaire-copy,
.funnel-carnet-copy {
  max-width: 650px;
}

.funnel-questionnaire-visual {
  min-height: 270px !important;
}

.funnel-questionnaire-visual img {
  width: min(100%, 460px) !important;
  max-height: 270px !important;
}

.funnel-carnet-pages {
  min-height: clamp(320px, 30vw, 360px) !important;
}

.funnel-cap {
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr) !important;
  gap: var(--text-image-gap) !important;
  align-items: center;
}

.funnel-cap-photo {
  min-height: 240px !important;
  max-height: 290px !important;
}

.authority-hero,
.about-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr) !important;
  gap: var(--text-image-gap) !important;
}

.product-hero {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr) !important;
  gap: var(--text-image-gap) !important;
}

.authority-hero-copy,
.about-hero-copy,
.contact-intro {
  max-width: 690px;
}

.product-hero-copy {
  max-width: 780px;
}

.product-hero,
.about-hero {
  min-height: 0 !important;
  padding-inline: clamp(22px, 3vw, 40px) !important;
}

.product-hero-visual,
.about-hero-visual {
  min-height: clamp(300px, 31vw, 410px) !important;
}

.product-section-heading,
.about-section-heading {
  max-width: 760px;
}

.product-section-heading > p,
.about-section-heading > p {
  max-width: 64ch;
  font-size: var(--type-intro) !important;
  line-height: 1.58 !important;
}

/* Les titres éditoriaux longs sont calibrés selon leur contenu réel. */
.authority-hero h1,
.about-hero h1,
.contact-intro h1 {
  max-width: 24ch;
  font-size: clamp(42px, 3.25vw, 48px) !important;
  line-height: 1.08 !important;
}

.product-hero h1 {
  max-width: 30ch;
  font-size: clamp(42px, 3.25vw, 48px) !important;
  line-height: 1.08 !important;
}

.product-decision-band {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr) !important;
  gap: var(--content-gap) !important;
  margin-inline: 0 !important;
}

.decision-links {
  justify-content: flex-start !important;
}

.contact-layout {
  grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr) !important;
  gap: var(--text-image-gap) !important;
}

/* Questionnaire */
.quiz {
  width: min(1160px, calc(100% - clamp(44px, 10vw, 144px))) !important;
  min-height: min(740px, calc(100svh - 32px)) !important;
}

#question-title,
.question-zone > h1 {
  max-width: 22ch;
  font-size: clamp(30px, 2.55vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}

#question-help,
.question-help {
  max-width: 62ch;
  font-size: clamp(14px, 1.02vw, 15px) !important;
  line-height: 1.52 !important;
}

.progress,
.progress span,
#step-counter {
  font-size: clamp(12px, .9vw, 13px) !important;
  font-weight: 600 !important;
}

.answer,
.answer-label {
  font-size: clamp(16px, 1.18vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.answer small,
.answer p,
.answer-description {
  font-size: clamp(13px, .96vw, 14px) !important;
  line-height: 1.48 !important;
}

.nav-actions button,
.quit {
  font-size: clamp(14px, 1vw, 15px) !important;
  font-weight: 600 !important;
}

/* Résultat */
#destination-title,
.result-hero h1 {
  max-width: 17ch;
  font-size: var(--type-h1) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

.result h2,
.result h3,
.result p,
.result li {
  text-wrap: pretty;
}

.result-main,
.editorial-result {
  gap: var(--content-gap) !important;
}

/* Voyage interactif : couches HTML contrôlées uniquement. */
.maplibregl-map,
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-scale,
.maplibregl-cooperative-gesture-screen {
  font-family: var(--font-editorial) !important;
}

.intro-panel h1 {
  max-width: 18ch;
  max-width: 100% !important;
  font-size: clamp(34px, 3.15vw, 46px) !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}

.island-panel h2,
#panelTitle {
  font-size: var(--type-h2) !important;
}

.island-panel h3 {
  font-size: var(--type-h3) !important;
}

/* Bandeau cookies : volontairement secondaire. */
.antilles-consent-panel h2 {
  font-size: clamp(16px, 1.24vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.antilles-consent-panel .antilles-consent-kicker {
  font-size: 11px !important;
  font-weight: 600 !important;
}

.antilles-consent-panel .antilles-consent-copy > p:not(.antilles-consent-kicker),
.antilles-consent-panel a {
  font-size: clamp(12px, .86vw, 13px) !important;
  line-height: 1.46 !important;
}

.antilles-consent-actions button,
.antilles-consent-manage {
  font-size: clamp(12px, .9vw, 13px) !important;
  font-weight: 600 !important;
}

@media (max-width: 1024px) {
  :root {
    --type-h1: clamp(39px, 4.7vw, 46px);
    --type-h2: clamp(30px, 3.65vw, 35px);
    --type-h3: clamp(23px, 2.8vw, 27px);
    --section-space: clamp(48px, 6vw, 66px);
    --section-padding: clamp(30px, 4.2vw, 44px);
    --text-image-gap: clamp(28px, 4vw, 44px);
  }

  .funnel-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr) !important;
  }

  .authority-hero,
  .product-hero,
  .about-hero {
    grid-template-columns: 1fr !important;
  }

  .authority-hero h1,
  .product-hero h1,
  .about-hero h1,
  .contact-intro h1 {
    max-width: 25ch;
    font-size: clamp(37px, 4.65vw, 43px) !important;
  }

  .authority-hero img,
  .product-hero-visual,
  .about-hero-proof,
  .about-hero-visual {
    width: min(620px, 100%);
  }

  .funnel-questionnaire,
  .funnel-carnet,
  .funnel-cap,
  .contact-layout,
  .product-decision-band {
    grid-template-columns: 1fr !important;
  }

  .funnel-questionnaire-copy,
  .funnel-carnet-copy,
  .funnel-cap-intro,
  .contact-intro {
    max-width: 720px;
  }

  .funnel-questionnaire-visual,
  .funnel-carnet-pages,
  .funnel-cap-photo {
    width: min(620px, 100%);
    margin-inline: auto;
  }

  .contact-form-shell {
    width: 100%;
  }

  .decision-links {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  :root {
    --editorial-shell: calc(100% - 44px);
    --editorial-edge: 22px;
    --type-h1: clamp(33px, 8.9vw, 39px);
    --type-h2: clamp(27px, 7.25vw, 32px);
    --type-h3: clamp(22px, 5.9vw, 26px);
    --type-card-title: clamp(18px, 4.9vw, 20px);
    --type-body: clamp(15px, 4.15vw, 16px);
    --type-intro: clamp(16px, 4.35vw, 18px);
    --section-space: 44px;
    --section-padding: 28px;
    --content-gap: 22px;
    --text-image-gap: 28px;
  }

  body {
    line-height: 1.58;
  }

  h1 {
    max-width: 18ch;
    line-height: 1.08 !important;
  }

  h2 {
    max-width: 24ch;
    line-height: 1.16 !important;
  }

  .site-header,
  .authority-header {
    width: calc(100% - 32px) !important;
  }

  .funnel-hero-inner,
  .authority-hero,
  .product-hero,
  .about-hero {
    grid-template-columns: 1fr !important;
  }

  .authority-hero h1,
  .product-hero h1,
  .about-hero h1,
  .contact-intro h1 {
    max-width: 24ch;
    font-size: clamp(30px, 8vw, 35px) !important;
  }

  .funnel-result-proof,
  .product-hero-visual,
  .about-hero-visual {
    width: min(100%, 430px);
    justify-self: center;
  }

  .funnel-voyage-media {
    min-height: 540px !important;
  }

  .funnel-voyage-heading {
    width: 100% !important;
  }

  .funnel-voyage-window {
    width: auto !important;
  }

  .funnel-method-footer {
    align-items: start;
  }

  .funnel-carnet-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .funnel-carnet-pages {
    min-height: 300px !important;
  }

  .product-hero-visual,
  .about-hero-visual {
    min-height: 290px !important;
  }

  .quiz {
    width: calc(100% - 24px) !important;
    min-height: calc(100svh - 24px) !important;
  }

  #question-title,
  .question-zone > h1 {
    max-width: 20ch;
    font-size: clamp(25px, 7.4vw, 29px) !important;
    line-height: 1.2 !important;
  }

  .answer,
  .answer-label {
    font-size: clamp(15px, 4.2vw, 17px) !important;
  }

  .site-header .header-cta {
    width: 145px;
    max-width: 145px;
    padding-inline: 7px;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  :root {
    --editorial-shell: calc(100% - 40px);
    --editorial-edge: 20px;
  }

  .funnel-carnet-list {
    grid-template-columns: 1fr !important;
  }

  .button,
  .cta,
  .header-cta,
  .share-button {
    min-height: 43px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .cta,
  .header-cta,
  .share-button,
  button,
  a {
    transition-duration: .01ms !important;
  }
}