/* ============================================================
   Pilotis — identité visuelle du site pilotis.nc
   Palette lagon (bleus-verts) + bois chaud + écume.
   Typo : Bricolage Grotesque (titres) + Figtree (texte), auto-hébergées.
   Refonte du 28/09/2026 (maquette fusionnée validée par Amandine) : plus de
   Fraunces italique, bouton d'action jaune soleil ; logo, dessins, vague et
   pictos conservés tels quels (demande d'Amandine).
   ============================================================ */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('/assets/fonts/bricolage-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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;
	--soleil: #ffc94a;
	--soleil-fonce: #f2b42a;
	--radius: 16px;
	--ombre: 0 10px 34px rgba(5, 46, 55, .10);
	--ombre-forte: 0 18px 50px rgba(5, 46, 55, .18);
	--titres: 'Bricolage Grotesque', system-ui, sans-serif;
	--texte: 'Figtree', 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: 700; line-height: 1.12; color: var(--lagon-900); margin: 0 0 .5em; letter-spacing: -.015em; }
h1, h2 { font-weight: 800; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h2, h1.comme-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; }

/* ---------- bandeau d'annonce (réouverture des inscriptions) ---------- */
.annonce { background: linear-gradient(90deg, var(--lagon-900), var(--lagon-700)); color: var(--ecume); font-size: .95rem; }
.annonce-in { display: flex; align-items: center; justify-content: center; gap: 6px 16px; padding: 9px 22px; flex-wrap: wrap; text-align: center; }
.annonce a { color: var(--turquoise-vif); font-weight: 700; text-decoration: none; white-space: nowrap; }
.annonce a:hover { text-decoration: underline; }

/* ---------- 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; flex: 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; } }
/* « Me prévenir de la prochaine vague » (inscriptions fermées) ne tient pas sur une ligne à 390 px :
   le bouton passe sur deux lignes serrées plutôt que de recouvrir le nom. */
@media (max-width: 520px) { .topbar-in { padding: 10px 16px; } .topbar .btn.sm { white-space: normal; text-align: center; line-height: 1.2; font-size: .86rem; padding: 8px 14px; max-width: 200px; } }

/* ---------- 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: var(--soleil); color: var(--lagon-900); font-weight: 700; }
.btn-cta:hover { background: var(--soleil-fonce); }
.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(900px 520px at 82% 8%, rgba(47, 212, 228, .18), 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 1fr; gap: 44px; align-items: center; padding: 56px 22px 32px; }
.hero-eti { display: inline-block; font-weight: 600; font-size: .92rem; color: var(--soleil); margin-bottom: 12px; }
.hero h1 { color: var(--blanc); font-size: clamp(2rem, 3.5vw, 2.6rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.hero h1 span { color: var(--turquoise-vif); }
/* Aperçu 3 : « Un seul outil pour toute l'entreprise » juste sous le titre calédonien */
.hero-sous-titre { font: 700 clamp(1.3rem, 2.4vw, 1.7rem)/1.2 var(--titres); letter-spacing: -.015em; color: var(--turquoise-vif); margin: 14px 0 16px; }
/* « Ne nous croyez pas sur parole » : l'entrée vers l'essai, lisible, pas une note de bas */
.hero .hero-note { font-size: 1rem; color: rgba(247, 244, 238, .86); margin: 22px 0 0; padding-left: 14px; border-left: 3px solid var(--soleil); }
.hero .hero-note b { color: var(--soleil); }
.hero .hero-note + .hero-actions { margin-top: 18px; }
/* les arguments de base, pleine largeur au bas de l'en-tête */
.hero-arguments { list-style: none; margin: 0 auto; padding: 0 0 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hero-arguments li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgba(247, 244, 238, .07); border: 1px solid rgba(47, 212, 228, .22); color: rgba(247, 244, 238, .8); font-size: .95rem; line-height: 1.45; }
.hero-arguments b { display: block; color: var(--blanc); font: 700 1.05rem/1.25 var(--titres); margin-bottom: 3px; }
.hero-arguments .ico { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--ecume); display: grid; place-items: center; }
.hero-arguments .ico svg { width: 36px; height: 36px; display: block; }
@media (max-width: 860px) { .hero-arguments { grid-template-columns: 1fr; gap: 10px; } }
.hero .lede { font-size: 1.12rem; color: rgba(247, 244, 238, .86); max-width: 34em; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 24px 0 10px; }
.hero-note { font-size: .92rem; color: rgba(247, 244, 238, .62); margin-bottom: .6em; }
.hero-dolibarr { font-size: .9rem; color: rgba(207, 229, 233, .8); max-width: 34em; margin: 0; }
.hero-dolibarr b { color: var(--blanc); font-weight: 600; }
/* la cabane loge SOUS la légende du lecteur, jamais derrière : la réserve du bas (170 px)
   dépasse sa hauteur (36 % de large × 320/380 ≈ 170 px au plus large) */
