/* ==========================================================================
   Green idylle — design system « Carnet » (v2)
   Univers Inanna : papier crème texturé, kraft déchiré, scotch, collages,
   arbres tropicaux dessinés, pictos sauge cerclés, touches de corail.
   Coque « appli mobile » (< 768 px), carnet éditorial (≥ 1100 px).
   ========================================================================== */

/* ---------- Polices auto-hébergées (sous-ensemble latin) ---------- */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("../fonts/instrument-serif-400-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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("../fonts/instrument-serif-400i-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: "Montserrat"; font-style: normal; font-weight: 300 700; font-display: swap;
	src: url("../fonts/montserrat-var-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: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("../fonts/special-elite-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman"); size-adjust: 88%; ascent-override: 98%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 113%; ascent-override: 85%; descent-override: 22%; }

/* ---------- Tokens ---------- */
:root {
	color-scheme: light;

	/* Palette Inanna 2024 : corail #FF7757 · ocre #D59845 · sauge #7B947E · crème #EAE6DB */
	--gi-corail: #ff7757; --gi-corail-vif: #ff5a3d; --gi-corail-fonce: #b8432b; --gi-corail-pale: #ffe7df;
	--gi-ocre: #d59845; --gi-ocre-fonce: #8a5a1c; --gi-kraft: #c9a36b;
	--gi-sauge: #7b947e; --gi-sauge-clair: #dfe7de; --gi-sauge-pale: #eef2ec;
	--gi-sauge-texte: #4e6652; --gi-sauge-fonce: #3b4f3e; --gi-sauge-nuit: #2f3f32;
	--gi-creme: #eae6db; --gi-papier: #f4f0e7; --gi-papier-clair: #fbf9f4; --gi-blanc: #fffdf9;
	--gi-graphite: #2b2a28; --gi-encre: #3d3b37; --gi-gris: #625f58; --gi-gris-clair: #9a968c; --gi-trait: #6f6d67;
	--gi-erreur: #b3261e; --gi-erreur-pale: #fbeae7;

	--gi-bg: var(--gi-papier);
	--gi-text: var(--gi-encre);
	--gi-text-strong: var(--gi-graphite);
	--gi-text-muted: var(--gi-gris);
	--gi-link: var(--gi-sauge-texte);
	--gi-hairline: rgb(43 42 40 / .12);
	--gi-focus: var(--gi-sauge-fonce);
	--gi-press: rgb(43 42 40 / .07);
	--gi-scrim: rgb(47 63 50 / .45);

	--gi-font-serif: "Instrument Serif", "Instrument Serif Fallback", "Times New Roman", serif;
	--gi-font-sans: "Montserrat", "Montserrat Fallback", Arial, system-ui, sans-serif;
	--gi-font-machine: "Special Elite", "Courier New", Courier, monospace;
	--gi-fs-display: clamp(2.6rem, 1.7rem + 4vw, 5rem);
	--gi-fs-h1: clamp(2.25rem, 1.6rem + 2.9vw, 3.9rem);
	--gi-fs-h2: clamp(1.9rem, 1.45rem + 2vw, 3rem);
	--gi-fs-h3: clamp(1.5rem, 1.3rem + .9vw, 2rem);
	--gi-fs-h4: clamp(1.3rem, 1.2rem + .45vw, 1.55rem);
	--gi-fs-lead: clamp(1.1rem, 1.04rem + .3vw, 1.28rem);
	--gi-fs-body: clamp(1rem, .975rem + .11vw, 1.0625rem);
	--gi-fs-ui: .9375rem;
	--gi-fs-caption: .8125rem;
	--gi-fs-tab: .6875rem;
	--gi-lh-heading: 1.06; --gi-lh-body: 1.7;

	--gi-space-2: .5rem; --gi-space-3: .75rem; --gi-space-4: 1rem; --gi-space-6: 1.5rem;
	--gi-space-8: 2rem; --gi-space-10: 2.5rem; --gi-space-12: 3rem; --gi-space-16: 4rem;
	--gi-gutter: clamp(1.25rem, .6rem + 3vw, 3rem);
	--gi-section: clamp(3.5rem, 1.8rem + 7.5vw, 7.5rem);
	--gi-appbar-h: 58px; --gi-appbar-h-condensed: 50px;
	--gi-tabbar-h: 62px; --gi-actionbar-h: 76px;
	--gi-header-h: 92px; --gi-header-h-condensed: 70px;
	--gi-safe-top: env(safe-area-inset-top, 0px);
	--gi-safe-bottom: env(safe-area-inset-bottom, 0px);
	--gi-safe-left: env(safe-area-inset-left, 0px);
	--gi-safe-right: env(safe-area-inset-right, 0px);
	--gi-pad-inline: max(var(--gi-gutter), var(--gi-safe-left), var(--gi-safe-right));
	--gi-container: 76rem; --gi-container-wide: 88rem;

	--gi-radius-sm: 6px; --gi-radius-md: 12px; --gi-radius-lg: 18px; --gi-radius-xl: 26px;
	--gi-ombre-papier: 0 1px 1px rgb(60 50 30 / .08), 0 6px 18px -8px rgb(60 50 30 / .28);
	--gi-ombre-photo: 0 2px 3px rgb(40 32 20 / .12), 0 14px 30px -14px rgb(40 32 20 / .45);
	--gi-ombre-barre: 0 -.5px 0 rgb(43 42 40 / .12), 0 -8px 24px -16px rgb(43 42 40 / .22);
	--gi-ombre-sheet: 0 -16px 48px -12px rgb(43 42 40 / .32);

	--gi-dur-press: 90ms; --gi-dur-fast: 150ms; --gi-dur-base: 240ms; --gi-dur-sheet: 420ms;
	--gi-ease-standard: cubic-bezier(.2, 0, 0, 1);
	--gi-ease-out: cubic-bezier(0, 0, .2, 1);
	--gi-ease-in: cubic-bezier(.4, 0, 1, 1);
	--gi-ease-sheet: cubic-bezier(.32, .72, 0, 1);
	--gi-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--gi-z-appbar: 50; --gi-z-tabbar: 60;

	/* Matières */
	--gi-tex-papier: url("../img/matieres/papier.webp?v=3");
	--gi-tex-kraft: url("../img/matieres/kraft-dechire.webp");
	--gi-tex-scotch: url("../img/matieres/scotch.webp");
	--gi-tex-tache: url("../img/matieres/tache-corail.webp");
	--gi-bord: url("../svg/bord-dechire.svg");
	--gi-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
	:root { --gi-dur-press: 0ms; --gi-dur-base: 1ms; --gi-dur-sheet: 1ms; }
	*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
	background: var(--gi-bg);
	scroll-padding-top: calc(var(--gi-appbar-h) + var(--gi-safe-top) + 16px);
	scroll-behavior: smooth;
}
html.has-sheet { overflow: hidden; }
body {
	margin: 0;
	font-family: var(--gi-font-sans); font-weight: 400;
	font-size: var(--gi-fs-body); line-height: var(--gi-lh-body);
	color: var(--gi-text);
	background: var(--gi-bg) var(--gi-tex-papier) repeat top left / 640px auto;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	overflow-x: clip; overscroll-behavior-y: none;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--gi-link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--gi-sauge-fonce); }
:focus-visible { outline: 2px solid var(--gi-focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 {
	font-family: var(--gi-font-serif); font-weight: 400; color: var(--gi-text-strong);
	line-height: var(--gi-lh-heading); letter-spacing: -.005em;
	margin: 0 0 .5em; text-wrap: balance; hyphens: manual;
}
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; color: var(--gi-graphite); }
ul, ol { padding-left: 1.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.orn { display: block; pointer-events: none; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--gi-sauge-fonce); color: var(--gi-blanc); padding: 12px 18px; border-radius: 999px; font-weight: 600; }
.skip:focus { left: 12px; }
.main { display: block; outline: none; overflow-x: clip; }
.pied { overflow-x: clip; }
.conteneur { width: 100%; max-width: calc(var(--gi-container) + 2 * var(--gi-pad-inline)); margin-inline: auto; padding-inline: var(--gi-pad-inline); }
.conteneur--texte { max-width: calc(44rem + 2 * var(--gi-pad-inline)); }
.no-js .js-seulement { display: none; }
.js-tactile { display: none; }
.is-tactile .js-tactile { display: block; }

/* ---------- Typographie utilitaire ---------- */
.titre-section { font-size: var(--gi-fs-h2); margin-bottom: .45em; }
.titre-section--centre { text-align: center; }
.chapo { font-size: var(--gi-fs-lead); font-weight: 300; line-height: 1.6; max-width: 62ch; color: var(--gi-encre); }
.chapo--centre { margin-inline: auto; text-align: center; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--gi-sauge-texte); text-decoration: none; }
.lien-fleche .ic { width: 18px; height: 18px; transition: transform var(--gi-dur-fast) var(--gi-ease-out); }
.lien-fleche:hover .ic { transform: translateX(3px); }
.lien-fleche span { text-decoration: underline; text-decoration-color: var(--gi-corail); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.lien-appel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--gi-sauge-texte); font-weight: 600; text-decoration: none; font-size: var(--gi-fs-ui); }
.lien-appel .ic { width: 18px; height: 18px; }

/* Étiquette « machine à écrire » (comme « all the feels » de l'identité) */
.etiquette {
	display: inline-block; margin: 0 0 1rem; padding: .32em .75em .28em;
	font: 400 .875rem/1.35 var(--gi-font-machine); letter-spacing: .02em; color: var(--gi-graphite);
	background: var(--gi-blanc); box-shadow: 0 1px 2px rgb(40 32 20 / .18);
	transform: rotate(-1.2deg);
}
legend.etiquette { float: none; }

