/* Lève aou pou manjé – styles
   Fonts: DM Sans via Adobe Fonts (link in index.html)
*/
:root{
  --violet:#7A2181;
  --jaune:#F5CD48;
  --bg:#fff;
  --text:#131313;
  --muted:#5b5b5b;
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --shadow-lg:0 10px 30px rgba(0,0,0,.08);
  --shadow-md:0 6px 16px rgba(0,0,0,.07);
}
.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
			clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"dm-sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  line-height:1.5;
  background:var(--bg);
  font-weight:400;
}

figure img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
img{max-width:100%;display:block;height:auto}

.section{padding:clamp(40px,8vw,100px) 0}
h1,h2,h3{margin:0 0 .6rem 0;line-height:1.2}
h2{font-weight:700;font-size:clamp(28px,5vw,52px)}
h3{font-weight:700;font-size:clamp(20px,2.2vw,24px)}

/* Typography fixes according to mockup */
.about-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: var(--text);
  margin-bottom: 1rem;
}
.about-text {
  height: 100%;
  justify-content: space-between;
  display: flex;
  flex-flow: column nowrap;
}
.about-text p {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--muted);
  line-height: 1.5;
}

.benefits-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  margin-bottom: 1rem;
}

.benefits-list li {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  margin: 0.5rem 0;
}
.tool-content {
  padding: 16px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
@media (min-width: 1024px){
  .tool-content {
    padding: 32px 32px 32px 0;
  }
}

.tool-content p {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #131313;
  line-height: 1.5;
}

.download-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 36px;
  color: var(--text);
}

.tool-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #131313;
  margin-bottom: 12px;
}

.tools-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 52px;
  color: var(--text);
  margin-bottom: 2rem;
}
.downloads a {
  text-decoration: none !important;
  color: inherit !important;
}
.downloads-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 52px;
  color: var(--text);
  margin-bottom: 2rem;
}

/* Hero */
.hero{
  position:relative;
  padding:40px 0 16px;
}
.hero-ray-bg{
  position:absolute;inset:0;
  background: url('img/FOND_ECLAT_GRIS.png') center top / cover no-repeat;
  opacity:1;
  z-index:0;
  height:100%;
  min-height:300px;
}
.logo-container{text-align:center;position:relative;z-index:1}
.logo-main{width:min(460px,90%);margin:0 auto 8px;display:block;max-width:100%}
.logo-title{
  font-family:"dm-sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(24px,4vw,32px);
  font-weight:400;
  color:var(--text);
  margin:0;
  font-style:italic;
}


/* About */
.about{
  background:#fff;
}

/* Remove duplicate about-text p styles since we have specific ones above */
.benefits-card{
  background: var(--violet);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 22px 22px 10px 22px;
  margin-top: 30px;
  box-shadow: var(--shadow-md);
  position: relative;
  width: 100%;
  place-self: flex-end;
}
.benefits-card ul{
  padding-left:1.1rem;
  margin:0;
  list-style: none;
}
.benefits-card li::before{
  content:"•";
  color:#F5CD48;
  font-weight:bold;
  margin-left: -1rem;
  padding-right: .75rem;
}
.benefits-illustration{
  position: absolute;
  left: -140px;
  bottom: 0;
  opacity: 1;
  pointer-events: none;
  height: calc(100% + 10px);
  z-index: 1;
  width: auto;
  display: none;
}
@media (min-width: 600px){
  .benefits-card{
    width: calc(100% - 75px);
    padding: 22px 22px 10px 75px;
  }
  .benefits-illustration{
    left: -230px;
    display: block;
  }
}
@media (min-width: 1024px){
  .benefits-illustration{
    left: -220px;
  }
}
@media (min-width: 1280px){
  .benefits-illustration{
    left: -140px;
  }
}

.photo-card{
  margin:0;
  background:#fff;border-radius:var(--radius-xl);
  overflow:hidden;box-shadow:var(--shadow-lg);
}
.photo-card img {
  height: 300px !important;
}
@media (min-width: 1024px){
  .photo-card img {
    height: 100% !important;
  }
}

/* Tools */
.tools{
  position:relative;
  padding:80px 0;
  background-color:var(--jaune);
  background-image: url('img/fond.png');
  background-size: contain;
  background-repeat: repeat;
  background-blend-mode: overlay;
}
.tools .container>h2{margin-bottom:40px}

.tool-media{
  position:relative;
  background:#f1f1f1;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:16/9;
  background-image:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.08));
}
.video-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  text-align:center;
}
.play-button{
  font-size:48px;
  margin-bottom:12px;
  opacity:0.8;
}
.video-placeholder p{
  font-size:16px;
  font-weight:500;
  margin:0;
  color:#fff;
}

/* Remove duplicate tool-content p styles since we have specific ones above */