.hero-visuel { position: relative; padding-bottom: 170px; }
.hero-scene { position: absolute; left: -46px; bottom: 0; width: 36%; z-index: 0; pointer-events: none; }
.hero-scene svg { width: 100%; height: auto; display: block; }
.hero-visuel .lecteur, .hero-visuel .mosaique { position: relative; z-index: 1; margin: 0 0 0 16%; }
/* la mosaïque de l'en-tête : l'accueil en grand, trois domaines du même logiciel en vignettes */
.mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mosaique .tuile { position: relative; display: block; color: inherit; text-decoration: none; border-radius: 10px; cursor: zoom-in; }
.mosaique .tuile .fenetre { transition: transform .2s ease; }
.mosaique .tuile:hover .fenetre { transform: translateY(-3px); }
.mosaique .tuile:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; }
.tuile-loupe { position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(4, 36, 44, .78); color: var(--blanc); display: grid; place-items: center; }
.tuile-loupe svg { width: 17px; height: 17px; }
.tuile-grande .tuile-loupe { right: 12px; bottom: 12px; width: 36px; height: 36px; }
@media (prefers-reduced-motion: reduce) { .mosaique .tuile .fenetre { transition: none; } .mosaique .tuile:hover .fenetre { transform: none; } }
.mosaique .tuile-grande { grid-column: 1 / -1; }
.mosaique .tuile:not(.tuile-grande) .fenetre { border-radius: 8px; box-shadow: 0 14px 30px rgba(2, 24, 30, .45); }
.mosaique .tuile:not(.tuile-grande) .scene img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.mosaique .tuile-grande .scene img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.tuile-eti { position: absolute; z-index: 2; left: 8px; bottom: 8px; background: var(--soleil); color: var(--lagon-950); font: 700 .78rem/1 var(--texte); letter-spacing: .02em; padding: 5px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(2, 24, 30, .35); }
.tuile-grande .tuile-eti { left: 12px; bottom: 12px; font-size: .86rem; padding: 6px 11px; }
.mosaique .legende, .mosaique .lecteur-mention { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 860px) {
	.hero-in { grid-template-columns: 1fr; padding-top: 48px; gap: 32px; }
	.hero-visuel .lecteur, .hero-visuel .mosaique { margin-left: 0; }
	.hero-scene { display: none; }
	.hero-visuel { padding-bottom: 0; }
}

