/* ==========================================================================
   RAMA SERVICES — Landing page  (v1.0.0)
   Toutes les classes sont préfixées .rama- pour ne jamais entrer en conflit
   avec le thème WordPress (header / footer inclus).
   ========================================================================== */

.rama-landing {
	--rama-green: #2f4a35;
	--rama-green-dark: #24392a;
	--rama-green-soft: #4a6b52;
	--rama-cream: #e7dcbb;
	--rama-cream-light: #f3ecd8;
	--rama-ink: #1b2a20;
	--rama-body: #5b6a60;
	--rama-lavender: #f3f3fb;
	--rama-line: #e3e6e2;
	--rama-white: #ffffff;
	--rama-radius: 4px;
	--rama-serif: "Playfair Display", "Libre Baskerville", Georgia, "Times New Roman", serif;
	--rama-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-family: var(--rama-sans);
	color: var(--rama-body);
	line-height: 1.7;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

.rama-landing *,
.rama-landing *::before,
.rama-landing *::after {
	box-sizing: border-box;
}

/* Beaucoup de thèmes WordPress soulignent tous les liens du contenu.
   On neutralise ce comportement à l'intérieur de la landing page :
   les boutons et le numéro de téléphone ne doivent jamais être soulignés. */
.rama-landing a,
.rama-landing a:hover,
.rama-landing a:focus,
.rama-landing a:active,
.rama-landing a:visited {
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
}

.rama-landing a:hover {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   PLEINE LARGEUR
   --------------------------------------------------------------------------
   Elementor, Divi, WPBakery et la plupart des thèmes enferment le contenu dans
   un conteneur limité (souvent 1140 px) avec du padding. Ces règles font sortir
   la landing page de ce conteneur pour qu'elle occupe toute la largeur de
   l'écran, sans avoir à toucher aux réglages du constructeur de page.

   --rama-vw est calculé en JavaScript à partir de la largeur réelle du
   document (barre de défilement exclue) : c'est ce qui évite la barre de
   défilement horizontale parasite du classique « width: 100vw ».

   Si le conteneur parent est DÉJÀ en pleine largeur, ces marges valent 0 :
   la règle ne fait alors rien. Pour la désactiver : [theme_rama fullwidth="no"]
   -------------------------------------------------------------------------- */
/* La largeur et le décalage sont MESURÉS EN JAVASCRIPT (rama-landing.js).
   L'ancienne méthode « calc(50% - 100vw/2) » résolvait son pourcentage sur le
   conteneur parent : dès qu'Elementor imbriquait des conteneurs flex, Chrome
   et Safari ne donnaient pas le même résultat et le bloc partait hors écran.
   Sans JavaScript, la landing reste dans son conteneur : dégradé, jamais cassé. */
.rama-landing--fullwidth {
	width: 100%;
}

/* --------------------------------------------------------------------------
   ANCRES DE NAVIGATION (#accueil, #a-propos, #nos-services, #contact…)
   --------------------------------------------------------------------------
   --rama-anchor-offset compense la hauteur d'un header fixe/sticky du thème.
   Si ton header fait 110px de haut, remplace 96px par 110px ci-dessous.
   -------------------------------------------------------------------------- */
.rama-landing {
	--rama-anchor-offset: 96px;
}

.rama-landing > section[id],
.rama-anchor {
	scroll-margin-top: var(--rama-anchor-offset);
}

.rama-anchor {
	display: block;
	position: relative;
	width: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* Le focus donné à une section après un clic sur une ancre ne doit pas
   dessiner de contour disgracieux. */
.rama-landing > section[id]:focus {
	outline: none;
}

/* ---------- Conteneurs ---------- */
.rama-container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.rama-container--narrow {
	max-width: 860px;
}

/* ---------- Typographie ---------- */
.rama-landing h1,
.rama-landing h2,
.rama-landing h3 {
	font-family: var(--rama-serif);
	color: var(--rama-ink);
	font-weight: 500;
	line-height: 1.18;
	margin: 0 0 18px;
	letter-spacing: -0.01em;
}

.rama-h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.85rem);
}

.rama-h2--center {
	text-align: center;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.rama-h3 {
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	margin-bottom: 10px;
}

.rama-landing p {
	margin: 0 0 18px;
	font-size: 1rem;
}

.rama-landing strong {
	color: var(--rama-ink);
	font-weight: 600;
}

.rama-eyebrow {
	font-family: var(--rama-sans);
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rama-green-soft);
	margin: 0 0 14px;
	font-weight: 600;
}

.rama-lead {
	font-size: 1.05rem;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.rama-section-head {
	margin-bottom: 52px;
}

/* ---------- Boutons ---------- */
.rama-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: var(--rama-radius);
	font-family: var(--rama-sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.rama-btn:focus-visible {
	outline: 3px solid var(--rama-green-soft);
	outline-offset: 3px;
}

.rama-btn--primary {
	background: var(--rama-green);
	color: var(--rama-white) !important;
}

.rama-btn--primary:hover {
	background: var(--rama-green-dark);
	transform: translateY(-2px);
}

.rama-btn--outline {
	background: transparent;
	color: var(--rama-green) !important;
	border-color: var(--rama-green);
}

.rama-btn--outline:hover {
	background: var(--rama-green);
	color: var(--rama-white) !important;
	transform: translateY(-2px);
}

/* Bouton blanc plein — le second bouton du hero. */
.rama-btn--white {
	background: var(--rama-white);
	color: var(--rama-green) !important;
	box-shadow: 0 2px 10px rgba(27, 42, 32, .08);
}

.rama-btn--white:hover {
	background: var(--rama-cream-light);
	transform: translateY(-2px);
}

/* L'icône du bouton reprend la couleur du texte du bouton : blanche sur le
   bouton vert plein, verte sur le bouton contour. */
.rama-btn .rama-icon {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	color: inherit;
	stroke-width: 2;
}

/* ---------- Icônes ---------- */
.rama-icon {
	display: inline-block;
	vertical-align: middle;
	color: var(--rama-green);
}

/* ---------- Placeholder image non remplacée (visible admin only) ------- */
.rama-img-missing {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 180px;
	width: 100%;
	padding: 18px;
	text-align: center;
	background: repeating-linear-gradient(45deg, #f6f4ee, #f6f4ee 12px, #eeece4 12px, #eeece4 24px);
	border: 1px dashed #b9b39c;
	border-radius: var(--rama-radius);
	color: #7a725a;
	font-size: 0.78rem;
}

.rama-img-missing code {
	font-size: 0.7rem;
	word-break: break-all;
	background: rgba(0, 0, 0, .05);
	padding: 3px 6px;
	border-radius: 3px;
}

.rama-notice {
	background: #fff8e5;
	border-left: 4px solid #e0b400;
	padding: 16px 18px;
	font-size: 0.9rem;
	border-radius: var(--rama-radius);
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.rama-hero {
	position: relative;
	display: flex;
	/* La carte crème est ancrée en BAS À GAUCHE de la photo. */
	align-items: flex-end;
	/* Hauteur totale du hero (la photo, pas la carte crème).
	   --rama-hero-h : c'est LA valeur à modifier pour l'agrandir ou le réduire.
	   92vh = presque toute la hauteur de l'écran, borné entre 640px et 1040px
	   pour rester correct sur un petit portable comme sur un grand moniteur. */
	--rama-hero-h: clamp(640px, 92vh, 1040px);
	min-height: var(--rama-hero-h);
	padding: 0;
	overflow: hidden;
	isolation: isolate;

	/* Hero « flottant » : un peu d'air tout autour + coins arrondis.
	   --rama-hero-inset  = l'espace blanc autour du hero
	   --rama-hero-radius = l'arrondi des 4 coins
	   Deux valeurs à modifier, rien d'autre. */
	margin: var(--rama-hero-inset, 26px);
	border-radius: var(--rama-hero-radius, 30px);
}

.rama-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.rama-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.rama-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(27, 42, 32, .55) 0%, rgba(27, 42, 32, .28) 45%, rgba(27, 42, 32, .08) 100%);
}

/* Dans le hero, le conteneur ne limite plus la largeur : la carte doit
   toucher le bord gauche et le bas de la photo. */
.rama-hero > .rama-container {
	max-width: none;
	padding: 0;
}

.rama-hero__card {
	width: min(640px, 56%);
	max-width: none;
	background: var(--rama-cream);
	padding: clamp(30px, 3.6vw, 56px) clamp(26px, 3.8vw, 60px);
	/* Bas et gauche collés à la photo (l'arrondi vient du hero, qui découpe) ;
	   seul le coin haut-droit est arrondi. */
	border-radius: 0 var(--rama-hero-radius, 30px) 0 0;
	box-shadow: none;
}

.rama-hero__title {
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
	margin-bottom: 20px;
}

.rama-hero__text {
	color: #46543c;
	margin-bottom: 28px;
}

/* Les deux boutons côte à côte : vert plein + blanc plein. */
.rama-hero__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 12px;
}

.rama-hero__actions .rama-btn {
	flex: 0 1 auto;
	white-space: nowrap;
}

.rama-hero__badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 26px 0 0;
	padding: 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--rama-green);
}

