/* ==========================================================================
   THEOTECH — couche de design
   Chargee apres style.css. Contient tout ce qui a ete ajoute ou repris du
   theme d'origine : systeme typographique, rythme des sections, grille
   tarifaire, avis Google, accessibilite, bandeau cookies, page 404.

   Direction : « le devis ». Un depannage informatique de quartier se juge sur
   la clarte du prix et la facilite d'appeler. Les tarifs se lisent donc comme
   une estimation posee sur le comptoir : libelle, ligne de conduite pointillee,
   montant en chiffres tabulaires. Une seule couleur d'action, le cyan de la
   marque ; le rose est reserve au seul argument qui merite de crier, la
   deduction d'impots.
   ========================================================================== */

:root {
	/* Couleurs — toutes les paires texte/fond atteignent 4,5:1 */
	--ti-ink: #1d2a33;           /* ardoise, titres */
	--ti-body: #55606b;          /* texte courant sur papier — 6,2:1 */
	--ti-muted: #6e7481;         /* mentions secondaires — 4,7:1 */
	--ti-paper: #f2f5f6;         /* fond de page, papier froid */
	--ti-surface: #ffffff;
	--ti-line: #dde4e8;
	--ti-line-soft: #eaeff1;
	--ti-cyan: #00b3da;          /* marque, aplats decoratifs uniquement */
	--ti-cyan-deep: #00728c;     /* texte et boutons — 5,6:1 sur blanc */
	--ti-cyan-dark: #005c72;
	--ti-signal: #d0305c;        /* reserve a la deduction d'impots */

	/* Typographie */
	--ti-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
	--ti-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ti-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

	/* Rythme */
	--ti-radius: 14px;
	--ti-radius-sm: 8px;
	--ti-shadow: 0 1px 2px rgba(29, 42, 51, .05), 0 8px 24px -12px rgba(29, 42, 51, .18);
	--ti-shadow-lift: 0 2px 4px rgba(29, 42, 51, .06), 0 18px 40px -16px rgba(29, 42, 51, .28);
}

/* --- Typographie --------------------------------------------------------- */

body {
	font-family: var(--ti-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ti-body);
	background: var(--ti-paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class^='heading-'], [class*=' heading-'] {
	font-family: var(--ti-display);
	font-weight: 700;
	color: var(--ti-ink);
	letter-spacing: -.015em;
	line-height: 1.15;
}

h1, .h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }
h2       { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); }
.heading-4 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.heading-5 { font-size: 1.1rem; letter-spacing: -.005em; }
.heading-6 { font-family: var(--ti-sans); font-weight: 600; }

p, li { font-family: var(--ti-sans); }
.lead, p.big { font-size: 1.15rem; line-height: 1.6; }

strong, b { font-weight: 600; }

/* Le theme ecrivait certains intitules tout en majuscules etroites : peu
   lisible pour des lecteurs ages, qui sont une part de la clientele. */
.rd-navbar-info, .list-lined { letter-spacing: .01em; }

/* --- Rythme des sections ------------------------------------------------- */

.section-lg { padding-top: 76px; padding-bottom: 76px; }
@media (min-width: 992px) {
	.section-lg { padding-top: 104px; padding-bottom: 104px; }
}

.bg-default { background: var(--ti-surface); }
.bg-gray-100 { background: var(--ti-paper); }

/* Intitule de section : surtitre + titre, avec un hexagone repris du logo */
.section-intro { margin-bottom: 42px; max-width: 46rem; }
.section-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-family: var(--ti-sans);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ti-cyan-deep);
}
.section-eyebrow::before {
	content: '';
	width: 13px;
	height: 15px;
	flex: none;
	background: var(--ti-cyan);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.section-intro h2 { margin: 0; }
.section-intro p { margin: 14px 0 0; font-size: 1.1rem; }

/* --- Hero : lisibilite du texte sur les photos --------------------------- */

/* Le texte des diapositives etait pose a meme des illustrations chargees,
   sans voile : illisible des que l'image etait claire. */
.swiper-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(100deg, rgba(14, 24, 31, .92) 0%, rgba(14, 24, 31, .78) 34%,
		                        rgba(14, 24, 31, .42) 60%, rgba(14, 24, 31, .22) 100%);
}
.swiper-slide > .swiper-slide-caption,
.swiper-slide .swiper-slide-caption { position: relative; z-index: 2; }