/* ---------- lecteur de captures (héros, et plus bas les parcours) ---------- */
.lecteur { margin: 0; }
.fenetre { background: var(--blanc); border-radius: 10px; overflow: hidden; box-shadow: 0 26px 60px rgba(2, 24, 30, .45); color: #1d2d31; }
.fenetre-barre { height: 24px; background: #e9eff0; display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.fenetre-barre i { width: 9px; height: 9px; border-radius: 50%; background: #c9d4d6; }
.scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f6f8f8; }
.plan { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease, transform 1.1s cubic-bezier(.3,.1,.2,1); transform-origin: 50% 50%; }
.plan.actif { opacity: 1; }
.plan img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
/* le clic : un disque jaune qui se pose, une onde qui repart deux fois, et une flèche de souris
   (dessinée par pilotis.js) dont la pointe tombe au centre du disque */
.clic { position: absolute; width: clamp(46px, 6%, 76px); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 3; transition: opacity .2s; }
.clic::before, .clic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--soleil); box-shadow: 0 0 0 2px rgba(8, 32, 40, .6); }
.clic::before { background: rgba(255, 201, 74, .16); }
.clic::after { opacity: 0; }
.clic svg { position: absolute; left: 39.3%; top: 44.7%; width: 64%; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.clic.on { opacity: 1; }
.clic.on::before { animation: clic-pose .55s ease-out both; }
.clic.on::after { animation: clic-onde 1.1s ease-out .2s 2; }
@keyframes clic-pose { 0% { transform: scale(2); opacity: 0; } 60% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes clic-onde { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
.legende { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 44px; font-size: .95rem; line-height: 1.4; }
.legende-texte { flex: 1; }
.pastilles { display: flex; gap: 6px; flex: none; }
.pastilles button { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 600 12px var(--texte); cursor: pointer; opacity: .6; padding: 0; }
.pastilles button[aria-current="true"] { opacity: 1; background: currentColor; }
.pastilles button[aria-current="true"] span { color: var(--lagon-900); }
.pause { border: 0; background: transparent; color: inherit; font: 600 .85rem var(--texte); cursor: pointer; text-decoration: underline; opacity: .8; padding: 4px; }
.pastilles button:focus-visible, .pause:focus-visible { outline: 2px solid var(--soleil); outline-offset: 2px; }
.hero .legende { color: #dff1f4; }
.lecteur-mention { font-size: .78rem; color: rgba(207, 229, 233, .7); text-align: right; margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .plan { transition: opacity .2s; } .clic.on::before, .clic.on::after { animation: none; } }

/* les lecteurs posés sur fond clair (sections de l'accueil) : la pastille active est remplie
   d'encre, son chiffre passe donc en clair ; la mention prend le gris du texte secondaire */
.section:not(.fonce) .pastilles button[aria-current="true"] span { color: var(--ecume); }
.section:not(.fonce) .lecteur-mention { color: var(--encre-doux); }
.section .fenetre { box-shadow: var(--ombre-forte); }

/* un parcours : le texte à gauche, le lecteur à droite, en alternance ; empilés sur mobile */
.parcours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; align-items: center; margin: 0 0 56px; }
.parcours.inverse { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.parcours.inverse .parcours-texte { order: 2; }
.parcours-texte h2, .parcours-texte h3 { font: 700 1.35rem/1.25 var(--titres); margin: 0 0 10px; }
.lecteur-fixe { max-width: 980px; margin: 0 auto 40px; }
@media (max-width: 860px) {
	.parcours, .parcours.inverse { grid-template-columns: 1fr; gap: 16px; margin-bottom: 44px; }
	.parcours.inverse .parcours-texte { order: 0; }
}

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

/* ---------- bandeau de confiance ---------- */
.confiance { background: var(--blanc); border-bottom: 1px solid var(--sable-fonce); }
.confiance-in { display: grid; grid-template-columns: repeat(5, 1fr); }
.confiance-item { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; color: var(--lagon-800); font-size: .95rem; line-height: 1.35; padding: 18px 16px; border-right: 1px solid #e4eced; }
.confiance-item:last-child { border-right: 0; }
.confiance-item svg { flex: none; margin-top: 1px; }
@media (max-width: 860px) {
	.confiance-in { grid-template-columns: 1fr 1fr; }
	.confiance-item { border-bottom: 1px solid #e4eced; }
}

/* ---------- sections ---------- */
.section { padding: 72px 0; }
.section.alt {
	background-color: var(--sable);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='56'%3E%3Cpath d='M0 28 q8.75 -5 17.5 0 t17.5 0 t17.5 0 t17.5 0 t17.5 0 t17.5 0 t17.5 0 t17.5 0' fill='none' stroke='%23e3d8c4' stroke-width='1.4' opacity='0.5'/%3E%3C/svg%3E");
}
.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; }
/* Pleine largeur (Amandine, 02/10/2026 : « textes et titres qui s'arrêtent aux 2 tiers de la
   largeur, c'est bizarre ») : la tête de section occupe le conteneur, comme les cartes dessous. */
.section-head { margin-bottom: 40px; }
.section-head h2 { text-wrap: balance; }
.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); margin-bottom: 4px; }
.carte .ico svg { width: 32px; height: 32px; display: block; }
.section.fonce .carte .ico { background: rgba(247, 244, 238, .92); }
.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 .scene { height: 60px; margin: 2px 0 8px; }
.etape .scene svg { width: 60px; height: 60px; display: block; }
.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(290px, 1fr)); gap: 26px; max-width: 1060px; margin: 0 auto; align-items: stretch; }
.forfait .inclus { font-size: .88rem; color: var(--encre-doux); margin: 0 0 14px; }
.forfait .inclus b { color: var(--lagon-800); }
.prix .sur-demande { font-size: 1.5rem; }
.prix-note { display: none; font-size: .88rem; color: var(--ok); font-weight: 650; margin: -2px 0 10px; }
.annuel .prix-note { display: block; }

/* ---------- bascule mensuel / annuel (les deux prix sont dans le HTML : data-mois / data-an) ---------- */
.bascule { display: inline-flex; align-items: center; gap: 12px; background: var(--blanc); border-radius: 999px; padding: 6px 8px; box-shadow: var(--ombre); margin: 0 auto 30px; }
.bascule button { border: none; background: transparent; font-family: var(--texte); font-weight: 650; font-size: .97rem; color: var(--encre-doux); padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.bascule button.on { background: var(--lagon-800); color: var(--blanc); }
.bascule .eco { font-size: .82rem; color: var(--ok); font-weight: 700; padding-right: 8px; }
.bascule-wrap { text-align: center; }

/* ---------- « ce que Pilotis fait à votre place » : étiquette du forfait en coin ---------- */
.carte { position: relative; }
.carte .des { position: absolute; top: 16px; right: 16px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lagon-700); background: rgba(24, 167, 189, .12); padding: 4px 10px; border-radius: 999px; }
.carte .des.serenite { background: rgba(47, 212, 228, .22); }
.carte .des.pilote { background: var(--lagon-800); color: var(--blanc); }
.section.fonce .carte .des { background: rgba(247, 244, 238, .18); color: var(--ecume); }

/* ---------- PilotIA ---------- */
.exemples { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.exemples li { background: var(--blanc); border-radius: 14px 14px 14px 4px; padding: 12px 18px; box-shadow: var(--ombre); font-style: italic; color: var(--lagon-900); max-width: 34em; }
.section.fonce .exemples li { background: rgba(247, 244, 238, .1); color: var(--ecume); box-shadow: none; }
/* Démo en code : une vraie question, une réponse sur des chiffres fictifs. Tout est visible sans
 * JS ; avec JS (et sans « réduire les animations »), .joue fait apparaître les bulles une à une. */
.pilotia-demo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; margin: 26px 0 30px; }
.pilotia-demo .exemples { margin-top: 8px; }
.mut-clair { color: rgba(247, 244, 238, .75); margin: 0; }
.conversation { margin: 0; background: var(--ecume); color: var(--encre); border-radius: 18px; box-shadow: var(--ombre-forte); padding: 0 18px 14px; overflow: hidden; }
.conv-barre { margin: 0 -18px 14px; padding: 10px 18px; background: var(--lagon-800); color: var(--blanc); font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.conv-barre .point { width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); }
.bulle { margin: 0 0 12px; padding: 11px 15px; border-radius: 16px; max-width: 92%; }
.bulle.moi { margin-left: auto; width: fit-content; background: var(--lagon-800); color: var(--blanc); border-bottom-right-radius: 4px; }
.bulle.ia { background: var(--blanc); border-bottom-left-radius: 4px; box-shadow: var(--ombre); }
.bulle.ia p { margin: 0 0 8px; }
.bulle.ia table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 4px 0 10px; }
.bulle.ia td { padding: 5px 6px; border-top: 1px solid var(--sable-fonce); vertical-align: top; }
.bulle.ia td:nth-child(2) { text-align: right; white-space: nowrap; font-weight: 700; }
.bulle.ia td.retard { color: var(--bois-fonce); }
.bulle.ia .choix { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.bulle.ia .choix span { border: 1.5px solid var(--lagon-800); color: var(--lagon-800); border-radius: 999px; padding: 4px 12px; font-size: .88rem; font-weight: 600; }
.bulle.ia .choix span:first-child { background: var(--lagon-800); color: var(--blanc); }
.bulle.ecrit { display: none; width: fit-content; background: var(--blanc); box-shadow: var(--ombre); }
.bulle.ecrit span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--encre-doux); animation: ecrit 1s infinite ease-in-out; }
.bulle.ecrit span:nth-child(2) { animation-delay: .15s; }
.bulle.ecrit span:nth-child(3) { animation-delay: .3s; }
@keyframes ecrit { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.conversation figcaption { font-size: .8rem; color: var(--encre-doux); text-align: right; }
.conversation.joue .moi, .conversation.joue .ia, .conversation.joue .ia > * { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.conversation.joue .vu { opacity: 1 !important; transform: none !important; }
.conversation.joue .bulle.ecrit.on { display: block; }
@media (max-width: 860px) { .pilotia-demo { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bulle.ia tr { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--sable-fonce); } .bulle.ia td { border-top: 0; } .bulle.ia td.retard { grid-column: 1 / -1; padding-top: 0; font-size: .85rem; } }
.video-cadre { max-width: 900px; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: var(--ombre-forte); background: var(--lagon-950); aspect-ratio: 16 / 10; }
.video-cadre video { width: 100%; height: 100%; display: block; }
.video-attente { height: 100%; display: grid; place-items: center; text-align: center; padding: 40px; color: rgba(247, 244, 238, .85); }
.video-attente .ico { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px; background: rgba(247, 244, 238, .92); display: grid; place-items: center; }
.video-attente .ico svg { width: 44px; height: 44px; }
.video-attente p { max-width: 30em; margin: 0; }
.questions-demo { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; margin: 16px auto 0; max-width: 900px; padding: 0; list-style: none; }
.questions-demo li { font-size: .9rem; color: var(--encre-doux); background: var(--blanc); border-radius: 999px; padding: 6px 14px; box-shadow: var(--ombre); }
.colonnes-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.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 .prix-ht { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--lagon-700); background: rgba(24, 167, 189, .12); padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 2px; }
.forfait .btn { margin-top: auto; }
.forfait ul { margin-bottom: 22px; }
/* Offres (01/10/2026) : l'essentiel en vue, le détail du même texte replié par thème. */
.forfait .detail-offre { margin: -8px 0 22px; border-top: 1px solid rgba(10, 69, 82, .1); }
.forfait .detail-offre summary { cursor: pointer; list-style: none; padding: 12px 0 4px; font-weight: 650; font-size: .92rem; color: var(--lagon-700); }
.forfait .detail-offre summary::-webkit-details-marker { display: none; }
.forfait .detail-offre summary::after { content: ' +'; color: var(--turquoise); }
.forfait .detail-offre[open] summary::after { content: ' −'; }
.forfait .detail-offre ul { margin-bottom: 8px; font-size: .92rem; }
.forfait .detail-theme { margin: 12px 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-doux); }
/* Accueil (29/09/2026) : trois cartes courtes, la ligne commune une fois dessous, puis le comparatif. */
/* Accueil, présentation du 02/10/2026 : nom et prix alignés d'une carte à l'autre (sous-grille),
   les phares, le résumé du Catalogue en encadré, le bouton au même niveau ; la ligne commune en
   bandeau. Les navigateurs sans sous-grille gardent la colonne, sans alignement croisé. */
