/* ==========================================================================
   IFAD — Refonte visuelle 2026, direction A « Évolution premium »
   --------------------------------------------------------------------------
   Chargée APRÈS css/custom.css (héritage du gabarit Repairit). Cette feuille
   porte les jetons (couleurs, typographie, espacements), les composants
   unifiés et la mise en page des sections. Règles d'or :
   - l'or (#FFD268) est réservé au téléphone, aux actions et aux étoiles ;
   - le vert informe et oriente (liens, surtitres, coches, tuiles d'icônes) ;
   - la nuit structure (en-tête, bandeau, une section forte, pied de page) ;
   - le crème, le sable et le blanc portent la lecture.
   CSP : aucune ressource externe, icônes en masques SVG data: sur currentColor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root{
	/* Surfaces claires */
	--sand-50: #FBF8F2;
	--sand-100: #F3EDE1;
	--sand-200: #E9E1D1;
	--white: #FFFFFF;

	/* Nuit */
	--night-950: #061509;
	--night-900: #081D0D;
	--night-800: #10291A;
	--night-700: #173623;

	/* Encres */
	--ink-900: #081D0D;
	--ink-700: #26332B;
	--ink-600: #3F4A43;
	--ink-500: #56665B;
	--on-night: #FFFFFF;
	--on-night-muted: #B8C4BC;

	/* Action (téléphone) */
	--gold-500: #FFD268;
	--gold-600: #FFC233;
	--gold-700: #F5B400;

	/* Information */
	--green-700: #0B5A33;
	--green-600: #0B6B3A;
	--green-100: #D5E8DC;
	--green-50: #E6F1EA;
	--mint-300: #8FD3A8;

	/* Filets */
	--line: #E3DCCD;
	--line-strong: #8F8775;
	--line-night: rgba(255, 255, 255, .14);

	/* États */
	--danger-600: #B42318;
	--danger-50: #FDECEA;
	--success-600: #146C2E;
	--success-50: #E7F4EA;
	--star: #F2A900;

	/* Canaux RGB des jetons, pour les transparences (rgb(var(--rgb-…) / .x)) */
	--rgb-white: 255 255 255;
	--rgb-black: 0 0 0;
	--rgb-night: 8 29 13;
	--rgb-gold: 255 210 104;
	--rgb-green: 11 107 58;
	--rgb-mint: 143 211 168;
	--rgb-muted: 184 196 188;
	--rgb-danger: 180 35 24;
	--placeholder: #6B726D;

	/* Anciennes variables du gabarit : elles pointent sur les jetons */
	--primary-color: var(--night-900);
	--secondary-color: var(--sand-50);
	--text-color: var(--ink-600);
	--accent-color: var(--gold-500);
	--accent-secondary-color: var(--gold-500);
	--white-color: #FFFFFF;
	--divider-color: var(--line);
	--dark-divider-color: var(--line-night);
	--error-color: var(--danger-600);
	--bs-link-color: #0B6B3A;
	--bs-link-color-rgb: 11, 107, 58;
	--bs-link-hover-color: #081D0D;
	--bs-link-hover-color-rgb: 8, 29, 13;

	/* Typographie : rem fluides (le réglage de taille du navigateur est respecté) */
	--fs-xs: .9375rem;
	--fs-kicker: clamp(.9375rem, .9rem + .16vw, 1rem);
	--fs-sm: clamp(.9375rem, .9rem + .16vw, 1rem);
	--fs-body: clamp(1.0625rem, 1.01rem + .22vw, 1.125rem);
	--fs-lead: clamp(1.0625rem, .95rem + .55vw, 1.3125rem);
	--fs-h4: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);
	--fs-h3: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
	--fs-h2: clamp(1.75rem, 1.23rem + 2.21vw, 3rem);
	--fs-h1: clamp(2rem, 1.3rem + 3.1vw, 3.75rem);
	--fs-stat: clamp(2.25rem, 1.7rem + 2.3vw, 3.5rem);
	--lh-display: 1.06;
	--lh-heading: 1.14;
	--lh-ui: 1.3;
	--lh-text: 1.6;

	/* Espacements */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--section-y: clamp(52px, 2.25rem + 3.4vw, 88px);
	--section-y-tight: clamp(40px, 1.5rem + 2.5vw, 72px);
	--head-gap: clamp(24px, 1rem + 2vw, 48px);
	--grid-gap: clamp(16px, .75rem + 1vw, 28px);
	--card-pad: clamp(20px, .9rem + 1vw, 32px);
	--gutter: clamp(16px, 4vw, 32px);
	--measure: 66ch;

	/* Formes */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-pill: 999px;
	--shadow-1: 0 1px 2px rgb(8 29 13 / .05), 0 8px 24px -12px rgb(8 29 13 / .14);
	--shadow-2: 0 20px 44px -18px rgb(8 29 13 / .26);
	--shadow-cta: 0 6px 16px rgb(8 29 13 / .20);
	--control-h: 52px;
	--header-h: 76px;
	--cta-bar-h: 65px;
	--ease: cubic-bezier(.22, 1, .36, 1);

	/* Icônes (trait de 2 px, extrémités rondes, 24 × 24) en masque CSS */
	--i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	--i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--i-tools: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9l-3.8 3.8z'/%3E%3C/svg%3E");
	--i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
	--i-euro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M4 14h9'/%3E%3Cpath d='M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2'/%3E%3C/svg%3E");
	--i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--i-remote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3'/%3E%3Cpath d='M8 21h8M12 17v4M17 8l5-5M17 3h5v5'/%3E%3C/svg%3E");
	--i-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h8l5 5v15H6z'/%3E%3Cpath d='M14 2v5h5M9 12h7M9 16h7'/%3E%3C/svg%3E");
	--i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	--i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	--i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.3 7.5L3 21l2-5.5A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E");
	--i-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14l-1.5 8 5-3 5 3-1.5-8'/%3E%3C/svg%3E");
	--i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base et typographie
   -------------------------------------------------------------------------- */