.swiper-slider-1 h1,
.swiper-slider-1 .h1 {
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}
.swiper-slider-1 h1 .text-light,
.swiper-slider-1 .h1 .text-light {
	display: block;
	font-family: var(--ti-sans);
	font-weight: 400;
	font-size: .58em;
	line-height: 1.3;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .92);
	margin-top: .35em;
}
.swiper-slider-1 .lead {
	color: rgba(255, 255, 255, .88);
	font-weight: 400;
}

/* Puces de navigation du carrousel : cibles tactiles suffisantes */
.swiper-pagination-bullet { width: 11px; height: 11px; }

/* --- Boutons ------------------------------------------------------------- */

.button {
	font-family: var(--ti-sans);
	font-weight: 600;
	letter-spacing: .01em;
	border-radius: var(--ti-radius-sm);
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.button-primary,
.button-primary:focus {
	background-color: var(--ti-cyan-deep);
	border-color: var(--ti-cyan-deep);
	color: #fff;
}
.button-primary:hover,
.button-primary:active {
	background-color: var(--ti-cyan-dark);
	border-color: var(--ti-cyan-dark);
	color: #fff;
}

/* Le rose ne sert plus d'action generique : il ne signale que la deduction
   d'impots, le seul argument qui merite de ressortir. */
.button-secondary,
.button-secondary:focus {
	background-color: var(--ti-cyan-deep);
	border-color: var(--ti-cyan-deep);
	color: #fff;
}
.button-secondary:hover,
.button-secondary:active {
	background-color: var(--ti-cyan-dark);
	border-color: var(--ti-cyan-dark);
}

/* --- Cartes de service (accueil) ---------------------------------------- */

.bg-primary { background: var(--ti-cyan-deep); }

/* --- Accessibilite ------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--ti-ink);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--ti-radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--ti-cyan-deep);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Fil d'Ariane et titre de page --------------------------------------- */

.breadcrumbs-custom {
	position: relative;
	padding: 68px 0 54px;
	background: var(--ti-ink) !important;
}
.breadcrumbs-custom::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 140% at 8% 0%, rgba(0, 179, 218, .30) 0%, transparent 62%);
	pointer-events: none;
}
.breadcrumbs-custom .container { position: relative; z-index: 2; }
.breadcrumbs-custom-title {
	margin: 0 0 12px;
	color: #fff;
	text-wrap: balance;
}
.breadcrumbs-custom-path { font-size: .9rem; }
.breadcrumbs-custom-path a { color: rgba(255, 255, 255, .78); }
.breadcrumbs-custom-path a:hover { color: #fff; }
.breadcrumbs-custom-path .active { color: rgba(255, 255, 255, .62); }

/* --- Grille tarifaire — le devis ---------------------------------------- */

/* Deux publics, une seule grille : les lignes portent les prix des deux, le
   CSS n'en montre qu'un. Sans JavaScript, ce sont les particuliers qui
   restent affiches — le gros du trafic. */
[data-audience='part'] [data-audience-for='pro'],
[data-audience='pro'] [data-audience-for='part'] { display: none; }

.rates-audience {
	display: flex;
	gap: 4px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 30px;
	padding: 4px;
	background: var(--ti-surface);
	border: 1px solid var(--ti-line);
	border-radius: 999px;
	box-shadow: var(--ti-shadow);
}
.rates-audience__btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: none;
	padding: 9px 22px;
	border-radius: 999px;
	font-family: var(--ti-sans);
	font-size: .95rem;
	font-weight: 600;
	color: var(--ti-body);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.rates-audience__btn:hover { color: var(--ti-cyan-deep); }
.rates-audience__btn.is-active { background: var(--ti-cyan-deep); color: #fff; }

.rates { max-width: 920px; margin: 0 auto; }

.rate-group { margin-bottom: 44px; }
.rate-group:last-child { margin-bottom: 0; }

.rate-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 4px;
}
.rate-group__title { margin: 0; }
.rate-group__hint {
	font-size: .92rem;
	color: var(--ti-muted);
}

.rate-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 8px 4px;
	background: var(--ti-surface);
	border: 1px solid var(--ti-line);
	border-radius: var(--ti-radius);
	box-shadow: var(--ti-shadow);
}