#forfaits .forfaits { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
#forfaits .forfait { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; padding: 30px 28px 28px; }
/* Aperçu 3 (« mieux, mais un peu terne ») : même structure, plus de relief. Chaque offre a sa
   tête de couleur, du lagon clair au lagon profond à mesure que Pilotis travaille davantage :
   la couleur dit la gradation des trois offres, elle ne décore pas. */
#forfaits .forfait-tete { margin: -30px -28px 22px; padding: 30px 28px 26px; border-radius: 18px 18px 0 0; background: linear-gradient(160deg, #e3f5f7, #c9ecf1); position: relative; }
#forfaits .forfait-tete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 q15 -6 30 0 t30 0 t30 0 t30 0 V12 H0 Z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
#forfaits .forfait-tete h3 { color: var(--lagon-900); }
#forfaits .forfait[data-offre="serenite"] .forfait-tete { background: linear-gradient(160deg, var(--turquoise), var(--lagon-600)); }
#forfaits .forfait[data-offre="pilote"] .forfait-tete { background: linear-gradient(160deg, var(--lagon-800), var(--lagon-950)); }
#forfaits .forfait[data-offre="serenite"] .forfait-tete h3, #forfaits .forfait[data-offre="pilote"] .forfait-tete h3,
#forfaits .forfait[data-offre="serenite"] .prix b { color: var(--blanc); }
#forfaits .forfait[data-offre="pilote"] .prix b { color: var(--soleil); }
#forfaits .forfait[data-offre="serenite"] .prix span, #forfaits .forfait[data-offre="pilote"] .prix span,
#forfaits .forfait[data-offre="serenite"] .prix-note, #forfaits .forfait[data-offre="pilote"] .prix-note { color: rgba(247, 244, 238, .88); }
#forfaits .forfait[data-offre="serenite"] .prix .prix-ht, #forfaits .forfait[data-offre="pilote"] .prix .prix-ht { color: var(--lagon-950); background: var(--soleil); }
#forfaits .forfait.star { transform: translateY(-10px); box-shadow: 0 26px 60px rgba(5, 46, 55, .26); }
#forfaits .forfait .badge { background: var(--soleil); color: var(--lagon-950); z-index: 2; box-shadow: 0 4px 12px rgba(5, 46, 55, .25); }
#forfaits .forfait[data-offre="serenite"] .pitch { background: rgba(24, 167, 189, .1); }
#forfaits .forfait[data-offre="pilote"] .pitch { background: rgba(10, 69, 82, .08); }
/* Lot 1 du 02/10/2026 (« un dégradé ou quelque chose de subtil qui fait bien fini ») :
   - la tête reçoit un reflet clair en haut à droite, posé SUR son dégradé, comme la lumière
     sur l'eau du lagon : la couleur de l'offre ne change pas, elle prend du volume ;
   - le corps de carte n'est plus d'un blanc plat : il se teinte à peine de la couleur de
     l'offre vers le bas, là où le bouton l'attend ;
   - des ombres en couches (un contact net, une portée douce) et un liseré d'une nuance, au
     lieu d'une seule ombre grise : c'est ce qui donne l'impression d'un objet fini.
   Référence du design d'offre, que l'écran de commande de l'espace reprend (lot 2). */
