/* ==========================================================================
   IZI Málaga — feuille de style principale
   Auteur : direction artistique + intégration
   Aucune dépendance externe. Aucune requête tierce. Aucun cookie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées (RGPD : aucun appel à un CDN tiers)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque, relevées sur le logo fourni par le client */
  --encre: #12293f;
  --encre-fonce: #0b1e30;
  --encre-clair: #1d3c58;
  --or: #9e782d;
  --or-clair: #c08b2e;
  --or-pale: #e8d9b4;
  --chaux: #fbf7f0;
  --chaux-ombre: #f2ece1;
  --craie: #ffffff;
  --gris: #63727f;
  --gris-clair: #d9d2c6;

  --texte: var(--encre);
  --texte-doux: #4a5c6b;
  --fond: var(--chaux);

  /* Typographie */
  --titre: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --corps: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-h1: clamp(2.5rem, 1.55rem + 3.9vw, 4.5rem);
  --t-h2: clamp(1.95rem, 1.45rem + 2.1vw, 3rem);
  --t-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.6rem);
  --t-h4: clamp(1.08rem, 1.02rem + 0.28vw, 1.24rem);
  --t-corps: clamp(1rem, 0.965rem + 0.15vw, 1.09rem);
  --t-grand: clamp(1.1rem, 1.02rem + 0.36vw, 1.32rem);
  --t-petit: 0.875rem;
  --t-mini: 0.75rem;

  /* Rythme */
  --gouttiere: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --section-y: clamp(3.75rem, 2.4rem + 5.4vw, 7.5rem);
  --largeur: 1180px;
  --largeur-texte: 68ch;

  --rayon: 4px;
  --rayon-carte: 10px;
  --trait: 1px solid rgba(18, 41, 63, 0.13);
  --trait-fort: 1px solid rgba(18, 41, 63, 0.28);
  --ombre-carte: 0 1px 2px rgba(11, 30, 48, 0.05), 0 12px 34px -20px rgba(11, 30, 48, 0.4);
  --ombre-flottante: 0 10px 40px -12px rgba(11, 30, 48, 0.35);

  --transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3. Réinitialisation et bases
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: var(--t-corps);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.est-verrouille {
  overflow: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  color: var(--encre);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: -0.028em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-color: rgba(158, 120, 45, 0.55);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover { color: var(--or); text-decoration-color: var(--or); }

img, svg, picture, video {
  max-width: 100%;
  display: block;
  height: auto;
}

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 700; }

hr {
  border: 0;
  border-top: var(--trait);
  margin: 2.5rem 0;
}

blockquote { margin: 0; }

::selection {
  background: var(--or-pale);
  color: var(--encre);
}

:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement pour la navigation au clavier */
.saut-contenu {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--encre);
  color: var(--chaux);
  padding: 0.85rem 1.4rem;
  border-radius: var(--rayon);
  font-size: var(--t-petit);
  font-weight: 700;
  text-decoration: none;
  transition: top 160ms ease;
}
.saut-contenu:focus { top: 1rem; color: var(--chaux); }

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Structure
   -------------------------------------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.enveloppe--etroite { max-width: 860px; }

.bande {
  padding-block: var(--section-y);
  position: relative;
}

.bande--serree { padding-block: clamp(2.75rem, 1.9rem + 3.4vw, 5rem); }

.bande--craie { background: var(--craie); }
.bande--ombre { background: var(--chaux-ombre); }

.bande--encre {
  background: var(--encre);
  color: rgba(251, 247, 240, 0.82);
}
.bande--encre h1,
.bande--encre h2,
.bande--encre h3,
.bande--encre h4 { color: var(--chaux); }
.bande--encre a { color: var(--or-pale); }
.bande--encre a:hover { color: var(--craie); }

/* Filet doré : séparateur discret entre deux bandes claires */
.filet {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(158, 120, 45, 0.35) 30%, rgba(158, 120, 45, 0.35) 70%, transparent);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Éléments de titraille
   -------------------------------------------------------------------------- */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--corps);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 1.1rem;
}

