:root{
  --cream:#FBFAF6;
  --yellow:#FCEEA8;
  --green:#004D43;
  --lavender:#B8BAF3;
  --purple:#1A1A32;
  --black:#000000;
  --px:5%;
  --radius-lg:24px;
  --radius-md:8px;
  --navy:var(--purple);
  --ink:var(--black);
  --muted:rgba(0,0,0,0.55);
  --cream-soft:#F0EBDC;
  --lavender-text:var(--black);
  --green-text:var(--cream);}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;}
body{
  font-family:'Public Sans', sans-serif;
  background:var(--cream);
  color:var(--black);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;}
@font-face{
  font-family:'Public sans';
  src:url('../fonts/PublicSans-Thin.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;}
@font-face{
  font-family:'Public sans 500';
  src:url('../fonts/PublicSans-Regular.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;}
h1,h2,.logo-text{
  font-family:'Montserrat', sans-serif;
  font-weight:normal;
  line-height:1.2;
  color:var(--ink);}
h3{
  font-family:'Public sans 500', sans-serif;
  font-weight:normal;
  line-height:1.2;
  color:var(--ink);}
h1{
  font-size:clamp(1.7rem, 3vw, 1.875rem);}
h2{
  font-size:clamp(1.5rem, 2.2vw, 1.4rem);}
a{
  color:inherit;
  text-decoration:none;}
img{
  max-width:100%;
  display:block;}
section{
  padding:3.5rem var(--px);}
.container{
  margin:0 auto;}
ul{
  list-style:none;}
button{
  font-family:inherit;
  cursor:pointer;
  border:none;}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem var(--px);
  position:sticky;
  top:0;
  background:var(--cream);
  z-index:40;}
.logo{
  display:flex;
  align-items:center;
  gap:10px;}

.step-icon{
  position:relative;
  z-index:1;
  width:34px;
  height:34px;
  flex-shrink:0;
  background:var(--cream);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;}
.step-icon img{
  width:26px;
  height:26px;
  object-fit:contain;}

.section-title--spaced{
  margin-bottom:0.5rem;}

 .formulesintro{
  margin-bottom:2.5rem;
 } 
.section-title--tight{
  margin-bottom:1.5rem;}
.section-title--compact{
  margin-bottom:1.25rem;}
.text-block{
  max-width:65ch;
  margin-bottom:0.5rem;}
.text-block:last-child{
  margin-bottom:0;
text-align: center;}
.text-block--wide{
  max-width:70ch;}
.section-heading-row{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:2rem;}
.logo-text{
  font-size:1.1rem;
  line-height:1.15;}
.logo-text small{
  display:block;
  font-size:0.85rem;
  font-weight:500;
  color:var(--muted);}

nav{
  display:flex;
  align-items:center;
  gap:1.75rem;
  background:var(--yellow);
  border-radius:999px;
  padding:0.6rem 0.75rem 0.6rem 1.5rem;}
nav a{
  font-family:'Montserrat';
  font-size:0.85rem;
  font-weight:300;
  color:var(--black);
  white-space:nowrap;}
nav a[aria-current="page"]{
  text-decoration:underline;
  text-underline-offset:4px;}
nav a:hover{
  text-decoration: underline;}
.account-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--ink);}
.account-btn svg{
  width:18px;
  height:18px;}

.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;
  height:38px;
  background:var(--yellow);
  border-radius:50%;
  padding:0;
  flex-shrink:0;}
.menu-toggle span{
  display:block;
  width:16px;
  height:2px;
  margin:0 auto;
  background:var(--black);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;}
.menu-toggle.active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){
  opacity:0;}
.menu-toggle.active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);}

.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:2rem;
  padding-top:2rem;
  padding-bottom:4rem;
  overflow:hidden;}
.hero p{
  max-width:80ch;
  color:var(--black);
  margin-top:1.25rem;
  font-size:18px;
  font-family:"Public sans";}
.cta-btn{
  display:inline-block;
  background:var(--green);
  color:var(--cream);
  padding:0.9rem 1.8rem;
  border-radius:999px;
  font-weight:600;
  font-size:0.9rem;
  transition:transform .15s ease;
  border:none;
  text-transform:uppercase;}
.cta-btn:hover{
  transform:translateY(-2px);}
.cta-btn.navy{
  background:var(--navy);}
.cta-btn.yellow{
  background:var(--yellow);
  color:var(--ink);}
.cta-btn.lavender{
  background:var(--lavender);
  color:var(--lavender-text);}
.cta-btn.outline{
  background:var(--lavender);
  border:1px solid var(--lavender);
  color:var(--black);}