#forfaits .forfait { border: 1px solid rgba(10, 69, 82, .09); background: linear-gradient(180deg, var(--blanc) 52%, #f2f9fa); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(5, 46, 55, .06), 0 16px 40px rgba(5, 46, 55, .10); }
#forfaits .forfait[data-offre="serenite"] { background: linear-gradient(180deg, var(--blanc) 52%, #eaf7f9); }
#forfaits .forfait[data-offre="pilote"] { background: linear-gradient(180deg, var(--blanc) 52%, #edf2f4); }
#forfaits .forfait.star { border: 2px solid var(--turquoise); box-shadow: 0 3px 8px rgba(5, 46, 55, .08), 0 26px 60px rgba(5, 46, 55, .24); }
#forfaits .forfait-tete { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, #e3f5f7, #c9ecf1); box-shadow: inset 0 -1px 0 rgba(5, 46, 55, .05); }
#forfaits .forfait[data-offre="serenite"] .forfait-tete { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, var(--turquoise), var(--lagon-600)); }
#forfaits .forfait[data-offre="pilote"] .forfait-tete { background-image: radial-gradient(120% 90% at 100% 0%, rgba(47, 212, 228, .22), rgba(47, 212, 228, 0) 55%), linear-gradient(160deg, var(--lagon-800), var(--lagon-950)); }
/* L'icône de l'offre : une pastille ronde à gauche du nom, le glyphe du Catalogue dedans. */
.forfait-nom { display: flex; align-items: center; gap: 12px; }
.forfait-nom h3 { margin: 0; }
.icone-offre { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--blanc), #e9f6f8); color: var(--lagon-700); box-shadow: 0 2px 6px rgba(5, 46, 55, .12), inset 0 0 0 1px rgba(10, 69, 82, .06); }
.icone-offre svg { width: 21px; height: 21px; display: block; }
#forfaits .forfait[data-offre="serenite"] .icone-offre, #forfaits .forfait[data-offre="pilote"] .icone-offre { background: rgba(255, 255, 255, .14); color: var(--blanc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
#forfaits .forfait[data-offre="pilote"] .icone-offre { color: var(--soleil); }
#forfaits .forfait-tete .prix { margin: 6px 0 0; }
#forfaits .forfait-tete .prix-note { margin: 4px 0 0; }
#forfaits .phares { margin: 0 0 18px; font-weight: 600; color: var(--lagon-900); }
#forfaits .pitch { min-height: 0; margin: 0 0 22px; font-size: .92rem; line-height: 1.55; background: var(--sable); border-radius: 12px; padding: 14px 16px; align-self: start; }
#forfaits .forfait .btn { margin-top: 0; width: 100%; text-align: center; padding: 15px 10px; font-size: .95rem; }
#forfaits .commun { display: flex; align-items: center; gap: 16px; max-width: 1060px; margin: 30px auto 0; padding: 18px 24px; background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); font-weight: 600; color: var(--lagon-800); }
#forfaits .commun svg { flex: none; width: 40px; height: 40px; }
@media (max-width: 960px) { #forfaits .forfait.star { transform: none; } #forfaits .forfaits { grid-template-rows: none; row-gap: 30px; } #forfaits .forfait { grid-row: auto; grid-template-rows: none; } }
#forfaits .vers-comparatif { margin-top: 18px; }

/* ---------- 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; }
.panneau-illu { width: 64px; height: 64px; margin: 0 auto 10px; }
.panneau-illu svg { width: 100%; height: 100%; display: block; }
.funnel-panneau h2, .funnel-panneau h1 { margin-bottom: 6px; }

.choix-offres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.choix-offres.trois { grid-template-columns: 1fr 1fr 1fr; }
.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 .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(24, 167, 189, .12); margin-bottom: 8px; }
.choix-offre .ico svg { width: 32px; height: 32px; display: block; }
a.btn-cta, a.btn-cta:visited { color: var(--lagon-900); } /* bouton jaune soleil depuis la refonte : texte foncé, jamais blanc (contraste) */
.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, .choix-offres.trois { grid-template-columns: 1fr; } }
.compare td.opt { color: var(--lagon-700); font-size: .88rem; font-weight: 650; }