.rate-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 0 14px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ti-line-soft);
}
.rate-row:last-child { border-bottom: 0; }

/* Duree : c'est ce que le client compare reellement avant de choisir. */
.rate-row__duration {
	font-family: var(--ti-mono);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ti-cyan-deep);
	background: rgba(0, 179, 218, .10);
	border-radius: 5px;
	padding: 4px 8px;
	white-space: nowrap;
	min-width: 62px;
	text-align: center;
}
.rate-row__duration:empty { background: none; }

.rate-row__label {
	color: var(--ti-ink);
	font-weight: 500;
	position: relative;
	overflow: hidden;
}
/* Ligne de conduite, comme sur un devis : l'oeil suit le libelle jusqu'au
   montant sans se perdre entre les lignes. */
.rate-row__label::after {
	content: '';
	position: absolute;
	bottom: .32em;
	margin-left: 10px;
	width: 100%;
	border-bottom: 1px dotted var(--ti-line);
}

.rate-row__price {
	font-family: var(--ti-mono);
	font-size: 1.02rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ti-ink);
	white-space: nowrap;
	text-align: right;
}
.rate-row__price small {
	display: block;
	font-family: var(--ti-sans);
	font-size: .72rem;
	font-weight: 400;
	color: var(--ti-muted);
	letter-spacing: 0;
}

.rate-row__action { min-width: 96px; text-align: right; }
.button-pay {
	display: inline-block;
	padding: 8px 18px;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.4;
	border-radius: var(--ti-radius-sm);
	background: var(--ti-cyan-deep);
	border: 1px solid var(--ti-cyan-deep);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.button-pay:hover,
.button-pay:focus { background: var(--ti-cyan-dark); border-color: var(--ti-cyan-dark); color: #fff; }

.rate-row__action--none { color: var(--ti-muted); font-size: .85rem; }

.rate-note {
	margin: 14px 2px 0;
	font-size: .88rem;
	color: var(--ti-muted);
}

@media (max-width: 719px) {
	.rates-audience { width: 100%; }
	.rates-audience__btn { flex: 1; padding: 11px 12px; }
	.rate-row {
		grid-template-columns: 1fr auto;
		gap: 6px 12px;
		padding: 16px 16px;
	}
	.rate-row__duration { grid-row: 1; grid-column: 1; justify-self: start; }
	.rate-row__label    { grid-row: 2; grid-column: 1 / -1; }
	.rate-row__label::after { display: none; }   /* inutile une fois empile */
	.rate-row__price    { grid-row: 3; grid-column: 1; text-align: left; }
	.rate-row__action   { grid-row: 3; grid-column: 2; }
}

/* Bandeau deduction d'impots : le seul endroit ou le rose intervient */
.rates-flag {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 920px;
	margin: 0 auto 40px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--ti-line);
	border-left: 4px solid var(--ti-signal);
	border-radius: var(--ti-radius);
}
.rates-flag__title {
	margin: 0;
	font-family: var(--ti-display);
	font-size: 1.05rem;
	color: var(--ti-ink);
}
.rates-flag__text { margin: 2px 0 0; font-size: .95rem; color: var(--ti-body); }
.rates-flag--pro { border-left-color: var(--ti-cyan-deep); }

/* --- Avis Google --------------------------------------------------------- */

.reviews { max-width: 1040px; }

.review-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	font-size: 1.05rem;
	color: var(--ti-ink);
}
.review-summary strong { font-family: var(--ti-mono); font-size: 1.3rem; font-weight: 500; }
.review-summary__count { color: var(--ti-muted); font-size: .95rem; }
.review-summary__link { color: var(--ti-cyan-deep); text-decoration: underline; font-size: .95rem; }

