/* ==========================================================================
   24/7 Storm Roof Network, visual identity: "storm front"
   Deep night-blue, alert cyan, cool light grey. Very heavy sans display type,
   a loud red/orange emergency banner pinned to the top of every page, a
   full-bleed diagonal-gradient hero carrying an inline SVG rain pattern, and
   soft-cornered cards flagged with a coloured left edge.
   ========================================================================== */

:root {
  --navy-950:  #030d1c;
  --navy-900:  #06182e;
  --navy-800:  #0b2747;
  --navy-700:  #123a63;
  --navy-600:  #1c5288;
  --ink:       #101d2c;
  --muted:     #4f6377;
  --muted-dk:  #38495c;
  --cyan:      #22d3ee;
  --cyan-dim:  #7de6f7;
  --cyan-ink:  #0b6f8c;   /* cyan that passes AA on light backgrounds */
  --alert-a:   #b91c1c;
  --alert-b:   #c2410c;
  --mist:      #eef3f8;
  --mist-2:    #dfe8f1;
  --line:      #cfdbe7;
  --r-sm:      6px;
  --r:         10px;
  --r-lg:      16px;
  --shell:     1180px;
  --gutter:    24px;
  --display:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --glow:      0 10px 30px rgba(6, 24, 46, .12);
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html { -webkit-text-size-adjust: 100% }

body {
  font: 16.5px/1.68 var(--body);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto }

a { color: var(--cyan-ink) }
a:hover { color: var(--navy-800) }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--cyan) }
.urgent-bar :focus-visible { outline-color: #fff }

/* ---------- shell ------------------------------------------------------ */

.container {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-sm { max-width: 800px }

/* ---------- display type: heavy sans ----------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.032em;
  color: var(--navy-900);
}
h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); line-height: 1.04; margin-bottom: 18px }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 14px }
h3 { font-size: 1.16rem; letter-spacing: -.02em; margin-bottom: 8px }
h4 { font-size: 1rem; letter-spacing: -.01em; margin-bottom: 8px }
p  { margin-bottom: 14px }
p:last-child { margin-bottom: 0 }

/* ---------- emergency banner (loud, top of every page) ------------------ */

.urgent-bar {
  background: linear-gradient(90deg, var(--alert-a) 0%, var(--alert-b) 100%);
  color: #fff;
  text-align: center;
  padding: 12px 18px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .015em;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22);
}
.urgent-bar a {
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  text-decoration: none;
  background: rgba(0, 0, 0, .28);
  border-radius: 999px;
  padding: 4px 15px;
}
.urgent-bar a:hover { background: rgba(0, 0, 0, .45); color: #fff }
.alert-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #ffe08a;
  box-shadow: 0 0 0 0 rgba(255, 224, 138, .85);
  animation: alert-pulse 1.9s ease-out infinite;
}
@keyframes alert-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 224, 138, .85) }
  70%  { box-shadow: 0 0 0 9px rgba(255, 224, 138, 0) }
  100% { box-shadow: 0 0 0 0 rgba(255, 224, 138, 0) }
}
@media (prefers-reduced-motion: reduce) {
  .alert-dot { animation: none }
}