/* ---------- Matières ---------- */
.scotch {
	position: absolute; z-index: 3; top: -13px; left: 50%; width: 112px; height: 28px;
	background: var(--gi-tex-scotch) center / 100% 100% no-repeat; opacity: .94;
	transform: translateX(-50%) rotate(-3deg); pointer-events: none;
}
.scotch--coin { left: -18px; top: 14px; transform: rotate(-38deg); width: 96px; }
.scotch--haut { top: -14px; }
.scotch--gauche { left: 8%; transform: rotate(-6deg); }
.scotch--droite { left: auto; right: 6%; transform: rotate(5deg); }
.tache { display: block; width: 90px; aspect-ratio: 150 / 231; background: var(--gi-tex-tache) center / contain no-repeat; pointer-events: none; }
.picto {
	display: inline-grid; place-items: center; flex: none; width: 66px; height: 66px; border-radius: 50%;
	border: 3px solid var(--gi-sauge); background: var(--gi-papier-clair); color: var(--gi-sauge-texte);
}
.picto .ic { width: 30px; height: 30px; stroke-width: 1.9; }
.doodle { color: var(--gi-corail); width: 42px; height: auto; pointer-events: none; }
.doodle--inline { display: inline-block; width: 26px; vertical-align: -4px; margin-left: 6px; }
.pop-attente { opacity: 0; transform: scale(.3) rotate(-25deg); }
.pop-attente.is-pop { animation: gi-pop 620ms var(--gi-ease-spring) forwards; }
@keyframes gi-pop { to { opacity: 1; transform: none; } }

/* Bord de papier déchiré : la section suivante « mord » sur la précédente */
.dechirure { position: relative; height: 0; z-index: 2; pointer-events: none; overflow-x: clip; overflow-y: visible; }
.dechirure--papier::before, .dechirure--kraft::before { content: ""; position: absolute; left: -2%; right: -2%; }
.dechirure--papier::before {
	bottom: -1px; height: 26px; background: var(--gi-papier-clair);
	-webkit-mask: var(--gi-bord) center bottom / 100% 100% no-repeat; mask: var(--gi-bord) center bottom / 100% 100% no-repeat;
}
/* Bande de kraft déchiré, toujours plus large que l'écran : jamais d'angle droit visible */
.dechirure--kraft::before {
	top: -30px; height: clamp(44px, 7vw, 88px); left: -8%; right: -8%;
	background: var(--gi-tex-kraft) center / 100% 100% no-repeat;
	transform: rotate(-1.6deg); filter: drop-shadow(0 3px 4px rgb(60 40 10 / .18));
}
.papier-blanc { position: relative; background: var(--gi-papier-clair); }
.fond-creme { position: relative; background: var(--gi-creme) var(--gi-tex-papier) repeat top left / 640px auto; background-blend-mode: multiply; }
.fond-creme::before {
	content: ""; position: absolute; left: 0; right: 0; top: -25px; height: 26px; background: var(--gi-creme);
	-webkit-mask: var(--gi-bord) center bottom / 100% 100% no-repeat; mask: var(--gi-bord) center bottom / 100% 100% no-repeat;
}

/* Photo collée : bord blanc, ombre, scotch, légère rotation */
.collee { position: relative; margin: 0; padding: 7px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-photo); transform: rotate(-1.4deg); }
.collee__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--gi-creme); }
.collee--droite { transform: rotate(1.6deg); }
.collee--petite .collee__img { aspect-ratio: 1; }
.collee--portrait { max-width: 30rem; margin-inline: auto; }

/* ---------- Boutons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 12px 26px; border-radius: 999px; border: 1.5px solid transparent;
	font: 600 1rem/1.25 var(--gi-font-sans); letter-spacing: .01em; text-align: center; text-decoration: none; text-wrap: balance;
	cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
	transition: transform var(--gi-dur-press) var(--gi-ease-out), background-color var(--gi-dur-fast), border-color var(--gi-dur-fast), color var(--gi-dur-fast), box-shadow var(--gi-dur-fast);
}
.btn .ic { width: 20px; height: 20px; }
.btn:active { transform: scale(.96); }
.btn--primaire { background: var(--gi-sauge-texte); color: var(--gi-blanc); box-shadow: 0 8px 18px -10px rgb(47 63 50 / .8); }
.btn--primaire:hover { color: var(--gi-blanc); }
.btn--primaire .ic { color: var(--gi-corail-pale); }
.btn--contour { background: transparent; border-color: var(--gi-graphite); color: var(--gi-graphite); }
.btn--contour:hover { color: var(--gi-graphite); }
.btn--creme { background: var(--gi-blanc); color: var(--gi-sauge-fonce); }
.btn--creme:hover { color: var(--gi-sauge-fonce); }
.btn--petit { min-height: 44px; padding: 8px 18px; font-size: .9375rem; }
.btn--large { min-height: 56px; padding-inline: 30px; }
.btn--bloc { width: 100%; }
.btn.is-loading { opacity: .7; cursor: progress; }
@media (hover: hover) {
	.btn--primaire:hover { background: var(--gi-sauge-fonce); }
	.btn--contour:hover { background: var(--gi-graphite); color: var(--gi-blanc); }
	.btn--creme:hover { background: var(--gi-corail-pale); }
}

/* ---------- Barre d'app ---------- */
.appbar {
	position: fixed; inset: 0 0 auto; z-index: var(--gi-z-appbar);
	padding-top: var(--gi-safe-top);
	background: rgb(244 240 231 / .92);
	-webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
	transition: background-color var(--gi-dur-base) var(--gi-ease-standard), box-shadow var(--gi-dur-base);
	view-transition-name: appbar;
}
.appbar.is-compact { box-shadow: 0 .5px 0 var(--gi-hairline), 0 8px 20px -18px rgb(43 42 40 / .5); }
.appbar__in {
	position: relative; display: flex; align-items: center; gap: 4px;
	height: var(--gi-appbar-h); max-width: var(--gi-container-wide); margin-inline: auto;
	padding-inline: max(12px, var(--gi-safe-left)) max(12px, var(--gi-safe-right));
	transition: height var(--gi-dur-base) var(--gi-ease-standard);
}
.appbar.is-compact .appbar__in { height: var(--gi-appbar-h-condensed); }
.appbar__logo { display: flex; align-items: center; min-height: 44px; min-width: 44px; }
.appbar__logo img { height: 40px; width: auto; transition: height var(--gi-dur-base) var(--gi-ease-standard), opacity var(--gi-dur-base); }
.appbar.is-compact .appbar__logo img { height: 34px; }
.appbar__logo--centre { position: absolute; left: 50%; transform: translateX(-50%); }
.appbar__retour {
	display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding-right: 8px;
	color: var(--gi-graphite); font-weight: 500; font-size: .9375rem; text-decoration: none; max-width: 38%;
}
.appbar__retour span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__retour .ic { width: 22px; height: 22px; margin-left: -4px; }
.appbar__appel, .appbar__menu {
	display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	color: var(--gi-graphite); text-decoration: none; background: transparent; border: 0; cursor: pointer;
	-webkit-tap-highlight-color: transparent; transition: background-color var(--gi-dur-fast), transform var(--gi-dur-press);
}
.appbar__appel { margin-left: auto; }
.appbar__appel .ic, .appbar__menu .ic { width: 22px; height: 22px; }
.appbar__appel:active, .appbar__menu:active { transform: scale(.92); background: var(--gi-press); }
.nav-desktop, .appbar__cta { display: none; }
/* Accueil : le grand logo est dans la page, celui de la barre n'apparaît qu'au défilement */
body.gi-page-accueil .appbar:not(.is-compact) .appbar__logo img { opacity: 0; }
body.gi-page-accueil .appbar:not(.is-compact) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Barre d'onglets (téléphone) ---------- */
.tabbar {
	position: fixed; inset: auto 0 0; z-index: var(--gi-z-tabbar);
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
	min-height: calc(var(--gi-tabbar-h) + var(--gi-safe-bottom));
	padding: 6px max(6px, var(--gi-safe-left)) max(4px, var(--gi-safe-bottom)) max(6px, var(--gi-safe-right));
	background: rgb(251 249 244 / .95);
	-webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
	box-shadow: var(--gi-ombre-barre);
	transition: transform var(--gi-dur-base) var(--gi-ease-standard);
	view-transition-name: tabbar;
	-webkit-user-select: none; user-select: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tabbar { background: var(--gi-papier-clair); } }