.surtitre::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.bande--encre .surtitre { color: var(--or-pale); }

.entete-section {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);
}

.entete-section--centre {
  margin-inline: auto;
  text-align: center;
}
.entete-section--centre .surtitre::before { display: none; }

.chapo {
  font-size: var(--t-grand);
  line-height: 1.62;
  color: var(--texte-doux);
}

.bande--encre .chapo { color: rgba(251, 247, 240, 0.78); }

.souligne-or {
  background-image: linear-gradient(transparent 62%, rgba(192, 139, 46, 0.28) 62%);
  padding-inline: 0.06em;
}

.italique-serif {
  font-family: var(--titre);
  font-style: italic;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */
.bouton {
  --bouton-fond: var(--encre);
  --bouton-texte: var(--chaux);
  --bouton-bord: var(--encre);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  min-height: 52px;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  border: 1px solid var(--bouton-bord);
  border-radius: 100px;
  font-family: var(--corps);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: transform var(--transition), background-color var(--transition),
              color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.bouton:hover {
  color: var(--bouton-texte);
  transform: translateY(-2px);
  box-shadow: var(--ombre-flottante);
}

.bouton:active { transform: translateY(0); }

.bouton svg { flex: none; }

.bouton--whatsapp {
  --bouton-fond: #1f9d55;
  --bouton-bord: #1f9d55;
  --bouton-texte: #ffffff;
}
.bouton--whatsapp:hover { --bouton-fond: #178047; --bouton-bord: #178047; }

.bouton--or {
  --bouton-fond: var(--or-clair);
  --bouton-bord: var(--or-clair);
  --bouton-texte: #ffffff;
}
.bouton--or:hover { --bouton-fond: var(--or); --bouton-bord: var(--or); }

.bouton--contour {
  --bouton-fond: transparent;
  --bouton-texte: var(--encre);
  --bouton-bord: rgba(18, 41, 63, 0.3);
}
.bouton--contour:hover {
  --bouton-fond: var(--encre);
  --bouton-texte: var(--chaux);
  --bouton-bord: var(--encre);
}

.bande--encre .bouton--contour {
  --bouton-texte: var(--chaux);
  --bouton-bord: rgba(251, 247, 240, 0.4);
}
.bande--encre .bouton--contour:hover {
  --bouton-fond: var(--chaux);
  --bouton-texte: var(--encre);
  --bouton-bord: var(--chaux);
}

.bouton--large { width: 100%; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--encre);
  border-bottom: 1px solid rgba(158, 120, 45, 0.45);
  padding-bottom: 2px;
}
.lien-fleche svg { transition: transform var(--transition); }
.lien-fleche:hover { color: var(--or); border-bottom-color: var(--or); }
.lien-fleche:hover svg { transform: translateX(4px); }
.bande--encre .lien-fleche { color: var(--chaux); }

/* --------------------------------------------------------------------------
   7. En-tête et navigation
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 240, 0.9);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}

.entete.est-collee {
  border-bottom-color: rgba(18, 41, 63, 0.12);
  background: rgba(251, 247, 240, 0.96);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding-block: 0.75rem;
}

.entete__logo {
  display: block;
  flex: none;
  text-decoration: none;
  line-height: 0;
}

.entete__logo img {
  width: clamp(126px, 11vw, 158px);
}

.nav { display: none; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.1vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__liste li { margin: 0; }

.nav__lien {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--encre);
  white-space: nowrap;
}

.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--or);
  transition: right var(--transition);
}

.nav__lien:hover { color: var(--or); }
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { right: 0; }
.nav__lien[aria-current="page"] { font-weight: 700; }

.entete__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.entete__actions .bouton {
  padding: 0.7rem 1.25rem;
  min-height: 44px;
  font-size: 0.88rem;
}

.entete__cta { display: none; }

.bascule-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(18, 41, 63, 0.22);
  border-radius: 50%;
  cursor: pointer;
  color: var(--encre);
}

.bascule-menu__barres {
  position: relative;
  display: block;
  width: 18px;
  height: 10px;
}

.bascule-menu__barres::before,
.bascule-menu__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition), top var(--transition);
}
.bascule-menu__barres::before { top: 0; }
.bascule-menu__barres::after { top: 8.5px; }

.bascule-menu[aria-expanded="true"] .bascule-menu__barres::before {
  top: 4px;
  transform: rotate(45deg);
}
.bascule-menu[aria-expanded="true"] .bascule-menu__barres::after {
  top: 4px;
  transform: rotate(-45deg);
}

/* Tiroir mobile */
.tiroir {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--chaux);
  padding: 6.5rem var(--gouttiere) 2.5rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.tiroir.est-ouvert {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tiroir__liste {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  border-top: var(--trait);
}

.tiroir__liste li { margin: 0; }

.tiroir__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: var(--trait);
  font-family: var(--titre);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.tiroir__lien span { color: var(--or); font-size: 0.9rem; }
.tiroir__pied { display: grid; gap: 0.75rem; }

.tiroir__note {
  margin-top: 1.75rem;
  font-size: var(--t-petit);
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   8. Héros
   -------------------------------------------------------------------------- */
.heros {
  position: relative;
  padding-block: clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}

.heros::before {
  /* Halo solaire, repris du symbole du logo */
  content: "";
  position: absolute;
  top: -18vw;
  right: -14vw;
  width: 52vw;
  height: 52vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 139, 46, 0.16) 0%, rgba(192, 139, 46, 0.05) 45%, transparent 68%);
  pointer-events: none;
}

.heros__grille {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  align-items: center;
}

.heros__titre { margin-bottom: 1rem; }

.heros__accroche {
  font-size: var(--t-grand);
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 34rem;
  margin-bottom: 1.9rem;
}

.heros__signature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--texte-doux);
}

