/* =========================================================
   eThalie — CSS COMPLET — XD 1920
   (Hero restauré “top” + Section 1 + page entière)
   ========================================================= */

/* ================= FONT ================= */
@font-face{
  font-family:"Euclid Circular A";
  src:url("/fonts/EuclidCircularA-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"Euclid Circular A";
  src:url("/fonts/EuclidCircularA-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
}
@font-face{
  font-family:"Euclid Circular A";
  src:url("/fonts/EuclidCircularA-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
}

/* ================= TOKENS ================= */
:root{
  --bleu:#61D4FF;
  --corail:#FF5C5C;
  --fond-nuit:#00001E;
  --beige:#FAF3E5;
  --beige2:#F8F5F1;
  --blanc:#FFFFFF;
  --noir:#000000;
  --gris:#313131;
  --gris2:#707070;

  --container:1080px;
  --pad:24px;

  --line-dark: rgba(255,255,255,.22);
  --line-light: rgba(0,0,0,.12);
}

/* ================= RESET ================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; }
button{ cursor:pointer; }
summary{ cursor:pointer; }

/* ================= BASE ================= */
body{
  font-family:"Euclid Circular A", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--beige);
  color:var(--noir);
  line-height:1.45;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
}

.section{
  position:relative;
  padding:96px 0;
}

.center{text-align:center;}
.maxw{ max-width:72ch; margin-inline:auto; }
.muted{ color:rgba(255,255,255,.78); }
.beige-muted{ color:var(--gris2); }

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* =========================================================
   HERO — nouvelle version (mock 20/01)
   ========================================================= */

.hero.hero--new{
  background:url("hero-bg.jpg");
	background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color:var(--blanc);
  overflow:hidden;
}

/* On repasse en layout “container normal” */
.hero__grid--new{
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns: 472px 1fr;
  align-items:center;
}

/* Logo gauche */
.hero__brand--new{
  text-align:left;
}

.brand__mark--new{
  width:420px;
  height:auto;
}

/* Texte droite */
.hero__content--new{
  max-width:780px;
}

.hero__statement{
  margin:0;
  font-weight:500;
  font-size:42px;
  line-height:54px;
  color:var(--bleu);
}

.hero__statement--spaced{
  margin-top:32px;
}

/* Bande logos bas */
.hero__logos--new{
  grid-column:1 / -1;
  margin-top:70px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
}

.hero__logo{
  height:52px;
  width:auto;
  display:block;
}

.hero__logos-sep{
  color:rgba(255,255,255,.80);
  font-size:16px;
}

/* Responsive */
@media (max-width:1200px){
  .hero__grid--new{
    grid-template-columns:1fr;
    row-gap:40px;
    padding:96px 0 64px;
    text-align:center;
  }

  .hero__brand--new{
    text-align:center;
  }

  .brand__mark--new{
    width:min(380px, 80vw);
    margin:0 auto;
  }

  .hero__content--new{
    margin:0 auto;
  }

  .hero__statement{
    font-size:32px;
    line-height:40px;
  }

  .hero__logos--new{
    flex-direction:column;
    gap:12px;
    margin-top:40px;
  }
}

/* =========================================================
   SECTION 1 — BEIGE (1080px / padding 300)
   ========================================================= */

.section--beige{
  background:var(--beige);
  color:var(--noir);
}

.hero + .section--beige{
 
  padding:130px 0;
}

.h2-red{
  margin:0 0 32px;
  font-weight:700;
  font-size:45px;
  line-height:55px;
  color:var(--corail);
}

/* texte section 1 */
.section--beige p{
  margin:16px auto 0;
  max-width:980px;
  font-weight:400;
  font-size:17px;   /* ton réglage */
  line-height:26px;
  color:var(--noir);
}

.section--beige strong{ font-weight:700; }
.section--beige .beige-muted{ color:var(--gris2); }

/* h3 highlight section1 */
.section1-highlight{
  margin:32px auto 8px;
  max-width:980px;
  font-weight:500;
  font-size:27px;
  line-height:30px;
  color:var(--noir);
  text-align:center;
}

/* responsive section 1 */
@media (max-width:1200px){
  .hero + .section--beige{
    height:auto;
    padding:120px 0;
  }
  .h2-red{ font-size:34px; line-height:42px; }
  .section--beige p{ font-size:16px; line-height:24px; max-width:100%; }
  .section1-highlight{ font-size:18px; line-height:26px; }
}

/* =========================================================
   SECTIONS DARK (+ dancer optionnel)
   ========================================================= */

.section--dark{
  background:url("hero-bg.jpg");
	background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.section--dark h2{
  margin:0 0 28px;
  font-weight:700;
  font-size:60px;
  line-height:70px;
 
}

/* (générique : les p en dark) */
.section--dark p{
  margin:14px 0 0;
  font-weight:400;
  font-size:30px;
  line-height:39px;
  color:var(--beige);
  opacity:.95;
}

/* Fond danseuse sur certaines sections dark */
.section--dancer{
	 background:url("hero-bg.jpg");
	background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position:relative;
  overflow:hidden;
}
.section--dancer::after{
  content:"";
  position:absolute;
  inset:-20px;
  background:
    linear-gradient(180deg, rgba(0,0,30,.90), rgba(0,0,30,.86)),
    url("/e-thalie/assets/dancer.jpg") 65% 100% / cover no-repeat;
  pointer-events:none;
}
.section--dancer > .container{
  position:relative;
  z-index:1;
}

/* =========================================================
   CARDS (base)
   ========================================================= */
.cards{ display:grid; gap:24px; }
.cards--5{ grid-template-columns:repeat(5,1fr); }
.cards--3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--blanc);
  color:var(--noir);
  padding:24px;
}

.card h3{
  margin:0 0 12px;
  font-weight:700;
  font-size:35px;
  line-height:45px;
}

.card p{
  margin:0;
  font-weight:400;
  font-size:26px;
  line-height:35px;
  color:var(--gris);
}

/* =========================================================
   SECTION "eThalie est née..." — FINAL (dark + dancer)
   ========================================================= */

.section--dark.section--dancer .h2-red{
  text-align:center;
  margin:0 0 64px;
}

/* 5 cards alignées comme la capture */
.section--dark.section--dancer .cards.cards--5{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:28px;
  max-width:1400px;
  margin:0 auto;
}

.section--dark.section--dancer .cards.cards--5 .card{
  background:var(--beige);
  border-radius:18px;
  padding:32px 26px;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.section--dark.section--dancer .cards.cards--5 .card h3{
  margin:0 0 14px;
  font-weight:700;
  font-size:22px;
  line-height:28px;
  color:var(--noir);
  text-align:center;
}

.section--dark.section--dancer .cards.cards--5 .card p{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:24px;
  color:var(--gris);
  text-align:center;
}

@media (max-width:1400px){
  .section--dark.section--dancer .cards.cards--5{
    grid-template-columns:repeat(3, 1fr);
  }
}
@media (max-width:900px){
  .section--dark.section--dancer .cards.cards--5{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width:560px){
  .section--dark.section--dancer .cards.cards--5{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   2 COLONNES (complexité partagée)
   ========================================================= */
.subtitle{
  margin:0 0 56px;
  font-weight:400;
  font-size:30px;
  line-height:40px;
  color:var(--beige);
  opacity:.95;
}

.cols2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}

.col__title{
  margin:0 0 22px;
  font-weight:500;
  font-size:50px;
  line-height:60px;
  color:var(--bleu);
}

.bullets{
  margin:0;
  padding-left:24px;
}

.bullets li{
  margin:16px 0;
  font-weight:400;
  font-size:30px;
  line-height:40px;
  color:var(--beige);
}

/* =========================================================
   FLARE (fond clair + image)
   ========================================================= */

.section--flare h2{
  margin:0 0 20px;
  font-weight:700;
  font-size:60px;
  line-height:70px;
  color:var(--noir);
}

.subtitle--dark{
  margin:0 0 28px;
  font-weight:500;
  font-size:40px;
  line-height:45px;
  color:var(--noir);
}

.section--flare p{
  margin:14px 0 0;
  font-weight:400;
  font-size:20px;
  line-height:20px;
  color:var(--noir);
}


/* =========================================================
   SECTION FLARE — background image (photo fournie)
   ========================================================= */


.section--flare{
  background:
    url("flare-bg.jpg") top / cover no-repeat !important;
}

/* =========================================================
   TABS + BOXES
   ========================================================= */
.tabs{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:48px 0 36px;
}

.tab{
  appearance:none;
  border:0;
  padding:14px 22px;
  background:var(--fond-nuit);
  color:var(--beige);
  font-weight:700;
  font-size:26px;
  line-height:35px;
}

.tab.is-active{
  background:var(--corail);
  color:var(--beige);
}

.twobox{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}

.box{
  padding:36px;
  color:var(--beige);
}

.box--dark{ background:var(--fond-nuit); }
.box--red{ background:var(--corail); }

.box h3{
  margin:0 0 18px;
  font-weight:700;
  font-size:35px;
  line-height:45px;
  color:var(--beige);
}

.box__note{
  margin:22px 0 0;
  font-weight:500;
  font-size:26px;
  line-height:35px;
  color:var(--beige);
  opacity:.95;
}

/* =========================================================
   SECTION ROUGE
   ========================================================= */
.section--red{
  background:var(--corail);
  color:var(--beige);
}

.red__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
  margin-bottom:48px;
}

.red__title{
  margin:0;
  font-weight:700;
  font-size:60px;
  line-height:70px;
  color:var(--beige);
}

.red__text p{
  margin:0 0 16px;
  font-weight:400;
  font-size:30px;
  line-height:39px;
  color:var(--beige);
}

.cards--onred .card{ background:var(--beige); }
.cards--onred .card h3{ color:var(--noir); }
.cards--onred .card p{ color:var(--gris); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  border-bottom:1px solid var(--line-dark);
  padding:26px 0;
}

.faq summary{
  list-style:none;
  font-weight:700;
  font-size:30px;
  line-height:40px;
  color:var(--beige);
}
.faq summary::-webkit-details-marker{ display:none; }

.faq p{
  margin:16px 0 0;
  font-weight:400;
  font-size:26px;
  line-height:35px;
  color:var(--beige);
  opacity:.95;
}

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter{
  padding:120px 0;
}

.nl{
  margin-top:36px;
  display:flex;
  justify-content:center;
  gap:16px;
}

.nl input{
  width:min(520px, 100%);
  padding:16px 18px;
  background:transparent;
  border:2px solid var(--beige);
  color:var(--beige);
  font-weight:400;
  font-size:26px;
  line-height:35px;
  outline:none;
}
.nl input::placeholder{
  color: rgba(250,243,229,.65);
}

.nl button{
  border:0;
  padding:16px 26px;
  background:var(--beige);
  color:var(--fond-nuit);
  font-weight:700;
  font-size:26px;
  line-height:35px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--beige);
  color:var(--gris);
  padding:48px 0 56px;
}

.footer__small{
  margin:0 0 14px;
  font-weight:400;
  font-size:26px;
  line-height:35px;
  color:var(--gris);
}

/* =========================================================
   RESPONSIVE GLOBAL
   ========================================================= */

@media (max-width:1200px){
  .cards--5{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:980px){
  .cols2, .twobox, .red__grid{ grid-template-columns:1fr; gap:32px; }
  .cards--3{ grid-template-columns:1fr; }

  .tabs{ flex-direction:column; align-items:center; }
  .tab{ width:min(520px, 100%); text-align:center; }

  .nl{ flex-direction:column; align-items:center; }
  .nl button{ width:min(520px, 100%); }
}

@media (max-width:560px){
  .section{ padding:72px 0; }

  .section--dark h2,
  .section--flare h2{
    font-size:40px;
    line-height:48px;
  }

  .h2-red{
    font-size:34px;
    line-height:42px;
  }

  .card h3{ font-size:22px; line-height:28px; }
  .card p{ font-size:16px; line-height:24px; }

  .bullets li{ font-size:18px; line-height:28px; }
  .faq summary{ font-size:18px; line-height:26px; }
  .faq p{ font-size:16px; line-height:24px; }

  .nl input, .nl button{ font-size:18px; line-height:26px; }
  .footer__small{ font-size:16px; line-height:24px; }
}

/* Force le titre rouge pour la section "eThalie est née..." uniquement */
.section--dark.section--dancer .h2-red{
  color: var(--corail);
}


/* =========================================================
   SECTION — "Une complexité partagée" (ajustement final)
   ========================================================= */

/* Titre principal */
.section--dark .h2-red{
  text-align:center;
  margin-bottom:24px;
}

/* Sous-titre */
.section--dark .subtitle{
  text-align:center;
  margin:0 auto 72px;
  max-width:720px;

  font-weight:400;
  font-size:20px;
  line-height:28px;
  color:var(--blanc);
  opacity:1;
}

/* Grille 2 colonnes */
.section--dark .cols2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px; /* écart important comme sur la capture */
  align-items:start;
}

/* Titres de colonnes */
.section--dark .cols2 .col__title{
  margin:0 0 24px;
  font-weight:700;
  font-size:26px;
  line-height:32px;
  color:var(--blanc);
  text-align:center;
}

/* Listes */
.section--dark .cols2 .bullets{
  margin:0;
  padding-left:0;
  list-style:none;
}

.section--dark .cols2 .bullets li{
  margin:12px 0;
  font-weight:400;
  font-size:16px;
  line-height:24px;
  color:var(--blanc);
  opacity:.9;
  text-align:center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1100px){
  .section--dark .cols2{
    gap:64px;
  }
}

@media (max-width:900px){
  .section--dark .cols2{
    grid-template-columns:1fr;
    gap:48px;
  }

  .section--dark .cols2 .col__title,
  .section--dark .cols2 .bullets li{
    text-align:left;
  }
}

/* Cohérence couleur — titre "Une complexité partagée" */
.section--dark .h2-red{
  color: var(--corail);
}

	.section--dark.section--dancer h2.h2-red,
.section--dark h2.h2-red{
  color: var(--corail) !important;
}


/* =========================================================
   SECTION — Espaces Employeur / Intermittents
   ========================================================= */

/* Titres "Espace Employeur / Intermittents" */
.section--flare .twobox h3{
  display:inline-block;
  margin:0 auto 16px;
  padding:10px 24px;

  background:var(--fond-nuit);
  color:var(--blanc);

  font-weight:700;
  font-size:22px;
  line-height:28px;

  border-radius:10px;
  text-align:center;
}

/* Sous-titres */
.section--flare .twobox .box__subtitle{
  margin-bottom:24px;

  font-weight:700;
  font-size:22px;
  line-height:28px;
  color:var(--noir);

  text-align:center;
}

/* Blocs rouges */
.section--flare .twobox .box--red{
  background:var(--corail);
  border-radius:18px;
  padding:40px 36px;

  text-align:center;
}

/* Texte dans les blocs rouges */
.section--flare .twobox .box--red p{
  margin:0 0 14px;

  font-weight:400;
  font-size:18px;
  line-height:26px;
  color:var(--blanc);
}

/* Dernière ligne sans marge basse */
.section--flare .twobox .box--red p:last-child{
  margin-bottom:0;
}

/* Phrase de conclusion sous chaque bloc */
.section--flare .twobox .box__footer{
  margin-top:24px;

  font-weight:500;
  font-size:18px;
  line-height:26px;
  color:var(--noir);

  text-align:center;
}

/* Responsive */
@media (max-width:900px){
  .section--flare .twobox{
    grid-template-columns:1fr;
    gap:48px;
  }
}

/* =========================================================
   OPTIMISATION — box rouge (section "Deux espaces…")
   ========================================================= */

/* Card rouge : plus premium */
.section--flare .twobox .box--red{
  border-radius:18px;
  padding:44px 42px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

/* Titre dans la box rouge */
.section--flare .twobox .box--red h3{
  text-align:center;
  margin-bottom:22px;
  font-size:22px;
  line-height:28px;
}

/* Liste : on remplace les puces par une pastille élégante */
.section--flare .twobox .box--red .bullets{
  list-style:none;
  padding-left:0;
  margin:0;
}

/* Items : meilleure lisibilité + espacement régulier */
.section--flare .twobox .box--red .bullets li{
  position:relative;
  padding-left:18px;

  font-size:18px;
  line-height:28px;
  color:rgba(255,255,255,.95);

  margin:0;
}

.section--flare .twobox .box--red .bullets li + li{
  margin-top:16px;
}

/* Pastille */
.section--flare .twobox .box--red .bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:6px;
  height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.75);
}

/* Note de bas de box */
.section--flare .twobox .box--red .box__note{
  text-align:center;
  margin-top:26px;

  font-size:18px;
  line-height:26px;
  font-weight:500;
}

/* Responsive */
@media (max-width:900px){
  .section--flare .twobox .box--red{
    padding:34px 26px;
  }

  .section--flare .twobox .box--red .bullets li{
    font-size:16px;
    line-height:24px;
  }

  .section--flare .twobox .box--red .bullets li + li{
    margin-top:12px;
  }

  .section--flare .twobox .box--red .bullets li::before{
    top:10px;
  }

  .section--flare .twobox .box--red .box__note{
    font-size:16px;
    line-height:24px;
  }
}


/* =========================================================
   OPTIMISATION BOX ROUGE — PATCH BLINDÉ
   (fonctionne même si d'autres règles écrasent)
   ========================================================= */

/* La box rouge elle-même */
.box.box--red{
  border-radius:18px !important;
  padding:44px 42px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.10) !important;
}