/* Downloads */
.downloads{background:#fff;padding:100px 0}
.downloads h2{margin-bottom:40px}
.download-row{
  display:flex;align-items:center;justify-content:space-between;
  background:#f8f8f8;border-radius:24px;padding:16px 86px 16px 24px;margin:40px 0;
  text-decoration:none;color:inherit;box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:box-shadow 0.2s ease;
  position:relative;
  overflow:hidden;
}
.download-row:hover{
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
/* Remove duplicate download-title styles since we have specific ones above */
.download-cta{
  display:inline-flex;align-items:center;justify-content:center;
  width: 86px;
  height: 100%;
  background:var(--violet);
  flex-shrink:0;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  margin-right:0;
}
.download-cta img{width:33px;height:33px;filter:brightness(0) invert(1);object-fit: contain;}

/* Footer */
.site-footer{
  background:var(--violet);padding:60px 0;
  color:#fff;margin-top:0;
}



.container{
  max-width:100%;
  margin: auto;
  padding:0 16px;
}

/* Responsive container widths */
@media (min-width: 600px){
  .container{
    max-width:600px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width:1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width:1280px;
  }
}

/* Mobile First - Base styles (mobile) */
.about-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:30px;
  align-items:start;
}

.tool{
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
  background:#FFE89A;
  border-radius:var(--radius-xl);
  /* padding:20px; */
  margin:20px 0;
  box-shadow:var(--shadow-md);
  max-width: 1024px !important;
  margin: 30px auto !important;
}

.hero-inner{display:flex;justify-content:center;align-items:center;min-height:200px;position:relative;z-index:1}

.logos-container{
  background:#fff;
  border-radius:24px;
  padding: 32px;
  width: fit-content;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
  max-width:800px;
  margin:0 auto;
}

.logos-container img{
  max-height:60px;
  width:auto;
  filter:none;
  object-fit:contain;
}

/* Illustrative elements */
.tools-illustration {
  position: absolute;
  top: -215px;
  width: 337px;
  opacity: 1;
  left: -100px;
  height: auto;
  z-index: 1;
}
.tools-illustration-1 {
  top: -120px;
  left: 0;
}
.tools-illustration-2 {
  left: unset;
  right: 50px;
  top: -120px;
}
.footer-links {
  display: flex;
  margin: auto;
  justify-content: center;
  gap: 40px;
  margin-top: 32px;
}
.footer-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
}

.mentions-legales main a,
.politique-cookies main a{
  color: var(--violet);
}
.mentions-legales main,
.politique-cookies main {
  padding: 32px 0;
}
/* .mentions-legales main,
.politique-cookies main {
  position:relative;
  padding:80px 0;
  background-color:var(--jaune);
  background-image: url('img/fond.png');
  background-size: contain;
  background-repeat: repeat;
  background-blend-mode: overlay;
} */
 .avis {
  background-color: #F2F2F2;
  padding: 80px 0;
  background-image: url(img/fond.png);
  background-size: contain;
  background-repeat: repeat;
  background-blend-mode: overlay;
 }
 .avis-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 52px;
  color: var(--text);
  margin-bottom: 36px;
 }
 .avis-text {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #454545;
  line-height: 1.5;
 }
 .avis-button {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  line-height: 1.5;
  background-color: var(--violet);
  color: #fff;
  padding: 14px 31px;
  border-radius: 30px;
  text-decoration: none;
  display: block;
  margin-top: 20px;
  text-align: center;
  width: fit-content;
  margin: 32px auto 36px;
 }
 .avis-button:hover {
  background-color: var(--violet);
  color: #fff;
 }

/* Responsive */
@media (min-width: 600px){
  .section{padding:100px 0}
  .about-grid{gap:40px}
  .tool{gap:25px;}
  .hero-inner{min-height:220px}
  .logos-container{flex-direction:row;}
  .downloads-illustration {
    width: 100px;
  }
  .tools-illustration-1 {
    left: 50px;
  }
}

@media (min-width: 1024px){
  .about-grid{
    display:grid;
    grid-template-columns: 65fr 35fr;
    gap:50px;
    align-items:start;
  }
  .tool{
    grid-template-columns: 57fr 43fr;
    gap:30px;
    /* padding:30px; */
  }
  .hero-inner{min-height:250px}
  .logos-container{
    flex-direction:row;
    gap:40px;
    /* padding:32px 40px; */
  }
  .logos-container img{max-height:60px}
  .photo-card,
  .about-visual {
    height: 100%;
  }
  @media (min-width: 1280px){
  .about-visual {
      max-height: 525px;
    }
  }

  /* Fix children image alignment */
  .about-visual {
    display: flex;
    align-items: flex-start;
  }
  
  .photo-card {
    width: 100%;
  }

  .downloads-illustration {
    width: 120px;
  }
}

@media (min-width: 1280px){
  .section{padding:100px 0}
  .tool{
    gap:50px;
    /* padding:40px; */
    /* margin:30px 0; */
  }
  .hero-inner{min-height:300px}
  .logos-container{
    gap:50px;
    padding: 32px;
    width: fit-content;
  }
  .downloads-illustration {
    width: 140px;
  }
}