.tabbar__onglet, .tabbar__cta {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
	min-height: 50px; padding: 4px 2px 2px; text-decoration: none; color: var(--gi-encre);
	font: 500 var(--gi-fs-tab)/1.2 var(--gi-font-sans); letter-spacing: .01em;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tabbar__onglet:hover { color: var(--gi-graphite); }
.tabbar__onglet .ic { position: relative; z-index: 1; width: 24px; height: 24px; transition: transform var(--gi-dur-press); }
.tabbar__onglet::before {
	content: ""; position: absolute; top: 2px; left: 50%; width: 56px; height: 30px; margin-left: -28px;
	border-radius: 999px; background: var(--gi-sauge-clair);
	opacity: 0; transform: scaleX(.6); transition: opacity var(--gi-dur-base), transform var(--gi-dur-base) var(--gi-ease-spring);
}
.tabbar__onglet[aria-current] { color: var(--gi-sauge-fonce); font-weight: 600; }
.tabbar__onglet[aria-current]::before { opacity: 1; transform: none; }
.tabbar__onglet:active .ic { transform: scale(.88); }
.tabbar__label { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabbar__cta { color: var(--gi-graphite); font-weight: 600; }
.tabbar__bulle {
	display: grid; place-items: center; width: 56px; height: 56px; margin: -22px 0 1px; border-radius: 50%;
	background: var(--gi-corail); color: var(--gi-graphite);
	box-shadow: 0 0 0 4px var(--gi-papier-clair), 0 8px 18px -6px rgb(255 119 87 / .7);
	transition: transform var(--gi-dur-press) var(--gi-ease-out);
}
.tabbar__bulle .ic { width: 26px; height: 26px; }
.tabbar__cta:active .tabbar__bulle { transform: scale(.92); }
.tabbar__cta.is-pulse .tabbar__bulle { animation: gi-pulse 600ms var(--gi-ease-standard) 1; }
@keyframes gi-pulse { 50% { transform: scale(1.08); } }
body:has(:is(input, textarea, select):focus) .tabbar,
body:has(:is(input, textarea, select):focus) .actionbar { transform: translateY(110%); }

/* ---------- Barre d'action tarifée (pages formule, téléphone) ---------- */
.actionbar {
	position: fixed; inset: auto 0 0; z-index: var(--gi-z-tabbar);
	display: none; align-items: center; justify-content: space-between; gap: 12px;
	min-height: calc(var(--gi-actionbar-h) + var(--gi-safe-bottom));
	padding: 10px var(--gi-pad-inline) calc(10px + var(--gi-safe-bottom));
	background: rgb(251 249 244 / .96);
	-webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
	box-shadow: var(--gi-ombre-barre);
	transition: transform var(--gi-dur-base) var(--gi-ease-standard);
}
.actionbar__prix { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.actionbar__prix small { font: 500 .75rem/1.2 var(--gi-font-sans); color: var(--gi-text-muted); }
.actionbar__prix strong { font: 400 1.625rem/1.05 var(--gi-font-serif); color: var(--gi-graphite); font-variant-numeric: lining-nums; }
.actionbar__prix span { font-size: .75rem; color: var(--gi-text-muted); }
.actionbar .btn { flex: 0 0 auto; min-width: 44%; min-height: 50px; padding-inline: 20px; }

/* ---------- Feuilles modales ---------- */
dialog.sheet {
	margin: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - var(--gi-safe-top) - 16px);
	padding: 0; border: 0; background: transparent; color: var(--gi-text); overflow: visible;
}
dialog.sheet::backdrop { background: var(--gi-scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet__panneau {
	position: relative; max-height: calc(100dvh - var(--gi-safe-top) - 16px); overflow-y: auto; overscroll-behavior: contain;
	padding: 8px var(--gi-pad-inline) calc(24px + var(--gi-safe-bottom));
	background: var(--gi-papier-clair) var(--gi-tex-papier) repeat top left / 640px auto;
	border-radius: var(--gi-radius-xl) var(--gi-radius-xl) 0 0; box-shadow: var(--gi-ombre-sheet);
	transform: translateY(var(--drag, 0px));
}
dialog.sheet[open] .sheet__panneau { animation: gi-sheet-in var(--gi-dur-sheet) var(--gi-ease-sheet); }
dialog.sheet.is-closing .sheet__panneau { animation: gi-sheet-out 220ms var(--gi-ease-in) forwards; }
dialog.sheet[open]::backdrop { animation: gi-fade-in 240ms var(--gi-ease-out); }
@keyframes gi-sheet-in { from { transform: translateY(100%); } }
@keyframes gi-sheet-out { to { transform: translateY(105%); } }
@keyframes gi-fade-in { from { opacity: 0; } }
.sheet__handle { display: flex; justify-content: center; padding: 4px 0 10px; cursor: grab; touch-action: none; }
.sheet__handle span { width: 42px; height: 6px; border-radius: 999px; background: var(--gi-kraft); }
.sheet__fermer {
	position: absolute; top: 10px; right: max(10px, var(--gi-safe-right)); display: grid; place-items: center;
	width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--gi-creme); color: var(--gi-graphite); cursor: pointer;
}
.sheet__fermer .ic { width: 20px; height: 20px; }
.sheet__orn { width: 64px; height: auto; margin: 2px auto 4px; color: var(--gi-trait); }
.sheet__titre { font-size: var(--gi-fs-h3); text-align: center; margin: 0 0 .3em; }
.sheet__titre:focus { outline: none; }
.sheet__texte { text-align: center; color: var(--gi-text-muted); font-size: var(--gi-fs-ui); margin: 0 auto 12px; max-width: 34ch; }
.dispo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; font-size: .8125rem; font-weight: 500; color: var(--gi-text-muted); text-align: center; }
.dispo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gi-gris-clair); flex: none; }
.dispo.is-ouvert::before { background: var(--gi-sauge-texte); box-shadow: 0 0 0 4px var(--gi-sauge-clair); }
.sheet__groupe { margin: 18px 0 6px; padding-left: 4px; font: 400 .875rem/1.3 var(--gi-font-machine); color: var(--gi-text-muted); }
.sheet__reassurance { margin: 14px 0 0; text-align: center; font-size: .8125rem; font-weight: 500; color: var(--gi-text-muted); }
.sheet--menu .sheet__titre { margin-bottom: 4px; }
.sheet--menu .action[aria-current] { background: var(--gi-sauge-pale); }
.sheet--menu .action[aria-current] .action__ic { background: var(--gi-sauge-texte); color: var(--gi-blanc); }
.sheet__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .875rem; }
.sheet__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gi-text-muted); }

