@font-face { font-family: "Hind"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/hind-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/hind-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/hind-latin-600.woff2") format("woff2"); }

/* Couleurs du client : bleu #22A8DA, rose #E0395E, gris #363539.
   Le bandeau prend le bleu moyen du triangle du logo (#1564A6), lisible en blanc. */
:root {
  --brand-blue: #22a8da;
  --band: #1564a6;
  --band-deep: #182a90;
  --rose: #e0395e;
  --ink: #363539;
  --ink-soft: oklch(0.47 0.01 280);
  --link: oklch(0.47 0.12 245);
  --rule: oklch(0.89 0.012 240);
  --paper: oklch(0.982 0.005 240);
  --on-band: oklch(0.985 0.006 240);
  --on-band-soft: oklch(0.9 0.035 235);
  --logo-white: #ffffff; /* le JPEG du logo a un fond blanc pur : l'en-tête doit le reprendre */
  --foot: oklch(0.29 0.008 285);

  --space-xs: .5rem;
  --space-s: 1rem;
  --space-m: clamp(1.5rem, 3vw, 2.25rem);
  --space-l: clamp(2.5rem, 6vw, 4.5rem);
  --space-xl: clamp(3.5rem, 9vw, 7rem);
  --ease-out: cubic-bezier(.25, 1, .5, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Hind", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rose); }
a:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

.label {
  margin: 0 0 var(--space-xs);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* En-tête : le logo reste sur blanc, comme sur un papier à en-tête */
.masthead { background: var(--logo-white); }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-top: .75rem; padding-bottom: .75rem; }
.masthead-logo { display: block; flex: none; }
.masthead-logo img { display: block; width: clamp(84px, 11vw, 124px); }
.masthead-phone { display: flex; flex-direction: column; align-items: flex-end; min-height: 44px; justify-content: center; text-decoration: none; color: var(--ink); line-height: 1.25; }
.masthead-phone-label { font-size: .875rem; color: var(--ink-soft); }
.masthead-phone-number { font-weight: 600; font-size: 1.5rem; color: var(--rose); font-variant-numeric: tabular-nums; }
.masthead-phone:hover .masthead-phone-number { color: var(--band); }

/* Bandeau bleu */
.band { position: relative; overflow: hidden; background: var(--band); color: var(--on-band); isolation: isolate; }
.band-shape { position: absolute; z-index: -1; top: 0; right: 0; height: 100%; width: min(44%, 40rem); }
.band-inner { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.band-name { margin: 0; font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; letter-spacing: .01em; }
.band-tagline { margin: .15rem 0 0; font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.125rem); color: var(--on-band-soft); }
.band-title {
  margin: var(--space-l) 0 var(--space-m);
  max-width: 13ch;
  font-size: clamp(2.75rem, 8.5vw, 6rem);
  line-height: .98;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.band-dot { color: var(--rose); }
.band-text { margin: 0 0 var(--space-m); max-width: 46ch; font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.55; color: var(--on-band); }

/* Coordonnées : colonnes séparées par des filets, téléphone en tête */
.contact { background: var(--logo-white); border-bottom: 1px solid var(--rule); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(max-content, 1fr) minmax(0, 1fr); padding-top: var(--space-l); padding-bottom: var(--space-l); }
.contact-item { padding: 0 var(--space-m); }
.contact-item:first-child { padding-left: 0; }
.contact-item + .contact-item { border-left: 1px solid var(--rule); }
.contact-item p, .contact-item address { margin: 0; font-style: normal; }
.contact-item a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-item a:hover { text-decoration: underline; }
.phone { display: inline-block; white-space: nowrap; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.contact .phone:hover { color: var(--rose); text-decoration: none; }

/* Services */
.services { padding: var(--space-l) 0 var(--space-m); }
.services-list {
  list-style: none; margin: var(--space-s) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.services-list li {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.25rem 1rem 1.25rem 0;
  font-size: 1.1875rem; font-weight: 400; line-height: 1.25; color: var(--ink);
}
.services-list li + li { padding-left: 1rem; border-left: 1px solid var(--rule); }
.services-list .ico { width: 1.75rem; height: 1.75rem; color: var(--band); stroke-width: 1.5; }

/* Réseau et note réglementaire */
.fine { padding: var(--space-m) 0 var(--space-l); }
.fine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m) var(--space-l); align-items: start; border-top: 1px solid var(--rule); padding-top: var(--space-m); }
.network { display: flex; align-items: center; gap: var(--space-s); }
.network img { flex: none; width: 168px; mix-blend-mode: multiply; }
.network p, .reglemente { margin: 0; font-size: 1rem; color: var(--ink-soft); }

/* Pied de page */
.foot { background: var(--foot); color: oklch(0.86 0.006 285); font-size: .9375rem; padding: var(--space-m) 0; }
.foot p { margin: 0 0 .5rem; max-width: 80ch; }
.foot a { color: var(--on-band); }
.foot a:hover { color: var(--brand-blue); }
.foot-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: var(--space-s) !important; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Pages légales */
.band--slim .band-inner { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.band--slim .band-shape { width: auto; aspect-ratio: 600 / 520; }
.legal { max-width: 46rem; margin: 0 auto; padding: var(--space-l) clamp(1rem, 4vw, 2.5rem) var(--space-xl); }
.legal h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.1; letter-spacing: -.01em; margin: var(--space-s) 0 var(--space-m); }
.legal h2 { font-size: 1.375rem; line-height: 1.25; margin: var(--space-l) 0 .75rem; padding-top: var(--space-m); border-top: 1px solid var(--rule); color: var(--band); }
.legal h3 { font-size: 1.125rem; margin: var(--space-m) 0 .375rem; }
.legal p, .legal li { font-size: 1.0625rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: var(--space-s) 0; display: block; overflow-x: auto; }
.legal tr:not(:first-child) td + td { white-space: nowrap; }
.legal td, .legal th { border: 1px solid var(--rule); padding: .5rem .625rem; vertical-align: top; text-align: left; background: var(--logo-white); }
.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.back:hover { text-decoration: underline; }


/* Icônes (sprite SVG en ligne, tracé Lucide) */
.sprite { display: none; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Boutons du bandeau */
.band-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: .75rem 1.375rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 600; font-size: 1.0625rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.btn .ico { width: 1.15em; height: 1.15em; }
.btn--primary { background: var(--logo-white); color: var(--band); }
.btn--primary:hover { background: var(--on-band-soft); color: var(--band-deep); }
.btn--ghost { color: var(--on-band); border-color: color-mix(in oklch, var(--on-band) 55%, transparent); }
.btn--ghost:hover { color: var(--on-band); background: color-mix(in oklch, var(--on-band) 12%, transparent); border-color: var(--on-band); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--on-band); outline-offset: 3px; }

/* Statuts réglementés */
.band-creds { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9375rem; color: var(--on-band-soft); }
.band-creds li { display: inline-flex; align-items: center; gap: .45rem; }
.band-creds .ico { width: 1.1em; height: 1.1em; color: var(--on-band); }

/* Libellés avec icône */
.contact .label { display: inline-flex; align-items: center; gap: .45rem; }
.contact .label .ico { width: 1.15rem; height: 1.15rem; color: var(--band); stroke-width: 2; }
.contact-item a { transition: color .2s var(--ease-out); }

/* Apparition au chargement */
@media (prefers-reduced-motion: no-preference) {
  .band-inner > * { animation: rise .7s var(--ease-out) both; }
  .band-tagline { animation-delay: .06s; }
  .band-title { animation-delay: .14s; }
  .band-text { animation-delay: .24s; }
  .band-actions { animation-delay: .32s; }
  .band-creds { animation-delay: .4s; }
  .band-shape { animation: slide 1.1s var(--ease-out) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes slide { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
}

@media (max-width: 960px) {
  .band-shape { display: none; }
  .services-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services-list li:nth-child(4) { border-left: 0; padding-left: 0; }
  .services-list li:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .contact-item { padding: 0; }
  .contact-item + .contact-item { border-left: 0; border-top: 1px solid var(--rule); padding-top: var(--space-m); }
  .fine-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .services-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-list li:nth-child(4) { border-left: 1px solid var(--rule); padding-left: 1rem; }
  .services-list li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .services-list li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .btn { flex: 1 1 100%; justify-content: center; }
  .network { flex-direction: column; align-items: flex-start; }
  .masthead-phone-label { display: none; }
}