@charset "UTF-8";

/* =========================
   POLICES LOCALES
   ========================= */

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/roboto-v30-latin-100.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/roboto-v30-latin-100italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/roboto-v30-latin-300.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/roboto-v30-latin-300italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v30-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/roboto-v30-latin-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/roboto-v30-latin-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/roboto-v30-latin-500italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-v30-latin-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/roboto-v30-latin-700italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/roboto-v30-latin-900.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/roboto-v30-latin-900italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v25-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/montserrat-v25-latin-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/montserrat-v25-latin-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/montserrat-v25-latin-500italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/montserrat-v25-latin-600.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/montserrat-v25-latin-600italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/montserrat-v25-latin-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/montserrat-v25-latin-700italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/montserrat-v25-latin-800.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/montserrat-v25-latin-800italic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/montserrat-v25-latin-900.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/montserrat-v25-latin-900italic.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (max-width: 46em) {
  html {
    scroll-padding-top: 1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: #ffffff;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  line-height: 1.2em;
  -webkit-font-smoothing: antialiased;
  color: #30383D;
}

@media (max-width: 46em) {
  body {
    font-size: 1em;
    line-height: 1.45;
  }
}

a {
  color: inherit;
}

main {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 100%;
  max-width: 2400px;
  margin-left: auto;
  margin-right: auto;
}

/* 01 — En-tête et bloc d’ouverture */

.hero {
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  background: #fff;
  overflow: hidden;
}

@media (max-width: 90em) {
  .hero {
    min-height: 34em;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  }
}

.hero-visual {
  position: relative;
  min-height: 610px;
  background-image: url("assets/image-de-fond.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0 -1px 0 auto;
  width: 28%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 92%);
  pointer-events: none;
}

.hero-person {
  position: absolute;
  z-index: 2;
  left: 23%;
  bottom: -1px;
  height: 97%;
  width: auto;
  max-width: 74%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .08));
}

.bilan-card {
  position: absolute;
  z-index: 4;
  right: 4.5%;
  bottom: 29px;
  width: 242px;
  padding: 15px 18px 11px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #c51940;
  transform: rotate(-9deg);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.bilan-card:hover, .bilan-card:focus-visible {
  transform: rotate(-7deg) scale(1.025);
  box-shadow: 0 9px 22px rgba(0, 0, 0, .17);
}

.bilan-card strong, .bilan-card span, .bilan-card small {
  display: block;
}

.bilan-card strong {
  font-size: 2em;
  line-height: .95;
  font-weight: 900;
  letter-spacing: -1px;
}

.bilan-card span {
  margin-top: 3px;
  font-size: 1.5em;
  line-height: 1;
  font-weight: 800;
}

.bilan-card small {
  margin-top: 4px;
  font-size: 0.8em;
  font-weight: 700;
}

.hero-copy {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 46px 5vw 36px 6vw;
}

@media (max-width: 90em) {
  .hero-copy {
    padding: 2.6em 3.4vw 2.2em 3.8vw;
  }
}

.copy-inner {
  width: min(760px, 100%);
}

.badge {
  display: inline-block;
  margin: 0 0 20px;
  padding: 5px 23px 6px;
  color: #fff;
  background: #03808c;
  border-radius: 999px;
  font-size: 1.2em;
  line-height: 1;
  font-weight: 700;
}

h1 {
  margin: 0;
  max-width: 720px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 3em;
  line-height: 1.2;
  color: #000000;
}

h1 span, h1 em {
  display: block;
}

h1 em {
  color: #03808c;
  font-style: normal;
}

.intro {
  max-width: 650px;
  font-size: 1.1em;
  line-height: 1.3;
  color: #30383D;
  margin: 30px 0 26px;
  font-weight: 700;
}

.description {
  max-width: 700px;
  font-size: 1.1em;
  line-height: 1.3;
  color: #30383D;
  text-align: center;
  padding-top: 35px;
  margin: 0;
  font-weight: 400;
}

.scroll-arrow {
  position: relative;
  display: inline-block;
  width: 70px;
  margin: 43px 0 0 58px;
  text-decoration: none;
}

.nouveau {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 300px;
}

.fluo {
  display: inline;
  background-image: url("assets/surligne.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 0 4px 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.txt-vert {
  color: #03808c !important;
}

/* 02 — Présentation des offres et contenus principaux */

.offre {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.titre-livre {
  max-width: 1000px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 2.2em;
  line-height: 1.25;
  text-align: center;
  margin-top: 15px;
  padding-bottom: 10px;
  color: #000000;
}

@media (max-width: 72em) {
  .titre-livre {
    padding-inline: .8em;
  }
}
.titre-livre p.nouveaute {
	/*font-style: italic; */
	font-size: 0.7em; 
	font-weight: 500;
	 font-family: Roboto, Arial, sans-serif;
	margin-top: 15px;
	line-height: 1.3em;
}
.mockup {
  width: 100%;
  max-width: 500px;
  padding-top: 15px;
}

@media (max-width: 46em) {
  .mockup {
    max-width: 23em;
    padding: .35em 1em 0;
  }
}

.degrade {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #f5fafb, #FFFFFF);
}

.degrade2 {
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #f5fafb, #FFFFFF);
  background-image: url("assets/surligne2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.souligne, .souligne2, .souligne3 {
  display: inline;
  position: relative;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'><path d='M7 11 Q 80 10, 150 11 T 293 11' stroke='%2303808c' stroke-width='7' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 12px;
  background-position: left calc(100% + 4px);
  padding-bottom: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hand-arrow {
  position: absolute;
  z-index: 3;
  top: -105px;
  left: -75px;
  width: 67px;
}

.red-chevron {
  width: 60px;
  margin: 0 auto;
  z-index: 999;
}

@media (max-width: 46em) {
  .red-chevron {
    width: 2.7em;
  }
}

.plusgrand1 {
  font-size: 1.2em;
}

.partie1, .partie3, .partie5, .partie9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5fafb;
}

.partie1, .partie5, .partie9 {
  padding-bottom: 15px;
}

.partie3 {
  padding-bottom: 15px;
}

.partie7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #f5fafb, #FFFFFF);
  padding-bottom: 35px;
}

@media (max-width: 72em) {
  .partie7 {
    padding-bottom: 0;
  }
}

.partie2, .partie4, .partie6, .partie8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFFFFF;
}

.partie1 h2, .partie3 h2, .partie5 h2, .partie6 h2, .partie7 h2, .partie8 h2 {
  position: relative;
  max-width: 1000px;
  font: 900 2.75em/1.25 Montserrat, Arial, sans-serif;
  letter-spacing: -.015em;
  text-align: center;
  margin-top: 35px;
  padding: 0;
  margin-bottom: 0;
  color: #000000;
}

.partie2 h2 {
  position: relative;
  max-width: 1000px;
  font: 900 2.75em/1.18 Montserrat, Arial, sans-serif;
  letter-spacing: -.015em;
  text-align: center;
  margin-top: 35px;
  padding: 0;
  margin-bottom: 0;
  color: #000000;
}

.partie9 h2, .partie4 h2 {
  position: relative;
  max-width: 1000px;
  font: 900 2em/1.25 Montserrat, Arial, sans-serif;
  letter-spacing: -.015em;
  text-align: center;
  margin-top: 35px;
  padding: 0;
  margin-bottom: 35px;
  color: #000000;
}

.h2-description {
  max-width: 700px;
  font-weight: 500;
  font-size: 1.3em;
  line-height: 1.2;
  text-align: center;
  margin-top: 15px;
  padding: 0;
  color: #30383D;
}

@media (max-width: 72em) {
  .h2-description {
    padding: 0 1.2em;
  }
}

.article-card {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 30px auto 0 auto;
  padding: 54px 58px 20px;
  border: 1px solid #dce9eb;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 0.3em 1em rgba(29, 73, 79, 0.045);
}

.article-card2 {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 25px auto 0 auto;
  padding: 54px 58px 20px;
  border: 1px solid #dfe6e8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(20, 50, 54, .08);
}

.article-card-blc {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 58px 20px;
  border: none;
}

@media (max-width: 46em) {
  .article-card-blc {
    margin-top: 0;
  }
}

.article-card p, .article-card-blc p, .article-card2 p {
  margin: 0 0 20px;
  font-size: 0.95em;
  line-height: 1.35;
  color: #30383D;
}

.boxmhphoto {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 20px;
}

@media (max-width: 46em) {
  .boxmhphoto {
    align-items: center;
    gap: .65em;
  }
}

.mhphoto {
  width: 150px;
  padding-right: 15px;
}

@media (max-width: 46em) {
  .mhphoto {
    flex: 0 0 5.8em;
    width: 5.8em;
    padding-right: 0;
  }
}

.legendephoto {
  width: 400px;
}

@media (max-width: 46em) {
  .legendephoto {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

.legendephoto p {
  padding: 0 !important;
  margin: 0 !important;
  font-style: italic !important;
  font-size: 0.9em !important;
}

.jourdejuin {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 1.5em !important;
  line-height: 1.15 !important;
  text-align: left;
  text-indent: 0 !important;
  padding-bottom: 20px;
  color: #000000 !important;
}

.encartbleu {
  padding: 15px 15px 10px 25px;
  background-color: #f0fcfc;
  border-left: 3px solid #03808c;
	margin-top: 25px;
  margin-bottom: 0;
	width: 90%;
	max-width: 800px;
}

.encartbleu p {
  margin: 0;
  padding: 0;
  font-style: italic;
}

.encartbleu2 {
  padding: 15px 15px 10px 15px;
  background-color: #f0fcfc;
  margin-bottom: 20px;
}

.encartbleu2 p {
  margin: 0;
  padding: 0;
}

.article-card h4, .article-card-blc h4, .article-card2 h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 1.5em !important;
  line-height: 1.3;
  letter-spacing: -.015em;
  text-align: center;
  text-indent: 0 !important;
  padding-bottom: 20px;
  margin: 0;
  width: 600px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  color: #000000;
}

@media (max-width: 46em) {
  .article-card h4, .article-card-blc h4, .article-card2 h4 {
    width: 100%;
    max-width: 100%;
    font-size: 1.28em !important;
    line-height: 1.3;
    padding: .5em 0 1em;
  }
}

.img-nadurra {
  margin: 10px 0 30px 0;
}

.img-gagnant {
  margin: 5px 0 20px 0;
}

.img-19cs {
  padding: 0;
  max-width: 550px;
  width: 85%;
  margin: 0 auto;
}

@media (max-width: 46em) {
  .img-19cs {
    width: 100%;
  }
}

.img-rapport {
  margin: 10px auto 30px auto;
  border: 2px solid #03808c;
  display: block;
}

.hand-arrow2 {
  position: absolute;
  z-index: 10;
  left: -35px;
  bottom: -75px;
  width: 67px;
  height: auto;
}

.hand-arrow3 {
  position: absolute;
  z-index: 10;
  left: -100px;
  bottom: -100px;
  width: 67px;
  height: auto;
}

.hand-arrow4 {
  position: absolute;
  z-index: 10;
  left: -80px;
  bottom: -65px;
  width: 67px;
  height: auto;
}

.hand-arrow5 {
  position: absolute;
  z-index: 10;
  left: -100px;
  bottom: -25px;
  width: 67px;
  height: auto;
}

.hand-arrow6 {
  position: absolute;
  z-index: 10;
  left: -40px;
  bottom: -90px;
  width: 67px;
  height: auto;
}

.hand-arrow7 {
  position: absolute;
  z-index: 10;
  left: -100px;
  top: 65px;
  width: 67px;
  height: auto;
}

.article-card-blc div {
  width: 400px;
  margin: 0 auto 5px auto;
}

.article-card-blc div.illus02 {
  width: 250px;
  margin: 0 auto 15px auto;
}

.liste-check {
  list-style: none;
  margin: 0;
  padding: 0 0 10px 25px;
}

@media (max-width: 46em) {
  .liste-check {
    padding-left: 0;
  }
}

.liste-check li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  line-height: 1.5;
}

@media (max-width: 46em) {
  .liste-check li {
    padding-left: 1.55em;
    line-height: 1.5;
  }
}

.liste-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.17em;
  width: 18px;
  height: 20px;
  background-image: url("assets/puce.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (max-width: 46em) {
  .liste-check li::before {
    width: 1em;
    height: 1em;
  }
}

/* 03 — Sommaire des 19 secrets */

.sommaire-bento {
  background: #f5fafb;
  padding: 35px 24px 25px;
}

@media (max-width: 720px) {
  .sommaire-bento {
    padding: 43px 16px 60px;
  }
}

.sommaire-bento .bento-intro {
  max-width: 850px;
  margin: 0 auto 30px;
  text-align: center;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-intro {
    margin-bottom: 30px;
  }
}

.sommaire-bento .bento-intro h2 {
  max-width: 850px;
  margin: 0;
  font: 900 2.75em/1.15 Montserrat, Arial, sans-serif;
  letter-spacing: -.015em;
  text-align: center;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-intro h2 {
    font-size: 2em;
  }
}

.sommaire-bento .bento-subtitle {
  max-width: 680px;
  margin: 18px auto 0;
  color: #30383D;
  font-size: 1.08em;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-subtitle {
    font-size: 1em;
  }
}

.sommaire-bento .bento-secret {
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border: 1px solid #e0eaec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(29, 73, 79, .035);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-secret {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sommaire-bento .bento-secret {
    transition: none;
  }
}

.sommaire-bento .bento-secret:hover {
  transform: translateY(-3px);
  border-color: #95cbd0;
  box-shadow: 0 10px 22px rgba(29, 73, 79, .095);
}

.sommaire-bento .bento-digit {
  display: block;
  font: 900 1.5em/.95 Montserrat, Arial, sans-serif;
  letter-spacing: -.025em;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-digit {
    font-size: 2.45em;
  }
}

.sommaire-bento .bento-secret h3 {
  color: #172428;
  font: 800 1.06em/1.35 Roboto, Arial, sans-serif;
  text-align: left;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-secret h3 {
    font-size: 1.04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sommaire-bento .bento-secret:hover {
    transform: none;
  }
}

/* 04 — Encadrés de l’offre (avantages, cadeaux, prix, paiement) */

/* Couleur d’accent harmonisée : #03808c (boutons, pastilles et soulignements). */

.offre-modern {
  width: 100%;
  padding: 0 1.35em 3em;
  color: #172428;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 0.91em;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .offre-modern {
    padding: 2.5em 0.8em 2em;
  }
}

.offre-modern *, .offre-modern *::before, .offre-modern *::after {
  box-sizing: border-box;
}

.offre-modern .offre__container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 62em) {
  .offre-modern .offre__container {
    max-width: 43em;
  }
}

.offre-modern .offre__header {
  margin-bottom: 2em;
  text-align: center;
}

@media (max-width: 46em) {
  .offre-modern .offre__header {
    margin-bottom: 1.45em;
  }
}

.offre-modern .offre__header h2 {
  margin: 0;
  font-size: 2em;
  font-family: "Montserrat", Arial, sans-serif;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.02em;
}

@media (max-width: 620px) {
  .offre-modern .offre__header h2 {
    font-size: 1.65em;
  }
}

.offre-modern .offre__trait {
  display: block;
  width: 4.4em;
  height: 0.2em;
  margin: 1.1em auto;
  border-radius: 2em;
  background: #03808c;
}

.offre-modern .offre__intro {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1em;
}

@media (max-width: 620px) {
  .offre-modern .offre__intro {
    gap: 0.5em;
  }
}

