/* PAGES DE CONTENU — carte NFC, Martinique, restaurants, guides.

   Ces pages sont de vrais fichiers HTML, servis tels quels : pas de routeur,
   pas de base, pas de script. Elles reprennent à l'identique les couleurs,
   la police, l'en-tête, les boutons et le pied de page de l'accueil (les
   valeurs ci-dessous sont recopiées du <style> de index.html — si une
   couleur change là-bas, changez-la ici aussi).

   Pourquoi des fichiers à part plutôt que des vues de la page unique : un
   moteur de recherche lit d'abord le HTML reçu. Ici, ce qu'il reçoit est
   exactement ce qu'un visiteur lit — titre, texte, liens — sans dépendre
   d'un script. Et la page pèse quelques dizaines de ko au lieu d'un Mo. */

@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/polices/archivo.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme:light;
  --bleu-900:#04223A; --bleu-800:#0C416B; --bleu-700:#0F5285; --bleu-600:#1268A8;
  --bleu-100:#DEEAF5; --bleu-050:#F0F5FA;
  --encre:#0E1721; --encre-doux:#2F3F4D; --gris:#516272; --gris-clair:#5C6B79;
  --trait:#DBE3EA; --trait-fort:#B6C3CE;
  --papier:#F1F4F7; --surface:#FFFFFF;
  --sur-bleu:#FFFFFF; --sur-bleu-doux:#A3C3E0; --sur-bleu-trait:rgba(255,255,255,.18);
  --ambre-doux:#FDF3E3; --ambre-texte:#8A5200;
  --police:"Archivo","Helvetica Neue",Arial,sans-serif;
  --r-petit:6px; --r:8px; --r-grand:14px; --r-pilule:999px;
  --ombre-1:0 1px 2px rgba(4,34,58,.06), 0 1px 3px rgba(4,34,58,.05);
  --ombre-2:0 2px 4px rgba(4,34,58,.05), 0 12px 24px -12px rgba(4,34,58,.20);
  --ombre-sombre:0 6px 12px rgba(0,0,0,.22), 0 24px 44px -16px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--police);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.036em;line-height:1.04}
h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em}
h3{font-size:20px;letter-spacing:-.02em}
p,ul,ol,figure,blockquote{margin:0}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:.08em}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--bleu-600);outline-offset:2px;border-radius:4px}

.saut{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bleu-800);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:600}
.saut:focus{left:0}
.contenu{max-width:1140px;margin:0 auto;padding:0 28px;width:100%}
.etroit{max-width:780px}
.gris{color:var(--gris)}
.mention{font-size:13.5px;color:var(--gris-clair);line-height:1.55}
/* Dans le corps des pages, une mention porte souvent une information utile
   (résiliation, QR code) : on la garde lisible sur téléphone. */
main p.mention{font-size:15px;line-height:1.6}

/* Boutons et liens — identiques à l'accueil. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:13px 24px;border-radius:var(--r);font-size:15.5px;font-weight:600;text-decoration:none;
  text-align:center;border:1px solid transparent;letter-spacing:-.01em;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.btn-principal{background:var(--bleu-800);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.btn-contour{border-color:var(--trait-fort);color:var(--encre);background:var(--surface)}
.btn-petit{min-height:40px;padding:10px 17px;font-size:14.5px}
@media (hover:hover){
  .btn-principal:hover{background:var(--bleu-700);box-shadow:0 3px 8px rgba(0,0,0,.18)}
  .btn-contour:hover{border-color:var(--bleu-700);color:var(--bleu-800)}
}
.lien{color:var(--bleu-800);text-decoration:underline;font-weight:600}
/* UN LIEN PRIS DANS UN TEXTE DEVIENT UN BOUTON, posé juste sous le texte :
   plus facile à voir, et à toucher sur un téléphone. */