.btngreen{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0 0 0 16px;
  background:transparent;
  border:1px solid rgba(14,16,15,0.45);
  border-radius:50px;
  font-family:'Montserrat', sans-serif;
  font-size:16px;
  color:var(--black);
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width:fit-content;
  margin-top:36px;}
.btngreen> span:first-child{
  position:relative;
  z-index:2;
  transition:all 0.4s ease;}
.btngreen > span:first-child::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:0px;
  background:var(--black);
  transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.btngreen .icon-circle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:var(--green);
  border-radius:50%;
  flex-shrink:0;
  z-index:2;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.btngreen img{
  width:16px;
  height:16px;
  object-fit:contain;
  transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.btngreen:hover{
  background:transparent;
  border-color:transparent;
  color:var(--black);}
.btngreen:hover > span:first-child::after{
  width:100%;}
.btngreen:hover .icon-circle{
  transform:translate(5px, -5px);}
.btngreen:active{
  transform:scale(0.98);}

.btnpurple{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0 0 0 16px;
  background:transparent;
  border:1px solid rgba(14,16,15,0.45);
  border-radius:50px;
  font-family:'Montserrat', sans-serif;
  font-size:16px;
  color:var(--black);
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width:fit-content;
  margin-top:36px;
  text-transform:uppercase;}
.btnpurple> span:first-child{
  position:relative;
  z-index:2;
  transition:all 0.4s ease;}
.btnpurple > span:first-child::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:0px;
  background:var(--black);
  transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.btnpurple .icon-circle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:var(--purple);
  border-radius:50%;
  flex-shrink:0;
  z-index:2;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.btnpurple img{
  width:16px;
  height:16px;
  object-fit:contain;
  transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.btnpurple:hover{
  background:transparent;
  border-color:transparent;
  color:var(--black);}
.btnpurple:hover > span:first-child::after{
  width:100%;}
.btnpurple:hover .icon-circle{
  transform:translate(5px, -5px);}
.btnpurple:active{
  transform:scale(0.98);}

.hero-asterisk{
  justify-self:end;
  color:var(--green);
  font-weight:bolder;
  font-family:'Montserrat';
  font-size:400px;
  display:none;}

.page-hero{
  padding-top:2rem;
  padding-bottom:3rem;}
.page-hero p{
  max-width:60ch;
  color:var(--black);
  margin-top:1.25rem;
  font-size:18px;}
.page-hero .cta-row{
  display:flex;
  gap:1rem;
  margin-top:2rem;
  flex-wrap:wrap;}

.page-hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:2rem;}
.page-hero-image img{
  width:100%;
  border-radius:var(--radius-lg);}

.problem{
  background:var(--purple);
  color:var(--cream);}
.problem h2{
  color:var(--cream);
  margin-bottom:2.5rem;}
.problem-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(240px, 1fr));
  gap:1.5rem;
  max-width:900px;
  margin-left:auto;}
.problem-card{
  background:var(--lavender);
  color:var(--lavender-text);
  border-radius:var(--radius-md);
  padding:1.75rem;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;}
.problem-card .arrow{
  font-size:1.3rem;
  align-self:flex-end;
  width:16px;
  height:16px;
  object-fit:contain;}
.problem-card h3{
  font-size:18px;
  color:var(--black);
  margin-bottom:0.75rem;
  text-transform:uppercase;}
.problem-card p{
  font-size:18px;
  color:var(--black);
  font-family:"Public sans";}

.solution p.intro{
  max-width:100ch;
  color:var(--black);
  margin:1.25rem 0 3rem;
  font-size:18px;}
.solution-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  align-items:start;}
.solution-card{
  background:var(--green);
  color:var(--green-text);
  border-radius:var(--radius-md);
  padding:1.75rem;
  min-height:230px;}
.solution-card:nth-child(2){
  margin-top:2.5rem;}
.solution-card:nth-child(3){
  margin-top:5rem;}
.solution-card .icon{
  font-family:"Montserrat";
  color:var(--yellow);
  font-size:60px;
  font-weight:bold;}
.solution-card h3{
  color:var(--cream);
  font-size:20px;
  margin-bottom:0.75rem;
  text-transform:uppercase;}
.solution-card p{
  font-size:18px;
  color:var(--cream);}

.frame{
  margin-top:3rem;
  min-height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:0.85rem;
  text-align:center;
  overflow:hidden;}
.frame img,
.frame video{
  width:70%;
  height:auto;
  max-height:100%;
  object-fit:cover;
  border-radius:var(--radius-md);
  display:block;}

@media only screen and (max-width: 950px){
  .frame video, .frame img{
  width:100%;
  height:auto;}
}