@media (max-width: 620px) {
  .offre-modern .offre__intro p {
    font-size: 0.85em;
    text-align: left;
  }
}

.offre-modern .offre__intro p > strong {
  color: #03808c;
  font-size: 1.5em;
  font-weight: 900;
}

@media (max-width: 46em) {
  .offre-modern .offre__intro p > strong {
    font-size: 1.25em;
  }
}

.offre-modern .offre__check {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  background: #e5f7f7;
  color: #03808c;
}

@media (max-width: 620px) {
  .offre-modern .offre__check {
    width: 2.7em;
    height: 2.7em;
  }
}

.offre-modern .offre__check-symbole {
  font-size: 2.25em;
  line-height: 1;
}

@media (max-width: 620px) {
  .offre-modern .offre__check-symbole {
    font-size: 1.6em;
  }
}

.offre-modern .offre__accent {
  font-size: 1.3em;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .offre-modern .offre__accent {
    white-space: normal;
  }
}

.offre-modern .offre__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25em;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  position: relative;
}

.offre-modern .avantages, .offre-modern .prix {
  min-width: 0;
  padding: 1.5em;
  border: 1px solid #dce9eb;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 0.3em 1em rgba(29, 73, 79, 0.045);
  margin-top: 0px;
}

.offre-modern .avantage {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.35em;
  padding: 1.15em 0;
  border-bottom: 1px solid #dfe7ed;
}

@media (max-width: 620px) {
  .offre-modern .avantage {
    gap: 0.75em;
  }
}

.offre-modern .avantage:first-child {
  padding-top: 0.1em;
}

.offre-modern .avantage:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.offre-modern .avantage > div:not(.avantage__detail), .offre-modern .avantage__detail {
  flex: 1;
  min-width: 0;
}

.offre-modern .avantage__icone {
  display: grid;
  flex: 0 0 4.25em;
  place-items: center;
  width: 4.25em;
  height: 4.25em;
  border-radius: 50%;
  background: #e5f7f7;
  color: #03808c;
}

@media (max-width: 620px) {
  .offre-modern .avantage__icone {
    flex-basis: 3.2em;
    width: 3.2em;
    height: 3.2em;
  }
}

.offre-modern .avantage__icone img {
  display: block;
  width: auto;
  height: auto;
  max-width: 76%;
  max-height: 76%;
  object-fit: contain;
}

