/* AMÉLIORATION GLOBALES */

html { scroll-behavior:smooth; }
.main-menu > li > a { white-space:nowrap; }


/* PAGE PROGRAMME D'ATTRACTION */

.attraction-entete { position:relative; width:100%; min-width:100%; margin-bottom:6rem; text-align:center; background-image:url("https://www.quartierartisan.com/wp-content/uploads/2021/08/header-QA.png"); background-size:cover; background-position:center; }
.attraction-entete h1 { display:inline-block; max-width:780px; padding:0 4rem; color:#fff; font-size:5rem; font-weight:600; font-family:Montserrat, Sans-serif; line-height:62px; letter-spacing:0.6px;text-transform:none; }
.attraction-entete h1:after { content:"De l'idée au quartier"; display:inline-block; position:relative; bottom:1em; width:100%; max-width:780px; color:#f17b4b; font-family:"Montserrat", Sans-serif; font-size:2rem; font-weight:600; }
.attraction-entete .sepia { padding:24vh 0; background-color:rgba(113, 32, 51, 0.7); }

.attraction p { max-width:780px; margin:0 auto 2rem; padding-left:2rem; padding-right:2rem;}
.attraction h2 { margin:0 0 1rem; padding-left:2rem; padding-right:2rem; color:#f17b4b; font-size:3.8rem; font-weight:900; font-family:"Montserrat", Sans-serif; }
.attraction h3 { max-width:780px; margin:0 0 2rem; margin-left:2rem; margin-right:2rem; padding:4.6rem 2rem; color:#f17b4b; font-size:2.4rem; font-weight:900; font-family:"Montserrat", Sans-serif; text-align:center; border:2px solid #fff;}
.attraction h5 { position:relative; top:1em; max-width:780px; margin:0 auto 1rem; color:#712033; font-size:1.5rem; font-weight:600; font-family:Montserrat, Sans-serif; }

.attraction iframe { display:flex; height:32vw; width:100%; margin:0 2rem 2rem; border:0; }
.attraction .wp-block-embed,
.attraction .wp-block-columns p { margin:0 0 2rem; }
.attraction .wp-block-columns p.is-style-question  { margin:0 2rem 2rem; }
.attraction .wp-block-columns h5 { padding-right:3rem; }
.attraction .wp-block-columns img { max-width:100%; margin:0 2rem 2rem; border:0; }
.attraction .wp-block-group .wp-block-group__inner-container { max-width:1200px; margin:0 auto 2rem; }

.attraction .etape { padding:3rem 6vw; }
.attraction .etape-2 { background-image:url("https://www.quartierartisan.com/wp-content/uploads/2021/09/texture-2.png"); background-size:cover; background-position:center center; }
.attraction .etape-3 { color:#fff; background-color:#712033; }
.attraction .etape-3 h5 { color:#fff; }

.attraction .interesse { padding:6rem 0; background-color:#f17b4b; background-image:url("https://www.quartierartisan.com/wp-content/uploads/2021/09/texture-4.png"); background-repeat:no-repeat; background-size:cover; }
.attraction .interesse.rouge { background:#712033; }
.attraction .interesse h2 { color:#fff; }
.attraction .interesse .champ { padding:0 2rem; text-align:center; }
.attraction .interesse .champ label { display:none; }
.attraction .interesse .champ input { display:inline-block; width:100%; max-width:720px; margin:1.2rem auto; padding:1.2rem 1.6rem; text-align:left; border:2px solid #fff; outline:0; }
.attraction .interesse .champ input:focus { border:2px solid #712033; }
.attraction .interesse .coche { width:100%; max-width:720px; margin:1rem auto; padding:1.2rem rem; }
.attraction .interesse .coche label { padding-left:1.2em; color:#fff; font-weight:600; cursor:pointer; }
.attraction .interesse .coche input { position:relative; left:0.6em; top:0.32rem; width:2rem; height:2rem; }
.attraction .interesse .bouton { min-height:8rem; text-align:center; }
.attraction .interesse .bouton input { position:relative; top:2rem; color:#fff; text-align:center; background-color:#712033; border-color:#f17b4b; }
.attraction .interesse .bouton input:hover { opacity:1; font-size:1.8rem; }
.attraction .interesse.rouge a { display:inline-block; padding:0.5em 1em; color:#fff; text-align:center; letter-spacing:1.12; background-color:#f17b4b; border-color:#712033;}
.attraction .interesse.rouge a:hover { color:#fff; }

.attraction #faq,
.attraction #etape-3,
.attraction #interesse,
.attraction #interesse-2 { scroll-margin-top:8rem; }


/* NOUVEAUX STYLES DE BLOCS */

p.is-style-capitales { padding:2rem; color:#712033; font-family:"Montserrat", Sans-serif; font-size:2rem; font-weight:700; line-height:1.2; text-transform:uppercase; }

p.is-style-question { display:inline-block; position:relative; cursor:pointer; width:calc(100% - 4rem); margin:0 2rem; padding:0.8rem 1.2rem; font-weight:700; border-bottom:1px solid rgba(248, 239, 235, 0.22); }
p.is-style-question.on { color:#f17b4b; }
.is-style-question:after { position:absolute; right:1.2rem; top:0.6rem; content:"◣"; color:#fff; font-size:1.2rem; transform:rotate(45deg); }
.is-style-question.on:after  { color:#f17b4b; transform:rotate(-45deg); }

p.is-style-reponse, .is-style-reponse { overflow:hidden; height:0px; padding:0;  }
p.is-style-reponse.on, .is-style-reponse.on { display:inline-block; overflow:visible; height:auto; margin:0 2rem 2rem; padding:0.6rem 1.2rem 1.2rem; }
.is-style-reponse p { margin:0 !important; padding:0 0.4rem 1.2em; }
.is-style-reponse a { color:#f17b4b; font-weight:600; }
.is-style-reponse ol, .is-style-reponse ul { padding:0 0 1.2rem 1.6rem; } 
.is-style-reponse li { margin-bottom:0.8rem; }

@keyframes zoom { from { font-size:1.6rem; } to { font-size:1.72rem;} }
.wp-block-buttons .is-style-filaire { height:6rem; }
.is-style-filaire input,
.wp-block-buttons .is-style-filaire a { display:inline-block; height:auto; padding:0.8em 1.2em; color:#712033; font-size:1.6rem; font-weight:600; font-family:"Montserrat", Sans-serif; background:none; border:1px solid #712033; border-radius:0; }
.is-style-filaire input:hover,
.wp-block-buttons .is-style-filaire a:hover { color:#f17b4b; font-size:1.8rem; border:1px solid #f17b4b; animation-name:zoom; animation-duration:0.2s; }

.wp-block-group.is-style-faq { padding:6rem 2rem; background-color:#F8EFEB; }
.wp-block-group.is-style-faq .wp-block-group__inner-container { max-width:720px; margin:0 auto; }
.wp-block-group.is-style-faq h2 { color:#712033; padding:2rem; }
.wp-block-group.is-style-faq p.is-style-question { padding:1.2rem 1.2rem; color:#712033; font-size:1.8rem !important; font-weight:600; border-bottom:1px solid rgba(113, 32, 51, 0.13); }
.wp-block-group.is-style-faq p.is-style-question.on { color:#f17b4b; }
.wp-block-group.is-style-faq .is-style-question:after { position:absolute; right:1.2rem; top:1.2rem; content:"◣"; color:#712033; font-size:1.2rem; transform:rotate(45deg); }
.wp-block-group.is-style-faq .is-style-question.on:after  { color:#f17b4b; right:1.6rem; transform:rotate(-45deg); }
.wp-block-group.is-style-faq .is-style-reponse.on { padding-top:1.2rem; } 
.wp-block-group.is-style-faq p.is-style-reponse { display:none; color:#21282d; font-size:1.72rem; }
.wp-block-group.is-style-faq p.is-style-reponse.on { display:inline-block; overflow:visible; height:auto; margin:0 2rem 2rem; padding:1.2rem 1.2rem 1.2rem; border-bottom:1px solid rgba(113, 32, 51, 0.13); }
.wp-block-group.is-style-faq .is-style-reponse.on p { display:inline-block; overflow:visible; height:auto; margin:0 !important; padding:0 0.4rem 1.2rem; color:#21282d; }