.suite-boutons{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.encadre .suite-boutons{margin-top:14px}
p.mention + .suite-boutons{margin-top:12px}
@media (hover:hover){.lien:hover{color:var(--bleu-600)}}

/* En-tête. Sur grand écran, les liens sont en ligne ; sur téléphone, ils se
   rangent dans un <details> : un menu qui s'ouvre sans une ligne de script. */
.entete{background:var(--surface);border-bottom:1px solid var(--trait);position:relative;z-index:20}
.entete .contenu{display:flex;align-items:center;gap:34px;min-height:74px}
/* Le logo : les fichiers de logo/ (le même dessin que sur l'accueil), à la
   même taille — symbole de 20 px, capitales de 15 px. */
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img,.pied-nom img{display:block;width:152px;height:22px}
.liens-entete{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:15.5px}
.liens-entete a{color:var(--gris);text-decoration:none;font-weight:500;transition:color .18s ease}
.liens-entete a[aria-current="page"]{color:var(--encre);font-weight:600}
@media (hover:hover){.liens-entete a:hover{color:var(--encre)}}
.liens-entete a.btn-principal{color:#fff}
.menu-court{display:none;margin-left:auto}
.menu-court summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:var(--r);
  border:1px solid var(--trait);display:grid;place-items:center;background:var(--surface)}
.menu-court summary::-webkit-details-marker{display:none}
.menu-court .traits{display:block;width:19px;height:13px;position:relative}
.menu-court .traits::before,.menu-court .traits::after,.menu-court .traits span{content:"";position:absolute;
  left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .18s ease}
.menu-court .traits::before{top:0}
.menu-court .traits span{top:50%;margin-top:-1px}
.menu-court .traits::after{bottom:0}
.menu-court[open] .traits::before{transform:translateY(5.5px) rotate(45deg)}
.menu-court[open] .traits span{opacity:0}
.menu-court[open] .traits::after{transform:translateY(-5.5px) rotate(-45deg)}
.menu-court nav{position:absolute;left:0;right:0;top:100%;z-index:55;display:flex;flex-direction:column;
  padding:4px 28px 22px;background:var(--surface);border-bottom:1px solid var(--trait);
  box-shadow:0 10px 22px -16px rgba(0,0,0,.35)}
.menu-court nav a{padding:15px 0;font-size:16.5px;color:var(--encre);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--trait)}
.menu-court nav a.btn-principal{margin-top:16px;align-self:flex-start;color:#fff;border-bottom:0;padding:13px 24px}
@media (max-width:1080px){
  .liens-entete{display:none}
  .menu-court{display:block}
}

/* Bandeau d'ouverture : le même bleu que l'accueil. */
.bandeau{background:var(--bleu-800);color:var(--sur-bleu);padding:56px 0 88px}
.bandeau h1{color:#fff;max-width:15em;margin-top:22px}
.bandeau .chapeau{font-size:19px;color:var(--sur-bleu-doux);max-width:36em;margin:24px 0 34px;line-height:1.6}
.bandeau .actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.bandeau .btn-principal{background:#fff;color:var(--bleu-800);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.bandeau .lien{color:#fff;text-decoration-color:var(--sur-bleu-trait)}
/* Sur le fond bleu, le bouton secondaire est en contour clair : le blanc
   plein reste réservé à l'action principale. */
.bandeau .actions .btn-contour{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
@media (hover:hover){.bandeau .actions .btn-contour:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}}
@media (hover:hover){
  .bandeau .btn-principal:hover{background:var(--bleu-050);color:var(--bleu-900)}
  .bandeau .lien:hover{color:var(--sur-bleu-doux)}
}
.bandeau .meta{margin-top:22px;font-size:14px;color:var(--sur-bleu-doux)}

/* Fil d'Ariane */
.fil ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--sur-bleu-doux)}
.fil li+li::before{content:"›";margin-right:6px;opacity:.7}
.fil a{color:var(--sur-bleu-doux);text-decoration:none}
.fil a:hover{color:#fff;text-decoration:underline}
.fil [aria-current]{color:#fff}

/* Corps de page */
.section{padding:88px 0}
.section + .section{padding-top:0}
.section-titre{margin-bottom:40px;display:flex;flex-direction:column;gap:16px}
.section-titre h2{max-width:18em}
.section-titre p{font-size:18px;color:var(--gris);max-width:38em}

.texte{max-width:70ch}
/* Blocs de texte et FAQ alignés à gauche comme le reste de la page, avec
   une ligne de lecture courte. */
.contenu.texte{max-width:1140px}
.contenu.texte > *{max-width:70ch}
.contenu.etroit{max-width:1140px}
.contenu.etroit > *{max-width:780px}
.texte > * + *{margin-top:16px}
.texte h2{margin-top:56px}
.texte h2:first-child{margin-top:0}
.texte h3{margin-top:34px}
.texte p,.texte li{font-size:17px;color:var(--encre-doux);line-height:1.72}
.texte ul,.texte ol{padding-left:22px;display:flex;flex-direction:column;gap:10px}
.texte li::marker{color:var(--bleu-600)}
.texte a:not(.btn){color:var(--bleu-800);text-decoration:underline;font-weight:500}
/* LE SOMMAIRE D'UN GUIDE. Il héritait du corps de texte : interligne de
   lecture (1,72) et liens soulignés, si bien que chaque entrée de deux lignes
   se lisait comme deux liens, et que le bloc paraissait plus lourd que
   l'article. C'est une liste de navigation : interligne serré, pas de
   soulignement au repos (il revient au survol et au clavier). */
aside .encadre ol.texte li{font-size:15.5px;line-height:1.45}
aside .encadre ol.texte > li + li{margin-top:4px}
aside .encadre ol.texte a:not(.btn){text-decoration:none;font-weight:500}
aside .encadre ol.texte a:not(.btn):hover,aside .encadre ol.texte a:not(.btn):focus-visible{text-decoration:underline;text-underline-offset:3px}
.texte strong{color:var(--encre);font-weight:600}
.texte blockquote{border-left:3px solid var(--bleu-600);padding:6px 0 6px 18px;font-size:17px;color:var(--encre)}

.colonnes{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:start}
.colonnes > aside{position:sticky;top:24px}

.blocs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.blocs.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.bloc{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-grand);padding:26px 26px 28px;
  display:flex;flex-direction:column;gap:10px}
.bloc h3{font-size:19px}
.bloc p{color:var(--gris);font-size:16px;line-height:1.65}
.bloc .lien{margin-top:auto;padding-top:8px;font-size:15.5px}
.bloc > .btn:last-child{margin-top:auto;align-self:flex-start}
.bloc .num{font-size:13px;font-weight:700;color:var(--bleu-700);letter-spacing:.04em}

.encadre{background:var(--bleu-050);border:1px solid var(--bleu-100);border-radius:var(--r-grand);padding:24px 26px}
.encadre h2,.encadre h3{font-size:19px;margin:0 0 8px}
.encadre p{font-size:16px;color:var(--encre-doux);line-height:1.68}
.encadre p + p{margin-top:10px}
.encadre.ambre{background:var(--ambre-doux);border-color:#F4DEB8}

.etapes{list-style:none;padding:0;margin:0;counter-reset:etape;display:flex;flex-direction:column;gap:20px}
.etapes li{counter-increment:etape;padding-left:46px;position:relative;font-size:17px;color:var(--encre-doux);line-height:1.68}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  background:var(--bleu-100);color:var(--bleu-800);display:grid;place-items:center;font-size:13.5px;font-weight:700}
.etapes b{color:var(--encre);font-weight:600;display:block}
.texte .etapes{padding-left:0;margin-top:22px}

.visuels{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.visuels figure{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-grand);overflow:hidden}
.visuels img{width:100%;aspect-ratio:1/1;object-fit:contain;background:linear-gradient(180deg,#E9EEF3,#F6F8FA)}
.visuels figcaption{padding:14px 18px;font-size:14.5px;color:var(--gris)}

.table-defile{overflow-x:auto;border:1px solid var(--trait);border-radius:var(--r-grand);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
caption{text-align:left;padding:16px 20px 0;font-weight:600;color:var(--encre)}
th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--trait);vertical-align:top;line-height:1.55}
thead th{font-size:13.5px;color:var(--gris);font-weight:600;letter-spacing:.01em}
tbody th{font-weight:600;color:var(--encre)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td{color:var(--encre-doux)}

.offres{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.offre{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-grand);padding:26px}
.offre h3{font-size:20px}
.offre .prix{font-size:30px;font-weight:700;letter-spacing:-.03em;margin:10px 0 2px}
.offre .prix small{font-size:15px;font-weight:500;color:var(--gris);letter-spacing:0}
.offre ul{margin-top:14px;padding-left:20px;display:flex;flex-direction:column;gap:7px;color:var(--encre-doux);font-size:15.5px}

.questions{display:flex;flex-direction:column;gap:12px}
.questions details{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-grand)}
.questions details[open]{border-color:var(--trait-fort)}
.questions summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;position:relative;
  font-size:17.5px;font-weight:600;letter-spacing:-.018em}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"";position:absolute;right:24px;top:27px;width:10px;height:10px;
  border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);transform:rotate(45deg);transition:transform .22s ease}