.offre-modern .avantage h3 {
  margin: 5px 0 0;
  font-size: 1.3em;
  line-height: 1.35;
  font-weight: 800;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

@media (max-width: 620px) {
  .offre-modern .avantage h3 {
    font-size: 0.9em;
  }
}

.offre-modern .avantage p {
  margin: 0;
  color: #536467;
  font-size: 1em;
  line-height: 1.35;
}

.offre-modern .sans-risque {
  display: block;
  width: 100%;
  padding: 0.48em 0 0;
  text-align: right;
  color: #03808c;
  font-size: 0.8em;
  font-weight: 500;
  font-style: italic;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .offre-modern .sans-risque {
    font-size: 0.75em;
  }
}

.offre-modern .cadeaux {
  margin-top: 0.75em;
  padding: 1em;
  border-radius: 0.9em;
  background: linear-gradient(125deg, #f5f9fd, #eff8fb);
}

@media (max-width: 620px) {
  .offre-modern .cadeaux {
    padding: 0.75em;
  }
}

.offre-modern .cadeau {
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
}

@media (max-width: 620px) {
  .offre-modern .cadeau {
    gap: 0.7em;
  }
}

.offre-modern .cadeau__miniature {
  flex: 0 0 auto;
  display: block;
  width: 4.6em;
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.offre-modern .cadeau__miniature--vertical, .offre-modern .cadeau__miniature--horizontal {
  width: 5.1em;
}

@media (max-width: 620px) {
  .offre-modern .cadeau__miniature--vertical, .offre-modern .cadeau__miniature--horizontal {
    width: 4.7em;
  }
}

.offre-modern .cadeau > div {
  min-width: 0;
  flex: 1;
}

.offre-modern .cadeau + .cadeau {
  margin-top: 1em;
}

.offre-modern .cadeau__badge {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 12px;
  border-radius: 2em;
  background: #03808c;
  color: #FFFFFF;
  font-size: 0.75em;
  font-weight: 800;
}

.offre-modern .cadeau p {
  margin: 0.18em 0;
  color: #30383D;
  font-size: 0.95em;
  line-height: 1.35;
}

.offre-modern .cadeau small {
  color: #536467;
  font-size: 0.8em;
}

@media (max-width: 46em) {
  .offre-modern .cadeau small {
    font-size: .78em;
  }
}

.offre-modern .cadeau small strong {
  color: #03808c;
  white-space: nowrap;
}

.offre-modern .prix {
  display: flex;
  flex-direction: column;
  padding: 1.35em 1.5em;
  text-align: center;
}

.offre-modern .prix h3 {
  margin: 0 0 0.1em;
  font-size: 1.35em;
  font-weight: 800;
}

.offre-modern .prix__montant {
  margin: 0;
  color: #03808c;
  font-size: 2.8em;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.065em;
}

@media (max-width: 46em) {
  .offre-modern .prix__montant {
    font-size: 2.7em;
  }
}

.offre-modern .prix__seulement {
  margin: 0;
  font-size: 1.6em;
  line-height: 1;
  font-weight: 900;
}

.offre-modern .prix__explication {
  margin: 8px auto 20px;
  color: #536467;
  font-size: 1em;
  line-height: 1.25;
  max-width: 350px;
}

@media (max-width: 46em) {
  .offre-modern .prix__explication {
    line-height: 1.45;
  }
}

.offre-modern .offre__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  width: 425px;
  padding: 15px 35px;
  border-radius: 3em;
  background: #20c75b;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.5em;
  font-weight: 800;
  box-shadow: 0 9px 19px rgba(3, 128, 140, .2);
  transition: transform 0.2s ease, background 0.2s ease;
  margin-left: auto;
  margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .offre-modern .offre__cta {
    transition: none;
  }
}

@media (max-width: 46em) {
  .offre-modern .offre__cta {
    width: 100%;
    max-width: 22em;
    min-height: 3.25em;
    padding: .65em .8em;
    font-size: 1.2em;
    line-height: 1.25;
    text-align: center;
    gap: .35em;
  }
}

.offre-modern .offre__cta:hover {
  background: #13ac4a;
  filter: brightness(.91);
  transform: translateY(-2px);
}

.offre-modern .offre__cta .offre__fleche {
  display: block;
  flex: 0 0 1.3em;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

@media (max-width: 46em) {
  .offre-modern .offre__cta .offre__fleche {
    flex-basis: 1.15em;
    width: 1.15em;
    height: 1.15em;
  }
}

.offre-modern .offre__cta:hover .offre__fleche {
  transform: translateX(0.12em);
}

.offre-modern .paiement__intro {
  margin: 20px 0 10px 0;
  color: #536467;
  font-size: 1em;
  line-height: 1.3;
}

.offre-modern .paiement__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 225px;
  margin-left: auto;
  margin-right: auto;
}

.offre-modern .paiement__logos img {
  display: block;
  width: min(100%, 18em);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.offre-modern .paiement__alternatives {
  margin-top: 25px;
  padding: 15px 35px;
  border-radius: 0.95em;
  background: linear-gradient(120deg, #f4f9fd, #eaf5fb);
  text-align: left;
}

@media (max-width: 46em) {
  .offre-modern .paiement__alternatives {
    margin-top: 1.5em;
    padding: 1em .9em;
  }
}

.offre-modern .paiement__alternatives > p {
  margin: 0 0 1em;
  color: #536467;
  font-size: 1em;
  line-height: 1.25;
  text-align: center;
}

.offre-modern .alternative {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0.7em 0;
}

@media (max-width: 46em) {
  .offre-modern .alternative {
    align-items: flex-start;
    gap: .4em;
  }
}

.offre-modern .alternative__icone {
  flex: 0 0 20px;
  width: 50px;
  color: #03808c;
  line-height: 1;
  align-self: flex-start;
  margin-top: 5px;
}

@media (max-width: 46em) {
  .offre-modern .alternative__icone {
    flex-basis: 1.3em;
    margin-top: .25em;
  }
}

.offre-modern .alternative strong {
  font-size: 1em;
}

@media (max-width: 46em) {
  .offre-modern .alternative strong {
    font-size: .95em;
  }
}

.offre-modern .alternative a {
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}

.offre-modern .alternative small {
  display: block;
  margin-top: 0;
  color: #536467;
  font-size: 0.8em;
  line-height: 1.4;
}

@media (max-width: 46em) {
  .offre-modern .alternative small {
    font-size: .84em;
  }
}

.offre-modern .alternative .alternative__lien {
  color: #03808c;
  text-decoration: underline;
}

.offre-modern .offre__conditions {
  max-width: 650px;
  margin: 1.2em auto 0;
  color: #536467;
  font-size: 0.7em;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 46em) {
  .offre-modern .offre__conditions {
    font-size: .78em;
    line-height: 1.5;
  }
}

@media (max-width: 620px) {
  .offre-modern .desktop-only {
    display: none;
  }

  .offre-modern .avantages, .offre-modern .prix {
    padding: 1.1em;
  }

  .offre-modern .avantage p {
    font-size: 0.78em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offre-modern .offre__cta:hover {
    transform: none;
  }
}

.sommaire-bento .bento-inner {
  width: 100%;
  margin: 0 auto;
  max-width: 1140px;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-num {
    margin: 0;
  }
}

.sommaire-bento .bento-copy {
  align-self: start;
}

.sommaire-bento .bento-secret--wide {
  grid-template-columns: 78px minmax(0, 1fr);
}

.sommaire-bento .bento-secret--image {
  grid-template-columns: 68px minmax(0, 1fr) 150px;
  column-gap: 14px;
}

.sommaire-bento .bento-secret--wide.bento-secret--image {
  grid-template-columns: 78px minmax(0, 1fr) 258px;
  column-gap: 20px;
}

.sommaire-bento .bento-secret--image .bento-art {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
}

@media (max-width: 940px) and (min-width: 721px) {
  .sommaire-bento .bento-secret--image .bento-art {
    margin: -19px -17px -14px 0;
  }
}

.sommaire-bento .bento-art img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
  mask-image: linear-gradient(to right, transparent 0%, #000 35%);
}

@media (max-width: 720px) {
  .sommaire-bento .bento-art img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 65%);
    mask-image: linear-gradient(to right, transparent, #000 65%);
  }
}

.sommaire-bento .bento-secret--image:not(.bento-secret--wide) .bento-art img {
  object-position: 50% center;
}

.sommaire-bento .bento-secret--image:not(.bento-secret--wide) .bento-copy {
  align-self: start;
}

.sommaire-bento .bento-secret--image .bento-copy {
  padding-right: 0;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-secret--image .bento-copy {
    grid-column: 2;
  }
}

.sommaire-bento .bento-secret--image footer {
  grid-column: 1 / 3;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-secret--image footer {
    grid-column: 1/-1;
    padding-right: 90px;
  }
}

@media (max-width: 940px) and (min-width: 721px) {
  .sommaire-bento .bento-secret {
    column-gap: 10px;
    grid-template-columns: 55px minmax(0, 1fr);
  }

  .sommaire-bento .bento-secret--image {
    grid-template-columns: 55px minmax(0, 1fr) 105px;
  }

  .sommaire-bento .bento-secret--wide.bento-secret--image {
    grid-template-columns: 55px minmax(0, 1fr) 210px;
  }
}

@media (max-width: 720px) {
  .sommaire-bento .bento-secret, .sommaire-bento .bento-secret--wide, .sommaire-bento .bento-secret--image, .sommaire-bento .bento-secret--wide.bento-secret--image {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0 12px;
  }

  .sommaire-bento .bento-secret--image {
    padding-right: 105px;
    min-height: 180px;
  }

  .sommaire-bento .bento-secret--image .bento-art {
    grid-column: 1/-1;
    grid-row: 1/3;
    position: absolute;
    inset: 0 0 0 auto;
    width: 118px;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0 15px 15px 0;
    opacity: .7;
  }
}

@media (max-width: 440px) {
  .sommaire-bento .bento-secret--image {
    padding-right: 18px;
    min-height: 0;
  }

  .sommaire-bento .bento-secret--image .bento-copy {
    padding-right: 0;
    padding-bottom: 90px;
  }

  .sommaire-bento .bento-secret--image .bento-art {
    inset: auto 0 28px auto;
    width: 170px;
    height: 105px;
    opacity: .88;
  }

  .sommaire-bento .bento-secret--image .bento-art img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 42%);
    mask-image: linear-gradient(to right, transparent, #000 42%);
  }

  .sommaire-bento .bento-secret--image footer {
    padding-right: 155px;
  }
}

.sommaire-bento .bento-grid {
  display: grid;
  width: 100%;
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
}

.sommaire-bento .bento-secret {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0;
  min-height: 205px;
  align-content: stretch;
  align-items: start;
  padding: 22px 28px 12px;
  overflow: hidden;
}

.sommaire-bento .bento-num {
  color: #03808c;
  align-self: start;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-num {
    margin-bottom: 10px;
  }
}

.sommaire-bento .bento-kicker {
  display: block;
  font: 800 1em/1.2 Montserrat, Arial, sans-serif;
  letter-spacing: .03em;
  margin: 0 .5em 0 0;
}

.sommaire-bento .bento-digit {
  font-size: 1.7em;
  line-height: 0.9;
}

@media (max-width: 940px) and (min-width: 721px) {
  .sommaire-bento .bento-digit {
    font-size: 2.5em;
  }
}

.sommaire-bento .bento-copy {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-copy {
    padding: 0;
  }
}

.sommaire-bento .bento-secret h3 {
  margin-bottom: 8px;
  margin: 0 0 8px;
}

@media (max-width: 46em) {
  .sommaire-bento .bento-secret h3 {
    font-size: 1.06em;
    line-height: 1.4;
  }
}

.sommaire-bento .bento-secret p {
  color: #30383D;
  font-size: .96em;
  line-height: 1.35;
  margin-bottom: 2px;
  padding-bottom: 15px;
  margin: 0 0 4px;
}

@media (max-width: 46em) {
  .sommaire-bento .bento-secret p {
    font-size: .98em;
    line-height: 1.45;
  }
}

.sommaire-bento .bento-secret footer {
  border-top: 1px solid #e6eff0;
  color: #03808c;
  font: 800 .76em/1.4 Montserrat, Arial, sans-serif;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  align-self: end;
	text-align: right;
}

@media (max-width: 720px) {
  .sommaire-bento .bento-secret footer {
    padding-top: 10px;
  }
}

.sommaire-bento .bento-secret--wide {
  grid-column: 1 / -1;
  min-height: 176px;
  background: #f0fafb;
}

.sommaire-bento .bento-secret--image {
  padding-right: 188px;
}

.sommaire-bento .bento-secret--wide.bento-secret--image {
  padding-right: 305px;
}

.sommaire-bento .bento-secret--image .bento-art {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 0;
  width: 150px;
  height: 116px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
}

.sommaire-bento .bento-secret--wide.bento-secret--image .bento-art {
  width: 255px;
  height: 155px;
  top: 0px;
  right: 18px;
  border-radius: 14px;
}

.sommaire-bento .bento-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.sommaire-bento .bento-secret--wide .bento-copy {
  max-width: none;
}

@media (max-width: 940px) and (min-width: 721px) {
  .sommaire-bento .bento-secret {
    min-height: 195px;
    padding: 20px 20px 12px;
  }

  .sommaire-bento .bento-secret--image {
    padding-right: 150px;
  }

  .sommaire-bento .bento-secret--wide.bento-secret--image {
    padding-right: 245px;
  }

  .sommaire-bento .bento-secret--image .bento-art {
    width: 118px;
    height: 102px;
    top: 14px;
    right: 14px;
  }

  .sommaire-bento .bento-secret--wide.bento-secret--image .bento-art {
    width: 205px;
    height: 124px;
  }
}

@media (max-width: 720px) {
  .sommaire-bento .bento-secret, .sommaire-bento .bento-secret--wide, .sommaire-bento .bento-secret--image, .sommaire-bento .bento-secret--wide.bento-secret--image {
    grid-column: 1;
    min-height: 0;
    padding: 18px 18px 14px;
  }

  .sommaire-bento .bento-secret--image, .sommaire-bento .bento-secret--wide.bento-secret--image {
    padding-right: 18px;
    padding-bottom: 128px;
  }

  .sommaire-bento .bento-secret--image .bento-art, .sommaire-bento .bento-secret--wide.bento-secret--image .bento-art {
    top: auto;
    right: 18px;
    bottom: 14px;
    width: 162px;
    height: 94px;
    border-radius: 12px;
  }
}

@media (max-width: 440px) {
  .sommaire-bento .bento-secret--image, .sommaire-bento .bento-secret--wide.bento-secret--image {
    padding-bottom: 120px;
  }

  .sommaire-bento .bento-secret--image .bento-art, .sommaire-bento .bento-secret--wide.bento-secret--image .bento-art {
    width: 148px;
    height: 88px;
    right: 14px;
    bottom: 14px;
  }
}

.sommaire-bento .bento-secret--image, .sommaire-bento .bento-secret--wide, .sommaire-bento .bento-secret--wide.bento-secret--image {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 0 !important;
}

.sommaire-bento .bento-secret--image .bento-copy, .sommaire-bento .bento-secret--wide .bento-copy, .sommaire-bento .bento-secret--wide.bento-secret--image .bento-copy {
  grid-column: 1 !important;
  grid-row: 2 !important;
  max-width: none !important;
  width: auto !important;
}

.sommaire-bento .bento-secret--image .bento-num, .sommaire-bento .bento-secret--wide .bento-num, .sommaire-bento .bento-secret--wide.bento-secret--image .bento-num {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.sommaire-bento .bento-secret--image footer, .sommaire-bento .bento-secret--wide footer, .sommaire-bento .bento-secret--wide.bento-secret--image footer {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

@media (min-width: 941px) {
  .sommaire-bento .bento-grid > .bento-secret:first-child .bento-art {
    width: 218px;
    height: 166px;
    top: 21px;
    right: 13px;
  }

  .sommaire-bento .bento-grid > .bento-secret:first-child .bento-art img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%);
    mask-image: linear-gradient(to right, transparent 0%, #000 46%);
  }
}

@media (max-width: 720px) {
  .sommaire-bento .bento-grid > .bento-secret:first-child {
    padding-bottom: 148px;
  }

  .sommaire-bento .bento-grid > .bento-secret:first-child .bento-art {
    width: 192px;
    height: 115px;
  }
}

@media (max-width: 440px) {
  .sommaire-bento .bento-grid > .bento-secret:first-child {
    padding-bottom: 137px;
  }

  .sommaire-bento .bento-grid > .bento-secret:first-child .bento-art {
    width: 170px;
    height: 102px;
  }
}

.sommaire-bento .bento-art img[src$="sommaire-chute.png"], .sommaire-bento .bento-art img[src$="sommaire-changement.png"] {
  object-position: center top;
}

.partie6 .phenomenal-heading {
  position: relative;
  width: min(100%, 1080px);
  margin: 42px auto 0;
  padding: 0 18px;
}

@media (max-width: 900px) {
  .partie6 .phenomenal-heading {
    padding: 0 20px 0 128px;
  }
}

.partie6 .phenomenal-heading h2 {
  margin: 0 auto;
}

.partie6 .phenomenal-ribbon {
  position: absolute;
  z-index: 2;
  top: -45px;
  left: -20px;
  display: block;
  width: 225px;
  padding: 10px 8px;
  background: #c51940;
  color: #ffffff;
  font: 900 1.4em/1.1 Roboto, Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-15deg);
}

/* Sur tablette et mobile, le bandeau « Phénoménal ! » reste horizontal. */
@media (max-width: 62em) {
  .partie6 .phenomenal-ribbon {
    transform: none;
  }
}

@media (max-width: 900px) {
  .partie6 .phenomenal-ribbon {
    left: 5px;
    top: 24px;
    width: 150px;
    font-size: 0.82em;
  }
}

@media (max-width: 620px) {
  .partie6 .phenomenal-heading {
    margin-top: 45px;
    padding: 55px 16px 0;
  }

  .partie6 .phenomenal-ribbon {
    top: 0;
    left: 14px;
    width: 140px;
    font-size: 0.77em;
  }
}

.partie6 .article-card-blc {
  max-width: 1050px;
  padding: 38px 36px 32px;
}

@media (max-width: 720px) {
  .partie6 .article-card-blc {
    padding: 30px 18px 24px;
  }
}

.partie6 .article-card-blc > p {
  max-width: 690px;
  margin-right: auto;
  margin-left: auto;
}

.partie6 .gains-tables {
  width: 100%;
  margin: 1.7em auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  .partie6 .gains-tables {
    margin-top: 1.3em;
  }
}

.partie6 .gains-tables__grid {
  display: grid;
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.45em;
  min-width: 650px;
  align-items: start;
}

@media (max-width: 46em) {
  .partie6 .gains-tables__grid {
    width: 100%;
    max-width: 26em;
    min-width: 0;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1em;
  }
}

.partie6 .gains-tables__table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dfe9eb;
  border-radius: 0.45em;
  color: #30383D;
  font: 500 0.83em/1.3 Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 46em) {
  .partie6 .gains-tables__table {
    width: 100%;
    font-size: .9em;
  }
}

.partie6 .gains-tables__table th {
  padding: 0.75em 0.9em;
  background: #03808c;
  color: #ffffff;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 46em) {
  .partie6 .gains-tables__table th {
    padding: .7em .55em;
  }
}

.partie6 .gains-tables__table td {
  padding: 0.53em 0.9em;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid #dbe7e9;
}

@media (max-width: 46em) {
  .partie6 .gains-tables__table td {
    padding: .55em .5em;
  }
}

.partie6 .gains-tables__table tr:last-child td {
  border-bottom: 0;
}

.partie6 .gains-tables__table tbody tr:nth-child(odd) {
  background: #f5fafb;
}

.partie6 .gains-tables__table tbody tr:nth-child(even) {
  background: #ffffff;
}

.partie6 .gains-tables__highlight {
  display: inline-block;
  padding: 0.1em 0.32em;
  border-radius: 0.25em;
  background: linear-gradient(176deg, transparent 15%, #ffeb2f 18%, #ffeb2f 86%, transparent 89%);
  color: #172428;
  font-weight: 900;
}

.partie6 .gains-tables__highlight.gains-tables__entoure {
  position: relative;
  z-index: 1;
  isolation: isolate;
  color: #172428;
  background: linear-gradient(176deg, transparent 15%, #ffeb2f 18%, #ffeb2f 86%, transparent 89%);
  border-radius: 0.12em;
}

.partie6 .gains-tables__entoure::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -0.64em;
  right: -0.86em;
  bottom: -0.64em;
  left: -0.86em;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20224%2072%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M104%208%20C68%207%2031%2011%2016%2025%20C-1%2041%2019%2059%2061%2064%20C97%2070%20162%2068%20193%2054%20C211%2046%20218%2033%20205%2022%20C193%2012%20176%209%20150%208%22%20fill%3D%22none%22%20stroke%3D%22%2303808c%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  transform: rotate(-2deg);
}

.avantages-cahiers {
  padding: 30px 25px 5px;
  color: #30383D;
}

@media (max-width: 700px) {
  .avantages-cahiers {
    padding: 2.3em 1em 3.3em;
  }
}

.avantages-cahiers__inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.avantages-cahiers__liste {
  display: grid;
  gap: 1.7em;
}

@media (max-width: 46em) {
  .avantages-cahiers__liste {
    gap: 1.15em;
  }
}

.cahiers-avantage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce9eb;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 0.3em 1em rgba(29, 73, 79, 0.045);
}

@media (max-width: 940px) {
  .cahiers-avantage {
    grid-template-columns: 31% minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .cahiers-avantage {
    display: flex;
    flex-direction: column;
  }
}

.cahiers-avantage2 {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce9eb;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 0.3em 1em rgba(29, 73, 79, 0.045);
  padding: 0 1.65em;
}

@media (max-width: 46em) {
  .cahiers-avantage2 {
    padding: 0 1.1em;
  }
}

.cahiers-avantage__media {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 13.5em;
  overflow: hidden;
}

@media (max-width: 700px) {
  .cahiers-avantage__media {
    order: 0;
    width: 100%;
    height: 11.5em;
    min-height: 0;
  }
}

.cahiers-avantage__media img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center center;
}

.cahiers-avantage__media::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent 66%, #fff 100%);
}

@media (max-width: 700px) {
  .cahiers-avantage__media::after {
    background: linear-gradient(to bottom, transparent 57%, #fff 100%);
  }
}

.cahiers-avantage__texte {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  padding: 2em 2em 2em 2em;
}

@media (max-width: 940px) {
  .cahiers-avantage__texte {
    padding: 1.3em;
  }
}

.cahiers-avantage__entete {
  display: flex;
  align-items: flex-start;
  gap: 0.95em;
  margin-bottom: 1em;
}

@media (max-width: 700px) {
  .cahiers-avantage__entete {
    gap: 0.75em;
  }
}

.cahiers-avantage__entete h3 {
  margin: 0;
  color: #172428;
  font: 900 1.4em/1.25 Montserrat, Arial, sans-serif;
  letter-spacing: -0.02em;
}

@media (max-width: 940px) {
  .cahiers-avantage__entete h3 {
    font-size: 1.13em;
  }
}

@media (max-width: 46em) {
  .cahiers-avantage__entete h3 {
    line-height: 1.32;
  }
}

.avantages-cahiers .cahiers-avantage__texte p, .avantages-cahiers .cahiers-avantage__texte li {
  font: 400 1em/1.3 Roboto, Arial, sans-serif;
  color: #30383D;
}

@media (max-width: 700px) {
  .avantages-cahiers .cahiers-avantage__texte p, .avantages-cahiers .cahiers-avantage__texte li {
    font-size: 0.94em;
  }
}

.avantages-cahiers .cahiers-avantage__texte p {
  margin: 0;
}

.avantages-cahiers .cahiers-avantage__texte strong {
  font-weight: 800;
  color: #172428;
}

.cahiers-avantage__texte ul {
  list-style: none;
  padding: 0;
  margin: 0.7em 0 0;
}

.cahiers-avantage__texte li {
  position: relative;
  padding-left: 1.25em;
  margin: 0.3em 0;
}

.cahiers-avantage__texte li::before {
  content: "";
  position: absolute;
  top: 0.56em;
  left: 0;
  width: 0.54em;
  height: 0.54em;
  border-radius: 50%;
  background: #03808c;
}

@media (max-width: 700px) {
  .cahiers-avantage:nth-child(2) .cahiers-avantage__media img {
    object-position: center 28%;
  }

  .cahiers-avantage:nth-child(4) .cahiers-avantage__media img {
    object-position: center top;
  }

  .cahiers-avantage__texte {
    order: 1;
    padding: 1.3em 1.2em 1.4em;
    width: 100%;
    align-self: stretch;
  }

  .cahiers-avantage__entete h3 {
    font-size: 1.12em;
  }
}

.img-arrondie {
  border-radius: 1em !important;
}

.partie8--certificat {
  padding: 0 0 25px;
}

@media (max-width: 700px) {
  .partie8--certificat {
    padding: 0 0.6em 2.7em;
  }
}

.garantie-mix {
  width: 100%;
  max-width: 700px;
  margin: 25px auto 0;
  padding: 0.2em;
  border: 5px solid #03808c;
  border-radius: 0.68em;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(20, 50, 54, .08);
  color: #30383D;
  font-family: Roboto, Arial, sans-serif;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .garantie-mix {
    margin-top: 1.45em;
    padding: 0.25em;
  }
}

@media (max-width: 46em) {
  .garantie-mix {
    max-width: 100%;
  }
}

.garantie-mix__interieur {
  border: 3px solid #03808c;
  border-radius: 0.34em;
  padding: 2.1em 2.55em 1.7em;
  background-color: #f5fafb;
  position: relative;
}

@media (max-width: 700px) {
  .garantie-mix__interieur {
    padding: 1.45em 1.08em 1.2em;
  }
}

.garantie-mix__entete {
  text-align: center;
  margin-bottom: 1.45em;
}

.partie8--certificat .garantie-mix h3 {
  margin: 0;
  font: 900 2.5em/1.16 Montserrat, Arial, sans-serif;
  letter-spacing: -0.024em;
  color: #000;
}

@media (max-width: 700px) {
  .partie8--certificat .garantie-mix h3 {
    font-size: 1.32em;
  }
}

.partie8--certificat .garantie-mix h3 span {
  color: #03808c;
}

.garantie-mix__ruban {
  display: inline-block;
  margin: 15px auto 0;
  padding: 8px 30px;
  background: #c51940;
  color: #ffffff;
  font: italic 800 1.4em/1.2 Roboto, Arial, sans-serif;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.65em) 50%, 100% 100%, 0 100%, 0.65em 50%);
}

@media (max-width: 700px) {
  .garantie-mix__ruban {
    max-width: 100%;
    padding: 0.6em 0.7em;
    font-size: 1.05em;
    white-space: normal;
  }
}

.garantie-mix__contenu {
  max-width: 41em;
  margin: 0 auto;
  font-size: 0.96em;
  line-height: 1.48;
}

@media (max-width: 700px) {
  .garantie-mix__contenu {
    font-size: 0.91em;
  }
}

.garantie-mix__intro {
  margin: 0 0 1.2em;
  color: #30383D;
  line-height: 1.3em;
  text-indent: 25px;
  padding-top: 10px;
}

.garantie-mix__contenu strong {
  font-weight: 800;
  color: #172428;
}

.garantie-mix__engagements {
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65em;
}

.garantie-mix__engagements li {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  gap: 0.75em;
  align-items: start;
  padding: 0.9em 1.05em;
  background: #FFF;
  border: 1px solid #dfebed;
  border-radius: 0.57em;
}

@media (max-width: 700px) {
  .garantie-mix__engagements li {
    grid-template-columns: 1.8em minmax(0, 1fr);
    gap: 0.45em;
    padding: 0.75em 0.7em;
  }
}

.garantie-mix__engagements p {
  margin: 0;
  line-height: 1.3;
}

.garantie-mix__engagements p strong {
  color: #03808c;
}

.garantie-mix__coche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85em;
  height: 1.85em;
  margin-top: 0.06em;
  background: #03808c;
  border-radius: 50%;
  color: #ffffff;
  font: 900 0.83em/1 Roboto, Arial, sans-serif;
}

.garantie-mix__conclusion p {
  margin: 0;
  line-height: 1.3;
  text-indent: 25px;
  padding-bottom: 15px;
}

.garantie-mix__conclusion {
  margin: 0 auto;
  text-align: left;
  font-size: 1em;
  line-height: 1.3;
}

