/**
 * Page de prise de rendez-vous du Centre ISTIMA.
 *
 * Système : mêmes jetons que le tunnel de réservation (plugin istima-rdv), pour
 * que la page et le formulaire qu'elle héberge ne fassent qu'un seul objet.
 * Vert de marque #89C8AB décoratif, #1B6E4D dès qu'il porte du texte ou reçoit
 * un clic (contraste 6.1:1) ; orange du site réservé aux filets et aux pastilles,
 * jamais au texte (1.9:1 sur blanc) ; bleu distinct pour la visioconférence.
 * Titres El Messiri, texte Open Sans, comme le kit Elementor du site.
 *
 * Tout est préfixé « ip- » et enfermé dans « .istima-page » : le thème et
 * Elementor ne peuvent rien nous prendre, nous ne leur prenons rien.
 */

.istima-page {
	/* --- Marque --- */
	--p-brand: #89c8ab;
	--p-brand-700: #1b6e4d;
	--p-brand-800: #145439;
	--p-brand-900: #0e3d29;
	--p-brand-100: #dcefe5;
	--p-brand-50: #f0f8f4;

	/* --- Visioconférence --- */
	--p-visio: #2a6f97;
	--p-visio-700: #1f5876;
	--p-visio-50: #eaf2f8;

	/* --- Accent du site (décoratif) --- */
	--p-accent: #f7ab1e;
	--p-accent-ink: #8a5a00;
	--p-accent-50: #fdf4e3;

	/* --- Surfaces et texte --- */
	--p-bg: #ffffff;
	--p-surface: #f7fbf9;
	--p-ink: #12211c;
	--p-ink-2: #3c514a;
	--p-muted: #5a736b;
	--p-line: #dde8e3;
	--p-line-2: #c4d6ce;

	/* --- Formes et mouvement --- */
	--p-r-sm: 10px;
	--p-r-md: 14px;
	--p-r-lg: 20px;
	--p-shadow: 0 1px 2px rgba(18, 33, 28, .05), 0 12px 28px -22px rgba(18, 33, 28, .45);
	--p-shadow-lift: 0 2px 6px rgba(18, 33, 28, .07), 0 22px 40px -24px rgba(18, 33, 28, .5);
	--p-ease: cubic-bezier(.2, .8, .3, 1);
	--p-fast: 180ms;

	--p-font-title: "El Messiri", "Segoe UI", Georgia, serif;
	--p-font-body: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	color: var(--p-ink);
	background: var(--p-bg);
	font-family: var(--p-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	/*
	 * Le contenu de la page peut être posé dans un conteneur étroit (gabarit par
	 * défaut du thème) comme sur toute la largeur : les sections gèrent elles-mêmes
	 * leur fond, et « .ip-wrap » borne la lecture à une longueur de ligne confortable.
	 */
	overflow-x: clip;
}

.istima-page *,
.istima-page *::before,
.istima-page *::after {
	box-sizing: border-box;
}

/*
 * Le thème pose des marges sur les titres et les paragraphes : on repart d'une
 * base connue. « :where() » ne pèse rien dans le calcul de spécificité — sans
 * lui, cette remise à zéro (0-1-1) l'emporterait sur chacune des classes qui
 * redonnent ensuite une marge (0-1-0), et toute la page serait tassée.
 */
.istima-page :where(h1, h2, h3, h4, p, ul, ol, figure) {
	margin: 0;
	padding: 0;
}

.istima-page :where(ul, ol) {
	list-style: none;
}

.istima-page :where(h1, h2, h3) {
	font-family: var(--p-font-title);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--p-ink);
}

.istima-page a {
	color: var(--p-brand-700);
	text-underline-offset: 3px;
}

.istima-page a:hover {
	color: var(--p-brand-800);
}

/* Une seule règle de focus, visible sur clair comme sur foncé. */
.istima-page a:focus-visible,
.istima-page button:focus-visible,
.istima-page summary:focus-visible {
	outline: 3px solid var(--p-brand-700);
	outline-offset: 3px;
	border-radius: var(--p-r-sm);
}

.istima-page .ip-on-dark a:focus-visible {
	outline-color: #ffffff;
}

/* ===================================================================
   Ossature
   =================================================================== */

