@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..700,0..100,0..1;1,9..144,400..700,0..100,0..1&display=swap');
:root {
  --primary: #b6461a;
  --second: #f2b58a;
  --third: #2f4a3b;
  --sweet-primary: #e9efe7;
  --terra: #b6461a;
  --terra-cta: #c24a25;
  --vert: #2f4a3b;
  --vert-titre: #203329;
  --creme: #fbf7f0;
  --sauge: #e9efe7;
  --sauge-moyen: #c6d4c2;
  --peche: #f2b58a;
  --peche-clair: #f9d2b4;
  --ligne: #e7e0d3;
  --texte-doux: #445e4f;
  --font: "DM Sans", sans-serif;
  --black: #203329;
  --white: #fff;
  --gris: #e9efe7;
  --gris1: #fbf7f0;
  --gris2: #e7e0d3;
  --gris3: #c6d4c2;
  --title-color: #203329;
  --text-color: #2b342e;
  --title-font: "Fraunces", serif;
  --text-font: "DM Sans", sans-serif;
  --space: clamp(48px, 8vw, 100px);
  --space-lg: clamp(60px, 12vw, 200px);
  --space-md: clamp(48px, 10vw, 120px);
  --space-sm: clamp(20px, 6vw, 55px);
  --back: #203329;
}


/*
========================================
Début Base AXO (commune Axo-A / Axo-B)
========================================
*/

#axo-fg a {
  text-decoration: none !important;
}

#axo-fg nav.fil-arianne {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

#axo-fg nav.fil-arianne .breadcrumb {
  background-color: transparent;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#axo-fg .breadcrumb-item + .breadcrumb-item::before {
  content: "|";
  color: var(--gris3);
}

#axo-fg .breadcrumb-item a {
  color: var(--second);
}

#axo-fg .breadcrumb-item.active {
  color: var(--gris3);
}

#axo-fg .container {
  max-width: 1400px;
  padding-left: 15px;
  padding-right: 15px;
}

#axo-fg .fg-space {
  margin-top: var(--space);
  margin-bottom: var(--space);
  margin-left: 0px !important;
  margin-right: 0px !important;
}

#axo-fg h1,
#axo-fg h2,
#axo-fg h3 {
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--title-color);
}

#axo-fg h4,
#axo-fg h5,
#axo-fg h6 {
  font-family: var(--title-font);
  color: var(--title-color);
  font-weight: 500;
}

#axo-fg .h2 {
  font-size: clamp(28px, 4vw, 40px);
}
#axo-fg .h3 {
  font-size: clamp(24px, 3.2vw, 32px);
}
#axo-fg .h4 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
}
#axo-fg .h5 {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 500;
}
#axo-fg .h6 {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 500;
}

#axo-fg p {
  color: var(--text-color);
}

#axo-fg p a {
  color: var(--second);
}

#axo-fg .back-primary p a,
#axo-fg .back-second p a,
#axo-fg .back-third p a {
  color: var(--white);
}

/* Listes à puce custom */
.list-none {
  text-align: center;
  list-style: none;
}

.list-none a {
  color: var(--second);
}

.custom-liste,
.custom-liste-c {
  list-style: square;
  padding-left: 20px;
}

.custom-liste li,
.custom-liste-c li {
  margin-bottom: 8px;
  color: var(--text-color);
}

.custom-liste li::marker,
.custom-liste-c li::marker {
  color: var(--primary);
}

.custom-liste-c {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-liste-2col {
  columns: 2;
  column-gap: 30px;
}

.custom-liste-2col li {
  break-inside: avoid;
}

@media (max-width: 767px) {
  .custom-liste-2col {
    columns: 1;
  }
}

#axo-fg strong {
  font-weight: 700;
}

/* ---------- Utilitaires ---------- */

#axo-fg .radius1 {
  border-radius: 6px;
}
#axo-fg .radius2 {
  border-radius: 20px;
}
#axo-fg .radius3 {
  border-radius: 35px;
}
#axo-fg .radius4 {
  border-radius: 100px;
}
#axo-fg .radius5 {
  border-radius: 40px;
}

#axo-fg .img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hauteurs fluides : la valeur en px est le plafond desktop,
   elles se resserrent seules sur les petits écrans. overflow:hidden
   permet à ces blocs de recevoir une classe radiusN (l'image
   .img-cover à l'intérieur suit alors l'arrondi). */
#axo-fg .h-200 {
  height: clamp(160px, 22vw, 200px);
  overflow: hidden;
}
#axo-fg .h-300 {
  height: clamp(200px, 28vw, 300px);
  overflow: hidden;
}
#axo-fg .h-400 {
  height: clamp(220px, 34vw, 400px);
  overflow: hidden;
}
#axo-fg .h-500 {
  height: clamp(240px, 40vw, 500px);
  overflow: hidden;
}
#axo-fg .h-600 {
  height: clamp(260px, 45vw, 600px);
  overflow: hidden;
}
#axo-fg .h-700 {
  height: clamp(280px, 50vw, 700px);
  overflow: hidden;
}
#axo-fg .h-800 {
  height: clamp(300px, 55vw, 800px);
  overflow: hidden;
}
#axo-fg .h-900 {
  height: clamp(320px, 60vw, 900px);
  overflow: hidden;
}

/* ---------- Fonds ---------- */

#axo-fg .back-primary {
  background-color: var(--primary);
}
#axo-fg .back-second {
  background-color: var(--second);
}
#axo-fg .back-third {
  background-color: var(--third);
}
#axo-fg .back-gris {
  background-color: var(--gris);
}
#axo-fg .back-gris1 {
  background-color: var(--gris1);
}
#axo-fg .back-gris2 {
  background-color: var(--gris2);
}
#axo-fg .back-gris3 {
  background-color: var(--gris3);
}

#axo-fg .color-primary {
  color: var(--primary);
}
#axo-fg .color-second {
  color: var(--second);
}
#axo-fg .color-third {
  color: var(--third);
}
#axo-fg .color-gris {
  color: var(--gris);
}
#axo-fg .color-gris1 {
  color: var(--gris1);
}
#axo-fg .color-gris2 {
  color: var(--gris2);
}
#axo-fg .color-gris3 {
  color: var(--gris3);
}

/* back-gris n'est volontairement PAS dans ce groupe : il est prévu clair
   par défaut (--gris), donc le texte foncé hérité (#axo-fg p/h1-h5/li)
   convient déjà. */
#axo-fg .back-third p,
#axo-fg .back-third h1,
#axo-fg .back-third h2,
#axo-fg .back-third h3,
#axo-fg .back-third h4,
#axo-fg .back-third h5,
#axo-fg .back-third li,
#axo-fg .back-second p,
#axo-fg .back-second h1,
#axo-fg .back-second h2,
#axo-fg .back-second h3,
#axo-fg .back-second h4,
#axo-fg .back-second h5,
#axo-fg .back-second li,
#axo-fg .back-primary p,
#axo-fg .back-primary h1,
#axo-fg .back-primary h2,
#axo-fg .back-primary h3,
#axo-fg .back-primary h4,
#axo-fg .back-primary h5,
#axo-fg .back-primary li {
  color: var(--white);
}

/* Cartes à hauteur égale : sans display:flex sur la colonne .mt-4, la
   .row.justify-content-center imbriquée ne remplit pas la hauteur déjà
   étirée par le .row parent, donc la carte visible restait à sa hauteur
   de contenu au lieu de s'aligner sur la carte la plus haute. */
#axo-fg .mt-4:has(> .row.justify-content-center) {
  display: flex;
}
#axo-fg .mt-4 > .row.justify-content-center {
  flex: 1 1 auto;
  width: 100%;
}
#axo-fg .mt-4 > .row.justify-content-center > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* ---------- Accessibilité ---------- */

#axo-fg a:focus-visible,
#axo-fg summary:focus-visible,
#axo-fg button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #axo-fg * {
    transition-duration: 0.001ms !important;
  }
}

/*
========================================
Fin Base AXO
========================================
*/

/*
========================================
Début Habillage Axo-A
========================================
*/

/* ---------- Titres ---------- */

#axo-fg h1,
#axo-fg h2,
#axo-fg h3,
#axo-fg h4,
#axo-fg h5,
#axo-fg h6 {
  text-transform: uppercase;
}

#axo-fg small.small-title {
  font-size: 60%;
  text-transform: uppercase;
  color: var(--second);
}

/* ---------- Surtitre ---------- */

