/* ============================================================
   KOALA KIDS — Refonte creche.koalakids.fr
   Design system conforme à la charte graphique Koala Kids :
   - Violet #4D458F (dominante), Orange #EC660D (dominante),
     Jaune #F5E659 (usage restreint : accents)
   - Jamais de texte noir (texte violet sur fond clair,
     blanc sur fond coloré, orange pour mise en évidence)
   - Police Duera obligatoire sur les supports : licence webfont
     acquise (01/09/2026, assets/fonts/duera-*.woff2) — seuls les
     graisses Medium (500) et Bold (700) sont fournies ; « Baloo 2 »
     reste en repli pour tout poids intermédiaire/hors plage et si
     les fichiers ne chargent pas (police système avant, indisponible)
   - Formes rondes / ovales privilégiées
   ============================================================ */

@font-face {
  font-family: 'Duera';
  src: url('../fonts/duera-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Duera';
  src: url('../fonts/duera-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --violet: #4D458F;
  --violet-dark: #3B3572;
  --violet-tint: #F1F0F8;
  --orange: #EC660D;
  --orange-dark: #C95508;
  --orange-tint: #FDEFE4;
  --jaune: #F5E659;
  --blanc: #FFFFFF;
  --creme: #FFFBF5;
  --radius: 22px;
  --radius-pill: 999px;
  --shadow: 0 8px 28px rgba(77, 69, 143, 0.14);
  --font: 'Duera', 'Baloo 2', 'Trebuchet MS', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--violet);
  background: var(--blanc);
  line-height: 1.6;
  font-size: 17px;
}

/* height:auto préserve le ratio malgré les attributs width/height (anti-layout-shift) */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Titres ---------- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; color: var(--violet); }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 0.6em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.7em; }
h3 { font-size: 1.25rem; margin-bottom: 0.5em; }
.accent { color: var(--orange); }
.on-dark { color: var(--blanc); }

.section { padding: 72px 0; }
.section-alt { background: var(--violet-tint); }
.section-orange-tint { background: var(--orange-tint); }
.section-violet { background: var(--violet); color: var(--blanc); }
.section-violet h2, .section-violet h3, .section-violet p { color: var(--blanc); }

.lead { font-size: 1.15rem; }
p + p { margin-top: 0.8em; }

/* ---------- Boutons (pilules, formes rondes charte) ---------- */
.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none !important;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-orange { background: var(--orange); color: var(--blanc) !important; }
.btn-orange:hover { background: var(--orange-dark); }
.btn-violet { background: var(--violet); color: var(--blanc) !important; }
.btn-violet:hover { background: var(--violet-dark); }
.btn-blanc { background: var(--blanc); color: var(--violet) !important; }
.btn-outline {
  background: transparent; color: var(--violet) !important;
  border: 3px solid var(--violet);
}
.btn-outline:hover { background: var(--violet); color: var(--blanc) !important; }
.btn-lg { padding: 16px 38px; font-size: 1.1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--blanc);
  box-shadow: 0 2px 14px rgba(77, 69, 143, 0.1);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; max-width: 1280px; margin: 0 auto; gap: 16px;
}
.logo-link img { height: 54px; width: auto; }
.baseline-header { font-size: 0.72rem; font-weight: 600; color: var(--violet); margin-top: 2px; }

.main-nav ul { display: flex; list-style: none; gap: 4px; align-items: center; flex-wrap: wrap; }
.main-nav a {
  display: block; padding: 9px 14px; border-radius: var(--radius-pill);
  color: var(--violet); font-weight: 600; font-size: 0.95rem;
  text-decoration: none !important;
}
.main-nav a:hover { background: var(--violet-tint); }
.main-nav a.active { background: var(--violet); color: var(--blanc); }
.main-nav a.nav-cta { background: var(--orange); color: var(--blanc); margin-left: 6px; }
.main-nav a.nav-cta:hover { background: var(--orange-dark); }
.main-nav ul { flex-wrap: nowrap; }   /* la nav tient sur une seule ligne */