.hero-image{
  height:100%;}
.hero-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:var(--radius-lg);}

.screenshots-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  margin-top:2rem;}
.screenshot-col img{
  width:100%;
  border-radius:var(--radius-md);
  margin-bottom:1rem;}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.5rem;
  margin-top:2rem;}
.dashboard-col img{
  width:100%;
  border-radius:var(--radius-md);}

.about-block{
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:2rem;
  align-items:center;}
.about-block blockquote,.about-block p{
  font-size:18px;}
.about-block blockquote{
  font-family:'Montserrat', sans-serif;
  font-size:1.3rem;
  font-weight:600;
  line-height:1.4;}
.about-photo{
  border-radius:var(--radius-md);
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:0.85rem;
  overflow:hidden;}
  .about-photo img{
  border-radius:var(--radius-md);}

.steps{
  position:relative;
  max-width:640px;
  margin:0 auto;}
.steps::before{
  content:"";
  position:absolute;
  left:16px;
  top:34px;
  bottom:34px;
  width:0.5px;
  background:var(--cream-soft);
  border-left:1.5px dashed #d8d3c2;}
.step{
  position:relative;
  display:flex;
  gap:1.5rem;
  padding-bottom:2.75rem;}
.step:last-child{
  padding-bottom:0;}
.step .logo-mark{
  position:relative;
  z-index:1;
  background:var(--cream);
  width: 10%;
  height: 20%;}
.step h3{
  font-size:20px;
  margin-bottom:0.5rem;
  text-transform:uppercase;}
.step p{
  font-size:18px;
  color:var(--black);
  max-width:52ch;}

.card-row-dark{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;}
.card-dark{
  background:var(--purple);
  color:var(--cream);
  border-radius:var(--radius-md);
  padding:1.75rem;}
.card-dark .icon{
  font-family:"Montserrat";
  color:var(--lavender);
  font-size:60px;
  font-weight:bold;
  display:block;}
.card-dark h3{
  color:var(--cream);
  font-size:20px;
  margin-bottom:0.6rem;
  text-transform:uppercase;}
.card-dark p{
  font-size:18px;
  color:var(--cream);}

.module-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.25rem;
  align-items:start;}
.module-card{
  background:var(--green);
  color:var(--green-text);
  border-radius:var(--radius-md);
  padding:1.75rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:2rem;
min-height: 310px;}
.module-card h3{
  color:var(--cream);
  font-size:20px;
  margin-bottom:0.75rem;
  text-transform:uppercase;}
.module-card p{
  font-size:18px;
  color:var(--cream);}
.module-card .icon{
  align-self:flex-end;
  color:var(--yellow);
  font-size:60px;
  font-family:"Montserrat";
  font-weight:bold;}
.modules-teaser h2{
  margin-bottom:0.5rem;}
.modules-teaser .intro{
  margin:1.25rem 0 2.5rem;
  max-width:70ch;
  font-size:18px;}

.info-green{
  background:var(--green);
  color:var(--green-text);
  position:relative;
  overflow:hidden;}
.info-green-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  position:relative;
  z-index:1;}
.info-green-grid > *:nth-child(2){
  margin-top:3.5rem;}
.info-green h2{
  color:var(--cream);
  margin-bottom:1.25rem;}
.info-green p{
  font-size:18px;
  color:var(--cream);
  margin-bottom:1rem;}
.corner-asterisk{
  position:absolute;
  top:-12%;
  right:-6%;
  color:var(--yellow);
  opacity:0.9;
  z-index:0;
  font-family:"Montserrat";
  font-weight:bold;
  font-size:140px;
  line-height:1;}

.matiere-block{
  color:var(--black);
  border-radius:var(--radius-md);
  padding:2.5rem var(--px);
  margin-bottom:2rem;}
.matiere-block h2{
  color:var(--black);
  margin-bottom:0.75rem;}
.matiere-block > .container > p{
  max-width:70ch;
  color:var(--black);}
.matiere-block .card-row-dark{
  margin-top:2rem;}
.sm-accroche{
  font-weight:600;
  margin-bottom:0.5rem;}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.5rem;
  width:100%;}
.price-card{
  border-radius:var(--radius-md);
  padding:2.25rem;
  display:flex;
  flex-direction:column;}
.price-card.green{
  background:var(--green);
  color:var(--cream);}
.price-card.navy{
  background:var(--purple);
  color:var(--cream);}
.price-card .plan-name{
  font-size:25px;
  font-weight:600;
  margin-bottom:1.5rem;}
.price-card .price{
  font-family:'Montserrat', sans-serif;
  font-size:45px;
  font-weight:700;}