.garantie-mix__conclusion strong {
  font-weight: 900;
}

.garantie-mix__pied {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2em;
  max-width: 41em;
  margin: 1.4em auto 0;
  padding-top: 0.9em;
}

.garantie-mix__sceau-image {
  position: relative;
  max-width: 150px;
}

@media (max-width: 700px) {
  .garantie-mix__sceau-image {
    width: 5.7em;
    height: 5.7em;
    flex-basis: 5.7em;
  }
}

.garantie-mix__signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 66%;
  padding-bottom: 0.35em;
  color: #172428;
}

@media (max-width: 700px) {
  .garantie-mix__signature {
    max-width: 71%;
  }
}

.garantie-mix__signature-image {
  display: block;
  max-width: 300px;
  height: auto;
  margin: 0 0 0.45em;
}

@media (max-width: 700px) {
  .garantie-mix__signature-image {
    width: min(100%, 16.5em);
  }
}

@media (max-width: 365px) {
  .garantie-mix__ruban {
    white-space: normal;
    font-size: 1.02em;
  }

  .garantie-mix__sceau-image {
    width: 5.25em;
    height: 5.25em;
    flex-basis: 5.25em;
  }
}

.garantie-mix__sceau-image > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.offerts-moderne {
  position: relative;
  isolation: isolate;
  padding: 0 1.4em 15px;
  background: linear-gradient(180deg, #ffffff 0%, #f5fafb 70%, #ffffff 100%);
  color: #30383D;
}

@media (max-width: 820px) {
  .offerts-moderne {
    padding: 3.2em 1em 3.4em;
  }
}

.offerts-moderne__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.offerts-moderne__intro {
  max-width: 800px;
  margin: 0 auto 2.3em;
  text-align: center;
}

@media (max-width: 440px) {
  .offerts-moderne__intro {
    margin-bottom: 1.8em;
  }
}

.offerts-moderne__intro h2 {
  margin: 0 auto 0.38em;
  color: #000000;
  font: 900 2.65em/1.14 Montserrat, Arial, sans-serif;
  letter-spacing: -0.02em;
}

@media (max-width: 820px) {
  .offerts-moderne__intro h2 {
    font-size: 2.15em;
  }
}

.offerts-moderne__intro h2 span {
  color: #03808c;
}

.offerts-moderne__intro > p:last-child {
  max-width: 730px;
  margin: 0 auto;
  font: 400 1.08em/1.3 Roboto, Arial, sans-serif;
}

@media (max-width: 440px) {
  .offerts-moderne__intro > p:last-child {
    font-size: 0.99em;
  }
}

@media (max-width: 46em) {
  .offerts-moderne__intro > p:last-child {
    line-height: 1.45;
  }
}

.offerts-moderne__intro > p:last-child strong {
  color: #172428;
}

.offerts-moderne__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4em;
  align-items: stretch;
}

@media (max-width: 820px) {
  .offerts-moderne__grille {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin: 0 auto;
  }
}

.offerts-moderne__carte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe9eb;
  border-radius: 1.18em;
  background: #ffffff;
  box-shadow: 0 0.5em 1.4em rgba(29, 73, 79, 0.055);
}

.offerts-moderne__visuel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19em;
  padding: 2.3em 1.4em 0.4em;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 65%, #ffffff 0%, #f1f8f9 65%, #eaf4f6 100%);
}

@media (max-width: 820px) {
  .offerts-moderne__visuel {
    height: 18em;
  }
}

.offerts-moderne__numero {
  position: absolute;
  z-index: 1;
  top: 1.3em;
  left: 1.5em;
  color: #03808c;
  font: 800 0.78em/1.15 Montserrat, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.offerts-moderne__visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.25em 0.45em rgba(23, 52, 65, 0.04));
}

.offerts-moderne__visuel--horizontal img {
  width: 100%;
}

.offerts-moderne__contenu {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 1.7em 1.75em 1.45em;
}

@media (max-width: 820px) {
  .offerts-moderne__contenu {
    padding: 1.6em 1.5em 1.4em;
  }
}

.offerts-moderne__type {
  margin: 0 0 0.5em;
  color: #03808c;
  font: 800 0.79em/1.3 Montserrat, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.offerts-moderne__contenu h3 {
  margin: 0 0 0.9em;
  color: #172428;
  font: 900 1.2em/1.3 Roboto, Arial, sans-serif;
  font-style: italic;
}

@media (max-width: 440px) {
  .offerts-moderne__contenu h3 {
    font-size: 1.09em;
  }
}

.offerts-moderne__description {
  font: 400 1em/1.3 Roboto, Arial, sans-serif;
  color: #30383D;
}

.offerts-moderne__description p {
  margin: 0 0 0.75em;
}

.offerts-moderne__description p:last-child {
  margin-bottom: 0;
}

.offerts-moderne__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8em 0.6em;
  margin-top: auto;
  padding-top: 1.5em;
  border-top: 1px solid #e1eaec;
}

@media (max-width: 820px) {
  .offerts-moderne__bas {
    margin-top: 1.7em;
  }
}

@media (max-width: 440px) {
  .offerts-moderne__bas {
    align-items: flex-start;
  }
}

.offerts-moderne__valeur {
  white-space: nowrap;
  color: #68747A;
  font: 500 0.86em/1.35 Roboto, Arial, sans-serif;
}

.offerts-moderne__valeur s {
  text-decoration-thickness: 1px;
}

.offerts-moderne__gratuit {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
  padding: 0.48em 0.75em;
  border-radius: 2em;
  color: #03808c;
  background: #e5f7f7;
  font: 900 0.78em/1.25 Montserrat, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.offerts-moderne__gratuit span {
  display: grid;
  place-items: center;
  flex: 0 0 1.55em;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  color: #ffffff;
  background: #03808c;
  font: 900 0.91em/1 Roboto, Arial, sans-serif;
}

.offerts-moderne__rappel {
  margin: 40px auto 0;
  text-align: center;
  color: #30383D;
  font: 400 1em/1.3 Roboto, Arial, sans-serif;
}

@media (max-width: 46em) {
  .offerts-moderne__rappel {
    margin-top: 1.5em;
  }
}

.offerts-moderne__rappel2 {
  margin: 0 auto 35px;
  text-align: center;
  color: #30383D;
  font: 400 1em/1.3 Roboto, Arial, sans-serif;
  max-width: 800px;
  width: 90%;
  padding-top: 0;
}

.offerts-moderne__rappel strong {
  color: #03808c;
  font-weight: 800;
}

@media (max-width: 440px) {
  .offerts-moderne {
    padding-right: 0.8em;
    padding-left: 0.8em;
  }

  .offerts-moderne__intro h2 {
    font-size: 1.85em;
  }

  .offerts-moderne__visuel {
    height: 15.5em;
    padding: 2.1em 0.4em 0;
  }

  .offerts-moderne__contenu {
    padding: 1.4em 1.12em 1.2em;
  }
}

.total {
  font-family: "Montserrat", sans-serif;
  max-width: 700px;
  font-weight: 900;
  font-size: 1.8em;
  line-height: 1.3;
  text-align: center;
  margin-top: 0;
  padding: 0;
  color: #03808c;
  margin-bottom: 015px;
}

.tem-alterne {
  padding: 2em 1.25em 4.4em;
  background: #ffffff;
  color: #30383D;
}

@media (max-width:800px) {
  .tem-alterne {
    padding: 3.25em 1em 3.6em;
  }
}

.tem-alterne * {
  box-sizing: border-box;
}

.tem-alterne__interieur {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
}

.tem-alterne__entete {
  text-align: center;
}

.tem-alterne__entete h2 {
  max-width: 850px;
  margin: 0 auto;
  color: #000;
  font: 900 2.6em/1.3 Montserrat, Arial, sans-serif;
  letter-spacing: -.04em;
  position: relative;
}

@media (max-width:800px) {
  .tem-alterne__entete h2 {
    font-size: 2em;
  }
}

.tem-alterne__entete h2 span {
  color: #03808c;
}

.tem-alterne__chapeau {
  max-width: 750px;
  margin: 1em auto 15px;
  font: 400 1.2em/1.3 Roboto, Arial, sans-serif;
  position: relative;
}

@media (max-width:600px) {
  .tem-alterne__chapeau {
    font-size: 1em;
  }
}

.huissier img {
  position: relative;
  max-width: 150px;
}

.huissier p {
  width: 90%;
  max-width: 850px;
  text-align: center;
  margin: auto;
  line-height: 1.3em;
  padding-top: 15px;
}

@media (max-width: 46em) {
  .huissier p {
    width: 100%;
    max-width: 37em;
    padding: .7em .2em 0;
  }
}

.tem-alterne__vedette {
  display: grid;
  grid-template-columns: minmax(0, 31%) minmax(0, 69%);
  align-items: center;
  gap: 0;
  margin: 0 0 2.3em;
}

.tem-alterne__visuel {
  margin: 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1em 0;
}

.tem-alterne__visuel img {
  display: block;
  width: 100%;
  height: 18em;
  max-height: 18em;
  min-height: 0;
  object-fit: cover;
  border-radius: .75em;
  box-shadow: 0 .45em 1.15em rgba(20, 50, 54, .09);
}

.tem-alterne__vedette--pascal .tem-alterne__visuel {
  z-index: 1;
  margin-right: -1.1em;
  padding-top: 1em;
  padding-bottom: 1.8em;
}

.tem-alterne__papier {
  background: #fff;
  padding: 1.7em 2.25em 1.5em;
  box-shadow: 0 .65em 1.9em rgba(35, 70, 75, .075);
  border: 1px solid #e6edeb;
  border-radius: .45em;
  position: relative;
  min-width: 0;
}

.tem-alterne__papier::before {
  content: "";
  display: block;
  position: absolute;
  height: 3px;
  background: #d9ebe9;
  top: 0;
  left: 2em;
  right: 2em;
}

.tem-alterne__vedette--pascal .tem-alterne__papier {
  padding-left: 3.15em;
}

.tem-alterne__avatar {
  display: inline-flex;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: #e8f5f6;
  border: 1px solid #bddfe2;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.tem-alterne__avatar-tete {
  position: absolute;
  top: .24em;
  left: 50%;
  width: .48em;
  height: .48em;
  margin-left: -.24em;
  border-radius: 50%;
  background: #03808c;
}

.tem-alterne__avatar-buste {
  position: absolute;
  bottom: .2em;
  left: 50%;
  width: .9em;
  height: .52em;
  margin-left: -.45em;
  background: #03808c;
  border-radius: .52em .52em .18em .18em;
}

.tem-alterne__avant {
  font: 700 1em/1.3 Roboto, Arial, sans-serif;
  color: #172428;
  margin: 0 0 .7em;
}

.tem-alterne__papier blockquote {
  padding: 0;
  margin: 0;
  color: #30383D;
  font: italic 400 .98em/1.52 Roboto, Arial, sans-serif;
}

@media (max-width:600px) {
  .tem-alterne__papier blockquote {
    font-size: .92em;
  }
}

.tem-alterne .tem-courriers__surligne {
  font-weight: 900;
  color: #172428;
  background: linear-gradient(transparent 42%, #fdf18a 42%, #fdf18a 92%, transparent 92%);
  padding: 0 .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tem-alterne__signature {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: .3em .7em;
  font-size: .85em;
  padding-top: .9em;
  margin: 1em 0 0;
  text-align: right;
}

.tem-alterne__signature strong {
  color: #000;
  font-weight: 800;
}

.tem-alterne__signature span {
  color: #68747A;
}

.tem-alterne__rubrique {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 2.25em auto .4em;
}

.tem-alterne__rubrique p {
  margin: 0;
  color: #03808c;
  font: 900 1.2em/1.3 Montserrat, Arial, sans-serif;
}

.tem-alterne__messages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.35em;
  margin: 0 auto 0.6em;
  padding: .45em 1.45em;
  background: #fff;
}

@media (max-width:800px) {
  .tem-alterne__messages {
    gap: 0 1.1em;
    padding: .25em .4em;
  }
}

.tem-alterne__colonne {
  min-width: 0;
}

.tem-alterne__colonne:nth-child(2) {
  padding-left: 2.35em;
  border-left: 1px solid #e1ecee;
}

@media (max-width:800px) {
  .tem-alterne__colonne:nth-child(2) {
    padding-left: 1.1em;
  }
}

.tem-alterne__message {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  gap: .8em;
  padding: 1.45em 0 1.15em;
  border-bottom: 1px solid #dbe7e8;
}

@media (max-width:600px) {
  .tem-alterne__message {
    padding: 1.2em .2em;
    grid-template-columns: 1.95em minmax(0, 1fr);
    gap: .65em;
  }
}

.tem-alterne__message:last-child {
  border-bottom: 0;
}

.tem-alterne__message-marge {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: .05em;
}

.tem-alterne__message-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25em 1em;
  margin: 0 0 .65em;
}

.tem-alterne__message-head strong {
  font: 800 .88em/1.4 Montserrat, Arial, sans-serif;
  color: #172428;
}

.tem-alterne__message-head span {
  font: .75em/1.3 Roboto, Arial, sans-serif;
  color: #68747A;
}

.tem-alterne__message blockquote {
  margin: 0;
  padding: 0;
  font: italic 400 1em/1.3 Roboto, Arial, sans-serif;
  color: #30383D;
}

.tem-alterne__message .tem-courriers__ndlr {
  margin: .7em 0 0;
  font: 400 .8em/1.3 Roboto, Arial, sans-serif;
  color: #68747A;
}

.tem-alterne__vedette--maurice {
  grid-template-columns: minmax(0, 69%) minmax(0, 31%);
  margin-top: .6em;
  margin-bottom: 2.5em;
}

.tem-alterne__vedette--maurice .tem-alterne__papier {
  z-index: 1;
  padding-right: 3.05em;
  align-self: center;
  min-height: 12em;
}

.tem-alterne__vedette--maurice .tem-alterne__visuel {
  margin-left: -1em;
  padding-top: 1.25em;
  padding-bottom: 1.55em;
}

@media (max-width:600px) {
  .tem-alterne__vedette--maurice .tem-alterne__visuel {
    order: -1;
  }
}

.tem-alterne__vedette--maurice .tem-alterne__visuel img {
  max-height: 16em;
}

.tem-alterne__vedette--maurice .tem-alterne__avant {
  margin: 0 0 1.1em;
  font-size: 1.12em;
}

.tem-alterne__vedette--maurice .tem-alterne__avant strong {
  font-weight: 900;
  color: #03808c;
}

.tem-alterne__messages--suite {
  margin-top: 0;
}

@media (max-width:800px) {
  .tem-alterne__vedette--pascal, .tem-alterne__vedette--maurice {
    grid-template-columns: 31% 69%;
  }

  .tem-alterne__vedette--maurice {
    grid-template-columns: 69% 31%;
  }

  .tem-alterne__papier {
    padding: 1.4em 1.55em 1.2em;
  }

  .tem-alterne__vedette--pascal .tem-alterne__papier {
    padding-left: 2.55em;
  }

  .tem-alterne__vedette--maurice .tem-alterne__papier {
    padding-right: 2.5em;
  }
}

@media (max-width:600px) {
  .tem-alterne {
    padding: 2.8em .95em 3.2em;
  }

  .tem-alterne__entete h2 {
    font-size: 1.72em;
    line-height: 1.3;
  }

  .tem-alterne__vedette--pascal, .tem-alterne__vedette--maurice {
    display: flex;
    flex-direction: column;
    margin: 0 0 1.7em;
  }

  .tem-alterne__visuel {
    max-width: 100%;
    padding: 0;
    margin: 0 !important;
  }

  .tem-alterne__visuel img {
    width: 100%;
    height: 11em;
    min-height: 0;
    max-height: none;
    object-position: center 37%;
    border-radius: .55em .55em 0 0;
  }

  .tem-alterne__vedette--pascal .tem-alterne__papier, .tem-alterne__vedette--maurice .tem-alterne__papier {
    padding: 1.35em 1.2em 1.1em;
  }

  .tem-alterne__messages {
    display: block;
    padding: 0 .3em;
    margin-bottom: 1.6em;
  }

  .tem-alterne__colonne:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }

  .tem-alterne__colonne:first-child .tem-alterne__message:last-child {
    border-bottom: 1px solid #dbe7e8;
  }
}

