/* ============================================================
   Pilotis — identité visuelle du site pilotis.nc
   Palette lagon (bleus-verts) + bois chaud + écume.
   Typo : Fraunces (titres, self-hosted) + system-ui (texte).
   ============================================================ */

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
	--lagon-950: #04242c;
	--lagon-900: #052e37;
	--lagon-800: #0a4552;
	--lagon-700: #0e5a6b;
	--lagon-600: #12707f;
	--turquoise: #18a7bd;
	--turquoise-vif: #2fd4e4;
	--ecume: #f7f4ee;
	--sable: #efe8db;
	--sable-fonce: #e3d8c4;
	--bois: #a9764a;
	--bois-fonce: #7c5433;
	--encre: #13282e;
	--encre-doux: #3d565d;
	--ok: #2f9e6e;
	--alerte: #c96f2d;
	--erreur: #b8472f;
	--blanc: #ffffff;
	--radius: 16px;
	--ombre: 0 10px 34px rgba(5, 46, 55, .10);
	--ombre-forte: 0 18px 50px rgba(5, 46, 55, .18);
	--titres: 'Fraunces', Georgia, serif;
	--texte: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--texte);
	font-size: 17px;
	line-height: 1.65;
	color: var(--encre);
	background: var(--ecume);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--lagon-700); }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; line-height: 1.15; color: var(--lagon-900); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 10px; top: 10px; background: var(--blanc); padding: 8px 14px; z-index: 99; }
.mut { color: var(--encre-doux); }
.center { text-align: center; }
.small { font-size: .9rem; }

/* ---------- barre de navigation ---------- */
.topbar {
	position: sticky; top: 0; z-index: 50;
	background: rgba(247, 244, 238, .88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(14, 90, 107, .12);
}
.topbar-in { display: flex; align-items: center; gap: 26px; padding: 12px 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-family: var(--titres); font-weight: 700; font-size: 1.45rem; color: var(--lagon-900); }
.brand.foot .brand-name { color: var(--blanc); }
.mainnav { display: flex; gap: 20px; margin-left: auto; }
.mainnav a { text-decoration: none; color: var(--encre-doux); font-weight: 500; padding: 6px 2px; border-bottom: 2px solid transparent; }
.mainnav a:hover, .mainnav a.on { color: var(--lagon-800); border-bottom-color: var(--turquoise); }
@media (max-width: 760px) { .mainnav { display: none; } .topbar-in { gap: 12px; } .topbar .btn { margin-left: auto; } }

/* ---------- boutons ---------- */
.btn {
	display: inline-block; text-decoration: none; text-align: center; cursor: pointer;
	font-family: var(--texte); font-weight: 650; font-size: 1.02rem;
	padding: 14px 28px; border-radius: 999px; border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.btn:active { transform: translateY(0); }
.btn-cta { background: linear-gradient(135deg, var(--turquoise), var(--lagon-600)); color: var(--blanc); }
.btn-primaire { background: var(--lagon-800); color: var(--blanc); }
.btn-ghost { background: transparent; color: var(--lagon-800); border-color: var(--lagon-800); }
.btn-ghost.inverse { color: var(--ecume); border-color: rgba(247,244,238,.7); }
.btn.sm { padding: 9px 20px; font-size: .95rem; }
.btn.xl { padding: 17px 38px; font-size: 1.12rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- héros ---------- */
.hero {
	background:
		radial-gradient(1200px 500px at 78% -80px, rgba(47, 212, 228, .16), transparent 62%),
		linear-gradient(178deg, var(--lagon-950) 0%, var(--lagon-900) 42%, var(--lagon-800) 100%);
	color: var(--ecume);
	overflow: hidden;
}
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 84px 22px 30px; }
.hero h1 { color: var(--blanc); }
.hero h1 em { font-style: italic; color: var(--turquoise-vif); }
.hero .lede { font-size: 1.18rem; color: rgba(247, 244, 238, .88); max-width: 34em; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 10px; }
.hero-note { font-size: .92rem; color: rgba(247, 244, 238, .62); }
.hero-scene svg { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .hero-in { grid-template-columns: 1fr; padding-top: 56px; } .hero-scene { max-width: 420px; margin: 0 auto; } }

/* vague de transition sous le héros */
.vague { display: block; width: 100%; height: 70px; margin-top: -1px; }

/* ---------- bandeau de confiance ---------- */
.confiance { background: var(--ecume); padding: 26px 0 6px; }
.confiance-in { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; }
.confiance-item { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--lagon-800); font-size: .97rem; }
.confiance-item svg { flex: none; }

/* ---------- sections ---------- */
.section { padding: 72px 0; }
.section.alt { background: var(--sable); }
.section.fonce { background: linear-gradient(180deg, var(--lagon-900), var(--lagon-800)); color: var(--ecume); }
.section.fonce h2, .section.fonce h3 { color: var(--blanc); }
.kicker { display: inline-block; font-weight: 700; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise); margin-bottom: 10px; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- cartes génériques ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.carte {
	background: var(--blanc); border-radius: var(--radius); padding: 26px;
	box-shadow: var(--ombre); border: 1px solid rgba(14, 90, 107, .07);
}
.carte h3 { margin-top: 8px; }
.carte .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(24, 167, 189, .12); }
.section.fonce .carte { background: rgba(247, 244, 238, .06); border-color: rgba(247, 244, 238, .14); box-shadow: none; color: rgba(247,244,238,.9); }

