/* =========================================================
   JADE LASER — feuille de style commune à toutes les pages
   Ambiance : plage, sable, écume, reflets dorés
   ========================================================= */

/* ---------- 1. La palette (variables CSS) ----------
   On déclare les couleurs une seule fois ici, puis on les
   réutilise partout avec var(--nom). Pour changer une couleur
   sur tout le site, il suffit de la modifier à cet endroit. */
:root {
    --ecume: #FBF8F3;        /* fond de page */
    --sable-clair: #EFE4D4;  /* fonds de sections, cartes */
    --sable: #D9BF9A;        /* bordures, séparateurs */
    --or: #B08A4E;           /* accents, lignes fines, survol */
    --taupe: #3A2E26;        /* texte, bouton */
    --taupe-doux: #6B5A4C;   /* texte secondaire */

    --arrondi: 16px;
    --largeur-max: 1100px;
}

/* ---------- 2. Base ---------- */
* {
    box-sizing: border-box;  /* padding et bordures comptés dans la taille */
}

body {
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--taupe);
    background-color: var(--ecume);
    line-height: 1.7;
}

img {
    max-width: 100%;   /* une image ne dépasse jamais son conteneur */
    display: block;
}

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

h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 20px;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.3rem; }

/* clamp(min, idéal, max) : la taille s'adapte à la largeur de
   l'écran sans jamais descendre sous le min ni dépasser le max */

/* ---------- 3. En-tête : logo + onglets ---------- */
header {
    text-align: center;
    padding: 24px 16px 0;
}

.logo {
    display: inline-block;
    text-decoration: none;
    color: var(--taupe);
    line-height: 1;
}
.logo-jade {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.4rem;
    letter-spacing: 0.15em;  /* espace entre les lettres */
}
.logo-laser {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.6em;
    color: var(--or);
    margin-top: 6px;
    padding-left: 0.6em;     /* compense le dernier espacement pour bien centrer */
}

.onglets {
    max-width: 800px;
    margin: 20px auto 0;
    border-top: 1px solid var(--sable);
    border-bottom: 1px solid var(--sable);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 6px 0;
}
.onglets a {
    color: var(--taupe);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: 999px;    /* très grand arrondi = forme de pilule */
    transition: background-color 0.2s;
}
.onglets a:hover {
    background-color: var(--sable-clair);
}
.onglets a.actif {
    color: var(--or);
    font-weight: 600;
}

/* ---------- 4. Conteneur principal ---------- */
main {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 20px;
}

section {
    margin: 80px 0;
}

/* Petit texte en capitales au-dessus d'un titre */
.surtitre {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    color: var(--taupe-doux);
    margin: 0 0 12px;
}

/* Fine ligne dorée sous un titre, comme sur les affiches */
.filet {
    width: 60px;
    height: 1px;
    background-color: var(--or);
    border: none;
    margin: 24px 0;
}
.centre { text-align: center; }
.centre .filet { margin-left: auto; margin-right: auto; }

/* Phrase manuscrite "Une peau lisse, plus longtemps" */
.manuscrit {
    font-family: 'Parisienne', cursive;
    font-size: 2rem;
    color: var(--or);
    margin: 0 0 20px;
}

/* ---------- 5. Bouton ---------- */
.bouton {
    display: inline-block;
    background-color: var(--taupe);
    color: var(--ecume);
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    transition: background-color 0.2s;
}
.bouton:hover {
    background-color: var(--or);
}

/* Variante : bouton contour (fond transparent) */
.bouton-contour {
    background-color: transparent;
    color: var(--taupe);
    border: 1px solid var(--or);
}
.bouton-contour:hover {
    background-color: var(--or);
    color: var(--ecume);
}

/* ---------- 6. Accueil : grande zone d'ouverture ---------- */
.ouverture {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 50px;
}
.ouverture-texte {
    flex: 1;   /* prend la moitié de la place */
}
.ouverture-image {
    flex: 1;
}

/* Cadre en forme d'arche, plus doux qu'un rectangle */
.arche {
    border-radius: 300px 300px var(--arrondi) var(--arrondi);
    overflow: hidden;   /* coupe l'image qui dépasse de l'arrondi */
    aspect-ratio: 4 / 5;
}
.arche img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* l'image remplit le cadre sans être déformée */
}

/* ---------- 7. Les trois atouts ---------- */
.atouts {
    display: flex;
    gap: 20px;
    text-align: center;
}
.atout {
    flex: 1;
    padding: 30px 20px;
    border-top: 1px solid var(--sable);
}
.atout svg {
    width: 40px;
    height: 40px;
    stroke: var(--or);
    margin: 0 auto 16px;
}
.atout p {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
}