#axo-fg .surtext {
  display: inline-block;
  color: var(--primary);
  padding: 10px 20px;
  border: 1px solid var(--primary);
  font-size: 15px;
  text-transform: uppercase;
}

/* .surtext utilise var(--primary) : sur un fond back-primary il serait
   à 100% invisible (même couleur que son propre fond), et sur back-third
   il peut l'être aussi selon la palette (--primary proche de --third).
   On bascule donc systématiquement en blanc sur les 3 fonds sombres. */
#axo-fg .back-second .surtext,
#axo-fg .back-third .surtext,
#axo-fg .back-primary .surtext {
  color: var(--white);
  border-color: var(--white);
}

/* Décorateurs de titre : une seule déclaration de base,
   chaque variante ne fixe plus que côté + largeur (fini la
   duplication des 7 blocs identiques). */
#axo-fg .decor-l,
#axo-fg .decor-l-lg,
#axo-fg .decor-l-xlg,
#axo-fg .decor-r,
#axo-fg .decor-r-lg,
#axo-fg .decor-r-xlg,
#axo-fg .decor-m {
  position: relative;
}

#axo-fg .decor-l::before,
#axo-fg .decor-l-lg::before,
#axo-fg .decor-l-xlg::before,
#axo-fg .decor-r::before,
#axo-fg .decor-r-lg::before,
#axo-fg .decor-r-xlg::before,
#axo-fg .decor-m::before {
  content: "";
  position: absolute;
  height: 5px;
  bottom: -10px;
  background: var(--second);
}

#axo-fg .decor-l::before {
  left: 0;
  width: 20%;
}
#axo-fg .decor-l-lg::before {
  left: 0;
  width: 40%;
}
#axo-fg .decor-l-xlg::before {
  left: 0;
  width: 70%;
}
#axo-fg .decor-r::before {
  right: 0;
  width: 20%;
}
#axo-fg .decor-r-lg::before {
  right: 0;
  width: 40%;
}
#axo-fg .decor-r-xlg::before {
  right: 0;
  width: 70%;
}
#axo-fg .decor-m::before {
  left: calc(50% - 20%);
  width: 40%;
}

#axo-fg .back-second .decor-m::before,
#axo-fg .back-second .decor-r-xlg::before,
#axo-fg .back-second .decor-r-lg::before,
#axo-fg .back-second .decor-r::before,
#axo-fg .back-second .decor-l-xlg::before,
#axo-fg .back-second .decor-l-lg::before,
#axo-fg .back-second .decor-l::before {
  background-color: var(--primary);
}

/* Même logique que .surtext ci-dessus : la barre utilise var(--second),
   qui peut se fondre dans back-third/back-primary selon la palette
   (ex. deux verts foncés proches). Le blanc reste lisible dans tous les
   cas puisque ces deux fonds forcent déjà un texte blanc. */
#axo-fg .back-third .decor-m::before,
#axo-fg .back-third .decor-r-xlg::before,
#axo-fg .back-third .decor-r-lg::before,
#axo-fg .back-third .decor-r::before,
#axo-fg .back-third .decor-l-xlg::before,
#axo-fg .back-third .decor-l-lg::before,
#axo-fg .back-third .decor-l::before,
#axo-fg .back-primary .decor-m::before,
#axo-fg .back-primary .decor-r-xlg::before,
#axo-fg .back-primary .decor-r-lg::before,
#axo-fg .back-primary .decor-r::before,
#axo-fg .back-primary .decor-l-xlg::before,
#axo-fg .back-primary .decor-l-lg::before,
#axo-fg .back-primary .decor-l::before {
  background-color: var(--white);
}

/* ---------- Boutons ---------- */

#axo-fg .fg-btn {
  display: inline-flex;
  align-items: center;
  color: var(--text-color);
  transition: color 0.2s ease-in-out;
}

#axo-fg .fg-btn span:first-child {
  text-decoration: underline !important;
}

#axo-fg .fg-btn:hover span:first-child {
  color: var(--second);
}

#axo-fg .fg-btn span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  padding-top: 7px;
  border: 3px solid var(--primary);
  text-decoration: none !important;
  font-weight: 700;
  margin-left: 10px;
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

#axo-fg .fg-btn:hover span:last-child {
  border-color: var(--second);
  background-color: var(--second);
  color: var(--white);
}

#axo-fg .fg-btn span:last-child svg {
  height: 16px;
  width: 16px;
}

#axo-fg .fg-btn span svg path {
  transition: fill 0.2s ease-in-out;
}

#axo-fg .fg-btn:hover span svg path {
  fill: var(--white) !important;
}

#axo-fg .fg-cta {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

#axo-fg .fg-cta:hover {
  background-color: transparent;
  color: var(--primary);
}

/* .fg-cta a un fond fixe var(--primary) : sur un panneau back-primary,
   le bouton se fond intégralement dans son propre panneau (même couleur),
   et sur back-third il peut l'être aussi selon la palette (--primary proche
   de --third). On le passe donc en contour blanc, garanti lisible sur ces
   fonds déjà sombres. */
#axo-fg .back-third .fg-cta,
#axo-fg .back-primary .fg-cta {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

#axo-fg .back-third .fg-cta:hover {
  background-color: var(--white);
  color: var(--third);
}

#axo-fg .back-primary .fg-cta:hover {
  background-color: var(--white);
  color: var(--primary);
}

/* ---------- Bloc 1 : image + points forts ---------- */

#axo-fg .bloc1-item {
  border-top: 3px solid var(--primary);
  padding-top: 24px;
}

/* ---------- Bloc 3 : image + pan coloré ---------- */

#axo-fg .fg-position-rel {
  position: relative;
}

#axo-fg .fg-position {
  position: absolute;
  z-index: 10;
  left: 0;
}

#axo-fg .fg-position-right {
  left: auto;
  right: 0;
}

#axo-fg .bloc-3-content {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  padding-left: clamp(20px, 5vw, 80px);
}

#axo-fg .bloc-3-content-right {
  padding-left: 15px;
  padding-right: clamp(20px, 5vw, 80px);
}

/* ---------- Cartes photo (ex item-fg1) ---------- */

#axo-fg .card-photo {
  padding: 30px;
  padding-top: 130px;
  padding-bottom: 35px;
  position: relative;
  overflow: hidden;
}

#axo-fg .card-photo .img-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
}

#axo-fg .card-photo .img-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* ---------- Cartes icône (ex item-fg2) ---------- */

#axo-fg .card-icon {
  padding: 30px;
  padding-top: 120px;
  padding-bottom: 35px;
  position: relative;
}

#axo-fg .card-icon .fg-iconebox {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 0;
  height: 60px;
  padding: 5px;
}

#axo-fg .card-icon .fg-iconebox .ico-container {
  background-color: var(--gris);
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#axo-fg .fg-icon {
  font-size: 30px;
  color: var(--third);
}

/* ---------- Bandeau engagements (fond coloré + cartes) ---------- */

#axo-fg .axofg-banner {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* Bloc 6 (bandeau engagements) : censé être plein cadre, mais le
   ".row.fg-space" qui l'enveloppe a ses marges horizontales forcées à 0
   (règle générale ci-dessus), ce qui laisse apparaître les 15px de
   padding natifs du <section id="axo-fg" class="container-fluid"> de
   chaque côté au lieu d'un fond plein écran. On rétablit les marges
   négatives -15px uniquement pour ce cas précis (bandeau plein cadre),
   sans toucher au comportement par défaut des autres blocs. */
#axo-fg .fg-space:has(> .container-fluid > .row.axofg-banner) {
  margin-left: -15px !important;
  margin-right: -15px !important;
}

#axo-fg .binw p,
#axo-fg .binw .surtext,
#axo-fg .binw h1,
#axo-fg .binw h2,
#axo-fg .binw h3,
#axo-fg .binw h4,
#axo-fg .binw h5,
#axo-fg .binw h6 {
  color: var(--black);
}

#axo-fg .fg-iconebox.radius1 {
  border-radius: 6px 0 0 6px;
}

#axo-fg .fg-iconebox.radius2 {
  border-radius: 20px 0 0 20px;
}

#axo-fg .fg-iconebox.radius3 {
  border-radius: 35px 0 0 35px;
}

/* ---------- Bandeaux visuels découpés (CTA texte + image) ---------- */

#axo-fg .fg-style-banner {
  padding: var(--space-sm);
  overflow: hidden !important;
}

