/* ═══════════════════════════════════════════════════════════════════════════
   SCAN 10 — PASSERELLE PARTENAIRE
   Même direction visuelle que la page de vente École des Scanneurs 2026 :
   turquoise/teal, Montserrat, Cormorant Garamond en italique d'accent.
   Tout est scopé sous body.s10-page pour ne rien déborder sur Divi.

   ⚠️ Tailles de police en pixels, jamais en rem.
   Le public de Laurent a 50 à 70 ans : le corps de texte est à 21 px et rien
   ne descend sous 16 px, mention de consentement comprise. Un `rem` se calcule
   sur la racine (16 px), pas sur le conteneur : un « 0.9rem » qui semblait
   valoir 19 px en vaudrait 14. Écrire les px, et les vérifier au besoin avec
   getComputedStyle plutôt qu'à l'œil.
═══════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* ── Variables ────────────────────────────────────────────────────────────── */
body.s10-page {
	--s10-white:       #ffffff;
	--s10-light:       #f2fdfe;
	--s10-teal-glow:   #b2ebf2;
	--s10-teal:        #029a98;
	--s10-teal-mid:    #0097a7;
	--s10-teal-bright: #0fb8cc;
	--s10-teal-deep:   #003d47;
	--s10-teal-deeper: #002830;
	--s10-text:        #1c3d44;
	--s10-muted:       #4d7c85;
	--s10-border:      rgba(2, 154, 152, .22);
	--s10-radius:      14px;
	--s10-radius-lg:   22px;
	--s10-font:        'Montserrat', Helvetica, Arial, sans-serif;
	--s10-font-disp:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--s10-ease:        cubic-bezier(.25, .46, .45, .94);
	--s10-shadow:      0 30px 80px rgba(0, 37, 45, .22);
	--s10-wrap:        1180px;
}

/* ── Réinitialisation scopée ──────────────────────────────────────────────── */
body.s10-page #s10-page {
	font-family: var(--s10-font);
	font-size: 21px;
	line-height: 1.7;
	color: var(--s10-text);
	background: var(--s10-white);
}

body.s10-page #s10-page *,
body.s10-page #s10-page *::before,
body.s10-page #s10-page *::after { box-sizing: border-box; }

/* Divi pose un reset sur `#page h1, h2, h3…` qui bat les classes : on remet les
   marges à zéro au même niveau de spécificité, sinon les marges des titres
   meurent en silence et tout se colle. */
body.s10-page #s10-page h1,
body.s10-page #s10-page h2,
body.s10-page #s10-page h3,
body.s10-page #s10-page p,
body.s10-page #s10-page ul,
body.s10-page #s10-page li,
body.s10-page #s10-page figure { margin: 0; padding: 0; }

body.s10-page #s10-page a   { color: inherit; text-decoration: none; }
body.s10-page #s10-page img { display: block; max-width: 100%; height: auto; }
body.s10-page #s10-page ul  { list-style: none; }
body.s10-page #s10-page sup { font-size: .45em; vertical-align: super; line-height: 0; }

body.s10-page .entry-title,
body.s10-page .page-header { display: none !important; }

/* Divi : pleine largeur */
body.s10-page #page-container,
body.s10-page #main-content,
body.s10-page #content-area {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.s10-page #main-content .container,
body.s10-page #main-content .et_pb_section,
body.s10-page #main-content .et_pb_row,
body.s10-page #content-area article.et_pb_post {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.s10-page .et-l--footer .et_pb_row,
body.s10-page .et-l--footer .et_pb_section { margin-bottom: 0 !important; }
body.s10-page #sidebar { display: none !important; }

/* ── Helpers ──────────────────────────────────────────────────────────────── */
.s10-wrap    { max-width: var(--s10-wrap); margin-inline: auto; padding-inline: 32px; }
.s10-narrow  { max-width: 880px; }
.s10-center  { text-align: center; }
.s10-section { padding-block: 92px; position: relative; }

.s10-section--clair  { background: linear-gradient(180deg, var(--s10-light) 0%, var(--s10-white) 100%); }
.s10-section--sombre {
	background: linear-gradient(155deg, var(--s10-teal-deep) 0%, var(--s10-teal-deeper) 100%);
	color: rgba(255,255,255,.9);
}