/* ---------- Sous-menus déroulants ---------- */
.main-nav .nav-parent {                      /* déclencheur sans page propre */
  display: block; padding: 9px 14px; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-pill); font-family: var(--font);
  color: var(--violet); font-weight: 600; font-size: 0.95rem; white-space: nowrap;
}
.main-nav .nav-parent:hover { background: var(--violet-tint); }
.main-nav .nav-parent.active { background: var(--violet); color: var(--blanc); }
.main-nav .nav-caret { font-size: 0.7em; margin-left: 2px; }
.main-nav .has-sub { position: relative; }
.main-nav .submenu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 1100;
  min-width: 250px; flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--blanc); border-radius: 18px; box-shadow: var(--shadow);
  border: 2px solid var(--violet-tint); padding: 8px;
}
.main-nav .has-sub:hover > .submenu,
.main-nav .has-sub:focus-within > .submenu,
.main-nav .has-sub.open > .submenu { display: flex; }
.main-nav .submenu a { white-space: nowrap; font-size: 0.92rem; }
/* Séparateur + accès back-office (outil affilié) dans un sous-menu */
.main-nav .submenu .kk-sub-sep { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--violet-tint); }
.main-nav .submenu a.kk-sub-tool { background: var(--violet-tint); color: var(--violet); font-weight: 700; text-align: center; }
.main-nav .submenu a.kk-sub-tool:hover { background: var(--violet); color: var(--blanc); }

/* Icônes de marque en ligne (assets/icons/*.svg) — remplacent les emojis.
   Bi-colore violet+orange, pensées pour fond clair. Taille calée sur le texte. */
.kk-ico { height: 1.15em; width: auto; vertical-align: -0.18em; display: inline-block; }
h1 .kk-ico, h2 .kk-ico { height: 1em; vertical-align: -0.12em; }
.kk-ico + * , .kk-ico { margin-right: .05em; }

/* Back-office — dépôt de photos de crèche (aperçus) */
.kk-photos-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.kk-photo-thumb { position: relative; width: 110px; height: 84px; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(77,69,143,.18); }
.kk-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kk-photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; cursor: pointer; background: rgba(77,69,143,.85); color: #fff; font-size: 12px; line-height: 22px; text-align: center; padding: 0; }
.kk-photo-del:hover { background: var(--orange); }

/* Fiche crèche — cartes « La crèche recrute » */
#f-offres .f-offre { padding: 10px 0; line-height: 1.5; }
#f-offres .f-offre + .f-offre { border-top: 1px solid var(--violet-tint); margin-top: 6px; }
#f-offres .f-offre a { font-weight: 700; color: var(--orange); }

.burger {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 1.9rem; color: var(--violet); line-height: 1;
}

@media (max-width: 1023px) {
  .burger { display: block; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blanc); box-shadow: var(--shadow); padding: 12px 24px 20px; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; flex-wrap: wrap; }
  .main-nav a { padding: 12px 16px; }
  /* Sous-menus : dépliés dans le flux, jamais en surcouche */
  .main-nav .nav-parent { width: 100%; text-align: left; padding: 12px 16px; }
  .main-nav .submenu {
    position: static; min-width: 0; box-shadow: none; border: none;
    border-left: 3px solid var(--violet-tint); border-radius: 0;
    margin: 0 0 6px 16px; padding: 0;
  }
  .main-nav .submenu a { white-space: normal; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--violet);
  color: var(--blanc);
  padding: 80px 0 100px;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%;
  background: var(--orange); opacity: 0.92; z-index: 0;
}
.hero::before { width: 420px; height: 420px; top: -180px; right: -120px; }
.hero::after { width: 260px; height: 260px; bottom: -130px; left: -90px; opacity: 0.55; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.hero h1 { color: var(--blanc); }
.hero .baseline {
  display: inline-block; background: var(--orange); color: var(--blanc);
  font-weight: 700; padding: 8px 22px; border-radius: var(--radius-pill);
  margin-bottom: 18px; transform: rotate(-2deg);
}
.hero p { color: var(--blanc); font-size: 1.15rem; }
.hero-illu img { width: 100%; max-width: 420px; margin: 0 auto; }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-illu { order: -1; }
  .hero-illu img { max-width: 260px; }
}
/* Téléphone : placée au-dessus du titre, l'illustration occupait presque
   tout le premier écran — le titre n'apparaissait qu'après défilement. */
@media (max-width: 640px) {
  .hero { padding: 40px 0 72px; }
  .hero-inner { gap: 24px; }
  .hero-illu img { max-width: 170px; }
}