#axo-fg .txt-banner-style {
  position: relative;
  z-index: 10;
}

#axo-fg .cuted-bg {
  position: relative;
}

#axo-fg .cuted-bg .img-back {
  position: absolute;
  /* léger débord haut/bas : évite le filet d'anti-aliasing entre
     le clip du parent (border-radius + overflow hidden) et la
     découpe (mask/clip-path) de l'image */
  top: -1px;
  bottom: -1px;
  right: 0;
  width: 40%;
  overflow: hidden;
  transform: scale(1.1);
}

#axo-fg .cuted-bg .img-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Motif "plein cadre" du bloc 11 (fg-cta-simple) : une surimpression très
   discrète en ::before sur toute la boîte, censée se fondre dans le fond
   back-third plutôt que d'attirer l'œil. Pas de variante "cercle" (retirée
   à la demande : les autres motifs suffisent pour ce bloc). */
#axo-fg .fg-cta-simple.fg-fill-points::before,
#axo-fg .fg-cta-simple.fg-fill-rayures::before,
#axo-fg .fg-cta-simple.fg-fill-cadre::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#axo-fg .fg-cta-simple.fg-fill-points::before {
  background-image: radial-gradient(var(--white) 2.5px, transparent 2.5px);
  background-size: 24px 24px;
  opacity: 0.08;
}
#axo-fg .fg-cta-simple.fg-fill-rayures::before {
  background-image: repeating-linear-gradient(45deg, var(--white) 0 6px, transparent 6px 18px);
  opacity: 0.06;
}
#axo-fg .fg-cta-simple.fg-fill-cadre::before {
  inset: 8%;
  border: 3px solid var(--white);
  opacity: 0.08;
}

/* Découpes du bloc 7 : scopées à .img-back (et non "bare class") pour que
   la classe reste sans effet si elle est un jour posée par erreur sur le
   conteneur global .fg-style-banner au lieu de .img-back — cas déjà
   rencontré, qui découpait alors tout le bloc (texte compris) en diagonale
   au lieu de juste l'image. */
#axo-fg .img-back.smooth-cut {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><path fill='white' d='M600,0v400H5.14c66.76-42.09,103.07-121.68,90.89-199.79C83.81,121.84,120.4,41.98,187.59,0h412.41Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><path fill='white' d='M600,0v400H5.14c66.76-42.09,103.07-121.68,90.89-199.79C83.81,121.84,120.4,41.98,187.59,0h412.41Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#axo-fg .img-back.strict-cut {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 19% 100%);
}

#axo-fg .img-back.triangle-cut {
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

#axo-fg .img-back.diagonal-cut {
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0% 100%);
}

#axo-fg .diagonal-cut-wrap {
  position: relative;
}

#axo-fg .diagonal-cut-wrap .cut-band {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
  background: var(--primary);
  z-index: 1;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
}

#axo-fg .diagonal-cut-wrap .img-back {
  z-index: 2;
}

@supports not (mask-image: url("")) {
  #axo-fg .img-back {
    overflow: hidden;
  }
  #axo-fg .img-back::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f2f2f2;
    opacity: 0;
  }
}

/* ---------- NOUVEAU : FAQ / accordéon (natif, zéro JS) ---------- */

#axo-fg .fg-faq-item {
  border-bottom: 1px solid var(--gris2);
  padding: 20px 0;
}

#axo-fg .fg-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  color: var(--title-color);
  font-family: var(--title-font);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 19px);
}

#axo-fg .fg-faq-item summary::-webkit-details-marker {
  display: none;
}

#axo-fg .fg-faq-item .fg-faq-chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--second);
  border-bottom: 2px solid var(--second);
  transform: rotate(45deg);
  transition: transform 0.2s ease-in-out;
}

#axo-fg .fg-faq-item[open] .fg-faq-chevron {
  transform: rotate(-135deg);
}

#axo-fg .fg-faq-item .fg-faq-answer {
  padding-top: 14px;
  max-width: 900px;
}

/* ---------- NOUVEAU : chiffres clés ---------- */

#axo-fg .fg-stat-number {
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--second);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
}

#axo-fg .fg-stat-label {
  margin-top: 10px;
  color: var(--text-color);
  font-size: 15px;
}

/* ---------- NOUVEAU : témoignage / citation ---------- */

#axo-fg .fg-quote {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding-top: 20px;
}

#axo-fg .fg-quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, serif;
  font-size: 90px;
  line-height: 1;
  color: var(--primary);
  margin-bottom: -10px;
}

#axo-fg .fg-quote p {
  font-size: clamp(18px, 2.2vw, 22px);
  font-style: italic;
  color: var(--title-color);
}

#axo-fg .fg-quote-author {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

#axo-fg .fg-quote-author img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

#axo-fg .fg-quote-author strong {
  display: block;
  color: var(--title-color);
}

#axo-fg .fg-quote-author span {
  display: block;
  font-size: 14px;
  color: var(--text-color);
}

/* ---------- NOUVEAU : CTA simple sans image ---------- */

#axo-fg .fg-cta-simple {
  position: relative;
  overflow: hidden;
  padding: var(--space-md) clamp(20px, 6vw, 60px);
  text-align: center;
}

#axo-fg .fg-cta-simple p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------- NOUVEAU : SECTION TARIFS / MENU ------------ */

#axo-fg .fg-tarifs {
  padding: var(--space-md) clamp(20px, 6vw, 60px);
  isolation: isolate;
}

.fg-tarifs-table {
  padding: 30px;
  padding-left: 0px;
}

.menu-card {
  background: var(--sweet-primary);
  border: 1px solid var(--primary);
  padding: 35px;
  position: relative;
}

.menu-card:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 30px;
  right: -30px;
  bottom: -30px;
  left: 30px;
  background-color: var(--second);
  z-index: -1;
  opacity: 20%;
}

.menu-card.radius1,
.menu-card.radius1:before {
  border-radius: 5px;
}

.menu-card.radius2,
.menu-card.radius2:before {
  border-radius: 20px;
}

.menu-card.radius3,
.menu-card.radius3:before {
  border-radius: 35px;
}

.menu-category {
  font-family: Georgia, serif;
  color: var(--primary);
  font-size: 25px;
  border-bottom: 1px solid var(--second);
  padding-bottom: 10px;
  margin-top: 35px;
  margin-bottom: 20px;
}

.menu-item {
  padding: 12px 0;
}

.menu-item-name {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: bold;
  color: var(--title-color);
}

.menu-item-description {
  color: var(--gris3);
  font-size: 14px;
  margin-top: 4px;
  max-width: 85%;
}

.menu-price {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: bold;
  color: var(--second);
  white-space: nowrap;
}

.menu-note {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--second);
  color: var(--text-color);
  font-size: 13px;
  text-align: center;
}

/* ---------- Etapes ------------ */

.card-etape-wrapper {
  isolation: isolate;
  display: flex;
  transition: 0.3s ease-in-out;
}

.card-etape-wrapper > .row {
  flex: 1 1 auto;
  width: 100%;
}

.card-etape {
  position: relative;
  padding: 30px;
  border: 1px solid var(--primary);
  background: var(--sweet-primary);
  transition: 0.3s ease-in-out;
}

.card-etape:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 18px;
  right: -18px;
  bottom: -18px;
  left: 18px;
  background: var(--second);
  background-size: cover;
  z-index: -1;
  opacity: 30%;
  transition: 0.3s ease-in-out;
}

.card-etape.radius1,
.card-etape.radius1:before {
  border-radius: 5px;
}

.card-etape.radius2,
.card-etape.radius2:before {
  border-radius: 20px;
}

.card-etape.radius3,
.card-etape.radius3:before {
  border-radius: 35px;
}

/* Grosseur de bordure réglable : la carte n'était exploitable que sur
   des visuels haut de gamme avec sa bordure fixe à 1px. */
.card-etape.border0 {
  border-width: 0;
}
.card-etape.border2 {
  border-width: 2px;
}
.card-etape.border3 {
  border-width: 3px;
}
.card-etape.border4 {
  border-width: 4px;
}

.card-etape-wrapper:hover {
  transform: translateY(-20px);
  transition: 0.3s ease-in-out;
}

.card-etape:hover:before {
  width: 100%;
  height: 100%;
  top: 22px;
  right: -18px;
  bottom: -22px;
  left: 18px;
  background-color: var(--second);
  z-index: -1;
  opacity: 15%;
  transition: 0.3s ease-in-out;
}