/* Titre dans la box rouge */
.box.box--red h3{
  text-align:center !important;
  margin:0 0 22px !important;
  font-size:22px !important;
  line-height:28px !important;
}

/* La liste dans la box rouge (peu importe sa classe) */
.box.box--red ul{
  list-style:none !important;
  padding-left:0 !important;
  margin:0 !important;
}

/* Items */
.box.box--red ul li{
  position:relative !important;
  padding-left:18px !important;

  font-size:18px !important;
  line-height:28px !important;
  color:rgba(255,255,255,.95) !important;

  margin:0 !important;
  text-align:center !important; /* comme sur ta capture */
}

/* Espacement entre items */
.box.box--red ul li + li{
  margin-top:16px !important;
}

/* Pastille */
.box.box--red ul li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:12px !important;
  width:6px !important;
  height:6px !important;
  border-radius:99px !important;
  background:rgba(255,255,255,.75) !important;
}

/* Note / phrase sous la box (si présente) */
.box.box--red .box__note{
  text-align:center !important;
  margin-top:26px !important;
  font-size:18px !important;
  line-height:26px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,.95) !important;
}

/* Responsive */
@media (max-width:900px){
  .box.box--red{
    padding:34px 26px !important;
  }
  .box.box--red ul li{
    font-size:16px !important;
    line-height:24px !important;
  }
  .box.box--red ul li + li{
    margin-top:12px !important;
  }
  .box.box--red ul li::before{
    top:10px !important;
  }
  .box.box--red .box__note{
    font-size:16px !important;
    line-height:24px !important;
  }
}

