/* Version fidèle à la maquette validée */
:root{
  --blue:#006D83;
  --blue-dark:#005D73;
  --blue-deep:#005065;
  --green:#78bd43;
  --green-dark:#62a935;
  --pink:#e5005b;
  --text:#17384f;
  --muted:#60717b;
  --line:#dde8ec;
  --soft:#f6faf9;
  --white:#fff;
  --shadow:0 16px 42px rgba(0,64,86,.08);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Outfit,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,calc(100% - 72px));margin:0 auto}

/* Header */
.site-header{padding:28px 0 18px;background:#fff}
.header-inner{
  display:grid;
  grid-template-columns:260px 1fr auto;
  gap:32px;
  align-items:center;
}
.logo img{width:245px;height:auto;display:block}
.main-nav{
  justify-self:end;
  display:flex;
  gap:34px;
  align-items:center;
  font-size:14px;
  font-weight:500;
  color:#0f3449;
}
.main-nav a{position:relative;padding:10px 0}
.main-nav .active{color:#0f3449;font-weight:500}
.main-nav .active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:3px;
  border-radius:20px;
  background:var(--green);
}
.social-links{display:flex;gap:18px;color:var(--blue-deep);font-size:23px;font-weight:800;align-items:center}

/* Hero */
.hero{
  padding:34px 0 48px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center;
  gap:30px;
}
.hero-text h1{
  margin:0 0 28px;
  font-family:"EB Garamond",Georgia,serif;
  font-weight:700;
  font-size:clamp(54px,5.4vw,76px);
  line-height:.93;
  letter-spacing:-.02em;
  color:var(--blue-dark);
}
.hero-text h1 span{color:var(--green)}
.hero-text p{
  margin:0;
  font-size:21px;
  line-height:1.55;
  color:#24485f;
}
.hero-actions{display:flex;gap:22px;margin-top:50px}
.btn{
  min-height:56px;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  border-radius:9px;
  font-weight:700;
  font-size:15px;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  box-shadow:0 10px 24px rgba(0,93,115,.18);
}
.btn-outline{
  color:var(--blue);
  border:2px solid var(--blue);
  background:white;
}
.btn-green{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  min-height:48px;
}
.hero-image{
  display:flex;
  justify-content:flex-end;
}
.hero-image img{
  width:100%;
  max-width:650px;
  display:block;
}

/* Titles */
.section-title{text-align:center}
.section-title h2{
  margin:0;
  font-family:"EB Garamond",Georgia,serif;
  color:var(--blue-dark);
  font-size:36px;
  line-height:1;
}
.section-title i{
  display:block;
  width:42px;
  height:3px;
  background:var(--green);
  border-radius:20px;
  margin:14px auto 0;
}
.section-header{
  position:relative;
  margin-bottom:30px;
}
.simple-link{
  position:absolute;
  right:0;
  top:8px;
  display:inline-flex;
  gap:12px;
  align-items:center;
  color:var(--blue-dark);
  font-weight:800;
  font-size:14px;
}

/* Concept */
.concept{padding:42px 0 30px}
.concept-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:35px;
}
.concept-grid article{
  text-align:center;
  padding:0 34px;
  border-right:1px solid var(--line);
}
.concept-grid article:last-child{border-right:none}
.round{
  width:58px;
  height:58px;
  border-radius:50%;
  margin:0 auto 17px;
  display:grid;
  place-items:center;
  color:var(--blue);
  font-size:25px;
}
.round.green{background:#e8f4dc}
.round.blue{background:#e7f3f5}
.round.beige{background:#f3e7de}
.concept h3{
  margin:0 0 10px;
  color:var(--blue);
  font-size:15px;
  font-weight:800;
}
.concept p{
  margin:0 auto;
  max-width:190px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.note{
  width:min(870px,100%);
  margin:34px auto 0;
  padding:13px 18px;
  border-radius:8px;
  background:#f3f6f7;
  color:var(--blue);
  text-align:center;
  font-weight:600;
  font-size:15px;
}
.note span{font-size:22px;vertical-align:middle;margin-right:12px}
.note strong{color:var(--green-dark)}

/* Kits */
.kits{padding:20px 0 35px}
.kits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.kit-card{
  display:block;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,64,86,.06);
}
.kit-card img{display:block;width:100%;height:auto}

/* How */
.how{padding:25px 0 36px}
.steps{
  display:grid;
  grid-template-columns:1fr 55px 1fr 55px 1fr;
  gap:18px;
  align-items:center;
  margin-top:34px;
}
.step{
  position:relative;
  display:grid;
  grid-template-columns:94px 1fr;
  gap:18px;
  align-items:center;
}
.number{
  position:absolute;
  top:2px;
  left:0;
  width:31px;
  height:31px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
}
.step-icon{
  width:82px;
  height:82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f2f5f6;
  color:var(--blue);
  font-size:34px;
  margin-left:14px;
}
.step h3{
  margin:0 0 8px;
  color:var(--blue);
  font-size:16px;
  line-height:1.14;
}
.step p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.dash{text-align:center;color:#8fc6d4;font-size:30px}

/* Contact band */
.contact-band{padding:18px 0 28px}
.band{
  display:grid;
  grid-template-columns:34% 66%;
  gap:28px;
  align-items:center;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue));
  border-radius:9px;
  padding:28px 30px 28px 46px;
  box-shadow:0 16px 42px rgba(0,64,86,.16);
}
.band-left h2{
  margin:0 0 8px;
  font-family:"EB Garamond",Georgia,serif;
  color:#fff;
  font-size:35px;
  line-height:1;
}
.band-left p{
  margin:0 0 22px;
  color:rgba(255,255,255,.88);
}
.band-right{
  background:#fff;
  border-radius:10px;
  padding:22px 24px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}
.contact-item{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  align-items:center;
  padding:0 18px;
  border-right:1px solid var(--line);
}
.contact-item:last-child{border-right:none}
.contact-item > span{
  width:52px;height:52px;
  border:2px solid #cfe5ea;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue);
  font-size:26px;
}
.contact-item strong{
  display:block;
  text-transform:uppercase;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  margin-bottom:7px;
}
.contact-item a{
  color:#173b50;
  font-size:13px;
  font-weight:600;
}
.socials{display:block}
.socials p{display:flex;gap:22px;margin:8px 0 0}
.socials a{font-size:30px;color:var(--blue);font-weight:800;line-height:1}

/* Footer */
.footer{
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:center;
  padding:0 0 28px;
  color:#72808a;
  font-size:12px;
}
.footer p{margin:0}

/* Responsive */
@media(max-width:980px){
  .container{width:min(720px,calc(100% - 36px))}
  .header-inner{grid-template-columns:1fr;justify-items:center}
  .main-nav{justify-self:center;flex-wrap:wrap;justify-content:center;gap:20px}
  .hero-grid{grid-template-columns:1fr}
  .hero-image{justify-content:center}
  .concept-grid,.kits-grid{grid-template-columns:1fr 1fr}
  .concept-grid article:nth-child(2){border-right:none}
  .steps{grid-template-columns:1fr}
  .dash{display:none}
  .band{grid-template-columns:1fr}
  .band-right{grid-template-columns:1fr}
  .contact-item{border-right:none;border-bottom:1px solid var(--line);padding:16px 0}
  .contact-item:last-child{border-bottom:none}
}
@media(max-width:640px){
  .container{width:calc(100% - 28px)}
  .logo img{width:215px}
  .hero-text h1{font-size:48px}
  .hero-text p{font-size:18px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .concept-grid,.kits-grid{grid-template-columns:1fr}
  .concept-grid article{border-right:none;border-bottom:1px solid var(--line);padding:24px 0}
  .section-header .simple-link{position:static;display:flex;justify-content:center;margin-top:16px}
  .band{padding:24px}
  .footer{flex-direction:column;gap:10px}
}


/* --- V3 corrections : bleu + graisses typographiques --- */
:root{
  --blue:#006D83;
  --blue-dark:#005D73;
  --blue-deep:#005065;
}

/* Grand titre et titres de section moins gras */
.hero-text h1{
  font-weight:600;
}

.section-title h2,
.band-left h2{
  font-weight:600;
}

/* Liens et petits titres moins lourds */
.main-nav,
.simple-link,
.concept h3,
.step h3,
.contact-item strong{
  font-weight:600;
}

/* Boutons restent lisibles mais moins massifs */
.btn{
  font-weight:600;
}

.btn-primary,
.btn-green{
  font-weight:700;
}

/* Bleu plus doux sur les boutons et le bandeau */
.btn-primary{
  background:linear-gradient(135deg,#006D83,#005D73);
  box-shadow:0 10px 24px rgba(0,109,131,.16);
}

.btn-outline{
  border-color:#006D83;
  color:#005D73;
}

.band{
  background:linear-gradient(135deg,#005065,#006D83);
}

/* Pictos concept plus doux */
.round{
  font-family:Arial, sans-serif;
  font-weight:400;
  color:#006D83;
  box-shadow:0 0 0 1px rgba(0,109,131,.06) inset;
}

.round.green{
  background:#EAF5E4;
  color:#5FA42F;
}

.round.blue{
  background:#E8F4F6;
  color:#006D83;
}

.round.beige{
  background:#F3E8DE;
  color:#006D83;
}

/* Bandeau “essentiel” plus proche de la maquette : discret et horizontal */
.note{
  width:min(930px,100%);
  padding:12px 22px;
  background:#F3F6F7;
  border-radius:8px;
  font-size:14px;
  line-height:1.35;
  box-shadow:none;
}

.band-left h2{
  font-size:34px;
}

.band-left p,
.contact-item a{
  font-weight:400;
}


/* --- V4 corrections --- */
.hero-text h1{
  font-weight:500 !important;
  letter-spacing:-0.03em;
}

/* Bandeau essentiel sur une seule ligne */
.note{
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:13px;
}


/* ---- V5 : corrections titre + texte + bandeau essentiel ---- */

/* Titre principal : interlignage un peu plus ouvert */
.hero-text h1{
  line-height:1.02;
}

/* Texte sous le titre : une graisse et un corps en dessous */
.hero-text p{
  font-size:20px;
  font-weight:400;
  line-height:1.52;
}

/* Bandeau “Vous n’adaptez que l’essentiel” : largeur ajustée au texte */
.note{
  width:max-content;
  max-width:100%;
  padding:12px 26px;
  margin-left:auto;
  margin-right:auto;
}


/* ---- V6 : logo et pictos fournis + bandeau essentiel pleine largeur du texte ---- */

/* Logo horizontal fourni */
.logo img{
  width:250px;
  height:auto;
}

/* Pictos fournis dans les pastilles */
.round{
  display:flex;
  align-items:center;
  justify-content:center;
}

.round img{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
}

/* Le picto livre dans le bandeau essentiel */
.note .note-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-right:4px;
}

.note .note-icon img{
  width:21px;
  height:21px;
  object-fit:contain;
  display:block;
}

/* Bandeau “Vous n’adaptez que l’essentiel” :
   encadré bleu clair sur toute la largeur de la phrase */
.note{
  width:fit-content;
  max-width:none;
  min-width:min(930px,100%);
  padding:12px 24px;
  background:#F1F7F8;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* Sécurité responsive : le bandeau peut repasser sur plusieurs lignes sur petit écran */
@media(max-width:980px){
  .note{
    min-width:0;
    width:100%;
    white-space:normal;
    text-align:center;
  }
}


/* ---- V7 : corrections logo + pictos ---- */
/* Logo : vert rapproché de l’original */
.logo img{width:250px;height:auto;display:block}

/* Supprimer les cercles de fond derrière les pictos fournis */
.concept .round{
  width:64px;
  height:64px;
  margin:0 auto 17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0;
}
.concept .round.green,
.concept .round.blue,
.concept .round.beige{
  background:transparent !important;
}
.concept .round img{
  width:64px;
  height:64px;
  object-fit:contain;
  display:block;
}

/* Picto livre du bandeau */
.note .note-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:10px;
}
.note .note-icon img{
  width:24px;
  height:24px;
  object-fit:contain;
  display:block;
}


/* --- V10 : ajustements suite aux annotations --- */
.logo img{width:290px;}
.hero-text p{
  font-size:19px;
  font-weight:400;
  color:#35576c;
}
.btn{border-radius:12px;}
.btn-green{border-radius:12px;}
.band{border-radius:14px;}
.band-right{border-radius:12px;}
.section-title h2,
.band-left h2{font-weight:700;}
.concept-grid article:first-child p{max-width:215px;}
.note{
  width:max-content;
  max-width:860px;
  padding:10px 16px;
  border-radius:7px;
  background:#eef4f7;
  color:var(--blue);
  white-space:nowrap;
  gap:0;
}
.note strong{color:inherit;}
.note .note-icon{display:none;}
.contact-band{padding:18px 0 24px;}
.footer{gap:0;}
.footer > *{
  position:relative;
  padding:0 16px;
}
.footer > * + *::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:14px;
  background:#cfd8dd;
  transform:translateY(-50%);
}
@media(max-width:640px){
  .logo img{width:240px;}
  .note{white-space:normal; width:100%;}
  .footer > *{padding:0;}
  .footer > * + *::before{display:none;}
}


/* --- V11 : dernières annotations du 05/07 soir --- */

/* Texte sous le titre : passage de “pensé” à la ligne */
.hero-text p{
  max-width:430px;
}

/* Picto support remplacé par le nouveau fichier fourni */
.concept .round img[src$="picto-support.png"]{
  width:64px;
  height:64px;
}

/* Bandeau essentiel : moins large, juste un peu plus large que le texte,
   et plus d’espace au-dessus */
.note{
  min-width:0 !important;
  width:fit-content !important;
  max-width:calc(100% - 120px);
  padding:10px 18px;
  margin-top:46px;
  border-radius:7px;
}

/* Respiration légère après le bloc concept */
.concept{
  padding-bottom:38px;
}

@media(max-width:980px){
  .note{
    max-width:100%;
    width:100% !important;
  }
}


/* --- V12 : annotations + nouveaux pictos réseaux / contact --- */

/* Réseaux du header : uniquement LinkedIn et Instagram en images */
.social-links{
  gap:10px;
  align-items:center;
}
.social-links a{
  display:inline-flex;
  width:28px;
  height:28px;
}
.social-links img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:5px;
}

/* Texte d'intro : largeur pour faire passer “pensé” à la ligne */
.hero-text p{
  max-width:440px;
}

/* Plus d'espace entre les blocs concept et le bandeau note */
.concept-grid{
  margin-bottom:0;
}
.note{
  width:fit-content !important;
  max-width:calc(100% - 120px);
  min-width:0 !important;
  padding:10px 12px !important;
  margin-top:54px !important;
  white-space:nowrap;
  text-align:center;
  display:block;
}

/* Contact band : pictos image email/téléphone sans cercle CSS supplémentaire */
.contact-item > span.icon-img{
  width:54px;
  height:54px;
  border:none !important;
  border-radius:0 !important;
  padding:0;
  display:grid;
  place-items:center;
}
.contact-item > span.icon-img img{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
}

/* Réseaux dans le bandeau bleu : uniquement LinkedIn et Instagram */
.socials p{
  display:flex;
  gap:10px;
  margin:8px 0 0;
  align-items:center;
}
.socials p a{
  display:inline-flex;
  width:28px;
  height:28px;
}
.socials p img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:5px;
}

/* Un peu plus d’air au-dessus du bandeau note */
.concept{
  padding-bottom:40px;
}

@media(max-width:980px){
  .note{
    max-width:100%;
    white-space:normal;
  }
}


/* --- V13 : dernières annotations --- */
/* Picto ampoule et téléphone remplacés par les nouveaux fichiers fournis */

/* Phrase/bandeau “Vous n’adaptez...” : centré et encadré ajusté à la largeur du texte */
.note{
  display:table !important;
  margin:52px auto 0 !important;
  padding:10px 14px !important;
  width:auto !important;
  max-width:none !important;
  text-align:center !important;
  white-space:nowrap;
}

/* Plus d'air entre les textes des blocs concept et le bandeau note */
.concept-grid article p{
  margin-bottom:22px;
}

/* Bandeau contact : panneau blanc un peu moins large et de même hauteur visuelle que la partie gauche */
.band{
  align-items:stretch;
}
.band-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.band-right{
  width:82%;
  justify-self:end;
  align-self:stretch;
  min-height:128px;
  padding:18px 22px;
  grid-template-columns:1fr 1fr .8fr;
  column-gap:0;
}
.contact-item{
  height:100%;
  align-items:center;
}
.contact-item.socials{
  grid-template-columns:1fr;
}
.contact-item.socials > div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
}