html{
	/* Sous le pied de page (rebond iOS, barre mobile) : jamais de bande crème */
	background-color: var(--night-950);
	/* L'en-tête devient fixe après 600 px de défilement, à toutes les largeurs :
	   ancres et élément focalisé au clavier (Maj+Tab) s'arrêtent sous lui. */
	scroll-padding-top: calc(var(--header-h) + 24px);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body{
	font-size: var(--fs-body);
	line-height: var(--lh-text);
	color: var(--ink-600);
	background-color: var(--sand-50);
	font-feature-settings: "kern", "liga";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

p{
	line-height: var(--lh-text);
}

p,
li,
dd,
figcaption,
blockquote{
	text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6{
	color: var(--ink-900);
	line-height: var(--lh-heading);
	text-wrap: balance;
	font-feature-settings: "kern", "liga", "case";
}

h1{ letter-spacing: -.025em; font-weight: 720; }
h2{ letter-spacing: -.02em; font-weight: 700; }
h3{ letter-spacing: -.01em; font-weight: 640; }

strong, b{ font-weight: 650; }

::selection{
	color: var(--night-900);
	background-color: var(--gold-500);
	filter: none;
}

::-webkit-scrollbar-thumb{
	background: var(--line-strong);
}

[href^="tel:"],
.counter-value,
.pricing-figure-value,
.stat-value{
	font-variant-numeric: tabular-nums;
}

.container{
	max-width: 1280px;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Liens du contenu : vert, soulignés, épaisseur au survol */
main :is(p, address, td, small, dd) a:not([class]),
main :is(.legal-content, .service-checklist, .area-list, .accordion-body, .service-detail-card, .info-card) li a:not([class]){
	color: var(--green-600);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

main :is(p, address, td, small, dd) a:not([class]):hover,
main :is(.legal-content, .service-checklist, .area-list, .accordion-body, .service-detail-card, .info-card) li a:not([class]):hover{
	color: var(--ink-900);
	text-decoration-thickness: 2px;
}

.dark-section :is(p, li) a:not([class]),
.surface-night :is(p, li) a:not([class]){
	color: var(--white);
	text-decoration-color: var(--mint-300);
}

/* Sur nuit, le survol garde le blanc (la règle ci-dessus, plus spécifique,
   passerait le lien en encre nuit : texte invisible) et épaissit le trait or. */
:is(.dark-section, .surface-night) :is(p, li) a:not([class]):is(:hover, :focus-visible),
.steps .how-work-content p a:is(:hover, :focus-visible),
.service-aside .pricing-card a:is(:hover, :focus-visible){
	color: var(--white);
	text-decoration-color: var(--gold-500);
	text-decoration-thickness: 2px;
}

/* Focus : 3 px, décalé de 3 px, vert sur clair et or sur nuit */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
	outline: 3px solid var(--green-600);
	outline-offset: 3px;
	box-shadow: none;
}

.main-header :focus-visible,
.dark-section :focus-visible,
.surface-night :focus-visible,
.main-footer :focus-visible,
.faqs-review-box :focus-visible,
.page-contact-us .contact-us-content :focus-visible,
.service-aside .pricing-card :focus-visible{
	outline-color: var(--gold-500);
}
/* La tuile nuit « Autre panne ? » de l'accueil garde l'anneau vert : il est
   tracé à l'extérieur de la tuile, sur le crème (or sur crème : 1,35:1). */
/* Îlots clairs dans une section nuit (carte blanche du portrait, note crème
   du CTA web) : l'anneau or y tomberait à 1,3-1,4:1, le vert donne 6,2-6,6:1. */
.dark-section .hero-portrait-card :focus-visible,
.service-page-cta > .container > p.web-cta-note :focus-visible{
	outline-color: var(--green-600);
}

/* --------------------------------------------------------------------------
   3. Mouvement : fondus de bloc courts, plus de lettres qui volent
   -------------------------------------------------------------------------- */
.cb-cursor,
.cb-cursor.-visible{
	display: none;
}

.section-title h1,
.section-title h2,
.page-header-box h1,
.testimonial-slider .swiper-wrapper,
.video-play-button a{
	cursor: auto;
}

body.scroll-effects-ready .wow,
body.scroll-effects-ready .text-anime-style-1,
body.scroll-effects-ready .text-anime-style-2,
body.scroll-effects-ready .text-anime-style-3{
	transform: translate3d(0, 12px, 0);
	transition: opacity 320ms ease, transform 420ms var(--ease);
}

body.scroll-effects-ready .text-split-ready{
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition: opacity 320ms ease, transform 420ms var(--ease);
	transition-delay: var(--scroll-effect-delay, 0ms);
}

body.scroll-effects-ready .text-split-ready.is-visible{
	opacity: 1;
	transform: none;
}

/* Bloc pas encore révélé qui contient le focus clavier : visible tout de
   suite (function.js le marque ensuite « is-visible » pour de bon). */
body.scroll-effects-ready :is(.wow, .text-split-ready, .text-anime-style-1, .text-anime-style-2, .text-anime-style-3):focus-within{
	opacity: 1;
	transform: none;
}

body.scroll-effects-ready .text-split-ready .text-reveal-char,
body.scroll-effects-ready .text-split-ready.is-visible .text-reveal-char{
	opacity: 1;
	transform: none;
	transition: none;
}

.text-reveal-word{
	white-space: normal;
}

/* Rideau et brillance des images du gabarit : supprimés */
.image-anime::after,
body.scroll-effects-ready .reveal::before{
	display: none;
}

body.scroll-effects-ready .reveal img{
	transform: none;
	transition: none;
}

.reveal{
	display: block;
}

@media (prefers-reduced-motion: reduce){
	body.scroll-effects-ready .wow,
	body.scroll-effects-ready .text-split-ready,
	body.scroll-effects-ready .text-anime-style-3{
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   4. Sections, titres de section, surtitres
   -------------------------------------------------------------------------- */
.dark-section,
.surface-night{
	--bg: var(--night-900);
	--fg: var(--on-night);
	--fg-muted: var(--on-night-muted);
	--check: var(--mint-300);
	background-color: var(--night-900);
	color: var(--on-night-muted);
}

.section-row{
	margin-bottom: var(--head-gap);
}

.section-title{
	margin-bottom: var(--head-gap);
}

.section-row .section-title{
	margin-bottom: 0;
}

.section-title h1{
	font-size: var(--fs-h1);
	font-weight: 720;
	line-height: var(--lh-display);
	letter-spacing: -.028em;
}

.section-title h2{
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: var(--lh-heading);
	letter-spacing: -.022em;
}

.section-title p:not(.section-kicker){
	max-width: var(--measure);
	margin-top: 16px;
	font-size: var(--fs-body);
	line-height: var(--lh-text);
	color: var(--ink-600);
}

.dark-section .section-title p:not(.section-kicker){
	color: var(--on-night-muted);
}

/* Surtitre : courte phrase en casse normale, verte, 15-16 px, filet court
   devant (plus de capitales espacées, moins lisibles pour tous) */
.section-title h3,
.section-title .section-kicker,
.section-kicker,
.related-links-title,
.error-shortcuts-title{
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding-left: 0;
	font-size: var(--fs-kicker);
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--green-600);
	text-wrap: balance;
}

.section-title h3::before,
.section-title .section-kicker::before,
.section-kicker::before,
.related-links-title::before,
.error-shortcuts-title::before,
.service-intro .section-title .section-kicker::before,
.services-hub .section-title .section-kicker::before,
.service-page-cta .section-title .section-kicker::before{
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 18px;
	height: 2px;
	margin-top: calc(.675em - 1px);
	border-radius: var(--r-pill);
	background: currentColor;
	transform: none;
}

.dark-section .section-title .section-kicker,
.dark-section .section-title h3{
	color: var(--mint-300);
}

.section-btn{
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

/* --------------------------------------------------------------------------
   5. Boutons (3 variantes) et liens d'action
   -------------------------------------------------------------------------- */
.btn-default{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--control-h);
	padding: 0 22px;
	border: 0;
	border-radius: var(--r-md);
	background: transparent;
	color: var(--ink-900);
	box-shadow: inset 0 0 0 1.5px currentColor;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -.005em;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}

.btn-default::before{
	display: none;
}

.btn-default:hover,
.btn-default:focus-visible{
	color: var(--ink-900);
	background-color: rgb(var(--rgb-night) / .06);
}

/* Secondaire (contour) : nuit sur clair, blanc sur nuit */
.btn-default.btn-highlighted,
.btn-default.btn-ghost,
:is(.header-btn, .hero-btn, .hero-btns, .section-btn) .btn-default.btn-highlighted,
.service-page-cta .btn-default.btn-ghost{
	background: transparent;
	color: var(--ink-900);
	box-shadow: inset 0 0 0 1.5px rgb(var(--rgb-night) / .7);
}

.btn-default.btn-highlighted:hover,
.btn-default.btn-ghost:hover,
.btn-default.btn-highlighted:focus-visible,
.btn-default.btn-ghost:focus-visible,
:is(.header-btn, .hero-btn, .hero-btns, .section-btn) .btn-default.btn-highlighted:hover,
:is(.header-btn, .hero-btn, .hero-btns, .section-btn) .btn-default.btn-highlighted:focus-visible,
.service-page-cta .btn-default.btn-ghost:hover{
	color: var(--ink-900);
	background-color: rgb(var(--rgb-night) / .06);
	box-shadow: inset 0 0 0 1.5px var(--ink-900);
}

:is(.main-header, .dark-section, .surface-night) .btn-default.btn-highlighted,
:is(.main-header, .dark-section, .surface-night) .btn-default.btn-ghost,
:is(.main-header, .hero, .dark-section:not(.service-page-cta)) :is(.header-btn, .hero-btn, .hero-btns, .section-btn) .btn-default.btn-highlighted,
.page-header .btn-default.btn-ghost,
.service-page-cta .cta-card .btn-default.btn-ghost,
.service-page-cta .hero-btns .btn-default.btn-ghost,
.service-page-cta .hero-btns .btn-default.btn-highlighted{
	color: var(--white);
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgb(var(--rgb-white) / .55);
}

:is(.main-header, .dark-section, .surface-night) .btn-default.btn-highlighted:hover,
:is(.main-header, .dark-section, .surface-night) .btn-default.btn-ghost:hover,
:is(.main-header, .dark-section, .surface-night) .btn-default.btn-highlighted:focus-visible,
:is(.main-header, .hero, .dark-section:not(.service-page-cta)) :is(.header-btn, .hero-btn, .hero-btns, .section-btn) .btn-default.btn-highlighted:hover,
:is(.main-header, .hero, .dark-section:not(.service-page-cta)) :is(.header-btn, .hero-btn, .hero-btns, .section-btn) .btn-default.btn-highlighted:focus-visible,
.page-header .btn-default.btn-ghost:hover,
.service-page-cta .hero-btns .btn-default.btn-ghost:hover,
.service-page-cta .hero-btns .btn-default.btn-highlighted:hover{
	color: var(--white);
	background-color: rgb(var(--rgb-white) / .08);
	box-shadow: inset 0 0 0 1.5px var(--white);
}

/* Principal (or) : appel et envoi du formulaire, jaune dans tous ses états */
.btn-default.btn-call,
.btn-default.contact-submit,
.dark-section .btn-default.btn-call{
	background-color: var(--gold-500);
	color: var(--night-900);
	font-weight: 700;
	box-shadow: var(--shadow-cta);
}

/* Sur fond clair, liseré intérieur pour compenser le faible contraste de forme */
:is(.sand, main section:not(.dark-section), .service-page-body, .our-faqs, .page-contact-us, .page-team-single) .btn-default:is(.btn-call, .contact-submit){
	box-shadow: inset 0 0 0 1.5px rgb(var(--rgb-night) / .55), var(--shadow-cta);
}

.dark-section .btn-default.btn-call,
.faqs-review-box .btn-default.btn-call,
.service-page-cta .btn-default.btn-call{
	box-shadow: var(--shadow-cta);
}

.btn-default.btn-call:hover,
.btn-default.btn-call:focus-visible,
.btn-default.contact-submit:hover,
.btn-default.contact-submit:focus-visible{
	background-color: var(--gold-600);
	color: var(--night-900);
	transform: translateY(-1px);
}

.btn-default.btn-call:active,
.btn-default.contact-submit:active{
	background-color: var(--gold-700);
	transform: none;
}

.btn-default.btn-call::after{
	width: 1.05em;
	height: 1.05em;
	margin-right: 0;
	-webkit-mask-image: var(--i-phone);
	mask-image: var(--i-phone);
}

/* Lien d'action (tertiaire) : vert, flèche */
.btn-link{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--green-600);
	font-weight: 650;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.btn-link::after{
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
	transition: transform .15s ease;
}

.btn-link:hover{
	color: var(--ink-900);
	text-decoration-thickness: 2px;
}

.btn-link:hover::after{
	transform: translateX(2px);
}

.dark-section .btn-link{
	color: var(--white);
	text-decoration-color: var(--mint-300);
}

@media (prefers-reduced-motion: reduce){
	.btn-default,
	.btn-link::after{
		transition: none;
	}

	.btn-default.btn-call:hover,
	.btn-default.btn-call:focus-visible,
	.btn-default.contact-submit:hover,
	.btn-default.contact-submit:focus-visible,
	.btn-link:hover::after{
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   6. En-tête et navigation
   -------------------------------------------------------------------------- */
header.main-header{
	background-color: var(--night-900);
	border-bottom: 1px solid var(--line-night);
}

header.main-header .header-sticky.active{
	background-color: var(--night-900);
}

.navbar{
	min-height: var(--header-h);
	padding: 12px 0;
}

.navbar-brand img{
	width: 130px;
	height: auto;
}

.main-menu ul li.nav-item a{
	position: relative;
	font-size: .9375rem;
	font-weight: 520;
	color: rgb(var(--rgb-white) / .84);
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--white);
}

.main-menu ul li.nav-item > a[aria-current="page"]{
	color: var(--white);
}

.main-menu ul li.nav-item > a[aria-current="page"]::after{
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 4px;
	height: 2px;
	border-radius: var(--r-pill);
	background: var(--gold-500);
}

.main-menu ul li.highlighted-menu{
	display: none;
}

@media (min-width: 992px){
	/* Logo de taille fixe (il ne rétrécit plus selon la longueur du bouton
	   d'action) ; si le texte est agrandi ou espacé, le menu passe sur deux
	   lignes au lieu de pousser le bouton hors de l'écran. */
	.main-header .navbar-brand{
		flex-shrink: 0;
	}

	.main-menu .nav-menu-wrapper{
		min-width: 0;
	}

	.main-menu .nav-menu-wrapper > ul{
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Le téléphone devient l'élément le plus « bouton » de l'en-tête */
	.header-phone{
		gap: 9px;
		min-height: 44px;
		margin-right: 10px;
		padding: 0 18px;
		border-radius: var(--r-pill);
		background-color: var(--gold-500);
		color: var(--night-900);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: -.005em;
		box-shadow: var(--shadow-cta);
		transition: background-color .15s ease, transform .15s ease;
	}

	.header-phone:hover,
	.header-phone:focus-visible{
		background-color: var(--gold-600);
		color: var(--night-900);
	}

	.header-phone .fa-phone{
		width: 15px;
		height: 15px;
		-webkit-mask-image: var(--i-phone);
		mask-image: var(--i-phone);
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	/* « Décrire ma panne » rétrogradé : contour fin */
	.header-btn .btn-default.btn-highlighted,
	:is(.main-header) :is(.header-btn) .btn-default.btn-highlighted{
		min-height: 44px;
		padding: 0 16px;
		font-size: .9375rem;
		font-weight: 600;
		box-shadow: inset 0 0 0 1px rgb(var(--rgb-white) / .38);
	}
}

@media (min-width: 992px) and (max-width: 1199px){
	.header-btn{
		display: none;
	}

	.header-phone{
		width: auto;
		margin-right: 0;
		padding: 0 14px;
		box-shadow: var(--shadow-cta);
	}

	.header-phone-num{
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		font-size: .9375rem;
	}

	.main-menu ul li.nav-item a{
		font-size: .875rem;
	}

	.navbar-brand img{
		width: 128px;
	}
}


/* Menu mobile (slicknav) : tiroir nuit, grandes cibles, page courante marquée */
@media (max-width: 991px){
	.navbar{
		min-height: 68px;
		padding: 10px 0;
	}

	.navbar-brand img{
		width: 132px;
	}

	/* Logo (lien vers l'accueil) : zone de toucher de 44 px */
	.main-header .navbar-brand{
		padding-block: 3px;
		margin-block: -3px;
	}

	.slicknav_btn{
		width: 48px;
		height: 48px;
		border-radius: var(--r-md);
		background: transparent;
		box-shadow: inset 0 0 0 1.5px rgb(var(--rgb-white) / .35);
	}

	.slicknav_icon .slicknav_icon-bar{
		width: 20px;
		height: 2px;
		background-color: var(--white);
	}

	.slicknav_menu{
		background: var(--night-900);
		border-top: 1px solid var(--line-night);
		box-shadow: var(--shadow-2);
	}

	.slicknav_menu ul{
		margin: 0;
		padding: 8px var(--gutter) 20px;
	}

	.slicknav_nav li{
		border-bottom: 1px solid var(--line-night);
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav li a{
		min-height: 56px;
		padding: 0 4px;
		font-size: 1.125rem;
		font-weight: 600;
		color: var(--white);
	}

	.slicknav_nav a:hover,
	.slicknav_nav a:focus,
	.slicknav_nav .slicknav_row:hover{
		color: var(--gold-500);
		background: transparent;
	}

	.slicknav_nav a[aria-current="page"]{
		text-decoration: none;
		box-shadow: inset 3px 0 0 var(--gold-500);
		padding-left: 16px;
	}

	.main-header .slicknav_nav a:focus-visible{
		outline: 3px solid var(--gold-500);
		outline-offset: -3px;
		color: var(--white);
	}

	/* Arrondi porté par l'élément de liste : custom.css force border-radius: 0
	   (!important) sur les liens du tiroir */
	.slicknav_nav li.highlighted-menu{
		display: block;
		margin-top: 16px;
		border-bottom: 0;
		border-radius: var(--r-md);
		overflow: hidden;
	}

	/* Appeler : icône, numéro, puis les horaires sur une seconde ligne */
	.slicknav_nav li.highlighted-menu a{
		display: grid;
		grid-template-columns: 20px auto;
		justify-content: center;
		align-content: center;
		align-items: center;
		column-gap: 12px;
		row-gap: 1px;
		min-height: 68px;
		padding: 10px 16px;
		background: var(--gold-500);
		color: var(--night-900);
		font-size: 1.0625rem;
		font-weight: 700;
		line-height: 1.25;
	}

	.slicknav_nav li.highlighted-menu a::before{
		content: "";
		grid-row: 1 / span 2;
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask: var(--i-phone) center / contain no-repeat;
		mask: var(--i-phone) center / contain no-repeat;
	}

	.menu-call-num{
		font-variant-numeric: tabular-nums;
	}

	/* Horaires : chiffres proportionnels (le lien tel: est tabulaire) */
	.menu-call-hours{
		color: var(--ink-700);
		font-size: 1rem;
		font-weight: 550;
		font-variant-numeric: normal;
	}

	.slicknav_nav li.highlighted-menu a:hover,
	.slicknav_nav li.highlighted-menu a:focus{
		color: var(--night-900);
		background: var(--gold-600);
	}
}

/* --------------------------------------------------------------------------
   7. Icônes : une seule famille (trait de 2 px) en masque sur currentColor
   -------------------------------------------------------------------------- */
.service-icon-phone{ --service-icon: var(--i-phone); }
.service-icon-tools{ --service-icon: var(--i-tools); }
.service-icon-search{ --service-icon: var(--i-search); }
.service-icon-euro{ --service-icon: var(--i-euro); }
.service-icon-clock{ --service-icon: var(--i-clock); }
.service-icon-remote{ --service-icon: var(--i-remote); }
.service-icon-receipt{ --service-icon: var(--i-receipt); }
.service-icon-pin{ --service-icon: var(--i-pin); }
.service-icon-mail{ --service-icon: var(--i-mail); }
.service-icon-chat{ --service-icon: var(--i-chat); }
.service-icon-award{ --service-icon: var(--i-award); }
.key-icon-euro{ --service-icon: var(--i-euro); }
.key-icon-route{ --service-icon: var(--i-pin); }
.key-icon-tools{ --service-icon: var(--i-tools); }
.key-icon-clock{ --service-icon: var(--i-clock); }

/* Icônes de la police du gabarit (téléphone, e-mail, adresse) : même famille
   au trait que le reste du site */
.fa-phone{ --fa-icon: var(--i-phone); }
.fa-envelope{ --fa-icon: var(--i-mail); }
.fa-location-dot{ --fa-icon: var(--i-pin); width: 1em; }

/* Tuile d'icône : 44 px, teinte verte */
.icon-tile,
.service-pages-icon,
.key-info-icon,
.protection-card-icon,
.home-web-offer-icon,
.about-photo-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	background-color: var(--green-50);
	color: var(--green-700);
}

.icon-tile::before,
.service-pages-icon::before,
.key-info-icon::before,
.protection-card-icon::before,
.home-web-offer-icon::before,
.about-photo-icon::before{
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--service-icon) center / contain no-repeat;
	mask: var(--service-icon) center / contain no-repeat;
}

.dark-section .icon-tile{
	background-color: rgb(var(--rgb-mint) / .14);
	color: var(--mint-300);
}

/* --------------------------------------------------------------------------
   8. Composants communs : coches, cartes, badge de note, avatars
   -------------------------------------------------------------------------- */

/* Liste à coches : cercle vert pâle, coche verte */
.service-checklist li,
.area-list li,
.protection-list ul li,
.about-us-list ul li,
.how-work-content ul li,
.contact-reassurance li,
.web-example-points li,
.check-list li,
.member-professional-info-content ul li,
.legal-content ul li{
	position: relative;
	padding-left: 32px;
	line-height: 1.5;
	color: var(--ink-700);
}

.service-checklist li::before,
.area-list li::before,
.protection-list ul li::before,
.about-us-list ul li::before,
.how-work-content ul li::before,
.contact-reassurance li::before,
.web-example-points li::before,
.check-list li::before{
	content: "";
	position: absolute;
	left: 0;
	top: calc(.75em - 10px);
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background-color: var(--green-50);
	background-image: none;
	color: inherit;
	transform: none;
	font-size: inherit;
	-webkit-mask: none;
	mask: none;
}

.service-checklist li::after,
.area-list li::after,
.protection-list ul li::after,
.about-us-list ul li::after,
.how-work-content ul li::after,
.contact-reassurance li::after,
.web-example-points li::after,
.check-list li::after{
	content: "";
	position: absolute;
	left: 4.5px;
	top: calc(.75em - 5.5px);
	width: 11px;
	height: 11px;
	background-color: var(--green-600);
	-webkit-mask: var(--i-check) center / contain no-repeat;
	mask: var(--i-check) center / contain no-repeat;
}

/* Pages légales : puce neutre (point gris). Les coches vertes restent
   réservées aux listes d'avantages : une exclusion ou une restriction
   (droit de rétractation…) ne porte pas le signe « validé ». */
.legal-content ul li{
	padding-left: 22px;
}

.legal-content ul li::before{
	content: "";
	position: absolute;
	left: 4px;
	top: calc(.75em - 3px);
	width: 6px;
	height: 6px;
	border: 0;
	border-radius: 50%;
	background-color: var(--ink-500);
	background-image: none;
	transform: none;
	-webkit-mask: none;
	mask: none;
}

.legal-content ul li::after{
	content: none;
}

.dark-section .how-work-content ul li,
.dark-section .check-list li{
	color: var(--on-night-muted);
}

.dark-section .how-work-content ul li::before,
.dark-section .check-list li::before{
	background-color: rgb(var(--rgb-mint) / .16);
}

.dark-section .how-work-content ul li::after,
.dark-section .check-list li::after{
	background-color: var(--mint-300);
}

/* Carte */
.rd-card,
.service-detail-card,
.info-card,
.pricing-card,
.legal-card{
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-1);
}

/* Avatars à initiales */
.review-initials{
	width: 44px;
	height: 44px;
	background: var(--green-50);
	color: var(--green-700);
	font-size: .9375rem;
	font-weight: 650;
	letter-spacing: .02em;
}

.author-image{
	flex: 0 0 44px;
	margin-right: 14px;
}

.review-avatar{
	width: 44px;
	height: 44px;
}

.author-image img.google-review-avatar{
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

/* Étoiles : une seule valeur, décoratives, toujours accompagnées du texte */
.testimonial-rating i,
.hero-google-rating-stars,
.reviews-summary-stars,
.why-choose-rating-stars,
.google-proof-stars,
.review-rating-box i{
	color: var(--star);
}

/* Statistiques : une seule rangée de chiffres uniques */
.why-choose-counter-list.stats-row{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: var(--space-7);
	padding-top: 40px;
	border-top: 1px solid var(--line-night);
}

.stats-row .why-choose-counter-item{
	width: auto;
	padding-left: 24px;
	border-left: 1px solid var(--line-night);
}

.stats-row .why-choose-counter-item:first-child{
	padding-left: 0;
	border-left: 0;
}

.stats-row .why-choose-counter-item::after{
	display: none;
}

.stats-row .why-choose-counter-item p.counter-value{
	margin: 0 0 6px;
	font-size: var(--fs-stat);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--white);
}

.stats-row .why-choose-counter-item p:not(.counter-value){
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--on-night-muted);
}

/* Accordéon FAQ unique (accueil, FAQ, pages) */
.faq-accordion .accordion-item{
	/* visible : l'anneau de focus du bouton n'est plus rogné */
	overflow: visible;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: none;
	transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

/* Question ouverte : fond sauge très léger et filet vert à gauche */
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
	border-color: var(--green-100);
	background: var(--green-50);
	box-shadow: inset 4px 0 0 var(--green-600);
}

.faq-accordion .accordion-header .accordion-button,
.faq-accordion .accordion-header .accordion-button.collapsed{
	min-height: 64px;
	padding: 18px 68px 18px 24px;
	background: transparent;
	color: var(--ink-900);
	font-size: var(--fs-h4);
	font-weight: 640;
	line-height: 1.35;
	letter-spacing: -.01em;
	box-shadow: none;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	top: 50%;
	right: 22px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background-color: transparent;
	background-image: none;
	box-shadow: inset 0 0 0 1.5px var(--green-600);
	color: var(--green-600);
	-webkit-mask: none;
	mask: none;
	font-size: 0;
}

.faq-accordion .accordion-item .accordion-button::before{
	content: "";
	position: absolute;
	top: 50%;
	right: 29px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background-color: var(--green-600);
	-webkit-mask: var(--i-minus) center / contain no-repeat;
	mask: var(--i-minus) center / contain no-repeat;
	z-index: 1;
}

.faq-accordion .accordion-item .accordion-button.collapsed::before{
	-webkit-mask-image: var(--i-plus);
	mask-image: var(--i-plus);
}

/* Survol : la question se teinte et le rond +/− se remplit */
.faq-accordion .accordion-header .accordion-button.collapsed:hover{
	border-radius: calc(var(--r-lg) - 1px);
	background: var(--green-50);
}

.faq-accordion .accordion-item .accordion-button:hover::after{
	background-color: var(--green-100);
}

/* Focus clavier visible sur les questions (accueil, FAQ, pages) */
.faq-accordion .accordion-header .accordion-button:focus-visible,
.accordion-button:focus-visible{
	z-index: 3;
	outline: 3px solid var(--green-600);
	outline-offset: 2px;
	border-radius: var(--r-lg);
	box-shadow: none;
}

.faq-accordion .accordion-item .accordion-body{
	padding: 0 32px 24px 24px;
	border-top: 0;
}

.faq-accordion .accordion-item .accordion-body p{
	max-width: 68ch;
	font-size: var(--fs-body);
	color: var(--ink-600);
}

/* Formulaires */
.form-label,
.contact-form .form-label{
	margin-bottom: 8px;
	color: var(--ink-900);
	font-size: var(--fs-sm);
	font-weight: 650;
	line-height: 1.4;
}

.contact-form .form-control,
.form-control{
	min-height: var(--control-h);
	padding: 12px 16px;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--r-md);
	background-color: var(--white);
	color: var(--ink-900);
	font-size: 1.0625rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.contact-form textarea.form-control{
	min-height: 132px;
}

.form-control::placeholder{
	color: var(--placeholder);
	opacity: 1;
}

.contact-form .form-control:hover{
	border-color: var(--ink-500);
}

/* Champ actif : même anneau de 3 px que le reste du site (un halo à 20 %
   était trop discret, et disparaissait en couleurs forcées) */
.contact-form .form-control:focus,
.form-control:focus{
	border-color: var(--green-600);
	outline: 3px solid var(--green-600);
	outline-offset: 2px;
	box-shadow: none;
}

.has-error .form-control{
	border-color: var(--danger-600);
	box-shadow: 0 0 0 4px rgb(var(--rgb-danger) / .12);
}

.help-block.with-errors ul li{
	position: relative;
	margin-top: 6px;
	padding-left: 24px;
	color: var(--danger-600);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
}

.help-block.with-errors ul li::before{
	content: "!";
	position: absolute;
	left: 0;
	top: 1px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--danger-600);
	color: var(--white);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

.contact-form .form-hint,
.contact-form .form-note{
	color: var(--ink-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.contact-form-alert{
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.contact-form-alert-error{
	background: var(--danger-50);
	color: var(--danger-600);
	box-shadow: inset 3px 0 0 var(--danger-600);
}

.contact-form-alert-success{
	background: var(--success-50);
	color: var(--success-600);
	box-shadow: inset 3px 0 0 var(--success-600);
}

.contact-select-wrap::after{
	color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   9. Accueil
   -------------------------------------------------------------------------- */

/* 9.1 Bandeau : vrai visage, promesse, appel */
.hero.hero-home{
	position: relative;
	isolation: isolate;
	padding: clamp(28px, 1rem + 4vw, 72px) 0 clamp(64px, 3rem + 4vw, 120px);
	background-color: var(--night-900);
	background-image:
		radial-gradient(800px 480px at 88% 8%, rgb(var(--rgb-gold) / .09), transparent 62%),
		radial-gradient(700px 520px at -6% 108%, rgb(var(--rgb-mint) / .08), transparent 64%);
	background-repeat: no-repeat;
	background-size: auto;
	overflow: hidden;
}

.hero.hero-home::before,
.hero.hero-home::after{
	display: none;
}

.hero-grid{
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	align-items: center;
	gap: clamp(32px, 4vw, 72px);
}

.hero-home .hero-content{
	text-align: left;
	margin: 0;
}

.hero-home .section-title{
	margin-bottom: 32px;
}

.hero-byline{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.hero-byline-avatar{
	display: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--night-900), 0 0 0 3.5px rgb(var(--rgb-white) / .4);
}

.hero-home .section-title .section-kicker{
	margin: 0;
	color: var(--mint-300);
}

.hero-byline-name{
	display: none;
}

.hero-home .section-title h1{
	max-width: 15.5em;
	font-size: clamp(2rem, 1.2rem + 3vw, 3.625rem);
	color: var(--white);
}

.hero-h1-place{
	color: var(--gold-500);
	white-space: nowrap;
}

.hero-home .section-title p.hero-lead{
	max-width: 54ch;
	margin-top: 20px;
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--on-night-muted);
}

.hero-home .hero-content-body{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}

.hero-home .hero-btn{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-home .hero-btn .btn-default{
	min-height: 56px;
	padding: 0 26px;
	font-size: 1.0625rem;
}

.hero-home .hero-google-rating{
	width: auto;
	justify-content: flex-start;
}

.hero-google-rating a{
	gap: 10px;
	min-height: 44px;
	padding: 6px 16px 6px 12px;
	border: 1px solid var(--line-night);
	background: rgb(var(--rgb-white) / .05);
	color: rgb(var(--rgb-white) / .9);
	font-size: var(--fs-sm);
}

.hero-google-rating a:hover,
.hero-google-rating a:focus-visible{
	border-color: rgb(var(--rgb-white) / .4);
	background: rgb(var(--rgb-white) / .09);
}

.hero-google-rating-stars{
	font-size: 1rem;
	letter-spacing: 2px;
}

.hero-google-rating strong{
	color: var(--white);
	font-weight: 700;
}

/* Portrait réel */
.hero-portrait{
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 420px;
	margin: 0;
}

.hero-portrait picture,
.hero-portrait img{
	display: block;
	width: 100%;
}

.hero-portrait img{
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-xl);
	background: var(--night-800);
	box-shadow: var(--shadow-2);
}

.hero-portrait-card{
	position: absolute;
	left: -32px;
	bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 18px 14px 16px;
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-2);
	line-height: 1.3;
}

.hero-portrait-card::before{
	content: "";
	position: absolute;
	left: -1px;
	top: 14px;
	bottom: 14px;
	width: 3px;
	border-radius: var(--r-pill);
	background: var(--green-600);
}

.hero-portrait-name{
	color: var(--ink-900);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.hero-portrait-role{
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: 500;
}

/* Note Google dans le cartouche (valeurs mises à jour par google-reviews.js) */
.hero-portrait-rating{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	color: var(--ink-600);
	font-size: var(--fs-xs);
	font-weight: 500;
	white-space: nowrap;
}

.hero-portrait-rating .fa-google{
	width: 15px;
	height: 15px;
	color: var(--ink-900);
}

.hero-portrait-stars{
	color: var(--star);
	font-size: .9375rem;
	letter-spacing: 2px;
	line-height: 1;
}

.hero-portrait-rating strong{
	color: var(--ink-900);
	font-weight: 700;
}

/* La note du portrait renvoie à la fiche Google (vérifiable en un clic) */
a.hero-portrait-rating{
	text-decoration: none;
}

a.hero-portrait-rating .hero-portrait-score{
	text-decoration: underline;
	text-decoration-color: rgb(var(--rgb-night) / .3);
	text-underline-offset: 3px;
}

a.hero-portrait-rating:hover .hero-portrait-score{
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

/* Sur grand écran, la note est portée par le cartouche du portrait */
@media (min-width: 992px){
	.hero-home .hero-google-rating{
		display: none;
	}
}

/* 9.2 Infos clés : carte blanche qui chevauche le bandeau */
.home-key-info{
	position: relative;
	z-index: 2;
	margin-top: -52px;
	padding: 0;
	background: transparent;
	color: var(--ink-900);
}

.home-key-info-list{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-2);
}

.home-key-info-list li{
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 14px;
	row-gap: 0;
	align-content: center;
	padding: 16px 18px;
	border-left: 0;
	border-radius: var(--r-md);
	text-align: left;
	line-height: 1.35;
	transition: background-color .15s ease;
}

.home-key-info-list li + li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 18px;
	width: 1px;
	background: var(--line);
}

.home-key-info-list li:nth-child(-n + 2):hover{
	background-color: var(--sand-50);
}

.key-info-icon{
	grid-row: 1 / span 2;
}

.home-key-info-list strong{
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ink-900);
	letter-spacing: -.01em;
}

.home-key-info-list span:not(.key-info-icon),
.home-key-info-list a{
	font-size: var(--fs-sm);
	color: var(--ink-500);
}

/* Montants en gros chiffres tabulaires (diagnostic, déplacement) */
.home-key-info-list .key-info-price strong{
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 4px;
}

.home-key-info-list .key-info-price .key-info-figure{
	color: var(--ink-900);
	font-size: clamp(1.875rem, 1.45rem + 1vw, 2.375rem);
	font-weight: 720;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.home-key-info-list .key-info-price .key-info-label{
	color: var(--ink-700);
	font-size: var(--fs-sm);
	font-weight: 650;
	letter-spacing: 0;
	line-height: 1.25;
}

.home-key-info-list a{
	position: static;
	color: var(--green-600);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Toute la cellule est cliquable */
.home-key-info-list a::after{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--r-md);
}

.home-key-info-list a:focus-visible{
	outline: none;
}

.home-key-info-list a:focus-visible::after{
	outline: 3px solid var(--green-600);
	outline-offset: 0;
}

/* 9.3 Prestations : tuiles d'entrée par problème, puis domicile / atelier */
.our-protection.home-services{
	padding: calc(var(--section-y) - 8px) 0 var(--section-y);
	background: var(--sand-50);
}

.home-services .service-pages{
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.home-services .service-pages .section-title{
	margin-bottom: var(--head-gap);
}

.home-services .service-pages-title{
	margin: 0;
	text-align: left;
	font-size: var(--fs-h2);
}

.service-pages-list{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.service-pages-list li{
	min-width: 0;
	flex: none;
}

.service-pages-list a{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	min-height: 128px;
	padding: 18px 44px 18px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	color: var(--ink-900);
	font-size: 1.0625rem;
	font-weight: 640;
	line-height: 1.3;
	letter-spacing: -.01em;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.service-pages-list a::after{
	position: absolute;
	right: 16px;
	bottom: 20px;
	width: 16px;
	height: 16px;
	margin: 0;
	opacity: .55;
	-webkit-mask-image: var(--i-arrow);
	mask-image: var(--i-arrow);
}

.service-pages-list a:hover,
.service-pages-list a:focus-visible{
	border-color: rgb(var(--rgb-green) / .35);
	background: var(--white);
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

.service-pages-list a:hover::after{
	opacity: 1;
	color: var(--green-600);
}

/* Tuile « Appeler » : la seule tuile nuit (12e case) */
.service-pages-list .service-pages-call a{
	border-color: var(--night-900);
	background: var(--night-900);
	color: var(--white);
}

.service-pages-list .service-pages-call .service-pages-icon{
	background: var(--gold-500);
	color: var(--night-900);
}

.service-pages-list .service-pages-call a::after{
	opacity: 1;
	color: var(--gold-500);
	background-color: var(--gold-500);
}

.service-pages-list .service-pages-call a:hover{
	border-color: var(--night-800);
	background: var(--night-800);
	color: var(--white);
}

/* « Autre panne ? » puis le numéro en or, insécable */
.service-pages-call-text{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.service-pages-call-label{
	color: var(--white);
}

.service-pages-call-num{
	color: var(--gold-500);
	font-size: 1.25rem;
	font-weight: 720;
	letter-spacing: -.01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.service-pages-icon{
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
}

/* Domicile / atelier : 2 cartes égales */
.home-services .our-protection-box{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap);
	margin-top: var(--space-8);
}

.protection-card.protection-content{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: auto;
	padding: clamp(24px, 1rem + 2vw, 44px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--white);
	box-shadow: var(--shadow-1);
}

.protection-card-icon{
	position: absolute;
	top: clamp(24px, 1rem + 2vw, 44px);
	right: clamp(24px, 1rem + 2vw, 44px);
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: var(--r-lg);
}

/* Pastille prix : première ligne de la carte, centrée sur la tuile d'icône */
.price-pill{
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 0;
	padding: 7px 16px;
	border: 1px solid var(--green-100);
	border-radius: var(--r-pill);
	background: var(--green-50);
	color: var(--green-700);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.3;
}

.price-pill strong{
	color: var(--ink-900);
	font-size: 1.1875rem;
	font-weight: 720;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.protection-card > .price-pill{
	margin: 9px 0 22px;
}

.protection-card .section-title .section-kicker{
	margin-bottom: 8px;
}

.protection-card .section-title .section-kicker::before{
	margin-top: calc(.675em - 1px);
}

/* Atelier : texture photo discrète (carte mère, sans visage) en tête de
   carte, monochrome et fondue dans le blanc ; le texte reste sur fond clair */
.protection-card--workshop{
	isolation: isolate;
	overflow: hidden;
}

.protection-card--workshop::before{
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	z-index: -1;
	height: min(62%, 300px);
	background: url("../images/atelier-fond-720.webp") 50% 45% / cover no-repeat;
	filter: grayscale(1) sepia(.5) hue-rotate(60deg) saturate(.7);
	opacity: .22;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .7) 45%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .7) 45%, transparent 100%);
	pointer-events: none;
}

.protection-card-icon::before{
	width: 26px;
	height: 26px;
}

.protection-card .section-title{
	margin-bottom: 24px;
	padding-bottom: 0;
	border-bottom: 0;
}

.protection-card .section-title h2{
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	letter-spacing: -.02em;
}

.protection-card .section-title p:not(.section-kicker){
	font-size: var(--fs-body);
}

.protection-card .protection-list{
	width: 100%;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.protection-card .protection-list ul{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.protection-card .protection-list ul li{
	width: auto;
}

.protection-card .protection-btn{
	margin-top: auto;
	padding-top: 32px;
}

/* 9.4 Avis : fond sable, cartes blanches, sans défilement automatique */
.our-testimonials{
	padding: var(--section-y) 0;
	background-color: var(--sand-100);
	background-image: none;
}

.our-testimonials .section-title h2{
	color: var(--ink-900);
}

.our-testimonials .testimonial-slider .swiper{
	overflow: visible;
	clip-path: inset(-40px -1px -40px -1px);
}

/* clip-path masque les diapositives suivantes sans supprimer leur débordement :
   sans overflow: clip sur html et body (iOS 15 et moins, Chrome < 90), la page
   défilerait de côté. Ces navigateurs rognent donc le carrousel (et ses ombres). */
@supports not (overflow: clip){
	.our-testimonials .testimonial-slider .swiper{
		overflow: hidden;
	}
}

.testimonial-slider .swiper-wrapper{
	align-items: stretch;
}

.testimonial-slider .swiper-slide{
	height: auto;
}

.testimonial-slider .swiper:not(.swiper-initialized) .swiper-slide{
	margin-right: 16px;
	width: calc((100% - 16px) / 1.08);
}

@media (min-width: 768px){
	.testimonial-slider .swiper:not(.swiper-initialized) .swiper-slide{
		margin-right: 20px;
		width: calc((100% - 20px) / 2);
	}
}

@media (min-width: 1200px){
	.testimonial-slider .swiper:not(.swiper-initialized) .swiper-slide{
		margin-right: 24px;
		width: calc((100% - 24px) / 2);
	}
}

/* Tuile de note (5,0 géant) à gauche de 2 avis sur grand écran ; bandeau
   horizontal au-dessus du carrousel sur tablette et téléphone */
.reviews-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gap);
	align-items: stretch;
}

.reviews-slider-col{
	min-width: 0;
}

.reviews-score{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(24px, 1rem + 1.2vw, 36px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-1);
}

.reviews-score-figure{
	display: flex;
	align-items: baseline;
	margin: 0;
	color: var(--ink-900);
	font-size: clamp(4rem, 2.6rem + 3.4vw, 6.25rem);
	font-weight: 760;
	line-height: .9;
	letter-spacing: -.05em;
	font-variant-numeric: tabular-nums;
}

.reviews-score-max{
	margin-left: 6px;
	color: var(--ink-500);
	font-size: max(.26em, 1.25rem);
	font-weight: 600;
	letter-spacing: 0;
}

.reviews-score-body{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.reviews-score-stars{
	color: var(--star);
	font-size: 1.375rem;
	letter-spacing: 4px;
	line-height: 1.2;
}

.reviews-score-count{
	margin: 0;
	color: var(--ink-700);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.35;
}

.reviews-score .reviews-score-link{
	margin-top: auto;
}

@media (min-width: 1200px){
	.reviews-layout{
		grid-template-columns: minmax(300px, .8fr) minmax(0, 2fr);
		gap: 24px;
	}

	.reviews-score{
		justify-content: center;
		gap: 18px;
	}

	.reviews-score .reviews-score-link{
		margin-top: 8px;
	}

	/* Les cartes d'avis prennent la hauteur de la tuile (puces comprises) */
	.reviews-slider-col,
	.reviews-slider-col .testimonial-slider,
	.reviews-slider-col .swiper{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		min-width: 0;
		height: 100%;
	}

	.reviews-slider-col .swiper-wrapper{
		flex: 1 1 auto;
		height: auto;
	}

	/* Puces sous les cartes, hors de la rangée : tuile et cartes ont
	   la même hauteur */
	.reviews-layout{
		margin-bottom: 60px;
	}

	.our-testimonials .reviews-slider-col .swiper{
		position: relative;
		clip-path: inset(-40px -1px -80px -1px);
	}

	.reviews-slider-col .testimonial-pagination{
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 16px;
	}
}

@media (max-width: 1199px){
	.reviews-score{
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 24px;
	}

	.reviews-score-body{
		padding-left: 24px;
		border-left: 1px solid var(--line);
	}

	.reviews-score .reviews-score-link{
		margin-top: 0;
	}
}

@media (max-width: 575px){
	.reviews-score{
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 18px;
		row-gap: 10px;
		padding: 20px;
	}

	.reviews-score-body{
		padding-left: 18px;
	}

	.reviews-score .reviews-score-link{
		grid-column: 1 / -1;
	}
}

.testimonial-item{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-1);
}

.testimonial-item::before{
	display: none;
}

/* La carte sert de conteneur : sa largeur réelle (téléphone, grille à trois
   colonnes, carrousel) décide de la place des étoiles. */
.testimonial-item{
	container: review-card / inline-size;
}

/* En-tête en grille : auteur à gauche, étoiles en haut à droite, alignés en
   haut quelle que soit la longueur du nom */
.testimonial-header{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 0;
	border-bottom: 0;
}

.testimonial-header .testimonial-author{
	align-items: flex-start;
}

.testimonial-header .testimonial-rating{
	justify-self: end;
	padding-top: 3px;
}

/* Carte étroite : les étoiles passent sous le nom, alignées sur « Avis
   Google » (avatar 44 px + 14 px), au lieu de recouvrir un nom long. */
@container review-card (max-width: 330px){
	.testimonial-header{
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}

	.testimonial-header .testimonial-rating{
		justify-self: start;
		margin-left: 58px;
		padding-top: 0;
	}
}

.page-testimonials .testimonial-item .testimonial-header{
	margin-bottom: 16px;
	padding-bottom: 0;
}

.author-content h3,
.author-content h2{
	margin-bottom: 2px;
	overflow-wrap: anywhere;
	color: var(--ink-900);
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.author-content p,
.page-testimonials .testimonial-item .author-content p{
	color: var(--ink-500);
	font-size: var(--fs-xs);
	line-height: 1.4;
	opacity: 1;
}

.testimonial-rating{
	gap: 1px;
}

.testimonial-rating i{
	font-size: 15px;
}

.testimonial-content p{
	color: var(--ink-700);
	font-size: var(--fs-body);
	line-height: 1.6;
}

.testimonial-pagination{
	min-height: 44px;
	margin-top: 28px;
}

/* Puce inactive : seule trace visuelle du bouton, donc 3:1 minimum
   (encre 500 sur sable 100 : 5,2:1) ; la puce active se lit à sa largeur. */
.testimonial-pagination .swiper-pagination-bullet::before{
	width: 8px;
	height: 8px;
	background: var(--ink-500);
	opacity: 1;
}

.testimonial-pagination .swiper-pagination-bullet-active::before{
	width: 22px;
	background: var(--green-600);
	opacity: 1;
}

.testimonial-pagination .swiper-pagination-lock{
	display: none;
}

.our-testimonials .google-reviews-notice{
	max-width: 760px;
	margin: 12px auto 0;
	color: var(--ink-500);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

/* 9.5 Étapes : la seule bande nuit intermédiaire */
.how-it-work{
	margin-bottom: 0;
	padding: var(--section-y) 0;
	background-color: var(--night-900);
	background-image:
		radial-gradient(700px 400px at 100% 0%, rgb(var(--rgb-mint) / .07), transparent 60%),
		radial-gradient(600px 400px at 0% 100%, rgb(var(--rgb-gold) / .05), transparent 60%);
	background-size: auto;
}

.steps{
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.step{
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.step-num{
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--night-900);
	box-shadow: inset 0 0 0 1.5px rgb(var(--rgb-mint) / .55);
	color: var(--mint-300);
	font-size: .9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

.step:not(:last-child)::after{
	content: "";
	position: absolute;
	top: 22px;
	left: 56px;
	right: -16px;
	height: 1px;
	background: linear-gradient(90deg, rgb(var(--rgb-mint) / .45), rgb(var(--rgb-white) / .1));
}

.step-title{
	margin: 20px 0 10px;
	color: var(--white);
	font-size: var(--fs-h4);
	font-weight: 650;
	letter-spacing: -.01em;
}

.steps .how-work-content p{
	margin: 0;
	color: var(--on-night-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.steps .how-work-content p a{
	color: var(--white);
	text-decoration-color: var(--mint-300);
}

.steps .how-work-content ul{
	display: grid;
	gap: 8px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line-night);
}

.steps .how-work-content ul li{
	width: auto;
	font-size: var(--fs-sm);
	line-height: 1.45;
}

/* Détail des étapes dans un <details> : ouvert sur grand écran (sans bouton),
   replié sur téléphone et tablette derrière « Voir le détail » */
.step-details > summary{
	display: none;
}

.step-details > summary::-webkit-details-marker{
	display: none;
}

.step-details-less,
.step-details[open] .step-details-more{
	display: none;
}

.step-details[open] .step-details-less{
	display: inline;
}

/* 9.6 Votre technicien (à propos + engagements) */
.about-us{
	padding: var(--section-y) 0;
	background: var(--sand-50);
}

.about-grid{
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(32px, 5vw, 88px);
}

.about-us-images{
	margin: 0;
}

.about-photo{
	position: relative;
	max-width: 460px;
	margin: 0;
}

.about-photo img{
	display: block;
	width: 100%;
	height: auto;
	/* Cadrage serré (buste) : différent du portrait en pied du bandeau */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 4%;
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-2);
}

.about-photo-card{
	position: absolute;
	right: -24px;
	bottom: 28px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 330px;
	padding: 14px 18px 14px 14px;
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-2);
	color: var(--ink-900);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.35;
}

.about-us-content .section-title{
	margin-bottom: 28px;
}

.about-quote{
	margin: 0 0 28px;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--green-600);
}

.about-quote p{
	margin: 0;
	color: var(--ink-900);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -.005em;
}

.about-us-list ul{
	gap: 12px 28px;
}

.about-us-list ul li{
	width: auto;
}

.about-us-footer{
	gap: 16px 32px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.about-author-box{
	align-items: center;
	gap: 14px;
}

.about-author-box .about-author-image img{
	display: block;
	width: 48px;
	height: 48px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
}

.about-author-box .author-info h3{
	margin-bottom: 2px;
	font-size: 1.0625rem;
	font-weight: 650;
}

.about-author-box .author-info p{
	margin: 0;
	color: var(--ink-500);
	font-size: var(--fs-xs);
	line-height: 1.4;
}

/* Titre et paragraphe côte à côte, puis 6 engagements sur 3 colonnes :
   deux blocs de même largeur, aucun vide sous une colonne */
.about-us .why-choose-us{
	display: block;
	margin-top: var(--space-8);
	padding: var(--space-8) 0 0;
	border-top: 1px solid var(--line);
	background: none;
}

.why-choose-intro .section-title{
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	align-items: end;
	column-gap: clamp(32px, 5vw, 88px);
	margin-bottom: var(--head-gap);
}

.why-choose-intro .section-title > .section-kicker,
.why-choose-intro .section-title > h2{
	grid-column: 1;
	justify-self: start;
}

.why-choose-intro .section-title > p:not(.section-kicker){
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
	max-width: none;
	margin: 0;
	font-size: var(--fs-body);
	color: var(--ink-600);
}

.about-us .why-choose-item-box{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-us .why-choose-item{
	display: flex;
	align-items: center;
	gap: 14px;
	width: auto;
	min-height: 76px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
}

.about-us .why-choose-item h3{
	margin: 0;
	color: var(--ink-900);
	font-size: 1.0625rem;
	font-weight: 640;
	line-height: 1.3;
}

/* 9.7 FAQ : accordéon et carte d'appel collante */
.our-faqs{
	padding: var(--section-y) 0;
	background: var(--sand-100);
}

.faq-content{
	position: sticky;
	top: calc(var(--header-h) + 24px);
}

.our-faqs .faq-content .section-title{
	margin-bottom: 32px;
}

.faqs-review-box{
	display: block;
	max-width: 400px;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--night-900);
	background-image: radial-gradient(400px 220px at 100% 0%, rgb(var(--rgb-gold) / .1), transparent 70%);
	box-shadow: var(--shadow-2);
}

.faqs-review-body{
	gap: 20px;
	padding: 26px 26px 18px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.faqs-review-body::before{
	display: none;
}

.review-rating-box{
	width: auto;
	gap: 8px;
	justify-content: flex-start;
}

.review-rating-box p.counter-value{
	color: var(--white);
	font-size: 3rem;
	font-weight: 720;
	letter-spacing: -.03em;
	line-height: 1;
}

.review-rating-box i{
	font-size: 26px;
}

.faqs-review-body .customer-images{
	margin: 0 0 6px;
}

.customer-img{
	width: 40px;
	height: 40px;
	margin-left: -10px;
	border: 2px solid var(--night-900);
}

.customer-img .review-initials{
	background: var(--green-50);
	color: var(--green-700);
	font-size: .875rem;
}

.faqs-review-body .hero-client-box p,
.faqs-review-box:hover .faqs-review-body .hero-client-box p{
	margin: 0;
	color: var(--on-night-muted);
	font-size: var(--fs-sm);
}

.faqs-review-box:hover .faqs-review-body .review-rating-box i{
	color: var(--star);
}

.faqs-review-footer{
	padding: 0 26px 26px;
	border-top: 0;
}

.faqs-review-footer a.btn-default{
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border-radius: var(--r-md);
	font-size: 1.0625rem;
	line-height: 1.25;
}

/* Ancien pied de carte (pages FAQ et à propos) : bouton or */
.faqs-review-footer a:not(.btn-default){
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border-radius: var(--r-md);
	background: var(--gold-500);
	color: var(--night-900);
	font-size: 1.0625rem;
	font-weight: 700;
	box-shadow: var(--shadow-cta);
	transition: background-color .15s ease;
}

.faqs-review-footer a:not(.btn-default):hover{
	background: var(--gold-600);
}

.faqs-review-footer a i{
	margin-right: 0;
	font-size: 18px;
}

/* 9.8 Fin de page : carte d'appel nuit à côté de la carte Création de sites */
.home-final{
	padding: 0 0 var(--section-y);
	background: var(--sand-100);
}

.home-final-grid{
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: stretch;
	gap: var(--grid-gap);
}

.home-final-cta{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 1rem + 3vw, 56px);
	border-radius: var(--r-xl);
	background-color: var(--night-900);
	background-image:
		radial-gradient(520px 300px at 100% 0%, rgb(var(--rgb-gold) / .12), transparent 70%),
		radial-gradient(520px 300px at 0% 100%, rgb(var(--rgb-mint) / .08), transparent 70%);
	box-shadow: var(--shadow-2);
}

.home-final-cta .section-title{
	margin: 0 0 28px;
}

.home-final-cta .section-title .section-kicker{
	color: var(--mint-300);
}

.home-final-cta .section-title h2{
	color: var(--white);
	font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
}

.home-final-cta .section-title p:not(.section-kicker){
	max-width: 46ch;
	color: var(--on-night-muted);
	font-size: var(--fs-lead);
	line-height: 1.55;
}

.home-final-cta .hero-btns{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 12px;
	margin: 0;
}

.home-final-cta .hero-btns .btn-default{
	min-height: 56px;
	padding: 0 24px;
	font-size: 1.0625rem;
}

.home-final-cta :focus-visible{
	outline-color: var(--gold-500);
}

.home-web-offer-card{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: clamp(24px, 1rem + 2vw, 40px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--white);
	box-shadow: var(--shadow-1);
}

.home-web-offer-icon{
	width: 56px;
	height: 56px;
	border-radius: var(--r-lg);
}

.home-web-offer-card .section-title{
	max-width: none;
	margin: 0;
	text-align: left;
}

.home-web-offer-card .section-title h2{
	font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
}

.home-web-offer-card .section-title p:not(.section-kicker){
	margin-top: 10px;
	font-size: var(--fs-sm);
}

.home-web-offer-card .hero-btns{
	justify-content: flex-start;
	margin: auto 0 0;
}

/* --------------------------------------------------------------------------
   10. Pages intérieures
   -------------------------------------------------------------------------- */

/* 10.1 Bandeau de page : aligné à gauche, sans ornement */
.page-header{
	padding: clamp(32px, 1rem + 3vw, 64px) 0 clamp(36px, 1rem + 3.5vw, 72px);
	background-color: var(--night-900);
	background-image:
		radial-gradient(700px 360px at 92% 0%, rgb(var(--rgb-gold) / .08), transparent 62%),
		radial-gradient(600px 360px at 0% 100%, rgb(var(--rgb-mint) / .07), transparent 62%);
	background-size: auto;
	background-position: 0 0;
}

.page-header-box{
	text-align: left;
}

.page-header-box h1{
	display: block;
	max-width: 18em;
	margin: 0;
	color: var(--white);
	/* Une seule taille de H1 pour tous les bandeaux sombres (54 px max) */
	font-size: clamp(2rem, 1.35rem + 2.4vw, 3.375rem);
	font-weight: 720;
	line-height: var(--lh-display);
	letter-spacing: -.028em;
	text-wrap: balance;
}

.page-header-box ol,
.page-header-box .breadcrumb{
	justify-content: flex-start;
	margin: 0 0 14px;
	padding: 0;
}

.page-header-box ol li.breadcrumb-item{
	min-height: 32px;
	color: rgb(var(--rgb-white) / .72);
	font-size: var(--fs-kicker);
	font-weight: 500;
}

.page-header-box ol li.breadcrumb-item a{
	/* Zone de toucher de 44 px ; la marge négative garde la ligne à 32 px */
	align-items: center;
	min-height: 44px;
	margin-block: -6px;
	color: rgb(var(--rgb-white) / .86);
	text-decoration: underline;
	text-decoration-color: rgb(var(--rgb-white) / .3);
	text-underline-offset: 3px;
}

.page-header-box ol li.breadcrumb-item a:hover{
	color: var(--white);
	text-decoration-color: currentColor;
}

.page-header-box ol li.breadcrumb-item.active{
	color: rgb(var(--rgb-white) / .72);
}

.page-header-box ol .breadcrumb-item + .breadcrumb-item::before{
	content: "/";
	padding: 0 8px;
	color: rgb(var(--rgb-white) / .4);
}

.page-header-service .page-header-crumbs,
.page-header-crumbs{
	display: block;
}

/* Bandeau des prestations : 2 colonnes, carte repère à droite */
.page-header-service{
	padding: clamp(28px, 1rem + 3vw, 64px) 0 clamp(32px, 1rem + 3vw, 72px);
}

.page-header-grid{
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
	/* Texte et carte calés en haut : fil d'Ariane et H1 à la même hauteur
	   sur toutes les pages, quelle que soit la hauteur de la carte */
	align-items: start;
	gap: clamp(24px, 4vw, 72px);
}

.page-header-service .page-header-box h1{
	margin-bottom: 0;
}

.page-header-lead{
	max-width: 52ch;
	margin: 18px 0 0;
	color: var(--on-night-muted);
	font-size: var(--fs-lead);
	line-height: 1.55;
	text-wrap: pretty;
}

.page-header-btns,
.page-header .hero-btns{
	justify-content: flex-start;
	margin-top: 28px;
}

.page-header-btns .btn-default{
	min-height: 54px;
}

.page-header-card{
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--line-night);
	border-radius: var(--r-lg);
	background: rgb(var(--rgb-white) / .04);
	box-shadow: inset 0 1px 0 rgb(var(--rgb-white) / .06);
}

.page-header-price{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	max-width: none;
	margin: 0;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line-night);
	color: var(--on-night-muted);
	font-size: var(--fs-sm);
	line-height: 1.45;
	text-align: left;
	text-wrap: balance;
}

.page-header-price strong{
	display: inline-flex;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--white);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 720;
	line-height: 1.15;
	letter-spacing: -.02em;
	white-space: normal;
	font-variant-numeric: tabular-nums;
}

.page-header-card .page-header-rating,
.page-header-service .hero-google-rating{
	justify-content: flex-start;
	width: 100%;
	margin: 0;
}

.page-header-card .hero-google-rating a{
	padding: 0;
	/* Zone de toucher de 44 px ; la marge négative garde la ligne à 32 px */
	min-height: 44px;
	margin-block: -6px;
	border: 0;
	background: transparent;
	color: var(--on-night-muted);
}

.page-header-card .hero-google-rating a:hover{
	background: transparent;
	color: var(--white);
}

.page-header-person{
	display: flex;
	align-items: center;
	gap: 12px;
}

.page-header-avatar{
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--night-900), 0 0 0 3.5px rgb(var(--rgb-white) / .3);
}

.page-header-trust{
	max-width: none;
	margin: 0;
	color: var(--on-night-muted);
	font-size: var(--fs-xs);
	line-height: 1.45;
	text-align: left;
}

/* Nom de commune insécable dans le H1 (« Neuilly-Plaisance ») : il garde la
   couleur du titre (custom.css colore en or tout span d'un H1 de bandeau) */
.page-header-box h1 .text-nowrap,
.page-header-box h1 .text-nowrap span{
	color: inherit;
}

/* Bandeau clair (documents, 404) */
.page-header.page-header--light{
	padding: clamp(28px, 1rem + 2.5vw, 56px) 0 clamp(28px, 1rem + 2.5vw, 48px);
	background: var(--sand-100);
	background-image: none;
	border-bottom: 1px solid var(--line);
}

.page-header--light .page-header-box h1{
	color: var(--ink-900);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}

.page-header--light .page-header-box ol li.breadcrumb-item,
.page-header--light .page-header-box ol li.breadcrumb-item.active{
	color: var(--ink-500);
}

.page-header--light .page-header-box ol li.breadcrumb-item a{
	color: var(--green-600);
	text-decoration-color: rgb(var(--rgb-green) / .35);
}

/* Survol : même retour que sur les bandeaux sombres (encre, trait plein) */
.page-header--light .page-header-box ol li.breadcrumb-item a:hover{
	color: var(--ink-900);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.page-header--light .page-header-box ol .breadcrumb-item + .breadcrumb-item::before{
	color: var(--line-strong);
}

/* 10.2 Corps des prestations : lecture à gauche, tarif collant à droite */
.service-page-body{
	padding: var(--section-y) 0;
	background: var(--sand-50);
}

.service-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	align-items: start;
	gap: clamp(28px, 4vw, 64px);
}

.service-page-body .service-intro,
.service-page-body .service-detail{
	padding: 0;
	background: none;
}

.service-page-body .service-intro .section-title{
	margin-bottom: 36px;
}

.service-page-body .service-intro .section-title h2{
	font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
}

.service-page-body .service-detail-grid{
	grid-template-columns: 1fr;
	gap: 16px;
}

.service-page-body .service-detail-card{
	height: auto;
	padding: var(--card-pad);
}

.service-page-body .service-detail-card--faq{
	margin-top: 16px;
}

/* Questions un cran sous le titre de la carte (la règle commune des cartes,
   plus loin, les mettait à la taille du H2) */
.service-detail-card.service-detail-card--faq h3{
	margin: 24px 0 8px;
	font-size: var(--fs-h4);
}

.service-aside.pricing-band{
	position: sticky;
	top: calc(var(--header-h) + 24px);
	padding: 0;
	background: none;
}

.service-aside .pricing-card{
	max-width: none;
	padding: 28px;
	border: 0;
	border-radius: var(--r-lg);
	background: var(--night-900);
	background-image: radial-gradient(360px 220px at 100% 0%, rgb(var(--rgb-gold) / .1), transparent 70%);
	box-shadow: var(--shadow-2);
	color: var(--on-night-muted);
}

.service-aside .pricing-card h2{
	margin-bottom: 18px;
	color: var(--white);
	font-size: var(--fs-h4);
	letter-spacing: -.01em;
}

.service-aside .pricing-figures{
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0 0 18px;
	border-top: 1px solid var(--line-night);
}

.service-aside .pricing-figures li{
	display: flex;
	flex-direction: row-reverse;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--line-night);
	border-radius: 0;
	background: none;
}

.service-aside .pricing-figure-value{
	color: var(--white);
	font-size: 1.375rem;
	font-weight: 720;
	letter-spacing: -.01em;
}

.service-aside .pricing-figure-label{
	color: var(--on-night-muted);
	font-size: var(--fs-sm);
}

.service-aside .pricing-card p{
	color: var(--on-night-muted);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.service-aside .pricing-card .pricing-warranty{
	color: rgb(var(--rgb-muted) / .9);
	font-size: var(--fs-xs);
}

/* L'exemple chiffré garde sa graisse (custom.css) mais passe en blanc :
   custom.css l'écrit en encre nuit, invisible sur la carte nuit. */
.service-aside .pricing-card .pricing-example{
	color: var(--white);
}

.service-aside .pricing-card a{
	color: var(--white);
	text-decoration-color: var(--mint-300);
}

.service-aside .pricing-card .pricing-links{
	margin: 0;
}

/* Cartes de détail */
.service-detail-card,
.info-card{
	padding: var(--card-pad);
}

.service-detail-card h2,
.service-detail-card h3,
.info-card h3,
.pricing-card h2,
.legal-card h2{
	margin-bottom: 14px;
	color: var(--ink-900);
	font-size: var(--fs-h3);
	font-weight: 680;
	line-height: 1.25;
	letter-spacing: -.015em;
}

.service-detail-card p,
.info-card p{
	max-width: var(--measure);
	color: var(--ink-600);
}

.service-detail-card p:last-child,
.info-card p:last-child{
	margin-bottom: 0;
}

.service-checklist{
	display: grid;
	gap: 10px;
	margin-top: 4px;
}

.service-checklist li{
	margin: 0;
}

/* 10.3 Bloc final : carte nuit contenue, liens « À découvrir aussi » */
.service-page-cta,
.service-page-cta.dark-section{
	padding: 0 0 var(--section-y);
	border-top: 0;
	background: var(--sand-50);
	text-align: left;
}

/* Carte nuit réelle (.cta-card) : son fond est celui du texte, pour les
   lecteurs comme pour les outils de contraste */
.service-page-cta .cta-card{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 40px;
	padding: clamp(28px, 1rem + 3vw, 56px) clamp(24px, 1rem + 3vw, 56px);
	border-radius: var(--r-xl);
	background-color: var(--night-900);
	background-image:
		radial-gradient(520px 300px at 100% 0%, rgb(var(--rgb-gold) / .12), transparent 70%),
		radial-gradient(520px 300px at 0% 100%, rgb(var(--rgb-mint) / .08), transparent 70%);
	box-shadow: var(--shadow-2);
}

.service-page-cta .cta-card > .section-title{
	margin: 0;
}

.service-page-cta .cta-card > .hero-btns{
	flex-direction: column;
	align-items: stretch;
	margin: 0;
}

.service-page-cta .hero-btns .btn-default{
	min-height: 56px;
}

.service-page-cta .section-title h2,
.service-page-cta.dark-section .section-title h2{
	color: var(--white);
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
}

.service-page-cta .section-title p:not(.section-kicker),
.service-page-cta.dark-section .section-title p:not(.section-kicker){
	max-width: 60ch;
	margin-inline: 0;
	color: var(--on-night-muted);
	font-size: var(--fs-sm);
}

.service-page-cta.dark-section .section-title .section-kicker,
.service-page-cta .section-title .section-kicker{
	color: var(--mint-300);
}

.service-page-cta .section-title p a,
.service-page-cta a:not(.btn-default){
	color: var(--white);
}

.service-page-cta.dark-section a:focus-visible,
.service-page-cta.dark-section button:focus-visible{
	outline-color: var(--gold-500);
}

/* « À découvrir aussi » : dans la carte nuit, sous un filet, sur toute la
   largeur (plus de rangée isolée sous la carte) */
.cta-card > .related-links{
	grid-column: 1 / -1;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--line-night);
}

.related-links-title{
	display: flex;
	margin: 0 0 14px;
}

.service-page-cta .related-links-title{
	color: var(--mint-300);
}

.related-links ul{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-page-cta .related-links a,
.service-page-cta.dark-section .related-links li a,
.related-links a{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 16px 0 18px;
	border: 1px solid rgb(var(--rgb-white) / .24);
	border-radius: var(--r-md);
	background: rgb(var(--rgb-white) / .05);
	color: var(--white);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.related-links a::after{
	content: "";
	width: 14px;
	height: 14px;
	background-color: var(--mint-300);
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
}

.service-page-cta .related-links a:hover,
.service-page-cta.dark-section .related-links li a:hover,
.related-links a:hover{
	border-color: rgb(var(--rgb-white) / .55);
	background: rgb(var(--rgb-white) / .1);
	color: var(--white);
}

.service-page-cta .related-links a:focus-visible{
	outline-color: var(--gold-500);
}

/* 10.4 Introductions et grilles des autres pages (tarifs, zone, création) */
.service-intro{
	padding: var(--section-y) 0 0;
	background: var(--sand-50);
}

.service-intro .section-row{
	margin-bottom: var(--head-gap);
}

.service-intro .section-title p:not(.section-kicker){
	max-width: var(--measure);
}

.service-detail{
	padding: 0 0 var(--section-y);
	background: var(--sand-50);
}

.service-detail-grid,
.info-card-grid,
.area-grid{
	gap: var(--grid-gap);
	align-items: start;
}

/* « Un prestataire proche de vous » : cartes d'une rangée de même hauteur,
   comme la grille « Ce que je fais » de la même page */
.info-card-grid{
	align-items: stretch;
}

/* Paragraphe qui suit une liste à coches (exclusions d'un forfait) : il se
   détache de la dernière puce au lieu de se lire comme une puce de plus */
.service-detail-card :is(ul, .service-checklist) + p{
	margin-top: 16px;
}

.service-detail + .service-detail,
.service-detail.web-why{
	padding-top: 0;
}

.pricing-band{
	padding: 0 0 var(--section-y);
	background: var(--sand-50);
}

.pricing-card{
	padding: var(--card-pad);
}

.pricing-figures li{
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--sand-50);
}

.pricing-figure-value{
	color: var(--ink-900);
}

.pricing-figure-label{
	color: var(--ink-500);
}

.pricing-card a{
	color: var(--green-600);
}

.pricing-warranty{
	color: var(--ink-500);
}

.local-service-area{
	padding: var(--section-y) 0;
	background: var(--sand-100);
}

.scope-note{
	border-left: 3px solid var(--green-600);
	border-radius: var(--r-md);
	background: var(--green-50);
	color: var(--ink-700);
}

/* Tarifs : tableau lisible, montants alignés à droite */
.pricing-card-table{
	max-width: none;
	padding: 0;
	overflow: hidden;
}

.pricing-card-table > h2{
	margin: 0;
	padding: var(--card-pad) var(--card-pad) 18px;
}

.pricing-card-table .table{
	--bs-table-bg: transparent;
	margin: 0;
	color: var(--ink-600);
}

.pricing-card-table .table thead th{
	padding: 12px var(--card-pad);
	border-bottom: 1px solid var(--line);
	background: var(--sand-100);
	color: var(--ink-600);
	font-size: var(--fs-kicker);
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
}

.pricing-card-table .table tbody th,
.pricing-card-table .table tbody td{
	padding: 18px var(--card-pad);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.pricing-card-table .table tbody tr:last-child th,
.pricing-card-table .table tbody tr:last-child td{
	border-bottom: 0;
}

.pricing-card-table .table tbody th{
	color: var(--ink-900);
	font-size: var(--fs-body);
	font-weight: 650;
	line-height: 1.35;
}

.pricing-card-table .table tbody th small{
	max-width: 62ch;
	margin-top: 6px;
	color: var(--ink-500);
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.5;
}

.pricing-card-table .table tbody th a{
	color: var(--green-600);
}

.pricing-card-table .table tbody td{
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.pricing-card .table td strong{
	display: inline-block;
	margin: 0;
	color: var(--ink-900);
	font-size: 1.25rem;
	font-weight: 720;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.pricing-card-table > p{
	margin: 0 var(--card-pad) 10px;
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.pricing-card-table > p:last-child{
	margin-bottom: var(--card-pad);
}

/* Exemple chiffré présenté comme un ticket : icône reçu, fond sauge très
   léger, lignes pointillées et total en chiffres tabulaires */
.pricing-card-table > .pricing-ticket,
.pricing-ticket{
	max-width: 560px;
	margin: 8px var(--card-pad) 22px;
	padding: 18px 22px 16px;
	border: 1px solid var(--green-100);
	border-radius: var(--r-md);
	background: var(--green-50);
	color: var(--ink-700);
	font-size: var(--fs-sm);
}

/* L'exemple chiffré se détache de la dernière ligne du tableau (« Création
   de site internet ») : filet sous le tableau et écart de 24 px */
.pricing-card-table > .table-responsive{
	border-bottom: 1px solid var(--line);
}

.pricing-card-table > .pricing-ticket{
	margin-top: 24px;
}

.pricing-ticket-title{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--ink-900);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.35;
}

.pricing-card .pricing-ticket-title strong{
	color: var(--ink-900);
	font-weight: 720;
}

.pricing-ticket-icon{
	display: inline-flex;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	background: var(--white);
	box-shadow: inset 0 0 0 1px var(--green-100);
	color: var(--green-700);
}

.pricing-ticket-icon::before{
	content: "";
	width: 20px;
	height: 20px;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: var(--i-receipt) center / contain no-repeat;
	mask: var(--i-receipt) center / contain no-repeat;
}

.pricing-ticket-lines{
	margin: 0;
	padding: 0;
	border-top: 1px dashed rgb(var(--rgb-green) / .4);
}

.pricing-ticket-lines > div{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0 0;
}

.pricing-ticket-lines dt{
	color: var(--ink-700);
	font-weight: 500;
}

.pricing-ticket-lines dd{
	margin: 0;
	color: var(--ink-900);
	font-weight: 650;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pricing-ticket-lines > .pricing-ticket-total{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed rgb(var(--rgb-green) / .4);
}

.pricing-ticket-total dt{
	color: var(--ink-900);
	font-weight: 700;
}

.pricing-ticket-total dd{
	font-size: 1.375rem;
	font-weight: 720;
	letter-spacing: -.01em;
	/* Grand corps : chiffres proportionnels (le « 1 » tabulaire laisse un trou) */
	font-variant-numeric: normal;
}

.pricing-ticket-note{
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px dashed rgb(var(--rgb-green) / .4);
	color: var(--ink-600);
	line-height: 1.5;
}

/* Tarifs : 3 questions sur une rangée */
@media (min-width: 992px){
	.service-detail[aria-labelledby="tarifs-faq"] .service-detail-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.service-detail[aria-labelledby="tarifs-faq"] .section-title h2{
	font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
}

.service-detail[aria-labelledby="tarifs-faq"] .service-detail-card h3{
	font-size: var(--fs-h4);
}

/* Zone : liste des communes */
.area-list{
	gap: 10px 28px;
}

/* 10.5 Services (hub) */
.services-hub{
	padding: var(--section-y) 0;
	background: var(--sand-50);
}

.services-hub-intro{
	max-width: none;
	margin-bottom: var(--head-gap);
}

.services-hub-grid{
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.service-card{
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto;
	column-gap: 18px;
	row-gap: 6px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
}

.service-card .service-pages-icon{
	grid-row: 1 / span 4;
}

.service-card-title,
.service-card-text,
.service-card-meta,
.service-card-cta{
	grid-column: 2;
}

.service-card:hover{
	border-color: rgb(var(--rgb-green) / .35);
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

.service-card:focus-within{
	outline-color: var(--green-600);
}

.service-card-title{
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 680;
}

.service-card-text{
	color: var(--ink-600);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.service-card-meta{
	margin-top: 8px;
	/* Le tarif suit la description (réservée sur deux lignes ci-dessous) :
	   même niveau dans les cartes d'une rangée, plus de badge flottant au
	   milieu ; l'espace libre passe sous le tarif, au-dessus du lien. */
	align-self: start;
}

/* Grille à deux colonnes : description réservée sur deux lignes, l'écart
   entre texte et tarif est le même dans les cartes voisines */
@media (min-width: 768px){
	.service-card-text{
		min-height: 3.1em;
	}
}

.service-card-price{
	padding: 4px 10px;
	border-radius: var(--r-sm);
	background: var(--green-50);
	color: var(--green-700);
	font-size: var(--fs-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.service-card-place{
	color: var(--ink-500);
	font-size: var(--fs-xs);
}

@media (min-width: 768px){
	.service-card-place{
		flex-basis: auto;
	}
}

.service-card-cta{
	margin-top: 4px;
	color: var(--green-600);
	font-size: var(--fs-sm);
}

.services-hub-more{
	color: var(--ink-600);
}

/* 10.6 Contact : 3 grosses actions dans le bandeau (appel en or), puis le
   formulaire, coordonnées collantes à droite */
.contact-actions{
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
	gap: 12px;
	max-width: none;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.contact-actions li{
	display: flex;
	margin: 0;
}

.contact-action{
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 76px;
	padding: 14px 18px;
	border-radius: var(--r-lg);
	background: rgb(var(--rgb-white) / .06);
	box-shadow: inset 0 0 0 1px rgb(var(--rgb-white) / .24);
	color: var(--white);
	text-decoration: none;
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Titres des trois cartes sur la même ligne, quel que soit le nombre de
   lignes du sous-titre (icône calée en haut) */
.contact-action{
	align-items: flex-start;
}

.contact-action:hover,
.contact-action:focus-visible{
	background: rgb(var(--rgb-white) / .11);
	box-shadow: inset 0 0 0 1px rgb(var(--rgb-white) / .5);
	color: var(--white);
}

.contact-action > i{
	display: inline-flex;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(var(--rgb-mint) / .16);
	color: var(--mint-300);
	-webkit-mask: none;
	mask: none;
}

/* Le glyphe est porté par un pseudo-élément : la pastille reste ronde */
.contact-action > i::before{
	content: "";
	width: 22px;
	height: 22px;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: var(--fa-icon) center / contain no-repeat;
	mask: var(--fa-icon) center / contain no-repeat;
}

.contact-action-text{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.contact-action-title{
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.contact-action-sub{
	color: var(--on-night-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.35;
	font-variant-numeric: normal;
}

.contact-action--call{
	background: var(--gold-500);
	box-shadow: var(--shadow-cta);
	color: var(--night-900);
}

.contact-action--call:hover,
.contact-action--call:focus-visible{
	background: var(--gold-600);
	box-shadow: var(--shadow-cta);
	color: var(--night-900);
}

.contact-action--call > i{
	background: var(--night-900);
	color: var(--gold-500);
}

.contact-action--call .contact-action-title{
	font-variant-numeric: tabular-nums;
}

.contact-action--call .contact-action-sub{
	color: var(--ink-700);
}

/* Tablette : l'appel sur toute la largeur, puis WhatsApp et formulaire */
@media (max-width: 991px){
	.contact-actions{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 720px;
	}

	.contact-actions li:first-child{
		grid-column: 1 / -1;
	}
}

/* Téléphone : les 3 actions empilées */
@media (max-width: 575px){
	.contact-actions{
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 22px;
	}

	.contact-action{
		min-height: 68px;
		padding: 12px 14px;
	}
}

@media (prefers-reduced-motion: reduce){
	.contact-action{
		transition: none;
	}
}
.page-contact-us{
	padding: var(--section-y) 0;
	background: var(--sand-50);
}

.page-contact-us .contact-us-box{
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
	align-items: start;
	gap: clamp(24px, 3vw, 48px);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.page-contact-us .contact-us-box::before,
.page-contact-us .contact-us-box::after{
	display: none;
}

.page-contact-us .contact-us-form{
	width: auto;
	padding: clamp(24px, 1rem + 2.5vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--white);
	box-shadow: var(--shadow-1);
}

.page-contact-us .contact-us-form .section-title{
	margin-bottom: 28px;
}

.page-contact-us .contact-us-form .section-title h2{
	font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
}

/* Mention des champs obligatoires, avant le premier champ (RGAA 11.10.1) */
.contact-form .form-required-hint{
	margin: 0 0 16px;
}

.contact-form-title{
	margin: 0 0 20px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	color: var(--ink-900);
	font-size: var(--fs-h4);
	font-weight: 650;
}

.page-contact-us .contact-us-content{
	position: sticky;
	top: calc(var(--header-h) + 24px);
	width: auto;
	padding: 28px;
	border-radius: var(--r-lg);
	background: var(--night-900);
	background-image: radial-gradient(360px 220px at 100% 0%, rgb(var(--rgb-gold) / .1), transparent 70%);
	box-shadow: var(--shadow-2);
	color: var(--on-night-muted);
}

.page-contact-us .contact-reassurance{
	margin: 0 0 24px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--line-night);
	border-radius: 0;
	background: none;
}

.page-contact-us .contact-reassurance li{
	color: var(--on-night-muted);
	font-size: var(--fs-sm);
}

.page-contact-us .contact-reassurance li + li{
	margin-top: 10px;
}

.page-contact-us .contact-reassurance li::before{
	background-color: rgb(var(--rgb-mint) / .16);
}

.page-contact-us .contact-reassurance li::after{
	background-color: var(--mint-300);
}

.page-contact-us .contact-reassurance a{
	color: var(--white);
	text-decoration-color: var(--mint-300);
}

.contact-info-list{
	display: grid;
	gap: 0;
}

.contact-info-item{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--line-night);
}

.contact-info-item:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

.contact-info-item .icon-box{
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: none;
}

.contact-info-item .icon-box::before{
	display: none;
}

.contact-info-item .icon-tile{
	width: 40px;
	height: 40px;
	background-color: rgb(var(--rgb-mint) / .14);
	color: var(--mint-300);
}

.contact-info-item .icon-tile::before{
	width: 20px;
	height: 20px;
}

.contact-info-item:first-child .icon-tile{
	background-color: var(--gold-500);
	color: var(--night-900);
}

.contact-item-content{
	width: auto;
}

.contact-item-content p{
	margin: 0;
	color: var(--on-night-muted);
	font-size: var(--fs-xs);
	line-height: 1.4;
}

.contact-item-content h3{
	margin: 2px 0 0;
	color: var(--white);
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.35;
}

.contact-item-content h3 a{
	display: inline-flex;
	align-items: center;
	/* Zone de toucher de 44 px ; la marge négative garde la ligne à 32 px */
	min-height: 44px;
	margin-block: -6px;
	color: var(--white);
}

.contact-info-item:first-child .contact-item-content h3 a{
	color: var(--gold-500);
	font-size: 1.25rem;
	font-weight: 720;
}

.contact-item-content h3 a:hover{
	color: var(--gold-500);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.page-contact-us .contact-reassurance a:hover{
	color: var(--white);
	text-decoration-color: var(--gold-500);
	text-decoration-thickness: 2px;
}

.contact-item-content .contact-item-note{
	margin-top: 4px;
	color: rgb(var(--rgb-muted) / .9);
}

.google-map{
	padding: 0 0 var(--section-y);
	background: var(--sand-50);
}

.google-map .container-fluid{
	max-width: 1280px;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.google-map-iframe.consent-embed{
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--sand-100);
}

/* Tant que la carte n'est pas chargée, l'encart suit la hauteur de son texte :
   l'adresse et le lien « Ouvrir l'adresse dans Google Maps » ne sont jamais
   rognés (l'iframe reste en absolu, transparente, sous l'encart). */
.google-map-iframe.consent-embed:not(.is-loaded) .consent-embed-placeholder{
	position: relative;
	inset: auto;
	min-height: 240px;
}

.consent-embed-placeholder .btn-default{
	box-shadow: inset 0 0 0 1.5px rgb(var(--rgb-night) / .7);
}

@media (max-width: 575px){
	.google-map-iframe.consent-embed:not(.is-loaded) .consent-embed-placeholder{
		padding: 24px 20px;
	}
}

/* 10.7 Avis : badge de note, grille en colonnes, avis supplémentaires repliés */
.page-testimonials{
	padding: var(--section-y) 0;
	background: var(--sand-50);
}

/* Bande de synthèse en vert nuit : 5,0/5 très grand, étoiles, appel or et
   lien vers la fiche Google */
.reviews-summary{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 24px clamp(32px, 5vw, 72px);
	max-width: none;
	margin: 0 0 var(--head-gap);
	padding: clamp(28px, 1rem + 2.4vw, 48px) clamp(24px, 1rem + 3vw, 56px);
	border: 0;
	border-radius: var(--r-xl);
	background-color: var(--night-900);
	background-image:
		radial-gradient(520px 300px at 100% 0%, rgb(var(--rgb-gold) / .12), transparent 70%),
		radial-gradient(520px 300px at 0% 100%, rgb(var(--rgb-mint) / .08), transparent 70%);
	box-shadow: var(--shadow-2);
	text-align: left;
}

.reviews-summary-score{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 24px;
	margin: 0;
	/* Chiffres proportionnels pour le nombre d'avis (« 145 » sans trou) */
	font-variant-numeric: normal;
}

.reviews-summary-figure{
	display: flex;
	align-items: baseline;
	margin: 0;
	color: var(--white);
	font-size: clamp(4.25rem, 2.6rem + 4.4vw, 7rem);
	font-weight: 760;
	line-height: .9;
	letter-spacing: -.05em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.reviews-summary-max{
	margin-left: 4px;
	color: var(--on-night-muted);
	font-size: .42em;
	font-weight: 640;
	letter-spacing: -.02em;
}

.reviews-summary-meta{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 24px;
	border-left: 1px solid var(--line-night);
}

.reviews-summary-stars{
	display: inline-flex;
	gap: 3px;
	color: var(--star);
	font-size: 1.375rem;
	line-height: 1;
}

.reviews-summary-count{
	margin: 0;
	color: var(--white);
	font-size: var(--fs-body);
	font-weight: 650;
	line-height: 1.3;
	white-space: nowrap;
}

.reviews-summary-body{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
}

.reviews-summary-text{
	flex: none;
	max-width: 46ch;
	margin: 0;
	color: var(--on-night-muted);
	font-size: var(--fs-lead);
	line-height: 1.5;
}

.reviews-summary-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
}

.reviews-summary-actions .btn-default.btn-call{
	min-height: 56px;
	padding: 0 24px;
	font-size: 1.0625rem;
	box-shadow: var(--shadow-cta);
}

.reviews-summary .reviews-summary-link{
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--white);
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: var(--mint-300);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.reviews-summary .reviews-summary-link:hover{
	color: var(--white);
	text-decoration-thickness: 2px;
}

.reviews-summary :focus-visible{
	outline-color: var(--gold-500);
}

/* Grille ligne par ligne (et non en colonnes CSS) : un avis Google inséré
   sous l'écran par google-reviews.js ne redistribue pas les cartes déjà lues.
   Cartes d'une même ligne à la même hauteur. */
.page-testimonials .row[data-google-reviews-grid],
.page-testimonials .reviews-more-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 20px;
	margin: 0;
}

.page-testimonials .row[data-google-reviews-grid] > *,
.page-testimonials .reviews-more-grid > *{
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.page-testimonials .testimonial-item{
	height: 100%;
	padding: 24px;
}

.page-testimonials .testimonial-content p{
	font-size: var(--fs-sm);
}

.reviews-more{
	margin-top: 28px;
}

.reviews-more > summary{
	display: flex;
	width: fit-content;
	margin: 0 auto 24px;
	list-style: none;
	cursor: pointer;
}

.reviews-more > summary::-webkit-details-marker{
	display: none;
}

.reviews-more[open] > summary{
	margin-bottom: 24px;
}

/* Le bouton dit ce qu'il fait : « Voir… » fermé, « Masquer… » ouvert */
.reviews-more:not([open]) .reviews-more-close,
.reviews-more[open] .reviews-more-open{
	display: none;
}

.page-testimonials .google-reviews-notice{
	color: var(--ink-500);
	font-size: var(--fs-xs);
}

.page-testimonials .google-reviews-notice a:hover{
	text-decoration-thickness: 2px;
}

/* 10.8 À propos : photo et note collantes, compétences en pastilles */
.page-team-single{
	padding: var(--section-y) 0;
	background: var(--sand-50);
}

.page-single-sidebar{
	position: sticky;
	top: calc(var(--header-h) + 24px);
	margin-right: 0;
}

.team-single-image{
	margin-bottom: 20px;
}

.team-single-image figure,
.team-single-image img{
	display: block;
	width: 100%;
	border-radius: var(--r-xl);
}

.team-single-image img{
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 15%;
	box-shadow: var(--shadow-2);
}

.faqs-review-box.sidebar-cta-box{
	max-width: none;
}

.team-single-content .section-title h2,
.team-member-about .section-title h2,
.member-professional-info .section-title h2,
.member-technical-info .section-title h2,
.team-member-achievements .section-title h2,
.team-contact-form .section-title h2{
	font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
}

.team-member-about,
.member-professional-info,
.member-technical-info,
.team-member-achievements{
	margin-bottom: var(--space-8);
}

.member-content-body,
.member-professional-info{
	padding: 0;
	border-radius: 0;
	background: none;
}

.member-content-body ul{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	overflow: hidden;
}

.member-content-body ul li{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 2px;
	width: auto;
	margin: 0;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-500);
	font-size: var(--fs-xs);
	line-height: 1.4;
}

.member-content-body ul li:nth-child(odd){
	border-right: 1px solid var(--line);
}

.member-content-body ul li:nth-last-child(-n + 2){
	border-bottom: 0;
}

.member-content-body ul li span{
	color: var(--ink-900);
	font-size: var(--fs-body);
	font-weight: 600;
}

.member-content-body ul li::before{
	display: none;
}

/* Coordonnées cliquables (appel, e-mail) : cible de 44 px sans agrandir la
   carte (marges négatives) */
.member-content-body ul li a.member-contact-link{
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -11px;
	color: var(--green-600);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.member-content-body ul li a.member-contact-link:hover{
	color: var(--ink-900);
	text-decoration-thickness: 2px;
}

.member-social-list h3{
	font-size: var(--fs-h4);
}

.member-social-list ul li a{
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink-900);
}

.member-social-list ul li a:hover{
	border-color: var(--green-600);
	background: var(--green-50);
	color: var(--green-700);
}

/* Parcours : frise verticale */
.member-professional-info-content ul{
	position: relative;
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0 0 0 4px;
	list-style: none;
}

.member-professional-info-content ul::before{
	content: "";
	position: absolute;
	left: 13px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: var(--green-100);
}

.member-professional-info-content ul li{
	padding-left: 40px;
}

.member-professional-info-content ul li::before{
	content: "";
	position: absolute;
	left: 3px;
	top: .3em;
	width: 22px;
	height: 22px;
	border: 2px solid var(--green-600);
	border-radius: 50%;
	background: var(--sand-50);
	-webkit-mask: none;
	mask: none;
}

.member-professional-info-content ul li::after{
	content: "";
	position: absolute;
	left: 10px;
	top: calc(.3em + 7px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green-600);
}

.technical-info-item{
	display: flex;
	gap: 18px;
	padding: var(--card-pad);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
}

.technical-info-item .icon-box{
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	background: none;
}

.technical-info-item .icon-box::before{
	display: none;
}

.technical-info-item-content h3{
	font-size: var(--fs-h4);
}

/* Compétences : pastilles au lieu de barres à 97 % */
.member-achievements-list{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.member-achievements-list .skills-progress-bar{
	width: auto;
	margin: 0;
}

.member-achievements-list .skillbar{
	margin: 0;
}

.member-achievements-list .skill-data{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
}

.member-achievements-list .skill-title{
	color: var(--ink-900);
	font-size: var(--fs-sm);
	font-weight: 650;
}

.member-achievements-list .skill-no{
	white-space: nowrap;
	padding: 2px 8px;
	border-radius: var(--r-sm);
	background: var(--green-50);
	color: var(--green-700);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.member-achievements-list .skill-progress{
	display: none;
}

.team-contact-form .contact-us-form{
	padding: clamp(24px, 1rem + 2.5vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--white);
	box-shadow: var(--shadow-1);
}

/* 10.9 Questions fréquentes */
.page-faqs{
	padding: var(--section-y) 0;
	background: var(--sand-50);
}

.page-catagery-list{
	margin-bottom: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
}

.page-catagery-list ul{
	padding: 10px 20px;
	background: transparent;
}

.page-catagery-list ul li{
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--line);
}

.page-catagery-list ul li a{
	min-height: 52px;
	color: var(--ink-900);
	font-weight: 600;
}

.page-catagery-list ul li a::before{
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	color: var(--green-600);
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
}

.page-catagery-list ul li a:hover{
	color: var(--green-600);
}

.page-faqs-catagery .page-faq-accordion{
	margin-bottom: var(--space-8);
}

.page-faqs-catagery .section-title h2{
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
}

/* 10.10 Documents (légales) : colonne de lecture, pas de carte englobante */
.legal-content{
	padding: var(--section-y-tight) 0 var(--section-y);
	background: var(--sand-50);
}

.legal-content .legal-content-panel{
	max-width: 76ch;
	margin-inline: auto;
	padding: 0 var(--gutter);
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.legal-content h2{
	margin: 48px 0 16px;
	padding-top: 0;
	color: var(--ink-900);
	font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
	letter-spacing: -.015em;
}

.legal-content p,
.legal-content li{
	color: var(--ink-600);
	font-size: var(--fs-body);
	line-height: 1.7;
}

.legal-content ul{
	display: grid;
	gap: 10px;
	margin: 0 0 1.25em;
}

.legal-content li{
	margin: 0;
}

.legal-content .legal-card{
	margin: 0 0 24px;
	padding: 24px 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: none;
}

.legal-content address{
	color: var(--ink-700);
	line-height: 1.8;
}

/* Même boîte que .legal-content-panel (76ch, marges internes comprises) :
   fil d'Ariane, H1 et titres du texte sur le même axe vertical */
.page-header--doc .page-header-box{
	max-width: 76ch;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

@media (min-width: 768px){
	/* Le texte occupe toute la rangée Bootstrap (marges de -15 px) quand il
	   n'atteint pas 76ch ; le bandeau, dans sa colonne, fait de même. */
	.page-header--doc .page-header-box{
		margin-inline: max(-15px, (100% - 76ch) / 2);
	}
}

.page-header--light .container{
	max-width: 1280px;
}

/* 10.11 Page 404 */
.error-page{
	padding: var(--section-y-tight) 0 var(--section-y);
	background: var(--sand-50);
}

.error-page .error-page-content{
	max-width: 760px;
	text-align: left;
}

.error-page-lead{
	margin: 0 0 24px;
	color: var(--ink-700);
	font-size: var(--fs-lead);
}

.error-page-btns{
	justify-content: flex-start;
	margin-bottom: 40px;
}

.error-shortcuts-title{
	display: flex;
	margin: 0 0 16px;
}

.error-shortcuts{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-link{
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 72px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	color: var(--ink-900);
	font-weight: 650;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.card-link:hover{
	border-color: rgb(var(--rgb-green) / .35);
	color: var(--ink-900);
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

/* Textes d'appoint : 15 px minimum (anciennes règles à 14 px) */
.pricing-warranty,
.service-aside .pricing-card .pricing-warranty,
.contact-item-content .contact-item-note,
.consent-embed-note,
.google-reviews-notice,
.our-testimonials .google-reviews-notice,
.page-testimonials .google-reviews-notice,
.review-source,
.service-card-place,
.service-card-price,
.footer-contact-item-content small,
.footer-contact-list small,
.member-content-body ul li,
.form-privacy,
.contact-form .form-hint,
.contact-form .form-note{
	font-size: var(--fs-xs);
}

.hero-home .section-title .section-kicker .hero-byline-role{
	font-size: inherit;
}

/* 10.12 Création de sites */
.service-page-cta > .container > p{
	margin: 24px 0 0;
	color: var(--ink-600);
	font-size: var(--fs-sm);
}

.service-page-cta > .container > p.web-cta-note a{
	color: var(--green-600);
	text-decoration-color: currentColor;
}

.service-detail.web-why{
	padding-top: var(--section-y);
}

/* Méthode : frise verticale (puces vertes reliées, plus de pastilles jaunes) */
.web-steps{
	position: relative;
	display: grid;
	gap: 0;
}

.web-steps .what-do-body-item{
	position: relative;
	margin: 0;
	padding: 0 0 28px 40px;
	border: 0;
}

.web-steps .what-do-body-item:last-child{
	padding-bottom: 0;
}

.web-steps .what-do-body-item::before{
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 14px;
	height: 14px;
	border: 3px solid var(--green-600);
	border-radius: 50%;
	background: var(--sand-100);
	z-index: 1;
}

.web-steps .what-do-body-item:not(:last-child)::after{
	content: "";
	position: absolute;
	left: 12px;
	top: 22px;
	bottom: -6px;
	width: 2px;
	background: var(--green-100);
}

.web-steps .what-do-body-item h3{
	padding-left: 0;
	margin-bottom: 6px;
	font-size: var(--fs-h4);
}

.web-steps .what-do-body-item h3::before{
	display: none;
}

.web-steps .what-do-body-item p{
	max-width: 62ch;
	color: var(--ink-600);
}

.pricing-card strong{
	color: var(--ink-900);
}

.pricing-band .pricing-card.web-pricing{
	max-width: none;
	margin-inline: 0;
}

/* Sous-titres un cran sous le H2 de la carte */
.web-pricing > strong{
	display: block;
	margin-bottom: 6px;
	font-size: var(--fs-h4);
	letter-spacing: -.01em;
}

/* Tarif | Démonstration côte à côte : la carte occupe toute la largeur */
@media (min-width: 768px){
	.pricing-band .pricing-card.web-pricing{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--grid-gap);
	}

	.web-pricing > h2{
		grid-column: 1 / -1;
	}

	.web-pricing > strong:nth-of-type(1){ grid-area: 2 / 1; }
	.web-pricing > p:nth-of-type(1){ grid-area: 3 / 1; }
	.web-pricing > strong:nth-of-type(2){ grid-area: 2 / 2; }
	.web-pricing > p:nth-of-type(2){ grid-area: 3 / 2; }
}
.web-intro-btns{
	margin-top: 28px;
}

.web-example img{
	border-radius: var(--r-lg);
	border-color: var(--line);
}

.info-card{
	height: auto;
}

/* Captures « le site que vous consultez » dans des cadres d'appareil */
/* Cadres alignés par le bas : les légendes « Sur ordinateur » et « Sur
   téléphone » partagent la même ligne */
.web-example .web-example-shots{
	align-items: end;
	gap: clamp(20px, 3vw, 48px);
}

.web-example .web-example-shots figure:not(.web-example-mobile){
	padding: 30px 8px 8px;
	border-radius: var(--r-lg);
	background-color: var(--night-900);
	background-image:
		radial-gradient(circle at 18px 15px, rgb(var(--rgb-white) / .3) 4px, transparent 4.5px),
		radial-gradient(circle at 34px 15px, rgb(var(--rgb-white) / .3) 4px, transparent 4.5px),
		radial-gradient(circle at 50px 15px, rgb(var(--rgb-white) / .3) 4px, transparent 4.5px);
	background-repeat: no-repeat;
	box-shadow: var(--shadow-2);
}

.web-example .web-example-mobile{
	justify-self: center;
	max-width: 280px;
	padding: 10px;
	border-radius: var(--r-xl);
	background: var(--night-900);
	box-shadow: var(--shadow-2), inset 0 0 0 1px rgb(var(--rgb-white) / .12);
}

.web-example .web-example-shots img,
.web-example img{
	border: 0;
	border-radius: var(--r-sm);
	box-shadow: none;
}

.web-example .web-example-mobile img{
	border-radius: var(--r-lg);
}

.web-example figcaption{
	margin-top: 10px;
	color: var(--on-night-muted);
	font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   11. Pied de page compact
   -------------------------------------------------------------------------- */
.main-footer,
.main-footer.dark-section{
	padding: clamp(44px, 2rem + 2vw, 64px) 0 0;
	background-color: var(--night-950);
	background-image: none;
	color: rgb(var(--rgb-white) / .78);
}

.footer-grid{
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, .8fr);
	gap: clamp(28px, 3vw, 40px);
	padding-bottom: clamp(28px, 1.5rem + 1.5vw, 40px);
}

.footer-logo img{
	width: 140px;
	max-width: none;
	height: auto;
}

.footer-about{
	max-width: 38ch;
	margin: 16px 0 20px;
	color: rgb(var(--rgb-white) / .72);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.main-footer .footer-social-links{
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	text-align: left;
}

.main-footer .footer-social-links span{
	margin: 0;
	color: rgb(var(--rgb-white) / .72);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.3;
}

.main-footer .footer-social-links ul{
	display: flex;
	gap: 8px;
}

.main-footer .footer-social-links ul li{
	margin: 0;
}

.main-footer .footer-social-links ul li a{
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-night);
	background: transparent;
	color: var(--white);
}

.main-footer .footer-social-links ul li a i{
	color: currentColor;
	font-size: 17px;
}

.main-footer .footer-social-links ul li:hover a{
	border-color: rgb(var(--rgb-white) / .4);
	background: rgb(var(--rgb-white) / .06);
}

.main-footer h3{
	margin: 0 0 16px;
	color: var(--white);
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -.005em;
	text-transform: none;
}

.footer-contact-list{
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-contact-list li{
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.footer-contact-list li > i{
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--mint-300);
}

.footer-contact-list .fa-phone{ -webkit-mask-image: var(--i-phone); mask-image: var(--i-phone); -webkit-mask-size: contain; mask-size: contain; }
.footer-contact-list .fa-envelope{ -webkit-mask-image: var(--i-mail); mask-image: var(--i-mail); -webkit-mask-size: contain; mask-size: contain; }
.footer-contact-list .fa-location-dot{ -webkit-mask-image: var(--i-pin); mask-image: var(--i-pin); -webkit-mask-size: contain; mask-size: contain; }

.footer-contact-list div{
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: rgb(var(--rgb-white) / .78);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

.footer-contact-list a{
	color: var(--white);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgb(var(--rgb-white) / .3);
	text-underline-offset: 3px;
}

.footer-contact-list a:hover{
	text-decoration-color: currentColor;
}

.footer-contact-list a.footer-phone{
	color: var(--gold-500);
	font-size: 1.25rem;
	font-weight: 720;
	letter-spacing: -.01em;
	text-decoration: none;
}

.footer-contact-list a.footer-phone:hover{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.footer-contact-list small,
.footer-label{
	color: rgb(var(--rgb-white) / .7);
	font-size: var(--fs-xs);
}

.main-footer details > summary{
	display: block;
	list-style: none;
	cursor: default;
}

.main-footer details > summary::-webkit-details-marker{
	display: none;
}

.footer-links ul{
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links ul li a{
	min-height: 30px;
	padding: 3px 0;
}

.main-footer .footer-links{
	margin: 0;
}

.footer-links ul li{
	color: rgb(var(--rgb-white) / .78);
	line-height: 1.35;
}

.footer-links ul li::marker{
	content: none;
}

.footer-links ul li a{
	min-height: 36px;
	padding: 4px 0;
	color: rgb(var(--rgb-white) / .78);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: color .15s ease;
}

.footer-links ul li:hover,
.footer-links ul li a:hover{
	color: var(--white);
}

.footer-links ul li a:hover{
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer-copyright-text{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 0;
	padding: 16px 0 20px;
	border-top: 1px solid var(--line-night);
	text-align: left;
}

.footer-copyright-text p{
	color: rgb(var(--rgb-white) / .66);
	font-size: var(--fs-sm);
}

.footer-legal-links{
	justify-content: flex-start;
	gap: 4px 20px;
	margin: 0;
	color: rgb(var(--rgb-white) / .72);
	font-size: var(--fs-sm);
}

.footer-legal-links a,
.footer-legal-links button{
	min-height: 36px;
	color: rgb(var(--rgb-white) / .72);
	text-decoration-color: rgb(var(--rgb-white) / .25);
}

/* --------------------------------------------------------------------------
   12. Barre d'appel mobile, bannière cookies
   -------------------------------------------------------------------------- */
/* Barre claire, visible dès le premier écran et toujours au même endroit :
   Appeler (or) domine, WhatsApp et Écrire en sauge clair. Hauteur fixe
   (--cta-bar-h) réservée en bas du body pour ne rien masquer. */
@media (max-width: 991px), (max-width: 1400px) and (pointer: coarse){
	.mobile-cta-bar{
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
		padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
		background: var(--white);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 18px rgb(var(--rgb-night) / .08);
		visibility: visible;
		transform: none;
		transition: transform .25s var(--ease), visibility 0s linear 0s;
	}

	.mobile-cta-bar a{
		min-height: 48px;
		padding: 4px 8px;
		border-radius: var(--r-md);
		background: var(--green-50);
		box-shadow: inset 0 0 0 1px var(--green-100);
		color: var(--green-700);
		font-size: 1rem;
		font-weight: 650;
		line-height: 1.2;
		text-decoration: none;
		transition: background-color .15s ease;
	}

	.mobile-cta-bar a + a{
		border-left: 0;
	}

	.mobile-cta-bar a:hover,
	.mobile-cta-bar a:focus-visible{
		color: var(--green-700);
		background: var(--green-100);
	}

	.mobile-cta-bar a.mobile-cta-call{
		background: var(--gold-500);
		box-shadow: inset 0 0 0 1.5px rgb(var(--rgb-night) / .55);
		color: var(--night-900);
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.mobile-cta-bar a.mobile-cta-call:hover,
	.mobile-cta-bar a.mobile-cta-call:focus-visible{
		background: var(--gold-600);
		color: var(--night-900);
	}

	.mobile-cta-bar a:focus-visible{
		outline: 3px solid var(--green-600);
		outline-offset: 2px;
	}

	.mobile-cta-bar a.mobile-cta-call .fa-phone{
		-webkit-mask-image: var(--i-phone);
		mask-image: var(--i-phone);
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	/* Contenu final jamais sous la barre ; la réserve prend la couleur du pied
	   de page (visible si la barre s'efface, bannière cookies ouverte) */
	body{
		padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom));
		background-image: linear-gradient(to top, var(--night-950) calc(var(--cta-bar-h) + env(safe-area-inset-bottom)), transparent 0);
	}

	html{
		scroll-padding-bottom: calc(var(--cta-bar-h) + 16px);
	}

	.footer-copyright-text{
		padding-bottom: 24px;
	}

	/* Masquée (bannière cookies ouverte, saisie au clavier virtuel) : elle
	   glisse hors de l'écran et n'est plus focusable (visibility). custom.css
	   la retirait en display: none ; le glissement la remplace. */
	body.consent-open .mobile-cta-bar{
		display: grid;
		visibility: hidden;
		transform: translateY(110%);
		transition: transform .25s var(--ease), visibility 0s linear .25s;
	}
}

/* Petits écrans : WhatsApp et Écrire en icône au-dessus du libellé (16 px)
   pour laisser la place au bouton Appeler */
@media (max-width: 599px){
	.mobile-cta-bar a:not(.mobile-cta-call){
		flex-direction: column;
		gap: 2px;
		padding: 4px;
	}
}

/* Très petits écrans (320 px) : « WhatsApp » garde sa marge intérieure */
@media (max-width: 359px){
	.mobile-cta-bar{
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: 6px;
		padding-left: max(8px, env(safe-area-inset-left));
		padding-right: max(8px, env(safe-area-inset-right));
	}
}

/* Saisie dans un champ sur écran tactile : la barre s'efface pour ne pas
   couvrir le formulaire au-dessus du clavier virtuel */
@media (max-width: 1400px) and (pointer: coarse){
	body:has(:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea):focus) .mobile-cta-bar{
		visibility: hidden;
		transform: translateY(110%);
		transition: transform .25s var(--ease), visibility 0s linear .25s;
	}
}

@media (prefers-reduced-motion: reduce){
	.mobile-cta-bar,
	body.consent-open .mobile-cta-bar{
		transition: none;
	}
}

/* Bannière cookies : compacte, boutons de même poids */
.consent-panel{
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	color: var(--ink-900);
	box-shadow: var(--shadow-2);
}

.consent-panel h2{
	font-size: var(--fs-h3);
}

.consent-panel p{
	color: var(--ink-600);
	font-size: var(--fs-sm);
}

.consent-panel a,
.consent-link{
	color: var(--green-600);
}

/* Lien « En savoir plus » : zone de toucher de 44 px sans changer la ligne */
.consent-panel p a{
	padding-block: 12px;
}

.consent-panel .consent-actions .btn-default,
.consent-actions .btn-default{
	min-height: 48px;
	border: 0;
	color: var(--ink-900);
	box-shadow: inset 0 0 0 1.5px var(--ink-900);
}

.consent-panel .consent-actions .btn-default:hover{
	background: var(--ink-900);
	color: var(--white);
}

.consent-backdrop{
	background: rgb(var(--rgb-night) / .22);
}

/* Le panneau reçoit le focus par script : pas de cadre */
.consent-panel:focus,
.consent-panel:focus-visible{
	outline: none;
}

@media (max-width: 767px){
	.consent-panel{
		padding: 16px 16px 12px;
	}

	.consent-panel h2{
		font-size: 1.125rem;
	}

	.consent-panel p{
		font-size: 1rem;
	}

	.consent-panel .consent-actions .consent-link{
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   13. Adaptations : tablette et téléphone
   -------------------------------------------------------------------------- */
@media (max-width: 1199px){
	.service-pages-list{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footer-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.steps{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
	}

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

	/* Bandeau des infos clés en 2 × 2 jusqu'à 1199 px : à 4 colonnes, les
	   textes se coupaient sur 4 ou 5 lignes en 1024 px */
	.home-key-info-list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-key-info-list li:nth-child(3)::before{
		display: none;
	}

	.home-key-info-list li:nth-child(n + 3){
		border-top: 1px solid var(--line);
		border-radius: 0 0 var(--r-md) var(--r-md);
	}
}

@media (max-width: 991px){
	:root{
		--header-h: 68px;
	}

	.hero-grid{
		grid-template-columns: 1fr;
	}

	.hero-portrait{
		display: none;
	}

	.hero-byline-avatar{
		display: block;
	}

	.hero-byline-name{
		display: block;
		margin-bottom: 2px;
		color: var(--white);
		font-size: 1rem;
		font-weight: 650;
		letter-spacing: -.005em;
		text-transform: none;
	}

	.hero-home .section-title .section-kicker{
		display: block;
		color: var(--on-night-muted);
		font-size: 1rem;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.35;
		text-transform: none;
	}

	.hero-home .section-title .section-kicker::before{
		display: none;
	}

	.home-key-info{
		margin-top: -40px;
	}

	.home-services .our-protection-box,
	.about-grid{
		grid-template-columns: 1fr;
	}

	.why-choose-intro .section-title{
		display: block;
	}

	.why-choose-intro .section-title > p:not(.section-kicker){
		margin-top: 16px;
	}

	.about-us .why-choose-item-box{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Étapes : détail replié derrière « Voir le détail » */
	.step-details > summary{
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		margin-top: 6px;
		color: var(--white);
		font-size: 1rem;
		font-weight: 650;
		line-height: 1.3;
		list-style: none;
		cursor: pointer;
		text-decoration: underline;
		text-decoration-color: rgb(var(--rgb-mint) / .6);
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
	}

	.step-details > summary::after{
		content: "";
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		background-color: var(--mint-300);
		-webkit-mask: var(--i-plus) center / contain no-repeat;
		mask: var(--i-plus) center / contain no-repeat;
	}

	.step-details[open] > summary::after{
		-webkit-mask-image: var(--i-minus);
		mask-image: var(--i-minus);
	}

	.step-details > summary:hover{
		text-decoration-color: currentColor;
		text-decoration-thickness: 2px;
	}

	.steps .step-details ul{
		margin-top: 8px;
	}

	/* Tablette : photo en bandeau (cadrage buste), sans vide à droite */
	.about-photo{
		max-width: none;
	}

	.about-photo img{
		aspect-ratio: 16 / 9;
		max-height: 380px;
		object-position: 50% 16%;
	}

	.section-btn{
		justify-content: flex-start;
		margin-top: 20px;
	}

	.faq-content{
		position: static;
		margin-bottom: 32px;
	}

	.page-header-grid,
	.service-layout,
	.page-contact-us .contact-us-box{
		grid-template-columns: 1fr;
	}

	.service-aside.pricing-band,
	.page-contact-us .contact-us-content,
	.page-single-sidebar{
		position: static;
	}

	.page-single-sidebar{
		margin-bottom: 40px;
	}

	.team-single-image img{
		aspect-ratio: 16 / 10;
		max-height: 320px;
	}

	.service-page-cta .cta-card{
		grid-template-columns: 1fr;
		row-gap: 24px;
		padding: 32px 24px;
	}

	.service-page-cta .cta-card > .hero-btns{
		flex-direction: row;
		flex-wrap: wrap;
	}

	.cta-card > .related-links{
		margin-top: 8px;
		padding-top: 24px;
	}

	/* Fin de page : la carte d'appel puis la création, l'une sous l'autre ;
	   la création garde son icône à gauche du texte */
	.home-final-grid{
		grid-template-columns: 1fr;
	}

	.home-web-offer-card{
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		column-gap: 24px;
		row-gap: 20px;
	}

	.home-web-offer-card > .section-title,
	.home-web-offer-card > .hero-btns{
		grid-column: 2;
	}

	.home-web-offer-card > .home-web-offer-icon{
		grid-row: 1 / span 2;
	}
}

@media (min-width: 768px) and (max-width: 1199px){
	/* Tablette (portrait et paysage) : même plancher de 16 px que sur
	   téléphone pour les libellés, prix, fil d'Ariane et textes de carte */
	:root{
		--fs-sm: 1rem;
		--fs-xs: 1rem;
		--fs-kicker: 1rem;
	}
}

@media (max-width: 767px){
	/* Téléphone : corps à 17 px, aucun texte courant sous 16 px (mentions
	   du bas de page comprises) */
	:root{
		--fs-body: 1.0625rem;
		--fs-sm: 1rem;
		--fs-xs: 1rem;
		--fs-kicker: 1rem;
	}

	.footer-copyright-text p,
	.footer-legal-links{
		font-size: 1rem;
	}

	.container{
		padding-left: 16px;
		padding-right: 16px;
	}

	.section-title h2{
		font-size: var(--fs-h2);
	}

	/* Bandeau d'accueil compact : visage, promesse, appel, note */
	.hero.hero-home{
		padding: 20px 0 64px;
	}

	.hero-byline{
		margin-bottom: 16px;
	}

	.hero-home .section-title{
		margin-bottom: 20px;
	}

	/* Taille calée sur la largeur : le titre tient en 3 lignes équilibrées
	   (text-wrap: balance), sans ligne courte en « drapeau » */
	.hero-home .section-title h1{
		font-size: clamp(1.625rem, 7.75vw - .155rem, 2.25rem);
		line-height: 1.1;
		letter-spacing: -.022em;
	}

	.hero-home .section-title p.hero-lead{
		margin-top: 14px;
		font-size: 1rem;
		line-height: 1.55;
	}

	.hero-home .hero-content-body{
		gap: 12px;
	}

	.hero-home .hero-btn{
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 4px;
	}

	.hero-home .hero-btn .btn-default.btn-call{
		width: 100%;
	}

	/* « Décrire ma panne » en lien texte sur téléphone */
	body .hero.hero-home .hero-btn .btn-default.btn-highlighted{
		min-height: 44px;
		padding: 0;
		box-shadow: none;
		background: transparent;
		text-decoration: underline;
		text-decoration-color: rgb(var(--rgb-white) / .4);
		text-underline-offset: 4px;
		font-size: 1rem;
	}

	body .hero.hero-home .hero-btn .btn-default.btn-highlighted:hover{
		background: transparent;
		box-shadow: none;
		text-decoration-color: currentColor;
	}

	.home-key-info{
		margin-top: -44px;
	}

	.home-key-info-list{
		padding: 4px;
		border-radius: var(--r-lg);
	}

	.home-key-info-list li{
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 2px;
		padding: 12px 12px;
	}

	.key-info-icon{
		display: none;
	}

	.home-key-info-list strong{
		font-size: 1.0625rem;
	}

	.home-key-info-list .key-info-price strong{
		gap: 4px;
		margin-bottom: 2px;
	}

	.home-key-info-list .key-info-price .key-info-figure{
		font-size: 1.875rem;
	}

	.home-key-info-list span:not(.key-info-icon),
	.home-key-info-list a{
		font-size: 1rem;
		line-height: 1.35;
	}

	.service-pages-list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.service-pages-list a{
		min-height: 112px;
		gap: 12px;
		padding: 14px 14px 36px;
		font-size: 1rem;
	}

	.service-pages-list a::after{
		right: 14px;
		bottom: 14px;
	}

	.service-pages-icon{
		width: 40px;
		height: 40px;
	}

	.service-pages-icon::before{
		width: 20px;
		height: 20px;
	}

	.protection-card.protection-content{
		padding: 22px 20px;
		border-radius: var(--r-lg);
	}

	.protection-card-icon{
		display: none;
	}

	.protection-card .section-title .section-kicker{
		min-height: 0;
		margin-bottom: 10px;
		padding-right: 0;
	}

	.protection-card > .price-pill{
		margin: 0 0 18px;
	}

	.protection-card--workshop::before{
		height: 240px;
	}

	.about-us .why-choose-us{
		margin-top: 40px;
		padding-top: 40px;
	}

	.protection-card .protection-list ul{
		gap: 8px;
	}

	.protection-card .section-title{
		margin-bottom: 18px;
	}

	.protection-card .protection-list{
		padding-top: 18px;
	}

	.protection-card .protection-btn .btn-default{
		min-height: 52px;
		padding: 10px 16px;
		font-size: 1rem;
	}

	.protection-card .protection-btn{
		width: 100%;
		padding-top: 24px;
	}

	.protection-card .protection-btn .btn-default{
		width: 100%;
	}

	.testimonial-item{
		padding: 22px;
	}

	.steps{
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.step{
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 14px;
		padding-bottom: 28px;
	}

	.step:last-child{
		padding-bottom: 0;
	}

	.steps .how-work-content p,
	.steps .how-work-content ul li{
		font-size: 1rem;
		line-height: 1.5;
	}

	.step-num{
		font-size: 1rem;
	}

	.steps .how-work-content ul{
		gap: 6px;
		margin-top: 12px;
		padding-top: 0;
		border-top: 0;
	}

	.step .step-num{
		grid-row: 1 / span 2;
	}

	.step-title{
		margin: 10px 0 8px;
	}

	.step .how-work-content{
		grid-column: 2;
	}

	.step:not(:last-child)::after,
	.step:nth-child(2)::after{
		display: block;
		top: 52px;
		bottom: 6px;
		left: 21.5px;
		right: auto;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg, rgb(var(--rgb-mint) / .45), rgb(var(--rgb-white) / .08));
	}

	.why-choose-counter-list.stats-row{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
		margin-top: 40px;
		padding-top: 32px;
	}

	.stats-row .why-choose-counter-item{
		padding-left: 16px;
	}

	.stats-row .why-choose-counter-item:nth-child(3){
		padding-left: 0;
		border-left: 0;
	}

	.about-photo img{
		aspect-ratio: 16 / 11;
		max-height: 260px;
		object-position: 50% 14%;
	}

	.about-quote p{
		font-size: 1.0625rem;
	}

	.about-quote{
		margin-bottom: 22px;
		padding-left: 16px;
	}

	.about-photo-card{
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
		padding: 10px 14px 10px 10px;
	}

	.about-photo-card .about-photo-icon{
		width: 36px;
		height: 36px;
	}

	.about-us-list ul{
		flex-direction: column;
	}

	.about-us .why-choose-item-box{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.why-choose-intro .section-title{
		margin-bottom: 28px;
	}

	.about-us .why-choose-item{
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		min-height: 0;
		padding: 14px;
	}

	.about-us .why-choose-item h3{
		font-size: 1rem;
	}

	.about-us .why-choose-item .icon-tile{
		width: 40px;
		height: 40px;
	}

	.faqs-review-box{
		max-width: none;
	}

	.faq-accordion .accordion-header .accordion-button,
	.faq-accordion .accordion-header .accordion-button.collapsed{
		padding: 16px 60px 16px 18px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		right: 16px;
	}

	.faq-accordion .accordion-item .accordion-button::before{
		right: 23px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 0 18px 20px;
	}

	.home-final-cta{
		padding: 28px 20px;
		border-radius: var(--r-lg);
	}

	.home-final-cta .section-title{
		margin-bottom: 22px;
	}

	.home-final-cta .section-title p:not(.section-kicker){
		font-size: 1.0625rem;
	}

	.home-final-cta .hero-btns{
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.home-web-offer-card{
		display: flex;
		gap: 16px;
		padding: 24px 20px;
		border-radius: var(--r-lg);
	}

	.home-web-offer-icon{
		display: none;
	}

	.home-web-offer-card .hero-btns,
	.home-web-offer-card .hero-btns .btn-default{
		width: 100%;
	}

	/* Bandeaux intérieurs compacts */
	.page-header-box h1,
	.page-header-service .page-header-box h1{
		font-size: 2rem;
	}

	.page-header-box ol,
	.page-header-box .breadcrumb{
		margin-bottom: 8px;
	}

	.page-header-lead{
		margin-top: 12px;
		font-size: 1rem;
	}

	.page-header-btns,
	.page-header .hero-btns{
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		margin-top: 20px;
	}

	body .page-header .page-header-btns .btn-default.btn-ghost{
		min-height: 44px;
		background: transparent;
		box-shadow: none;
		text-decoration: underline;
		text-decoration-color: rgb(var(--rgb-white) / .4);
		text-underline-offset: 4px;
	}

	.page-header-card{
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 16px;
		padding: 16px;
	}

	.page-header-price{
		flex: 1 1 100%;
		padding-bottom: 12px;
	}

	.page-header-price strong{
		font-size: 1.25rem;
	}

	.page-header-person{
		display: none;
	}

	.service-page-body .service-detail-card{
		padding: 22px;
	}

	.service-aside .pricing-card{
		padding: 22px;
	}

	/* Tarifs des prestations : libellé puis montant sur toute la largeur */
	.service-aside .pricing-figures li{
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 2px;
		padding: 14px 0;
	}

	.service-aside .pricing-figure-value{
		font-size: 1.5rem;
		line-height: 1.2;
	}

	.service-page-cta .cta-card > .hero-btns{
		flex-direction: column;
		align-items: stretch;
	}

	.related-links ul{
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.related-links a{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.services-hub-grid{
		grid-template-columns: 1fr;
	}

	.service-card{
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 14px;
		padding: 18px;
	}

	.service-card .service-pages-icon{
		grid-row: 1 / span 3;
	}

	.member-content-body ul{
		grid-template-columns: 1fr;
	}

	.member-content-body ul li:nth-child(odd){
		border-right: 0;
	}

	.member-content-body ul li:nth-last-child(2){
		border-bottom: 1px solid var(--line);
	}

	.page-contact-us .contact-us-form{
		padding: 22px 18px;
		border-radius: var(--r-lg);
	}

	.contact-form .contact-submit{
		width: 100%;
	}

	.reviews-summary{
		grid-template-columns: 1fr;
		padding: 26px 20px 22px;
		border-radius: var(--r-lg);
	}

	.reviews-summary-score{
		gap: 18px;
	}

	.reviews-summary-meta{
		padding-left: 18px;
	}

	.reviews-summary-text{
		font-size: 1.0625rem;
	}

	.reviews-summary-actions{
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		width: 100%;
	}

	.reviews-summary .reviews-summary-link{
		justify-content: center;
	}

	/* Grille des tarifs : une prestation par bloc, montant en pastille sous
	   le libellé (plus de 2 colonnes serrées) */
	.pricing-card-table{
		--card-pad: 16px;
	}

	.pricing-card-table > h2{
		padding: 22px 16px 14px;
	}

	.pricing-card-table .table thead{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pricing-card-table .table,
	.pricing-card-table .table tbody,
	.pricing-card-table .table tbody tr{
		display: block;
		width: 100%;
	}

	.pricing-card-table .table tbody tr{
		padding: 18px 16px 20px;
		border-top: 1px solid var(--line);
	}

	.pricing-card-table .table tbody th,
	.pricing-card-table .table tbody td{
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	/* La pastille est un élément flex : l'alignement à droite (text-end) ne
	   s'applique plus, le montant se cale à gauche sous le libellé */
	.pricing-card-table .table tbody td{
		display: flex;
		justify-content: flex-start;
		margin-top: 12px;
		white-space: normal;
	}

	.pricing-card .table td strong{
		padding: 6px 14px;
		border: 1px solid var(--line);
		border-radius: var(--r-pill);
		background: var(--sand-100);
		line-height: 1.3;
	}

	.error-shortcuts{
		grid-template-columns: 1fr;
	}

	/* Pied de page mobile : coordonnées, puis listes repliables */
	.footer-grid{
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.footer-about{
		margin: 14px 0 16px;
	}

	.main-footer details{
		border-top: 1px solid var(--line-night);
	}

	.main-footer details > summary{
		position: relative;
		display: flex;
		align-items: center;
		min-height: 56px;
		cursor: pointer;
	}

	.main-footer details > summary h3{
		margin: 0;
	}

	.main-footer details > summary::after{
		content: "";
		position: absolute;
		right: 4px;
		top: 50%;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		background-color: var(--mint-300);
		-webkit-mask: var(--i-plus) center / contain no-repeat;
		mask: var(--i-plus) center / contain no-repeat;
	}

	.main-footer details[open] > summary::after{
		-webkit-mask-image: var(--i-minus);
		mask-image: var(--i-minus);
	}

	.main-footer details[open] > ul{
		padding-bottom: 16px;
	}

	.footer-grid{
		padding-bottom: 0;
	}

	.footer-grid .footer-links + .footer-links{
		margin-top: -28px;
	}

	.footer-legal-links{
		gap: 0 20px;
	}

	.footer-links ul{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	.footer-links ul li a{
		min-height: 44px;
	}

	.footer-copyright-text{
		flex-direction: column;
		align-items: flex-start;
		padding-top: 18px;
	}

	.footer-legal-links a,
	.footer-legal-links button,
	.footer-contact-list a{
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.footer-contact-list li{
		gap: 10px;
	}
}

/* Au-delà de 767 px, les listes du pied de page restent ouvertes : le résumé
   n'est plus un bouton (function.js annule le clic et le retire de l'ordre
   de tabulation), il garde seulement son titre */
@media (min-width: 768px){
	.main-footer details > summary{
		cursor: default;
	}
}

@media (max-width: 767px){
	/* Fil d'Ariane sur une ligne (l'ancienne règle le centrait sur 3 lignes) */
	.page-header-box .breadcrumb-item:nth-child(n+3){
		flex-basis: auto;
		justify-content: flex-start;
		text-align: left;
	}

	.page-header-box ol .breadcrumb-item:nth-child(n+3)::before{
		display: inline-flex;
	}

	.page-header,
	.page-header-service{
		padding: 22px 0 30px;
	}

	.page-contact-us{
		padding-top: 28px;
	}

	.page-contact-us .contact-us-form .section-title{
		margin-bottom: 20px;
	}

	.page-contact-us .contact-us-form .section-title p:not(.section-kicker){
		font-size: 1rem;
	}

	.contact-form-title{
		margin-bottom: 16px;
		padding-top: 18px;
	}

	/* Tuiles de prestations en rangées compactes (icône + libellé) */
	.service-pages-list a{
		flex-direction: row;
		align-items: center;
		gap: 10px;
		min-height: 68px;
		padding: 10px;
		font-size: 1rem;
		line-height: 1.25;
		border-radius: var(--r-md);
	}

	.service-pages-list a::after{
		display: none;
	}

	/* Création de sites et Appeler (numéro insécable) sur toute la largeur */
	.service-pages-list .service-pages-web,
	.service-pages-list .service-pages-call{
		grid-column: 1 / -1;
	}

	.service-pages-icon{
		width: 36px;
		height: 36px;
		border-radius: var(--r-md);
	}

	.service-pages-icon::before{
		width: 19px;
		height: 19px;
	}
}

@media (max-width: 767px){
	.page-header--doc .page-header-box{
		padding-inline: 0;
	}
}

@media (max-width: 380px){
	/* Tuiles étroites : icône réduite pour garder le libellé à 16 px */
	.service-pages-list a{
		gap: 8px;
		padding: 10px 8px;
		hyphens: auto;
	}

	.service-pages-icon{
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 359px){
	.service-pages-list{
		grid-template-columns: 1fr;
	}
}

/* Très petits écrans (320-374 px) : notes 5,0 réduites pour tenir dans
   leur carte avec les étoiles */
@media (max-width: 374px){
	.reviews-score{
		column-gap: 14px;
		padding: 18px 16px;
	}

	.reviews-score-figure{
		font-size: 3.25rem;
	}

	.reviews-score-body{
		padding-left: 14px;
	}

	.reviews-score-stars,
	.reviews-summary-stars{
		font-size: 1.0625rem;
		letter-spacing: 1px;
	}

	.reviews-summary-score{
		gap: 14px;
	}

	.reviews-summary-figure{
		font-size: 3.5rem;
	}

	.reviews-summary-meta{
		padding-left: 14px;
	}

	.reviews-summary-count{
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   14. Préférences système
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	.service-pages-list a,
	.service-card,
	.card-link{
		transition: none;
	}

	.service-pages-list a:hover,
	.service-pages-list a:focus-visible,
	.service-card:hover,
	.card-link:hover{
		transform: none;
	}
}

/* Contraste élevé (Windows) : les icônes dessinées en masque CSS prennent
   la couleur du texte système au lieu de disparaître avec les fonds */
@media (forced-colors: active){
	.fa-solid,
	.fa-regular,
	.fa-brands,
	.icon-tile::before,
	.service-pages-icon::before,
	.key-info-icon::before,
	.protection-card-icon::before,
	.home-web-offer-icon::before,
	.about-photo-icon::before,
	.pricing-ticket-icon::before,
	.btn-default.btn-call::after,
	.btn-link::after,
	.related-links a::after,
	.service-pages-list a::after,
	.page-catagery-list ul li a::before,
	.faq-accordion .accordion-item .accordion-button::before,
	.main-footer details > summary::after,
	.step-details > summary::after,
	.slicknav_nav li.highlighted-menu a::before,
	.service-card-cta::after,
	.route-link::before,
	:is(.service-checklist, .area-list, .protection-list ul, .about-us-list ul, .how-work-content ul, .contact-reassurance, .web-example-points, .check-list) li::after,
	.legal-content ul li::before{
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	a .fa-solid,
	a .fa-regular,
	a .fa-brands,
	a .service-pages-icon::before,
	.btn-link::after,
	.related-links a::after,
	.service-pages-list a::after,
	.page-catagery-list ul li a::before{
		background-color: LinkText;
	}

	.mobile-cta-bar,
	.mobile-cta-bar a{
		border: 1px solid CanvasText;
	}

	/* Boutons : leur forme venait du fond et d'une ombre, supprimés par les
	   couleurs forcées ; un contour les garde reconnaissables */
	.btn-default{
		border: 2px solid ButtonText;
	}

	/* Texture photo de la carte Atelier : décorative, retirée */
	.protection-card--workshop::before{
		display: none;
	}

	/* Actions de la page contact : pastille transparente, glyphe en LinkText */
	.contact-action{
		border: 1px solid LinkText;
	}

	.contact-action > i{
		background-color: transparent;
	}

	.contact-action > i::before{
		forced-color-adjust: none;
		background-color: LinkText;
	}

	/* Bouton du menu (barres en couleur de fond) et logos à texte blanc */
	.slicknav_btn{
		border: 1px solid ButtonText;
	}

	.slicknav_icon .slicknav_icon-bar{
		forced-color-adjust: none;
		background-color: ButtonText;
	}

	.navbar-brand img,
	.footer-logo img{
		forced-color-adjust: none;
		border-radius: var(--r-sm);
		background-color: var(--night-900);
	}

	/* Puces du carrousel d'avis : seules commandes visibles du carrousel ;
	   la puce active reste plus large (22 px), donc lisible sans couleur */
	.testimonial-pagination .swiper-pagination-bullet::before{
		forced-color-adjust: none;
		background-color: ButtonText;
	}

	.testimonial-pagination .swiper-pagination-bullet-active::before{
		background-color: Highlight;
	}

	/* Boutons de la fenêtre cookies : la règle de base (border: 0, plus
	   spécifique) annulait le contour des boutons ci-dessus */
	.consent-panel .consent-actions .btn-default,
	.consent-actions .btn-default{
		border: 2px solid ButtonText;
	}

	/* Page courante du menu : trait sous l'entrée (ordinateur), filet à
	   gauche (tiroir mobile) ; bouton d'appel du tiroir en forme de bouton */
	.main-menu ul li.nav-item > a[aria-current="page"]::after{
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	.slicknav_nav a[aria-current="page"]{
		border-left: 3px solid CanvasText;
	}

	.slicknav_nav li.highlighted-menu a{
		border: 2px solid ButtonText;
	}
}

/* --------------------------------------------------------------------------
   Relecture 2 : ajustements tablette tactile, 320 px et carte de note
   (placés en fin de feuille pour primer sur les règles de base)
   -------------------------------------------------------------------------- */
/* Une colonne de 768 à 991 px : la carte de note n'est plus calée à
   gauche sur la moitié de la largeur (sous 768 px, règle identique) */
@media (max-width: 991px){
	.faqs-review-box{
		max-width: none;
	}
}

/* 320 px : la note passe au-dessus des avatars au lieu d'être rognée */
@media (max-width: 359px){
	.faqs-review-body{
		flex-wrap: wrap;
		row-gap: 12px;
	}

	/* « Atelier sur RDV à Neuilly-Plaisance » : la cellule ne déborde plus
	   de sa colonne (le nom peut se couper sous 360 px seulement) */
	.home-key-info .text-nowrap{
		white-space: normal !important;
	}
}

/* Tablette tactile en paysage (en-tête d'ordinateur, écran tactile) :
   logo et note du portrait à 44 px de haut, numéro d'en-tête à 16 px */
@media (min-width: 992px) and (pointer: coarse){
	.main-header .navbar-brand{
		padding-block: 4px;
		margin-block: -4px;
	}

	a.hero-portrait-rating{
		min-height: 44px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) and (pointer: coarse){
	.header-phone-num{
		font-size: 1rem;
	}
}

/* Tablette tactile : liens du pied de page à 44 px, comme sur téléphone */
@media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse){
	.footer-links ul li a,
	.footer-legal-links a,
	.footer-legal-links button,
	.footer-contact-list a{
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   Relecture 3 : encarts collants, exemple de la page Création, coupures
   (placés en fin de feuille pour primer sur les règles de base)
   -------------------------------------------------------------------------- */
/* Une colonne n'est collante que si elle tient en entier sous l'en-tête
   (100 px) : sur un portable de 768 px de haut (zone visible d'environ
   650 px), le tarif d'une prestation, la photo et la note d'À propos ou les
   coordonnées du contact défilent avec la page au lieu d'être coupés en bas.
   Encarts de prestation et d'À propos : 720 px au plus ; coordonnées du
   contact : 885 px à partir de 1280 px de large, plus de 950 px en dessous. */
@media (min-width: 992px) and (max-height: 859px){
	.service-aside.pricing-band,
	.page-team-single .page-single-sidebar{
		position: static;
	}
}

@media (min-width: 992px) and (max-height: 1019px), (min-width: 992px) and (max-width: 1279px){
	.page-contact-us .contact-us-content{
		position: static;
	}
}

/* Sommaire de la FAQ et carte d'appel de l'accueil (470 px au plus) */
@media (min-width: 992px) and (max-height: 619px){
	.page-single-sidebar,
	.faq-content{
		position: static;
	}
}

/* Création : la capture « Sur ordinateur » occupe toute la largeur sous
   768 px (la grille centrait la figure et la réduisait à son image) */
@media (max-width: 767px){
	.web-example .web-example-shots figure:not(.web-example-mobile){
		justify-self: stretch;
		width: 100%;
	}
}

/* Zone : deux colonnes seulement si chaque commune y tient sur une ligne
   (« Le Perreux-sur-Marne » ne se coupe plus au trait d'union), sinon une */
.area-list{
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(14rem, calc((100% - 28px) / 2))), 1fr));
}

/* 320 px : l'adresse de l'atelier (« 93360 Neuilly-Plaisance », insécable)
   élargissait la grille du contact au-delà de l'écran ; le nom peut se
   couper sous 360 px seulement, comme dans les infos clés de l'accueil */
@media (max-width: 359px){
	.contact-info-item h3 .text-nowrap{
		white-space: normal !important;
	}
}

@media (max-width: 991px){
	.page-contact-us .contact-us-box{
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Services : paragraphe de liens sous la grille équilibré sur ses deux
   lignes (« tous les tarifs » n'est plus coupé en deux) */
.services-hub-more{
	text-wrap: balance;
}

/* Avis : l'espacement vient de la grille ; la marge héritée du thème
   (30 px) laissait un vide sous le texte de chaque carte */
.page-testimonials .testimonial-item{
	margin-bottom: 0;
}

/* Liens isolés (hors phrase) : zone de toucher de 44 px sur écran tactile
   et sous 1200 px. Téléphone et e-mail des adresses, sur deux lignes qui
   se suivent : la ligne passe à 44 px, sans chevauchement des deux zones. */
@media (max-width: 1199px), (pointer: coarse){
	.legal-content address a,
	.consent-embed-placeholder p > a,
	.faq-more-links a{
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Intitulé du tableau des tarifs, suivi de sa description : la marge
	   négative garde la hauteur de la ligne */
	.pricing-card-table th[scope="row"] > a{
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-block: -11px;
	}
}

/* FAQ : liens « Voir tous les tarifs » et « Voir la zone d'intervention »
   côte à côte, l'un sous l'autre sur téléphone (sans point médian seul en
   fin de ligne) */
.faq-more-links{
	display: flex;
	flex-wrap: wrap;
	column-gap: 24px;
}

/* Lien seul d'une carte de la page Création : sous 768 px, il tient sur
   deux lignes (48 px) et le point final passerait seul à la ligne */
@media (min-width: 768px) and (max-width: 1199px), (min-width: 768px) and (pointer: coarse){
	.info-card p > a:only-child{
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-block: -11px;
	}
}

/* Fenêtres modales (cookies, demande envoyée) : html,body{overflow-x:clip}
   empêchait le blocage par <body> (la page défilait dessous et l'en-tête
   collant disparaissait). Le blocage passe à <html> (classe posée par
   privacy.js et function.js ; un sélecteur :has() triplait le coût du calcul
   des styles au chargement) ; la gouttière de la barre de défilement reste
   réservée, d'où aucun décalage horizontal (la compensation ajoutée par
   Bootstrap devient inutile). */
html.is-scroll-locked{
	overflow: hidden;
	scrollbar-gutter: stable;
}

body.consent-open,
body.modal-open{
	overflow-x: clip !important;
	overflow-y: visible !important;
	padding-right: 0 !important;
}