.heros__signature::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--or);
  flex: none;
}

.heros__media {
  position: relative;
  isolation: isolate;
}

.heros__photo {
  position: relative;
  border-radius: 200px 200px var(--rayon-carte) var(--rayon-carte);
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(11, 30, 48, 0.55);
}

.heros__photo img { width: 100%; }

.heros__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(251, 247, 240, 0.35);
  pointer-events: none;
}

.heros__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: var(--trait);
  list-style: none;
  padding-left: 0;
}

.heros__preuves li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--texte-doux);
}

.heros__preuves svg { color: var(--or); flex: none; }

/* Le tampon : signature graphique de la marque */
.tampon {
  position: absolute;
  z-index: 2;
  width: clamp(108px, 13vw, 152px);
  height: clamp(108px, 13vw, 152px);
  right: -8px;
  bottom: -18px;
  color: var(--or);
  filter: drop-shadow(0 6px 16px rgba(11, 30, 48, 0.28));
  animation: tampon-rotation 44s linear infinite;
}

.tampon__disque { fill: var(--chaux); stroke: currentColor; stroke-width: 1.4; }
.tampon__texte { fill: currentColor; font-family: var(--corps); font-size: 10.4px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; }
.tampon__soleil { fill: currentColor; }

@keyframes tampon-rotation {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   9. Grilles et cartes
   -------------------------------------------------------------------------- */
.grille {
  display: grid;
  gap: clamp(1.1rem, 0.7rem + 1.5vw, 1.85rem);
}

.grille--2 { grid-template-columns: 1fr; }
.grille--3 { grid-template-columns: 1fr; }
.grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--craie);
  border: var(--trait);
  border-radius: var(--rayon-carte);
  padding: clamp(1.5rem, 1.15rem + 1.1vw, 2.15rem);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.carte--survol:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte);
  border-color: rgba(158, 120, 45, 0.45);
}

.carte__titre { margin-bottom: 0.5rem; }

.carte__texte {
  color: var(--texte-doux);
  font-size: 0.98rem;
  margin-bottom: 1.25rem;
}