/* 05 — Questions fréquentes */

.faq-obstacle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3em 1.3em 0;
  background: #ffffff;
  color: #30383D;
  font-family: Roboto, Arial, sans-serif;
}

@media (max-width: 700px) {
  .faq-obstacle {
    padding: 3.3em .85em 4em;
  }
}

.faq-obstacle .faq-obstacle__inner {
  max-width: 920px;
  margin: 0 auto;
}

.faq-obstacle .faq-obstacle__head {
  text-align: center;
  margin: 0 auto 2.25em;
}

@media (max-width: 46em) {
  .faq-obstacle .faq-obstacle__head {
    margin-bottom: 1.55em;
  }
}

.faq-obstacle .faq-obstacle__head h2 {
  margin: 0 0 .3em;
  color: #000;
  font: 900 2.75em/1.16 Montserrat, Arial, sans-serif;
  letter-spacing: -.025em;
}

@media (max-width: 700px) {
  .faq-obstacle .faq-obstacle__head h2 {
    font-size: 2em;
  }
}

.faq-obstacle .faq-obstacle__head h2 span {
  color: #03808c;
}

.faq-obstacle .faq-obstacle__head p {
  position: relative;
  margin: .35em auto 0;
  max-width: 720px;
  font: 400 1.15em/1.5 Roboto, Arial, sans-serif;
}

@media (max-width: 700px) {
  .faq-obstacle .faq-obstacle__head p {
    font-size: 1em;
  }
}

.faq-obstacle .faq-obstacle__list {
  display: grid;
  gap: .72em;
}

@media (max-width: 700px) {
  .faq-obstacle .faq-obstacle__list {
    gap: .55em;
  }
}

.faq-obstacle .faq-obstacle__item {
  min-width: 0;
  overflow: hidden;
  background: #f5fafb;
  border-radius: .75em;
  border: 1px solid #e1ebed;
  box-shadow: 0 .23em .7em rgba(27, 70, 73, .035);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-obstacle .faq-obstacle__item[open] {
  border-color: #b3d8dc;
  box-shadow: 0 .45em 1.4em rgba(27, 70, 73, .07);
}

.faq-obstacle .faq-obstacle__summary {
  /* Positionnement indépendant de Flexbox sur <summary> : Safari 13 / Firefox ancien */
  display: block;
  position: relative;
  min-height: 4.55em;
  padding: 1.5em 4.2em .95em 4.25em;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 700px) {
  .faq-obstacle .faq-obstacle__summary {
    padding: 1em 3.5em 1em 3.7em;
  }
}

.faq-obstacle .faq-obstacle__summary::-webkit-details-marker {
  display: none;
}

.faq-obstacle .faq-obstacle__summary::marker {
  content: "";
}

.faq-obstacle .faq-obstacle__summary:focus-visible {
  outline: 3px solid #03808c;
  outline-offset: -4px;
  border-radius: .75em;
}

.faq-obstacle .faq-obstacle__mark {
  position: absolute;
  left: 1.25em;
  top: 50%;
  display: block;
  width: 2em;
  height: 2em;
  transform: translateY(-50%);
  background: #e4f4f3;
  color: #03808c;
  border-radius: 50%;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.faq-obstacle .faq-obstacle__mark svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.18em;
  height: 1.18em;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-obstacle .faq-obstacle__item[open] .faq-obstacle__mark {
  background: #03808c;
  color: white;
  transform: translateY(-50%) rotate(90deg);
}

.faq-obstacle .faq-obstacle__question {
  display: block;
  color: #172428;
  font: 800 1.08em/1.42 Roboto, Arial, sans-serif;
  letter-spacing: -.01em;
}



.faq-obstacle .faq-obstacle__toggle {
  position: absolute;
  top: 50%;
  right: 1.25em;
  display: block;
  width: 1.85em;
  height: 1.85em;
  transform: translateY(-50%);
  border: 1px solid #bddfe0;
  border-radius: 50%;
  color: #03808c;
  transition: background .2s ease;
}

.faq-obstacle .faq-obstacle__toggle::before, .faq-obstacle .faq-obstacle__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .7em;
  height: 2px;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 3px;
}

.faq-obstacle .faq-obstacle__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .2s ease;
}

.faq-obstacle .faq-obstacle__item[open] .faq-obstacle__toggle {
  background: #e4f4f3;
}

.faq-obstacle .faq-obstacle__item[open] .faq-obstacle__toggle::after {
  transform: translate(-50%, -50%) rotate(0);
}

.faq-obstacle .faq-obstacle__answer {
  padding: 0 4.5em 1.45em 4.85em;
}

@media (max-width: 700px) {
  .faq-obstacle .faq-obstacle__answer {
    padding: 0 1.15em 1.3em 3.75em;
  }
}

.faq-obstacle .faq-obstacle__answer p {
  margin: .08em 0 0;
  font: 400 1em/1.6 Roboto, Arial, sans-serif;
  color: #30383D;
}

@media (max-width: 700px) {
  .faq-obstacle .faq-obstacle__answer p {
    font-size: .95em;
    line-height: 1.55;
  }
}

.faq-obstacle .faq-obstacle__answer strong {
  font-weight: 800;
  color: #172428;
}

@media (max-width: 700px) {
  .faq-obstacle .faq-obstacle__mark {
    left: .9em;
  }

  .faq-obstacle .faq-obstacle__toggle {
    right: .9em;
    width: 1.65em;
    height: 1.65em;
  }
}

.huissier {
  display: block;
  position: relative;
}

@media (max-width: 46em) {
  .huissier {
    padding-bottom: .4em;
  }
}

.conclusion-faq p {
  width: 90%;
  max-width: 650px;
  line-height: 1.3em;
  text-align: center;
  margin: 0 auto;
  padding: 50px 0 0;
}

@media (max-width: 46em) {
  .conclusion-faq p {
    padding-top: 1.5em;
  }
}

.conclusion-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 06 — Pied de page */

.site-footer {
  width: 100%;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #30383D;
  background: #ffffff;
}

.site-footer * {
  box-sizing: border-box;
}

.site-footer__inner {
  width: min(100% - 2.5em, 1020px);
  margin: 0 auto;
}

@media (max-width: 46em) {
  .site-footer__inner {
    width: calc(100% - 2em);
  }
}

.site-footer__contact {
  padding: 0 0 1.65em;
  background: #ffffff;
  text-align: center;
}

@media (max-width: 700px) {
  .site-footer__contact {
    padding: 2.8em 0 1.3em;
  }
}

.site-footer__contact h2 {
  margin: 0 0 0.2em;
  color: #000000;
  font: 900 2.15em/1.2 Montserrat, Arial, sans-serif;
  letter-spacing: -.025em;
}

@media (max-width: 700px) {
  .site-footer__contact h2 {
    font-size: 1.75em;
  }
}

.site-footer__contact h2 span {
  color: #03808c;
}

.site-footer__phone {
  margin: 0;
  font-size: 1.15em;
  line-height: 1.55;
  font-weight: 400;
}

@media (max-width: 700px) {
  .site-footer__phone {
    font-size: 1em;
  }
}

.site-footer__phone a {
  display: inline-flex;
  align-items: center;
  gap: .28em;
  margin-left: .25em;
  color: #03808c;
  font: 900 1.38em/1.15 Montserrat, Arial, sans-serif;
  letter-spacing: -.018em;
  text-decoration: none;
  vertical-align: -.12em;
}

@media (max-width: 700px) {
  .site-footer__phone a {
    display: flex;
    width: fit-content;
    margin: .06em auto 0;
    font-size: 1.38em;
  }
}

.site-footer__phone a span {
  text-decoration-color: rgba(3, 128, 140, .28);
  text-decoration-thickness: .075em;
  text-underline-offset: .2em;
}

.site-footer__phone a:hover span, .site-footer__phone a:focus-visible span {
  text-decoration-color: #03808c;
}

.site-footer__phone svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
}

.site-footer__hours {
  margin: 0 auto 0;
  max-width: 850px;
  color: #536467;
  font-size: .9em;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .site-footer__hours {
    font-size: .82em;
    line-height: 1.5;
    max-width: 24em;
  }
}

.site-footer__hours span {
  color: #68747A;
}

.site-footer__bottom {
  padding: 1.1em 0 2.35em;
  background: #ffffff;
}

@media (max-width: 700px) {
  .site-footer__bottom {
    padding: .9em 0 1.75em;
  }
}

.site-footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .55em 1em;
}

@media (max-width: 700px) {
  .site-footer__nav {
    gap: .6em 1.3em;
  }
}

.site-footer__nav a {
  color: #68747A;
  font-size: .76em;
  line-height: 1.45;
  font-weight: 400;
  text-decoration: none;
  transition: color .2s ease;
}

@media (max-width: 700px) {
  .site-footer__nav a {
    font-size: .74em;
  }
}

.site-footer__nav a:hover, .site-footer__nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .25em;
  color: #03808c;
}

/* 07 — Harmonie des grands titres */

h2.titre-section-unifie {
  font-size: 2.75em !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
}

@media (max-width: 720px) {
  h2.titre-section-unifie {
    font-size: 2em !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
  }
}

/* Chevron responsive : la flèche manuscrite reste réservée aux écrans larges. */

.fleche-chevron-mobile {
  display: none;
}

@media (max-width: 72em) {
  /* La flèche manuscrite placée sur le côté cède sa place à un chevron centré. */

  .hand-arrow, .hand-arrow2, .hand-arrow3, .hand-arrow4,
  .hand-arrow5, .hand-arrow6, .hand-arrow7 {
    display: none;
  }

  /* Chevron autonome, placé en dehors des titres et des cadres quand nécessaire. */

  img.fleche-chevron-mobile {
    display: block;
    position: static;
    width: 3.1em;
    height: auto;
    max-width: 100%;
    margin: 1.25em auto 1.65em;
    flex: none;
    align-self: center;
  }

  /* Respecter les chevrons originaux, y compris dans les offres et la FAQ. */

  img.red-chevron {
    display: block;
    height: auto;
    max-width: 100%;
  }
}

@media (max-width: 46em) {
  img.fleche-chevron-mobile {
    width: 2.7em;
    margin: 1.1em auto 1.45em;
  }
}

/* ========================================================================
   08 — ADAPTATIONS RESPONSIVE : ordinateur portable, tablette et mobile
   Ajoutées en fin de fichier pour conserver les styles de bureau existants.
   Valeurs dimensionnelles en em ; palette et typographies d'origine.
   ======================================================================== */

/* Sécurité commune : éléments multimédias adaptés à leur conteneur. */

main, .offre, .degrade, .degrade2, .partie1, .partie2, .partie3, .partie4, .partie5, .partie6, .partie7, .partie8, .partie9 {
  min-width: 0;
}

main img, .site-footer img {
  max-width: 100%;
  height: auto;
}

img, svg {
  vertical-align: middle;
}

.hero-visual {
  isolation: isolate;
}

@media (max-width: 90em) {
  .hero-visual {
    min-height: 34em;
  }
}

.hero-visual .nouveau {
  max-width: 48%;
}

@media (max-width: 90em) {
  .hero-visual .nouveau {
    width: 15.5em;
  }
}

.hero-visual .nouveau img {
  display: block;
  width: 100%;
  height: auto;
}

/* Les tableaux restent contenus dans la page : le mobile passe en 1 colonne. */

.partie6 .gains-tables {
  max-width: 100%;
}

@media (max-width: 46em) {
  .partie6 .gains-tables {
    width: 100%;
    overflow: visible;
  }
}

/* Titres et textes longs : retour naturel à la ligne. */

.titre-livre, .h2-description, .offre-modern .offre__intro, .offre-modern .alternative, .garantie-mix__signature, .tem-alterne__papier, .faq-obstacle .faq-obstacle__question {
  min-width: 0;
}

/* --------------------- PETITS ÉCRANS D'ORDINATEUR ------------------------ */

@media (max-width: 90em) {
  .hero h1 {
    font-size: 2.65em;
    line-height: 1.04;
  }

  .hero .badge {
    margin-bottom: 1.45em;
    font-size: 1em;
  }

  .hero .intro {
    margin: 1.9em 0 1em;
    font-size: 1.05em;
    line-height: 1.3;
  }

  .hero .description {
    font-size: 1em;
    line-height: 1.35;
  }

  .hero .scroll-arrow {
    width: 3.3em;
    margin: 1.6em 0 0 1.5em;
  }

  .hero .bilan-card {
    width: 12.5em;
    right: 4%;
    bottom: 1.8em;
    padding: .7em .65em;
  }

  .hero .bilan-card strong {
    font-size: 1.7em;
  }

  .hero .bilan-card span {
    font-size: 1.3em;
  }
}

@media (max-width: 72em) {
  .hero {
    min-height: 30em;
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  }

  .hero-visual {
    min-height: 30em;
  }

  .hero-copy {
    padding: 2.1em 2.4em 1.6em;
  }

  .hero h1 {
    font-size: 2.25em;
  }

  .hero .badge {
    margin-bottom: 1.1em;
  }

  .hero .intro {
    margin-top: 1.55em;
  }

  .hero .scroll-arrow {
    margin-top: 1.1em;
  }

  .hero .bilan-card {
    width: 11em;
  }

  .hero .bilan-card strong {
    font-size: 1.45em;
  }

  .hero .bilan-card span {
    font-size: 1.15em;
  }

  .hero-visual .nouveau {
    width: 13em;
  }

  h2.titre-section-unifie {
    font-size: 2.35em !important;
  }

  .partie1 h2, .partie2 h2, .partie3 h2, .partie4 h2, .partie5 h2, .partie6 h2, .partie7 h2, .partie8 h2, .partie9 h2 {
    padding-right: .65em;
    padding-left: .65em;
  }

  .huissier img.tampon {
    max-width: 7.5em;
  }

  .partie6 .phenomenal-ribbon {
    left: 1em;
    top: -1.6em;
    width: 10em;
    font-size: .85em;
  }
}

/* --------------------------- TABLETTE ----------------------------------- */