.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 select {
	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 select:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(24, 167, 189, .14); }
.champ input, .champ textarea {
	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 textarea { min-height: 160px; resize: vertical; }
.champ input:focus, .champ textarea: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; }
.succes-boite { background: rgba(47, 158, 110, .1); border-left: 4px solid var(--ok); padding: 14px 16px; border-radius: 8px; color: var(--ok); font-weight: 650; margin: 16px 0; animation: apparait .3s ease; }

/* 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); }

/* ---------- panoramas pleine largeur (une grande scène par page) ---------- */
.panorama { background: var(--ecume); line-height: 0; }
.panorama.sable { background: var(--sable); }
.panorama svg { display: block; width: 100%; height: auto; min-height: 180px; }

/* ---------- filigranes (silhouette de la case) ---------- */
.filigrane { position: absolute; pointer-events: none; color: var(--ecume); }
.filigrane svg { width: 100%; height: auto; display: block; }

/* ---------- appel final ---------- */
.cta-final { text-align: center; padding: 80px 22px; position: relative; overflow: hidden; }
.cta-final > * { position: relative; }
.cta-final .filigrane { position: absolute; right: -40px; bottom: -60px; width: 320px; opacity: .06; }
.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; position: relative; overflow: hidden; }
.footer .filigrane { right: 1%; bottom: -40px; width: 240px; opacity: .05; }
.footer .wrap { position: relative; }
.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; } }