/* =========================================================
   Deux espaces : égaliser la hauteur des 2 blocs rouges
   ========================================================= */

/* Les 2 colonnes prennent la même hauteur */
.twobox{
  align-items:stretch;
}

/* Chaque box rouge s'étire */
.twobox .box--red{
  height:100%;
}

/* =========================================================
   Égalisation PRO des box rouges (sans gonfler)
   ========================================================= */

/* Le wrapper de chaque colonne devient une colonne flexible */
.twobox > *{
  display:flex;
  flex-direction:column;
}

/* La box rouge prend la même hauteur, mais seulement entre elles */
.twobox .box--red{
  flex-grow:1;
}

/* Le footer reste collé en bas sans étirer la box */
.twobox .box__footer{
  margin-top:24px;
}

/* =========================================================
   SECTION ROUGE — "Une réponse structurelle…"
   ========================================================= */

/* Respirations */
.section--red{
  padding:140px 0;
}

/* Grille haut : titre + texte */
.section--red .red__grid{
  gap:72px;
  align-items:center;
  margin-bottom:56px;
}

/* Titre blanc : plus “affiche” mais propre */
.section--red .red__title{
  font-size:52px;
  line-height:60px;
  letter-spacing:0;
}

/* Texte d’intro dans le rouge */
.section--red .red__text p{
  font-size:18px;
  line-height:28px;
  opacity:.95;
  margin:0 0 14px;
}