/* ---------- header: dark, sticky, cyan underglow ------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 24, 46, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-700);
  box-shadow: 0 1px 0 rgba(34, 211, 238, .35), 0 8px 24px rgba(3, 13, 28, .3);
}
.header-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.logo-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cyan), #0891b2);
  color: var(--navy-950);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .2);
}
.site-nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.site-nav a {
  color: #c3d4e5;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
}
.site-nav a:hover { background: rgba(34, 211, 238, .14); color: var(--cyan) }
.header-phone {
  background: var(--cyan);
  color: var(--navy-950);
  padding: 10px 19px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(34, 211, 238, .3);
}
.header-phone:hover { background: #67e8f9; color: var(--navy-950) }

/* ---------- hero: full-bleed diagonal gradient + rain -------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(118deg, var(--navy-950) 0%, var(--navy-800) 42%, var(--navy-600) 78%, #1f6ba8 100%);
  color: #dceaf6;
  padding: 66px 0 62px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: -1;
  opacity: .85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%2322d3ee' stroke-opacity='0.22' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M8 2 L2 17'/%3E%3Cpath d='M32 8 L26 23'/%3E%3Cpath d='M56 0 L50 15'/%3E%3Cpath d='M20 38 L14 53'/%3E%3Cpath d='M44 44 L38 59'/%3E%3Cpath d='M68 34 L62 49'/%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(-4deg);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 3px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.hero h1, .hero h2 { color: #fff; text-shadow: 0 2px 18px rgba(3, 13, 28, .5) }
.hero h3 { color: var(--navy-900) }
.hero p { color: #c6dcee; font-size: 1.07rem }

/* ---------- photo: storm-front duotone ---------------------------------
   Traitement maison: la photo est desaturee et assombrie, puis recouverte
   du meme degrade diagonal 118deg bleu nuit vers bleu, et la trame de pluie
   du hero repasse PAR-DESSUS. On garde donc le front d'orage du site,
   la photo ne fait que lui donner de la matiere. Le texte est centre, donc
   le voile doit tenir sur toute la largeur, bord clair compris.

   Contraste: les cinq images tournent maintenant sur toutes les pages ville,
   comte, service et urgence, il ne suffit plus de mesurer hero.jpg. Mesure
   refaite pour les cinq, en simulant le rendu reel (object-fit: cover, donc
   recadrage, puis voile interpole a la position du pixel DANS l'element,
   trame de pluie comptee a son alpha maximum partout), sur huit viewports de
   360 a 1440px, en retenant le 99,9e centile de luminance de la zone de texte.
   C'est ici que l'ecart entre images etait le plus grand: le filtre remonte
   fortement les basses lumieres (brightness 1.25) parce qu'il est cale sur un
   ciel d'orage nocturne, et il fait donc exploser les photos prises de jour.
   Sous 900px la grille se replie et le texte atteint le bord droit, la ou le
   voile etait le plus transparent: la pastille cyan y tombait a 2.91:1 sur
   svc-1. Les paliers de droite ont ete resserres (.78/.55 -> .88/.80), ce qui
   ramene toutes les images entre 4.58 et 5.34:1.
   ---------------------------------------------------------------------- */

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--navy-950);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* le ciel d'orage est tres sombre et l'eclair tres clair: on compresse la
     dynamique (contrast < 1) pour remonter le ciel sans faire exploser
     l'eclair, sinon la photo disparait entierement sous le voile */
  filter: saturate(.85) brightness(1.25) contrast(.62);
}
/* Voile par defaut (ville, comte, urgence): dense sur la colonne de texte a
   gauche, il s'allege a droite ou se trouve la carte blanche du formulaire.
   La photo n'est la qu'en texture sur ces pages, comme demande. */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(3, 13, 28, .95) 0%,
    rgba(4, 18, 34, .93) 52%,
    rgba(6, 26, 48, .88) 74%,
    rgba(9, 36, 66, .80) 100%);
}

/* Index /emergency: pas de colonne de formulaire, le texte va jusqu'au bord
   droit, le voile reste donc dense sur toute la largeur */
.hero-photo-full::after {
  background: linear-gradient(176deg,
    rgba(3, 13, 28, .94) 0%,
    rgba(4, 18, 34, .91) 100%);
}

/* Accueil (hero centre): voile en projecteur, cale en pixels sur la largeur
   du bloc de texte et non en pourcentage, pour qu'il reste aligne dessus quelle
   que soit la largeur de fenetre. De part et d'autre le voile tombe a 42% et
   le ciel d'orage se voit vraiment: c'est la seule page ou il y a la place. */