@media (max-width: 62em) {
  /* HERO — visuel pleine largeur, puis argumentaire centré (capture de référence). */

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #ffffff;
  }

  .hero-visual {
    order: 1;
    width: 100%;
    height: min(66vw, 36em);
    min-height: 0;
  }

  .hero-visual::after {
    display: none;
    width: 62%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 43%, #ffffff 100%);
  }

  .hero-person {
    left: -1em;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom left;
  }

  .hero-visual .nouveau {
    width: 17em;
    max-width: 46%;
  }

  .hero .bilan-card {
    width: 12.9em;
    right: 4.5%;
    padding: .72em .7em .62em;
    transform: rotate(-9deg);
  }

  .hero .bilan-card strong {
    font-size: 1.72em;
    line-height: 1;
    letter-spacing: -.025em;
    white-space: nowrap;
  }

  .hero .bilan-card span {
    font-size: 1.36em;
  }

  .hero .bilan-card small {
    font-size: .75em;
  }

  .hero-copy {
    order: 2;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 1.2em 1.5em 2em;
    background: #ffffff;
    text-align: center;
  }

  .hero .copy-inner {
    width: 100%;
    max-width: 44em;
    margin: 0 auto;
  }

  .hero .badge {
    display: inline-block;
    margin: 0 0 1.45em;
    padding: .38em 1.35em .4em;
    font-size: .96em;
    line-height: 1;
  }

  .hero h1 {
    max-width: 100%;
    margin: 0 auto;
    font-size: clamp(2.4em, 7.5vw, 3.45em);
    line-height: 1.02;
    letter-spacing: -.03em;
    text-align: center;
  }

  /* Deux lignes turquoise comme sur la maquette : « jouez contre » / « la logique ! ». */

  .hero h1 em {
    max-width: 9.8em;
    margin: .13em auto 0;
  }

  .hero .intro, .hero .description {
    max-width: 37em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero .intro {
    margin-top: 0;
    margin-bottom: 1.2em;
    font-size: 1.05em;
    line-height: 1.28;
  }

  .hero .description {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.02em;
    line-height: 1.45;
  }

  /* Chevron vert conserve et centre sous l'introduction en mode tablette. */

  .hero .scroll-arrow {
    display: block;
    width: 4em;
    margin: 1.5em auto 0;
  }

  .hero .scroll-arrow img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Sommaire : une carte par rangée plutôt que deux colonnes serrées. */

  .sommaire-bento .bento-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: .85em;
    max-width: 42em;
    margin-inline: auto;
  }

  .sommaire-bento .bento-secret {
    min-height: 0;
  }

  .sommaire-bento .bento-secret--image, .sommaire-bento .bento-secret--wide.bento-secret--image {
    padding-right: 12em;
    padding-bottom: 1em;
    min-height: 10.5em;
  }

  .sommaire-bento .bento-secret--image .bento-art, .sommaire-bento .bento-secret--wide.bento-secret--image .bento-art {
    width: 9.5em;
    height: 7.3em;
    right: .9em;
    top: 1em;
    bottom: auto;
  }

  .sommaire-bento .bento-grid > .bento-secret:first-child {
    padding-bottom: 1em;
  }

  .sommaire-bento .bento-grid > .bento-secret:first-child .bento-art {
    width: 10.8em;
    height: 8.3em;
  }

  .partie4 .offre-modern, .partie9 .offre-modern {
    padding-top: 0;
  }

  .article-card, .article-card2, .article-card-blc {
    max-width: 44em;
  }

  /* Flèches manuscrites : version mobile centrée insérée dans le HTML. */

  .hand-arrow, .hand-arrow2, .hand-arrow3, .hand-arrow4, .hand-arrow5, .hand-arrow6, .hand-arrow7 {
    display: none;
  }

  .tem-alterne .huissier img.tampon {
    max-width: 7.5em;
  }
}

/* ------------------- TÉLÉPHONE / PETITE TABLETTE ------------------------ */

@media (max-width: 46em) {
  /* Même composition sur téléphone, avec proportions compactes. */

  .hero-visual {
    height: max(17.5em, 65vw);
    min-height: 0;
    background-position: left center;
  }

  .hero-visual::after {
    width: 60%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, .28) 40%, #ffffff 100%);
  }

  .hero-person {
    left: -.85em;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
  }

  .hero-visual .nouveau {
    width: clamp(8em, 37vw, 16em);
    max-width: 48%;
  }

  .hero .bilan-card {
    width: clamp(9em, 28vw, 12.8em);
    right: 4%;
    bottom: 1em;
    padding: .68em .58em .56em;
  }

  .hero .bilan-card strong {
    font-size: clamp(1.2em, 3.7vw, 1.72em);
    white-space: nowrap;
  }

  .hero .bilan-card span {
    font-size: clamp(1.05em, 2.8vw, 1.32em);
  }

  .hero .bilan-card small {
    font-size: .7em;
  }

  .hero-copy {
    padding: 1.25em 1.2em 1.9em;
  }

  .hero .copy-inner {
    width: 100%;
    max-width: 42em;
  }

  .hero .badge {
    font-size: .93em;
    margin-bottom: 1.4em;
    padding: .42em 1.25em;
  }

  .hero h1 {
    font-size: clamp(2.12em, 7.2vw, 3.25em);
    line-height: 1.02;
  }

  .hero h1 em {
    margin-top: .15em;
  }

  .hero .intro {
    font-size: 1.02em;
    line-height: 1.35;
    margin: 1.45em auto 1.2em;
  }

  .hero .description {
    font-size: 1em;
    line-height: 1.45;
  }

  /* Chevron vert centre sur telephone et petite tablette. */

  .hero .scroll-arrow {
    display: block;
    width: 3.3em;
    margin: 1.2em auto 0;
  }

  .titre-livre {
    font-size: 1.6em;
    line-height: 1.3;
    margin: 1.5em 0 .3em;
    padding: 0 .75em;
  }

  .titre-livre br {
    display: none;
  }

  h2.titre-section-unifie, .sommaire-bento .bento-intro h2.titre-section-unifie, .offerts-moderne__intro h2.titre-section-unifie, .tem-alterne__entete h2.titre-section-unifie, .faq-obstacle .faq-obstacle__head h2.titre-section-unifie {
    font-size: 1.85em !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
  }

  .partie1 h2, .partie2 h2, .partie3 h2, .partie4 h2, .partie5 h2, .partie6 h2, .partie7 h2, .partie8 h2, .partie9 h2 {
    margin-top: 1.1em;
    padding-inline: .65em;
  }

  h2.titre-section-unifie br {
    display: none;
  }

  .h2-description {
    font-size: 1.08em;
    line-height: 1.42;
    margin: .9em auto 0;
  }

  .article-card, .article-card2, .article-card-blc, .partie6 .article-card-blc {
    width: calc(100% - 1.6em);
    max-width: 44em;
    margin-inline: auto;
    padding: 1.45em 1.15em 1.35em;
  }

  .article-card, .article-card2 {
    margin-top: 1.75em;
  }

  .article-card p, .article-card-blc p, .article-card2 p {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 1.05em;
  }

  .jourdejuin {
    font-size: 1.2em !important;
  }

  .legendephoto p {
    font-size: .82em !important;
    line-height: 1.4;
  }

  .article-card-blc div:not(.gains-tables):not(.gains-tables__grid) {
    max-width: 100%;
  }

  .partie2 .article-card-blc div.illus02 {
    width: min(100%, 14em);
  }

  .encartbleu, .encartbleu2 {
    padding: 1em;
  }

  /* La variante manuscrite est remplacée ici par le chevron mobile centré. */

  .hand-arrow, .hand-arrow2, .hand-arrow3, .hand-arrow4, .hand-arrow5, .hand-arrow6, .hand-arrow7 {
    display: none;
  }

  /* L'offre et ses rappels conservent la même présentation verticale. */

  .offre-modern {
    width: 100%;
    padding: 1.2em .8em 2.1em;
    font-size: 1em;
  }

  .offre-modern .offre__header h2 {
    font-size: 1.55em;
    line-height: 1.22;
  }

  .offre-modern .offre__intro {
    align-items: flex-start;
    gap: .55em;
  }

  .offre-modern .offre__intro p {
    line-height: 1.3;
  }

  .offre-modern .offre__accent {
    font-size: 1.3em;
    white-space: normal;
  }

  .offre-modern .offre__check {
    width: 2.7em;
    height: 2.7em;
    flex: 0 0 2.7em;
  }

  .offre-modern .offre__check-symbole img {
    width: 1.5em !important;
  }

  .offre-modern .desktop-only {
    display: none;
  }

  .offre-modern .avantages, .offre-modern .prix {
    padding: 1.1em;
  }

  .offre-modern .avantage {
    gap: .8em;
  }

  .offre-modern .avantage__icone {
    flex: 0 0 3.1em;
    width: 3.1em;
    height: 3.1em;
  }

  .offre-modern .avantage h3 {
    font-size: 1.03em;
    line-height: 1.32;
    margin-top: 0;
  }

  .offre-modern .avantage p {
    font-size: .94em;
    line-height: 1.4;
  }

  .offre-modern .sans-risque {
    font-size: .83em;
    white-space: normal;
  }

  .offre-modern .cadeaux {
    padding: .8em;
  }

  .offre-modern .cadeau {
    align-items: flex-start;
    gap: .65em;
  }

  .offre-modern .cadeau__miniature--vertical, .offre-modern .cadeau__miniature--horizontal {
    width: 3.8em;
  }

  .offre-modern .cadeau p {
    font-size: .91em;
  }

  .sommaire-bento {
    padding: 2.4em .85em .75em;
  }

  .sommaire-bento .bento-intro {
    margin-bottom: 1.5em;
  }

  .sommaire-bento .bento-subtitle {
    font-size: 1.02em;
    line-height: 1.45;
  }

  .sommaire-bento .bento-secret {
    border-radius: .8em;
    padding: 1.2em 1.1em .8em;
  }

  .sommaire-bento .bento-secret--image, .sommaire-bento .bento-secret--wide.bento-secret--image {
    padding-bottom: 8.5em;
    padding-right: 1.1em;
  }

  .sommaire-bento .bento-secret--image .bento-art, .sommaire-bento .bento-secret--wide.bento-secret--image .bento-art, .sommaire-bento .bento-grid > .bento-secret:first-child .bento-art {
    top: auto;
    right: 1.1em;
    bottom: .9em;
    width: 9.8em;
    height: 6.8em;
  }

  .sommaire-bento .bento-grid > .bento-secret:first-child {
    padding-bottom: 8.5em;
  }

  .sommaire-bento .bento-digit {
    font-size: 2.2em;
  }

  /* 3 tableaux successifs sur mobile, lisibles sans zoom ni balayage. */

  .partie6 .phenomenal-heading {
    padding: 3.2em .9em 0;
    margin-top: 1.1em;
  }

  .partie6 .phenomenal-ribbon {
    top: 0;
    left: 1em;
    width: 10em;
    font-size: .83em;
  }

  .cahiers-avantage2 .cahiers-avantage__texte {
    padding: 1.2em 0;
  }

  .cahiers-avantage__media {
    height: 11.5em;
  }

  .offerts-moderne__intro {
    margin-bottom: 1.35em;
  }

  .offerts-moderne__visuel {
    height: 15em;
  }

  .offerts-moderne__contenu {
    padding: 1.25em 1.15em;
  }

  .partie8--certificat {
    padding: 0 .65em 2em;
  }

  .garantie-mix__interieur {
    padding: 1.25em .85em 1em;
  }

  .partie8--certificat .garantie-mix h3 {
    font-size: 1.45em;
  }

  .garantie-mix__ruban {
    white-space: normal;
    max-width: 100%;
    font-size: 1.05em;
    padding: .6em 1.15em;
  }

  .garantie-mix__contenu {
    font-size: .96em;
  }

  .garantie-mix__intro, .garantie-mix__conclusion p {
    text-indent: 0;
  }

  .garantie-mix__engagements li {
    grid-template-columns: 1.7em minmax(0, 1fr);
    gap: .5em;
    padding: .75em .55em;
  }

  .garantie-mix__signature {
    flex: 1;
    font-size: 1em;
  }

  .tem-alterne {
    padding: 2.5em .9em 2.6em;
  }

  .tem-alterne__entete h2 {
    font-size: 1.85em;
  }

  .tem-alterne__vedette--pascal, .tem-alterne__vedette--maurice {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .tem-alterne__visuel {
    width: 100%;
    margin: 0 !important;
    padding: 0;
  }

  .tem-alterne__visuel img {
    width: 100%;
    height: 12em;
    max-height: 12em;
    border-radius: .7em .7em 0 0;
  }

  .tem-alterne__vedette--maurice .tem-alterne__visuel {
    order: -1;
  }

  .tem-alterne__vedette--pascal .tem-alterne__papier, .tem-alterne__vedette--maurice .tem-alterne__papier {
    width: 100%;
    padding: 1.25em 1.1em;
  }

  .tem-alterne__messages {
    display: block;
    padding: 0;
  }

  .tem-alterne__colonne:nth-child(2) {
    border: 0;
    padding-left: 0;
  }

  .tem-alterne__colonne:first-child .tem-alterne__message:last-child {
    border-bottom: 1px solid #dbe7e8;
  }

  .tem-alterne__message {
    gap: .55em;
    padding: 1.15em .1em;
  }

  .huissier img.tampon {
    position: absolute;
    display: block;
    width: 6.5em;
    max-width: 35%;
    height: auto;
    margin: .75em 0 0 auto;
  }

  .faq-obstacle {
    padding: 2.6em .8em 2.7em;
  }

  .faq-obstacle .faq-obstacle__summary {
    padding: .85em 3em .85em 3.3em;
  }

  .faq-obstacle .faq-obstacle__mark {
    left: .7em;
  }

  .faq-obstacle .faq-obstacle__toggle {
    right: .7em;
  }

  .faq-obstacle .faq-obstacle__question {
    font-size: 1.1em;
    line-height: 1.38;
  }

  .faq-obstacle .faq-obstacle__answer {
    padding: 0 1em 1.15em 3.5em;
  }

  .site-footer__contact h2 {
    font-size: 1.7em;
  }

  .site-footer__phone a {
    font-size: 1.25em;
  }
}

/* ------------------------- SMARTPHONES ÉTROITS -------------------------- */

@media (max-width: 30em) {
  /* Lisibilité du hero jusqu'aux écrans de 320px. */

  .hero-visual {
    height: max(16.8em, 68vw);
    min-height: 0;
  }

  .hero-person {
    left: -.75em;
    height: 100%;
    max-width: none;
  }

  .hero-visual .nouveau {
    width: 37vw;
    max-width: 48%;
  }

  .hero .bilan-card {
    width: 9.15em;
    right: 3%;
    bottom: .85em;
    padding: .61em .35em .5em;
    transform: rotate(-8deg);
  }

  .hero .bilan-card strong {
    font-size: 1.18em;
  }

  .hero .bilan-card span {
    font-size: 1.02em;
  }

  .hero .bilan-card small {
    font-size: .66em;
  }

  .hero-copy {
    padding: 1.2em 1em 1.6em;
  }

  .hero .badge {
    font-size: .86em;
    margin-bottom: 1.4em;
  }

  .hero h1 {
    font-size: clamp(1.87em, 7.9vw, 2.35em);
    line-height: 1.04;
  }

  .hero .intro {
    margin: 1.35em auto 1.05em;
    font-size: 1em;
  }

  .hero .description {
    font-size: .98em;
  }

  .titre-livre {
    font-size: 1.43em;
  }

  h2.titre-section-unifie, .sommaire-bento .bento-intro h2.titre-section-unifie, .offerts-moderne__intro h2.titre-section-unifie, .tem-alterne__entete h2.titre-section-unifie, .faq-obstacle .faq-obstacle__head h2.titre-section-unifie {
    font-size: 1.6em !important;
  }

  .partie4 h2, .partie9 h2 {
    font-size: 1.55em;
  }

  .article-card, .article-card2, .article-card-blc, .partie6 .article-card-blc {
    width: calc(100% - 1.2em);
    padding: 1.25em .95em;
  }

  .article-card h4, .article-card-blc h4, .article-card2 h4 {
    font-size: 1.16em !important;
  }

  .offre-modern {
    padding: 1em .55em 2em;
  }

  .offre-modern .offre__header h2 {
    font-size: 1.4em;
  }

  .offre-modern .avantages, .offre-modern .prix {
    padding: .85em;
  }

  .offre-modern .avantage {
    gap: .65em;
  }

  .offre-modern .avantage__icone {
    flex-basis: 2.65em;
    width: 2.65em;
    height: 2.65em;
  }

  .offre-modern .cadeau__miniature--vertical, .offre-modern .cadeau__miniature--horizontal {
    width: 3.2em;
  }

  .offre-modern .offre__cta {
    font-size: 1.15em;
  }

  .offre-modern .paiement__alternatives {
    padding: .95em .7em;
  }

  .garantie-mix__interieur {
    padding: 1em .6em;
  }

  .garantie-mix__ruban {
    font-size: 1.02em;
  }

  .garantie-mix__signature {
    font-size: 1em;
  }

  .tem-alterne__papier blockquote {
    font-size: .92em;
  }

  .faq-obstacle .faq-obstacle__question {
    font-size: 1.1em;
  }
}

