/* Correctifs d'interface Secundo Atlas.
   Reconstruction fidele : on corrige des bugs, on ne redessine pas.
   Chaque bloc note la cause du probleme qu'il traite. */

/* ------------------------------------------------------------------
   1. Selecteur de langue
   La .topbar d'origine etait une barre absolue en haut a droite, prevue
   pour UN libelle decoratif ("French (Belgium)"). Depuis le retrait de
   Weglot il y a trois langues reelles : elle debordait sur la navigation
   et disparaissait sous 480px, rendant EN et NL inatteignables sur mobile.
   Le selecteur rejoint donc la barre de navigation, en codes courts.
   ------------------------------------------------------------------ */

/* la .topbar ne contient plus que des conteneurs vides */
.topbar:not(:has(a)) {
  display: none;
}

.atlas-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  flex: 0 0 auto;
}

.atlas-lang .w-locales-items {
  display: flex;
  align-items: center;
  gap: 2px;
}

.atlas-lang .w-locales-item {
  display: flex;
}

/* le gris clair passe a 6.8:1 sur le #444 de la barre ; le teal de marque
   n'y monte qu'a 3.2:1, il ne sert donc que de repere non textuel */
.atlas-lang .top-link {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 8px;
  border-bottom: 2px solid transparent;
  color: var(--grey-text);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s cubic-bezier(.22, 1, .36, 1),
              border-color .25s cubic-bezier(.22, 1, .36, 1);
}

.atlas-lang .top-link:hover,
.atlas-lang .top-link:focus-visible {
  color: #fff;
}

.atlas-lang .top-link.w--current {
  color: #fff;
  border-bottom-color: var(--carlo-blue);
}

.atlas-lang .top-link:focus-visible {
  outline: 2px solid var(--carlo-blue);
  outline-offset: 2px;
}

/* -- Variante dropdown : bouton (langue courante) + menu deroulant (autres) -- */
.atlas-lang--dd {
  position: relative;
  gap: 0;
}
.atlas-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  color: var(--grey-text);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.atlas-lang__toggle:hover,
.atlas-lang__toggle:focus-visible {
  color: #fff;
}
.atlas-lang__toggle:focus-visible {
  outline: 2px solid var(--carlo-blue);
  outline-offset: 2px;
}
.atlas-lang__chev {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.atlas-lang--dd.is-open .atlas-lang__chev {
  transform: rotate(180deg);
}
/* le menu : ferme par defaut, deroule sous le bouton, aligne a droite */
.atlas-lang--dd .w-locales-items {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  flex-direction: column;
  gap: 0;
  min-width: 60px;
  padding: 4px;
  background: #2b2b2b;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 60;
}
.atlas-lang--dd.is-open .w-locales-items {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.atlas-lang--dd .top-link {
  justify-content: center;
  width: 100%;
  padding: 8px;
  border-bottom: 0;
  border-radius: 4px;
}
.atlas-lang--dd .top-link:hover,
.atlas-lang--dd .top-link:focus-visible {
  background: rgba(255, 255, 255, .1);
}

/* ------------------------------------------------------------------
   1 bis. Debordement de la barre de navigation sous 991px
   Bug preexistant, verifie en desactivant le selecteur : la barre
   contient le logo plus deux CTA en toutes lettres ("Catalogue gratuit",
   "Rencontrons-nous"), qui poussaient deja le hamburger hors de l'ecran.
   Le menu etait donc inatteignable sur mobile. Les deux CTA doublonnent
   le contenu du menu (Catalogues et Rencontrons-nous y figurent) : on les
   retire de la barre pour rendre le hamburger accessible.
   ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  /* .f-navigation-container cumulait width:100% et margin-left:40px, soit 40px
     de plus que la zone utile : tout ce qui suivait le logo partait hors ecran */
  .f-navigation {
    padding-left: 4%;
    padding-right: 4%;
  }

  .f-navigation-container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    gap: 8px;
    min-width: 0;
  }

  .f-navigation-content {
    flex: 0 1 auto;
    gap: 4px;
    min-width: 0;
  }

  .f-navigation .contact-button.catalog,
  .f-navigation .contact-button.meet {
    display: none;
  }

  .f-navigation .rt-menu-button-3 {
    flex: 0 0 auto;
    margin-left: 4px;
  }

  /* Cible tactile a 44px sans grossir le libelle. La hauteur seule ne suffit
     pas : les codes ne font que deux lettres, la largeur retombait sur le
     contenu (mesure a 360 et 390 : FR 28, NL 29, EN 30 pixels de large pour
     44 de haut, soit un tiers de la surface exigee). On pose donc aussi la
     largeur, et on recentre le libelle dans la cible ainsi elargie.

     Le budget de la barre y suffit : a 360px, logo 92 + selecteur 3x44
     + hamburger 60 = 284 pour 331 de zone utile hors marges de 4%. */
  .atlas-lang {
    margin-left: 2px;
    margin-right: 0;
  }

  .atlas-lang .top-link {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
  }
}

/* ------------------------------------------------------------------
   2. Onglet lateral "Catalogue Gratuit"
   Il remplace le bouton de reouverture du popup Elfsight. La config d'origine
   l'ancrait au bord droit (position:"right"), pas en bas : on retrouve cet
   ancrage, avec ses valeurs (fond rgb(10,86,84), texte blanc, radius 4).
   Ancre a mi-hauteur, il ne croise jamais la bulle WhatsApp (bas a droite).
   ------------------------------------------------------------------ */