.hero-photo-spot::after {
  background:
    radial-gradient(ellipse 620px 100% at 50% 50%,
      rgba(3, 13, 28, .94) 0%,
      rgba(4, 18, 34, .91) 61%,
      rgba(6, 26, 48, .62) 84%,
      rgba(9, 36, 66, .42) 100%),
    linear-gradient(118deg, rgba(3, 13, 28, .45) 0%, rgba(11, 39, 71, .34) 100%);
}
/* la pluie reste, mais a moitie moins marquee quand elle passe sur une photo:
   la matiere vient deja de l'image, et cela protege le contraste du texte */
.hero-photo-on::before { opacity: .45 }

/* centred stack, the signature home-page hero */
.hero-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-center h1 { max-width: 18ch }
.hero-center > p { max-width: 62ch }
.hero-center .hero-form {
  width: 100%;
  max-width: 640px;
  text-align: left;
  margin-top: 34px;
}

/* two-column variant used by city / county / emergency pages */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: start;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 211, 238, .13);
  border: 1px solid rgba(34, 211, 238, .45);
  color: var(--cyan-dim);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 20px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.trust-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.hero-center .trust-pills { justify-content: center }
.trust-pills span {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 700;
  color: #dbeaf6;
}

.hero-form {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-lg);
  border-top: 5px solid var(--cyan);
  padding: 24px 24px 26px;
  box-shadow: 0 24px 60px rgba(3, 13, 28, .42);
}
.hero-form h3 { font-size: 1.28rem; margin-bottom: 4px }

/* ---------- sections ----------------------------------------------------- */

.section { padding: 62px 0 }
.section-alt {
  background: var(--mist);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-header { margin-bottom: 30px; max-width: 68ch }
.section-header p { color: var(--muted) }
.section-tag {
  display: inline-block;
  background: rgba(11, 111, 140, .1);
  color: var(--cyan-ink);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 12px;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ---------- buttons ------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--r);
  font-family: var(--display);
  font-size: .98rem;
  font-weight: 900;
  letter-spacing: -.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn-accent {
  background: linear-gradient(180deg, #f04438, #c2280f);
  color: #fff;
  box-shadow: 0 6px 20px rgba(194, 40, 15, .35);
}
.btn-accent:hover { background: linear-gradient(180deg, #d92d20, #a81f0a); color: #fff }
.btn-outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--navy-800);
  color: var(--navy-800);
}
.btn-outline:hover { background: var(--navy-800); color: #fff; box-shadow: inset 0 0 0 2px var(--navy-800) }
.btn-white {
  background: #fff;
  color: var(--navy-800);
  box-shadow: 0 6px 20px rgba(3, 13, 28, .18);
}
.btn-white:hover { background: var(--mist); color: var(--navy-900) }
.btn-lg { padding: 16px 30px; font-size: 1.08rem }
.btn-full { width: 100%; display: block }

/* ---------- cards: rounded, cyan left edge -------------------------------- */

.grid { display: grid; gap: 16px }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(278px, 1fr)) }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)) }

.card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--cyan);
  border-radius: var(--r);
  padding: 22px 22px 22px 20px;
  color: inherit;
  box-shadow: var(--glow);
  transition: transform .16s ease, border-left-color .16s ease, box-shadow .16s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-left-color: #f04438;
  box-shadow: 0 16px 40px rgba(6, 24, 46, .18);
}
.card h3 { color: var(--navy-900) }
.card p { color: var(--muted); font-size: .93rem; margin: 0 }
.card-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 10px }

/* vignette photo carree posee a gauche du texte, arrondie comme le reste
   du site et teintee cyan/bleu nuit pour rester dans la palette orage */
.card-thumbed {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.card-thumbed .card-body { min-width: 0 }
/* la vignette remplace l'emoji: les deux ensemble font doublon */
.card-thumbed .card-icon { display: none }
.card-thumb {
  position: relative;
  flex: 0 0 92px;
  width: 92px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--mist-2);
  box-shadow: inset 0 0 0 1px rgba(6, 24, 46, .12);
}
.card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(.85) contrast(1.06);
}
.card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(34, 211, 238, .20), rgba(6, 24, 46, .34));
}

/* ---------- directory listings --------------------------------------------- */