/* Les 3 cards dans le rouge */
.section--red .cards.cards--3{
  gap:28px;
}

/* Cards sur fond beige : coins + ombre douce */
.section--red .cards--onred .card{
  border-radius:18px;
  padding:32px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

/* Titre card */
.section--red .cards--onred .card h3{
  font-size:22px;
  line-height:28px;
  margin-bottom:14px;
  text-align:left;
}

/* Texte card */
.section--red .cards--onred .card p{
  font-size:16px;
  line-height:24px;
  text-align:left;
}

/* Responsive */
@media (max-width:980px){
  .section--red{
    padding:110px 0;
  }
  .section--red .red__grid{
    grid-template-columns:1fr;
    gap:28px;
    margin-bottom:40px;
  }
  .section--red .red__title{
    font-size:38px;
    line-height:44px;
  }
  .section--red .cards.cards--3{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   AJUSTEMENTS — section rouge
   ========================================================= */

/* 1️⃣ Titre aligné à DROITE */
.section--red .red__title{
  text-align:right;
}

/* 2️⃣ Texte d’introduction en NOIR */
.section--red .red__text p{
  color: var(--noir);
}

/* 3️⃣ Contenu des cards CENTRÉ */
.section--red .cards--onred .card{
  text-align:center;
}

.section--red .cards--onred .card h3,
.section--red .cards--onred .card p{
  text-align:center;
}

/* Ajustement typo — titre section rouge */
.section--red .red__title{
  font-size:43px;
  line-height:50px; /* proportionnel et lisible */
}


/* =========================================================
   OPTIMISATION — pictos dans les cards
   ========================================================= */

/* Conteneur picto (si présent) */
.card .card__icon,
.card .icon{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:18px;
}

/* SVG */
.card svg{
  width:48px;
  height:48px;
  stroke:var(--fond-nuit);
  fill:none;
}

/* IMG */
.card img{
  max-width:48px;
  height:auto;
}

/* Cas spécifique cards sur fond rouge */
.section--red .card svg{
  stroke:var(--fond-nuit);
}

/* Légère respiration supplémentaire sous l’icône */
.card h3{
  margin-top:6px;
}

/* =========================================================
   Centrage des pictos dans les cards
   ========================================================= */

.card--icon{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Icône */
.card--icon .card__icon{
  display:block;
  margin:0 auto 18px;
}


/* =========================================================
   SECTION "Ce qui change concrètement"
   ========================================================= */

.section--changes{
  /* on réutilise ton flare-bg (déjà en place sur .section--flare) */
  padding:140px 0;
}

.changes__grid{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:80px;
  align-items:center;
}

.changes__left{
  text-align:right;
}

.changes__title{
  margin:0 0 18px;
  font-weight:700;
  font-size:28px;
  line-height:36px;
  color:var(--noir);
text-align:right;
}

.changes__subtitle{
  margin:0;
  font-weight:700;
  font-size:26px;
  line-height:32px;
  color:var(--noir);
text-align:right;
}

.changes__card{
  background: rgba(250,243,229,.92);
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  padding:26px 28px;
}

.changes__brand{
  margin-bottom:14px;
}

.changes__brandimg{
  height:34px;
  width:auto;
  display:block;
}

.changes__list{
  margin:0;
  padding-left:18px;
}

.changes__list li{
  margin:10px 0;
  font-size:16px;
  line-height:22px;
  color:var(--noir);
}

/* Responsive */
@media (max-width:980px){
  .changes__grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .changes__left{
    text-align:center;
  }
  .changes__card{
    padding:22px 20px;
  }
}


/* =========================================================
   SECTION DARK split "Histoire / Ambition"
   ========================================================= */

.section--story{
  background: var(--fond-nuit);
  color:var(--beige);
  padding:140px 0 110px;
  position:relative;
  overflow:hidden;
}


.story__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  align-items:start;
}

.story__h2{
  margin:0 0 18px;
  font-weight:700;
  font-size:28px;
  line-height:34px;
  color:var(--beige);
}

.story__p{
  margin:10px 0 0;
  font-size:16px;
  line-height:24px;
  color:rgba(250,243,229,.90);
  text-align:center;
}

.story__col{
  text-align:center;
}

.story__highlight{
  margin:22px 0 0;
  font-weight:700;
  font-size:16px;
  line-height:24px;
  color:var(--corail);
}

/* Logos en bas */
.story__logos{
  grid-column:1 / -1;
  margin-top:70px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
}

.story__logo{
  height:54px;
  width:auto;
  display:block;
}

.story__by{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:none;
  color:rgba(250,243,229,.75);
}

/* Responsive */
@media (max-width:980px){
  .story__grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .story__logos{
    margin-top:48px;
    flex-direction:column;
    gap:14px;
  }
}

/* Titre "Ce qui change concrètement" : override du h2 flare */
.section--changes .changes__title{
  font-size:30px;
  line-height:36px;
  text-align:right;
  margin:0 0 16px;
}

@media (max-width:980px){
  .section--changes .changes__title{
    text-align:center;
  }
}

/* =========================================================
   SECTION DARK — background image
   ========================================================= */

.section--story{
  background:
    linear-gradient(
      rgba(0,0,0,.65),
      rgba(0,0,0,.65)
    ),
    url("dark-bg.jpg") top / cover no-repeat;
  color:var(--beige);
  padding:140px 0 110px;
  position:relative;
  overflow:hidden;
}

.story__highlight{
  color:var(--corail);
}


/* =========================================================
   FAQ — background danseur
   ========================================================= */

.section--dark.section--faq{
  background:
    linear-gradient(rgba(0,0,30,.78), rgba(0,0,30,.78)),
    url("dancer.jpg") right center / cover no-repeat !important;
}

/* =========================================================
   SECTION "Une complexité partagée" — background danseur
   ========================================================= */

.section--dark.section--complexity{
  background:
    linear-gradient(
      rgba(0,0,30,.78),
      rgba(0,0,30,.78)
    ),
    url("dancer.jpg") right center / cover no-repeat;
}

/* =========================================================
   SECTION "Le problème, sans détour" — fond blanc
   ========================================================= */

.section--light.section--problem{
  background:#ffffff;
  color:var(--noir);
  padding:140px 0 120px;
}

/* Titre principal */
.section--problem h2{
  color:var(--corail);
  text-align:center;
  margin-bottom:64px;
}

/* Titres colonnes */
.section--problem h3{
  color:var(--bleu);
  text-align:center;
  margin-bottom:24px;
}

/* Texte fort sous titres */
.section--problem .lead{
  font-size:26px;
  line-height:34px;
  font-weight:600;
  color:var(--noir);
  text-align:center;
  margin-bottom:28px;
}

/* Listes */
.section--problem ul{
  list-style:disc;
  padding-left:18px;
}

.section--problem li{
  font-size:16px;
  line-height:24px;
  margin-bottom:12px;
}

/* Phrase de conclusion */
.section--problem .problem__conclusion{
  margin-top:64px;
  font-size:20px;
  line-height:30px;
  font-weight:600;
  text-align:center;
  color:var(--noir);
}

/* Responsive */
@media (max-width:980px){
  .section--light.section--problem{
    padding:96px 0 88px;
  }
  .section--problem .lead{
    font-size:22px;
    line-height:30px;
  }
}


/* =========================================================
   SECTION "Le problème, sans détour" — 2 colonnes (fond blanc)
   ========================================================= */

.section--light.section--problem{
  background:#fff;
  color:var(--noir);
  padding:140px 0 120px;
}

/* Titre principal */
.section--problem .problem__title{
  color:var(--corail);
  text-align:center;
	 font-size:60px;
  margin:0 0 72px;
}

/* Grille 2 colonnes */
.section--problem .problem__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  align-items:start;
}

/* Titres des colonnes */
.section--problem .problem__kicker{
  color:var(--bleu);
  text-align:center;
  margin:0 0 22px;
  font-weight:700;
  font-size:30px;
  line-height:28px;
}

/* Texte fort (noir) */
.section--problem .problem__lead{
  text-align:center;
  margin:0 0 26px;
  font-weight:400;
  font-size:28px;
  line-height:35px;
  color:var(--noir);
}

/* Listes (centrées visuellement) */
.section--problem .problem__list{
  margin:0;
  padding-left:0;
  list-style:none;
}

.section--problem .problem__list li{
  text-align:center;
  font-size:16px;
  line-height:24px;
  margin:12px 0;
}

/* Puce discrète */
.section--problem .problem__list li::before{
  content:"• ";
}

/* Conclusion */
.section--problem .problem__conclusion{
  margin:72px auto 0;
  text-align:center;
  font-weight:500;
  font-size:35px;
  line-height:46px;
  max-width:980px;
}

/* Responsive */
@media (max-width:980px){
  .section--light.section--problem{
    padding:96px 0 88px;
  }

  .section--problem .problem__grid{
    grid-template-columns:1fr;
    gap:56px;
  }

  .section--problem .problem__kicker{
    font-size:28px;
    line-height:34px;
  }

  .section--problem .problem__lead{
    font-size:27px;
    line-height:35px;
  }

  .section--problem .problem__conclusion{
    font-size:18px;
    line-height:26px;
    margin-top:56px;
  }
}


/* =========================================================
   SECTION “…ce que propose e-Thalie” (fond flare, 2 colonnes)
   ========================================================= */

.section--offer{
  /* on reste sur le fond flare déjà géré par .section--flare */
  padding:140px 0 120px;
}

/* Titre */
.section--offer .offer__title{
  margin:0 0 80px;
  text-align:center;
  color:var(--corail);
  font-weight:700;
  font-size:52px;
  line-height:60px;
}

/* Grille 2 colonnes */
.section--offer .offer__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:140px;
  align-items:start;
}

/* Titre colonne (bleu) */
.section--offer .offer__kicker{
  margin:0 0 22px;
  text-align:center;
  color:var(--bleu);
  font-weight:700;
  font-size:40px;
  line-height:48px;
}

/* Texte fort noir */
.section--offer .offer__lead{
  margin:0 0 26px;
  text-align:center;
  color:var(--noir);
  font-weight:400;
  font-size:33px;
  line-height:42px;
}

/* Variante MPPS (un peu moins massif) */
.section--offer .offer__lead--mpps{
  margin-top:44px;
  font-size:28px;
  line-height:38px;
}

/* Listes centrées (style “bullet” comme la capture) */
.section--offer .offer__list{
  margin:0;
  padding-left:0;
  list-style:none;
}

.section--offer .offer__list li{
  text-align:center;
  color:var(--noir);
  font-size:18px;
  line-height:31px;
  margin:14px 0;
}

/* Puce centrée */
.section--offer .offer__list li::before{
  content:"• ";
}

/* Responsive */
@media (max-width:1100px){
  .section--offer .offer__grid{
    gap:72px;
  }
}

@media (max-width:980px){
  .section--offer{
    padding:96px 0 88px;
  }

  .section--offer .offer__title{
    font-size:38px;
    line-height:46px;
    margin-bottom:56px;
  }

  .section--offer .offer__grid{
    grid-template-columns:1fr;
    gap:56px;
  }

  .section--offer .offer__kicker{
    font-size:30px;
    line-height:36px;
  }

  .section--offer .offer__lead{
    font-size:26px;
    line-height:34px;
  }

  .section--offer .offer__lead--mpps{
    font-size:24px;
    line-height:32px;
  }

  .section--offer .offer__list li{
    font-size:16px;
    line-height:24px;
  }
}

/* =========================================================
   SECTION — "Pourquoi maintenant"
   ========================================================= */

.section--now{
  background:var(--corail);
  padding:140px 0 120px;
}

/* Titre */
.section--now .now__title{
  margin:0 0 72px;
  text-align:center;
  color:#FAF3E5;
  font-weight:700;
  font-size:56px;
  line-height:64px;
}

/* Grille 3 cards */
.section--now .now__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  align-items:stretch;
}

