/* ============================================================
   VILLA DIDON CARTHAGE — socle commun (nav · drawer · footer)
   Chargé par toutes les pages AVANT leur <style> inline :
   une page peut surcharger (ex. nav sombre du Sur-mesure).
   Accent du menu : var(--accent) — bleu par défaut, redéfini
   en or dans le :root des lieux chauds (Le Spa, Le Light Bar).
   ============================================================ */

/* ---------- POLICES AUTO-HÉBERGÉES (subset latin) ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/montserrat-300.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; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/montserrat-400.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; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/montserrat-500.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; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/montserrat-600.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; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/montserrat-700.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; }
@font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/notoserifdisplay-400i.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; }
@font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 500; font-display: swap; src: url('assets/fonts/notoserifdisplay-500i.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; }
@font-face { font-family: 'Noto Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/notoserifdisplay-400.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; }
@font-face { font-family: 'Noto Serif Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/notoserifdisplay-500.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; }
@font-face { font-family: 'Noto Serif Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/notoserifdisplay-700.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; }

.icon { display: inline-block; vertical-align: middle; }

/* ---------- NAV ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 500ms ease, border-color 500ms ease; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(250,250,247,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(228,224,211,0.7); }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .nav-inner { padding: 20px 40px; } }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand-logo { width: 26px; height: 32px; flex-shrink: 0; transition: filter 500ms; }
.nav:not(.scrolled) .nav-brand-logo { filter: brightness(0) invert(1); }
.nav.scrolled .nav-brand-logo { filter: none; }
.nav-brand-text { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; display: none; color: #fff; transition: color 500ms; }
@media (min-width: 640px) { .nav-brand-text { display: block; } }
.nav-brand-text span { opacity: 0.6; margin-left: 8px; font-weight: 300; }
.nav.scrolled .nav-brand-text { color: var(--ink, #1a2332); }
.nav.scrolled .menu-trigger { color: var(--ink, #1a2332); }
.nav.scrolled .nav-cta { border-color: var(--accent, #3664af); color: var(--accent, #3664af); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
@media (min-width: 768px) { .nav-actions { gap: 24px; } }
.nav-cta { display: none; padding: 10px 20px; border: 1px solid rgba(255,255,255,0.6); color: #fff; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 600; transition: all 300ms; }
.nav-cta:hover { background: var(--accent, #3664af); border-color: var(--accent, #3664af); color: #fff !important; }
@media (min-width: 640px) { .nav-cta { display: inline-block; } }
.menu-trigger { padding: 8px; color: #fff; transition: color 500ms; }

/* ---------- DRAWER ---------- */
.drawer-bg { position: fixed; inset: 0; z-index: 60; background: rgba(10,14,26,0.5); opacity: 0; pointer-events: none; transition: opacity 700ms; }
.drawer-bg.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: 100%; max-width: 440px; background: var(--paper, #fafaf7); transform: translateX(100%); transition: transform 700ms cubic-bezier(0.7,0,0.3,1); display: flex; flex-direction: column; padding: 32px; }
@media (min-width: 768px) { .drawer { padding: 48px; } }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }
.drawer-close { padding: 8px; transition: opacity 200ms; }
.drawer-close:hover { opacity: 0.6; }
.drawer-nav { flex: 1; min-height: 0; overflow-y: auto; }
.drawer-link { display: block; width: 100%; text-align: left; font-family: var(--serif, Georgia, serif); font-size: 26px; line-height: 1.1; color: var(--ink, #1a2332); padding: 10px 0; transition: color 300ms; }
@media (min-width: 768px) { .drawer-link { font-size: 30px; } }
.drawer-link:hover, .drawer-link.active { color: var(--accent, #3664af); }
.drawer-cat { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--mute, #6d7d90); font-weight: 500; margin: 24px 0 8px 0; padding-top: 16px; border-top: 1px solid var(--border, #e4e0d3); }
.drawer-cat:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.drawer-foot { padding-top: 32px; border-top: 1px solid var(--border, #e4e0d3); }
.drawer-cta { display: block; width: 100%; padding: 16px 24px; background: var(--accent, #3664af); color: #fff; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 600; text-align: center; transition: background 300ms, color 300ms; }
.drawer-cta:hover { background: var(--accent-deep, #27498a); color: #fff; }
.drawer-langs { margin-top: 16px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute, #6d7d90); text-align: center; }
/* Les langues du menu etaient un simple texte decoratif (10/08) : elles reprennent
   desormais les liens reels du pied de page de chaque page. Zone tactile elargie. */
.drawer-langs a { color: inherit; padding: 10px 4px; margin: -10px 0; display: inline-block; transition: color 200ms; }
.drawer-langs a:hover, .drawer-langs a:focus-visible { color: var(--blue, #3664af); }
.drawer-langs a.active { color: var(--blue, #3664af); }

/* ---------- FOOTER ---------- */
.footer { background: var(--night, #0a0e1a); color: rgba(255,255,255,0.7); padding: 64px 24px; border-top: 1px solid rgba(255,255,255,0.08); }
@media (min-width: 768px) { .footer { padding: 80px 64px; } }
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
/* 5 colonnes depuis le 10/08 : Marque · Adresse · Decouvrir · Contact · Avis.
   Avant, « Decouvrir » et « Avis » etaient empilees dans une meme 4e colonne.
   Pas de ratio impose : chaque colonne prend la largeur de son contenu (906 px
   au total, dont 261 px pour Contact a cause de l'adresse email insecable) et
   l'espace restant est reparti entre elles. Ecart resserre a 32 px pour que les
   cinq tiennent sur une seule ligne le plus tot possible. */
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (min-width: 1000px) {
  /* Plancher de 220px sur la colonne marque : sans lui elle tombe a 132px au seuil
     et le slogan se disloque sur six lignes. Les quatre autres restent en auto. */
  .footer-grid { grid-template-columns: minmax(220px, auto) repeat(4, auto); justify-content: space-between; gap: 32px; }
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.footer-brand-logo { height: 36px; width: auto; display: block; margin-bottom: 24px; }
.footer-brand .footer-brand-logo { margin-bottom: 0; }
.footer-tag { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 20rem; }
.footer-h { font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.footer-info { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.75); }
.footer-info a { color: rgba(255,255,255,0.75); }
/* Icones adresse/telephone/email retirees le 10/08 (superflues) : le texte revient
   au bord de la colonne, aligne avec le titre et les logos sociaux. La regle
   .footer-icon est devenue morte, supprimee. Les logos gardent leur zone tactile
   de 12px ; la marge haute la compense pour un ecart visuel d'environ 18px. */
.footer-socials { display: flex; gap: 16px; margin-top: 12px; }
.footer-socials a { color: rgba(255,255,255,0.7); transition: color 200ms; padding: 12px; margin: -12px; }
.footer-socials a:hover { color: #fff; }
.footer-list { list-style: none; }
.footer-list li { margin-bottom: 8px; font-size: 13px; }
.footer-list a { color: rgba(255,255,255,0.6); transition: color 200ms; }
.footer-list a:hover, .footer-list a.active { color: #fff; }
.footer-bottom { padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-copy { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.footer-utility { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
/* Mentions legales et Confidentialite regroupees (10/08) : en mobile elles se
   repartissaient de part et d'autre du retour a la ligne, « Mentions legales »
   restant collee a la fin de la ligne des langues. Le span les garde ensemble. */
.footer-legal { display: flex; gap: 22px; }
@media (max-width: 767px) { .footer-legal { flex-basis: 100%; } }
.footer-utility a { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.4); transition: color 200ms; padding: 14px 6px; margin: -14px -6px; }
.footer-utility a:hover, .footer-utility a.active { color: rgba(255,255,255,0.9); }

/* ---------- LANGUES ---------- */
/* Decision « anglais principal, francais secondaire » appliquee a l'affichage :
   EN passe devant FR et les deux se resserrent. Le pied de page compte desormais
   TROIS blocs a ecart egal — les langues, Mentions legales, Confidentialite —
   la ou quatre elements s'alignaient a 22px sans hierarchie. */
.footer-langs { display: flex; gap: 10px; }

/* Selecteur de langue dans la barre de navigation, a gauche du bouton d'appel.
   Masque sous 768px comme le bouton lui-meme : la barre n'a pas la place, et le
   tiroir porte deja les langues. L'ordre des deux regles compte (meme
   specificite) : le display:none doit preceder le @media. */
.nav-langs { display: none; align-items: center; gap: 10px; }
@media (min-width: 640px) { .nav-langs { display: flex; } }
.nav-langs a { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.6); padding: 12px 3px; margin: -12px 0; transition: color 300ms; }
.nav-langs a:hover, .nav-langs a.active { color: #fff; }
/* Barre defilee (fond creme). On n'utilise NI --mute NI --accent : --mute donne
   3,33:1 sur creme, sous le seuil AA de 4,5 pour du 10px, et --accent vaut un dore
   sur Le Light Bar et Le Spa — 2,4:1, illisible. Ces deux teintes-ci tiennent quelle
   que soit la palette de la page : 14:1 pour la langue active, 5,7:1 pour l'autre. */
.nav.scrolled .nav-langs a { color: #5a6472; }
.nav.scrolled .nav-langs a:hover, .nav.scrolled .nav-langs a.active { color: var(--ink, #1a2332); }

/* ---------- MARQUE ---------- */
/* Les icones sont desormais de vrais traces vectoriels, de rapport propre 1,88.
   Les boites d'affichage, elles, sont plus hautes que larges — 26x32 dans la
   barre, 28x35 dans le tiroir, 36x45 pour les marques de section. Sans
   object-fit le navigateur etire la marque de 23 %, ce qu'il faisait deja sur
   l'ancien bitmap carre. contain la laisse a ses proportions et la centre.
   Cible par la source et non par la classe : les marques de section sont
   stylees dans le <style> de chaque page, une seule regle les couvre toutes. */
img[src$="icone_dark.svg"], img[src$="icone_white.svg"] { object-fit: contain; }

/* ---------- ACCESSIBILITÉ ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}