.atlas-popup-reopen {
  top: 50%;
  right: 0;
  bottom: auto;
  z-index: 888887;              /* juste sous la bulle WhatsApp (888888) */
  transform: translateY(-50%);
  transform-origin: center right;
  writing-mode: vertical-rl;
  padding: 26px 12px;
  border-radius: 4px 0 0 4px;
  background: var(--carlo-blue, #20a5a2);   /* turquoise Atlas, comme les CTA */
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: -2px 0 16px #0000002e;
  transition: background-color .3s cubic-bezier(.22, 1, .36, 1),
              transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* l'onglet glisse vers l'exterieur : l'affordance d'un tiroir, pas d'un bouton */
.atlas-popup-reopen:hover {
  background: var(--teal-ink, #17817e);   /* plus fonce au survol, comme les CTA */
  transform: translateY(-50%) translateX(-4px);
}

.atlas-popup-reopen:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

@media screen and (max-width: 767px) {
  .atlas-popup-reopen {
    padding: 20px 10px;
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------
   3. Destinations du hero non cliquables
   .slogan-hero, .tabs-menu et .tabs-menu-copy sont trois calques absolus
   de 100vw x 100vh empiles au meme z-index. Le dernier du DOM
   (.tabs-menu-copy, les logos presse) recouvrait toute la zone et avalait
   les clics sur les liens de destination. Les calques ne captent plus le
   pointeur ; seuls leurs enfants interactifs le font.
   ------------------------------------------------------------------ */

.section-hero .slogan-hero,
.section-hero .tabs-menu,
.section-hero .tabs-menu-copy,
.section-hero .hero-masthead {
  pointer-events: none;
}

.section-hero .tabs-menu a,
.section-hero .tabs-menu-copy a,
.section-hero .hero-masthead a,
.section-hero .slogan-hero a {
  pointer-events: auto;
}

/* Sous 992px la rangee des 7 destinations est plus large que l'ecran et reste en
   nowrap : BALI sortait a gauche (x=-55 a 768px) et ILE MAURICE a droite. Elle
   retombait en plus 9px sous le pli. On l'autorise a passer a la ligne et on la
   remonte au-dessus du bord. */
@media screen and (max-width: 991px) {
  .section-hero .tabs-menu {
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
    row-gap: 6px;
    width: 100%;
    padding-left: 12px;
    /* gouttiere reservee a l'onglet lateral, sinon les libelles passent dessous */
    padding-right: 52px;
    bottom: 72px;
  }
}

/* le survol etait invisible : rien ne signalait que c'etaient des liens */
.section-hero .text-tab-hero {
  transition: color .25s cubic-bezier(.22, 1, .36, 1);
}

.section-hero .text-tab-hero:hover .backdrop-txt,
.section-hero .text-tab-hero:focus-visible .backdrop-txt {
  color: var(--whitestone);
}

.section-hero .text-tab-hero:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 24px;
}

/* ------------------------------------------------------------------
   4. Filtres de biens
   .div-filter-selection etait en display:none dans la feuille du site : les
   pastilles existaient dans le markup mais n'ont jamais ete visibles. On ne
   les revele que sur les pages ou atlas-filters.js a trouve un filtre qui
   separe reellement la liste (classe .atlas-filters posee par le script).

   Les styles de pastille viennent de site.css (.text-tab, .text-tab-type et
   leur etat .jetboost-filter-active) : on ne redessine pas, on ajoute la cible
   tactile et le focus. Le groupe destination (.text-tab, en teal de marque)
   reste a 3,0:1 comme le reste du site ; le groupe type (.text-tab-type, en
   #444) est a 9,7:1. Aujourd'hui seul le second s'affiche.
   ------------------------------------------------------------------ */

.div-filter-selection.atlas-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 4px;
}

.atlas-filters .text-tab,
.atlas-filters .text-tab-type {
  display: flex;
  align-items: center;
  justify-content: center;
  /* cible tactile : les pastilles ne faisaient que 10px de texte */
  min-height: 44px;
  margin-bottom: 0;
  transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
              color .25s cubic-bezier(.22, 1, .36, 1);
}

.atlas-filters .text-tab:focus-visible,
.atlas-filters .text-tab-type:focus-visible {
  outline: 2px solid var(--carlo-blue);
  outline-offset: 2px;
}

/* option qui ne laisserait aucun bien a l'ecran : lisible, mais inerte */
.atlas-filters .atlas-filter-vide {
  opacity: .4;
  cursor: default;
}

.atlas-filters-status {
  flex: 1 0 100%;
  margin: 4px 10px 0;
  color: var(--darkgrey-444);
  font-size: 12px;
  letter-spacing: .04em;
}

/* le script pose hidden sur les cartes exclues, sur les options sans bien et sur
   les groupes qui ne separent rien ; les classes Webflow forcent un display */
.listings-list .w-dyn-item[hidden],
.atlas-filters [hidden] {
  display: none;
}

/* ------------------------------------------------------------------
   5. Contraste du texte
   Le PRODUCT.md exige 4,5:1 sur le texte courant, pour un public de 45-70 ans.
   Contrainte qui prime : le teal #20a5a2 et l'or #dcaf27 sont la marque, leur
   teinte ne bouge pas. Sur #20a5a2, le blanc plafonne a 3,0:1 : aucune valeur
   de texte clair ne peut passer le seuil. Deux leviers restent, appliques ici :

   1. Les aplats de marque passent en texte fonce #151623 : 5,95:1, la teinte
      du fond est intacte. C'est le cas de tout ce qui portait du blanc sur teal.
   2. Le teal utilise comme couleur de texte sur blanc reste a 3,0:1, ce qui est
      conforme a partir de 24px (seuil des grands caracteres, WCAG 1.4.3). Les
      elements concernes -- adresse, e-mail, telephone, boutons -- passent donc
      a 24px. Ils y gagnent aussi en cible tactile.

   Le gris #8d8d8d n'appartient pas a la marque : il s'assombrit sur fond clair,
   s'eclaircit sur le #444 des blocs sombres.

   3. Les liens teal en ligne dans le corps de texte ne pouvaient etre traites
      par aucun des deux : les grossir a 24px au milieu d'un paragraphe de 15px
      est pire que le probleme. Ils passent donc a --teal-ink, qui garde la
      teinte de la marque au degre pres (178,3 contre 178,6) et n'en baisse que
      la clarte. Ce sont les liens des pages legales -- agrement IPI,
      deontologie, vie privee : exactement les signaux de serieux sur lesquels
      la marque s'appuie. Ils gardent leur soulignement, l'affordance ne
      dependant pas de la couleur.

   Restent hors seuil :
   - l'emoji du bloc cadeau, que l'outil compte comme du texte.
   - le texte blanc pose sur les videos et photos du hero : le contraste y
     depend de l'image, pas d'une regle CSS. Il se corrige par un voile, ce qui
     serait redessiner la section.
   ------------------------------------------------------------------ */

:root {
  --ink-on-brand: #151623;       /* 5,95:1 sur le teal, 8,70:1 sur l'or */
  --ink-on-brand-soft: #2c2c2c;  /* 4,63:1 sur le teal, pour les invites */
  --teal-ink: #17817e;           /* 4,69:1 sur blanc, teinte 178° comme #20a5a2 */
  --grey-ink: #757575;           /* 4,6:1 sur blanc */
  --grey-ink-on-dark: #b8b8b8;   /* 4,9:1 sur le #444 */

  /* ================================================================
     SOCLE DE TOKENS (voie A) — source unique de verite typo/espace.
     site.css empile les tokens de 4 templates Webflow (radiant, flowui,
     waves, accessible-components) et dedouble les classes a l'infini. On
     ne touche pas site.css : on definit ici le vocabulaire, et les regles
     plus bas y rattachent les roles reels. Mesures avant/apres a l'appui.
     ================================================================ */

  /* -- polices : 2 seules reellement livrees ; le reste (Outfit, Lato,
        Open Sans, Arial...) etait du fallback mort declare par les themes -- */
  --font-sans: "MessinaSansWeb", "MessinaSecours", system-ui, -apple-system, sans-serif;
  --font-serif: "SangbleuEmpireWeb", Georgia, serif;

  /* -- echelle typo : clamp(min mobile, fluide, max desktop). Calee sur les
        tailles rendues mesurees, pour UNIFIER (un niveau = une taille) sans
        deplacer la signature du hero. Remplace le fluide en vw brut de site.css,
        qui donnait 4 tailles pour un meme h2 et un h3 a 15px. -- */
  --fs-display: clamp(3.75rem, 2rem + 7.5vw, 9.375rem); /* 60 -> 150 : hero roca-heading */
  --fs-h1:      clamp(2rem, 1.3rem + 2.6vw, 3rem);      /* 32 -> 48 */
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.4vw, 2rem);   /* ~26 -> 32 : titres de section */
  --fs-h3:      clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);/* 22 -> 26 : tue le 15px */
  --fs-h4:      clamp(1.2rem, 1.1rem + 0.4vw, 1.3125rem); /* ~19 -> 21 */
  --fs-body-lg: 1.125rem;   /* 18 : les 12 rt-category-cards-text-* et cartes */
  --fs-body:    1rem;       /* 16 */

  --lh-display: 0.95;
  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  /* -- espacement : echelle 4px, remplace les 41 utilitaires rt-margin/padding
        nommes en toutes lettres (dont des copies divergentes : -fifteen-2 posait
        cursor:auto, aucune marge) -- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem;   --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;

  /* -- rayons : une echelle, la ou site.css melait 6/10/20/24px, 2rem, .25rem -- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 24px; --radius-pill: 100px;

  /* -- conteneur : une largeur canonique (site.css mele 940/1208/1290px) -- */
  --container: 1240px;

  /* -- rythme vertical des sections. Le site est deja sur une echelle 60/80
        propre ; on documente le pas et on cale les 2 heros hors-echelle
        (122/130 et 140/120, valeurs non rondes issues d'em) sur --section-y-hero. -- */
  --section-y: 60px;
  --section-y-lg: 80px;
  --section-y-hero: 120px;

  /* -- base neutre chaude (redesign passe 2) : remplace le blanc stark par une
        pierre chaude, signature premium. Les blocs blancs (cartes, formulaire)
        ressortent dessus. -- */
  --stone: #f6f3ec;
}

/* ==================================================================
   INTÉGRATION REDESIGN — passe 2 : rythme & respiration.
   Base neutre chaude : le body passe en stone ; toute section sans fond
   explicite s'en trouve rechauffee, les vrais aplats blancs ressortent.
   ================================================================== */
body,
body.body {
  background-color: var(--stone);
}

/* ==================================================================
   INTÉGRATION REDESIGN — passe 1 : typographie serif.
   SangBleu Empire est chargee mais n'etait appliquee a RIEN. On l'active sur
   les grands titres (hero + titres de section) : le plus gros levier premium,
   a contenu et couleurs constants (check_dist reste vert). Les petits titres
   fonctionnels (bylines, titres de carte, tags) restent en Messina sans.
   ================================================================== */
.roca-heading,
.heading-2,
.heading-2-copy,
.heading-3.white,
h2.heading-2 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Les titres de section etaient passes en CAPITALES par site.css ; en serif,
   les capitales sur un long titre sont denses. Le texte source est en casse
   naturelle -- on la restaure (presentation only, check_dist inchange), pour
   l'elegance editoriale (cf. "Consultez nos catalogues"). Le hero (roca) garde
   sa casse d'origine, deja composee. */
.heading-2,
.heading-2-copy {
  text-transform: none;
}

/* -- levier 1 : texte fonce sur les aplats de marque -- */

/* le bloc de contact : titre, libelles, saisie et invite */
.contact.w-col-7 .contact__heading,
.contactform__label,
.contactform__field,
.contactform__field.w-select {
  color: var(--ink-on-brand);
}

.contactform__field::placeholder {
  color: var(--ink-on-brand-soft);
  opacity: 1;                    /* Firefox applique 0.54 par defaut */
}

/* le champ message est une boite blanche : son invite suit le gris de texte */
.contactform textarea::placeholder,
.contactform textarea.w-input::placeholder {
  color: var(--grey-ink);
  opacity: 1;
}

/* les autres aplats teal, fond porte par un ancetre.
   .rt-cta-box-two est la variante grise (#444) du meme bloc : elle garde son
   texte blanc, l'assombrir la ferait tomber a 1,8:1 */
.rt-cta-box:not(.rt-cta-box-two) .rt-text-white-2,
.cta-2-container.green .paragraph-4.white,
.cta-2-container.green label,
.tabslist.w--current,
.tabslist.w--current div {
  color: var(--ink-on-brand);
}

/* aplats portes par l'element lui-meme ; on reprend la specificite de site.css,
   sinon la regle d'origine (trois classes) l'emporte */
.listing-type,
.rt-tag-7.rt-dark-tab.rt-blue-tab,
.avis-v-rifi,
.button-5.nav.green,
.button-5.nav.green-golden-shade {
  color: var(--ink-on-brand);
}

/* l'or : meme logique, le fond ne bouge pas, le texte fonce */
.button-5.nav:not(.green):not(.green-golden-shade) {
  color: var(--ink-on-brand);
}

/* ------------------------------------------------------------------
   Retour au BLANC sur les aplats TURQUOISE — choix du porteur, pour la
   coherence de marque avec les boutons turquoise (dont le texte est blanc).
   Compromis de contraste ASSUME : blanc sur #20a5a2 rend ~3:1, sous le seuil
   AA de 4,5:1 que le PRODUCT.md demande. Ne concerne QUE le turquoise : l'or
   garde son texte fonce, et le texte des champs de saisie (boites blanches)
   reste fonce. Meme specificite que les regles ci-dessus, pose apres -> gagne.
   ------------------------------------------------------------------ */
.contact.w-col-7 .contact__heading,
.contactform__label,
.rt-cta-box:not(.rt-cta-box-two) .rt-text-white-2,
.listing-type,
.rt-tag-7.rt-dark-tab.rt-blue-tab {
  color: #fff;
}

/* le lien or sur teal plafonne a 1,5:1 : il suit le texte du bloc et se
   signale par le soulignement */
.cta-2-container.green .paragraph-4.white .golden-span {
  color: var(--ink-on-brand);
  text-decoration: underline;
}

/* le select des conferences etait en or sur gris clair, 1,9:1 ; c'est la date
   choisie par le visiteur, elle doit se lire */
.select-field {
  color: var(--ink-on-brand);
}

/* -- levier 2 : le teal comme texte, a partir de 24px -- */

/* 3,01:1 est conforme des 24px (18pt). Ces elements etaient entre 15 et 23px. */
.is--details,
.contact-hyperlink,
.pdf-link,
.text-block-5 .link-3,
.contacform__button,
.blog.w-richtext blockquote a {
  font-size: 24px;
}

/* .contact-hyperlink et .pdf-link portent des tailles relatives ou en vw dans
   site.css : la valeur en px ne suffit pas sans remonter la specificite */
.is--details .contact-hyperlink,
.rt-home-four-three-box-data .pdf-link,
p.pdf-link > a.pdf-link {
  font-size: 24px;
}

/* la citation posait le teal sur #f7f9fd, ou il tombe a 2,86:1 : sur blanc il
   retrouve ses 3,01:1 */
.blog.w-richtext blockquote {
  background-color: #fff;
}

/* -- levier 3 : les liens teal en ligne, a teinte constante et clarte baissee -- */

.w-richtext p > a,
.w-richtext li > a {
  color: var(--teal-ink);
  text-decoration: underline;
}

/* -- le gris de texte, seul gris qui n'est pas une couleur de marque -- */

.paragraph-2,
.blog-preview-txt,
.date-blog-txt {
  color: var(--grey-ink);
}

/* meme gris, mais pose sur le #444 : ici il faut monter en clarte */
.rt-width-two-hundred-sixty {
  color: var(--grey-ink-on-dark);
}

/* ------------------------------------------------------------------
   6. Indicateur de focus clavier
   La base Webflow de site.css supprime l'anneau de focus sur tout ce
   qu'elle fournit : .w-input, .w-select, les bascules et liens de menu
   deroulant, le bouton de nav, les onglets, les fleches de carrousel.
   Au clavier, plus rien ne signale la position dans le formulaire ni
   dans la navigation (WCAG 2.4.7). Les composants maison, eux, ont
   toujours gere :focus-visible -- leurs regles restent au-dessus.

   :focus-visible et non :focus : le pointeur ne declenche rien, seul le
   clavier (et le focus programmatique) fait apparaitre l'anneau.

   L'anneau est bicolore parce que le site pose des cibles aussi bien sur
   du blanc que sur les aplats teal, le #444 et les photos du hero :
   halo blanc colle a l'element, anneau fonce autour. Un seul des deux
   suffit a rester visible sur n'importe quel fond. L'anneau fonce est un
   outline (jamais rogne par un ancetre en overflow:hidden), le halo un
   box-shadow (qui, lui, epouse le border-radius).

   Specificite : .w-input:focus vaut 0-2-0, donc input:focus-visible
   (0-1-1) ne suffirait pas. Les selecteurs de classe sont repris tels
   quels, a egalite de specificite -- atlas-ui.css est charge apres.
   ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.w-input:focus-visible,
.w-select:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-dropdown-link:focus-visible,
.w-nav-button:focus-visible,
.w-tab-link:focus-visible,
.w-slider-arrow-left:focus-visible,
.w-slider-arrow-right:focus-visible,
.w-slider-dot:focus-visible {
  outline: 2px solid var(--ink-on-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #fff;
}

/* les champs du formulaire de contact sont poses a meme l'aplat teal et
   n'ont qu'une bordure basse : le halo blanc y serait un rectangle plein
   au milieu du teal. L'anneau fonce seul suffit, le contraste est de
   5,95:1 sur le fond. */
.contactform__field:focus-visible,
.contactform__field.w-select:focus-visible {
  box-shadow: none;
}

/* ------------------------------------------------------------------
   7. Police de secours aux metriques de Messina
   MessinaSansWeb est en font-display:swap et n'est decouverte qu'apres
   l'analyse de site.css : le premier rendu se fait en sans-serif, puis
   le texte se recompose. Messina est ~5% plus large qu'Arial : sur
   /blog les chapeaux d'article perdaient une ligne au swap (240 ->
   209px), soit un CLS de 0,211 en mobile -- au-dessus du seuil de 0,1
   alors que tout le reste du site tient sous 0,03.

   Precharger les quatre graisses couterait 96 ko et ne fermerait pas la
   fenetre de swap sur reseau lent. On declare donc une famille de
   secours qui EST Arial, mais portee aux metriques de Messina : meme
   largeur d'avance, donc memes retours a la ligne, et le swap ne
   deplace plus rien.

   size-adjust = largeur Messina / largeur Arial. Ce rapport depend du
   melange de glyphes : une chaine de reference unique donnait 99,4% en
   graisse 600, alors que le H2 de /en/contact demande 100,2% -- l'ecart
   suffisait a deplacer un retour a la ligne et rendait 0,222 de CLS.
   Les valeurs ci-dessous sont donc les medianes, ponderees par la
   longueur, mesurees sur les blocs de texte reels de 25 pages des trois
   langues (scripts/calibrate_fallback.mjs). Ascent et descent sont les
   metriques de Messina divisees par size-adjust, qui les remet a
   l'echelle.

   La graisse 800 n'existe ni chez Messina ni chez Arial : le navigateur
   emboldit Arial par synthese mais retombe sur la coupe 700 de Messina,
   d'ou un rapport de 88% -- sans face dediee elle heritait du 100,7% du
   700, soit 12% d'erreur.
   ------------------------------------------------------------------ */

@font-face {
  font-family: MessinaSecours;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  font-weight: 300;
  size-adjust: 104.6%;
  ascent-override: 85.1%;
  descent-override: 21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: MessinaSecours;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  font-weight: 400;
  size-adjust: 105.1%;
  ascent-override: 91.4%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: MessinaSecours;
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Liberation Sans");
  font-weight: 600;
  size-adjust: 100%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: MessinaSecours;
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Liberation Sans");
  font-weight: 700;
  size-adjust: 100.7%;
  ascent-override: 95.3%;
  descent-override: 23.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: MessinaSecours;
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Liberation Sans");
  font-weight: 800;
  size-adjust: 88.1%;
  ascent-override: 109%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}

@media (prefers-reduced-motion: reduce) {
  .atlas-lang .top-link,
  .atlas-popup-reopen,
  .atlas-filters .text-tab,
  .atlas-filters .text-tab-type,
  .section-hero .text-tab-hero {
    transition-duration: .01ms;
  }

  .atlas-popup-reopen:hover {
    transform: translateY(-50%);
  }
}

/* ------------------------------------------------------------------
   8. Titre de page promu en h1
   Six pages du sitemap (les catalogues Espagne) sortaient de Webflow sans
   aucun h1 : leur titre de hero etait un <h4 class="heading-huge c2">.
   generate.promote_h1 le promeut, parce que Google lit la balise et non le
   role ARIA.

   La base Webflow style la balise h1 NUE comme un bandeau : aplat
   --carlo-blue, texte centre, coins arrondis, display:flex, 20px de padding
   vertical, 60px de marge basse. Applique tel quel a un titre de hero pose
   sur photo, il le changerait en pave bleu. On annule donc exactement ces
   declarations, et rien d'autre : taille, interlettrage, graisse et couleur
   continuent de venir de .heading-huge et .c2, qui l'emportent en
   specificite sur la balise a toutes les largeurs.

   Les marges reviennent aux 10px du h4 d'origine -- constantes chez Webflow
   a tous les breakpoints, contrairement a la taille.
   ------------------------------------------------------------------ */
h1.atlas-h1 {
  background-color: transparent;
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  text-align: inherit;
  text-transform: inherit;
}

/* ------------------------------------------------------------------
   9. Plancher de taille de police
   La feuille Webflow dimensionne presque tout le texte en vw, sans plancher :
   la taille suit la largeur du viewport jusqu'a devenir illisible. Mesure sur
   le rendu, avant correctif : 6,7px a 1920 (.listing-type, .item-label-text),
   7,2px a 480 (p, h4), 7,7px a 768 (.spec-title, .spec-value,
   .spec-title-left-line), 9,0px a 360/768/1024/1440 et 9,8px a 390.

   Ce n'est pas de l'ornement : c'est le contenu commercial du site -- type de
   bien, destination, "revenu locatif potentiel", prix de depart, chapeaux
   d'article -- lu par un public de 45-70 ans, celui pour lequel le PRODUCT.md
   exige deja 4,5:1 de contraste. 291 pages sont concernees.

   Trois causes distinctes, toutes traitees ici :
   - une valeur en vw reglee pour un breakpoint et laissee active en dehors
     (1vw vaut 19px a 1920 mais 7,7px a 768) ;
   - les valeurs que Webflow *rabaisse* au-dela de 1920px (.35vw, .5vw), qui
     supposent un ecran bien plus large que le seuil ou elles s'activent ;
   - quelques tailles fixes heritees de la maquette : 9px sur les etiquettes
     de bien, 10px sur les filtres et les petits boutons, 7,5px sur le bouton
     telephone sous 480px.

   Le correctif est un plancher, pas un redimensionnement. max(12px, X) rend
   exactement X partout ou X depasse deja 12px : la croissance en vw est
   preservee a l'identique, et la mise en page ne bouge qu'aux largeurs ou le
   texte est aujourd'hui illisible.

   Chaque declaration d'origine est reprise dans SON contexte media, y compris
   celles qui sont deja au-dessus du seuil. atlas-ui.css est charge apres
   site.css : a specificite egale, une regle posee ici au niveau racine
   l'emporterait sur la variante media de site.css, et p passerait de 1,15vw a
   1,25vw a 1440. On replique donc la cascade a l'identique, dans l'ordre de
   Webflow (racine, min-1280, min-1920, max-767, max-479), en n'y ajoutant que
   le plancher.

   Deux familles restent volontairement de cote. .nav-link-2 et ses variantes
   (jusqu'a .5vw, soit 1,8px a 360) ainsi que .view-profile : ces classes
   n'apparaissent dans aucune page generee, ce sont des restes de la
   bibliotheque Webflow. Et .slide-nav-2, .slide-nav-3, .spacer-blank, sous le
   seuil eux aussi mais qui ne portent aucun texte.
   ------------------------------------------------------------------ */

/* -- racine : valeurs actives de 480 a 1279px (et au-dela sans variante) -- */

h3 {
  font-size: max(12px, 2vw);     /* 9,6px a 480 */
}

h4 {
  font-size: max(12px, 1.5vw);   /* 7,2px a 480 ; 11,5px a 768 */
}

p {
  font-size: max(12px, 1.25vw);  /* 6,0px a 480 ; 9,6px a 768 */
}

.listing-address,
.listing-address-copy {
  font-size: max(12px, 1.25vw);  /* nom du bien et prix de depart */
}

.spec-title,
.spec-value,
.spec-title-left-line {
  font-size: max(12px, 1vw);     /* fiche technique du bien */
}

.blog-preview-txt,
.date-blog-txt {
  font-size: max(12px, 1vw);
}

.rt-home-one-cta-paragraph.rt-body-dark-font {
  font-size: max(12px, 1.5vw);
}

/* tailles fixes de la maquette : elles sont sous le seuil a toutes les
   largeurs, le plancher se confond donc avec la valeur retenue */
.listing-type,
.item-label-text {
  font-size: 12px;               /* 9px */
}

.destination-txt-filter,
.button-classement-prix {
  font-size: 12px;               /* 10px */
}

/* -- au-dela de 1280px -- */

@media screen and (min-width: 1280px) {
  p {
    font-size: max(12px, 1.15vw);
  }

  .blog-preview-txt {
    font-size: max(12px, .85vw);
  }
}

/* -- au-dela de 1920px : c'est la que Webflow redescend le plus bas -- */

@media screen and (min-width: 1920px) {
  h3 {
    font-size: max(12px, 1.75vw);
  }

  p {
    font-size: max(12px, .65vw);
  }

  .listing-address,
  .listing-address-copy {
    font-size: max(12px, .7vw);
  }

  .spec-title,
  .spec-value,
  .spec-title-left-line {
    font-size: max(12px, .5vw);  /* 9,6px */
  }

  .blog-preview-txt,
  .date-blog-txt {
    font-size: max(12px, .5vw);
  }

  .listing-type,
  .item-label-text {
    font-size: max(12px, .35vw); /* 6,7px */
  }

  .rt-home-one-cta-paragraph.rt-body-dark-font,
  .rt-width-two-hundred-sixty,
  .rt-home-three-award-description,
  .rt-home-three-award-content,
  .rich-text-block {
    font-size: max(12px, .5vw);
  }
}

/* -- sous 768px -- */

@media screen and (max-width: 767px) {
  .button-5.nav.green.smaller,
  .button-5.nav.smaller,
  .button-5.nav.green-golden-shade.smaller.w--current {
    font-size: 12px;             /* 10px */
  }
}

/* -- sous 480px : le breakpoint mobile de Webflow, en vw lui aussi -- */

@media screen and (max-width: 479px) {
  h3 {
    font-size: max(12px, 4vw);
  }

  h4,
  p {
    font-size: max(12px, 3.5vw);
  }

  .listing-address,
  .listing-address-copy {
    font-size: max(12px, 3.5vw);
  }

  .spec-title,
  .spec-value,
  .spec-title-left-line {
    font-size: max(12px, 3vw);   /* 10,8px a 360 */
  }

  .blog-preview-txt,
  .date-blog-txt {
    font-size: max(12px, 4vw);
  }

  .listing-type,
  .item-label-text {
    font-size: max(12px, 2.5vw); /* 9,0px a 360 */
  }

  .rt-home-one-cta-paragraph.rt-body-dark-font,
  .listing-separator {
    font-size: max(12px, .75em); /* 11,25px pour un corps de 15px */
  }

  .slogan {
    font-size: max(12px, 3vw);   /* 10,8px a 360 */
  }

  .button-2.dark-button,
  .button-2.white-button {
    font-size: max(12px, 3vw);
  }

  .button-phone {
    font-size: 12px;             /* 7,5px */
  }

  .button-phone.dark-button {
    font-size: 12px;             /* 8px */
  }

  .button-phone.white-button {
    font-size: 12px;             /* 11px */
  }

  .button-5.nav.green.smaller,
  .button-5.nav.smaller,
  .button-5.nav.green-golden-shade.smaller {
    font-size: 12px;             /* 10px */
  }
}

/* ------------------------------------------------------------------
   10. Deux debordements horizontaux
   Une page qui defile lateralement sur mobile est un defaut de lecture, pas
   une question d'esthetique : le texte sort de l'ecran et la page tremble au
   toucher. Deux causes, sans rapport l'une avec l'autre.

   a) /presse et /blog entre 768 et 991px (17px de debordement sur /presse,
      1px sur /blog, soit 6 pages avec les trois langues). .box-t-moignages et
      .box-blog portent min-width:375px, valeur pensee pour la maquette
      bureau. Webflow annule ce minimum sous 480px et repasse le conteneur en
      display:block sous 768px, mais la bande 768-991 garde deux colonnes :
      les pistes 1fr du parent remontent alors a 375px chacune, soit
      375 + 20 de gouttiere + 375 = 770 dans un conteneur de 738 a 768px.
      On rend le minimum et les pistes compressibles sur toute la bande :
      les deux colonnes retombent a 359px et la maquette est conservee.

   b) /lp/catalogue-espagne au-dela de 1920px (266px de debordement, 6 pages).
      La feuille Webflow y remplace img{max-width:100%} par
      img{max-width:1200px} : les images perdent leur garde-fou et se posent a
      leur largeur naturelle. .reassurance-logo borne bien son conteneur a
      50px, mais l'<img> fille n'a aucune contrainte de largeur et part a
      1200px. On la rattache a son conteneur plutot que de toucher a la regle
      globale, qui sert aux visuels de hero de tout le site.

   c) /lp/marrakech-lp sous 480px (22px de debordement avant tout correctif,
      3 pages). .button-2 porte letter-spacing:.5em, soit 6px d'interlettrage
      par caractere a la taille du bouton : le libelle "VISITEZ NOS AUTRES
      DESTINATIONS" mesure 443px pour un conteneur de 310px a 360px de large.
      Il ne peut pas revenir a la ligne, les espaces du contenu Webflow etant
      des espaces insecables : min-content et max-content valent tous deux
      443px. Aucune propriete de cesure ne rattrape cela sans couper un mot
      au milieu. Deux declarations suffisent : le bouton cesse de deborder son
      conteneur, et l'interlettrage revient a .25em sous 480px -- la valeur
      d'origine a ete reglee pour la largeur de bureau, ou elle represente
      la moitie de la largeur d'un glyphe. Le libelle reste sur une ligne,
      mots entiers.

      Le plancher de police de la section 9 aggravait ce debordement
      preexistant (22 -> 42px a 360) : un texte plus grand est plus large.
      C'est le risque propre au plancher, et la seule page ou il s'est
      materialise.
   ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .rt-home-four-three-box-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .box-t-moignages,
  .box-blog {
    min-width: 0;
  }
}

@media screen and (min-width: 1920px) {
  .reassurance-logo img {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 479px) {
  .button-2,
  .button-2.dark-button,
  .button-2.white-button {
    max-width: 100%;
    letter-spacing: .25em;
  }
}

/* ------------------------------------------------------------------
   11. Debordements de la bande 480-767px
   Webflow ecrit ses correctifs mobiles dans @media (max-width: 479px).
   A 480px l'ecran est encore celui d'un telephone, mais toutes ces regles
   viennent de s'eteindre d'un coup : la page reprend les valeurs de bureau
   dans 480px de large. Les trois debordements ci-dessous ont cette meme
   origine unique, et tous sont absents a 479 comme a 768.

   a) L'accueil, +68px a 480 (le francais seul ; EN et NL ont des titres
      plus courts et tiennent).
      Ce n'est pas .flex-logo-press-div, malgre ses 500px de large : ce bloc
      est enferme dans .hero-img_wrap, qui est en overflow:hidden. Le
      masquer ne retire pas un pixel au debordement -- verifie en le posant
      en display:none, la page deborde toujours de 68.
      Le vrai responsable est le titre <h2 class="section-header is--dark">
      "NOS BIENS COUP DE COEUR". Webflow en separe les mots par des espaces
      insecables (U+00A0) : le titre est une seule chaine, sans aucun point
      de coupure. A 479 elle mesure 399px pour 459 de conteneur (5vw, soit
      24px, et 3px d'interlettrage). A 480 la regle mobile s'eteint : 30px
      et 5px d'interlettrage portent la chaine a 528,5px dans un conteneur
      de 460,8. Le debordement decroit ensuite avec la largeur (68px a 480,
      29 a 520, 10 a 540) et s'annule vers 551, la ou 0,96 x largeur
      rattrape les 528,5.
      Aucune propriete de cesure ne coupe un espace insecable ; celles qui
      y arriveraient (word-break, overflow-wrap: anywhere) couperaient au
      milieu de COEUR, ce qui est pire que le defaut. Le seul levier est la
      taille. On prolonge donc la rampe mobile de Webflow lui-meme : 5vw,
      plafonnee a la valeur de bureau. min(2em, 5vw) rend exactement 2em
      partout a partir de 600px de large -- donc rien ne change au-dela --
      et suit la largeur en dessous. Le titre y tient par construction :
      sa chaine mesure alors 0,689 x largeur + 115px d'interlettrage, ce qui
      reste sous les 0,96 x largeur du conteneur des 424px de viewport.

   b) /lp/events-atlas, +17px a 480 (et +51 sur /lp/events-espagne, qui
      partage la grille ; 9 pages evenements avec les trois langues).
      Ce ne sont pas "184px x 2 plus les gouttieres" : 184 + 25 + 184 = 393
      tiendrait dans les 432 du conteneur. Les deux pistes ne sont pas
      egales. ._1-4-grid est en 1fr 1fr, et 1fr vaut minmax(auto, 1fr) :
      son minimum automatique est le min-content de la carte, qu'aucune
      part en fr ne peut faire descendre. La premiere carte porte "DIEGEM
      (Bruxelles)", la aussi avec un espace insecable : 214,3px de texte
      insecable plus 2 x 25 de padding, soit 264,3px de min-content. La
      piste 1 se cale donc a 264,3 et la piste 2 a son propre min-content
      (184,1 ici, 236,2 sur events-espagne) : 473 a 526px de grille pour
      432 de conteneur.
      minmax(0, 1fr), le remede de la section 10a, ne conviendrait pas ici :
      les pistes retomberaient a 203px et ce serait le texte qui sortirait
      du cadre blanc de la carte. On laisse donc la grille decider du nombre
      de colonnes : deux seulement quand 265px par colonne sont disponibles
      -- 265 etant le min-content de la carte la plus large, valeur mesuree
      identique sur les neuf pages evenements. En dessous elle revient a la
      colonne unique, celle que Webflow applique deja a 479. Le min(100%)
      est le garde-fou d'usage : une piste ne peut jamais exiger plus que
      son conteneur.

   c) /lp/events et /lp/events-espagne, +120px a 480, encore +10 a 700
      (6 pages).
      .div-block-6, le cadre de la video YouTube, cumule min-width:720px et
      max-width:100%. Le minimum l'emporte sur le maximum : la boite fait
      720px quelle que soit la largeur disponible, et comme elle est
      centree elle sort des deux cotes (bord gauche a -120 pour un viewport
      de 480). Webflow neutralise ce minimum a 479 (min-width:100%), et a
      partir de 768 le conteneur depasse enfin 720 : il ne reste que la
      bande intermediaire a traiter. On y reprend la valeur que Webflow
      applique deja a 479, min-width:100%, et non 0 : le bloc est un
      element flex dont le contenu -- un embed en position absolue sous un
      padding-top en pourcentage -- ne mesure rien par lui-meme. Avec un
      minimum a 0 la boite tombe a 0px de large et la video disparait ;
      avec 100% elle epouse le conteneur, mesure a 432px pour un viewport
      de 480.
   ------------------------------------------------------------------ */

@media screen and (min-width: 480px) and (max-width: 767px) {
  .section-header.is--dark {
    font-size: min(2em, 5vw);
  }

  ._1-4-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
  }

  .div-block-6 {
    min-width: 100%;
  }
}