.rama-hero__badges li::before {
	content: "✓";
	margin-right: 7px;
	font-weight: 700;
}

/* ==========================================================================
   2. À PROPOS
   ========================================================================== */
.rama-about {
	padding: clamp(64px, 9vw, 120px) 0;
	background: var(--rama-white);
}

.rama-about__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(32px, 6vw, 90px);
	align-items: center;
}

.rama-about__figure {
	margin: 0;
}

.rama-about__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--rama-radius);
	box-shadow: 0 20px 44px rgba(27, 42, 32, .14);
}

.rama-checklist {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.rama-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.97rem;
}

.rama-checklist .rama-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-top: 3px;
	stroke-width: 2.4;
}

/* ==========================================================================
   3. SERVICES
   ========================================================================== */
.rama-services {
	padding: clamp(64px, 9vw, 120px) 0;
	background: var(--rama-lavender);
}

.rama-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.rama-card {
	background: var(--rama-white);
	border: 1px solid var(--rama-line);
	border-radius: var(--rama-radius);
	padding: 36px 30px;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease;
}

.rama-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 40px rgba(27, 42, 32, .1);
}

.rama-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--rama-cream-light);
}

.rama-card__icon .rama-icon {
	width: 34px;
	height: 34px;
}

.rama-card__text {
	font-size: 0.94rem;
}

