/* =========================================================
    Base & Variables
    ========================================================= */
:root {
    --color1: #fff;
    --color2: #0a2a43;
    --color3: #292a2b;
    --color10: #bee3ff;
    --shadow: 0 6px 20px rgba(0,0,0,.08);

    --font1: 'Abril Fatface', cursive;
    --font2: 'Roboto', sans-serif;

    /* Album (alb-*) */
    --alb-gap: 12px;
    --alb-radius: 8px;
    --alb-shadow: 0 6px 20px rgba(0,0,0,.08);
    --alb-overlay: rgba(10,10,12,.82);
    --alb-z: 10000 ;

    /* Calendar (cal-*) */
    --cal-width: min(100%, 1000px);
    --cal-bg: #F5F5F5;
    --cal-fg: #0a2a43;
    --cal-accent: #0a2a43;
    --cal-muted: #ccc;
    --cal-grid: #ccc;
    --cal-today: #bee3ff;
    --cal-radius: 18px;
    --cal-shadow: 0 10px 30px rgba(0,0,0,.35);
    --cal-font: 'Roboto', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans", sans-serif;
    --cal-title-font: 'Abril Fatface', cursive;
    --day-size: clamp(60px, 10vw, 120px);
    --gap: 4px;
}

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

/* HTML / Body */
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; scrollbar-gutter: stable both-edges; }
body { font-family: var(--font2); }

/* Containers */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: 3rem; }

/* Type basics */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/*  =========================================================
    Hero
    ========================================================= */
.accueil { position: relative; height: 100vh; background: center / cover no-repeat url('img/web/hero.webp'); }
.accueil .toggle { display: none; }

.overlay { position: relative; height: 100vh; display: flex; justify-content: center; align-items: center; color: var(--color10); background: center / cover no-repeat url('img/web/overlay.png'); }

.logo { position: absolute; top: 1rem; left: 1rem; z-index: 1020; }
.logo img { max-width: 160px; transition: all 0.3s ease; }

canvas { border: none; box-shadow: none; background: #1e90ff; }

/*  =========================================================
    Navigation & Submenu
    ========================================================= */
.menu { position: absolute; top: 2.75rem; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; width: 550px; list-style: none; }
.menu li a { color: var(--color10); text-decoration: none; text-transform: uppercase; font-weight: 300; letter-spacing: 2px; }

/* Submenu */
.has-submenu { position: relative; }
.submenu { display: none; position: absolute; top: 100%; left: 0; width: 250px; z-index: 1000; background: var(--color3); padding: 1rem 0; text-align: center; list-style: none; }
.submenu li a { display: block; padding: 0.5rem 1rem; color: var(--color10); text-decoration: none; }
.submenu li a:hover { background: rgba(255, 255, 255, 0.1); }

@media (min-width: 992px) { .has-submenu:hover .submenu { display: block; } }

/*  =========================================================
    Accueil
    ========================================================= */
.accueil__text { width: 80%; }
.accueil__text__top { display: flex; align-items: center; }
.accueil__text__top .sep { width: 120px; height: 2px; background: var(--color1); }
.accueil__text__top p { margin-left: 1rem; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; }
.accueil__text__mid h1 { margin: 1rem 0 2rem; font-family: var(--font1); font-weight: 400; font-size: 8rem; line-height: 11rem; }

/*  =========================================================
    About
    ========================================================= */
.entete { display: flex; padding-top: 2rem; }
.entete__slogan { width: 30%; display: flex; justify-content: center; align-items: center; padding-bottom: 1rem; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; }
.entete__titre { width: 100%; padding: 1rem 0 0 1rem; }
.entete__titre h2 { font-family: var(--font1); font-size: 2rem; }
.entete__titre .barre { width: 120px; height: 5px; background: var(--color2); margin: 1rem 0 1.5rem; }
.entete__titre .barre2 { width: 120px; height: 5px; background: var(--color1); margin: 1rem 0 1.5rem; }
.entete__titre p { line-height: 1.4rem; }

.about { padding-block: 3rem; color: var(--color3); }
.about__corps { margin-top: 1rem; display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; }
.about__corps__block { width: 31%; }
.about__corps__block img { width: 100%; border-radius: 8px; }
.about__corps__block h3 { margin: .5rem 0 1rem; font-family: var(--font1); font-size: 1.5rem; }
.about__corps__block p { line-height: 1.4rem; }

/*  =========================================================
    Work
    ========================================================= */
.work { background: var(--color2); color: var(--color1); padding-block: 3rem; }
.work .barre { background: var(--color1); }
.work__corps { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); }
.work__corps__block { position: relative; }
.work__corps__block h3,
.work__corps__block h4 { position: absolute; left: 1rem; bottom: 2rem; font-family: var(--font1); font-size: 2rem; }
.work__corps__block h4 { color: var(--color1); }
.work__corps__block .barre { position: absolute; left: 1rem; bottom: 1.5rem; width: 120px; height: 5px; background: var(--color2); }

/*  =========================================================
    Contact
    ========================================================= */
