*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#faf9f4;color:#283744;font-family:"DM Sans",Arial,sans-serif;line-height:1.7}a{color:inherit}.site-header,header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:13px 6%;background:rgba(250,249,244,.97);backdrop-filter:blur(14px);border-bottom:1px solid #ddd9cc}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:#112c43}.logo{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#eee5c8;font:600 23px "Playfair Display",serif}.logo span{color:#b18a24}.brand b{display:block;font:600 20px "Playfair Display",serif}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#7a7466}nav{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:700}nav a{text-decoration:none}.menu{display:none;border:0;background:none;font-size:25px}.btn{display:inline-flex;align-items:center;gap:10px;background:#b18a24;color:#fff!important;padding:13px 20px;border-radius:7px;text-decoration:none;font-weight:700}.small{padding:9px 13px}.hero{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;min-height:650px;padding:75px 8%;gap:55px;background:radial-gradient(circle at 15% 20%,#e9edf0,transparent 44%)}.eyebrow{font-size:11px;letter-spacing:2.1px;font-weight:700;color:#b18a24;margin:0 0 12px}.hero h1{font:600 clamp(46px,6vw,76px)/1.05 "Playfair Display",serif;color:#112c43;margin:0 0 20px}.hero h1 em{font-style:normal;color:#b18a24}.lead{font-size:18px;max-width:650px;color:#59646d}.actions{display:flex;gap:24px;align-items:center;margin:26px 0}.place{font-size:13px;color:#70777b}.hero-art{height:520px;border-radius:28px;background:linear-gradient(145deg,#dce3e7,#f1ead5);display:grid;place-items:center;position:relative;overflow:hidden}.hero-art:before,.hero-art:after{content:"";position:absolute;border:1px solid rgba(17,44,67,.2);border-radius:50%}.hero-art:before{width:410px;height:410px}.hero-art:after{width:300px;height:300px}.orb{position:relative;z-index:2;width:230px;height:230px;border-radius:50%;background:#fbfaf6;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.orb span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#b18a24}.orb b{font:500 29px/1.15 "Playfair Display",serif;color:#112c43}.welcome{margin:0 8%;padding:29px 33px;display:flex;align-items:center;gap:22px;background:#f1eee4;border:1px solid #ddd7c8;border-radius:15px;transform:translateY(-28px)}.star{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#eee5c8;color:#b18a24}.section{padding:92px 8%}.two{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.section h2{font:600 clamp(35px,4vw,52px)/1.12 "Playfair Display",serif;color:#112c43;margin:0 0 20px}.section p{color:#5d666b}.outline{display:inline-block;border:1px solid #b18a24;padding:10px 17px;border-radius:7px;color:#8d6d16;text-decoration:none;font-weight:700;margin-top:12px}.process{background:#eef1f2;border-radius:22px;padding:35px;border-left:4px solid #b18a24}.process span,.grid article>span{font-size:10px;letter-spacing:2px;color:#b18a24;font-weight:700}.process h3{font:500 29px "Playfair Display",serif;color:#112c43;margin:4px 0}.tinted{background:#f3f0e7}.heading{max-width:760px;text-align:center;margin:0 auto 42px}.grid{max-width:1160px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid article{background:#fff;border:1px solid #dfd9ca;border-radius:14px;padding:25px;min-height:250px}.grid h3{font:600 23px/1.2 "Playfair Display",serif;color:#112c43;margin:9px 0}.grid p{font-size:13px}.grid a{font-size:12px;font-weight:700;color:#8d6d16;text-decoration:none}.quote{padding:65px 8%;background:#112c43;color:#fff;text-align:center}.quote p{font:500 38px "Playfair Display",serif;margin:0}.photo-slot{height:450px;border:2px dashed #b18a24;border-radius:22px;background:#f4f0e3;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8d6d16}.photo-slot span{font-size:12px;margin-top:8px}.signature{font:italic 24px "Playfair Display",serif!important;color:#8d6d16!important}.prices{max-width:1000px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.prices div{background:#fff;border:1px solid #dfd9ca;border-radius:11px;padding:19px 21px;display:grid;grid-template-columns:1fr auto;gap:3px 15px}.prices b{font-size:14px;color:#112c43}.prices strong{font:600 23px "Playfair Display",serif;color:#b18a24}.prices small{grid-column:1/-1;color:#777;font-size:11px}.note{max-width:1000px;margin:20px auto 0;font-size:11px!important}.gift{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:center;background:#fff}.gift-card{height:310px;border-radius:20px;background:#112c43;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.gift-card span{font-size:50px;color:#b18a24}.gift-card b{font:500 35px "Playfair Display",serif}.testimonials{text-align:center}.testimonial{max-width:750px;margin:25px auto 0;padding:35px;background:#edf0f1;border-radius:17px;border-top:3px solid #b18a24}.testimonial>b{font:500 50px "Playfair Display",serif;color:#b18a24}.testimonial p{font:500 23px/1.5 "Playfair Display",serif;color:#233746}.appointment{padding:60px 8%;display:flex;justify-content:space-between;gap:45px;align-items:center;background:#b18a24;color:#fff}.appointment .eyebrow{color:#fff}.appointment h2{font:600 40px "Playfair Display",serif;color:#112c43;margin:0}.contact-actions{display:flex;flex-direction:column;gap:13px;min-width:310px}.contact-actions a:not(.btn){text-decoration:none;color:#fff}.white{background:#fff;color:#112c43!important}.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact a:not(.outline){color:#8d6d16}.map{min-height:310px;border-radius:20px;background:#e8ecec;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#112c43}.map b{font:500 30px "Playfair Display",serif}.map small{font-size:12px}footer{padding:27px 8%;border-top:1px solid #ddd9cc;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;color:#777}@media(max-width:1080px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.menu{display:block}nav{display:none;position:absolute;top:75px;left:0;right:0;background:#faf9f4;padding:18px 6%;flex-direction:column;align-items:stretch}.nav-open{display:flex}.hero,.two,.contact,.gift{grid-template-columns:1fr}.hero{padding:55px 6%}.hero-art{height:360px}.welcome{margin:0 6%;padding:24px;transform:translateY(-20px)}.section{padding:68px 6%}.grid,.prices{grid-template-columns:1fr}.quote p{font-size:29px}.appointment{display:block;padding:48px 6%}.contact-actions{min-width:0;margin-top:25px}.photo-slot{height:320px}.actions{flex-direction:column;align-items:flex-start}}
/* =========================================================
   CORRECTIONS RESPONSIVE - MOBILE
   ========================================================= */