.dir-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(324px, 1fr));
}
.dir-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy-600);
  border-radius: var(--r);
  padding: 20px 22px;
  box-shadow: var(--glow);
}
.dir-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dir-card h3 { color: var(--navy-900); margin: 0 }
.dir-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  white-space: nowrap;
  background: var(--mist);
  border-radius: 999px;
  padding: 4px 12px;
}
.dir-rating strong { font-size: 1.02rem; font-weight: 900; color: var(--navy-900) }
.dir-stars { color: #b26a00 }
.dir-count { color: var(--muted) }
.dir-addr { color: var(--muted); font-size: .9rem; margin: 10px 0 0 }
.dir-review {
  border-left: 4px solid var(--cyan);
  background: var(--mist);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-top: 14px;
  font-size: .91rem;
  font-style: normal;
  color: var(--muted-dk);
}
.dir-review cite {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: .79rem;
  font-weight: 700;
  color: var(--muted);
}
.dir-attrib { margin-top: 20px; font-size: .8rem; color: var(--muted); max-width: 86ch }

/* ---------- lead capture ----------------------------------------------------- */

.match-cta {
  background: linear-gradient(160deg, #fff, var(--mist));
  border: 1px solid var(--line);
  border-top: 5px solid #f04438;
  border-radius: var(--r-lg);
  padding: 32px 30px;
  box-shadow: 0 18px 44px rgba(6, 24, 46, .12);
}
.match-cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem) }
.match-cta > p { color: var(--muted) }

.lead-form { display: grid; gap: 14px; margin-top: 18px }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.lead-form label {
  display: block;
  font-size: .85rem;
  font-weight: 800;
  color: var(--navy-800);
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: #fbfdff;
  font: 400 16px/1.45 var(--body);
  color: var(--ink);
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: 3px solid var(--cyan);
  outline-offset: 1px;
  border-color: var(--navy-600);
  background: #fff;
}
.lead-form .lf-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .77rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
}
.lead-form .lf-consent input { width: auto; margin-top: 3px; flex: 0 0 auto }
.lf-alt { text-align: center; font-size: .89rem; color: var(--muted); margin: 0 }
.lf-success {
  background: #e7f8ef;
  border: 1px solid #9ad9b7;
  border-left: 5px solid #17864a;
  border-radius: var(--r);
  padding: 26px;
  text-align: center;
}

/* ---------- emergency band ----------------------------------------------------- */

