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

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


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

.ap-stats__grille {
	position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr;
}
@media (min-width: 60rem) { .ap-stats__grille { grid-template-columns: repeat(3, 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: 60rem) {
	.ap-stat { border-top: 0; border-left: 1px solid rgba(255,255,255,0.15); }
	.ap-stat:first-child { border-left: 0; }
}
.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; }
@media (min-width: 46rem) {
	.ap-logo--generali  { height: 40px; }
	.ap-logo--april     { height: 60px; }
	.ap-logo--swisslife { height: 74px; }
	.ap-logo--malakoff  { height: 66px; }
}
@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)); }
.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; }

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

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

.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. */
.ap-signature {
	max-width: 46rem; margin: 0 auto; text-align: center;
	font-family: var(--ap-display); font-weight: 500;
	font-size: clamp(1.32rem, 2.9vw, 2.05rem); line-height: 1.34;
	color: var(--ap-encre);
}
.ap-signature::before {
	content: ""; display: block; width: 42px; height: 2px;
	background: var(--ap-accent); margin: 0 auto 1.7rem;
}
.ap-section--sombre .ap-signature { color: #fff; }

/* ---------- §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; } }
.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; }
.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%; } }

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

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

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