/* ---------- Barre de recherche crèche ---------- */
.search-bar {
  display: flex; gap: 10px; background: var(--blanc);
  border-radius: var(--radius-pill); padding: 8px;
  box-shadow: var(--shadow); margin-top: 28px; max-width: 560px;
}
.search-bar input {
  flex: 1; border: none; outline: none; font-family: var(--font);
  font-size: 1.05rem; padding: 8px 18px; color: var(--violet);
  background: transparent; min-width: 0;
}
.search-bar input::placeholder { color: #8C86B8; }

/* ---------- Cartes / grilles ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* Items de grille : min-width:auto (défaut) empêche la colonne de rétrécir sous la
   largeur de contenu de l'enfant → débordement horizontal sur mobile. On l'autorise. */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

.card {
  background: var(--blanc); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.card-tint { background: var(--violet-tint); box-shadow: none; }

/* Cartes de conversion (4 entrées) */
.conv-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--blanc); border-radius: var(--radius); padding: 30px;
  box-shadow: var(--shadow); border-top: 8px solid var(--orange);
  transition: transform 0.15s ease;
}
.conv-card:hover { transform: translateY(-4px); }
.conv-card .pict { font-size: 2rem; }
.conv-card img.pict-img { height: 74px; width: auto; }
.conv-card .btn { margin-top: auto; }

/* ---------- Chiffres clés ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.stat {
  background: var(--blanc); border-radius: 50%;
  width: 190px; height: 190px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  box-shadow: var(--shadow); padding: 18px;
}
.stat .num { font-size: 2.2rem; font-weight: 700; color: var(--orange); line-height: 1.1; }
.stat .lbl { font-size: 0.85rem; font-weight: 600; color: var(--violet); }

/* ---------- Fiches crèches ---------- */
.creche-card {
  background: var(--blanc); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.creche-card h3 { margin-bottom: 0; }
.badge {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.badge-ouverte { background: var(--violet-tint); color: var(--violet); }
.badge-ouverture { background: var(--orange-tint); color: var(--orange); }
.badge-places { background: var(--orange); color: var(--blanc); }
.badge-jaune { background: var(--jaune); color: var(--violet); }
.creche-meta { font-size: 0.92rem; }
.creche-card .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.creche-card .btn { padding: 9px 20px; font-size: 0.9rem; }

/* Filtres */
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; align-items: center; }
.filters select, .filters input[type="text"] {
  font-family: var(--font); font-size: 0.95rem; color: var(--violet);
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: 2px solid var(--violet); background: var(--blanc); outline: none;
}
#map { height: 440px; border-radius: var(--radius); box-shadow: var(--shadow); z-index: 1; }

/* ---------- Formulaires ---------- */
/* align-items: start (pas le stretch par défaut) — sans ça, un enfant qui
   grandit APRÈS la mise en page initiale (ex. l'éditeur Quill de l'onglet
   Actualités, qui grossit en JS une fois son contenu chargé) peut déborder
   sur la ligne de grille suivante au lieu de la repousser, recouvrant
   visuellement les éléments d'après (boutons "Enregistrer"/"Annuler" repérés
   cachés sous l'éditeur le 01/09/2026). Un seul élément par ligne dans ce
   formulaire (grille à une colonne) : aucun changement visuel ailleurs. */
form.kk-form { display: grid; gap: 18px; align-items: start; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.kk-form label { font-weight: 700; font-size: 0.95rem; display: block; margin-bottom: 6px; }
.kk-form input, .kk-form select, .kk-form textarea {
  width: 100%; font-family: var(--font); font-size: 1rem; color: var(--violet);
  padding: 12px 18px; border-radius: 14px; border: 2px solid #C9C5E4;
  background: var(--blanc); outline: none;
}
.kk-form input:focus, .kk-form select:focus, .kk-form textarea:focus { border-color: var(--orange); }
.kk-form .hint { font-size: 0.82rem; color: #7A74A8; font-weight: 400; }
.kk-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; font-weight: 400; }
.kk-form .consent input { width: auto; margin-top: 4px; }

/* Tunnel de pré-inscription */
.steps-bar { display: flex; gap: 8px; margin-bottom: 34px; }
.steps-bar .step {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: var(--radius-pill);
  background: var(--violet-tint); color: var(--violet); font-weight: 700; font-size: 0.85rem;
}
.steps-bar .step.current { background: var(--orange); color: var(--blanc); }
.steps-bar .step.done { background: var(--violet); color: var(--blanc); }
.form-step { display: none; }
.form-step.visible { display: block; }
.step-nav { display: flex; justify-content: space-between; margin-top: 28px; }

/* ---------- Simulateurs ---------- */
.simulateur {
  background: var(--violet); color: var(--blanc);
  border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow);
}
.simulateur h3, .simulateur label { color: var(--blanc); }
.simulateur input[type="range"] { width: 100%; accent-color: var(--orange); }
.simulateur .result {
  background: var(--blanc); color: var(--violet); border-radius: var(--radius);
  padding: 22px; margin-top: 20px; text-align: center;
}
.simulateur .result .big { font-size: 2rem; font-weight: 700; color: var(--orange); }
.sim-val { font-weight: 700; color: var(--jaune); }

/* ---------- Tableaux ---------- */
.kk-table { width: 100%; table-layout: fixed; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.kk-table th { background: var(--violet); color: var(--blanc); padding: 14px 18px; text-align: left; }
.kk-table td { padding: 13px 18px; border-bottom: 2px solid var(--violet-tint); overflow-wrap: anywhere; }
.kk-table tr:nth-child(even) td { background: var(--creme); }

/* ---------- Listes à puces charte ---------- */
.kk-list { list-style: none; }
.kk-list li { padding-left: 28px; position: relative; margin-bottom: 10px; }
.kk-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--orange);
}

