@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,340;1,9..144,420&display=swap');
:root{
  --creme:#F5F1E8; --beige:#F0E8D8; --olive:#3F6564; --vfonce:#2F4F4E;
  --chip:#FAF5E9; --chip-b:#A8C2C0; --encre:#39413F; --filet:#C2D2D0;
  --rose:#A5624F; --sauge:#6F9799; --feutree:#A6B8AF;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Jost',sans-serif;font-weight:300;font-size:19px;line-height:1.7;color:var(--encre);background:var(--creme)}
.titre{font-family:'Cormorant Garamond',serif;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--olive);line-height:1.15}

header{display:flex;align-items:center;justify-content:space-between;padding:16px 54px;flex-wrap:wrap;gap:12px;position:sticky;top:0;z-index:100;background:var(--creme);box-shadow:0 1px 8px rgba(63,101,100,.10)}
.marque{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:44px;letter-spacing:2px;color:#E07A3F;text-decoration:none;line-height:1}
.marque .ologo{height:37px;vertical-align:-4px;margin:0 1px}
.marque span{display:block;font-family:'Fraunces',serif;font-style:italic;font-weight:420;font-size:17px;letter-spacing:.5px;color:#E07A3F;text-transform:none;margin-top:3px}
nav a{margin-left:28px;text-decoration:none;color:var(--encre);font-size:17px;letter-spacing:1.5px;text-transform:uppercase;font-weight:400}
nav a:hover,nav a.actif{color:var(--olive);border-bottom:2px solid var(--olive);padding-bottom:3px}

.btn{display:inline-block;border:1.5px solid var(--olive);color:var(--olive);text-decoration:none;
     padding:13px 32px;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;background:transparent}
.btn:hover{background:var(--olive);color:var(--creme)}
.btn-creme{border-color:var(--creme);color:var(--creme)}
.btn-creme:hover{background:var(--creme);color:var(--vfonce)}
.note{display:block;margin-top:12px;font-size:14px;color:#8a857a}

.bandeau{background:var(--beige);text-align:center;padding:46px 24px 42px;border-bottom:1.5px solid #E0CCC2}
.bandeau .sur{font-size:17px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:#A5624F;margin-bottom:10px}
.bandeau h1{font-size:44px;max-width:820px;margin:0 auto;color:#2F4F4E}
.bandeau .sous{font-style:italic;font-family:'Cormorant Garamond',serif;font-size:22px;color:#A5624F;margin-top:10px;text-transform:none;letter-spacing:0}

section{max-width:1140px;margin:0 auto;padding:64px 54px}
.band{padding:70px 0}
.band .wrap{max-width:1140px;margin:0 auto;padding:0 54px}
.band-or{background:#F2E0D8}
.band-feutree{background:var(--feutree)}
.band-feutree h2.titre,.band-feutree .sec-label{color:#2F4F4E}
.band-feutree h2.titre::after{background:#FBF8F0}
.band-creme{background:var(--creme)}
.band-feutree .illu{background:#F5F1E8;color:#8FA39B}
.band-or .case{background:#FBF5F0}
.band-petrole{background:var(--feutree);color:#2E3833}
.band-petrole h2,.band-petrole h3{color:#2F4F4E;font-family:'Cormorant Garamond',serif}
.band-petrole .illu{background:#F5F1E8;color:#9C8E6E;box-shadow:14px 14px 0 rgba(233,207,195,.75)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.split .illu{min-height:340px}
.split h3{font-family:'Fraunces',serif;font-style:italic;font-weight:420;font-size:31px;margin-bottom:14px;line-height:1.15}
.split p+p{margin-top:14px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.inner{max-width:720px;margin:0 auto}
.inner p+p{margin-top:16px}
.sec-label{font-size:17px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--rose);margin-bottom:8px}
h2.titre{font-size:34px;margin-bottom:28px;position:relative;padding-bottom:16px}
h2.titre::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:2.5px;background:var(--rose)}
h2.titre.sans-filet::after{display:none}
h2.titre.sans-filet{padding-bottom:0}

.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;background:var(--beige);border-bottom:3px solid var(--rose)}
.hero .gauche{display:flex;flex-direction:column;justify-content:center;padding:40px 40px 40px 130px}
.hero .illu{max-width:420px;min-height:0;margin:40px 58px 40px 10px;justify-self:center;border:2px solid #3F6564;box-shadow:18px 18px 0 rgba(63,101,100,.40)}
.hero .illu img{height:auto;object-fit:contain}
.hero h1{font-size:36px;margin-bottom:16px}
.hero .sous{font-size:18.5px;max-width:440px;margin-bottom:28px}
.illu{background:var(--feutree);display:flex;align-items:center;justify-content:center;text-align:center;
      color:#F5F1E8;font-size:12px;letter-spacing:2px;text-transform:uppercase;min-height:200px;
      border:1.5px solid #3F6564;box-shadow:18px 18px 0 #E5C2B2;border-radius:16px}
.illu.arche{border-radius:170px 170px 16px 16px}
.illu.pastille{border-radius:50%;aspect-ratio:1/1}
.illu.pastille img{height:100%;object-fit:cover}
.illu{overflow:hidden}
.illu img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.cercle-stat{width:140px;height:140px;border:2px solid #F5F1E8;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 20px;gap:2px}
.cercle-stat b{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;line-height:1}
.cercle-stat span{font-size:12.5px;letter-spacing:2px;text-transform:uppercase}

.grille-num{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grille-num .case{border:1px solid var(--filet);border-top:4px solid var(--sauge);border-radius:14px}
.case{border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);border-top:4px solid var(--sauge);padding:24px 22px;min-height:130px;background:var(--feutree)}
.case p{color:#2E3833}
.case .num{font-family:'Cormorant Garamond',serif;font-size:22px;color:#2F4F4E;font-weight:600;
  width:46px;height:46px;border:1.5px solid #2F4F4E;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.case p{font-size:16px}
.deux-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.chute{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;font-style:italic;color:var(--rose);margin:18px 0 24px}

.carte{display:grid;grid-template-columns:1fr 1fr;margin-bottom:4px}
.carte:nth-child(odd) .illu{order:2}
.carte .texte{background:var(--beige);padding:46px 50px;display:flex;flex-direction:column;justify-content:center}
.carte:nth-child(even) .texte{background:#DFE7E1}
.carte h3{font-family:'Fraunces',serif;font-style:italic;font-weight:420;text-transform:none;letter-spacing:0;font-size:30px;color:var(--olive);margin-bottom:12px;line-height:1.15}
.carte p+p{margin-top:12px}
.carte strong{font-weight:500}

.offre{background:var(--beige);padding:48px 54px;margin-bottom:38px;border:1px solid #E0CCC2;box-shadow:12px 12px 0 rgba(166,184,175,.5)}
.offre h3{font-family:'Fraunces',serif;font-style:italic;font-weight:420;text-transform:none;letter-spacing:0;font-size:29px;color:var(--olive);margin-bottom:6px;line-height:1.15}
.offre .pour{font-style:italic;font-weight:500;font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--rose);margin-bottom:16px}
.offre p+p{margin-top:12px}
.offre .btn{margin-top:22px}
.avant{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;font-style:italic;color:var(--rose)}

.chips{display:flex;flex-direction:column;gap:11px}
.chip{background:var(--chip);border:1px solid var(--chip-b);border-left:4px solid var(--sauge);padding:16px 24px;font-size:18px;color:var(--vfonce)}

.bande{background:var(--olive);color:var(--creme)}
.bande .inner{max-width:720px;margin:0 auto;text-align:center;padding:76px 24px}
.bande h2{font-family:'Cormorant Garamond',serif;font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:32px;margin-bottom:14px}
.bande p{opacity:.92;margin-bottom:28px}

details{border-bottom:1px solid var(--filet);padding:18px 4px}
details:first-of-type{border-top:1px solid var(--filet)}
summary{cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--olive);letter-spacing:.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-size:24px;color:var(--olive)}
details[open] summary::after{content:"–"}
details p{padding:12px 0 4px;font-size:16.5px;max-width:860px}

form{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto}
input,textarea{font-family:'Jost',sans-serif;font-size:16px;padding:13px 16px;border:1px solid var(--filet);background:#FBFAF3;color:var(--encre)}
textarea{min-height:140px}
form button{align-self:center;border:1.5px solid var(--olive);color:var(--olive);background:transparent;
            padding:13px 34px;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;font-family:'Jost',sans-serif}
form button:hover{background:var(--olive);color:var(--creme)}

footer{background:var(--vfonce);color:#D9DBC6;padding:34px 54px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14.5px}
footer a{color:#D9DBC6;text-decoration:none;display:block;margin-bottom:5px}
footer strong{color:var(--creme);font-weight:500}

@media(max-width:900px){
  header{padding:16px 22px}
  nav{display:flex;flex-wrap:wrap;gap:8px}
  nav a{margin-left:0;margin-right:16px;font-size:12.5px}
  .hero{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .hero .gauche{padding:40px 26px}
  .bandeau h1{font-size:28px}
  section{padding:44px 22px}
  .deux-col,.carte{grid-template-columns:1fr}
  .carte:nth-child(odd) .illu{order:0}
  .carte .texte,.offre{padding:30px 24px}
}

.btn-nav{background:var(--olive);color:#F5F1E8 !important;padding:9px 18px;border-radius:24px;font-size:13px;letter-spacing:1.5px;border-bottom:none !important}
.btn-nav:hover{opacity:.88}


/* === Ajustement largeur du quiz === */
.quiz-zone{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:56px 40px 70px;
    box-sizing:border-box;
}

.resultat-texte,
.cta-quiz{
    width:100%;
}

@media (max-width:900px){
    .quiz-zone{
        max-width:100%;
        padding:40px 20px 50px;
    }
}