/* ==========================================================================
   Base / Reset léger
   - On garde Tailwind/DaisyUI, donc reset minimal
   ========================================================================== */

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

html,
body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   Variables de thème
   - Utilise --geo partout (cohérence + maintenance)
   ========================================================================== */

:root {
    --geo: #3E6464;
    --text-strong: #111827;
    --text-muted: #4b5563;

    /* Boutons */
    --btn-radius: 0.75rem;
    /* rounded-xl */
    --btn-py: 0.75rem;
    /* py-3 */
    --btn-px: 2rem;
    /* px-8 */
    --btn-font: 500;
    /* font-medium */
    --btn-fs: 1rem;
    /* base */
    --btn-fs-sm: 1.125rem;
    /* text-lg */
    --btn-lh: 1.25;
    --btn-transition: 150ms ease;
    /* Hauteur de la navbar */
    --h-navbar: 6rem;
    /* espaces */
    --spacing: 0.25rem;
    /* si pas déjà défini */
    --space-y-5: calc(var(--spacing) * 5);
    /* 1.25rem */
    --semibold: 600;
    --text-xl: 1.25rem;
}

/* ==========================================================================
   Body
   ========================================================================== */

body {
    margin-top: var(--h-navbar);
    min-height: 100vh;
}

/* séparation sntre les section dans body */
body> :not(:first-child) {
    margin-block-start: var(--space-y-5);
}

body.no-scroll {
    overflow: hidden;
}

/* ==========================================================================
   Layout / fonds
   ========================================================================== */

header,
footer {
    background-color: var(--geo);
}

/* ==========================================================================
   Typographie (hero)
   ========================================================================== */

.hero-title {
    font-size: clamp(1.75rem, 4vw, 3.75rem);
    line-height: 1.1;
    color: var(--text-strong);
}

.hero-text {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--text-muted);
}

/* ==========================================================================
   Boutons (design system)
   - .btn-geo : primary (geo)
   - .btn-geo-black : alternative (noir)
   - Variantes block : largeur 100%
   ========================================================================== */

/* Base commune boutons : utile pour <a> et <button> */
.btn,
.btn-geo,
.btn-geo-black {
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;

    padding: var(--btn-py) var(--btn-px);
    border-radius: var(--btn-radius);

    font-weight: var(--btn-font);
    font-size: var(--btn-fs);
    line-height: var(--btn-lh);

    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;

    transition: opacity var(--btn-transition), transform var(--btn-transition);
}

/* si jamais il est hidden  */
.btn-geo:not(.hidden),
.btn-geo-black:not(.hidden) {
    display: inline-flex;
}

/* Couleurs */
.btn-geo {
    background-color: var(--geo);
    width: calc(var(--spacing)*70);
    padding: .7rem;
}