.price-card.green .price{
  color:var(--yellow);}
.price-card.navy .price{
  color:var(--lavender);}
.price-card .price-alt{
  font-size:30px;
  font-weight:500;
  margin:0.5rem 0 1.75rem;}
.price-card .included-label{
  font-size:18px;
  font-weight:600;
  margin-bottom:0.9rem;}
.price-card ul{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin-bottom:2rem;}
.price-card li{
  display:flex;
  gap:0.6rem;
  font-size:18px;
  align-items:flex-start;}
.price-card li .arrow{
  flex-shrink:0;
  width:16px;
  height:16px;}
.price-card .card-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;}
.price-card .icon{
  font-size:1.6rem;}
.price-card.green .icon{
  color:var(--yellow);
  font-family:"Montserrat";
  font-weight:bold;
  font-size:80px;}
.price-card.navy .icon{
  color:var(--lavender);
  font-family:"Montserrat";
  font-weight:bold;
  font-size:80px;}

.cta-final{
  text-align:center;}
.cta-final p{
  color:var(--black);
  margin-top:0.75rem;
  font-size:18px;}
.cta-final .cta-row{
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-top:2rem;
  flex-wrap:wrap;}

.faq h2{
  margin-bottom:2rem;}
.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem 1rem;
  align-items:start;}
.faq-item{
  background:var(--yellow);
  border-radius:var(--radius-md);
  overflow:hidden;}
.faq-question{
  width:100%;
  background:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  font-size:18px;
  text-align:left;
  color:var(--black);}
.faq-question .chev{
  flex-shrink:0;
  display:flex;
  transition:transform .2s ease;}
.faq-question .chev svg{
  width:16px;
  height:16px;
  display:block;}
.faq-question .chev img{
  width:16px;
  height:16px;
  display:block;}
.faq-item.open .faq-question .chev{
  transform:rotate(90deg);}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;}
.faq-answer p{
  padding:0 1.25rem 1.1rem;
  font-size:18px;
  color:var(--black);}

footer{
  background:var(--green);
  color:var(--green-text);
  padding:5rem var(--px) 0;
  position:relative;
  overflow:hidden;}
.footer-top{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:3rem;
  padding-bottom:3rem;
  position:relative;
  z-index:1;}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:1rem;}
.footer-brand .logo-text{
  color:var(--cream);}
.footer-brand .logo-text small{
  color:rgba(251,250,246,0.6);}
.footer-tagline{
  font-size:1.05rem;
  color:var(--cream);
  max-width:32ch;}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:1rem;}
.footer-links a{
  font-size:1rem;
  color:var(--cream);}
.footer-bottom{
  border-top:1px solid rgba(251,250,246,0.15);
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  padding:1.5rem 0;
  font-size:0.85rem;
  position:relative;
  z-index:1;}
.footer-copy{
  text-align:center;
  font-size:0.82rem;
  padding:1.75rem 0;
  color:rgba(251,250,246,0.6);
  position:relative;
  z-index:1;}
.footer-asterisk{
  position:absolute;
  bottom:-20%;
  right:-8%;
  top:auto;
  left:auto;
  color:var(--yellow);
  opacity:0.85;
  z-index:0;
  font-family:"Montserrat";
  font-weight:bold;
  font-size:140px;
  line-height:1;}

.secondary-nav{
  display:flex;
  justify-content:center;
  gap:4rem;
  background:var(--cream-soft);
  border-bottom:1px solid #ddd8c9;
  padding:0.7rem 0;}
.secondary-nav a{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:var(--muted);}
.secondary-nav a.active{
  color:var(--green);}
.secondary-nav-spacer{
  display:none;}

