/*
 * Vitrine publique — « le palais clair » (01/10/2026).
 * Feuille autonome, pas de Tailwind : la modifier n'impose pas build_css.bat.
 * Les suites portent le nom des rois du Danhome ; l'arche, la frise et les
 * initiales en sont le fil.
 */
:root {
  --ivoire: #FBF7F0;
  --lin: #F4ECDF;
  --sable: #EADCC5;
  --pierre: #D9C7A8;
  --encre: #231A12;
  --encre-2: #4A3D30;
  --gris: #7D6E5E;
  --or: #B0832F;
  --or-pale: #E9D3A3;
  --trait: rgba(35,26,18,.12);
  --ombre: 0 30px 60px -30px rgba(74,52,24,.35);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
}
.kgh * { box-sizing: border-box; }
.kgh { margin: 0; background: var(--ivoire); color: var(--encre); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.kgh h1, .kgh h2, .kgh h3, .kgh p, .kgh ul, .kgh figure { margin: 0; padding: 0; }
.kgh a { color: inherit; text-decoration: none; }
.kgh [x-cloak] { display: none !important; }
.cadre { max-width: 1220px; margin: 0 auto; padding: 0 28px; }

/* Grain tres leger : l'ivoire n'est pas un aplat d'ecran */
.kgh::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Frise inspiree des bas-reliefs d'Abomey */
.frise { height: 14px; opacity: .55; background:
  linear-gradient(45deg, transparent 42%, var(--or) 42% 58%, transparent 58%) 0 0/14px 14px,
  linear-gradient(-45deg, transparent 42%, var(--or) 42% 58%, transparent 58%) 0 0/14px 14px; }
.sur-titre { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--or); }
.sur-titre::before { content: ''; width: 34px; height: 1px; background: var(--or); }

/* ── En-tete ── */
.entete { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .4s, box-shadow .4s; }
.entete.colle, .entete.menu-ouvert { background: rgba(251,247,240,.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--trait); }
.barre { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo { display: flex; align-items: baseline; gap: 10px; }
.logo b { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -.01em; }
.logo span { font-size: 10px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--or); }
.menu { display: flex; align-items: center; gap: 36px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.menu a:hover { color: var(--or); }
.menu .discret { color: var(--gris); font-weight: 500; }
.burger { display: none; background: none; border: 0; color: var(--encre); cursor: pointer; padding: 6px; }
.menu-mobile { background: var(--ivoire); border-top: 1px solid var(--trait); padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 18px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; padding: 16px 30px; transition: transform .3s, box-shadow .3s, background .3s, color .3s; cursor: pointer; border: 0; font-family: var(--sans); }
/* Prefixes .kgh : sans eux, « .kgh a { color: inherit } » l'emporte et le
   texte d'un lien-bouton prend la couleur encre — illisible sur fond fonce. */
.kgh .btn-encre { background: linear-gradient(135deg, #D6AE5C, #C39441); color: var(--encre); box-shadow: 0 10px 24px -14px rgba(176,131,47,.9); }
.kgh .btn-encre:hover { background: var(--encre); color: #F3DDAA; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(35,26,18,.55); }
.kgh .btn-trait { border: 1px solid var(--encre); color: var(--encre); background: transparent; }
.kgh .btn-trait:hover { background: var(--encre); color: var(--ivoire); }
.menu .btn { padding: 12px 24px; letter-spacing: .1em; }

/* ── Hero ── */
.hero { position: relative; padding: 150px 0 120px; overflow: hidden; isolation: isolate; }
.hero::after { content: ''; position: absolute; right: -10%; top: -20%; width: 720px; height: 720px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(233,211,163,.55), transparent 65%); }
.hero-grille { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
.kgh h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 6.4vw, 6.1rem); line-height: .98; letter-spacing: -.035em; margin: 26px 0 30px; font-variation-settings: 'opsz' 144; }
.kgh h1 em, .kgh h2 em { font-style: italic; font-weight: 400; color: var(--or); }
.chapeau { font-size: 18.5px; line-height: 1.65; color: var(--encre-2); max-width: 30em; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.preuves { display: flex; gap: 38px; margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--trait); }
.preuves strong { display: block; font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -.02em; }
.preuves small { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

/* Arche : la porte du palais */
.arche-zone { position: relative; height: 640px; }
.arche { position: absolute; inset: 0 40px 0 0; border-radius: 320px 320px 6px 6px; overflow: hidden; box-shadow: var(--ombre);
  background: linear-gradient(165deg, #E7D3AE 0%, #C9A56A 40%, #8C6633 100%); }
.arche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arche-vide::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,248,232,.65), transparent 55%),
              repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 46px); }
.arche-vide b { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 140px; line-height: 1; color: rgba(255,250,240,.85); }
.arche-lisere { position: absolute; inset: -14px 26px -14px -14px; border: 1px solid var(--or); border-radius: 334px 334px 10px 10px; opacity: .55; pointer-events: none; }
.carte-flottante { position: absolute; left: -46px; bottom: 64px; background: #fff; border-radius: 18px; padding: 20px 24px; box-shadow: var(--ombre); min-width: 250px; animation: flotte 6s ease-in-out infinite; }
.carte-flottante small { font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--or); }
.carte-flottante p { font-family: var(--serif); font-size: 22px; margin: 6px 0 4px; }
.carte-flottante span { font-size: 13px; color: var(--gris); }
.sceau { position: absolute; right: 0; top: 46px; width: 112px; height: 112px; border-radius: 50%; background: var(--ivoire); border: 1px solid var(--or-pale); display: grid; place-items: center; text-align: center; box-shadow: 0 10px 30px -14px rgba(74,52,24,.4); }
.sceau b { font-family: var(--serif); font-size: 30px; font-weight: 400; display: block; line-height: 1; color: var(--or); }
.sceau small { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
@keyframes flotte { 50% { transform: translateY(-10px); } }

/* ── Barre de reservation ── */
.resa { position: relative; z-index: 2; margin-top: -40px; }
.resa form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; background: #fff; border-radius: 22px; box-shadow: var(--ombre); border: 1px solid var(--or-pale); overflow: hidden; }
.resa label { display: block; padding: 20px 26px; border-right: 1px solid var(--trait); cursor: pointer; }
.resa label small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--or); margin-bottom: 6px; }
.resa input, .resa select { border: 0; outline: 0; font: 500 17px var(--sans); color: var(--encre); background: transparent; width: 100%; padding: 0; }
.resa button { margin: 10px; border-radius: 14px; padding: 0 36px; }

/* ── Atouts ── */
.atouts { padding: 110px 0 30px; }
.atouts ul { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.atouts li { padding: 30px 22px; text-align: center; border-right: 1px solid var(--trait); }
.atouts li:last-child { border-right: 0; }
.atouts svg { width: 28px; height: 28px; stroke: var(--or); fill: none; stroke-width: 1.3; margin-bottom: 12px; }
.atouts b { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; }
.atouts span { font-size: 13px; color: var(--gris); }

/* ── Les suites ── */
.rois { padding: 120px 0; }
.entete-section { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 60px; flex-wrap: wrap; }
.kgh h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -.03em; margin-top: 18px; max-width: 14em; }
.entete-section > p { max-width: 26em; color: var(--encre-2); line-height: 1.7; }
/* 6 colonnes : une vedette pleine largeur, deux moities, puis des tiers. */
.grille-rois { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px; }
.roi { grid-column: span 2; background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid var(--trait); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; display: flex; flex-direction: column; }
.roi:nth-child(2), .roi:nth-child(3) { grid-column: span 3; }
.roi:hover { transform: translateY(-8px); box-shadow: var(--ombre); }
.roi .visuel { height: 250px; position: relative; overflow: hidden; background: var(--fond); }
.roi .visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.roi:hover .visuel img { transform: scale(1.06); }
.roi .visuel.vide::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 15%, rgba(255,248,232,.6), transparent 55%); }
.roi .initiale { position: absolute; right: 22px; bottom: -18px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 150px; line-height: 1; color: rgba(255,250,240,.55); }
.roi .type { position: absolute; left: 18px; top: 18px; background: rgba(251,247,240,.92); color: var(--encre); border-radius: 999px; padding: 7px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.roi .corps { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.roi .rang { font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--or); }
.roi h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -.02em; margin: 6px 0 4px; }
.roi .meta { font-size: 13.5px; color: var(--gris); }
.roi .detail { color: var(--encre-2); line-height: 1.7; margin-top: 14px; font-size: 15px; }
.roi .pied { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--trait); }
.roi .corps .pied { margin-top: 22px; }
.roi .prix { font-family: var(--serif); font-size: 24px; }
.roi .prix small { font-family: var(--sans); font-size: 12px; color: var(--gris); }
.roi .lien { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.roi.vedette { grid-column: span 6; display: grid; grid-template-columns: 1.15fr 1fr; }
.roi.vedette .visuel { height: 100%; min-height: 380px; }
.roi.vedette .corps { padding: 44px; justify-content: center; }
.roi.vedette h3 { font-size: 44px; }
.rois-tout { text-align: center; margin-top: 50px; }

/* ── Experience ── */
.experience { background: var(--lin); padding: 130px 0; position: relative; }
.experience .frise { position: absolute; left: 0; right: 0; top: 0; }
.exp-grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.pilier { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 34px 0; border-bottom: 1px solid var(--trait); }
.pilier:first-child { padding-top: 0; }
.pilier i { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--or); }
.pilier h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 8px; }
.pilier p { color: var(--encre-2); line-height: 1.7; font-size: 15.5px; }
.devise { margin-top: 44px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1.35; color: var(--encre-2); border-left: 2px solid var(--or); padding-left: 26px; }

/* ── Appel final ── */
.appel { padding: 130px 0; }
.appel-carte { position: relative; border-radius: 34px; padding: 90px 60px; text-align: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% -20%, #FFF6E2, transparent 60%), linear-gradient(135deg, #F1DDB2, #E3C68C 55%, #D4AE69); }
.appel-carte::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(35,26,18,.18); border-radius: 22px; pointer-events: none; }
.kgh .appel-carte h2 { margin: 18px auto 34px; max-width: 13em; }
.appel-carte .sur-titre { color: var(--encre-2); }
.appel-carte .sur-titre::before { background: var(--encre-2); }
.appel-carte small { display: block; margin-top: 18px; font-size: 13px; color: var(--encre-2); }
.appel-carte .btn { position: relative; z-index: 1; }

/* ── Contact ── */
.contact { padding: 0 0 120px; }
.contact-grille { display: grid; grid-template-columns: 1fr 1.2fr; background: #fff; border-radius: 28px; overflow: hidden; border: 1px solid var(--trait); }
.contact-texte { padding: 60px; }
.kgh .contact-texte h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.coord { margin-top: 36px; display: grid; gap: 26px; }
.coord > a, .coord > div { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; }
.coord .pastille { width: 52px; height: 52px; border-radius: 50%; background: var(--lin); display: grid; place-items: center; }
.coord svg { width: 22px; height: 22px; stroke: var(--or); fill: none; stroke-width: 1.5; }
.coord small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.coord strong { font-family: var(--serif); font-weight: 400; font-size: 23px; }
.coord a:hover strong { color: var(--or); }
.plan { position: relative; min-height: 440px; background-color: var(--sable); overflow: hidden;
  background-image: linear-gradient(var(--pierre) 1px, transparent 1px), linear-gradient(90deg, var(--pierre) 1px, transparent 1px);
  background-size: 46px 46px; }
.plan .route { position: absolute; left: -10%; right: -10%; top: 52%; height: 26px; background: #F8F1E4; transform: rotate(-8deg); box-shadow: 0 0 0 1px var(--pierre); }
.plan .repere { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-100%); text-align: center; }
.plan .epingle { width: 54px; height: 54px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--encre); margin: 0 auto; display: grid; place-items: center; box-shadow: 0 12px 24px -10px rgba(35,26,18,.6); }
.plan .epingle b { transform: rotate(45deg); color: var(--or-pale); font-family: var(--serif); font-size: 22px; }
.plan .etiquette { margin-top: 14px; background: #fff; border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 600; box-shadow: var(--ombre); white-space: nowrap; }
.plan .shb { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); background: var(--ivoire); padding: 6px 12px; border-radius: 8px; }
.plan .itin { position: absolute; right: 22px; bottom: 22px; }

.pied-page { background: var(--lin); padding: 50px 0 40px; border-top: 1px solid var(--trait); }
.pied-grille { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 13.5px; color: var(--gris); }
.pied-grille .liens { display: flex; gap: 26px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pied-grille .liens a:hover { color: var(--or); }

/* Animations */
.rev { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.rev.vu { opacity: 1; transform: none; }
.entree { opacity: 0; animation: entree 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes entree { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rev, .entree { opacity: 1; transform: none; animation: none; transition: none; }
  .carte-flottante { animation: none; }
}

@media (max-width: 960px) {
  .menu { display: none; }
  .burger { display: block; }
  .hero { padding-top: 120px; }
  .hero-grille, .exp-grille, .contact-grille { grid-template-columns: 1fr; gap: 56px; }
  .arche-zone { height: 460px; }
  .carte-flottante { left: 0; }
  .resa form { grid-template-columns: 1fr 1fr; }
  .resa label:nth-child(2) { border-right: 0; }
  .resa button { grid-column: span 2; padding: 18px; }
  .atouts ul { grid-template-columns: repeat(2, 1fr); }
  .atouts li { border-bottom: 1px solid var(--trait); }
  .grille-rois { grid-template-columns: 1fr; }
  .roi, .roi:nth-child(2), .roi:nth-child(3), .roi.vedette { grid-column: auto; }
  .roi.vedette { grid-template-columns: 1fr; }
  .roi.vedette .visuel { min-height: 260px; }
  .roi.vedette .corps { padding: 30px; }
  .roi.vedette h3 { font-size: 34px; }
  .contact-texte { padding: 36px 26px; }
  .appel-carte { padding: 64px 26px; }
  .preuves { gap: 24px; flex-wrap: wrap; }
  .experience, .rois, .appel { padding: 90px 0; }
}
@media (max-width: 520px) {
  .cadre { padding: 0 16px; }
  .resa form { grid-template-columns: 1fr; }
  .resa label { border-right: 0; border-bottom: 1px solid var(--trait); }
  .resa button { grid-column: auto; }
  .sceau { display: none; }
  .arche-zone { height: 400px; }
  .coord strong { font-size: 19px; }
  .plan { min-height: 340px; }
}