/* ==========================================================================
   RAMA SERVICES — FOOTER  (v1.0.0)
   Classes préfixées .rama-ft : aucun conflit possible avec le thème.
   ========================================================================== */

.rama-ft-wrap {
	--rama-ft-green: #2f4a35;
	--rama-ft-green-dark: #24392a;
	--rama-ft-cream: #e7dcbb;
	--rama-ft-white: #ffffff;
	--rama-ft-mute: rgba(255, 255, 255, .72);
	--rama-ft-line: rgba(255, 255, 255, .16);
	--rama-ft-radius: 4px;
	--rama-ft-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rama-ft-serif: "Playfair Display", "Libre Baskerville", Georgia, "Times New Roman", serif;
	/* Doit correspondre à --rama-hero-inset du plugin « Landing » (26px). */
	--rama-ft-inset: 26px;
	--rama-ft-arrondi: 30px;

	font-family: var(--rama-ft-sans);
}

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

/* Sortie du conteneur limité du thème / d'Elementor.
   -------------------------------------------------------------------------
   La largeur et le décalage sont MESURÉS EN JAVASCRIPT (rama-footer.js) puis
   appliqués en styles inline. L'ancienne méthode « calc(50% - 100vw/2) »
   dépendait du conteneur parent : Chrome et Safari ne la résolvaient pas de
   la même façon dès qu'Elementor imbriquait des conteneurs flex, ce qui
   décalait le footer hors de l'écran sur Chrome.
   Sans JavaScript, le footer reste simplement dans son conteneur : dégradé,
   mais jamais cassé. */
.rama-ft-wrap--fullwidth {
	width: 100%;
}

/* ---------- Bloc principal ---------- */
.rama-ft {
	margin: var(--rama-ft-inset);
	padding: clamp(44px, 6vw, 76px) 0 0;
	background: var(--rama-ft-green);
	color: var(--rama-ft-mute);
	border-radius: var(--rama-ft-arrondi);
	overflow: hidden;
	line-height: 1.7;
	font-size: 0.94rem;
}

/* [footer_rama flottant="no"] : collé aux bords, sans arrondi. */
.rama-ft-wrap--plat .rama-ft {
	margin: 0;
	border-radius: 0;
}

.rama-ft__inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
}

/* Aucun soulignement imposé par le thème. */
.rama-ft a,
.rama-ft a:hover,
.rama-ft a:focus,
.rama-ft a:visited {
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
}

.rama-ft a:focus-visible {
	outline: 3px solid var(--rama-ft-cream);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Grille des colonnes ---------- */
.rama-ft__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1.15fr;
	gap: clamp(30px, 5vw, 70px);
	padding-bottom: clamp(38px, 5vw, 62px);
}

/* ---------- Colonne 1 : marque ---------- */
.rama-ft__logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	line-height: 0;
}

/* !important : de nombreux thèmes imposent « img { height: auto } ». */
.rama-ft .rama-ft__logo .rama-ft__logo-img {
	height: var(--rama-ft-logo-h, 56px) !important;
	max-height: var(--rama-ft-logo-h, 56px) !important;
	width: auto !important;
	max-width: 200px !important;
	object-fit: contain;
	display: block;
}

.rama-ft__logo--invert .rama-ft__logo-img {
	filter: brightness(0) invert(1);
}

.rama-ft__logo-nom {
	font-family: var(--rama-ft-serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--rama-ft-white);
	white-space: nowrap;
}

.rama-ft__baseline {
	margin: 0 0 22px;
	max-width: 380px;
	font-size: 0.94rem;
}

/* ---------- Réseaux sociaux ---------- */
.rama-ft__reseaux {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rama-ft__reseaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--rama-ft-line);
	border-radius: 50%;
	color: var(--rama-ft-white);
	transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

.rama-ft__reseaux a:hover {
	background: var(--rama-ft-cream);
	border-color: var(--rama-ft-cream);
	color: var(--rama-ft-green);
}

/* ---------- Titres de colonne ---------- */
.rama-ft__titre {
	position: relative;
	margin: 0 0 24px;
	padding-left: 14px;
	font-family: var(--rama-ft-sans);
	font-size: 0.83rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--rama-ft-white);
	line-height: 1.4;
}

