/* =====================================================================
   Fanny Dhondt — logopède à Grosage
   Feuille de style unique. Les couleurs reprennent celles de l'ancien
   site (dégradé vert d'eau vers bleu profond), mais sont ici produites
   en CSS : plus d'image de fond de 100 Ko, et c'est net à toute taille.
   ===================================================================== */

/* ------------------------------ polices ------------------------------ */
/* Servies depuis le site lui-même : pas d'appel à Google Fonts, donc pas
   de requête vers un tiers et rien à déclarer côté vie privée. */
@font-face {
  font-family: "Lato";
  src: url("Lato-Regular.woff2") format("woff2"), url("Lato-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("Lato-Light.woff2") format("woff2"), url("Lato-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("Montserrat-Bold.woff2") format("woff2"), url("Montserrat-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------ réglages ----------------------------- */
:root {
  /* teintes reprises du dégradé d'origine */
  --vert-pale:   #d9f2b1;
  --menthe:      #91d2bc;
  --turquoise:   #42b8c6;
  --bleu:        #3e84b5;
  --bleu-nuit:   #2446a0;

  /* teintes de texte : assombries par rapport à l'original, qui passait
     sous le seuil de lisibilité */
  --accent:       #13697f;
  --accent-vif:   #0f5567;

  --fond:        #ffffff;
  --fond-alt:    #f2f6f9;
  --carte:       #ffffff;
  --texte:       #1b2b35;
  --texte-doux:  #55697a;
  --bordure:     #dde6ed;

  --ombre:       0 1px 2px rgba(16, 38, 54, .05), 0 10px 30px rgba(16, 38, 54, .07);
  --ombre-forte: 0 2px 4px rgba(16, 38, 54, .06), 0 18px 45px rgba(16, 38, 54, .12);
  --rayon:       18px;
  --rayon-petit: 12px;
  --largeur:     1120px;
  --gouttiere:   20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent:      #7ed0e4;
    --accent-vif:  #a8e2f0;
    --fond:        #10191f;
    --fond-alt:    #16222a;
    --carte:       #1a2832;
    --texte:       #e8eef2;
    --texte-doux:  #a9bcc8;
    --bordure:     #294050;
    --ombre:       0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    --ombre-forte: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 45px rgba(0, 0, 0, .45);
  }
}

/* ------------------------------ socle -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: "Montserrat", "Lato", sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); }
a:hover { color: var(--accent-vif); }

img, svg, iframe { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}
.conteneur--etroit { max-width: 720px; }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-vif);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--rayon-petit) 0;
}
.saut-contenu:focus { left: 0; color: #fff; }

/* ------------------------------ boutons ------------------------------ */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.bouton:hover { background: var(--accent-vif); color: #fff; transform: translateY(-1px); }
.bouton:active { transform: none; }
.bouton--compact { padding: 9px 18px; font-size: .95rem; }
.bouton--clair { background: #fff; color: #0f5567; }
.bouton--clair:hover { background: #eaf6fa; color: #0b4351; }
.bouton--fantome { background: transparent; border-color: rgba(255, 255, 255, .75); color: #fff; }
.bouton--fantome:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.ico { width: 20px; height: 20px; fill: currentColor; flex: none; }

.lien-fleche {
  display: inline-block;
  margin-top: 4px;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.lien-fleche:hover { border-bottom-color: transparent; }

/* ------------------------------ en-tête ------------------------------ */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bordure);
}
@supports not (backdrop-filter: blur(1px)) {
  .entete { background: var(--fond); }
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.marque { text-decoration: none; color: inherit; line-height: 1.25; }
.marque__nom {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.marque__role {
  display: block;
  font-size: .8rem;
  color: var(--texte-doux);
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  text-decoration: none;
  color: var(--texte);
  font-size: .98rem;
}
.nav a:hover { color: var(--accent); }
.nav .bouton { color: #fff; }

.burger {
  display: none;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: .95rem;
  color: var(--texte);
  cursor: pointer;
}
.burger__trait {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  display: block;
}
.burger__trait::before,
.burger__trait::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.burger__trait::before { top: -6px; }
.burger__trait::after { top: 6px; }

/* ------------------------------ héros -------------------------------- */
.heros {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 11vw, 128px) 0 clamp(96px, 13vw, 150px);
  color: #fff;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 6% -12%, rgba(217, 242, 177, .40) 0%, rgba(217, 242, 177, 0) 60%),
    radial-gradient(760px 460px at 82% 4%, rgba(145, 210, 188, .40) 0%, rgba(145, 210, 188, 0) 62%),
    linear-gradient(135deg, var(--turquoise) 0%, var(--bleu) 52%, var(--bleu-nuit) 100%);
}
/* Voile sombre : sans lui, le texte blanc passe sous le seuil de lisibilité
   sur les zones claires du dégradé. */
.heros::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 30, 48, .48) 0%, rgba(8, 30, 48, .54) 100%);
}

.heros__surtitre {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  color: rgba(255, 255, 255, .92);
}
.heros__titre {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  margin: 0 0 18px;
  text-shadow: 0 2px 20px rgba(6, 26, 42, .28);
}
.heros__accroche {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 300;
  max-width: 42ch;
  margin: 0 auto 32px;
  color: #fff;
}
.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.heros__vague {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  z-index: -1;
}
.heros__vague svg { display: block; width: 100%; height: clamp(40px, 7vw, 90px); }
.heros__vague path { fill: var(--fond); }

/* ------------------------------ sections ----------------------------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
/* Sans cela, un lien d'ancre amene le titre de section juste derriere
   l'en-tete collant, qui le masque. */
.section[id], [id="haut"] { scroll-margin-top: 88px; }
.section--alt { background: var(--fond-alt); }

.section__titre {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  text-align: center;
  margin-bottom: 14px;
}
.section__chapo {
  text-align: center;
  color: var(--texte-doux);
  max-width: 58ch;
  margin: 0 auto 44px;
}

/* ------------------------------ cartes ------------------------------- */
.cartes {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 32px 28px;
  box-shadow: var(--ombre);
  transition: transform .2s, box-shadow .2s;
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.carte__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--turquoise), var(--bleu));
}
.carte__ico svg { width: 26px; height: 26px; fill: #fff; }
.carte__titre { font-size: 1.15rem; margin-bottom: .4em; }
.carte__texte { color: var(--texte-doux); margin-bottom: .8em; }

/* ------------------------------ plan --------------------------------- */
.carte-geo { margin: 0; }
.carte-geo__cadre {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-forte);
  border: 1px solid var(--bordure);
  aspect-ratio: 16 / 9;
  background: var(--fond-alt);
}
@supports not (aspect-ratio: 1) {
  .carte-geo__cadre { height: 420px; }
}
.carte-geo__plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.carte-geo__voile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.carte-geo__pastille {
  margin-top: 14px;
  background: rgba(12, 32, 48, .78);
  color: #fff;
  font-size: .85rem;
  padding: 7px 16px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.carte-geo__voile:hover .carte-geo__pastille { background: rgba(12, 32, 48, .92); }

.carte-geo__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 18px;
  color: var(--texte-doux);
}
.carte-geo__legende strong { color: var(--texte); }

/* ------------------------------ formulaire --------------------------- */
.formulaire {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--ombre);
}
.champ { margin-bottom: 22px; }
.champ label {
  display: block;
  margin-bottom: 8px;
  font-size: .95rem;
  color: var(--texte);
}
.requis { color: #c0392b; }
@media (prefers-color-scheme: dark) { .requis { color: #ff9b8f; } }
.facultatif { color: var(--texte-doux); font-size: .88rem; }

.champ input,
.champ textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--fond);
  color: var(--texte);
  /* 16px minimum : en dessous, iOS zoome tout seul dès qu'on touche un champ */
  font: inherit;
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 150px; }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.champ input::placeholder,
.champ textarea::placeholder { color: var(--texte-doux); }

.champ--erreur input,
.champ--erreur textarea { border-color: #c0392b; }
.champ__erreur { margin: 8px 0 0; font-size: .9rem; color: #c0392b; }
@media (prefers-color-scheme: dark) {
  .champ--erreur input, .champ--erreur textarea { border-color: #ff9b8f; }
  .champ__erreur { color: #ff9b8f; }
}

.formulaire .bouton { width: 100%; margin-top: 4px; }
.formulaire__note {
  margin-top: 16px;
  font-size: .88rem;
  color: var(--texte-doux);
}

/* Piège à robots : masqué à l'œil ET au lecteur d'écran, mais rempli par
   les automates qui remplissent tous les champs d'un formulaire. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.annonce {
  border-radius: var(--rayon-petit);
  padding: 16px 20px;
  margin-bottom: 28px;
  border: 1px solid;
}
.annonce--ok {
  background: #e7f6ee;
  border-color: #b6e2c9;
  color: #14532d;
}
.annonce--erreur {
  background: #fdecea;
  border-color: #f5c6c0;
  color: #8c2318;
}
.annonce--ok a, .annonce--erreur a { color: inherit; }
@media (prefers-color-scheme: dark) {
  .annonce--ok { background: #123326; border-color: #205e42; color: #b7ecd0; }
  .annonce--erreur { background: #3a1a17; border-color: #6d2f28; color: #ffc4bc; }
}

/* ------------------------------ pied --------------------------------- */
.pied {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 48px 0;
  color: var(--texte-doux);
  font-size: .95rem;
}
.pied__interieur {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pied p { margin: 0 0 4px; }
.pied__nom {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--texte);
  font-size: 1.05rem;
}

/* ------------------------------ petits écrans ------------------------ */
@media (max-width: 820px) {
  .burger { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gouttiere) 18px;
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre);
  }
  .nav--ouvert { display: flex; }
  .nav a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--bordure);
  }
  .nav .bouton {
    margin-top: 14px;
    border-bottom: 0;
    justify-content: center;
  }

  .entete__interieur { position: relative; }
  .heros__actions .bouton { width: 100%; }
  .carte-geo__cadre { aspect-ratio: 4 / 3; }
}

@media (max-width: 420px) {
  body { font-size: 17px; }
  .carte { padding: 26px 22px; }
}

/* Repli sans JavaScript : le plan interactif a besoin de JS pour être
   dimensionné correctement, on propose alors un lien vers la carte. */
.carte-geo__repli {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--fond-alt);
  color: var(--accent);
}