/* Listes groupées façon réglages iOS */
.actions-liste { list-style: none; margin: 0; padding: 0; background: var(--gi-blanc); border-radius: var(--gi-radius-md); overflow: hidden; box-shadow: 0 1px 2px rgb(40 32 20 / .08); }
.action {
	position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
	min-height: 60px; padding: 11px 14px; color: var(--gi-graphite); text-decoration: none;
	-webkit-tap-highlight-color: transparent; transition: background-color var(--gi-dur-press);
}
.actions-liste li + li .action::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--gi-hairline); }
.action:hover { color: var(--gi-graphite); background: var(--gi-press); }
.action:active { background: var(--gi-press); }
.action__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gi-sauge); color: var(--gi-sauge-texte); background: var(--gi-papier-clair); }
.action__ic .ic { width: 18px; height: 18px; }
.action__txt { display: flex; flex-direction: column; min-width: 0; }
.action__txt strong { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.action__txt small { font-size: .8125rem; color: var(--gi-text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.action__chevron { width: 18px; height: 18px; color: var(--gi-gris-clair); }
.action--vedette { background: var(--gi-corail-pale); }
.action--vedette .action__ic { background: var(--gi-corail); border-color: var(--gi-corail); color: var(--gi-graphite); }

/* ---------- Fil d'Ariane ---------- */
.ariane { font-size: var(--gi-fs-caption); color: var(--gi-text-muted); margin: 0 0 1rem; }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; list-style: none; margin: 0; padding: 0; }
.ariane li { display: inline-flex; align-items: center; gap: 6px; }
.ariane li + li::before { content: "›"; color: var(--gi-gris-clair); }
.ariane a { color: var(--gi-text-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.ariane a:hover { color: var(--gi-sauge-fonce); text-decoration: underline; }
.ariane [aria-current] { color: var(--gi-encre); font-weight: 500; }

/* ---------- Héros des pages intérieures ---------- */
.main { padding-top: calc(var(--gi-appbar-h) + var(--gi-safe-top)); }
.hero { position: relative; overflow: hidden; padding: var(--gi-space-6) 0 calc(var(--gi-section) * .5); }
.hero__grille { position: relative; z-index: 1; display: grid; gap: var(--gi-space-8); align-items: center; }
.hero__arbre { position: absolute; z-index: 0; right: -40px; bottom: -10px; width: clamp(180px, 36vw, 420px); height: auto; color: var(--gi-trait); opacity: .16; }
.hero__etiquette { margin-bottom: 1.1rem; }
.hero__titre { font-size: var(--gi-fs-h1); margin-bottom: .35em; }
.hero__accroche { font: italic 400 var(--gi-fs-h3)/1.2 var(--gi-font-serif); color: var(--gi-sauge-texte); margin: -.1em 0 .8em; max-width: 30ch; }
.hero--accroche .hero__titre { font-size: var(--gi-fs-h1); }
.hero__intro { font-size: var(--gi-fs-lead); font-weight: 300; line-height: 1.6; max-width: 58ch; margin-bottom: 1.3em; }
.hero__prix { position: relative; display: inline-flex; align-items: center; margin: 0 0 1.4rem; padding: 6px 4px; font: 400 1.45rem/1 var(--gi-font-serif); color: var(--gi-graphite); isolation: isolate; }
.hero__prix .tache { position: absolute; z-index: -1; left: 50%; top: 50%; width: 58px; transform: translate(-50%, -50%) rotate(-82deg) scaleY(2.2); opacity: .32; }
.hero__prix span:last-child { position: relative; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn { flex: 1 1 100%; }
.hero__media { position: relative; width: min(100%, 26rem); margin-inline: auto; padding: 8px 10px 0; }
.collee--hero .collee__img { aspect-ratio: 4 / 5; }
.hero__doodle { position: absolute; right: -4px; top: -10px; width: 44px; }
.hero--sans-photo .hero__corps { grid-column: 1 / -1; }
.hero--simple { padding-bottom: var(--gi-space-4); }

/* ---------- Accueil ---------- */
body.gi-page-accueil .main { padding-top: calc(var(--gi-safe-top) + 8px); }
.accueil-hero { position: relative; overflow: hidden; padding: var(--gi-space-6) 0 calc(var(--gi-section) * .6); }
.accueil-hero__grille { display: grid; gap: var(--gi-space-6); }
.accueil-hero__tete { text-align: center; }
.accueil-hero__logo { width: clamp(170px, 46vw, 260px); height: auto; margin: 0 auto 6px; }
.accueil-hero__h1 {
	margin: 0 0 var(--gi-space-6); font: 300 clamp(.8rem, .74rem + .3vw, 1rem)/1.4 var(--gi-font-sans);
	text-transform: uppercase; letter-spacing: .32em; color: var(--gi-sauge-texte); text-wrap: balance;
}
.accueil-hero__accroche { font: 400 var(--gi-fs-display)/1 var(--gi-font-serif); color: var(--gi-graphite); margin: 0 0 .25em; letter-spacing: -.01em; }
.accueil-hero__accroche2 { font: italic 400 var(--gi-fs-h3)/1.25 var(--gi-font-serif); color: var(--gi-sauge-texte); margin: 0 auto; max-width: 26ch; }
.accueil-hero__collage { position: relative; width: min(100%, 30rem); margin: var(--gi-space-4) auto 0; padding: 18px 8% 40px; }
.collee--principale { width: 78%; margin-left: 4%; transform: rotate(-2deg); }
.collee--principale .collee__img { aspect-ratio: 4 / 5; }
.collee--petite { position: absolute; width: 40%; }
.collee--a { right: 0; top: 34%; transform: rotate(4deg); }
.collee--b { right: 16%; bottom: -2%; width: 32%; transform: rotate(-5deg); z-index: 2; }
.accueil-hero__arbre { position: absolute; left: -12%; bottom: 4%; width: 46%; height: auto; color: var(--gi-trait); opacity: .55; z-index: 0; }
.tache--hero { position: absolute; right: 30%; top: 6px; width: 46px; transform: rotate(18deg); z-index: 4; }
.doodle--hero { position: absolute; left: 2%; top: 0; width: 48px; z-index: 4; }
.accueil-hero__suite { max-width: 40rem; margin-inline: auto; }
.accueil-hero__prose p { font-size: var(--gi-fs-lead); font-weight: 300; line-height: 1.65; }
.accueil-hero__signature { margin: 1.2em 0 1.2em; font: italic 400 var(--gi-fs-h4)/1.3 var(--gi-font-serif); color: var(--gi-graphite); }
.accueil-hero__actions .btn { width: 100%; }

.bandeau-video { position: relative; height: clamp(220px, 42vw, 460px); overflow: hidden; background: var(--gi-creme); }
.bandeau-video__v { width: 100%; height: 100%; object-fit: cover; }

/* Si vous imaginez un mariage… */
.imaginez { padding: calc(var(--gi-section) * .75) 0 calc(var(--gi-section) * .55); }
.pictos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gi-space-8) var(--gi-space-4); list-style: none; margin: var(--gi-space-8) 0 0; padding: 0; text-align: center; }
.pictos__item { display: flex; flex-direction: column; align-items: center; }
.pictos__item .picto { margin-bottom: 12px; }
.pictos__titre { font-size: var(--gi-fs-h4); margin: 0 0 4px; }
.pictos__texte { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--gi-text-muted); max-width: 22ch; }
.imaginez__conclusion { margin: var(--gi-space-8) 0 0; text-align: center; font: italic 400 var(--gi-fs-h3)/1.2 var(--gi-font-serif); color: var(--gi-graphite); }

/* Choisir Green idylle */
.choisir { padding: calc(var(--gi-section) * .7) 0; }
.choisir::before, .methode::before, .convictions::before {
	content: ""; position: absolute; left: 0; right: 0; top: -25px; height: 26px; background: var(--gi-papier-clair);
	-webkit-mask: var(--gi-bord) center bottom / 100% 100% no-repeat; mask: var(--gi-bord) center bottom / 100% 100% no-repeat;
}
.choisir__grille { display: grid; gap: var(--gi-space-10); align-items: center; }
.choisir__visuel { position: relative; width: min(100%, 26rem); margin-inline: auto; }
.choisir__etiquette { position: absolute; left: -6px; bottom: 26px; z-index: 3; margin: 0; transform: rotate(-4deg); }
.choisir__arbre { position: absolute; right: -24%; bottom: -10%; width: 58%; height: auto; color: var(--gi-trait); opacity: .4; z-index: -1; }
.choisir .chapo { font: italic 400 var(--gi-fs-h4)/1.35 var(--gi-font-serif); color: var(--gi-sauge-texte); }

/* Grille des accompagnements */
.accompagnements { padding: calc(var(--gi-section) * .6) 0; }
.grille-acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gi-space-4); list-style: none; margin: var(--gi-space-6) 0 0; padding: 0; }
.grille-acc__item:nth-child(odd) { transform: rotate(-.6deg); }
.grille-acc__item:nth-child(even) { transform: rotate(.6deg); }
.grille-acc__lien {
	position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gi-creme);
	border: 7px solid var(--gi-blanc); box-shadow: var(--gi-ombre-photo); color: var(--gi-blanc); text-decoration: none;
}
.grille-acc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--gi-ease-out); }
.grille-acc__lien::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(35 45 36 / .82), rgb(35 45 36 / .1) 58%, rgb(35 45 36 / 0)); }
.grille-acc__nom { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 44px; font: 400 clamp(1.5rem, 1.3rem + .9vw, 2rem)/1.05 var(--gi-font-serif); color: var(--gi-blanc); }
.grille-acc__voile { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grille-acc__phrase { font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--gi-papier); }
.grille-acc__cta { display: none; }
.grille-acc__cta .ic { width: 18px; height: 18px; }
.grille-acc__lien:focus-visible { outline: 3px solid var(--gi-sauge-fonce); outline-offset: 4px; }
@media (hover: hover) {
	.grille-acc__lien::after { transition: background-color 400ms var(--gi-ease-out); }
	.grille-acc__voile {
		inset: 0; flex-direction: column; justify-content: center; text-align: center; padding: 22px;
		background: rgb(59 79 62 / .9); opacity: 0; transition: opacity 360ms var(--gi-ease-out);
	}
	.grille-acc__phrase { font: italic 400 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.25 var(--gi-font-serif); color: var(--gi-blanc); }
	.grille-acc__cta { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--gi-corail-pale); text-decoration: underline; text-decoration-color: var(--gi-corail); text-underline-offset: .3em; }
	.grille-acc__nom { bottom: 18px; }
	.grille-acc__lien:is(:hover, :focus-visible) .grille-acc__voile { opacity: 1; }
	.grille-acc__lien:hover .grille-acc__img { transform: scale(1.05); }
}

/* Pourquoi : cartes qui se retournent */
.pourquoi { padding: calc(var(--gi-section) * .75) 0 calc(var(--gi-section) * .6); overflow: hidden; }
.pourquoi__arbre { position: absolute; left: -60px; bottom: 0; width: clamp(160px, 28vw, 340px); height: auto; color: var(--gi-trait); opacity: .18; }
.pourquoi__astuce { margin: -.4em 0 var(--gi-space-4); text-align: center; font: 400 .875rem/1.3 var(--gi-font-machine); color: var(--gi-text-muted); }
.flips { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: var(--gi-space-6) 0 0; padding: 0; }
.flip { perspective: 1100px; }
.flip__btn {
	position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; cursor: pointer;
	transform-style: preserve-3d; transition: transform 640ms var(--gi-ease-standard); -webkit-tap-highlight-color: transparent; text-align: center;
}
.flip__face {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	padding: 16px 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
	background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier);
}
.flip__face--avant { border-top: 4px solid var(--gi-sauge); }
.flip__titre { font: 400 var(--gi-fs-h4)/1.1 var(--gi-font-serif); color: var(--gi-graphite); }
.flip__plus { position: absolute; right: 10px; bottom: 10px; width: 18px; height: 18px; color: var(--gi-corail); }
.flip__face--dos { transform: rotateY(180deg); background: var(--gi-sauge-texte); color: var(--gi-blanc); justify-content: center; }
.flip__texte { font-size: .875rem; line-height: 1.5; }
.flip.is-retourne .flip__btn { transform: rotateY(180deg); }
@media (hover: hover) {
	.flip:hover .flip__btn, .flip__btn:focus-visible { transform: rotateY(180deg); }
}
.flip__btn:focus-visible { outline: none; }
.flip:has(.flip__btn:focus-visible) { outline: 2px solid var(--gi-focus); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
	.flip__btn { transform: none !important; }
	.flip__face--dos { transform: none; opacity: 0; transition: opacity 1ms; }
	.flip:is(:hover, .is-retourne) .flip__face--dos, .flip__btn:focus-visible .flip__face--dos { opacity: 1; }
}
.pourquoi__cta { margin-top: var(--gi-space-8); text-align: center; }

/* ---------- Sections : rythme ---------- */
.faq, .tarif, .proches, .questionnaire, .merci-suite, .page-corps, .page-article, .page-intro, .erreur, .catalogue,
.histoire, .role, .mots, .gouts, .temoignages, .univers { padding-block: calc(var(--gi-section) / 2); }
.page-intro { padding-bottom: 0; }

