/* Fichier compilé depuis asset/scss/index.scss - mobile-first */

@font-face{font-family:'DIN Pro';src:url('../font/DINPro-Bold.woff2') format('woff2');font-weight:bold;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica LT Std';src:url('../font/HelveticaLTStd-Roman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* Common */
html{scroll-padding-top:90px}
body{padding:0;margin:0;font-family:'DIN Pro',Arial,Helvetica,sans-serif;color:#1D1D1B;background:#FFFFFF}
*,*:before,*:after{box-sizing:border-box}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:normal}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;transition:all .45s ease-in-out}
a:hover,a:focus,a:active{outline:none;text-decoration:none;box-shadow:none}
p,ul,ol{margin:0}
main{max-width:1200px;margin:0 auto}

/* Header (mobile : logo centré) */
#header{background:#FFFFFF}
#header .contenu{max-width:1200px;margin:0 auto;padding:10px 20px;min-height:71px;display:flex;align-items:center;justify-content:center;gap:10px}
#header .logo{display:block}
#header .logo img{width:120px;height:auto}
#header .dates{display:none;font-family:'DIN Pro',Arial,sans-serif;font-weight:bold;font-size:24px;line-height:1.2;color:#1D1D1B;text-align:center}

/* Footer (mobile : colonnes empilées) */
#footer{background:#1D1D1B;color:#FFFFFF;font-family:'DIN Pro',Arial,sans-serif}
#footer .top{padding:17px 20px;text-align:center}
#footer .top a{color:#FFFFFF;font-weight:500;font-size:14px;text-decoration:underline}
#footer .contenu{max-width:1200px;margin:0 auto;padding:30px 20px 50px;display:flex;flex-direction:column;gap:25px;font-size:13px;line-height:1.45}
#footer .apropos h2{font-weight:bold;font-size:15px;margin-bottom:12px}
#footer .apropos p{margin-bottom:20px}
#footer .apropos .cta{display:inline-block;background:#DA3832;color:#FFFFFF;padding:11px 22px;font-size:14px;border-radius:3px}
#footer .liens a{display:block;color:#FFFFFF;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.25);width:175px;max-width:100%}
#footer .adresse p{margin-bottom:18px}
#footer .adresse a{color:#FFFFFF;text-decoration:underline}
#footer .reseaux{align-self:center;text-align:center}
#footer .reseaux ul{list-style:none;padding:0;display:flex;justify-content:center;gap:14px;margin-bottom:25px}
#footer .reseaux ul li a{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:#FFFFFF;font-size:22px}
#footer .reseaux .partner{width:120px;height:auto;margin:0 auto}

/* Bientot (mobile : logo sur blanc, hero jaune dessous) */
#page_bientot{background:#FFFFFF}
#page_bientot main{max-width:none}
#page_bientot #bientot{min-height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center}
#page_bientot #bientot .logo{padding:18px 0}
#page_bientot #bientot .logo img{width:120px;height:auto}
#page_bientot #bientot .hero{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:35px 20px 45px;background:#FEE211 url('../img/bientot-bg.png') center/cover no-repeat}
#page_bientot #bientot h1{font-family:'DIN Pro',Arial,sans-serif;font-weight:bold;font-size:26px;line-height:1.3;color:#1D1D1B}
#page_bientot #bientot .accroche{width:254px;max-width:90%;height:auto;margin:4px 0}
#page_bientot #bientot p{font-family:'Helvetica LT Std',Arial,sans-serif;font-weight:400;font-size:22px;line-height:1.33;color:#1D1D1B}
#page_bientot #bientot .accroche2{width:300px;max-width:90%;height:auto;margin-top:10px}

/* ===== Tablette / Desktop ===== */
@media (min-width:768px){
	/* Header : logo gauche + dates droite */
	#header .contenu{justify-content:space-between}
	#header .dates{display:block}

	/* Footer : 4 colonnes en ligne */
	#footer .contenu{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:30px}
	#footer .col{flex:1 1 200px}
	#footer .apropos{flex:1 1 320px}
	#footer .reseaux{flex:0 1 auto;align-self:auto;text-align:left}
	#footer .reseaux ul{justify-content:flex-start}
	#footer .reseaux .partner{margin:0}

	/* Bientot : tout sur le fond jaune */
	#page_bientot #bientot{justify-content:center;gap:22px;padding:40px 20px;background:#FEE211 url('../img/bientot-bg.png') center/cover no-repeat}
	#page_bientot #bientot .logo{padding:0}
	#page_bientot #bientot .hero{flex:0 1 auto;width:auto;max-width:800px;gap:16px;padding:0;background:none}
	#page_bientot #bientot .accroche{width:314px}
	#page_bientot #bientot p{font-size:24px}
	#page_bientot #bientot .accroche2{width:400px}
}