.card-etape span.chiffre-etape {
  padding: 10px;
  padding-left: 20px;
  border: 1px solid var(--primary);
  border-right: none;
  display: block;
  margin-right: -30px;
  background-color: var(--primary);
  color: #fffdfa;
}

.card-etape.radius1 span.chiffre-etape {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  padding-left: 20px;
}

.card-etape.radius2 span.chiffre-etape {
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  padding-left: 20px;
}

.card-etape.radius3 span.chiffre-etape {
  border-bottom-left-radius: 35px;
  border-top-left-radius: 35px;
  padding-left: 20px;
}

/* ---------- Bloc 14 : présentation + motif décoratif ---------- */

#axo-fg .fg14-img-col {
  position: relative;
}

#axo-fg .fg14-img-wrap {
  position: relative;
  z-index: 1;
}

#axo-fg .fg14-motif {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Les 4 motifs pointent par défaut vers la droite (le côté "intérieur",
   vers le texte) : c'est le cas sûr quand l'image est à gauche (position
   par défaut du bloc). #axo-fg a un overflow:hidden, donc un motif qui
   déborderait plutôt vers l'extérieur du bloc serait tout simplement
   rogné et invisible. Quand l'image passe à droite, .fg14-mirror
   (ajoutée en JS selon la position) bascule tout côté gauche pour que
   le motif continue de pointer vers le texte, jamais vers le bord. */

/* Motif « points » : grille de pois en coin */
#axo-fg .fg14-motif-points {
  top: -24px;
  right: -24px;
  width: 130px;
  height: 130px;
  background-image: radial-gradient(var(--primary) 2.5px, transparent 2.5px);
  background-size: 16px 16px;
  opacity: 0.7;
}

#axo-fg .fg14-mirror.fg14-motif-points {
  right: auto;
  left: -24px;
}

/* Motif « cadre » : même esprit que l'ombre décalée des cartes tarifs/étapes */
#axo-fg .fg14-motif-cadre {
  top: 22px;
  left: 22px;
  right: -22px;
  bottom: -22px;
  background-color: var(--second);
  opacity: 0.25;
}

#axo-fg .fg14-mirror.fg14-motif-cadre {
  left: -22px;
  right: 22px;
}

/* Motif « cercle » : aplat rond en fond de cadre */
#axo-fg .fg14-motif-cercle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: var(--sweet-primary);
  bottom: -50px;
  right: -50px;
}

#axo-fg .fg14-mirror.fg14-motif-cercle {
  right: auto;
  left: -50px;
}

/* Motif « rayures » : bande de hachures diagonales
   (top+bottom plutôt qu'une height en % : le parent .fg14-img-col
   n'a pas de hauteur explicite, une height% s'y résoudrait à 0) */
#axo-fg .fg14-motif-rayures {
  top: 50px;
  bottom: 50px;
  right: -28px;
  width: 90px;
  background-image: repeating-linear-gradient(45deg, var(--primary) 0 6px, transparent 6px 16px);
  opacity: 0.55;
}

#axo-fg .fg14-mirror.fg14-motif-rayures {
  right: auto;
  left: -28px;
}

#axo-fg .fg14-highlight {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px 0;
  padding: 18px 20px;
  border-left: 3px solid var(--primary);
  background-color: var(--sweet-primary);
}

#axo-fg .fg14-highlight-number {
  flex: 0 0 auto;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 42px);
  color: var(--primary);
  line-height: 1;
}

#axo-fg .fg14-highlight-label {
  font-size: 14px;
  color: var(--text-color);
}

#axo-fg .fg14-highlight.radius1 {
  border-radius: 0 6px 6px 0;
}
#axo-fg .fg14-highlight.radius2 {
  border-radius: 0 20px 20px 0;
}
#axo-fg .fg14-highlight.radius3 {
  border-radius: 0 35px 35px 0;
}

/* ---------- Bloc 15 : équipe ---------- */

#axo-fg .fg15-card-wrapper {
  display: flex;
}

#axo-fg .fg15-card {
  width: 100%;
  text-align: center;
}

#axo-fg .fg15-role {
  color: var(--primary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

#axo-fg .fg15-social {
  display: flex;
  justify-content: center;
  gap: 10px;
}

#axo-fg .fg15-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--sweet-primary);
  color: var(--primary);
  font-size: 13px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#axo-fg .fg15-social-link:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Style « classique » */
#axo-fg .fg15-card-classique {
  background-color: var(--gris);
  height: 100%;
  padding-bottom: 26px;
}

#axo-fg .fg15-card-classique .fg15-photo {
  width: 100%;
  height: 210px;
  overflow: hidden;
  margin-bottom: 20px;
}

#axo-fg .fg15-card-classique .fg15-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#axo-fg .fg15-card-classique h3,
#axo-fg .fg15-card-classique .fg15-role {
  padding: 0 20px;
}

/* Style « overlay » */
#axo-fg .fg15-card-overlay {
  position: relative;
  height: 340px;
  overflow: hidden;
}

#axo-fg .fg15-card-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#axo-fg .fg15-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
}

#axo-fg .fg15-overlay-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
}

#axo-fg .fg15-overlay-content h3,
#axo-fg .fg15-overlay-content .fg15-role {
  color: var(--white);
}

#axo-fg .fg15-overlay-content .fg15-role {
  color: var(--sweet-primary);
}

#axo-fg .fg15-overlay-content .fg15-social-link {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

#axo-fg .fg15-overlay-content .fg15-social-link:hover {
  background-color: var(--white);
  color: var(--third);
}

/* Style « minimal » */
#axo-fg .fg15-photo-circle {
  width: 110px;
  height: 110px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
}

#axo-fg .fg15-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Bloc 16 : bandeau logos clients / partenaires ---------- */

#axo-fg .fg16-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#axo-fg .fg16-logo-item img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

#axo-fg .fg16-logo-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ---------- Bloc 17 : carte + coordonnées ---------- */

#axo-fg .fg17-infos {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}

#axo-fg .fg17-infos li {
  margin-bottom: 24px;
}

#axo-fg .fg17-infos li:last-child {
  margin-bottom: 0;
}

#axo-fg .fg17-infos li,
#axo-fg .fg17-infos li a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-color);
}

#axo-fg .fg17-infos li a {
  transition: color 0.2s ease-in-out;
}

#axo-fg .fg17-infos li a:hover {
  color: var(--primary);
}

#axo-fg .fg17-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background-color: var(--second);
  color: var(--white);
  transition: background-color 0.2s ease-in-out;
}

#axo-fg .fg17-infos li a:hover .fg17-icon-box {
  background-color: var(--primary);
}

/* ---------- Bloc 18 : texte flottant sur image ---------- */

#axo-fg .fg18-wrap {
  position: relative;
  padding-bottom: clamp(40px, 8vw, 90px);
}

#axo-fg .fg18-img {
  width: 82%;
  margin-left: auto;
}

#axo-fg .fg18-wrap.fg18-right .fg18-img {
  margin-left: 0;
  margin-right: auto;
}

#axo-fg .fg18-card {
  position: relative;
  z-index: 2;
  background: var(--white);
  max-width: 460px;
  padding: clamp(28px, 4vw, 50px);
  margin-top: clamp(-90px, -10vw, -60px);
  margin-left: clamp(0px, 4vw, 40px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

#axo-fg .fg18-wrap.fg18-right .fg18-card {
  margin-left: auto;
  margin-right: clamp(0px, 4vw, 40px);
}

/*
========================================
Responsive : tablette (<= 991.98px)
========================================
*/

@media (max-width: 991.98px) {
  #axo-fg .bloc-3-content {
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(20px, 6vw, 40px);
  }

  #axo-fg .fg-position {
    position: static;
    margin-bottom: 24px;
  }
}

/*
========================================
Responsive : mobile (<= 767.98px)
========================================
*/