/* ---------- 8. Citation sur fond de galets ---------- */
.citation {
    position: relative;
    border-radius: var(--arrondi);
    overflow: hidden;
    padding: 90px 30px;
    text-align: center;
    background-image: url("images/galets.webp");
    background-size: cover;
    background-position: center;
}
/* Voile clair par-dessus la photo pour que le texte reste lisible */
.citation::before {
    content: "";
    position: absolute;
    inset: 0;   /* raccourci de top/right/bottom/left: 0 */
    background-color: rgba(251, 248, 243, 0.78);
}
.citation blockquote {
    position: relative;  /* passe au-dessus du voile */
    max-width: 640px;
    margin: 0 auto;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    line-height: 1.5;
}

/* ---------- 9. Mosaïque de photos ---------- */
.mosaique {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4 colonnes égales */
    gap: 12px;
}
.mosaique img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--arrondi);
}

/* ---------- 10. Bandeau d'appel (consultation gratuite) ---------- */
.bandeau {
    background-color: var(--sable-clair);
    border-radius: var(--arrondi);
    padding: 60px 30px;
    text-align: center;
}
.bandeau p {
    max-width: 560px;
    margin: 0 auto 28px;
}

/* ---------- 11. Pages intérieures ---------- */
.intro-page {
    text-align: center;
    max-width: 700px;
    margin: 60px auto;
}
.intro-page p {
    color: var(--taupe-doux);
}

/* Deux colonnes : texte + image */
.deux-colonnes {
    display: flex;
    align-items: center;
    gap: 50px;
}
.deux-colonnes > * {
    flex: 1;
}
/* Ajouter la classe "inverse" met l'image à gauche */
.deux-colonnes.inverse {
    flex-direction: row-reverse;
}
.photo-arrondie {
    border-radius: var(--arrondi);
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Liste en "pastilles" (zones traitées) */
.pastilles {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pastilles li {
    border: 1px solid var(--sable);
    border-radius: 999px;
    padding: 6px 18px;
    background-color: #fff;
}

/* Liste avec petite puce dorée */
.liste-or {
    list-style: none;
    padding: 0;
}
.liste-or li {
    padding-left: 24px;
    position: relative;
    margin: 10px 0;
}
.liste-or li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 10px;
    height: 1px;
    background-color: var(--or);
}

/* Cartes (grille qui s'adapte toute seule au nombre de colonnes) */
.cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.carte {
    background-color: var(--sable-clair);
    border-radius: var(--arrondi);
    padding: 28px;
}
.carte h3 {
    margin-bottom: 10px;
}
.carte p {
    margin: 0;
}
.carte .chiffre {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.2rem;
    color: var(--or);
    line-height: 1;
    margin-bottom: 10px;
}

/* Encadré important (contre-indications) */
.encadre {
    border: 1px solid var(--or);
    border-radius: var(--arrondi);
    padding: 40px;
    background-color: #fff;
}

.important {
    font-weight: 600;
}

/* Tableau de tarifs */
.tarifs {
    max-width: 700px;
    margin: 0 auto;
}
.ligne-tarif {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sable);
}
.ligne-tarif span:last-child {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--or);
    white-space: nowrap;   /* le prix ne se coupe jamais sur deux lignes */
}

/* Coordonnées */
address {
    font-style: normal;
}
.horaires {
    list-style: none;
    padding: 0;
}
.horaires li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--sable);
    padding: 8px 0;
}

/* ---------- 12. Pied de page ---------- */
footer {
    margin-top: 100px;
    padding: 50px 20px 30px;
    background-color: var(--sable-clair);
    text-align: center;
    font-size: 0.9rem;
}
footer .logo-jade {
    font-size: 1.6rem;
}
footer p {
    margin: 6px 0;
}
.pied-liens {
    margin-top: 20px;
    color: var(--taupe-doux);
}
.pied-liens a {
    color: var(--taupe-doux);
}

/* ---------- 13. Téléphones et petites tablettes ---------- */
@media (max-width: 768px) {
    .onglets a {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    /* Tout ce qui était côte à côte passe en colonne */
    .ouverture,
    .deux-colonnes,
    .deux-colonnes.inverse,
    .atouts {
        flex-direction: column;
        gap: 30px;
    }
    .ouverture {
        text-align: center;
        margin-top: 30px;
    }
    .ouverture .filet {
        margin-left: auto;
        margin-right: auto;
    }
    .arche {
        max-width: 340px;
        margin: 0 auto;
    }
    .photo-arrondie {
        aspect-ratio: 4 / 3;
    }

    /* Mosaïque : 2 colonnes au lieu de 4 */
    .mosaique {
        grid-template-columns: repeat(2, 1fr);
    }

    section {
        margin: 60px 0;
    }
    .encadre {
        padding: 24px;
    }
}
.intro-page .filet {
    margin-left: auto;
    margin-right: auto;
}