.btn-geo-black {
    background-color: none transparent;
    border: 1px solid;
}
.btn-geo-black:hover { background: #213A3A; }
/* Hover / Focus (accessibilité : focus-visible) */
.btn-geo:hover,
.btn-geo:focus-visible,
.btn-geo-black:hover,
.btn-geo-black:focus-visible {
    opacity: 0.9;
}

/* Active feedback */
.btn-geo:active,
.btn-geo-black:active {
    transform: translateY(1px);
}

/* Disabled (button[disabled] et liens aria-disabled) */
.btn-geo[disabled],
.btn-geo[aria-disabled="true"],
.btn-geo-black[disabled],
.btn-geo-black[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* Responsive : texte légèrement plus grand à partir de sm */
@media (min-width: 1024px) {

    .btn-geo,
    .btn-geo-black {
        font-size: var(--btn-fs-sm);
    }
}

/* Variantes full width */
.btn-geo--block,
.btn-geo-black--block {
    width: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */

header {
    position: fixed;
    width: 100vw;

    top: 0;
    z-index: 50;

    height: var(--h-navbar);

    color: white;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

header>nav {
    height: var(--h-navbar);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

header>nav>div {
    display: flex;
    height: 100%;
    align-items: center;
    position: relative;
    padding-inline: calc(var(--spacing)*6);
}

/* ==========================================================================
   Navbar links (mobile)
   ========================================================================== */
.MobileLinks {
    margin-left: auto;
}

/*@media (min-width: 768px) {
    .MobileLinks {
        display: none;
    }
}*/

@media (min-width: 1024px) {
    .MobileLinks {
        display: none;
    }
}

.MobileLinks>button {
    position: relative;
    z-index: 50;
}

.MobileLinks>button>img {
    width: calc(var(--spacing)*10);
    aspect-ratio: 1/1;
}

/* Menu mobile (ciblé via le hook data-menu) */
.MobileLinks>.data-menu {
    background-color: var(--geo);
    position: fixed;

    top: var(--h-navbar);
    left: 0;
    right: 0;

    height: calc(100vh - var(--h-navbar));
    z-index: 40;

    transform: translateY(-100%);
    /* fermé : -translate-y-full */
    transition: transform 300ms ease-in-out;
    /* transition-transform duration-300 ease-in-out */
}

/* État ouvert (piloté par le JS) */
.MobileLinks>.data-menu.is-open {
    transform: translateY(0);
}

.MobileLinks>.data-menu {
    overflow-x: hidden;
}

.data-menu>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-top: calc(var(--spacing)*20);
    padding-inline: calc(var(--spacing)*6);
}

.data-menu>div>div {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing)*6);
    font-weight: var(--semibold);
    font-size: var(--text-xl);
}


/* ==========================================================================
   Navbar links (desktop)
   ========================================================================== */

/* Si tu utilises .links, tu peux garder ce scope.
   Sinon, remplace par .NavbarLink directement. */
.NavbarLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.9rem 1.5rem;
    border-radius: 0.75rem;

    font-weight: 600;
    font-size: 1.125rem;
    /* 🔑 + masse visuelle */
    line-height: 1.75;
    /* 🔑 + respiration → paraît plus bold */

    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;

    border: 1px solid transparent;

    /* 🔑 micro-contraste typographique */
    text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.12);

    transition:
        transform 200ms ease,
        background-color 200ms ease,
        box-shadow 200ms ease,
        color 200ms ease,
        border-color 200ms ease;
}

.logo {
    z-index: 50;
    background-color: var(--geo);
}

.logo {
    height: calc(var(--spacing)*14);
}

.logo>img {
    height: 100%;
}

@media (min-width: 1024px) {
    .logo {
        height: calc(var(--spacing)*16);
    }
}

/* Cta vers carte */
.cta-carte {
    background-color: pink;
}

/* Hover (desktop seulement par pointeur ici fine pas le doigt on est pas sur des média par taille d'écran) */
@media (hover: hover) and (pointer: fine) {
    .NavbarLink {
        padding-inline: 2.5rem;
    }

    .NavbarLink:hover {
        background: rgba(255, 255, 255, 0.14);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
        transform: translateY(-1px) scale(1.04);
        border-color: rgba(255, 255, 255, 0.18);
    }
}

/* Active (page courante) */
.NavbarLink.is-active {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    color: #fff;
}

/* Active + hover : stable, légèrement premium */
@media (hover: hover) and (pointer: fine) {
    .NavbarLink.is-active:hover {
        background: rgba(255, 255, 255, 0.26);
        transform: translateY(-1px) scale(1.03);
    }
}

/* ==========================================================================
   Classes utilitaires
   - Classes génériques, single-responsibility
   - Utilisables partout, sans sémantique métier
   ========================================================================== */

/* Display */
.is-hidden {
    display: none !important;
}

.is-open {
    /* état JS */
}

/* Background */
.bg-geo {
    background-color: var(--geo);
}

/* Images */
.img-responsive {
    width: 100%;
    height: auto;
    display: block;
}

/* Désactiver Tailwind / DaisyUI localement */
.no-tailwind,
.no-tailwind * {
    all: revert;
    font-family: inherit;
}

.tailwind-only,
.tailwind-only * {
    all: revert;
}

/*--*/

/* ==========================================================================
   Footer – mapping Tailwind + DaisyUI (sans dépendances)
   ========================================================================== */

/* ---- Utilities (minimum) ---- */
.text-white {
    color: #fff;
}