@media (max-width: 767.98px) {
  #axo-fg .surtext {
    font-size: 13px;
    padding: 8px 16px;
    margin-top: 20px;
  }

  /* Bandeaux visuels découpés : sur mobile, plus de découpe.
     Le texte garde le padding du bloc, l'image devient une bande
     pleine largeur collée en bas de la carte (elle "déborde" du
     padding pour venir toucher les bords gauche/droite/bas — donc
     pas de superposition avec le texte, et les coins bas restent
     arrondis grâce à l'overflow:hidden du parent). */
  #axo-fg .img-back.smooth-cut,
  #axo-fg .img-back.strict-cut,
  #axo-fg .img-back.diagonal-cut,
  #axo-fg .img-back.triangle-cut {
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #axo-fg .cuted-bg .img-back {
    position: static;
    width: calc(100% + 2 * var(--space-sm));
    height: clamp(200px, 55vw, 320px);
    margin: 24px calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm));
  }

  #axo-fg .diagonal-cut-wrap .cut-band {
    display: none;
  }

  #axo-fg .fg-style-banner {
    text-align: left;
  }

  #axo-fg .card-photo,
  #axo-fg .card-icon {
    padding: 24px;
    padding-top: 100px;
  }

  #axo-fg .fg-quote::before {
    font-size: 60px;
  }

  #axo-fg .fg14-motif {
    display: none;
  }

  /* Bloc 18 : sur mobile, plus de chevauchement (la carte flottante devient
     illisible en dessous d'une certaine largeur d'image) — l'image passe
     pleine largeur et la carte s'enchaîne normalement en dessous. */
  #axo-fg .fg18-wrap {
    padding-bottom: 0;
  }
  #axo-fg .fg18-img {
    width: 100%;
  }
  #axo-fg .fg18-card,
  #axo-fg .fg18-wrap.fg18-right .fg18-card {
    margin-top: -40px;
    margin-left: auto;
    margin-right: auto;
    max-width: none;
    width: calc(100% - 30px);
  }
}

/*
========================================
Fin Habillage Axo-A
========================================
*/

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  font-family: var(--text-font);
  font-variation-settings: "WONK" 0, "SOFT" 0;
  color: var(--text-color);
  background: #fff;
  font-size: 18px;
  line-height: 1.45;
}

body p {
  font-size: 18px;
}

a {
  transition: color .3s ease;
}

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

.cl-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.cl-titre {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: .035em;
  color: #2b342e;
  margin: 0;
  font-variation-settings: "WONK" 0, "SOFT" 0;
}

.cl-titre em,
.cl-hero-titre em {
  font-style: italic;
  color: var(--terra);
  letter-spacing: .02em;
}

.cl-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 0 25px;
  border-radius: 28px;
  font-family: var(--text-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}

.cl-btn:hover {
  transform: translateY(-2px);
}

.cl-btn-terra {
  background: var(--terra);
  color: #fff !important;
}

.cl-btn-terra:hover {
  background: #93380f;
}

.cl-btn-contour {
  background: transparent;
  color: var(--vert) !important;
  border-color: var(--vert);
}

.cl-btn-contour:hover {
  background: var(--vert);
  color: #fff !important;
}

.cl-btn-vert {
  background: var(--vert);
  color: #fff !important;
}

.cl-btn-vert:hover {
  background: #1d3127;
}

.cl-btn-blanc {
  background: #fff;
  color: var(--terra-cta) !important;
}

.cl-btn-blanc:hover {
  background: var(--creme);
  color: #93380f !important;
}

.cl-lien {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 18px;
  color: var(--terra);
}

.cl-lien .svg-inline--fa,
.cl-lien .fa-arrow-right {
  width: 12px;
  height: 12px;
  transition: transform .35s ease;
}

a:hover .cl-lien .svg-inline--fa,
a:hover .cl-lien .fa-arrow-right {
  transform: translateX(5px);
}

.cl-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--creme);
  transition: transform .45s ease;
}

.cl-top {
  background: var(--vert);
  color: var(--creme);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
  padding: 4px 20px;
  font-weight: 300;
  font-size: 16px;
}

.cl-top p {
  margin: 0;
  font-size: 16px;
}

.cl-top a {
  color: var(--creme);
}

.cl-top a:hover {
  color: var(--peche-clair);
  text-decoration: none;
}

.cl-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 103px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ligne);
  transition: min-height .4s ease, box-shadow .4s ease;
}

.cl-header.is-fixe .cl-nav {
  box-shadow: 0 10px 30px rgba(32, 51, 41, .07);
}

.cl-logo {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  color: var(--vert) !important;
  text-decoration: none !important;
}

.cl-logo-nom {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 32.6px;
  line-height: 1;
  letter-spacing: .01em;
}

.cl-logo-metier {
  margin-top: 6px;
  margin-left: 2px;
  font-weight: 300;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cl-nav .bloc-menu {
  margin-left: auto;
}

.cl-nav .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-nav .nav-item {
  position: relative;
}

.cl-nav .navbar-nav > .nav-item > .nav-link {
  position: relative;
  display: block;
  padding: 10px 13px;
  font-size: 16px;
  color: var(--vert);
}

.cl-nav .navbar-nav > .nav-item > .nav-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 1px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.cl-nav .navbar-nav > .nav-item:hover > .nav-link::after,
.cl-nav .navbar-nav > .nav-item.active > .nav-link::after {
  transform: scaleX(1);
}

.cl-nav .nav-link:hover {
  color: var(--terra);
  text-decoration: none;
}

.cl-sous-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 290px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(32, 51, 41, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.cl-nav .dropdown:hover .cl-sous-menu,
.cl-nav .dropdown:focus-within .cl-sous-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cl-sous-menu .nav-link {
  display: block;
  padding: 8px 22px;
  font-size: 15.5px;
  color: var(--vert);
  transition: color .3s ease, padding-left .3s ease;
}

.cl-sous-menu .nav-link:hover {
  padding-left: 28px;
}

.cl-mobile-only {
  display: none;
}

.cl-rdv {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 55px;
  padding: 0 26px 0 30px;
  border-radius: 28px;
  background: var(--terra);
  color: var(--creme) !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color .35s ease;
}

.cl-rdv:hover {
  background: #93380f;
}

.btn-menu {
  display: none;
  width: 46px;
  height: 46px;
  padding: 12px 10px;
  margin-left: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--vert);
  cursor: pointer;
}

.btn-menu span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: #fff;
  transition: transform .35s ease, opacity .35s ease;
}

.btn-menu.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.btn-menu.open span:nth-child(2) {
  opacity: 0;
}

.btn-menu.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.cl-hero {
  background: var(--creme);
  border-bottom: 1px solid var(--ligne);
  padding: 56px 0 44px;
  overflow: hidden;
}

.cl-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 60px;
  align-items: start;
  max-width: 1318px;
  margin: 0 auto;
  padding: 0 24px;
}

.cl-hero-titre {
  max-width: 540px;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: var(--vert-titre);
  margin: 0 0 38px;
  font-variation-settings: "WONK" 0, "SOFT" 0;
}

.cl-hero-lead {
  font-weight: 500;
  font-size: 20px !important;
  line-height: 1.2;
  color: var(--vert);
  margin-bottom: 34px;
  max-width: 545px;
}

.cl-hero-sous {
  font-size: 18px;
  line-height: 1.2;
  color: var(--vert);
  margin-bottom: 34px;
  max-width: 510px;
}

.cl-hero-visuel {
  position: relative;
  width: 100%;
  max-width: 585px;
  justify-self: end;
}

.cl-hero-slider {
  position: relative;
  aspect-ratio: 585 / 536;
  border-radius: 30px;
  overflow: hidden;
  background: var(--sauge);
  isolation: isolate;
}

.cl-hero-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 8s ease-out;
}

.cl-hero-slider img.is-actif {
  opacity: 1;
  transform: scale(1);
}

.cl-engagements {
  background: #fff;
  border-bottom: 1px solid var(--ligne);
}

.cl-engagements ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 44px 22px;
  list-style: none;
}

.cl-engagements li {
  position: relative;
  font-family: var(--title-font);
  font-weight: 700;
  font-style: italic;
  font-size: 28.7px;
  line-height: 1.1;
  color: var(--terra);
  white-space: nowrap;
}

.cl-engagements li + li::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(20px, 3.4vw, 52px));
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--peche-clair);
}

.cl-approche {
  position: relative;
  background: var(--sauge);
  padding: 118px 0 86px;
  overflow: hidden;
}

.cl-approche-deco {
  right: 0;
  top: 3px;
  width: 319px;
  transform-origin: 90% 100%;
  animation: cl-balance 11s ease-in-out infinite alternate;
}

.cl-approche-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px;
}

.cl-approche-texte p {
  color: #2b342e;
  line-height: 1.22;
  max-width: 595px;
}

.cl-approche-texte p:first-child {
  margin-bottom: 26px;
}