.questions details[open] summary::after{transform:rotate(-135deg);top:31px}
.questions .reponse{padding:0 24px 24px;color:var(--gris);font-size:16.5px;max-width:68ch;display:flex;flex-direction:column;gap:12px}
.questions .reponse a:not(.btn){color:var(--bleu-800);font-weight:500}

.liens-suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.liens-suite a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--r-grand);text-decoration:none;transition:border-color .18s ease}
.liens-suite a:hover{border-color:var(--bleu-700)}
.liens-suite b{font-size:16.5px;color:var(--encre);letter-spacing:-.015em}
.liens-suite span{font-size:14.5px;color:var(--gris);line-height:1.55}

/* Appel à l'action — le même bloc bleu nuit que « On passe vous montrer ? ». */
.rendez-vous{background:var(--bleu-900);color:var(--sur-bleu-doux);padding:96px 0}
.rendez-vous h2{color:#fff;max-width:15em}
.rendez-vous p{font-size:18px;color:var(--sur-bleu-doux);max-width:36em;margin:22px 0 36px}
.rendez-vous .btn-principal{background:#fff;color:var(--bleu-900)}
@media (hover:hover){.rendez-vous .btn-principal:hover{background:var(--bleu-050)}}
.rendez-vous .adresses{display:flex;gap:14px 48px;flex-wrap:wrap;margin-top:40px;padding-top:26px;
  border-top:1px solid var(--sur-bleu-trait);font-size:15.5px}
.rendez-vous .adresses a:not(.btn){color:#fff;text-decoration:underline;font-weight:600}
.rendez-vous .adresses .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);font-weight:600}
@media (hover:hover){.rendez-vous .adresses .btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}}
.rendez-vous .adresses span{display:block;color:var(--sur-bleu-doux);font-size:13.5px;margin-bottom:4px}