/* mention « À activer pendant la prise en main. » (cartes Socle fournisseurs et banque, décision
   2026-09-28-socle-rien-d-allume-activation-pendant-la-decouverte) */
.carte .activer { font-size: .88rem; font-weight: 600; color: var(--lagon-700); margin: -.4em 0 0; }
/* L'atelier sur l'accueil (01/10/2026) : mis en avant, à la voix d'Amandine. */
.atelier-accueil { background: linear-gradient(180deg, rgba(24, 167, 189, .08), rgba(24, 167, 189, 0)); }
.atelier-accueil .lede-section { font-size: 1.12rem; line-height: 1.65; color: var(--encre); }
.engagements { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 26px 0 26px; }
.engagement { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.engagement .ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(24, 167, 189, .12); }
.engagement .ico svg { width: 30px; height: 30px; display: block; }
.engagement b { color: var(--lagon-900); line-height: 1.3; }

/* ---------- visionneuse des captures (accueil, aperçu 3) ----------
   Un <dialog> natif : Échap ferme, le focus reste dedans. L'écran s'affiche à sa largeur
   utile ; sur téléphone il garde 1100 px de large, donc des textes lisibles, et se parcourt
   au doigt (défilement horizontal), plutôt que d'être réduit jusqu'à l'illisible. */