.carte__pied { margin-top: auto; padding-top: 0.5rem; }

.bande--encre .carte {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(251, 247, 240, 0.16);
}
.bande--encre .carte__texte { color: rgba(251, 247, 240, 0.72); }

/* Pictogramme circulaire */
.pictogramme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background: rgba(192, 139, 46, 0.12);
  color: var(--or);
  flex: none;
}

.bande--encre .pictogramme {
  background: rgba(232, 217, 180, 0.14);
  color: var(--or-pale);
}

/* --------------------------------------------------------------------------
   10. Le parcours en étapes
   -------------------------------------------------------------------------- */
.parcours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: etape;
}

.etape {
  position: relative;
  margin: 0;
  padding: 0 0 2.4rem 3.5rem;
  counter-increment: etape;
}

.etape:last-child { padding-bottom: 0; }

.etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chaux);
  border: 1px solid var(--or);
  color: var(--or);
  font-family: var(--corps);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.etape::after {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 44px;
  bottom: 0.9rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(158, 120, 45, 0.5), rgba(158, 120, 45, 0.12));
}

.etape:last-child::after { display: none; }

.etape__titre {
  font-size: clamp(1.08rem, 1.02rem + 0.28vw, 1.22rem);
  margin-bottom: 0.35rem;
}

.etape__texte {
  color: var(--texte-doux);
  font-size: 0.98rem;
  margin: 0;
}

.bande--craie .etape::before { background: var(--craie); }
.bande--ombre .etape::before { background: var(--chaux-ombre); }

/* --------------------------------------------------------------------------
   11. Les packs
   -------------------------------------------------------------------------- */
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--craie);
  border: var(--trait);
  border-radius: var(--rayon-carte);
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.pack::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--or-clair);
  opacity: 0.85;
}

.pack:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte);
  border-color: rgba(158, 120, 45, 0.4);
}

.pack__etiquette {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
  background: rgba(18, 41, 63, 0.06);
  color: var(--encre);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pack__titre { margin-bottom: 0.4rem; }

.pack__pour {
  font-family: var(--titre);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--texte-doux);
  margin-bottom: 1.35rem;
}

.pack__liste {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-top: var(--trait);
}

.pack__liste li {
  position: relative;
  margin: 0;
  padding: 0.72rem 0 0.72rem 1.75rem;
  border-bottom: var(--trait);
  font-size: 0.95rem;
  line-height: 1.55;
}

.pack__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.22rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--or);
}

.pack__citation {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  background: rgba(192, 139, 46, 0.07);
  border-left: 2px solid var(--or-clair);
  border-radius: 0;
  font-family: var(--titre);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--encre);
}

.pack__pied {
  margin-top: auto;
  padding-top: 0.35rem;
}

.pack__mention {
  margin: 0.85rem 0 0;
  font-size: var(--t-mini);
  line-height: 1.55;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   12. Services réservés aux clients
   -------------------------------------------------------------------------- */
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.15rem + 1.1vw, 2.15rem);
  border: 1px solid rgba(251, 247, 240, 0.18);
  border-radius: var(--rayon-carte);
  background: rgba(255, 255, 255, 0.04);
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.service:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(232, 217, 180, 0.4);
  transform: translateY(-4px);
}

.service__mention {
  margin: auto 0 0;
  padding-top: 1.1rem;
  font-size: var(--t-mini);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--or-pale);
}

.encart-reserve {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(232, 217, 180, 0.42);
  border-radius: 100px;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-pale);
}

/* --------------------------------------------------------------------------
   13. Duo Florine & Cristhian
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.portrait {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.portrait__photo {
  border-radius: var(--rayon-carte);
  overflow: hidden;
  background: var(--chaux-ombre);
}

.portrait__nom {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}

.portrait__role {
  font-family: var(--corps);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--or);
}

.portrait__texte { color: var(--texte-doux); font-size: 0.99rem; }

.portrait__competences {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.portrait__competences li {
  margin: 0;
  padding: 0.32rem 0.75rem;
  border: var(--trait);
  border-radius: 100px;
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   14. Citation en exergue
   -------------------------------------------------------------------------- */