/* ------------------------------------------------------------------
   12. Contraste des pages catalogue Espagne
   Ces 6 pages n'etaient chargees par AUCUN harnais : ni audit_contrast,
   ni audit_runtime, ni verify_ui, ni shoot. Les y ajouter a fait sortir
   cinq familles d'un coup, toutes sous le seuil, toutes sur les elements
   qui portent la conversion de landing pages publicitaires.

   Memes deux leviers que la section 5, appliques a l'identique :

   1. Aplat de marque -> texte fonce. Blanc sur l'or #ddbb3e ne donne que
      1,87:1 et aucune valeur de texte clair ne peut passer le seuil sur
      cet aplat. Le texte passe donc a #151623 : 9,61:1, et la teinte du
      fond -- qui EST la marque -- ne bouge pas d'un degre.
   2. L'or comme couleur de TEXTE sur blanc plafonne a 2,06:1. On baisse
      la seule clarte : #8c6f17 rend 4,77:1 pour une teinte de 45,1
      degres, identique a celle de #dcaf27. Meme arbitrage que le
      --teal-ink de la section 5.
   ------------------------------------------------------------------ */
.button-4 .text-large,
.button-4 .text-block-3 {
  color: var(--dark-ink, #151623);
}

.golden-span,
.footer__link .text-block-3 {
  color: #8c6f17;
}

/* La page 404 ne figurait dans aucune liste de pages non plus : son unique
   lien portait le teal brut a 3,01:1. Meme --teal-ink que la section 5. */
.utility-page-content a {
  color: var(--teal-ink, #17817e);
}

/* ------------------------------------------------------------------
   Services -- section "UNE PALETTE DE SERVICES OPTIMISES"
   Les 6 etapes (Identification, Etude de marche, ...) surmontent une zone
   de contenu qui empile 5 blocs. Le CSS Webflow les met TOUS en
   display:none ; seul l'etat actif, pose par l'interaction IX2, en revele
   un. Cette interaction ne se rejoue pas a l'affichage initial : la zone
   reste vide au chargement alors que la 1re etape est deja marquee active
   (barre de progression pleine, carte .rt-active). On restaure donc le 1er
   bloc comme defaut visible, meme si IX2 ne se declenche pas.

   display:block a specificite 0,2,0 bat le .rt-...-tab-content-2{none}
   d'origine (0,1,0) mais cede a un style inline : si l'utilisateur change
   d'onglet, l'interaction masque bien le bloc. opacity:1 neutralise les
   fondus IX2 des enfants (teaser, titre, carte) pour que le contenu soit
   reellement visible et pas seulement present. */
.rt-home-one-unforgettable-content-2 .rt-crm-management-tab-content-2 {
  display: block;
}
.rt-crm-management-tab-content-2 .rt-design-details-teaser-2,
.rt-crm-management-tab-content-2 .rt-home-two-electrical-card-2,
.rt-crm-management-tab-content-2 .rt-home-one-unforgettable-content-2 h2,
.rt-crm-management-tab-content-2 h2 {
  opacity: 1 !important;
}

/* ==================================================================
   VOIE A — dedup a rendu constant (les seules regles sures).
   Constat apres mesure : la typo RENDUE est deja coherente par role.
   Les 4 "tailles de h2" etaient 4 ROLES distincts (byline, chiffre-cle,
   titre de bien, titre heros), pas un meme niveau incoherent. On ne
   redimensionne donc rien. On se contente de collapser les copies de
   classes strictement identiques sur un token unique : meme rendu au
   pixel, mais une seule source de verite (et point d'ancrage pour B).
   Toute intervention qui CHANGE une taille rendue releve d'un choix de
   design a valider, pas de ce bloc.
   ================================================================== */

/* -- Les 12 copies rt-category-cards-text-* rendent toutes 18px/31px :
      un seul token, rendu inchange. -- */
.rt-category-cards-text,
.rt-category-cards-text-2, .rt-category-cards-text-3, .rt-category-cards-text-4,
.rt-category-cards-text-5, .rt-category-cards-text-6, .rt-category-cards-text-7,
.rt-category-cards-text-8, .rt-category-cards-text-9, .rt-category-cards-text-10,
.rt-category-cards-text-11, .rt-category-cards-text-12 {
  font-size: var(--fs-body-lg);   /* 18px, valeur actuelle */
  line-height: 1.72;              /* 31/18, valeur actuelle */
}

/* -- Les 4 copies rt-heading-six-* rendent toutes 20px/32px : un token. -- */
.rt-heading-six,
.rt-heading-six-2, .rt-heading-six-3, .rt-heading-six-4 {
  font-size: 1.25rem;   /* 20px, valeur actuelle */
  line-height: 1.6;     /* 32/20, valeur actuelle */
}

/* -- Triptyque "VOTRE VILLA a MARRAKECH" : les 3 images ne remplissaient pas
      leur colonne (461px dans un panneau de 480px) -> espaces irreguliers entre
      elles, et object-fit:fill les deformait. On les force a remplir le panneau,
      bord a bord ; cover garde le cadrage sans distorsion. margin-bottom:0
      supprime aussi l'ecart vertical quand les panneaux s'empilent en mobile. -- */
#interior .interior__panel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#interior .triptych-panel {
  margin-bottom: 0;
}

/* ==================================================================
   VOIE A (suite) — CTA : geometrie unifiee.
   L'audit a releve 11 apparences de boutons : meme bouton rendu a 16,5 ET
   17px, tailles de 12 a 24px, rayons 0/4/50px, casses melangees. On unifie
   la GEOMETRIE (taille, graisse, padding, rayon, casse) sur les boutons de
   marque, en PRESERVANT les couleurs de chaque variante -- elles dependent du
   fond (texte blanc sur banniere sombre, encre sur fond clair, aplat teal du
   formulaire), c'est un role, pas un accident. Exclus : les boutons
   fonctionnels (tri de biens, badge pill) et le popup, qui ont leur logique.
   ================================================================== */
.button,
.button.is-outline,
.button-2,
.button-4,
.contacform__button {
  font-size: 1rem;          /* 16px : absorbe la derive 16,5/17 et remonte les 12px */
  font-weight: 600;
  line-height: 1.2;
  padding: 0.8rem 1.6rem;   /* ~13/26px */
  border-radius: 0;         /* carre, comme l'origine (le 6px etait de trop) */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* -- Systeme 2 niveaux.
   PRIMAIRE : fond turquoise Atlas (--carlo-blue), texte blanc, carre, partout.
   Ce sont les CTA d'action (Discutons de votre projet, Recevoir, Rencontrons-
   nous, Catalogue gratuit, Envoyer). -- */
.button.is-outline,
.contacform__button {
  background-color: var(--carlo-blue);
  color: #fff;
  border: 1px solid var(--carlo-blue);
}
.button.is-outline:hover,
.button.is-outline:focus-visible,
.contacform__button:hover,
.contacform__button:focus-visible {
  background-color: var(--teal-ink, #17817e);  /* plus fonce, garde le blanc lisible */
  border-color: var(--teal-ink, #17817e);
  color: #fff;
}

/* SECONDAIRE (button-2) : un bouton "wash" turquoise substantiel, pas une fine
   bordure anemique. Fond clair -> voile turquoise + texte teal-ink ; fond
   sombre (etiquete white-button ou detecte .column-3 / bannieres) -> voile
   blanc + texte blanc. Au survol, TOUTE la famille se remplit de turquoise
   plein avec un lift d'1px : l'animation manquait completement.
   Les modificateurs dark-button/white-button encodent le contexte : dark =
   fond clair, white = fond sombre. On agit au niveau du compose (0,2,0) pour
   battre l'aplat de site.css. */
.button-2 {
  border: 1px solid transparent;
  transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
              border-color .25s cubic-bezier(.22, 1, .36, 1),
              color .25s cubic-bezier(.22, 1, .36, 1),
              transform .25s cubic-bezier(.22, 1, .36, 1);
}
.button-2.dark-button {                 /* pose sur fond clair */
  background-color: rgba(32, 165, 162, .12);
  border-color: rgba(32, 165, 162, .30);
  color: var(--teal-ink, #17817e);
}
.button-2.white-button,                 /* fond sombre : etiquete */
.column-3 .button-2,                    /* fond sombre : detecte (ADN #444) */
.rt-background-dark-2 .button-2,
.rt-background-dark-3 .button-2 {
  background-color: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.button-2:hover,
.button-2:focus-visible {
  background-color: var(--carlo-blue);
  border-color: var(--carlo-blue);
  color: #fff;
  transform: translateY(-1px);
}

/* ==================================================================
   Nav CTA — hierarchie primaire / secondaire.
   Deux boutons turquoise identiques dans la barre se cannibalisaient. On
   aligne la nav sur le reste du site, ou "Rencontrons-nous" est l'action que
   chaque section repete : elle devient le primaire turquoise plein. "Catalogue
   gratuit", entree a moindre engagement, devient un secondaire ghost qui se
   remplit de turquoise au survol -- blanc sur la barre sombre pour le contraste
   (public 45-70). Sobre, sans degrade ni glow.
   ================================================================== */

/* Secondaire (Catalogue gratuit) : meme traitement que "EN SAVOIR PLUS" --
   voile blanc + hover qui se remplit de turquoise avec un lift d'1px. */
.contact-button.catalog {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
              border-color .25s cubic-bezier(.22, 1, .36, 1),
              color .25s cubic-bezier(.22, 1, .36, 1),
              transform .25s cubic-bezier(.22, 1, .36, 1);
}
.contact-button.catalog:hover,
.contact-button.catalog:focus-visible {
  background: var(--carlo-blue);
  border-color: var(--carlo-blue);
  color: #fff;
  transform: translateY(-1px);
}

/* Primaire (Rencontrons-nous, plain + .meet) : turquoise plein herite de
   .button.is-outline ; on ajoute un survol qui fonce et souleve d'1px. */
.contact-button:not(.catalog) {
  transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
              transform .25s cubic-bezier(.22, 1, .36, 1);
}
.contact-button:not(.catalog):hover,
.contact-button:not(.catalog):focus-visible {
  background: var(--teal-ink, #17817e);
  transform: translateY(-1px);
}

/* -- Sections : caler les 2 heros hors-echelle sur le pas de rythme. On ne
      touche PAS aux jointures volontaires (sections a 0 d'un cote, qui collent
      a la suivante) : les symetriser creerait un double espace. -- */
.section-large {          /* etait 140/120 (contact, catalogues) */
  padding-top: var(--section-y-hero);
  padding-bottom: var(--section-y-hero);
}
.rt-service-two-cta {     /* etait 122/130 (CTA sombre des destinations) */
  padding-top: var(--section-y-hero);
  padding-bottom: var(--section-y-hero);
}

/* -- Section podcast (player Ausha injecte sur accueil, presse, blog). -- */
.section-podcast-atlas {
  padding: var(--section-y) 0;
}
.section-podcast-atlas .heading-2 {
  text-align: center;
  margin-bottom: 24px;
}
.section-podcast-atlas .div-podcast {
  max-width: 780px;
  margin: 0 auto;
}

/* -- Bouton flottant WhatsApp : le cercle de marque vert passe au turquoise
      Atlas. L'icone est un SVG inline dont le cercle porte un fill en style
      inline -> !important. Le glyphe telephone (path blanc) reste blanc. -- */
.booster-social-link[fb-social-type="whatsapp"] .booster-social-icon svg circle {
  fill: var(--carlo-blue, #20a5a2) !important;
}