/* ---------- Prose et blocs ---------- */
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose p { max-width: 68ch; }
.prose--centre { text-align: center; }
.prose--centre p { margin-inline: auto; }
.prose--compacte > * + * { margin-top: .7em; }
.prose__h2 { font-size: var(--gi-fs-h2); padding-top: .35em; }
.prose > .prose__h2:not(:first-child) { margin-top: 1.4em; }
.prose__h3 { font-size: var(--gi-fs-h3); }
.prose > .prose__h3:not(:first-child) { margin-top: 1.2em; }
.prose > * + .prose__h3, .prose > .prose__h2 + * { margin-top: .5em; }
.prose a { font-weight: 500; text-decoration-color: var(--gi-corail); text-decoration-thickness: 1.5px; }
.liste-feuille { list-style: none; padding: 0; display: grid; gap: .6em; }
.liste-feuille li { position: relative; padding-left: 26px; }
.liste-feuille li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--gi-corail); }
.etapes { list-style: none; padding: 0; display: grid; }
.etapes__item { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.etapes__item::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px; border-left: 1.5px dashed var(--gi-sauge); }
.etapes__item:last-child { padding-bottom: 0; }
.etapes__item:last-child::before { display: none; }
.etapes__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid var(--gi-sauge); background: var(--gi-papier-clair); color: var(--gi-sauge-texte); font: 400 1.375rem/1 var(--gi-font-serif); }
.etapes__titre { font-size: var(--gi-fs-h4); margin: 10px 0 6px; }
.etapes__corps p { margin: 0; }
.cartes-icone { display: grid; gap: 12px; }
.carte-icone { background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); padding: 20px; }
.carte-icone__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--gi-sauge); color: var(--gi-sauge-texte); margin-bottom: 12px; }
.carte-icone__titre { font-size: var(--gi-fs-h4); margin: 0 0 6px; }
.carte-icone p { margin: 0; font-size: .96875rem; }
.encadre { position: relative; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); padding: 26px 22px 22px; transform: rotate(-.4deg); }
.encadre__titre { position: relative; margin: 0 0 8px; font: 400 .95rem/1.3 var(--gi-font-machine); color: var(--gi-sauge-texte); }
.encadre p:last-child { position: relative; margin: 0; }
.citation { margin-inline: 0; text-align: center; padding: 12px 0; }
.citation__ic { width: 34px; height: 34px; color: var(--gi-corail); margin-bottom: 6px; }
.citation blockquote { margin: 0; }
.citation blockquote p { font: italic 400 clamp(1.35rem, 1.2rem + .7vw, 1.8rem)/1.3 var(--gi-font-serif); color: var(--gi-graphite); max-width: 34ch; margin: 0 auto; }
.citation figcaption { margin-top: 10px; font: 400 .875rem/1.3 var(--gi-font-machine); color: var(--gi-text-muted); }
.bloc-image { margin-inline: 0; padding: 7px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-photo); transform: rotate(-.6deg); }
.bloc-image__img { width: 100%; }
.bloc-image figcaption { margin-top: 8px; font: 400 .875rem/1.35 var(--gi-font-machine); color: var(--gi-text-muted); }

/* ---------- Carrousels ---------- */
.rail-wrap { max-width: var(--gi-container-wide); margin-inline: auto; }
.rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); gap: 16px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gi-pad-inline); padding: 24px var(--gi-pad-inline) 22px;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail:focus-visible { outline-offset: -3px; }
.rail--avis { align-items: stretch; }
.rail-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rail-btn { display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gi-graphite); background: transparent; color: var(--gi-graphite); cursor: pointer; transition: background-color var(--gi-dur-fast), opacity var(--gi-dur-fast); }
.rail-btn .ic { width: 20px; height: 20px; }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-dots { display: flex; align-items: center; }
.rail-dot { position: relative; width: 20px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.rail-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--gi-gris-clair); transition: width var(--gi-dur-base) var(--gi-ease-standard), background-color var(--gi-dur-base); }
.rail-dot[aria-current="true"]::before { width: 18px; background: var(--gi-corail); }

/* ---------- Cartes formule ---------- */
.fcard { position: relative; display: flex; flex-direction: column; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); transition: transform var(--gi-dur-press) var(--gi-ease-out), box-shadow var(--gi-dur-fast); }
.fcard:active { transform: scale(.98); }
.fcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 7px 7px 0; background: var(--gi-creme); }
.fcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--gi-ease-out); }
.pastille { position: absolute; top: 10px; left: 10px; padding: 6px 11px; background: var(--gi-blanc); color: var(--gi-graphite); font: 400 .8125rem/1.1 var(--gi-font-machine); box-shadow: 0 1px 2px rgb(40 32 20 / .2); transform: rotate(-2deg); }
.fcard__corps { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 14px; }
.fcard__nom { font-size: var(--gi-fs-h4); margin: 0; }
.fcard__accroche { margin: 0; color: var(--gi-text-muted); font-size: .9375rem; line-height: 1.55; }
.fcard__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; min-height: 40px; font-weight: 600; font-size: .9375rem; color: var(--gi-sauge-texte); text-decoration: none; }
.fcard__lien::after { content: ""; position: absolute; inset: 0; }
.fcard__lien .ic { width: 18px; height: 18px; transition: transform var(--gi-dur-fast) var(--gi-ease-out); }
.fcard__lien:focus-visible { outline: none; }
.fcard:has(.fcard__lien:focus-visible) { outline: 2px solid var(--gi-focus); outline-offset: 3px; }
@media (hover: hover) {
	.fcard:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--gi-ombre-photo); }
	.fcard:hover .fcard__img { transform: scale(1.03); }
	.fcard:hover .fcard__lien .ic { transform: translateX(3px); }
}
.fcard--horizontale { flex-direction: row; }
.fcard--horizontale .fcard__media { flex: 0 0 36%; aspect-ratio: auto; min-height: 160px; margin: 7px 0 7px 7px; }
.fcard--horizontale .pastille { top: 8px; left: 8px; font-size: .75rem; padding: 5px 8px; }
.proches__grille { display: grid; gap: 16px; margin-top: var(--gi-space-4); }
.conteneur--moyen { max-width: calc(52rem + 2 * var(--gi-pad-inline)); }
.tarifs-liste { list-style: none; margin: var(--gi-space-6) 0 0; padding: 0; display: grid; gap: 12px; }
.tarif-ligne__lien {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
	padding: 18px 48px 18px 20px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); color: var(--gi-encre); text-decoration: none;
	transition: transform var(--gi-dur-fast) var(--gi-ease-out), box-shadow var(--gi-dur-fast);
}
.tarif-ligne:nth-child(odd) .tarif-ligne__lien { transform: rotate(-.3deg); }
.tarif-ligne__nom { font: 400 var(--gi-fs-h4)/1.1 var(--gi-font-serif); color: var(--gi-graphite); }
.tarif-ligne__prix { font: 400 .875rem/1.3 var(--gi-font-machine); color: var(--gi-sauge-texte); white-space: nowrap; text-align: right; }
.tarif-ligne__accroche { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.5; color: var(--gi-text-muted); }
.tarif-ligne__fleche { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--gi-corail); transition: transform var(--gi-dur-fast) var(--gi-ease-out); }
.tarif-ligne--aussi { margin-top: 18px; }
.tarif-ligne--aussi .tarif-ligne__lien { background: var(--gi-papier-clair); border: 1.5px dashed var(--gi-kraft); box-shadow: none; }
@media (hover: hover) {
	.tarif-ligne__lien:hover { transform: translateY(-2px) rotate(0deg); box-shadow: var(--gi-ombre-photo); color: var(--gi-encre); }
	.tarif-ligne__lien:hover .tarif-ligne__fleche { transform: translate(3px, -50%); }
}
@media (max-width: 29.99em) { .tarif-ligne__prix { grid-column: 1 / -1; text-align: left; } }
.catalogue__aussi { margin-top: var(--gi-space-10); }
.catalogue__aussi .fcard { max-width: 44rem; }

/* ---------- Témoignages (bandeau) ---------- */
.avis { position: relative; padding: calc(var(--gi-section) * .55) 0; }
.avis__tete { position: relative; }
.avis__fleche { position: absolute; left: calc(50% - 13rem); top: -24px; width: 70px; transform: rotate(10deg); }
.avis-carte { position: relative; display: flex; flex-direction: column; margin: 0; padding: 30px 22px 22px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); }
.rail--avis > :nth-child(odd) { transform: rotate(-.8deg); }
.rail--avis > :nth-child(even) { transform: rotate(.7deg); }
.avis-carte__contexte { align-self: flex-start; margin: 0 0 14px; font-size: .78rem; background: var(--gi-papier); }
.avis-carte blockquote { margin: 0 0 16px; }
.avis-carte blockquote p { margin: 0; font: italic 400 1.28rem/1.42 var(--gi-font-serif); color: var(--gi-graphite); }
.avis-carte__signature { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: .9375rem; color: var(--gi-sauge-texte); }
.avis-carte__signature::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gi-corail); margin-right: 8px; vertical-align: 2px; }
.avis__lien { margin-top: var(--gi-space-6); text-align: center; }

/* ---------- FAQ ---------- */
.faq__liste { margin-top: var(--gi-space-4); border-top: 1px solid var(--gi-hairline); }
.faq__item { border-bottom: 1px solid var(--gi-hairline); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--gi-graphite); -webkit-tap-highlight-color: transparent; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__ic { width: 22px; height: 22px; color: var(--gi-corail); transition: transform var(--gi-dur-base) var(--gi-ease-standard); }
.faq__item[open] .faq__ic { transform: rotate(45deg); }
.faq__rep { padding: 0 0 18px; }
.faq__rep p { margin: 0; }