/* Respect du réglage d'accessibilité de réduction des animations. */

@media (prefers-reduced-motion: reduce) {
  .hero .bilan-card, .offre-modern .offre__cta {
    transition: none;
  }

  .hero .bilan-card:hover, .hero .bilan-card:focus-visible {
    transform: rotate(-9deg);
  }
}

/* Correction du sommaire illustré sur mobile : visuels dans le flux de lecture. */

@media (max-width: 45em) {
  /* Les 4 cartes illustrées : numéro, texte, illustration, numéro de page. */

  .sommaire-bento .bento-grid > .bento-secret.bento-secret--image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: start;
    min-height: 0;
    padding: 1.2em 1.1em .9em !important;
    row-gap: 0;
  }

  .sommaire-bento .bento-grid > .bento-secret.bento-secret--image .bento-num {
    grid-column: 1;
    grid-row: 1 !important;
  }

  .sommaire-bento .bento-grid > .bento-secret.bento-secret--image .bento-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0;
  }

  .sommaire-bento .bento-grid > .bento-secret.bento-secret--image footer {
    grid-column: 1 !important;
    grid-row: 4 !important;
    align-self: start;
    width: 100%;
    margin: 0;
    padding: .7em 0 0;
    border-top: 1px solid #e6eff0;
  }
}

/* Sommaire — illustrations panoramiques sur mobile (01, 05, 12 et 19).
   La hauteur est identique à la version précédente : 7em.
   L'illustration occupe toute la largeur de la carte, sans masque de dégradé. */

.sommaire-bento .bento-art picture {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 45em) {
  .sommaire-bento .bento-grid > .bento-secret.bento-secret--image .bento-art {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    width: calc(100% + 2.2em);
    height: 7em;
    min-height: 0;
    max-width: none;
    justify-self: stretch;
    margin: .65em -1.1em .8em;
    border-radius: 0;
    opacity: 1;
    overflow: hidden;
  }

  .sommaire-bento .bento-grid > .bento-secret.bento-secret--image .bento-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.schema {
  padding: 0 0 10px;
}

.schema2 {
  padding: 0;
  margin-bottom: 20px;
}

/* ========================================================================
   GRILLE TYPOGRAPHIQUE VALIDÉE — 15/10/2026
   Chapeaux / introductions : 1.3em
   Texte courant / complémentaire : 1em
   Texte secondaire / petites mentions / tableaux de gains : 0.8em
   La section .offre-modern a une base de police de 0.91em sur ordinateur :
   les tailles y sont compensées pour correspondre aux niveaux du body.
   Sur mobile, cette section revient à une base de 1em.
   Titres, chiffres mis en avant, CTA, fonds, couleurs et bordures conservés.
   ======================================================================== */

/* 1 — Chapeaux et introductions */

.hero .intro, .h2-description, .sommaire-bento .bento-subtitle, .offerts-moderne__intro > p:last-child, .tem-alterne__chapeau, .faq-obstacle .faq-obstacle__head p {
  font-size: 1.3em;
  line-height: 1.3;
}

/* 1.3 / 0.91 : échelle identique dans le bloc de l’offre. */

.offre-modern .offre__intro p {
  margin: 0.15em 0 0;
  font-size: 1.4em;
  line-height: 1.15;
}

@media (max-width: 62em) {
  .offre-modern .offre__intro p {
    font-size: 1.25em;
  }
}

@media (max-width: 46em) {
  .offre-modern .offre__intro p {
    font-size: 1.05em;
    line-height: 1.3;
  }

  /* « OUI » garde la taille du chapeau. Les 5 avantages sont davantage mis en valeur. */
  .offre-modern .offre__intro p > strong {
    font-size: 1em;
  }

  .offre-modern .offre__accent {
    font-size: 1.3em;
  }
}

@media (max-width: 30em) {
  /* À cette largeur, l'offre revient à une base typographique de 1em. */
  .offre-modern .offre__intro p {
    font-size: 1.05em;
  }
}

/* 2 — Texte courant et complémentaire */

.hero .description, .article-card p, .article-card-blc p, .article-card2 p, .sommaire-bento .bento-secret p, .avantages-cahiers .cahiers-avantage__texte p, .avantages-cahiers .cahiers-avantage__texte li, .garantie-mix__contenu, .offerts-moderne__description, .offerts-moderne__rappel, .offerts-moderne__rappel2, .tem-alterne__papier blockquote, .tem-alterne__message blockquote, .faq-obstacle .faq-obstacle__answer p, .conclusion-faq p, .huissier p {
  font-size: 1em;
  line-height: 1.3;
}

/* 1 / 0.91 : les paragraphes de l’offre restent à la taille courante. */

.offre-modern .avantage p, .offre-modern .cadeau p, .offre-modern .prix__explication, .offre-modern .paiement__intro, .offre-modern .paiement__alternatives > p, .offre-modern .alternative strong {
  font-size: 1.099em;
  line-height: 1.3;
}

@media (max-width: 46em) {
  .offre-modern .avantage p, .offre-modern .cadeau p, .offre-modern .prix__explication, .offre-modern .paiement__intro, .offre-modern .paiement__alternatives > p, .offre-modern .alternative strong {
    font-size: 1em;
  }
}

/* 3 — Petites mentions, légendes, informations secondaires */

.article-card .legendephoto p, .article-card2 .legendephoto p {
  font-size: 0.8em !important;
  line-height: 1.3 !important;
}

.offerts-moderne__valeur, .tem-alterne__signature, .tem-alterne__message-head span, .tem-alterne__message .tem-courriers__ndlr, .site-footer__hours, .site-footer__nav a {
  font-size: 0.8em;
  line-height: 1.3;
}

/* 0.8 / 0.91 : mêmes proportions dans l’offre sur ordinateur. */

.offre-modern .sans-risque, .offre-modern .cadeau small, .offre-modern .alternative small, .offre-modern .offre__conditions {
  font-size: 0.879em;
  line-height: 1.3;
}

@media (max-width: 46em) {
  .offre-modern .sans-risque, .offre-modern .cadeau small, .offre-modern .alternative small, .offre-modern .offre__conditions {
    font-size: 0.8em;
  }
}

/* Tableaux de gains : 0.8em dans toutes les mises en page. */

.partie6 .gains-tables__table {
  font-size: 0.8em;
  line-height: 1.3;
}

/* Mobile : la base .offre-modern est 1em, comme le body. */

/* Section anniversaire CDCH — après les témoignages */

.cdch30 {
  background: #f5fafb;
  padding: 35px 1.3em 2.4em;
  color: #30383D;
  position: relative;
}

@media (max-width:720px) {
  .cdch30 {
    padding: 3em 1em 2.2em;
  }
}

.cdch30__inner {
  max-width: 1000px;
  margin: auto;
}

/* CDCH 30 ans : logo, dates, puis titre centrés sur un axe commun. */

.cdch30__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
  margin: 0 auto 1.4em;
  text-align: center;
}

@media (max-width:720px) {
  .cdch30__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
}

.cdch30__emblem {
  position: static;
  transform: none;
  width: 12em;
  max-width: 100%;
  margin: 0 auto .65em;
  flex: none;
}

@media (max-width:720px) {
  .cdch30__emblem {
    width: 10em;
    margin-bottom: .65em;
  }
}

.cdch30__emblem img {
  display: block;
  width: 100%;
  height: auto;
}