.ip-wrap {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.ip-section {
	padding: 88px 0;
}

.ip-section--tight {
	padding: 64px 0;
}

.ip-section--surface {
	background: var(--p-surface);
	border-top: 1px solid var(--p-line);
	border-bottom: 1px solid var(--p-line);
}

.ip-head {
	max-width: 720px;
	margin: 0 0 40px;
}

.ip-head--center {
	margin-inline: auto;
	text-align: center;
}

.ip-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 6px 14px 6px 10px;
	background: var(--p-brand-50);
	border: 1px solid var(--p-brand-100);
	border-radius: 999px;
	color: var(--p-brand-800);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ip-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--p-accent);
}

.ip-h2 {
	font-size: clamp(26px, 3.2vw, 36px);
}

.ip-lead {
	margin-top: 14px;
	color: var(--p-ink-2);
	font-size: 17px;
	max-width: 62ch;
}

.ip-head--center .ip-lead {
	margin-inline: auto;
}

/* ===================================================================
   Boutons
   =================================================================== */

.istima-page .ip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 26px;
	border: 1.5px solid transparent;
	border-radius: var(--p-r-md);
	font-family: var(--p-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--p-fast) var(--p-ease),
		border-color var(--p-fast) var(--p-ease),
		color var(--p-fast) var(--p-ease),
		transform var(--p-fast) var(--p-ease);
}

.istima-page .ip-btn--primary {
	background: var(--p-brand-700);
	border-color: var(--p-brand-700);
	color: #ffffff;
}

.istima-page .ip-btn--primary:hover {
	background: var(--p-brand-800);
	border-color: var(--p-brand-800);
	color: #ffffff;
	transform: translateY(-1px);
}

.istima-page .ip-btn--ghost {
	background: var(--p-bg);
	border-color: var(--p-line-2);
	color: var(--p-brand-800);
}

.istima-page .ip-btn--ghost:hover {
	background: var(--p-brand-50);
	border-color: var(--p-brand-700);
	color: var(--p-brand-800);
}

.istima-page .ip-btn--light {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--p-brand-900);
}

.istima-page .ip-btn--light:hover {
	background: var(--p-brand-50);
	border-color: var(--p-brand-50);
	color: var(--p-brand-900);
}

.istima-page .ip-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #ffffff;
}

.istima-page .ip-btn--outline-light:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #ffffff;
	color: #ffffff;
}

.istima-page .ip-btn .ip-i {
	flex: none;
}

.ip-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

/* Icônes : même famille, même graisse de trait que le formulaire. */
.ip-i {
	display: inline-block;
	vertical-align: middle;
}

/* ===================================================================
   En-tête de page
   =================================================================== */

.ip-hero {
	position: relative;
	padding: 84px 0 76px;
	background:
		radial-gradient(1100px 520px at 12% -10%, var(--p-brand-100) 0%, rgba(220, 239, 229, 0) 62%),
		radial-gradient(760px 420px at 96% 4%, var(--p-accent-50) 0%, rgba(253, 244, 227, 0) 60%),
		linear-gradient(180deg, var(--p-brand-50) 0%, var(--p-bg) 78%);
	border-bottom: 1px solid var(--p-line);
	overflow: hidden;
}

.ip-hero__grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 56px;
	align-items: center;
}

.ip-hero h1 {
	font-size: clamp(32px, 4.6vw, 50px);
	line-height: 1.12;
}

.ip-hero h1 em {
	font-style: normal;
	color: var(--p-brand-700);
}

.ip-hero__lead {
	margin-top: 18px;
	max-width: 56ch;
	color: var(--p-ink-2);
	font-size: 18px;
}

.ip-hero__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	color: var(--p-muted);
	font-size: 14.5px;
}

.ip-hero__note .ip-i {
	color: var(--p-brand-700);
}

/* Carte « ce que vous obtenez » : la promesse, pas la décoration. */
.ip-promise {
	position: relative;
	padding: 30px 30px 26px;
	background: var(--p-bg);
	border: 1px solid var(--p-line);
	border-radius: var(--p-r-lg);
	box-shadow: var(--p-shadow-lift);
}

.ip-promise::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	border-radius: var(--p-r-lg) var(--p-r-lg) 0 0;
	background: linear-gradient(90deg, var(--p-brand) 0%, var(--p-brand-700) 55%, var(--p-visio) 100%);
}

.ip-promise__title {
	font-size: 19px;
	margin-bottom: 18px;
}

.ip-promise ul {
	display: grid;
	gap: 14px;
}

.ip-promise li {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 15.5px;
	color: var(--p-ink-2);
}

