/*Template original https://www.le26-brides.fr créé par Philippe Lambert - 2026 Tous droits réservés*/
@charset "UTF-8";
/* ===== Reset ===== */
blockquote,body,dd,dl,figure,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}*,::after,::before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeLegibility}canvas,img,picture,svg,video{display:block;max-width:100%;height:auto}iframe{border:0}button,input,select,textarea{font:inherit}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button}textarea{resize:vertical}a{color:inherit;text-decoration:none}ol,ul{padding:0}ol[role=list],ul[role=list]{list-style:none}table{border-collapse:collapse;border-spacing:0}[hidden]{display:none!important}/*!guillements*/q:before{content:open-quote}q:after{content:close-quote}*:lang(fr)>*{quotes:"\00AB\00A0" "\00A0\00BB"}*:lang(en)>*{quotes:"\201C" "\201D"}

/* ===== VARIABLES GLOBALES ===== */
:root {
	/* micro spacing (UI) */
	--space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);
	--space-xs:  clamp(0.5rem, 1vw, 0.75rem);
	--space-s:   clamp(0.75rem, 1.5vw, 1rem);
	/* medium (texte / blocs) */
	--space-m:   clamp(1rem, 2vw, 1.5rem);
	--space-l:   clamp(1.5rem, 3vw, 2.5rem);
	/* large (sections) */
	--space-xl:  clamp(2rem, 4vw, 4rem);
	--space-2xl: clamp(3rem, 6vw, 6rem);
	--space-3xl: clamp(4rem, 8vw, 8rem);	
	
	--max-width: 1120px;
	--bg-color: #f8f4f3;
	--bg-color-second:#ffffff;
	--bg-color-third:#3c3232;
	--text-color: #2b2b2b;
	--text-light: #fff;
	--accent: #c86d3c;
	/*Hader*/
	--header-h:8.5rem;
	/*Font*/
	--dunbar-text:dunbar-text, sans-serif;
	--dunbar-low:dunbar-low, sans-serif;
	--dunbar-tall:dunbar-tall, sans-serif;
	/*Menus*/
	--muted: #746d66;
	--week1-bg: #edf4ee;
	--week1-accent: #7fa089;
	--week2-bg: #f6eee3;
	--week2-accent: #b69474;
	--week3-bg: #f6e9ec;
	--week3-accent: #c18b95;
	/*global*/
	--shadow: 0 14px 34px rgba(43, 36, 31, .08);
	--shadow-hover: 0 20px 44px rgba(43, 36, 31, .11);
	--radius: 26px;
	--radius-sm: 13px;
	--transition: 0.35s cubic-bezier(.22, 1, .36, 1);
	/*margin & padding*/
	--padding-large: clamp(4rem, 8vw, 8rem);
	/* Measure */
	--measure: 60ch;
}

/* ===== GLOBAL STYLE ===== */
html{font-size:100%}
body{width:100%;font-family:dunbar-text, sans-serif, Arial, Helvetica, sans-serif;font-style:normal;font-weight:500;line-height:1.5;background:var(--bg-color);color:var(--text-color)}

/* Couche semi-transparente (ou opaque) qui recouvre tout l’écran */
#loader-svg{position:fixed;top:0;left:0;width:100vw;height: 100vh;background-color:var(--bg-color);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:1;transition:opacity 0.5s ease}
#spinner {width: 50px;height: 50px;border: 5px solid #ccc;/* couleur des bords “gris clair” */border-top-color: #313b38;/* “couvercle” pour l’animation */border-radius: 50%;animation: spin 1s linear infinite}
/* Animation de rotation */
@keyframes spin{to{transform:rotate(360deg)}}
#overlay.fadeOut{opacity:0;pointer-events:none}

/* ===== GLOBAL STYLE ===== */
h1{font-family:var(--dunbar-tall);font-weight: 300;font-style: italic;font-size:clamp(2rem, 2vw, 3.5rem);margin:0;padding:0 0 .325em;line-height:1.2}
h2{font-family:var(--dunbar-tall);font-weight: 300;font-style: normal;font-size:clamp(2rem, 2vw, 3.5rem);margin:0 0 .325em;padding:0;line-height:1.1}
h3{font-size: var(--fs-h3);margin:0;padding:0;line-height:1.1}
h4{font-size:2em;line-height:1.1;margin: 0; padding: 0}