.exergue {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.exergue__texte {
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.35rem, 1.05rem + 1.35vw, 2.1rem);
  line-height: 1.42;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}

.exergue__auteur {
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0;
}

.bande--encre .exergue__auteur { color: var(--or-pale); }

/* --------------------------------------------------------------------------
   15. Bloc image + texte
   -------------------------------------------------------------------------- */
.mixte {
  display: grid;
  gap: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  align-items: center;
}

.mixte__media {
  border-radius: var(--rayon-carte);
  overflow: hidden;
  background: var(--chaux-ombre);
}

.mixte__media img { width: 100%; }

.liste-cochee {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.liste-cochee li {
  position: relative;
  margin: 0;
  padding-left: 2rem;
  font-size: 0.99rem;
  line-height: 1.6;
}

.liste-cochee li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(192, 139, 46, 0.16);
}

.liste-cochee li::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 0.62rem;
  width: 7px;
  height: 4px;
  border-left: 1.6px solid var(--or);
  border-bottom: 1.6px solid var(--or);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   16. Questions fréquentes
   -------------------------------------------------------------------------- */
.faq {
  max-width: 52rem;
  border-top: var(--trait);
}

.faq__item {
  border-bottom: var(--trait);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--titre);
  font-size: clamp(1.05rem, 0.99rem + 0.28vw, 1.22rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  transition: color var(--transition);
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--or); }

.faq__signe {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.28rem;
}

.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--or);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}
.faq__signe::before { width: 13px; height: 1.5px; }
.faq__signe::after { width: 1.5px; height: 13px; }

.faq__item[open] .faq__signe::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.faq__reponse {
  padding: 0 0 1.5rem;
  max-width: 46rem;
  color: var(--texte-doux);
  font-size: 0.99rem;
}

.faq__reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Appel à l'action final
   -------------------------------------------------------------------------- */
.appel {
  position: relative;
  overflow: hidden;
  background: var(--encre-fonce);
  color: rgba(251, 247, 240, 0.82);
}

.appel__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.appel__fond picture {
  display: block;
  width: 100%;
  height: 100%;
}

.appel__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.appel__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, rgba(11, 30, 48, 0.95) 0%, rgba(11, 30, 48, 0.82) 45%, rgba(11, 30, 48, 0.6) 100%);
}

.appel__contenu {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}

.appel h2 { color: var(--chaux); }
.appel .chapo { color: rgba(251, 247, 240, 0.8); }

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */
.contact-carte {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem);
  background: var(--craie);
  border: var(--trait);
  border-radius: var(--rayon-carte);
}

.contact-ligne {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  border-bottom: var(--trait);
}

.contact-ligne:last-of-type { padding-bottom: 0; border-bottom: 0; }

.contact-ligne__libelle {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 0.25rem;
}

.contact-ligne__valeur {
  font-family: var(--titre);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
  word-break: break-word;
}

.contact-ligne__aide {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--texte-doux);
}

/* Marqueur des données que le client doit encore fournir */
.a-completer {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 3px;
  background: rgba(192, 139, 46, 0.16);
  border: 1px dashed rgba(158, 120, 45, 0.6);
  color: var(--or);
  font-family: var(--corps);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   19. Guides
   -------------------------------------------------------------------------- */
.fil-ariane {
  padding-block: 1.25rem 0;
  font-size: var(--t-petit);
  color: var(--texte-doux);
}

.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fil-ariane li { margin: 0; display: flex; gap: 0.45rem; align-items: center; }
.fil-ariane li + li::before { content: "›"; color: var(--gris); }
.fil-ariane a { text-decoration: none; }
.fil-ariane [aria-current="page"] { color: var(--gris); }

.entete-article {
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.entete-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: var(--trait);
  font-size: var(--t-petit);
  color: var(--texte-doux);
}

.prose { max-width: var(--largeur-texte); }

.prose > h2 {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: var(--trait);
}

.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose > h3 { margin-top: 2rem; }

.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.6em; }