/* Cards ton sur ton */
.section--now .now__card{
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:56px 34px;

  text-align:center;
  color:#FAF3E5;
  font-weight:300;
  font-size:17px;
  line-height:25px;

  /* ombre douce + profondeur */
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}

/* Responsive */
@media (max-width:1100px){
  .section--now .now__grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .section--now .now__title{
    font-size:40px;
    line-height:48px;
    margin-bottom:44px;
  }

  .section--now .now__card{
    padding:34px 22px;
    font-size:18px;
    line-height:28px;
  }
}


/* =========================================================
   SECTION — "Où en est le projet"
   ========================================================= */

.section--status{
  background:
    url("hero-bg.jpg");
background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding:140px 0 120px;
  color:var(--beige);
  text-align:center;
}

/* Titre corail */
.section--status .status__title{
  margin:0 0 18px;
  color:var(--corail);
  font-weight:700;
  font-size:56px;
  line-height:64px;
}

/* Sous-titre blanc */
.section--status .status__subtitle{
  margin:0 0 64px;
  color:rgba(255,255,255,.92);
  font-weight:400;
  font-size:36px;
  line-height:34px;
}

/* 2 colonnes */
.section--status .status__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  align-items:start;
}

/* Titres colonnes bleus */
.section--status .status__kicker{
  margin:0 0 18px;
  color:var(--bleu);
  font-weight:700;
  font-size:40px;
  line-height:48px;
}