.review-stars { color: #f0a020; letter-spacing: .08em; white-space: nowrap; }
.review-star--off { color: var(--ti-line); }

.reviews-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.review-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px;
	background: var(--ti-surface);
	border: 1px solid var(--ti-line);
	border-radius: var(--ti-radius);
	box-shadow: var(--ti-shadow);
}
.review-card__head { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; object-fit: cover; }
.review-card__author { margin: 0; font-weight: 600; color: var(--ti-ink); line-height: 1.3; }
.review-card__date { display: block; font-size: .82rem; color: var(--ti-muted); }
.review-card__text {
	margin: 0;
	font-size: .98rem;
	line-height: 1.6;
	color: var(--ti-body);
	/* Les avis ont des longueurs tres inegales : on borne sans couper le sens. */
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.review-card__link {
	margin-top: auto;
	font-size: .88rem;
	color: var(--ti-cyan-deep);
	text-decoration: underline;
}
.reviews-fallback { color: var(--ti-muted); }
.reviews-fallback a { color: var(--ti-cyan-deep); text-decoration: underline; }

/* --- Appel a l'action unique -------------------------------------------- */

.cta-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--ti-cyan-deep);
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
}
.cta-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: none;
}
.cta-bar__link:hover,
.cta-bar__link:focus { color: #fff; text-decoration: underline; }

@media (min-width: 992px) { .cta-bar { display: none; } }
@media (max-width: 991px) { body { padding-bottom: 70px; } }

/* --- Bandeau cookies ----------------------------------------------------- */

.cookie-banner {
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 1000;
	max-width: 640px;
	margin: 0 auto;
	padding: 22px 24px;
	background: var(--ti-surface);
	color: var(--ti-ink);
	border: 1px solid var(--ti-line);
	border-radius: var(--ti-radius);
	box-shadow: var(--ti-shadow-lift);
	font-size: .95rem;
	line-height: 1.6;
}
@media (max-width: 991px) { .cookie-banner { bottom: 86px; } }
.cookie-banner[hidden] { display: none !important; }
.cookie-banner__title {
	margin: 0 0 8px;
	font-family: var(--ti-display);
	font-size: 1.1rem;
	color: var(--ti-ink);
}
.cookie-banner__text { margin: 0 0 18px; color: var(--ti-body); }
.cookie-banner__text a { color: var(--ti-cyan-deep); text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner__btn {
	flex: 1 1 auto;
	min-width: 150px;
	padding: 12px 18px;
	font: inherit;
	font-weight: 600;
	border-radius: var(--ti-radius-sm);
	border: 1px solid var(--ti-cyan-deep);
	background: #fff;
	color: var(--ti-cyan-deep);
	cursor: pointer;
}
.cookie-banner__btn--accept { background: var(--ti-cyan-deep); color: #fff; }
.cookie-banner__btn:hover { opacity: .9; }

/* --- Formulaire de contact ---------------------------------------------- */

/* Champ piege anti-robot : hors du flux et du parcours clavier. display:none
   est evite, certains robots le detectent et laissent alors le champ vide. */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.form-label-outer {
	display: block;
	margin-bottom: 6px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--ti-ink);
}
.form-input {
	border-radius: var(--ti-radius-sm) !important;
	font-family: var(--ti-sans);
}
.form-status {
	margin: 16px 0 0;
	padding: 14px 16px;
	border-radius: var(--ti-radius-sm);
	font-size: .96rem;
	line-height: 1.5;
}
.form-status[hidden] { display: none !important; }
.form-status--ok { background: #e6f6ec; border: 1px solid #b9e3c8; color: #14623a; }
.form-status--error { background: #fdecec; border: 1px solid #f3c6c6; color: #a3201a; }
.form-status ul { margin: 6px 0 0; padding-left: 20px; }
.form-input[aria-invalid="true"] { border-color: #a3201a !important; }
.form-required { color: var(--ti-signal); }

/* --- Pages legales ------------------------------------------------------- */

.legal-content { max-width: 46rem; font-size: 1.02rem; line-height: 1.75; }
.legal-content h2 { margin: 48px 0 14px; font-size: 1.45rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin: 30px 0 10px; font-size: 1.12rem; }
.legal-content p, .legal-content li { margin-bottom: 12px; }
.legal-content ul { padding-left: 22px; margin-bottom: 18px; }
.legal-content a { color: var(--ti-cyan-deep); text-decoration: underline; }
.legal-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0 26px;
	font-size: .94rem;
	background: var(--ti-surface);
}
.legal-content th, .legal-content td {
	padding: 11px 13px;
	border: 1px solid var(--ti-line);
	text-align: left;
	vertical-align: top;
}
.legal-content th { background: var(--ti-paper); color: var(--ti-ink); font-weight: 600; }
.legal-content .table-wrap { overflow-x: auto; }
.legal-updated {
	margin-top: 40px;
	padding-top: 18px;
	border-top: 1px solid var(--ti-line);
	font-size: .9rem;
	color: var(--ti-muted);
}

/* --- Page 404 ------------------------------------------------------------ */

.error-page { padding: 60px 0 80px; text-align: center; }
.error-page__code {
	margin: 0;
	font-family: var(--ti-mono);
	font-size: clamp(3.5rem, 2rem + 7vw, 6rem);
	font-weight: 500;
	line-height: 1;
	color: var(--ti-cyan);
}
.error-page__title { margin: 14px 0; font-size: 1.6rem; color: var(--ti-ink); }
.error-page__text { max-width: 34rem; margin: 0 auto 30px; }
.error-page__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.error-page ul {
	list-style: none;
	padding: 0;
	margin: 38px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	justify-content: center;
}
.error-page ul a { color: var(--ti-cyan-deep); text-decoration: underline; }

/* --- Pied de page -------------------------------------------------------- */

.footer-classic { background: var(--ti-ink); }
.footer-classic .heading-5 {
	color: #fff;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-family: var(--ti-sans);
	font-weight: 600;
}
.footer-classic a { color: rgba(255, 255, 255, .80); }
.footer-classic a:hover { color: #fff; }
.footer-inner-2 { border-top: 1px solid rgba(255, 255, 255, .12); }
.rights { color: rgba(255, 255, 255, .58); font-size: .88rem; }

/* --- Divers -------------------------------------------------------------- */

/* Le logo mesure 393x50 : on fige le ratio pour eviter le saut de mise en page */
.brand-logo-dark,
.brand-logo-light { width: 270px; height: auto; aspect-ratio: 393 / 50; }

img { max-width: 100%; }

/* Diapositives 2 a 4 : meme rendu que le h1 de la premiere */
.swiper-slider-1 .h1 + p { margin-top: 23px; }

/* --- Hero : pastille credit d'impot et bouton --------------------------- */

/* Remplace l'ancien badge en image : net a toute taille, lisible par un
   lecteur d'ecran, et cohere avec le reste de la typographie. */
.hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 7px 15px 7px 11px;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 500;
	color: #fff;
	backdrop-filter: blur(2px);
}
.hero-chip span {
	font-family: var(--ti-mono);
	font-weight: 500;
	background: var(--ti-signal);
	border-radius: 999px;
	padding: 2px 9px;
	font-size: .86rem;
	letter-spacing: -.01em;
}

/* Bouton du hero : blanc plein, l'action la plus lisible sur fond sombre */
.button-hero,
.button-hero:focus {
	background: #fff;
	border-color: #fff;
	color: var(--ti-ink);
}
.button-hero:hover,
.button-hero:active {
	background: var(--ti-cyan);
	border-color: var(--ti-cyan);
	color: var(--ti-ink);
}

/* Pastille et bouton partagent la meme ligne de base dans le hero */
.hero-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.hero-actions .button-wrap-default { margin-top: 0; }

.rate-note--page { max-width: 920px; margin: 32px auto 0; }

/* Compteurs de la page d'accueil : les chiffres etaient a peine visibles */
.box-counter .counter,
.box-counter-title { color: var(--ti-ink); }
.box-counter .counter {
	font-family: var(--ti-display);
	color: var(--ti-cyan-deep);
}
.box-counter-title { font-size: .98rem; color: var(--ti-body); }

/* --- Le rose reste reserve au credit d'impot ----------------------------- */

/* Le theme employait le rose comme couleur d'accent generale : coordonnees,
   puces, liens secondaires. Tout cela repasse en cyan, pour qu'un seul signal
   visuel reste exceptionnel. */
.text-secondary,
.team-box .unit a,
.box-sharts .subtitle,
.list-terms-2 dd a,
.list-marked-2 > li::before,
.button-secondary-text,
.button-secondary-text:focus,
.button-link:hover,
.rd-navbar-classic.rd-navbar-static .text-secondary a,
.rd-navbar-classic.rd-navbar-fixed .text-secondary a,
.rd-navbar-sidebar-layout.rd-navbar-sidebar .link-secondary {
	color: var(--ti-cyan-deep);
}
.box-counter:hover .box-counter-main,
.box-counter-round:hover .box-counter-item { color: var(--ti-cyan-deep); }
.bg-primary .button-primary,
.bg-primary .button-primary:focus {
	color: var(--ti-cyan-dark);
	background-color: #fff;
	border-color: #fff;
}

/* Coordonnees de la page Contacts : hierarchie lisible */
.list-terms-2 dt { color: var(--ti-muted); font-weight: 400; }
.list-terms-2 dd a { font-weight: 600; text-decoration: none; }
.list-terms-2 dd a:hover { text-decoration: underline; }

/* Le bouton « retour en haut » passait sous la barre d'appel sur mobile */
@media (max-width: 991px) {
	.ui-to-top { bottom: 82px; }
}

/* Les logos partenaires sont noirs et le pied de page est sombre : ils
   etaient invisibles. On les passe en blanc, legerement attenues pour ne pas
   concurrencer le contenu. */
.footer-classic .link-image img,
.footer-inner-1 .row-30 img {
	filter: brightness(0) invert(1);
	opacity: .72;
	transition: opacity .18s ease;
	width: auto;
	max-height: 30px;
}
.footer-inner-1 .row-30 img:hover { opacity: 1; }

/* Colonnes de liens du pied de page : eviter que les libelles longs se
   chevauchent, et aerer la liste. */
.footer-list li { margin-bottom: 10px; line-height: 1.45; }
.footer-list a { display: inline-block; }
.footer-classic .contact-list li { margin-bottom: 14px; }

/* Les logos partenaires tiennent sur deux colonnes meme resserres */
.footer-inner-1 .row-30 img { max-height: 26px; }

/* Pastille credit d'impot, variante fond clair (pages services) */
.credit-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 26px 0 0;
	padding: 8px 16px 8px 10px;
	background: #fff;
	border: 1px solid var(--ti-line);
	border-radius: 999px;
	font-size: .95rem;
	font-weight: 500;
	color: var(--ti-ink);
	box-shadow: var(--ti-shadow);
}
.credit-chip span {
	font-family: var(--ti-mono);
	font-weight: 500;
	font-size: .88rem;
	letter-spacing: -.01em;
	background: var(--ti-signal);
	color: #fff;
	border-radius: 999px;
	padding: 3px 10px;
}

/* --- Coordonnees de la page Contacts ------------------------------------- */

/* Le theme les repartissait en deux colonnes trop etroites : les horaires se
   coupaient en plein milieu. Une liste libelle / valeur tient sur une colonne
   et reste lisible a toutes les largeurs. */
.contact-facts {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	max-width: 30rem;
}
.contact-facts li {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 4px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ti-line-soft);
}
.contact-facts li:last-child { border-bottom: 0; }
.contact-facts__label {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ti-muted);
	padding-top: .2em;
}
.contact-facts__value { color: var(--ti-ink); line-height: 1.55; }
.contact-facts__value a { color: var(--ti-cyan-deep); font-weight: 600; }
.contact-facts__value a:hover { text-decoration: underline; }
.contact-facts__value strong { font-weight: 600; }

@media (max-width: 575px) {
	.contact-facts li { grid-template-columns: 1fr; gap: 2px; }
}

/* --- En-tete sur une seule barre ---------------------------------------- */

/* Le theme empilait deux bandeaux : un liseré sombre avec le telephone, puis
   la barre de navigation. Tout tient desormais sur une ligne, le telephone
   devenant l'action principale a droite. */

/* Fond : aplat sombre plutot que la photo de circuits imprimes du theme */
.rd-navbar-bg {
	background-image: none !important;
	background-color: var(--ti-ink) !important;
}
/* Sur la page d'accueil, la barre reste transparente au-dessus du carrousel */
.page-header--hero .rd-navbar-bg {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(14, 24, 31, .78) 0%, transparent 100%) !important;
}