.cl-approche-texte p:last-child {
  color: var(--texte-doux);
  margin-bottom: 0;
}

.cl-raisons {
  position: relative;
  background: var(--creme);
  padding: 98px 0 68px;
  border-bottom: 1px solid var(--ligne);
  overflow: hidden;
}

.cl-raisons-deco {
  left: -118px;
  top: -23px;
  width: 652px;
  opacity: .9;
  transform-origin: 10% 100%;
  animation: cl-balance 13s ease-in-out infinite alternate-reverse;
}

.cl-raisons .cl-container {
  position: relative;
  z-index: 1;
}

.cl-raisons .cl-titre {
  margin-bottom: 52px;
}

.cl-raisons-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 22px;
  margin: 0 -40px;
}

.cl-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 298px;
  padding: 20px 28px 30px;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 20px;
  color: #2b342e !important;
  text-decoration: none !important;
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.cl-carte:hover {
  transform: translateY(-6px);
  border-color: #dcd3c1;
  box-shadow: 0 22px 44px rgba(32, 51, 41, .08);
}

.cl-carte-num {
  align-self: center;
  font-family: var(--title-font);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 18px;
  transition: transform .45s ease;
}

.cl-carte:hover .cl-carte-num {
  transform: translateY(-3px) scale(1.06);
}

.cl-carte:nth-child(1) .cl-carte-num { color: var(--peche); }
.cl-carte:nth-child(2) .cl-carte-num { color: #bccfb5; }
.cl-carte:nth-child(3) .cl-carte-num { color: var(--vert); }
.cl-carte:nth-child(4) .cl-carte-num { color: #768076; }
.cl-carte:nth-child(5) .cl-carte-num { color: var(--terra-cta); }

.cl-carte-titre {
  align-self: stretch;
  text-align: center;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.22;
  color: #2b342e;
  margin: 0 auto 14px;
  max-width: 360px;
}

.cl-carte p {
  line-height: 1.22;
  margin-bottom: 22px;
}

.cl-carte .cl-lien {
  margin-top: auto;
}

.cl-carte-rdv {
  align-items: center;
  justify-content: center;
  background: var(--peche);
  border-color: var(--peche);
  text-align: center;
}

.cl-carte-rdv-ico {
  margin-bottom: 42px;
}

.cl-carte-rdv-txt {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--vert-titre);
  margin-bottom: 14px;
  transition: color .45s ease;
}

.cl-carte-rdv-logo {
  max-width: 212px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(15%) sepia(16%) saturate(1170%) hue-rotate(96deg) brightness(92%) contrast(90%);
  transition: filter .45s ease;
}

.cl-carte-rdv:hover {
  background: var(--terra-cta);
  border-color: var(--terra-cta);
}

.cl-carte-rdv:hover .cl-carte-rdv-txt {
  color: #fff;
}

.cl-carte-rdv:hover .cl-carte-rdv-logo {
  filter: none;
}

.cl-carte-rdv:hover .cl-carte-rdv-ico {
  filter: brightness(0) invert(1);
}

.cl-presentation {
  background: #fff;
  padding: 40px 0 66px;
}

.cl-presentation-inner {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr) 380px;
  align-items: center;
  gap: 0;
  padding-left: 0;
}

.cl-portrait {
  position: relative;
  width: 372px;
  padding: 0 70px 0 70px;
  margin-left: -30px;
}

.cl-portrait-arche {
  position: relative;
  aspect-ratio: 302 / 386;
  border-radius: 151px 151px 0 0;
  overflow: hidden;
  background: #d9c3b6;
}

.cl-portrait-arche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  filter: sepia(.55) saturate(.75) brightness(1.02) contrast(.95);
  transform: scale(1.03);
  transition: transform 1.2s ease;
}

.cl-portrait:hover .cl-portrait-arche img {
  transform: scale(1.07);
}

.cl-pastille {
  position: absolute;
  left: 0;
  top: 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--terra-cta);
  color: #fff;
  font-size: 14.9px;
  line-height: 1.15;
  text-align: center;
  transform: rotate(-20deg);
  animation: cl-flotte 6s ease-in-out infinite;
}

.cl-presentation-texte {
  padding: 0 34px 0 54px;
}

.cl-presentation-texte .cl-titre {
  margin-bottom: 24px;
}

.cl-presentation-texte p {
  line-height: 1.22;
  margin-bottom: 30px;
}

.cl-reassurance {
  list-style: none;
  margin: 0;
  padding: 72px 0 80px 58px;
  border-left: 1px solid var(--ligne);
}

.cl-reassurance li {
  display: flex;
  align-items: center;
  gap: 21px;
  min-height: 46px;
  font-size: 18px;
  line-height: 1.17;
  color: #2b342e;
}

.cl-reassurance li + li {
  margin-top: 19px;
}

.cl-reassurance img {
  flex: 0 0 43px;
  object-fit: contain;
}

.cl-etapes {
  position: relative;
  background: var(--sauge);
  padding: 78px 0 38px;
  overflow: hidden;
}

.cl-etapes-entete {
  position: relative;
  text-align: center;
  margin-bottom: 64px;
}

.cl-etapes-deco {
  left: 50%;
  top: -94px;
  width: 186px;
  margin-left: -82px;
  transform-origin: 30% 90%;
  animation: cl-balance 10s ease-in-out infinite alternate;
}

.cl-etapes-entete .cl-titre {
  position: relative;
  z-index: 1;
}

.cl-etapes-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-left: -50px !important;
  margin-right: -50px !important;
  list-style: none;
  margin: 0 0 70px;
  padding: 0;
}

.cl-etape {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.cl-etape + .cl-etape::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 46px;
  width: 27px;
  height: 23px;
  background: url(../images/fleche-etape.png) no-repeat center / contain;
  animation: cl-pousse 2.8s ease-in-out infinite;
}

.cl-etape-ico {
  flex: 0 0 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  transition: transform .5s ease;
}

.cl-etape:hover .cl-etape-ico {
  transform: translateY(-4px);
}

.cl-etape-ico img {
  max-width: 48px;
  max-height: 58px;
  object-fit: contain;
}

.cl-etape h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 21.3px;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--vert);
  margin: 0 0 30px;
}

.cl-etape-num {
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sauge-moyen);
  color: #fff;
  font-size: 21.3px;
  letter-spacing: 0;
}

.cl-etape p {
  font-size: 16px;
  line-height: 1.22;
  letter-spacing: .04em;
  color: var(--vert);
  margin: 0;
}

.cl-cabinets {
  background: #fff;
  padding: 94px 0 64px;
}

.cl-cabinets .cl-titre {
  margin-bottom: 33px;
}

.cl-cabinets-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
}

.cl-cabinet {
  display: flex;
  min-height: 240px;
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: 20px;
  overflow: hidden;
  color: #2b342e !important;
  text-decoration: none !important;
  transition: transform .45s ease, box-shadow .45s ease;
}

.cl-cabinet:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(32, 51, 41, .08);
}

.cl-cabinet-img {
  flex: 0 0 38%;
  overflow: hidden;
  background: var(--sauge);
}

.cl-cabinet-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}

.cl-cabinet:hover .cl-cabinet-img img {
  transform: scale(1.06);
}

.cl-cabinet-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 30px 30px 40px;
}

.cl-cabinet-ville {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  margin-bottom: 14px;
}

.cl-cabinet-ville small {
  display: block;
  font-size: 18px;
  font-weight: 600;
}

.cl-cabinet-adresse {
  font-size: 18px;
  line-height: 1.22;
  margin-bottom: 30px;
}

.cl-cabinets-note {
  margin: 44px 0 0;
  max-width: 770px;
  line-height: 1.22;
  color: var(--texte-doux);
}

.cl-cta {
  position: relative;
  background: var(--terra-cta);
  padding: 76px 24px 44px;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.cl-cta-deco-g {
  left: -31px;
  top: 52px;
  width: 319px;
  opacity: .8;
  transform-origin: 50% 50%;
  animation: cl-balance 12s ease-in-out infinite alternate;
}

.cl-cta-deco-d {
  right: 21px;
  top: -80px;
  width: 420px;
  opacity: .8;
  transform-origin: 30% 100%;
  animation: cl-balance 14s ease-in-out infinite alternate-reverse;
}

.cl-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.cl-cta .cl-titre {
  color: #fff;
  margin-bottom: 26px;
}

.cl-cta .cl-titre em {
  color: var(--peche-clair);
}

.cl-cta p {
  color: #fff;
  line-height: 1.22;
  margin-bottom: 18px;
}

.cl-cta p + div {
  margin-top: 46px;
}

.cl-footer {
  background: var(--vert);
  color: var(--creme);
}

.cl-footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1318px;
  margin: 0 auto;
  padding: 44px 24px 50px;
}