/* Listes */
.section--status .status__list{
  margin:0;
  padding-left:0;
  list-style:none;
}

.section--status .status__list li{
  margin:14px 0;
  font-size:18px;
  line-height:28px;
  color:rgba(255,255,255,.90);
  font-weight:500;
}

.section--status .status__list li::before{
  content:"• ";
}

/* Punchline corail */
.section--status .status__highlight{
  margin:80px 0 0;
  color:var(--corail);
  font-weight:700;
  font-size:34px;
  line-height:42px;
}

/* Responsive */
@media (max-width:980px){
  .section--status{
    padding:110px 0 96px;
  }

  .section--status .status__title{
    font-size:40px;
    line-height:48px;
  }

  .section--status .status__subtitle{
    font-size:20px;
    line-height:28px;
    margin-bottom:44px;
  }

  .section--status .status__grid{
    grid-template-columns:1fr;
    gap:48px;
  }

  .section--status .status__kicker{
    font-size:30px;
    line-height:36px;
  }

  .section--status .status__list li{
    font-size:16px;
    line-height:24px;
  }

  .section--status .status__highlight{
    margin-top:56px;
    font-size:24px;
    line-height:32px;
  }
}

/* =========================================================
   SECTION CTA — "Entrez dans le cadre e-Thalie"
   ========================================================= */

