/* ============================================================
   KL FORMATION · Design system
   Un seul endroit pour changer les couleurs de marque :
   ajustez les variables ci-dessous (le vert exact du logo
   final se règle ici, rien d'autre à toucher).
   ============================================================ */

:root {
  --marine: #0E2647;
  --marine-2: #16345E;      /* marine éclairci (survols, cartes sur fond marine) */
  --creme: #FAF6EE;         /* fond principal, lumineux et chaleureux */
  --blanc: #FFFFFF;
  --vert: #7CB92E;          /* vert pomme, à recaler sur le logo final */
  --vert-fonce: #55901C;    /* survols, contrastes renforcés */
  --vert-encre: #3F6E13;    /* petits textes verts sur fond clair (lisibilité) */
  --ardoise: #33424F;       /* texte courant */
  --ligne: #E7E0D0;         /* bordures discrètes sur fond crème */
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background-color: var(--creme);
  color: var(--ardoise);
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display {
  font-family: "Bricolage Grotesque", "Public Sans", sans-serif;
  color: var(--marine);
  letter-spacing: -0.01em;
}

::selection { background: var(--vert); color: var(--marine); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--marine); color: var(--creme);
  padding: .75rem 1.25rem; z-index: 100; border-radius: 0 0 .75rem 0;
}
.skip-link:focus { left: 0; }

/* ---------- Fonds & textures ---------- */

.bg-pattern {
  background-color: var(--marine);
  background-image: url("../img/pattern.svg");
  background-size: 260px 260px;
}
/* Textes creme translucides remontes en opacite sur fond fonce, pour la lisibilite */
.bg-pattern .text-creme\/70, .bg-marine .text-creme\/70 { color: rgba(250,246,238,.9) !important; }
.bg-pattern .text-creme\/75, .bg-marine .text-creme\/75 { color: rgba(250,246,238,.92) !important; }
.bg-pattern .text-creme\/80, .bg-marine .text-creme\/80 { color: rgba(250,246,238,.95) !important; }
.bg-pattern .text-creme\/85, .bg-marine .text-creme\/85 { color: rgba(250,246,238,.97) !important; }
/* Securite : fallback des classes de couleur de texte si Tailwind ne charge pas,
   pour que titres et chiffres restent lisibles sur fond marine. */
.bg-pattern .text-creme, .bg-marine .text-creme { color: var(--creme); }
.text-vert { color: var(--vert); }
.bg-pattern .text-marine, .bg-marine .text-marine { color: var(--creme); }

.hand { font-family: "Caveat", cursive; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600; border-radius: .9rem; padding: .95rem 1.6rem;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }

.btn-vert { background: var(--vert); color: var(--marine); }
.btn-vert:hover { background: var(--vert-fonce); color: var(--creme); }

.btn-marine { background: var(--marine); color: var(--creme); }
.btn-marine:hover { background: var(--marine-2); }

.btn-ghost { border: 1.5px solid rgba(14, 38, 71, .25); color: var(--marine); background: transparent; }
.btn-ghost:hover { border-color: var(--marine); background: var(--blanc); }

.btn-ghost-light { border: 1.5px solid rgba(250, 246, 238, .4); color: var(--creme); background: transparent; }
.btn-ghost-light:hover { border-color: var(--creme); background: rgba(250, 246, 238, .08); }

/* ---------- Navigation ---------- */

.navlink {
  position: relative; font-weight: 600; color: var(--marine);
  padding: .35rem 0;
}
.navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2.5px;
  background: var(--vert); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }

.dd-panel {
  visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dd.open .dd-panel,
.dd:hover .dd-panel,
.dd:focus-within .dd-panel { visibility: visible; opacity: 1; transform: translateY(0); }
.dd.open .dd-chevron, .dd:hover .dd-chevron { transform: rotate(180deg); }
.dd-chevron { transition: transform .18s ease; }

#site-header { transition: box-shadow .25s ease; }
#site-header.scrolled { box-shadow: 0 6px 24px -12px rgba(14, 38, 71, .25); }

/* ---------- Cartes ---------- */

.card {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 1.15rem;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(14, 38, 71, .28);
  border-color: rgba(124, 185, 46, .55);
}

/* Coin coché : clin d'œil au logo (le L qui coche une case) */
.cornerchk {
  position: absolute; top: 0; right: 0; width: 34px; height: 34px;
  background: var(--vert); border-radius: 0 1.1rem 0 .9rem;
  display: flex; align-items: center; justify-content: center;
}
.cornerchk svg { width: 16px; height: 16px; }

/* ---------- Signature : la checklist qui se coche ---------- */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist > li { display: flex; gap: 1rem; align-items: flex-start; }

.tick {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: .15rem;
  border: 2px solid var(--ligne); border-radius: .5rem; background: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .3s ease, border-color .3s ease;
}
.tick svg { width: 15px; height: 15px; display: block; }
.tickpath {
  stroke: #fff; stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset .35s ease;
}

/* Pilotage par le scroll (option C) : chaque item se coche individuellement
   quand le scroll atteint sa position (classe .ticked posee par main.js).
   En descendant les items se remplissent 1->N, en remontant ils se vident
   N->1, en temps reel et lie au scroll. */
.checklist > li.ticked .tick { background: var(--vert); border-color: var(--vert); }
.checklist > li.ticked .tickpath { stroke-dashoffset: 0; }

/* Repli si JS absent ou animations reduites : tout affiche coche */
.no-js .checklist > li .tick,
.reduce-motion .checklist > li .tick { background: var(--vert); border-color: var(--vert); }
.no-js .checklist > li .tickpath,
.reduce-motion .checklist > li .tickpath { stroke-dashoffset: 0; }

/* Timeline verticale (déroulé des prestations) */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; left: 12px; top: 14px; bottom: 14px;
  width: 2px; background: var(--ligne); border-radius: 2px;
}
.steps > li { position: relative; padding-left: 0; }
.steps .tick { position: relative; z-index: 1; }

/* ---------- Souligné manuscrit (héro) ---------- */

.uwrap { position: relative; white-space: nowrap; }
.ustroke {
  position: absolute; left: -2%; right: -2%; bottom: -0.18em; width: 104%; height: .42em;
  overflow: visible; pointer-events: none;
}
.ustroke path {
  stroke: var(--vert); stroke-width: 7; fill: none; stroke-linecap: round;
  stroke-dasharray: 230; stroke-dashoffset: 230;
  transition: stroke-dashoffset 1s ease .45s;
}
.on .ustroke path, .ustroke.on path { stroke-dashoffset: 0; }

/* ---------- Apparition au scroll (une seule fois, jamais en boucle) ---------- */

html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.on { opacity: 1; transform: none; }
html.js .reveal-d1.on { transition-delay: .12s; }
html.js .reveal-d2.on { transition-delay: .24s; }
html.js .reveal-d3.on { transition-delay: .36s; }

/* ---------- Photo en arche + tampon ---------- */

.arch {
  border-radius: 999px 999px 26px 26px; overflow: hidden;
  border: 4px solid var(--blanc);
  box-shadow: 0 24px 60px -24px rgba(14, 38, 71, .45);
  position: relative;
}
.arch img { display: block; width: 100%; height: 100%; object-fit: cover; }

.arch-ring {
  position: absolute; inset: 0; transform: translate(16px, 16px);
  border: 3px solid var(--vert); border-radius: 999px 999px 26px 26px;
  pointer-events: none;
}

.stamp { transform: rotate(-8deg); filter: drop-shadow(0 10px 20px rgba(14, 38, 71, .25)); }

/* ---------- Accordéons (Conseils & FAQ) ---------- */

details.faq { border-bottom: 1px solid var(--ligne); }
details.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 0; font-weight: 700; color: var(--marine);
  font-family: "Bricolage Grotesque", sans-serif; font-size: 1.06rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .tick { margin-top: .1rem; }