/* ── Typographie ──────────────────────────────────────────────────────────── */
body.s10-page #s10-page .s10-overline,
body.s10-page #s10-page .s10-eyebrow {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 14px;
}
.s10-overline { color: var(--s10-teal); }
.s10-eyebrow  { color: var(--s10-teal-bright); }

body.s10-page #s10-page .s10-h2 {
	font-size: clamp(34px, 3.6vw, 50px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--s10-teal-deep);
	margin-bottom: 26px;
}
body.s10-page #s10-page .s10-h2--clair { color: var(--s10-white); }

.s10-h2 em {
	font-family: var(--s10-font-disp);
	font-style: italic;
	font-weight: 700;
	color: var(--s10-teal);
}
.s10-h2--clair em { color: var(--s10-teal-glow); }

body.s10-page #s10-page .s10-lead {
	font-size: 22px;
	line-height: 1.75;
	margin-bottom: 22px;
	color: rgba(255,255,255,.88);
}
body.s10-page #s10-page .s10-section--clair .s10-lead { color: var(--s10-muted); }

body.s10-page #s10-page .s10-aide {
	font-size: 18px;
	line-height: 1.6;
	color: var(--s10-muted);
	margin-top: 30px;
}
.s10-aide a { color: var(--s10-teal); font-weight: 700; text-decoration: underline; }
body.s10-page #s10-page .s10-aide--clair { color: rgba(255,255,255,.78); }
.s10-aide--clair a { color: var(--s10-teal-glow); }

/* ── Apparition au scroll ─────────────────────────────────────────────────── */
.s10-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s var(--s10-ease), transform .6s var(--s10-ease);
}
.s10-reveal--d1 { transition-delay: .1s; }
.s10-reveal--d2 { transition-delay: .2s; }
.s10-reveal--d3 { transition-delay: .3s; }
.s10-reveal.s10-visible { opacity: 1; transform: translateY(0); }

/* Mouvement réduit : on retire le déplacement, jamais le fondu. Couper les deux
   rendrait la page inerte pour tous ceux qui ont ce réglage, très répandu sur
   Mac, et donnerait l'impression que rien ne s'anime. */
@media (prefers-reduced-motion: reduce) {
	.s10-reveal { transform: none; transition: opacity .5s ease-out; }
	.s10-reveal.s10-visible { transform: none; }
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
body.s10-page #s10-page .s10-btn {
	display: inline-block;
	font-family: var(--s10-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	line-height: 1.3;
	padding: 15px 40px;
	border-radius: 50px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .25s var(--s10-ease), box-shadow .25s var(--s10-ease), transform .25s var(--s10-ease);
	text-decoration: none !important;
	text-align: center;
}
body.s10-page #s10-page .s10-btn--bloc { display: block; width: 100%; }

body.s10-page #s10-page .s10-btn--primary {
	background: var(--s10-teal);
	border-color: var(--s10-teal);
	color: var(--s10-white) !important;
	box-shadow: 0 14px 34px rgba(2, 154, 152, .22);
}
body.s10-page #s10-page .s10-btn--primary:hover,
body.s10-page #s10-page .s10-btn--primary:focus-visible {
	background: var(--s10-teal-mid);
	border-color: var(--s10-teal-mid);
	box-shadow: 0 6px 30px rgba(2, 154, 152, .4);
	transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════════
   HÉRO
══════════════════════════════════════════════════════════════════════════ */
.s10-hero {
	position: relative;
	background-color: #0d5d63;
	background-size: cover;
	background-position: center 26%;
	background-repeat: no-repeat;
	overflow: hidden;
	/* Serré volontairement : le bouton d'envoi doit être visible sans défiler
	   sur un portable 1440 × 900. Ne pas rouvrir ces valeurs sans remesurer. */
	padding-block: 32px 32px;
}
.s10-hero--court { padding-block: 72px 64px; }

.s10-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,53,61,.93) 0%, rgba(0,66,74,.86) 38%, rgba(5,94,103,.62) 70%, rgba(8,112,122,.42) 100%),
		linear-gradient(180deg, rgba(0,40,48,.18), rgba(0,40,48,0));
}
.s10-hero--court .s10-hero__overlay {
	background: linear-gradient(160deg, rgba(0,53,61,.92) 0%, rgba(0,66,74,.86) 55%, rgba(5,94,103,.7) 100%);
}