/* ---------- étapes (comment ça marche) ---------- */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; counter-reset: etape; }
.etape { position: relative; background: var(--blanc); border-radius: var(--radius); padding: 30px 26px 24px; box-shadow: var(--ombre); }
.etape::before {
	counter-increment: etape; content: counter(etape);
	position: absolute; top: -18px; left: 22px;
	width: 38px; height: 38px; border-radius: 50%;
	background: linear-gradient(135deg, var(--turquoise), var(--lagon-600)); color: var(--blanc);
	font-family: var(--titres); font-weight: 700; font-size: 1.15rem;
	display: grid; place-items: center; box-shadow: var(--ombre);
}

/* ---------- listes à coches ---------- */
.coches { list-style: none; padding: 0; margin: 0; }
.coches li { padding: 7px 0 7px 32px; position: relative; }
.coches li::before {
	content: ''; position: absolute; left: 0; top: 12px; width: 19px; height: 19px;
	border-radius: 50%; background: rgba(47, 158, 110, .14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%232f9e6e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 15px; background-position: center; background-repeat: no-repeat;
}
.coches.compact li { padding: 4px 0 4px 30px; }

/* ---------- forfaits ---------- */
.forfaits { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 26px; max-width: 880px; margin: 0 auto; align-items: stretch; }
.forfait {
	background: var(--blanc); border-radius: 20px; box-shadow: var(--ombre);
	padding: 34px 30px; position: relative; display: flex; flex-direction: column;
	border: 2px solid transparent;
}
.forfait.star { border-color: var(--turquoise); box-shadow: var(--ombre-forte); }
.forfait .badge {
	position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
	background: linear-gradient(135deg, var(--turquoise), var(--lagon-600)); color: var(--blanc);
	font-size: .82rem; font-weight: 700; letter-spacing: .04em;
	padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.forfait h3 { font-size: 1.6rem; margin-bottom: 2px; }
.forfait .pitch { color: var(--encre-doux); min-height: 3.2em; }
.prix { margin: 18px 0 4px; }
.prix b { font-family: var(--titres); font-size: 2.5rem; font-weight: 700; color: var(--lagon-900); }
.prix span { color: var(--encre-doux); }
.prix-fondateur { color: var(--ok); font-weight: 650; margin-bottom: 14px; }
.prix-fondateur s { color: var(--encre-doux); font-weight: 400; }
.forfait .btn { margin-top: auto; }
.forfait ul { margin-bottom: 22px; }

/* ---------- tableau comparatif ---------- */
.compare-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); min-width: 620px; }
.compare th, .compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid rgba(14, 90, 107, .08); }
.compare thead th { background: var(--lagon-800); color: var(--blanc); font-family: var(--titres); font-size: 1.05rem; }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td.oui { color: var(--ok); font-weight: 700; }
.compare td.non { color: var(--encre-doux); }
.compare .grp td { background: var(--sable); font-weight: 700; color: var(--lagon-800); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- aide au choix (quiz) ---------- */
.quiz { background: var(--blanc); border-radius: 20px; box-shadow: var(--ombre); padding: 34px; max-width: 760px; margin: 0 auto; }
.quiz-q { margin-bottom: 22px; }
.quiz-q p { font-weight: 650; margin-bottom: 10px; }
.quiz-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-opt {
	border: 2px solid rgba(14, 90, 107, .18); border-radius: 999px; padding: 9px 18px;
	cursor: pointer; background: var(--blanc); font-size: .97rem; font-family: var(--texte);
	transition: all .12s ease;
}
.quiz-opt:hover { border-color: var(--turquoise); }
.quiz-opt.sel { background: var(--lagon-800); color: var(--blanc); border-color: var(--lagon-800); }
.quiz-resultat { display: none; margin-top: 26px; padding: 24px; border-radius: var(--radius); background: var(--sable); border-left: 5px solid var(--turquoise); }
.quiz-resultat.visible { display: block; animation: apparait .3s ease; }

/* ---------- funnel d'essai ---------- */
.funnel { max-width: 720px; margin: 0 auto; }
.funnel-etapes { display: flex; gap: 8px; justify-content: center; margin-bottom: 34px; }
.funnel-etapes span {
	width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: var(--sable-fonce); color: var(--encre-doux); font-weight: 700; font-size: .95rem;
}
.funnel-etapes span.on { background: var(--lagon-800); color: var(--blanc); }
.funnel-etapes span.fait { background: var(--ok); color: var(--blanc); }
.funnel-panneau { background: var(--blanc); border-radius: 20px; box-shadow: var(--ombre); padding: 36px; }
.funnel-panneau h2 { margin-bottom: 6px; }

.choix-offres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.choix-offre {
	border: 2px solid rgba(14, 90, 107, .16); border-radius: var(--radius); padding: 20px;
	cursor: pointer; transition: all .12s ease; background: var(--blanc); text-align: left; font-family: var(--texte);
}
.choix-offre:hover { border-color: var(--turquoise); }
.choix-offre.sel { border-color: var(--turquoise); background: rgba(24, 167, 189, .06); box-shadow: var(--ombre); }
.choix-offre .nom { font-family: var(--titres); font-weight: 700; font-size: 1.25rem; color: var(--lagon-900); }
.choix-offre .tarif { color: var(--encre-doux); font-size: .95rem; }
@media (max-width: 620px) { .choix-offres { grid-template-columns: 1fr; } }

.champ { margin-bottom: 18px; }
.champ label { display: block; font-weight: 650; margin-bottom: 6px; }
.champ label .opt { font-weight: 400; color: var(--encre-doux); font-size: .9rem; }
.champ input {
	width: 100%; padding: 13px 16px; font-size: 1.05rem; font-family: var(--texte);
	border: 2px solid rgba(14, 90, 107, .18); border-radius: 12px; background: var(--blanc); color: var(--encre);
}
.champ input:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(24, 167, 189, .14); }
.champ .aide { font-size: .88rem; color: var(--encre-doux); margin-top: 5px; }
.adresse-groupe { display: flex; align-items: stretch; }
.adresse-groupe input { border-radius: 12px 0 0 12px; border-right: none; text-align: right; }
.adresse-groupe .suffixe {
	display: flex; align-items: center; padding: 0 14px; white-space: nowrap;
	background: var(--sable); border: 2px solid rgba(14, 90, 107, .18); border-left: none;
	border-radius: 0 12px 12px 0; color: var(--encre-doux); font-size: .98rem;
}
.dispo { font-size: .92rem; margin-top: 6px; min-height: 1.4em; }
.dispo.ok { color: var(--ok); font-weight: 650; }
.dispo.ko { color: var(--erreur); font-weight: 650; }
.erreur-boite { background: rgba(184, 71, 47, .08); border-left: 4px solid var(--erreur); padding: 12px 16px; border-radius: 8px; color: var(--erreur); margin-bottom: 16px; display: none; }
.erreur-boite.visible { display: block; }