@media(max-width:980px){
  .note{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    white-space:normal;
  }
  .band-right{
    width:100%;
    min-height:0;
  }
}


/* --- V14 : ajustements demandés --- */
/* Les pictos ampoule et téléphone sont bien les versions modifiées fournies */

/* Rapprocher le bandeau "Vous n’adaptez que l’essentiel..." du bloc Notre concept */
.note{
  margin-top:30px !important;
}

/* Remettre le bouton "Contactez-nous" à sa taille d’avant */
.band-left{
  align-items:flex-start;
}
.band-left .btn,
.band-left .btn-green{
  align-self:flex-start;
  width:auto;
  min-height:48px;
  padding:0 24px;
}


/* --- V15 ajustement encadré bleu du bas --- */
.contact-band{padding:18px 0 28px}
.band{
  grid-template-columns:34% 66%;
  gap:20px;
}
.band-right{
  justify-self:start;
  width:min(780px,100%);
  margin-left:-34px;
  padding:18px 22px;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1.1fr) minmax(0,.75fr);
  align-items:center;
}
.contact-item{
  padding:0 18px;
}
.contact-item strong{
  white-space:nowrap;
}
.contact-item a{
  white-space:nowrap;
}
.contact-item div{
  min-width:0;
}
.socials{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:18px;
}
.socials div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.socials strong{
  margin-bottom:10px;
}
.socials p{
  display:flex;
  gap:12px;
  margin:0;
}
.socials img{
  width:28px;
  height:28px;
  display:block;
}

@media(max-width:980px){
  .band-right{
    width:100%;
    margin-left:0;
    grid-template-columns:1fr;
  }
  .socials{
    padding-left:0;
  }
}


/* --- V16 : ajustements encadré blanc du bandeau bas --- */
/* Encadré blanc moins large, toujours placé à droite, avec moins d'espaces internes */
.band{
  grid-template-columns:34% 66%;
  gap:22px;
}

.band-right{
  justify-self:end;
  width:min(720px,100%);
  margin-left:0;
  padding:18px 18px;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr) minmax(0,.72fr);
  column-gap:0;
}

.contact-item{
  padding:0 14px;
  gap:12px;
}

.contact-item:first-child{
  padding-left:10px;
}

.contact-item:last-child{
  padding-right:10px;
}

.contact-item > span.icon-img{
  width:50px;
  height:50px;
}

.contact-item > span.icon-img img{
  width:50px;
  height:50px;
}

.contact-item strong{
  margin-bottom:6px;
}

.socials{
  padding-left:14px;
}

.socials p{
  gap:10px;
}

@media(max-width:980px){
  .band-right{
    width:100%;
    margin-left:0;
    grid-template-columns:1fr;
  }
}


/* --- V17 : derniers ajustements sur l'encadré blanc du bandeau bas --- */
.band{
  grid-template-columns:35% 65%;
  gap:20px;
}

.band-right{
  justify-self:end;
  width:min(690px, 100%);
  padding:18px 14px 18px 16px;
  grid-template-columns:minmax(0,1.48fr) minmax(0,1.10fr) minmax(0,0.82fr);
  align-items:center;
}

.contact-item{
  gap:10px;
  padding:0 12px;
}

.contact-item:first-child{
  padding-left:6px;
  padding-right:12px;
}

.contact-item:nth-child(2){
  padding-left:18px;
  padding-right:10px;
}

.contact-item a{
  white-space:nowrap;
}

.socials{
  padding-left:18px;
  padding-right:6px;
}

.socials p{
  gap:12px;
  margin:8px 0 0;
}

@media(max-width:980px){
  .band-right{
    width:100%;
    grid-template-columns:1fr;
  }

  .contact-item,
  .contact-item:first-child,
  .contact-item:nth-child(2),
  .socials{
    padding:16px 0;
  }

  .contact-item a{
    white-space:normal;
  }
}


/* --- V18 : décalage léger de l'encadré blanc vers la gauche --- */
/* On déplace le bloc blanc seulement, sans modifier la structure ni le contenu */
.band-right{
  margin-left:-18px;
  margin-right:18px;
}


/* --- V19 : bloc Nos kits avec 3 encadrés fournis --- */
.kits-grid-3{
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:stretch;
}

.kits-grid-3 .kit-card{
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,64,86,.07);
  background:#fff;
}

.kits-grid-3 .kit-card img{
  width:100%;
  height:auto;
  display:block;
}