.ip-promise li strong {
	display: block;
	color: var(--p-ink);
	font-weight: 700;
}

.ip-promise li .ip-i {
	margin-top: 3px;
	color: var(--p-brand-700);
}

/* ===================================================================
   Bandeau de repères
   =================================================================== */

.ip-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 56px;
	background: var(--p-line);
	border: 1px solid var(--p-line);
	border-radius: var(--p-r-lg);
	overflow: hidden;
}

.ip-fact {
	padding: 22px 24px;
	background: var(--p-bg);
	text-align: center;
}

.ip-fact__num {
	font-family: var(--p-font-title);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--p-brand-700);
}

.ip-fact__label {
	margin-top: 4px;
	color: var(--p-muted);
	font-size: 14px;
}

/* ===================================================================
   Les deux formules
   =================================================================== */

.ip-formulas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ip-formula {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 30px;
	background: var(--p-bg);
	border: 1.5px solid var(--p-line);
	border-radius: var(--p-r-lg);
	box-shadow: var(--p-shadow);
}

.ip-formula__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: var(--p-r-md);
	background: var(--p-brand-50);
	color: var(--p-brand-700);
}

.ip-formula--visio .ip-formula__icon {
	background: var(--p-visio-50);
	color: var(--p-visio-700);
}

.ip-formula h3 {
	font-size: 23px;
}

.ip-formula__text {
	margin-top: 10px;
	color: var(--p-ink-2);
	font-size: 15.5px;
}

.ip-formula ul {
	display: grid;
	gap: 11px;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--p-line);
}

.ip-formula li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
	align-items: start;
	font-size: 15px;
	color: var(--p-ink-2);
}

.ip-formula li .ip-i {
	margin-top: 4px;
	color: var(--p-brand-700);
}

.ip-formula--visio li .ip-i {
	color: var(--p-visio-700);
}

.ip-formula__price {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--p-line);
	color: var(--p-muted);
	font-size: 14.5px;
}

.ip-formula__price strong {
	display: block;
	color: var(--p-ink);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ===================================================================
   Déroulé en quatre temps
   =================================================================== */

.ip-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	counter-reset: ip-step;
}

.ip-step {
	position: relative;
	padding: 26px 22px;
	background: var(--p-bg);
	border: 1px solid var(--p-line);
	border-radius: var(--p-r-lg);
}

/* Le filet qui relie les étapes n'existe qu'en rangée, jamais empilé. */
.ip-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 46px;
	right: -22px;
	width: 22px;
	height: 1.5px;
	background: var(--p-line-2);
}

.ip-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--p-brand-700);
	color: #ffffff;
	font-family: var(--p-font-title);
	font-size: 18px;
	font-weight: 700;
}

.ip-step h3 {
	font-size: 18px;
}

.ip-step p {
	margin-top: 8px;
	color: var(--p-ink-2);
	font-size: 15px;
}

/* ===================================================================
   Tunnel de réservation
   =================================================================== */

.ip-booking {
	scroll-margin-top: 110px;
}

.ip-booking__frame {
	margin-top: 34px;
	background: var(--p-bg);
	border: 1px solid var(--p-line);
	border-radius: var(--p-r-lg);
	box-shadow: var(--p-shadow-lift);
	overflow: hidden;
}

/* Le tunnel apporte ses propres marges : on ne fait que l'encadrer. */
.ip-booking__frame .istima-rdv {
	max-width: 900px;
	padding-top: 34px;
}

.ip-booking__reassure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin-top: 22px;
	color: var(--p-muted);
	font-size: 14.5px;
}

.ip-booking__reassure span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ip-booking__reassure .ip-i {
	color: var(--p-brand-700);
}

/* ===================================================================
   Spécialités
   =================================================================== */

.ip-specialities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
}

.ip-speciality {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
	background: var(--p-bg);
	border: 1px solid var(--p-line);
	border-left: 3px solid var(--p-brand);
	border-radius: var(--p-r-md);
}

.ip-speciality h3 {
	font-size: 17.5px;
}

.ip-speciality__meta {
	color: var(--p-muted);
	font-size: 14px;
}

.ip-speciality__places {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.ip-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--p-brand-50);
	border: 1px solid var(--p-brand-100);
	border-radius: 999px;
	color: var(--p-brand-800);
	font-size: 12.5px;
	font-weight: 600;
}

.ip-tag--visio {
	background: var(--p-visio-50);
	border-color: #d3e5f0;
	color: var(--p-visio-700);
}