/* construction (étape 3) */
.construction { text-align: center; padding: 20px 0; }
.construction-scene { max-width: 300px; margin: 0 auto 8px; }
.construction-etapes { list-style: none; padding: 0; margin: 20px auto 0; max-width: 360px; text-align: left; }
.construction-etapes li { padding: 8px 0 8px 34px; position: relative; color: var(--encre-doux); transition: color .3s; }
.construction-etapes li::before {
	content: ''; position: absolute; left: 0; top: 10px; width: 20px; height: 20px;
	border-radius: 50%; border: 2.5px solid var(--sable-fonce); background: var(--blanc);
}
.construction-etapes li.encours { color: var(--lagon-800); font-weight: 650; }
.construction-etapes li.encours::before { border-color: var(--turquoise); border-top-color: transparent; animation: tourne .8s linear infinite; }
.construction-etapes li.fait { color: var(--ok); }
.construction-etapes li.fait::before {
	border-color: var(--ok); background: var(--ok);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 14px; background-position: center; background-repeat: no-repeat;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* accès (étape 4) */
.acces { background: var(--sable); border-radius: var(--radius); padding: 22px 24px; margin: 20px 0; }
.acces-ligne { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.acces-ligne .lbl { min-width: 130px; font-weight: 650; color: var(--encre-doux); font-size: .95rem; }
.acces-ligne code {
	background: var(--blanc); padding: 7px 14px; border-radius: 8px; font-size: 1.05rem;
	border: 1px solid rgba(14, 90, 107, .14); word-break: break-all;
}
.copier { background: none; border: none; cursor: pointer; color: var(--lagon-700); font-size: .9rem; font-weight: 650; padding: 4px 8px; border-radius: 6px; }
.copier:hover { background: rgba(24, 167, 189, .1); }
.avertissement { background: rgba(201, 111, 45, .1); border-left: 4px solid var(--alerte); padding: 12px 16px; border-radius: 8px; font-size: .95rem; }

/* ---------- atelier / services ---------- */
.tarif-carte { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
.tarif-carte b { font-family: var(--titres); font-size: 1.7rem; color: var(--lagon-900); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: var(--blanc); border-radius: 14px; box-shadow: var(--ombre); margin-bottom: 12px; padding: 4px 22px; }
.faq summary { font-weight: 650; cursor: pointer; padding: 14px 0; color: var(--lagon-900); list-style: none; position: relative; padding-right: 34px; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 10px; font-size: 1.5rem; color: var(--turquoise); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p, .faq details > ul { padding-bottom: 16px; margin: 0; color: var(--encre-doux); }

/* ---------- appel final ---------- */
.cta-final { text-align: center; padding: 80px 22px; }
.cta-final h2 { color: var(--blanc); font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.cta-final p { color: rgba(247, 244, 238, .8); max-width: 34em; margin: 0 auto 28px; }

/* ---------- pied de page ---------- */
.footer { background: var(--lagon-950); color: rgba(247, 244, 238, .82); padding: 56px 0 26px; }
.footer h4 { color: var(--blanc); font-family: var(--titres); margin: 0 0 12px; font-size: 1.05rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid rgba(247, 244, 238, .14); }
.footer-grid a { display: block; color: rgba(247, 244, 238, .82); text-decoration: none; padding: 3px 0; }
.footer-grid a:hover { color: var(--turquoise-vif); }
.foot-base { font-family: var(--titres); font-style: italic; color: var(--turquoise-vif); margin: 10px 0 8px; }
.foot-small { font-size: .88rem; color: rgba(247, 244, 238, .55); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: .87rem; color: rgba(247, 244, 238, .5); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- page prose (mentions, cgu) ---------- */
.prose { max-width: 760px; margin: 0 auto; padding: 60px 22px; }
.prose h1 { font-size: 2.1rem; }
.prose h2 { font-size: 1.35rem; margin-top: 1.6em; }

@keyframes apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }