/* Pas si sorcier : blanc, vert sapin, émeraude, rose poudré, menthe · Epilogue + Alegreya */
@font-face{font-family:"Epilogue";src:url(polices/epilogue-normal-500-800.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya";src:url(polices/alegreya-normal-400-700.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya";src:url(polices/alegreya-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{--blanc:#ffffff;--sapin:#10261f;--texte:#24342e;--doux:#5b6b64;--emer:#0b8f6a;--emer-f:#076b4f;--rose:#f6c9d0;--rose-f:#e89aa7;--menthe:#e3f4ee;--filet:#dde7e2}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--blanc);color:var(--texte);font:400 19px/1.62 "Alegreya",Georgia,serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.w{max-width:1200px;margin:0 auto;padding:0 28px}
.etroit{max-width:780px}
h1,h2,h3,.logo,.rub,.btn,nav,.duree,.pastille,.fil,.infos,.pied h2,.mini{font-family:"Epilogue",system-ui,sans-serif}
h1,h2,h3{color:var(--sapin);font-weight:800;line-height:1.08;letter-spacing:-.025em}
mark{background:linear-gradient(transparent 58%,var(--rose) 58%,var(--rose) 92%,transparent 92%);color:inherit;padding:0 .08em}
/* en-tête */
.entete{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);border-bottom:2px solid var(--sapin)}
.entete .haut{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
.logo{font-weight:800;font-size:25px;letter-spacing:-.04em;color:var(--sapin);text-decoration:none;white-space:nowrap}
.logo span{color:var(--emer)}
.entete nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.entete nav a{display:block;text-decoration:none;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;color:var(--sapin)}
.entete nav a:hover,.entete nav a[aria-current]{background:var(--menthe)}
.entete nav a.tout{background:var(--sapin);color:#fff}
/* boutons */
.btn{display:inline-block;background:var(--emer);color:#fff;text-decoration:none;font-weight:700;font-size:15.5px;padding:14px 24px;border-radius:12px;border:2px solid var(--emer)}
.btn:hover{background:var(--emer-f);border-color:var(--emer-f)}
.btn.trait{background:transparent;color:var(--sapin);border-color:var(--sapin)}
.pastille{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--rose);color:var(--sapin);padding:6px 12px;border-radius:999px}
.pastille.vert{background:var(--menthe);color:var(--emer-f)}
/* héros */
.heros{padding-top:60px;padding-bottom:30px}
.heros h1{font-size:clamp(44px,7vw,96px);max-width:1000px}
.heros .sous{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-top:34px}
.heros p{font-size:21px;max-width:560px}
.heros .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.heros figure{margin-top:46px;position:relative}
.heros figure img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:22px}
.heros .bulle{position:absolute;right:28px;bottom:-26px;background:var(--sapin);color:#fff;font-family:"Epilogue",sans-serif;font-weight:700;font-size:15px;padding:16px 20px;border-radius:16px;max-width:300px;line-height:1.35}
/* sections */
.bloc{padding:76px 0}
.bloc.menthe{background:var(--menthe)}
.sec-tete{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}
.sec-tete h2{font-size:clamp(30px,3.6vw,46px)}
.sec-tete a{font-family:"Epilogue",sans-serif;font-weight:700;font-size:15px;color:var(--emer);text-decoration:none}
/* questions */
.questions{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.question{display:flex;gap:18px;align-items:flex-start;text-decoration:none;background:#fff;border:2px solid var(--sapin);border-radius:18px;padding:22px 24px;transition:transform .15s}
.question:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--sapin)}
.question .q{font-family:"Epilogue",sans-serif;font-weight:800;font-size:28px;color:var(--emer);line-height:1}
.question b{display:block;font-family:"Epilogue",sans-serif;font-size:19px;font-weight:700;color:var(--sapin);line-height:1.25}
.question span{display:block;font-size:16.5px;color:var(--doux);margin-top:6px}
/* une */
.alaune{display:grid;grid-template-columns:1.35fr 1fr;gap:28px}
.alaune .droite{display:grid;gap:28px}
/* cartes */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.carte{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--filet);border-radius:18px;overflow:hidden;transition:border-color .2s}
.carte:hover{border-color:var(--sapin)}
.carte .ph{aspect-ratio:3/2;overflow:hidden}
.carte .ph img{width:100%;height:100%;object-fit:cover}
.carte .corps{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.carte .rub{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--emer)}
.carte h3{font-size:21px;margin:8px 0 8px}
.carte p{font-size:16.5px;color:var(--doux)}
.carte .duree{margin-top:auto;padding-top:14px;font-size:13px;color:var(--doux);font-weight:500}
.carte.grande .ph{aspect-ratio:16/10}
.carte.grande h3{font-size:30px}
.alaune .droite .carte{flex-direction:row}
.alaune .droite .carte .ph{flex:0 0 42%;aspect-ratio:auto}
/* rubriques */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.tuile{display:flex;flex-direction:column;text-decoration:none;border-radius:18px;padding:24px;background:var(--menthe);min-height:190px}
.tuile:nth-child(2n){background:var(--rose)}
.tuile:nth-child(3n){background:var(--sapin);color:#fff}
.tuile:nth-child(3n) b{color:#fff}
.tuile b{display:block;font-family:"Epilogue",sans-serif;font-weight:800;font-size:21px;color:var(--sapin);line-height:1.15}
.tuile span{display:block;font-size:16px;margin-top:10px}
.tuile i{margin-top:auto;padding-top:16px;font-style:normal;font-family:"Epilogue",sans-serif;font-size:13px;font-weight:700}
/* duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.duo img{border-radius:22px;width:100%;aspect-ratio:4/3;object-fit:cover}
.duo h2{font-size:clamp(28px,3.2vw,40px);margin:14px 0}
.duo p{margin-bottom:24px}
/* article */
.fil{font-size:13.5px;font-weight:500;color:var(--doux);margin-bottom:20px}
.fil a{color:var(--emer);text-decoration:none}
.b-tete-fond{background:var(--menthe);padding:54px 0 40px;margin-bottom:-90px;padding-bottom:130px}
.b-tete .rub{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--emer)}
.b-tete h1{font-size:clamp(34px,4.8vw,58px);margin:12px 0 18px}
.chapo{font-size:21.5px;line-height:1.55}
.infos{margin-top:16px;font-size:13.5px;color:var(--doux);font-weight:500}
.b-photo{margin-bottom:44px;max-width:1000px}
.b-photo img{width:100%;max-height:540px;object-fit:cover;border-radius:22px}
.texte h2{font-size:31px;margin:48px 0 14px}
.texte h3{font-size:22px;margin:30px 0 10px}
.texte p{margin-bottom:18px}
.texte ul,.texte ol{margin:0 0 20px 24px}
.texte li{margin-bottom:8px}
.texte li::marker{color:var(--emer);font-weight:700}
.texte a{color:var(--emer-f);text-decoration-color:var(--rose-f);text-decoration-thickness:3px;text-underline-offset:3px}
.texte strong{color:var(--sapin)}
.encadre{margin:40px 0 0;padding:22px 26px;border:2px solid var(--sapin);border-radius:18px;box-shadow:6px 6px 0 var(--rose)}
.encadre b{display:block;font-family:"Epilogue",sans-serif;font-size:16px;color:var(--sapin);margin-bottom:6px}
.encadre p{font-size:17px}
/* listes */
.c-tete{padding:56px 0 40px}
.c-tete h1{font-size:clamp(38px,5vw,64px)}
.c-tete .intro{font-size:20px;color:var(--doux);margin-top:14px;max-width:700px}
.voisins{margin:56px 0 76px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.voisins span{font-family:"Epilogue",sans-serif;font-weight:700;font-size:14px}
.voisins ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.voisins a{display:block;font-family:"Epilogue",sans-serif;font-size:14px;font-weight:600;text-decoration:none;background:var(--menthe);padding:8px 14px;border-radius:999px}
main>.w>.grille{margin-bottom:76px}
/* pied */
.pied{background:var(--sapin);color:#cfdcd6;padding:60px 0 30px;font-size:16.5px}
.pied .g{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.pied .logo{color:#fff;font-size:28px}
.pied .logo span{color:var(--rose)}
.pied p{margin-top:12px;max-width:420px}
.pied h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);margin-bottom:12px;font-weight:700}
.pied ul{list-style:none}
.pied li{margin-bottom:6px}
.pied a{text-decoration:none;color:#fff}
.pied .bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-family:"Epilogue",sans-serif;font-size:13px}
@media (max-width:900px){
 .heros .sous,.duo,.alaune{grid-template-columns:1fr;gap:26px}
 .questions{grid-template-columns:1fr}
 .grille{grid-template-columns:1fr 1fr}
 .pied .g{grid-template-columns:1fr 1fr}
 .pied .g>div:first-child{grid-column:1/-1}
 .entete nav li:not(:last-child){display:none}
}
@media (max-width:600px){
 body{font-size:18px}
 .w{padding:0 16px}
 .logo{font-size:21px}
 .heros{padding-top:36px}
 .heros figure img{aspect-ratio:4/3;border-radius:16px}
 .heros .bulle{position:static;margin-top:12px;max-width:none}
 .grille{grid-template-columns:1fr}
 .alaune .droite .carte{flex-direction:column}
 .alaune .droite .carte .ph{aspect-ratio:3/2}
 .bloc{padding:54px 0}
 .sec-tete{flex-direction:column;align-items:flex-start;gap:6px}
 .pied .g{grid-template-columns:1fr}
 .entete nav a.tout{padding:8px 12px;font-size:13px}
}