/* wwwroot/css/site.css */

/* ===== Variables : couleurs et réglages centralisés ===== */
:root {
    /* Couleurs */
    --couleur-principale: #2F6F6A;
    --couleur-principale-claire: #E6F0EF;
    --couleur-accent: #C8873A;
    --couleur-bleu-fonce: #1E3A5F;
    --couleur-bleu-fonce-survol: #2C5282;
    --couleur-texte: #1F2933;
    --couleur-texte-secondaire: #52606D;
    --couleur-fond: #FFFFFF;
    --couleur-fond-alt: #F7F9F9;
    /* Typographie */
    --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Espacements */
    --espace-s: 0.5rem;
    --espace-m: 1rem;
    --espace-l: 2rem;
    --espace-xl: 4rem;
    /* Divers */
    --rayon: 8px;
    --largeur-max: 1100px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--couleur-texte);
    background: var(--couleur-fond);
}

h1, h2, h3 {
    color: var(--couleur-principale);
    line-height: 1.25;
    margin: 0 0 var(--espace-m);
}

h1 {
    font-size: 1.9rem;
}

h1:focus {
    outline: none;
}

h1 {
    scroll-margin-top: 1rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 var(--espace-m);
}

a {
    color: var(--couleur-principale);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Accessibilité : lien d'évitement ===== */
.skip-link {
    position: absolute;
    left: -9999px;
}

    .skip-link:focus {
        left: 1rem;
        top: 1rem;
        background: white;
        padding: .5rem 1rem;
        z-index: 100;
    }

/* ===== Mise en page ===== */
.conteneur {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--espace-m);
}

.section {
    padding-block: var(--espace-xl);
}

.section--alt {
    background: var(--couleur-fond-alt);
}

.section--hero {
    background: var(--couleur-fond-alt);
    color: var(--couleur-texte);
    text-align: center;
    padding-block: var(--espace-xl);
}

    .section--hero h1 {
        color: var(--couleur-texte);
    }

.section--cta {
    background: var(--couleur-principale);
    color: #fff;
    text-align: center;
}

    .section--cta h2 {
        color: #fff;
    }

main {
    padding-top: 2rem;
    padding-bottom: 3rem;
    min-height: 60vh;
}

/* Grille */
.grille {
    display: grid;
    gap: var(--espace-m);
}

/* Contenu + colonne latérale (si utilisé sur d'autres pages) */
.mise-en-page {
    display: grid;
    gap: var(--espace-l);
}

.contenu-principal h2 {
    margin-top: var(--espace-l);
}

    .contenu-principal h2:first-child {
        margin-top: 0;
    }

.colonne-laterale {
    padding-top: 2rem;
    display: grid;
    gap: var(--espace-m);
    align-content: start;
    order: -1;
}

/* ===== Header ===== */
.entete {
    background-image: linear-gradient(rgba(31, 41, 51, 0.6), rgba(31, 41, 51, 0.6)), url("../images/fondheader.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    min-height: 220px;
    display: flex;
    align-items: center;
    padding-block: var(--espace-l);
}

    .entete a {
        color: #fff;
    }

.entete__contenu {
    width: 100%;
    display: flex;
    flex-direction: column; /* ligne du haut, puis menu */
    gap: var(--espace-m);
}

/* Ligne 1 : logo + téléphone */
.entete__haut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; /* mobile : centré */
    gap: var(--espace-m);
}

/* Logo + nom */
.marque {
    display: flex;
    align-items: center;
    gap: var(--espace-s);
    text-decoration: none;
}

.marque__logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.marque__nom {
    font-weight: 700;
    font-size: 1.125rem;
}

/* Ligne 2 : menu */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espace-s) var(--espace-l);
    padding: var(--espace-s) var(--espace-m);
    background: var(--couleur-bleu-fonce);
    border-radius: var(--rayon);
}

    .menu a {
        color: #fff;
        font-weight: 500;
        text-decoration: none;
        padding: 0.4rem 0.75rem;
        border-radius: var(--rayon);
        transition: background 0.2s;
    }

        .menu a:hover,
        .menu a:focus-visible,
        .menu a.active {
            background: var(--couleur-bleu-fonce-survol);
        }

/* ===== Composants ===== */
.bouton-appel {
    display: inline-block;
    padding: 0.85rem 1.6rem;
    background: var(--couleur-bleu-fonce);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--rayon);
    transition: filter 0.2s;
}

    .bouton-appel:hover,
    .bouton-appel:focus-visible {
        filter: brightness(0.92);
    }

.carte {
    background: var(--couleur-fond);
    border: 1px solid var(--couleur-principale-claire);
    border-radius: var(--rayon);
    padding: var(--espace-l);
}

.carte-conteneur iframe,
.avis iframe {
    width: 100%;
    height: 250px; /* au lieu de 400px */
    border: 0;
    border-radius: .5rem;
}

@media (min-width: 768px) {
    .carte-conteneur iframe,
    .avis iframe {
        height: 400px;
    }
}

/* ===== Footer ===== */
.site-footer {
    background: var(--couleur-fond-alt);
    padding: 1.5rem 0;
    text-align: center;
    font-size: .9rem;
}

/* ===== Tablette et plus (768px) ===== */
@media (min-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    .grille {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--espace-l);
    }

    .section--hero {
        padding-block: calc(var(--espace-xl) * 1.5);
    }

    /* Header */
    .entete {
        min-height: 320px;
    }

    .entete__haut {
        flex-wrap: nowrap;
        justify-content: space-between; /* logo à gauche, tél à droite */
    }

    .marque__logo {
        width: 150px;
        height: 150px;
    }
}

/* ===== Ordinateur (1024px) ===== */
@media (min-width: 1024px) {
    .grille--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .mise-en-page {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
    .colonne-laterale {
        order: 0; 
    }
}
li {
    margin-bottom: 15px;
}

/* ===== Bandeau de confiance ===== */
.bandeau-confiance {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espace-m);
    margin: var(--espace-l) 0 0;
    padding: var(--espace-l);
    list-style: none;
    background: var(--couleur-bleu-fonce);
    color: #fff;
    border-radius: var(--rayon);
}

.badge-confiance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-s);
    text-align: center;
}

.badge-confiance__icone {
    width: 5rem;
    height: 5rem;
    margin: 0;
}

    .badge-confiance__icone svg {
        width: 100%;
        height: 100%;
    }

.badge-confiance__titre {
    font-weight: 600;
}

/* Tablette et + : 3 badges côte à côte */
@media (min-width: 768px) {
    .bandeau-confiance {
        grid-template-columns: repeat(2, 1fr);
    }
}

.osteo-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

    .osteo-layout img {
        display: block;
        width: 100%;
        max-width: 250px;
        height: auto;
        flex-shrink: 0;
    }

.osteo-texte {
    flex: 1;
}

/* Sur les petits écrans, l'image passe au-dessus du texte */
@media (max-width: 700px) {
    .osteo-layout {
        flex-direction: column;
    }
}

/*icone reseaux sociaux*/

.liens-sociaux {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    align-content: end;
    justify-content : flex-end
}

    .liens-sociaux a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px; /* zone tactile minimale recommandée */
        height: 44px;
        border-radius: 50%;
        color: currentColor;
        transition: opacity 0.2s;
    }

        .liens-sociaux a:hover,
        .liens-sociaux a:focus-visible {
            opacity: 0.7;
        }