.cl-footer p {
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  margin: 0;
  color: var(--creme);
}

.cl-footer a {
  color: var(--creme);
}

.cl-footer a:hover {
  color: var(--peche-clair);
  text-decoration: none;
}

.cl-footer-logo {
  display: inline-block;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 32.6px;
  line-height: 1.1;
  color: #fff !important;
  margin-bottom: 4px;
}

.cl-footer .cl-footer-titre {
  font-weight: 500;
  font-size: 20px;
  margin: 13px 0 14px;
}

.cl-footer .boxfooter {
  background: var(--creme);
  padding: 18px 0 14px;
  text-align: center;
}

.cl-footer .footer-ico {
  width: 152px;
  height: auto;
}

@keyframes cl-balance {
  from {
    transform: rotate(-2.2deg);
  }

  to {
    transform: rotate(2.2deg);
  }
}

@keyframes cl-flotte {
  0%,
  100% {
    transform: rotate(-20deg) translateY(0);
  }

  50% {
    transform: rotate(-16deg) translateY(-7px);
  }
}

@keyframes cl-pousse {
  0%,
  100% {
    transform: translateX(0);
    opacity: .7;
  }

  50% {
    transform: translateX(6px);
    opacity: 1;
  }
}

@media (max-width: 1300px) {
  .cl-raisons-grille {
    margin: 0;
  }

  .cl-etapes-liste {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .cl-nav {
    gap: 18px;
  }

  .cl-nav .navbar-nav > .nav-item > .nav-link {
    padding: 10px 8px;
  }

  .cl-nav .navbar-nav > .nav-item > .nav-link::after {
    left: 8px;
    right: 8px;
  }

  .cl-engagements li {
    font-size: 24px;
  }

  .cl-presentation-inner {
    grid-template-columns: 340px minmax(0, 1fr) 330px;
  }

  .cl-portrait {
    width: 340px;
    margin-left: 0;
    padding: 0 40px 0 60px;
  }

  .cl-presentation-texte {
    padding: 0 40px;
  }

  .cl-reassurance {
    padding-left: 36px;
  }

  .cl-cabinets-grille {
    gap: 40px;
  }
}

@media (max-width: 1199px) {
  .cl-engagements ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 70px;
    padding: 34px 20px;
  }

  .cl-engagements li + li::before {
    left: -40px;
  }

  .cl-engagements li:nth-child(3)::before {
    display: none;
  }

  .btn-menu {
    display: block;
  }

  .cl-nav .bloc-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(380px, 88vw);
    margin: 0;
    padding: 100px 30px 40px;
    background: var(--creme);
    box-shadow: -20px 0 50px rgba(32, 51, 41, .15);
    overflow-y: auto;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), visibility .5s;
    z-index: 5;
  }

  .cl-nav .bloc-menu.open {
    transform: translateX(0);
    visibility: visible;
  }

  .cl-nav .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .cl-nav .navbar-nav > .nav-item {
    border-bottom: 1px solid var(--ligne);
  }

  .cl-nav .navbar-nav > .nav-item > .nav-link {
    padding: 14px 4px;
    font-size: 18px;
  }

  .cl-nav .navbar-nav > .nav-item > .nav-link::after {
    display: none;
  }

  .cl-mobile-only {
    display: block;
  }

  .cl-sous-menu {
    position: static;
    min-width: 0;
    padding: 0 0 12px 12px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .cl-sous-menu .nav-link {
    padding: 6px 4px;
    font-size: 16px;
  }

  .btn-menu {
    position: relative;
    z-index: 6;
  }

  .cl-rdv {
    margin-left: auto;
  }

  body.cl-menu-ouvert {
    overflow: hidden;
  }

  .cl-hero-inner {
    padding-left: 24px;
    gap: 40px;
  }

  .cl-hero-titre {
    font-size: 42px;
  }

  .cl-approche-inner {
    padding-left: 24px;
    gap: 40px;
  }

  .cl-raisons .cl-titre {
    padding-left: 0;
  }

  .cl-raisons-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cl-presentation-inner {
    grid-template-columns: 320px minmax(0, 1fr);
    row-gap: 40px;
  }

  .cl-portrait {
    width: 320px;
  }

  .cl-reassurance {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 40px;
    padding: 34px 0 0;
    border-left: 0;
    border-top: 1px solid var(--ligne);
  }

  .cl-reassurance li + li {
    margin-top: 0;
  }

  .cl-etapes-liste {
    gap: 40px;
  }

  .cl-etape {
    flex-direction: column;
    gap: 18px;
  }

  .cl-etape + .cl-etape::before {
    left: -36px;
  }

  .cl-cabinet {
    flex-direction: column;
  }

  .cl-cabinet-img {
    flex: 0 0 220px;
  }

  .cl-footer-inner {
    padding-left: 24px;
  }
}

@media (max-width: 991px) {
  .cl-hero-inner,
  .cl-approche-inner {
    grid-template-columns: 1fr;
  }

  .cl-hero-visuel {
    justify-self: stretch;
    max-width: none;
  }

  .cl-hero-slider {
    aspect-ratio: 16 / 11;
  }

  .cl-engagements ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 60px;
    padding: 34px 20px;
  }

  .cl-engagements li + li::before {
    left: -35px;
  }

  .cl-engagements li:nth-child(3)::before {
    display: none;
  }

  .cl-presentation-inner {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .cl-presentation-texte {
    padding: 0;
    text-align: center;
  }

  .cl-reassurance {
    justify-self: stretch;
  }

  .cl-etapes-liste {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .cl-etape {
    flex-direction: row;
  }

  .cl-etape + .cl-etape::before {
    display: none;
  }

  .cl-cabinets-grille {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .cl-cabinet {
    flex-direction: row;
  }

  .cl-cabinet-img {
    flex: 0 0 38%;
  }

  .cl-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  body p {
    font-size: 16.5px;
  }

  .cl-top {
    justify-content: center;
  }

  .cl-top-lieux {
    display: none;
  }

  .cl-nav {
    min-height: 78px;
    gap: 10px;
    padding: 10px 16px;
  }

  .cl-logo-nom {
    font-size: 25px;
  }

  .cl-logo-metier {
    font-size: 14px;
  }

  .cl-rdv {
    width: 46px;
    min-height: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .cl-rdv span {
    display: none;
  }

  .btn-menu {
    margin-left: 0;
  }

  .cl-titre {
    font-size: 29px;
    letter-spacing: .02em;
  }

  .cl-hero {
    padding: 36px 0 40px;
  }

  .cl-hero-inner {
    padding: 0 16px;
  }

  .cl-hero-titre {
    font-size: 33px;
    margin-bottom: 24px;
  }

  .cl-hero-lead {
    font-size: 18px !important;
    margin-bottom: 20px;
  }

  .cl-btns {
    gap: 14px;
  }

  .cl-engagements ul {
    flex-direction: column;
    gap: 10px;
  }

  .cl-engagements li {
    font-size: 22px;
  }

  .cl-engagements li + li::before {
    display: none;
  }

  .cl-container {
    padding: 0 16px;
  }

  .cl-approche {
    padding: 64px 0;
  }

  .cl-approche-deco {
    width: 180px;
    opacity: .6;
  }

  .cl-approche-inner {
    padding-left: 16px;
  }

  .cl-raisons {
    padding: 64px 0;
  }

  .cl-raisons-deco {
    width: 380px;
    opacity: .6;
  }

  .cl-raisons .cl-titre {
    margin-bottom: 32px;
  }

  .cl-raisons-grille {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cl-carte {
    min-height: 0;
  }

  .cl-carte-titre {
    font-size: 22px;
  }

  .cl-carte-rdv {
    min-height: 240px;
  }

  .cl-carte-rdv-ico {
    margin-bottom: 24px;
  }

  .cl-portrait {
    width: 300px;
    padding: 0 30px 0 60px;
  }

  .cl-pastille {
    width: 100px;
    height: 100px;
    font-size: 13.5px;
  }

  .cl-reassurance {
    grid-template-columns: 1fr;
  }

  .cl-etapes {
    padding-top: 90px;
  }

  .cl-etapes-entete {
    margin-bottom: 40px;
  }

  .cl-etape {
    gap: 16px;
  }

  .cl-etape-ico {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
  }

  .cl-etape-ico img {
    max-width: 34px;
    max-height: 40px;
  }

  .cl-etape h3 {
    font-size: 19px;
    margin-bottom: 12px;
  }

  .cl-cabinets {
    padding: 64px 0 50px;
  }

  .cl-cabinet {
    flex-direction: column;
  }

  .cl-cabinet-img {
    flex: 0 0 190px;
  }

  .cl-cabinet-txt {
    padding: 24px;
  }

  .cl-cta {
    padding: 60px 16px 44px;
  }

  .cl-cta-deco-g,
  .cl-cta-deco-d {
    opacity: .35;
  }

  .cl-footer-inner {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 40px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-deco,
  .cl-pastille,
  .cl-etape + .cl-etape::before {
    animation: none !important;
  }

  .cl-hero-slider img {
    transition: opacity .6s ease;
    transform: none !important;
  }
}

#axo-fg h1,
#axo-fg h2,
#axo-fg h3,
#axo-fg h4,
#axo-fg h5,
#axo-fg h6 {
  text-transform: none;
  letter-spacing: .02em;
  color: #2b342e;
}

#axo-fg .h1 {
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.18;
  color: var(--vert-titre);
}

#axo-fg .h2 {
  font-size: clamp(27px, 2.8vw, 36px);
  line-height: 1.2;
}

#axo-fg .h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
}

#axo-fg .h5 {
  font-weight: 600;
  line-height: 1.25;
}