.rama-card__list {
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--rama-line);
	text-align: left;
	display: grid;
	gap: 9px;
	font-size: 0.9rem;
}

.rama-card__list li {
	position: relative;
	padding-left: 22px;
}

.rama-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rama-cream);
	box-shadow: 0 0 0 2px rgba(47, 74, 53, .25);
}

/* ==========================================================================
   4. MODES + CRÉDIT D'IMPÔT
   ========================================================================== */
.rama-modes {
	padding: clamp(64px, 9vw, 120px) 0;
	background: var(--rama-white);
}

.rama-modes__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 70px);
	align-items: start;
}

.rama-mode {
	padding: 22px 24px;
	margin-bottom: 18px;
	background: #fafaf7;
	border-left: 3px solid var(--rama-cream);
	border-radius: var(--rama-radius);
}

.rama-mode p {
	margin: 0;
	font-size: 0.95rem;
}

.rama-fiscal {
	background: var(--rama-cream-light);
	border-radius: var(--rama-radius);
	padding: clamp(28px, 3.5vw, 44px);
}

.rama-fiscal__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--rama-white);
	color: var(--rama-green);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 9px 16px;
	border-radius: 100px;
	margin-bottom: 20px;
}

.rama-fiscal__badge .rama-icon {
	width: 18px;
	height: 18px;
}

.rama-fiscal__note {
	font-size: 0.9rem;
	font-style: italic;
	color: var(--rama-green-soft);
}

.rama-fiscal__subtitle {
	margin-top: 28px;
	font-size: 1.1rem;
}

.rama-fiscal__hint {
	font-size: 0.82rem;
	color: var(--rama-green-soft);
	margin-bottom: 14px;
}

/* --- Accordéon des aides mobilisables --- */
.rama-aides {
	display: grid;
	gap: 10px;
}

.rama-aide {
	background: var(--rama-white);
	border: 1px solid transparent;
	border-radius: var(--rama-radius);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.rama-aide[open] {
	border-color: #ddd3b4;
	box-shadow: 0 8px 22px rgba(27, 42, 32, .08);
}

.rama-aide__q {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--rama-ink);
}

.rama-aide__q::-webkit-details-marker {
	display: none;
}

.rama-aide__q:hover {
	color: var(--rama-green);
}

.rama-aide__q:focus-visible {
	outline: 3px solid var(--rama-green-soft);
	outline-offset: -3px;
}

.rama-aide__marker {
	color: var(--rama-green);
	font-weight: 700;
	flex: 0 0 auto;
}

.rama-aide__titre {
	flex: 1 1 auto;
}

.rama-aide__chevron {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.rama-aide__chevron::before,
.rama-aide__chevron::after {
	content: "";
	position: absolute;
	background: var(--rama-green);
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}

.rama-aide__chevron::before {
	top: 7px;
	left: 0;
	width: 16px;
	height: 2px;
}

.rama-aide__chevron::after {
	top: 0;
	left: 7px;
	width: 2px;
	height: 16px;
}

.rama-aide[open] .rama-aide__chevron::after {
	transform: scaleY(0);
	opacity: 0;
}

.rama-aide__a {
	padding: 0 18px 16px;
	border-top: 1px solid #f0ece0;
	margin-top: -1px;
}

.rama-aide__a p {
	margin: 14px 0 0;
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--rama-body);
	line-height: 1.65;
}