@media(max-width:980px){
  .kits-grid-3{
    grid-template-columns:1fr;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
}


/* --- V20 : ajustements Nos kits --- */
/* Seul Octobre Rose est cliquable ; les kits à venir ne le sont pas */
.kit-card-disabled{
  cursor:default;
  pointer-events:none;
}

/* Remonter légèrement toute la partie basse à partir de “Nos kits” */
.kits{
  margin-top:-22px;
  padding-top:0;
}

.kits .section-header{
  margin-bottom:24px;
}

.contact-band{
  padding-top:6px;
}


/* --- V21 : micro-ajustements Nos kits --- */
/* On redescend la zone Nos kits de moitié par rapport à la V20 */
.kits{
  margin-top:-11px;
}

/* “Voir tous les kits” plus proche des encadrés */
.kits .section-header{
  margin-bottom:16px;
}

.kits .section-header .simple-link{
  top:20px;
}


/* --- V22 : redescendre toute la partie basse --- */
/* La section Nos kits, ses encadrés, le bandeau contact et le footer redescendent ensemble */
.kits{
  margin-top:0;
}

/* Le lien “Voir tous les kits” descend encore un peu */
.kits .section-header .simple-link{
  top:30px;
}

/* On garde un espace cohérent entre le titre Nos kits et les encadrés */
.kits .section-header{
  margin-bottom:18px;
}


/* --- V23 : remonter légèrement uniquement le titre “Nos kits” --- */
/* On remonte le titre seul, sans déplacer les encadrés ni le bandeau du bas */
.kits .section-title{
  transform:translateY(-10px);
}

/* On compense pour garder les encadrés à leur place */
.kits .section-header{
  margin-bottom:8px;
}


/* --- V24 : micro-ajustements demandés uniquement --- */
/* Remonter légèrement l'encadré “Vous n’adaptez que l’essentiel” */
.concept-note{
  transform:translateY(-10px);
}

/* Remonter légèrement uniquement le titre “Nos kits” avec son filet */
.kits .section-title{
  transform:translateY(-18px);
}


/* --- V25 : remonter encore uniquement l'encadré “Vous n’adaptez que l’essentiel” --- */
.concept-note{
  transform:translateY(-18px);
}


/* --- V26 : rattacher clairement la phrase au bloc Concept --- */
/* On remonte vraiment l'encadré dans le flux pour qu'il appartienne davantage au bloc du dessus */
.concept .concept-note,
.concept-note{
  margin-top:10px !important;
  margin-bottom:0 !important;
  transform:none !important;
  position:relative !important;
  top:-22px !important;
}

/* On conserve le reste exactement en place */
.kits{
  margin-top:0 !important;
}


/* --- V27 : déplacer uniquement l'encadré “Vous n’adaptez que l’essentiel” --- */
/* Moins d'espace au-dessus, plus d'espace visuel en dessous, sans déplacer les autres blocs */
.concept .concept-note,
.concept-note{
  position:relative !important;
  top:-52px !important;
  transform:none !important;
  margin-top:0 !important;
}


/* --- V28 : correction annotation --- */
/* On remonte uniquement la phrase “Vous n’adaptez que l’essentiel” avec son encadré,
   au niveau indiqué par l’encadré rouge, sans déplacer les autres éléments. */
.concept .concept-note,
.concept-note{
  position:relative !important;
  top:-88px !important;
  transform:none !important;
  margin-top:0 !important;
}


/* --- V29 : descendre tout le bloc du bas à partir du titre “Nos kits” --- */
/* On descend toute la section Nos kits ensemble : titre, filet, lien, encadrés,
   puis tout ce qui suit naturellement en dessous. */
.kits{
  margin-top:42px !important;
}


/* --- V30 : annotation --- */
/* Remonter uniquement le bloc “Nos kits” entouré en rouge :
   titre + filet + lien + encadrés.
   Le bloc Concept au-dessus et le bandeau Contact en dessous ne sont pas déplacés. */
.kits .section-header,
.kits .kits-grid{
  position:relative !important;
  top:-24px !important;
}


/* --- V31 : page Comment ça marche --- */
.how-page{
  background:#fff;
}

.how-hero{
  padding:50px 0 58px;
}

.how-hero-grid{
  display:grid;
  grid-template-columns:46% 54%;
  gap:48px;
  align-items:center;
}

.how-hero-text h1{
  margin:0;
  font-family:"EB Garamond",Georgia,serif;
  color:var(--blue-dark);
  font-size:clamp(54px,5vw,74px);
  font-weight:600;
  line-height:.95;
  letter-spacing:-.03em;
}

.how-hero-text > i{
  display:block;
  width:48px;
  height:3px;
  background:var(--green);
  border-radius:20px;
  margin:24px 0 32px;
}

.how-hero-text p{
  max-width:560px;
  margin:0 0 18px;
  color:#36576a;
  font-size:20px;
  line-height:1.62;
}

.how-hero-text strong{
  color:var(--blue-dark);
  font-weight:700;
}

.how-hero-visual{
  position:relative;
  min-height:330px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.how-hero-visual:before{
  content:"";
  position:absolute;
  right:62px;
  top:12px;
  width:270px;
  height:270px;
  border-radius:50%;
  background:linear-gradient(135deg,#edf7f8,#f9fcfb);
}

.how-hero-visual:after{
  content:"";
  position:absolute;
  left:54px;
  top:110px;
  width:360px;
  height:150px;
  border-top:3px dotted rgba(120,189,67,.9);
  border-radius:50%;
  transform:rotate(8deg);
}

.visual-card{
  position:relative;
  z-index:2;
  width:360px;
  background:#fff;
  border:1px solid #d8e9ee;
  border-radius:12px;
  box-shadow:0 18px 46px rgba(0,64,86,.11);
  overflow:hidden;
}

.visual-topbar{
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  background:#f4f8f9;
  border-bottom:1px solid #d8e9ee;
}

.visual-topbar span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c7d8de;
}

.visual-content{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:22px;
  align-items:center;
  padding:34px 32px;
  background:linear-gradient(90deg,#fff4f7,#fff);
}

.visual-ribbon{
  position:relative;
  width:88px;
  height:132px;
  margin:0 auto;
}

.visual-ribbon:before,
.visual-ribbon:after{
  content:"";
  position:absolute;
  top:0;
  left:30px;
  width:32px;
  height:126px;
  background:var(--pink);
  border-radius:24px 24px 4px 4px;
  transform:rotate(28deg);
}

.visual-ribbon:after{
  transform:rotate(-28deg);
  background:#f45b9a;
  opacity:.72;
}

.visual-content strong{
  display:block;
  font-size:30px;
  line-height:.92;
  color:var(--pink);
  font-weight:800;
  margin-bottom:18px;
}

.visual-content em{
  display:block;
  height:9px;
  width:120px;
  border-radius:20px;
  background:#ffd8e5;
  margin:10px 0;
}

.visual-content em:last-child{
  width:80px;
}

.visual-bubble{
  position:absolute;
  z-index:3;
  width:68px;
  height:68px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 12px 28px rgba(0,64,86,.14);
}

.visual-bubble svg{
  width:34px;
  height:34px;
}

.bubble-cart{
  left:70px;
  top:82px;
  background:var(--green);
}

.bubble-mail{
  right:115px;
  top:24px;
  background:var(--blue);
}

.bubble-download{
  right:38px;
  bottom:64px;
  background:var(--blue);
}

.process-section{
  padding:34px 0 34px;
}

.process-section .section-title h2{
  font-size:42px;
}

.process-grid{
  display:grid;
  grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr 42px 1fr;
  gap:16px;
  align-items:center;
  margin-top:58px;
}

.process-step{
  position:relative;
  min-height:300px;
  padding:46px 22px 26px;
  background:#fff;
  border:1.5px solid #97cfdb;
  border-radius:14px;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,64,86,.05);
}

.process-step .step-number{
  position:absolute;
  left:50%;
  top:-22px;
  transform:translateX(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;
  display:grid;
  place-items:center;
  font-family:"EB Garamond",Georgia,serif;
  font-size:30px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(0,64,86,.17);
}

.process-icon{
  width:86px;
  height:86px;
  margin:0 auto 22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf4f6;
  color:var(--blue);
}

.process-icon svg{
  width:46px;
  height:46px;
}

.process-step h3{
  margin:0;
  font-family:"EB Garamond",Georgia,serif;
  color:var(--blue-dark);
  font-size:25px;
  line-height:1.02;
  font-weight:700;
}

.process-step > i{
  display:block;
  width:34px;
  height:2px;
  background:var(--green);
  border-radius:20px;
  margin:18px auto 18px;
}

.process-step p{
  margin:0;
  color:#576b78;
  font-size:13.5px;
  line-height:1.5;
}

.process-arrow,
.process-dots{
  text-align:center;
  color:var(--blue);
  font-size:34px;
  font-weight:700;
}

.process-dots{
  color:#8abecd;
  letter-spacing:2px;
}

.process-optional{
  border-color:#8abe55;
  background:linear-gradient(180deg,#fbfdf8,#fff);
}

.process-optional .step-number{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
}

.process-optional .process-icon{
  background:#edf7e5;
  color:var(--blue);
}

.process-optional h3{
  color:var(--green-dark);
}

.optional-badge{
  position:absolute;
  top:-48px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  border-radius:7px;
  padding:8px 18px;
  font-weight:700;
  font-size:14px;
  line-height:1;
}

.process-labels{
  display:grid;
  grid-template-columns:calc(80% - 20px) 1fr;
  gap:42px;
  align-items:center;
  margin-top:24px;
}

.process-labels span{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  color:var(--blue);
  font-weight:700;
  font-size:13px;
}

.process-labels span:first-child:before,
.process-labels span:first-child:after{
  content:"";
  height:1.5px;
  background:#8abecd;
  flex:1;
  margin:0 18px;
}

.process-labels span:first-child{
  background:transparent;
}

.process-labels span:first-child{
  color:var(--blue);
}

.process-labels span:first-child{
  border-radius:999px;
}

.process-labels span:first-child{
  text-align:center;
}

.process-labels span:last-child{
  background:#edf7e5;
  color:var(--green-dark);
  border-radius:999px;
  padding:9px 16px;
  justify-self:center;
}

.how-cta-section{
  padding:30px 0 54px;
}

.how-cta{
  display:grid;
  grid-template-columns:96px 1fr auto;
  gap:28px;
  align-items:center;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue));
  border-radius:14px;
  padding:34px 54px;
  box-shadow:0 16px 42px rgba(0,64,86,.16);
}

.cta-leaf{
  width:82px;
  height:82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  color:#b7cfd4;
}

.cta-leaf svg{
  width:48px;
  height:48px;
}

.how-cta h2{
  margin:0;
  font-family:"EB Garamond",Georgia,serif;
  color:#fff;
  font-size:38px;
  line-height:1.05;
  font-weight:600;
}

.how-cta i{
  display:block;
  width:46px;
  height:3px;
  border-radius:20px;
  background:var(--green);
  margin-top:18px;
}

.how-cta .btn{
  min-width:220px;
}

.footer-page{
  border-top:1px solid var(--line);
  padding-top:28px;
}

@media(max-width:1080px){
  .process-grid{
    grid-template-columns:1fr 24px 1fr;
  }
  .process-grid .process-step:nth-of-type(5){
    grid-column:auto;
  }
  .process-dots{
    display:none;
  }
}

@media(max-width:980px){
  .how-hero-grid{
    grid-template-columns:1fr;
  }
  .how-hero-visual{
    order:-1;
    min-height:280px;
  }
  .process-grid{
    grid-template-columns:1fr;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
  .process-arrow{
    transform:rotate(90deg);
    margin:-4px 0;
  }
  .process-labels{
    display:none;
  }
  .optional-badge{
    top:-18px;
    left:auto;
    right:18px;
    transform:none;
  }
  .how-cta{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
    padding:32px 26px;
  }
  .how-cta i{
    margin-left:auto;
    margin-right:auto;
  }
}

@media(max-width:640px){
  .how-hero{
    padding-top:26px;
  }
  .how-hero-text h1{
    font-size:48px;
  }
  .how-hero-text p{
    font-size:18px;
  }
  .visual-card{
    width:310px;
  }
  .bubble-cart{
    left:10px;
  }
  .bubble-mail{
    right:30px;
  }
  .bubble-download{
    right:0;
  }
  .process-section .section-title h2{
    font-size:36px;
  }
  .process-step{
    min-height:0;
  }
  .how-cta h2{
    font-size:32px;
  }
}


/* --- V32 : titre “Comment ça marche ?” --- */
/* Même graisse que le grand titre de l’accueil, légèrement plus petit pour tenir sur une ligne */
.how-hero-text h1{
  font-weight:600 !important;
  font-size:clamp(48px,4.35vw,64px) !important;
  line-height:1 !important;
  white-space:nowrap;
}

@media(max-width:760px){
  .how-hero-text h1{
    white-space:normal;
  }
}


/* --- V33 : bloc “Notre process en 5 étapes” avec les visuels fournis --- */
.process-grid-images{
  grid-template-columns:1fr 32px 1fr 32px 1fr 32px 1fr 44px 1fr !important;
  gap:14px !important;
  align-items:center !important;
  margin-top:56px !important;
}

.process-card-img{
  width:100%;
  height:auto;
  display:block;
}

.process-arrow-img,
.process-dots-img{
  align-self:center;
  margin-top:0;
  color:var(--blue);
  font-size:34px;
  font-weight:700;
  line-height:1;
}

.process-dots-img{
  color:#8abecd;
  letter-spacing:2px;
}

.process-optional-wrap{
  position:relative;
}

.process-optional-wrap .process-badge-img{
  position:absolute;
  left:50%;
  top:-48px;
  transform:translateX(-50%);
  width:112px;
  height:auto;
  display:block;
  z-index:3;
}

.process-labels-images{
  display:grid !important;
  grid-template-columns:calc(80% - 20px) 1fr !important;
  gap:42px !important;
  align-items:center !important;
  margin-top:24px !important;
}

.process-labels-images img{
  display:block;
  height:auto;
}

.process-labels-images img:first-child{
  width:190px;
  justify-self:center;
}

.process-labels-images img:last-child{
  width:190px;
  justify-self:center;
}

@media(max-width:1080px){
  .process-grid-images{
    grid-template-columns:1fr !important;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
  }

  .process-grid-images .process-dots-img{
    display:none;
  }

  .process-labels-images{
    display:none !important;
  }
}

@media(max-width:720px){
  .process-grid-images{
    grid-template-columns:1fr !important;
    max-width:270px;
  }

  .process-arrow-img{
    transform:rotate(90deg);
    margin:2px 0;
  }

  .process-optional-wrap .process-badge-img{
    top:-34px;
    width:104px;
  }
}


/* --- V34 : ajustement des cartouches process --- */
.process-labels-v34{
  display:grid !important;
  grid-template-columns:calc(80% - 20px) 1fr !important;
  gap:42px !important;
  align-items:center !important;
  margin-top:22px !important;
}

.process-labels-v34 span{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:700;
}

.process-labels-v34 .process-label-main{
  color:var(--blue);
  font-size:13px;
  text-align:center;
}

.process-labels-v34 .process-label-main::before,
.process-labels-v34 .process-label-main::after{
  content:"";
  height:1.5px;
  background:#8abecd;
  flex:1;
}

.process-labels-v34 .process-label-main::before{ margin-right:18px; }
.process-labels-v34 .process-label-main::after{ margin-left:18px; }

.process-labels-v34 .process-label-main{
  justify-self:stretch;
}

.process-labels-v34 .process-label-main{
  padding:0;
}

.process-labels-v34 .process-label-main > *{ pointer-events:none; }

.process-labels-v34 .process-label-opt{
  justify-self:center;
  color:var(--green-dark);
  background:#edf7e5;
  border-radius:999px;
  padding:7px 16px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

@media(max-width:1080px){
  .process-labels-v34{
    display:none !important;
  }
}


/* --- V35 : affinage du bloc process selon maquette annotée --- */
.process-grid-images{
  grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 26px minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 52px !important;
}

.process-card-img{
  width: 100%;
  max-width: none;
}

.process-arrow-img,
.process-dots-img{
  font-size: 28px;
}

.process-dots-img{
  letter-spacing: 0;
  font-size: 26px;
}

.process-optional-wrap{
  position: relative;
  padding-top: 28px;
}

.process-badge-text{
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #8abe55;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  z-index: 2;
}

.process-labels-v35{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 26px minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 18px !important;
}

.process-label-main-wrap{
  grid-column: 1 / 8;
  display: flex;
  align-items: center;
}

.process-label-main-wrap::before,
.process-label-main-wrap::after{
  content: "";
  flex: 1;
  height: 2px;
  background: #8abecd;
  border-radius: 999px;
}

.process-label-main-wrap::before{ margin-right: 16px; }
.process-label-main-wrap::after{ margin-left: 16px; }

.process-label-main,
.process-label-opt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.process-label-main{
  background: #e4eef4;
  color: var(--blue);
  min-width: 154px;
}

.process-label-opt-wrap{
  grid-column: 9;
  display: flex;
  justify-content: center;
}

.process-label-opt{
  background: #edf7e5;
  color: var(--green-dark);
  min-width: 164px;
}

@media(max-width:1080px){
  .process-grid-images{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .process-labels-v35{
    display: none !important;
  }
}

@media(max-width:720px){
  .process-badge-text{
    top: -4px;
    min-height: 30px;
    padding: 6px 16px;
    font-size: 12px;
  }
}


/* --- V36 : cartouches fournis par la cliente + ajustements d'alignement --- */
.process-grid-images{
  align-items: start !important;
  padding-top: 44px !important;
  grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 24px minmax(0,1fr) !important;
  gap: 8px !important;
}

.process-arrow-img{
  display: block;
  justify-self: center;
  transform: translateX(-7px);
}

.process-dots-img{
  display: block;
  justify-self: center;
  transform: translateX(-5px);
}

.process-optional-wrap{
  position: relative;
  padding-top: 0 !important;
}

.process-badge-text{
  display: none !important;
}

.process-badge-optionnel-img{
  position: absolute;
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
  width: 106px;
  height: 27px;
  display: block;
  z-index: 3;
}

.process-labels-v35{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 24px minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 18px !important;
}

.process-label-main-wrap{
  grid-column: 1 / 8;
  display: flex;
  align-items: center;
}

.process-label-main-wrap::before,
.process-label-main-wrap::after{
  content: '';
  flex: 1;
  height: 2px;
  background: #8abecd;
  border-radius: 999px;
}

.process-label-main-wrap::before{
  margin-right: 14px;
}

.process-label-main-wrap::after{
  margin-left: 14px;
}

.process-label-main,
.process-label-opt{
  display: none !important;
}

.process-label-main-img,
.process-label-opt-img{
  display: block;
  height: 27px;
  width: auto;
}

.process-label-opt-wrap{
  grid-column: 9;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media(max-width:1080px){
  .process-grid-images{
    padding-top: 40px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .process-arrow-img,
  .process-dots-img{
    transform: none;
  }
  .process-labels-v35{
    display: none !important;
  }
}

@media(max-width:720px){
  .process-grid-images{
    padding-top: 30px !important;
    grid-template-columns: 1fr !important;
  }
  .process-badge-optionnel-img{
    top: -32px;
    width: 96px;
    height: auto;
  }
}


/* --- V37 : remonter le bloc process et recentrer les flèches --- */
.process-grid.process-grid-images{
  margin-top: 18px !important;
  padding-top: 28px !important;
}

.process-arrow.process-arrow-img{
  transform: translateX(1px) !important;
}

.process-dots.process-dots-img{
  transform: translateX(1px) !important;
}

.process-labels.process-labels-v35{
  margin-top: 22px !important;
}

@media(max-width:1080px){
  .process-grid.process-grid-images{
    margin-top: 28px !important;
    padding-top: 26px !important;
  }
}

@media(max-width:720px){
  .process-grid.process-grid-images{
    margin-top: 24px !important;
    padding-top: 20px !important;
  }
}


/* --- V40 : remplacement par le nouveau Mockup2 sans fond gris --- */
.how-hero-visual.how-hero-visual-image{
  min-height:auto !important;
  justify-content:flex-end !important;
  align-items:center !important;
}

.how-hero-visual.how-hero-visual-image::before,
.how-hero-visual.how-hero-visual-image::after{
  display:none !important;
}

.how-hero-visual.how-hero-visual-image img{
  display:block;
  width:100%;
  max-width:600px;
  height:auto;
  object-fit:contain;
}

@media(max-width:980px){
  .how-hero-visual.how-hero-visual-image{
    justify-content:center !important;
  }

  .how-hero-visual.how-hero-visual-image img{
    max-width:100%;
  }
}


/* --- V41 : suppression des pictos parasites et léger décalage du texte --- */
.how-hero-text{
  padding-top: 26px;
}

@media(max-width:980px){
  .how-hero-text{
    padding-top: 0;
  }
}


/* --- V42 : alignements page “Comment ça marche ?” --- */
/* Descendre le texte pour l’aligner presque au pied du visuel */
.how-hero-text{
  padding-top:54px !important;
}

/* Remonter légèrement tout le bloc à partir de “Notre process en 5 étapes” */
.process-section{
  margin-top:-38px !important;
}

@media(max-width:980px){
  .how-hero-text{
    padding-top:0 !important;
  }

  .process-section{
    margin-top:0 !important;
  }
}


/* --- V43 : derniers ajustements page “Comment ça marche ?” --- */
/* Remonter l'ensemble du contenu sous le menu pour réduire le blanc en haut */
.how-hero{
  padding-top: 18px !important;
  padding-bottom: 42px !important;
}

.process-section{
  margin-top: -58px !important;
}

/* Bloc d'appel à l'action plus compact */
.how-cta-section{
  padding-top: 32px !important;
  padding-bottom: 40px !important;
}

.how-cta{
  grid-template-columns: 86px 1fr auto;
  gap: 24px;
  padding: 24px 42px !important;
}

.cta-leaf{
  width: 72px;
  height: 72px;
}

.cta-leaf svg{
  width: 40px;
  height: 40px;
}

.cta-leaf img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


.how-cta h2{
  font-size: 34px;
  line-height: 1.04;
}

.how-cta i{
  display: none !important;
}

.how-cta .btn{
  min-width: 188px !important;
  padding: 0 20px !important;
}

@media(max-width:980px){
  .how-hero{
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }

  .process-section{
    margin-top: 0 !important;
  }

  .how-cta{
    grid-template-columns: 1fr;
    padding: 28px 24px !important;
  }
}


/* --- V46 : page Contact --- */
.contact-page{
  background:#fff;
}

.contact-hero{
  padding:28px 0 38px;
}

.contact-hero-grid{
  display:grid;
  grid-template-columns:43% 57%;
  gap:42px;
  align-items:center;
}

.contact-hero-text h1{
  margin:0;
  font-family:"EB Garamond",Georgia,serif;
  color:var(--blue-dark);
  font-size:clamp(54px,5vw,72px);
  font-weight:600;
  line-height:.95;
  letter-spacing:-.03em;
}

.contact-hero-text > i,
.contact-form-card > i,
.contact-info-card > i,
.print-card > i,
.faq-card > i,
.contact-cta i{
  display:block;
  width:48px;
  height:3px;
  background:var(--green);
  border-radius:20px;
  margin:24px 0 28px;
}

.contact-intro{
  margin:0 0 30px;
  font-size:20px;
  line-height:1.5;
  color:#263f52;
}

.contact-benefits{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:16px;
}

.contact-benefits li{
  position:relative;
  padding-left:34px;
  color:#263f52;
  font-size:17px;
}

.contact-benefits li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1.5px solid var(--green);
  color:var(--green-dark);
  font-weight:700;
  font-size:14px;
}

.contact-hero-visual{
  position:relative;
  min-height:370px;
}

.contact-blob{
  position:absolute;
  right:28px;
  top:14px;
  width:430px;
  height:330px;
  background:linear-gradient(135deg,#edf6f9,#f7fbfc);
  border-radius:52% 48% 45% 55%;
}

.contact-dotted{
  position:absolute;
  right:42px;
  top:102px;
  width:430px;
  height:145px;
  border-top:2.5px dotted var(--green);
  border-radius:50%;
  transform:rotate(6deg);
}

.contact-laptop{
  position:absolute;
  right:86px;
  bottom:40px;
  width:330px;
}

.laptop-screen{
  height:190px;
  border:12px solid #4b5660;
  border-bottom:none;
  background:#fff;
  border-radius:8px 8px 0 0;
  display:grid;
  place-items:center;
}

.laptop-screen img{
  width:150px;
  height:auto;
  opacity:.95;
}

.laptop-base{
  height:18px;
  background:linear-gradient(#68727a,#48525b);
  border-radius:0 0 18px 18px;
  position:relative;
}

.laptop-base::after{
  content:"";
  position:absolute;
  left:50%;
  top:3px;
  transform:translateX(-50%);
  width:70px;
  height:6px;
  border-radius:0 0 8px 8px;
  background:rgba(255,255,255,.25);
}

.contact-plant{
  position:absolute;
  left:72px;
  bottom:58px;
  width:86px;
  height:140px;
}

.contact-plant::before{
  content:"";
  position:absolute;
  bottom:0;
  left:18px;
  width:54px;
  height:58px;
  border-radius:10px 10px 18px 18px;
  background:#dfe9ee;
  box-shadow:inset 8px 0 16px rgba(255,255,255,.55);
}

.contact-plant::after{
  content:"";
  position:absolute;
  left:44px;
  bottom:44px;
  width:2px;
  height:86px;
  background:#7faf5d;
  transform:rotate(-12deg);
}

.contact-plant span{
  position:absolute;
  width:46px;
  height:24px;
  border-radius:46px 46px 6px 46px;
  background:#a7c881;
}

.contact-plant span:nth-child(1){left:8px;bottom:92px;transform:rotate(35deg);}
.contact-plant span:nth-child(2){left:44px;bottom:82px;transform:rotate(-36deg);}
.contact-plant span:nth-child(3){left:14px;bottom:112px;transform:rotate(58deg);}
.contact-plant span:nth-child(4){left:50px;bottom:115px;transform:rotate(-48deg);}

.contact-circle{
  position:absolute;
  z-index:2;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 12px 28px rgba(0,64,86,.14);
}

.contact-circle svg{
  width:36px;
  height:36px;
}

.contact-phone{
  left:86px;
  top:86px;
  width:70px;
  height:70px;
  background:var(--green);
}

.contact-mail{
  right:220px;
  top:34px;
  width:78px;
  height:78px;
  background:var(--blue);
}

.contact-chat{
  right:6px;
  top:142px;
  width:72px;
  height:72px;
  background:var(--blue);
}

.contact-main-section{
  padding:18px 0 26px;
}

.contact-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(330px,.82fr);
  gap:28px;
  align-items:start;
}

.contact-form-card,
.contact-info-card,
.print-card,
.faq-card{
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 34px rgba(0,64,86,.08);
  border:1px solid #e6eef2;
}

.contact-form-card{
  padding:32px 34px;
}

.contact-form-card h2,
.contact-info-card h2,
.print-card h2,
.faq-card h2{
  margin:0;
  font-family:"EB Garamond",Georgia,serif;
  color:var(--blue-dark);
  font-size:32px;
  line-height:1;
  font-weight:700;
}

.contact-form-card > i,
.contact-info-card > i,
.print-card > i,
.faq-card > i{
  margin:18px 0 24px;
  width:40px;
}

.contact-form{
  display:grid;
  gap:14px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.contact-form label span:not(.privacy-line span){
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid #d5e1e6;
  border-radius:7px;
  padding:14px 14px;
  font:inherit;
  font-size:15px;
  color:var(--text);
  background:#fff;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#84939c;
}

.contact-form textarea{
  min-height:146px;
  resize:vertical;
}

.privacy-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#344d5f;
  font-size:14px;
  margin-top:4px;
}

.privacy-line input{
  width:16px;
  height:16px;
  margin-top:2px;
}

.privacy-line span{
  position:static !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
}

.privacy-note{
  margin:-6px 0 4px 26px;
  color:#687b86;
  font-size:13px;
}

.privacy-note a{
  color:var(--blue);
  font-weight:600;
}

.contact-submit{
  justify-self:end;
  min-width:240px;
  border:0;
  cursor:pointer;
  margin-top:8px;
}

.contact-side{
  display:grid;
  gap:24px;
}

.contact-info-card{
  padding:32px 36px;
  background:linear-gradient(135deg,#fbfdf8,#f6fbf0);
}

.coord-item{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:16px;
  align-items:center;
  margin:22px 0;
}

.coord-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e8f3df;
  color:var(--green-dark);
}

.coord-icon.blue{
  background:#eaf4f7;
  color:var(--blue);
  flex:0 0 auto;
}

.coord-icon svg{
  width:30px;
  height:30px;
}

.coord-item strong{
  color:var(--green-dark);
  display:block;
  margin-bottom:5px;
}

.coord-item p{
  margin:0;
  color:#2f4150;
  line-height:1.45;
  font-size:15px;
}

.print-card{
  padding:30px 36px;
  background:linear-gradient(135deg,#f8fcfd,#eef6f9);
}

.print-content{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin:8px 0 22px;
}

.print-content p{
  margin:0;
  color:#334b5d;
  line-height:1.5;
}

.print-btn{
  min-width:210px;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
}

.faq-section{
  padding:10px 0 28px;
}

.faq-card{
  padding:30px 34px 34px;
  background:linear-gradient(135deg,#f7fbfc,#eef6f9);
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:start;
}

.faq-grid article{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:16px;
  padding-right:20px;
  border-right:1px solid #cbdde5;
}

.faq-grid article:last-child{
  border-right:none;
  padding-right:0;
}

.faq-grid article > span{
  width:50px;
  height:50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue);
  background:#e6f0f5;
}

.faq-grid svg{
  width:28px;
  height:28px;
}

.faq-grid h3{
  margin:0 0 10px;
  color:var(--blue-dark);
  font-size:16px;
  line-height:1.25;
}

.faq-grid p{
  margin:0;
  color:#31485a;
  line-height:1.48;
  font-size:14px;
}

.contact-bottom-cta{
  padding:0 0 34px;
}

.contact-cta{
  margin-top:0;
}

.contact-cta .cta-leaf{
  color:var(--blue);
}

.contact-cta .cta-leaf svg{
  width:42px;
  height:42px;
}

@media(max-width:1080px){
  .contact-hero-grid,
  .contact-main-grid{
    grid-template-columns:1fr;
  }

  .contact-hero-visual{
    max-width:680px;
    width:100%;
    margin:0 auto;
  }

  .contact-side{
    grid-template-columns:1fr 1fr;
  }

  .faq-grid{
    grid-template-columns:1fr;
  }

  .faq-grid article{
    border-right:none;
    border-bottom:1px solid #cbdde5;
    padding:0 0 22px;
  }

  .faq-grid article:last-child{
    border-bottom:none;
    padding-bottom:0;
  }
}

@media(max-width:720px){
  .contact-hero{
    padding-top:18px;
  }

  .contact-hero-text h1{
    font-size:48px;
  }

  .contact-hero-grid{
    gap:20px;
  }

  .contact-hero-visual{
    min-height:300px;
    transform:scale(.88);
    transform-origin:center top;
    margin-bottom:-40px;
  }

  .form-row,
  .contact-side{
    grid-template-columns:1fr;
  }

  .contact-form-card,
  .contact-info-card,
  .print-card,
  .faq-card{
    padding:26px 22px;
  }

  .contact-submit{
    width:100%;
    justify-self:stretch;
  }

  .contact-benefits li{
    font-size:16px;
  }
}


/* V49 contact pictograms and menu refinement */
.main-nav a{color:#0f3449;font-weight:500;}
.main-nav a:hover{color:#0f3449;}
.coord-icon.has-image,
.coord-icon.blue.has-image,
.faq-icon.has-image,
.cta-leaf.has-image{background:none !important;color:inherit;}
.coord-icon.has-image{width:54px;height:54px;padding:0;}
.coord-icon.has-image img{width:54px;height:54px;display:block;}
.print-content .coord-icon.has-image{margin-top:2px;}
.faq-grid article > span.faq-icon.has-image{width:50px;height:50px;padding:0;}
.faq-grid article > span.faq-icon.has-image img{width:50px;height:50px;display:block;}
.cta-leaf.has-image{width:82px;height:82px;}
.cta-leaf.has-image img{width:82px;height:82px;display:block;}
.contact-submit{min-width:210px;}

/* --- V54 : annotations Accueil (icône Facebook, espacements hero, note) --- */

/* Réduire légèrement l'espace entre le header et le titre du hero */
.hero{
  padding-top: 20px !important;
}

/* Réduire légèrement l'espace entre le visuel du hero et "Notre concept" */
.hero{
  padding-bottom: 34px !important;
}

/* Rapprocher le bandeau "Vous n'adaptez que l'essentiel" du bloc Notre concept,
   et compenser sur "Nos kits" pour que ce bloc ne bouge pas (juste plus d'espace avant lui) */
.note{
  margin-top: 18px !important;
}
.kits{
  margin-top: 54px !important;
}

/* --- V54 (suite) : page "Comment ça marche" --- */
/* Un peu plus d'espace entre l'intro (texte + illustration) et "Notre process en 5 étapes" */
.process-section{
  margin-top: -42px !important;
}

/* --- V56 : annotations page Contact --- */
/* Un peu moins d'espace entre le header et le titre "Contactez-nous" */
.contact-hero{
  padding-top: 18px !important;
}
/* Un peu moins d'espace entre l'illustration et "Envoyez-nous un message" */
.contact-hero{
  padding-bottom: 26px !important;
}

/* --- V59 : annotations page Contact (suite) --- */
/* Remonter légèrement le bouton "Envoyer le message" pour resserrer le bloc formulaire */
.contact-submit{
  margin-top: 2px !important;
}

/* --- V60 : bandeau contact bas de page Accueil, espace autour des séparateurs --- */
.contact-item{
  padding: 0 6px !important;
}

/* --- V61 : aligner le formulaire et la colonne de droite en tête ET en pied --- */
.contact-main-grid{
  align-items: stretch !important;
}
.contact-side{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 24px !important;
}

/* --- V62 : centrer les colonnes Téléphone et Suivez-nous dans le bandeau bas de l'Accueil --- */
.band-right > .contact-item:nth-child(2),
.band-right > .contact-item:nth-child(3){
  justify-self: center;
}

/* --- V63 : encadré blanc du bandeau bas Accueil - moins large, décalé vers la droite --- */
.band-right{
  width: min(620px, 100%) !important;
  margin-left: 0 !important;
  margin-right: 14px !important;
}

/* --- V64 : plus d'espace entre le numéro de téléphone et le filet à sa droite --- */
.band-right > .contact-item:nth-child(2){
  padding-right: 34px !important;
}

/* --- V65 : bandeau bas Accueil recalé après suppression du téléphone (email + réseaux seulement) --- */
@media(min-width:981px){
  .band-right{
    grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) !important;
    width: min(444px, 100%) !important;
  }
  .band-right > .contact-item:nth-child(2){
    justify-self: center !important;
    padding-right: 0 !important;
  }
  .band-right > .contact-item:nth-child(1){
    padding-right: 30px !important;
  }
}

/* --- Correctifs mobile V5 (retours visuels Karine) --- */
@media(max-width:640px){
  /* Nav : retour à la ligne naturel, centré, très resserré, icônes remontées au plus près */
  .main-nav{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    row-gap:2px !important;
    column-gap:14px !important;
  }
  .social-links{
    margin-top:-4px !important;
  }

  /* Resserrer l'espace entre le soulignement de "Notre concept" et les 4 cartes */
  .concept-grid{
    margin-top:18px !important;
  }

  /* Encadré "essentiel" : pas de filet interne (comme avant), espace resserré avant,
     filet séparé et centré entre l'encadré et "Nos kits" */
  .concept-grid article:last-child{
    border-bottom:none !important;
  }
  .note{
    margin-top:8px !important;
    border-bottom:none !important;
  }
  .kits{
    margin-top:24px !important;
    padding-top:24px !important;
    border-top:1px solid #dde8ec !important;
  }

  /* "Voir tous les kits" aligné à droite au lieu d'être centré */
  .kits .section-header .simple-link{
    justify-content:flex-end !important;
  }

  /* Bandeau "Besoin d'en savoir plus ?" : empiler proprement titre/texte/bouton puis le bloc blanc,
     et neutraliser la largeur fixe + marge qui provoquait un chevauchement sur petit écran */
  .band{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
  }
  .band-left,
  .band-right{
    width:100% !important;
    margin:0 !important;
    max-width:100% !important;
  }
  /* Titre du bandeau, un peu plus grand tout en restant sur une seule ligne */
  .band-left h2{
    font-size:30px !important;
    white-space:nowrap !important;
  }
  .band-right{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }
  /* EMAIL et l'adresse alignés à gauche entre eux */
  .band-right > .contact-item{
    padding:12px 0 !important;
    text-align:left !important;
  }
  /* Suivez-nous + icônes restent centrés (la rangée d'icônes est en flex,
     text-align seul ne suffit pas) */
  .band-right > .contact-item.socials{
    text-align:center !important;
  }
  .band-right > .contact-item.socials p{
    justify-content:center !important;
  }

  /* Footer sur 2 lignes : copyright, puis les 4 liens séparés par un trait */
  .footer{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    row-gap:8px !important;
    column-gap:0 !important;
  }
  .footer p{
    flex:0 0 100% !important;
    text-align:center !important;
    margin:0 0 4px !important;
  }
  .footer a{
    padding:0 10px !important;
    position:relative !important;
  }
  .footer a:not(:first-of-type){
    border-left:1px solid #cfd8dd !important;
  }

  /* --- Page Comment ça marche --- */
  /* Titres réduits pour tenir sur une seule ligne (évite les coupures "ça / marche ?"
     et "en 5 / étapes"), sans toucher au HTML */
  .how-hero-text h1{
    font-size:38px !important;
    white-space:nowrap !important;
  }
  .process-section .section-title h2{
    font-size:29px !important;
    white-space:nowrap !important;
  }
  /* Flèches entre les 5 étapes : verticales plutôt qu'horizontales (empilement mobile) */
  .process-arrow.process-arrow-img{
    display:inline-block !important;
    transform:rotate(90deg) !important;
  }
  /* Cartes d'étapes légèrement réduites */
  .process-card-img{
    width:88% !important;
    margin:0 auto !important;
    display:block !important;
  }
  /* Espace entre l'étape 4 et le badge "Optionnel" de l'étape 5 (qui est positionné en absolu) */
  .process-optional-wrap{
    margin-top:44px !important;
  }
  /* Texte de l'encadré final réduit pour revenir à 2 lignes nettes (comme prévu à l'origine)
     Scopé à .how-cta:not(.contact-cta) : l'encadré CTA de contact.html réutilise la
     même classe .how-cta mais avec un texte et une mise en forme différents
     (voir règle .contact-cta h2 d'origine, à ne pas écraser). */
  .how-cta:not(.contact-cta) h2{
    font-size:24px !important;
  }
  /* Espace resserré entre l'encadré final et le footer */
  .how-cta-section{
    padding-bottom:24px !important;
  }
  /* Filet du footer de cette page supprimé (déjà séparé visuellement par l'encadré bleu),
     espace resserré au-dessus du copyright */
  .footer-page{
    padding-top:16px !important;
    border-top:none !important;
  }
}

/* --- Correctifs mobile V6 (2e passage de retours visuels Karine) --- */
@media(max-width:640px){
  /* Nav + logo + icônes réseaux : le vrai responsable de l'espace excessif était
     le "gap" du bloc header (32px entre logo/menu/icônes) et le padding vertical
     intégré à chaque lien de menu (10px), pas le row-gap déjà resserré. */
  .header-inner{
    row-gap:6px !important;
  }
  .main-nav a{
    padding:4px 0 !important;
  }
  .social-links{
    margin-top:2px !important;
  }
  /* Un peu plus d'air entre les icônes et le titre du hero */
  .hero{
    padding-top:34px !important;
  }

  /* Encadré "essentiel" : resserré juste après "Direction graphique incluse" */
  .concept-grid article:last-child{
    padding-bottom:10px !important;
  }
  .note{
    margin-top:0 !important;
  }
  /* Plus d'espace entre l'encadré et "Nos kits" : le filet reste au même endroit
     (juste au-dessus de l'encadré, comme demandé) mais l'espace avant le titre
     "Nos kits" est agrandi pour qu'il ne le touche plus. */
  .kits{
    padding-top:40px !important;
  }

  /* Suivez-nous + icônes : le bloc entier n'était pas centré dans l'encadré blanc
     (le conteneur ".socials" a un justify-content:flex-start hérité qui poussait
     tout le bloc à gauche ; centrer seulement la rangée d'icônes ne suffisait pas). */
  .band-right > .contact-item.socials{
    display:flex !important;
    justify-content:center !important;
    padding-left:0 !important;
  }
  .band-right > .contact-item.socials > div{
    align-items:center !important;
  }

  /* --- Page Comment ça marche : CTA finale --- */
  /* Les retours à la ligne demandés ("Un process simple, rapide" / "et pensé pour
     vous" / "faire gagner du temps.") traversent le <br> existant dans le HTML :
     un simple ajustement de taille de police ne peut pas les reproduire exactement.
     Le texte réel du h2 est ici rendu invisible (font-size:0 ; toujours restitué
     tel quel par les lecteurs d'écran, qui ignorent ce réglage) et remplacé
     visuellement par un texte généré en CSS avec exactement les 3 sauts de ligne
     voulus, quelle que soit la largeur de l'écran. */
  .how-cta:not(.contact-cta) h2{
    font-size:0 !important;
    line-height:0 !important;
  }
  .how-cta:not(.contact-cta) h2::before{
    content:"Un process simple, rapide\00000Aet pensé pour vous\00000Afaire gagner du temps.";
    display:block;
    white-space:pre-line;
    font-size:27px !important;
    line-height:1.3 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
}

/* --- Correctifs mobile V8 (3e passage de retours visuels Karine) --- */
@media(max-width:640px){
  /* Espace après les icônes réseaux : posé au niveau du header partagé (et non
     juste sur .hero) pour que "Comment ça marche" et les autres pages en profitent
     aussi, pas seulement l'accueil */
  .site-header{
    padding-bottom:34px !important;
  }
  .hero{
    padding-top:16px !important;
  }

  /* Filet avant "Nos kits" : centré entre l'encadré "essentiel" et le titre */
  .kits{
    margin-top:32px !important;
    padding-top:32px !important;
  }

  /* Notre concept : suppression des filets entre les 4 blocs, espace resserré */
  .concept-grid article{
    border-bottom:none !important;
    padding:16px 0 !important;
  }

  /* Suivez-nous : léger décalage à droite pour mieux s'équilibrer avec le bloc EMAIL au-dessus */
  .band-right > .contact-item.socials{
    padding-left:20px !important;
  }
}

/* --- Correctifs mobile V9 (4e passage de retours visuels Karine) --- */
@media(max-width:640px){
  /* Plus d'espace entre le logo et le menu, sans bouger l'espace entre le menu
     et les icônes réseaux juste en dessous (qui convient déjà) : l'espace
     supplémentaire est ajouté uniquement sous le logo. */
  .logo{
    margin-bottom:16px !important;
  }

  /* Filet avant "Nos kits" : encore un peu trop proche du texte, on l'éloigne davantage */
  .kits{
    margin-top:16px !important;
    padding-top:72px !important;
  }
}

/* --- Correctifs mobile V10 : page "Pourquoi Com'Prévention ?" --- */
/* Cette page a son propre bloc <style> intégré dans le HTML (indépendant de ce
   fichier), et n'avait jamais reçu de version mobile : le titre restait à 59px
   fixes et l'image de droite était en position absolue avec une hauteur fixe de
   730px sans limite de largeur -> texte et image débordaient du cadre sur téléphone.
   On neutralise tout ça ici, en CSS uniquement (le fichier HTML n'est pas touché). */
@media(max-width:640px){
  .why-title{
    font-size:34px !important;
    line-height:1.15 !important;
    max-width:100% !important;
  }
  .why-copy p{
    font-size:18px !important;
  }
  .why-visual{
    min-height:0 !important;
    overflow:hidden !important;
  }
  .why-visual img{
    position:static !important;
    width:100% !important;
    max-width:320px !important;
    height:auto !important;
    margin:24px auto 0 !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
    display:block !important;
  }
}

/* --- Correctifs mobile V11 : page Kit Octobre Rose, bloc paiement --- */
/* Les 2 blocs "Choix à la carte" / "Kit complet" débordaient sur téléphone.
   Cause : la grille passe bien en 1 colonne sous 860px, mais cette colonne
   ("1fr") ne peut pas rétrécir sous la largeur du texte non coupé de
   .kit-model-recap (white-space:nowrap), donc toute la carte (et la page)
   s'étirait au-delà de l'écran. On autorise juste la colonne à rétrécir ;
   le texte continue de s'arrêter proprement avec "..." comme prévu à
   l'origine (overflow:hidden + text-overflow:ellipsis déjà en place). */
@media(max-width:860px){
  .summary-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* --- Correctifs mobile V12 : retours à la ligne précis (sans toucher au HTML) --- */
@media(max-width:640px){
  /* Page "Pourquoi Com'Prévention" : titre un peu plus grand, mêmes 4 lignes qu'avant */
  .why-title{
    font-size:0 !important;
    line-height:0 !important;
  }
  .why-title::before{
    content:"La prévention mérite\00000Aune communication\00000Asimple, professionnelle\00000Aet humaine.";
    display:block;
    white-space:pre-line;
    font-size:37px !important;
    line-height:1.15 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* Paragraphes d'intro : retours à la ligne exacts demandés */
  .why-copy p:nth-of-type(2){
    font-size:0 !important;
    line-height:0 !important;
  }
  .why-copy p:nth-of-type(2)::before{
    content:"Organiser une campagne de prévention\00000Ademande du temps, des compétences\00000Aen communication et une\00000Abonne coordination des supports.";
    display:block;
    white-space:pre-line;
    font-size:16.5px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .why-copy p:nth-of-type(3){
    font-size:0 !important;
    line-height:0 !important;
  }
  .why-copy p:nth-of-type(3)::before{
    content:"Com’Prévention est née d’un constat simple :\00000Asensibiliser ne devrait pas être compliqué.";
    display:block;
    white-space:pre-line;
    font-size:16.5px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .why-copy p:nth-of-type(4){
    font-size:0 !important;
    line-height:0 !important;
  }
  .why-copy p:nth-of-type(4)::before{
    content:"Nos kits de communication santé sont clés\00000Aen main, personnalisables et prêts à diffuser,\00000Apour vous permettre d’agir simplement\00000Aet efficacement.";
    display:block;
    white-space:pre-line;
    font-size:16.5px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* "Notre engagement, votre tranquillité d'esprit" : "votre" passe à la ligne
     suivante, interlignage très légèrement resserré */
  .why-panel h2{
    font-size:0 !important;
    line-height:0 !important;
  }
  .why-panel h2::before{
    content:"Notre engagement,\00000Avotre tranquillité d’esprit";
    display:block;
    white-space:pre-line;
    font-size:26px !important;
    line-height:1.15 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
    text-align:inherit;
  }

  /* Page Contact : "un" passe à la ligne devant "message" */
  .contact-form-card h2{
    font-size:0 !important;
    line-height:0 !important;
  }
  .contact-form-card h2::before{
    content:"Envoyez-nous\00000Aun message";
    display:block;
    white-space:pre-line;
    font-size:32px !important;
    line-height:1.15 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
}

/* --- Correctifs mobile V13 : "Pourquoi Com'Prévention" (suite) + page "Nos kits" --- */
@media(max-width:640px){
  /* Un peu plus d'espace après les icônes réseaux quand un filet suit juste en dessous */
  .site-header{
    padding-bottom:40px !important;
  }

  /* Titre "La prévention mérite..." : interlignage très légèrement resserré (mêmes lignes) */
  .why-title::before{
    line-height:1.08 !important;
  }

  /* "Une solution accessible aux structures de toutes tailles" : retours à la ligne demandés */
  .why-cta h2{
    font-size:0 !important;
    line-height:0 !important;
  }
  .why-cta h2::before{
    content:"Une solution\00000Aaccessible aux structures\00000Ade toutes tailles";
    display:block;
    white-space:pre-line;
    font-size:20px !important;
    line-height:1.2 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  /* Espace resserré avant le footer de cette page, comme sur "Comment ça marche" */
  .why-cta-section{
    padding-bottom:28px !important;
  }

  /* Un peu moins d'espace au-dessus du visuel "Com'Prévention" sous les 3 paragraphes */
  .why-visual img{
    margin-top:14px !important;
  }

  /* --- Page "Nos kits" (kits.html) --- */
  /* Paragraphes d'intro : retours à la ligne demandés */
  .catalog-copy p:nth-of-type(1){
    font-size:0 !important;
    line-height:0 !important;
  }
  .catalog-copy p:nth-of-type(1)::before{
    content:"Des campagnes prêtes à l’emploi, pensées pour\00000Avous faire gagner du temps et personnalisées\00000Aà l’image de votre structure.";
    display:block;
    white-space:pre-line;
    font-size:15px !important;
    line-height:1.55 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .catalog-copy p:nth-of-type(2){
    font-size:0 !important;
    line-height:0 !important;
  }
  .catalog-copy p:nth-of-type(2)::before{
    content:"Le catalogue Com’Prévention s’enrichira\00000Aprogressivement au rythme des grands temps\00000Aforts de prévention.";
    display:block;
    white-space:pre-line;
    font-size:15px !important;
    line-height:1.55 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .catalog-note span{
    font-size:0 !important;
    line-height:0 !important;
    display:block;
  }
  .catalog-note span::before{
    content:"Chaque kit réunit différents modules (ou temps\00000Ade communication), déclinés en supports\00000Aimprimés et digitaux cohérents, que\00000Avous pouvez visualiser avant de commander.";
    display:block;
    white-space:pre-line;
    font-size:14px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* Visuel "Com'Prévention" en haut de page : agrandi en pleine largeur (bord à bord),
     sans recadrage (object-fit:contain conservé) */
  .catalog-visual{
    min-height:0 !important;
    overflow:visible !important;
  }
  .catalog-visual img{
    width:calc(100% + 28px) !important;
    max-width:calc(100% + 28px) !important;
    margin-left:-14px !important;
    max-height:none !important;
  }

  /* "Le kit Octobre Rose" : retours à la ligne demandés */
  .catalog-section .catalog-heading p{
    font-size:0 !important;
    line-height:0 !important;
  }
  .catalog-section .catalog-heading p::before{
    content:"Une campagne complète pour informer, mobiliser\00000Aet relayer les messages de prévention.";
    display:block;
    white-space:pre-line;
    font-size:14px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* "Les prochains kits" : retours à la ligne demandés */
  .upcoming .catalog-heading p{
    font-size:0 !important;
    line-height:0 !important;
  }
  .upcoming .catalog-heading p::before{
    content:"Deux campagnes de novembre seront\00000Adéveloppées en priorité, puis de nouveaux kits\00000Aviendront compléter la collection.";
    display:block;
    white-space:pre-line;
    font-size:14px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* "Vous recherchez un autre thème ?" : centré comme le CTA de "Comment ça marche" */
  .specific-box{
    text-align:center !important;
    justify-items:center !important;
  }
}

/* --- Correctifs mobile V14 : kits.html, kit-octobre-rose.html, pourquoi-comprevention.html --- */
@media(max-width:640px){

  /* kits.html : affinage des retours à la ligne du paragraphe "Chaque kit réunit..." */
  .catalog-note span::before{
    content:"Chaque kit réunit différents modules (ou temps\00000Ade communication), déclinés en supports\00000Aimprimés et digitaux cohérents, que vous pouvez\00000Avisualiser avant de commander.";
  }

  /* pourquoi-comprevention.html : grossir au maximum "Une solution accessible aux structures de toutes tailles" (3 lignes) */
  .why-cta h2::before{
    font-size:26px !important;
    line-height:1.15 !important;
  }

  /* kits.html : "Vous recherchez un autre thème ?" sur 2 lignes */
  .specific-box h2{
    font-size:0 !important;
    line-height:0 !important;
  }
  .specific-box h2::before{
    content:"Vous recherchez\00000Aun autre thème\00A0?";
    display:block;
    white-space:pre-line;
    font-size:30px !important;
    line-height:1.25 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
    margin-bottom:10px;
  }

  /* pourquoi-comprevention.html : signature finale, retours à la ligne demandés */
  .why-signature{
    font-size:0 !important;
    line-height:0 !important;
  }
  .why-signature::before{
    content:"Parce que communiquer\00000Asur la prévention ne devrait jamais\00000Aêtre un frein à l’action.";
    display:block;
    white-space:pre-line;
    font-size:15px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .why-signature span{
    font-size:0 !important;
    line-height:0 !important;
    display:block;
    margin-top:10px;
  }
  .why-signature span::before{
    content:"Ensemble, faisons de la prévention\00000Aune priorité partagée.";
    display:block;
    white-space:pre-line;
    font-size:15px !important;
    line-height:1.5 !important;
  }

  /* kit-octobre-rose.html : paragraphe d'intro du hero, mêmes 3 lignes que sur ordinateur */
  .or-lead{
    font-size:0 !important;
    line-height:0 !important;
  }
  .or-lead::before{
    content:"Une campagne complète et personnalisable\00000Apour sensibiliser, mobiliser et communiquer\00000Aavec cohérence autour de la prévention du\00000Acancer du sein.";
    display:block;
    white-space:pre-line;
    font-size:17px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* kit-octobre-rose.html : "Voir les modèles" à la même largeur que "Demander un devis"
     (largeur de contenu, pas étirés sur toute la largeur du bloc) */
  .or-hero-actions .btn{
    width:230px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    justify-content:center !important;
  }

  /* kit-octobre-rose.html : titre + texte d'intro de la galerie de modèles */
  .or-section-heading h2{
    font-size:0 !important;
    line-height:0 !important;
  }
  .or-section-heading h2::before{
    content:"5 temps de\00000Acommunication\00000Acomplémentaires";
    display:block;
    white-space:pre-line;
    font-size:38px !important;
    line-height:1.08 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .or-section-heading p{
    font-size:0 !important;
    line-height:0 !important;
  }
  .or-section-heading p::before{
    content:"Chaque étape répond à un objectif précis\00000Atout en conservant la même identité graphique.\00000ACliquez sur « Voir » pour découvrir\00000Ales déclinaisons disponibles.";
    display:block;
    white-space:pre-line;
    font-size:14px !important;
    line-height:1.45 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* kit-octobre-rose.html : "Annonce de campagne" sur une seule ligne (vignette + titre de carte) */
  .template-card[data-slug="annonce"] .template-thumb strong{
    font-size:0 !important;
    line-height:0 !important;
  }
  .template-card[data-slug="annonce"] .template-thumb strong::before{
    content:"Annonce de campagne";
    display:block;
    white-space:nowrap;
    font-size:15px !important;
    line-height:1.12 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .template-card[data-slug="annonce"] .template-body h3{
    font-size:0 !important;
    line-height:0 !important;
  }
  .template-card[data-slug="annonce"] .template-body h3::before{
    content:"Annonce de campagne";
    display:block;
    white-space:nowrap;
    font-size:16px !important;
    line-height:1.2 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* kit-octobre-rose.html : le récap "Kit complet" était tronqué avec "..." (white-space:nowrap
     + text-overflow:ellipsis d'origine) au lieu d'afficher la liste complète des modules choisis */
  .kit-model-recap{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}

/* --- Correctifs mobile V15 --- */
@media(max-width:640px){

  /* kits.html : carte "Kit Octobre Rose", retours à la ligne demandés
     (:not(.price-tax-note) car ce sélecteur attrapait aussi la mention TTC juste en dessous) */
  .available-copy p:not(.price-tax-note){
    font-size:0 !important;
    line-height:0 !important;
  }
  .available-copy p:not(.price-tax-note)::before{
    content:"Découvrez une campagne cohérente\00000Aorganisée en cinq temps de communication :\00000Aannonce, événement, prévention, mobilisation\00000Aet remerciements. Chaque étape est déclinée\00000Adans les formats utiles à votre communication.";
    display:block;
    white-space:pre-line;
    font-size:14px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* kit-octobre-rose.html : surtitre "Une campagne complète, du lancement au bilan" sur 2 lignes */
  .or-section-heading span{
    font-size:0 !important;
    line-height:0 !important;
    display:block;
  }
  .or-section-heading span::before{
    content:"Une campagne complète,\00000Adu lancement au bilan";
    display:block;
    white-space:pre-line;
    font-size:12px !important;
    line-height:1.4 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
    text-transform:inherit;
    letter-spacing:inherit;
  }

  /* kit-octobre-rose.html : liste des formats de chaque carte, retours à la ligne demandés
     (fait en CSS, comme d'habitude, pas besoin de toucher au HTML) */
  .template-card:not([data-slug="remerciements"]) .template-formats{
    font-size:0 !important;
    line-height:0 !important;
  }
  .template-card:not([data-slug="remerciements"]) .template-formats::before{
    content:"Affiche A3 · Flyer A5 · Post réseaux\00A0·\00000AStory · Bannière email/web";
    display:block;
    white-space:pre-line;
    font-size:12.5px !important;
    line-height:1.4 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .template-card[data-slug="remerciements"] .template-formats{
    font-size:0 !important;
    line-height:0 !important;
  }
  .template-card[data-slug="remerciements"] .template-formats::before{
    content:"Post réseaux · Story\00A0·\00000ABannière email/web";
    display:block;
    white-space:pre-line;
    font-size:12.5px !important;
    line-height:1.4 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* kits.html : "Kit complet (5 modules)" tenait sur 2 lignes sur Android (police plus large
     qu'iOS pour la même taille) ; réduit pour tenir sur 1 ligne, même corps que "À la carte" */
  .price-copy b,
  .custom-price-copy b{
    font-size:14px !important;
  }

  /* comment-ca-marche.html : retours à la ligne du paragraphe d'intro */
  .how-hero-text p:first-of-type{
    font-size:0 !important;
    line-height:0 !important;
  }
  .how-hero-text p:first-of-type::before{
    content:"Com’Prévention vous fournit des kits de\00000Acommunication clés en main pour vos\00000Acampagnes de prévention santé.";
    display:block;
    white-space:pre-line;
    font-size:18px !important;
    line-height:1.5 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* contact.html : retour à la ligne demandé (le picto ✓ est lui-même un ::before sur le <li>,
     donc le texte de remplacement doit passer par ::after pour ne pas l'écraser) */
  .contact-benefits li:nth-child(2){
    font-size:0 !important;
    line-height:0 !important;
  }
  .contact-benefits li:nth-child(2)::after{
    content:"Un accompagnement pour choisir le kit\00000Aadapté à vos besoins";
    display:block;
    white-space:pre-line;
    font-size:16px !important;
    line-height:1.4 !important;
    font-family:inherit;
    color:inherit;
  }

  /* kit-octobre-rose.html : légendes de la fenêtre "Voir" (modal) — le format affiché (Affiche A3,
     Flyer A5...) change dynamiquement en JS, donc pas de remplacement de texte figé ici : on
     réduit juste la taille pour garantir 2/3 lignes propres, y compris sur Android */
  .visual-caption{
    font-size:13px !important;
  }
  .visual-caption + .visual-caption{
    font-size:0 !important;
    line-height:0 !important;
  }
  .visual-caption + .visual-caption::before{
    content:"Les couleurs affichées à l’écran peuvent\00000Alégèrement varier du rendu imprimé final,\00000Aselon votre écran et l’imprimeur utilisé.";
    display:block;
    white-space:pre-line;
    font-size:11px !important;
    line-height:1.4 !important;
    font-family:inherit;
    color:inherit;
  }

  /* kit-octobre-rose.html : "Visualisez chaque déclinaison..." (texte fixe, identique
     quel que soit le module) - retour à la ligne verrouillé pour ne pas dépendre du rendu */
  .modal-info p:not(.price):not(.modal-partners-note){
    font-size:0 !important;
    line-height:0 !important;
  }
  .modal-info p:not(.price):not(.modal-partners-note)::before{
    content:"Visualisez chaque déclinaison disponible avant\00000Ade sélectionner ce temps de communication.";
    display:block;
    white-space:pre-line;
    font-size:13.5px !important;
    line-height:1.4 !important;
    font-family:inherit;
    color:inherit;
  }

  /* kit-octobre-rose.html : module Événement, retour à la ligne demandé
     (texte fixe, identique quel que soit le module qui l'affiche) */
  .modal-event-note strong{
    font-size:0 !important;
    line-height:0 !important;
  }
  .modal-event-note strong::before{
    content:"Besoin d’adapter ce module\00000Aà votre événement\00A0?";
    display:block;
    white-space:pre-line;
    font-size:13px !important;
    line-height:1.3 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
}

/* ============================================================
   CORRECTIF TABLETTE PAYSAGE — strictement limité à 981px-1150px
   (n'a aucun effet en dessous de 981px ni au-dessus de 1150px ;
   c'est la zone où le menu et les 2 boutons du hero se replient
   sur 2 lignes alors que la page garde déjà la mise en page
   "ordinateur" au-delà de 980px)
   ============================================================ */
@media(min-width:981px) and (max-width:1150px){
  /* Logo réduit (et sa colonne dans la grille du header réduite d'autant,
     elle était fixée à 260px alors que le logo fait 290px de large, donc
     débordait déjà légèrement) pour laisser plus de place au menu */
  .header-inner{
    grid-template-columns:230px 1fr auto !important;
  }
  .logo img{
    width:230px !important;
  }
  .main-nav{
    gap:20px !important;
    font-size:13px !important;
  }

  /* Boutons du hero : padding et espace entre les 2 boutons resserrés
     pour que le texte tienne sur une ligne */
  .hero-actions{
    gap:10px !important;
  }
  .hero-actions .btn{
    padding:0 10px !important;
    font-size:14px !important;
  }

  /* Page "Pourquoi Com'Prévention" : le titre chevauche le visuel (plante/téléphone)
     à cette largeur. Le visuel garde une taille fixe (730px de haut) quelle que soit
     la largeur d'écran, alors que le texte s'élargit ; il est donc légèrement réduit
     ici pour laisser la place au titre sans se toucher. */
  .why-visual img{
    height:620px !important;
  }

  /* Page "Nos kits" (kits.html) : le visuel de la colonne "Un kit, une campagne
     complète" est fixé à 150% de la largeur de sa colonne (donc 675px pour une
     colonne de 450px) et déborde à la fois sur le texte à gauche et hors du
     cadre à droite à cette largeur. Réduit pour tenir dans sa colonne. */
  .catalog-visual img{
    width:430px !important;
  }

  /* Page "Nos kits" (suite) : le texte d'intro (avec ses <br> calés pour la
     largeur ordinateur) fait un retour à la ligne en trop à cette largeur
     (colonne texte plus étroite qu'à largeur ordinateur, car la grille est
     en fr et se resserre avec le viewport). On réduit légèrement le texte
     pour que les <br> d'origine retombent comme sur ordinateur, et on donne
     l'espace ainsi gagné au visuel pour l'agrandir (demande explicite).
     Le titre "Nos kits de communication santé" passait sur 3 lignes au lieu
     de 2 sur ordinateur ; réduit à 40px pour repasser sur 2 lignes, et le
     visuel encore agrandi (470→500px) pour se rapprocher de l'ordinateur. */
  .catalog-grid{
    grid-template-columns:minmax(0,1fr) minmax(512px,1fr) !important;
    gap:18px !important;
  }
  .catalog-visual img{
    width:512px !important;
  }
  .catalog-copy h1{
    font-size:43px !important;
  }
  .catalog-copy p{
    font-size:13.2px !important;
    line-height:1.5 !important;
  }
  .catalog-note span{
    font-size:12.3px !important;
  }

  /* Page "Nos kits" (suite) : description du "Kit Octobre Rose" — nouveaux
     retours à la ligne demandés (différents des <br> d'origine). Texte
     remplacé via un ::before au contenu figé. Sélecteur ciblé sur le
     paragraphe qui suit directement le h3 (et non ".available-copy p" tout
     court, qui attrapait aussi par erreur la mention TVA "Tous les tarifs...
     TTC" plus bas dans la même carte). */
  .available-copy h3 + p{
    font-size:0 !important;
    line-height:0 !important;
  }
  .available-copy h3 + p::before{
    content:"Découvrez une campagne cohérente\A organisée en cinq temps de communication :\A annonce, événement, prévention,\A mobilisation et remerciements.\A Chaque étape est déclinée dans les formats\A utiles à votre communication.";
    display:block;
    white-space:pre-line;
    font-size:14px !important;
    line-height:1.58 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* Page "Contact" : le visuel bascule sous le texte dès 1080px (règle propre
     à cette page), alors que les autres pages restent 2 colonnes jusqu'à 980px.
     On remet le visuel à côté du texte pour rester cohérent avec les autres
     pages. Colonnes en fr (pas en %) pour que l'espace entre les 2 colonnes
     (gap) ne fasse pas déborder le visuel hors du cadre. Ratio 47/53 (au lieu
     du 43/57 d'origine) pour laisser assez de place au texte "Un accompagnement
     pour choisir le kit adapté à vos besoins", qui repasserait sinon sur 3
     lignes au lieu de 2 à cette largeur. */
  .contact-hero-grid{
    grid-template-columns:47fr 53fr !important;
  }
  .contact-hero-visual{
    max-width:none !important;
    width:auto !important;
    margin:0 !important;
  }

  /* Page "Contact" (suite) : la même règle "max-width:1080px" du style propre
     à cette page fait aussi basculer sur 1 colonne (empilés en pleine largeur,
     look "tablette portrait") : le bloc formulaire + "Nos coordonnées", et les
     3 questions "Questions fréquentes". Sur ordinateur ce sont 2 colonnes puis
     3 colonnes côte à côte. On les remet en colonnes ici aussi. */
  .contact-main-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(330px,0.82fr) !important;
  }
  .faq-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
  .faq-grid article{
    border-right:1px solid rgb(203,221,229) !important;
    border-bottom:none !important;
    padding-right:20px !important;
    padding-bottom:0 !important;
  }
  .faq-grid article:last-child{
    border-right:none !important;
    padding-right:0 !important;
  }

  /* Page "Contact" : 4 retours à la ligne demandés (encadré "Besoin
     d'impression ?" + les 3 paragraphes FAQ). Le titre passait sur 2 lignes
     et certains mots isolés (ex. "informations.") se retrouvaient seuls en
     fin de paragraphe. On force les coupures exactes voulues via un texte
     de remplacement (texte réel masqué, remplacé par un ::before au contenu
     figé), en recalculant une taille par carte pour que chaque ligne tienne
     dans sa colonne, y compris à la largeur la plus étroite (981px). */
  .print-card h2{
    font-size:29px !important;
  }
  .faq-grid article:nth-child(1) p{
    font-size:0 !important;
    line-height:0 !important;
  }
  .faq-grid article:nth-child(1) p::before{
    content:"Les fichiers personnalisés sont\A généralement livrés sous 3 à 5 jours\A ouvrés après réception de\A vos informations.";
    display:block;
    white-space:pre-line;
    font-size:12px !important;
    line-height:1.48 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .faq-grid article:nth-child(2) p{
    font-size:0 !important;
    line-height:0 !important;
  }
  .faq-grid article:nth-child(2) p::before{
    content:"Nous adaptons les éléments prévus :\A logo, coordonnées, dates, lieux,\A partenaires et textes courts.\A La direction graphique reste\A celle du kit choisi.";
    display:block;
    white-space:pre-line;
    font-size:12px !important;
    line-height:1.48 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
  .faq-grid article:nth-child(3) p{
    font-size:0 !important;
    line-height:0 !important;
  }
  .faq-grid article:nth-child(3) p::before{
    content:"Contactez-nous, nous vous guidons\A vers le kit le plus adapté à votre\A campagne, vos publics\A et vos supports de diffusion.";
    display:block;
    white-space:pre-line;
    font-size:12.5px !important;
    line-height:1.48 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }

  /* Page "Contact" (suite, 2e annotation) : le paragraphe "Besoin
     d'impression ?" a déjà ses 3 retours à la ligne en dur dans le HTML
     (<br>), mais la colonne est trop étroite pour que "affiches et flyers,
     en complément" tienne sur sa ligne, ce qui ajoutait une 4e ligne. On
     réduit le padding interne de l'encadré et l'espace icône/texte (sans
     toucher aux icônes de "Nos coordonnées" juste au-dessus, qui ont leur
     propre classe) pour redonner à ce paragraphe assez de largeur. */
  .print-card{
    padding:30px 20px !important;
  }
  .print-content{
    gap:10px !important;
  }
  .print-content p{
    font-size:15.5px !important;
    line-height:1.5 !important;
  }

  /* Page "Accueil" : les 4 encadrés "Notre concept" ont des colonnes trop
     étroites à cette largeur, ce qui fait passer les petits titres (h3) sur
     2 lignes et le texte "Affiches, flyers, réseaux sociaux," (avant le <br>)
     sur une ligne en trop (3 lignes au lieu de 2). On réduit un peu le
     padding interne des encadrés et la taille du texte pour redonner assez
     de place : titres sur 1 ligne, texte sur 2 lignes, comme sur ordinateur. */
  .concept-grid article{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .concept-grid h3{
    font-size:14px !important;
  }
  .concept-grid p{
    font-size:12px !important;
  }

  /* Page "Comment ça marche" : les 5 encadrés d'étapes basculent en 1 seule
     colonne (empilés, énormes) dès max-width:1080px (règle propre à cette
     page), alors que sur ordinateur ils sont côte à côte. On remet les 5
     colonnes (avec les mêmes flèches/pointillés entre elles qu'à largeur
     normale) pour retrouver la présentation "ordinateur". */
  .process-grid-images{
    grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 26px minmax(0,1fr) !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .process-grid-images .process-dots-img{
    display:block !important;
  }

  /* Page "Pourquoi Com'Prévention" : le titre h1 ("simple, professionnelle")
     touche presque le visuel qui déborde à gauche de sa colonne (bleed
     décoratif). Texte légèrement réduit pour créer de l'air. */
  .why-hero-grid h1{
    font-size:50px !important;
  }
  .why-copy p{
    font-size:16px !important;
  }

  /* Le texte étant maintenant plus petit (voir ci-dessus), il occupe moins
     de hauteur ; comme la colonne est centrée verticalement (align-items:
     center) face à un visuel très haut (730px), ça laissait un grand vide
     au-dessus du texte, sous le menu. On aligne en haut et on remet un
     espace fixe raisonnable (proche de celui de l'ordinateur, ~85px). */
  .why-hero-grid{
    align-items:start !important;
  }
  .why-copy{
    margin-top:72px !important;
  }

  /* Page "Pourquoi Com'Prévention" : les 4 encadrés "Notre engagement" ont
     des colonnes de largeurs inégales à cette largeur (Grid étire les
     colonnes 1fr selon le contenu le plus large, ici "Personnalisation"),
     ce qui casse les retours à la ligne prévus (<br> en dur dans le texte,
     calés pour la largeur ordinateur). On force des colonnes égales et on
     réduit un peu padding/texte pour que les <br> d'origine retombent
     correctement (mêmes coupures qu'sur ordinateur). */
  .why-grid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  }
  .why-card{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .why-card h3{
    font-size:22px !important;
  }
  .why-card p{
    font-size:13px !important;
  }

  /* Page "Pourquoi Com'Prévention" : bandeau final "Une solution accessible
     aux structures de toutes tailles" — "de" se retrouve seul en fin de
     1re ligne. On le rattache à "toutes tailles" avec une espace insécable
     pour qu'il passe à la ligne avec, comme demandé. */
  .why-cta h2{
    font-size:0 !important;
    line-height:0 !important;
  }
  .why-cta h2::before{
    content:"Une solution accessible aux structures de\00A0toutes tailles";
    display:block;
    white-space:normal;
    font-size:30px !important;
    line-height:1.3 !important;
    font-family:inherit;
    font-weight:inherit;
    color:inherit;
  }
}