.section--cta{
  background:var(--corail);
  color:var(--blanc);
  padding:140px 0 120px;
  text-align:center;
}

/* Titre */
.section--cta .cta__title{
  margin:0 0 72px;
  font-weight:700;
  font-size:56px;
  line-height:64px;
  color:#FAF3E5;
}

/* 2 cards */
.section--cta .cta__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:stretch;
  margin-bottom:80px;
}

/* Cards ton sur ton */
.section--cta .cta__card{
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:56px 44px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}

/* Titres card (blanc) */
.section--cta .cta__cardtitle{
  margin:0 0 18px;
  font-weight:700;
  font-size:36px;
  line-height:42px;
  color:#FAF3E5;
}

/* Texte card (noir dans la capture) */
.section--cta .cta__cardtext{
  margin:0;
  font-weight:400;
  font-size:30px;
  line-height:38px;
  color:rgba(0,0,0,.92);
}

/* Bloc suivi */
.section--cta .cta__follow{
  max-width:920px;
  margin:0 auto;
}

.section--cta .cta__followtitle{
  margin:0 0 18px;
  font-weight:700;
  font-size:44px;
  line-height:52px;
  color:#FAF3E5;
}

.section--cta .cta__followlink{
  margin:0 0 10px;
  font-weight:700;
  font-size:22px;
  line-height:30px;
  color:rgba(255,255,255,.95);
}

.section--cta .cta__follownote{
  margin:0 0 46px;
  font-weight:500;
  font-size:18px;
  line-height:26px;
  color:rgba(255,255,255,.90);
}

.section--cta .cta__form{
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:.06em;
  font-size:26px;
  line-height:32px;
}

.section--cta .cta__email{
  margin:0;
  font-weight:700;
  font-size:22px;
  line-height:30px;
}