.section-contact { padding: 4rem 2rem; background: #fff; }
.contact-container { max-width: 1200px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.contact-info, .contact-form { flex: 1 1 45%; background: #fff; padding: 2rem; border-radius: 1rem; }
.contact-form form .form-group { margin-bottom: 1.5rem; }
.contact-form label { display: block; margin-bottom: .5rem; font-weight: bold; }
.contact-form input,
.contact-form textarea,
.contact-form select { width: 100%; padding: .8rem 1rem; font-size: 1rem; font-family: var(--font2); color: #333; background: #fff; border: 1px solid #ccc; border-radius: .5rem; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; resize: none; }
.contact-form select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8L0.803848 0.5L11.1962 0.5L6 8Z' fill='%23333'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; }
.contact-form button { background: var(--color2); color: #fff; padding: .8rem 1.5rem; border: none; border-radius: .5rem; cursor: pointer; font-weight: bold; transition: background-color .3s ease; }
.contact-form button:hover { background: var(--color10); }

.consent label { display: block; }
.consent .privacy-right { display: block; text-align: right; margin-top: 1.25rem; text-decoration: none; }

/*  =========================================================
    Btn & Liens
    ========================================================= */
.btn { border: 0; padding: .5rem 1rem; margin-top: 1.5rem; text-transform: uppercase; letter-spacing: 2px; }
.btn-inscription { background: var(--color2); color: #fff; padding: .8rem 1.5rem; border: none; border-radius: .5rem; text-decoration: none; cursor: pointer; font-weight: bold; transition: background-color .3s ease; }
.btn-inscription:hover { background: var(--color10); }

.lien-special { color: var(--color2); font-weight: bold; text-decoration: none; font-size: .9rem; padding: 1px 5px; border: 2px solid var(--color2); border-radius: 5px; transition: all .3s ease; white-space: nowrap; }
.lien-special:hover { background: var(--color2); color: #ccc; }

.lien-contact { color: var(--color2); text-decoration: none; transition: color .3s ease, text-decoration .3s ease; }
.lien-contact:hover { color: var(--color10); text-decoration: none; }

/*  =========================================================
    Images & Map
    ========================================================= */
.img-site {width: 100%; height: 300px; object-fit: cover; display: block;box-shadow: var(--shadow);}
.img-cfi {width: 400px; height: 100%; object-fit: cover; display: block; margin: 0 auto; margin-top: 2rem; border-radius: 4px; box-shadow: var(--shadow);}
.img-logo-cfi {width: 120px; height: 100%; object-fit: cover; display: block; margin: 0 auto; margin-bottom: 0.5rem; margin-top: 0.5rem;}

.google-map iframe {border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);}

/*  =========================================================
    Footer
    ========================================================= */
.footer {margin-top: 2rem; padding: 1rem 0 3rem; background: var(--color2); color: var(--color1);}
.footer a {text-decoration: none; color: var(--color10); font-weight: 600; font-size: 1rem; font-family: var(--font1);}
.footer-barre{max-width: 1000px; margin: 1.5rem auto 0; padding: 1rem; border-top: 2px solid #ccc; }
.footer-block {max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.footer-block img {width: 48px; height: 48px; transition: transform .5s ease, filter 0.3s ease;  cursor: pointer;}
.footer-block img:hover {transform: scale(1.05);}

/*  =========================================================
    Album & Lightbox
    ========================================================= */
.alb-gallery {
    --tile-min: 140px; /* mobile min tile */
    --tile-max: 300px; /* desktop max tile */
    display: grid;
    gap: clamp(8px, 2.5vw, 16px);
    grid-template-columns: repeat(
        auto-fit,
        minmax(clamp(var(--tile-min), 40vw, var(--tile-max)), 1fr)
    );
    padding-inline: clamp(8px, 4vw, 24px);
    box-sizing: border-box;
}
.alb-item, .album__item { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; box-shadow: var(--alb-shadow); cursor: pointer; transition: transform .3s ease, filter .3s ease; overflow: hidden; }
.alb-item:hover, .album__item:hover { transform: scale(1.03); }

.alb-lightbox[hidden] { display: none !important; }
.alb-lightbox { position: fixed; inset: 0; z-index: var(--alb-z); background: var(--alb-overlay); display: grid; place-items: center; padding: clamp(12px, 3vw, 28px); }
.alb-stage img { max-width: 92vw; max-height: 92vh; border-radius: calc(var(--alb-radius) + 4px); box-shadow: 0 10px 40px rgba(0,0,0,.35); user-select: none; }
.alb-backdrop { position: fixed; inset: 0; }

@media (max-width: 900px){ .alb-gallery { --tile-max: 260px; } }
@media (max-width: 600px){ .alb-gallery { --tile-min: 130px; } }

/*  =========================================================
    Calendar
    ========================================================= */
.cal { display: grid; place-items: center; padding: 24px; }
.cal__root { margin: auto; width: var(--cal-width); background: var(--cal-bg); color: var(--cal-fg); border-radius: var(--cal-radius); box-shadow: var(--cal-shadow); padding: 1rem; display: flex; flex-direction: column; font-family: var(--cal-font); }
.cal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.cal__title { font-size: 1.4rem; text-transform: uppercase; font-family: var(--cal-title-font); letter-spacing: .5px; }
.cal__nav { display: flex; gap: .5rem; }
.cal__nav button { cursor: pointer; font-size: 1rem; padding: .4rem .6rem; border-radius: 10px; border: 1px solid var(--cal-grid); background: #fff; color: var(--cal-fg); }
.cal__weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: var(--gap); margin: .25rem 0 .5rem; font-size: .85rem; color: var(--cal-muted); }
.cal__weekdays div { text-align: center; }
.cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: var(--gap); position: relative; z-index: 1; }
.cal__day { position: relative; box-sizing: border-box; width: 100%; height: var(--day-size); padding: 6px; border: 1px solid var(--cal-grid); font-size: .85rem; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.cal__day.today { background: var(--cal-today); }
.cal__day.out { opacity: .45; background: #ccc; }
.cal__badge { font-weight: 700; line-height: 1; }
.cal__events { margin-top: 4px; overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.cal__chip { font-size: .72rem; white-space: normal; overflow: hidden; text-overflow: ellipsis; background: #ccc; border: 1px solid #ccc; border-radius: 6px; padding: 2px 4px; line-height: 1.15; display: flex; gap: 4px; align-items: flex-start; flex-wrap: wrap; }
.cal__chip .t { font-weight: 700; display: block; }
.cal__chip .s { display: block; }
.cal__day.compact .cal__chip .s { display: none; }
.cal__day.icon .cal__chip .t, .cal__day.icon .cal__chip .s { display: none; }
.cal__day.icon .cal__chip { justify-content: center; text-align: center; }

.cal__alert { display: none; margin: 8px 0; padding: 8px 12px; background: #3a1212; border: 1px solid #a33; border-radius: 8px; color: #ffd7d7; }
.cal__alert.show { display: block; }

.cal__modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: saturate(180%) blur(3px); z-index: 9999; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cal__modal.show { display: flex; }
.cal__modal-card { margin: auto; width: min(92vw, 820px); max-height: 82vh; overflow: auto; background: #fff; border: 1px solid #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cal__modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #fff; }
.cal__modal-title { font-weight: 700; font-family: var(--cal-title-font); }
.cal__modal-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; white-space: pre-line; }
.cal__card { border: 1px solid #ccc; border-radius: 12px; padding: 10px; background: #fff; }
.cal__card h4 { margin: 0 0 4px; font-size: 1rem; }
.cal__meta { font-size: .9rem; color: var(--cal-fg); white-space: pre-line; }
.cal__modal-close { display: none; }

/*  =========================================================
    Animations
    ========================================================= */
@keyframes bounce { 0%{top:0} 50%{top:10px} 100%{top:0} }

/*  =========================================================
    Responsive
    ========================================================= */
@media (max-width: 1327px) {
    .accueil__text__mid h1 { font-size: 5rem; line-height: 6rem;}
}

@media (max-width: 991px) {
    .accueil .toggle { display: block; position: fixed; z-index: 2100; top: 2.75rem; right: 1rem; font-size: 1.75rem; cursor: pointer; }
    .ouvrir { display: block; }
    .fermer { display: none; }
    .open .ouvrir { display: none; }
    .open .fermer { display: block; }

    .open .logo img { max-width: 80px; }

    .menu { position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 85vh; transform: translateX(-100%); transition: transform .5s; flex-direction: column; align-items: center; justify-content: space-around; background: var(--color3); }
    .menu li a { font-size: 2rem; }
    .open .menu { transform: translateX(0); }

    .menu .has-submenu > a { padding-left: 4rem; }
    .menu .has-submenu .submenu { display: block; position: static; background: none; padding-inline: 1rem; width: 100%; }
    .menu .has-submenu .submenu a { font-size: 1rem; padding: .5rem 0; }

    .footer-barre{max-width: 700px;}
    .footer-block {max-width: 650px;}
}

@media (max-width: 767px) {
    .accueil__text__mid h1 { font-size: 3rem; line-height: 4rem; }
    .entete__slogan { display: none; }
    .entete__titre { width: 100%; }
    .about__corps { flex-direction: column; }
    .about__corps__block { width: 100%; margin-bottom: .5rem; }
    .about__corps__block:last-child { margin-bottom: 1rem; }
    .work__corps { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .img-site {height: 100%;}
    .img-cfi {width: 90%;}
    .img-logo-cfi {width: 25%;}
    .footer-barre{max-width: 500px;}
    .footer-block {max-width: 480px;}
}

@media (max-width: 480px) {
    .img-site {height: 100%;}
    .img-cfi {width:100%;}
    .img-logo-cfi {width: 40%;}
    .footer-barre{max-width: 380px;}
    .footer-block {max-width: 350px;}
}

/*  =========================================================
    Helpers
    ========================================================= */
.menu, .menu ul, .submenu { list-style: none; padding: 0; margin: 0; }

/* Layout tweaks */
.bloc-contact { margin: 50px auto 30px; display: flex; justify-content: center; text-align: center; }
html.alb-noscroll, body.alb-noscroll { overflow: hidden; }