/* ------------------------------------------------------------------
   MADEGEECO — ajouts demandes au-dela de la maquette.

   Cette feuille est volontairement separee de fidelite.css : celle-ci est
   regeneree depuis la maquette et ne doit rien contenir d'invente. Tout ce
   qui s'ecarte du design d'origine vit ici, et se lit d'un coup d'oeil.
   ------------------------------------------------------------------ */

/* Pictogrammes des equipements et services des fiches de villa.
   La maquette listait les libelles en texte seul. */
body .elementor.elementor.elementor .amenity-list li {
  display: flex;
  align-items: center;
  gap: 13px;
}

body .elementor.elementor.elementor .amenity-list li > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--turquoise-deep);
  /* Le trait garde son epaisseur quelle que soit la taille rendue. */
  vector-effect: non-scaling-stroke;
}

body .elementor.elementor.elementor .amenity-list .amenity-label {
  min-width: 0;
}

/* ------------------------------------------------------------------
   Cartes « Autour de la villa » — reprise de composition.

   La maquette impose 250 px de hauteur a chaque carte et cale tout son
   contenu en haut : titre, texte et fleche tiennent sur 120 px, et les
   130 px restants forment un vide sous le texte, d'autant plus visible
   que l'ecran est large. Verifie au pixel pres des deux cotes avant de
   toucher a quoi que ce soit : le site reproduisait fidelement le defaut.

   Deux tentatives intermediaires ont echoue, et pour la meme raison :
   ancrer la fleche dans l'angle, puis loger une bande photographique sur
   un cote, laissaient dans les deux cas une boite de 250 px pour 90 px de
   texte. On deplacait le vide, on ne le supprimait pas.

   La photographie occupe donc tout le cadre, et le texte se pose dessus,
   en bas, sur un degrade. C'est deja la langue des tuiles d'experience de
   l'accueil (.experience-strip) et des hero : rien d'invente, et plus
   aucun espace mort — la hauteur de la carte sert l'image.

   Note de specificite : ce fichier est charge apres fidelite.css mais
   doit aussi peser plus lourd, sinon les regles de la maquette gagnent.
   D'ou le triple ".elementor" — le meme cran que le contrepoids de
   largeur. C'est la regle de toute cette feuille.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .experience-link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(300px, 25vw, 400px);
  padding: 34px;
  overflow: hidden;
  isolation: isolate;
  background: #102522;
  color: #fff;
}

body .elementor.elementor.elementor .experience-link-card .vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform 620ms var(--ease-out);
}

/* Le degrade est indispensable a la lisibilite : sans lui, un titre clair
   sur un ciel clair disparait. Il reste transparent en haut pour ne pas
   eteindre la photographie. */
body .elementor.elementor.elementor .experience-link-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 26, 25, 0.04) 0%,
    rgba(8, 26, 25, 0.22) 38%,
    rgba(6, 21, 20, 0.72) 72%,
    rgba(4, 16, 15, 0.94) 100%
  );
  transition: opacity 320ms var(--ease-ui);
}

body .elementor.elementor.elementor .experience-link-card:hover .vignette {
  transform: scale(1.05);
}

/* La maquette virait le fond de la carte au turquoise au survol : sous une
   photographie plein cadre, cette teinte ne se voit plus et le survol
   paraissait mort. C'est l'image qui repond desormais. */
body .elementor.elementor.elementor .experience-link-card:hover {
  background: #102522;
}

/* ":not(.cdp-w)" n'est pas une precaution : Elementor enveloppe chaque
   widget dans un div, et une regle ecrite pour le seul bloc de texte de
   la maquette attraperait aussi les enveloppes de la carte, qui
   perdraient leur "display: contents". */
body .elementor.elementor.elementor .experience-link-card > div:not(.cdp-w) {
  position: relative;
  max-width: 42ch;
}

body .elementor.elementor.elementor .experience-link-card .index {
  position: relative;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.66);
}

/* La marge haute du titre vient des valeurs par defaut du navigateur,
   restituees plus haut pour le rythme vertical du reste du site. Dans la
   carte, elle decrochait le titre de son numero de pres de 90 px. */
body .elementor.elementor.elementor .experience-link-card h3 {
  margin: 0;
  color: #fff;
  max-width: none;
}

body .elementor.elementor.elementor .experience-link-card p,
body .elementor.elementor.elementor .experience-link-card:hover p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.78);
  max-width: none;
}

/* La photographie porte l'affordance ; la fleche ferait doublon. */
body .elementor.elementor.elementor .experience-link-card .card-arrow {
  display: none;
}

/* Sous 620 px la carte se resserre un peu : une photographie plein cadre
   n'a pas besoin de 400 px de haut sur un telephone. */
@media (max-width: 620px) {
  body .elementor.elementor.elementor .experience-link-card {
    min-height: 260px;
    padding: 26px;
  }
}

/* Sous 620 px la liste passe sur une colonne : la gouttiere se resserre
   pour que les libelles longs ne se coupent pas en deux lignes. */
@media (max-width: 620px) {
  body .elementor.elementor.elementor .amenity-list li {
    gap: 11px;
  }
  body .elementor.elementor.elementor .amenity-list li > svg {
    width: 18px;
    height: 18px;
  }
}

/* ------------------------------------------------------------------
   Fiches activites — la composition du catalogue papier.

   Le depliant consacre une page pleine a chaque journee : une banniere
   photographique avec le titre pose dessus, l'heure de depart rappelee
   dans un mediallon, les moments de la journee annonces chacun par un
   pictogramme, une pastille au-dessus de la liste de ce qui est compris,
   une photo en polaroid, une bande « Participants » qui porte les prix.

   Rien n'est invente ici : le hero cinematographique, la liste
   d'engagements, la grille tarifaire du catamaran existent deja dans la
   maquette. Cette feuille ne fait que trois choses : donner au hero une
   image variable, poser la mosaique photographique, et habiller le bloc
   « ce qui est compris ».
   ------------------------------------------------------------------ */

/* La banniere. L'image ne peut pas etre ecrite dans la feuille : elle
   change a chaque journee. Elle arrive donc par une propriete
   personnalisee posee sur la section, dont le pseudo-element herite. */
body .elementor.elementor.elementor .mgc-hero-activite::before {
  background-image: var(--mgc-hero, none);
  background-position: center 55%;
}

/* Sans photographie, le fond nu du hero reste un vert profond : le titre
   doit rester lisible dans les deux cas. */
body .elementor.elementor.elementor .mgc-hero-activite {
  background: #17312f;
}

body .elementor.elementor.elementor .mgc-hero-activite .eyebrow a {
  color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}

body .elementor.elementor.elementor .mgc-hero-activite .eyebrow a:hover {
  border-bottom-color: var(--turquoise);
}

/* ------------------------------------------------------------------
   Ce qui est compris.

   Le catalogue met la liste a coche a gauche et une photographie a
   droite. La coche est un trait turquoise dans un rond clair : la meme
   que les listes d'equipements des villas, en plus affirmee, parce
   qu'ici elle porte l'argument de vente.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-compris-section {
  background: var(--paper);
}

body .elementor.elementor.elementor .mgc-compris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

body .elementor.elementor.elementor .mgc-coches {
  list-style: none;
  margin: clamp(30px, 3vw, 46px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

body .elementor.elementor.elementor .mgc-coches li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  transition: padding-left 0.45s var(--ease-out);
}

body .elementor.elementor.elementor .mgc-coches li:hover {
  padding-left: 10px;
}

body .elementor.elementor.elementor .mgc-coches svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--turquoise-soft);
  color: var(--turquoise-deep);
  box-sizing: content-box;
}

/* « A prevoir » n'est pas une prestation : c'est une consigne. Elle se
   detache de la liste par un filet turquoise plutot que par un cadre,
   pour ne pas ajouter une boite de plus a la page. */
body .elementor.elementor.elementor .mgc-prevoir {
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--turquoise);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

body .elementor.elementor.elementor .mgc-prevoir strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body .elementor.elementor.elementor .mgc-compris-photo {
  margin: 0;
  position: sticky;
  top: 120px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

body .elementor.elementor.elementor .mgc-compris-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  body .elementor.elementor.elementor .mgc-compris {
    grid-template-columns: 1fr;
  }
  body .elementor.elementor.elementor .mgc-compris-photo {
    position: static;
    aspect-ratio: 3 / 2;
  }
}

/* ------------------------------------------------------------------
   La bande « Participants ».

   Elle reprend la grille tarifaire du catamaran. Deux ajouts : le bouton
   d'appel sous le texte d'introduction, et les lignes d'intitule des
   grilles libres — la plongee vend des forfaits qui n'ont pas de palier,
   et leurs sous-titres doivent se lire comme des titres, pas comme des
   tarifs.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .cabin-pricing-intro .button {
  margin-top: clamp(26px, 3vw, 38px);
}

body .elementor.elementor.elementor .cabin-pricing-list li.est-entete {
  padding-top: 34px;
  border-bottom-color: rgba(255, 255, 255, 0.32);
}

body .elementor.elementor.elementor .cabin-pricing-list li.est-entete .cabin-pricing-guests {
  color: var(--turquoise);
  font-size: 12px;
  letter-spacing: 0.2em;
}



/* La bande de reperes suit immediatement la banniere : la marge haute
   prevue pour la page d'accueil, ou elle ferme un long paragraphe, ferait
   ici un trou entre la photographie et les chiffres. */
body .elementor.elementor.elementor .mgc-reperes-section .stats-grid {
  margin-top: 0;
}

/* Sans photographie, la liste occupe toute la largeur plutot que de
   laisser une colonne vide a sa droite. */
body .elementor.elementor.elementor .mgc-compris.est-seul {
  grid-template-columns: minmax(0, 760px);
}

/* ------------------------------------------------------------------
   Le bento des fiches activite.

   Cinquieme version, et la premiere ou le CSS n'a rien a rattraper : les
   photographies sont maintenant produites au rapport de leur case. B en
   portrait 2:3, C, D et E en carre. Plus aucun recadrage, et la
   geometrie tombe juste.

   Sur douze colonnes :

     B  colonnes 1 a 6,  deux rangees
     C  colonnes 7 a 9,  rangee 1
     D  colonnes 10 a 12, rangee 1
     E  colonnes 7 a 12, rangee 2

   La colonne de droite mesure exactement la hauteur du portrait de
   gauche : un carre sur trois colonnes fait un quart de la largeur
   totale, un carre sur six en fait la moitie, et 1/4 + 1/2 = 3/4, soit
   la hauteur d'un 2:3 sur six colonnes. Rien n'a ete arrondi.

   B n'a pas de aspect-ratio : il remplit ses deux rangees. C'est ce qui
   absorbe la gouttiere, et le portrait etant deja au bon rapport, il n'y
   perd rien.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 1vw, 18px);
  margin-top: clamp(40px, 4.5vw, 72px);
}

body .elementor.elementor.elementor .mgc-bento-tuile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--stone);
  outline: 1px solid rgba(207, 203, 195, 0.5);
  outline-offset: -5px;
}

body .elementor.elementor.elementor .mgc-bento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease-out);
}

body .elementor.elementor.elementor .mgc-bento-tuile:hover img {
  transform: scale(1.04);
}

body .elementor.elementor.elementor .mgc-bento-tuile[data-case="B"] {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
}

body .elementor.elementor.elementor .mgc-bento-tuile[data-case="C"] {
  grid-column: 7 / 10;
  grid-row: 1;
  aspect-ratio: 1 / 1;
}

body .elementor.elementor.elementor .mgc-bento-tuile[data-case="D"] {
  grid-column: 10 / 13;
  grid-row: 1;
  aspect-ratio: 1 / 1;
}

body .elementor.elementor.elementor .mgc-bento-tuile[data-case="E"] {
  grid-column: 7 / 13;
  grid-row: 2;
  aspect-ratio: 1 / 1;
}

/* Le quad n'a pas de portrait : sans lui, les trois carres se partagent
   la largeur au lieu de laisser un vide a gauche. */
body .elementor.elementor.elementor .mgc-bento:not([data-cases*="B"]) .mgc-bento-tuile[data-case="C"] {
  grid-column: 1 / 5;
}
body .elementor.elementor.elementor .mgc-bento:not([data-cases*="B"]) .mgc-bento-tuile[data-case="D"] {
  grid-column: 5 / 9;
}
body .elementor.elementor.elementor .mgc-bento:not([data-cases*="B"]) .mgc-bento-tuile[data-case="E"] {
  grid-column: 9 / 13;
  grid-row: 1;
}

@media (max-width: 900px) {
  body .elementor.elementor.elementor .mgc-bento-tuile[data-case="B"] {
    grid-column: 1 / 13;
    grid-row: auto;
    aspect-ratio: 3 / 2;
  }
  body .elementor.elementor.elementor .mgc-bento-tuile[data-case="C"],
  body .elementor.elementor.elementor .mgc-bento:not([data-cases*="B"]) .mgc-bento-tuile[data-case="C"] {
    grid-column: 1 / 7;
    grid-row: auto;
  }
  body .elementor.elementor.elementor .mgc-bento-tuile[data-case="D"],
  body .elementor.elementor.elementor .mgc-bento:not([data-cases*="B"]) .mgc-bento-tuile[data-case="D"] {
    grid-column: 7 / 13;
    grid-row: auto;
  }
  body .elementor.elementor.elementor .mgc-bento-tuile[data-case="E"],
  body .elementor.elementor.elementor .mgc-bento:not([data-cases*="B"]) .mgc-bento-tuile[data-case="E"] {
    grid-column: 1 / 13;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ------------------------------------------------------------------
   La respiration : la panoramique, pleine largeur.

   Le seul moment de la page ou l'image touche les deux bords. Elle sort
   du conteneur par une marge negative calculee sur la largeur de celui-
   ci ; c'est plus sur qu'un 100vw, qui compte la barre de defilement et
   deborde de quelques pixels.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-respiration {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 5;
  max-height: 520px;
}

body .elementor.elementor.elementor .mgc-respiration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------------
   Le deroule, en frise sur photographie.

   Repris du bloc « journee a bord » de la page catamaran, a un detail
   pres : cette page-la compte toujours quatre escales, les activites en
   ont trois ou quatre. Le nombre de colonnes suit donc le nombre
   d'etapes, sinon la quatrieme case reste vide et se voit.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-deroule .catamaran-journey-route {
  grid-template-columns: repeat(var(--mgc-etapes, 4), 1fr);
}

@media (max-width: 900px) {
  body .elementor.elementor.elementor .mgc-deroule .catamaran-journey-route {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  body .elementor.elementor.elementor .mgc-deroule .catamaran-journey-route {
    grid-template-columns: 1fr;
  }
}

/* Le texte des etapes vient du catalogue : plus long que les quatre mots
   de la page catamaran. Il lui faut de la place, et un point de coupe. */
body .elementor.elementor.elementor .mgc-deroule .catamaran-journey-stop {
  min-height: 260px;
}

body .elementor.elementor.elementor .mgc-deroule .catamaran-journey-stop h3 {
  font-size: clamp(22px, 1.9vw, 30px);
  margin-top: 18px;
}

body .elementor.elementor.elementor .mgc-deroule .catamaran-journey-stop p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   L'index des douze journees : le bento.

   Les quatre versions precedentes butaient toutes sur la meme chose :
   il n'y avait que des photographies en paysage a distribuer. Une case
   portrait recevait un paysage etire, une case carree un paysage
   ampute. Le motif avait beau varier, les images ne suivaient pas.

   Cinquante-trois photographies ont ete produites aux rapports du
   gabarit — 2:3, 1:1, 16:5 — et chaque place du motif recoit desormais
   celle qui a ete prise a son rapport. C'est le PHP qui choisit, en
   comparant les rapports ; le CSS n'a plus qu'a poser les cases.

   ARITHMETIQUE DU MOTIF, sur douze colonnes

   L'unite u est la largeur d'une colonne. Trois bandes de quatre
   tuiles, chacune haute de six unites — c'est ce qui garantit qu'aucune
   case ne reste vide :

     bande 1   portrait 4 col (6u) | carre 4 col (4u) + carre 4 col
                                   | panoramique 8 col en 4:1 (2u)
               a droite : 4u + 2u = 6u = la hauteur du portrait

     bande 2   le miroir : panoramique en haut, deux carres en dessous,
               portrait a droite

     bande 3   grand carre 6 col (6u) | deux carres 3 col (3u)
                                      | demi-panoramique 6 col en 2:1 (3u)
               a droite : 3u + 3u = 6u

   Les portraits et le grand carre n'ont pas de aspect-ratio : ils
   remplissent leurs deux rangees, ce qui absorbe la gouttiere. Etant
   deja au bon rapport, ils n'y perdent rien.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-bento-index {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(8px, 0.85vw, 15px);
  margin-top: clamp(38px, 4vw, 64px);
}

body .elementor.elementor.elementor .mgc-tuile {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #102522;
  color: #fff;
}

body .elementor.elementor.elementor .mgc-tuile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

body .elementor.elementor.elementor .mgc-tuile:hover img {
  transform: scale(1.05);
}

/* Sans ce voile, un titre clair sur un ciel clair disparait. Il reste
   transparent en haut pour ne pas eteindre la photographie. */
body .elementor.elementor.elementor .mgc-tuile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 24, 22, 0.88) 0%, rgba(8, 24, 22, 0.34) 44%, transparent 72%);
}

/* --- Bande 1 : portrait a gauche ---------------------------------- */
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 1) {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 2) {
  grid-column: 5 / 9;
  grid-row: 1;
  aspect-ratio: 1 / 1;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 3) {
  grid-column: 9 / 13;
  grid-row: 1;
  aspect-ratio: 1 / 1;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 4) {
  grid-column: 5 / 13;
  grid-row: 2;
  aspect-ratio: 4 / 1;
}

/* --- Bande 2 : le miroir ------------------------------------------ */
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 5) {
  grid-column: 1 / 9;
  grid-row: 3;
  aspect-ratio: 4 / 1;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 6) {
  grid-column: 1 / 5;
  grid-row: 4;
  aspect-ratio: 1 / 1;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 7) {
  grid-column: 5 / 9;
  grid-row: 4;
  aspect-ratio: 1 / 1;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 8) {
  grid-column: 9 / 13;
  grid-row: 3 / 5;
}

/* --- Bande 3 : le grand carre ------------------------------------- */
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 9) {
  grid-column: 1 / 7;
  grid-row: 5 / 7;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 10) {
  grid-column: 7 / 10;
  grid-row: 5;
  aspect-ratio: 1 / 1;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 11) {
  grid-column: 10 / 13;
  grid-row: 5;
  aspect-ratio: 1 / 1;
}
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 12) {
  grid-column: 7 / 13;
  grid-row: 6;
  aspect-ratio: 2 / 1;
}

/* --- Le texte pose sur la photographie ---------------------------- */
body .elementor.elementor.elementor .mgc-tuile-copy {
  position: absolute;
  right: clamp(14px, 1.4vw, 26px);
  bottom: clamp(12px, 1.2vw, 22px);
  left: clamp(14px, 1.4vw, 26px);
}

body .elementor.elementor.elementor .mgc-tuile-sur {
  margin: 0 0 4px;
  color: var(--turquoise);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.3;
  text-transform: uppercase;
}

body .elementor.elementor.elementor .mgc-tuile h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.02;
}

/* Les grandes tuiles portent un titre plus affirme : ce sont elles qui
   donnent le ton de leur bande. */
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 1) h3,
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 8) h3,
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 9) h3 {
  font-size: clamp(28px, 2.6vw, 42px);
}

/* Les panoramiques sont basses : le surtitre n'y tient pas. */
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 4) .mgc-tuile-sur,
body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 5) .mgc-tuile-sur {
  display: none;
}

body .elementor.elementor.elementor .mgc-tuile-prix {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.4;
}

body .elementor.elementor.elementor .mgc-tuile-index {
  position: absolute;
  top: clamp(12px, 1.2vw, 20px);
  left: clamp(14px, 1.4vw, 26px);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 25px);
  line-height: 1;
}

body .elementor.elementor.elementor .mgc-tuile-fleche {
  position: absolute;
  top: clamp(10px, 1.2vw, 18px);
  right: clamp(12px, 1.2vw, 20px);
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 260ms var(--ease-ui), transform 260ms var(--ease-ui);
}

body .elementor.elementor.elementor .mgc-tuile:hover .mgc-tuile-fleche {
  opacity: 1;
  transform: none;
}

/* Le motif ne se lit plus sous mille pixels : deux tuiles de front, en
   alternant paysage et carre pour garder un peu de rythme. */
@media (max-width: 1000px) {
  body .elementor.elementor.elementor .mgc-tuile,
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 1),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 2),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 3),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 4),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 5),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 6),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 7),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 8),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 9),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 10),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 11),
  body .elementor.elementor.elementor .mgc-tuile:nth-child(12n + 12) {
    grid-column: span 6;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }
  /* Une grande tuile puis deux carres : le motif se referme toutes les
     trois tuiles, quel que soit leur nombre. L'ancien rythme (une
     grande puis trois carres) laissait un carre seul, donc un trou,
     dans chaque groupe. */
  body .elementor.elementor.elementor .mgc-tuile:nth-child(3n + 1) {
    grid-column: span 12;
    aspect-ratio: 16 / 9;
  }
  /* Un carre qui resterait seul en fin de liste prend toute la largeur. */
  body .elementor.elementor.elementor .mgc-tuile:nth-child(3n + 2):last-child {
    grid-column: span 12;
    aspect-ratio: 16 / 9;
  }
}

/* Sur telephone, une tuile par ligne. Le selecteur est volontairement
   plus precis que ceux du motif (12n + x) pour l'emporter sur eux : sans
   cela, les carres restaient en demi-largeur et laissaient des trous. */
@media (max-width: 620px) {
  body .elementor.elementor.elementor .mgc-bento-index > .mgc-tuile:nth-child(n) {
    grid-column: span 12;
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------------------------
   Les coches de la liste « ce qui est compris ».

   Une seule colonne laissait les deux tiers droits de la page vides :
   six lignes de quatre mots empilées sur un bord, et rien en face. La
   liste s'étale donc sur toute la largeur, trois colonnes sur grand
   écran, deux à partir de 640 px, une sur téléphone — mais seulement
   quand elle occupe le conteneur. La même liste logée dans une demi-page
   (page Services, colonne de gauche) reste sur une colonne : 163 px par
   cellule ne tiennent pas quatre mots.

   Les filets ne courent qu'en haut de chaque cellule : ils se rejoignent
   d'une colonne à l'autre et dessinent des lignes continues, comme la
   grille tarifaire du dépliant, sans jamais fermer de cadre.

   Le rond faisait 30 px de large — 22 px de tracé, plus 8 px de
   remplissage compte en dehors — suivis d'une gouttière de 18 : la
   liste se lisait en deux colonnes au lieu d'une. Il se resserre.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .container > .mgc-coches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 3.5vw, 56px);
  border-top: 0;
}

body .elementor.elementor.elementor .mgc-coches li {
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  line-height: 1.45;
}

body .elementor.elementor.elementor .mgc-coches svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  padding: 5px;
  margin-top: 1px;
}

@media (max-width: 1024px) {
  body .elementor.elementor.elementor .container > .mgc-coches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body .elementor.elementor.elementor .container > .mgc-coches {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   Les forfaits de plongee.

   La grille du catalogue a deux colonnes de prix — avec ou sans location
   d'equipement — et des intertitres qui les nomment. Rendue en tableau,
   elle devenait un tableur : filets verticaux, cellules d'en-tete vides,
   libelles colles au bord gauche. Elle se lisait comme un export, pas
   comme une carte de prix.

   Reprise en groupes : un intertitre nomme ses deux colonnes, ses
   forfaits suivent, et il ne reste que des filets horizontaux. Les
   montants gardent le serif turquoise des paliers, juste au-dessus.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-forfaits {
  grid-column: 1 / -1;
  margin-top: clamp(34px, 4vw, 56px);
}

body .elementor.elementor.elementor .mgc-forfaits-groupe + .mgc-forfaits-groupe {
  margin-top: clamp(30px, 3.4vw, 48px);
}

/* Les intitules de colonnes : discrets, alignes sur les montants qu'ils
   annoncent, et sans filet — ils titrent, ils ne separent pas. */
body .elementor.elementor.elementor .mgc-forfaits-entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 130px;
  gap: clamp(14px, 2vw, 34px);
  margin: 0 0 6px;
  color: var(--turquoise);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

body .elementor.elementor.elementor .mgc-forfaits-entete span + span {
  text-align: right;
}

body .elementor.elementor.elementor .mgc-forfaits-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

body .elementor.elementor.elementor .mgc-forfaits-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 130px;
  gap: clamp(14px, 2vw, 34px);
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transition: padding-left 0.45s var(--ease-out);
}

body .elementor.elementor.elementor .mgc-forfaits-liste li:hover {
  padding-left: 12px;
}

body .elementor.elementor.elementor .mgc-forfait-nom {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

body .elementor.elementor.elementor .mgc-forfait-prix {
  color: var(--turquoise);
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

/* Un forfait qui n'existe pas dans cette colonne : le tiret s'efface
   plutot que de se faire passer pour un prix. */
body .elementor.elementor.elementor .mgc-forfait-prix.est-vide {
  color: rgba(255, 255, 255, 0.26);
  font-size: 18px;
}

/* Une ligne a un seul montant — le supplement nitrox — s'etale sur les
   deux colonnes plutot que de laisser un vide a droite. */
body .elementor.elementor.elementor .mgc-forfaits-liste li:has(.mgc-forfait-prix:only-of-type) {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 700px) {
  body .elementor.elementor.elementor .mgc-forfaits-entete,
  body .elementor.elementor.elementor .mgc-forfaits-liste li {
    grid-template-columns: minmax(0, 1fr) 88px 88px;
    gap: 12px;
  }
  body .elementor.elementor.elementor .mgc-forfait-prix {
    font-size: 18px;
  }
}

/* ------------------------------------------------------------------
   La page Services : les listes tarifaires.

   Meme grammaire que les forfaits de plongee — un libelle a gauche, un
   montant en serif turquoise a droite, un filet horizontal entre les
   lignes — mais sur fond clair, puisque la page n'a pas de carte sombre.

   Le sous-titre sous le libelle porte la precision du catalogue : « 48
   heures a l'avance », « navette six a huit personnes ». Elle ne tient
   pas sur la meme ligne, et la reporter dans le nom allongerait tous les
   intitules pour un seul.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-tarifs {
  list-style: none;
  margin: clamp(34px, 4vw, 56px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

body .elementor.elementor.elementor .mgc-tarifs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 60px);
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.45s var(--ease-out);
}

body .elementor.elementor.elementor .mgc-tarifs li:hover {
  padding-left: 12px;
}

body .elementor.elementor.elementor .mgc-tarif-nom {
  font-size: 16px;
  line-height: 1.4;
}

body .elementor.elementor.elementor .mgc-tarif-nom small {
  display: block;
  margin-top: 4px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

body .elementor.elementor.elementor .mgc-tarif-prix {
  color: var(--turquoise-deep);
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

/* Le volet « a table » est court : ses trois lignes gagnent a etre
   posees sur le papier plutot que sur le blanc. */
body .elementor.elementor.elementor .mgc-volet-table {
  background: var(--paper);
}

@media (max-width: 600px) {
  body .elementor.elementor.elementor .mgc-tarifs li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  body .elementor.elementor.elementor .mgc-tarif-prix {
    text-align: left;
  }
}

/* ------------------------------------------------------------------
   La page Services : les photographies.

   La page ne portait que du texte et deux listes de prix — juste, mais
   sec. Les volets recoivent donc leur image, et la regle est la meme
   que sur les fiches activite : la longueur de la liste decide de la
   composition.

   Un volet court — trois lignes — tient a cote de sa photographie : le
   duo est asymetrique, l'image un peu plus large que le texte, et rien
   ne depasse. Un volet long — dix lignes — ne tient pas : la
   photographie passe au-dessus, en bandeau panoramique, et la liste
   s'etale sur deux colonnes. Une liste de dix lignes dans une demi-page
   fait une colonne de journal, pas une grille tarifaire.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-volet-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

body .elementor.elementor.elementor .mgc-volet-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

body .elementor.elementor.elementor .mgc-volet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body .elementor.elementor.elementor .mgc-volet-copy .mgc-tarifs {
  margin-top: clamp(26px, 3vw, 40px);
}

/* Le bandeau du volet long. Le 21:9 est plus etroit que la respiration
   pleine largeur : celui-ci reste dans le conteneur, et un rapport plus
   haut en ferait un mur entre le titre et les prix. */
body .elementor.elementor.elementor .mgc-volet-bandeau {
  margin: clamp(34px, 4vw, 56px) 0 0;
  overflow: hidden;
  aspect-ratio: 21 / 9;
}

body .elementor.elementor.elementor .mgc-volet-bandeau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dix lignes sur deux colonnes. Les filets ne courent qu'en haut de
   chaque cellule : ils se rejoignent d'une colonne a l'autre et
   dessinent des lignes continues, sans jamais fermer de cadre. */
body .elementor.elementor.elementor .mgc-tarifs.est-double {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 5vw, 88px);
  border-top: 0;
}

body .elementor.elementor.elementor .mgc-tarifs.est-double li {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

@media (max-width: 900px) {
  body .elementor.elementor.elementor .mgc-volet-duo {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 44px);
  }
  body .elementor.elementor.elementor .mgc-volet-photo {
    aspect-ratio: 3 / 2;
  }
  body .elementor.elementor.elementor .mgc-volet-bandeau {
    aspect-ratio: 16 / 10;
  }
  body .elementor.elementor.elementor .mgc-tarifs.est-double {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   Le calendrier de disponibilites, sur la fiche villa.

   Ces regles existaient, ont disparu de cette feuille, et personne ne
   l'a vu : sans elles le calendrier ne tombe pas en panne, il se met a
   couler comme du texte — « L M M J V S D 1 2 3 4 5... » sur une seule
   ligne. Une grille qui perd son `display: grid` reste lisible par la
   machine et illisible par l'oeil.

   Le back-office porte les memes regles dans espaces.css, en plus
   dense : la fiche villa a de la place, le tableau de bord n'en a pas.
   Les deux copies sont assumees — espaces.css ne charge pas cette
   feuille — mais elles doivent rester d'accord sur la grammaire : sept
   colonnes, une case carree, le pris barre et le passe efface.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-dispo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(24px, 3vw, 38px);
}

body .elementor.elementor.elementor .mgc-dispo-titre {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  text-transform: capitalize;
}

body .elementor.elementor.elementor .mgc-dispo-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

body .elementor.elementor.elementor .mgc-dispo-jour {
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

body .elementor.elementor.elementor .mgc-dispo-case,
body .elementor.elementor.elementor .mgc-dispo-vide {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Libre : le turquoise pale. C'est l'etat par defaut, et c'est voulu —
   une fiche villa se lit d'abord comme une invitation. */
body .elementor.elementor.elementor .mgc-dispo-case {
  background: var(--turquoise-soft);
  color: var(--ink);
}

body .elementor.elementor.elementor .mgc-dispo-case.est-pris {
  background: transparent;
  color: rgba(29, 35, 32, 0.3);
  text-decoration: line-through;
}

body .elementor.elementor.elementor .mgc-dispo-case.est-passe {
  background: transparent;
  color: rgba(29, 35, 32, 0.16);
}

/* Choisir ses dates sur le calendrier : les jours libres sont de vrais
   boutons (voir mgc-450-disponibilites.php) -- ceux qui sont pris ou
   passes restent de simples <span>, jamais cliquables. */
body .elementor.elementor.elementor button.mgc-dispo-case {
  cursor: pointer;
  border: none;
  font: inherit;
  transition: background-color .15s ease, color .15s ease;
}

body .elementor.elementor.elementor button.mgc-dispo-case:hover,
body .elementor.elementor.elementor button.mgc-dispo-case:focus-visible {
  background: var(--turquoise-deep);
  color: #fff;
}

body .elementor.elementor.elementor .mgc-dispo-case.est-choisi {
  background: var(--turquoise-deep);
  color: #fff;
  font-weight: 600;
}

body .elementor.elementor.elementor .mgc-dispo-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin: clamp(20px, 2.5vw, 30px) 0 0;
  color: var(--muted);
  font-size: 13px;
}

body .elementor.elementor.elementor .mgc-dispo-legende span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

body .elementor.elementor.elementor .mgc-pastille {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

body .elementor.elementor.elementor .mgc-pastille.libre {
  background: var(--turquoise-soft);
}

body .elementor.elementor.elementor .mgc-pastille.pris {
  background: transparent;
  border: 1px solid var(--line);
}

/* La prochaine ouverture est la seule information actionnable de la
   legende : elle part a droite, et elle est la seule en couleur. */
body .elementor.elementor.elementor .mgc-dispo-suivante {
  margin-left: auto;
  color: var(--turquoise-deep);
  font-weight: 600;
}

@media (max-width: 560px) {
  body .elementor.elementor.elementor .mgc-dispo-suivante {
    margin-left: 0;
  }
}

/* ==================================================================
   RECUPERATION DU 7 SEPTEMBRE 2026 — ce qui avait ete perdu.

   Soixante-dix-sept familles de classes avaient disparu de cette
   feuille au fil des refontes, emportees par des remplacements de blocs
   delimites au commentaire suivant plutot qu'a l'ancre exacte : tout le
   tunnel de reservation, les cartes d'extras, les devis, les contrats,
   les factures, les listes de prestations, les promotions, la prise de
   rendez-vous.

   Rien ne tombait en panne : les pages restaient en 200, le HTML restait
   correct, et le formulaire de reservation s'affichait — sans mise en
   page. Ces regles sont reprises telles quelles de
   complements.css.avant-refonte, sans retouche : elles etaient justes,
   elles n'ont jamais ete remplacees, seulement effacees.

   Aucune ne recouvre une regle ecrite depuis : les 134 blocs repris ne
   mentionnent que des classes absentes du fichier courant.
   ================================================================== */

/* ---- Les promotions ----------------------------------------------- */

/* Pas de fenêtre surgissante : la promotion se lit là où le visiteur
   regarde déjà le prix. Elle doit donc se remarquer sans crier. */

body .elementor.elementor .mgc-promo-mention {
  margin: 0 0 10px;
  color: var(--turquoise, #2f8f8a);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* L'ancien prix reste lisible : barré, pas effacé. */
body .elementor.elementor .mgc-prix-barre {
  margin-right: 10px;
  color: rgba(29, 35, 32, 0.42);
  font-size: 0.62em;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-weight: 400;
}

body .elementor.elementor .mgc-promo-precision {
  margin: 10px 0 0;
  color: var(--muted, #6b716c);
  font-size: 12px;
  line-height: 1.5;
}

body .elementor.elementor .mgc-promo-pastille {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(16, 37, 34, 0.88);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

@media (max-width: 700px) {
  body .elementor.elementor .mgc-promo-pastille { top: 12px; left: 12px; padding: 6px 11px; }
}

/* ---- Le tunnel de réservation --------------------------------------
   Une étape à la fois quand le script répond ; toutes à la suite
   sinon. Le formulaire fonctionne dans les deux cas. */

body .elementor.elementor .mgc-tunnel {
  margin-top: clamp(30px, 4vw, 56px);
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid rgba(29,35,32,0.1);
  border-radius: 18px;
  background: rgba(255,255,255,0.6);
}

body .elementor.elementor .mgc-tunnel-fil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  color: rgba(29,35,32,0.34);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body .elementor.elementor .mgc-tunnel-fil .est-active {
  color: var(--turquoise, #2f8f8a);
}

/* Sans script, toutes les étapes restent visibles : le formulaire
   marche, il est seulement plus long. */
body .elementor.elementor .mgc-tunnel-etape + .mgc-tunnel-etape {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(29,35,32,0.08);
}

/* Le script prend la main : une étape à la fois, et plus de filets
   de séparation puisqu'elles ne se suivent plus à l'écran. */
body .elementor.elementor .mgc-tunnel-form.est-pilote .mgc-tunnel-etape { display: none; }

body .elementor.elementor .mgc-tunnel-form.est-pilote .mgc-tunnel-etape.est-active { display: block; }

body .elementor.elementor .mgc-tunnel-form.est-pilote .mgc-tunnel-etape { margin-top: 0; padding-top: 0; border-top: 0; }

body .elementor.elementor .mgc-tunnel h3 {
  margin: 0 0 18px;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 500;
}

body .elementor.elementor .mgc-tunnel-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

body .elementor.elementor .mgc-tunnel-large {
  grid-column: 1 / -1;
}

body .elementor.elementor .mgc-tunnel-champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body .elementor.elementor .mgc-tunnel-champ > span {
  color: var(--muted, #6b716c);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

body .elementor.elementor .mgc-tunnel input,
body .elementor.elementor .mgc-tunnel textarea,
body .elementor.elementor .mgc-tunnel select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(29,35,32,0.16);
  border-radius: 10px;
  background: #fff;
  color: var(--ink, #1d2320);
  font-family: inherit;
  font-size: 15px;
}

body .elementor.elementor .mgc-tunnel input:focus,
body .elementor.elementor .mgc-tunnel textarea:focus {
  border-color: var(--turquoise, #2f8f8a);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,143,138,0.12);
}

body .elementor.elementor .mgc-tunnel-champ.est-fautif input {
  border-color: #c98484;
}

/* Les extras : une liste, pas une grille de cartes — on les lit, on
   ne les contemple pas. */
body .elementor.elementor .mgc-tunnel-extras {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

body .elementor.elementor .mgc-tunnel-extras label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 6px 14px;
  padding: 15px 17px;
  border: 1px solid rgba(29,35,32,0.12);
  border-radius: 12px;
  cursor: pointer;
}

body .elementor.elementor .mgc-tunnel-extras label:hover {
  border-color: rgba(47,143,138,0.5);
}

body .elementor.elementor .mgc-tunnel-extras input {
  width: auto;
  padding: 0;
}

body .elementor.elementor .mgc-tunnel-extra-nom { font-weight: 600; }

body .elementor.elementor .mgc-tunnel-extra-prix { color: var(--turquoise, #2f8f8a); font-size: 14px; white-space: nowrap; }

body .elementor.elementor .mgc-tunnel-extra-texte { grid-column: 2 / -1; color: var(--muted, #6b716c); font-size: 13px; line-height: 1.5; }

body .elementor.elementor .mgc-tunnel-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}

body .elementor.elementor .mgc-tunnel-consent input { width: auto; margin-top: 3px; padding: 0; }

body .elementor.elementor .mgc-tunnel-consent.est-fautif { color: #9c3535; }

body .elementor.elementor .mgc-tunnel-lignes { margin: 0; }

body .elementor.elementor .mgc-tunnel-lignes > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(29,35,32,0.07);
}

body .elementor.elementor .mgc-tunnel-lignes dt, body .elementor.elementor .mgc-tunnel-lignes dd { margin: 0; font-size: 15px; }

body .elementor.elementor .mgc-tunnel-somme { font-weight: 600; }

body .elementor.elementor .mgc-tunnel-acompte { border-bottom: 0 !important; color: var(--turquoise, #2f8f8a); font-weight: 600; }

body .elementor.elementor .mgc-tunnel-note { margin: 16px 0 0; color: var(--muted, #6b716c); font-size: 13px; line-height: 1.6; }

body .elementor.elementor .mgc-tunnel-alerte {
  margin: 16px 0 0;
  padding: 12px 15px;
  border: 1px solid #f0c4c4;
  border-radius: 10px;
  background: #fdecec;
  color: #9c3535;
  font-size: 14px;
}

body .elementor.elementor .mgc-tunnel-pilotage {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

body .elementor.elementor .mgc-tunnel-retour {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted, #6b716c);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

body .elementor.elementor .mgc-tunnel-recu {
  padding: clamp(22px, 3vw, 38px);
  border-radius: 14px;
  background: rgba(47,143,138,0.08);
}

body .elementor.elementor .mgc-tunnel-recu h3 { margin: 6px 0 12px; }

/* Le piège à robots : hors écran, jamais réduit à zéro — ce montage
   déclenche des débordements horizontaux. */
body .elementor.elementor .mgc-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==================================================================
   Prestations à quantité et à grille — les croisières
   ================================================================== */
/* Le champ de quantité est hors du libellé : cliquer dedans ne doit pas
   décocher la prestation. Il s'aligne donc à droite, dans la même ligne. */
.mgc-tunnel-extras li {
  position: relative;
}

.mgc-tunnel-extra-qte label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}

.mgc-tunnel-extra-qte input {
  width: 78px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.mgc-tunnel-devis dd {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  opacity: .78;
}

/* ==================================================================
   Prendre rendez-vous — page Propriétaires
   ==================================================================

   Le bloc partage la colonne de gauche avec le discours de l'étude
   confidentielle. Il ne doit pas ressembler à un second formulaire : un
   filet en haut le sépare, rien de plus. */
.mgc-rdv {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line, rgba(0, 0, 0, .12));
}

.mgc-rdv h3 {
  margin: 6px 0 12px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
}

.mgc-rdv p { max-width: 46ch; }

.mgc-rdv-bouton { margin-top: 18px; }

.mgc-rdv-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: .68;
}

/* ==================================================================
   Le devis, côté client — mgc-550
   ==================================================================

   Une page seule, sans navigation latérale : le client arrive par un
   lien et n'a qu'une chose à faire. On lui donne de l'air et une
   colonne étroite, comme une lettre. */
.mgc-devis-page { padding: 90px 0 40px; }

.mgc-devis { max-width: 780px; }

.mgc-devis h1 {
  margin: 6px 0 22px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
}

.mgc-devis-mot {
  margin: 0 0 26px;
  padding: 18px 20px;
  border-left: 2px solid var(--app-accent-deep, #2f8f8a);
  background: rgba(47, 143, 138, .05);
  font-size: 15px;
  line-height: 1.65;
}

.mgc-devis-entete {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, .12));
}

.mgc-devis-entete dt {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}

.mgc-devis-entete dd { margin: 3px 0 0; font-size: 16px; }

/* Le tableau porte le prix : il doit rester lisible, et défiler seul
   sur un téléphone plutôt que d'élargir la page. */
.mgc-devis-lignes {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.mgc-devis-lignes th,
.mgc-devis-lignes td {
  padding: 13px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, .1));
}

.mgc-devis-lignes thead th {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .6;
}

.mgc-devis-lignes td:last-child,
.mgc-devis-lignes th:last-child { text-align: right; white-space: nowrap; }

.mgc-devis-lignes small { display: block; margin-top: 3px; font-size: 12.5px; opacity: .68; }

.mgc-devis-total th,
.mgc-devis-total td {
  padding-top: 18px;
  border-bottom: 0;
  font-size: 17px;
  font-weight: 600;
}

.mgc-devis-acompte th,
.mgc-devis-acompte td {
  padding-top: 4px;
  border-bottom: 0;
  color: var(--app-accent-deep, #2f8f8a);
  font-weight: 600;
}

.mgc-devis-validite { font-size: 13px; opacity: .72; }

.mgc-devis-accord {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line, rgba(0, 0, 0, .12));
}

.mgc-devis-paiement { margin-bottom: 20px; }

.mgc-devis-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: .7;
}

/* Après acceptation, la page devient une confirmation : le récapitulatif
   reste lisible en dessous, mais c'est le reçu qui parle en premier. */
.mgc-devis-recu {
  margin: 0 0 30px;
  padding: 24px 26px;
  border: 1px solid rgba(47, 143, 138, .3);
  border-radius: 12px;
  background: rgba(47, 143, 138, .06);
}

.mgc-devis-recu h2 { margin: 4px 0 10px; font-size: clamp(20px, 2.4vw, 28px); }

@media (max-width: 640px) {
  .mgc-devis-page { padding-top: 70px; }
  .mgc-devis-lignes { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------------------
   La saisie, côté agence
   ------------------------------------------------------------------ */
.mgc-devis-saisie input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.mgc-devis-saisie td { padding: 6px 5px; }

/* Les colonnes chiffrées n'ont pas besoin de la largeur d'un libellé. */
.mgc-devis-saisie td:nth-child(3) input,
.mgc-devis-saisie td:nth-child(5) input { max-width: 110px; }

.mgc-devis-saisie td:nth-child(4) input { max-width: 130px; }

.mgc-devis-agence { margin-top: 6px; }

/* Le pied légal d'un devis : présent, mais discret. */
.mgc-devis-pied {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line, rgba(0,0,0,.1));
  font-size: 12.5px;
  line-height: 1.6;
  opacity: .74;
}

.mgc-devis-pied p { margin: 0 0 4px; }

/* ==================================================================
   L'offre de conciergerie — page Propriétaires
   ==================================================================

   Un tableau de prix sur une page de vente doit rester lisible : on
   évite les bordures partout, un simple filet entre les lignes suffit.
   Sur téléphone il défile seul plutôt que d'élargir la page. */
.mgc-offre-chapeau { max-width: 62ch; margin-bottom: 26px; }

.mgc-offre-tableau { overflow-x: auto; }

.mgc-offre-tableau table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 14px;
}

.mgc-offre-tableau th,
.mgc-offre-tableau td {
  padding: 14px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, .1));
}

.mgc-offre-tableau thead th {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .6;
}

.mgc-offre-tableau td small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: .7;
}

.mgc-offre-prix { white-space: nowrap; }

.mgc-offre-prix strong { font-size: 16px; }

/* Trois états, trois lectures : compris, remisé, plein tarif. */
.mgc-contrat-inclus,
.mgc-contrat-remise,
.mgc-contrat-plein {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.mgc-contrat-inclus { background: rgba(47, 143, 138, .12); color: #226f6b; }

.mgc-contrat-remise { background: rgba(0, 0, 0, .06); }

.mgc-contrat-plein  { background: transparent; opacity: .55; }

.mgc-offre-pied {
  max-width: 68ch;
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.65;
  opacity: .74;
}

/* ==================================================================
   Contrats et factures — des documents, pas des pages
   ==================================================================

   Ces trois pages sont faites pour être lues en entier, puis imprimées.
   D'où une colonne étroite, une police un peu plus grande que le site,
   et un interligne généreux. */
.mgc-contrat-texte {
  max-width: 74ch;
  margin: 26px 0 34px;
  padding: 30px 32px;
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  font-size: 15px;
  line-height: 1.85;
  white-space: normal;
}

.mgc-facture-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.mgc-facture-emetteur {
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
  opacity: .82;
}

@media (max-width: 640px) {
  .mgc-facture-emetteur { text-align: left; }
  .mgc-contrat-texte { padding: 22px 20px; font-size: 14.5px; }
}

/* À l'impression, seul le document compte : ni en-tête, ni pied de site,
   ni formulaire de signature déjà rempli. */
@media print {
  .site-header, header, footer, .mgc-crm-pastille, .mgc-sans-impression,
  .mgc-devis-accord { display: none !important; }
  .mgc-devis-page { padding: 0; }
  .mgc-contrat-texte { border: 0; padding: 0; background: none; }
  a[href]::after { content: ''; }
}

/* Le choix « toute la maison ou n chambres » ouvre l'étape : il tient
   toute la largeur, avant les dates qu'il conditionne. */
.mgc-tunnel-mode { grid-column: 1 / -1; }

.mgc-tunnel-mode select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}

/* ==================================================================
   Les champs du tunnel : tous la même hauteur
   ==================================================================

   Le sélecteur « ce que vous réservez » coupait son texte en deux : une
   hauteur de 40 px pour une ligne de 24 px et 26 px de marges
   intérieures, il manquait dix pixels. Une hauteur unique et une marge
   qui laisse la place à la ligne règlent le cas, et alignent du même
   coup toutes les bordures du formulaire. */
body .elementor.elementor .mgc-tunnel[class] input,
body .elementor.elementor .mgc-tunnel[class] select {
  height: 52px;
  min-height: 52px;
  padding: 12px 14px;
  line-height: 26px;
  box-sizing: border-box;
}

body .elementor.elementor .mgc-tunnel[class] textarea {
  height: auto;
  min-height: 52px;
  padding: 12px 14px;
  line-height: 26px;
}

/* La case à cocher n'est pas un champ de saisie : elle garde sa taille. */
body .elementor.elementor .mgc-tunnel[class] input[type="checkbox"],
body .elementor.elementor .mgc-tunnel[class] input[type="radio"] {
  height: 18px;
  min-height: 0;
  padding: 0;
}

/* ==================================================================
   Les extras : la liste d'avant, alignée au cordeau
   ==================================================================

   Retour à une seule liste, sans familles ni cartes. Ce qui change,
   c'est la géométrie : chaque ligne pose ses informations aux mêmes
   abscisses — la case, puis le nom et tout ce qui le précise, puis le
   prix contre la marge droite. On lit une colonne de prix, pas
   vingt-huit prix éparpillés au bout de libellés de longueurs
   différentes.

   L'ordre des éléments ne varie jamais : nom, prix, description,
   grille tarifaire, tarif enfant, quantité, mention sur devis. Une
   information absente laisse sa place vide plutôt que de décaler
   celles d'en dessous. */
body .elementor.elementor .mgc-extras {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .elementor.elementor .mgc-extra {
  padding: 14px 17px;
  border: 1px solid rgba(29, 35, 32, .12);
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body .elementor.elementor .mgc-extra:hover { border-color: rgba(47, 143, 138, .5); }

body .elementor.elementor .mgc-extra.est-choisi,
body .elementor.elementor .mgc-extra:has(input[type="checkbox"]:checked) {
  border-color: var(--turquoise, #2f8f8a);
  background: rgba(47, 143, 138, .05);
  box-shadow: inset 0 0 0 1px var(--turquoise, #2f8f8a);
}

/* Les trois colonnes, identiques d'une ligne à l'autre. */
body .elementor.elementor .mgc-extra-tete {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 170px;
  column-gap: 14px;
  row-gap: 3px;
  align-items: start;
  margin: 0;
  cursor: pointer;
}

body .elementor.elementor .mgc-extra-tete input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  margin: 4px 0 0;
  accent-color: var(--turquoise, #2f8f8a);
  cursor: pointer;
}

body .elementor.elementor .mgc-extra-nom {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* Le prix, toujours à la même abscisse, contre la marge droite. */
body .elementor.elementor .mgc-extra-prix {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  color: var(--turquoise, #2f8f8a);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

body .elementor.elementor .mgc-extra-texte,
body .elementor.elementor .mgc-extra-grille {
  grid-column: 2 / -1;
  color: var(--muted, #6b716c);
  font-size: 13px;
  line-height: 1.5;
}

body .elementor.elementor .mgc-extra-grille { font-size: 12.5px; }

/* Le champ de quantité vit hors du libellé — cliquer dedans ne doit
   pas décocher — mais reprend l'abscisse de la colonne du nom. */
body .elementor.elementor .mgc-extra-qte {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0 34px;
}

body .elementor.elementor .mgc-extra-qte label {
  /* Largeur fixe : « Journées » et « Personnes » n'ont pas la même
     longueur, et sans cela le champ de saisie danserait d'une ligne
     à l'autre. */
  flex: 0 0 96px;
  margin: 0;
  color: var(--muted, #6b716c);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body .elementor.elementor .mgc-extra-qte input {
  width: 92px;
  height: 42px;
  min-height: 42px;
  padding: 8px 10px;
  line-height: 22px;
  font-size: 14px;
}

body .elementor.elementor .mgc-extra-note {
  display: block;
  margin: 10px 0 0 34px;
  padding-top: 9px;
  border-top: 1px dashed rgba(29, 35, 32, .12);
  color: var(--muted, #6b716c);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
}

/* Sur téléphone, le prix passe sous le nom plutôt que de rétrécir la
   colonne au point de couper les libellés. Il garde son alignement à
   droite : la colonne des prix reste une colonne. */
@media (max-width: 620px) {
  body .elementor.elementor .mgc-extra-tete {
    grid-template-columns: 20px minmax(0, 1fr);
  }
  body .elementor.elementor .mgc-extra-prix {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
}

/* ==================================================================
   Le catalogue sous chaque rubrique de la page Services
   ==================================================================

   Même géométrie que les extras du tunnel : le nom à gauche, le prix
   contre la marge droite, la même abscisse d'une ligne à l'autre. Un
   filet sépare les lignes plutôt qu'un cadre : la rubrique est déjà
   dans une carte, une carte dans une carte n'apporte rien. */
body .elementor.elementor .mgc-presta { margin-top: 26px; }

body .elementor.elementor .mgc-presta-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line, rgba(29, 35, 32, .14));
  color: var(--muted, #6b716c);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body .elementor.elementor .mgc-presta-titre span { letter-spacing: .04em; }

body .elementor.elementor .mgc-presta-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .elementor.elementor .mgc-presta-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  column-gap: 18px;
  row-gap: 2px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(29, 35, 32, .07);
}

body .elementor.elementor .mgc-presta-nom {
  grid-column: 1;
  font-size: 15px;
  line-height: 1.45;
}

body .elementor.elementor .mgc-presta-prix {
  grid-column: 2;
  text-align: right;
  color: var(--turquoise, #2f8f8a);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

body .elementor.elementor .mgc-presta-texte {
  grid-column: 1 / -1;
  color: var(--muted, #6b716c);
  font-size: 13px;
  line-height: 1.55;
}

body .elementor.elementor .mgc-presta-pied {
  margin: 14px 0 0;
  color: var(--muted, #6b716c);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 620px) {
  body .elementor.elementor .mgc-presta-ligne { grid-template-columns: minmax(0, 1fr); }
  body .elementor.elementor .mgc-presta-prix { grid-column: 1; text-align: left; }
}

/* La vignette d'une prestation : une photographie de l'agence, pas une
   illustration. Elle prend sa colonne à gauche, et les lignes sans photo
   gardent l'alignement du texte. */
body .elementor.elementor .mgc-presta-ligne.a-vignette {
  grid-template-columns: 76px minmax(0, 1fr) 170px;
  column-gap: 14px;
}

body .elementor.elementor .mgc-presta-vignette {
  grid-column: 1;
  grid-row: 1 / span 2;
  overflow: hidden;
  border-radius: 9px;
  line-height: 0;
}

body .elementor.elementor .mgc-presta-vignette img {
  width: 76px;
  height: 56px;
  object-fit: cover;
  display: block;
}

body .elementor.elementor .mgc-presta-ligne.a-vignette .mgc-presta-nom { grid-column: 2; }

body .elementor.elementor .mgc-presta-ligne.a-vignette .mgc-presta-prix { grid-column: 3; }

body .elementor.elementor .mgc-presta-ligne.a-vignette .mgc-presta-texte { grid-column: 2 / -1; }

@media (max-width: 620px) {
  body .elementor.elementor .mgc-presta-ligne.a-vignette { grid-template-columns: 60px minmax(0, 1fr); }
  body .elementor.elementor .mgc-presta-vignette img { width: 60px; height: 46px; }
  body .elementor.elementor .mgc-presta-ligne.a-vignette .mgc-presta-prix { grid-column: 2; }
}

/* ------------------------------------------------------------------
   Les extras du tunnel, regroupes par famille.

   Vingt-neuf cases a cocher en une colonne, c'etait une liste de
   courses : rien ne distinguait une croisiere a 500 EUR d'une pochette
   cadeau a 5 EUR, et le visiteur faisait defiler jusqu'au bouton
   suivant. Les prestations tiennent maintenant sur deux etapes, et
   chaque famille porte son titre.

   Deux colonnes des que la place le permet. Le decompte a droite du
   titre — « En mer  8 » — dit ce qu'il reste a lire avant de decider :
   c'est ce qui separe une liste d'un choix.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-extras-groupe + .mgc-extras-groupe {
  margin-top: clamp(28px, 3vw, 42px);
}

body .elementor.elementor.elementor .mgc-extras-titre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Le decompte : une pastille, pas un chiffre perdu dans le titre. */
body .elementor.elementor.elementor .mgc-extras-titre span {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--turquoise-soft);
  color: var(--turquoise-deep);
  font-size: 10px;
  letter-spacing: 0;
}

body .elementor.elementor.elementor .mgc-extras {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Une carte reste lisible seule : la colonne ne doit pas ecraser le
   libelle contre son prix. En dessous de 860 px on repasse sur une. */
@media (max-width: 860px) {
  body .elementor.elementor.elementor .mgc-extras {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   Participants et quantite, cote a cote.

   La table du chef reclame les deux : combien de convives, et combien
   de diners. Empiles, ils prennent deux lignes pleines dans une carte
   qui en compte deja quatre. Cote a cote, ils tiennent sur une, et se
   lisent comme ce qu'ils sont — deux facteurs d'une meme
   multiplication.

   Ils repassent l'un sous l'autre tout seuls quand la carte se
   retrecit : ce sont des elements en ligne dans un bloc.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-extra-qte {
  display: inline-flex;
  vertical-align: top;
  margin-right: 28px;
}

body .elementor.elementor.elementor .mgc-extra-pax + .mgc-extra-qte {
  margin-left: 0;
}

/* « Participants » est plus long que « Journees » : la colonne des
   libelles s'elargit pour les deux, sinon les deux champs de saisie ne
   seraient pas alignes. */
body .elementor.elementor.elementor .mgc-extra-qte label {
  flex: 0 0 106px;
}


/* ------------------------------------------------------------------
   Les douze mois du calendrier, dont neuf replies.

   La fiche montre trois mois et garde les neuf autres dans la page.
   Le repli est pose PAR LE SCRIPT, pas ici en dur : sans JavaScript,
   aucune classe n'est ajoutee, le bouton reste `hidden`, et les douze
   mois s'affichent a la suite. On ne cache jamais ce qu'on ne saurait
   rouvrir.

   La grille des mois est deja en auto-fit minmax(240px, 1fr) : douze
   mois se rangent d'eux-memes en trois rangees de quatre sur un grand
   ecran, et en colonne sur un telephone. Rien a redire ici.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-dispo-suite.est-repliee {
  display: none;
}

body .elementor.elementor.elementor .mgc-dispo-suite {
  margin-top: clamp(24px, 3vw, 44px);
}

/* Le bouton reprend le trait discret des liens de la maquette plutot
   que l'aplat d'un bouton d'appel : il ouvre une liste, il ne vend
   rien. */
body .elementor.elementor.elementor .mgc-dispo-plus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 2.5vw, 30px);
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms var(--ease-ui), border-color 200ms var(--ease-ui);
}

body .elementor.elementor.elementor .mgc-dispo-plus:hover {
  background: var(--paper);
  border-color: var(--turquoise-deep);
  color: var(--turquoise-deep);
}

body .elementor.elementor.elementor .mgc-dispo-plus::after {
  content: "\2193";
  font-size: 14px;
}

/* ------------------------------------------------------------------
   La bande de vignettes repliee, et son bouton.

   Le PHP marque depuis toujours les vignettes au-dela de la douzieme
   (`est-en-trop`) et replie la bande (`est-repliee`) ; le script sait
   les rouvrir. Seule la regle qui les cache manquait — perdue de cette
   feuille comme les soixante-seize familles retrouvees le 7 septembre.

   Rien ne tombait en panne : les soixante-dix photographies de La Vie
   est Belle s'affichaient toutes, et le bouton « voir plus » sortait
   pour ne rien deplier. Un defaut qui se lit comme un choix.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .villa-gallery-thumbs.est-repliee .villa-thumb.est-en-trop {
  display: none;
}

body .elementor.elementor.elementor .villa-gallery-plus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms var(--ease-ui), border-color 200ms var(--ease-ui);
}

body .elementor.elementor.elementor .villa-gallery-plus:hover {
  background: var(--paper);
  border-color: var(--turquoise-deep);
  color: var(--turquoise-deep);
}

/* ------------------------------------------------------------------
   La caution dans le recapitulatif du tunnel.

   Elle se lit comme l'acompte, mais elle porte sa mention : une
   somme qu'on rend ne doit pas ressembler a une somme qu'on prend.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-tunnel-caution {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

body .elementor.elementor.elementor .mgc-tunnel-caution dt,
body .elementor.elementor.elementor .mgc-tunnel-caution dd {
  margin: 0;
}

body .elementor.elementor.elementor .mgc-tunnel-caution small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.85;
}

/* Le vrai chiffre a sortir de sa poche : c'est lui qu'on lit en
   dernier, et il doit peser plus que les lignes qui le composent. */
body .elementor.elementor.elementor .mgc-tunnel-regler {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

/* Photo d'accueil (hero) : remplacee par une vue de Nosy Iranja, sept. 2026 */
body.mgc-page-accueil .elementor.elementor .cinematic-hero::before {
  background-image: url("../../2026/09/hd-journee-nosy-iranja-3.jpg");
  background-position: center 55%;
}

/* Photo de la page proprietaire : remplacee, elle reprenait le meme style de vue aerienne que l'accueil */
body.mgc-page-proprietaire .elementor.elementor .cinematic-hero::before {
  background-image: url("../../2026/09/villa-appart-eden.jpg");
  background-position: center 42%;
}


/* Selecteur de langue (en-tete) : le bouton [data-language] existait deja dans
   la maquette mais n'etait jamais raccorde a rien (voir mgc-010-i18n.php et
   site.js/initLangue). Le menu deroulant est construit par JS a l'execution ;
   ce bloc ne fait qu'habiller ce que initLangue() pose dans le DOM. On reste
   sur les memes tokens que le reste de la maquette (var(--...)) pour ne pas
   detonner a cote du bouton .language-button deja stylise plus haut. */
.language-switcher {
  position: relative;
}

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 172px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.language-menu[hidden] {
  display: none;
}

.language-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms var(--ease-ui);
}

.language-option:hover,
.language-option:focus-visible {
  background: var(--paper);
}

.language-option.is-active {
  color: var(--turquoise-deep);
  font-weight: 600;
}

/* ---- Les promotions, annoncées avant leur début (septembre 2026) --

   Le client ne voyait pas sa promotion : elle ne s'affichait que pendant
   sa période, et sa pastille, petite et en capitales espacées, se perdait
   sur la photo. La pastille annonce désormais aussi les offres à venir
   (mgc-440), et porte la remise en grand, dans le serif des titres : c'est
   un chiffre qu'on doit lire de loin, pas une étiquette.

   Deux teintes pour deux états : corail (l'accent de la charte) quand
   l'offre court, vert profond translucide quand elle est à venir. Le
   corail est assombri (#b0503a) pour que le blanc des petites capitales
   passe le contraste AA ; la ligne sous le nom l'est davantage (#a3462f),
   car elle est écrite en 13 px sur fond clair.

   Ces règles viennent après celles de la récupération du 7 septembre et
   les complètent à spécificité égale : l'ordre suffit, sans !important. */

body .elementor.elementor .mgc-promo-pastille {
  z-index: 3; /* au-dessus du filet intérieur du cadre (.frame::after, z-index 2) */
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: calc(100% - 44px);
  padding: 11px 16px 12px;
  border-radius: 18px;
  background: #b0503a;
  color: #fff;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: 0 12px 32px rgba(23, 26, 24, 0.22);
}

body .elementor.elementor .mgc-promo-pastille--a-venir {
  background: rgba(16, 37, 34, 0.86);
}

body .elementor.elementor .mgc-promo-pastille .mgc-promo-valeur {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0;
}

body .elementor.elementor .mgc-promo-pastille .mgc-promo-quand {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* La ligne d'offre, sous le résumé de la carte : même corps que ce
   résumé, en corail pour être repérée sans concurrencer le nom. */
body .elementor.elementor .mgc-promo-ligne {
  margin: 10px 0 0;
  color: #a3462f;
  font-size: 13px;
  line-height: 1.5;
}

body .elementor.elementor .mgc-promo-ligne strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Sur la fiche, l'offre à venir, sous le prix du volet de réservation. */
body .elementor.elementor .mgc-promo-a-venir,
.booking-card .mgc-promo-a-venir {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 2px solid #b0503a;
  background: rgba(200, 94, 69, 0.07);
  color: #a3462f;
  font-size: 12px;
  line-height: 1.55;
}

body .elementor.elementor .mgc-promo-a-venir strong,
.booking-card .mgc-promo-a-venir strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  body .elementor.elementor .mgc-promo-pastille {
    top: 16px;
    left: 16px;
    max-width: calc(100% - 32px);
    padding: 9px 13px 10px;
    border-radius: 15px;
  }

  body .elementor.elementor .mgc-promo-pastille .mgc-promo-valeur {
    font-size: 27px;
  }
}

/* ------------------------------------------------------------------
   La barre « Mon séjour » des fiches villa (tunnel.js).

   Le panier du visiteur : sur téléphone, une bande pleine largeur collée
   au bas de l'écran, au-dessus de la zone du geste d'accueil de l'iPhone
   (safe-area). Sur grand écran, où le volet de réservation reste à portée
   de vue, une pastille flottante plus discrète, centrée et assez étroite
   pour ne jamais passer sous le bouton WhatsApp, à droite.

   Elle vit hors du conteneur Elementor (ajoutée au <body>) : les règles
   du récapitulatif, préfixées par .elementor, ne l'atteignent pas — d'où
   la reprise des quelques lignes utiles sous .mgc-barre-recap. Le
   préfixe « html body » sur les boutons l'emporte sur les styles de
   bouton du kit Elementor, appliqués à toute la page.
   ------------------------------------------------------------------ */

/* Le bas de page ne doit pas finir sous la barre. La hauteur est mesurée
   par le script (encoche comprise), pas supposée. */
body.mgc-a-barre {
  padding-bottom: var(--mgc-barre-h, 76px);
}

.mgc-barre {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 95;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(251, 251, 248, 0.96);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 -10px 30px rgba(33, 46, 41, 0.07);
  color: var(--ink);
  font-family: var(--sans);
  transform: translateY(0);
  transition: transform 320ms var(--ease-out), visibility 0s linear 0s;
}

/* Masquée devant le tunnel : glisse hors de l'écran, puis sort de
   l'ordre de tabulation (visibility) une fois le glissement fini. */
.mgc-barre.est-masquee {
  visibility: hidden;
  transform: translateY(calc(100% + 24px));
  transition: transform 260ms var(--ease-ui), visibility 0s linear 260ms;
}

.mgc-barre-corps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}

.mgc-barre .mgc-barre-resume {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
}

.mgc-barre-sur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Le nombre d'extras, en pastille turquoise : c'est ce qui bouge quand
   on coche, l'œil doit le trouver sans lire. */
.mgc-barre-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--turquoise-soft);
  color: var(--turquoise-deep);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.mgc-barre-badge[hidden] {
  display: none;
}

.mgc-barre-montant {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}

.mgc-barre-montant small {
  margin-left: 2px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
}

.mgc-barre-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html body .mgc-barre .mgc-barre-bouton,
html body .mgc-barre-volet .mgc-barre-continuer {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--turquoise-deep);
  color: #fff;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-ui), transform 180ms var(--ease-ui);
}

html body .mgc-barre .mgc-barre-bouton:hover,
html body .mgc-barre .mgc-barre-bouton:focus,
html body .mgc-barre-volet .mgc-barre-continuer:hover,
html body .mgc-barre-volet .mgc-barre-continuer:focus {
  background: #267b77;
  color: #fff;
}

html body .mgc-barre .mgc-barre-bouton:active,
html body .mgc-barre-volet .mgc-barre-continuer:active {
  transform: scale(0.97);
}

html body .mgc-barre .mgc-barre-bouton:focus-visible,
html body .mgc-barre-volet button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

html body .mgc-barre .mgc-barre-bouton[hidden] {
  display: none;
}

/* Le bouton WhatsApp et les messages remontent au-dessus de la bande sur
   téléphone ; sur grand écran, la pastille centrée ne les croise pas.
   Les deux vivent dans le conteneur Elementor, où fidelite.css les place
   avec body .elementor.elementor : on reprend ce préfixe pour passer
   devant, et on garde la forme courte pour une page sans Elementor. */
body.mgc-a-barre .whatsapp-float,
body.mgc-a-barre .elementor.elementor .whatsapp-float {
  transition: transform 180ms var(--ease-ui), background-color 180ms var(--ease-ui), bottom 320ms var(--ease-out);
}

@media (max-width: 768px) {
  body.mgc-barre-visible .whatsapp-float,
  body.mgc-barre-visible .elementor.elementor .whatsapp-float {
    bottom: calc(14px + var(--mgc-barre-h, 76px));
  }

  /* Le bouton d'accès aux espaces (CRM, propriétaire), en bas à gauche
     pour les personnes connectées, remonte de la même façon. */
  body.mgc-barre-visible .mgc-acces {
    bottom: calc(16px + var(--mgc-barre-h, 76px));
  }

  /* Au-dessus du bouton WhatsApp remonté (56 px), pas dessous. */
  body.mgc-barre-visible .toast,
  body.mgc-barre-visible .elementor.elementor .toast {
    bottom: calc(82px + var(--mgc-barre-h, 76px));
  }
}

/* Le volet de détail : une feuille qui monte du bas, au-dessus d'un voile. */
.mgc-barre-voile {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(23, 26, 24, 0.42);
  opacity: 0;
  transition: opacity 280ms var(--ease-ui);
}

.mgc-barre-voile.est-ouvert {
  opacity: 1;
}

.mgc-barre-volet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 301;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: var(--white);
  box-shadow: 0 -18px 50px rgba(33, 46, 41, 0.16);
  color: var(--ink);
  font-family: var(--sans);
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out);
}

.mgc-barre-volet.est-ouvert {
  transform: translateY(0);
}

.mgc-barre-volet[hidden],
.mgc-barre-voile[hidden] {
  display: none;
}

.mgc-barre-volet-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

html body .mgc-barre-volet .mgc-barre-volet-titre {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}

html body .mgc-barre-volet .mgc-barre-fermer {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

html body .mgc-barre-volet .mgc-barre-fermer:hover,
html body .mgc-barre-volet .mgc-barre-fermer:focus {
  background: var(--stone);
  color: var(--ink);
}

html body .mgc-barre-volet .mgc-barre-continuer {
  width: 100%;
  min-height: 54px;
}

.mgc-barre-continuer .arrow {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--turquoise-deep);
  font-size: 16px;
}

/* Le récapitulatif serveur, rendu comme à l'étape finale du tunnel. */
.mgc-barre-recap .mgc-tunnel-lignes {
  margin: 0;
}

.mgc-barre-recap .mgc-tunnel-lignes > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(29, 35, 32, 0.07);
}

.mgc-barre-recap dt,
.mgc-barre-recap dd {
  margin: 0;
  font-size: 15px;
}

.mgc-barre-recap dd {
  text-align: right;
  white-space: nowrap;
}

.mgc-barre-recap .mgc-tunnel-somme {
  font-weight: 600;
}

.mgc-barre-recap .mgc-tunnel-lignes > .mgc-tunnel-acompte {
  border-bottom: 0;
  color: var(--turquoise-deep);
  font-weight: 600;
}

.mgc-barre-recap .mgc-tunnel-caution dt,
.mgc-barre-recap .mgc-tunnel-caution dd,
.mgc-barre-recap .mgc-tunnel-frais dt,
.mgc-barre-recap .mgc-tunnel-frais dd {
  color: var(--muted);
  font-size: 13px;
}

.mgc-barre-recap small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.85;
}

.mgc-barre-recap .mgc-tunnel-lignes > .mgc-tunnel-regler {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.mgc-barre-recap .mgc-tunnel-devis dd {
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  opacity: 0.78;
}

.mgc-barre-recap .mgc-tunnel-extra-qte {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.mgc-barre-recap .mgc-tunnel-alerte {
  margin: 0;
  padding: 12px 15px;
  border: 1px solid #f0c4c4;
  border-radius: 10px;
  background: #fdecec;
  color: #9c3535;
  font-size: 14px;
}

/* Le volet ouvert fige la page dessous. */
html.mgc-volet-ouvert,
html.mgc-volet-ouvert body {
  overflow: hidden;
}

/* Le bouton d'accès aux espaces passe au-dessus de tout (z-index 99980) :
   on le retire le temps de la lecture du volet. */
html.mgc-volet-ouvert .mgc-acces {
  visibility: hidden;
}

/* Le titre d'étape reçoit le focus au retour depuis la barre, pour les
   lecteurs d'écran : pas de cadre autour d'un titre qu'on ne clique pas. */
.mgc-tunnel-etape h3[tabindex="-1"]:focus {
  outline: none;
}

@media (min-width: 769px) {
  .mgc-barre {
    right: auto;
    bottom: 20px;
    left: 50%;
    width: min(560px, calc(100% - 200px));
    padding: 10px 10px 10px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    transform: translate(-50%, 0);
  }

  .mgc-barre.est-masquee {
    transform: translate(-50%, calc(100% + 40px));
  }

  body.mgc-a-barre {
    padding-bottom: calc(var(--mgc-barre-h, 70px) + 20px);
  }

  .mgc-barre-volet {
    right: auto;
    bottom: 24px;
    left: 50%;
    width: min(520px, calc(100% - 48px));
    max-height: calc(100vh - 120px);
    padding: 26px 28px 28px;
    border-radius: 20px;
    transform: translate(-50%, calc(100% + 40px));
  }

  .mgc-barre-volet.est-ouvert {
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mgc-barre,
  .mgc-barre.est-masquee,
  .mgc-barre-voile,
  .mgc-barre-volet,
  body.mgc-a-barre .whatsapp-float,
  body.mgc-a-barre .elementor.elementor .whatsapp-float,
  html body .mgc-barre .mgc-barre-bouton {
    transition: none;
  }
}

/* Récapitulatif du tunnel : le titre de l'offre sous la tranche de nuits
   remisées (« 4 nuits × 345 € »). Discret mais de la couleur des prix
   promotionnels, pour qu'on voie d'un coup d'œil quelle ligne est remisée. */
.mgc-tunnel-lignes .mgc-tunnel-offre {
  display: block;
  margin-top: 2px;
  color: var(--turquoise-deep, #0f6f6a);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* ------------------------------------------------------------------
   Langues dans le menu mobile (hamburger)
   Sous 1121 px, la zone d'actions de l'en-tete (dont le selecteur de
   langue) est masquee : site.js pose une rangee de pastilles en tete du
   panneau du menu. Au-dessus, le panneau redevient la barre de
   navigation et la rangee disparait.
   ------------------------------------------------------------------ */
.mgc-langues-mobile {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	padding: 4px 30px 18px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(20, 38, 35, .1);
}
.mgc-langues-mobile button {
	min-width: 46px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(20, 38, 35, .2);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 13px;
	letter-spacing: .08em;
	cursor: pointer;
}
.mgc-langues-mobile button:focus-visible {
	outline: 2px solid #2f8f8a;
	outline-offset: 2px;
}
.mgc-langues-mobile button.is-active {
	background: #2f8f8a;
	border-color: #2f8f8a;
	color: #fff;
}
@media (min-width: 1121px) {
	.mgc-langues-mobile { display: none !important; }
}

/* ------------------------------------------------------------------
   Promesse du site officiel et remises longue durée (23/09/2026)
   ------------------------------------------------------------------
   « Réservez en direct au meilleur tarif du web depuis ce site
   officiel » se lit juste avant le bouton qui lance la réservation
   (mgc_rendu_meilleur_tarif(), mgc-410). Demande du gérant : visible,
   mais discret — petite taille, couleur atténuée, icône fine. La
   variante --clair sert les bandeaux sur fond sombre. */

body .elementor.elementor .mgc-meilleur-tarif,
.mgc-meilleur-tarif {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 36em;
  margin: 22px 0 0;
  color: var(--muted, #696e69);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

body .elementor.elementor .mgc-meilleur-tarif svg,
.mgc-meilleur-tarif svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--turquoise-deep, #2f8f8a);
}

body .elementor.elementor .mgc-meilleur-tarif--clair,
.mgc-meilleur-tarif--clair {
  color: rgba(255, 255, 255, 0.8);
}

body .elementor.elementor .mgc-meilleur-tarif--clair svg,
.mgc-meilleur-tarif--clair svg {
  color: var(--turquoise, #58b8b2);
}

/* Le bouton des bandeaux et sa promesse forment un seul bloc : la grille
   du bandeau garde ses deux colonnes. */
.mgc-cta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

body .elementor.elementor .mgc-cta-action .mgc-meilleur-tarif,
.mgc-cta-action .mgc-meilleur-tarif {
  margin: 0;
}

body .elementor.elementor .cabin-pricing-intro .mgc-meilleur-tarif,
.cabin-pricing-intro .mgc-meilleur-tarif {
  margin: 18px 0 14px;
}

/* Les paliers longue durée, sous le prix de la fiche : une ligne de
   plus, du même gris que la précision de la promotion. */
body .elementor.elementor .mgc-paliers,
.mgc-paliers {
  margin: 10px 0 0;
  color: var(--muted, #6b716c);
  font-size: 12px;
  line-height: 1.5;
}

body .elementor.elementor .mgc-paliers-titre,
.mgc-paliers-titre {
  color: var(--ink, #171a18);
  font-weight: 600;
}
/* Sur l'accueil, le bloc est un conteneur Elementor (.e-con), dont la
   direction passe par ses variables : on les réécrit pour empiler la
   promesse au-dessus du bouton, comme sur les pages activités. */
body .elementor.elementor .e-con.mgc-cta-action {
  --flex-direction: column;
  --align-items: flex-start;
  --gap: 12px;
  --row-gap: 12px;
  flex-direction: column;
  align-items: flex-start;
}
/* ------------------------------------------------------------------
   La galerie « En images » des fiches activité (mgc-700).

   Les photographies que la fiche n'a pas encore montrées, en colonnes
   composées par le PHP (mgc_rendu_galerie_activite) : trois au plus sur
   ordinateur, à hauteur presque égale. Chaque tuile prend le rapport de
   son image (--mgc-ratio) : les portraits restent debout, les paysages
   couchés. Les colonnes étant étirées à la même hauteur, les tuiles
   d'une colonne un peu plus courte s'allongent (flex-grow) pour la
   remplir ; l'image, en object-fit: cover, se recadre d'autant et n'est
   jamais déformée.

   Mêmes codes que le bento de la fiche : fond pierre, filet intérieur,
   léger zoom au survol.
   ------------------------------------------------------------------ */
body .elementor.elementor.elementor .mgc-galerie-grille {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1vw, 18px);
  margin: clamp(32px, 4vw, 60px) 0 0;
}

body .elementor.elementor.elementor .mgc-galerie-colonne {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
}

body .elementor.elementor.elementor .mgc-galerie-tuile {
  position: relative;
  flex: 1 0 auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: var(--mgc-ratio, 1.5);
  background: var(--stone, #e9e5dd);
}

body .elementor.elementor.elementor .mgc-galerie-tuile::before {
  content: none;
}

/* Une seule photographie : pleine largeur, mais pas un mur. */
body .elementor.elementor.elementor .mgc-galerie-grille[data-nombre="1"] .mgc-galerie-tuile {
  max-height: 560px;
}

body .elementor.elementor.elementor .mgc-galerie-lien {
  position: absolute;
  inset: 0;
  display: block;
  cursor: zoom-in;
}

body .elementor.elementor.elementor .mgc-galerie-lien::after {
  content: "";
  position: absolute;
  inset: 0;
  outline: 1px solid rgba(207, 203, 195, 0.5);
  outline-offset: -5px;
  pointer-events: none;
}

body .elementor.elementor.elementor .mgc-galerie-lien:focus-visible {
  outline: 2px solid var(--turquoise-deep, #0f5c5a);
  outline-offset: -2px;
}

body .elementor.elementor.elementor .mgc-galerie-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
  transition: transform 1.1s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}

body .elementor.elementor.elementor .mgc-galerie-lien:hover .mgc-galerie-image {
  transform: scale(1.04);
}

/* Sur téléphone, les colonnes s'effacent (display: contents) et les
   tuiles forment une grille de carrés sur deux colonnes, qui s'aligne
   toujours sans trou. L'image y est recadrée au centre (cover), jamais
   déformée ; elle s'ouvre entière dans la visionneuse. Nombre impair :
   la dernière tuile, marquée par le PHP, prend toute la largeur. */
@media (max-width: 767px) {
  body .elementor.elementor.elementor .mgc-galerie-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body .elementor.elementor.elementor .mgc-galerie-colonne {
    display: contents;
  }
  body .elementor.elementor.elementor .mgc-galerie-tuile {
    min-width: 0;
    aspect-ratio: 1 / 1;
  }
  body .elementor.elementor.elementor .mgc-galerie-tuile.est-derniere-impaire {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .elementor.elementor.elementor .mgc-galerie-image {
    transition: none;
  }
  body .elementor.elementor.elementor .mgc-galerie-lien:hover .mgc-galerie-image {
    transform: none;
  }
}

/* La visionneuse : un <dialog> plein écran, fond presque noir, l'image
   entière (contain : jamais rognée ni déformée), la légende dessous.
   Les boutons sont remis à zéro avec insistance : le thème et Elementor
   habillent tous les <button> du site. */
html.mgc-visionneuse-ouverte {
  overflow: hidden;
}

body .elementor.elementor.elementor .mgc-visionneuse {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(12, 15, 14, 0.94);
  color: #fff;
  overflow: hidden;
}

body .elementor.elementor.elementor .mgc-visionneuse:not([open]) {
  display: none;
}

body .elementor.elementor.elementor .mgc-visionneuse::backdrop {
  background: rgba(12, 15, 14, 0.94);
}

body .elementor.elementor.elementor .mgc-visionneuse-scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px clamp(16px, 7vw, 96px) 28px;
  box-sizing: border-box;
}

body .elementor.elementor.elementor .mgc-visionneuse-figure {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

body .elementor.elementor.elementor .mgc-visionneuse-image {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 170px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

body .elementor.elementor.elementor .mgc-visionneuse-legende {
  max-width: 60ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

body .elementor.elementor.elementor .mgc-visionneuse-compteur {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
}

body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-bouton {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(12, 15, 14, 0.4);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-bouton:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-bouton:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-fermer {
  top: 12px;
  right: 12px;
  font-size: 26px;
}

body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-precedente,
body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-suivante {
  top: 50%;
  transform: translateY(-50%);
}

body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-precedente {
  left: clamp(8px, 2vw, 28px);
}

body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-suivante {
  right: clamp(8px, 2vw, 28px);
}

/* Sur téléphone, les flèches descendent sous l'image : posées sur ses
   bords, elles en masqueraient le sujet. */
@media (max-width: 767px) {
  body .elementor.elementor.elementor .mgc-visionneuse-scene {
    padding: 60px 12px 84px;
  }
  body .elementor.elementor.elementor .mgc-visionneuse-image {
    max-height: calc(100dvh - 210px);
  }
  body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-precedente,
  body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-suivante {
    top: auto;
    bottom: 18px;
    transform: none;
  }
  body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-precedente {
    left: calc(50% - 58px);
  }
  body .elementor.elementor.elementor .mgc-visionneuse .mgc-visionneuse-suivante {
    right: calc(50% - 58px);
  }
}
/* Calendrier de la fiche : le jour de DEPART (retour du gérant, 24/09/2026).
   On quitte la villa le matin du jour où le voyageur suivant arrive : une
   case prise dont la veille est libre peut donc servir de départ (site.js,
   initDispoInteractive). Elle reste barrée — elle n'est pas réservable
   comme arrivée — mais répond au clic. Le départ choisi, pris ou libre,
   est cerclé : un séjour du 27 au 3 se lit jusqu'au 3, pas jusqu'au 2. */
body .elementor.elementor.elementor .mgc-dispo-case.est-depart-possible {
  cursor: pointer;
}

body .elementor.elementor.elementor .mgc-dispo-case.est-depart-possible:hover,
body .elementor.elementor.elementor .mgc-dispo-case.est-depart-possible:focus-visible {
  box-shadow: inset 0 0 0 2px var(--turquoise-deep);
  outline: 0;
}

body .elementor.elementor.elementor .mgc-dispo-case.est-depart {
  background: var(--turquoise-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--turquoise-deep);
  font-weight: 600;
  text-decoration: none;
}