.cdch30__heading {
  width: 100%;
  max-width: 1000px;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.cdch30 h2 {
  margin: 0;
  font: 900 2.75em/1.25 Montserrat, Arial, sans-serif;
  color: #000;
  letter-spacing: -.025em;
  text-align: center;
}

@media (max-width:720px) {
  .cdch30 h2 {
    font-size: 1.85em;
  }
}

/* Chapeau : taille cohérente avec les autres sections, bleu CDCH et centrage garanti. */

.cdch30 .cdch30__lead {
  display: block;
  width: 100%;
  max-width: 750px;
  margin: 0 auto 25px;
  text-align: center;
  color: #30383D;
  font-family: Roboto, Arial, sans-serif;
  font-size: 1.3em;
  line-height: 1.3;
  font-weight: 400;
}

@media (max-width:720px) {
  .cdch30 .cdch30__lead {
    max-width: 700px;
    text-align: center;
  }
}

.cdch30__prose, .cdch30__chapter, .cdch30__closing {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.cdch30__prose {
  padding: 0 58px;
}

.cdch30 p {
  font-size: 1em;
  line-height: 1.3;
  margin: 0 0 1.1em;
}

.cdch30 h3 {
  font: 900 1.5em/1.3 Montserrat, Arial, sans-serif;
  letter-spacing: -.02em;
  color: #000000;
  text-align: center;
  margin: 25px 0 .75em;
}

@media (max-width:720px) {
  .cdch30 h3 {
    font-size: 1.3em;
  }
}

.cdch30__chapter {
  margin-top: 2.5em;
  padding: 1.5em 2em;
  background: #fff;
  border: 1px solid #dce9eb;
  border-radius: 1em;
}

@media (max-width:720px) {
  .cdch30__chapter {
    padding: 1.2em;
  }
}

.cdch30__chapter h3 {
  margin-top: .3em;
}

.cdch30__chart {
  background: #f5fafb;
  padding: 1.3em;
  border-radius: .8em;
  margin: 1.7em 0;
}

.cdch30__bar {
  display: grid;
  grid-template-columns: 5.5em 1fr 3.5em;
  align-items: center;
  gap: .8em;
  margin: .7em 0;
  font-size: .9em;
}

@media (max-width:720px) {
  .cdch30__bar {
    grid-template-columns: 4.5em 1fr 3em;
    gap: .45em;
  }
}

.cdch30__bar > div {
  height: .8em;
  border-radius: 2em;
  background: #dce9eb;
  overflow: hidden;
}

.cdch30__bar i {
  display: block;
  height: 100%;
  background: #03808c;
  border-radius: 2em;
}

.cdch30__bar:first-child i {
  background: #20c75b;
}

.cdch30__bar strong {
  text-align: right;
  font-weight: 800;
  color: #03808c;
}

.cdch30__chart small {
  display: block;
  margin-top: 1em;
  color: #536467;
  font-size: .8em;
}

.cdch30__closing {
  padding-left: 58px;
  padding-right: 58px;
  padding-top: 2.3em;
}

.cdch30__closing h3 {
  margin-top: .6em;
  color: #000;
}

@media (max-width:720px) {
  .cdch30__prose, .cdch30__closing {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 30 ans CDCH — Tirage limité / essai libre, même fond tramé que l'anniversaire */

.urgence-stock {
  background: #f5fafb;
  color: #30383D;
  padding: 0 1.3em 2.6em;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

@media (max-width: 46em) {
  .urgence-stock {
    padding: 0 1em 2.2em;
  }
}

.urgence-stock__inner {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding-top: 0.2em;
  text-align: center;
}

.urgence-stock h2.titre-section-unifie {
  margin: 0 auto;
  max-width: 1000px;
  font: 900 2.75em/1.25 Montserrat, Arial, sans-serif;
  color: #000;
  letter-spacing: -.025em;
  text-align: center;
}

@media (max-width: 46em) {
  .urgence-stock h2.titre-section-unifie {
    font-size: 1.85em;
  }
}

.urgence-stock__contenu {
  max-width: 800px;
  margin: 2.1em auto 0;
  padding-left: 58px;
  padding-right: 58px;
  text-align: left;
}

@media (max-width: 46em) {
  .urgence-stock__contenu {
    margin-top: 1.7em;
    padding-left: 0;
    padding-right: 0;
  }
}

.urgence-stock p {
  margin: 0 0 1.15em;
  font-size: 1em;
  line-height: 1.3;
  color: #30383D;
}

.urgence-stock .urgence-stock__accent {
  margin: 1.4em auto;
  max-width: 24em;
  color: #03808c;
  font-size: 1em;
  line-height: 1.3;
  text-align: center;
}

.urgence-stock__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 0 auto 25px;
  padding: .8em 1.15em;
  border: 2px solid #03808c;
  border-radius: 2em;
  color: #ffffff;
  background: #03808c;
  font-size: 1em;
  line-height: 1.3;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  box-shadow: 0 9px 19px rgba(3, 128, 140, .2);
}

@media (max-width: 46em) {
  .urgence-stock__cta {
    width: 100%;
    max-width: 26em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .urgence-stock__cta {
    transition: none;
  }
}

.urgence-stock__cta:hover,
.urgence-stock__cta:focus-visible {
  color: #03808c;
  background: #f5fafb;
}

.urgence-stock__cta:focus-visible {
  outline: 2px solid #f5fafb;
  outline-offset: 3px;
}

.urgence-stock__chevron {
  display: block;
  width: 3.75em;
  margin: 1.45em auto 0;
}

.box-cta-pquoi {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Navigation flottante — visible après le titre « Obstacle » */

.outils-flottants {
  position: fixed;
  right: calc(1.4em + env(safe-area-inset-right, 0px));
  bottom: calc(1.4em + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.6em);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

@media (max-width: 46em) {
  .outils-flottants {
    right: calc(.85em + env(safe-area-inset-right, 0px));
    bottom: calc(.85em + env(safe-area-inset-bottom, 0px));
    gap: .55em;
  }
}

.outils-flottants.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.outils-flottants__haut {
  display: grid;
  place-items: center;
  width: 3.15em;
  height: 3.15em;
  border: 1px solid #dce9eb;
  border-radius: 50%;
  background: #ffffff;
  color: #03808c;
  box-shadow: 0 .3em 1em rgba(29, 73, 79, .16);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

@media (max-width: 46em) {
  .outils-flottants__haut {
    width: 2.8em;
    height: 2.8em;
  }
}

.outils-flottants__haut svg {
  display: block;
  width: 1.45em;
  height: 1.45em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outils-flottants__haut:hover,
.outils-flottants__haut:focus-visible {
  transform: translateY(-2px);
  background: #f5fafb;
}

.outils-flottants__commande {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  min-width: 0;
  min-height: 56px;
  max-width: calc(100vw - 2em);
  padding: 9px 39px 9px 18px;
  border: 0;
  border-radius: 999px;
  background: #1d90a0;
  color: #ffffff;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.12;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 .45em 1.15em rgba(29, 73, 79, .18);
  transition: transform .2s ease, filter .2s ease;
}

@media (max-width: 46em) {
  .outils-flottants__commande {
    width: 170px;
    min-width: 0;
    min-height: 54px;
    padding: 9px 39px 9px 11px;
    font-size: .8em;
  }
}

.outils-flottants__commande-texte {
  display: block;
  letter-spacing: 0;
}

.outils-flottants__commande-badge {
  position: absolute;
  right: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #86d400;
  box-shadow: 0 .15em .45em rgba(0, 0, 0, .14);
}

@media (max-width: 46em) {
  .outils-flottants__commande-badge {
    width: 25px;
    height: 25px;
    right: 9px;
  }
}

.outils-flottants__commande-badge svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 46em) {
  .outils-flottants__commande-badge svg {
    width: 14px;
    height: 14px;
  }
}

.outils-flottants__commande:hover,
.outils-flottants__commande:focus-visible {
  filter: brightness(.96);
  transform: translateY(-2px);
}

.outils-flottants a:focus-visible {
  outline: 3px solid #03808c;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .outils-flottants,
  .outils-flottants__haut,
  .outils-flottants__commande {
    transition: none;
  }
}

.lien {
  color: #0000EE !important;
}

.lien:hover {
  color: #0000EE !important;
}

.barre {
  text-decoration: line-through;
}

/* ========================================================================
   RÉGLAGES MANUELS RESPONSIVE — FLÈCHES ET ESPACES (TABLETTE + MOBILE)
   Le grand écran (> 72em / 1152px) conserve 100 % de ses règles précédentes.
   
   Pour décaler UNE flèche : modifie uniquement ses deux valeurs ci-dessous.
   marge haute  = distance avec le texte juste au-dessus
   marge basse  = distance avec le bloc juste en dessous
   
   Pour rapprocher le bloc suivant, modifie l'autre section de réglages
   « ESPACE AU DÉBUT DES BLOCS SUIVANTS », sous les flèches.
   ======================================================================== */

@media (max-width: 72em) {
  /* Neutraliser les espacements cachés par les styles inline des images.
     Les espacements deviennent exclusivement ceux du panneau ci-dessous. */

  img.fleche-calage {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-self: center;
    height: auto;
  }

  /* F01 — Chevron vert, fin de la présentation */

  /* F02 — Avant la première carte des 5 avantages */

  img.fleche-calage-02 {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    display: none !important;
  }

  /* F03 — Entre les 5 avantages et le prix (offre du haut) */

  img.fleche-calage-03 {
    margin-top: .5em !important;
    margin-bottom: .5em !important;
  }

  /* F04 — Fin de la lettre, avant le titre Obstacle */

  img.fleche-calage-04 {
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
  }

  /* F05 — Sous le titre Rapports + élevés */

  img.fleche-calage-05 {
    margin-top: 1em !important;
    margin-bottom: 0 !important;
  }

  /* F06 — Après le texte Rapports + élevés */

  img.fleche-calage-06 {
    margin-top: 2em !important;
    margin-bottom: 0 !important;
  }

  /* F07 — Entre avantages et prix (deuxième offre) */

  img.fleche-calage-07 {
    margin-top: .5em !important;
    margin-bottom: .5em !important;
  }

  /* F08 — Sous le chapeau du sommaire */

  img.fleche-calage-08 {
    margin-top: .65em !important;
    margin-bottom: .5em !important;
  }

  /* F09 — En bas du sommaire, avant le bilan */

  img.fleche-calage-09 {
    margin-top: 1.5em !important;
    margin-bottom: 0 !important;
  }

  /* F10 — Sous le titre Dans les 19 Cahiers Secrets */

  img.fleche-calage-10 {
    margin-top: 1em !important;
    margin-bottom: 0.2em !important;
  }

  /* F11 — Après les avantages des cahiers, avant les cadeaux */

  /* F12 — Au début de la garantie */

  /* F13 — Sous le titre du rappel de l’offre */

  img.fleche-calage-13 {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    display: none !important;
  }

  /* F14 — Entre les avantages et le prix du rappel de l’offre */

  img.fleche-calage-14 {
    margin-top: .5em !important;
    margin-bottom: .5em !important;
  }

  /* F15 — Sous le chapeau des témoignages */

  img.fleche-calage-15 {
    margin-top: .65em !important;
    margin-bottom: .5em !important;
  }

  /* F16 — Après les 30 ans du CDCH, avant la rupture de stock */

  img.fleche-calage-16 {
    margin-top: 1.5em !important;
    margin-bottom: 0 !important;
  }

  /* F17 — Fin de la section rupture de stock, avant la FAQ */

  img.fleche-calage-17 {
    margin-top: 2em !important;
    margin-bottom: 0em !important;
  }

  /* F18 — Après la conclusion de la FAQ */

  img.fleche-calage-18 {
    margin-top: 1.5em !important;
    margin-bottom: 0 !important;
  }

  /* F19 — Sous le titre de l’offre finale */

  img.fleche-calage-19 {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    display: none !important;
  }

  /* F20 — Entre les avantages et le prix de l’offre finale */

  img.fleche-calage-20 {
    margin-top: .5em !important;
    margin-bottom: .5em !important;
  }

  /* ESPACE AU DÉBUT DES BLOCS SUIVANTS : valeurs indépendantes des flèches.
     Quand diminuer la marge basse ne suffit pas, change le padding ou la
     marge du bloc concerné ici (exemples réels de cette page). */

  /* Après F01 : premier texte d'introduction à l'offre. */

  .offre .degrade > .description {
    padding-top: 1.5em;
  }

  /* Après F04 : titre « Obstacle : Comment gagner... » */

  .partie1 + .partie2 #obstacle-titre {
    margin-top: .65em;
  }

  /* Après F06 : titre de la seconde offre. */

  .partie3 + .partie4 > .degrade > h2 {
    margin-top: .2em;
  }

  /* Après F09 : bloc titre du bilan des gains. */

  .partie6 .phenomenal-heading {
    margin-top: 1em;
  }

  /* Après F15 : début du bloc « 30 ans du CDCH ». */

  .cdch30 {
    padding-top: 1.5em;
  }

  /* Après F16 : introduction « Pourquoi demander votre essai libre... ». */

  .urgence-stock {
    padding-top: 0;
  }

  /* Après F17 : titre « Vous hésitez encore ? » dans la FAQ. */

  .faq-obstacle {
    padding-top: 1.5em;
  }

  /* Titre Obstacle : taille tablette/petit ordinateur. */

  .partie2 #obstacle-titre {
    font-size: 2.35em;
    line-height: 1.2;
  }
}

@media (max-width: 46em) {
  /* Titre Obstacle : téléphone et petite tablette. */

  .partie2 #obstacle-titre {
    font-size: 1.85em;
    line-height: 1.2;
  }
}

@media (max-width: 30em) {
  /* Titre Obstacle : petit téléphone (480px et moins). */

  .partie2 #obstacle-titre {
    font-size: 1.6em;
  }
}

/* ========================================================================
   21/10 — CORRECTIONS RESPONSIVE CIBLÉES
   Ces règles s'appliquent uniquement à 72em et moins : la version desktop
   conserve ses dimensions, sa typographie et le placement des images.
   ======================================================================== */

@media (max-width: 72em) {
  /* Un gabarit unique pour tous les chevrons rouges (y compris F11 et F12). */

  img.fleche-calage.red-chevron,
  img.fleche-calage.fleche-chevron-mobile {
    width: 2.7em !important;
    max-width: 2.7em !important;
    height: auto !important;
    object-fit: contain;
  }

  /* Le chevron vert suit le même gabarit que les chevrons rouges. */

  .hero .scroll-arrow.fleche-calage-01 {
    margin-top: 1.2em !important;
    margin-bottom: 0em !important;
    display: block;
    width: 2.7em;
    max-width: 2.7em;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .scroll-arrow.fleche-calage-01 img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* CHAPEAUX RESPONSIVE — TABLETTE : même taille, Roboto normal partout.
     Les <strong> rédigés dans les textes conservent leur emphase. */

  .hero .intro,
  .h2-description,
  .sommaire-bento .bento-subtitle,
  .offerts-moderne__intro > p:last-child,
  .tem-alterne__chapeau,
  .faq-obstacle .faq-obstacle__head p,
  .cdch30 .cdch30__lead {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.14em;
    font-weight: 400;
    line-height: 1.3;
  }

  .cdch30 .cdch30__lead {
    max-width: 700px;
  }

  /* Total du bilan : plus discret sur tablette. */

  .partie6 .total {
    font-size: 1.45em;
    max-width: calc(100% - 1.6em);
    margin-inline: auto;
  }

  /* F11 — les grands blancs provenaient du bas de partie7 et du début
     de la section cadeaux, et pas uniquement de la marge du chevron. */

  .transition-fleche-cadeaux {
    padding: 0;
    margin: 0;
    line-height: 0;
  }

  /* F12 — la garantie suit immédiatement les cadeaux et leur rappel. */

  .partie8--certificat {
    padding-top: 0;
  }

  .partie8--certificat > img.fleche-calage-12 {
    display: block;
  }
}

@media (max-width: 46em) {
  /* Introduction de l'offre : largeur de lecture et centrage sur mobile. */

  .offre .degrade > .description {
    width: calc(100% - 4em);
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
    padding: 1.05em 0 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 1em;
    line-height: 1.3;
  }

  /* CHAPEAUX RESPONSIVE — MOBILE : une seule typographie pour chaque section. */

  .hero .intro,
  .h2-description,
  .sommaire-bento .bento-subtitle,
  .offerts-moderne__intro > p:last-child,
  .tem-alterne__chapeau,
  .faq-obstacle .faq-obstacle__head p,
  .cdch30 .cdch30__lead {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    font-weight: 400;
    line-height: 1.3;
  }

  .cdch30 .cdch30__lead {
    max-width: 700px;
    padding-inline: .9em;
  }

  .h2-description {
    padding-inline: .9em;
  }

  .partie6 .total {
    font-size: 1.3em;
    line-height: 1.3;
    max-width: calc(100% - 1.4em);
  }

  /* Flèche verte : même gabarit visuel que les chevrons rouges. */

  .hero .scroll-arrow.fleche-calage-01 {
    display: block;
    width: 2.7em;
    max-width: 2.7em;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .scroll-arrow.fleche-calage-01 img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Tampon du commissaire : réintégration dans le flux du texte.
     La position absolue plus haut dans le CSS était responsable du chevauchement. */

  .tem-alterne .huissier img.tampon,
  .huissier img.tampon {
    position: static;
    display: inline-block;
    float: none;
    vertical-align: middle;
    width: 5.8em;
    max-width: 35%;
    height: auto;
    margin: .6em auto .15em;
  }

  /* F11 avant les cadeaux — réduire les marges des deux sections encadrantes. */

  .partie7 {
    padding-bottom: 0;
  }

  .avantages-cahiers {
    padding: 1.7em .8em 2.5em;
    padding-bottom: 0;
  }

  .offerts-moderne {
    padding: 2em .8em 2.1em;
    padding-top: .4em;
    padding-bottom: .3em;
  }

  /* F12 avant la garantie — également réduire le grand retrait du certificat. */

  .partie8--certificat {
    padding-top: 0;
  }

  .partie8--certificat .garantie-mix {
    margin-top: 1em;
  }

  /* Garantie : tampon à gauche, signature et fonction alignées à droite. */

  .garantie-mix__pied {
    gap: .5em;
    display: grid;
    grid-template-columns: 6em minmax(0, 1fr);
    align-items: end;
    column-gap: .6em;
    margin-top: 1.2em;
  }

  .garantie-mix__sceau-image {
    flex: 0 0 6em;
    justify-self: start;
    width: 6em;
    max-width: 6em;
    height: auto;
    margin: 0;
  }

  .garantie-mix__signature {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    padding: 0;
    text-align: right;
  }

  .garantie-mix__signature-image {
    width: 100%;
    max-width: 11.5em;
    height: auto;
    margin: 0 0 .4em auto;
    object-fit: contain;
    object-position: right bottom;
  }
}

/* ========================================================================
   CALAGE MANUEL SUPPLÉMENTAIRE — MODIFIER ICI SANS TOUCHER AU DESKTOP
   Valeurs volontairement réunies au bas du CSS.
   ======================================================================== */

@media (max-width: 72em) {
  /* F11 : flèche entre les 19 stratagèmes et les deux cadeaux. */

  img.fleche-calage-11 {
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
  }

  /* Distance après F11 : c'est le padding-top des cadeaux. */

  /* F12 : flèche entre les cadeaux et la garantie. */

  img.fleche-calage-12 {
    margin-top: 1.2em !important;
    margin-bottom: 1.2em !important;
  }

  /* Distance avant F12 : réduire le padding-bottom des cadeaux. */

  .offerts-moderne {
    padding-top: .5em;
    padding-bottom: .25em;
  }

  /* Distance après F12 : marge du titre de garantie. */

  .partie8--certificat #titre-garantie-180 {
    margin-top: 0;
  }
}

/* ========================================================================
   HERO MOBILE — CHEVAUX VISIBLES À DROITE
   Le fond dédié au mobile est inversé horizontalement pour montrer les
   chevaux sur la partie libre à droite du turfiste.
   Sur ordinateur (> 62em), le fond d'origine reste inchangé.
   ======================================================================== */

@media (max-width: 62em) {
  .hero-visual {
    background-image: url("assets/image-de-fond-mobile.jpg");
    background-size: cover;
    background-position: right center;
  }

  /* La photo contient déjà son propre fondu blanc : un second dégradé
     masquerait les chevaux que nous voulons rendre visibles. */

  /* Les gains passent dans le ciel, pour laisser les chevaux bien visibles. */

  .hero .bilan-card {
    top: 1.1em;
    bottom: auto;
  }
}

/* ======================================================================
   BILAN — BANDEAU « PHÉNOMÉNAL » ET FLÈCHE F09 (TABLETTE + MOBILE)
   Réglages regroupés ici pour préserver les règles desktop.
   ====================================================================== */
@media (max-width: 62em) {
  .partie6 .phenomenal-ribbon {
    left: 50%;
    transform: translateX(-50%);
  }

  /* F09 : annule uniquement en responsive le padding inline de 50px. */
  img.fleche-calage-09 {
    padding-top: 0 !important;
    margin-top: 1em !important;
    margin-bottom: 0 !important;
  }

  /* Réduit l’espace séparant la flèche du bandeau. */
  .partie6 .phenomenal-heading {
    margin-top: .65em;
  }
}

/* ======================================================================
   BILAN — PULSATION DISCRÈTE « PHÉNOMÉNAL ! » TOUTES LES 2 SECONDES
   Départ au premier affichage du bilan ; répétition douce et permanente.
   Rotation desktop et centrage mobile maintenus pendant l’animation.
   ====================================================================== */
.partie6 .phenomenal-ribbon.phenomenal-ribbon--animated {
  animation: phenomenal-pulsation-desktop 2s ease-in-out infinite;
}

@keyframes phenomenal-pulsation-desktop {
  0%, 35%, 100% {
    transform: rotate(-15deg);
  }
  15% {
    transform: rotate(-15deg) translateY(-2px) scale(1.025);
  }
}

@media (max-width: 62em) {
  .partie6 .phenomenal-ribbon.phenomenal-ribbon--animated {
    animation-name: phenomenal-pulsation-mobile;
  }
}

@keyframes phenomenal-pulsation-mobile {
  0%, 35%, 100% {
    transform: translateX(-50%);
  }
  15% {
    transform: translate(-50%, -2px) scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partie6 .phenomenal-ribbon.phenomenal-ribbon--animated {
    animation: none;
  }
}