/* HydroLooney - épuré éditorial, Inter, palette harmonisée sur le logo. */
@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700');

:root{
  --eau:#1d7e98;        /* eau, accent */
  --eau-d:#13404a;      /* navy profond (contour du logo) */
  --green:#5aa050;      /* vert du logo, secondaire */
  --ink:#15323b;        /* texte, navy chaud */
  --muted:#4b5a60;      /* texte secondaire, lisible */
  --bg:#f5f0e6;         /* crème (fond du logo) */
  --card:#ffffff;
  --line:#e4ddcc;
}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;}
h1,h2,h3,h4{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--ink);}
a{color:var(--eau);}
.hl-wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem;}

/* Header (clair, lisible) */
#header, header, .navbar{background:var(--bg) !important;}
.hl-brand{display:inline-flex !important;align-items:center;gap:.55rem;}
.hl-brand-icon{width:40px !important;height:40px !important;min-width:40px;border-radius:50%;object-fit:contain;flex:0 0 40px;}
.hl-brand-word{font-weight:700;font-size:1.15rem;color:var(--eau-d) !important;letter-spacing:-.01em;}
#header a, .navbar a{color:var(--ink) !important;font-weight:500;}
#header a:hover, .navbar a:hover{color:var(--eau) !important;}

/* Hero */
.hl-hero{text-align:center;padding:4rem 1.5rem 3.25rem;}
.hl-hero-logo{width:132px;height:132px;border-radius:50%;display:block;margin:0 auto 1.3rem;}
.hl-hero h1{font-size:3rem;margin:0 0 1rem;color:var(--eau-d);}
.hl-hero .hl-sub{font-size:1.22rem;color:var(--muted);max-width:48ch;margin:0 auto 2rem;}
.hl-btn{display:inline-block;padding:.72rem 1.5rem;border-radius:.4rem;text-decoration:none;font-weight:600;margin:.25rem;}
.hl-btn--p{background:var(--eau);color:#fff;}
.hl-btn--p:hover{background:var(--eau-d);}
.hl-btn--s{border:1.5px solid var(--eau);color:var(--eau);}
.hl-btn--s:hover{background:var(--eau);color:#fff;}

/* Pitch */
.hl-pitch{max-width:64ch;margin:0 auto;padding:.5rem 1.5rem 3rem;font-size:1.13rem;color:var(--ink);text-align:center;}

/* Sections */
.hl-section{padding:2.5rem 0;}
.hl-section > .hl-wrap > h2,.hl-section > h2{text-align:center;font-size:1.6rem;margin:0 0 1.8rem;}

/* Portes */
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media(max-width:760px){.hl-grid{grid-template-columns:1fr;} .hl-hero h1{font-size:2.2rem;}}
.hl-card{display:block;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--eau);border-radius:.6rem;padding:1.5rem;text-decoration:none;color:var(--ink);transition:border-color .15s, transform .15s, box-shadow .15s;}
.hl-card:hover{border-top-color:var(--green);transform:translateY(-2px);box-shadow:0 6px 18px rgba(19,64,74,.08);}
.hl-card h3{margin:.1rem 0 .4rem;font-size:1.15rem;color:var(--eau-d);}
.hl-card p{margin:0;color:var(--muted);font-size:.98rem;}

/* Glossaire teaser */
.hl-gloss{background:var(--eau-d);color:#fff;border-radius:.8rem;padding:2.6rem 1.5rem;text-align:center;}
.hl-gloss h2{color:#fff;margin:0 0 .4rem;}
.hl-gloss p{color:#e3eef0;margin:0 0 1.2rem;}
.hl-gloss form{margin:0;}
.hl-gloss input{padding:.7rem 1rem;width:min(420px,90%);border:0;border-radius:.4rem;font-size:1rem;background:#fff;color:#15323b;}
.hl-gloss input::placeholder{color:#5b6b71;opacity:1;}

/* Pied de site (override Quark) */
.hl-sitefoot{border-top:3px solid var(--green);background:var(--card);margin-top:3rem;padding:2.4rem 1.5rem;text-align:center;}
.hl-sitefoot p{margin:.3rem 0;color:var(--muted);font-size:.92rem;}
.hl-foot-baseline{color:var(--ink) !important;font-size:1rem !important;}
.hl-cc{font-size:.82rem !important;color:#6b7a80 !important;max-width:60ch;margin:.6rem auto 0 !important;}