.s10-hero__grid {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(24px, 5vw, 72px);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}
.s10-hero__grid--seul {
	grid-template-columns: minmax(0, 900px);
	justify-content: center;
	text-align: center;
}

body.s10-page #s10-page .s10-hero h1 {
	font-size: clamp(40px, 4.4vw, 66px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--s10-white);
	margin-bottom: 18px;
}
.s10-hero__lead,
.s10-hero__accent { display: block; }

.s10-hero__accent em {
	display: inline-block;
	font-family: var(--s10-font-disp);
	font-size: .95em;
	font-style: italic;
	font-weight: 700;
	color: #c3f7fb;
	line-height: 1;
}

body.s10-page #s10-page .s10-hero__lead-txt p,
body.s10-page #s10-page .s10-hero__sub {
	font-size: 22px;
	line-height: 1.72;
	color: rgba(255,255,255,.9);
	margin-bottom: 14px;
}

body.s10-page #s10-page .s10-hero__proofs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}
body.s10-page #s10-page .s10-hero__proofs li {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.3;
	color: rgba(255,255,255,.95);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	padding: 12px 20px;
	background: rgba(255,255,255,.09);
	backdrop-filter: blur(10px);
}

/* ── Carte du formulaire ──────────────────────────────────────────────────── */
.s10-carte {
	background: var(--s10-white);
	border-radius: var(--s10-radius-lg);
	padding: clamp(24px, 2.2vw, 32px);
	box-shadow: var(--s10-shadow);
	border: 1px solid rgba(255,255,255,.5);
}

body.s10-page #s10-page .s10-carte__titre {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--s10-teal-deep);
	margin-bottom: 12px;
}
body.s10-page #s10-page .s10-carte__sous {
	font-size: 18px;
	line-height: 1.55;
	color: var(--s10-muted);
	margin-bottom: 28px;
}

/* ── Formulaire ───────────────────────────────────────────────────────────── */
.s10-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

body.s10-page #s10-page .s10-form__erreur {
	background: #fff2f2;
	border-left: 4px solid #b32d2e;
	color: #8a2222;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.55;
	padding: 16px 18px;
	border-radius: 8px;
	margin-bottom: 24px;
}

.s10-field { margin-bottom: 10px; }

/* Prénom et nom sur une ligne. Sous 620 px, deux colonnes deviennent trop
   étroites pour saisir confortablement : on repasse en pile. */
.s10-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 14px;
}
@media (max-width: 620px) {
	.s10-row { grid-template-columns: minmax(0, 1fr); }
}

body.s10-page #s10-page .s10-field label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--s10-teal-deep);
	margin-bottom: 5px;
}

body.s10-page #s10-page .s10-field input {
	width: 100%;
	font-family: var(--s10-font);
	font-size: 19px;
	line-height: 1.4;
	color: var(--s10-text);
	background: #f7fdfe;
	border: 2px solid var(--s10-border);
	border-radius: 12px;
	padding: 12px 16px;
	transition: border-color .2s var(--s10-ease), box-shadow .2s var(--s10-ease), background .2s var(--s10-ease);
	-webkit-appearance: none;
	appearance: none;
}
body.s10-page #s10-page .s10-field input::placeholder { color: #9bb8bd; }
body.s10-page #s10-page .s10-field input:focus {
	outline: none;
	background: var(--s10-white);
	border-color: var(--s10-teal);
	box-shadow: 0 0 0 4px rgba(2,154,152,.14);
}
/* Le rouge n'apparaît qu'une fois le champ commencé : souligner en rouge un
   champ encore vide, c'est reprocher au visiteur de ne pas avoir écrit. */
body.s10-page #s10-page .s10-field input:invalid:not(:placeholder-shown) {
	border-color: rgba(179,45,46,.55);
}

body.s10-page #s10-page .s10-field__aide {
	display: block;
	font-size: 16px;
	line-height: 1.5;
	color: var(--s10-muted);
	margin-top: 5px;
}