.visionneuse { border: 0; padding: 0; margin: auto; width: min(1240px, 96vw); max-width: 96vw; max-height: 94vh; background: var(--lagon-950); color: var(--ecume); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); overflow: hidden; }
.visionneuse::backdrop { background: rgba(2, 20, 25, .82); }
.visionneuse-tete { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; }
.visionneuse-titre { font: 700 1.05rem var(--titres); color: var(--blanc); flex: 1; }
.visionneuse-compte { font-size: .88rem; color: rgba(207, 229, 233, .75); }
.visionneuse button { border: 0; background: rgba(247, 244, 238, .1); color: var(--blanc); width: 40px; height: 40px; border-radius: 50%; font: 600 1.25rem/1 var(--texte); cursor: pointer; display: grid; place-items: center; flex: none; }
.visionneuse button:hover { background: rgba(247, 244, 238, .2); }
.visionneuse button:focus-visible { outline: 2px solid var(--soleil); outline-offset: 2px; }
.visionneuse-cadre { overflow: auto; max-height: calc(94vh - 130px); background: #f6f8f8; -webkit-overflow-scrolling: touch; }
.visionneuse-cadre img { display: block; width: 100%; height: auto; }
.visionneuse-legende { margin: 0; padding: 12px 18px 14px; font-size: .95rem; line-height: 1.45; }
.visionneuse-glisser { display: none; font-size: .82rem; color: rgba(207, 229, 233, .75); padding: 0 18px 12px; margin: -6px 0 0; }
@media (max-width: 860px) {
	.visionneuse { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
	.visionneuse[open] { display: flex; flex-direction: column; }
	.visionneuse-cadre { flex: 1; max-height: none; }
	.visionneuse-cadre img { width: 1100px; max-width: none; }
	.visionneuse-glisser { display: block; }
}