/* Pied de page */
.pied{background:var(--bleu-900);color:var(--sur-bleu-doux);padding:64px 0 40px;font-size:14.5px;
  border-top:1px solid var(--sur-bleu-trait)}
.pied .contenu{display:grid;grid-template-columns:1.2fr 1.8fr;gap:48px 64px}
.pied a{color:var(--sur-bleu-doux);text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied-nom{display:inline-flex;align-items:center}
.pied-marque p{margin-top:14px;max-width:38em;line-height:1.65}
.pied-colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.pied-colonnes h2{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.02em}
.pied-colonnes ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.pied-bas{grid-column:1 / -1;display:flex;gap:10px 28px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--sur-bleu-trait);padding-top:24px;font-size:13.5px}

@media (max-width:980px){
  .section{padding:68px 0}
  .bandeau{padding:40px 0 64px}
  .colonnes{grid-template-columns:minmax(0,1fr);gap:40px}
  .colonnes > aside{position:static}
  .blocs,.liens-suite{grid-template-columns:1fr 1fr}
  .rendez-vous{padding:72px 0}
}
@media (max-width:720px){
  .pied .contenu{grid-template-columns:1fr;gap:36px}
  .pied-colonnes{grid-template-columns:1fr 1fr}
  .offres,.visuels,.blocs,.blocs.deux,.liens-suite{grid-template-columns:1fr}
}
@media (max-width:560px){
  .contenu{padding:0 20px}
  .menu-court nav{padding-left:20px;padding-right:20px}
  .section{padding:56px 0}
  .bandeau .chapeau{font-size:17.5px}
  .texte p,.texte li,.etapes li{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}