/*    commun.css
    Villa Port tillet
    Created on : 4 mai 2026, 19:41:34
    Author     : Thierry Leduc
*/
/* 🎨 Palette */

:root {

    --bleu-ocean: #2c5985;

    --bleu-clair: #4ca1af;

    --sable: #f4e1c1;
    
    --sable-clair:#fdfdfd;

    --gris-fond: #f8f9fa;

}

/* 🔤 Fonts */

@font-face {

    font-family: 'Lora';

    src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2');

    font-weight: 400;

    font-style: normal;

}

@font-face {

    font-family: 'Lora';

    src: url('../fonts/lora-v37-latin-700.woff2') format('woff2');

    font-weight: 700;

    font-style: normal;

}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* 🌍 Base */

body {

    font-family: 'Inter', sans-serif;

    background-color: var(--gris-fond);

    color: #333;

    line-height: 1.6;

}

/* 📝 Titres */

h1 {

    font-family: 'Lora', serif;

    font-size: clamp(40px, 5vw, 90px);

    font-weight: 100;

    letter-spacing: -3px;

}

h2 {

    font-family: 'Lora', serif;

    font-size: clamp(20px, 3.5vw, 32px);

    font-weight: 400;

}

h3 {

    font-family: 'Lora', serif;

    font-weight: 400;

}

p {

    font-size: clamp(13px, 2vw, 16px);

}

/* 🏠 Navigation */

.navbar {

    background-color: var(--bleu-ocean) !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.navbar-brand {

    font-family: 'Lora', serif;

    font-size: 1.4rem;

}

.navbar .nav-link {

    color: #fff !important;

    font-weight: 500;

}

.navbar .nav-link.active {

    font-weight: 600;

    border-bottom: 2px solid var(--sable);

    color: var(--sable) !important;

}
/* Header */
.header a {
    color: #ffffff !important;
    text-decoration: none;
}
.header a:hover {
    text-decoration: underline;
    opacity: 0.85;
}
/* 🎡 Carousel */

.carousel img {

    /* initial 
    height: 600px;
    object-fit: cover; */
    width: 100%;
    height: clamp(250px, 60vh, 600px);
    object-fit: cover;

}

@media (max-width: 576px) {
    .carousel img {
        height: clamp(300px, 55vw, 420px);
        object-position: center center;
    }
}

.carousel-caption {

    font-family: 'Lora', serif;

}

/* Titre visuel des slides 2 & 3 du carrousel (pas de balise <h1>, un seul h1 par page) */
.carousel-caption .carousel-title {

    font-family: 'Lora', serif;

    font-size: clamp(40px, 5vw, 90px);

    font-weight: 100;

    letter-spacing: -3px;

    line-height: 1.1;

    margin-bottom: .5rem;

}

.carousel-control-prev-icon,

.carousel-control-next-icon {

    width: 4rem;

    height: 4rem;

    background-color: rgba(10, 29, 59, 0.5);

    border-radius: 50%;

    background-size: 70% 70%;

}

/* 🧱 Sections */

.intro {

    padding: 20px;

    text-align: center;

}

.bg-turquoise {

    background-color: var(--bleu-clair) !important;

    color: #fff;

}


.bg-sable {

    background-color: var(--sable) !important;
    /* background-color: #fdfdfd !important; */
    
    color: #0a1d3b;

}

.bg-sable-clair {

    background-color: var(--sable-clair) !important;
    /* background-color: #fdfdfd !important; */
    
    color: #0a1d3b;

}

.bg-ocean {

    background-color: var(--bleu-ocean) !important;

    color: #fff;

}

.justify {

    text-align: justify;

}

/* 🏡 Header */
.header {
  background: linear-gradient(to right, var(--bleu-ocean), var(--bleu-clair));
  color: white;
}
.header h1, 
.header p {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}