/* Empêche les éléments de dépasser leur parent */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

/* Tous les conteneurs restent dans la largeur de l'écran */
main,
section,
header,
footer,
article,
div {
    max-width: 100%;
}

/* Images responsives */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Les liens et textes longs peuvent revenir à la ligne */
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
small,
strong,
b {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* =========================================================
   TABLETTE / MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body {
        font-size: 16px;
    }

    /* ---------- HEADER ---------- */

    header {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .brand {
        max-width: calc(100% - 60px);
    }

    .brand img {
        width: 55px;
        height: 55px;
        object-fit: cover;
    }

    /* ---------- TITRES ---------- */

    h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.15;
    }

    h2 {
        font-size: clamp(1.6rem, 6vw, 2.4rem);
        line-height: 1.2;
    }

    h3 {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    /* Le <br> du titre ne doit pas forcer une largeur bizarre */
    .hero h1 br {
        display: none;
    }

    /* ---------- HERO ---------- */

    .hero {
        width: 100%;
        padding: 50px 20px;
    }

    .hero > div {
        width: 100%;
        min-width: 0;
    }

    .hero .actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    .hero .actions a {
        width: 100%;
        text-align: center;
    }

    /* ---------- SECTIONS ---------- */

    .section {
        width: 100%;
        padding: 50px 20px;
    }

    /* ---------- COLONNES ---------- */

    .two {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 35px;
    }

    .two > * {
        width: 100%;
        min-width: 0;
    }

    /* ---------- GRILLE ---------- */

    .grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 20px;
    }

    .grid article {
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .grid article a {
        display: inline-block;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* ---------- PROCESS ---------- */

    .process {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .process > div {
        min-width: 0;
        width: 100%;
    }

    /* ---------- TARIFS ---------- */

    .prices {
        width: 100%;
    }

    .prices > div {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: start;
    }

    .prices b {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .prices strong {
        white-space: nowrap;
    }

    .prices small {
        grid-column: 1 / -1;
        overflow-wrap: anywhere;
    }

    /* ---------- TÉMOIGNAGES ---------- */

    .testimonial {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .testimonial p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* ---------- CONTACT ---------- */

    .contact {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 30px;
    }

    .contact > div {
        width: 100%;
        min-width: 0;
    }

    .contact img {
        max-width: 100%;
        height: auto;
    }

    /* Email et téléphone */
    .contact a {
        overflow-wrap: anywhere;
    }

    /* ---------- RENDEZ-VOUS ---------- */

    .appointment {
        width: 100%;
        padding: 45px 20px;
    }

    .contact-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-actions a {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* ---------- BOUTONS ---------- */

    .btn,
    .outline {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* ---------- FOOTER ---------- */

    footer {
        width: 100%;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    footer span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   PETITS TÉLÉPHONES
   ========================================================= */

@media (max-width: 480px) {

    .section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero {
        padding-left: 15px;
        padding-right: 15px;
    }

    h1 {
        font-size: 1.9rem;
    }

    h2 {
        font-size: 1.55rem;
    }

    .prices > div {
        grid-template-columns: 1fr;
    }

    .prices strong {
        white-space: normal;
    }

    .btn,
    .outline {
        width: 100%;
        text-align: center;
    }
}


/* =========================================================
   CORRECTION FINALE RESPONSIVE
   Empêche les contenus longs de sortir de leurs cadres.
   ========================================================= */

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

p, h1, h2, h3, h4, h5, h6, a, span, small, b, strong {
    max-width: 100%;
    overflow-wrap: break-word;
}

@media (max-width: 800px) {

    /* Les éléments de grille/flex doivent pouvoir rétrécir */
    .hero > *,
    .two > *,
    .gift > *,
    .contact > *,
    .appointment > *,
    .grid > article,
    .prices > div,
    .process > div {
        min-width: 0;
        max-width: 100%;
    }

    /* HERO */
    .hero {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .hero h1 {
        font-size: clamp(32px, 9vw, 52px);
        line-height: 1.12;
        overflow-wrap: normal;
    }

    .hero h1 br {
        display: none;
    }

    .lead {
        max-width: 100%;
    }

    .hero-art {
        width: 100%;
        max-width: 100%;
        height: min(360px, 85vw);
    }

    .hero-art:before {
        width: min(310px, 75vw);
        height: min(310px, 75vw);
    }

    .hero-art:after {
        width: min(230px, 58vw);
        height: min(230px, 58vw);
    }

    .orb {
        width: min(190px, 48vw);
        height: min(190px, 48vw);
        padding: 15px;
    }

    .orb b {
        font-size: clamp(22px, 6vw, 29px);
    }

    /* HEADER */
    header,
    .site-header {
        width: 100%;
        min-width: 0;
    }

    .brand {
        min-width: 0;
        max-width: calc(100% - 55px);
    }

    .brand b,
    .brand small {
        overflow-wrap: normal;
    }

    /* BLOCS DE CONTENU */
    .section,
    .welcome,
    .appointment,
    .quote {
        max-width: 100%;
    }

    /* CARTES */
    .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid article {
        min-width: 0;
        overflow: hidden;
    }

    .grid article h3,
    .grid article p,
    .grid article a {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* TARIFS : la description et les noms longs reviennent à la ligne */
    .prices {
        grid-template-columns: minmax(0, 1fr);
    }

    .prices > div {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        min-width: 0;
    }

    .prices b {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .prices strong {
        white-space: nowrap;
    }

    .prices small {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* RENDEZ-VOUS / CONTACT */
    .contact-actions {
        width: 100%;
        min-width: 0;
    }

    .contact-actions a {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .contact a,
    .contact p {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* FOOTER */
    footer > * {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 480px) {

    .hero,
    .section,
    .appointment {
        padding-left: 15px;
        padding-right: 15px;
    }

    .welcome {
        margin-left: 15px;
        margin-right: 15px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .actions {
        width: 100%;
    }

    .actions a {
        max-width: 100%;
    }

    .prices > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .prices strong {
        white-space: normal;
    }

    .quote p {
        font-size: clamp(24px, 7vw, 29px);
    }
}