p{font-size:1rem;line-height:1.4;margin:0;padding:0}

a{margin:0;padding:0;text-decoration:none;outline:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
a.link-orange,a.krousel{color:#000}
p a{color: inherit;text-decoration: none;border-bottom: 1px solid currentColor;transition: all .25s ease}
p a:hover{color:var(--accent);border-bottom-color:var(--accent)}

a:not([class]),a:not([class]):hover{}

button{border:none;cursor:pointer}
a.button,button.button{text-align: center; margin: 0 auto;padding:.313em 1em}

main{padding: clamp(56px, 7vw, 104px) 1rem}
main.main_113{padding: clamp(56px, 7vw, 104px) 1rem}
.inner{max-width: var(--max-width);margin: 0 auto}


header{display: grid;grid-template-columns:1fr auto 1fr;align-items: center;background:rgba(248,244,243,1);position:fixed;top:0;left:0;right:0;height:var(--header-h);padding: 0 3.25rem;z-index:999;transition:transform 0.4s ease,opacity 0.4s ease,background-color 0.3s ease;will-change: transform, opacity;transform: translateY(0);box-shadow: 0 14px 34px rgba(43,36,31,0)}
header>*{min-width:0}
/* Header en haut de la page → transparent */
header.at-top{background:rgba(248,244,243,1);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow: 0 14px 34px rgba(43,36,31,0)}
/* Disparaît en scroll descendant */
header.scroll-down{background:rgba(248,244,243,1);transform:translateY(-100%);opacity:0;box-shadow: 0 14px 34px rgba(43,36,31,0)}
/* Réapparaît en scroll montant (effet Apple) */
header.scroll-up{transform:translateY(0);opacity:1;background:rgba(248,244,243,1);box-shadow: 0 14px 34px rgba(43,36,31,.1)}
@media(prefers-reduced-motion: reduce){header{transition:none}}

/*Header Logo*/
.header-logo{justify-self: center;width:80px;height:auto}
.header-logo a{width:100%;height:100%;display:block}
.header-logo img{max-width:80px;width:auto;height:auto;display:block;transition:transform 0.4s cubic-bezier(.4,0,.2,1)}
.header-logo a:hover img{transform:translateY(-2px)}

/*.moduletable-dropdown{display:none}*/
.moduletable-dropdown.mod-menu111{justify-self:end;margin-right:3rem}
.moduletable-dropdown.mod-menu119{justify-self:start;margin-left:3rem}
.moduletable-dropdown ul{width:auto}
.moduletable-dropdown ul li{position:relative;display:inline-flex;align-items:center;z-index:2000}
.moduletable-dropdown ul li a{font-weight:700;display:inline-flex;align-items: center;color:var(--text-color);padding:.325em .825em;opacity:1;font-size:1rem}
.moduletable-dropdown ul li.parent a{padding:.325em 0 .325em .825em}
.moduletable-dropdown ul li a:hover{color: var(--accent);opacity:1}
.moduletable-dropdown ul ul{position:absolute;top:100%;left:0;width:250px;padding:0;background:#fff;opacity:0;visibility:hidden;transform: translateY(8px);transition:opacity .28s ease,transform .28s cubic-bezier(0.16, 1, 0.3, 1),visibility 0s linear .28s;box-shadow: 0 10px 18px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.08);border-radius:.513rem;}
.moduletable-dropdown ul ul:before{content:"";position:absolute;top:-.313em;left:.825em;border-left:.313em solid transparent;border-right:.313em solid transparent;border-bottom:.313rem solid #fff;filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));}
.moduletable-dropdown ul ul li{display:block;width:100%;background:transparent;text-align:left;border-left:none}
.moduletable-dropdown ul ul li a{font-size: 1rem;display:block !important;width:100%;color:var(--text-color);line-height:1.2;text-shadow:none;opacity:1; letter-spacing: inherit}

.moduletable-dropdown ul.mod-menu__sub li a{padding:.825em 1em}
.moduletable-dropdown ul ul li a:hover{background: rgba(0,0,0,0.05);}
.moduletable-dropdown ul ul li:nth-child(3):hover > a{border-bottom-left-radius:.313em;border-bottom-right-radius:.313em}
.moduletable-dropdown ul li:hover > ul{opacity:1;visibility:visible;transform:translateY(0px);transition-delay: 0s, 0s, 0s}

.moduletable-dropdown > ul > li.current::before,.moduletable-dropdown > ul > li.parent:has(ul li.current)::before{content:"";position:absolute;left:50%;bottom:0;transform: translate(-50%, -50%);width:26px;height:2px;background:var(--accent)}

/* Texte du parent actif */
.moduletable-dropdown ul li.parent:hover > a,
.moduletable-dropdown ul li.parent:has(ul:hover) > a,
.moduletable-dropdown ul li.current > a,
.moduletable-dropdown ul li.parent:has(ul li.current) > a {
    color: var(--accent)
}

.moduletable-dropdown ul li.parent:hover > ul,.moduletable-dropdown ul li.parent:has(ul:hover) > ul {opacity: 1;visibility:visible;transform:translateY(0)}

/* Chevron : bloc centré sous le texte */
.moduletable-dropdown .menu-chevron{display:inline-flex;align-items: center;margin-left:.35rem;margin-right:.85rem;color:var(--text-color);pointer-events:none}
.moduletable-dropdown .menu-chevron{width:0.85em;height:0.85em;position:relative}

/* Chevron en lui-même (trait en angle) */
.moduletable-dropdown .menu-chevron::before{content:"";position:absolute;inset:0;margin:auto;width:0.45em;height:0.45em;border-right: .13em solid var(--text-color);border-bottom:.13em solid var(--text-color);transform:rotate(45deg);transform-origin: 50% 50%;transition:all 0.25s ease}

/* Chevron orange au hover et quand actif */
.moduletable-dropdown ul li.parent:hover > .menu-chevron::before,
.moduletable-dropdown ul li.parent:has(ul:hover) > .menu-chevron::before,
.moduletable-dropdown ul li.current > .menu-chevron::before,
.moduletable-dropdown ul li.parent:has(ul li.current) > .menu-chevron::before {
    border-right:.13em solid var(--accent);
    border-bottom:.13em solid var(--accent)
}

/* Rotation du chevron uniquement au hover */
.moduletable-dropdown ul li.parent:hover > .menu-chevron::before,
.moduletable-dropdown ul li.parent:has(ul:hover) > .menu-chevron::before {
    transform: rotate(225deg)
}

/* Burger */
.burger{position:fixed;top: 20px;right: 20px;width: 40px;height: 40px;cursor: pointer;z-index: 10000;background:var(--bg-color);display: block}
.burger span {all: unset;box-sizing: border-box;position: absolute;left: 50%;width: 22px;height: 2px;background:var(--text-color);transform: translateX(-50%);transition: transform .3s ease, opacity .3s ease;}
.burger span:nth-child(1) { top: 12px; }.burger span:nth-child(2) { top: 19px; }.burger span:nth-child(3) { top: 26px; }
body.menu-open .burger span:nth-child(1) {top: 50%;transform: translate(-50%, -50%) rotate(45deg)}
body.menu-open .burger span:nth-child(2) {opacity:0}
body.menu-open .burger span:nth-child(3) {top: 50%;transform: translate(-50%, -50%) rotate(-45deg);}

#mobile_nav {position:fixed;top:0;right:0;width:75%;max-width:320px;height:100%;padding:3em 0;transform:translateX(100%);transition:transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);z-index:9999;background:var(--bg-color);color:#000}

@media only screen and (max-width:768px){
	.moduletable-dropdown{display:none}	
	div.mod-languages{margin-left:auto;padding-right:60px}
	.burger{top:20px;right:20px}
	#mobile_nav {width:90%;max-width:90%;}
}

body.menu-open #mobile_nav {transform:translateX(0)}

#mobile_nav ul{list-style:none;padding:0;margin:0}
#mobile_nav ul li{margin:0;padding:0;border-top: 1px solid rgba(141,111,51,.1)}
#mobile_nav ul li.last-li{border-bottom: 1px solid rgba(141,111,51,.1)}
#mobile_nav ul li a{display:block;opacity:1;font-size:1.125em;color:#000;padding:.525em 1em;background: rgba(255,255,255,0)}
#mobile_nav ul li a:hover{background: rgba(141,111,51,.1)}
/*animation*/
#mobile_nav > ul > li {opacity: 0;transform: translateX(40px);}
body.menu-open #mobile_nav > ul > li {animation: menuItemIn 0.7s cubic-bezier(0.25, 0.9, 0.25, 1.2) forwards}

/* Stagger façon timeline GSAP */
body.menu-open #mobile_nav > ul > li:nth-child(1) { animation-delay: 0.05s; }
body.menu-open #mobile_nav > ul > li:nth-child(2) { animation-delay: 0.15s; }
body.menu-open #mobile_nav > ul > li:nth-child(3) { animation-delay: 0.25s; }
body.menu-open #mobile_nav > ul > li:nth-child(4) { animation-delay: 0.35s; }
body.menu-open #mobile_nav > ul > li:nth-child(5) { animation-delay: 0.45s; }
body.menu-open #mobile_nav > ul > li:nth-child(6) { animation-delay: 0.55s; }
	
@keyframes menuItemIn {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  60% {
    opacity: 1;
    transform: translateX(-6px); /* dépassement */
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
	
/* Sous-menu fermé par défaut */
#mobile_nav .content-acordeon {max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:max-height 0.4s ease,opacity 0.3s ease,transform 0.3s ease}
/* Quand le li est ouvert */
#mobile_nav li.submenu-open > .content-acordeon {max-height:400px;opacity:1;transform:translateY(0)}
#mobile_nav .content-acordeon li a{padding:.525em 1.525em}
/* Anim légère sur les items du sous-menu */
#mobile_nav .content-acordeon li {opacity:0;transform:translateX(20px);transition:opacity 0.3s ease, transform 0.3s ease}
#mobile_nav li.submenu-open .content-acordeon li {opacity:1;transform:translateX(0)}
#mobile_nav li.submenu-open .content-acordeon li:nth-child(1){transition-delay:0.05s}
#mobile_nav li.submenu-open .content-acordeon li:nth-child(2){transition-delay:0.10s}
#mobile_nav li.submenu-open .content-acordeon li:nth-child(3){transition-delay:0.15s}
#mobile_nav ul a .svg-inline--fa{margin-left:.35em;font-size:.9em;opacity:.6;transition:transform .35s cubic-bezier(.25, .8, .25, 1),opacity .25s ease;transform-origin:center}
#mobile_nav li.submenu-open > a .svg-inline--fa {transform:rotate(180deg);opacity:1}

/*Logo mobile*/
.logo-mobile{width:100%;text-align:center;margin-bottom:1em !important}
.logo-mobile img{width:80px;height:auto;margin:0 auto}
.legal-mobile{margin-top:1em;color:inherit}
.legal-mobile a{display:inline-block; margin: 0 auto}
.inner-mobile{padding: 0 2rem}

/*  OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);opacity:0;pointer-events:none;transition:opacity 0.3s;z-index: 9998;}
body.menu-open .overlay{opacity:1;pointer-events:auto}

/* Hero */
#hero{height: clamp(500px, calc(95vh - var(--header-h)), 850px);background:var(--bg-color) url(../images/le26-loader-b.webp) center/3% no-repeat;margin-top:var(--header-h);padding:0 3.25rem;transform:translateZ(0);will-change:transform}
#hero-small,#map-wrapper{position: relative;height: clamp(250px, calc(30vh + var(--header-h)), 300px);overflow: hidden;margin-top:var(--header-h);padding:0 3.25rem;background:var(--bg-color) url(../images/le26-loader-b.webp) center/3% no-repeat;border-radius:var(--radius);transform:translateZ(0);will-change:transform}

@media(max-width:768px){
	#hero-small,#map-wrapper{padding:0 1rem;border-radius:13px;height: clamp(250px, calc(30vh + var(--header-h)), 300px)}
}
/*Swipper*/
.swiper,.swiper-slide,.story{height:100%}
.story{display:flex;justify-content:center;align-items:center;flex-direction:column}
.story{width:100%;background:rgba(60,50,50,.55)}
/*.story{background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.25) 40%, rgba(0,0,0,.45) 100%)}*/

.swipper-default{background:#3c3232;border-radius:var(--radius);overflow:hidden}

#hero .swiper,#hero .swiper-wrapper,#hero .swiper-slide,#hero .story {height:100%}
.swipper-home .swiper-slide{position:relative;overflow:hidden}
.swipper-home .swiper-slide::before {content:"";position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:cover;transform:scale(1.08);transition:transform 8s ease;will-change:transform;z-index:0;}
.swipper-home .swiper-slide.is-zoomed::before{transform:scale(1)}
.swipper-home .swiper-slide::after{content:"";position:absolute;inset:0;background:transparent;z-index:1}
.swipper-home .swiper-slide::before,.swipper-home .swiper-slide::after{pointer-events:none}

.story{position:relative;z-index:2;}
/* zoom actif */
.swipper-home .swiper-slide-active::before{transform:scale(1)}

.swiper .swiper-button-next,.swiper .swiper-button-prev{color:#fff !important;opacity:.5}
.swiper .swiper-button-next:hover,.swiper .swiper-button-prev:hover{color:#fff !important;opacity:1}
.swiper .swiper-pagination-bullet {background:#fff;opacity:.5}
.swiper .swiper-pagination-bullet-active {background:#fff;opacity:1}

.swipper-default .swiper-button-next,.swipper-default .swiper-button-prev,.swipper-default .swiper-pagination {z-index:30;pointer-events:auto}

/*Hero Background*/
.swipper-home .slide-1::before {background-image:url(../images/hero/le26-brides-salle-restaurant.avif)}
.swipper-home .slide-2::before {background-image:url(../images/hero/le26-brides-dietetique.avif)}
.swipper-home .slide-3::before {background-image:url(../images/hero/le26-brides-restaurant.avif)}
.swipper-home .slide-4::before {background-image:url(../images/hero/le26-brides-thermes.avif)}

/*Typo des Story*/
p.hero-title{font-size:5rem;line-height:1.15;color: #fff;font-family: dunbar-low, sans-serif;font-weight: 200;font-style: normal}
.line-em{font-family:dunbar-tall,sans-serif;font-weight:300;font-style:italic}
p.hero-subtitle{color: #fff;margin: 1rem 0 2rem 0;font-family: dunbar-text, sans-serif;font-style:normal;font-weight:500}

/* Animation dans la story */
.hero-title .line-wrap,.hero-subtitle .line-wrap,.hero-actions .line-wrap{display:block;overflow:hidden;padding-bottom:.15em}
.hero-title .line,.hero-subtitle .line{display:inline-block;opacity:0;transform:translateY(115%);will-change:transform, opacity}
.hero-actions .line{display:inline-block;opacity:0;transform:translateY(50%);will-change:transform, opacity}

/* Animation active */
.story.is-animated .hero-title .line,.story.is-animated .hero-subtitle .line,.story.is-animated .hero-actions .line{animation:revealUp .9s cubic-bezier(.22,1,.36,1) forwards}

/* Délais */
.story.is-animated .hero-title .line-wrap:nth-child(1) .line {animation-delay:.15s}
.story.is-animated .hero-title .line-wrap:nth-child(2) .line {animation-delay:.35s}
.story.is-animated .hero-subtitle .line {animation-delay:.55s}
.story.is-animated .hero-actions .line {animation-delay:.75s}

@keyframes revealUp{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
/* bouton : mouvement un peu plus soft */
.story.is-animated .hero-actions .line.phone{animation-name:revealUpBtn}
@keyframes revealUpBtn{from{opacity:0;transform:translateY(50%)}to{opacity:1;transform:translateY(0)}}

/*Animation Bouton Swipper*/
.swiper-button-prev,.swiper-button-next,#carrousel .swiper-button-prev,#carrousel .swiper-button-next,.header-logo a,#tarteaucitronIcon #tarteaucitronManager img,.partners a,a.slide-link,#tarteaucitronIcon #tarteaucitronManager img{transition:opacity 0.3s cubic-bezier(.22, 1, .36, 1)}
.moduletable-dropdown ul li a,.article-nav__link .article-nav__title,.com-content-category-blog__item.blog-item .page-header h2 a{transition:color 0.3s cubic-bezier(.22, 1, .36, 1)}
.btn-primary,.com-content-category-blog__item.blog-item .readmore a.btn{transition:background-color 0.3s cubic-bezier(.22, 1, .36, 1)}

/*Image Hero Small*/
.herosmall{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--radius)}
.herosmall.hero-dietetique{background:url(../images/banniere_salade.avif)center center;background-size:cover}
.herosmall.hero-journal{background:url(../images/banniere_source.avif)center center;background-size:cover}
.herosmall.hero-contact{background:url(../images/banniere_hiver.avif)center center;background-size:cover}
.herosmall.hero-carte{background:url(../images/banniere-carte-saison.avif)center center;background-size:cover}
.herosmall.hero-patisserie{background:url(../images/banniere-patisserie.avif)center center;background-size:cover}

@media(max-width:768px){
	.herosmall{border-radius:13px}
}

/* CLASS */
.mt-1{margin-top:var(--space-m)}
.mt-2{margin-top:var(--space-l)}
.mt-3{margin-top:var(--space-xl)}
.mt-4{margin-top:var(--space-2xl)}

.mb-1{margin-bottom:var(--space-m)}
.mb-2{margin-bottom:var(--space-l)}
.mb-3{margin-bottom:var(--space-xl)}
.mb-4{margin-bottom:var(--space-2xl)}

.pt-1{padding-top:var(--space-m)}
.pt-2{padding-top:var(--space-l)}
.pb-2{padding-bottom:var(--space-l)}

.text-right{text-align: right}
.text-left{text-align: left}
.justify{text-align: justify}
.clear{clear: both}
.text-center{text-align: center}
.italic{font-style: italic}
.upper{text-transform: uppercase}
.small,.small-text,.note{font-size:.8rem;letter-spacing:-.03em}
.large{font-size:125.0%}
.rotate{transform: rotate(-10deg)}
hr.line-solid{width:100%;margin:4rem 0 3rem 0;border:none;height:1px;background:#000}
hr.line-small{width:100%;margin:2rem 0 2rem 0;border:none;height:1px;background:#000}
.badge{text-transform:uppercase;display:block;font-weight:700;letter-spacing:.08em;margin:0 0 1rem;color:var(--accent)}
.accent{color:var(--accent) !important}

.measure{max-width:var(--measure)}
.row{margin: 0 auto}

/*Boutons*/
.btn {padding:14px 32px;border-radius:100px;font-size:1rem;cursor:pointer;border:none;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#eb7535}
.btn-second{background:transparent;color:var(--text-color);display:inline-block;border:1px solid var(--text-color)}
/*Boutons Téléphone*/
.btn.phone{display:inline-flex;align-items:center;justify-content:center;gap:.6em}
.btn.phone .svg-inline--fa{font-size:1.35em;line-height:1;transform-origin:center}
.btn.phone:hover .svg-inline--fa,.btn.phone:focus-visible .svg-inline--fa{animation:phone-ring 0.6s ease-in-out}
@keyframes phone-ring {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(14deg); }
  30%  { transform: rotate(-12deg); }
  45%  { transform: rotate(10deg); }
  60%  { transform: rotate(-8deg); }
  75%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){.btn.phone:hover .svg-inline--fa,.btn.phone:focus-visible .svg-inline--fa{animation: none}}

/*Grille*/
.grid {display:grid;align-items:center;column-gap:clamp(1rem,4vw,5rem)}
.grid-menu{grid-template-columns: 1fr 1fr;}
.grid-1-1{grid-template-columns:1fr 1fr}
.grid-1-2{grid-template-columns:1fr 2fr}
.grid-3-2{grid-template-columns:3fr 2fr}
.grid-2-1{grid-template-columns:2fr 1fr}
.grid-4-1{grid-template-columns:4fr 1fr}
.grid-2-3{grid-template-columns:2fr 3fr}

.grid-start{align-items:start}
.grid-shrink{justify-self:start}

.grid-1-1.grid-reverse > *:first-child{order:2}
.grid-1-1.grid-reverse > *:last-child{order:1}

.grid-3-equal{grid-template-columns:1fr 1fr 1fr}
.grid-3-main{grid-template-columns:2fr 1fr 1fr}
.grid-3-focus{grid-template-columns:1fr 2fr 1fr}
.grid-auto-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

@media (max-width:900px){
	.grid{column-gap: clamp(1rem,4vw,5rem);row-gap: 1.5rem;}
	.grid-1-1.grid-reverse > *:first-child{order:0}
	.grid-1-1.grid-reverse > *:last-child{order:0}
	.grid-1-1,.grid-1-2,.grid-3-2,.grid-2-1,.grid-4-1,.grid-2-3,.grid-3-equal,.grid-3-main,.grid-3-focus{grid-template-columns:1fr}
	.mobile-first {order:-1;background:red}
	.mobile-last {order:99;background:yellow} /* pratique aussi */
}

/*Intro*/
.about{max-width: min(100% - 2rem, 1100px);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 6rem) 0;
  text-align: center;}

.about .badge{margin:0 0 1.25rem}

h1.intro-title{
  max-width: 30ch;
  margin: 0 auto 2rem;
  font-family: "dunbar-tall", sans-serif;
  font-size: clamp(2.5rem, 3vw, 5.5rem);
  line-height: 1.1;
  text-wrap: balance;
}

.intro-text{max-width:70ch;margin:0 auto}
.intro-text p{margin: 0 0 1.5rem;font-size: clamp(1rem, 1.2vw, 1.2rem);line-height:1.55}

a.about-label{display:inline-block}
.about-label img {width:80px !important;height: auto;display:block;transition:transform 0.3s cubic-bezier(.22, 1, .36, 1),filter 0.25s ease;border-radius:none;box-shadow:none}
.about-label:hover img,.about-label:focus-visible img {transform:translateY(-2px);filter:brightness(1.05)}

.about .badge,.about .intro-title,.about .intro-text,.about .about-label{opacity: 0;transform: translate3d(0, 18px, 0);transition:opacity 0.75s ease,transform 0.75s cubic-bezier(.22, 1, .36, 1);will-change:opacity,transform;}

.about.in-view .badge{opacity:1;transform:translate3d(0,0,0);transition-delay:.05s}
.about.in-view .intro-title{opacity:1;transform:translate3d(0,0,0);transition-delay:.14s}
.about.in-view .intro-text{opacity:1;transform:translate3d(0,0,0);transition-delay:.26s}
.about.in-view .about-label {opacity:1;transform: translate3d(0,0,0);transition-delay:.38s;}

@media (prefers-reduced-motion: reduce) {
  .about .badge,.about .intro-title,.about .intro-text,.about .about-label{opacity:1;transform:none;transition:none}
}


@media (min-width: 1024px){
	.data-reveal-1,.data-reveal-2,.data-reveal-3{opacity:0;transform:translate3d(0, 18px, 0);transition:opacity 0.75s ease,transform 0.75s cubic-bezier(.22, 1, .36, 1);will-change:opacity,transform;}
	.onscroll.in-view .data-reveal-1{opacity:1;transform:translate3d(0,0,0);transition-delay:.05s}
	.onscroll.in-view .data-reveal-2{opacity:1;transform:translate3d(0,0,0);transition-delay:.14s}
	.onscroll.in-view .data-reveal-3{opacity:1;transform:translate3d(0,0,0);transition-delay:.26s}
}

.page_head h1.head-title{max-width: 30ch;font-size: clamp(2.5rem, 3vw, 5.5rem);margin: 0 auto !important}
.page_head h2{font-family: dunbar-text, sans-serif;font-weight:700;font-size:1.325rem;max-width:40ch;margin: 0 auto 3rem !important;}

#tarteaucitronIcon #tarteaucitronManager img{opacity:.4}
#tarteaucitronIcon #tarteaucitronManager img:hover{opacity:.9}