details.faq[open] summary .tick { background: var(--vert); border-color: var(--vert); }
details.faq[open] summary .tickpath { stroke-dashoffset: 0; }
details.faq .faq-plus { margin-left: auto; flex: 0 0 auto; color: var(--vert-encre); transition: transform .25s ease; margin-top: .2rem; }
details.faq[open] .faq-plus { transform: rotate(45deg); }
details.faq .faq-body { padding: 0 0 1.4rem 2.6rem; }
details.faq .faq-body p + p, details.faq .faq-body p + ul, details.faq .faq-body ul + p { margin-top: .7rem; }
details.faq .faq-body ul { list-style: none; padding: 0; }
details.faq .faq-body ul li { position: relative; padding-left: 1.35rem; margin-top: .4rem; }
details.faq .faq-body ul li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 9px; height: 9px;
  background: var(--vert); border-radius: 2.5px;
}
details.faq .faq-body a { color: var(--vert-encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
details.faq .faq-body a:hover { color: var(--vert-fonce); }

/* ---------- Avis (notes en coches, pas en étoiles) ---------- */

.rate { display: inline-flex; gap: .3rem; }
.rate span {
  width: 15px; height: 15px; background: var(--vert); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rate svg { width: 9px; height: 9px; }

/* ---------- Formulaire ---------- */

.field label { display: block; font-weight: 600; color: var(--marine); font-size: .92rem; margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--blanc); border: 1.5px solid var(--ligne);
  border-radius: .8rem; padding: .85rem 1rem; color: var(--ardoise);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--vert);
  box-shadow: 0 0 0 4px rgba(124, 185, 46, .18);
}
.field ::placeholder { color: #9AA6B0; }
.hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

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

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--marine); border-top: 1px solid rgba(250, 246, 238, .12);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobilebar a {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .65rem .25rem .7rem; color: var(--creme); font-size: .72rem; font-weight: 600;
}
.mobilebar a + a { border-left: 1px solid rgba(250, 246, 238, .12); }
.mobilebar svg { width: 19px; height: 19px; }
.mobilebar .mb-cta { background: var(--vert); color: var(--marine); }
@media (min-width: 1024px) { .mobilebar { display: none; } }
@media (max-width: 1023.98px) { body { padding-bottom: 64px; } }

/* ---------- Drawer mobile (independant de Tailwind) ---------- */
/* Le bouton burger : visible seulement sous 1024px */
.nav-burger { display: none; }
@media (max-width: 1023.98px) { .nav-burger { display: inline-flex; } }

/* Overlay sombre : cache par defaut, affiche via .show */
.nav-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(14,38,71,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nav-overlay.show { opacity: 1; pointer-events: auto; }

/* Panneau lateral : toujours monte, pousse hors ecran par defaut */
.nav-drawer {
  position: fixed; top: 0; right: 0; z-index: 61;
  height: 100vh; height: 100dvh; width: min(84vw, 340px);
  background: var(--creme);
  box-shadow: -18px 0 40px -18px rgba(14,38,71,.45);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.nav-drawer.show { transform: translateX(0); }
/* Au-dessus de 1024px, le drawer et l'overlay n'existent pas */
@media (min-width: 1024px) { .nav-drawer, .nav-overlay { display: none !important; } }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--ligne);
  flex-shrink: 0;
}
.nav-drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: .7rem;
  color: var(--marine); background: transparent;
  border: 1px solid var(--ligne);
  transition: background .18s ease, transform .18s ease;
}
.nav-drawer-close:hover { background: rgba(14,38,71,.05); }
.nav-drawer-close:active { transform: scale(.94); }

.nav-drawer-body {
  display: flex; flex-direction: column;
  padding: 1rem 1.35rem 1.6rem;
  overflow-y: auto; flex: 1;
}

/* En-tete du drawer */
.nav-drawer-brand { display: flex; align-items: center; gap: .65rem; }
.nav-drawer-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .6rem;
  background: var(--marine); flex-shrink: 0;
}
.nav-drawer-logo svg { width: 1.25rem; height: 1.25rem; }
.nav-drawer-name {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800; color: var(--marine); letter-spacing: .04em;
}

/* Liens du menu */
.nav-drawer-body .nav-link {
  padding: .65rem 0; font-weight: 600; color: var(--marine);
}
.nav-drawer-body .nav-link-mt { margin-top: .25rem; }