/* ==========================================================================
   5. PARTENAIRES / FINANCEURS
   ========================================================================== */
.rama-partners {
	padding: clamp(44px, 6vw, 72px) 0;
	background: var(--rama-white);
	border-top: 1px solid var(--rama-line);
	border-bottom: 1px solid var(--rama-line);
}

.rama-partners__title {
	font-family: var(--rama-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rama-green-soft);
	text-align: center;
	margin-bottom: 34px;
}

.rama-partners__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5vw, 62px);
}

.rama-partners__logo {
	max-width: 150px;
	height: auto;
	max-height: 78px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: .72;
	transition: filter .25s ease, opacity .25s ease;
}

.rama-partners__logo:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* ==========================================================================
   6. FAQ
   ========================================================================== */
.rama-faq {
	padding: clamp(64px, 9vw, 120px) 0;
	background: var(--rama-lavender);
}

.rama-faq .rama-eyebrow {
	text-align: center;
}

.rama-faq__list {
	display: grid;
	gap: 14px;
}

.rama-faq__item {
	background: var(--rama-white);
	border: 1px solid var(--rama-line);
	border-radius: var(--rama-radius);
	overflow: hidden;
}

.rama-faq__item[open] {
	border-color: var(--rama-cream);
	box-shadow: 0 10px 28px rgba(27, 42, 32, .07);
}

.rama-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.rama-faq__q::-webkit-details-marker {
	display: none;
}

.rama-faq__q h3 {
	font-family: var(--rama-sans);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	color: var(--rama-ink);
	line-height: 1.45;
}

.rama-faq__q:focus-visible {
	outline: 3px solid var(--rama-green-soft);
	outline-offset: -3px;
}

.rama-faq__chevron {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.rama-faq__chevron::before,
.rama-faq__chevron::after {
	content: "";
	position: absolute;
	background: var(--rama-green);
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}

.rama-faq__chevron::before {
	top: 9px;
	left: 0;
	width: 20px;
	height: 2px;
}

.rama-faq__chevron::after {
	top: 0;
	left: 9px;
	width: 2px;
	height: 20px;
}

.rama-faq__item[open] .rama-faq__chevron::after {
	transform: scaleY(0);
	opacity: 0;
}

.rama-faq__a {
	padding: 0 24px 22px;
}

.rama-faq__a p {
	margin: 0;
	font-size: 0.95rem;
}

/* ==========================================================================
   7. CONTACT
   ========================================================================== */
.rama-contact {
	padding: clamp(64px, 9vw, 120px) 0;
	background: var(--rama-white);
}

.rama-contact__grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(32px, 5vw, 70px);
	align-items: start;
}

.rama-contact__infos {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 16px;
}

.rama-contact__infos li {
	display: grid;
	gap: 2px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rama-line);
}

.rama-contact__label {
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--rama-green-soft);
}

.rama-contact__value {
	font-size: 1rem;
	color: var(--rama-ink);
	font-weight: 500;
	text-decoration: none;
}

/* Cible tactile de 44 px minimum (recommandation Apple / Google Lighthouse)
   sur les liens téléphone et e-mail. */
a.rama-contact__value {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

a.rama-contact__value:hover {
	color: var(--rama-green);
}

.rama-contact__form {
	background: var(--rama-cream-light);
	padding: clamp(26px, 3.5vw, 44px);
	border-radius: var(--rama-radius);
}

/* --- Habillage du formulaire Contact Form 7 --- */
.rama-contact__form .wpcf7 {
	margin: 0;
}

.rama-contact__form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--rama-ink);
	margin-bottom: 16px;
}