/* ---------- Appel à l'action final : carte papier sur bande de kraft ---------- */
.cta-final { position: relative; overflow-x: clip; padding: calc(var(--gi-section) * .55) 0 calc(var(--gi-section) * .45); }
.cta-final::before {
	content: ""; position: absolute; left: -8%; right: -8%; top: 50%; height: clamp(120px, 22vw, 220px);
	background: var(--gi-tex-kraft) center / 100% 100% no-repeat; transform: translateY(-50%) rotate(-2deg); opacity: .95;
}
.cta-final__carte, .reconnaissez__carte {
	position: relative; max-width: 46rem; margin-inline: auto; padding: 46px 22px 30px; text-align: center;
	background: var(--gi-blanc); box-shadow: var(--gi-ombre-photo); transform: rotate(.5deg);
}
.cta-final__oiseau { width: 64px; margin: 0 auto 6px; }
.cta-final__titre { font-size: var(--gi-fs-h2); margin-bottom: .35em; }
.cta-final__texte { max-width: 52ch; margin: 0 auto 1.4em; }
.cta-final__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 20px; }
.cta-final__actions .btn { flex: 1 1 100%; }

/* ---------- Pages formule ---------- */
.page-corps { display: grid; gap: var(--gi-space-8); }
.page-corps__aside { display: none; }
.carte-resa { position: sticky; top: calc(var(--gi-header-h-condensed) + 24px); padding: 28px 24px 22px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); }
.carte-resa::before { content: ""; position: absolute; top: -13px; left: 50%; width: 104px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: var(--gi-tex-scotch) center / 100% 100% no-repeat; }
.carte-resa__nom { margin: 0; font: 400 .95rem/1.3 var(--gi-font-machine); color: var(--gi-sauge-texte); }
.carte-resa__prix { margin: 4px 0 14px; font: 400 var(--gi-fs-h3)/1.1 var(--gi-font-serif); color: var(--gi-graphite); }
.carte-resa .btn { margin-top: 18px; }
.carte-resa .lien-appel { width: 100%; justify-content: center; margin-top: 6px; }
.liste-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.liste-check .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--gi-sauge-texte); }
.liste-check--compacte { font-size: .9375rem; gap: 8px; }
.tarif__carte { position: relative; max-width: 44rem; margin-inline: auto; padding: 36px 22px 26px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); }
.tarif__etoile { position: absolute; top: 14px; right: 16px; width: 38px; }
.tarif__titre { position: relative; font-size: var(--gi-fs-h3); margin-bottom: .3em; padding-right: 40px; }
.tarif__prix { margin: 0 0 .5em; font: 400 var(--gi-fs-h2)/1.05 var(--gi-font-serif); color: var(--gi-sauge-texte); font-variant-numeric: lining-nums; }
.tarif .liste-check { margin: 18px 0 24px; }
.tarif__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.tarif__actions .btn { flex: 1 1 100%; }

/* ---------- Accompagnements (hub) ---------- */
.methode { padding: calc(var(--gi-section) * .7) 0; }
.methode__grille { display: grid; gap: var(--gi-space-10); align-items: center; }
.methode__visuel { position: relative; width: min(100%, 24rem); margin-inline: auto; }
.methode__arbre { position: absolute; left: -30%; bottom: -8%; width: 56%; height: auto; color: var(--gi-trait); opacity: .35; z-index: -1; }
.chips-liste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

/* ---------- À propos ---------- */
.histoire__grille, .convictions__grille { display: grid; gap: var(--gi-space-10); align-items: center; }
.histoire__visuel, .convictions__visuel { position: relative; width: min(100%, 26rem); margin-inline: auto; padding-bottom: 30px; }
.histoire__visuel .collee--a { right: -6%; bottom: -4%; top: auto; width: 44%; }
.histoire__etiquette { position: absolute; left: -4px; top: 18px; z-index: 3; margin: 0; }
.convictions { padding: calc(var(--gi-section) * .7) 0; overflow: hidden; }
.convictions__arbre { position: absolute; right: -50px; top: 10%; width: clamp(160px, 26vw, 320px); height: auto; color: var(--gi-trait); opacity: .14; }
.role__in { position: relative; text-align: center; }
.role__mots { margin: 0 auto 1.2em; max-width: 30ch; font: italic 400 var(--gi-fs-h3)/1.3 var(--gi-font-serif); color: var(--gi-sauge-texte); }
.role__trait { display: block; width: min(260px, 70%); height: 16px; margin: 1.4em auto 0; }
.compteurs { padding: calc(var(--gi-section) * .55) 0; }
.compteurs__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gi-space-8) var(--gi-space-4); list-style: none; margin: 0 auto; }
.compteur { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.compteur .picto { margin-bottom: 8px; }
.compteur__valeur { font: 400 clamp(2.2rem, 1.7rem + 2vw, 3.4rem)/1 var(--gi-font-serif); color: var(--gi-graphite); font-variant-numeric: lining-nums; }
.compteur__legende { font-size: .9375rem; color: var(--gi-text-muted); max-width: 16ch; line-height: 1.35; }
.mots__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; list-style: none; margin: var(--gi-space-6) 0 var(--gi-space-8); padding: 0; }
.mots__mot { padding: .35em .9em; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); font: italic 400 1.35rem/1.2 var(--gi-font-serif); color: var(--gi-graphite); }
.mots__mot:nth-child(3n+1) { transform: rotate(-2deg); }
.mots__mot:nth-child(3n+2) { transform: rotate(1.5deg); background: var(--gi-corail-pale); }
.mots__mot:nth-child(3n) { transform: rotate(-.5deg); }
.mots__lien { margin-top: var(--gi-space-6); text-align: center; }
.reconnaissez { position: relative; padding: calc(var(--gi-section) * .5) 0; }
.reconnaissez__lignes { list-style: none; margin: 0 auto 1em; padding: 0; max-width: 34rem; }
.reconnaissez__lignes li { font: italic 400 1.3rem/1.45 var(--gi-font-serif); color: var(--gi-graphite); }
.reconnaissez__conclusion { font-weight: 600; margin-bottom: 1.2em; }
.reconnaissez__coeur { position: absolute; right: 20px; top: 22px; width: 34px; }
.gouts__grille { display: grid; gap: 28px; }
.gouts__col { position: relative; padding: 32px 22px 24px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); }
.gouts__col--aime { transform: rotate(-.8deg); }
.gouts__col--aime-pas { transform: rotate(.8deg); background: var(--gi-papier-clair); }
.gouts__titre { font-size: var(--gi-fs-h3); margin-bottom: 14px; }
.gouts__col--aime .gouts__titre::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; border-radius: 50%; background: var(--gi-corail); }
.gouts__liste { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; margin: 0; padding: 0; line-height: 1.55; }
.gouts__liste li { font-size: .98rem; }
.gouts__liste li:not(:last-child)::after { content: "//"; margin: 0 .55em; color: var(--gi-corail); font-weight: 600; }
.gouts__col--aime-pas .gouts__liste li:not(:last-child)::after { color: var(--gi-gris-clair); }

/* ---------- Témoignages (page) ---------- */
.temoignages__liste { display: grid; gap: 34px; }
.temoignage__carte { position: relative; margin: 0; padding: 34px 22px 24px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); transform: rotate(-.5deg); }
.temoignage--decale .temoignage__carte { transform: rotate(.6deg); }
.temoignage__nom { margin: 0 0 .35em; font-size: var(--gi-fs-h3); }
.temoignage__nom::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 10px; border-radius: 50%; background: var(--gi-corail); vertical-align: .2em; }
.temoignage__contexte { margin-bottom: 18px; font-size: .8rem; background: var(--gi-papier); }
.temoignage__texte { margin: 0; }
.temoignage__texte > p { font-size: 1.02rem; line-height: 1.7; }
.temoignage__texte > p:first-child:not(:last-child) { font: italic 400 1.35rem/1.45 var(--gi-font-serif); color: var(--gi-graphite); }
.temoignage__proche { margin: 1.3em 0 .4em; padding: 14px 16px; background: var(--gi-papier); border-left: 3px solid var(--gi-sauge); }
.temoignage__proche-nom { margin: 0 0 6px; font: 400 .85rem/1.3 var(--gi-font-machine); color: var(--gi-sauge-texte); }
.temoignage__proche p:last-child { margin: 0; font-size: .96rem; }
.temoignage__signature { margin-top: 1.2em; font: italic 400 1.5rem/1.2 var(--gi-font-serif); color: var(--gi-sauge-texte); text-align: right; }
.temoignage__signature::before { content: ""; display: inline-block; width: 26px; height: 1.5px; margin-right: 10px; vertical-align: .35em; background: var(--gi-corail); }
.temoignages__photo .collee { max-width: 40rem; margin-inline: auto; }
.temoignages__photo .collee__img { aspect-ratio: 3 / 2; }
.temoignages__google { position: relative; margin-top: var(--gi-space-12); text-align: center; }
.temoignages__etoile { position: absolute; left: calc(50% - 11rem); top: -18px; width: 40px; }