@media (max-width:860px){
  .hero{
    grid-template-columns:1fr;}
  .page-hero-grid{
    grid-template-columns:1fr;}
  .hero-asterisk{
    display:none;}
  .problem-grid{
    grid-template-columns:1fr;
    margin-left:0;}
  .solution-grid{
    grid-template-columns:1fr;}
  .solution-card:nth-child(2),.solution-card:nth-child(3){
    margin-top:0;}
  .about-block{
    grid-template-columns:1fr;}
  .faq-grid{
    grid-template-columns:1fr;}
  .footer-top{
    grid-template-columns:1fr;}
  header{
    position:relative;
    flex-wrap:nowrap;}
  .menu-toggle{
    display:flex;}
  #site-nav{
    display:none;
    position:absolute;
    top:calc(100% - 0.5rem);
    left:5%;
    right:5%;
    flex-direction:column;
    align-items:stretch;
    gap:0.75rem;
    background:var(--yellow);
    border-radius:8px;
    padding:1rem 1.25rem;
    z-index:20;}
  #site-nav.open{
    display:flex;}
  #site-nav a{
    padding:0.4rem 0;}
  .account-btn{
    align-self:flex-start;}
  .card-row-dark{
    grid-template-columns:1fr;}
  .module-grid{
    grid-template-columns:1fr;}
  .info-green-grid{
    grid-template-columns:1fr;
    gap:2rem;}
  .info-green-grid > *:nth-child(2){
    margin-top:0;}
  .pricing-grid{
    grid-template-columns:1fr;}
  .screenshots-grid{
    grid-template-columns:1fr;}
  .dashboard-grid{
    grid-template-columns:1fr;}
  .corner-asterisk{
    display:none;}
  .footer-asterisk{
    display:none;}
  .problem-card h3, .solution-card h3, .step h3, .card-dark h3, .module-card h3{
    font-size:18px;}
  .hero p, .page-hero p, .problem-card p, .solution p.intro, .solution-card p, .about-block p, .step p, .card-dark p, .module-card p, .info-green p, .price-card .included-label, .price-card li, .faq-question, .faq-answer p, .cta-final p,.modules-teaser .intro{
    font-size:16px;}
  .secondary-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    justify-content:space-around;
    gap:0;
    border-bottom:none;
    border-top:1px solid #ddd8c9;
    z-index:30;}
  .secondary-nav a{
    flex-direction:column;
    gap:3px;
    font-size:0.7rem;}
  .secondary-nav-spacer{
    display:block;
    height:70px;}
}

.contenu{
  gap:16px;}
.legalcontenu{
  gap:16px;}

.logo img{
  height:80px;
  width:auto;
  display:block;}
.footer-brand .logo img{
  height:80px;
  width:auto;
  display:block;}

#scrollto_top{
  position: fixed;
  width: 25px;
  height: 25px;
  bottom: 50px;
  right: 30px;
  z-index: 35;}
#scrollto_top img{
  width: 25px;}
/* ===== Bandeau cookies (tarteaucitron) ===== */
#tarteaucitronRoot,
#tarteaucitronRoot *{
  font-family: 'Public sans', sans-serif !important;
  font-size: 14px !important;
  pointer-events: none;}

/* Le bloc du bandeau */
#tarteaucitronRoot #tarteaucitronAlertBig{
  background: var(--green) !important;}

#tarteaucitronDisclaimerAlert{
  color:white !important;}

#tarteaucitronPrivacyUrl{
  color:white !important;}

/* Bouton "Tout accepter" */
#tarteaucitronRoot #tarteaucitronPersonalize2{
  background: var(--cream) !important;
  color: var(--black) !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;}

/* Bouton "Tout refuser" : même poids visuel qu'Accepter (exigence CNIL) */
#tarteaucitronRoot #tarteaucitronAllDenied2{
  background: var(--cream) !important;
  color: var(--black) !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;}

/* Lien "Personnaliser" */
#tarteaucitronRoot #tarteaucitronCloseAlert{
  color:white !important;
  background-color: transparent !important;}

#tarteaucitronRoot #tarteaucitronIcon{
  left: 16px !important;
  bottom: 16px !important;}

@media only screen and (max-width: 768px){
  #tarteaucitronRoot span#tarteaucitronDisclaimerAlert{
    font-size: 16px;
    padding-bottom: 16px !important;}

  #tarteaucitronRoot #tarteaucitronIcon{
    bottom: 72px !important;}
}

#tarteaucitronRoot #tarteaucitronIcon button,
#tarteaucitronRoot #tarteaucitronIcon img,
#tarteaucitronRoot #tarteaucitronAlertBig,
#tarteaucitronRoot #tarteaucitronAlertBig *{
  pointer-events: auto;}

  #tarteaucitron #tarteaucitronServices #tarteaucitronAllAllowed.tarteaucitronIsSelected {
    background-color: var(--yellow) !important;
    opacity: 1;
    border-radius: 50px !important;}


#tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow, #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny, .tac_activate .tarteaucitronAllow {
    background:var(--lavender) !important;
    border-radius: 50px !important;
    color: #000;
    cursor: pointer;
    display: inline-block;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
    width: auto;
    border: 0;
}

#tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAllow, #tarteaucitron #tarteaucitronServices #tarteaucitronServices_mandatory .tarteaucitronLine button.tarteaucitronAllow {
        background:var(--yellow) !important;
    border-radius: 50px !important;
}

#tarteaucitronRoot button#tarteaucitronSaveButton {
    cursor: pointer;
    font-size: 18px !important;
    padding: 7px 20px;
    border-radius: 50px !important;
    background:var(--yellow) !important;

}