.intro {padding:3.5rem 0; margin: 0 auto; width: 100%; text-align:center; z-index:0; position: relative; clear: both}
.intro .surtitle {font:bold 13px 'Lato'; letter-spacing:0.2em; color:#aaa}
.intro .title-main {font-size:29px; letter-spacing:0.02em; line-height:1.5; text-transform:none}
.intro .subtitle {margin-top:2.25rem; width:250px; font-size:26px; letter-spacing:0.03em; line-height:1.35; text-transform:none; text-align:left}
.intro p {margin-top:0.7rem; line-height:1.35; text-align:justify}
.intro .line {margin:2rem auto 2.25rem 0; width:100px; height:15px; background-color: #d1c286; position:relative}
@media all and (min-width:576px) {
	.intro {padding:3.95rem 0}
	.intro .surtitle {font-size:16px}
	.intro .title-main {font-size:37px}
	.intro .subtitle {margin-top:3.5rem; font-size:32px; width:350px}
	.intro .line {margin:2.5rem auto 2.5rem 0}}
@media all and (min-width:992px) {
	.intro {padding:4.5rem 0}
	.intro .title-main {margin-bottom:3rem}
	.intro .subtitle {margin-top:1.5rem}
	.intro p {padding-left:1rem; letter-spacing:0.035em}}
@media all and (min-width:1200px) {
	.intro .subtitle {margin-top:2rem}
	.intro p {line-height:1.5; letter-spacing:0.1em}}	
/* -------------------------------------------------------- */
.section {padding-top:3.5rem; margin: 0 auto; width: 100%; z-index:0; position: relative; clear: both}
.section h2 {width:250px; font-size:30px; letter-spacing:0.025em; text-align:left}
.section .line {margin:1.75rem auto 2.5rem; width:100%; height:1px; background-color: #ccc; position:relative}
.section p {margin-bottom:1rem; text-align:justify}
.section .flexOrder-1 img:nth-of-type(1) {margin-top:1.5rem; position: relative}
.section .flexOrder-2 {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0)}
@media all and (min-width:576px) {
	.section {padding-top:4.5rem}
	.section h2 {width:100%; font-size:25px; letter-spacing:0.1em}
	.section .line {margin:1.75rem auto 3rem}
	.section .flexOrder-1 img:nth-of-type(1) {margin-top:2.5rem}}		
@media all and (min-width:992px) {
	.section h2 {padding-bottom:0}
	.section p {font-size:21px; letter-spacing:0.05em; line-height:1.35}
	.section .columns {gap:50px}
	.section .flexOrder-1 img:nth-of-type(1) {margin-top:1.35rem}
	.section .flexOrder-2 img:nth-of-type(1) {margin-top:0.75rem}
	.section .flexOrder-2 img:nth-of-type(2) {margin-top:1.5rem}
	.section .flexOrder-2 {position: static; width: auto; height: auto; overflow: visible; clip: auto}
	.section .flexOrder-2 p {margin-top:2rem}}
@media all and (min-width:1200px) {
	.section h2 {padding-bottom:0}
	.section .line {margin:1.75rem auto 3.5rem}
	.section p {font-size:22px; letter-spacing:0.1em; line-height:1.5}
	.section .columns {gap:80px}
	.section .flexOrder-2 img:nth-of-type(2) {margin-top:2.5rem}}
/* -------------------------------------------------------- */		
#process {padding-top:3.5rem; margin:3.95rem auto 0; background-color:#f7f5ef; text-align:center; width:100%; position:relative; z-index:1}
#process img {width:80px}
#process h2 {margin-top:1.8rem; font-size:19px; letter-spacing: 0.025em}
#process h2 span {font:normal 30px 'Playfair';  letter-spacing: 0.025em; display:block}
@media all and (min-width:576px) {
	#process {padding-top:3.95rem; margin:5rem auto 0}
	#process h2 {font-size:22px}
	#process h2 span {font-size:35px}}
@media all and (min-width:992px) {	
	#process {padding-top:4.5rem}
	#process h2 {font-size:25px}
	#process h2 span {font-size:25px; display:inline}}
/* -------------------------------------------------------- */
.count {padding:1rem 0 0.25rem; margin:4.5rem auto 0;  text-align:center; background-color:#fff; position: relative; width:100%; clear: both; z-index:1}								
.count .countText {margin-top:5rem; width:100%; text-align: center; position: relative}	
.count .countText .number-1,
.count .countText .number-2,
.count .countText .number-3 {margin-left:0.2rem; font:normal 150px 'Signature'; left:50%; color:#f3eede; position: absolute; z-index:-1}
.count .countText .number-1 {top:32.5%; transform: translate(-50%, -67.5%)}
.count .countText .number-2 {top:31.5%; transform: translate(-50%, -68.8%)}
.count .countText .number-3 {top:33.5%; transform: translate(-50%, -66.5%)}
.count .countText h3 {font-size: 25px; letter-spacing:0; line-height:1.35}
.count .countText-two,
.count .countText-one,
.count .countText-three {margin:2.5rem auto 0; width:280px}
@media all and (min-width:576px) {	
	.count {padding:2rem 0 1rem; margin:5rem auto 0}	
	.count .countText h3 {font-size:24px}
	.count .countText-two,
	.count .countText-one,
	.count .countText-three {width:350px}}
@media all and (min-width:992px) {	
	.count {padding:1.5rem 0 1rem}
	.count .countText .number-1,
	.count .countText .number-2,
	.count .countText .number-3 {top:30%; transform: translate(-50%, -70%)}	
	.count .countText-one {padding-right:1.5rem}
	.count .countText-two {padding:0 1rem}
	.count .countText-three {padding-left:1.5rem}
	.count .countText-two,
	.count .countText-one,
	.count .countText-three {font-size:21px; width:100%}}	
@media all and (min-width:1200px) {
	.count .countText-one {padding:0 3.5rem}
	.count .countText-two {padding:0 3rem}
	.count .countText-three {padding:0 3.5rem}}	
/* -------------------------------------------------------- TARIF */	
.package-one {padding:3.35rem 0; margin: 0 auto; background-color:#f8f8f8; text-align:center; width: 100%; z-index:0; position: relative; clear: both}
.package-one .eyebrow {margin-bottom:0.5rem; font:700 11px 'Lato'; letter-spacing:0.35em; color: #888}
.package-one h2.title {margin-bottom:2.75rem; padding-bottom:2rem; text-align:center; position: relative}
.package-one h2.title:before {bottom:-3px; width:80%; height:3px; left:50%; transform: translateX(-50%); background-color: #d1c286; content: ""; z-index: 4; position: absolute}
.package-one h2.title:after {bottom:0; content:url(../img/divider/ornement-floral-101.webp); transform: scale(0.5); width:50px; height:33px; left:50%; margin-left:-50px; z-index: 5; position:absolute; display:block}
.package-one h2.title span {display:block}
.package-one h2.title span.line-top {font:normal 18px 'Playfair'; letter-spacing:0.05em}
.package-one h2.title span.line-bottom {font:italic 30px 'Playfair'; word-spacing:-0.1em; letter-spacing:0.05em; text-transform:none}
.package-one p.text-1 {margin:0 auto; width:300px}
.package-one .package-item img {border-radius: 4px}
.package-one .package-item {margin:3rem auto 1.5rem; padding:1.5rem; border: 1px solid #e0e0e0; box-shadow: 0 10px 30px rgba(0,0,0,0.05); background-color: #fff; position:relative}
.package-one .package-item:nth-of-type(3),
.package-one .package-item:nth-of-type(4),
.package-one .package-item:nth-of-type(5) {margin-top:4.5rem}	
.package-one .package-item .content {padding:1.5rem 0 1.5rem 0.25rem; text-align: left}
.package-one .package-item .content h2.subtitle {font-size:38px; letter-spacing:0.025em; text-transform:none}
.package-one .package-item .content h3 {word-spacing:-0.15em; font-size:40px; letter-spacing:0.025em; text-transform:none}
.package-one .package-item .content p.price {margin: 1.25rem 0 2rem; font:italic 18px 'Playfair'; letter-spacing:0.025em; color: #777; text-align: left}
.package-one .package-item .content p.text-2 {text-align: justify; line-height:1.35}
.package-one .package-item .content ul {padding: 0; margin: 1.5rem 0 2.75rem}
.package-one .package-item .content ul li {margin-bottom:0.8rem; padding-left:1.25rem; font-size:20px; letter-spacing:0.025em; position: relative; text-transform:none}
.package-one .package-item .content ul li::before {left: 0; top:5px; font-size:0.7rem; content: '\2714'; font-family: FontAwesome; position: absolute}
.package-one .package-item .content ul li a {font-size:20px; letter-spacing:0.025em; border-bottom:1px dotted rgba(0,0,0,0.8)}
.package-one .package-item .content ul li a:hover {border-bottom:1px solid #8b998d}	
.package-one .package-item .content a.btn {margin:0 auto 0 0; width:100%; text-align:center; display: table}
.package-one .package-item .content a.btn span {margin-left:0.35rem; font:normal 12px "Lato"; letter-spacing:0.1em; display: inline-block; transition: all .35s ease-out}	
@media all and (min-width:576px) {
	.package-one {padding-top:3.95rem; margin-bottom:-1.5rem}
	.package-one .eyebrow {margin-bottom:0.75rem; font-size:15px}
	.package-one h2.title {margin-bottom:3.35rem; padding-bottom:2.35rem}
	.package-one h2.title:before {bottom:-2px; width:50%}
	.package-one h2.title:after {transform: scale(0.55)}
	.package-one h2.title span.line-top {font-size:23px}
	.package-one h2.title span.line-bottom {font-size:38px}
	.package-one p.text-1 {width:450px; letter-spacing:0.05em; line-height:1.35}	
	.package-one p.text-1 a {letter-spacing:0.05em}	
	.package-one .package-item {margin:3.5rem auto 2.5rem; padding: 4rem}
	.package-one .package-item:nth-of-type(3),
	.package-one .package-item:nth-of-type(4),
	.package-one .package-item:nth-of-type(5) {margin-top:5.5rem}	
	.package-one .package-item .content {padding:2rem 0.5rem 1rem}
	.package-one .package-item .content p.text-2 {line-height:1.5}
	.package-one .package-item .content ul li {margin-left:0.5rem; font-size:22px; letter-spacing:0.05em}
	.package-one .package-item .content ul li::before {top:7px}
	.package-one .package-item .content ul li a {font-size:22px; letter-spacing:0.05em}
	.package-one .package-item .content a.btn {width:300px}
	.package-one .package-item .content a.btn span {margin-left:0.75rem; font-size:13px}}
@media all and (min-width:992px) {
	.package-one {padding-top:4.5rem}
	.package-one .eyebrow {margin-bottom:0.75rem; font-size:16px; letter-spacing:1em; font-weight:normal}
	.package-one h2.title {padding-bottom:2.75rem}
	.package-one h2.title:before {width:45%}	
	.package-one h2.title span {display:inline}
	.package-one h2.title span.line-top,
	.package-one h2.title span.line-bottom {font-size:26px; font-style:normal; text-transform:none}	
	.package-one p.text-1 {width:630px; letter-spacing:0.1em; line-height:1.5}	
	.package-one p.text-1 a {letter-spacing:0.1em}
	.package-one .package-item {margin:3.95rem auto 2.5rem; padding:0 3.5rem; gap:3.25rem; align-items: center; display: flex}
	.package-one .package-item .content {padding:3.5rem 0 3.95rem}
	.package-one .package-item .content h2.subtitle {font-size:28px; letter-spacing:0}
	.package-one .package-item .content p.text-2,
	.package-one .package-item .content p.text-2 a {letter-spacing:0.05em}
	.package-one .package-item .content ul li {font-size:21px; letter-spacing:0.025em}
	.package-one .package-item .content ul li a {font-size:21px; letter-spacing:0.025em}}
@media all and (min-width:1200px) {
	.package-one h2.title:before {width:37%}	
	.package-one .package-item {padding:0 5rem 0 3.95rem; gap:5rem}}
/* -------------------------------------------------------- */		
.framework {padding-top:3.5rem; width:100%; margin:0 auto; position: relative; text-align: center; clear: both}
.framework .h4 {font:700 12px 'Lato'; letter-spacing:0.15em; line-height:1.5; color:#aaa; display:block}
.framework h2 {margin-top:0.8rem; font:500 33px 'Playfair, serif'; letter-spacing:0.025em; line-height:1}
.framework h2 span {font:500 32px 'Playfair, serif'; letter-spacing:0.025em; display:block}
.framework h3 {margin-top:0.35rem; font-size:17px; letter-spacing:0.05em; font-style:italic; text-transform:none}
.framework .line2 {margin:1.5rem auto; height:50px; width:1px; border-left:2px solid #8b998d; position: relative}
.framework p {margin:0 auto -1rem; width:315px; letter-spacing:0.035em}								
.framework section > div .number {left:-37%; top:4.65rem; font:700 37px 'Lato'; letter-spacing:-0.05em; line-height:0; transform:scaleY(0.95); color: #8b998d; text-shadow: -1px -1px 0 #fff; position: relative; z-index:2}
.framework section > div a h2 {font-size:22px; letter-spacing: 0.025em}	
.framework section > div a h2:hover {text-decoration: underline solid #333}
.framework figure {margin:5rem 0 1rem; width:100%; position: relative; display: inline-block; overflow: hidden; cursor:pointer}
.framework figure * {box-sizing: border-box; transition: all 0.45s ease}
.framework figure::after {position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-color:#fff; transition: all 0.35s ease; opacity: 0}				
.framework figure img {width:100%; height:100%; vertical-align: top; backface-visibility: hidden}
.framework figure figcaption {width:70%; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; position: absolute}
.framework figure figcaption p {font-size:19px; letter-spacing:0.025em; width:200px; transform: translateY(-100%); margin: 0 auto; opacity: 0}							
.framework figure:hover p {transform: translateY(0); opacity:0.8}
.framework figure:hover::after {top:16px; bottom:16px; left:16px; right:16px; opacity:0.9; position: absolute}						
.framework .line3 {margin:0 auto 1rem; height:35px; width: 1px; border-left: 2px solid #8b998d; position: relative}																			
@media all and (min-width:576px) {
	.framework {padding-top:5.5rem}
	.framework .h4 {font-size:13px}
	.framework h2,
	.framework h2 span {font-size:37px}
	.framework h3 {font-size:18px}		
	.framework p {margin:0 auto 0; width:550px; letter-spacing:0.1em}	
	.framework section > div .number {left:-42%; top:4.5rem; font-size:50px}
	.framework section > div a h2 {font-size:27px}	
	.framework figure figcaption p {font-size:22px; letter-spacing:0.1em; width:400px}	
	.framework figure:hover::after {top:50px; bottom:50px; left:50px; right:50px}
	.framework .line3 {margin:0 auto 1.5rem; height:50px}}						
@media all and (min-width:992px) {	
	.framework section {margin:0 auto; display: flex; justify-content: space-between; position: relative}
	.framework section > div .number {left:-37%; top:3.4rem; font-size:39px}
	.framework section > div a h2 {font-size:22px}	
	.framework section > div:nth-of-type(2) {top:50px; left:50%; transform: translateX(-50%); margin:0; position: absolute}					
	.framework figure {margin:3.7rem 0 0.7rem; max-width:285px; height:285px}						
	.framework figure figcaption p {font-size:19px; letter-spacing:0.02em; line-height:1.3; width:210px}							
	.framework figure:hover::after {top:12px; bottom:12px; left:12px; right:12px}}	
@media all and (min-width:1200px) {				
	.framework figure {max-width:340px; height:340px}
	.framework figure:hover::after {top:25px; bottom:25px; left:25px; right:25px}}
/* -------------------------------------------------------- */	
.storyTitle {padding:3.5rem 0 4.5rem; margin: 3.95rem auto 0; background-color:#f7f5ef; text-align:center; width: 100%; z-index:0; position: relative; clear: both}
.storyTitle h3 {margin-bottom:0.5rem; font-size: 15px; letter-spacing:0.15em; color: #888}
.storyTitle h2 {font-size:29px; letter-spacing:0.025em; word-spacing: -0.2em; font-weight: 700; line-height: 1.2}
.storyTitle h2 span {margin-top:1rem; font:normal 21px 'Playfair'; letter-spacing: 0.15em; word-spacing:0; color: #888; display: block}
.storyTitle .line {margin: 2rem auto; width: 60px; height: 1px; background-color: #8b998d}
.storyTitle p {text-align:justify}
.storyTitle .btn {margin-top:2.5rem; width:310px; text-align:center; display: table}
@media all and (min-width:576px) {
	.storyTitle {padding:3.95rem 0 5rem; margin-top: 5rem}
	.storyTitle h3 {margin-bottom:0.5rem; font-size: 17px}
	.storyTitle h2 {font-size:35px; word-spacing: -0.1em}
	.storyTitle h2 span {margin-top:1.5rem; font-size: 24px}
	.storyTitle .line {margin: 2.5rem auto}
	.storyTitle .btn {margin-top:3rem; width:330px}}
@media all and (min-width:992px) {
	.storyTitle {margin-top:8rem}
	.storyTitle h3 {margin-bottom:0.5rem; font-size:20px}
	.storyTitle h2 {font-size:43px}
	.storyTitle p {margin:0 auto; text-align:center; width:750px}}	
/* -------------------------------------------------------- Section Choix prix */												
.choice__price {padding:4.5rem 0; background-color:#f8f8f8; text-align:center; position: relative; clear: both}
.choice__price svg {top:-5.5rem; height:50px; fill: #8b998d; left:50%; transform: translateX(-50%) rotateZ(180deg); position: absolute; z-index:2}
.choice__price .know {margin-top:2.25rem; margin-left:0.25rem; font:normal 12px 'Lato'; letter-spacing:0.05em; color:#888}
.choice__price h2 {margin-top:1.42rem; font-size:16px; letter-spacing:0.1em; font-style:italic}
.choice__price h2 span {font:normal 23px 'Playfair'; letter-spacing:0.025em; display: block}		
.choice__price .line {margin:1.75rem auto 2rem; width:16%; border-bottom:2px solid #8b998d}
.choice__price p {text-align:justify}
.choice__price a.btn {margin:2.5rem auto 0; width:255px; text-align:center; display: table}
@media all and (min-width:576px) {	
	.choice__price {padding:6rem 0 5rem}
	.choice__price svg {top:-7.25rem; height:60px}	
	.choice__price .know {margin-top:3rem; font-size:15px}
	.choice__price h2 {margin-top:2rem; font-size:19px}
	.choice__price h2 span {font-size:27px}
	.choice__price .line {margin:2.25rem auto 2.75rem; width:13%}
	.choice__price a.btn {margin-top:3rem}}
@media all and (min-width:992px) {	
	.choice__price {padding:5.5rem 0 5rem; text-align:left}
	.choice__price svg {top:-7rem; height:65px}	
	.choice__price img {width:500px; margin: 0 auto 0 -1rem}
	.choice__price .know {margin-top:0.5rem; margin-left:0; font-size:13px}
	.choice__price h2 {margin-top:0.75rem; margin-left:0.25rem; font-size:17px; font-style:normal}
	.choice__price h2 span {margin-left:-0.25rem; font-size:23px; font-style:italic}
	.choice__price .line {margin:1.25rem auto 1.5rem 0}
	.choice__price p {font-size:21px; letter-spacing:0.02em; line-height:1.325}
	.choice__price a.btn {margin:2rem auto 0 0}
	.choice__price .choice__price-two {padding:0 0 0 3.5rem}}		
@media all and (min-width:1200px) {	
	.choice__price {padding:5.5rem 0 5.5rem}
	.choice__price img {width:460px; margin: 0 auto 0 1rem}
	.choice__price .know {font-size:15px}
	.choice__price h2 {margin-top:1rem; font-size:19px}
	.choice__price h2 span {font-size:25px}
	.choice__price .line {margin:1.5rem auto 1.75rem 0}
	.choice__price p {line-height:1.5}
	.choice__price .choice__price-two {padding:0 2.5rem 0}}