/* ---------- Inspirations ---------- */
.sommaire { padding-top: var(--gi-space-6); }
.sommaire ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 2px 0 8px; overflow-x: auto; scrollbar-width: none; }
.sommaire ul::-webkit-scrollbar { display: none; }
.chip--lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; white-space: nowrap; border-radius: 999px; border: 1.5px solid var(--gi-graphite); background: var(--gi-blanc); color: var(--gi-graphite); font-weight: 500; font-size: .875rem; text-decoration: none; }
.chip--lien:hover { background: var(--gi-graphite); color: var(--gi-blanc); }
.univers { scroll-margin-top: calc(var(--gi-appbar-h) + 16px); }
.univers__tete { max-width: 44rem; margin-bottom: var(--gi-space-6); }
.univers__genre { font-size: .8rem; }
.univers__nom { margin: -.3em 0 .6em; font: italic 400 var(--gi-fs-h4)/1.2 var(--gi-font-serif); color: var(--gi-sauge-texte); }
.galerie { columns: 2; column-gap: 10px; list-style: none; margin: 0; padding: 0; }
.galerie__item { break-inside: avoid; margin-bottom: 10px; }
.galerie__item a { display: block; overflow: hidden; border: 5px solid var(--gi-blanc); box-shadow: var(--gi-ombre-papier); }
.galerie__img { width: 100%; transition: transform 500ms var(--gi-ease-out); }
@media (hover: hover) { .galerie__item a:hover .galerie__img { transform: scale(1.03); } }
.galerie__legende { margin: 6px 2px 0; font-size: var(--gi-fs-caption); color: var(--gi-text-muted); line-height: 1.4; }
.univers__credits { margin-top: var(--gi-space-6); padding: 16px 18px; background: var(--gi-blanc); box-shadow: 0 1px 2px rgb(40 32 20 / .1); max-width: 44rem; }
.univers__credits-titre { margin: 0 0 6px; font: 400 .875rem/1.3 var(--gi-font-machine); color: var(--gi-sauge-texte); }
.univers__credits ul { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--gi-text-muted); }

/* ---------- Questionnaire ---------- */
.contact-intro { position: relative; }
.contact-intro__fleche { position: absolute; right: 10%; bottom: -30px; width: 70px; transform: rotate(80deg); }
.questionnaire { scroll-margin-top: calc(var(--gi-appbar-h) + 8px); }
.questionnaire__grille { display: grid; gap: var(--gi-space-8); align-items: start; }
.questionnaire__carte { position: relative; padding: 34px 18px 24px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); min-width: 0; }
.quiz { margin-top: var(--gi-space-4); }
.quiz__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quiz__progression { margin-bottom: var(--gi-space-6); }
.quiz__etape { margin: 0 0 8px; font: 400 .9rem/1.3 var(--gi-font-machine); color: var(--gi-text-muted); }
.quiz__bar { height: 6px; border-radius: 999px; background: var(--gi-sauge-clair); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--gi-sauge-texte); transition: width 400ms var(--gi-ease-standard); }
.quiz__brouillon { margin: 8px 0 0; font-size: .75rem; color: var(--gi-text-muted); }
.quiz__step, .quiz__personne { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__duo { display: grid; gap: var(--gi-space-6); }
.quiz__personne > .etiquette { margin-bottom: 14px; }
.js .quiz__step.is-active { animation: gi-etape 280ms var(--gi-ease-out); }
@keyframes gi-etape { from { opacity: 0; transform: translateX(16px); } }
.no-js .quiz__step + .quiz__step { margin-top: var(--gi-space-8); padding-top: var(--gi-space-6); border-top: 1px solid var(--gi-hairline); }
.no-js [data-quiz-next], .no-js [data-quiz-prev], .no-js .quiz__progression { display: none !important; }
.no-js [data-quiz-submit] { display: inline-flex !important; }
.quiz__legend { display: block; width: 100%; padding: 0; margin: 0 0 18px; font: 400 var(--gi-fs-h3)/1.1 var(--gi-font-serif); color: var(--gi-graphite); outline: none; }
.champ { margin-bottom: 18px; }
.champ__label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; color: var(--gi-graphite); }
.champ__requis { color: var(--gi-erreur); text-decoration: none; border: 0; }
.champ input:not([type="checkbox"]):not([type="radio"]), .champ textarea {
	width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--gi-trait); border-radius: var(--gi-radius-sm);
	background: var(--gi-papier-clair); font-size: 1rem; line-height: 1.4; color: var(--gi-graphite);
	transition: border-color var(--gi-dur-fast), box-shadow var(--gi-dur-fast); -webkit-appearance: none; appearance: none;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gi-gris); opacity: 1; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--gi-sauge-fonce); box-shadow: 0 0 0 3px var(--gi-sauge-clair); }
.champ [aria-invalid="true"] { border-color: var(--gi-erreur) !important; }
.champ__err { display: flex; gap: 6px; margin: 6px 0 0; font-size: .875rem; font-weight: 500; color: var(--gi-erreur); }
.champ__err::before { content: "!"; display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--gi-erreur); color: #fff; font-size: .75rem; font-weight: 700; }
.choix { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.choix__legende { display: block; margin-bottom: 10px; padding: 0; font-weight: 600; font-size: .9375rem; color: var(--gi-graphite); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 16px;
	border: 1.5px solid var(--gi-trait); border-radius: 999px; background: var(--gi-papier-clair);
	font-weight: 500; font-size: .9375rem; line-height: 1.3; color: var(--gi-encre);
	transition: background-color var(--gi-dur-fast), color var(--gi-dur-fast), border-color var(--gi-dur-fast), transform var(--gi-dur-press);
}
.chip:active span { transform: scale(.96); }
.chip input:checked + span { background: var(--gi-sauge-texte); border-color: var(--gi-sauge-texte); color: var(--gi-blanc); }
.chip input:checked + span::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--gi-coche) center / contain no-repeat; mask: var(--gi-coche) center / contain no-repeat; }
.chip input:focus-visible + span { outline: 2px solid var(--gi-focus); outline-offset: 2px; }
@media (hover: hover) { .chip:hover input:not(:checked) + span { background: var(--gi-sauge-pale); } }
.champ--case { margin-top: 8px; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.case input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--gi-sauge-texte); }
.quiz__alerte { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--gi-radius-sm); background: var(--gi-erreur-pale); color: var(--gi-erreur); font-weight: 500; font-size: .9375rem; }
.quiz__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--gi-space-6); }
.quiz__nav .btn { flex: 1 1 auto; }
.quiz__nav [data-quiz-prev] { flex: 0 0 auto; }
.quiz__succes { position: relative; padding: 24px 8px 12px; text-align: center; outline: none; }
.quiz__succes-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gi-corail); color: var(--gi-graphite); margin-bottom: 14px; }
.quiz__succes-ic .ic { width: 30px; height: 30px; }
.quiz__succes h3 { font-size: var(--gi-fs-h3); }
.contact-infos { position: relative; display: grid; gap: 16px; }
.contact-infos__carte { position: relative; padding: 32px 20px 20px; background: var(--gi-blanc); box-shadow: var(--gi-ombre-papier); transform: rotate(.5deg); }
.contact-infos__titre { font-size: var(--gi-fs-h4); margin-bottom: .5em; }
.contact-infos .actions-liste { margin-top: 16px; box-shadow: none; background: var(--gi-papier); }
.contact-infos .actions-liste .action { min-height: 64px; }
.contact-infos__arbre { width: 150px; height: auto; margin: 10px auto 0; color: var(--gi-trait); opacity: .35; }

/* ---------- Merci, 404 ---------- */
.merci-suite { text-align: center; }
.merci-suite .chapo { margin-inline: auto; }
.merci-suite__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--gi-space-6); }
.erreur { text-align: center; }
.erreur__in { display: flex; flex-direction: column; align-items: center; }
.erreur__orn { width: 150px; height: auto; color: var(--gi-trait); margin-bottom: 8px; }
.erreur__code { margin: 0; font: italic 400 clamp(4rem, 3rem + 5vw, 7rem)/1 var(--gi-font-serif); color: var(--gi-corail); }
.erreur__titre { font-size: var(--gi-fs-h1); }
.erreur__texte { max-width: 44ch; font-size: var(--gi-fs-lead); }
.erreur__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--gi-space-4); }
.page-article--legal .prose__h2 { font-size: var(--gi-fs-h3); }

