/* =====================================================================
   Bailsecurity - page d'accueil cinématique
   Scrub vidéo du héros, logo animé, sections pastel, formulaires.
   ===================================================================== */

:root {
	--canvas: #F4F6FB;
	--canvas-2: #EAEFF8;
	--surface: #FFFFFF;
	--ink: #1B2340;
	--ink-2: #46506C;
	--ink-3: #6E7792;
	--line: #DCE2EE;
	--line-strong: #B9C3D8;
	--blue: #C7D9F7;
	--blue-deep: #A9C3EE;
	--sage: #D3E8DC;
	--lilac: #DED7F7;
	--peach: #FADCC9;
	--butter: #FFF3CF;
	--accent: #5B6CF0;
	--accent-2: #4453D6;
	--accent-soft: #E6E9FF;
	--rose-ink: #B23B3B;
	--radius: 22px;
	--radius-sm: 12px;
	--shadow: 0 1px 2px rgba(27,35,64,.05), 0 10px 30px rgba(27,35,64,.08);
	--shadow-lg: 0 2px 6px rgba(27,35,64,.06), 0 30px 70px rgba(27,35,64,.14);
	--ease: cubic-bezier(.22,.8,.24,1);
	--ease-in-out: cubic-bezier(.65,0,.35,1);
	--font: "Manrope", "Segoe UI", system-ui, sans-serif;
	--display: "Syne", "Manrope", sans-serif;
	--mono: "DM Mono", ui-monospace, monospace;
	--tshadow: 0 1px 2px rgba(10,14,30,.55), 0 3px 14px rgba(10,14,30,.45), 0 10px 44px rgba(10,14,30,.45);
	--nav-h: 76px;
	--principe-chevauche: 40px;   /* le panneau « Le principe » remonte d'autant sur le bas du bandeau défilant */
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; background: var(--canvas); }
body {
	margin: 0; overflow-x: hidden; overflow-x: clip;
	background: var(--canvas); color: var(--ink);
	font: 400 17px/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
	animation: page-in .8s var(--ease) both;
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--lilac); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .3s var(--ease); }
.lien-evitement:focus { top: 16px; }

/* ----------------------------------------------- environnement fixe */
.ambiance { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambiance i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .55; animation: derive 70s linear infinite; }
.ambiance i:nth-child(1) { background: var(--blue); left: -20vmax; top: -25vmax; animation-delay: -10s; }
.ambiance i:nth-child(2) { background: var(--lilac); right: -25vmax; top: 20vh; animation-delay: -35s; animation-duration: 90s; }
.ambiance i:nth-child(3) { background: var(--sage); left: 20vw; bottom: -35vmax; animation-delay: -55s; animation-duration: 80s; }
@keyframes derive { 0% { transform: translate(0,0) rotate(0); } 33% { transform: translate(6vw,4vh) rotate(120deg); } 66% { transform: translate(-4vw,6vh) rotate(240deg); } 100% { transform: translate(0,0) rotate(360deg); } }
.ambiance::after { content: ""; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }


/* ----------------------------------------------- navigation */
.nav {
	position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding: 0 clamp(16px, 3vw, 40px);
	transition: background-color .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
	color: #fff;
}
.nav.claire { background: rgba(244,246,251,.82); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--line); color: var(--ink); }
.nav-liens { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 600; }
.nav-liens a { text-decoration: none; position: relative; padding: 6px 0; opacity: .88; transition: opacity .25s var(--ease); }
.nav-liens a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav-liens a:hover { opacity: 1; }
.nav-liens a:hover::after, .nav-liens a.actif::after { transform: scaleX(1); transform-origin: left; }
.nav-marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-marque svg { width: 34px; height: 34px; }
.nav-marque b { font: 700 19px/1 var(--display); letter-spacing: -.02em; }
.nav-marque b span { font-weight: 600; opacity: .7; }
.nav-droite { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.pastille {
	display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
	font: 700 14px/1 var(--font); padding: 13px 18px 13px 20px; border-radius: 999px; border: 0;
	background: var(--butter); color: var(--ink);
	box-shadow: 0 6px 18px rgba(27,35,64,.12);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.pastille i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-style: normal; font-size: 15px; transition: transform .45s var(--ease); }
.pastille:hover { box-shadow: 0 12px 28px rgba(27,35,64,.18); }   /* enfoncement au survol : css/boutons.css */
.pastille:hover i { transform: rotate(90deg); }
.pastille.primaire { background: var(--accent); color: #fff; }
.pastille.primaire i { background: #fff; color: var(--accent); }
.pastille.primaire:hover { background: var(--accent-2); }
.pastille.claire { background: rgba(255,255,255,.9); }
.burger { display: none; }

/* ----------------------------------------------- héros (scrub) */
.hero { position: relative; height: 620vh; }
.hero-scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-cadre {
	position: absolute; inset: 0; overflow: hidden; background: #c9d6ea;
	clip-path: inset(var(--inset, 0px) round var(--rayon, 0px));
	will-change: clip-path;
}
.hero-poster, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-poster { background-size: cover; background-position: center; transform: scale(1.02); }
.hero video { opacity: 0; transition: opacity .8s var(--ease); transform: translateZ(0); will-change: transform; }
.hero-scene.video-prete video { opacity: 1; }
.hero-voile { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(12,16,34,0) 40%, rgba(12,16,34,.45) 100%), linear-gradient(180deg, rgba(12,16,34,.35), rgba(12,16,34,0) 22%); }

/* logo central animé */
.hero-logo { position: absolute; left: 50%; top: 50%; width: min(36vmin, 340px); aspect-ratio: 1; transform: translate(-50%,-50%) scale(var(--ls, 1)); opacity: var(--lo, 1); pointer-events: none; z-index: 3; filter: drop-shadow(0 10px 40px rgba(10,14,30,.35)); }
.hero-logo svg { width: 100%; height: 100%; overflow: visible; }
.hero-logo .piece { transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--ease), opacity 1.2s var(--ease); }
.hero-logo .trait { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease); }
.hero-logo:not(.assemble) .p-toit { transform: translate(-60%, -120%) rotate(-14deg); opacity: 0; }
.hero-logo:not(.assemble) .p-gauche { transform: translate(-170%, 60%); opacity: 0; }
.hero-logo:not(.assemble) .p-droite { transform: translate(170%, 60%); opacity: 0; }
.hero-logo:not(.assemble) .p-serrure { transform: translate(0, 140%) scale(.4); opacity: 0; }
.hero-logo.assemble .trait { stroke-dashoffset: 0; }
.hero-logo .p-gauche { transition-delay: .12s; }
.hero-logo .p-droite { transition-delay: .2s; }
.hero-logo .p-serrure { transition-delay: .45s; }
.hero-mot { position: absolute; left: 50%; top: calc(50% + min(18vmin,170px) + 18px); transform: translateX(-50%); opacity: var(--lo, 1); z-index: 3; color: #fff; font: 700 clamp(26px, 4.4vw, 56px)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; text-shadow: var(--tshadow); pointer-events: none; }
.hero-mot .l { display: inline-block; opacity: 0; transform: translateY(.6em); transition: transform .9s var(--ease), opacity .9s var(--ease); }
.hero-mot.visible .l { opacity: 1; transform: none; }
.hero-mot .leger { font-weight: 600; opacity: .85; }

/* bandes de texte */
.bande { position: absolute; z-index: 4; color: #fff; text-shadow: var(--tshadow); opacity: 0; pointer-events: none; }
.bande.active { pointer-events: auto; }
.bande::before { content: ""; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none; opacity: calc(.2 + .8*var(--k,1)); background: radial-gradient(ellipse 72% 62% at 50% 50%, rgba(10,14,30,.5) 0%, rgba(10,14,30,.3) 48%, rgba(10,14,30,0) 76%); }
.surtitre { display: inline-block; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); text-shadow: none; }
.bande h1, .bande h2 { font: 700 clamp(30px, 4.6vw, 66px)/1.02 var(--display); letter-spacing: -.035em; margin: 0; max-width: 16ch; }
.bande p { font-size: clamp(15px, 1.3vw, 18px); max-width: 38ch; margin: 14px 0 0; }
.b1 { left: clamp(18px, 5vw, 72px); top: calc(var(--nav-h) + 6vh); }
.b1-droite { right: clamp(18px, 5vw, 72px); top: calc(var(--nav-h) + 8vh); text-align: right; max-width: 30ch; font-size: 15px; }
.b1-droite p { margin-left: auto; }
.b2 { left: clamp(18px, 6vw, 96px); bottom: 14vh; }
.b3 { right: clamp(18px, 6vw, 96px); top: 22vh; text-align: right; }
.b3 h2, .b3 p { margin-left: auto; }
.b4 { left: 50%; top: calc(var(--nav-h) + 3vh); transform: translateX(-50%); text-align: center; width: min(92vw, 900px); }
.b4 h2 { max-width: none; margin: 0 auto; }
.b4 p { margin: 14px auto 0; }
.b4 .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; opacity: var(--kb, 1); transform: translateY(calc((1 - var(--kb,1)) * 14px)); }
.bande .btn-texte { text-shadow: none; }

/* entrées des mots (pilotées par --k) */
.bande .w { display: inline-block; --kc: clamp(0, calc((var(--k,0) - var(--th,0)) * 2.8), 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * var(--dy, 26px))) scale(calc(.94 + .06 * var(--kc))); }
.b2 .w { --dy: -26px; }
.bande .sous { opacity: var(--ks, 1); transform: translateY(calc((1 - var(--ks,1)) * 10px)); }