/* Consentement : 16 px minimum, jamais la mention grise en 12 px. */
.s10-rgpd {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 15px 0 18px;
	padding: 13px 15px;
	background: var(--s10-light);
	border: 1px solid var(--s10-border);
	border-radius: 12px;
}
body.s10-page #s10-page .s10-rgpd input[type="checkbox"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 3px;
	accent-color: var(--s10-teal);
	cursor: pointer;
}
body.s10-page #s10-page .s10-rgpd label {
	font-size: 16px;
	line-height: 1.42;
	font-weight: 500;
	color: var(--s10-muted);
	cursor: pointer;
}

body.s10-page #s10-page .s10-form__sous {
	font-size: 17px;
	line-height: 1.55;
	color: var(--s10-muted);
	text-align: center;
	margin-top: 13px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ÉTAPES
══════════════════════════════════════════════════════════════════════════ */
.s10-etapes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-top: 54px;
}

.s10-etape {
	background: var(--s10-white);
	border: 1px solid var(--s10-border);
	border-radius: var(--s10-radius);
	padding: 34px 30px 32px;
	box-shadow: 0 18px 50px rgba(0,61,71,.07);
}

.s10-etape__num {
	display: inline-block;
	font-family: var(--s10-font-disp);
	font-size: 54px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	color: var(--s10-teal-glow);
	margin-bottom: 12px;
}

body.s10-page #s10-page .s10-etape h3 {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--s10-teal-deep);
	margin-bottom: 12px;
}
body.s10-page #s10-page .s10-etape p {
	font-size: 19px;
	line-height: 1.65;
	color: var(--s10-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
	.s10-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.s10-hero__cote { max-width: 580px; width: 100%; }
	.s10-etapes     { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}

/* Sur téléphone, la carte remonte entre le titre et le chapô : ces gens
   viennent de payer, le premier champ doit être visible sans avoir à défiler.
   `display: contents` dissout la colonne de texte et ses deux moitiés
   redeviennent des cases de la grille, sans dupliquer le balisage. */
@media (max-width: 820px) {
	.s10-hero               { padding-block: 64px 56px; }
	/* En colonne, le `align-items: center` hérité de la grille passe sur l'axe
	   horizontal et laisse la carte prendre sa largeur naturelle : elle débordait
	   du téléphone. En flex colonne, c'est `stretch` qu'il faut. */
	.s10-hero__grid         { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
	.s10-capture .s10-hero__texte    { display: contents; }
	.s10-capture .s10-hero__intro    { order: 1; }
	.s10-capture .s10-hero__cote     { order: 2; max-width: none; }
	.s10-capture .s10-hero__lead-txt { order: 3; }

	body.s10-page #s10-page { font-size: 20px; }
	body.s10-page #s10-page .s10-hero h1 { font-size: 36px; }
	body.s10-page #s10-page .s10-h2      { font-size: 30px; }
	.s10-section            { padding-block: 64px; }
	.s10-wrap               { padding-inline: 22px; }
	body.s10-page #s10-page .s10-hero__proofs li { width: 100%; text-align: center; }
	body.s10-page #s10-page .s10-btn { display: block; width: 100%; padding-inline: 20px; }
}

@media (max-width: 480px) {
	body.s10-page #s10-page .s10-hero h1 { font-size: 31px; }
	.s10-carte { padding: 24px 20px 26px; border-radius: 16px; }
	body.s10-page #s10-page .s10-carte__titre { font-size: 26px; }
	.s10-etape { padding: 28px 22px 26px; }
}

/* ── Bandeau de réassurance ──────────────────────────────────────────────────
   Le visuel validé par Laurent, posé pleine largeur juste au-dessus du pied
   Divi, sur la capture comme sur la confirmation. Il porte sa propre mise en
   page : on ne lui ajoute ni cadre, ni marge, ni fond, sinon on voit deux
   bandeaux l'un dans l'autre.

   `max-width` : au-delà, un bandeau de 2160 px s'étire et se brouille sur les
   très grands écrans. */
.s10-bandeau { background: var(--s10-teal-deeper); }

/* La largeur vient du conteneur, jamais de l'image : en chargement différé
   elle n'a pas encore de largeur intrinsèque, et un `width: auto` s'y résout à
   2 px malgré des attributs width/height corrects sur la balise. */
body.s10-page #s10-page .s10-bandeau__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 2160px;
	margin-inline: auto;
}