.rama-contact__form input[type="text"],
.rama-contact__form input[type="email"],
.rama-contact__form input[type="tel"],
.rama-contact__form input[type="url"],
.rama-contact__form input[type="date"],
.rama-contact__form input[type="number"],
.rama-contact__form select,
.rama-contact__form textarea {
	width: 100%;
	margin-top: 6px;
	padding: 13px 15px;
	font-family: inherit;
	/* 16px et pas moins : en dessous, iOS Safari zoome à la sélection du champ. */
	font-size: 16px;
	color: var(--rama-ink);
	background: var(--rama-white);
	border: 1px solid #d8d2ba;
	border-radius: var(--rama-radius);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.rama-contact__form textarea {
	min-height: 150px;
	resize: vertical;
}

.rama-contact__form input:focus,
.rama-contact__form select:focus,
.rama-contact__form textarea:focus {
	outline: none;
	border-color: var(--rama-green);
	box-shadow: 0 0 0 3px rgba(47, 74, 53, .13);
}

.rama-contact__form input[type="submit"],
.rama-contact__form .wpcf7-submit {
	width: auto;
	margin-top: 8px;
	padding: 14px 34px;
	background: var(--rama-green);
	color: var(--rama-white);
	border: none;
	border-radius: var(--rama-radius);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .22s ease, transform .22s ease;
}

.rama-contact__form input[type="submit"]:hover,
.rama-contact__form .wpcf7-submit:hover {
	background: var(--rama-green-dark);
	transform: translateY(-2px);
}

.rama-contact__form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: 0.8rem;
	font-weight: 500;
	margin-top: 5px;
}

.rama-contact__form .wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 13px 16px !important;
	border-radius: var(--rama-radius);
	font-size: 0.9rem;
}

.rama-contact__form .wpcf7-spinner {
	vertical-align: middle;
}

/* ==========================================================================
   ANIMATIONS (désactivées si l'utilisateur préfère moins de mouvement)
   ========================================================================== */
.rama-landing [data-rama-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}

.rama-landing [data-rama-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rama-landing *,
	.rama-landing *::before,
	.rama-landing *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.rama-landing [data-rama-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.rama-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.rama-about__grid,
	.rama-modes__grid,
	.rama-contact__grid {
		grid-template-columns: 1fr;
	}

	.rama-about__figure {
		order: -1;
		max-width: 460px;
	}

	/* La carte prend toute la largeur : on réserve une bande de photo
	   au-dessus, sinon le visuel disparaît complètement. */
	.rama-hero {
		min-height: 0;
		padding-top: 30vh;
	}

	.rama-hero__card {
		width: 100%;
		border-radius: var(--rama-hero-radius, 30px) var(--rama-hero-radius, 30px) 0 0;
	}

	.rama-hero__overlay {
		background: linear-gradient(180deg, rgba(27, 42, 32, .45) 0%, rgba(27, 42, 32, .3) 100%);
	}
}

@media (max-width: 680px) {
	.rama-landing {
		font-size: 15.5px;
	}

	.rama-container {
		padding: 0 18px;
	}

	.rama-services__grid {
		grid-template-columns: 1fr;
	}

	.rama-hero {
		min-height: 0;
		padding-top: 28vh;
		--rama-hero-radius: 20px;
		--rama-hero-inset: 12px;
	}

	.rama-hero__card {
		padding: 28px 22px 30px;
	}

	/* Sur mobile les deux boutons passent l'un sous l'autre. */
	.rama-hero__actions {
		flex-wrap: wrap;
	}

	.rama-hero__actions .rama-btn {
		width: 100%;
	}

	.rama-partners__logo {
		max-width: 110px;
		max-height: 58px;
	}

	.rama-section-head {
		margin-bottom: 36px;
	}

	/* iOS zoome automatiquement sur un champ dont la police fait moins de
	   16px. On force 16px sur mobile pour éviter ce zoom intempestif. */
	.rama-contact__form input[type="text"],
	.rama-contact__form input[type="email"],
	.rama-contact__form input[type="tel"],
	.rama-contact__form input[type="url"],
	.rama-contact__form input[type="date"],
	.rama-contact__form input[type="number"],
	.rama-contact__form select,
	.rama-contact__form textarea {
		font-size: 16px;
	}

	/* Bouton d'envoi pleine largeur : plus facile à viser au pouce. */
	.rama-contact__form input[type="submit"],
	.rama-contact__form .wpcf7-submit {
		width: 100%;
	}

	.rama-card {
		padding: 30px 22px;
	}

	.rama-faq__q {
		padding: 16px 18px;
	}
}

/* Écrans très étroits (iPhone SE, 320px) */
@media (max-width: 360px) {
	.rama-hero__card {
		padding: 24px 20px;
	}

	.rama-aide__q {
		padding: 12px 14px;
		font-size: 0.85rem;
	}

	.rama-aide__a {
		padding: 0 14px 14px;
	}
}

/* Tablette en paysage / petit portable : on évite la carte orpheline */
@media (min-width: 681px) and (max-width: 1024px) {
	.rama-services__grid > .rama-card:last-child {
		grid-column: 1 / -1;
	}
}

/* ---------- Impression ---------- */
@media print {
	.rama-hero__media,
	.rama-btn {
		display: none !important;
	}
	.rama-faq__a {
		display: block !important;
	}
}