@font-face { font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/yellowtail.woff2") format("woff2"); }
/* Tikina Beach
   Mise en page : bandes pleine largeur qui alternent sable, lagune et océan,
   séparées par des vagues ; une seule grande typographie expressive. */
:root {
  --ocean: #0a3a52;        /* bleu profond de l'Atlantique */
  --lagune: #0e7c74;       /* vert-bleu de la lagune Aby */
  --ecume: #d7f1ec;        /* écume claire */
  --sable: #f6ead3;        /* sable d'Assinie */
  --sable-clair: #fdf8ee;
  --corail: #f2603f;       /* coucher de soleil, pagne */
  --corail-fonce: #d44a2a;
  --soleil: #ffc23d;
  --encre: #13262f;
  --encre-douce: #4b5f66;
  --blanc: #ffffff;

  --f-titre: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-texte: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-main: "Caveat", "Segoe Script", cursive;

  --rayon: 22px;
  --ombre: 0 18px 40px -22px rgba(10, 58, 82, .45);
  --gouttiere-g: max(20px, env(safe-area-inset-left, 0px));
  --gouttiere-d: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--sable-clair); color: var(--encre);
  font: 400 1.0625rem/1.65 var(--f-texte);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--lagune); }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.05; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.accent { color: var(--corail); }
.grand-texte { font-size: 1.18rem; color: var(--encre-douce); max-width: 60ch; }
.manuscrit { font-family: var(--f-main); font-size: 1.6rem; color: var(--corail); line-height: 1.1; margin-bottom: .6em; }
.manuscrit.grand { font-size: 2.1rem; }
.surtitre, .etiquette {
  font: 600 .78rem/1.2 var(--f-texte); text-transform: uppercase; letter-spacing: .14em;
  color: var(--lagune); margin-bottom: .9em;
}
.centre { text-align: center; justify-content: center; }
:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; border-radius: 6px; }