/* indicateurs */
.anneau { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 44px; height: 44px; z-index: 5; color: #fff; transition: opacity .6s var(--ease); }
.anneau circle { transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .2s linear; }
.hero-scene.video-prete .anneau { opacity: 0; }
.indice { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 5; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .6s var(--ease); text-shadow: var(--tshadow); }
.hero-scene.video-prete .indice, .hero-scene.video-echec .indice { opacity: var(--io, 1); }
.etoile { width: 18px; height: 18px; animation: scintille 3.2s var(--ease-in-out) infinite; }
@keyframes scintille { 0%,100% { transform: scale(.8) rotate(0); opacity: .7; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
.progression { position: absolute; right: clamp(16px, 2.4vw, 36px); top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 10px; }
.progression b { width: 3px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.progression b::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleY(var(--p, 0)); transform-origin: top; }
.hero-scene.video-echec .anneau { display: none; }
@media (max-height: 560px) { .progression, .indice { display: none; } }

/* héros statique (téléphones, tablettes portrait, mouvement réduit) */
.hero-statique { display: none; }
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
	.hero { height: auto; }
	.hero-scene { display: none; }
	.hero-statique { display: block; position: relative; min-height: 100svh; color: #fff; overflow: hidden; }
	.hero-statique img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.hero-statique::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,34,.55), rgba(12,16,34,.15) 40%, rgba(12,16,34,.7)); }
	.hero-statique .contenu { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: calc(var(--nav-h) + 24px) 20px 40px; text-shadow: var(--tshadow); }
	.hero-statique .logo-statique { width: 86px; height: 86px; margin-bottom: auto; }
	.hero-statique h1 { font: 700 clamp(34px, 9vw, 54px)/1.02 var(--display); letter-spacing: -.035em; margin: 0; }
	.hero-statique p { margin: 0; max-width: 36ch; }
	.hero-statique .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
}

/* ----------------------------------------------- bandeau défilant
   Ruban clair (20/10/2026) : l'ancien bandeau blanc sur noir faisait faire-part. Lilas, crème et sauge de la palette, texte à
   l'encre, étoiles bleu accent. Le bas du ruban réserve la place du panneau « Le principe » qui le chevauche
   (--principe-chevauche) : sans cela, le texte passait dessous et ne se lisait plus. */