/* Responsive */
@media (max-width:980px){
  .section--cta{
    padding:110px 0 96px;
  }

  .section--cta .cta__title{
    font-size:40px;
    line-height:48px;
    margin-bottom:44px;
  }

  .section--cta .cta__grid{
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:52px;
  }

  .section--cta .cta__card{
    padding:34px 22px;
  }

  .section--cta .cta__cardtitle{
    font-size:28px;
    line-height:34px;
  }

  .section--cta .cta__cardtext{
    font-size:24px;
    line-height:32px;
  }

  .section--cta .cta__followtitle{
    font-size:30px;
    line-height:38px;
  }

  .section--cta .cta__followlink{
    font-size:18px;
    line-height:26px;
  }

  .section--cta .cta__follownote{
    font-size:16px;
    line-height:24px;
  }

  .section--cta .cta__form{
    font-size:22px;
    line-height:28px;
  }

  .section--cta .cta__email{
    font-size:18px;
    line-height:26px;
  }
}

/* =========================================================
   SECTION FAQ — fond clair
   ========================================================= */

.section--faq{
  background:#efe9de; /* beige clair comme la capture */
  padding:120px 0 120px;
  color:#0e0e1a;
}

/* Titre FAQ */
.section--faq h2{
  margin-bottom:56px;
  font-size:48px;
  line-height:56px;
  font-weight:700;
  color:#0e0e1a;
}

/* Items FAQ */
.section--faq .faq-item{
  background:#f7f2e6;
  border:1px solid #b8b3a8;
  border-radius:6px;
  padding:18px 22px;
  margin-bottom:16px;
}

/* Question */
.section--faq .faq-item h3{
  margin:0 0 8px;
  font-size:20px;
  line-height:28px;
  font-weight:700;
  color:#000;
}

/* Réponse */
.section--faq .faq-item p{
  margin:0;
  font-size:15px;
  line-height:22px;
  color:#222;
}

/* Lien mail */
.section--faq a{
  color:#000;
  font-weight:600;
  text-decoration:underline;
}

/* Responsive */
@media (max-width:980px){
  .section--faq{
    padding:96px 0;
  }

  .section--faq h2{
    font-size:36px;
    line-height:44px;
  }

  .section--faq .faq-item h3{
    font-size:18px;
    line-height:26px;
  }

  .section--faq .faq-item p{
    font-size:14px;
    line-height:22px;
  }
}

/* =========================================================
   FAQ — version fond clair (comme la capture)
   ========================================================= */

.section--faq{
  background:#efe9de;
  padding:120px 0;
  color:#0e0e1a;
}

/* Titre */
.section--faq h2{
  margin:0 0 56px;
  font-weight:700;
  font-size:48px;
  line-height:56px;
  color:#0e0e1a;
}

/* Chaque bloc (details) */
.section--faq details.faq{
  background:#f7f2e6;
  border:1px solid #b8b3a8;
  border-radius:6px;
  padding:0;
  margin:0 0 16px;
  overflow:hidden;
}

/* Question */
.section--faq details.faq summary{
  padding:14px 18px;
  font-weight:700;
  font-size:20px;
  line-height:28px;
  color:#000;
  list-style:none;
  cursor:pointer;
  background:#f7f2e6;
}

/* Supprimer la flèche native */
.section--faq details.faq summary::-webkit-details-marker{
  display:none;
}

/* Séparateur entre question et réponse */
.section--faq details.faq[open] summary{
  border-bottom:1px solid #b8b3a8;
}

/* Réponse */
.section--faq details.faq p{
  margin:0;
  padding:14px 18px 16px;
  font-size:15px;
  line-height:22px;
  color:#222;
}

/* Responsive */
@media (max-width:980px){
  .section--faq{
    padding:96px 0;
  }

  .section--faq h2{
    font-size:36px;
    line-height:44px;
    margin-bottom:40px;
  }

  .section--faq details.faq summary{
    font-size:18px;
    line-height:26px;
  }

  .section--faq details.faq p{
    font-size:14px;
    line-height:22px;
  }
}


/* =========================================================
   SECTION FIN — bandeau de clôture (dark + logos)
   ========================================================= */

.section--end{
  background:url("hero-bg.jpg");
background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding:90px 0 70px;
  color:rgba(255,255,255,.92);
  text-align:center;
}

.end__wrap{
  max-width:1100px;
}

.end__text{
  margin:0 auto 44px;
  font-weight:500;
  font-size:18px;
  line-height:28px;
  max-width:900px;
}

.end__accent{
  color:var(--corail);
  font-weight:700;
}

.end__logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
}

.end__logo{
  height:56px;
  width:auto;
  display:block;
}

.end__sep{
  color:rgba(255,255,255,.82);
  font-size:16px;
}

/* Responsive */
@media (max-width:900px){
  .section--end{
    padding:70px 0 56px;
  }

  .end__text{
    font-size:16px;
    line-height:24px;
    margin-bottom:28px;
  }

  .end__logos{
    flex-direction:column;
    gap:12px;
  }

  .end__logo{
    height:48px;
  }

  .end__sep{
    font-size:14px;
  }
}

/* HERO new — padding horizontal (fix définitif) */
.hero.hero--new .hero__grid--new{
  padding:120px var(--pad) 80px !important; /* top | left/right | bottom */
}