.rd-navbar-transparent.rd-navbar-static .rd-navbar-main { padding: 14px 0; }

/* Le theme plafonne le logo a 120px ; un style inline le contournait jusqu'ici.
   La regle est reprise ici, a specificite equivalente. */
.rd-navbar-static .rd-navbar-brand { flex: 0 0 auto; }
.rd-navbar-static .rd-navbar-brand .brand { display: block; }
.rd-navbar-transparent.rd-navbar-static .rd-navbar-brand img,
.rd-navbar-classic.rd-navbar-static .rd-navbar-brand img {
	width: 212px;
	max-width: 212px;
	height: auto;
	max-height: none;
	flex: none;
}

/* Liens de navigation : plus d'espace, un soulignement net sur la page active */
.rd-navbar-static .rd-navbar-nav > li > .rd-nav-link {
	font-family: var(--ti-sans);
	font-size: .98rem;
	font-weight: 500;
	letter-spacing: .005em;
	padding: 8px 11px;
	border-radius: var(--ti-radius-sm);
}
/* Le theme pose un border-bottom transparent sur chaque lien : combine a un
   fond, cela dessinait un cadre. Pastille pleine, sans contour. */
.rd-navbar-transparent.rd-navbar-static .rd-nav-link { border-bottom: 0; }
.rd-navbar-static .rd-nav-item.active > .rd-nav-link,
.rd-navbar-static .rd-nav-item:hover > .rd-nav-link,
.rd-navbar-static .rd-nav-item.focus > .rd-nav-link {
	background: rgba(255, 255, 255, .13);
	color: #fff;
}