.defilant { color: var(--ink); overflow: hidden; padding: 20px 0 calc(20px + var(--principe-chevauche)); white-space: nowrap;
	background: #F6F2F6;
	background: linear-gradient(90deg, color-mix(in srgb, var(--lilac) 70%, #fff), color-mix(in srgb, var(--butter) 85%, #fff) 50%, color-mix(in srgb, var(--sage) 75%, #fff));
	border-top: 1px solid rgba(27,35,64,.06); }
.defilant .piste { display: inline-flex; gap: 48px; animation: defile 38s linear infinite; padding-left: 48px; }
.defilant span { font: 600 clamp(18px, 2.2vw, 28px)/1 var(--display); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 48px; }
.defilant span::after { content: "✦"; color: var(--accent); font-size: .7em; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ----------------------------------------------- sections communes */
.section { position: relative; padding: clamp(80px, 12vw, 160px) clamp(16px, 5vw, 72px); }
.conteneur { max-width: 1240px; margin: 0 auto; }
.etiquette { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 10px; }
.etiquette::before { content: ""; width: 26px; height: 1.5px; background: currentColor; }
.titre { font: 700 clamp(34px, 5.4vw, 78px)/1 var(--display); letter-spacing: -.04em; margin: 18px 0 0; max-width: 18ch; }
.titre em { font-style: normal; background: linear-gradient(transparent 62%, var(--butter) 62%); padding: 0 .08em; }
.chapo { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); max-width: 54ch; margin: 22px 0 0; }

/* révélations à l'entrée */
.revele { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.revele.in { opacity: 1; transform: none; }
.mots .m { display: inline-block; overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; vertical-align: top; }
.mots .m > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.mots.in .m > span { transform: none; }

/* ----------------------------------------------- le principe (bande pastel) */
.principe { background: var(--blue); border-radius: 40px 40px 0 0; margin-top: calc(-1 * var(--principe-chevauche)); z-index: 2; }
.principe .titre em { background: linear-gradient(transparent 62%, #fff 62%); }

/* « À chacun ses besoins, à chacun ses services » (20/10/2026) : un profil à la fois. En tête, le titre et le choix du profil à
   gauche, la vidéo à droite ; dessous, le panneau du profil choisi, ses étapes en colonnes aérées (repère numéroté, puis une phrase
   de 34 caractères de large au plus, un ou deux mots-clés en gras). Une teinte pastel par profil. */
.principe-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro video" "choix video"; column-gap: clamp(32px, 6vw, 90px); align-items: end; }
.principe-intro { grid-area: intro; }
.principe .cadre-video { grid-area: video; align-self: center; }
.principe .titre { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; max-width: 13ch; }
.profil-choix { grid-area: choix; align-self: start; margin-top: clamp(28px, 3.4vw, 44px); }
.profil-choix-tete { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.profil-onglets { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(27,35,64,.06); }
.profil-onglets button { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; padding: 12px 18px; font: 600 15px/1 var(--font); color: var(--ink-2); background: transparent; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.profil-onglets button svg { width: 18px; height: 18px; flex: none; }
.profil-onglets button:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.profil-onglets button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(27,35,64,.06), 0 8px 22px rgba(27,35,64,.1); }
.profil-onglets button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.profil-panneaux { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 20px; }
.profil-panneau { --teinte: var(--lilac); background: rgba(255,255,255,.6); border-radius: 30px; padding: clamp(26px, 3.6vw, 52px); box-shadow: var(--shadow); }
.profil-panneau[data-profil="proprietaire"] { --teinte: var(--sage); }
.profil-panneau[data-profil="agence"] { --teinte: var(--peach); }
/* onglets actifs (js/accueil.js) : seul le panneau choisi s'affiche, à sa propre hauteur (pas de vide sous un texte court), en fondu */
.profil-panneaux.onglets-prets .profil-panneau:not(.actif) { display: none; }
.profil-panneaux.onglets-prets .profil-panneau.actif { animation: profil-in .55s var(--ease) both; }
@keyframes profil-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.profil-panneau-tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding-bottom: clamp(22px, 2.6vw, 32px); border-bottom: 1px solid rgba(27,35,64,.08); }
.profil-panneau h3 { display: flex; align-items: center; gap: 14px; margin: 0; font: 700 clamp(24px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.03em; }
.profil-panneau h3 .ico { width: 46px; height: 46px; flex: none; border-radius: 15px; background: var(--teinte); display: grid; place-items: center; }
.profil-panneau h3 .ico svg { width: 22px; height: 22px; }
.profil-etapes { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(24px, 3.4vw, 52px); }
.profil-etapes .moment { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.profil-etapes .moment b { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--teinte); display: grid; place-items: center; font: 700 13px/1 var(--display); letter-spacing: 0; color: var(--ink); }
.profil-etapes p { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.profil-etapes strong { color: var(--ink); font-weight: 700; }
.points { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; }
.points li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-size: 16px; color: var(--ink-2); }
.points li b { color: var(--ink); }
.points .pic { width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,.7); display: grid; place-items: center; }
.points .pic svg { width: 18px; height: 18px; }
.cadre-video { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/10; background: var(--canvas-2); transform: rotate(var(--rot, 0deg)); }
.cadre-video video, .cadre-video img { width: 100%; height: 100%; object-fit: cover; }
.cadre-video .badge { position: absolute; left: 16px; bottom: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border-radius: 999px; padding: 9px 14px; font: 600 13px/1 var(--font); display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); }
.cadre-video .badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3BB27A; box-shadow: 0 0 0 4px rgba(59,178,122,.2); animation: pouls 2.4s ease-in-out infinite; }
@keyframes pouls { 50% { box-shadow: 0 0 0 8px rgba(59,178,122,0); } }

/* ----------------------------------------------- méthode : 3 étapes */
.methode { background: var(--canvas); }
.methode-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 60px; counter-reset: e; }
.etape { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.etape:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.etape figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; }
.etape img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.etape:hover img { transform: scale(1.05); }
.etape .corps { padding: 26px 26px 30px; }
.etape .num { font: 500 12px/1 var(--mono); color: var(--accent); letter-spacing: .12em; }
.etape h3 { font: 700 24px/1.15 var(--display); letter-spacing: -.02em; margin: 10px 0 10px; }
.etape p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.etapes .etape:nth-child(2) { margin-top: 48px; }
.etapes .etape:nth-child(3) { margin-top: 96px; }
.etapes.in .etape { transition-delay: 0s; }

/* moment interactif : la clause du bail */
.clause { margin-top: 90px; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.clause-papier { position: relative; background: #fff; border-radius: 18px; padding: 34px 34px 28px; box-shadow: var(--shadow-lg); transform: rotate(-1.2deg); }
.clause-papier::before { content: ""; position: absolute; inset: 10px; border: 1px dashed var(--line); border-radius: 12px; pointer-events: none; }
.clause-papier h4 { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.clause-papier p { font-size: 17px; line-height: 1.55; margin: 0; }
.signature { height: 70px; margin-top: 18px; display: flex; align-items: flex-end; gap: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.signature svg { width: 220px; height: 60px; }
.signature path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: calc(600 * (1 - var(--h, 0))); }
.signature small { color: var(--ink-3); font-size: 12px; margin-bottom: 8px; }
.tampon { position: absolute; right: 26px; top: 22px; width: 92px; height: 92px; border-radius: 50%; border: 2.5px solid #3BB27A; color: #2E8A5F; display: grid; place-items: center; text-align: center; font: 700 11px/1.1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transform: rotate(14deg) scale(1.4); opacity: 0; transition: transform .6s cubic-bezier(.2,1.6,.4,1), opacity .4s var(--ease); }
.clause.signee .tampon { opacity: .9; transform: rotate(14deg) scale(1); }
.bouton-maintien { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.bouton-maintien .jauge { position: absolute; inset: 0; background: var(--accent-2); transform: scaleX(var(--h, 0)); transform-origin: left; border-radius: inherit; z-index: 0; }
.bouton-maintien > * { position: relative; z-index: 1; }
.clause-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.copier { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.clause.signee .copier { opacity: 1; transform: none; pointer-events: auto; }
.astuce { color: var(--ink-3); font-size: 14px; }

/* ----------------------------------------------- interlude */
.interlude { padding: 0 clamp(8px, 2vw, 24px) clamp(80px, 10vw, 140px); }
.interlude-cadre { position: relative; border-radius: 40px; overflow: hidden; min-height: 86vh; display: grid; place-items: center; }
.interlude-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.interlude-cadre::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(12,16,34,.38), rgba(12,16,34,.05) 75%); }
.interlude blockquote { position: relative; z-index: 2; margin: 0; padding: 0 20px; max-width: 18ch; text-align: center; color: #fff; font: 700 clamp(30px, 5vw, 72px)/1.04 var(--display); letter-spacing: -.035em; text-shadow: var(--tshadow); }

/* ----------------------------------------------- pour qui */
.pourqui { padding-top: 0; }
.pourqui-bandeau { position: relative; border-radius: 34px; overflow: hidden; min-height: 78vh; display: flex; align-items: flex-end; color: #fff; }
.pourqui-bandeau video, .pourqui-bandeau > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pourqui-bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,34,0) 30%, rgba(12,16,34,.62)); }
.pourqui-bandeau .texte { position: relative; z-index: 2; padding: clamp(24px, 5vw, 64px) clamp(24px, 5vw, 64px) calc(clamp(24px, 5vw, 64px) + 110px); text-shadow: var(--tshadow); }
@media (max-width: 1024px) { .pourqui-bandeau .texte { padding-bottom: clamp(24px, 5vw, 64px); } }
.pourqui-bandeau .etiquette { color: #fff; }
.pourqui-bandeau .titre { color: #fff; max-width: 16ch; }
/* « Le bon réflexe » (20/10/2026) : titre en deux temps (le constat, puis le réflexe, en bleu clair), chapô sur la vidéo, voile
   un peu plus dense en bas pour que le texte blanc reste lisible sur toute la photo */
.pourqui-bandeau.reflexe::after { background: linear-gradient(180deg, rgba(12,16,34,.05) 18%, rgba(12,16,34,.5) 48%, rgba(12,16,34,.74)); }
#titre-reflexe { font-size: clamp(32px, 4.4vw, 62px); line-height: 1.04; max-width: 30ch; }
#titre-reflexe span { display: block; text-wrap: balance; }   /* chaque phrase sur sa ligne ; repliée, en lignes égales (pas de mot seul) */
#titre-reflexe .titre-suite { color: var(--blue); }
.pourqui-bandeau .chapo { color: rgba(255,255,255,.92); max-width: 60ch; line-height: 1.6; }
.pourqui-bandeau .chapo b { color: #fff; font-weight: 700; }
.reflexes .profil p { line-height: 1.65; }
.reflexes .profil p b { color: var(--ink); font-weight: 700; }
.reflexes .profil h3 { font-size: 21px; line-height: 1.2; margin-bottom: 12px; }
/* cartes empilées (tablette) : icône à gauche, lignes de 64 caractères au plus pour une lecture confortable */
@media (min-width: 641px) and (max-width: 1024px) {
	.reflexes .profil { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 24px; align-items: start; }
	.reflexes .profil .ico { grid-row: span 2; margin: 0; }
	.reflexes .profil p { max-width: 64ch; }
}
.profils { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -90px; position: relative; z-index: 3; padding: 0 clamp(12px, 3vw, 40px); }
.profil { background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.6); transition: transform .6s var(--ease); }
.profil:hover { transform: translateY(-6px); }
.profil .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; }
.profil:nth-child(1) .ico { background: var(--lilac); }
.profil:nth-child(2) .ico { background: var(--sage); }
.profil:nth-child(3) .ico { background: var(--peach); }
.profil .ico svg { width: 26px; height: 26px; }
.profil h3 { font: 700 23px/1.15 var(--display); margin: 0 0 10px; letter-spacing: -.02em; }
.profil p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.profil ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.profil li::before { content: "→ "; color: var(--accent); font-weight: 700; }

/* ----------------------------------------------- vérifier un document : la référence et son sceau */
.verifier { background: var(--lilac); border-radius: 40px; margin: 0 clamp(8px, 2vw, 24px) clamp(24px, 3vw, 40px); }
.verifier .grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.verifier .cadre-video { order: -1; }
.verifier .titre { max-width: 15ch; }
.verifier .chapo { color: var(--ink); }
.verifier .chapo b { font-weight: 700; }
.ref-anatomie { margin: 30px 0 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; padding: 16px 18px; background: rgba(255,255,255,.82); border-radius: 18px; box-shadow: var(--shadow); width: fit-content; max-width: 100%; }
.ra-seg { display: grid; justify-items: center; gap: 6px; }
.ra-seg b { font: 500 clamp(15px, 1.5vw, 19px)/1 var(--mono); letter-spacing: .06em; padding: 8px 9px; border-radius: 10px; background: var(--canvas-2); color: var(--ink); transition: background-color .6s var(--ease), color .6s var(--ease); }
.ra-seg i { font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ra-sep { font: 500 18px/1 var(--mono); color: var(--ink-3); padding-top: 8px; }
.ref-anatomie.in .ra-seg:nth-child(1) b { background: var(--accent-soft); transition-delay: .3s; }
.ref-anatomie.in .ra-seg:nth-child(3) b { background: var(--accent-soft); transition-delay: .55s; }
.ref-anatomie.in .ra-seg:nth-child(5) b { background: var(--accent-soft); transition-delay: .8s; }
.ref-anatomie.in .ra-sceau b { background: var(--accent); color: #fff; transition-delay: 1.05s; }
.verifier-points .pic { font: 700 15px/1 var(--display); color: var(--accent-2); }
.verifier-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ----------------------------------------------- engagements */
.engagements { background: var(--sage); border-radius: 40px; margin: 0 clamp(8px, 2vw, 24px); }
.engagements .grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.citations { display: grid; gap: 16px; }
.citation { background: rgba(255,255,255,.75); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); }
.citation p { margin: 0; font: 600 clamp(17px, 1.6vw, 21px)/1.4 var(--display); letter-spacing: -.01em; }
.citation span { display: block; margin-top: 10px; color: var(--ink-3); font-size: 13px; font-family: var(--mono); }
.equilibre { margin-top: 18px; padding: 18px 20px; border-radius: var(--radius); border: 1px dashed rgba(27,35,64,.25); background: rgba(255,255,255,.45); }
.equilibre b { font: 700 16px/1.2 var(--display); }
.equilibre p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.engagements figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(1.4deg); }
.engagements figure img { width: 100%; height: auto; }

/* ----------------------------------------------- espace sécurisé */
.espace { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: calc(var(--nav-h) + 40px) 16px 80px; }
.espace-fond { position: absolute; inset: 0; }
.espace-fond video, .espace-fond img { width: 100%; height: 100%; object-fit: cover; }
.espace-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(244,246,251,.92) 0%, rgba(244,246,251,.78) 45%, rgba(244,246,251,.35) 100%); }
.espace .conteneur { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1fr minmax(320px, 480px); gap: clamp(30px, 6vw, 90px); align-items: center; }
.espace .titre { max-width: 12ch; }
.carte-connexion { background: rgba(255,255,255,.86); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); border: 1px solid rgba(255,255,255,.7); border-radius: 28px; padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-lg); }
.carte-connexion h3 { font: 700 26px/1.1 var(--display); margin: 0 0 6px; letter-spacing: -.02em; }
.carte-connexion .aide { margin: 4px 0 22px; color: var(--ink-2); font-size: 16.5px; line-height: 1.45; font-weight: 500; }
.profils-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; padding: 5px; background: var(--canvas-2); border-radius: 16px; position: relative; }
.profils-choix.manquant { box-shadow: 0 0 0 2px #E9A3A3; }
.profils-choix input { position: absolute; opacity: 0; pointer-events: none; }
.profils-choix label { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 11px 6px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
/* case à cocher devant chaque profil (20/10/2026) : le choix reste unique (boutons radio), la coche se voit de loin */
.profils-choix label::before { content: ""; flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 6px; border: 2px solid var(--line-strong); background: #fff center / 14px 14px no-repeat; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.profils-choix label:hover::before { border-color: var(--accent); }
.profils-choix input:checked + label::before { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-6.9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profils-choix.manquant label::before { border-color: #D97777; }
@media (max-width: 420px) { .profils-choix { gap: 4px; } .profils-choix label { gap: 6px; padding: 11px 2px; font-size: 13.5px; } .profils-choix label::before { width: 18px; height: 18px; background-size: 12px 12px; } }   /* téléphones courants : la rangée tient dans la carte */
@media (max-width: 380px) { .profils-choix { grid-template-columns: 1fr; } .profils-choix label { justify-content: flex-start; padding-left: 14px; } }   /* petits téléphones : un choix par ligne, la carte tient dans l'écran */
/* titre de l'espace sécurisé : quatre groupes insécables (« Vos locations, / vos recherches / et vos démarches / au même endroit. »),
   taille réglée sur la largeur de sa colonne pour que le plus long groupe y tienne toujours (unités de conteneur, repli en vw) */
.espace .conteneur > div:first-child { container-type: inline-size; }
#titre-espace { max-width: none; font-size: clamp(26px, 4.6vw, 70px); font-size: clamp(26px, 10.4cqi, 70px); }
.profils-choix input:checked + label { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.profils-choix input:focus-visible + label { outline: 2px solid var(--accent); }
.champ { display: block; margin-bottom: 14px; }
.champ span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.champ input, .champ textarea {
	width: 100%; border: 1px solid var(--line-strong); background: #fff; border-radius: 12px; padding: 13px 14px; font-size: 15.5px; color: var(--ink);
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(91,108,240,.16); }
.champ input:user-invalid { border-color: #E9A3A3; }
.btn-plein { width: 100%; justify-content: center; padding: 16px 20px; font-size: 15.5px; }
.liens-secondaires { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.btn-ligne { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.btn-ligne:hover { background: var(--accent-soft); border-color: var(--accent); }
.mdp-perdu { display: none; margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--butter); }
.mdp-perdu.ouvert { display: block; animation: page-in .5s var(--ease); }
.mdp-perdu form { display: flex; gap: 8px; }
.mdp-perdu input { flex: 1; border: 1px solid var(--line-strong); border-radius: 999px; padding: 11px 14px; background: #fff; }
.mdp-perdu button { border: 0; border-radius: 999px; padding: 0 16px; background: var(--ink); color: #fff; font-weight: 700; cursor: pointer; }
.espace-points { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.espace-points span { background: rgba(255,255,255,.75); border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 600; backdrop-filter: blur(8px); }

/* ----------------------------------------------- qui sommes-nous + contact */
.contact { background: var(--canvas); }
.contact .grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.contact-carte { background: #fff; border-radius: 28px; padding: clamp(22px, 3vw, 38px); box-shadow: var(--shadow); }
.contact-carte .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-carte .trio { display: grid; grid-template-columns: .7fr 1.3fr; gap: 12px; }
.contact-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.captcha-local { font-size: 12.5px; color: var(--ink-3); background: var(--canvas-2); border-radius: 999px; padding: 7px 12px; display: inline-block; margin: 4px 0 12px; }
.g-recaptcha { margin: 6px 0 14px; }
.qui-points { display: grid; gap: 14px; margin-top: 30px; }
.qui-points div { display: flex; gap: 14px; align-items: flex-start; }
.qui-points b { display: block; font-family: var(--display); font-size: 18px; }
.qui-points .pic { flex: 0 0 42px; height: 42px; border-radius: 14px; background: var(--lilac); display: grid; place-items: center; }
.qui-points .pic svg { width: 20px; height: 20px; }

/* ----------------------------------------------- pied de page */
.pied { background: var(--ink); color: #DDE3F2; padding: 80px clamp(16px, 5vw, 72px) 40px; border-radius: 40px 40px 0 0; }
.pied .grand { font: 700 clamp(40px, 9vw, 140px)/.9 var(--display); letter-spacing: -.05em; color: #fff; margin: 0 0 50px; }
.pied .grand span { color: var(--blue-deep); }
.pied .colonnes { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; font-size: 14.5px; }
.pied h4 { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9AA6C6; margin: 0 0 14px; }
.pied a { color: #fff; }
.pied p { margin: 0 0 6px; }
.pied .bas { margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #9AA6C6; }

/* ----------------------------------------------- messages du site */
.toast { position: fixed; right: 18px; z-index: 250; max-width: min(420px, calc(100vw - 36px)); background: #fff; color: var(--ink); border-radius: 16px; padding: 14px 44px 14px 16px; box-shadow: var(--shadow-lg); border-left: 4px solid var(--rose-ink); font-size: 14.5px; animation: toast-in .6s var(--ease) both; }
.toast.haut { top: calc(var(--nav-h) + 10px); }
.toast.bas { bottom: 18px; }
.toast button { position: absolute; right: 10px; top: 10px; border: 0; background: var(--canvas-2); border-radius: 50%; width: 26px; height: 26px; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* autocomplétion jQuery UI */
.ui-autocomplete { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: var(--shadow-lg); padding: 6px !important; font-family: var(--font) !important; font-size: 14px !important; max-width: 320px; z-index: 400 !important; }
.ui-menu-item-wrapper { border-radius: 10px; padding: 8px 10px !important; border: 0 !important; margin: 0 !important; }
.ui-state-active, .ui-menu-item-wrapper:hover { background: var(--accent-soft) !important; color: var(--accent-2) !important; }

/* ----------------------------------------------- tactile */
@media (pointer: coarse) {
	.pastille, .btn-ligne, .profils-choix label { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ----------------------------------------------- responsive */
@media (max-width: 1024px) {
	.engagements .grille, .verifier .grille, .espace .conteneur, .contact .grille, .clause { grid-template-columns: 1fr; }
	/* le principe : titre, vidéo, puis le choix du profil juste au-dessus de son panneau ; étapes en fil vertical */
	.principe-tete { grid-template-columns: 1fr; grid-template-areas: "intro" "video" "choix"; row-gap: 32px; }
	.principe .titre { max-width: 16ch; }
	.profil-choix { margin-top: 8px; }
	.profil-panneaux { margin-top: 28px; }
	.profil-etapes { grid-auto-flow: row; gap: 0; }
	.profil-etapes li { position: relative; padding: 0 0 26px 44px; }
	.profil-etapes li:last-child { padding-bottom: 0; }
	.profil-etapes li::before { content: ""; position: absolute; left: 13.5px; top: 34px; bottom: 6px; width: 1px; background: rgba(27,35,64,.12); }
	.profil-etapes li:last-child::before { display: none; }
	.profil-etapes .moment { margin-left: -44px; margin-bottom: 8px; gap: 16px; }
	.profil-etapes p { max-width: 60ch; }
	.verifier .cadre-video { order: 0; }
	.etapes { grid-template-columns: 1fr 1fr; }
	.etapes .etape:nth-child(n) { margin-top: 0; }
	.profils { grid-template-columns: 1fr; margin-top: 20px; }
	.pied .colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.nav { grid-template-columns: 1fr auto; }
	.nav > nav { display: none; }
	.nav-marque { justify-self: start; }
	.nav .pastille span { display: none; }
	.nav .pastille { padding: 11px; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.etapes { grid-template-columns: 1fr; }
	.contact-carte .duo, .contact-carte .trio, .liens-secondaires { grid-template-columns: 1fr; }
	.pied .colonnes { grid-template-columns: 1fr; }
	.pourqui-bandeau { min-height: 70vh; border-radius: 24px; }
	.principe, .engagements, .verifier { border-radius: 28px; }
	.profil-onglets { display: flex; width: 100%; }
	.profil-onglets button { flex: 1 1 0; justify-content: center; gap: 7px; padding: 12px 8px; font-size: 14px; }
	.profil-onglet-long { display: none; }
	/* téléphone : on lit les étapes, puis on agit (bouton d'inscription sous les étapes) */
	.profil-panneau { border-radius: 24px; display: flex; flex-direction: column; }
	.profil-panneau-tete { display: contents; }
	.profil-panneau h3 { order: 0; padding-bottom: 22px; border-bottom: 1px solid rgba(27,35,64,.08); }
	.profil-etapes { order: 1; }
	.profil-panneau-tete .pastille { order: 2; margin-top: 30px; width: 100%; justify-content: center; }
	.ra-seg b { padding: 6px 7px; }
	.ref-anatomie { gap: 10px 8px; padding: 14px; }
	.ra-sep { display: none; }
	.clause-papier { padding: 26px 22px 22px; }
	.tampon { width: 70px; height: 70px; font-size: 9px; right: 14px; top: 14px; }
}

/* ----------------------------------------------- pause hors écran / onglet caché */
body.pause *, body.pause *::before, body.pause *::after { animation-play-state: paused !important; }

/* ----------------------------------------------- mouvement réduit : états finaux */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; transition-delay: 0s !important; }
	.revele { opacity: 1; transform: none; }
	.mots .m > span { transform: none; }
	.copier { opacity: 1; transform: none; pointer-events: auto; }
	.signature path { stroke-dashoffset: 0; }
	.defilant .piste { animation: none; }
	html { scroll-behavior: auto; }
}

/* adresse sur 2 lignes */
.champ textarea[data-une-ligne] { min-height: 0; resize: none; line-height: 1.4; overflow: hidden; }
.aide-mdp { display: block; margin: -6px 0 14px; font-size: 12px; color: var(--ink-3); line-height: 1.4; }

/* ----------------------------------------------- textes contractuels (14/10/2026) : liens du pied de page et mention du formulaire de contact */
.pied .pied-sous-titre { margin-top: 22px; }
.contact-rgpd { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 4px 0 14px; max-width: 60ch; }
.contact-rgpd a { color: var(--accent-2); }