.prose a { font-weight: 500; }

.encadre {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--craie);
  border: var(--trait);
  border-left: 3px solid var(--or-clair);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

.encadre__titre {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--corps);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
}

.encadre p:last-child { margin-bottom: 0; }

.tableau-enveloppe {
  margin: 2rem 0;
  overflow-x: auto;
  border: var(--trait);
  border-radius: var(--rayon);
  background: var(--craie);
}

.tableau {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.tableau th,
.tableau td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: var(--trait);
  vertical-align: top;
}

.tableau thead th {
  font-family: var(--corps);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
  background: rgba(192, 139, 46, 0.06);
}

.tableau tbody tr:last-child td { border-bottom: 0; }

.carte-guide__categorie {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 0.6rem;
}

/* --------------------------------------------------------------------------
   20. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--encre);
  color: rgba(251, 247, 240, 0.72);
  padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 2rem;
  font-size: 0.94rem;
}

.pied a { color: rgba(251, 247, 240, 0.72); text-decoration: none; }
.pied a:hover { color: var(--or-pale); }

.pied__grille {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(251, 247, 240, 0.16);
}

.pied__logo { width: 168px; margin-bottom: 1.15rem; }

.pied__baseline {
  max-width: 26rem;
  color: rgba(251, 247, 240, 0.62);
  font-size: 0.94rem;
}

.pied__titre {
  margin: 0 0 1rem;
  font-family: var(--corps);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-pale);
}

.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { margin-bottom: 0.55rem; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: var(--t-petit);
  color: rgba(251, 247, 240, 0.55);
}

.pied__bas nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.pied__mention-cookies {
  width: 100%;
  margin: 0;
  padding-top: 0.5rem;
  font-size: var(--t-mini);
  color: rgba(251, 247, 240, 0.45);
}

/* --------------------------------------------------------------------------
   21. Barre WhatsApp mobile
   -------------------------------------------------------------------------- */
.barre-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem var(--gouttiere);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  background: rgba(251, 247, 240, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(18, 41, 63, 0.12);
  transform: translateY(110%);
  transition: transform var(--transition);
}

.barre-mobile.est-visible { transform: translateY(0); }

.barre-mobile .bouton {
  flex: 1;
  min-height: 50px;
  padding-inline: 0.85rem;
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   22. Page 404
   -------------------------------------------------------------------------- */
.page-erreur {
  display: flex;
  align-items: center;
  min-height: 62vh;
  padding-block: var(--section-y);
}

.page-erreur__code {
  font-family: var(--titre);
  font-size: clamp(4rem, 2rem + 9vw, 8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--or-clair);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   23. Animations d'apparition
   -------------------------------------------------------------------------- */
.apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.apparait.est-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   24. Points de rupture
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait { grid-template-columns: 200px minmax(0, 1fr); gap: 1.75rem; }
  .barre-mobile .bouton { font-size: 0.95rem; }
}

@media (min-width: 860px) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait { grid-template-columns: 1fr; }
  .portrait__photo { max-width: 260px; }
  .mixte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mixte--inverse .mixte__media { order: 2; }
}