/* ---------- Pied de page ---------- */
.pied { position: relative; margin-top: 40px; background: var(--gi-sauge-fonce); color: var(--gi-creme); padding-top: 8px; }
.pied::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; margin-bottom: -1px; background: var(--gi-sauge-fonce);
	-webkit-mask: var(--gi-bord) center bottom / 100% 100% no-repeat; mask: var(--gi-bord) center bottom / 100% 100% no-repeat;
}
.pied__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pied__arbre { position: absolute; bottom: 0; height: auto; color: var(--gi-creme); opacity: .1; }
.pied__arbre--a { left: -30px; width: clamp(140px, 22vw, 260px); }
.pied__arbre--b { right: -20px; width: clamp(130px, 20vw, 240px); }
.pied__in { position: relative; display: grid; gap: var(--gi-space-8); max-width: calc(var(--gi-container) + 2 * var(--gi-pad-inline)); margin-inline: auto; padding: var(--gi-space-8) var(--gi-pad-inline) var(--gi-space-8); }
.pied__logo img { height: 92px; width: auto; }
.pied__slogan { margin: 12px 0 8px; font: 400 .9rem/1.3 var(--gi-font-machine); color: var(--gi-corail-pale); }
.pied__texte { margin: 0; font-size: .9375rem; max-width: 40ch; }
.pied__social { display: flex; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.pied__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 253 249 / .3); color: var(--gi-blanc); }
.pied__social a:hover { background: rgb(255 253 249 / .1); color: var(--gi-blanc); }
.pied__social .ic { width: 20px; height: 20px; }
.pied__titre { margin: 0 0 10px; font: 400 .95rem/1.3 var(--gi-font-machine); color: var(--gi-blanc); }
.pied__col ul { list-style: none; margin: 0; padding: 0; }
.pied__col li a, .pied__col li > span { display: inline-flex; align-items: center; min-height: 40px; color: var(--gi-creme); text-decoration: none; font-size: .9375rem; }
.pied__col li a:hover { color: var(--gi-blanc); text-decoration: underline; text-decoration-color: var(--gi-corail); }
.pied__contact li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center; }
.pied__contact .ic { width: 18px; height: 18px; color: var(--gi-corail); }
.pied__contact a, .pied__contact span { overflow-wrap: anywhere; }
.pied__col .btn { margin-top: 16px; }
.pied__bas { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; max-width: calc(var(--gi-container) + 2 * var(--gi-pad-inline)); margin-inline: auto; padding: 16px var(--gi-pad-inline) 22px; border-top: 1px solid rgb(255 253 249 / .14); font-size: .8125rem; }
.pied__bas p { margin: 0; }
.pied__credits a { color: var(--gi-creme); }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 0 18px; list-style: none; margin: 0; padding: 0; }
.pied__bas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gi-creme); }
.pied__bas a:hover { color: var(--gi-blanc); }

/* ---------- Visionneuse ---------- */
dialog.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #1b1a18; color: #fff; }
dialog.lightbox::backdrop { background: #1b1a18; }
.lightbox__fig { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; margin: 0; padding: calc(56px + var(--gi-safe-top)) 12px calc(64px + var(--gi-safe-bottom)); }
.lightbox__fig img { max-width: 100%; max-height: 100%; object-fit: contain; border: 6px solid var(--gi-blanc); }
.lightbox__fig figcaption { margin-top: 10px; font-size: .875rem; color: #e8e4dc; text-align: center; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lightbox__close { top: calc(12px + var(--gi-safe-top)); right: max(12px, var(--gi-safe-right)); }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: max(10px, var(--gi-safe-left)); }
.lightbox__next { right: max(10px, var(--gi-safe-right)); }
.lightbox__count { position: absolute; left: 50%; bottom: calc(18px + var(--gi-safe-bottom)); transform: translateX(-50%); margin: 0; font-size: .8125rem; color: #e8e4dc; }

/* ---------- Apparition douce (cartes et blocs, jamais le texte courant) ---------- */
.can-reveal [data-reveal] { opacity: 0; translate: 0 14px; transition: opacity 600ms var(--gi-ease-out), translate 600ms var(--gi-ease-out); }
.can-reveal [data-reveal].is-visible { opacity: 1; translate: none; }

/* ---------- Transitions entre pages ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--gi-ease-in) both gi-vt-out; }
::view-transition-new(root) { animation: 240ms var(--gi-ease-out) both gi-vt-in; }
@keyframes gi-vt-out { to { opacity: 0; } }
@keyframes gi-vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ==========================================================================
   Téléphone (< 768 px) : coque d'application
   ========================================================================== */
@media (max-width: 47.99em) {
	body { padding-bottom: calc(var(--gi-tabbar-h) + var(--gi-safe-bottom)); }
	body.gi-detail { padding-bottom: calc(var(--gi-actionbar-h) + var(--gi-safe-bottom)); }
	body.gi-detail .tabbar { display: none; }
	body.gi-detail .actionbar { display: flex; }
	.appbar__logo--centre img { height: 36px; }
	.questionnaire__carte { margin-inline: calc(var(--gi-pad-inline) * -.4); }
	.avis__fleche, .temoignages__etoile { display: none; }
}
@media (max-width: 22.4em) {
	.flips { grid-template-columns: minmax(0, 1fr); }
	.flip__btn { aspect-ratio: 16 / 10; }
}
@media (min-width: 22.5em) and (max-width: 47.99em) {
	.flip__face { padding: 14px 10px; }
	.flip__texte { font-size: .84rem; line-height: 1.45; }
}

/* ==========================================================================
   Tablette (≥ 768 px)
   ========================================================================== */
@media (min-width: 48em) {
	.tabbar, .actionbar { display: none !important; }
	.appbar__cta { display: inline-flex; margin-left: auto; }
	.appbar__appel { margin-left: 8px; }
	.hero__actions .btn, .cta-final__actions .btn, .tarif__actions .btn, .accueil-hero__actions .btn { flex: 0 0 auto; width: auto; }
	.rail-btn { display: grid; }
	.rail { grid-auto-columns: calc((100% - 2 * var(--gi-pad-inline) - 2 * 20px) / 2.4); gap: 20px; }
	.pictos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.grille-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
	.flips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.flip__btn { aspect-ratio: 4 / 5; }
	.cartes-icone { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.proches__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
	.catalogue__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
	.galerie { columns: 3; column-gap: 14px; }
	.galerie__item { margin-bottom: 14px; }
	.gouts__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.compteurs__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.quiz__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gi-space-8); }
	.temoignages__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 34px; align-items: start; }
	.temoignage--decale { margin-top: 48px; }
	.temoignages__photo { grid-column: 1 / -1; }
	.pied__in { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
	.questionnaire__carte { padding: 40px 34px 30px; }
	.cta-final__carte, .reconnaissez__carte { padding: 58px 48px 42px; }
	.tarif__carte { padding: 44px 44px 36px; }
	.encadre { padding: 30px 30px 26px; }
	dialog.sheet { margin: auto; width: min(30rem, calc(100% - 48px)); }
	dialog.sheet .sheet__panneau { border-radius: var(--gi-radius-xl); padding-bottom: 28px; }
	.sheet__handle { display: none; }
	.sheet__panneau { padding-top: 24px; }
	@keyframes gi-sheet-in { from { transform: translateY(24px) scale(.98); opacity: 0; } }
	@keyframes gi-sheet-out { to { transform: translateY(24px) scale(.98); opacity: 0; } }
}

/* ==========================================================================
   Deux colonnes (≥ 992 px)
   ========================================================================== */
@media (min-width: 62em) {
	.accueil-hero { padding-top: var(--gi-space-10); }
	.accueil-hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tete collage" "suite collage"; column-gap: var(--gi-space-16); row-gap: var(--gi-space-4); align-items: start; }
	.accueil-hero__tete { grid-area: tete; text-align: left; }
	.accueil-hero__logo { margin: 0 0 4px -8px; width: 230px; }
	.accueil-hero__accroche2 { margin: 0; }
	.accueil-hero__collage { grid-area: collage; align-self: center; width: 100%; max-width: 36rem; margin: 0 0 0 auto; padding: 30px 4% 50px; }
	.accueil-hero__suite { grid-area: suite; margin: 0; }
	.hero__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gi-space-16); }
	.hero__media { width: 100%; }
	.choisir__grille, .methode__grille, .histoire__grille, .convictions__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gi-space-16); }
	.methode__visuel, .convictions__visuel { order: 2; }
	.methode__grille, .convictions__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.grille-acc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
	.grille-acc__lien { aspect-ratio: 1; }
	.catalogue__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Ordinateur (≥ 1100 px) : en-tête classique, mise en page éditoriale
   ========================================================================== */
@media (min-width: 68.75em) {
	html { scroll-padding-top: calc(var(--gi-header-h-condensed) + 24px); }
	.main { padding-top: var(--gi-header-h); }
	body.gi-page-accueil .main { padding-top: calc(var(--gi-header-h) - 20px); }
	.appbar__in { height: var(--gi-header-h); gap: 12px; padding-inline: var(--gi-pad-inline); }
	.appbar.is-compact .appbar__in { height: var(--gi-header-h-condensed); }
	.appbar__logo img { height: 64px; }
	.appbar.is-compact .appbar__logo img { height: 50px; }
	.appbar__logo--centre { position: static; transform: none; }
	.appbar__retour, .appbar__menu, .appbar__appel { display: none; }
	.nav-desktop { display: block; margin-left: auto; }
	.nav-desktop ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
	.nav-desktop a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; color: var(--gi-graphite); font-weight: 500; font-size: .9375rem; text-decoration: none; }
	.nav-desktop a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--gi-corail); transform: scaleX(0); transform-origin: left; transition: transform var(--gi-dur-base) var(--gi-ease-out); }
	.nav-desktop a:hover::after, .nav-desktop a[aria-current]::after { transform: none; }
	.nav-desktop a[aria-current] { font-weight: 600; }
	.appbar__cta { margin-left: 8px; }
	.hero { padding-top: var(--gi-space-10); }
	.page-corps { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--gi-space-16); align-items: start; }
	.page-corps__aside { display: block; height: 100%; }
	.page-corps__principal { max-width: 46rem; }
	.rail { grid-auto-columns: calc((100% - 2 * var(--gi-pad-inline) - 2 * 24px) / 3); gap: 24px; }
	.flip__btn { aspect-ratio: 1; }
	.flip__texte { font-size: .9375rem; }
	.galerie { columns: 4; }
	.questionnaire__grille { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--gi-space-12); }
	.contact-infos { position: sticky; top: calc(var(--gi-header-h-condensed) + 24px); }
	.pied::before { height: 34px; }
}

/* Impression */
@media print {
	.appbar, .tabbar, .actionbar, .pied, dialog, .orn, .scotch, .doodle { display: none !important; }
	.main { padding: 0 !important; }
	body { background: #fff; }
}