#axo-fg p,
#axo-fg li {
  font-size: 18px;
  line-height: 1.5;
}

#axo-fg p a {
  color: var(--terra);
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
  text-decoration-color: rgba(182, 70, 26, .35) !important;
  transition: color .3s ease, text-decoration-color .3s ease;
}

#axo-fg p a:hover {
  color: #93380f;
  text-decoration-color: currentColor !important;
}

#axo-fg .back-third p a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .5) !important;
}

#axo-fg .surtext,
#axo-fg .back-second .surtext,
#axo-fg .back-third .surtext,
#axo-fg .back-primary .surtext {
  position: relative;
  padding: 0 0 0 34px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--terra);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
}

#axo-fg .surtext::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: currentColor;
}

#axo-fg .back-third .surtext {
  color: var(--peche-clair);
}

#axo-fg nav.fil-arianne {
  padding-top: 26px;
}

#axo-fg .breadcrumb {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

#axo-fg .breadcrumb-item a {
  color: var(--terra);
}

#axo-fg .breadcrumb-item.active,
#axo-fg .breadcrumb-item {
  color: var(--texte-doux);
}

#axo-fg .breadcrumb-item + .breadcrumb-item::before {
  color: var(--sauge-moyen);
}

body.page #axo-fg {
  overflow: hidden;
}

#axo-fg .cl-intro {
  position: relative;
  margin-top: 26px;
  padding: clamp(56px, 7vw, 92px) 0;
  background: var(--creme);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  margin-left: -15px !important;
  margin-right: -15px !important;
}

#axo-fg .cl-intro::before {
  content: "";
  position: absolute;
  left: -90px;
  top: -40px;
  width: 360px;
  height: 570px;
  background: url(../images/deco-rameau.png) no-repeat left top / contain;
  opacity: .8;
  pointer-events: none;
  transform-origin: 20% 100%;
  animation: cl-balance 13s ease-in-out infinite alternate;
}

#axo-fg .cl-intro .container {
  position: relative;
  z-index: 1;
}

#axo-fg .cl-intro p {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

#axo-fg .cl-intro p:nth-of-type(2) {
  font-size: 20px;
  font-weight: 500;
  color: var(--vert);
}

#axo-fg .decor-m::before,
#axo-fg .decor-l::before {
  background: var(--peche);
}

#axo-fg .back-gris {
  background-color: var(--sauge);
}

#axo-fg .card-icon {
  border: 1px solid transparent;
  transition: transform .45s ease, box-shadow .45s ease;
}

#axo-fg .card-icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(32, 51, 41, .08);
}

#axo-fg .card-icon .fg-iconebox {
  background: var(--vert);
}

#axo-fg .cl-btn-ligne {
  margin: 34px 0 0;
}

#axo-fg .cl-btn-ligne a.cl-btn {
  text-decoration: none !important;
  font-size: 16px;
  line-height: 1.2;
  padding: 10px 28px;
}

#axo-fg .cl-faq .text-center {
  margin-bottom: 10px;
}

#axo-fg .cl-img-texte {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  max-height: 440px;
}

#axo-fg .cl-img-texte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  #axo-fg .cl-img-texte {
    width: 100%;
    max-width: 515px;
    min-height: 0;
    aspect-ratio: 515 / 388;
  }
}

#axo-fg .cl-faq .fg-faq-item {
  border-radius: 20px;
  border-color: var(--ligne);
  padding: 22px 32px;
  margin-bottom: 12px;
  background: var(--creme);
}

#axo-fg .cl-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#axo-fg .cl-faq-q {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

#axo-fg .cl-faq .cl-btn-ligne {
  text-align: center;
  margin-top: 46px;
}

#axo-fg .cl-cartes-pages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

#axo-fg .cl-carte-page {
  min-height: 0;
  padding: 34px 30px 30px;
  background: var(--creme);
}

#axo-fg .cl-carte-page .cl-carte-titre {
  font-size: 23px;
  text-align: left;
  margin: 0 0 16px;
}

#axo-fg .cl-carte-page p {
  font-size: 17px;
}

#axo-fg .cl-tarifs-wrap {
  overflow-x: auto;
  border: 1px solid var(--ligne);
  border-radius: 20px;
  background: #fff;
}

#axo-fg .cl-tarifs {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  text-align: left;
}

#axo-fg .cl-tarifs th,
#axo-fg .cl-tarifs td {
  padding: 16px 26px;
  border-bottom: 1px solid var(--ligne);
}

#axo-fg .cl-tarifs tbody tr:last-child th,
#axo-fg .cl-tarifs tbody tr:last-child td {
  border-bottom: 0;
}

#axo-fg .cl-tarifs thead th {
  background: var(--vert);
  color: #fff;
  font-weight: 600;
}

#axo-fg .cl-tarifs thead th + th,
#axo-fg .cl-tarifs td {
  text-align: center;
  width: 22%;
}

#axo-fg .cl-tarifs tbody th {
  font-weight: 500;
  color: #2b342e;
}

#axo-fg .cl-tarifs td {
  font-family: var(--title-font);
  font-size: 21px;
  font-weight: 600;
  color: var(--terra);
}

#axo-fg .cl-tarifs tbody tr {
  transition: background-color .3s ease;
}

#axo-fg .cl-tarifs tbody tr:hover {
  background: var(--creme);
}

#axo-fg .cl-duo {
  row-gap: 24px;
}

#axo-fg .cl-duo-col {
  padding: 0 12px;
}

#axo-fg .cl-duo-box {
  height: 100%;
  padding: clamp(30px, 4vw, 50px);
}

#axo-fg .cl-duo-box .cl-btn-ligne {
  margin-top: 26px;
}

#axo-fg .cl-plan li {
  font-size: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ligne);
}

#axo-fg .cl-plan a {
  color: var(--vert);
}

#axo-fg .cl-plan a:hover {
  color: var(--terra);
}

@media (max-width: 991px) {
  #axo-fg .cl-cartes-pages {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  #axo-fg p,
  #axo-fg li {
    font-size: 16.5px;
  }

  #axo-fg .cl-intro::before {
    width: 200px;
    opacity: .5;
  }

  #axo-fg .cl-intro p:nth-of-type(2) {
    font-size: 18px;
  }

  #axo-fg .cl-tarifs th,
  #axo-fg .cl-tarifs td {
    padding: 12px 14px;
  }

  #axo-fg .cl-tarifs,
  #axo-fg .cl-tarifs td {
    font-size: 16px;
  }

  #axo-fg .cl-faq .fg-faq-item {
    padding: 18px 20px;
  }

  #axo-fg .cl-faq-q {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #axo-fg .cl-intro::before {
    animation: none;
  }
}

#axo-fg .card-icon {
  overflow: hidden;
}

.cl-cta p a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cl-cta p a:hover {
  color: var(--peche-clair);
}