.emergency-band {
  background: linear-gradient(100deg, #7f1d1d, #9a3412);
  color: #fff;
  border-top: 0;
  border-bottom: 0;
  padding: 22px 0;
}
.emergency-band .container {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.emergency-band strong {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 62ch;
}
.emergency-band .btn-accent {
  background: #fff;
  color: #9a3412;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.emergency-band .btn-accent:hover { background: var(--mist); color: #7f1d1d }

/* ---------- FAQ ------------------------------------------------------------------ */

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mist-2);
  border-radius: var(--r);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(6, 24, 46, .05);
}
.faq-item.open { border-left-color: var(--cyan) }
.faq-q {
  padding: 17px 20px;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--navy-900);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.faq-q::after {
  content: "▾";
  color: var(--cyan-ink);
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.faq-item.open .faq-q::after { transform: rotate(180deg) }
.faq-a {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .93rem;
  transition: max-height .25s ease, padding .25s ease;
}
.faq-item.open .faq-a { padding: 0 20px 18px; max-height: 700px }

/* ---------- link grids ------------------------------------------------------------ */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.link-grid a {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy-600);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  text-decoration: none;
  font-size: .89rem;
  font-weight: 700;
  color: var(--navy-800);
}
.link-grid a:hover {
  border-left-color: var(--cyan);
  background: var(--mist);
  color: var(--navy-900);
}

/* ---------- breadcrumb -------------------------------------------------------------- */

.breadcrumb {
  background: var(--navy-900);
  border-bottom: 1px solid var(--navy-700);
  padding: 10px 0;
  font-size: .84rem;
}
.breadcrumb ol {
  display: flex;
  gap: 8px;
  list-style: none;
  flex-wrap: wrap;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  color: #b9cddf;
}
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--navy-600) }
.breadcrumb a { color: #b9cddf; text-decoration: none }
.breadcrumb a:hover { color: var(--cyan); text-decoration: underline }

/* ---------- long-form ---------------------------------------------------------------- */

.prose { max-width: 72ch }
.prose h2 { margin-top: 34px }
.prose h3 { margin-top: 24px; font-size: 1.14rem }
.prose ul, .prose ol { margin: 0 0 16px 22px }
.prose li { margin-bottom: 8px }
.prose ol { counter-reset: none }
.prose ol li::marker { color: var(--cyan-ink); font-weight: 900 }
.prose strong { color: var(--navy-900) }

/* ---------- stats ---------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.stat {
  background: var(--navy-900);
  border: 0;
  border-left: 5px solid var(--cyan);
  border-radius: var(--r);
  padding: 18px 18px;
  text-align: left;
  box-shadow: var(--glow);
}
.stat strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--cyan-dim);
  margin-bottom: 5px;
}
.stat span { display: block; font-size: .8rem; color: #b9cddf; line-height: 1.5 }

/* ---------- footer ----------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-950);
  color: #9fb6cc;
  padding: 50px 0 0;
  margin-top: 0;
  font-size: .9rem;
  border-top: 4px solid var(--cyan);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 34px;
  padding-bottom: 34px;
}
.footer-brand {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 9px;
}
.site-footer h4 {
  color: var(--cyan-dim);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 11px;
}
.site-footer ul { list-style: none }
.site-footer li { margin-bottom: 7px }
.site-footer a { color: #9fb6cc; text-decoration: none }
.site-footer a:hover { color: var(--cyan); text-decoration: underline }
.footer-phone { margin-top: 12px }
.footer-phone a {
  display: inline-block;
  background: rgba(34, 211, 238, .14);
  border: 1px solid rgba(34, 211, 238, .4);
  border-radius: 999px;
  padding: 6px 16px;
  color: #fff;
  font-weight: 900;
}
.footer-legal {
  border-top: 1px solid var(--navy-800);
  padding: 20px var(--gutter) 26px;
  font-size: .78rem;
  line-height: 1.65;
  color: #8aa2b8;
}
/* attribution Pexels, obligatoire, sur toutes les pages */
.photo-credits {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--navy-800);
  font-size: .74rem;
  max-width: 96ch;
}

/* ---------- mobile call bar ------------------------------------------------------------- */

.sticky-call { display: none }

/* ---------- responsive ------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { padding: 48px 0 46px }
  .hero-grid { grid-template-columns: 1fr; gap: 30px }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px }
  .section { padding: 46px 0 }
  .site-nav { order: 3; width: 100%; margin-left: 0; gap: 4px }
  .site-nav a { padding: 7px 11px }
  .header-phone { margin-left: auto }
}

@media (max-width: 620px) {
  :root { --gutter: 16px }
  .header-inner { padding: 10px var(--gutter); gap: 12px }
  .site-logo { font-size: .95rem; gap: 9px }
  .logo-mark { width: 30px; height: 30px; flex: 0 0 30px; font-size: .95rem }
  .header-phone { padding: 8px 14px; font-size: .86rem }
  .site-nav a { font-size: .84rem; padding: 6px 10px }
  .lf-row { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr }
  .match-cta { padding: 24px 18px }
  .hero-form { padding: 20px 18px 22px }
  .hero-center .hero-form { margin-top: 26px }
  .urgent-bar { font-size: .8rem; padding: 10px 14px; gap: 8px }
  body { padding-bottom: 62px }
  .sticky-call {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #b91c1c, #c2410c);
    color: #fff;
    text-align: center;
    padding: 15px;
    font-weight: 900;
    text-decoration: none;
    z-index: 60;
    box-shadow: 0 -4px 20px rgba(3, 13, 28, .4);
  }
}