/* =================================================================
   ALTERNATIVES PRÉVOYANCES — habillage Elian par-dessus le thème Jalis
   Chargé APRÈS ap-theme.css + ap-helpers.css (copies recolorées du
   thème). Ici : polices auto-hébergées, serif sur les titres, accent
   orange rare, fond argent, logo, adaptations des interdits DA.
   Aucune valeur hors palette DESIGN.md.
   ================================================================= */

/* ---------- Polices auto-hébergées (zéro requête tierce) ---------- */

@font-face {
	font-family: "Hanken Grotesk";
	src: url("fonts/hanken-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("fonts/hanken-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}
/* « basic-sans » est une police Adobe Fonts (Typekit) héritée du miroir Jalis. Ses
   fichiers étaient redistribués depuis static/vendor/use.typekit.net/ — 1,1 Mo servis
   sur 23 pages, sous une licence liée à un compte Adobe qui n'est pas le nôtre.
   Plutôt que de retoucher les centaines de règles du thème hérité (interdit, cf.
   _projet/DECISIONS.md D-001), on redéfinit la famille : tout ce qui demande encore
   « basic-sans » reçoit Hanken Grotesk, déjà la police de texte du site. */
@font-face {
	font-family: "basic-sans";
	src: url("fonts/hanken-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "basic-sans";
	src: url("fonts/hanken-600.woff2") format("woff2");
	font-weight: 500 900; font-style: normal; font-display: swap;
}

@font-face {
	font-family: "Spectral";
	src: url("fonts/spectral-500.woff2") format("woff2");
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Spectral";
	src: url("fonts/spectral-500-italic.woff2") format("woff2");
	font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("fonts/plex-mono-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}

/* Italianno — la police des CITATIONS, et d'elles seules (2026-08-12).
   Elian n'a pas nommé de police dans son PDF : il a écrit le mot « Exemple » DANS la
   police voulue. Lecture des ressources du PDF : c'était Zapfino (Linotype), fonte
   COMMERCIALE livrée avec macOS — l'embarquer serait une contrefaçon de licence, pas
   un simple risque de ressemblance. Italianno est son sosie libre (OFL), retenu par
   Clément sur un comparatif rendu de 7 candidates, à la taille réelle du site.
   Auto-hébergée comme toutes les autres : aucun appel à Google Fonts au runtime, donc
   zéro traceur — et donc toujours pas de bandeau cookies. */
@font-face {
	font-family: "Italianno";
	src: url("fonts/italianno-400-latin.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
	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: "Italianno";
	src: url("fonts/italianno-400-latin-ext.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palette Elian, disponible aussi en variables pour mes ajouts */
:root {
	--ap-fond:   #EEF0F1;
	--ap-brume:  #E4E7E9;
	--ap-acier:  #3B4147;
	--ap-encre:  #191B1E;
	--ap-accent: #BE5A1E;
	--ap-accent-vif: #D2691E;
	--ap-filet:  #A7ADB2;
	--ap-display: "IBM Plex Sans", system-ui, sans-serif;
	--ap-texte:   "IBM Plex Sans", system-ui, sans-serif;
	--ap-mono:    "IBM Plex Mono", ui-monospace, monospace;
	--ap-citation: "Italianno", cursive;
}


/* ---------- Titres en IBM Plex Sans (Medium) — superfamille corporate, même famille que les chiffres (Plex Mono) ---------- */

h1, h2, h3, h4, h5,
.headline-1, .headline-2, .headline-3, .headline-4, .headline-5,
.headline-ann, .typoalt, .rotate {
	font-family: var(--ap-display) !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em;
}
/* Le corps reste en Hanken (déjà injecté par la recolorisation) */
body, .txt_contenu, .bt, button, input, textarea, select {
	font-family: var(--ap-texte);
}

/* Chiffres et petites références en mono */
.ap-chiffre, .headline-4.ratio--carre {
	font-family: var(--ap-mono) !important;
	font-variant-numeric: tabular-nums;
}


/* ---------- Fond argent, jamais de blanc pur ---------- */

body { background: var(--ap-fond); color: #4A4F55; }
.bg-fond, .bg-blanc { background: var(--ap-fond) !important; }
.bg-brume { background: var(--ap-brume) !important; }


/* ---------- Accent orange, tenu RARE ---------- */

/* Les pastilles numérotées (.01 .02…) = l'accent le plus visible */
.bgton { background-color: var(--ap-accent) !important; color: #fff !important; }

/* Boutons d'action → orange plein */
.bt.cta, .bt.v2, a.cta, .bt.nofloat.cta {
	background-color: var(--ap-accent) !important;
	color: #fff !important;
	border-color: var(--ap-accent) !important;
}
.bt.cta:hover, .bt.v2:hover, a.cta:hover { background-color: var(--ap-accent-vif) !important; }

/* Filets d'accent (rotate label, séparateurs signature) */
.rotate { color: var(--ap-accent) !important; }

/* Sélection */
::selection { background: var(--ap-accent); color: #fff; }


/* ---------- En-tête : logo AP ---------- */

.ap-logo-ap { display: inline-flex; align-items: center; }
.ap-logo-ap img { height: 56px; width: auto; }
@media (max-width: 640px) { .ap-logo-ap img { height: 46px; } }


/* ---------- Focus clavier visible (accessibilité, non négociable) ---------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ap-accent) !important;
	outline-offset: 2px;
}


/* ================================================================
   ADAPTATION DES INTERDITS DA
   Le hero du miroir = texte blanc sur photos assombries (interdit
   maison). On garde la structure 3 colonnes mais on refroidit/
   désature les images et on ancre le libellé en bas à gauche sous
   un filet orange, au lieu du texte blanc centré sur voile sombre.
   ================================================================ */

/* Traitement froid et désaturé de toutes les photos (DESIGN §6) */
.img--back img, .intro img, .grid-introdu img {
	filter: saturate(0.82) contrast(1.02);
}

/* Hero typographique : 3 familles de services d'Elian, sans photo (épure).
   On garde le rythme 3 colonnes du miroir mais en panneaux sobres. */
.intro .bloc.bg-noir {
	position: relative;
	min-height: 100vh;
	background: linear-gradient(158deg, #2C3138 0%, var(--ap-encre) 100%) !important;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	padding: 8rem 0 2rem !important;
}
.ap-hero-intro {
	width: min(100% - 2.5rem, 70rem);
	margin: 0 auto 2.5rem;
}
.ap-hero-kicker {
	font-family: var(--ap-mono); font-size: 0.8rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ap-accent); margin: 0 0 1.1rem;
}
.ap-hero-tagline {
	font-family: var(--ap-display) !important; font-weight: 500;
	font-size: clamp(1.9rem, 4vw, 3.15rem); line-height: 1.12; color: #fff;
	margin: 0; max-width: 20ch;
}
.ap-hero-sous { margin: 1.25rem 0 0; max-width: 52ch; color: #C5CACE; font-size: 1.1rem; }

.grid-introdu {
	display: grid !important; grid-template-columns: 1fr; gap: 1px;
	width: min(100% - 2.5rem, 70rem); margin: 0 auto; float: none !important;
	height: auto !important; align-content: start;
}
@media (min-width: 56rem) { .grid-introdu { grid-template-columns: repeat(3, 1fr); } }

.ap-tuile {
	position: relative; display: flex !important; flex-direction: column;
	justify-content: flex-end; gap: 0.7rem;
	min-height: 230px !important; height: 260px !important; max-height: 42vh;
	padding: 1.9rem 1.75rem !important; text-decoration: none;
	background: rgba(255,255,255,0.035);
	border: 1px solid rgba(167,173,178,0.18); border-left: 3px solid var(--ap-accent);
	transition: background-color 220ms ease;
}
.ap-tuile:hover, .ap-tuile:focus-visible { background: rgba(190,90,30,0.12); }
.ap-tuile__nom { font-family: var(--ap-display); font-size: 1.7rem; color: #fff; line-height: 1.1; }
.ap-tuile__q { color: #C5CACE; font-size: 0.98rem; line-height: 1.42; }

/* Motif de fond : le thème posait un grand motif SVG au centre de la bande —
   il lisait comme un filigrane parasite. Retiré (épure, INTERDITS §6 : les
   motifs vivent dans les détails, pas en watermark géant sur une photo). */
.motif1 { display: none !important; }


/* ================================================================
   VIDÉO derrière un bouton (jamais en header — refus explicite)
   ================================================================ */

.ap-video-dialog { width: min(92vw, 68rem); padding: 0; border: 0; background: var(--ap-encre); }
.ap-video-dialog::backdrop { background: rgba(25,27,30,0.85); }
.ap-video-dialog video { width: 100%; display: block; }
.ap-video-dialog__barre {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 0.75rem 1rem; color: #fff; font-size: 0.9rem;
}
.ap-video-dialog__fermer {
	min-height: 44px; padding: 0.5rem 1.1rem; cursor: pointer;
	background: transparent; border: 1px solid #545B62; color: #fff;
}
.ap-video-dialog__fermer:hover { border-color: #fff; }

.ap-bouton-video {
	display: inline-flex; align-items: center; gap: 0.6rem;
	min-height: 48px; padding: 0.7rem 1.4rem; cursor: pointer;
	background: transparent; border: 1px solid var(--ap-filet); color: inherit;
	font-family: var(--ap-texte); font-weight: 600; font-size: 1rem;
}
.ap-bouton-video:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
.ap-bouton-video svg { width: 20px; height: 20px; }


/* Révélation douce (déjà pilotée par le JS d'origine ; garde-fou) */
@media (prefers-reduced-motion: reduce) {
	.vsy, .anim-blur1, .iganim { opacity: 1 !important; filter: none !important; transform: none !important; }
}


/* ================================================================
   TITRES DE SECTION COMMUNS
   ================================================================ */
.ap-sectete { max-width: 60rem; margin: 0 auto 3rem; text-align: center; }
.ap-kicker {
	font-family: var(--ap-mono); font-size: 0.78rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ap-accent); margin: 0 0 0.9rem;
}
.ap-h2 { font-family: var(--ap-display); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; color: var(--ap-encre); margin: 0; }
.ap-chapo { max-width: 54ch; margin: 1.1rem auto 0; color: #4A4F55; font-size: 1.08rem; }
.ap-section--sombre .ap-h2, .ap-section--sombre .ap-chapo { color: #EEF0F1; }
.ap-section--sombre .ap-chapo { color: #C5CACE; }


/* ================================================================
   NOS PROTECTIONS — tuiles-images (« domaines »). Photo + voile
   dégradé + libellé centré en capitales ; la question se révèle au
   survol (et reste visible au focus clavier / sur tactile).
   ================================================================ */
.ap-domaines {
	list-style: none; margin: 3rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 46rem) { .ap-domaines { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .ap-domaines { grid-template-columns: repeat(6, 1fr); gap: 12px; } }

.ap-domaine { margin: 0; }
.ap-domaine__lien {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 5 / 8; text-decoration: none; background: var(--ap-encre);
}
.ap-domaine__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	filter: saturate(0.8) contrast(1.02) brightness(0.92);
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ap-domaine__voile {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(25,27,30,0.12) 0%, rgba(25,27,30,0.36) 45%, rgba(25,27,30,0.74) 100%);
	transition: background 300ms ease;
}
.ap-domaine__txt {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.5rem; padding: 1.1rem; text-align: center;
}
.ap-domaine__label {
	position: relative; font-family: var(--ap-texte); font-weight: 600; color: #fff;
	text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.92rem; line-height: 1.28;
	padding-bottom: 0.6rem; text-shadow: 0 1px 14px rgba(0,0,0,0.45);
}
.ap-domaine__label::after {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 22px; height: 2px; background: var(--ap-accent); transition: width 300ms ease;
}
.ap-domaine__q {
	color: #E4E7E9; font-size: 0.84rem; line-height: 1.4; max-width: 22ch;
	opacity: 0; transform: translateY(8px);
	transition: opacity 320ms ease, transform 320ms ease;
}
.ap-domaine__lien:hover .ap-domaine__img,
.ap-domaine__lien:focus-visible .ap-domaine__img { transform: scale(1.06); }
.ap-domaine__lien:hover .ap-domaine__voile,
.ap-domaine__lien:focus-visible .ap-domaine__voile {
	background: linear-gradient(180deg, rgba(25,27,30,0.34) 0%, rgba(190,90,30,0.26) 58%, rgba(25,27,30,0.86) 100%);
}
.ap-domaine__lien:hover .ap-domaine__q,
.ap-domaine__lien:focus-visible .ap-domaine__q { opacity: 1; transform: none; }
.ap-domaine__lien:hover .ap-domaine__label::after,
.ap-domaine__lien:focus-visible .ap-domaine__label::after { width: 46px; }

/* PROTECTION uniquement — au survol, TOUTE la tuile grandit fortement et
   déborde (rogne) sur ses voisines : scale + passe au-dessus (z-index) + ombre.
   (La méthode garde son simple zoom d'image, elle n'est pas visée.) */
.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien {
	transition: transform 440ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 440ms ease;
}
.ap-domaines:not(.ap-domaines--methode) .ap-domaine:hover,
.ap-domaines:not(.ap-domaines--methode) .ap-domaine:focus-within { z-index: 6; }
.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien:hover,
.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien:focus-visible {
	transform: scale(1.25); z-index: 6;
	box-shadow: 0 34px 64px -24px rgba(25, 27, 30, 0.52);
}
.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien:hover .ap-domaine__img,
.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien:focus-visible .ap-domaine__img { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ap-domaine__img, .ap-domaine__q, .ap-domaine__label::after { transition: none; }
	.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien { transition: none; }
	.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien:hover,
	.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien:focus-visible { transform: scale(1.12); }
}
@media (hover: none) {
	.ap-domaine__q { opacity: 1; transform: none; }
	.ap-domaine__lien { aspect-ratio: 3 / 4; }
}


/* ================================================================
   HOME — deux piliers regroupés (Protection sociale / Patrimonial)
   Chaque pilier : un en-tête + un trio de tuiles « domaines ». Le
   trio garde le look des tuiles mais reste sur 3 colonnes (pas 6)
   et adoucit le survol, car les tuiles y sont plus larges.
   ================================================================ */
.ap-groupe { margin-top: 3.4rem; }
.ap-groupe + .ap-groupe { margin-top: 4.2rem; }
.ap-groupe__tete { max-width: 64ch; }
.ap-groupe__num {
	font-family: var(--ap-mono); font-size: 0.78rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ap-accent); margin: 0 0 0.55rem;
}
.ap-groupe__titre {
	font-family: var(--ap-display); font-weight: 500; letter-spacing: -0.01em;
	font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.12;
	color: var(--ap-encre); margin: 0;
}
.ap-groupe__sous { margin: 0.7rem 0 0; color: #4A4F55; line-height: 1.55; }
.ap-groupe__lien {
	display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1rem;
	/* 24 px, pas 21 : ce sont les deux liens principaux de l'accueil au doigt, et une
	   cible autonome (pas un lien au fil d'une phrase) doit tenir le minimum de la
	   WCAG 2.2 SC 2.5.8. L'interligne seule donnait 21 px — mesuré, pas estimé. */
	min-height: 24px;
	font-family: var(--ap-texte); font-weight: 600; font-size: 0.96rem;
	color: var(--ap-accent); text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease, gap 200ms ease;
}
.ap-groupe__lien:hover, .ap-groupe__lien:focus-visible {
	color: var(--ap-accent-vif); border-bottom-color: currentColor; gap: 0.7rem;
}
.ap-groupe__fleche { font-size: 1.1em; line-height: 1; transition: transform 220ms ease; }
.ap-groupe__lien:hover .ap-groupe__fleche,
.ap-groupe__lien:focus-visible .ap-groupe__fleche { transform: translateX(3px); }

/* Le trio : 3 colonnes (au lieu des 6 du strip), survol assagi */
.ap-domaines.ap-domaines--trio { margin-top: 1.6rem; }
@media (min-width: 72rem) {
	.ap-domaines.ap-domaines--trio { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 46rem) {
	.ap-domaines.ap-domaines--trio .ap-domaine__lien { aspect-ratio: 4 / 5; }
	.ap-domaines.ap-domaines--trio .ap-domaine__lien:hover,
	.ap-domaines.ap-domaines--trio .ap-domaine__lien:focus-visible {
		transform: scale(1.05); box-shadow: 0 26px 52px -26px rgba(25, 27, 30, 0.5);
	}
}
@media (min-width: 46rem) and (prefers-reduced-motion: reduce) {
	.ap-domaines.ap-domaines--trio .ap-domaine__lien:hover,
	.ap-domaines.ap-domaines--trio .ap-domaine__lien:focus-visible { transform: none; }
}


/* ================================================================
   LE CABINET — citation clé + zone bouton vidéo
   ================================================================ */
.ap-cle-inline {
	font-family: var(--ap-display) !important; font-style: italic;
	font-size: 1.22rem; line-height: 1.45; color: var(--ap-encre);
	border-left: 3px solid var(--ap-accent); padding: 0.2rem 0 0.2rem 1.25rem;
	margin: 1.8rem 0; max-width: 46ch;
}
.ap-cabinet-cta { margin-top: 2rem; }

/* En-tête chapitré (.02 · LE CABINET) + titre pleine largeur */
.ap-cabinet__tete { margin: 0 0 2rem; }
.ap-cabinet__eyebrow { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.35rem; }
.ap-cabinet__kicker {
	font-family: var(--ap-mono); font-size: 0.78rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ap-accent);
}
.ap-cabinet__titre {
	font-family: var(--ap-display); font-weight: 500; letter-spacing: -0.01em;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1;
	color: var(--ap-encre); margin: 0; max-width: 22ch;
}

/* Deux colonnes : récit à gauche, portrait à droite */
.ap-cabinet { display: grid; grid-template-columns: 1fr; gap: 2.6rem; align-items: start; }
@media (min-width: 60rem) {
	.ap-cabinet { grid-template-columns: minmax(0, 1fr) minmax(330px, 420px); gap: 4rem; }
}
.ap-cabinet__sous {
	font-family: var(--ap-display); font-weight: 500; font-size: 1.4rem;
	line-height: 1.3; color: var(--ap-encre); margin: 0 0 1.4rem;
}
.ap-cabinet__corps { columns: 1 !important; column-count: 1 !important; }
.ap-cabinet__corps p { margin: 0 0 1.15rem; color: #4A4F55; line-height: 1.65; max-width: 62ch; }

/* Portrait d'Elian : grande photo PACA verticale + médaillon rond d'Elian
   incrusté en bas à gauche (arc « abri » orange), plaque nom/rôle à droite.
   Bloc volontairement plus court que le récit → il se fige au scroll.
   La source du médaillon est un portrait rond basse déf (500²) : affiché
   petit et rond pour masquer les coins sombres et rester net. */
.ap-portrait { margin: 0; order: -1; position: relative; }
/* Colonne de droite : le portrait démarre en haut de la section, se fige au
   scroll (sticky sous le header fixe) et repart quand la section se termine. */
@media (min-width: 60rem) { .ap-portrait { order: 0; position: sticky; top: 108px; margin-top: 0.4rem; align-self: start; } }

/* La grande photo PACA est l'élément principal du bloc */
.ap-portrait__lieu { position: relative; z-index: 1; width: 100%; margin: 0; }
.ap-portrait__lieu img {
	display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
	max-height: 30rem; border-radius: 3px; filter: saturate(0.98);
	box-shadow: 0 26px 50px -24px rgba(25,27,30,0.55);
}

/* Médaillon Elian : incrusté sur le bas gauche de la photo, la chevauche */
.ap-portrait__media { position: absolute; z-index: 3; left: -1.4rem; bottom: -1.9rem; width: 44%; max-width: 150px; aspect-ratio: 1; margin: 0; }
.ap-portrait__media::before {
	content: ""; position: absolute; inset: -8%; border-radius: 50%;
	background: radial-gradient(circle at 50% 42%, rgba(59,65,71,0.14), rgba(59,65,71,0) 68%);
}
.ap-portrait__img {
	position: relative; z-index: 1; display: block;
	width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
	box-shadow: 0 0 0 4px var(--ap-fond), 0 0 0 5px rgba(167,173,178,0.55), 0 22px 40px -20px rgba(25,27,30,0.55);
	filter: saturate(0.96) contrast(1.02);
}
.ap-portrait__media::after {
	content: ""; position: absolute; z-index: 2; inset: -7%; border-radius: 50%;
	border: 2px solid transparent; border-top-color: var(--ap-accent); border-right-color: var(--ap-accent);
	transform: rotate(-34deg); pointer-events: none;
}

/* Plaque nom/rôle : sous la photo, calée à droite + réserve à gauche la
   largeur du médaillon pour que le texte ne passe jamais dessous. */
.ap-portrait__plaque { text-align: right; margin: 1.5rem 0 0; padding-left: 9.5rem; }
.ap-portrait__nom {
	display: block; font-family: var(--ap-display); font-weight: 600;
	font-size: 1.42rem; line-height: 1.2; color: var(--ap-encre);
}
.ap-portrait__role {
	display: inline-block; position: relative; margin-top: 0.7rem; padding-top: 0.75rem;
	font-family: var(--ap-mono); font-size: 0.72rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ap-accent);
}
.ap-portrait__role::before {
	content: ""; position: absolute; top: 0; right: 0;
	width: 28px; height: 2px; background: var(--ap-accent);
}
@media (prefers-reduced-motion: reduce) { .ap-portrait__media::before { background: none; } }


/* ================================================================
   MÉTHODE — mêmes tuiles-images que « Ce que je protège », en variante
   paysage 3 colonnes : numéro + libellé calés en bas à gauche, détail
   révélé au survol, image qui grossit nettement au survol. 6e tuile =
   appel à l'action (dégradé accent, sans photo) pour compléter la grille.
   ================================================================ */
.ap-domaines--methode { grid-template-columns: 1fr; }
@media (min-width: 46rem) { .ap-domaines--methode { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .ap-domaines--methode { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

/* Tuiles paysage, texte calé en bas à gauche */
.ap-domaines--methode .ap-domaine__lien { aspect-ratio: 4 / 3; }
.ap-domaines--methode .ap-domaine__txt {
	align-items: flex-start; justify-content: flex-end;
	text-align: left; padding: 1.4rem 1.4rem 1.3rem; gap: 0.3rem;
}
.ap-domaine__num {
	font-family: var(--ap-mono); font-size: 0.82rem; letter-spacing: 0.08em;
	color: #fff; opacity: 0.82;
}
.ap-domaines--methode .ap-domaine__label { font-size: 1.16rem; padding-bottom: 0.6rem; }
.ap-domaines--methode .ap-domaine__label::after { left: 0; transform: none; }
.ap-domaines--methode .ap-domaine__q { max-width: 34ch; text-align: left; }
/* Zoom plus marqué : l'image « prend plus d'espace » au survol */
.ap-domaines--methode .ap-domaine__lien:hover .ap-domaine__img,
.ap-domaines--methode .ap-domaine__lien:focus-visible .ap-domaine__img { transform: scale(1.13); }

/* 6e tuile — action (« Prendre rendez-vous ») : dégradé accent, pas de photo,
   détail toujours visible, flèche qui file au survol. */
.ap-domaine--cta .ap-domaine__lien { background: linear-gradient(150deg, var(--ap-acier) 0%, var(--ap-encre) 60%); }
.ap-domaine--cta .ap-domaine__voile { background: linear-gradient(150deg, rgba(190,90,30,0.92) 0%, rgba(190,90,30,0.22) 55%, rgba(25,27,30,0.32) 100%); }
.ap-domaine--cta .ap-domaine__lien:hover .ap-domaine__voile,
.ap-domaine--cta .ap-domaine__lien:focus-visible .ap-domaine__voile { background: linear-gradient(150deg, rgba(210,105,30,0.98) 0%, rgba(190,90,30,0.4) 58%, rgba(25,27,30,0.35) 100%); }
.ap-domaine--cta .ap-domaine__q { opacity: 0.95; transform: none; }
.ap-domaine__fleche { font-family: var(--ap-mono); color: #fff; font-size: 1.5rem; line-height: 1; margin-top: 0.5rem; transition: transform 300ms ease; }
.ap-domaine--cta .ap-domaine__lien:hover .ap-domaine__fleche,
.ap-domaine--cta .ap-domaine__lien:focus-visible .ap-domaine__fleche { transform: translate(5px, -5px); }


/* ================================================================
   CHIFFRES / REPÈRES — bande sombre + grande photo PACA en parallaxe
   FIXE (background-attachment:fixed) : la carte et les chiffres
   défilent PAR-DESSUS l'image, qui reste calée. Repli en scroll sur
   mobile / iOS (fixed non fiable). Grand « 03 » filigrane derrière le
   titre, comme la réf.
   ================================================================ */
.section-stats { position: relative; overflow: hidden; background: linear-gradient(158deg, var(--ap-acier) 0%, var(--ap-encre) 100%); }
.ap-stats__deco {
	position: absolute; top: 3%; left: 50%; transform: translateX(-50%); z-index: 0;
	font-family: var(--ap-display); font-weight: 600; line-height: 0.8;
	font-size: clamp(7rem, 19vw, 14rem); color: rgba(255,255,255,0.055);
	pointer-events: none; user-select: none;
}
.ap-stats__deco::before { content: "03"; }
.section-stats .ap-sectete { position: relative; z-index: 1; margin-bottom: 2.4rem; }

/* Grand numéro de chapitre en filigrane — même traitement que le « 03 » de la
   section chiffres, décliné 01 / 02 / 04 sur protection / cabinet / méthode.
   Numéro sombre et très pâle sur les sections claires. Cabinet : PAS
   d'overflow:hidden (sinon casse le portrait sticky) — le numéro tient dans
   la section, donc pas besoin de rogner. */
#protection, #methode { position: relative; overflow: hidden; }
#cabinet { position: relative; }
#protection > .centrage, #methode > .centrage, #cabinet > .centrage { position: relative; z-index: 1; }
.ap-chapnum {
	position: absolute; top: 2.5%; left: 50%; transform: translateX(-50%); z-index: 0;
	font-family: var(--ap-display); font-weight: 600; line-height: 0.8;
	font-size: clamp(7rem, 19vw, 14rem); color: rgba(25,27,30,0.07);
	pointer-events: none; user-select: none;
}

/* La carte : la photo EST le fond, figée au scroll */
.ap-stats__carte {
	position: relative; border-radius: 4px; overflow: hidden;
	background-image: url("img/stats-fond.jpg");
	background-size: cover; background-position: center; background-attachment: fixed;
	box-shadow: 0 46px 90px -36px rgba(0,0,0,0.7);
}
.ap-stats__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,25,0.5) 0%, rgba(20,22,25,0.64) 100%); }
@media (max-width: 60rem), (hover: none) { .ap-stats__carte { background-attachment: scroll; } }
@media (prefers-reduced-motion: reduce) { .ap-stats__carte { background-attachment: scroll; } }

/* Passée de 3 à 4 repères le 2026-08-12 (le quatrième carré demandé par Elian).
   D'où le palier intermédiaire à 2 colonnes : à 60rem, quatre colonnes rendaient
   le libellé « Départements couverts physiquement… » illisible en colonne étroite. */
.ap-stats__grille {
	position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr;
}
.ap-stat {
	padding: 2.6rem 1.3rem; text-align: center; color: #fff;
	border-top: 1px solid rgba(255,255,255,0.15);
}
.ap-stat:first-child { border-top: 0; }
@media (min-width: 48rem) {
	.ap-stats__grille { grid-template-columns: repeat(2, 1fr); }
	.ap-stat { border-left: 1px solid rgba(255,255,255,0.15); }
	.ap-stat:nth-child(-n+2) { border-top: 0; }
	.ap-stat:nth-child(odd) { border-left: 0; }
}
@media (min-width: 75rem) {
	.ap-stats__grille { grid-template-columns: repeat(4, 1fr); }
	.ap-stat { border-top: 0; border-left: 1px solid rgba(255,255,255,0.15); }
	.ap-stat:first-child { border-left: 0; }
}
.ap-stats__note {
	position: relative; z-index: 1; margin: 0; padding: 0 1.3rem 2.2rem;
	text-align: center; font-family: var(--ap-texte); font-size: 0.88rem;
	line-height: 1.45; color: #C9CDD1;
}
.ap-stat__num {
	display: block; font-family: var(--ap-display); font-weight: 500;
	font-size: clamp(2.7rem, 5vw, 3.9rem); line-height: 1; letter-spacing: -0.01em; color: #fff;
}
.ap-stat__label {
	display: block; margin: 0.85rem auto 0; max-width: 22ch;
	font-family: var(--ap-texte); font-size: 0.88rem; line-height: 1.45; color: #C9CDD1;
}


/* ================================================================
   PARTENAIRES — bandeau de logos des compagnies + Antémys
   Logos officiels self-hostés (assets-lsa/img/logos/). Hauteur
   normalisée, couleur atténuée au repos → pleine au survol.
   ⚠️ Droit d'usage des logos à confirmer avant mise en ligne.
   ================================================================ */
/* Bandeau en défilement automatique (marquee) : logos en noir & blanc,
   fondu sur les bords, pause au survol. Piste = 2 moitiés identiques
   (16 logos) → translateX(-50%) en boucle sans couture. */
.ap-marquee {
	margin: 3rem 0 0; padding: 0.4rem 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ap-compagnies.ap-marquee__track {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; width: max-content;
	animation: ap-marquee 38s linear infinite;
}
.ap-marquee:hover .ap-marquee__track { animation-play-state: paused; }
@keyframes ap-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ap-compagnie { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-right: 3.6rem; }
.ap-compagnie img {
	display: block; width: auto; object-fit: contain;
	filter: grayscale(1) contrast(1.05); opacity: 0.72;
}
/* Tailles agrandies, équilibrées logo par logo. */
.ap-logo--generali  { height: 34px; }
.ap-logo--april     { height: 50px; }
.ap-logo--swisslife { height: 62px; }
.ap-logo--malakoff  { height: 56px; }
/* Ajoutés le 2026-08-12 (L3-10). « Vérif échelle » était une demande explicite d'Elian :
   ces hauteurs sont calées sur le DESSIN, pas sur le fichier — Corum est un mot large et
   bas, Groupe CIR un monogramme haut surmontant un mot court. */
.ap-logo--corum     { height: 34px; }
.ap-logo--cir       { height: 52px; }
@media (min-width: 46rem) {
	.ap-logo--generali  { height: 40px; }
	.ap-logo--april     { height: 60px; }
	.ap-logo--swisslife { height: 74px; }
	.ap-logo--malakoff  { height: 66px; }
	.ap-logo--corum     { height: 40px; }
	.ap-logo--cir       { height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-marquee { -webkit-mask-image: none; mask-image: none; }
	.ap-compagnies.ap-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
	.ap-compagnie:nth-child(n+5) { display: none; }
	.ap-compagnie { margin: 0.8rem 2rem; }
}
/* Antémys : carte 2 colonnes (photo + texte), plus impactant mais sobre */
.ap-antemys {
	margin: 9rem auto 0; max-width: 64rem; overflow: hidden;
	display: grid; grid-template-columns: 1fr;
	background: #fff; border: 1px solid var(--ap-brume); border-radius: 4px;
	box-shadow: 0 34px 66px -38px rgba(25,27,30,0.34);
}
@media (min-width: 56rem) { .ap-antemys { grid-template-columns: 0.92fr 1.08fr; } }
.ap-antemys__media { position: relative; min-height: 210px; }
.ap-antemys__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.96); }
.ap-antemys__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(59,65,71,0.12), rgba(190,90,30,0.16)); }

/* Variante LOGO (2026-08-12, L3-11) : le logo Antémys remplace la photo de groupe, qui
   n'arrivera qu'en octobre. Un logo ne se recadre pas en `object-fit: cover` comme une
   photo — il se pose entier, centré, sur le fond sombre pour lequel il est dessiné. */
.ap-antemys__media--logo { background: #0E1013; display: grid; place-items: center; padding: 2.2rem; }
/* ⚠️ La largeur est DONNÉE, jamais `auto` — interblocage constaté au rendu le 2026-08-12 :
   avec `width:auto`, l'image mesure 0 tant qu'elle n'est pas chargée ; une image
   `loading="lazy"` de taille 0 n'entre jamais dans le viewport, donc ne se charge jamais,
   donc reste à 0. Le fichier répondait bien 200 — c'est la mise en page qui l'empêchait
   d'exister. Toute image posée en `lazy` doit avoir une taille avant chargement. */
.ap-antemys__media--logo img {
	position: static; width: min(62%, 250px); height: auto;
	aspect-ratio: 1; object-fit: contain; filter: none;
}
.ap-antemys__media--logo::after { content: none; }
.ap-antemys__corps { padding: 2.4rem 2.3rem; border-top: 3px solid var(--ap-accent); }
@media (min-width: 56rem) { .ap-antemys__corps { border-top: 0; border-left: 3px solid var(--ap-accent); } }
.ap-antemys__tag {
	font-family: var(--ap-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ap-accent); margin: 0 0 0.6rem;
}
.ap-antemys__titre { font-family: var(--ap-display); font-weight: 500; font-size: 1.5rem; line-height: 1.22; margin: 0 0 0.9rem; color: var(--ap-encre); }
.ap-antemys p { color: #4A4F55; margin: 0 0 0.9rem; line-height: 1.6; max-width: 46ch; }
.ap-lien-sortant {
	display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600;
	color: var(--ap-accent); text-decoration: none; border-bottom: 1px solid transparent;
}
.ap-lien-sortant:hover { border-bottom-color: var(--ap-accent); }
.ap-lien-sortant__fleche { font-size: 0.9em; }


/* ================================================================
   HERO — typo allégée (moins imposante) + bouton « Prendre rendez-vous »
   ================================================================ */
.accueil-selector .headline-bandeau { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.12; }
.accueil-selector .headline-2 { font-size: clamp(1.02rem, 1.9vw, 1.35rem); line-height: 1.5; }
/* Texte du hero calé à gauche (le CTA hérite de l'alignement) */
.ap-hero-txt { text-align: left; margin-left: 0; margin-right: auto; }
.ap-hero-cta { margin: 2.3rem 0 0; }
.ap-hero-cta .bt.cta { font-size: 0.95rem; }

/* En-tête scrollé (.ap-solid) : l'onglet actif « Accueil » garde une boîte sombre
   du thème (héritée de l'état transparent) qui masque le texte anthracite -> on la
   retire et on distingue l'actif en gras (le téléphone est remis en blanc via le JS). */
.header.ap-solid .nav li.active > a::before { display: none !important; }
.header.ap-solid .nav li.active > a { font-weight: 700 !important; }


/* ================================================================
   FAQ — accordéon <details>
   ================================================================ */
.ap-faq { max-width: 52rem; margin: 3rem auto 0; border-top: 1px solid var(--ap-filet); }
.ap-qr { border-bottom: 1px solid var(--ap-filet); }
.ap-qr__q {
	font-family: var(--ap-display); font-size: 1.18rem; color: var(--ap-encre);
	padding: 1.35rem 2.5rem 1.35rem 0; cursor: pointer; position: relative;
	list-style: none; line-height: 1.35;
}
.ap-qr__q::-webkit-details-marker { display: none; }
.ap-qr__q::after {
	content: "+"; position: absolute; right: 0.2rem; top: 1.15rem;
	font-family: var(--ap-texte); font-size: 1.6rem; font-weight: 400;
	color: var(--ap-accent); transition: transform 220ms ease; line-height: 1;
}
.ap-qr[open] .ap-qr__q::after { content: "–"; }
.ap-qr__r { padding: 0 0 1.5rem; }
.ap-qr__r p { margin: 0 0 0.8rem; color: #4A4F55; max-width: 60ch; line-height: 1.55; }
.ap-qr__r p:last-child { margin-bottom: 0; }
.ap-qr__chiffre { font-size: 0.95rem; }
.ap-qr[open] .ap-qr__r { animation: ap-qr-open 300ms ease both; }
@keyframes ap-qr-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ap-qr[open] .ap-qr__r { animation: none; } }


/* ================================================================
   PLACEHOLDER LÉGAL / À COMPLÉTER — volontairement VISIBLE
   ================================================================ */
.ap-manque {
	font-family: var(--ap-mono); font-size: 0.76rem; color: #8A5A2B;
	background: rgba(190,90,30,0.08); border: 1px dashed var(--ap-accent);
	padding: 0.15rem 0.5rem; border-radius: 2px; display: inline-block;
}
.ap-manque--bloc { display: block; margin: 0 0 1.2rem; padding: 0.6rem 0.8rem; line-height: 1.4; }
.ap-manque code { font-family: var(--ap-mono); background: rgba(0,0,0,0.06); padding: 0 0.2em; }


/* ================================================================
   CONTACT — section sombre, formulaire qualifiant
   ================================================================ */
.section-contact { background: var(--ap-encre); }
.ap-contact { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 60rem) { .ap-contact { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
.ap-contact__intro .ap-sectete { max-width: none; margin: 0; text-align: left; }
.ap-coordonnees { list-style: none; margin: 2rem 0 0; padding: 0; }
.ap-coordonnees li { margin-bottom: 1.1rem; color: #C5CACE; line-height: 1.4; }
.ap-coordonnees__lib { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8B9298; margin-bottom: 0.2rem; }
.ap-coordonnees a { color: #fff; text-decoration: none; font-size: 1.15rem; border-bottom: 1px solid transparent; }
.ap-coordonnees a:hover { border-bottom-color: var(--ap-accent); }

.ap-contact__form { background: var(--ap-fond); padding: 2rem; }
@media (min-width: 46rem) { .ap-contact__form { padding: 2.5rem; } }
.ap-form__grille { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 40rem) { .ap-form__grille { grid-template-columns: 1fr 1fr; } }
.ap-champ { display: flex; flex-direction: column; gap: 0.35rem; }
.ap-champ--large { grid-column: 1 / -1; }
.ap-champ > span { font-size: 0.85rem; font-weight: 600; color: var(--ap-acier); }
.ap-champ__opt { font-weight: 400; color: #8A9096; }
.ap-champ input, .ap-champ select, .ap-champ textarea {
	font-family: var(--ap-texte); font-size: 1rem; color: var(--ap-encre);
	background: #fff; border: 1px solid var(--ap-filet); border-radius: 2px;
	padding: 0.7rem 0.8rem; width: 100%; min-height: 46px;
}
.ap-champ textarea { min-height: 96px; resize: vertical; }
.ap-champ input:focus, .ap-champ select:focus, .ap-champ textarea:focus {
	outline: 2px solid var(--ap-accent); outline-offset: 1px; border-color: var(--ap-accent);
}
.ap-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ap-consent { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1.3rem 0; font-size: 0.85rem; color: var(--ap-acier); line-height: 1.45; }
.ap-consent input { margin-top: 0.2rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ap-accent); }
.ap-consent a { color: var(--ap-accent); }
.ap-form__envoi { width: 100%; min-height: 52px; font-size: 1.05rem; border-radius: 2px; }


/* ================================================================
   FOOTER — Elian (remplace le pied de page du miroir)
   ================================================================ */
.ap-footer { background: var(--ap-acier); color: #C5CACE; padding: 3.5rem 0 2rem; }
.ap-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; }
@media (min-width: 40rem) { .ap-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .ap-footer__grid { grid-template-columns: 2fr 1fr 1.3fr 1.5fr; gap: 2.5rem; } }
.ap-footer__brand img { height: 46px; width: auto; margin-bottom: 1rem; }
.ap-footer__punch { font-family: var(--ap-display); font-size: 1.05rem; line-height: 1.4; color: #E4E7E9; margin: 0 0 1.2rem; }
.ap-footer__social { display: flex; gap: 0.7rem; margin-bottom: 0.7rem; }
.ap-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border: 1px solid #545B62; color: #C5CACE;
	transition: border-color 200ms ease, color 200ms ease;
}
.ap-footer__social a:hover { border-color: var(--ap-accent); color: #fff; }
.ap-footer__col h3 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #E4E7E9; margin: 0 0 1rem; font-family: var(--ap-texte); font-weight: 600; }
.ap-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ap-footer__col li { margin-bottom: 0.6rem; font-size: 0.92rem; line-height: 1.4; color: #C5CACE; }
.ap-footer__col a { color: #C5CACE; text-decoration: none; border-bottom: 1px solid transparent; }
.ap-footer__col a:hover { color: #fff; border-bottom-color: var(--ap-accent); }
.ap-footer__col .ap-manque { color: #D8A47A; background: rgba(190,90,30,0.14); border-color: #7a5230; }
.ap-footer__bas { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #545B62; font-size: 0.82rem; color: #AEB4BA; }


/* ================================================================
   EN-TÊTE FIXE — transparent sur la bande d'accueil (logo sombre
   lisible sur photo), puis barre CLAIRE au défilement (le logo est
   sombre → jamais de fond foncé). Texte de nav basculé en sombre à
   l'état solide pour rester lisible sur les sections argent.
   ================================================================ */
/* Le fond solide + le texte sombre sont posés en inline !important par le
   script (le thème force la transparence avec une spécificité que seul
   l'inline dépasse). Ici : transitions douces uniquement. */
header.header .header-bandeau, header.header .header-bottom { transition: background-color 280ms ease; }
header.header { transition: box-shadow 280ms ease; }

/* Ancres : ne pas passer sous l'en-tête fixe au clic de menu */
#protection, #cabinet, #methode, #partenaires, #faq, #contact { scroll-margin-top: 128px; }


/* ================================================================
   PAGES PRODUITS — coquille de sous-page (hero court + Q/R ludique)
   Réutilisable : prévoyance, mutuelle, PER, assurance vie, emprunteur.
   Tout est scopé (.ap-hero--page, .ap-carte, .ap-piliers…) : la home
   n'est pas affectée.
   ================================================================ */

/* ---- Hero court de sous-page : photo assombrie, texte à gauche ---- */
/* Sur l'accueil, .accueil-selector est en position:absolute (overlay du
   carrousel qui, lui, donne la hauteur). Ici il n'y a pas de carrousel :
   on remet .accueil-selector dans le flux, sinon la section s'effondre. */
.ap-hero--page { overflow: hidden; background: var(--ap-encre); min-height: 100svh; }
.ap-hero--page .accueil-selector { position: relative !important; min-height: auto !important; background: transparent !important; width: 100%; }
.ap-hero__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 35%; z-index: 0;
}
.ap-hero__voile {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(15,17,20,0.88) 0%, rgba(15,17,20,0.68) 48%, rgba(15,17,20,0.34) 100%);
}
.ap-hero--page .centrage { position: relative; z-index: 2; }
.ap-hero--page .ap-hero-txt { padding: 8.6rem 0 3.6rem; text-align: left; margin-left: 0; margin-right: auto; }
@media (min-width: 46rem) { .ap-hero--page .ap-hero-txt { padding: 11rem 0 5.2rem; } }
.ap-hero--page .headline-bandeau { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.12; }
.ap-hero--page h1.headline-bandeau { margin-top: 0; } /* neutralise la marge h1 du normalize */
.ap-hero--page .headline-2 { font-size: clamp(1.02rem, 1.9vw, 1.3rem); line-height: 1.5; max-width: 44ch; }
.ap-hero--page .ap-hero-cta { margin: 2.1rem 0 0; }
.ap-hero--page .ap-hero-cta .bt.cta { font-size: 0.95rem; }
.ap-kicker--clair { color: var(--ap-accent-vif); }

/* ---- Fil d'Ariane clair (dans le hero sombre) ---- */
.ap-ariane {
	font-family: var(--ap-mono); font-size: 0.74rem; letter-spacing: 0.06em;
	text-transform: uppercase; color: rgba(238,240,241,0.72); margin: 0 0 1.5rem;
}
.ap-ariane a { color: rgba(238,240,241,0.72); text-decoration: none; border-bottom: 1px solid transparent; }
.ap-ariane a:hover { color: #fff; border-bottom-color: var(--ap-accent); }
.ap-ariane .ap-ariane__sep { margin: 0 0.5rem; color: rgba(238,240,241,0.4); }
.ap-ariane [aria-current] { color: #fff; }

/* ---- Intro éditoriale de sous-page ---- */
.ap-prose { max-width: 62ch; margin: 0 auto; }
.ap-prose p { color: #4A4F55; font-size: 1.08rem; line-height: 1.62; margin: 0 0 1.15rem; }
.ap-prose p:last-child { margin-bottom: 0; }
.ap-prose strong { color: var(--ap-encre); }
.ap-lead { font-family: var(--ap-display); font-size: clamp(1.25rem, 2.4vw, 1.58rem); line-height: 1.42; color: var(--ap-encre); font-weight: 500; }

/* FAQ — « Mieux comprendre pour mieux décider. » centrée et en italique.
   Demande d'Elian le 2026-08-16. Modificateur et non règle sur `.ap-lead` :
   la classe sert sur 13 pages, et lui n'a parlé que de ce titre-là.
   L'italique est synthétisé (IBM Plex Sans n'a pas de coupe italique) — c'est
   déjà le parti pris de `.ap-cle-inline` sur la page cabinet, qu'il a validée. */
.ap-lead--faq { text-align: center; font-style: italic; }

/* ---- Cartes Q/R (structure "article" : titre + filet + extrait +
   bouton pilule à flèche + grande image ; réponse complète révélée dessous)
   Repro fidèle des cartes "actualités" du miroir, aux couleurs d'Elian. ---- */
.ap-cartes { max-width: 68rem; margin: 3rem auto 0; display: grid; gap: 1.8rem; }
.ap-carte {
	background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: 0 22px 54px -34px rgba(25,27,30,0.55);
	padding: clamp(1.3rem, 2.6vw, 2.2rem);
	transition: box-shadow 260ms ease;
}
.ap-carte:hover { box-shadow: 0 30px 66px -34px rgba(25,27,30,0.6); }
/* le thème pose "details span{opacity:0}" (accordéon FAQ) : on rétablit nos spans */
.ap-carte span { opacity: 1 !important; }

.ap-carte__row {
	display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: center;
	cursor: pointer; list-style: none;
}
.ap-carte__row::-webkit-details-marker { display: none; }
@media (min-width: 52rem) { .ap-carte__row { grid-template-columns: 1fr 1.2fr; gap: 2.6rem; } }

.ap-carte__texte { min-width: 0; }
.ap-carte__titre {
	font-family: var(--ap-display); font-weight: 600; color: var(--ap-encre);
	font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.2; margin: 0;
}
.ap-carte__filet { display: block; height: 1px; background: var(--ap-filet); margin: 1.4rem 0; }
.ap-carte__excerpt { color: #4A4F55; line-height: 1.62; font-size: 1.04rem; margin: 0 0 1.7rem; }
.ap-carte__excerpt strong { color: var(--ap-encre); }

.ap-carte__bt {
	display: inline-flex; align-items: center; gap: 0.9rem;
	border: 1px solid var(--ap-accent); border-radius: 999px;
	padding: 0.42rem 0.42rem 0.42rem 1.4rem; color: var(--ap-accent);
	font-family: var(--ap-texte); font-weight: 600; font-size: 0.78rem;
	letter-spacing: 0.08em; text-transform: uppercase;
	transition: background-color 260ms ease, color 260ms ease;
}
.ap-carte__fleche {
	width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--ap-encre); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform 340ms cubic-bezier(.2,.7,.2,1), background-color 260ms ease, color 260ms ease;
}
.ap-carte__fleche svg { width: 1.05rem; height: 1.05rem; display: block; }
/* survol : la pilule se remplit, le rond s'inverse, la flèche avance */
.ap-carte:hover .ap-carte__bt, .ap-carte__bt:hover { background: var(--ap-accent); color: #fff; }
.ap-carte:hover .ap-carte__fleche { background: #fff; color: var(--ap-accent); transform: translateX(5px) scale(1.08); }
/* ouvert : la flèche pivote vers le bas (placé après le survol -> prioritaire) */
.ap-carte[open] .ap-carte__fleche { transform: rotate(90deg); background: var(--ap-encre); color: #fff; }

/* image : cadre arrondi qui rogne le léger zoom au survol */
.ap-carte__media { order: -1; overflow: hidden; border-radius: 10px; }
@media (min-width: 52rem) { .ap-carte__media { order: 0; align-self: stretch; } }
.ap-carte__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	border-radius: 10px; aspect-ratio: 3 / 2;
	transition: transform 640ms cubic-bezier(.2,.6,.2,1);
}
@media (min-width: 52rem) { .ap-carte__media img { aspect-ratio: 4 / 3; } }
.ap-carte:hover .ap-carte__media img { transform: scale(1.05); }

/* alternance gauche/droite (desktop) : une carte sur deux a l'image à gauche */
@media (min-width: 52rem) {
	.ap-cartes > .ap-carte:nth-child(even) .ap-carte__row { grid-template-columns: 1.2fr 1fr; }
	.ap-cartes > .ap-carte:nth-child(even) .ap-carte__media { order: -1; }
}

/* révélation : le complément de réponse, sous la carte */
.ap-carte__reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 460ms ease; }
.ap-carte[open] .ap-carte__reveal { grid-template-rows: 1fr; }
.ap-carte__reveal-clip { overflow: hidden; }
.ap-carte__reveal-inner { margin-top: 1.7rem; padding-top: 1.6rem; border-top: 1px solid var(--ap-filet); }
.ap-carte[open] .ap-carte__reveal-inner { animation: ap-qr-open 380ms 80ms ease both; }
.ap-carte__reveal-inner p { margin: 0 0 0.9rem; color: #4A4F55; line-height: 1.62; }
.ap-carte__reveal-inner p:last-child { margin-bottom: 0; }
.ap-carte__reveal-inner strong { color: var(--ap-encre); }
/* la ligne qui clôt chaque réponse : l'angle d'Elian (étude en amont) */
.ap-carte__cle {
	margin-top: 1.1rem !important; padding: 0.9rem 1.1rem; border-left: 3px solid var(--ap-accent);
	background: rgba(190,90,30,0.06); font-family: var(--ap-display); color: var(--ap-encre) !important;
	font-size: 1rem; line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
	.ap-carte__reveal { transition: none; }
	.ap-carte[open] .ap-carte__reveal-inner { animation: none; }
	.ap-carte__fleche { transition: none; }
	.ap-carte:hover .ap-carte__media img,
	.ap-carte:hover .ap-carte__fleche { transform: none; }
}

/* entrée au scroll : les cartes glissent depuis la gauche / la droite en
   alternance (impaires <- gauche, paires -> droite). Progressive enhancement :
   l'état masqué n'existe que si JS actif (.ap-js posé par le script) ET
   mouvement autorisé. Sans JS ou en reduced-motion, les cartes sont visibles. */
#questions { overflow-x: clip; } /* évite toute barre de défilement pendant le glissement */
@media (prefers-reduced-motion: no-preference) {
	.ap-js .ap-cartes > .ap-carte {
		opacity: 0;
		transition: opacity 720ms ease, transform 780ms cubic-bezier(.2, .7, .2, 1);
	}
	.ap-js .ap-cartes > .ap-carte:nth-child(odd)  { transform: translateX(-52px); }
	.ap-js .ap-cartes > .ap-carte:nth-child(even) { transform: translateX(52px); }
	.ap-js .ap-cartes > .ap-carte.is-in { opacity: 1; transform: none; }
}

/* ---- Piliers : ce que la garantie couvre (3 colonnes) ---- */
.ap-piliers { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 52rem) { .ap-piliers { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
.ap-pilier { background: var(--ap-brume); border-top: 3px solid var(--ap-accent); padding: 1.8rem 1.5rem; }
.ap-pilier__ic { display: block; width: 2.4rem; height: 2.4rem; color: var(--ap-accent); margin-bottom: 1rem; }
.ap-pilier__ic svg { width: 100%; height: 100%; display: block; }
.ap-pilier h3 { font-family: var(--ap-display); font-weight: 500; font-size: 1.2rem; color: var(--ap-encre); margin: 0 0 0.5rem; }
.ap-pilier p { margin: 0; color: #4A4F55; line-height: 1.55; font-size: 0.98rem; }
/* Variante 4 items : grille 2×2 en desktop — une grille à 3 colonnes laisserait
   une carte orpheline sur la 2e ligne (cf. #engagements de le-cabinet).
   Spécificité doublée + placée après la règle 3-cols pour gagner à coup sûr. */
@media (min-width: 52rem) { .ap-piliers.ap-piliers--quatre { grid-template-columns: repeat(2, 1fr); } }

/* ---- Rappel méthode condensé ---- */
.ap-methode-mini { max-width: 60rem; margin: 3rem auto 0; text-align: center; }
.ap-methode-mini__etapes { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.ap-methode-mini__etapes li {
	font-family: var(--ap-mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--ap-acier);
	background: #fff; border: 1px solid var(--ap-filet); padding: 0.5rem 0.9rem; border-radius: 2px;
	display: inline-flex; align-items: center; gap: 0.5rem;
}
.ap-methode-mini__etapes b { color: var(--ap-accent); }
.ap-methode-mini__lien { display: inline-block; margin-top: 1.6rem; color: var(--ap-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.ap-methode-mini__lien:hover { border-bottom-color: var(--ap-accent); }

/* ---- CTA de fin de page (bandeau sombre) ---- */
.ap-page-cta { background: var(--ap-encre); text-align: center; }
.ap-page-cta .centrage { max-width: 46rem; }
.ap-page-cta h2 { font-family: var(--ap-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.3rem); color: #fff; margin: 0 0 1rem; line-height: 1.2; }
.ap-page-cta > .centrage > p { color: #C5CACE; font-size: 1.08rem; line-height: 1.55; margin: 0 auto 2rem; max-width: 48ch; }
/* le thème "flotte" les .bt : on l'annule ici pour rester centré, note dessous */
.ap-page-cta .bt.cta { float: none; display: inline-block; }
/* CTA « Vous préférez le téléphone ? » — numéro agrandi (contact.html) */
.ap-page-cta .bt.cta.ap-cta-tel { font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.35rem); font-weight: 600; letter-spacing: 0.03em; line-height: 1.1; padding: 0.6em 1.4em; }
.ap-page-cta__note { clear: both; font-size: 0.9rem; color: #8B9298; margin: 1.3rem 0 0; }

/* ---- Section « Avis » — widget façon Google (avis RÉELS de la fiche GBP) ---- */
.ap-avis { max-width: 56rem; margin: 0 auto; background: #fff; border: 1px solid var(--ap-brume); border-radius: 6px; box-shadow: 0 34px 66px -38px rgba(25,27,30,0.34); overflow: hidden; }
.ap-avis__tete { display: flex; align-items: center; gap: 0.9rem 1.2rem; flex-wrap: wrap; padding: 1.5rem 1.8rem; border-bottom: 1px solid var(--ap-brume); }
.ap-avis__g { flex: none; width: 2.1rem; height: 2.1rem; }
.ap-avis__g svg, .ap-avis__g-mini svg { width: 100%; height: 100%; display: block; }
.ap-avis__tete-txt { margin-right: auto; }
.ap-avis__tete-nom { font-family: var(--ap-display); font-weight: 600; font-size: 1.05rem; color: var(--ap-encre); margin: 0; line-height: 1.15; }
.ap-avis__tete-sub { font-size: 0.84rem; color: var(--ap-acier); margin: 0.12rem 0 0; }
.ap-avis__tete-note { display: flex; align-items: center; gap: 0.5rem; }
.ap-avis__score { font-family: var(--ap-display); font-weight: 700; font-size: 1.5rem; color: #E7711B; line-height: 1; }
.ap-avis__etoiles, .ap-avis__stars { display: inline-flex; gap: 0.1rem; }
.ap-avis__etoiles svg, .ap-avis__stars svg { width: 1.05rem; height: 1.05rem; fill: #FBBC04; flex: none; }
.ap-avis__compte { font-size: 0.85rem; color: var(--ap-acier); }
.ap-avis__ecrire { flex: none; font-family: var(--ap-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #1A73E8; text-decoration: none; border: 1px solid #1A73E8; border-radius: 999px; padding: 0.5rem 1rem; transition: background-color 200ms ease, color 200ms ease; }
.ap-avis__ecrire:hover { background: #1A73E8; color: #fff; }
.ap-avis__liste { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 44rem) { .ap-avis__liste { grid-template-columns: 1fr 1fr; } }
.ap-avis__item { padding: 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; }
.ap-avis__item + .ap-avis__item { border-top: 1px solid var(--ap-brume); }
@media (min-width: 44rem) { .ap-avis__item + .ap-avis__item { border-top: 0; border-left: 1px solid var(--ap-brume); } }
.ap-avis__auteur-tete { display: flex; align-items: center; gap: 0.7rem; }
.ap-avis__avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c, var(--ap-acier)); color: #fff; font-family: var(--ap-display); font-weight: 600; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; }
.ap-avis__nom { font-family: var(--ap-display); font-weight: 600; font-size: 0.98rem; color: var(--ap-encre); margin: 0; line-height: 1.15; }
.ap-avis__meta { font-size: 0.8rem; color: var(--ap-acier); margin: 0.08rem 0 0; }
.ap-avis__g-mini { margin-left: auto; flex: none; width: 1.1rem; height: 1.1rem; }
.ap-avis__note-ligne { display: flex; align-items: center; gap: 0.6rem; }
.ap-avis__date { font-size: 0.8rem; color: #70777D; }
.ap-avis__texte { font-family: var(--ap-texte); font-size: 0.98rem; line-height: 1.55; color: var(--ap-acier); margin: 0; }
.ap-avis__trad { display: block; margin-top: 0.45rem; font-size: 0.75rem; color: #70777D; font-style: italic; }
.ap-avis__pied { text-align: center; padding: 1.2rem 1.8rem 1.4rem; border-top: 1px solid var(--ap-brume); margin: 0; }

/* ancres internes des sous-pages, sous l'en-tête fixe */
#questions, #couverture, #methode-mini, #cta, #video, #projets { scroll-margin-top: 128px; }

/* ---- Bloc vidéo (présentation du cabinet, sous-page patrimoniale) ---- */
.ap-video-bloc {
	max-width: 58rem; margin: 2.6rem auto 0; border-radius: 14px; overflow: hidden;
	background: #000; box-shadow: 0 28px 64px -34px rgba(25,27,30,0.62);
}
.ap-video-bloc video { display: block; width: 100%; height: auto; }
.ap-video-note { text-align: center; font-family: var(--ap-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: #8A9096; margin: 1.1rem 0 0; }


/* ================================================================
   PAGES LÉGALES / MERCI — bandeau titre sombre + prose lisible
   ================================================================ */
.ap-legal-hero {
	background: linear-gradient(150deg, var(--ap-acier) 0%, var(--ap-encre) 72%);
	color: #EEF0F1; padding: clamp(7rem, 11vw, 9.5rem) 0 clamp(2.4rem, 5vw, 3.4rem);
}
.ap-legal-hero .ap-kicker { color: var(--ap-accent-vif); margin-bottom: 0.5rem; }
.ap-legal-hero h1 {
	font-family: var(--ap-display); font-weight: 500; letter-spacing: -0.01em;
	font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; color: #fff; margin: 0.2rem 0 0;
}
.ap-legal-hero p { color: #C5CACE; margin: 0.9rem 0 0; max-width: 60ch; }
.ap-ariane--sombre a { color: #C5CACE; }
.ap-ariane--sombre a:hover { color: #fff; }

.ap-legal { max-width: 62rem; }
.ap-legal h2 {
	font-family: var(--ap-display); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.65rem);
	color: var(--ap-encre); margin: 2.4rem 0 0.5rem;
}
.ap-legal p, .ap-legal li { color: #3F4348; line-height: 1.68; }
.ap-legal ul { padding-left: 1.2rem; margin: 0.4rem 0; }
.ap-legal li { margin: 0.3rem 0; }
.ap-legal a { color: var(--ap-accent); }
.ap-legal a:hover { color: var(--ap-accent-vif); }
.ap-legal .bt { float: none; }
.ap-legal__maj {
	font-family: var(--ap-mono); font-size: 0.8rem; color: #6B7075;
	text-transform: uppercase; letter-spacing: 0.08em;
}
.ap-legal__retour { margin-top: 2.2rem; }

/* ================================================================
   TACTILE — aucun zoom au doigt
   Sur un écran tactile, :hover reste « collé » après le tap : les tuiles et les
   images restaient agrandies (jusqu'à scale(1.25) sur #protection, qui n'avait
   AUCUNE media query et s'appliquait donc aussi en mobile). On neutralise les
   zooms de survol quand le pointeur n'est pas fin.
   - Le texte des tuiles reste lisible : il est déjà forcé en opacité 1 par le
     @media (hover: none) plus haut (l. ~306).
   - La flèche des cartes n'est PAS visée : son transform sert aussi à la
     rotation 90° de l'état [open] (l. 859), qu'il ne faut pas casser.
   Placé en fin de fichier pour passer après toutes les règles :hover.
   ================================================================ */
@media (hover: none) {
	.ap-domaine__lien:hover .ap-domaine__img,
	.ap-domaines--methode .ap-domaine__lien:hover .ap-domaine__img,
	.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien:hover,
	.ap-domaines.ap-domaines--trio .ap-domaine__lien:hover,
	.ap-carte:hover .ap-carte__media img {
		transform: none;
	}
	/* l'ombre portée « soulevée » n'a pas de sens au doigt non plus */
	.ap-domaines:not(.ap-domaines--methode) .ap-domaine__lien:hover,
	.ap-domaines.ap-domaines--trio .ap-domaine__lien:hover { box-shadow: none; }
}

/* ================================================================
   RETOUCHES MOBILE — 2026-07-24
   ================================================================ */

/* 1. Libellé « MENU » sous le burger : retiré (le pictogramme suffit). */
#btMenu::after { display: none !important; }

/* 1bis. Le burger est un <button> depuis le 2026-08-16 (il était une <div>, donc
   inatteignable au clavier — voir le commentaire de Layout.astro). Le thème l'avait
   dessiné en tant que <div> : il faut donc annuler l'habillage natif du bouton, sans
   toucher à sa géométrie, qui reste celle de `#btMenu` dans ap-theme.css.
   `appearance:none` d'abord : sur Safari iOS, `border:0` seul ne suffit pas à retirer
   le fond et le relief natifs. */
#btMenu {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: 0;
	cursor: pointer;
}

/* 2. Entrée active LISIBLE dans le menu mobile.
   Le thème met l'entrée active en `color:#fff` (prévu pour la barre sombre du
   desktop). Or le panneau off-canvas mobile a un fond BLANC : l'entrée de la
   rubrique courante s'affichait donc en blanc sur blanc — une ligne vide dans
   le menu (vu sur « Le cabinet »). Concerne TOUTES les sous-pages. */
@media (max-width: 1024px) {
	nav.nav > ul > li.active > a,
	nav.nav > ul > li.active > span > a,
	nav.nav > ul > li.active > span > span { color: var(--ap-accent) !important; }
}

/* 3. Cadrage du hero « header-2 » en mobile.
   Le sujet occupe la moitié DROITE de la photo ; le recadrage centré (50 %)
   ne laissait voir qu'un pan de mur. On décale la fenêtre de recadrage sur elle.
   Ciblé par le nom de fichier : les autres heros gardent leur cadrage. */
@media (max-width: 46rem) {
	.ap-hero__img[src*="header-2"],
	.diaporama--accueil img[src*="header-2"] { object-position: 72% 30% !important; }
}


/* ==================================================================
   V2 — RETOUR CLIENT DU 29/07/2026 (Elian)
   Plan d'exécution : ../../MODIFS-V2.md
   Les 5 règles transverses du §0 : arrondis, ouverture ligne par ligne,
   bandeau blanc lisible d'un coup, cartes à dépliage en 2 temps,
   bloc « Ma méthode ». Tout est scopé — rien ne réécrit le thème.
   ================================================================== */

:root {
	/* §0.4 — « juste légèrement, que ça garde un cadre malgré tout ».
	   Elian a explicitement refusé l'arrondi type Apple : pas de pill. */
	--ap-r:    6px;   /* blocs, encadrés, champs, boutons */
	--ap-r-l: 10px;   /* cartes et images (plus grandes surfaces) */
	--ap-orange-clair: #FBF2EB;   /* fond du volet « À retenir » */
	--ap-orange-filet: #E8CDB6;
}

/* ---------- §0.4 · Arrondir les angles ---------- */

.ap-pilier, .ap-tuile, .ap-methode-bloc, .ap-cas__item, .ap-quest,
.ap-quest__choix, .ap-encart, .ap-legal-bloc, .ap-qr,
.ap-form__champ input, .ap-form__champ textarea, .ap-form__champ select,
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
	border-radius: var(--ap-r);
}
.bt, .bt.cta, .bt.v2, a.cta, button, .ap-form__envoi { border-radius: var(--ap-r); }
.ap-carte { border-radius: var(--ap-r-l); }
.ap-carte__media, .ap-carte__media img,
.ap-domaine__lien, .ap-cas__photo, .ap-cas__photo img,
.ap-cabinet__photo img, .ap-video-bloc video, .ap-video-bloc img {
	border-radius: var(--ap-r-l);
}
/* la pilule « En savoir plus » garde sa forme ronde : c'est un bouton, pas un bloc */
.ap-carte__bt { border-radius: 999px; }

/* ---------- §0.1 · Ouverture de page : centré + ligne par ligne ----------
   Elian (visio 29/07, insisté 4×) : « qu'il soit centré », « au compte-gouttes »,
   « que les phrases apparaissent l'une après l'autre, pour qu'on les lise à leur
   apparition ». ⚠️ PAS le menu déroulant — il a corrigé Clément là-dessus.
   Le retard de chaque ligne vient de --i, posé dans le HTML : l'ordre est donc
   explicite et vérifiable, pas dépendant de la position dans le DOM.
   L'animation est en CSS pur (pas de .view-on du thème) → elle part au chargement
   même si le JS du thème ne tourne pas ; le fill-mode `both` garantit l'état final. */

.ap-hero-txt { text-align: center; margin-left: auto; margin-right: auto; }
.ap-hero--page .ap-hero-txt { text-align: center; margin-left: auto; margin-right: auto; }
.ap-hero-txt .headline-2,
.ap-hero--page .ap-hero-txt .headline-2 { margin-left: auto; margin-right: auto; }
.ap-hero-txt .ap-ariane { justify-content: center; }
.ap-hero-txt .ap-hero-cta { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }
.ap-hero-txt .ap-hero-cta .bt { float: none !important; }

/* ⚠️ 2026-08-16 — sur les petits écrans (mesuré à 320 px), « Je fais le point sur ma
   situation » faisait 334 px de large dans un conteneur de 304 : il débordait de 7 px
   de CHAQUE côté, coins arrondis coupés. Cause : `.bt` du thème impose
   `white-space:nowrap`, donc le libellé ne peut pas se replier et pousse le bouton
   au-delà de l'écran. 320 px n'est pas un cas d'école — c'est la largeur d'un iPhone SE,
   et c'est aussi ce qu'on obtient à 400 % de zoom sur un écran ordinaire (WCAG 1.4.10).
   On rend le repli possible sous 380 px plutôt que de toucher ap-theme.css. */
@media (max-width: 380px) {
	.ap-hero-txt .ap-hero-cta .bt { white-space: normal; text-align: center; line-height: 1.3; }
}

.ap-ligne { display: block; }
.headline-2 .ap-ligne { display: inline; }
@media (prefers-reduced-motion: no-preference) {
	.ap-anim-lignes .ap-ligne {
		animation: ap-ligne-in 1150ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
		animation-delay: calc(0.25s + var(--i, 0) * 0.72s);
	}
	.headline-2 .ap-ligne { display: inline-block; }
}
@keyframes ap-ligne-in {
	from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(3px); }
	to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- §0.2 · Le bandeau blanc se lit d'un seul coup ----------
   Elian : « on est obligé de descendre la souris pour finir la lecture ».
   Ce n'était pas un débordement CSS (vérifié : aucun bloc ne scrolle en
   interne) — le bloc était simplement plus haut qu'un écran, à cause des
   très grosses gouttières du thème (`big-padding-y`) et du corps de texte.
   On resserre le bandeau pour que son texte tienne dans une hauteur d'écran. */
.section-edito.big-padding-y,
.section-edito.section-padding-y-l { padding-top: 3.4rem !important; padding-bottom: 3.4rem !important; }
@media (min-width: 56rem) {
	.section-edito.big-padding-y,
	.section-edito.section-padding-y-l { padding-top: 4.2rem !important; padding-bottom: 4.2rem !important; }
}
.ap-prose { max-width: 66ch; }
.ap-prose p { font-size: 1.02rem; line-height: 1.58; margin: 0 0 0.95rem; }
.ap-lead { font-size: clamp(1.14rem, 1.85vw, 1.36rem); line-height: 1.4; margin-bottom: 1.1rem; }

/* ---------- §0.3 · Cartes : dépliage en 2 temps ----------
   « J'appuie sur un bouton, j'ai une réponse ; j'appuie sur un autre bouton,
   j'ai encore un petit truc. » → « À retenir » est un SECOND dépliage, pas un
   encadré affiché d'office. Même graphisme sur toutes les cartes du site.
   ⚠️ Gotcha thème captain : `details span{opacity:0}` masque tout <span> d'un
   <details> fermé — il faut le neutraliser ici aussi (comme pour .ap-carte). */
.ap-retenir { margin-top: 1.5rem; }
.ap-retenir span { opacity: 1 !important; }
.ap-retenir__bt {
	display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
	list-style: none; padding: 0.5rem 1.05rem; border-radius: 999px;
	border: 1px solid var(--ap-orange-filet); background: var(--ap-orange-clair);
	color: var(--ap-accent); font-family: var(--ap-display);
	font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	transition: background-color 220ms ease, color 220ms ease;
}
.ap-retenir__bt::-webkit-details-marker { display: none; }
.ap-retenir__bt::marker { content: ""; }
.ap-retenir__bt:hover { background: var(--ap-accent); color: #fff; border-color: var(--ap-accent); }
.ap-retenir__plus {
	width: 1.15rem; height: 1.15rem; display: inline-grid; place-items: center;
	transition: transform 300ms ease;
}
.ap-retenir__plus svg { width: 100%; height: 100%; display: block; }
.ap-retenir[open] .ap-retenir__plus { transform: rotate(45deg); }
.ap-retenir__clip { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms ease; }
.ap-retenir[open] .ap-retenir__clip { grid-template-rows: 1fr; }
.ap-retenir__clip > div { overflow: hidden; }
.ap-retenir__inner {
	margin-top: 0.95rem; padding: 1.15rem 1.3rem;
	background: var(--ap-orange-clair); border-left: 3px solid var(--ap-accent);
	border-radius: var(--ap-r);
}
.ap-retenir__inner p { margin: 0; color: #4A4F55; line-height: 1.58; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
	.ap-retenir__clip, .ap-retenir__plus, .ap-retenir__bt { transition: none; }
}

/* ---------- §0.6 · Le bloc « Ma méthode », en bas de chaque page ----------
   Elian : « ça va rentrer dans la tête des gens » — la répétition est VOULUE.
   Le module est donc rigoureusement identique d'une page à l'autre : seule la
   phrase du milieu change. (C'est aussi la règle anti-slop du projet : un module
   qui revient garde son texte, on n'en fait pas six paraphrases.) */
.ap-methode-bloc {
	max-width: 52rem; margin: 0 auto; text-align: center;
	background: #fff; border: 1px solid var(--ap-brume);
	padding: 2.6rem 1.8rem;
}
.ap-methode-bloc__sur {
	display: block; font-family: var(--ap-display); font-size: 0.78rem;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--ap-accent);
	margin-bottom: 0.75rem;
}
.ap-methode-bloc h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.ap-methode-bloc p { margin: 0 auto 1.7rem; max-width: 46ch; color: #4A4F55; line-height: 1.6; }
.ap-methode-bloc .bt { float: none !important; }

/* ---------- §1.3 · Les piliers : le bénéfice devant, le produit derrière ----
   « Les contrats deviennent secondaires : on vend une finalité pas un produit. »
   Le libellé de la tuile devient le bénéfice ; le produit se révèle au survol
   (et reste toujours lisible au doigt, cf. @media (hover:none) du thème). */
.ap-domaine__produit {
	display: block; margin-top: 0.35rem; font-size: 0.86rem; letter-spacing: 0.06em;
	text-transform: uppercase; color: #E8CDB6;
}

/* ---------- §1.8 · Cas concrets ----------
   ⚠️ Ce sont des EXEMPLES TYPES écrits par Elian, pas des témoignages clients :
   pas de guillemets, pas de citation, pas de portrait qui ferait passer
   « Sophie » ou « Julien » pour des personnes réelles. La mention le dit. */
.ap-cas { display: grid; gap: 1.6rem; margin: 2.6rem 0 0; padding: 0; list-style: none; }
@media (min-width: 52rem) { .ap-cas { grid-template-columns: repeat(3, 1fr); } }
.ap-cas__item {
	background: #fff; border: 1px solid var(--ap-brume); overflow: hidden;
	display: flex; flex-direction: column;
}
.ap-cas__photo { margin: 0; overflow: hidden; border-radius: 0; }
.ap-cas__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; display: block; border-radius: 0; }
.ap-cas__corps { padding: 1.5rem 1.5rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.ap-cas__nom { margin: 0 0 0.35rem; font-size: 1.16rem; }
.ap-cas__type {
	display: block; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--ap-filet); margin-bottom: 1.1rem;
}
.ap-cas__liste { margin: 0; padding: 0; list-style: none; }
.ap-cas__liste li {
	position: relative; padding-left: 1.65rem; margin-bottom: 0.7rem;
	color: #4A4F55; line-height: 1.5; font-size: 0.99rem;
}
.ap-cas__liste li::before {
	content: "✓"; position: absolute; left: 0; top: -0.05rem;
	color: var(--ap-accent); font-weight: 700;
}

/* ---------- §1.9 · La phrase signature ----------
   Elian : « je la mettrais presque partout ». Reprise À L'IDENTIQUE, sur deux
   emplacements seulement (accueil + Le Cabinet) — six paraphrases « presque
   pareilles », c'est exactement l'effet IA que le projet proscrit. */
/* La citation — en Italianno depuis le 2026-08-12 (demande d'Elian, §0.1).
   ⚠️ LA TAILLE N'EST PAS UN DÉTAIL. L'œil d'Italianno est minuscule : au comparatif, il
   fallait ~52 px pour égaler visuellement 32,8 px d'IBM Plex Sans, soit un facteur 1,585.
   L'ancien clamp(1.32rem, 2.9vw, 2.05rem) est donc multiplié par ce facteur — le reprendre
   tel quel rendrait la citation deux fois plus petite qu'avant, sans que ça se voie dans
   le diff.
   L'interligne, lui, DESCEND (1.34 → 1.12) : à taille 1,6× supérieure, le blanc entre les
   lignes serait énorme, et une anglaise a des jambages qui comblent déjà l'espace. */
.ap-signature {
	max-width: 46rem; margin: 0 auto; text-align: center;
	font-family: var(--ap-citation); font-weight: 400;
	font-size: clamp(2.09rem, 4.6vw, 3.25rem); line-height: 1.12;
	color: var(--ap-encre);
}
/* Deux traits, au-dessus ET en dessous, « un peu plus longs » (Elian) : 42 → 86 px. */
.ap-signature::before,
.ap-signature::after {
	content: ""; display: block; width: 86px; height: 2px;
	background: var(--ap-accent); margin: 0 auto;
}
.ap-signature::before { margin-bottom: 1.7rem; }
.ap-signature::after  { margin-top: 1.7rem; }
.ap-section--sombre .ap-signature { color: #fff; }
/* Variante « collée aux trois cartes » (protection sociale, 2026-08-12) : elle appartient
   au bloc du dessus, elle ne fait pas section à elle seule — d'où la marge haute réduite
   et l'absence de tout fond. Elian a refusé l'encadré orange clair proposé en visio. */
.ap-signature--sous-cartes { margin-top: 3rem; }

/* ---------- §11.1 · Le questionnaire « Je fais le point sur ma situation » ---
   6 questions, une à la fois. Les réponses ne transitent PAS par l'URL
   (données de situation personnelle et financière) : elles vivent en
   sessionStorage puis partent en champs cachés avec la demande — Elian doit
   les recevoir, sinon la fonctionnalité ne sert à rien. */
.ap-quest {
	max-width: 46rem; margin: 0 auto; background: #fff;
	border: 1px solid var(--ap-brume); padding: 2rem 1.6rem 2.2rem;
}
@media (min-width: 46rem) { .ap-quest { padding: 2.8rem 2.6rem 3rem; } }
/* Choix multiple (2026-08-12, L4-01) : l'aide et le bouton de passage. La case à cocher
   reprend exactement l'habillage du bouton radio — c'est le même composant pour l'œil,
   seul le comportement change. Elian sur ce module : « ça vraiment j'adore ». */
.ap-quest__aide {
	margin: -0.4rem 0 1.1rem; font-family: var(--ap-mono); font-size: 0.72rem;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-accent);
}
.ap-quest__suivant { float: none; margin-top: 1.6rem; }

.ap-quest__barre { height: 3px; background: var(--ap-brume); margin-bottom: 1.9rem; overflow: hidden; border-radius: 999px; }
.ap-quest__jauge { display: block; height: 100%; width: 0; background: var(--ap-accent); transition: width 380ms ease; }
.ap-quest__compte {
	display: block; font-family: var(--ap-mono); font-size: 0.82rem;
	letter-spacing: 0.08em; color: var(--ap-filet); margin-bottom: 0.9rem;
}
.ap-quest__q { margin: 0 0 1.5rem; font-size: clamp(1.25rem, 2.5vw, 1.62rem); line-height: 1.3; }
.ap-quest__choix { display: grid; gap: 0.7rem; margin: 0; padding: 0; border: 0; }
.ap-quest__choix label {
	display: flex; align-items: center; gap: 0.85rem; cursor: pointer;
	padding: 0.95rem 1.15rem; border: 1px solid var(--ap-brume);
	border-radius: var(--ap-r); background: #fff;
	transition: border-color 180ms ease, background-color 180ms ease;
	line-height: 1.4;
}
.ap-quest__choix label:hover { border-color: var(--ap-accent); background: var(--ap-orange-clair); }
.ap-quest__choix input { accent-color: var(--ap-accent); width: 1.05rem; height: 1.05rem; flex: none; }
.ap-quest__choix input:focus-visible + span { text-decoration: underline; }
.ap-quest__choix label:has(input:checked) { border-color: var(--ap-accent); background: var(--ap-orange-clair); }
.ap-quest__pied { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.9rem; flex-wrap: wrap; }
.ap-quest__retour {
	background: none; border: 0; padding: 0.4rem 0; color: var(--ap-acier);
	cursor: pointer; font-size: 0.95rem; text-decoration: underline;
}
.ap-quest__retour[hidden] { display: none; }
.ap-quest__etape[hidden] { display: none; }

/* ⚠️ 2026-08-16 — le bouton de fin était cliquable DÈS LA QUESTION 1.
   `[hidden] { display:none }` de la feuille de base pèse (0,1,0) ; `.bt.cta
   { display:inline-flex }` du thème pèse (0,2,0) et gagnait. Le bouton portait donc
   bien son attribut `hidden` — et s'affichait quand même, 296×35 px, opacité 1.
   Les deux lignes ci-dessus ne rattrapaient pas le cas : `.ap-quest__retour` et
   `.ap-quest__etape` ne portent pas `.bt`, eux, donc ils se masquaient tout seuls.
   Conséquence mesurée au clic réel depuis la question 1 : atterrissage sur /contact
   avec profil="", besoin="" et aucun champ caché `bilan_` — le visiteur sort du
   parcours et Elian reçoit une demande sans le moindre contexte, c'est-à-dire
   exactement ce que D-018 existe pour empêcher.
   `!important` est ici le bon outil et non un contournement : `hidden` veut dire
   caché, sans exception — aucune règle n'a de raison légitime de le contredire.
   Portée limitée à `.bt` pour ne rien changer aux mécaniques du thème. */
.bt[hidden] { display: none !important; }

.ap-quest .bt { float: none !important; }
.ap-quest__rgpd { margin: 1.6rem 0 0; font-size: 0.86rem; color: var(--ap-acier); line-height: 1.5; }
.ap-quest__rgpd a { color: var(--ap-accent); }
.ap-quest__fin p { color: #4A4F55; line-height: 1.6; }

/* Rappel des réponses, affiché sur la page contact quand on vient du bilan */
.ap-rappel {
	background: var(--ap-orange-clair); border-left: 3px solid var(--ap-accent);
	border-radius: var(--ap-r); padding: 1.3rem 1.5rem; margin: 0 0 2rem;
}
.ap-rappel p { margin: 0 0 0.9rem; color: #4A4F55; line-height: 1.58; }
.ap-rappel dl { margin: 0; display: grid; gap: 0.4rem; }
.ap-rappel dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-filet); }
.ap-rappel dd { margin: 0 0 0.55rem; color: var(--ap-encre); font-weight: 500; }
.ap-rappel[hidden] { display: none; }

/* ---------- Bloquants : ce qu'Elian n'a pas encore fourni ----------
   Même convention que la v1 (.ap-manque) : visible, jamais inventé. */
.ap-manque {
	background: rgba(190, 90, 30, 0.1); border: 1px dashed var(--ap-accent);
	color: var(--ap-accent); padding: 0.15rem 0.5rem; border-radius: var(--ap-r);
	display: inline-block; font-size: 0.92em;
}

/* ---------- Survol neutralisé au doigt (doit rester en FIN de fichier) ---- */
@media (hover: none) {
	.ap-quest__choix label:hover { border-color: var(--ap-brume); background: #fff; }
	.ap-quest__choix label:has(input:checked) { border-color: var(--ap-accent); background: var(--ap-orange-clair); }
	.ap-retenir__bt:hover { background: var(--ap-orange-clair); color: var(--ap-accent); border-color: var(--ap-orange-filet); }
}

/* ---------- V2 · les composants ajoutés par le retour du 29/07 ---------- */

/* Second bouton du hero (« Commencez mon diagnostic ») — même cible, moins d'emphase */
.ap-hero-cta__2 {
	background: transparent !important; color: #fff !important;
	border: 1px solid rgba(255,255,255,0.55) !important;
}
.ap-hero-cta__2:hover { background: rgba(255,255,255,0.14) !important; border-color: #fff !important; }

/* §1.4 / §10.1 — la photo d'Elian, agrandie (le fichier définitif reste à réclamer) */
.ap-portrait--grand .ap-portrait__media { width: 46%; }
@media (min-width: 46rem) { .ap-portrait--grand .ap-portrait__media { width: 40%; } }

/* ---------- Portrait VERTICAL — page cabinet, 2026-08-12 (L3-05 · L3-06) ----------
   ⚠️ Le montage d'origine était un MÉDAILLON rond posé en `position:absolute` sur la
   photo du village : c'est elle qui donnait sa hauteur au bloc. Elian a fait supprimer
   cette photo (« ce n'est pas Carqueiranne ») — le médaillon se serait donc retrouvé
   flottant sur du vide. D'où cette variante : le portrait redevient l'image principale,
   en pied, à côté du texte.
   La mise en page est déjà celle de la photo DÉFINITIVE (Elian doit envoyer un plain-pied
   plus étroit, bloquant B3) : le jour où elle arrive, il n'y aura qu'à remplacer le
   fichier — `object-position: top` garde le visage cadré quel que soit son format. */
.ap-portrait--vertical .ap-portrait__media {
	position: static; width: 100%; max-width: none; aspect-ratio: 3 / 4; margin: 0;
}
.ap-portrait--vertical .ap-portrait__media::before,
.ap-portrait--vertical .ap-portrait__media::after { content: none; }
.ap-portrait--vertical .ap-portrait__img {
	border-radius: 3px; object-position: 50% 22%;
	max-height: 34rem;
	box-shadow: 0 26px 50px -24px rgba(25,27,30,0.55);
}
/* La plaque n'a plus de médaillon à contourner : elle reprend toute la largeur. */
.ap-portrait--vertical .ap-portrait__plaque { padding-left: 0; }

/* §10.1 — le bandeau orange de la page Le Cabinet */
.ap-bandeau-orange { background: var(--ap-orange-clair); }
.ap-bandeau-orange .ap-signature::before { background: var(--ap-accent); }

/* ---------- Bandeau « Ma conviction » — page cabinet, 2026-08-12 (L3-07) ----------
   Il était BEIGE. Elian : « la phrase est excellente », c'est le traitement visuel qu'il
   voulait changer — « fond gris très clair, comme le reste du site ; fine ligne orange
   supérieure ; éventuellement une petite mention en orange : Ma conviction ».
   ⚠️ Le transcript proposait « gris foncé » : c'est l'ÉCRIT qui fait foi sur ce point. */
.ap-bandeau-conviction {
	background: var(--ap-fond);
	border-top: 2px solid var(--ap-accent);
}
.ap-bandeau-conviction__mention {
	margin: 0 0 1.5rem; text-align: center;
	font-family: var(--ap-mono); font-size: 0.74rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ap-accent);
}

/* §12 — footer : la devise, la zone d'intervention, le 2ᵉ intertitre d'une colonne */
.ap-footer__devise {
	margin: 0.9rem 0 0; font-family: var(--ap-display); font-weight: 600;
	color: #E4E7E9; font-size: 1.02rem;
}
.ap-footer__zone { margin: 0.9rem 0 0; color: #C5CACE; font-size: 0.92rem; line-height: 1.5; }
.ap-footer__h3-2 { margin-top: 1.6rem; }

/* §11.2 — les modes de rendez-vous, juste avant le formulaire (« ça rassure énormément ») */
.ap-contact__modes {
	margin: 1.1rem 0 0; padding: 0.7rem 1rem; border-left: 3px solid var(--ap-accent);
	background: rgba(190,90,30,0.08); border-radius: var(--ap-r);
	font-size: 0.98rem; line-height: 1.5;
}
/* Le bloc vit dans DEUX contextes opposés, et n'imposait aucune couleur : il héritait donc
   du gris ardoise #4A4F55 dans les deux. Mesuré sur le site en ligne le 2026-08-15 :
     · page contact — il est dans .ap-contact__form (fond clair #EEF0F1) → contraste 6,56 ✅
     · ACCUEIL      — il est dans .ap-contact__intro, à même la section sombre #191B1E,
                      juste avant le pied de page → contraste 1,94 ❌ (WCAG AA exige 4,5)
   C'est le « on voit très mal cette petite boîte » d'Elian en visio 3. On ne force pas le
   blanc partout — sur fond clair il deviendrait illisible à son tour : on éclaircit
   uniquement le contexte sombre, et on remonte le fond du bloc pour qu'il reste lisible
   comme encart. Contraste obtenu : 13,1. */
.ap-section--sombre .ap-contact__intro .ap-contact__modes {
	color: #F4F1EC;
	background: rgba(255,255,255,0.07);
}

/* §5 — la mention sous les cartes emprunteur */
.ap-cartes__note {
	max-width: 68rem; margin: 1.8rem auto 0; text-align: center;
	color: var(--ap-acier); font-size: 0.98rem;
}

/* Correctifs constatés AU RENDU (2026-07-31) :
   1. Le 2ᵉ bouton du hero restait orange : la règle du thème `.bt.v2` (deux classes,
      !important) l'emportait sur `.ap-hero-cta__2` (une seule). On double la classe.
   2. La 3ᵉ photo du hero est désormais claire (famille au bord de l'eau, demandée par
      Elian) : le titre blanc s'y noyait. Le carrousel de l'accueil n'avait pas de voile
      — les sous-pages, si (`.ap-hero__voile`). On en pose un, en dégradé. */
.bt.v2.ap-hero-cta__2, a.bt.v2.ap-hero-cta__2 {
	background: rgba(255,255,255,0.10) !important; color: #fff !important;
	border: 1px solid rgba(255,255,255,0.6) !important;
}
.bt.v2.ap-hero-cta__2:hover { background: rgba(255,255,255,0.24) !important; border-color: #fff !important; }

.diaporama--accueil::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(180deg, rgba(15,16,18,0.62) 0%, rgba(15,16,18,0.40) 42%, rgba(15,16,18,0.66) 100%);
}
.accueil-selector .ap-hero-txt { text-shadow: 0 2px 26px rgba(0,0,0,0.45); }

/* Débordement horizontal de 6 px en 375 px (accueil + contact), introduit par la V2 :
   les nouveaux libellés de statut (« Travailleur indépendant (TNS) », « Dirigeant
   d'entreprise ») allongent le <select>, dont la largeur minimale intrinsèque est
   celle de son option la plus longue. En grille, `min-width:auto` laisse l'élément
   pousser sa piste — donc le document. Diagnostic : v1 = 375 px, V2 = 381 px, piste
   passée de 356,25 à 371,69 px. On borne les éléments de grille et le select.
   (Le mailto est traité au passage : même famille de piège.) */
.ap-contact > *, .ap-contact__intro, .ap-contact__form, .ap-champ { min-width: 0; }
.ap-form select, .ap-form input, .ap-form textarea { max-width: 100%; min-width: 0; }
.ap-coordonnees, .ap-coordonnees li, .ap-coordonnees a { min-width: 0; }
.ap-coordonnees a[href^="mailto"], .ap-footer__col a[href^="mailto"] { overflow-wrap: anywhere; }


/* ==================================================================
   RETOUR DE CLÉMENT — 2026-07-31 (après relecture du build V2)
   ================================================================== */

/* ---------- Le hero prend tout l'écran, sur TOUTES les pages ----------
   Clément : « je veux que l'image du header prenne toute la page quand on recharge ;
   ensuite, quand tu scrolles, tu vois le bandeau blanc en dessous. Fais comme la page
   d'accueil, mais sur toutes les autres pages. »
   Ça remplace la tentative précédente (resserrer le bandeau blanc pour qu'il tienne
   dans un écran) : elle ne pouvait pas marcher — le bandeau vient APRÈS le hero, il
   n'est jamais entièrement visible au chargement, quelle que soit sa hauteur. */
.ap-hero--page { min-height: 100svh; display: flex; }
.ap-hero--page .accueil-selector {
	min-height: 100svh !important; width: 100%;
	display: flex !important; flex-direction: column; justify-content: center;
}
/* Le fil d'Ariane touchait la barre de menu (8 px de chevauchement, mesuré) :
   on dégage la hauteur réelle de l'en-tête, et on compense en bas pour que le bloc
   reste optiquement centré dans l'écran. */
.ap-hero--page .ap-hero-txt { padding: 9.5rem 0 5.5rem; }
@media (min-width: 46rem) { .ap-hero--page .ap-hero-txt { padding: 11rem 0 6.5rem; } }
.ap-hero--page .ap-hero__img { height: 100%; }
/* la flèche « descendre », reprise de l'accueil, invite au scroll */
.ap-hero__scroll {
	position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
	z-index: 3; color: #fff; opacity: 0.85; animation: ap-scroll-pulse 2.4s ease-in-out infinite;
}
.ap-hero__scroll svg { width: 1.6rem; height: 1.6rem; display: block; }
@keyframes ap-scroll-pulse { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }
@media (prefers-reduced-motion: reduce) { .ap-hero__scroll { animation: none; } }

/* Le bandeau blanc retrouve des gouttières normales : il n'a plus à tenir dans un
   écran, il se découvre au scroll. */
.section-edito.big-padding-y,
.section-edito.section-padding-y-l { padding-top: 4.6rem !important; padding-bottom: 4.6rem !important; }
@media (min-width: 56rem) {
	.section-edito.big-padding-y,
	.section-edito.section-padding-y-l { padding-top: 6rem !important; padding-bottom: 6rem !important; }
}

/* ---------- §0.4 (reprise) · TOUS les angles, cette fois ----------
   La 1re passe n'avait arrondi que mes propres composants : je m'étais fié à la liste
   des classes que j'avais écrites, pas à ce qui restait carré À L'ÉCRAN. Résultat, tout
   ce qui vient du thème est resté vif — à commencer par le bouton téléphone de l'en-tête,
   que Clément a repéré tout de suite (`#tel` : sélecteur d'ID, il battait `.bt`).
   Liste établie par un audit du rendu : on énumère les éléments visibles qui ont un fond,
   une bordure ou une image, et dont le rayon vaut 0. */

/* Boutons — l'ID du thème l'emportait sur ma classe */
#tel, #tel.bt, a#tel.bt, .bt, a.bt, .bt.cta, .bt.v2, a.cta,
.menufx .bt, .menufx li.bt { border-radius: var(--ap-r) !important; }

/* Les deux ronds du thème : ils sont ronds, autant que ça se voie */
.go.backToTop, .fleche-intro, .semi.pulse .fleche-intro { border-radius: 50% !important; }

/* Les panneaux blancs des sous-menus déroulants */
nav.nav > ul > li ul { border-radius: var(--ap-r); overflow: hidden; }

/* Blocs et encadrés hérités du thème ou de la v1 */
.ap-qr, .ap-stat, .ap-stats__carte, .ap-stats__voile, .ap-contact__form,
.ap-antemys, .ap-antemys__corps, .ap-antemys__media, .ap-antemys__media img,
.ap-cle-inline, .ap-methode-mini, .ap-groupe, .ap-video-bloc,
.ap-portrait__lieu, .ap-portrait__lieu img, .ap-legal-bloc, .ap-qr__r {
	border-radius: var(--ap-r);
}
.ap-stats__carte, .ap-antemys, .ap-video-bloc, .ap-portrait__lieu { overflow: hidden; }
code, kbd, .ap-champ input, .ap-champ select, .ap-champ textarea { border-radius: var(--ap-r); }

/* Les tuiles clippent déjà leur image : on s'assure que le rognage suit l'arrondi */
.ap-domaine__lien, .ap-cas__item, .ap-cas__photo { overflow: hidden; }

/* Restent volontairement à angles vifs : les bandes pleine largeur (en-tête, sections,
   pied de page) et les images de fond des heros — les arrondir ferait apparaître les
   coins du fond derrière. */
/* Derniers éléments relevés à l'audit : le cadre de la FAQ, et les pastilles réseaux
   du pied de page (bordure 1 px, 40×40 — des ronds, comme partout ailleurs). */
.ap-faq { border-radius: var(--ap-r); }
.ap-footer__social a { border-radius: 50%; }

/* L'accueil aussi : sur mobile son carrousel s'arrêtait à 633 px alors que les
   sous-pages font désormais 100 svh. Même règle partout — c'est le sens de la
   demande (« l'image du header prend toute la page quand on recharge »). */
.diaporama--accueil, .diaporama--accueil .slick-list, .diaporama--accueil .slick-track,
.diaporama--accueil .img--back { min-height: 100svh; }
.accueil-selector { min-height: 100svh; }