/* Bouton d'appel : la seule action de l'en-tete */
.nav-call {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: 16px;
	padding: 8px 16px 8px 13px;
	border-radius: 999px;
	background: var(--ti-cyan-deep);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease;
}
.nav-call:hover,
.nav-call:focus { background: var(--ti-cyan); color: #fff; }
.nav-call__icon { font-size: 20px; line-height: 1; }
.nav-call__text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-call__hint {
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}
.nav-call__number {
	font-size: 1.02rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

/* Sous 1200px la mention disparait, le numero reste */
@media (max-width: 1399px) {
	.nav-call__hint { display: none; }
	.nav-call { padding: 10px 16px; }
}
/* En mode mobile, la barre fixe en bas porte deja l'appel : pas de doublon,
   et .rd-navbar-main-element y est positionne en absolu par le theme. */
@media (max-width: 991px) {
	.nav-call { display: none; }
}

/* Mise en ligne de la barre.
   Le theme espace les liens de 35px via
   « .rd-navbar-transparent.rd-navbar-static .rd-nav-item + .rd-nav-item ».
   Avec sept entrees, un logo et un bouton d'appel, la barre debordait et le
   dernier lien passait a la ligne. L'ecart est ramene a 14px, a specificite
   equivalente pour que la regle porte. */
.rd-navbar-transparent.rd-navbar-static .rd-nav-item + .rd-nav-item,
.rd-navbar-classic.rd-navbar-static .rd-nav-item + .rd-nav-item {
	margin-left: 14px;
}
.rd-navbar-static .rd-navbar-main-element {
	flex: 1 1 auto;
	justify-content: flex-end;
	flex-wrap: nowrap;
	min-width: 0;
}
.rd-navbar-static .rd-navbar-panel { flex: 0 0 auto; }
.rd-navbar-static .rd-navbar-nav-wrap { flex: 0 0 auto; }
.rd-navbar-static .rd-navbar-nav > li { white-space: nowrap; }

/* Entre 992 et 1199px la barre est juste : logo, ecarts et liens se resserrent
   plutot que de laisser le menu chevaucher le logo. */
@media (min-width: 992px) and (max-width: 1199px) {
	.rd-navbar-transparent.rd-navbar-static .rd-navbar-brand img,
	.rd-navbar-classic.rd-navbar-static .rd-navbar-brand img {
		width: 168px;
		max-width: 168px;
	}
	.rd-navbar-transparent.rd-navbar-static .rd-nav-item + .rd-nav-item,
	.rd-navbar-classic.rd-navbar-static .rd-nav-item + .rd-nav-item {
		margin-left: 4px;
	}
	.rd-navbar-static .rd-navbar-nav > li > .rd-nav-link {
		font-size: .92rem;
		padding: 8px 8px;
	}
	.nav-call { margin-left: 10px; padding: 8px 14px; }
	.nav-call__number { font-size: .95rem; }
}