/* Sous-menu deroulant "Prestations" */
.nav-group { display: flex; flex-direction: column; }
.nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: .65rem 0; background: none; border: 0;
  font-family: inherit; font-size: inherit; font-weight: 600;
  color: var(--marine); cursor: pointer; text-align: left;
}
.nav-group-chevron { transition: transform .3s ease; flex-shrink: 0; color: var(--vert); }
.nav-group-toggle[aria-expanded="true"] .nav-group-chevron { transform: rotate(180deg); }
/* Panneau repliable : hauteur animee via grid-template-rows */
.nav-group-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.nav-group-panel.open { grid-template-rows: 1fr; }
.nav-group-panel-inner { overflow: hidden; display: flex; flex-direction: column; }

.nav-drawer-body .nav-sublink {
  padding: .5rem 0 .5rem 1rem; font-weight: 500; color: var(--marine);
  border-left: 2px solid var(--vert);
}
.nav-drawer-body .nav-drawer-cta { margin-top: .85rem; }
.nav-drawer-body .nav-drawer-cta2 { margin-top: .6rem; }

/* Fade-in en cascade des elements du drawer a l'ouverture.
   Etat de depart : invisible + legerement decale ; anime quand .show est pose. */
.nav-drawer .nav-fade {
  opacity: 0; transform: translateX(14px);
  transition: opacity .4s ease, transform .4s ease;
}
.nav-drawer.show .nav-fade { opacity: 1; transform: none; }
.nav-drawer.show .nav-fade:nth-child(1) { transition-delay: .08s; }
.nav-drawer.show .nav-fade:nth-child(2) { transition-delay: .15s; }
.nav-drawer.show .nav-fade:nth-child(3) { transition-delay: .22s; }
.nav-drawer.show .nav-fade:nth-child(4) { transition-delay: .29s; }
.nav-drawer.show .nav-fade:nth-child(5) { transition-delay: .36s; }
.nav-drawer.show .nav-fade:nth-child(6) { transition-delay: .43s; }

body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-overlay, .nav-drawer { transition: none; }
  .nav-drawer .nav-fade { opacity: 1; transform: none; transition: none; }
  .nav-group-panel { transition: none; }
  .nav-group-chevron { transition: none; }
}

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

/* Footer : separation douce et interne (trait fin translucide), pas de ligne franche */
footer.bg-pattern { position: relative; }
footer.bg-pattern > div { border-top: 1px solid rgba(250,246,238,.14); }

.flink { color: rgba(250, 246, 238, .78); transition: color .15s ease; }
.flink:hover { color: var(--vert); }

/* ---------- Divers ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  text-transform: uppercase; letter-spacing: .17em; font-size: .78rem; font-weight: 700;
  color: var(--vert-encre);
}
.eyebrow::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--vert);
  clip-path: none;
}
/* Variante pour fond marine : texte clair, meme carre vert */
.eyebrow-light {
  display: inline-flex; align-items: center; gap: .55rem;
  text-transform: uppercase; letter-spacing: .17em; font-size: .78rem; font-weight: 700;
  color: var(--creme);
}
.eyebrow-light::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--vert);
}

.prose-site p + p { margin-top: .85rem; }

.placeholder-note {
  border: 1.5px dashed rgba(124, 185, 46, .8); background: rgba(124, 185, 46, .07);
  color: var(--vert-encre); border-radius: .9rem; padding: .9rem 1.1rem; font-size: .93rem;
}

/* ---------- Accessibilité : mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .tickpath { stroke-dashoffset: 0; }
  .checklist > li .tick { background: var(--vert); border-color: var(--vert); }
  .ustroke path { stroke-dashoffset: 0; }
}

/* Etat actif du bouton Prestations quand on est sur une page prestation */
.navlink-current::after { transform: scaleX(1); }

/* Grande coche centree (page merci) */
.checklist li.justify-center { justify-content: center; }
.checklist li.justify-center .tick { width: 64px; height: 64px; border-radius: 1.1rem; }
.checklist li.justify-center .tick svg { width: 36px; height: 36px; }