@media (min-width: 1024px) {
  .nav { display: block; }
  .bascule-menu { display: none; }
  .entete__cta { display: inline-flex; }
  .barre-mobile { display: none; }
  .tiroir { display: none; }

  .heros__grille {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  }

  .parcours {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .etape {
    padding: 3.6rem 0 0 0;
  }

  .etape::before { top: 0; }

  .etape::after {
    left: 44px;
    right: -1.5rem;
    top: 19.5px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(158, 120, 45, 0.5), rgba(158, 120, 45, 0.12));
  }

  .pied__grille {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (min-width: 1180px) {
  .heros__photo { border-radius: 240px 240px var(--rayon-carte) var(--rayon-carte); }
}

/* --------------------------------------------------------------------------
   25. Préférences utilisateur et impression
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .apparait { opacity: 1; transform: none; }
  .tampon { animation: none; }
}

@media (prefers-contrast: more) {
  :root {
    --texte-doux: #2b3b48;
    --trait: 1px solid rgba(18, 41, 63, 0.35);
  }
}

@media print {
  .entete, .tiroir, .barre-mobile, .tampon, .appel__fond, .appel__voile { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .bande { padding-block: 1.5rem; }
  .bande--encre, .appel { background: #fff !important; color: #000 !important; }
  .bande--encre h1, .bande--encre h2, .bande--encre h3, .appel h2 { color: #000 !important; }
  a { text-decoration: underline; }
  .apparait { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   26. Utilitaires
   -------------------------------------------------------------------------- */
.espace-haut-s { margin-top: 1rem; }
.espace-haut-m { margin-top: 1.75rem; }
.espace-haut-l { margin-top: 2.5rem; }
.espace-haut-xl { margin-top: 3rem; }

.bande--sans-haut { padding-top: 0; }

.sans-souligne { text-decoration: none; }

.titre-secondaire { font-size: var(--t-h3); }

.chapo--limite { max-width: 44rem; }

.liste-simple {
  margin: 0;
  padding-left: 1.1rem;
}

.pictogramme--petit {
  width: 44px;
  height: 44px;
  margin: 0;
}

.encart-reserve--clair {
  color: var(--or);
  border-color: rgba(158, 120, 45, 0.45);
}

.media-arrondi {
  border-radius: var(--rayon-carte);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   27. Sélecteur de langue
   -------------------------------------------------------------------------- */
.langues {
  display: flex;
  align-items: center;
  gap: 2px;
}

.langues__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.34rem 0.6rem;
  border-radius: 100px;
  font-family: var(--corps);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--texte-doux);
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}

.langues__drapeau {
  flex: none;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(18, 41, 63, 0.18);
}

.langues__lien:hover {
  background: rgba(18, 41, 63, 0.06);
  color: var(--encre);
}

.langues__lien.est-actif {
  background: rgba(192, 139, 46, 0.15);
  color: var(--or);
}

/* Dans l'en-tête : masqué sur les très petits écrans, où il vit dans le tiroir */
.langues--entete { display: none; }

/* Dans le tiroir mobile : plus grand, plus facile à viser au pouce */
.langues--tiroir {
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.langues--tiroir .langues__lien {
  flex: 1;
  justify-content: center;
  padding: 0.7rem 0.5rem;
  border: var(--trait);
  font-size: 0.82rem;
}

.langues--tiroir .langues__drapeau {
  width: 24px;
  height: 16px;
}

.langues--tiroir .langues__lien.est-actif {
  border-color: rgba(158, 120, 45, 0.5);
}

/* Dans le pied de page : fond sombre */
.langues--pied {
  margin-top: 1.6rem;
  gap: 4px;
}

.langues--pied .langues__lien {
  padding-inline: 0.55rem;
  color: rgba(251, 247, 240, 0.68);
}

.langues--pied .langues__drapeau {
  box-shadow: 0 0 0 1px rgba(251, 247, 240, 0.28);
}

.langues--pied .langues__lien:hover {
  background: rgba(251, 247, 240, 0.1);
  color: var(--craie);
}

.langues--pied .langues__lien.est-actif {
  background: rgba(232, 217, 180, 0.16);
  color: var(--or-pale);
}

@media (min-width: 600px) {
  .langues--entete { display: flex; }
}

/* --------------------------------------------------------------------------
   28. Aperçu court d'un pack sur la page d'accueil
   -------------------------------------------------------------------------- */
.pack__resume {
  margin: 0 0 1.5rem;
  padding-top: 1.25rem;
  border-top: var(--trait);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--texte-doux);
}

.citation-duo {
  margin: 0 0 1.35rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--or-clair);
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.24rem);
  line-height: 1.5;
  color: var(--encre);
}