.rama-ft__titre::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 3px;
	border-radius: 2px;
	background: var(--rama-ft-cream);
}

/* ---------- Colonne 2 : navigation ---------- */
.rama-ft__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.rama-ft__lien {
	display: inline-block;
	padding: 8px 0;
	min-height: 40px;
	color: var(--rama-ft-mute);
	transition: color .2s ease, transform .2s ease;
}

.rama-ft__lien:hover {
	color: var(--rama-ft-cream);
	transform: translateX(4px);
}

/* ---------- Colonne 3 : coordonnées ---------- */
.rama-ft__coord {
	display: grid;
	gap: 4px;
	margin: 0 0 26px;
	font-style: normal;
}

.rama-ft__coord-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	padding: 9px 0;
	color: var(--rama-ft-mute);
	transition: color .2s ease;
}

a.rama-ft__coord-item:hover {
	color: var(--rama-ft-cream);
}

.rama-ft__coord-item .rama-ft__icone {
	flex: 0 0 19px;
	margin-top: 4px;
	color: var(--rama-ft-cream);
}

.rama-ft__coord-item--statique {
	cursor: default;
}

/* ---------- Bouton ---------- */
.rama-ft__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 30px;
	background: var(--rama-ft-cream);
	color: var(--rama-ft-green) !important;
	font-size: 0.87rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: var(--rama-ft-radius);
	transition: background-color .22s ease, transform .22s ease;
}

.rama-ft__cta:hover {
	background: var(--rama-ft-white);
	transform: translateY(-2px);
}

/* ---------- Barre du bas ---------- */
.rama-ft__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
	padding: 22px 0 26px;
	border-top: 1px solid var(--rama-ft-line);
	font-size: 0.84rem;
}

.rama-ft__copy {
	margin: 0;
	color: rgba(255, 255, 255, .6);
}

/* Lien vers l'agence : discret, mais clairement cliquable. */
.rama-ft__credit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: rgba(255, 255, 255, .82);
	font-weight: 600;
	/* Souligné collé au texte (et non au bas de la zone cliquable de 44px). */
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px !important;
	text-decoration-color: rgba(255, 255, 255, .35) !important;
	transition: color .2s ease, text-decoration-color .2s ease;
}

.rama-ft__credit:hover {
	color: var(--rama-ft-cream);
	text-decoration-color: var(--rama-ft-cream) !important;
}

.rama-ft__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rama-ft__legal a {
	/* 44px minimum : cible tactile confortable (Lighthouse / Apple HIG). */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 4px 0;
	color: rgba(255, 255, 255, .6);
	transition: color .2s ease;
}

.rama-ft__legal a:hover {
	color: var(--rama-ft-cream);
}

/* Petite flèche « ouvre dans un nouvel onglet ». */
.rama-ft__ext {
	flex: 0 0 auto;
	opacity: .55;
	transition: opacity .2s ease;
}

.rama-ft__legal a:hover .rama-ft__ext {
	opacity: 1;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablette */
@media (max-width: 980px) {
	.rama-ft__grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px 40px;
	}

	.rama-ft__col--marque {
		grid-column: 1 / -1;
	}

	.rama-ft__baseline {
		max-width: 560px;
	}
}

/* Mobile */
@media (max-width: 680px) {
	.rama-ft {
		--rama-ft-inset: 12px;
		--rama-ft-arrondi: 20px;
	}

	.rama-ft__inner {
		padding: 0 20px;
	}

	.rama-ft__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.rama-ft__col--marque {
		grid-column: auto;
	}

	.rama-ft__logo-nom {
		font-size: 1.2rem;
	}

	.rama-ft__cta {
		width: 100%;
	}

	.rama-ft__bas {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

@media (max-width: 380px) {
	.rama-ft__coord-item {
		font-size: 0.88rem;
	}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	.rama-ft * {
		transition-duration: .01ms !important;
	}
}

/* ---------- Impression ---------- */
@media print {
	.rama-ft {
		background: none;
		color: #000;
		border-radius: 0;
		margin: 0;
	}
	.rama-ft__cta,
	.rama-ft__reseaux {
		display: none !important;
	}
}