.text-center {
    text-align: center;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* 14/20 */
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

/* 18/28 */

.font-medium {
    font-weight: 500;
}

.mt-5 {
    margin-top: 1.25rem;
}

/* 20px */
.mt-2 {
    margin-top: 0.5rem;
}

/* 8px */

.mb-4 {
    margin-bottom: 1rem;
}

/* 16px */
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.max-w-xs {
    max-width: 20rem;
}

/* 320px */

.w-full {
    width: 100%;
}

.w-20 {
    width: 5rem;
}

/* 80px */
.w-8 {
    width: 2rem;
}

/* 32px */

.h-full {
    height: 100%;
}

.relative {
    position: relative;
}

.z-20 {
    z-index: 20;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.p-10 {
    padding: 2.5rem;
}

/* 40px */
.p-4 {
    padding: 1rem;
}

/* 16px */

.rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.grid {
    display: grid;
}

/* 1 col mobile, 2 cols md, 4 cols lg */
.grid-cols-responsive {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-cols-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-cols-responsive {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* aspect-square */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* offsets Tailwind arbitraires */
.left-\[-1\.2rem\] {
    left: -1.2rem;
}

@media (min-width: 768px) {
    .md\:left-\[-0\.2rem\] {
        left: -0.2rem;
    }
}

/* ms-5 = margin-inline-start: 1.25rem */
@media (min-width: 768px) {
    .md\:ms-5 {
        margin-inline-start: 1.25rem;
    }
}

/* md grid placement */
@media (min-width: 768px) {
    .md\:col-start-1 {
        grid-column-start: 1;
    }

    .md\:row-start-2 {
        grid-row-start: 2;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }
}

/* borders */
.border-t {
    border-top-width: 1px;
    border-top-style: solid;
}

.border-base-300 {
    border-color: rgba(255, 255, 255, 0.18);
}

/* approx "base-300" on dark bg */

/* object-container (tu l'utilises sur un span icône) */
.object-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- DaisyUI-like components ---- */

/* footer container */
.footer {
    /* DaisyUI footer = layout multi-col */
    gap: 2rem;
}

/* sm:footer-horizontal */
@media (min-width: 640px) {
    .footer-horizontal {
        /* pas obligatoire si tu es déjà en grid; utile si tu utilises flex sur footer ailleurs */
    }
}

/* footer-title */
.footer-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.70;
    margin-bottom: 0.75rem;
}

.adresse {
    font-size: small;
}

.footer>aside>div>p {
    font-size: small;
}

/* links (DaisyUI) */
.link {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 3px;
}

.link-hover:hover {
    text-decoration: underline;
}

/* buttons ghost (DaisyUI-like) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    border: 1px solid transparent;
    background: transparent;
    color: inherit;

    padding: 0.5rem 1rem;
    border-radius: 0.75rem;

    cursor: pointer;
    text-decoration: none;

    transition: background-color 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.16);
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.jf-section { max-width: 1200px; margin: 2em auto; }
.jf-section:first-of-type { margin-top: 8em; }
.jf-section:last-of-type { margin-bottom: 6em; }
.jf-section h2 { font-size: 2em; margin: 1em 0; }
.jf-section p { font-size: 1em; margin: 0.5em 0; }
@media (max-width: 1200px) {
.jf-section { margin: 2em 2em; }
}

.climae-footer{background:#3E6464;color:#e8f1f1;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;}
.footer-inner{max-width:800px;margin:0 auto;padding:48px 24px;display:flex;justify-content:space-between;gap:48px;}
.footer-left { width: 400px; }
.footer-left,.footer-right{flex:1;}
.footer-nav{display:flex;flex-direction:column;gap:8px;}
.footer-nav a{color:#e8f1f1;text-decoration:none;font-size:14px;opacity:.9;}
.footer-nav a:hover{opacity:1;text-decoration:underline;}
.footer-geo{font-weight:600;}
.footer-brand{font-size:18px;font-weight:600;margin-bottom:8px;}
.footer-tagline{font-size:14px;line-height:1.4;margin-bottom:6px;opacity:.9;}
.footer-editor{font-size:13px;opacity:.8;margin-bottom:12px;}
.footer-contact{color:#f18700;text-decoration:none;font-size:14px;}
.footer-contact:hover{text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:16px 24px;font-size:12px;text-align:center;opacity:.85;}
.footer-bottom a{color:#e8f1f1;text-decoration:none;}
.footer-bottom a:hover{text-decoration:underline;}
.footer-sep{margin:0 8px;}
.footer-copy{margin-left:12px;white-space:nowrap;}