.conteneur { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 1rem/1 var(--f-texte); text-decoration: none; border: 0; cursor: pointer;
  padding: .95em 1.6em; border-radius: 999px;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn:active { transform: translateY(1px); }
.btn-corail { background: var(--corail); color: var(--blanc); box-shadow: 0 10px 22px -10px var(--corail); }
.btn-corail:hover { background: var(--corail-fonce); }
.btn-ocean { background: var(--ocean); color: var(--blanc); }
.btn-ocean:hover { background: var(--lagune); }
.btn-clair { background: rgba(255,255,255,.16); color: var(--blanc); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); backdrop-filter: blur(6px); }
.btn-clair:hover { background: var(--blanc); color: var(--ocean); }
.btn-clair-fonce { background: transparent; color: var(--ocean); box-shadow: inset 0 0 0 2px var(--ocean); }
.btn-grand { font-size: 1.12rem; padding: 1.1em 1.9em; }
.btn-petit { padding: .7em 1.2em; font-size: .95rem; }
.btn-plein { width: 100%; }
.btn.envoi { opacity: .7; pointer-events: none; }
.lien-fleche { font-weight: 600; text-decoration: none; color: var(--ocean); display: inline-flex; gap: .4em; align-items: center; }
.lien-fleche::after { content: "→"; transition: transform .25s; }
.lien-fleche:hover::after { transform: translateX(5px); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .3s, box-shadow .3s;
}
.entete-in {
  max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gouttiere-d) 14px var(--gouttiere-g);
}
.entete.solide, body:not(.page-accueil) .entete { background: rgba(253, 248, 238, .92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(10,58,82,.08); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blanc); font: 800 1.35rem/1 var(--f-titre); letter-spacing: -.02em; }
.logo b, .pied-logo b { color: var(--soleil); font-weight: 800; }
.logo svg { width: 38px; height: 38px; }
.logo-soleil { fill: var(--soleil); }
.logo-vague { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.logo-vague.v2 { opacity: .6; }
.entete.solide .logo, body:not(.page-accueil) .logo { color: var(--ocean); }
.entete.solide .logo b, body:not(.page-accueil) .logo b { color: var(--corail); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a:not(.btn) {
  color: var(--blanc); text-decoration: none; font-weight: 500; padding: .55em .9em; border-radius: 999px;
  transition: background .2s;
}
.nav a:not(.btn):hover { background: rgba(255,255,255,.15); }
.entete.solide .nav a:not(.btn), body:not(.page-accueil) .nav a:not(.btn) { color: var(--encre); }
.entete.solide .nav a:not(.btn):hover, body:not(.page-accueil) .nav a:not(.btn):hover { background: var(--sable); }
.nav a[aria-current="page"]:not(.btn) { box-shadow: inset 0 -2px 0 var(--corail); border-radius: 0; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; z-index: 2; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .3s; color: var(--blanc); }
.entete.solide .burger span, body:not(.page-accueil) .burger span, .nav-ouverte .burger span { color: var(--ocean); }
.burger span:first-child { top: 16px; } .burger span:last-child { top: 26px; }
.nav-ouverte .burger span:first-child { transform: translateY(5px) rotate(45deg); }
.nav-ouverte .burger span:last-child { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 820px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 10px;
    background: var(--sable-clair); padding: 80px var(--gouttiere-d) 40px var(--gouttiere-g);
    clip-path: circle(0% at calc(100% - 42px) 36px); transition: clip-path .55s cubic-bezier(.7,0,.2,1);
  }
  .nav.ouvert { clip-path: circle(150% at calc(100% - 42px) 36px); }
  .nav a:not(.btn) { color: var(--ocean) !important; font: 700 1.9rem/1.2 var(--f-titre); }
  .nav .btn { margin-top: 12px; font-size: 1.1rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--blanc);
  min-height: min(92vh, 820px);
  display: flex; align-items: center;
  background: linear-gradient(180deg, #0b5f7a 0%, #1a8b9a 46%, #f7b267 82%, #f28a55 100%);
  padding: 130px var(--gouttiere-d) 170px var(--gouttiere-g);
}
.hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; animation: zoom 24s ease-out both; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,58,82,.55), rgba(10,58,82,.15) 50%, rgba(10,58,82,.55)); }
@keyframes zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-ciel { position: absolute; inset: 0; pointer-events: none; }
.hero-soleil {
  position: absolute; right: 12%; bottom: 120px; width: clamp(140px, 22vw, 300px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff3c4, var(--soleil) 55%, #ff9a3d);
  box-shadow: 0 0 120px 40px rgba(255, 194, 61, .45);
  animation: lever 2.4s cubic-bezier(.2,.8,.2,1) both;
}
.hero-photo ~ .hero-ciel .hero-soleil { opacity: .35; }
@keyframes lever { from { translate: 0 140px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.nuage { position: absolute; height: 34px; border-radius: 40px; background: rgba(255,255,255,.55); filter: blur(1px); animation: derive linear infinite; }
.nuage::before { content: ""; position: absolute; width: 50%; height: 160%; left: 20%; bottom: 20%; background: inherit; border-radius: 50%; }
.n1 { width: 160px; top: 22%; left: -200px; animation-duration: 70s; }
.n2 { width: 110px; top: 34%; left: -200px; animation-duration: 95s; animation-delay: -40s; opacity: .7; }
@keyframes derive { to { transform: translateX(calc(100vw + 400px)); } }
.oiseau { position: absolute; width: 22px; height: 10px; border-top: 2.5px solid rgba(255,255,255,.85); border-radius: 50% 50% 0 0; animation: vol 18s linear infinite; }
.oiseau::after { content: ""; position: absolute; left: 100%; top: -2.5px; width: 22px; height: 10px; border-top: 2.5px solid rgba(255,255,255,.85); border-radius: 50% 50% 0 0; }
.o1 { top: 28%; left: 60%; } .o2 { top: 24%; left: 66%; transform: scale(.7); animation-delay: -4s; }
@keyframes vol { 0%,100% { translate: 0 0; } 50% { translate: -40px -16px; } }

.hero-texte { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; }
.hero-sur { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; opacity: .92; animation: monte .8s .2s both; }
.hero-titre { font-size: clamp(4rem, 15vw, 11.5rem); line-height: .86; letter-spacing: -.045em; margin: .1em 0 .25em; }
.hero-titre .mot { display: inline-block; animation: monte 1s cubic-bezier(.2,.9,.2,1) both; }
.hero-titre .mot.accent { color: var(--soleil); animation-delay: .15s; font-style: italic; }
@keyframes monte { from { opacity: 0; transform: translateY(40px) rotate(2deg); } to { opacity: 1; transform: none; } }
.slogan-rotatif { position: relative; height: 2.6em; font: 600 clamp(1.5rem, 3.4vw, 2.3rem)/1.15 var(--f-main); max-width: 30ch; margin-bottom: 1.6rem; }
.slogan { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.slogan.actif { opacity: 1; transform: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; animation: monte .9s .45s both; }
.hero-inclus { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; animation: monte .9s .6s both; }
.hero-inclus li { background: rgba(10,58,82,.35); backdrop-filter: blur(6px); padding: .45em 1em; border-radius: 999px; font-size: .92rem; font-weight: 500; }
.hero-inclus li::before { content: "✓ "; color: var(--soleil); font-weight: 700; }

.hero-vagues { position: absolute; left: 0; right: 0; bottom: -2px; height: 140px; }
.vague { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
.va { fill: rgba(14,124,116,.55); animation: houle 14s linear infinite; }
.vb { fill: rgba(10,58,82,.5); animation: houle 10s linear infinite reverse; }
.vc { fill: var(--sable-clair); animation: houle 18s linear infinite; }
@keyframes houle { to { transform: translateX(-50%); } }

/* ---------- Bandeau défilant ---------- */
.bandeau { background: var(--ocean); color: var(--ecume); overflow: hidden; padding-block: 18px; transform: rotate(-1.2deg); margin: -10px -20px 0; position: relative; z-index: 3; }
.bandeau-piste { display: flex; gap: 28px; width: max-content; animation: defile 40s linear infinite; font: 700 1.5rem/1 var(--f-titre); letter-spacing: -.01em; white-space: nowrap; }
.bandeau .etoile { color: var(--soleil); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Apparition ---------- */
.revele.pret { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.revele.pret.vu { opacity: 1; transform: none; }

/* ---------- Voyage ---------- */
.etapes { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); position: relative; }
.etapes::before { content: ""; position: absolute; top: 34px; left: 8%; right: 8%; border-top: 3px dashed rgba(14,124,116,.35); }
.etapes li { position: relative; background: var(--blanc); border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre); min-width: 0; }
.etape-num {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; margin: -62px 0 18px;
  background: var(--lagune); color: var(--blanc); font: 800 1.9rem/1 var(--f-titre); border: 6px solid var(--sable-clair);
}
.etapes li:nth-child(2) .etape-num { background: var(--corail); }
.etapes li:nth-child(3) .etape-num { background: var(--ocean); }
.etapes li p { color: var(--encre-douce); margin: 0; }
.pirogue { position: absolute; right: 22px; top: 22px; width: 64px; height: 16px; border-radius: 0 0 40px 40px; background: #8a5a2b; animation: tangue 3s ease-in-out infinite; }
.pirogue::before { content: ""; position: absolute; left: 30px; bottom: 14px; width: 2px; height: 26px; background: #6b4420; }
.pirogue::after { content: ""; position: absolute; left: 32px; bottom: 20px; border-left: 18px solid var(--corail); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
@keyframes tangue { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-3px); } }
@media (max-width: 760px) {
  .etapes { grid-template-columns: 1fr; gap: 56px; }
  .etapes::before { display: none; }
}

/* ---------- Visuels (photo ou illustration provisoire) ---------- */
.visuel { position: relative; overflow: hidden; border-radius: var(--rayon); aspect-ratio: 4/3; max-width: 100%; background: var(--ecume); }
.visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.visuel:hover img { transform: scale(1.06); }
.visuel-illu { background: linear-gradient(180deg, #8fd3e0 0%, #d9f2f0 55%, var(--sable) 55%); }
.scene-lagune { background: linear-gradient(180deg, #b9e4dc 0%, #e7f6ef 48%, #1f8f86 48%, #0e7c74 100%); }
.scene-mer { background: linear-gradient(180deg, #5cc4dc 0%, #bfe9f0 50%, #1c84a8 50%, #0a3a52 78%, var(--sable) 78%); }
.scene-coucher { background: linear-gradient(180deg, #f6a65c 0%, #f9cf7e 46%, #e46f4b 46%, #0a3a52 100%); }
.illu-soleil { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; right: 16%; top: 18%; background: var(--soleil); box-shadow: 0 0 40px 8px rgba(255,194,61,.5); animation: flotte 6s ease-in-out infinite; }
.scene-coucher .illu-soleil { top: 30%; background: #ffe08a; }
.illu-palmier { position: absolute; left: 10%; bottom: 30%; width: 8px; height: 46%; background: #6b4420; border-radius: 4px; transform: rotate(8deg); transform-origin: bottom; animation: balance 5s ease-in-out infinite; }
.illu-palmier::before, .illu-palmier::after { content: ""; position: absolute; top: -6px; width: 70px; height: 22px; border-radius: 0 100% 0 100%; background: #13715a; }
.illu-palmier::before { left: -64px; transform: rotate(18deg); } .illu-palmier::after { left: 2px; transform: rotate(-18deg) scaleX(-1); }
.illu-eau { position: absolute; left: -10%; right: -10%; height: 8px; bottom: 34%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.65) 0 30px, transparent 30px 60px); border-radius: 4px; animation: reflet 4s linear infinite; }
.illu-eau.e2 { bottom: 26%; opacity: .6; animation-duration: 6s; animation-direction: reverse; }
@keyframes flotte { 50% { transform: translateY(-8px); } }
@keyframes balance { 50% { transform: rotate(3deg); } }
@keyframes reflet { to { transform: translateX(60px); } }

/* ---------- Deux rives ---------- */
.deux-rives { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.rive { position: relative; padding: clamp(3rem, 6vw, 5rem) var(--gouttiere-d) clamp(3rem, 6vw, 5rem) var(--gouttiere-g); display: grid; gap: 28px; align-content: start; min-width: 0; }
.rive-lagune { background: var(--lagune); color: var(--blanc); }
.rive-ocean { background: var(--ocean); color: var(--blanc); }
.rive .surtitre { color: var(--soleil); }
.rive p { color: rgba(255,255,255,.86); max-width: 46ch; }
.rive .lien-fleche { color: var(--blanc); }
.rive-visuel { aspect-ratio: 16/10; box-shadow: 0 30px 50px -30px rgba(0,0,0,.5); transform: rotate(-1.5deg); }
.rive-ocean .rive-visuel { transform: rotate(1.5deg); }
@media (max-width: 860px) { .deux-rives { grid-template-columns: 1fr; } }

/* ---------- Chambres ---------- */
.titre-ligne { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 2.5rem; }
.titre-ligne h2, .titre-ligne h1 { margin: 0; }
.grille-chambres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1000px) { .grille-chambres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 660px) { .grille-chambres { grid-template-columns: 1fr; } }
.chambre { background: var(--blanc); border-radius: calc(var(--rayon) + 6px); box-shadow: var(--ombre); display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.chambre:hover { transform: translateY(-6px); }
.chambre-visuel { border-radius: 0; aspect-ratio: 16/11; }
.chambre-corps { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.chambre-corps > p:not(.etiquette):not(.manuscrit) { color: var(--encre-douce); font-size: .98rem; }
.chambre .manuscrit { font-size: 1.45rem; }
.puces { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: 6px; }
.puces li { background: var(--ecume); color: var(--ocean); font-size: .85rem; font-weight: 600; padding: .35em .8em; border-radius: 999px; }
.chambre-pied { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 1.1rem; border-top: 1px dashed rgba(10,58,82,.18); }
.prix { margin: 0; display: grid; }
.prix strong { font: 800 1.5rem/1.1 var(--f-titre); color: var(--ocean); font-variant-numeric: tabular-nums; }
.prix span { font-size: .8rem; color: var(--encre-douce); }

.chambre-detail:nth-of-type(odd) { background: var(--sable); }
.chambre-detail-grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.chambre-detail.inverse .galerie { order: 2; }
.chambre-detail-grille > * { min-width: 0; }
.galerie { display: grid; gap: 12px; }
.galerie-principale { aspect-ratio: 4/3; }
.galerie-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.galerie-mini .visuel { aspect-ratio: 3/2; }
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(10,58,82,.12); border-radius: 16px; overflow: hidden; margin: 1.6rem 0; }
.fiche div { background: var(--sable-clair); padding: 14px 18px; }
.fiche dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--encre-douce); }
.fiche dd { margin: 0; font-weight: 600; color: var(--ocean); }
@media (max-width: 860px) {
  .chambre-detail-grille { grid-template-columns: 1fr; }
  .chambre-detail.inverse .galerie { order: 0; }
}

/* ---------- Têtes de page ---------- */
.page-tete { position: relative; background: var(--lagune); color: var(--blanc); padding-block: 150px 110px; overflow: hidden; }
.page-tete::before { content: ""; position: absolute; width: 480px; aspect-ratio: 1; border-radius: 50%; right: -120px; top: -140px; background: radial-gradient(circle, rgba(255,194,61,.55), transparent 65%); animation: flotte 8s ease-in-out infinite; }
.page-tete .surtitre { color: var(--soleil); }
.page-tete .accent { color: var(--soleil); }
.page-tete .grand-texte { color: rgba(255,255,255,.88); }
.page-tete-resto { background: var(--ocean); }
.page-tete-court { padding-bottom: 90px; }
.page-tete-vague { position: absolute; left: 0; bottom: -1px; width: 100%; height: 50px; fill: var(--sable-clair); }
.anim-titre { animation: monte 1s cubic-bezier(.2,.9,.2,1) both; }

/* ---------- Restaurant ---------- */
.resto-teaser { background: var(--sable); }
.resto-grille, .acces-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.resto-grille > *, .acces-grille > * { min-width: 0; }
.resto-visuel { aspect-ratio: 1; transform: rotate(-2deg); box-shadow: var(--ombre); }
@media (max-width: 860px) { .resto-grille, .acces-grille { grid-template-columns: 1fr; } }

.menu-grille { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.menu-grille > * { min-width: 0; }
.menu-photos { position: sticky; top: 100px; display: grid; gap: 16px; }
.menu-visuel:nth-child(2) { aspect-ratio: 16/9; transform: rotate(1.5deg); }
.menu-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); background: var(--sable-clair); padding-block: 10px; z-index: 5; }
.menu-onglets a { text-decoration: none; color: var(--ocean); font-weight: 600; padding: .5em 1em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(10,58,82,.25); transition: background .2s, color .2s; }
.menu-onglets a:hover { background: var(--ocean); color: var(--blanc); }
.menu-cat { margin-bottom: 3rem; scroll-margin-top: 150px; }
.menu-cat h2 { font-size: 2rem; display: flex; align-items: center; gap: 14px; }
.menu-cat h2::after { content: ""; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--corail) 0 10px, transparent 10px 18px); }
.menu-cat ul { list-style: none; padding: 0; margin: 0; }
.plat { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(10,58,82,.08); }
.plat-nom { display: grid; min-width: 0; }
.plat-nom strong { font-weight: 600; font-size: 1.08rem; }
.plat-nom span { color: var(--encre-douce); font-size: .92rem; }
.plat-points { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(10,58,82,.25); transform: translateY(-5px); }
.plat-prix { font: 700 1.1rem/1 var(--f-titre); color: var(--corail); white-space: nowrap; font-variant-numeric: tabular-nums; }
.note-provisoire { background: var(--soleil); color: var(--encre); padding: .7em 1em; border-radius: 12px; font-weight: 600; font-size: .9rem; }
.menu-pied { color: var(--encre-douce); }
@media (max-width: 860px) { .menu-grille { grid-template-columns: 1fr; } .menu-photos { position: static; grid-template-columns: 1fr 1fr; } }

/* ---------- Inclus ---------- */
.inclus-liste { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.inclus-liste li { display: grid; gap: 4px; padding: 26px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); min-width: 0; }
.inclus-liste svg { width: 48px; height: 48px; fill: none; stroke: var(--lagune); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; transition: transform .4s; }
.inclus-liste li:hover svg { transform: rotate(-8deg) scale(1.1); }
.inclus-liste strong { font: 700 1.15rem/1.2 var(--f-titre); }
.inclus-liste span { color: var(--encre-douce); font-size: .95rem; }
@media (max-width: 900px) { .inclus-liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .inclus-liste { grid-template-columns: 1fr; } }

/* ---------- Accès ---------- */
.acces { background: var(--ecume); }
.carte-schema { background: var(--blanc); border-radius: var(--rayon); padding: 14px; box-shadow: var(--ombre); }
.carte-schema svg { width: 100%; height: auto; display: block; }
.sch-ocean { fill: #1c6f93; } .sch-cordon { fill: var(--sable); } .sch-lagune { fill: #3fb0a3; }
.sch-route { fill: none; stroke: var(--encre-douce); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.sch-pirogue-trajet { fill: none; stroke: var(--corail); stroke-width: 3; stroke-dasharray: 8 6; animation: trajet 1.6s linear infinite; }
@keyframes trajet { to { stroke-dashoffset: -28; } }
.sch-point { fill: var(--ocean); } .sch-tikina { fill: var(--corail); stroke: var(--blanc); stroke-width: 3; animation: pulse 2s ease-in-out infinite; transform-origin: 300px 178px; }
@keyframes pulse { 50% { transform: scale(1.25); } }
.sch-txt { font: 600 12px var(--f-texte); fill: var(--encre); } .sch-fort { font: 800 15px var(--f-titre); fill: var(--corail); } .sch-petit { font-size: 11px; fill: var(--blanc); font-style: italic; }

/* ---------- Appel final ---------- */
.appel { background: var(--corail); color: var(--blanc); padding-block: clamp(4rem, 8vw, 6rem); text-align: center; position: relative; overflow: hidden; }
.appel::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; border-radius: 50%; background: rgba(255,255,255,.08); }
.appel-in { position: relative; display: grid; justify-items: center; }
.appel h2 { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 800; }
.appel p { font-size: 1.15rem; }
.appel .btn-corail { background: var(--ocean); box-shadow: none; }

/* ---------- Réservation ---------- */
.section-resa { padding-top: 3rem; }
.resa-grille { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.resa-grille > * { min-width: 0; }
.resa-form { display: grid; gap: 22px; }
.etape-resa { border: 0; margin: 0; padding: 26px; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); display: grid; gap: 16px; min-width: 0; }
.etape-resa legend { font: 700 1.4rem/1 var(--f-titre); display: flex; align-items: center; gap: 12px; float: left; width: 100%; margin-bottom: 6px; }
.etape-resa legend .num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lagune); color: var(--blanc); font-size: 1.1rem; }
.etape-resa > *:not(legend) { clear: both; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .champs-2 { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--encre); min-width: 0; }
.facultatif { font-weight: 400; color: var(--encre-douce); font-size: .82rem; }
input, select, textarea {
  font: 400 1rem/1.4 var(--f-texte); color: var(--encre); background: var(--sable-clair);
  border: 1.5px solid rgba(10,58,82,.18); border-radius: 12px; padding: .8em .9em; width: 100%; min-width: 0;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lagune); box-shadow: 0 0 0 4px rgba(14,124,116,.18); }
.aide { color: var(--encre-douce); font-size: .92rem; margin: 0; }
.alerte { background: #fde3dc; color: #8a2a12; border-radius: 14px; padding: 16px 20px; }
.alerte ul { margin: .4em 0 0; padding-left: 1.2em; }
.info { background: var(--ecume); color: var(--ocean); border-radius: 14px; padding: 12px 18px; }

.choix-chambres { display: grid; gap: 12px; }
.choix { position: relative; display: block; cursor: pointer; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-corps { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 2px solid rgba(10,58,82,.12); background: var(--sable-clair); transition: border-color .2s, background .2s, transform .25s; }
.choix:hover .choix-corps { transform: translateX(4px); }
.choix input:focus-visible + .choix-corps { box-shadow: 0 0 0 3px var(--soleil); }
.choix.choisi .choix-corps { border-color: var(--lagune); background: var(--ecume); }
.choix.complet, .choix.trop-petit { cursor: not-allowed; }
.choix.complet .choix-corps, .choix.trop-petit .choix-corps { opacity: .5; transform: none; }
.choix.trop-petit .choix-detail::after { content: " · trop petite pour votre groupe"; color: var(--corail-fonce); font-weight: 600; }
.choix-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.choix-haut strong { font: 700 1.15rem/1.2 var(--f-titre); }
.choix-detail { color: var(--encre-douce); font-size: .9rem; }
.choix-prix { font-size: .95rem; font-variant-numeric: tabular-nums; }
.choix-prix b { color: var(--ocean); }
.badge-dispo:empty { display: none; }
.badge-dispo { font-size: .75rem; font-weight: 700; padding: .3em .75em; border-radius: 999px; }
.badge-dispo.ok { background: #d5f3e1; color: #17643a; }
.badge-dispo.alerte-b { background: #ffeec2; color: #7a5300; }
.badge-dispo.ko { background: #fde3dc; color: #8a2a12; }

.recap { position: sticky; top: 100px; background: var(--ocean); color: var(--blanc); border-radius: var(--rayon); padding: 28px; display: grid; gap: 4px; overflow: hidden; }
.recap::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,194,61,.5), transparent 65%); }
.recap .surtitre { color: var(--soleil); }
.recap-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.recap-ligne span { color: rgba(255,255,255,.7); }
.recap-ligne strong { text-align: right; }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 6px; }
.recap-total strong { font: 800 1.7rem/1 var(--f-titre); color: var(--soleil); font-variant-numeric: tabular-nums; }
.recap-inclus { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.recap-inclus li { font-size: .8rem; background: rgba(255,255,255,.1); padding: .3em .7em; border-radius: 999px; }
.recap-inclus li::before { content: "✓ "; color: var(--soleil); }
@media (max-width: 900px) { .resa-grille { grid-template-columns: 1fr; } .recap { position: relative; top: auto; order: -1; } }

/* ---------- Confirmation ---------- */
.confirmation { padding-top: 140px; }
.confirm-carte { max-width: 720px; text-align: center; display: grid; justify-items: center; }
.confirm-carte .grand-texte { margin-inline: auto; }
.confirm-icone svg { width: 96px; height: 96px; margin-bottom: 20px; }
.confirm-icone circle { fill: var(--ecume); stroke: var(--lagune); stroke-width: 4; }
.confirm-icone path { fill: none; stroke: var(--lagune); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: coche .7s .3s ease-out forwards; }
@keyframes coche { to { stroke-dashoffset: 0; } }
.fiche-confirm { width: 100%; text-align: left; }
@media (max-width: 520px) { .fiche { grid-template-columns: 1fr; } }

/* ---------- Espace gérant ---------- */
.page-admin main, .connexion { padding-top: 60px; }
.connexion { max-width: 420px; }
.tableau-defile { overflow-x: auto; border-radius: 16px; box-shadow: var(--ombre); }
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: .92rem; min-width: 900px; }
.tableau th { text-align: left; background: var(--ocean); color: var(--blanc); padding: 12px; font-weight: 600; white-space: nowrap; }
.tableau td { padding: 12px; border-bottom: 1px solid rgba(10,58,82,.08); vertical-align: top; }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau small { color: var(--encre-douce); }
.tableau tr.annulee td { opacity: .45; text-decoration: line-through; }
.tableau tr.passee td { opacity: .65; }
.pastille { display: inline-block; font-size: .75rem; font-weight: 700; padding: .25em .7em; border-radius: 999px; white-space: nowrap; }
.pastille.ok { background: #d5f3e1; color: #17643a; } .pastille.ko { background: #fde3dc; color: #8a2a12; }
.btn-lien { background: none; border: 0; padding: 0; color: var(--lagune); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.btn-lien.rouge { color: var(--corail-fonce); }

/* ---------- Pied de page ---------- */
.pied { background: var(--ocean); color: rgba(255,255,255,.85); position: relative; margin-top: 60px; }
.vagues-pied { position: absolute; top: -40px; left: 0; right: 0; height: 42px; background: radial-gradient(circle at 30px -10px, transparent 32px, var(--ocean) 33px) 0 0 / 60px 42px repeat-x; }
.pied-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; padding: 60px var(--gouttiere-d) 30px var(--gouttiere-g); }
.pied-in > * { min-width: 0; }
.pied h3 { color: var(--blanc); font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; font-family: var(--f-texte); }
.pied a { color: var(--soleil); overflow-wrap: anywhere; }
.pied-logo { font: 800 2.2rem/1 var(--f-titre); color: var(--blanc); letter-spacing: -.03em; }
.pied .manuscrit { color: var(--soleil); }
.pied-bas { text-align: center; font-size: .85rem; opacity: .6; margin: 0; padding: 18px var(--gouttiere-d) calc(18px + env(safe-area-inset-bottom, 0px)) var(--gouttiere-g); border-top: 1px solid rgba(255,255,255,.1); }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr; } }

/* ---------- Bouton WhatsApp ---------- */
.whatsapp {
  position: fixed; z-index: 40; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px; background: #25d366; color: #0b3b22; text-decoration: none; font-weight: 700;
  padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 12px 28px -10px rgba(0,0,0,.4);
  animation: entree-wa .6s 1.5s both cubic-bezier(.3,1.6,.5,1);
}
.whatsapp svg { width: 26px; height: 26px; fill: currentColor; }
.whatsapp:hover { transform: scale(1.05); }
@keyframes entree-wa { from { transform: scale(0); } to { transform: scale(1); } }
@media (max-width: 520px) { .whatsapp span { display: none; } .whatsapp { padding: 14px; } }

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

/* ---------- Vidéo drone du hero ---------- */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-voile { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(8, 42, 60, .78) 0%, rgba(8, 42, 60, .45) 45%, rgba(8, 42, 60, .05) 80%),
  linear-gradient(180deg, rgba(8, 42, 60, .45) 0%, transparent 30%); }
.hero .hero-photo::after { display: none; }
.hero-titre .mot { text-shadow: 0 6px 40px rgba(0, 0, 0, .25); }

/* ---------- Galerie ---------- */
.galerie-section { padding-bottom: 0; }
.mosaique {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 15vw, 210px); grid-auto-flow: dense;
  gap: 8px; margin-top: 2.2rem; padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d);
}
.tuile { position: relative; border: 0; padding: 0; cursor: zoom-in; overflow: hidden; border-radius: 14px; background: var(--ecume); min-width: 0; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .4s; }
.tuile:hover img { transform: scale(1.08); }
.mosaique:hover .tuile:not(:hover) img { filter: saturate(.6) brightness(.85); }
.t1 { grid-column: span 3; grid-row: span 2; }
.t5, .t11 { grid-column: span 2; grid-row: span 2; }
.t7 { grid-column: span 2; }
.t9 { grid-row: span 2; }
@media (max-width: 760px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .t1 { grid-column: span 2; } .t5, .t11 { grid-column: span 2; grid-row: span 1; } .t7 { grid-column: span 1; }
}
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(6, 25, 36, .94); display: flex; align-items: center; justify-content: center;
  padding: calc(20px + env(safe-area-inset-top, 0px)) max(56px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(56px, env(safe-area-inset-left, 0px));
  animation: fondu .3s; }
.visionneuse img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: zoom-in .35s cubic-bezier(.2,.8,.2,1); }
.visionneuse button { position: absolute; background: rgba(255,255,255,.12); color: var(--blanc); border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.visionneuse button:hover { background: var(--corail); }
.v-fermer { top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.v-prec { left: calc(6px + env(safe-area-inset-left, 0px)); } .v-suiv { right: calc(6px + env(safe-area-inset-right, 0px)); }
@keyframes fondu { from { opacity: 0; } }
@keyframes zoom-in { from { transform: scale(.92); opacity: 0; } }

/* ---------- Activités ---------- */
.activites-liste { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ocean); }
.activites-liste li { display: grid; gap: 2px; padding: 22px 18px 22px 0; border-bottom: 1px solid rgba(10,58,82,.15); min-width: 0; transition: padding .3s, background .3s; }
.activites-liste li:hover { padding-left: 14px; background: var(--ecume); }
.activites-liste strong { font: 700 1.3rem/1.15 var(--f-titre); color: var(--ocean); }
.activites-liste span { color: var(--encre-douce); font-size: .95rem; }
@media (max-width: 900px) { .activites-liste { grid-template-columns: 1fr 1fr; } }

/* ---------- Bars ---------- */
.bars { background: var(--sable); }
.bars-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.bar { min-width: 0; }
.bar-visuel { aspect-ratio: 3/2; margin-bottom: 1.4rem; box-shadow: var(--ombre); }
.bar p:last-child { color: var(--encre-douce); max-width: 46ch; }
@media (max-width: 760px) { .bars-grille { grid-template-columns: 1fr; } }

/* ---------- Règles ---------- */
.regles { position: relative; z-index: 1; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
.regles summary { cursor: pointer; font-weight: 600; color: var(--soleil); }
.regles ul { margin: 10px 0 0; padding-left: 1.1em; font-size: .88rem; color: rgba(255,255,255,.85); display: grid; gap: 6px; }
.pied-devise { text-transform: uppercase; letter-spacing: .3em; font-size: .75rem; color: rgba(255,255,255,.6); margin-top: -.4em; }
.visionneuse[hidden], [hidden] { display: none !important; }

/* ---------- Noms des chambres ---------- */
.noms-chambres { display: flex; flex-wrap: wrap; gap: 6px; margin: -.2em 0 .9em; }
.noms-chambres span { font: 700 .82rem/1 var(--f-titre); letter-spacing: .02em; color: var(--blanc); background: var(--ocean); padding: .45em .8em; border-radius: 999px; }
.noms-chambres.grand span { font-size: .95rem; padding: .5em 1em; }
.chambre-detail:nth-of-type(odd) .noms-chambres span { background: var(--lagune); }

/* ---------- Bouton musique ---------- */
.btn-son {
  position: absolute; z-index: 4; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 150px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 600 .95rem/1 var(--f-texte); color: var(--blanc);
  background: rgba(8, 42, 60, .55); backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.75); border-radius: 999px; padding: .75em 1.2em;
  animation: monte .9s .8s both, appel-son 2.4s 2s ease-in-out 3;
  transition: background .2s;
}
.btn-son:hover { background: var(--corail); border-color: var(--corail); }
.son-barres { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.son-barres i { width: 3px; height: 4px; background: var(--soleil); border-radius: 2px; transition: height .2s; }
.btn-son[aria-pressed="true"] .son-barres i { animation: egaliseur .9s ease-in-out infinite; }
.btn-son[aria-pressed="true"] .son-barres i:nth-child(2) { animation-delay: -.3s; }
.btn-son[aria-pressed="true"] .son-barres i:nth-child(3) { animation-delay: -.6s; }
.btn-son[aria-pressed="true"] .son-barres i:nth-child(4) { animation-delay: -.15s; }
@keyframes egaliseur { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes appel-son { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 61, .6); } 50% { box-shadow: 0 0 0 12px rgba(255, 194, 61, 0); } }
@media (max-width: 760px) { .btn-son { bottom: 130px; padding: .65em 1em; font-size: .88rem; } }

/* ---------- Nom écrit comme sur le logo ---------- */
:root { --marron: #82502b; --f-script: "Yellowtail", "Brush Script MT", cursive; }
.marque { white-space: nowrap; }
.marque b { font-family: var(--f-titre); font-weight: 800; letter-spacing: .01em; }
.marque i { font-family: var(--f-script); font-style: normal; font-weight: 400; letter-spacing: 0; font-size: 1.08em; margin-left: .05em; }
h2 .marque i, h1 .marque i { font-size: 1.15em; }
.marque-entete { font-size: 1.3rem; line-height: 1; }
.marque-entete b { color: inherit; }
.marque-entete i { color: var(--soleil); font-size: 1.25em; position: relative; top: .08em; }
.entete.solide .marque-entete b, body:not(.page-accueil) .marque-entete b { color: var(--marron); }
.entete.solide .marque-entete i, body:not(.page-accueil) .marque-entete i { color: var(--marron); }
.logo-timbre { width: 44px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.logo:hover .logo-timbre { transform: rotate(-6deg) scale(1.08); }
.hero-titre .mot.script { font-family: var(--f-script); font-weight: 400; font-style: normal; letter-spacing: 0; font-size: .92em; transform-origin: left bottom; display: inline-block; margin-left: .08em; }
.hero-titre .mot.script { animation: monte 1s .15s cubic-bezier(.2,.9,.2,1) both, penche 1.2s 1.1s ease-out both; }
@keyframes penche { from { rotate: 0deg; } to { rotate: -6deg; } }
.pied-timbre { width: 130px; height: auto; margin-bottom: 14px; transform: rotate(-4deg); filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.pied .marque i { color: var(--soleil); }
.confirm-carte .marque, .acces .marque { color: var(--marron); }
.bar .marque { color: var(--marron); }

/* ---------- Panneau du parking ---------- */
.panneau { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; margin: 1.6rem 0 1.8rem; background: var(--blanc); border-radius: var(--rayon); padding: 12px 20px 12px 12px; box-shadow: var(--ombre); }
.panneau img { width: 150px; height: 190px; object-fit: cover; border-radius: 14px; transform: rotate(-2deg); transition: transform .4s; cursor: zoom-in; }
.panneau img:hover { transform: rotate(0) scale(1.04); }
.panneau figcaption { display: grid; gap: 6px; min-width: 0; }
.panneau strong { font: 700 1.2rem/1.2 var(--f-titre); color: var(--corail); }
.panneau span { color: var(--encre-douce); font-size: .97rem; }
.panneau b { color: var(--ocean); }
@media (max-width: 480px) { .panneau { grid-template-columns: 110px 1fr; } .panneau img { width: 110px; height: 150px; } }

/* =========================================================
   Couleurs du logo : TIKINA Beach en marron sur crème,
   cadre jaune puis marron comme le timbre
   ========================================================= */
:root { --marron: #82502b; --jaune-logo: #ebd158; --creme-logo: #f8f2f2; }
.marque b, .marque i { color: var(--marron) !important; }

/* En-tête toujours crème pour que le nom reste marron et lisible */
.entete, .entete.solide, body:not(.page-accueil) .entete { background: rgba(248, 242, 242, .95); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(130, 80, 43, .15); }
.entete .nav a:not(.btn) { color: var(--encre) !important; }
.entete .nav a:not(.btn):hover { background: var(--sable) !important; }
.entete .burger span { color: var(--marron) !important; }

/* Grand titre de l'accueil dans un cartouche façon timbre */
.hero-titre {
  display: inline-block; font-size: clamp(3rem, 10vw, 7.6rem); line-height: .9; margin: .15em 0 .35em;
  background: var(--creme-logo); padding: .18em .35em .22em; border-radius: 10px;
  box-shadow: inset 0 0 0 6px var(--creme-logo), inset 0 0 0 10px var(--jaune-logo), 0 0 0 10px var(--marron), 0 24px 50px -18px rgba(0,0,0,.6);
  transform: rotate(-2deg); transform-origin: left center;
  animation: timbre .9s cubic-bezier(.3,1.5,.5,1) both;
}
@keyframes timbre { from { transform: rotate(-12deg) scale(.6); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
.hero-titre .mot { color: var(--marron); text-shadow: none; animation: none; }
.hero-titre .mot.accent, .hero-titre .mot.script { color: var(--marron); animation: penche 1.2s 1s ease-out both; }
.hero-sur { margin-bottom: 1.2em; }
@media (max-width: 760px) { .hero-titre { box-shadow: inset 0 0 0 5px var(--creme-logo), inset 0 0 0 8px var(--jaune-logo), 0 0 0 7px var(--marron), 0 18px 40px -16px rgba(0,0,0,.6); } }

/* =========================================================
   Choix de la chambre par son nom
   ========================================================= */
.groupe-chambres { border: 2px solid rgba(10,58,82,.1); border-radius: 18px; padding: 16px; background: var(--sable-clair); display: grid; gap: 12px; transition: border-color .3s, background .3s; }
.groupe-chambres.demande { border-color: var(--corail); }
.groupe-chambres.vide { opacity: .6; }
.groupe-tete { display: grid; gap: 2px; }
.groupe-tete strong { font: 700 1.15rem/1.2 var(--f-titre); }
.unites { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.unite { position: relative; cursor: pointer; display: block; }
.unite input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.unite-corps { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; border-radius: 14px; background: var(--blanc); border: 2px solid rgba(10,58,82,.14); transition: transform .25s cubic-bezier(.3,1.6,.5,1), border-color .2s, background .2s; }
.unite-nom { font: 700 1.05rem/1.1 var(--f-titre); color: var(--ocean); }
.unite:hover .unite-corps { transform: translateY(-3px); }
.unite input:focus-visible + .unite-corps { box-shadow: 0 0 0 3px var(--soleil); }
.unite.libre .unite-corps { border-color: #7fcf9f; }
.unite.choisie .unite-corps { background: var(--lagune); border-color: var(--lagune); transform: translateY(-3px); }
.unite.choisie .unite-nom { color: var(--blanc); }
.unite.choisie .badge-dispo { background: var(--blanc); }
.unite.choisie .unite-corps::after { content: "✓ Choisie"; font-size: .75rem; font-weight: 700; color: var(--blanc); }
.unite.choisie .badge-dispo { display: none; }
.unite.occupee, .unite.trop-petite { cursor: not-allowed; }
.unite.occupee .unite-corps, .unite.trop-petite .unite-corps { opacity: .5; transform: none; background: transparent; }
.unite.occupee .unite-nom { text-decoration: line-through; }
.info-alerte { color: var(--corail-fonce); font-weight: 600; }

/* Noms cliquables sur les pages chambres */
.noms-chambres a { font: 700 .82rem/1 var(--f-titre); letter-spacing: .02em; color: var(--blanc); background: var(--ocean); padding: .45em .8em; border-radius: 999px; text-decoration: none; transition: background .2s, transform .2s; }
.noms-chambres.grand a { font-size: .95rem; padding: .5em 1em; }
.noms-chambres a:hover { background: var(--corail); transform: translateY(-2px); }
.chambre-detail:nth-of-type(odd) .noms-chambres a { background: var(--lagune); }
.chambre-detail:nth-of-type(odd) .noms-chambres a:hover { background: var(--corail); }

/* =========================================================
   Accueil : TIKINA Beach défile en travers de la vidéo
   ========================================================= */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero { flex-direction: column; justify-content: center; align-items: stretch; gap: 0; }
.hero-defile { position: relative; z-index: 2; width: calc(100% + 40px); margin: 0 -20px 1.4rem; overflow: hidden; pointer-events: none; }
.hero-defile-piste { display: flex; align-items: center; gap: .35em; width: max-content; animation: defile-nom 32s linear infinite; font-size: clamp(4rem, 13vw, 10.5rem); line-height: 1.05; padding-block: .05em .12em; }
.defile-mot { display: inline-flex; align-items: baseline; gap: .12em; white-space: nowrap; }
.defile-mot b { font-family: var(--f-titre); font-weight: 800; letter-spacing: -.01em; color: var(--creme-logo); -webkit-text-stroke: .045em var(--marron); paint-order: stroke fill; text-shadow: 0 .06em .18em rgba(0,0,0,.35); }
.defile-mot i { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: .9em; color: var(--jaune-logo); -webkit-text-stroke: .04em var(--marron); paint-order: stroke fill; transform: rotate(-6deg); display: inline-block; text-shadow: 0 .06em .18em rgba(0,0,0,.35); }
.defile-etoile { color: var(--jaune-logo); font-size: .35em; -webkit-text-stroke: .05em var(--marron); paint-order: stroke fill; }
@keyframes defile-nom { to { transform: translateX(-50%); } }
.hero-texte { margin-top: 0; }
.hero .hero-sur { order: -1; position: relative; z-index: 2; max-width: 1200px; margin: 0 auto .4rem; width: 100%; }
@media (prefers-reduced-motion: reduce) { .hero-defile-piste { animation: none; transform: none; } }

/* =========================================================
   Pré-réservation : page de confirmation
   ========================================================= */
.etat-attente { display: inline-flex; align-items: center; gap: 10px; background: #fff3d1; color: #7a5300; font-weight: 600; padding: .6em 1.1em; border-radius: 999px; }
.etat-attente span { width: 10px; height: 10px; border-radius: 50%; background: #e0a100; animation: pouls 1.4s ease-in-out infinite; }
@keyframes pouls { 50% { transform: scale(1.6); opacity: .4; } }

/* =========================================================
   Espace gérant
   ========================================================= */
.section-admin { padding-top: 120px; }
.compteurs { display: flex; flex-wrap: wrap; gap: 10px; margin: -1rem 0 1.5rem; }
.compteur { padding: .55em 1.1em; border-radius: 999px; font-weight: 600; }
.compteur b { font: 800 1.2rem/1 var(--f-titre); margin-right: .2em; }
.compteur.attente { background: #fff3d1; color: #7a5300; }
.compteur.ok { background: #d5f3e1; color: #17643a; }
.liste-resas { display: grid; gap: 16px; }
.resa-carte { background: var(--blanc); border-radius: 18px; padding: 20px 22px; box-shadow: var(--ombre); border-left: 6px solid #ccc; display: grid; gap: 14px; }
.resa-carte.statut-en-attente { border-left-color: #e0a100; }
.resa-carte.statut-confirmee { border-left-color: #2e9e5b; }
.resa-carte.statut-refusee, .resa-carte.statut-annulee { border-left-color: #c9c9c9; opacity: .65; }
.resa-carte.passee { opacity: .7; }
.resa-haut { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.pastille-statut { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .35em .8em; border-radius: 999px; background: #eee; color: #555; }
.statut-en-attente .pastille-statut { background: #fff3d1; color: #7a5300; }
.statut-confirmee .pastille-statut { background: #d5f3e1; color: #17643a; }
.statut-refusee .pastille-statut, .statut-annulee .pastille-statut { background: #fde3dc; color: #8a2a12; }
.resa-ref { font-variant-numeric: tabular-nums; color: var(--encre-douce); font-size: .9rem; }
.resa-grille-infos { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; }
.resa-grille-infos > * { min-width: 0; }
.resa-client { font: 700 1.3rem/1.2 var(--f-titre); margin: 0 0 4px; }
.resa-contact { color: var(--encre-douce); margin: 0; overflow-wrap: anywhere; }
.resa-message { margin: 10px 0 0; font-style: italic; color: var(--encre-douce); }
.resa-sejour { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; }
.resa-sejour dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--encre-douce); }
.resa-sejour dd { margin: 0; font-variant-numeric: tabular-nums; }
.resa-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px dashed rgba(10,58,82,.15); }
.resa-actions form { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-valider { background: #2e9e5b; color: var(--blanc); padding: .8em 1.4em; }
.btn-valider:hover { background: #237a46; }
.btn-refuser { background: transparent; color: var(--corail-fonce); box-shadow: inset 0 0 0 2px var(--corail-fonce); padding: .75em 1.3em; }
.btn-wa { background: #25d366; color: #0b3b22; padding: .8em 1.3em; margin-left: auto; }
@media (max-width: 700px) {
  .resa-grille-infos { grid-template-columns: 1fr; }
  .btn-wa { margin-left: 0; }
}

.pied-bas .lien-gerant { color: rgba(255,255,255,.75); text-decoration: underline; }
.pied-bas .lien-gerant:hover { color: var(--soleil); }
.admin-liens { display: flex; gap: 20px; flex-wrap: wrap; }
.connexion { padding-top: 120px; }
.connexion form { margin-top: 1rem; }

/* =========================================================
   Espace gérant : navigation, tableau de bord, restaurant
   ========================================================= */
.admin-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 1.4rem; padding-bottom: 12px; border-bottom: 1px solid rgba(10,58,82,.12); }
.admin-titre .surtitre { margin-bottom: .5em; }
.admin-onglets { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-onglets a { text-decoration: none; color: var(--encre); font-weight: 600; padding: .55em .95em; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; }
.admin-onglets a:hover { background: var(--sable); }
.admin-onglets a[aria-current="page"] { background: var(--ocean); color: var(--blanc); }
.pastille-nb { background: #e0a100; color: var(--blanc); font-size: .72rem; min-width: 1.5em; height: 1.5em; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 .4em; }
.pastille-nb.alerte { background: var(--corail-fonce); }
.admin-liens { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-liens a { color: var(--encre-douce); font-size: .92rem; }
.admin-h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 .6rem; }
.sous-titre { font-size: 1.4rem; margin-top: 2rem; }
.lien-retour { color: var(--lagune); font-weight: 600; text-decoration: none; }
.filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.4rem; }
.filtres a { text-decoration: none; color: var(--ocean); font-weight: 600; font-size: .92rem; padding: .45em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(10,58,82,.2); }
.filtres a[aria-current="page"] { background: var(--ocean); color: var(--blanc); box-shadow: none; }
.vide { color: var(--encre-douce); font-style: italic; }
.info { margin: 0 0 1rem; }
.compteur.paiement { background: #e3eefc; color: #1d4f91; }
.compteur.rembourser { background: #fde3dc; color: #8a2a12; }

/* Cartes de réservation : pastilles de paiement */
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille-paiement { font-size: .78rem; font-weight: 700; padding: .35em .8em; border-radius: 999px; background: #e3eefc; color: #1d4f91; }
.pastille-paiement.p-paye { background: #d5f3e1; color: #17643a; }
.pastille-paiement.p-a-rembourser { background: #fde3dc; color: #8a2a12; }
.pastille-paiement.p-rembourse { background: #eee; color: #555; }
.pastille-paiement.retard { background: var(--corail-fonce); color: var(--blanc); }
.form-paiement { display: flex; gap: 8px; align-items: center; }
.form-paiement select { width: auto; padding: .6em .7em; }
.resa-sejour a { color: var(--corail-fonce); font-weight: 600; }

/* Tableau de bord */
.tdb-entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mois-nav { display: flex; align-items: center; gap: 10px; }
.mois-nav a { text-decoration: none; color: var(--ocean); font-weight: 700; }
.mois-nav a[aria-label] { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(10,58,82,.2); font-size: 1.3rem; }
.mois-nav a[aria-label]:hover { background: var(--ocean); color: var(--blanc); }
.mois-nav strong { font: 700 1.15rem/1 var(--f-titre); min-width: 9ch; text-align: center; }
.mois-auj { font-size: .9rem; }
.a-traiter { background: var(--blanc); border-radius: 18px; padding: 18px 22px; box-shadow: var(--ombre); margin: 1rem 0 1.4rem; border-top: 4px solid #e0a100; }
.a-traiter h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.a-traiter ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.a-traiter li a { display: block; text-decoration: none; color: var(--encre); padding: .55em .8em .55em 1.6em; border-radius: 10px; position: relative; }
.a-traiter li a:hover { background: var(--sable-clair); }
.a-traiter li a::before { content: ""; position: absolute; left: .6em; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); background: #999; }
.t-attente a::before { background: #e0a100 !important; }
.t-paiement a::before { background: #3b7bd6 !important; }
.t-retard a::before, .t-rembourser a::before, .t-stock a::before { background: var(--corail-fonce) !important; }
.t-note a::before { background: var(--lagune) !important; }
.kpis { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 12px; margin: 1.2rem 0 1.4rem; }
.kpi { background: var(--blanc); border-radius: 16px; padding: 16px 18px; box-shadow: var(--ombre); display: grid; gap: 4px; align-content: start; min-width: 0; }
.kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--encre-douce); font-weight: 600; }
.kpi-valeur { font: 800 1.5rem/1.1 var(--f-titre); color: var(--ocean); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-detail { font-size: .82rem; color: var(--encre-douce); }
.kpi-principal { background: var(--ocean); }
.kpi-principal .kpi-label, .kpi-principal .kpi-detail { color: rgba(255,255,255,.75); }
.kpi-principal .kpi-valeur { color: var(--soleil); font-size: 1.9rem; }
.kpi-positif .kpi-valeur { color: #237a46; }
.kpi-negatif .kpi-valeur { color: var(--corail-fonce); }
.jauge { display: block; height: 6px; border-radius: 6px; background: var(--ecume); overflow: hidden; margin-top: 4px; }
.jauge span { display: block; height: 100%; background: var(--lagune); border-radius: 6px; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, 1fr); } .kpi-principal { grid-column: span 3; } }
@media (max-width: 620px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi-principal { grid-column: span 2; } }
.tdb-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.carte-tdb { background: var(--blanc); border-radius: 18px; padding: 18px 20px; box-shadow: var(--ombre); min-width: 0; }
.carte-tdb h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.carte-large { grid-column: 1 / -1; }
@media (max-width: 860px) { .tdb-grille { grid-template-columns: 1fr; } }
.carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.legende { font-size: .85rem; color: var(--encre-douce); display: flex; align-items: center; gap: 6px; }
.legende span { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legende .l-re { margin-left: 10px; }
.l-ch, .b-ch { background: var(--lagune); fill: var(--lagune); }
.l-re, .b-re { background: var(--soleil); fill: var(--soleil); }
.graph-defile { overflow-x: auto; }
.graph { width: 100%; min-width: 520px; height: auto; display: block; }
.g-ligne { stroke: rgba(10,58,82,.1); stroke-width: 1; }
.g-txt { font: 500 11px var(--f-texte); fill: var(--encre-douce); font-variant-numeric: tabular-nums; }
.g-fort { font-weight: 700; fill: var(--ocean); }
.g-barre:hover rect { opacity: .8; }
.barres-chambres { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.barres-chambres li { display: grid; grid-template-columns: 90px 1fr 92px; align-items: center; gap: 10px; font-size: .9rem; }
.bc-nom { font-weight: 600; }
.bc-barre { height: 10px; background: var(--ecume); border-radius: 6px; overflow: hidden; }
.bc-barre span { display: block; height: 100%; background: var(--lagune); border-radius: 6px; }
.bc-val { text-align: right; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.liste-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .95rem; }
.liste-simple li { padding-bottom: 8px; border-bottom: 1px dashed rgba(10,58,82,.12); }
.liste-simple a { color: var(--lagune); font-weight: 600; margin-left: 6px; }
.mini-alerte { font-size: .72rem; font-weight: 700; background: #fde3dc; color: #8a2a12; padding: .2em .6em; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.mini-ok { font-size: .75rem; font-weight: 700; background: #d5f3e1; color: #17643a; padding: .2em .6em; border-radius: 999px; }
.mini-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mini-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce); padding: 6px 8px; border-bottom: 1px solid rgba(10,58,82,.15); }
.mini-table td { padding: 8px; border-bottom: 1px solid rgba(10,58,82,.07); vertical-align: middle; }
.mini-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-table tfoot td { font-weight: 700; border-bottom: 0; }
.mini-table .neg { color: var(--corail-fonce); } .mini-table .pos { color: #237a46; }
.ligne-alerte td { background: #fff6f3; }
.encaissee td { color: var(--encre-douce); }

/* Restaurant */
.grille-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.carte-note { display: grid; gap: 4px; text-decoration: none; color: var(--encre); background: var(--blanc); border-radius: 16px; padding: 16px; box-shadow: var(--ombre); border-top: 4px solid var(--lagune); transition: transform .2s; }
.carte-note:hover { transform: translateY(-3px); }
.cn-chambre { font: 800 1.3rem/1.1 var(--f-titre); color: var(--ocean); }
.cn-client { font-weight: 600; }
.cn-dates { font-size: .85rem; color: var(--encre-douce); }
.cn-du { color: var(--corail-fonce); font-weight: 700; margin-top: 6px; }
.cn-ok { color: #237a46; font-weight: 600; margin-top: 6px; }
.cn-vide { color: var(--encre-douce); margin-top: 6px; font-style: italic; }
.note-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 1rem; }
.note-du { background: var(--ocean); color: var(--blanc); border-radius: 16px; padding: 12px 20px; display: grid; text-align: right; }
.note-du span { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.note-du strong { font: 800 1.6rem/1.1 var(--f-titre); color: var(--soleil); font-variant-numeric: tabular-nums; }
.note-grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.note-grille > * { min-width: 0; }
@media (max-width: 860px) { .note-grille { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 14px; }
.encaisser { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(10,58,82,.15); }
.encaisser select { width: auto; }
.table-note form { margin: 0; }

/* Stock et menu */
.ligne-produit { display: grid; grid-template-columns: 100px 90px 50px 70px 50px auto; gap: 8px; align-items: center; margin: 0; }
.ligne-produit input[type=number] { padding: .45em .5em; }
.case { display: flex; justify-content: center; }
.case input { width: 20px; height: 20px; accent-color: var(--lagune); }
.table-menu th:nth-child(n+3) { white-space: nowrap; }
.table-menu tr.inactif td { opacity: .5; }
.table-menu { min-width: 760px; }
.form-nouveau { margin-top: 14px; max-width: 720px; display: grid; gap: 14px; }

/* =========================================================
   Côté client : paiement et conditions
   ========================================================= */
.bloc-paiement { width: 100%; text-align: left; background: var(--blanc); border-radius: 20px; padding: 22px; box-shadow: var(--ombre); border-top: 5px solid var(--soleil); display: grid; gap: 12px; margin-bottom: 1.4rem; }
.bp-montant { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.bp-montant strong { font: 800 1.9rem/1 var(--f-titre); color: var(--ocean); font-variant-numeric: tabular-nums; }
.bp-numeros { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bp-numeros li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--sable-clair); padding: 10px 14px; border-radius: 12px; }
.bp-numeros strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bp-ref { margin: 0; }
.bp-alerte { margin: 0; color: var(--corail-fonce); font-weight: 600; font-size: .95rem; }
.conditions { width: 100%; text-align: left; background: var(--sable); border-radius: 18px; padding: 18px 22px; margin: 1rem 0 1.4rem; display: grid; gap: 10px; }
.conditions h2 { font-size: 1.15rem; margin: 0; }
.conditions p { margin: 0; }
.conditions .form-confirmer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.etapes-reglement { background: var(--blanc); border-radius: var(--rayon); padding: 20px 24px; box-shadow: var(--ombre); }
.etapes-reglement h3 { font-size: 1.15rem; }
.etapes-reglement ol { margin: 0 0 .8em; padding-left: 1.3em; display: grid; gap: 6px; }
.etapes-reglement p { margin: 0; font-weight: 600; color: var(--ocean); }
.tableau-defile, .resa-actions, .ligne-produit, .case { position: relative; }
.admin-h1 + .compteurs { margin-top: .4rem; }
.a-traiter li.t-stock a { line-height: 1.5; }
.ligne-produit.sans-stock { grid-template-columns: 100px 90px 50px auto; }
.sans-stock + * { }
.table-menu input[type=number] { width: 100px; padding: .45em .5em; text-align: right; }
.table-menu td.case { text-align: center; }
.table-menu td.case input { width: 20px; height: 20px; accent-color: var(--lagune); }
.table-menu th:nth-child(n+3) { text-align: center; }
.table-menu form { margin: 0; }
.table-menu td.case { display: table-cell; vertical-align: middle; position: static; }

/* Trésorerie */
.solde-bandeau { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; text-decoration: none; color: var(--blanc); background: linear-gradient(90deg, var(--lagune), var(--ocean)); border-radius: 18px; padding: 16px 22px; margin: 1rem 0 0; box-shadow: var(--ombre); }
.solde-bandeau span:first-child { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.solde-bandeau strong { font: 800 1.8rem/1 var(--f-titre); color: var(--soleil); font-variant-numeric: tabular-nums; }
.solde-bandeau strong.neg { color: #ffb4a3; }
.sb-lien { margin-left: auto; font-weight: 600; }
.treso-haut { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .treso-haut { grid-template-columns: 1fr 1fr; } .treso-haut .kpi-principal { grid-column: span 2; } }
.solde-initial { max-width: 760px; display: grid; gap: 12px; border-top: 5px solid var(--soleil); }
#modif-depart { max-width: 760px; margin-bottom: 14px; display: grid; gap: 12px; }
#modif-depart[hidden] { display: none !important; }
.table-journal td { vertical-align: top; }
.source { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .2em .55em; border-radius: 6px; margin-right: 4px; background: #eee; color: #555; }
.s-chambre { background: #d5f3e1; color: #17643a; }
.s-restaurant { background: #fff3d1; color: #7a5300; }
.s-depense, .s-remboursement { background: #fde3dc; color: #8a2a12; }
.s-manuel { background: #e3eefc; color: #1d4f91; }
.ligne-depart td { background: var(--sable-clair); font-style: italic; }

/* Paramètres des mails */
.admin-liens a[aria-current="page"] { color: var(--ocean); font-weight: 700; }
.etat-mail { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; margin: 0 0 1rem; }
.etat-mail::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.etat-mail.ok { background: #d5f3e1; color: #17643a; } .etat-mail.ok::before { background: #2e9e5b; }
.etat-mail.off { background: #fff3d1; color: #7a5300; } .etat-mail.off::before { background: #e0a100; }
.etat-mail code { font-size: .9em; overflow-wrap: anywhere; }
.etat-mail > span { min-width: 0; }
.avance summary { cursor: pointer; font-weight: 600; color: var(--lagune); margin-bottom: 10px; }
.avance { display: grid; gap: 10px; }
.etapes-yahoo { margin: 0 0 .8em; padding-left: 1.3em; display: grid; gap: 8px; }
.effacer-mdp { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.liste-mails ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.table-journal td:first-child { white-space: nowrap; }

/* Comptes */
.comptes { margin-bottom: 1.6rem; }
.comptes-grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.comptes-grille > * { min-width: 0; }
.compte { background: var(--sable-clair); border-radius: 14px; padding: 16px; display: grid; gap: 10px; align-content: start; }
.compte-titre { font: 700 1.15rem/1.2 var(--f-titre); margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.compte .aide { margin: 0; }
.compte .btn { justify-self: start; }
@media (max-width: 760px) { .comptes-grille { grid-template-columns: 1fr; } }

/* Bouton Espace de gestion dans l'en-tête */
.btn-gestion { background: transparent; color: var(--marron) !important; box-shadow: inset 0 0 0 2px var(--marron); }
.btn-gestion:hover, .btn-gestion[aria-current="page"] { background: var(--marron); color: var(--creme-logo) !important; }
@media (max-width: 1080px) and (min-width: 821px) { .nav a:not(.btn) { padding: .55em .6em; } .nav .btn-petit { padding: .65em .9em; font-size: .88rem; } }
@media (max-width: 820px) { .nav .btn-gestion { margin-top: 4px; } }

/* Connexion : choix du compte */
.choix-compte { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix-compte legend { font-weight: 600; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.compte-option { cursor: pointer; position: relative; }
.compte-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.compte-option span { display: grid; gap: 2px; padding: 14px; border-radius: 14px; border: 2px solid rgba(10,58,82,.15); background: var(--blanc); transition: border-color .2s, background .2s; }
.compte-option small { color: var(--encre-douce); font-weight: 400; }
.compte-option input:checked + span { border-color: var(--lagune); background: var(--ecume); }
.compte-option input:focus-visible + span { box-shadow: 0 0 0 3px var(--soleil); }
.connexion .aide { margin-top: 1rem; }

/* Compte connecté */
.connecte-comme { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 .6rem; font-size: .9rem; padding: .35em .9em; border-radius: 999px; }
.connecte-comme::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.connecte-admin { background: #e3eefc; color: #1d4f91; } .connecte-admin::before { background: #3b7bd6; }
.connecte-gerant { background: #fff3d1; color: #7a5300; } .connecte-gerant::before { background: #e0a100; }
.lien-deconnexion { font-weight: 700; color: var(--corail-fonce) !important; }
.connexion { max-width: 480px; } .connexion h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
/* L'en-tête ne doit pas emprisonner le menu mobile (backdrop-filter crée un cadre) */
.entete, .entete.solide, body:not(.page-accueil) .entete { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--creme-logo); }
.version { font-size: .75rem; color: var(--encre-douce); opacity: .8; align-self: center; }
.carte-note.futur { border-top-color: var(--soleil); } .cn-vide { color: var(--lagune) !important; font-style: normal !important; font-weight: 600; }
/* En-tête réduit du gérant */
.nav-gerant { display: flex !important; gap: 8px; position: static !important; clip-path: none !important; background: none !important; padding: 0 !important; flex-direction: row !important; }
.nav-gerant .btn { font-size: .95rem !important; }
.note-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* =====================================================================
   Téléphones (Android et iPhone)
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, select, label { -webkit-tap-highlight-color: rgba(10, 58, 82, .12); }
button, .btn, .admin-onglets a { touch-action: manipulation; }
.date-mobile { display: none; }

@media (max-width: 640px) {
  /* Hauteur d'écran correcte sur iPhone (barre d'adresse) */
  .hero { min-height: min(92svh, 820px); }

  /* Noms des chambres : plus faciles à toucher */
  .noms-chambres a, .noms-chambres.grand a { padding: .7em 1.05em; font-size: .9rem; }
  .noms-chambres { gap: 8px; }

  /* Espace de gestion : moins d'espace perdu en haut, liens faciles à toucher */
  .section-admin { padding-top: 96px; }
  .admin-tete { gap: 10px; }
  .admin-onglets a { padding: .7em .95em; }
  .admin-liens { gap: 4px 18px; align-items: center; }
  .admin-liens a { display: inline-block; padding: .6em 0; }
  .admin-h1 { font-size: 1.9rem; }
  .kpi-valeur { font-size: 1.25rem; }
  .kpi-principal .kpi-valeur { font-size: 1.6rem; }
  .btn-lien { padding: .55em 0; }

  /* Note du restaurant : la date passe sous l'article, tout tient dans l'écran */
  .table-note .col-date { display: none; }
  .table-note .date-mobile { display: block; font-size: .75rem; color: var(--encre-douce); margin-top: 2px; }
  .table-note th, .table-note td { padding: 8px 5px; }
  .table-note td:last-child { text-align: right; }
  .encaisser { flex-wrap: wrap; }
  .encaisser .btn { width: 100%; justify-content: center; }

  /* Menu et prix : une fiche par produit au lieu d'un tableau trop large */
  .tableau-menu { overflow: visible; box-shadow: none; border-radius: 0; }
  .table-menu { min-width: 0; }
  .table-menu thead { display: none; }
  .table-menu, .table-menu tbody { display: block; }
  .table-menu tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-items: end;
    background: var(--blanc); border-radius: 14px; padding: 14px; margin-bottom: 10px;
    box-shadow: 0 4px 14px -8px rgba(10, 58, 82, .25);
  }
  .table-menu td { display: block; padding: 0; border: 0; text-align: left; }
  .table-menu td.m-nom { grid-column: 1 / -1; font-weight: 700; font-size: 1rem; }
  .table-menu td.m-cat { grid-column: 1 / -1; font-size: .82rem; color: var(--encre-douce); margin-top: -4px; }
  .table-menu td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); margin-bottom: 4px; }
  .table-menu td.num { text-align: left; }
  .table-menu input[type=number] { width: 100%; padding: .6em .7em; text-align: left; }
  .table-menu td.case { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  .table-menu td.case input { width: 26px; height: 26px; }
  .table-menu td.m-enr { align-self: end; justify-self: end; }
  .table-menu td.m-enr .btn-lien { padding: .6em 0; font-size: 1rem; }
  .table-menu tr.inactif td { opacity: 1; }
  .table-menu tr.inactif { opacity: .55; }
}
/* Gérant sur téléphone : les boutons de l'en-tête sont déjà sous le logo (onglets) */
@media (max-width: 820px) { .nav.nav-gerant { display: none !important; } }

/* ---------- Prix et promotions ---------- */
.tarifs-grille { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin: 1rem 0 16px; align-items: start; }
@media (max-width: 900px) { .tarifs-grille { grid-template-columns: 1fr; } }
.tarif-type { display: grid; gap: 8px; }
.tarif-type-nom { font-weight: 700; color: var(--ocean); margin: 0; }
.tarif-chambres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.champ-fcfa { position: relative; display: block; }
.champ-fcfa input { padding-right: 4.2em; }
.champ-fcfa > span { position: absolute; right: .9em; top: 50%; transform: translateY(-50%); color: var(--encre-douce); font-weight: 500; font-size: .85rem; pointer-events: none; }
.sim-resultat { background: var(--ecume); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; }
.sim-resultat p { margin: 0; }
.sim-nuits { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .9rem; max-height: 220px; overflow: auto; }
.sim-nuits li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed rgba(10,58,82,.15); padding: 3px 0; }
.sim-total { font: 800 1.2rem/1.2 var(--f-titre); color: var(--ocean); }
.liste-promos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.promo { border-radius: 14px; padding: 14px 16px; background: var(--sable-clair); border-left: 5px solid var(--lagune); display: grid; gap: 4px; }
.promo-a-venir { border-left-color: #e0a100; }
.promo-terminee, .promo-desactivee { border-left-color: #bbb; opacity: .75; }
.promo-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.promo-en-cours .pastille-statut { background: #d5f3e1; color: #17643a; }
.promo-a-venir .pastille-statut { background: #fff3d1; color: #7a5300; }
.pastille-code { font: 700 .78rem/1 ui-monospace, monospace; background: var(--ocean); color: var(--blanc); padding: .4em .7em; border-radius: 8px; letter-spacing: .05em; }
.promo-texte { margin: 0; font-weight: 600; }
.promo-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.promo-actions form { margin: 0; }
.form-promo { margin-top: 16px; }
.form-promo fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.form-promo legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 8px; }
.choix-type-promo { grid-template-columns: repeat(3, 1fr); gap: 10px !important; }
@media (max-width: 760px) { .choix-type-promo { grid-template-columns: 1fr; } }
.radio-carte { cursor: pointer; position: relative; display: block; }
.radio-carte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-carte > span { display: grid; gap: 4px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid rgba(10,58,82,.15); background: var(--blanc); }
.radio-carte small { color: var(--encre-douce); font-weight: 400; font-size: .84rem; }
.radio-carte input:checked + span { border-color: var(--lagune); background: var(--ecume); }
.radio-carte input:focus-visible + span { box-shadow: 0 0 0 3px var(--soleil); }
label.case { display: flex; justify-content: flex-start; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; min-height: 40px; }
label.case input { width: 22px; height: 22px; flex: none; accent-color: var(--lagune); }
.case-bas { align-self: end; }
.liste-cases { display: grid; gap: 4px; padding-left: 4px; }
.liste-cases[hidden] { display: none !important; }
.cases { display: flex; flex-wrap: wrap; gap: 0 20px; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 10px; }

/* Promotions sur le site public */
.bandeau-promo { display: grid; gap: 4px; background: linear-gradient(120deg, var(--corail), #f08a4b); color: var(--blanc); border-radius: 14px; padding: 10px 14px; margin: 0 0 .9em; }
.bandeau-promo strong { font: 800 .95rem/1.2 var(--f-titre); letter-spacing: .02em; }
.bandeau-promo span { font-size: .88rem; }
.prix-a-partir { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce); }
.promos-resa { display: grid; gap: 8px; margin: 0 0 1rem; }
.recap-promo { color: var(--soleil); font-size: .9rem; }
.recap-barre { text-decoration: line-through; opacity: .7; font-size: .9rem; margin-right: 6px; }
.choix-total s { opacity: .65; margin-right: 4px; }
.choix-total .gain { color: var(--corail-fonce); font-weight: 700; }

/* ---------- Menu et prix : par catégorie ---------- */
.menu-ancres { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--sable-clair); padding-block: 8px; }
.menu-ancres .ancre-ajout { background: var(--lagune); color: var(--blanc); box-shadow: none; }
.cat-admin { margin-bottom: 14px; scroll-margin-top: 150px; }
.cat-admin-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.cat-admin-tete h2 { margin: 0; }
.cat-actions { display: flex; gap: 4px; margin: 0; }
.btn-icone { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid rgba(10,58,82,.2); background: var(--blanc); color: var(--ocean); font: 700 1rem/1 var(--f-texte); cursor: pointer; display: inline-grid; place-items: center; }
.btn-icone:hover:not(:disabled) { background: var(--ecume); }
.btn-icone:disabled { opacity: .3; cursor: default; }
.renommer summary { cursor: pointer; color: var(--lagune); font-weight: 600; font-size: .92rem; list-style: none; padding: .4em 0; }
.renommer summary::-webkit-details-marker { display: none; }
.renommer[open] summary { color: var(--encre-douce); }
.renommer-form { display: flex; gap: 6px; margin-top: 6px; }
.renommer-form input { padding: .5em .7em; }
.lignes-plats { display: grid; gap: 0; }
.ligne-plat { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 132px 104px 104px 100px 272px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(10,58,82,.08); margin: 0; scroll-margin-top: 150px; }
.ligne-plat input, .ligne-plat select { padding: .5em .6em; font-size: .95rem; }
.ligne-plat .champ-fcfa input { padding-right: 1.8em; text-align: right; }
.ligne-plat .champ-fcfa > span { right: .6em; }
.ligne-plat label { gap: 2px; }
.ligne-plat .lp-lib { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ligne-plat label.case { min-height: 0; font-size: .85rem; white-space: nowrap; }
.ligne-plat.inactif > :not(.lp-actions):not(.lp-actif):not(input) { opacity: .45; }
.ligne-entete { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce); font-weight: 600; padding-top: 0; }
.lp-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp-actions .btn-petit { padding: .5em .9em; font-size: .88rem; }
.lp-actions .suppr { display: inline-flex; }
@media (min-width: 1100px) { .ligne-plat:has(.lp-stock) { grid-template-columns: minmax(0,2fr) minmax(0,1.3fr) 140px 104px 104px 110px 80px 100px 236px; } }
@media (max-width: 1099px) {
  .ligne-entete { display: none; }
  .ligne-plat { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 0; }
  .ligne-plat .lp-lib { position: static; width: auto; height: auto; clip: auto; font-size: .78rem; color: var(--encre-douce); font-weight: 600; }
  .lp-nom, .lp-desc { grid-column: 1 / -1; }
  .lp-cat { grid-column: 1 / -1; }
  .lp-actions { grid-column: 1 / -1; }
  .ligne-plat label.case { font-size: .92rem; min-height: 40px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .ligne-plat { grid-template-columns: 2fr 1.4fr 1fr 1fr; }
  .lp-nom { grid-column: span 2; } .lp-desc { grid-column: span 2; }
  .lp-cat { grid-column: span 2; }
  .lp-actions { grid-column: span 2; justify-content: flex-end; }
}
@media (max-width: 820px) { .menu-ancres { position: static; } }
@media (max-width: 1099px) { .lp-actions .btn-petit { padding: .75em 1.3em; font-size: .95rem; } .btn-icone { width: 42px; height: 42px; } }
.lp-actions { flex-wrap: nowrap; }
.lp-actions .suppr .btn-lien { font-size: .9rem; }
@media (max-width: 1099px) { .lp-actions { flex-wrap: wrap; } }

/* ---------- Chambres (gestion) ---------- */
.pastille-rive { font-size: .75rem; font-weight: 700; padding: .3em .7em; border-radius: 999px; }
.pastille-rive.rive-lagune { background: #d6f0ec; color: #0e5e57; }
.pastille-rive.rive-ocean { background: #dbe9f5; color: #0a3a52; }
.liste-chambres-admin { display: grid; }
.ligne-chambre { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(10,58,82,.08); margin: 0; }
.ligne-chambre input, .ligne-chambre select { padding: .5em .6em; font-size: .95rem; }
.ligne-chambre .lp-lib { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ligne-chambre.hors-service .lc-nom input { text-decoration: line-through; opacity: .6; }
.lc-infos { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ajout-chambre { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin: 14px 0 0; padding: 14px; border-radius: 14px; background: var(--ecume); }
.ajout-chambre label > span:first-child { font-size: .85rem; }
.modifier-categorie { margin-top: 14px; border-top: 1px dashed rgba(10,58,82,.15); padding-top: 10px; }
.modifier-categorie > summary { cursor: pointer; color: var(--lagune); font-weight: 600; padding: .5em 0; }
.modifier-categorie[open] > summary { margin-bottom: 12px; }
.modifier-categorie .form-confirmer { margin-top: 12px; }
.photos-categorie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.photo-slot { display: grid; gap: 6px; align-content: start; }
.photo-slot img, .photo-vide { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.photo-vide { display: grid; place-content: center; text-align: center; background: var(--sable); color: var(--encre-douce); font-size: .88rem; }
.fichier { position: relative; display: block; cursor: pointer; }
.fichier > span { display: block; text-align: center; padding: .6em .8em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ocean); color: var(--ocean); font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 900px) {
  .ligne-chambre { grid-template-columns: 1fr 1fr; padding: 14px 0; }
  .ligne-chambre .lp-lib { position: static; width: auto; height: auto; clip: auto; font-size: .78rem; color: var(--encre-douce); font-weight: 600; }
  .lc-infos, .ligne-chambre .lp-actions { grid-column: 1 / -1; }
  .ajout-chambre { grid-template-columns: 1fr 1fr; }
  .ajout-chambre label:first-of-type { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .photos-categorie { grid-template-columns: 1fr 1fr; }
  .ajout-chambre { grid-template-columns: 1fr; }
  .ligne-chambre { grid-template-columns: 1fr; }
}
.pied-version { display: block; margin-top: 4px; font-size: .78rem; opacity: .8; }
/* Note restaurant : bouton Enregistrer */
.btn-enregistrer { display: inline-flex; align-items: center; gap: 8px; }
.btn-enregistrer .ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.form-enregistrer { margin: 0; }
.note-bas { margin: 20px 0 0; display: flex; justify-content: center; }
@media (max-width: 640px) { .note-bas .btn { width: 100%; justify-content: center; } }
.note-verrouillee { background: #eef8f1; border: 2px solid #b9e3c7; }
.note-verrouillee h2 { display: flex; align-items: center; gap: 8px; color: #17643a; }
.note-verrouillee .ico { width: 22px; height: 22px; fill: currentColor; }
.note-verrouillee form { display: grid; gap: 10px; justify-items: start; margin-top: 8px; }
/* Dépenses : désignations */
.lien-petit { font-weight: 400; font-size: .82rem; color: var(--lagune); margin-left: 6px; }
.ajout-categorie { grid-template-columns: minmax(0, 1fr) auto; margin: 10px 0 14px; }
.liste-categories { list-style: none; margin: 0; padding: 0; display: grid; }
.ligne-categorie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid rgba(10,58,82,.08); margin: 0; }
.ligne-categorie input[type=text] { flex: 1 1 220px; padding: .5em .7em; }
@media (max-width: 560px) { .ajout-categorie { grid-template-columns: 1fr; } }
.zone-danger { border: 2px solid #f3c2b5; background: #fff8f5; }
.zone-danger h2 { color: var(--corail-fonce); }
.recap-annulation { color: #ffd6c9; font-size: .88rem; font-weight: 600; margin: .4rem 0 0; }
.carte-note.bloquee { opacity: .7; cursor: not-allowed; background: #f4f1ec; box-shadow: none; }
.carte-note.bloquee .cn-bloque { color: #8a2a12; font-weight: 600; font-size: .85rem; }

/* ---------- États (impression et export) ---------- */
.form-etats fieldset { border: 0; padding: 0; margin: 0; }
.form-etats legend { font-weight: 600; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.choix-etat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .choix-etat { grid-template-columns: 1fr 1fr; } }
.raccourcis { margin: 0; font-size: .9rem; color: var(--encre-douce); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.raccourcis a { color: var(--lagune); font-weight: 600; }
.etat-document { margin-top: 16px; }
.etat-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--marron); padding-bottom: 10px; margin-bottom: 12px; }
.etat-marque { margin: 0; font-size: 1.5rem; }
.etat-lieu, .etat-edite { margin: 0; color: var(--encre-douce); font-size: .85rem; }
.etat-titre { text-align: right; }
.etat-titre h2 { margin: 0; font-size: 1.25rem; }
.etat-titre p { margin: 2px 0 0; }
.etat-tableau .mini-table { font-size: .85rem; }
.etat-tableau .mini-table td, .etat-tableau .mini-table th { padding: 6px 7px; }
.etat-tableau tfoot td { border-top: 2px solid var(--encre); }
.etat-note { font-size: .88rem; color: var(--encre-douce); margin: 10px 0 0; }
.etat-pied { display: none; }

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff !important; }
  .entete, .pied, .whatsapp, .admin-tete, .ne-pas-imprimer, .info, .btn, .burger { display: none !important; }
  .section-admin { padding: 0 !important; }
  .conteneur { max-width: none !important; padding: 0 !important; }
  .carte-tdb { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
  .tableau-defile { overflow: visible !important; box-shadow: none !important; }
  .etat-tableau .mini-table { font-size: 9pt; }
  .mini-table th, .mini-table td { border-bottom: 1px solid #ccc; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  .etat-pied { display: block; margin-top: 14px; font-size: 8pt; color: #666; text-align: center; }
  /* Autres pages de gestion : imprimer le contenu sans les formulaires */
  .section-admin form.resa-form:not(.form-etats), .section-admin .filtres, .lp-actions, .resa-actions { display: none !important; }
}
@media print {
  .etat-tableau { width: 100% !important; }
  .etat-tableau .mini-table { width: 100% !important; font-size: 7.5pt !important; table-layout: auto; }
  .etat-tableau .mini-table th, .etat-tableau .mini-table td { white-space: normal !important; overflow-wrap: anywhere; padding: 3px 4px !important; letter-spacing: 0 !important; }
  .etat-tableau .mini-table th { font-size: 6.5pt !important; }
  .etat-tableau .mini-table td.num { white-space: nowrap !important; }
}
.releve-solde { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 14px 18px; border-radius: 12px; background: var(--ocean); color: var(--blanc); }
.releve-solde strong { font: 800 1.6rem/1 var(--f-titre); color: var(--soleil); }
@media print { .releve-solde { background: #fff !important; color: #000 !important; border: 2px solid #000; } .releve-solde strong { color: #000 !important; } }
.releve-soldes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.releve-soldes .releve-solde { margin-top: 0; }
.releve-solde.clair { background: var(--ecume); color: var(--ocean); }
.releve-solde.clair strong { color: var(--ocean); }
@media (max-width: 640px) { .releve-soldes { grid-template-columns: 1fr; } }
.etat-sous-titre { font-size: 1rem; margin: 18px 0 6px; }
@media print { .etat-sous-titre { margin-top: 10px; font-size: 10pt; } }
.table-recap tr.rubrique td { font-weight: 700; }
.table-recap tr.sous-rubrique td { color: var(--encre-douce); font-size: .92em; }
.table-recap tr.sous-rubrique td:first-child { padding-left: 26px; }
.table-recap tr.sous-rubrique td:first-child::before { content: "– "; }