/* RM Serrure — DA Wanisite déclinée en clair : fond blanc, bleu marine RM (logo #12305f), téléphone d'abord.
   Recette relevée sur wanisite-site : mêmes jetons, grille, halos, boutons, surlignage. */

:root {
	--bg: #ffffff; --bg2: #f5f8fd; --bg3: #ebf1fb; --titre: #0b1d42;
	--text: #1c2a48; --text2: rgba(11, 29, 66, .68); --text3: rgba(11, 29, 66, .44);
	--t: #1f4fbf; --td: #12305f; --t-fonce: #1f4fbf;
	--border: rgba(18, 48, 95, .10); --borderl: rgba(18, 48, 95, .18);
	--encre-clair: #0b1d42;
	--rouge: #d02020; --rouge-fonce: #9b1515;
	--degrade-rouge: linear-gradient(160deg, #f04a3e 0%, #d02020 45%, #9b1515 100%);
	--or: #b8892b; --or-clair: #e6c76a; --or-fonce: #8a6418;
	--degrade-or: linear-gradient(120deg, #e9cf7f 0%, #c9a03c 45%, #9c7220 100%);
	--dispo: #22c55e; --occupe: #f59e0b; --absent: #94a3b8;
	--sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
	--mono: 'Outfit', ui-sans-serif, system-ui, sans-serif;
	--serif: 'Playfair Display', serif;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--gouttiere: 16px;
	--barre-h: 64px;
	--grille: linear-gradient(rgba(18,48,95,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(18,48,95,.06) 1px, transparent 1px), linear-gradient(rgba(18,48,95,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(18,48,95,.10) 1px, transparent 1px);
	--degrade-t: linear-gradient(120deg, #3567d8, var(--t) 55%, var(--td));
	--degrade-btn: linear-gradient(160deg, #3d70e0 0%, var(--t) 45%, var(--td) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html.modal-ouvert { overflow: hidden; }
body {
	margin: 0; background: var(--bg); color: var(--text);
	font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
	padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom));
}
::selection { background: var(--t); color: var(--bg); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--t); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; color: var(--titre); }
p { margin: 0 0 1em; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.cadre { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gouttiere); }
@media (min-width: 900px) { :root { --gouttiere: 32px; } }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: -999px; top: 8px; background: var(--t); color: var(--bg); padding: 8px 12px; z-index: 100; }
.evitement:focus { left: 8px; }
.note { font-size: .875rem; color: var(--text3); }

/* ---------- Fond laboratoire ---------- */

.lab-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
	background: radial-gradient(ellipse 100% 65% at 50% 0%, rgba(31,79,191,.10) 0%, rgba(31,79,191,.05) 32%, rgba(31,79,191,.02) 55%, transparent 75%); }
.lab-ambient::before { content: ''; position: absolute; inset: -10%; background-image: var(--grille);
	background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px; opacity: .45;
	-webkit-mask-image: radial-gradient(130% 120% at 50% 50%, #000 0%, #000 55%, transparent 96%); mask-image: radial-gradient(130% 120% at 50% 50%, #000 0%, #000 55%, transparent 96%); }
.aglow { position: absolute; border-radius: 50%; }
.a1 { width: 40vw; height: 40vw; left: -8vw; top: 4vh; background: radial-gradient(circle, rgba(31,79,191,.16), transparent 70%); }
.a2 { width: 36vw; height: 36vw; right: -6vw; top: 42vh; background: radial-gradient(circle, rgba(31,79,191,.12), transparent 70%); }
.a3 { width: 42vw; height: 42vw; left: 22vw; bottom: -8vh; background: radial-gradient(circle, rgba(31,79,191,.10), transparent 72%); }
.agrain { position: absolute; inset: 0; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
@media (max-width: 899px) { .a1 { width: 90vw; height: 90vw; } .a2 { width: 80vw; height: 80vw; } .a3 { display: none; } }

/* ---------- Navigation en pilule ---------- */

.navbar { position: sticky; top: 0; z-index: 50; padding: 12px var(--gouttiere); display: flex; justify-content: center; }
.nav-pill { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 1116px; padding: 6px 8px 6px 8px; border-radius: 999px;
	background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--borderl); box-shadow: 0 20px 50px -24px rgba(11,29,66,.17); }
.marque { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin: 0; color: var(--titre); }
.marque__logo { width: 38px; height: 38px; border-radius: 50%; background: #e9f0fb; border: 1px solid var(--borderl); object-fit: cover; }
.marque__nom { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.marque__nom b { color: var(--t); }

.nav { display: none; }
.etat { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0 auto; padding: 7px 12px; border-radius: 999px; background: rgba(31,79,191,.06); border: 1px solid var(--border);
	font-family: var(--mono); font-size: 11px; color: var(--text); white-space: nowrap; }
.etat__point { width: 8px; height: 8px; border-radius: 50%; background: var(--dispo); flex: none; box-shadow: 0 0 10px var(--dispo); }
[data-etat="intervention"] .etat__point { background: var(--occupe); box-shadow: 0 0 10px var(--occupe); }
[data-etat="injoignable"] .etat__point { background: var(--absent); box-shadow: none; }
.etat__delai { color: var(--text2); }
.entete__tel { display: none !important; }
@media (max-width: 399px) { .marque__nom { display: none; } }

@media (min-width: 1000px) {
	.nav-pill { padding: 8px 8px 8px 10px; gap: 14px; }
	.nav { display: flex; gap: 2px; margin-left: 6px; }
	.nav a { font-size: 14px; color: var(--text2); padding: 9px 14px; border-radius: 999px; text-decoration: none; position: relative; transition: color .15s, background .15s; }
	.nav a:hover { color: var(--titre); background: rgba(31,79,191,.08); }
	.nav a[aria-current="page"] { color: var(--titre); }
	.nav a[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: var(--t); border-radius: 2px; }
	.entete__tel { display: inline-flex !important; border-radius: 999px !important; }
}

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

.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border: 0; border-radius: 8px; position: relative; overflow: hidden; isolation: isolate;
	background: var(--degrade-btn); color: #fff; font: 700 14.5px var(--sans); text-decoration: none; white-space: nowrap;
	box-shadow: 0 8px 26px -8px rgba(31,79,191,.45), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s, box-shadow .2s; }
.btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); transform: translateX(-120%); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 38px -6px rgba(31,79,191,.5), inset 0 1px 0 rgba(255,255,255,.5); color: #fff; }
.btn-primary:hover::before { transform: translateX(120%); transition: transform .7s ease; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px; border: 1px solid rgba(31,79,191,.25); color: var(--text); background: rgba(31,79,191,.06);
	font: 600 14px var(--sans); text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; }
.btn-ghost:hover { background: rgba(31,79,191,.12); color: var(--titre); }
.btn-ghost .ico { width: 1em; height: 1em; }

/* ---------- Hero ---------- */

.hero { display: grid; gap: 28px; padding-block: 20px 56px; align-items: center; }
.hero-prompt { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--t); margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(31,79,191,.07); border: 1px solid var(--border); }
.hero-prompt .ico { width: 1em; height: 1em; }
.hero-h1 { font-weight: 900; font-size: clamp(2.4rem, 9.5vw, 4.4rem); line-height: 1.12; letter-spacing: -.035em; color: var(--titre); }
.hl, .hl-block { background: var(--degrade-t); color: #fff; padding: 0 .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 0 10px 34px -10px rgba(31,79,191,.45); }
.italic { font-family: var(--serif); font-style: italic; font-weight: 900; color: var(--t); letter-spacing: -.01em; }
.italic.hl-block { color: #fff; }
.hero-sub { font-size: 1.0625rem; line-height: 1.7; color: var(--text2); max-width: 48ch; margin: 20px 0 26px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-tampon { display: none; }
@media (min-width: 900px) {
	.hero { grid-template-columns: 1.05fr .95fr; gap: 56px; padding-block: 48px 96px; }
	.hero-tampon { display: block; width: 140px; height: auto; margin-top: 36px; transform: rotate(-8deg); opacity: .92; filter: drop-shadow(0 10px 24px rgba(208,32,32,.35)); }
}

/* L'outil, façon fenêtre de code Wanisite */
.outil { background: var(--bg2); border: 1px solid var(--borderl); border-radius: 14px; overflow: hidden; box-shadow: 0 0 60px rgba(31,79,191,.08), 0 32px 64px rgba(11,29,66,.12); }
.outil__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--degrade-btn); color: #fff; }
.outil__badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem; }
.outil__etape { font-size: .8125rem; font-weight: 500; opacity: .85; }
.outil__corps { padding: 18px 14px 14px; }
.outil__titre { font-weight: 800; font-size: 1.375rem; color: var(--titre); margin-bottom: 12px; padding-inline: 4px; }
.outil__pied { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--text2); margin: 14px 4px 0; }
.outil__pied .ico { color: #16a34a; }

.situations { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.situation { display: grid; grid-template-columns: auto 1fr auto; gap: 1px 12px; width: 100%; text-align: left; align-items: center; padding: 12px 14px; border-radius: 12px;
	background: rgba(31,79,191,.05); border: 1px solid var(--border); color: var(--text); transition: background .15s, border-color .15s; }
.situation__num { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: rgba(31,79,191,.14); color: var(--t); font: 700 11px var(--mono); display: grid; place-items: center; }
.situation__nom { font-weight: 700; color: var(--titre); }
.situation__aide { grid-column: 2; font-size: .8125rem; color: var(--text2); line-height: 1.4; }
.situations:not(.situations--accueil) .situation__nom, .situations:not(.situations--accueil) .situation__aide { grid-column: 1 / span 2; }
.situation .ico { grid-row: 1 / span 2; grid-column: 3; color: var(--t); transition: transform .15s; }
.situation:hover { background: rgba(31,79,191,.1); border-color: var(--borderl); }
.situation:hover .ico { transform: translateX(3px); }
@media (min-width: 900px) { .outil__corps { padding: 22px 20px 18px; } }

/* ---------- Sections ---------- */

.section { padding-block: 64px; position: relative; }
@media (min-width: 900px) { .section { padding-block: 96px; } }
.sec-tag { font: 700 12px var(--sans); color: var(--t); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sec-tag::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.sec-h { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; line-height: 1.08; letter-spacing: -.035em; color: var(--titre); margin-bottom: 16px; }
.sec-p { font-size: 1rem; color: var(--text2); line-height: 1.75; max-width: 560px; margin-bottom: 28px; }

/* Bloc clair, comme les sections claires de Wanisite */
.light-block { background: #f1f5fc; color: var(--encre-clair); }
.light-block .sec-h, .light-block h3 { color: var(--encre-clair); }
.light-block .sec-p { color: rgba(11,29,66,.64); }
.light-block .sec-tag { color: var(--td); }
.light-block .italic { color: var(--t-fonce); }
.light-block .italic.hl-block, .light-block .hl-block { background: linear-gradient(120deg, #3567d8, #1f4fbf 55%, #12305f); color: #fff; box-shadow: 0 10px 30px -10px rgba(31,79,191,.6); }
.light-block .btn-ghost { color: var(--td); border-color: rgba(31,79,191,.3); background: rgba(31,79,191,.06); }
.light-block .btn-ghost:hover { background: rgba(31,79,191,.12); color: var(--encre-clair); }
.light-block .note { color: rgba(11,29,66,.5); }

/* Message reçu */
.recu__grille { display: grid; gap: 40px; align-items: center; }
.bulle { margin: 0 0 24px; background: #dcf8c6; color: #111; border-radius: 14px 14px 14px 3px; padding: 14px 16px 12px; max-width: 360px; font-size: .9375rem; line-height: 1.45; position: relative; box-shadow: 0 30px 60px -20px rgba(11,29,66,.15), 0 0 0 1px rgba(255,255,255,.06); }
.bulle__ligne { margin: 0 0 4px; }
.bulle__lien { color: #0b6bcb; text-decoration: underline; word-break: break-all; }
.bulle__photo { margin: 10px 0 2px; width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.bulle__legende { font: 400 10px var(--mono); color: var(--text3); position: absolute; top: calc(100% + 12px); left: 0; }
@media (min-width: 900px) { .recu__grille { grid-template-columns: 1fr auto; gap: 80px; } .bulle { width: 360px; transform: rotate(-2deg); } }

/* Tarifs */
.prix__grille { display: grid; gap: 32px; }
@media (min-width: 900px) { .prix__grille { grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; } }
.affiche { border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,253,.95)); border: 1px solid rgba(31,79,191,.26); box-shadow: 0 1px 2px rgba(31,79,191,.08), 0 24px 50px -28px rgba(31,79,191,.6); color: var(--encre-clair); }
.affiche__exemple { margin: 0; background: #fff4d6; color: #6b4a00; font-size: .8125rem; padding: 10px 18px; border-bottom: 1px solid rgba(107,74,0,.15); }
.affiche__exemple strong { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.affiche__tete { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid rgba(31,79,191,.2); }
.affiche__titre { margin: 0; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #1f4fbf; }
.affiche__cols { display: none; margin: 0; }
.affiche__table { width: 100%; border-collapse: collapse; }
.affiche__table tr { display: grid; grid-template-columns: 1fr auto auto; gap: 0 14px; padding: 13px 18px; border-bottom: 1px solid rgba(31,79,191,.12); align-items: center; }
.affiche__table tr:last-child { border-bottom: 0; }
.affiche__table th { text-align: left; font-weight: 700; }
.affiche__presta { display: block; }
.affiche__precision { display: block; font-weight: 400; font-size: .8125rem; color: rgba(11,29,66,.55); }
.affiche__table td { font-weight: 800; font-size: 1.125rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--encre-clair); }
.affiche__table td + td { color: var(--td); }
.affiche__table tr td:nth-child(2)::before { content: 'jour'; font: 400 10px var(--mono); color: rgba(11,29,66,.45); display: block; }
.affiche__table tr td:nth-child(3)::before { content: 'nuit'; font: 400 10px var(--mono); color: rgba(11,29,66,.45); display: block; }
.affiche__pied { margin: 0; padding: 14px 18px 16px; font-size: .8125rem; color: rgba(11,29,66,.6); border-top: 1px solid rgba(31,79,191,.2); background: rgba(31,79,191,.04); }
@media (min-width: 600px) {
	.affiche__cols { display: grid; grid-template-columns: 6.5rem 6.5rem; gap: 14px; font: 400 10px var(--mono); text-transform: uppercase; color: rgba(11,29,66,.5); text-align: right; }
	.affiche__table tr { grid-template-columns: 1fr 6.5rem 6.5rem; }
	.affiche__table th { display: flex; align-items: baseline; gap: 8px; }
	.affiche__presta { white-space: nowrap; }
	.affiche__precision { display: inline; }
	.affiche__table tr td::before { display: none !important; }
}

/* Cartes prestations */
.grille-cartes { display: grid; gap: 16px; margin-bottom: 20px; }
@media (min-width: 900px) { .grille-cartes { grid-template-columns: 1fr 1fr; gap: 20px; } }
.card { display: block; position: relative; overflow: hidden; background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 18px; text-decoration: none; color: var(--text); transition: background .2s, border-color .2s; }
.card::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--t), transparent); transition: left .4s ease; }
.card:hover { background: var(--bg3); border-color: var(--borderl); }
.card:hover::after { left: 100%; }
.card h3 { font-weight: 800; font-size: 1.5rem; margin: 0 0 8px; letter-spacing: -.02em; }
.card > p { color: var(--text2); font-size: .9375rem; }
.card-shot { margin: 0 0 18px; border-radius: 12px; overflow: hidden; border: 1px solid var(--borderl); aspect-ratio: 16 / 9; background: var(--bg3); }
.card-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-shot img { transform: scale(1.04); }
.card__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--t); font-size: .9375rem; }
.card__lien .ico { width: 1em; height: 1em; }
@media (min-width: 900px) { .card { padding: 24px; } }

.own-list, .liste-filet { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.own-item, .liste-filet li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; color: var(--text2); line-height: 1.5; padding: 10px 14px; border-radius: 12px; background: rgba(31,79,191,.05); border: 1px solid var(--border); }
.own-item::before, .liste-filet li::before { content: '✓'; color: var(--t); font-weight: 700; flex-shrink: 0; }
.liste-filet a { color: var(--titre); }

/* Zone */
.zone-section__grille { display: grid; gap: 28px; }
@media (min-width: 900px) { .zone-section__grille { grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; } }
.zone { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.zone__ville { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--bg2); }
.zone__ville > :first-child { font-weight: 600; color: var(--titre); }
.zone__ville a { color: var(--titre); text-decoration-color: var(--t); text-decoration-thickness: 2px; }
.zone__ville a:hover { color: var(--t); }
.zone__dep { font: 400 10px var(--mono); color: var(--text3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.zone__km { margin-left: auto; font: 500 12px var(--mono); color: var(--t); font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .zone { grid-template-columns: 1fr 1fr; } }

/* Qui intervient */
.qui__grille { display: grid; gap: 28px; align-items: center; }
.qui__visuel { justify-self: center; width: min(280px, 70vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #d5e3f8 70%); border: 1px solid rgba(31,79,191,.26); box-shadow: 0 30px 60px -30px rgba(31,79,191,.7); display: grid; place-items: center; padding: 18px; }
.qui__visuel img { width: 100%; height: auto; }
@media (min-width: 900px) { .qui__grille { grid-template-columns: .8fr 1.2fr; gap: 64px; } .qui__visuel { width: 340px; } }
.fiche { margin: 0; display: grid; gap: 1px; background: rgba(31,79,191,.15); border: 1px solid rgba(31,79,191,.18); border-radius: 12px; overflow: hidden; font-size: .9375rem; }
.fiche div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; padding: 10px 14px; background: #fff; }
.fiche dt { font: 400 11px/1.9 var(--mono); text-transform: uppercase; color: rgba(11,29,66,.5); }
.fiche dd { margin: 0; font-weight: 600; }

/* FAQ */
.faq { display: grid; gap: 8px; margin-bottom: 24px; max-width: 820px; }
.faq__item { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; }
.faq__item[open] { border-color: var(--borderl); background: var(--bg3); }
.faq__item summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; color: var(--titre); position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; translate: 0 -50%; font: 400 18px var(--mono); color: var(--t); }
.faq__item[open] summary::after { content: '–'; }
.faq__item p { margin: 0; padding: 0 18px 18px; color: var(--text2); max-width: 64ch; }

/* CTA final */
.cta-final__boite { text-align: center; display: grid; justify-items: center; }
.cta-final .sec-p { margin-inline: auto; }
.cta-final .hero-btns { justify-content: center; }


/* ---------- Photos en arrière-plan ---------- */

.fond-photo { position: relative; isolation: isolate; background: var(--bg2); }
.fond-photo::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--fond) center / cover no-repeat; }
.fond-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; }
/* clair : la photo apparaît à droite et se fond dans le blanc à gauche */
.fond-photo--clair::after { background: linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.97)); }
@media (min-width: 900px) { .fond-photo--clair::after { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.6) 62%, rgba(235,241,251,.3) 100%); } }
/* voile : photo très présente mais adoucie */
.fond-photo--voile::after { background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.78) 100%); }
/* marine : photo sous un voile bleu foncé, texte blanc */
.fond-photo--marine { color: #fff; }
.fond-photo--marine::after { background: linear-gradient(110deg, rgba(11,29,66,.94) 0%, rgba(18,48,95,.86) 50%, rgba(18,48,95,.6) 100%); }
.fond-photo--marine .sec-h, .fond-photo--marine h2 { color: #fff; }
.fond-photo--marine .italic { color: #a9c4ff; }
.fond-photo--marine .sec-p, .fond-photo--marine p { color: rgba(255,255,255,.82); }
.sec-tag--clair, .fond-photo--marine .sec-tag { color: #a9c4ff; }

.hero-fond { margin-top: -78px; padding-top: 78px; }

.bandeau { padding-block: 80px; }
@media (min-width: 900px) { .bandeau { padding-block: 120px; } }
.bandeau__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; max-width: 900px; }
.bandeau__points li { padding-left: 16px; border-left: 2px solid #a9c4ff; color: rgba(255,255,255,.82); }
.bandeau__points strong { color: #fff; }
@media (min-width: 900px) { .bandeau__points { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.metiers { display: grid; }
@media (min-width: 900px) { .metiers { grid-template-columns: 1fr 1fr; } }
.metier { display: flex; align-items: flex-end; min-height: 520px; padding: 48px var(--gouttiere); text-decoration: none; overflow: hidden; }
.metier::before { transition: transform .8s var(--ease); }
.metier:hover::before { transform: scale(1.05); }
.metier__contenu { max-width: 460px; }
.metier__titre { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 12px; }
.metier__liste { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 6px; }
.metier__liste li { display: flex; gap: 10px; color: rgba(255,255,255,.88); }
.metier__liste li::before { content: '✓'; color: #a9c4ff; font-weight: 700; }
.metier__lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; border-bottom: 2px solid #a9c4ff; padding-bottom: 3px; }
.metier__lien .ico { width: 1em; height: 1em; transition: transform .2s; }
.metier:hover .metier__lien .ico { transform: translateX(4px); }
@media (min-width: 900px) { .metier { padding: 64px 56px; min-height: 620px; } }

.cta-final { padding-block: 96px; }
.btn-primary--blanc { background: #fff; color: var(--td); box-shadow: 0 14px 38px -10px rgba(0,0,0,.4); }
.btn-primary--blanc:hover { color: var(--td); }
.btn-ghost--clair { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
.btn-ghost--clair:hover { background: rgba(255,255,255,.16); color: #fff; }

.page-visuel { margin: 0 0 40px; border-radius: 20px; overflow: hidden; aspect-ratio: 21 / 9; }

/* ---------- Pages internes ---------- */

.page { padding-block: 24px 64px; }
.page__tete { margin-bottom: 16px; }
.page__titre { font-weight: 900; font-size: clamp(2.2rem, 8vw, 3.8rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.page__chapo { font-size: 1.125rem; color: var(--text2); max-width: 40em; margin-bottom: 36px; }
.section-page { margin-top: 56px; }
.titre-section { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; letter-spacing: -.03em; margin-bottom: 18px; }
.deux-cols { display: grid; gap: 32px; }
@media (min-width: 900px) {
	.page { padding-block: 48px 96px; }
	.deux-cols { grid-template-columns: 1fr 340px; gap: 64px; align-items: start; }
	.encadre { position: sticky; top: 104px; }
}
.prose { max-width: 42em; color: var(--text2); }
.prose h2 { font-size: 1.5rem; font-weight: 800; color: var(--titre); margin: 1.8em 0 .5em; letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0; }
.prose strong { color: var(--titre); }
.prose a { color: var(--t); }
.etapes { padding-left: 0; list-style: none; counter-reset: etape; display: grid; gap: 10px; }
.etapes li { counter-increment: etape; display: flex; gap: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(31,79,191,.05); border: 1px solid var(--border); }
.etapes li::before { content: counter(etape); width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(31,79,191,.14); color: var(--t); font: 700 11px var(--mono); display: grid; place-items: center; margin-top: 1px; }
.lieu { display: flex; align-items: center; gap: 6px; font: 400 12px var(--mono); color: var(--t); margin-bottom: 14px; }
.lieu .ico { width: 1em; height: 1em; }
.lien-fort { color: var(--t); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.lien-fort .ico { width: 1em; height: 1em; }

.encadre { background: var(--bg2); border: 1px solid var(--borderl); border-radius: 20px; padding: 22px; box-shadow: 0 0 60px rgba(31,79,191,.06), 0 24px 48px rgba(11,29,66,.10); }
.encadre__titre { font-weight: 800; font-size: 1.25rem; color: var(--titre); }
.encadre > p { color: var(--text2); }
.encadre__ou { margin: 14px 0 0; text-align: center; font-size: .9375rem; color: var(--text2); }
.encadre__ou a { color: var(--titre); font-weight: 600; }

.page-visuel { margin: 0 0 40px; border-radius: 20px; overflow: hidden; border: 1px solid var(--borderl); aspect-ratio: 21 / 9; box-shadow: 0 30px 60px -30px rgba(11,29,66,.17); }
.page-visuel img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .page-visuel { aspect-ratio: 16 / 10; } }

/* ---------- Gros boutons (parcours, encadrés) ---------- */

.gros-bouton { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 20px; border: 0; border-radius: 10px;
	background: var(--degrade-btn); color: #fff; font: 700 1.0625rem var(--sans); text-decoration: none;
	box-shadow: 0 10px 30px -10px rgba(31,79,191,.5), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .15s; }
.gros-bouton:hover { transform: translateY(-1px); color: #fff; }
.gros-bouton--wa { background: linear-gradient(160deg, #3ddc84, #128c4a); color: #fff; box-shadow: 0 10px 30px -10px rgba(18,140,74,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.gros-bouton--wa:hover { color: #fff; }
.gros-bouton.est-fait { background: linear-gradient(160deg, #6ee7a8, #16a34a); }
.gros-bouton:disabled { opacity: .7; cursor: progress; }

/* ---------- Barre d'action mobile ---------- */

.barre { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
	background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--borderl); }
.barre__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 48px; border-radius: 10px; background: rgba(31,79,191,.06); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .75rem; font-weight: 600; }
.barre__btn .ico { width: 20px; height: 20px; }
.barre__btn--urgence { flex-direction: row; gap: 8px; font-size: .9375rem; font-weight: 800; color: #fff; border: 0; background: var(--degrade-btn); box-shadow: 0 8px 22px -8px rgba(31,79,191,.6); }
@media (min-width: 900px) {
	body { padding-bottom: 0; }
	.barre { inset: auto 24px 24px auto; display: block; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
	.barre__btn:not(.barre__btn--urgence) { display: none; }
	.barre__btn--urgence { display: flex; height: 56px; padding: 0 26px; border-radius: 999px; box-shadow: 0 14px 38px -8px rgba(31,79,191,.6); }
}

/* ---------- Parcours « Je suis bloqué » ---------- */

.bloque { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; color: var(--text); }
.bloque::backdrop { background: rgba(11, 29, 66, .45); backdrop-filter: blur(4px); }
.bloque[open] { display: flex; align-items: flex-end; justify-content: center; }
.bloque__boite { background: var(--bg2); border: 1px solid var(--borderl); width: 100%; max-width: 480px; max-height: 92dvh; overflow: auto; border-radius: 20px 20px 0 0; padding: 8px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(31,79,191,.08); animation: monte .25s var(--ease); }
@keyframes monte { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bloque__boite { animation: none; } }
@media (min-width: 600px) { .bloque[open] { align-items: center; } .bloque__boite { border-radius: 20px; padding-bottom: 24px; } }
.bloque__tete { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 4px; }
.bloque__tete button { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--text); }
.bloque__tete button:hover { background: rgba(31,79,191,.08); }
.bloque__retour { grid-column: 1; }
.bloque__fermer { grid-column: 3; }
.bloque__fil { grid-column: 2; grid-row: 1; text-align: center; margin: 0; font: 400 11px var(--mono); color: var(--t); }
.bloque__titre { font-size: 1.75rem; font-weight: 900; letter-spacing: -.03em; margin-bottom: 14px; outline: none; }
.bloque__rappel { font-size: .9375rem; color: var(--text2); }
.bloque__rappel strong { color: var(--t); }
.bloque__note { font-size: .875rem; color: var(--text2); margin: 10px 0 18px; }
.bloque__note strong { color: var(--titre); }
.bloque__ou { text-align: center; font-size: .9375rem; margin: 0; color: var(--text2); }
.bloque__ou a { font-weight: 600; color: var(--titre); }

.champ { display: block; margin-bottom: 14px; }
.champ__libelle { display: block; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text2); margin-bottom: 6px; }
.champ__libelle em { font-style: normal; color: var(--text3); text-transform: none; }
.champ input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--borderl); border-radius: 10px; background: var(--bg); font: 400 1rem var(--sans); color: var(--titre); }
.champ input::placeholder { color: var(--text3); }
.champ input:focus { outline: none; border-color: var(--t); box-shadow: 0 0 0 3px rgba(31,79,191,.18); }
.lien-suite { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; font-weight: 700; color: var(--t); margin-top: 4px; }
.apercu { white-space: pre-wrap; word-break: break-word; font: 400 .9375rem/1.45 var(--sans); background: #dcf8c6; color: #111; border-radius: 14px 14px 14px 3px; padding: 12px 14px; margin: 0 0 16px; }

/* ---------- Pilotage (Ryan) ---------- */

.pilotage__ok { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); border-radius: 10px; padding: 10px 14px; }
.pilotage__etats { display: grid; gap: 10px; margin: 8px 0 12px; }
.pilotage__etat { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg2); font-weight: 700; font-size: 1.125rem; text-align: left; color: var(--titre); }
.pilotage__etat .etat__point { width: 12px; height: 12px; }
.pilotage__etat[aria-pressed="true"] { border-color: var(--t); box-shadow: 0 0 0 1px var(--t), 0 0 30px rgba(31,79,191,.15); }
.pilotage__form { max-width: 480px; }
.compteur { display: inline-block; min-width: 1.6em; text-align: center; font: 700 .5em var(--mono); vertical-align: middle; background: var(--t); color: var(--bg); border-radius: 999px; padding: .2em .6em; }
.journal { list-style: none; padding: 0; margin: 0 0 12px; max-width: 560px; display: grid; gap: 6px; }
.journal li { display: flex; gap: 14px; padding: 10px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); }
.journal__heure { font: 700 13px var(--mono); color: var(--t); }
.journal__canal { margin-left: auto; color: var(--text3); font: 400 12px var(--mono); }

/* ---------- Pied ---------- */

.pied { background: #f3f6fc; border-top: 1px solid var(--border); color: var(--text2); padding-top: 56px; font-size: .9375rem; }
.pied a { color: var(--text); text-decoration: none; }
.pied a:hover { color: var(--t); }
.pied__grille { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; padding-bottom: 36px; }
.pied__ident { grid-column: 1 / -1; }
.marque--pied { margin-bottom: 14px; }
.pied__titre { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: 1.5px; color: var(--t); margin-bottom: 10px; }
.pied__liens { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin-bottom: 6px; }
.pied__legal { border-top: 1px solid var(--border); padding-block: 18px; font: 400 11px/1.7 var(--mono); color: var(--text3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; }
.pied__legal p { margin: 0; }
@media (min-width: 900px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .pied__ident { grid-column: auto; } }

/* ---------- Bloc prix « sur devis » ---------- */
.affiche__depart { margin: 0; display: flex; align-items: baseline; gap: 6px; color: var(--td); }
.affiche__depart span { font: 500 11px var(--mono); text-transform: uppercase; color: rgba(11,29,66,.55); }
.affiche__depart strong { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; }
.affiche__liste { list-style: none; margin: 0; padding: 0; }
.affiche__liste li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-bottom: 1px solid rgba(31,79,191,.12); }
.affiche__liste li:last-child { border-bottom: 0; }
.affiche__liste a { text-decoration: none; color: var(--encre-clair); }
.affiche__liste a:hover .affiche__presta { color: var(--t); }
.affiche__presta { font-weight: 700; display: block; }
.affiche__devis { flex: none; font: 600 11px var(--sans); color: var(--t); padding: 4px 10px; border-radius: 999px; background: rgba(31,79,191,.08); }
.encadre__prix { margin: 14px 0 0; text-align: center; font-weight: 700; color: var(--t); font-size: .9375rem; }

/* ---------- Fil d'Ariane, villes voisines ---------- */
.fil ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .8125rem; color: var(--text3); }
.fil li + li::before { content: '›'; margin-right: 8px; }
.fil a { color: var(--text2); text-decoration: none; }
.fil a:hover { color: var(--t); }
.voisines { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.voisines a { display: inline-block; padding: 9px 14px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--borderl); text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--titre); }
.voisines a:hover { border-color: var(--t); color: var(--t); }
.voisines span { color: var(--text3); font-weight: 400; }
.pied__liens--villes { columns: 2; column-gap: 16px; }

/* ---------- Touche d'or (laiton des serrures) ---------- */
.italic { background: var(--degrade-or); -webkit-background-clip: text; background-clip: text; color: transparent; }
.light-block .italic { color: transparent; }
.italic.hl-block, .light-block .italic.hl-block { -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.hl, .hl-block { box-shadow: 0 10px 34px -10px rgba(31,79,191,.45), inset 0 -3px 0 var(--or-clair); }
.fond-photo--marine .italic { background: linear-gradient(120deg, #f3dc94, #e0b955 60%, #c99a35); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-tag::before { background: var(--degrade-or); height: 3px; }
.own-item::before, .liste-filet li::before, .metier__liste li::before { color: var(--or); }
.fond-photo--marine .metier__liste li::before, .bandeau__points li { border-color: var(--or-clair); }
.metier__liste li::before { color: var(--or-clair); }
.metier__lien { border-color: var(--or-clair); }
.situation__num { background: linear-gradient(160deg, #f6e7b8, #e2c06a); color: var(--or-fonce); }
.situation:hover { border-color: rgba(184,137,43,.45); }
.outil__badge .ico, .barre__btn--urgence .ico, .btn-primary .ico, .gros-bouton .ico { color: var(--or-clair); }
.btn-primary--blanc .ico { color: var(--or); }
.outil__tete { box-shadow: inset 0 -3px 0 var(--or-clair); }
.etapes li::before { background: linear-gradient(160deg, #f6e7b8, #e2c06a); color: var(--or-fonce); }
.affiche { border-top: 3px solid var(--or); }
.affiche__depart strong { background: var(--degrade-or); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zone__km { color: var(--or-fonce); }
.qui__visuel { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--or-clair), 0 30px 60px -30px rgba(31,79,191,.7); }
.marque__logo { border-color: var(--or-clair); }
.marque__nom b { color: var(--or); }
.faq__item summary::after { color: var(--or); }
.encadre { border-top: 3px solid var(--or); }
::selection { background: var(--or-clair); color: var(--titre); }

/* ---------- Rouge urgence (comme le tampon « Dépannage 24/24 ») ---------- */
.btn-primary[data-bloque], .gros-bouton[data-bloque], .gros-bouton[data-position], .barre__btn--urgence {
	background: var(--degrade-rouge); color: #fff; box-shadow: 0 10px 28px -8px rgba(208,32,32,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary[data-bloque]:hover, .gros-bouton[data-bloque]:hover, .gros-bouton[data-position]:hover { color: #fff; box-shadow: 0 14px 38px -6px rgba(208,32,32,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary[data-bloque] .ico, .gros-bouton[data-bloque] .ico, .gros-bouton[data-position] .ico, .barre__btn--urgence .ico, .outil__badge .ico { color: #fff; }
.gros-bouton[data-position].est-fait { background: linear-gradient(160deg, #6ee7a8, #16a34a); }
@media (min-width: 900px) { .barre__btn--urgence { box-shadow: 0 14px 38px -8px rgba(208,32,32,.6); } }
.outil__tete { background: var(--degrade-rouge); box-shadow: none; }
.outil { border-color: rgba(208,32,32,.25); }
.situation:hover { border-color: rgba(208,32,32,.35); background: rgba(208,32,32,.04); }
.situation .ico { color: var(--rouge); }

/* Panneau « dépannage d'urgence » sous un voile rouge */
.metier--urgence::after { background: linear-gradient(110deg, rgba(110,10,10,.95) 0%, rgba(160,18,18,.9) 50%, rgba(190,26,26,.8) 100%); }
.metier--urgence .italic { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.metier--urgence .metier__liste li::before { color: #ffd2cc; }
.metier--urgence .metier__lien { border-color: #fff; }
.sec-tag--urgence { color: #fff; }
.sec-tag--urgence::before { display: none; }
.pastille { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: alerte 1.6s infinite; }
@keyframes alerte { 70% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .pastille { animation: none; } }

/* ---------- Bannière des pages internes ---------- */
.banniere { margin-top: -78px; padding: 118px 0 48px; }
@media (min-width: 900px) { .banniere { padding: 140px 0 72px; } }
.banniere .page__titre { color: #fff; max-width: 18ch; }
.banniere .lieu { color: #ffe7a6; margin-bottom: 12px; }
.banniere .fil ol { color: rgba(255,255,255,.55); margin-bottom: 22px; }
.banniere .fil a { color: rgba(255,255,255,.8); }
.banniere .fil a:hover { color: #fff; }
.banniere .fil [aria-current] { color: #fff; }
.banniere--rouge::after { background: linear-gradient(110deg, rgba(110,10,10,.95) 0%, rgba(160,18,18,.9) 50%, rgba(190,26,26,.8) 100%); }
.banniere--rouge .italic { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.banniere + .page { padding-top: 40px; }
@media (min-width: 900px) { .banniere + .page { padding-top: 56px; } }

/* ---------- Loader ---------- */
/* Loader : téléphone et ordinateur */
@media all {
	.loader { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #fff;
		/* secours sans JavaScript : disparaît seul après 2,5 s */
		animation: loader-sortie .45s ease 2.5s forwards; }
	.charge .loader { animation: loader-sortie .45s ease forwards; }
	.sans-loader .loader { display: none; }
	.loader__logo { width: 120px; height: 120px; border-radius: 50%; background: #e9f0fb; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--or-clair), 0 24px 50px -20px rgba(31,79,191,.6); animation: loader-pulse 1.4s ease-in-out infinite; }
	.loader__nom { margin: 0; font: 700 15px var(--mono); color: var(--titre); letter-spacing: .02em; }
	.loader__nom b { color: var(--or); }
	.loader__barre { width: 120px; height: 3px; border-radius: 3px; background: rgba(31,79,191,.12); overflow: hidden; }
	.loader__barre span { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--degrade-or); animation: loader-barre 1.1s ease-in-out infinite; }
}
@keyframes loader-sortie { to { opacity: 0; visibility: hidden; } }
@keyframes loader-pulse { 50% { transform: scale(1.05); } }
@keyframes loader-barre { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .loader__logo, .loader__barre span { animation: none; } }

/* ================================================================
   ÉPURE (retour Wanis : « trop de jeu, trop de couleurs »).
   Règle : bleu foncé pour tout, rouge seulement pour l'urgence,
   or réduit à de petits filets. Pas de dégradés, pas de surlignage.
   ================================================================ */
.accent { color: var(--t); }
.hl, .hl-block, .light-block .hl-block, .light-block .italic.hl-block, .italic.hl-block { background: none; box-shadow: none; padding: 0; color: var(--t); }
.italic, .light-block .italic, .fond-photo--marine .italic { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--t); }
.fond-photo--marine .italic, .fond-photo--marine .accent { color: #b9cdf5; }
.metier--urgence .italic, .banniere--rouge .italic { color: #fff; }
.hero-tampon { display: none !important; }
.aglow, .agrain { display: none; }
.lab-ambient { background: none; }
.lab-ambient::before { opacity: .28; }

/* Boutons à plat */
.btn-primary, .gros-bouton { background: var(--t); box-shadow: 0 6px 16px -8px rgba(18,48,95,.5); }
.btn-primary::before { display: none; }
.btn-primary:hover, .gros-bouton:hover { background: var(--td); transform: none; box-shadow: 0 6px 16px -8px rgba(18,48,95,.5); }
.btn-primary .ico, .gros-bouton .ico { color: #fff; }
.btn-primary[data-bloque], .gros-bouton[data-bloque], .gros-bouton[data-position], .barre__btn--urgence { background: var(--rouge); box-shadow: 0 6px 16px -8px rgba(208,32,32,.55); }
.btn-primary[data-bloque]:hover, .gros-bouton[data-bloque]:hover, .gros-bouton[data-position]:hover { background: var(--rouge-fonce); box-shadow: 0 6px 16px -8px rgba(208,32,32,.55); }
.gros-bouton--wa { background: #128c4a; }
.outil__tete { background: var(--rouge); }

/* Carte des situations : neutre, lisible */
.outil { border-color: var(--borderl); box-shadow: 0 20px 40px -24px rgba(11,29,66,.35); }
.situation { background: #fff; border-color: var(--borderl); }
.situation:hover { background: #fff7f6; border-color: rgba(208,32,32,.35); }
.situation__num { background: var(--bg3); color: var(--titre); }
.outil__titre { font-size: 1.25rem; }

/* Or : seulement les petits traits de section, le cadre du logo et le haut des encadrés */
.own-item::before, .liste-filet li::before, .metier__liste li::before, .etapes li::before { color: var(--t); }
.fond-photo--marine .metier__liste li::before { color: #b9cdf5; }
.metier--urgence .metier__liste li::before { color: #fff; }
.etapes li::before { background: var(--bg3); }
.zone__km { color: var(--text2); }
.marque__nom b { color: var(--t); }
.affiche__depart strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--titre); }
.affiche { border-top: 1px solid rgba(31,79,191,.26); }
.encadre { border-top: 1px solid var(--borderl); }
.faq__item summary::after { color: var(--t); }
.metier__lien { border-color: #b9cdf5; }

/* Haut de page : photo plus discrète */
@media (min-width: 900px) { .fond-photo--clair::after { background: linear-gradient(90deg, #fff 0%, #fff 45%, rgba(255,255,255,.88) 70%, rgba(255,255,255,.75) 100%); } }
.hero-h1 { font-size: clamp(2.4rem, 8.5vw, 4rem); }
.hero-prompt { background: var(--bg2); }

/* ---------- En-tête : barre blanche pleine largeur (remplace la pilule flottante) ---------- */
.lab-ambient { display: none; }
.navbar { padding: 0; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(11,29,66,.03); }
.nav-pill { max-width: 1180px; margin: 0 auto; padding: 10px var(--gouttiere); border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 12px; }
.marque__logo { width: 42px; height: 42px; border: 0; background: none; }
.marque__nom { font: 800 18px var(--sans); letter-spacing: -.01em; color: var(--titre); }
.marque__nom b { color: var(--titre); font-weight: 800; }
.etat { background: none; border: 0; padding: 0; font: 500 13px var(--sans); color: var(--text2); }
.etat__point { box-shadow: none; }
@media (min-width: 1000px) {
	.nav { margin-left: 28px; gap: 4px; }
	.nav a { font-size: 15px; font-weight: 500; color: var(--text); border-radius: 6px; padding: 8px 12px; }
	.nav a:hover { background: var(--bg2); color: var(--titre); }
	.nav a[aria-current="page"] { color: var(--titre); font-weight: 700; }
	.nav a[aria-current="page"]::after { left: 12px; right: 12px; bottom: 0; background: var(--t); }
	.entete__tel { border-radius: 8px !important; padding: 11px 18px; }
}
.hero-fond, .banniere { margin-top: 0; }
.hero-fond { padding-top: 0; }
.banniere { padding: 44px 0 40px; }
@media (min-width: 900px) { .banniere { padding: 64px 0 56px; } }
.hero { padding-block: 32px 64px; }
@media (min-width: 900px) { .hero { padding-block: 72px 96px; } }
.marque--pied .marque__nom { font-size: 16px; }

/* ---------- Conversation WhatsApp dans un téléphone ---------- */
.recu { background: var(--bg2); }
.recu__grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .recu__grille { grid-template-columns: 1fr 380px; gap: 80px; } }
.tel { margin: 0 auto; width: min(340px, 100%); }
.tel__ecran { border: 10px solid #0b1d42; border-radius: 38px; overflow: hidden; background: #efe7dd; box-shadow: 0 30px 60px -30px rgba(11,29,66,.55); }
.wa__tete { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #075e54; color: #fff; }
.wa__tete img { width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.wa__tete p { margin: 0; display: grid; line-height: 1.2; font-size: .9375rem; }
.wa__tete span { font-size: .75rem; opacity: .8; }
.wa__fil { height: 440px; overflow-y: auto; padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; scrollbar-width: none;
	background-color: #efe7dd; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; }
.wa__fil::-webkit-scrollbar { display: none; }
.wa__jour { align-self: center; margin: 2px 0 6px; font-size: .6875rem; color: #54656f; background: #fff; padding: 3px 10px; border-radius: 6px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.wa__msg { align-self: flex-start; max-width: 82%; background: #fff; color: #111b21; border-radius: 10px 10px 10px 2px; padding: 7px 9px 5px; font-size: .875rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa__msg p { margin: 0; }
.wa__msg--moi { align-self: flex-end; background: #d9fdd3; border-radius: 10px 10px 2px 10px; }
.wa__msg--photo { padding: 4px; }
.wa__msg--photo img { width: 200px; height: 150px; object-fit: cover; border-radius: 8px; }
.wa__lien { color: #027eb5; text-decoration: underline; }
.wa__heure { display: block; text-align: right; font-size: .625rem; color: #667781; margin-top: 2px; }
.wa__heure i { font-style: normal; color: #53bdeb; }
.wa__ecrit { display: none; }
.tel__legende { text-align: center; margin-top: 10px; font-size: .75rem; color: var(--text3); }

/* Animation : seulement quand le JS l'a activée */
.wa--anime .wa__msg { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .35s ease, transform .35s ease; }
.wa--anime .wa__msg.vu { opacity: 1; transform: none; }
.wa--anime .wa__ecrit { display: none; align-self: flex-start; gap: 4px; background: #fff; padding: 10px 12px; border-radius: 10px 10px 10px 2px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa--anime .wa__ecrit.vu { display: flex; }
.wa--anime .wa__ecrit.fini { display: none; }
.wa__ecrit span { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: ecrit 1s infinite; }
.wa__ecrit span:nth-child(2) { animation-delay: .15s; }
.wa__ecrit span:nth-child(3) { animation-delay: .3s; }
@keyframes ecrit { 50% { transform: translateY(-3px); opacity: .5; } }

/* ---------- Pictogrammes des situations ---------- */
.situation__picto { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; background: #fdecea; color: var(--rouge); display: grid; place-items: center; }
.picto { width: 26px; height: 26px; }
/* Fenêtre : tuiles en 2 colonnes, pictogramme au-dessus */
.situations--tuiles { grid-template-columns: 1fr 1fr; gap: 10px; }
.situations--tuiles li:last-child { grid-column: 1 / -1; }
.situations--tuiles .situation { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 14px; }
.situations--tuiles .situation__picto { width: 48px; height: 48px; }
.situations--tuiles .situation__picto .picto { width: 28px; height: 28px; }
.situations--tuiles .situation__aide { font-size: .78rem; }
.situations--tuiles li:last-child .situation { flex-direction: row; align-items: center; gap: 12px; }
.situations--tuiles li:last-child .situation__aide { display: none; }

/* ---------- Pied de page rangé ---------- */
.pied__titre { font: 700 12px var(--sans); letter-spacing: .08em; color: var(--titre); }
.pied__legal { font: 400 12px/1.7 var(--sans); }
.pied__liens a { white-space: nowrap; }
.pied__liens--villes { columns: 2; column-gap: 28px; }
.pied__liens--villes li { break-inside: avoid; }
@media (min-width: 900px) { .pied__grille { grid-template-columns: 1.3fr .9fr 1.5fr .6fr; gap: 40px; } }

/* ---------- iPhone réaliste (proportions 393 × 852) ---------- */
.iphone { margin: 0 auto; width: min(320px, 100%); }
.iphone__cadre { padding: 5px; border-radius: 54px; background: linear-gradient(145deg, #3a3d44, #1b1d22 40%, #2c2f35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -36px rgba(11,29,66,.6), 0 0 0 1px #0d0e11; }
.iphone__ecran { position: relative; aspect-ratio: 393 / 852; border-radius: 49px; overflow: hidden; background: #efeae2; display: flex; flex-direction: column; }
.ios__barre { flex: none; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 32px; background: #f6f6f6; color: #000; position: relative; }
.ios__heure { font: 600 15px -apple-system, 'SF Pro Text', var(--sans); letter-spacing: -.01em; }
.ios__ile { position: absolute; left: 50%; top: 11px; translate: -50% 0; width: 96px; height: 28px; border-radius: 20px; background: #000; }
.ios__etat { display: flex; align-items: center; gap: 5px; }
.ios__etat svg { height: 11px; width: auto; fill: #000; }
.ios__batterie { width: 24px; height: 12px; border: 1.2px solid rgba(0,0,0,.4); border-radius: 4px; padding: 1.5px; position: relative; }
.ios__batterie::after { content: ''; position: absolute; right: -3.5px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: rgba(0,0,0,.4); }
.ios__batterie i { display: block; height: 100%; width: 78%; border-radius: 2px; background: #000; }
.iphone .wa__tete { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px 6px; background: #f6f6f6; color: #000; border-bottom: 1px solid rgba(0,0,0,.08); }
.wa__retour { display: flex; align-items: center; color: #000; }
.wa__retour svg { width: 22px; height: 22px; }
.wa__retour b { font: 500 14px var(--sans); margin-left: -2px; }
.iphone .wa__tete img { width: 34px; height: 34px; border-radius: 50%; background: #e9f0fb; }
.iphone .wa__tete p { flex: 1; margin: 0; display: grid; line-height: 1.15; font-size: .875rem; }
.iphone .wa__tete p span { font-size: .6875rem; color: #667781; opacity: 1; }
.wa__actions { display: flex; gap: 16px; color: #000; }
.wa__actions svg { width: 22px; height: 22px; }
.iphone .wa__fil { flex: 1; height: auto; min-height: 0; background-color: #efeae2; }
.wa__saisie { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 12px 26px; background: #f6f6f6; color: #000; border-top: 1px solid rgba(0,0,0,.06); }
.wa__saisie svg { width: 22px; height: 22px; flex: none; }
.wa__champ { flex: 1; height: 30px; border-radius: 16px; background: #fff; border: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; padding: 0 12px; font-size: .8125rem; color: #8696a0; }
.ios__accueil { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; width: 118px; height: 4px; border-radius: 3px; background: #000; }
.iphone .wa__msg { font-size: .8125rem; }
.iphone .wa__msg--photo img { width: 180px; height: 132px; }
@media (min-width: 900px) { .recu__grille { grid-template-columns: 1fr 340px; } }

/* ---------- Pied de page sur téléphone : aucun débordement ---------- */
@media (max-width: 899px) {
	.pied__grille { grid-template-columns: 1fr 1fr; }
	.pied__grille > div:nth-child(3) { grid-column: 1 / -1; order: 3; }
	.pied__grille > div:nth-child(4) { order: 2; }
	.pied__liens a { white-space: normal; }
	.pied__liens--villes { column-gap: 16px; }
}
html, body { max-width: 100%; overflow-x: clip; }

/* ---------- Carte de la zone ---------- */
.zone-bloc { display: grid; gap: 14px; }
.carte { height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid var(--borderl); background: #eef2f7; box-shadow: 0 20px 40px -28px rgba(11,29,66,.45); z-index: 0; }
@media (min-width: 900px) { .carte { height: 460px; } }
.carte .leaflet-tooltip { font: 600 12px var(--sans); color: var(--titre); border: 0; border-radius: 6px; box-shadow: 0 4px 12px rgba(11,29,66,.18); }
.carte .leaflet-control-attribution { font-size: 10px; }
.carte__siege { display: grid; justify-items: center; }
.carte__siege img { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--t), 0 8px 18px rgba(11,29,66,.35); }
.carte__siege span { margin-top: 4px; white-space: nowrap; font: 700 11px var(--sans); color: #fff; background: var(--titre); padding: 3px 8px; border-radius: 999px; }
.zone { display: flex !important; flex-wrap: wrap; gap: 8px; background: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; list-style: none; margin: 0; padding: 0; }
.zone li { display: contents; }
a.zone__ville { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--borderl); text-decoration: none; font-weight: 600; font-size: .875rem; color: var(--titre); }
a.zone__ville:hover { border-color: var(--t); color: var(--t); }
.zone__km { font-weight: 500; font-size: .75rem; color: var(--text3) !important; margin: 0 !important; }

.insecable { white-space: nowrap; }
.hero-h1, .page__titre, .sec-h { hyphens: manual; overflow-wrap: normal; }
@media (max-width: 599px) { .banniere .page__titre { font-size: clamp(1.8rem, 7.6vw, 2.4rem); } }

/* ---------- Bloc prix compact ---------- */
.prix-carte { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--borderl); box-shadow: 0 20px 40px -28px rgba(11,29,66,.4); }
.prix-carte__tete { background: var(--titre); color: #fff; padding: 22px 24px; display: grid; gap: 4px; }
.prix-carte__depart { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.prix-carte__depart span { font-size: .875rem; opacity: .8; }
.prix-carte__depart strong { font-size: 2.6rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.prix-carte__devis { margin: 0; font-size: .9375rem; color: rgba(255,255,255,.82); }
.prix-carte__liste { list-style: none; margin: 0; padding: 18px 24px; display: grid; gap: 2px 24px; }
@media (min-width: 600px) { .prix-carte__liste { grid-template-columns: 1fr 1fr; } }
.prix-carte__liste a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--titre); }
.prix-carte__liste a::before { content: '✓'; color: var(--t); font-weight: 700; }
.prix-carte__liste a:hover { color: var(--t); }
.prix-carte__pied { margin: 0; padding: 0 24px 20px; font-size: .8125rem; color: var(--text2); }
.prix .sec-p { margin-bottom: 20px; }
@media (min-width: 900px) { .prix__grille { align-items: center; } }

.carte__fond { filter: grayscale(.85) brightness(1.04) contrast(.92); }

/* Leaflet : la règle globale img/svg { max-width: 100% } casse les tuiles et les tracés */
.leaflet-container img, .leaflet-container svg { max-width: none !important; max-height: none !important; }
.leaflet-container .leaflet-tile { display: block; }

.hero-preuves { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9375rem; font-weight: 600; color: var(--titre); }
.hero-preuves li { display: flex; align-items: center; gap: 8px; }
.hero-preuves li::before { content: '✓'; color: var(--t); font-weight: 800; }

/* ---------- Moins de vide (retour Wanis : « trop de padding ») ---------- */
.section { padding-block: 48px; }
@media (min-width: 900px) { .section { padding-block: 72px; } }
.sec-p { margin-bottom: 20px; }
.metier { min-height: 440px; padding-block: 40px; }
@media (min-width: 900px) { .metier { min-height: 500px; padding-block: 48px; } }
.cta-final { padding-block: 64px; }

/* Zone : titre au-dessus, carte et villes sur toute la largeur */
.zone-section__grille { display: block; }
.zone-section__grille > div:first-child { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; margin-bottom: 20px; }
.zone-section__grille > div:first-child .sec-tag { flex-basis: 100%; margin-bottom: 0; }
.zone-section__grille > div:first-child .sec-h { margin-bottom: 4px; }
.zone-section__grille > div:first-child .sec-p { flex: 1 1 360px; margin-bottom: 0; max-width: 520px; }
.zone-bloc .carte { height: 360px; }
@media (min-width: 900px) { .zone-bloc .carte { height: 420px; } }
a.zone__ville { padding: 5px 11px; font-size: .8125rem; }
.zone { gap: 6px; }

/* Section locale des pages ville */
.local { background: #fff; border-bottom: 1px solid var(--border); }
.local__grille { display: grid; gap: 28px; }
@media (min-width: 900px) { .local__grille { grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start; } }
.local .sec-p { max-width: 62ch; }
.fiche--locale { margin-bottom: 20px; }
.fiche--locale div { background: var(--bg2); }
.local__titre { font-weight: 700; color: var(--titre); margin-bottom: 10px; }
.hero .fil ol { margin-bottom: 14px; }

/* ================= En-tête : bandeau marine + barre principale ================= */
.bandeau-haut { background: var(--titre); color: rgba(255,255,255,.85); font-size: .8125rem; }
.bandeau-haut__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.bandeau-haut__info { margin: 0; display: flex; gap: 8px; align-items: center; min-width: 0; }
.bandeau-haut__alerte { font-weight: 700; color: #fff; white-space: nowrap; }
.bandeau-haut__extra, .bandeau-haut__sep { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) { .bandeau-haut__extra, .bandeau-haut__sep { display: none; } }
.bandeau-haut .etat { margin: 0; padding: 0; background: none; border: 0; color: #fff; font: 600 12.5px var(--sans); }
.bandeau-haut .etat__delai { color: rgba(255,255,255,.7); }

.navbar { position: sticky; top: 0; z-index: 50; padding: 0; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: 0 6px 20px -16px rgba(11,29,66,.35); display: block; }
.navbar__ligne { display: flex; align-items: center; gap: 20px; min-height: 64px; }
@media (min-width: 900px) { .navbar__ligne { min-height: 76px; } }
.marque { gap: 10px; }
.marque__logo { width: 44px; height: 44px; border: 0; background: none; border-radius: 0; }
.marque__texte { display: grid; line-height: 1.1; }
.marque__nom { font: 800 19px var(--sans); color: var(--titre); letter-spacing: -.02em; display: inline; }
.marque__sous { font-size: 12px; font-weight: 500; color: var(--text2); }
.nav { display: none; }
.entete__tel { display: inline-flex !important; align-items: center; gap: 10px; margin-left: auto; padding: 9px 14px; border-radius: 10px !important; background: var(--t); color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; box-shadow: 0 8px 18px -10px rgba(31,79,191,.7); }
.entete__tel:hover { background: var(--td); color: #fff; }
.entete__tel .ico { width: 18px; height: 18px; }
.entete__tel-texte { display: grid; line-height: 1.1; }
.entete__tel-texte small { font-size: 10.5px; font-weight: 500; opacity: .8; }
@media (max-width: 599px) { .entete__tel-texte small { display: none; } .entete__tel { padding: 9px 12px; font-size: 14px; } .marque__sous { display: none; } }
@media (min-width: 1000px) {
	.nav { display: flex; gap: 2px; margin: 0 auto; }
	.nav a { position: relative; padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--titre); text-decoration: none; border-radius: 8px; }
	.nav a:hover { background: var(--bg2); }
	.nav a[aria-current="page"] { color: var(--t); }
	.nav a[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--t); }
	.entete__tel { margin-left: 0; padding: 10px 18px; }
}

/* ================= Haut de page sombre (bleu marine + photo en filigrane) ================= */
.hero--sombre::after { background: linear-gradient(105deg, rgba(8,22,52,.97) 0%, rgba(11,29,66,.93) 45%, rgba(18,48,95,.82) 100%); }
.hero--sombre .hero-h1 { color: #fff; }
.hero--sombre .accent { color: #8fb0ff; }
.hero--sombre .hero-sub { color: rgba(255,255,255,.8); }
.hero--sombre .hero-preuves { color: #fff; }
.hero--sombre .hero-preuves li::before { color: #8fb0ff; }
.hero--sombre .fil ol { color: rgba(255,255,255,.5); }
.hero--sombre .fil a { color: rgba(255,255,255,.75); }
.hero--sombre .fil [aria-current] { color: #fff; }
.hero--sombre .outil { border: 0; box-shadow: 0 30px 60px -25px rgba(0,0,0,.6); }
.hero--sombre .outil__corps { background: #fff; }

/* ================= Animation de clé ================= */
.loader__serrure { width: 110px; height: 110px; overflow: visible; }
.loader__rosace { fill: #fff; stroke: var(--titre); stroke-width: 4; }
.loader__trou { fill: var(--titre); }
.loader__cle { stroke: var(--or); transform-origin: 60px 60px; animation: cle-entre 1.5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cle-entre {
	0%   { transform: translateY(-34px); opacity: 0; }
	25%  { transform: translateY(-34px); opacity: 1; }
	50%  { transform: translateY(0); }
	75%, 90% { transform: translateY(0) rotate(90deg); }
	100% { transform: translateY(0) rotate(90deg); opacity: 0; }
}
.loader__nom { font: 800 16px var(--sans) !important; }
.loader__logo, .loader__barre { display: none !important; }
/* clé des boutons d'urgence : un petit tour de temps en temps */
.btn-primary[data-bloque] .ico, .barre__btn--urgence .ico, .outil__badge .ico { animation: cle-tourne 4s ease-in-out infinite; transform-origin: 40% 60%; }
@keyframes cle-tourne { 0%, 82%, 100% { transform: rotate(0); } 88% { transform: rotate(-35deg); } 94% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .loader__cle, .btn-primary[data-bloque] .ico, .barre__btn--urgence .ico, .outil__badge .ico { animation: none; } }

/* ================= Pied de page marine ================= */
html { background: #081634; }
.pied { background: #081634; color: rgba(255,255,255,.7); padding-top: 0; font-size: .9375rem; border: 0; }
.pied a { color: rgba(255,255,255,.88); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pied__appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pied__appel-titre { margin: 0; font-size: clamp(1.3rem, 3.2vw, 1.75rem); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; }
.pied__appel-titre span { color: #8fb0ff; }
.pied__appel-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pied__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-block: 40px; }
.pied__ident { grid-column: 1 / -1; }
.pied__villes { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.pied__grille { grid-template-columns: 1.25fr .85fr 1.6fr .8fr; gap: 40px; }
	.pied__ident, .pied__villes { grid-column: auto; }
}
.pied__marque { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pied__marque img { width: 52px; height: 52px; border-radius: 50%; background: #fff; padding: 3px; }
.pied__marque span { display: grid; font-size: .8125rem; color: rgba(255,255,255,.6); line-height: 1.25; }
.pied__marque strong { font-size: 1.125rem; color: #fff; font-weight: 800; }
.pied__ident > p:not(.pied__marque) { max-width: 34ch; }
.pied__nap { font-style: normal; line-height: 1.7; margin-top: 12px; }
.pied__titre { font: 700 12px var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: #fff !important; margin-bottom: 14px; }
.pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied__liens li { margin: 0; }
.pied__liens a { white-space: nowrap; }
.pied__liens--villes { display: grid; grid-template-columns: repeat(2, 1fr); columns: auto; gap: 9px 16px; }
@media (min-width: 600px) { .pied__liens--villes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) { .pied__liens a { white-space: normal; } }
.pied__reseaux { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pied__reseaux a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); font-size: .8125rem; }
.pied__reseaux a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.pied__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 18px 22px; border-top: 1px solid rgba(255,255,255,.1); font: 400 12.5px var(--sans); color: rgba(255,255,255,.5); }
.pied__legal a { color: rgba(255,255,255,.7); }
@media (max-width: 899px) { .pied__legal { padding-bottom: calc(22px + var(--barre-h) + env(safe-area-inset-bottom)); } body { padding-bottom: 0; } }

/* Tout espace sous le pied de page reste bleu marine */
body { background: linear-gradient(#fff, #fff) top / 100% calc(100% - 240px) no-repeat, #081634; }

/* ================= Parcours animé ================= */
.parcours { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; counter-reset: none; }
@media (min-width: 900px) { .parcours { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.parcours::before { content: ''; display: none; }
@media (min-width: 900px) {
	.parcours::before { display: block; position: absolute; left: 12%; right: 12%; top: 58px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--t), var(--rouge)); transform-origin: left; z-index: 0; }
}
.parcours__etape { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 20px 14px 22px; background: #fff; border: 1px solid var(--borderl); border-radius: 16px; box-shadow: 0 16px 34px -26px rgba(11,29,66,.45); }
.parcours__num { position: absolute; top: 10px; left: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--sans); color: #fff; background: var(--titre); }
.parcours__etape:last-child .parcours__num { background: var(--rouge); }
.parcours__anim { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--bg3); margin-bottom: 6px; }
.parcours__etape:last-child .parcours__anim { background: #e8f6ee; }
.parcours__anim svg { width: 56px; height: 56px; overflow: visible; }
.parcours__titre { font-size: 1.0625rem; font-weight: 800; color: var(--titre); line-height: 1.2; }
.parcours__texte { font-size: .875rem; color: var(--text2); line-height: 1.45; }
.parcours .trait { fill: none; stroke: var(--titre); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.parcours .trait-or { fill: none; stroke: var(--or); stroke-width: 3; stroke-linecap: round; }
.parcours .plein-clair { fill: #fff; }
.parcours .plein-blanc { fill: #fff; }
.parcours .plein-bleu { fill: var(--titre); }
.parcours .plein-rouge { fill: var(--rouge); }
.parcours .alerte { fill: var(--rouge); transform-origin: 44px 10px; animation: alerte-tel 1.4s ease-in-out infinite; }
.parcours .point { fill: var(--t); animation: point-saute 1.2s ease-in-out infinite; }
.parcours .p2 { animation-delay: .15s; } .parcours .p3 { animation-delay: .3s; }
.parcours .route { stroke: var(--titre); stroke-width: 2.5; stroke-dasharray: 6 6; animation: route-defile .6s linear infinite; }
.parcours .camion { animation: camion-roule 1s ease-in-out infinite; }
.parcours .porte { fill: var(--bg3); stroke: var(--titre); stroke-width: 2; transform-origin: 18px 32px; animation: porte-ouvre 3s ease-in-out infinite; }
.parcours .cle { transform-origin: 40px 33px; animation: cle-porte 3s ease-in-out infinite; }
@keyframes alerte-tel { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
@keyframes point-saute { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@keyframes route-defile { to { stroke-dashoffset: -12; } }
@keyframes camion-roule { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes cle-porte { 0%, 20% { transform: rotate(0); } 40%, 85% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
@keyframes porte-ouvre { 0%, 40% { transform: perspective(120px) rotateY(0); } 60%, 85% { transform: perspective(120px) rotateY(-55deg); } 100% { transform: perspective(120px) rotateY(0); } }

/* Entrée en scène (seulement si le JS l'a activée) */
.parcours--anime .parcours__etape { opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1.2); transition-delay: calc(var(--i) * .35s); }
.parcours--anime.vu .parcours__etape { opacity: 1; transform: none; }
.parcours--anime::before { transform: scaleX(0); transition: transform 1.4s ease .2s; }
.parcours--anime.vu::before { transform: scaleX(1); }
.parcours--anime .parcours__anim svg * { animation-play-state: paused; }
.parcours--anime.vu .parcours__anim svg * { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .parcours svg * { animation: none !important; } }

.bloc-parcours .recu__grille { margin-bottom: 8px; }
.recu .parcours { margin-top: 48px; }

/* Réseaux sociaux : icônes 3D */
.pied__reseaux { gap: 12px; margin-top: 20px; }
.pied__reseaux a { padding: 0; border: 0; border-radius: 0; display: block; transition: transform .2s cubic-bezier(.2,.8,.2,1.4); }
.pied__reseaux a:hover { background: none; transform: translateY(-4px) rotate(-4deg); }
.reseau3d { width: 46px; height: 49px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }

/* Numéro d'en-tête : pastille + numéro, sans gros bloc */
.entete__tel, .entete__tel:hover { background: none !important; box-shadow: none !important; padding: 0 !important; color: var(--titre) !important; gap: 10px; }
.entete__tel-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: #fff; flex: none; transition: transform .2s; }
.entete__tel-ico .ico { width: 18px; height: 18px; }
.entete__tel-num { font: 800 17px var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.entete__tel:hover .entete__tel-num { color: var(--t); }
.entete__tel:hover .entete__tel-ico { transform: rotate(-12deg); }
@media (max-width: 599px) { .entete__tel-num { font-size: 15px; } .entete__tel-ico { width: 34px; height: 34px; } }
@media (max-width: 359px) { .entete__tel-num { display: none; } }

/* Prestations cliquables : tuiles avec pictogramme et flèche */
.prix-carte__liste { gap: 8px 12px; padding: 18px 20px; }
.prix-carte__liste a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font-size: .9375rem; transition: background .15s, border-color .15s, transform .15s; }
.prix-carte__liste a::before { content: none; }
.prix-carte__liste a:hover { background: var(--bg2); border-color: var(--t); color: var(--titre); transform: translateY(-1px); }
.prix-carte__picto { width: 38px; height: 38px; border-radius: 10px; background: var(--bg3); color: var(--t); display: grid; place-items: center; flex: none; }
.prix-carte__picto .picto { width: 22px; height: 22px; }
.prix-carte__nom { flex: 1; line-height: 1.25; }
.prix-carte__liste a > .ico { width: 18px; height: 18px; color: var(--t); flex: none; transition: transform .15s; }
.prix-carte__liste a:hover > .ico { transform: translateX(3px); }

/* La carte « Je suis bloqué » garde ses couleurs sur le haut de page sombre */
.hero--sombre .outil .outil__titre { color: var(--titre); }
.hero--sombre .outil .outil__pied { color: var(--text2); }
.hero--sombre .outil .situation__aide { color: var(--text2); }
.hero--sombre .outil .situation__nom { color: var(--titre); }

/* Visuels RM : laisser voir la photo à droite du haut de page */
.hero--sombre::after { background: linear-gradient(100deg, rgba(8,22,52,.97) 0%, rgba(11,29,66,.9) 42%, rgba(11,29,66,.55) 72%, rgba(11,29,66,.35) 100%); }
.hero--sombre::before { background-position: 75% center; }
.qui__visuel { width: 100%; max-width: 480px; aspect-ratio: 16 / 10; border-radius: 18px; padding: 0; overflow: hidden; background: none; box-shadow: 0 30px 60px -30px rgba(11,29,66,.6); }
.qui__visuel img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .qui__visuel { width: 100%; } }
.recu.fond-photo--voile::after { background: linear-gradient(90deg, rgba(245,248,253,.98) 0%, rgba(245,248,253,.94) 55%, rgba(245,248,253,.82) 100%); }

/* ================= Menu mobile ================= */
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 10px; margin-left: 4px; border: 1px solid var(--borderl); border-radius: 10px; background: #fff; flex: none; }
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--titre); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1000px) { .burger, .menu-mobile { display: none !important; } }
.entete__tel { margin-left: auto; }
@media (min-width: 1000px) { .entete__tel { margin-left: 0; } }

.menu-mobile { position: fixed; inset: 0; top: var(--haut-menu, 101px); z-index: 45; overflow-y: auto; background: #fff; padding: 12px var(--gouttiere) calc(24px + var(--barre-h) + env(safe-area-inset-bottom)); }
.menu-mobile[hidden] { display: none; }
@keyframes menu-entre { from { opacity: 0; transform: translateY(-8px); } }
html.menu-ouvert { overflow: hidden; }
.menu-mobile__nav { display: grid; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.menu-mobile__nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 1.25rem; font-weight: 800; color: var(--titre); text-decoration: none; border-top: 1px solid var(--border); letter-spacing: -.01em; }
.menu-mobile__nav a::after { content: '›'; color: var(--t); font-size: 1.5rem; font-weight: 400; }
.menu-mobile__nav a[aria-current="page"] { color: var(--t); }
.menu-mobile__titre { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.menu-mobile__puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.menu-mobile__puces a { padding: 8px 13px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--borderl); font-weight: 600; font-size: .9375rem; color: var(--titre); text-decoration: none; }
.menu-mobile__actions { display: grid; gap: 10px; margin-top: 6px; }
.menu-mobile__actions .btn-primary, .menu-mobile__actions .btn-ghost { justify-content: center; min-height: 52px; font-size: 1rem; }
@media (max-width: 599px) { .entete__tel-num { display: none !important; } .marque__nom { font-size: 18px; } .navbar__ligne { gap: 10px; } }

/* ================= Visuels plus visibles (voiles allégés) ================= */
.hero--sombre::after { background: linear-gradient(100deg, rgba(8,22,52,.92) 0%, rgba(11,29,66,.78) 38%, rgba(11,29,66,.25) 70%, rgba(11,29,66,.05) 100%); }
@media (max-width: 899px) { .hero--sombre::after { background: linear-gradient(180deg, rgba(8,22,52,.55) 0%, rgba(8,22,52,.85) 45%, rgba(8,22,52,.92) 100%); } }
.fond-photo--marine::after { background: linear-gradient(105deg, rgba(11,29,66,.9) 0%, rgba(11,29,66,.6) 50%, rgba(11,29,66,.15) 100%); }
.metier--urgence::after { background: linear-gradient(105deg, rgba(120,10,10,.9) 0%, rgba(176,22,22,.62) 50%, rgba(208,32,32,.15) 100%); }
.banniere--rouge::after { background: linear-gradient(105deg, rgba(120,10,10,.9) 0%, rgba(176,22,22,.6) 50%, rgba(208,32,32,.12) 100%); }
.banniere { padding-block: 72px 64px; }
@media (min-width: 900px) { .banniere { padding-block: 110px 96px; } }
.recu.fond-photo--voile::after { background: linear-gradient(90deg, rgba(245,248,253,.97) 0%, rgba(245,248,253,.85) 45%, rgba(245,248,253,.35) 100%); }
.hero--sombre .hero-h1, .fond-photo--marine h1, .fond-photo--marine h2 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }

/* Plus de bandeau du haut : l'état se met dans la barre, sur ordinateur */
.navbar .etat { display: none; margin: 0; padding: 0; background: none; border: 0; font: 600 13px var(--sans); color: var(--text2); }
@media (min-width: 1180px) { .navbar .etat { display: inline-flex; } }

/* ================= Boutons d'urgence façon SOS ================= */
.btn-primary[data-bloque], .gros-bouton[data-bloque], .barre__btn--urgence {
	text-transform: uppercase; letter-spacing: .03em; font-weight: 900; overflow: visible;
	animation: sos-halo 1.6s ease-out infinite; }
.btn-primary[data-bloque] > .ico, .gros-bouton[data-bloque] > .ico, .barre__btn--urgence > .ico { display: none; }
.btn-primary[data-bloque]::before, .gros-bouton[data-bloque]::before, .barre__btn--urgence::before {
	content: 'SOS'; display: inline-grid; place-items: center; position: static; inset: auto; transform: none; z-index: auto;
	padding: 3px 7px; border-radius: 6px; background: #fff; color: var(--rouge); font: 900 12px/1 var(--sans); letter-spacing: .06em; }
@keyframes sos-halo {
	0%   { box-shadow: 0 0 0 0 rgba(208,32,32,.55), 0 8px 20px -8px rgba(208,32,32,.6); }
	70%  { box-shadow: 0 0 0 14px rgba(208,32,32,0), 0 8px 20px -8px rgba(208,32,32,.6); }
	100% { box-shadow: 0 0 0 0 rgba(208,32,32,0), 0 8px 20px -8px rgba(208,32,32,.6); }
}
.btn-primary[data-bloque]:hover, .gros-bouton[data-bloque]:hover { background: #b51818; }
.barre__btn--urgence { gap: 8px; font-size: .875rem; }
@media (prefers-reduced-motion: reduce) { .btn-primary[data-bloque], .gros-bouton[data-bloque], .barre__btn--urgence { animation: none; } }

/* Barre du bas : SOS sur une ligne */
.barre { grid-template-columns: 1fr 1fr 2fr; }
.barre__btn--urgence { white-space: nowrap; font-size: .8125rem; letter-spacing: .01em; }
.barre__btn--urgence::before { padding: 3px 6px; font-size: 11px; }

/* ================= « jour et nuit » ================= */
.jn { white-space: nowrap; }
.jn__astre { position: relative; display: inline-block; width: .72em; height: .72em; margin-right: .14em; vertical-align: .02em; }
.jn__astre svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jn__soleil { fill: #ffc94a; stroke: #ffc94a; stroke-width: 2.2; stroke-linecap: round; animation: jn-soleil 6s ease-in-out infinite; }
.jn__lune { fill: #c9d8ff; animation: jn-lune 6s ease-in-out infinite; }
.jn__jour { color: #ffc94a; animation: jn-jour 6s ease-in-out infinite; }
.jn__nuit { position: relative; color: #8fb0ff; animation: jn-nuit 6s ease-in-out infinite; }
.jn__nuit i { position: absolute; width: .09em; height: .09em; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: jn-etoile 6s ease-in-out infinite; }
.jn__nuit i:nth-child(1) { top: -.05em; left: .3em; }
.jn__nuit i:nth-child(2) { top: .12em; right: -.08em; animation-delay: .4s; }
.jn__nuit i:nth-child(3) { top: -.18em; left: 1.15em; animation-delay: .8s; }
@keyframes jn-soleil { 0%, 40% { opacity: 1; transform: rotate(0) scale(1); } 50%, 90% { opacity: 0; transform: rotate(120deg) scale(.4); } 100% { opacity: 1; transform: rotate(180deg) scale(1); } }
@keyframes jn-lune { 0%, 40% { opacity: 0; transform: rotate(-60deg) scale(.4); } 50%, 90% { opacity: 1; transform: rotate(0) scale(1); } 100% { opacity: 0; transform: rotate(-60deg) scale(.4); } }
@keyframes jn-jour { 0%, 40%, 100% { color: #ffc94a; text-shadow: 0 0 22px rgba(255,201,74,.45); } 50%, 90% { color: rgba(255,255,255,.45); text-shadow: none; } }
@keyframes jn-nuit { 0%, 40%, 100% { color: rgba(143,176,255,.5); text-shadow: none; } 50%, 90% { color: #a9c1ff; text-shadow: 0 0 22px rgba(143,176,255,.6); } }
@keyframes jn-etoile { 0%, 45%, 100% { opacity: 0; transform: scale(.3); } 55%, 85% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .jn *, .jn { animation: none !important; } .jn__lune, .jn__nuit i { display: none; } }

/* Villes : liste en colonnes, sans pastilles */
.zone { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 28px !important; margin-top: 4px; }
@media (min-width: 700px) { .zone { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .zone { grid-template-columns: repeat(4, 1fr); } }
.zone li { display: block; }
a.zone__ville { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; font-size: .9375rem; font-weight: 600; color: var(--titre); }
a.zone__ville:hover { color: var(--t); border-color: var(--t); background: none; }
.zone__km { font-size: .8125rem !important; font-weight: 500; color: var(--text3) !important; white-space: nowrap; }
.zone__note { margin: 10px 0 0; font-size: .8125rem; color: var(--text3); }
.zone-section { padding-bottom: 48px; }

/* ================= Deux métiers : cartes photo + texte ================= */
.metiers2 { background: var(--bg2); }
.metiers2__grille { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 900px) { .metiers2__grille { grid-template-columns: 1fr 1fr; gap: 24px; } }
.m2 { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borderl); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--text); box-shadow: 0 20px 40px -30px rgba(11,29,66,.45); transition: transform .2s, box-shadow .2s, border-color .2s; }
.m2:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -30px rgba(11,29,66,.55); border-color: var(--t); }
.m2--urgence:hover { border-color: var(--rouge); }
.m2__photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg3); }
.m2__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.m2:hover .m2__photo img { transform: scale(1.04); }
.m2__etiquette { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--rouge); color: #fff; font: 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.m2__etiquette--bleu { background: var(--titre); }
.m2__corps { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.m2__titre { font-size: 1.5rem; font-weight: 900; color: var(--titre); letter-spacing: -.02em; line-height: 1.15; }
.m2__texte { color: var(--text2); font-size: .9375rem; }
.m2__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 4px 0 8px; }
.m2__liste span { display: flex; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--titre); }
.m2__liste span::before { content: '✓'; color: var(--t); font-weight: 800; }
.m2--urgence .m2__liste span::before { color: var(--rouge); }
.m2__bouton { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; background: var(--titre); color: #fff; font-weight: 800; font-size: .9375rem; }
.m2--urgence .m2__bouton { background: var(--rouge); }
.m2__bouton .ico { width: 1em; height: 1em; transition: transform .2s; }
.m2:hover .m2__bouton .ico { transform: translateX(4px); }
@media (max-width: 420px) { .m2__liste { grid-template-columns: 1fr; } }

/* Départements et communes */
.deps { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 700px) { .deps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .deps { grid-template-columns: repeat(5, 1fr); } }
.deps a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--borderl); text-decoration: none; transition: border-color .15s, transform .15s; }
.deps a:hover { border-color: var(--t); transform: translateY(-1px); }
.deps strong { color: var(--titre); font-weight: 800; }
.deps span { font-size: .8125rem; color: var(--text2); }
.communes { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 28px; font-size: .9375rem; }
@media (min-width: 700px) { .communes { columns: 3; } }
@media (min-width: 1000px) { .communes { columns: 4; } }
.communes li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--border); color: var(--titre); }
.communes a { color: var(--t); font-weight: 700; text-decoration: none; }
.communes a:hover { text-decoration: underline; }
.communes span { display: block; font-size: .75rem; color: var(--text3); }

/* ================= Urgence | Installation (écran coupé en deux) ================= */
.duo { display: grid; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__cote { display: flex; padding: 56px var(--gouttiere); }
@media (min-width: 900px) { .duo__cote { padding: 80px 56px; } .duo__cote--urgence { justify-content: flex-end; } }
.duo__contenu { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 18px; }
.duo__cote--urgence { background: #c81e1e; background-image: radial-gradient(circle at 15% 0%, rgba(255,255,255,.12), transparent 55%); color: #fff; }
.duo__cote--installation { background: #f3f6fb; color: var(--titre); }
.duo__etiquette { margin: 0; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font: 900 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.duo__etiquette--calme { color: var(--t); }
.duo__etiquette--calme::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--t); }
.duo__titre { margin: 0; font-size: clamp(2.2rem, 5.5vw, 3.4rem); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; }
.duo__cote--urgence .duo__titre { color: #fff; text-shadow: none; }
.duo__cote--installation .duo__titre { color: var(--titre); text-shadow: none; }
.duo__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.28); }
.duo__liste li { border-bottom: 1px solid rgba(255,255,255,.28); }
.duo__liste a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; color: #fff; text-decoration: none; font-size: 1.125rem; font-weight: 700; }
.duo__liste a::after { content: '→'; opacity: .8; transition: transform .2s; }
.duo__liste a:hover::after { transform: translateX(4px); }
.duo__liste--calme { border-color: var(--borderl); }
.duo__liste--calme li { border-color: var(--borderl); }
.duo__liste--calme a { color: var(--titre); }
.duo__liste--calme a::after { color: var(--t); }
.duo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.btn-sos-blanc { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border: 0; border-radius: 12px; background: #fff; color: #c81e1e; font: 900 1.0625rem var(--sans); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: sos-blanc 1.6s ease-out infinite; }
.btn-sos-blanc span { padding: 3px 7px; border-radius: 6px; background: #c81e1e; color: #fff; font-size: 12px; letter-spacing: .06em; }
@keyframes sos-blanc { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.duo__tel { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: 900; letter-spacing: -.01em; }
.duo__tel .ico { width: 24px; height: 24px; }
.duo__note { margin: 0; font-size: .9375rem; color: rgba(255,255,255,.82); }
.duo__note--calme { color: var(--text2); }
.duo__photo { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 14px; }
.btn-devis { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 12px; background: var(--titre); color: #fff; font-weight: 800; text-decoration: none; }
.btn-devis:hover { background: var(--t); color: #fff; }
.btn-devis .ico { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .btn-sos-blanc { animation: none; } }

.duo__photo { aspect-ratio: 16 / 7; }
.duo__photo--urgence { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.duo__titre { min-height: 2.04em; }
.duo__photo { height: auto; }

/* ================= Blog ================= */
.liste-blog { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 700px) { .liste-blog { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .liste-blog { grid-template-columns: repeat(3, 1fr); } }
.blog__item { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--borderl); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .2s, border-color .2s; }
.blog__item:hover { transform: translateY(-3px); border-color: var(--t); }
.blog__item img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.blog__corps { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }
.blog__titre { font-weight: 800; font-size: 1.125rem; line-height: 1.25; color: var(--titre); }
.blog__resume { font-size: .875rem; color: var(--text2); }
.blog__lire { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--t); font-size: .9375rem; }
.blog__lire .ico { width: 1em; height: 1em; }
.article__photo { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 16px; margin-bottom: 24px; }
.article h2 { font-size: 1.5rem; }
.article h3 { font-size: 1.125rem; font-weight: 800; color: var(--titre); margin: 1.2em 0 .4em; }
.article ul, .article ol { padding-left: 1.2em; }
.article li { margin-bottom: .4em; }
.article table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .9375rem; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.article th { background: var(--bg2); color: var(--titre); }
.article__maj { margin-top: 2em; font-size: .8125rem; color: var(--text3); }
.encadre__sous { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.encadre__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.encadre__liens a { color: var(--t); font-weight: 700; text-decoration: none; }

/* Villes voisines : icône de localisation rouge */
.voisines { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10px !important; }
@media (min-width: 700px) { .voisines { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .voisines { grid-template-columns: repeat(4, 1fr); } }
.local .voisines { grid-template-columns: repeat(2, 1fr); }
.voisines a { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid var(--borderl); text-decoration: none; transition: border-color .15s, transform .15s; }
.voisines a:hover { border-color: var(--rouge); transform: translateY(-1px); }
.voisines .pin { grid-row: 1 / span 2; width: 26px; height: 26px; fill: var(--rouge); filter: drop-shadow(0 3px 4px rgba(208,32,32,.35)); transition: transform .2s; }
.voisines a:hover .pin { transform: translateY(-2px); }
.v__nom { font-weight: 800; color: var(--titre); font-size: .9375rem; line-height: 1.2; }
.v__km { font-size: .75rem; color: var(--text2); font-weight: 500; }

/* En-tête : tient sur une ligne avec 6 entrées de menu */
.marque__texte { white-space: nowrap; }
@media (min-width: 1000px) { .nav a { padding: 9px 11px; font-size: 14.5px; } .navbar__ligne { gap: 14px; } }
@media (max-width: 1399px) { .navbar .etat { display: none !important; } }
@media (min-width: 1000px) and (max-width: 1179px) { .entete__tel-num { display: none; } .marque__sous { display: none; } }

.lien-droits { color: var(--t); font-weight: 600; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }
.encadre__droits { margin: 10px 0 0; text-align: center; }
.prix-carte__pied .lien-droits { display: inline-block; margin-top: 4px; }

.encadre__photo { width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -22px -22px 16px; border-radius: 20px 20px 0 0; }
.page-figure { margin: 0 0 32px; max-width: 760px; }
.page-figure__img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 16px; }
.voisines .v__nom { color: var(--titre); font-weight: 800; font-size: .9375rem; } .voisines .v__km { color: var(--text2); font-weight: 500; font-size: .75rem; }

/* ================= Ryan disponible (en-tête + bouton SOS) ================= */
.dispo { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; text-decoration: none; color: var(--titre); padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--borderl); background: #fff; transition: border-color .15s, box-shadow .15s; }
.dispo:hover { border-color: #22c55e; box-shadow: 0 6px 18px -10px rgba(34,197,94,.6); }
@media (min-width: 1000px) { .dispo { margin-left: 0; } }
.dispo__avatar, .sos-avatar { position: relative; flex: none; }
.dispo__avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.dispo__point { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2.5px solid #fff; }
[data-etat="dispo"] > .dispo__point { animation: point-vert 2s infinite; }
[data-etat="intervention"] > .dispo__point { background: #f59e0b; }
[data-etat="injoignable"] > .dispo__point { background: #94a3b8; }
@keyframes point-vert { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.dispo__texte { display: grid; line-height: 1.15; }
.dispo__etat { font-size: 12px; font-weight: 600; color: #15803d; white-space: nowrap; }
[data-etat="intervention"] ~ .dispo__texte .dispo__etat { color: #b45309; }
.dispo__tel { font-size: 16px; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 599px) { .dispo { padding: 3px; border: 0; } .dispo__texte { display: none; } .dispo__avatar img { width: 38px; height: 38px; } }
@media (min-width: 1000px) and (max-width: 1179px) { .dispo__texte { display: none; } .dispo { padding: 3px; } }
.navbar .etat { display: none !important; }

/* Bouton SOS : la photo de Ryan à la place du badge */
.barre__btn--urgence::before { display: none !important; }
.sos-avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid #fff; }
.sos-avatar .dispo__point { width: 11px; height: 11px; border-width: 2px; border-color: #c81e1e; }
.barre__btn--urgence { gap: 10px; }
@media (max-width: 899px) { .sos-avatar img { width: 28px; height: 28px; } .sos-avatar .dispo__point { width: 9px; height: 9px; } }
@media (min-width: 900px) { .barre__btn--urgence { padding: 0 24px 0 10px; height: 58px; font-size: 1rem; } }
.qui__visuel { aspect-ratio: 5 / 6; max-width: 420px; }

/* ================= Ryan en vidéo ================= */
.videos { background: var(--bg2); }
.videos__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 8px; }
.videos__tete .sec-p { margin-bottom: 0; }
.videos__suivre { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--borderl); color: var(--titre); font-weight: 800; text-decoration: none; }
.videos__suivre .reseau3d { width: 34px; height: 36px; filter: none; }
.videos__suivre:hover { border-color: var(--titre); }
.videos__liste { list-style: none; margin: 24px calc(-1 * var(--gouttiere)) 0; padding: 4px var(--gouttiere) 12px; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.videos__liste::-webkit-scrollbar { display: none; }
@media (min-width: 600px) { .videos__liste { grid-auto-columns: 38%; } }
@media (min-width: 1000px) { .videos__liste { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.video-carte { position: relative; scroll-snap-align: start; border-radius: 16px; overflow: hidden; background: #0b1d42; aspect-ratio: 9 / 16; box-shadow: 0 18px 36px -24px rgba(11,29,66,.6); }
.video-carte__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-carte__lecture { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,22,52,.85)); cursor: pointer; }
.video-carte__lecture svg { width: 58px; height: 58px; padding: 14px 12px 14px 16px; border-radius: 50%; background: rgba(255,255,255,.92); fill: var(--rouge); box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .2s; }
.video-carte__lecture:hover svg { transform: scale(1.08); }
.video-carte__titre { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; color: #fff; font-weight: 800; font-size: .875rem; line-height: 1.25; pointer-events: none; }
.video-carte.lecture .video-carte__lecture, .video-carte.lecture .video-carte__titre { display: none; }

/* Vidéo de « Qui intervient » */
.qui__visuel { position: relative; }
.qui__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qui__son { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(8,22,52,.75); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.qui__son svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qui__son svg path:first-child { fill: #fff; }
.qui__son .qui__son-on { display: none; }
.qui__son.actif .qui__son-on { display: inline; }
.qui__son.actif .qui__son-off { display: none; }
.qui__video { object-position: 50% 72%; }

/* Vidéos sans bouton de lecture : seulement un bouton son */
.video-carte__lecture { display: none !important; }
.video-carte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,22,52,.8)); pointer-events: none; }
.video-carte__titre { z-index: 1; right: 52px; }
.video-carte__son { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(8,22,52,.7); cursor: pointer; backdrop-filter: blur(6px); }
.video-carte__son svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video-carte__son svg path:first-child { fill: #fff; }
.video-carte__son .son-on { display: none; }
.video-carte__son.actif .son-on { display: inline; }
.video-carte__son.actif .son-off { display: none; }
.video-carte__son.actif { background: var(--rouge); }

/* ================= Formulaires ================= */
.formulaire { display: grid; gap: 4px; }
.formulaire--page { background: #fff; border: 1px solid var(--borderl); border-radius: 18px; padding: 22px; box-shadow: 0 20px 40px -30px rgba(11,29,66,.4); }
.champ select, .champ textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--borderl); border-radius: 10px; background: #fff; font: 400 1rem var(--sans); color: var(--titre); }
.champ textarea { min-height: 90px; resize: vertical; }
.champ select:focus, .champ textarea:focus { outline: none; border-color: var(--t); box-shadow: 0 0 0 3px rgba(31,79,191,.15); }
.champ input { color: var(--titre); background: #fff; }
.champ-ligne { display: grid; gap: 0 14px; }
@media (min-width: 600px) { .champ-ligne { grid-template-columns: 1fr 1fr; } }
.creneaux { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.creneaux legend { padding: 0; margin-bottom: 6px; }
.creneaux label { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--borderl); border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--titre); }
.creneaux label:has(input:checked) { border-color: var(--t); background: rgba(31,79,191,.06); }
.piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.gros-bouton--bleu { background: var(--titre) !important; animation: none !important; }
.gros-bouton--bleu:hover { background: var(--t) !important; }
.formulaire__retour { margin: 10px 0 0; font-weight: 600; font-size: .9375rem; }
.formulaire__retour.succes { color: #15803d; }
.formulaire__retour.erreur { color: var(--rouge); }
.lien-bouton { background: none; border: 0; padding: 0; color: var(--t); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: inherit; }
.rappel .bloque__boite { background: #fff; }
/* Avis */
.avis { display: grid; justify-items: start; gap: 22px; }
.avis__bouton { max-width: 380px; }
.avis__carte { margin: 0; display: flex; align-items: center; gap: 20px; padding: 20px; border: 2px dashed var(--borderl); border-radius: 16px; background: #fff; }
.avis__qr img, .avis__qr canvas { display: block; }
.avis__carte figcaption { color: var(--titre); line-height: 1.5; }
@media print { body * { visibility: hidden; } .avis__carte, .avis__carte * { visibility: visible; } .avis__carte { position: absolute; left: 0; top: 0; } }
/* Réalisations */
.realisations { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.realisation { display: grid; gap: 18px; align-items: center; }
@media (min-width: 700px) { .realisation { grid-template-columns: 240px 1fr; gap: 32px; } }
.realisation .video-carte { max-width: 240px; }
.realisation__titre { font-size: 1.375rem; font-weight: 800; color: var(--titre); margin: 0 0 6px; }
.realisation p { color: var(--text2); }

/* ================= Tableau de bord ================= */
.onglets { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gouttiere)) 20px; padding: 0 var(--gouttiere) 6px; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--borderl); color: var(--titre); font-weight: 700; text-decoration: none; font-size: .9375rem; }
.onglets a[aria-current="page"] { background: var(--titre); color: #fff; border-color: var(--titre); }
.onglets .compteur { background: var(--rouge); font-size: .7rem; }
.raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 28px; }
.raccourci { display: grid; gap: 2px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--borderl); color: var(--text2); text-decoration: none; font-size: .875rem; }
.raccourci strong { font-size: 1.75rem; font-weight: 900; color: var(--titre); line-height: 1; }
a.raccourci:hover { border-color: var(--t); }
.fiches-liste { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; max-width: 720px; }
.fiche-item { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--borderl); }
.fiche-item--chaud { border-left: 4px solid var(--rouge); }
.fiche-item__tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; color: var(--titre); }
.fiche-item__date { font-size: .8125rem; color: var(--text3); white-space: nowrap; }
.fiche-item p { margin: 4px 0; color: var(--text2); font-size: .9375rem; }
.fiche-item__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.action-mini { margin: 0; }
.btn-mini { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--borderl); background: #fff; color: var(--titre); font: 700 .875rem var(--sans); text-decoration: none; cursor: pointer; }
.btn-mini--bleu { background: var(--titre); color: #fff; border-color: var(--titre); }
.btn-mini--vert { background: #128c4a; color: #fff; border-color: #128c4a; }
.btn-mini--gris { color: var(--text2); }
.etiquette { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--bg3); color: var(--titre); font-size: .75rem; font-weight: 700; }
.pilotage__alerte { padding: 12px 14px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.pilotage .page__titre { font-size: 2rem; }
.case { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; color: var(--titre); font-weight: 600; font-size: .9375rem; }
/* Devis / facture */
.outil-doc .formulaire--page { max-width: 720px; }
.doc__titre { font-size: 1.125rem; font-weight: 800; color: var(--titre); margin: 18px 0 10px; display: flex; gap: 10px; align-items: baseline; }
.lignes { display: grid; gap: 8px; margin-bottom: 10px; }
.ligne { display: grid; grid-template-columns: 1fr 64px 100px 36px; gap: 6px; }
.ligne input { min-height: 44px; padding: 8px 10px; border: 1px solid var(--borderl); border-radius: 9px; font: 400 .9375rem var(--sans); color: var(--titre); min-width: 0; }
.ligne__suppr { border: 0; background: var(--bg3); border-radius: 9px; font-size: 1.25rem; color: var(--titre); cursor: pointer; }
.doc__total { font-size: 1.125rem; color: var(--titre); margin: 12px 0 6px; }
.signature { width: 100%; max-width: 600px; height: auto; aspect-ratio: 3 / 1; border: 2px dashed var(--borderl); border-radius: 12px; background: #fff; touch-action: none; margin-bottom: 8px; }
.doc__actions { display: grid; gap: 10px; justify-items: start; margin-top: 10px; }
.doc__actions .gros-bouton { max-width: 360px; }

/* Espace artisan : connexion, lien d'en-tête, barre des outils. */
.lien-espace { display: none; }
@media (min-width: 900px) {
	.lien-espace { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--titre); text-decoration: none; white-space: nowrap; }
	.lien-espace svg { width: 17px; height: 17px; color: #b8913a; }
	.lien-espace:hover, .lien-espace[aria-current="page"] { background: var(--bg2); }
}
.menu-mobile__espace { display: grid; gap: 6px; margin-bottom: 18px; }
.menu-mobile__espace a { padding: 12px 14px; border-radius: 10px; background: var(--bg2); color: var(--titre); font-weight: 700; text-decoration: none; }
.menu-mobile__espace a[aria-current="page"] { background: var(--titre); color: #fff; }
.menu-mobile__espace a:last-child { background: none; color: var(--text2); font-weight: 500; padding-block: 6px; }
.barre-espace { display: flex; gap: 6px; align-items: center; margin: 14px 0 6px; overflow-x: auto; scrollbar-width: none; }
.barre-espace a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--bg2); color: var(--titre); font-size: 14px; font-weight: 700; text-decoration: none; }
.barre-espace a[aria-current="page"] { background: var(--titre); color: #fff; }
.barre-espace .barre-espace__sortie { margin-left: auto; background: none; color: var(--text2); font-weight: 500; }
.espace { display: flex; justify-content: center; padding-block: 40px 64px; }
.espace__boite { width: 100%; max-width: 400px; text-align: center; }
.espace__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }
.espace .formulaire { text-align: left; margin-top: 20px; background: #fff; border: 1px solid var(--borderl); border-radius: 16px; padding: 20px; }
.espace .gros-bouton { width: 100%; justify-content: center; }
.espace__souvenir { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text2); margin: 4px 0 16px; }
.espace__erreur { margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #b3261e; font-weight: 600; font-size: 14px; }
.espace__oubli { margin-top: 14px; font-size: 14px; }
.espace-artisan .barre { display: none; }
@media (max-width: 899px) { .barre-espace .barre-espace__sortie { display: none; } }
.barre-espace + .page__tete { margin-top: 14px; }
.menu-mobile__connexion { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 700; color: var(--titre); text-decoration: none; }
.menu-mobile__connexion svg { width: 16px; height: 16px; color: #b8913a; }
@media (max-width: 1099px) { .lien-espace { display: none !important; } }

/* ================= LOADER « APPLI D'URGENCE » ================= */
.loader.loader--sos { background: radial-gradient(120% 80% at 50% 40%, #13306a 0%, #0b1d42 55%, #060f24 100%); gap: 26px; color: #fff; animation: loader-sortie .5s ease 3.4s forwards; }
.charge .loader.loader--sos { animation: sos-sortie .6s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes sos-sortie { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); visibility: hidden; } }
.sos-l__haut { position: absolute; top: max(22px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: .01em; animation: sos-descend .6s ease both; }
.sos-l__haut img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.sos-l__haut b { color: #e7c77a; }
.sos-l__haut em { font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #d02020; box-shadow: 0 0 0 0 rgba(208,32,32,.7); animation: sos-pastille 1.2s infinite; }
@keyframes sos-pastille { 70% { box-shadow: 0 0 0 10px rgba(208,32,32,0); } 100% { box-shadow: 0 0 0 0 rgba(208,32,32,0); } }
@keyframes sos-descend { from { opacity: 0; transform: translateY(-14px); } }
.sos-l__radar { position: relative; width: 230px; height: 230px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.05) 0 34%, transparent 35%), repeating-radial-gradient(circle, transparent 0 38px, rgba(255,255,255,.07) 39px 40px); }
.sos-l__onde { position: absolute; inset: 50%; width: 96px; height: 96px; margin: -48px; border-radius: 50%; border: 2px solid rgba(255,59,59,.85); animation: sos-onde 2s cubic-bezier(.2,.6,.3,1) infinite; }
.sos-l__onde:nth-child(2) { animation-delay: .66s; }
.sos-l__onde:nth-child(3) { animation-delay: 1.33s; }
@keyframes sos-onde { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.sos-l__balayage { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,59,59,.45), rgba(255,59,59,0) 70deg, transparent 360deg); animation: sos-tourne 1.6s linear infinite; mask: radial-gradient(circle, transparent 0 48px, #000 49px); -webkit-mask: radial-gradient(circle, transparent 0 48px, #000 49px); }
@keyframes sos-tourne { to { transform: rotate(360deg); } }
.sos-l__avatar { position: relative; width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(208,32,32,.9), 0 20px 50px -10px rgba(208,32,32,.8); animation: sos-avatar 2.3s ease forwards; }
.sos-l__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sos-l__avatar i { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: #9aa3b5; border: 3px solid #fff; animation: sos-point 2.3s steps(1) forwards; }
@keyframes sos-avatar { 0%, 70% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(208,32,32,.9), 0 20px 50px -10px rgba(208,32,32,.8); } 85%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #22c55e, 0 20px 60px -6px rgba(34,197,94,.8); } }
@keyframes sos-point { 0% { background: #9aa3b5; } 72% { background: #22c55e; } }
.sos-l__etapes { position: relative; height: 24px; width: 280px; text-align: center; font-weight: 700; font-size: 17px; }
.sos-l__etapes span { position: absolute; inset: 0; opacity: 0; animation: sos-etape 2.3s both; }
.sos-l__etapes span:nth-child(1) { animation-name: sos-etape1; }
.sos-l__etapes span:nth-child(2) { animation-name: sos-etape2; }
.sos-l__etapes span:nth-child(3) { animation-name: sos-etape3; color: #4ade80; }
@keyframes sos-etape1 { 0% { opacity: 0; transform: translateY(8px); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sos-etape2 { 0%, 34% { opacity: 0; transform: translateY(8px); } 40%, 64% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sos-etape3 { 0%, 70% { opacity: 0; transform: translateY(8px) scale(.96); } 78%, 100% { opacity: 1; transform: none; } }
.sos-l__barre { width: 220px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.sos-l__barre span { display: block; height: 100%; width: 100%; border-radius: 5px; transform-origin: left; background: linear-gradient(90deg, #d02020, #ff5a3c 60%, #22c55e); animation: sos-progres 2.3s cubic-bezier(.5,0,.2,1) both; }
@keyframes sos-progres { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sos-l__onde, .sos-l__balayage { animation: none; opacity: .3; } }

/* ================= ANIMATIONS DU SITE ================= */
/* Apparition au défilement (classe posée par rm.js seulement si l'élément est hors écran au départ). */
.rv { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0s); }
.rv.rv--vu { opacity: 1; transform: none; }
/* Titre d'accueil : entrée nette après le loader. */
.charge h1 { animation: titre-entre .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes titre-entre { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
/* En-tête : se resserre et prend une ombre au défilement. */
.navbar { transition: box-shadow .3s, background .3s; }
.defile .navbar { box-shadow: 0 10px 30px -18px rgba(11,29,66,.55); }
/* Boutons : reflet qui traverse + léger soulèvement. */
.btn-primary, .gros-bouton, .barre__btn--urgence { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.btn-primary::after, .gros-bouton::after, .barre__btn--urgence::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: reflet 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes reflet { 0%, 70% { left: -60%; } 100% { left: 140%; } }
.btn-primary:hover, .gros-bouton:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(208,32,32,.6); }
/* Images : léger zoom au survol. */
main figure, main .page-figure { overflow: hidden; }
main figure img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
main figure:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .charge h1, .btn-primary::after, .gros-bouton::after, .barre__btn--urgence::after { animation: none; } }

/* ================= SNAPCHAT ================= */
.videos__suivre--snap { background: #fffc00 !important; color: #111 !important; border-color: #f2d600 !important; animation: snap-respire 2.4s ease-in-out infinite; }
.videos__suivre--snap:hover { transform: translateY(-2px) rotate(-1deg); }
@keyframes snap-respire { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,232,0,.7); } 50% { box-shadow: 0 0 0 10px rgba(255,232,0,0); } }
.snap-pop { position: fixed; z-index: 60; left: 16px; bottom: 92px; width: min(360px, calc(100vw - 32px)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 20px; background: #fffc00; color: #111; box-shadow: 0 24px 50px -18px rgba(0,0,0,.45), 0 0 0 3px #fff; transform-origin: 20% 100%; }
.snap-pop[hidden] { display: none; }
.snap-pop.est-ouvert { animation: snap-pop .7s cubic-bezier(.34,1.56,.64,1) both; }
.snap-pop.est-ferme { animation: snap-part .35s ease-in forwards; }
@keyframes snap-pop { 0% { opacity: 0; transform: translateY(40px) scale(.6) rotate(-6deg); } 60% { opacity: 1; transform: translateY(-6px) scale(1.04) rotate(1.5deg); } 100% { transform: none; } }
@keyframes snap-part { to { opacity: 0; transform: translateY(30px) scale(.8); } }
@media (min-width: 900px) { .snap-pop { bottom: 24px; left: 24px; } }
.snap-pop__icone { width: 54px; height: 54px; display: grid; animation: snap-fantome 2.2s ease-in-out .7s infinite; }
.snap-pop__icone .reseau3d { width: 54px; height: 57px; }
@keyframes snap-fantome { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-5px) rotate(-8deg); } 40% { transform: translateY(0) rotate(6deg); } 55% { transform: rotate(0); } }
.snap-pop__texte { display: grid; gap: 2px; font-size: 13px; line-height: 1.3; }
.snap-pop__texte strong { font-size: 16px; font-weight: 800; }
.snap-pop__btn { padding: 10px 16px; border-radius: 999px; background: #111; color: #fffc00; font-weight: 800; font-size: 14px; text-decoration: none; position: relative; overflow: hidden; }
.snap-pop__btn::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: reflet 2.8s ease-in-out infinite; }
.snap-pop__fermer { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: #111; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.pied__reseaux a[title="Snapchat"] { animation: snap-fantome 2.6s ease-in-out infinite; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .snap-pop.est-ouvert, .snap-pop__icone, .videos__suivre--snap, .pied__reseaux a[title="Snapchat"] { animation: none; } }
@media (min-width: 900px) { .snap-pop { left: auto; right: 24px; bottom: 96px; transform-origin: 80% 100%; } }

/* ================= TEMPS D'ARRIVÉE ================= */
.trajet { background: radial-gradient(90% 120% at 80% 0%, #16357a 0%, #0b1d42 60%, #071330 100%); color: #fff; padding-block: 64px; overflow: hidden; }
.trajet .sec-h, .trajet .sec-p { color: #fff; }
.trajet .sec-p { opacity: .8; }
.trajet .sec-tag { color: #e7c77a; }
.trajet .accent { color: #ff6b5a; }
.trajet__grille { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .trajet__grille { grid-template-columns: 1fr 1.1fr; gap: 56px; } .trajet { padding-block: 96px; } }
.trajet__form { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.trajet__champ { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 0 rgba(255,107,90,.5); transition: box-shadow .25s; }
.trajet__champ:focus-within { box-shadow: 0 0 0 4px rgba(255,107,90,.45); }
.trajet__champ .pin { width: 22px; height: 22px; fill: #d02020; flex: none; }
.trajet__champ input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 16px 0; font: 600 16px var(--sans); color: var(--titre); background: none; }
.trajet__btn { padding: 0 24px; min-height: 54px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ff4b3a, #d02020); color: #fff; font: 800 16px var(--sans); cursor: pointer; box-shadow: 0 12px 26px -10px rgba(208,32,32,.8); transition: transform .15s; }
.trajet__btn:hover { transform: translateY(-2px); }
.trajet__btn:active { transform: scale(.97); }
.trajet__erreur { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,107,90,.15); color: #ffd2cc; font-size: 14px; }
.trajet__erreur a { color: #fff; font-weight: 700; }
.trajet__ecran { position: relative; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.trajet__carte { display: block; width: 100%; height: auto; border-radius: 16px; background: rgba(0,0,0,.18); }
.trajet__route-fond { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 6; stroke-linecap: round; }
.trajet__route { fill: none; stroke: #ff5a4a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255,90,74,.8)); }
.trajet__depart circle:first-child { fill: #e7c77a; }
.trajet__onde { fill: none; stroke: #e7c77a; stroke-width: 2; transform-origin: 60px 140px; animation: trajet-onde 2s ease-out infinite; }
@keyframes trajet-onde { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.trajet__arrivee { fill: #ff5a4a; transform-origin: 340px 72px; transform: scale(.4); opacity: .35; transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.trajet.est-calcule .trajet__arrivee { transform: scale(1); opacity: 1; }
.trajet__voiture { opacity: 0; transition: opacity .2s; }
.trajet__voiture circle { fill: #22c55e; stroke: #fff; stroke-width: 3; }
.trajet.est-calcule .trajet__voiture { opacity: 1; }
.trajet__lieu { fill: rgba(255,255,255,.85); font: 700 13px var(--sans); }
.trajet__resultat { display: flex; align-items: center; gap: 18px; margin: 16px 4px 6px; flex-wrap: wrap; }
.trajet__temps { display: flex; align-items: baseline; gap: 6px; margin: 0; font-weight: 800; line-height: 1; }
.trajet__temps b { font-size: clamp(52px, 9vw, 76px); letter-spacing: -.03em; background: linear-gradient(180deg, #fff, #c9d6f5); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.trajet__temps span { font-size: 22px; color: rgba(255,255,255,.75); }
.trajet__env { font-size: 30px !important; }
.trajet.est-calcule .trajet__temps b { animation: trajet-pop .5s cubic-bezier(.34,1.56,.64,1) 1.3s both; }
@keyframes trajet-pop { 50% { transform: scale(1.12); } }
.trajet__detail { flex: 1 1 200px; margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.85); }
.trajet__detail strong { color: #4ade80; }
.trajet__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.trajet__tel { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-weight: 700; text-decoration: none; }
.trajet__tel svg { width: 18px; height: 18px; }
.trajet__note { margin: 12px 4px 0; font-size: 12px; color: rgba(255,255,255,.55); }
@media (prefers-reduced-motion: reduce) { .trajet__onde { animation: none; } }

/* Logo à la place de la photo (loader, en-tête, bouton SOS). */
.sos-l__avatar img, .dispo__avatar img, .sos-avatar img { object-fit: contain !important; background: #fff; padding: 3px; box-sizing: border-box; }
.sos-l__avatar img { padding: 8px; }
.btn-mini--wa { background: #128c4a !important; color: #fff !important; border-color: #128c4a !important; }

/* Pages ville : prestations nommées avec la ville + communes autour. */
.presta-ville { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .presta-ville { grid-template-columns: 1fr 1fr; } }
.presta-ville a { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid #d02020; border-radius: 10px; background: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.presta-ville a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(11,29,66,.45); }
.presta-ville strong { color: var(--titre); font-size: 15px; }
.presta-ville span { color: var(--text2); font-size: 14px; line-height: 1.45; }
.autour { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.autour__titre { margin: 0 0 6px; font-size: 20px; color: var(--titre); }
.autour__texte { margin: 0 0 14px; color: var(--text2); font-size: 15px; }
.autour__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.autour__liste li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); color: var(--text); }
.autour__liste a { color: var(--titre); font-weight: 600; }
.autour__liste span { color: var(--text2); font-variant-numeric: tabular-nums; }
.article__villes { margin: 36px 0 12px; padding: 22px; border-radius: 14px; background: var(--bg2); }
.article__villes h2 { margin: 0 0 6px !important; font-size: 20px; }
.article__villes ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.article__villes li a { display: inline-block; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--titre); }
.article__villes-liste { font-size: 14px; line-height: 1.9; }

/* Accueil : les 8 départements d'Île-de-France. */
.idf__intro { max-width: 820px; }
.idf__grille { display: grid; gap: 12px; margin: 26px 0 24px; padding: 0; list-style: none; }
@media (min-width: 640px) { .idf__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .idf__grille { grid-template-columns: repeat(4, 1fr); } }
.idf__dep { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; transition: transform .2s, box-shadow .2s; }
.idf__dep:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(11,29,66,.5); }
.idf__tete { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.idf__num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--titre); color: #fff; font-weight: 800; font-size: 15px; }
.idf__nom { color: var(--titre); font-weight: 800; font-size: 15px; line-height: 1.25; }
.idf__villes { margin: 12px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--text2); }
.idf__villes a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.idf__villes a:hover { color: #d02020; border-color: #d02020; }