/* ===== Variables : toutes les couleurs et tailles au même endroit ===== */
:root {
    --marine: #0f2e45;
    --mer: #1d7a8c;
    --ciel: #e6f1f4;
    --fond: #f5f8f9;
    --soleil: #f2b632;
    --texte: #1c2b36;
    --texte-doux: #55666f;
    --blanc: #ffffff;
    --rayon: 14px;
    --ombre: 0 8px 24px rgba(15, 46, 69, 0.12);
    --titres: "Bricolage Grotesque", "Trebuchet MS", Verdana, sans-serif;
    --corps: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--corps);
    font-size: 18px;
    line-height: 1.65;
    background: var(--fond);
    color: var(--texte);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: var(--titres);
    color: var(--marine);
    line-height: 1.15;
    margin: 0 0 0.6em;
}

h2 { font-size: 1.9rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--mer); }

:focus-visible {
    outline: 3px solid var(--soleil);
    outline-offset: 3px;
}

/* ===== Barre de navigation (logo + menu) ===== */
.barre {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--marine);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 32px;
}

.logo {
    font-family: var(--titres);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--blanc);
    text-decoration: none;
    padding: 16px 0;
}

.logo span { color: var(--soleil); }

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
}

nav a {
    display: block;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--blanc);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

nav a:hover { background: rgba(255, 255, 255, 0.15); }

/* Page en cours : mise en évidence dans le menu */
nav a[aria-current="page"] {
    background: var(--soleil);
    color: var(--marine);
}

/* ===== Bandeau de titre (en haut de chaque page) ===== */
.bandeau {
    background: linear-gradient(rgba(15, 46, 69, 0.72), rgba(15, 46, 69, 0.72)),
                url("https://picsum.photos/id/1015/1600/500") center / cover;
    background-color: var(--marine);
    color: var(--blanc);
    text-align: center;
    padding: 64px 24px;
}

.bandeau h1 {
    color: var(--blanc);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 0.3em;
}

.bandeau p {
    margin: 0 auto;
    font-size: 1.15rem;
    opacity: 0.92;
}

/* Grand bandeau de la page d'accueil */
.bandeau.accueil {
    padding: 120px 24px;
    background:
        linear-gradient(rgba(15, 46, 69, 0.55), rgba(15, 46, 69, 0.75)),
        url("https://picsum.photos/id/1015/1600/900") center / cover;
    background-color: var(--marine);
}

.bandeau.accueil h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); }

.bouton {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 28px;
    background: var(--soleil);
    color: var(--marine);
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 0.2s, background 0.2s;
}

.bouton:hover { background: #ffc94d; transform: translateY(-2px); }

/* ===== Contenu principal ===== */
main {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 56px 24px;
    flex: 1;
}

.intro {
    font-size: 1.2rem;
    color: var(--texte-doux);
}

/* ===== Page Présentation ===== */
.destinations {
    list-style: none;
    padding: 0;
    margin: 24px 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.destinations li {
    background: var(--blanc);
    padding: 20px;
    border-radius: var(--rayon);
    border-left: 5px solid var(--mer);
    box-shadow: var(--ombre);
}

.destinations strong {
    display: block;
    font-family: var(--titres);
    font-size: 1.15rem;
    color: var(--marine);
}

.deux-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

/* ===== Images ===== */
main img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rayon);
}

/* ===== Galerie ===== */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.galerie figure {
    margin: 0;
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    overflow: hidden;
}

.galerie img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.4s;
}

.galerie figure:hover img { transform: scale(1.05); }

.galerie .cadre { overflow: hidden; }

.galerie figcaption {
    padding: 14px 18px;
    font-size: 0.98rem;
    color: var(--texte-doux);
}

/* ===== Formulaire de contact ===== */
.contact {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: start;
}

form {
    background: var(--blanc);
    padding: 32px;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    display: flex;
    flex-direction: column;
}

.duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label {
    margin-top: 16px;
    font-weight: 600;
    color: var(--marine);
}

input, textarea {
    margin-top: 6px;
    padding: 12px 14px;
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 2px solid #d3e0e5;
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--mer);
    background: var(--blanc);
}

textarea { resize: vertical; }

button {
    margin-top: 24px;
    padding: 14px;
    font: inherit;
    font-weight: 700;
    background: var(--mer);
    color: var(--blanc);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover { background: var(--marine); }

/* ===== Pied de page ===== */
footer {
    background: var(--marine);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 24px;
}

footer p { margin: 0 auto; }

/* ===== Mobile ===== */
@media (max-width: 720px) {
    body { font-size: 17px; }

    .barre { padding: 8px 16px; justify-content: center; }

    nav ul { flex-wrap: wrap; justify-content: center; }

    nav a { padding: 8px 12px; }

    .bandeau { padding: 44px 20px; }
    .bandeau.accueil { padding: 80px 20px; }

    .contact { grid-template-columns: 1fr; gap: 24px; }

    .duo { grid-template-columns: 1fr; gap: 0; }

    form { padding: 22px; }

    main { padding: 36px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}