/* ---------- Bandeau baseline (charte) ---------- */
.bandeau { text-align: center; margin: 0 auto 30px; }
.bandeau .b1, .bandeau .b2 {
  display: inline-block; padding: 8px 26px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 1.15rem; border: 3px solid var(--blanc);
  box-shadow: var(--shadow);
}
.bandeau .b1 { background: var(--violet); color: var(--blanc); transform: rotate(-1.5deg); }
.bandeau .b2 { background: var(--orange); color: var(--blanc); transform: rotate(1.5deg) translateY(-6px); }

/* ---------- FAQ ---------- */
details.faq {
  background: var(--blanc); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 26px; margin-bottom: 14px;
}
details.faq summary { font-weight: 700; cursor: pointer; font-size: 1.05rem; }
details.faq[open] summary { color: var(--orange); }
details.faq p { margin-top: 10px; }

/* ---------- Actus ---------- */
.actu-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.actu-card .actu-img { height: 170px; background: var(--orange-tint); display: flex; align-items: center; justify-content: center; }
.actu-card .actu-img img { height: 130px; width: auto; }
.actu-card .actu-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.actu-card .date { font-size: 0.8rem; font-weight: 700; color: var(--orange); text-transform: uppercase; }

/* ---------- Footer ---------- */
.site-footer { background: var(--violet); color: var(--blanc); padding: 56px 0 24px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--jaune); font-size: 1rem; margin-bottom: 12px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--blanc); font-size: 0.93rem; }
.site-footer .logo-footer img { height: 60px; width: auto; margin-bottom: 14px; }
.footer-bottom {
  border-top: 2px solid rgba(255,255,255,0.2); margin-top: 40px; padding-top: 20px;
  font-size: 0.83rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-bottom a { color: var(--blanc); }

/* Newsletter (footer) */
.kk-news-form { display: flex; flex-direction: column; gap: 8px; }
.kk-news-form input[type="email"] {
  border: none; border-radius: var(--radius-pill); padding: 10px 16px;
  font-family: var(--font); font-size: 0.92rem; color: var(--violet); outline: none;
}
.kk-news-form .btn { padding: 9px 18px; font-size: 0.9rem; align-self: flex-start; }
.kk-news-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 0.76rem; font-weight: 400; }
.kk-news-consent input { width: auto; margin-top: 3px; }
.kk-news-consent a { color: var(--jaune); }

/* ---------- Divers ---------- */
.breadcrumb { font-size: 0.85rem; margin: 20px 0 0; }
.breadcrumb a { color: var(--violet); }
.page-head { padding: 56px 0 40px; background: var(--violet-tint); }
.notice {
  background: var(--jaune); color: var(--violet); border-radius: var(--radius);
  padding: 14px 22px; font-size: 0.9rem; font-weight: 600;
}
.center { text-align: center; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.mb-2 { margin-bottom: 24px; }
.success-box {
  background: var(--violet-tint); border-radius: var(--radius); padding: 40px;
  text-align: center; display: none;
}
.success-box.visible { display: block; }
.success-box .pict { font-size: 3rem; }

/* Bloc passerelle Kangourou Kids */
.cross-brand {
  display: flex; align-items: center; gap: 22px; background: var(--orange-tint);
  border-radius: var(--radius); padding: 26px 30px;
}
.cross-brand img { height: 84px; width: auto; }
@media (max-width: 640px) { .cross-brand { flex-direction: column; text-align: center; } }