/* ===================================================================
   Cabinets
   =================================================================== */

.ip-cabinets {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ip-cabinet {
	display: flex;
	flex-direction: column;
	padding: 30px;
	background: var(--p-bg);
	border: 1px solid var(--p-line);
	border-radius: var(--p-r-lg);
	box-shadow: var(--p-shadow);
}

.ip-cabinet h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 22px;
}

.ip-cabinet h3 .ip-i {
	color: var(--p-brand-700);
}

.ip-cabinet__address {
	margin-top: 14px;
	color: var(--p-ink-2);
	font-size: 15.5px;
}

.ip-cabinet__lines {
	display: grid;
	gap: 10px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--p-line);
}

.ip-cabinet__lines a,
.ip-cabinet__lines span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 30px;
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
}

.ip-cabinet__lines .ip-i {
	color: var(--p-brand-700);
	flex: none;
}

.ip-cabinet__lines .ip-label {
	color: var(--p-muted);
	font-weight: 400;
	font-size: 14px;
}

.ip-cabinet .ip-btn {
	margin-top: 22px;
	align-self: flex-start;
}

/* ===================================================================
   Questions fréquentes
   =================================================================== */

.ip-faq {
	max-width: 820px;
	margin: 0 auto;
	border-top: 1px solid var(--p-line);
}

.ip-faq details {
	border-bottom: 1px solid var(--p-line);
}

.ip-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 4px;
	min-height: 44px;
	cursor: pointer;
	font-family: var(--p-font-title);
	font-size: 18px;
	font-weight: 600;
	color: var(--p-ink);
	list-style: none;
	transition: color var(--p-fast) var(--p-ease);
}

.ip-faq summary::-webkit-details-marker {
	display: none;
}

.ip-faq summary:hover {
	color: var(--p-brand-800);
}

.ip-faq summary .ip-i {
	flex: none;
	color: var(--p-brand-700);
	transition: transform var(--p-fast) var(--p-ease);
}

.ip-faq details[open] summary .ip-i {
	transform: rotate(180deg);
}

.ip-faq__answer {
	padding: 0 4px 22px;
	color: var(--p-ink-2);
	font-size: 15.5px;
	max-width: 68ch;
}

.ip-faq__answer p + p {
	margin-top: 10px;
}

/* ===================================================================
   Bandeau de contact
   =================================================================== */

.ip-contact {
	background: linear-gradient(135deg, var(--p-brand-800) 0%, var(--p-brand-900) 100%);
	color: #ffffff;
}

.ip-contact h2,
.ip-contact .ip-h2 {
	color: #ffffff;
}

.ip-contact__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}

.ip-contact p {
	margin-top: 12px;
	max-width: 54ch;
	color: rgba(255, 255, 255, .84);
	font-size: 16.5px;
}

.ip-contact__ways {
	display: grid;
	gap: 12px;
}

.ip-contact__ways a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--p-r-md);
	color: #ffffff;
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--p-fast) var(--p-ease), border-color var(--p-fast) var(--p-ease);
}

.ip-contact__ways a:hover {
	background: rgba(255, 255, 255, .18);
	border-color: #ffffff;
	color: #ffffff;
}

.ip-contact__ways .ip-label {
	color: rgba(255, 255, 255, .72);
	font-weight: 400;
}

/* ===================================================================
   Adaptations
   =================================================================== */

@media (max-width: 1024px) {
	.ip-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.ip-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.ip-step:nth-child(2n)::after {
		display: none;
	}
}

@media (max-width: 860px) {
	.ip-section {
		padding: 58px 0;
	}

	.ip-section--tight {
		padding: 48px 0;
	}

	.ip-hero {
		padding: 56px 0 52px;
	}

	.ip-formulas,
	.ip-cabinets {
		grid-template-columns: 1fr;
	}

	.ip-facts {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 40px;
	}

	.ip-contact__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 620px) {
	.istima-page {
		font-size: 15.5px;
	}

	.ip-wrap {
		padding: 0 16px;
	}

	.ip-steps {
		grid-template-columns: 1fr;
	}

	.ip-step::after {
		display: none;
	}

	.ip-promise,
	.ip-formula,
	.ip-cabinet {
		padding: 24px 20px;
	}

	.ip-actions .ip-btn {
		width: 100%;
	}

	.ip-faq summary {
		font-size: 16.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.istima-page * {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}

	.ip-btn--primary:hover {
		transform: none;
	}
}