/* ═══════════════════════════════════════════════════════════════
   ENHANCE.CSS - Couche de raffinement visuel et de dynamisme
   ---------------------------------------------------------------
   Chargee APRES main.css. Tout ce qui est ici est additif ou en
   surcharge. Pour revenir en arriere: retirer les deux lignes
   enhance.css / enhance.js dans layouts/_default/baseof.html.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Courbes d animation */
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth:    cubic-bezier(.22, .61, .36, 1);

  /* Elevation raffinee */
  --el-1: 0 1px 2px rgba(10,22,40,.04), 0 2px 8px rgba(10,22,40,.05);
  --el-2: 0 2px 4px rgba(10,22,40,.04), 0 8px 24px rgba(10,22,40,.07);
  --el-3: 0 4px 8px rgba(10,22,40,.05), 0 18px 48px rgba(10,22,40,.11);
  --el-4: 0 8px 16px rgba(10,22,40,.06), 0 36px 80px rgba(10,22,40,.16);

  /* Accents */
  --blue-bright: #2E6BFF;
  --blue-soft:   #7FA8FF;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   1. TEXTURE ET PROFONDEUR
   ═══════════════════════════════════════════════════════════════ */

/* Grain fin sur les blocs sombres: casse le aplat, donne du relief */
.section--dark::after,
.hero::after,
.content-hero::after,
.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .035;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}
.section--dark, .footer { position: relative; }
.section--dark > .container,
.footer > .container { position: relative; z-index: 2; }

/* Halos de couleur diffus derriere les sections sombres */
.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 12% 0%,   rgba(176,0,0,.14),  transparent 62%),
    radial-gradient(50% 70% at 88% 100%, rgba(0,67,255,.10), transparent 60%);
  pointer-events: none;
}

/* Couture lumineuse en haut des sections sombres */
.section--dark {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════════
   2. HERO
   ═══════════════════════════════════════════════════════════════ */

.hero { position: relative; }

/* Voile directionnel: le texte gagne du contraste, la photo reste lisible */
.hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(6,14,28,.93) 0%,
      rgba(6,14,28,.80) 34%,
      rgba(6,14,28,.42) 62%,
      rgba(6,14,28,.58) 100%),
    radial-gradient(120% 90% at 50% 110%, rgba(6,14,28,.85), transparent 60%) !important;
}

/* Vignette douce */
.hero .container::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side, transparent 55%, rgba(4,10,22,.55) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; }
.hero__inner { position: relative; z-index: 2; }

/* Badge RE/MAX en verre */
.hero__eyebrow {
  background: rgba(255,255,255,.07) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 6px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff !important;
  letter-spacing: .16em;
}
.hero__eyebrow-logo {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Nom: degrade vivant + halo, au lieu du bleu plat */
.hero__name { letter-spacing: -.028em; }
.hero__name span {
  background: linear-gradient(105deg,
    var(--blue-soft)   0%,
    var(--blue-bright) 26%,
    #0043FF            48%,
    var(--blue-soft)   72%,
    var(--blue-bright) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: heroSheen 9s var(--ease-smooth) infinite;
  filter: drop-shadow(0 6px 30px rgba(46,107,255,.4));
}
@keyframes heroSheen {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero__role {
  letter-spacing: .2em;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

/* Lien rapide: soulignement anime */
.hero__quicklink {
  position: relative;
  text-decoration: none !important;
  background-image: linear-gradient(var(--red-light), var(--red-light));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease-out-expo), color .3s;
}
.hero__quicklink:hover {
  background-size: 100% 3px;
  color: #fff;
}

/* Barre de confiance: plus presente */
.hero__trust {
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero__trust-item { transition: transform .4s var(--ease-spring); }
.hero__trust-item:hover { transform: translateY(-3px); }
.hero__trust-num {
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.hero__trust-divider {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent) !important;
}

/* Photo: ombre portee plus riche */
.hero__photo {
  filter:
    drop-shadow(0 26px 60px rgba(0,0,0,.55))
    drop-shadow(0 2px 0 rgba(255,255,255,.06)) !important;
}
.hero__photo-card {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: rgba(10,22,40,.62) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.4);
}

/* Indicateur de defilement */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  z-index: 3;
  color: rgba(255,255,255,.55);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero__scroll-cue-track {
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(255,255,255,.32);
  border-radius: 12px;
  position: relative;
}
.hero__scroll-cue-dot {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255,255,255,.8);
  animation: scrollCue 1.9s var(--ease-smooth) infinite;
}
@keyframes scrollCue {
  0%       { transform: translateY(0);    opacity: 0; }
  22%      { opacity: 1; }
  70%      { transform: translateY(13px); opacity: 0; }
  100%     { transform: translateY(13px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   3. BANDE DE TERRITOIRE (sous le hero)
   ═══════════════════════════════════════════════════════════════ */

/* Bande de territoire: statique, chaque region affichee une seule fois */
.marquee {
  position: relative;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 16px 24px;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  justify-content: center;
}
.marquee__group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 38px;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.66);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .35s var(--ease-smooth);
}
.marquee__item:hover { color: #fff; }
.marquee__item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red-light);
  box-shadow: 0 0 12px rgba(204,0,0,.9);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   4. EN-TETES DE SECTION
   ═══════════════════════════════════════════════════════════════ */

.section-header .eyebrow {
  position: relative;
  display: inline-block;
}
/* Trait accent anime a l apparition */
.section-header .eyebrow::after {
  transform-origin: center;
  transform: scaleX(0);
  transition: transform .9s .25s var(--ease-out-expo);
}
.section-header.visible .eyebrow::after,
.visible .section-header .eyebrow::after,
.section-header .eyebrow.is-in::after { transform: scaleX(1); }

.section-header h2 {
  letter-spacing: -.022em;
  text-wrap: balance;
}
.section-header .subtitle { text-wrap: pretty; }

/* Correctif: sur fond sombre ou rouge, les titres etaient en marine sur marine */
.section--dark .section-header h2,
.section--dark .section-header h3,
.section--red  .section-header h2,
.section--red  .section-header h3 {
  color: var(--white);
}

/* Correctif de contraste: eyebrow rouge sombre sur fond quasi noir */
.calc-shortcuts__eyebrow {
  color: #ff6b5e !important;
  background: rgba(255,61,46,.12) !important;
  border-color: rgba(255,61,46,.36) !important;
}

/* Eyebrow bleu: trop sombre sur fond marine */
.section--dark .section-header .eyebrow,
.section--red  .section-header .eyebrow {
  color: var(--blue-soft);
}
.section--red .section-header .eyebrow { color: rgba(255,255,255,.85); }
.section--dark .section-header .eyebrow::after {
  background: linear-gradient(90deg, #ff3d2e, var(--blue-soft));
}

/* Categorie des pages interieures: rouge sombre peu lisible sur marine */
.content-hero__category { color: #ff6b5e !important; }
.content-hero .breadcrumb a { color: rgba(255,255,255,.62); }
.content-hero .breadcrumb a:hover { color: #fff; }

/* Revelation du titre mot par mot */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(2deg);
  transition: opacity .7s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
.split-ready .split-word { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   5. CARTES - projecteur, bordure vivante, elevation
   ═══════════════════════════════════════════════════════════════ */

.adv-card, .service-card, .calc-card, .article-card,
.listing-card, .pillar-card, .step-card, .prot-card,
.tools-quick-card, .network-card {
  position: relative;
  isolation: isolate;
  transition:
    transform .5s var(--ease-spring),
    box-shadow .5s var(--ease-out-expo),
    border-color .4s ease;
}

/* Projecteur qui suit le curseur (--mx / --my poses par enhance.js) */
.adv-card::after, .calc-card::after, .article-card::after,
.listing-card::after, .pillar-card::after, .tools-quick-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(176,0,0,.075), transparent 62%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 0;
}
.adv-card:hover::after, .calc-card:hover::after, .article-card:hover::after,
.listing-card:hover::after, .pillar-card:hover::after, .tools-quick-card:hover::after {
  opacity: 1;
}
.adv-card > *, .calc-card > *, .article-card > *,
.listing-card > *, .pillar-card > *, .tools-quick-card > * {
  position: relative;
  z-index: 1;
}

/* Elevation coherente au survol */
.adv-card:hover, .calc-card:hover, .article-card:hover,
.listing-card:hover, .tools-quick-card:hover, .prot-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--el-4);
}

/* Fleche qui glisse */
.adv-card__link svg, .calc-card__arrow, .article-card__read-more svg,
.service-card__link svg, .prot-card__link svg {
  transition: transform .45s var(--ease-spring);
}
.adv-card:hover .adv-card__link svg,
.calc-card:hover .calc-card__arrow,
.article-card:hover .article-card__read-more svg,
.service-card:hover .service-card__link svg,
.prot-card:hover .prot-card__link svg {
  transform: translateX(6px);
}
[dir="rtl"] .adv-card:hover .adv-card__link svg,
[dir="rtl"] .calc-card:hover .calc-card__arrow,
[dir="rtl"] .article-card:hover .article-card__read-more svg,
[dir="rtl"] .service-card:hover .service-card__link svg,
[dir="rtl"] .prot-card:hover .prot-card__link svg {
  transform: translateX(-6px);
}

/* Logo des programmes: petit zoom au survol */
.adv-card__logo img { transition: transform .55s var(--ease-spring); }
.adv-card:hover .adv-card__logo img { transform: scale(1.055); }

/* Images d article: zoom lent et propre */
.article-card__image, .listing-card__image { overflow: hidden; }
.article-card__image img, .listing-card__image img {
  transition: transform 1.1s var(--ease-out-expo), filter .6s ease;
}
.article-card:hover .article-card__image img,
.listing-card:hover .listing-card__image img {
  transform: scale(1.07);
}

/* Cartes sombres: liseré lumineux au survol */
.service-card {
  transition: transform .5s var(--ease-spring), border-color .4s ease, background .4s ease;
}
.service-card:hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
}

/* ═══════════════════════════════════════════════════════════════
   6. BOUTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform .35s var(--ease-spring),
    box-shadow .4s var(--ease-out-expo),
    background .35s ease,
    color .35s ease,
    border-color .35s ease;
}
/* Balayage lumineux */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-22deg);
  transition: left .7s var(--ease-out-expo);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn-primary {
  background: linear-gradient(135deg, var(--red-light), var(--red) 55%, var(--red-dark));
  box-shadow: 0 6px 20px rgba(176,0,0,.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(176,0,0,.42);
}
.btn-outline:hover, .btn-outline-dark:hover { transform: translateY(-2px); }

/* Aimant doux (translation posee par enhance.js) */
.btn[data-magnetic] { will-change: transform; }

/* ═══════════════════════════════════════════════════════════════
   7. NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.nav {
  transition: background .45s var(--ease-smooth), backdrop-filter .45s, box-shadow .45s, padding .35s;
}
.nav--scrolled {
  background: rgba(8,17,32,.82) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 6px 30px rgba(0,0,0,.34), inset 0 -1px 0 rgba(255,255,255,.07);
}
/* Voile en haut de page: la barre reste lisible sur une photo claire */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(180deg, rgba(6,14,28,.72), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity .45s var(--ease-smooth);
  z-index: -1;
}
.nav--scrolled::before { opacity: 0; }

/* Sous-titre du logo: lisible sur photo */
.nav__logo-title {
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
  opacity: .95;
}
.nav__logo-badge { transition: transform .5s var(--ease-spring); }
.nav__logo:hover .nav__logo-badge { transform: rotate(-7deg) scale(1.06); }

/* Barre de progression: degrade + halo */
.scroll-progress {
  background: linear-gradient(90deg, var(--red), #ff3d2e 45%, var(--blue-bright)) !important;
  box-shadow: 0 0 14px rgba(255,61,46,.65);
  height: 3px !important;
}

/* Retour en haut */
.scroll-top {
  transition: transform .45s var(--ease-spring), opacity .4s, box-shadow .4s;
}
.scroll-top:hover { transform: translateY(-4px) scale(1.06); }

/* ═══════════════════════════════════════════════════════════════
   8. REVELATIONS AU DEFILEMENT
   ═══════════════════════════════════════════════════════════════ */

.reveal {
  transform: translateY(34px) scale(.985);
  transition:
    opacity .85s var(--ease-out-expo),
    transform .95s var(--ease-out-expo);
}
.reveal.visible { transform: none; }

.reveal-left, .reveal-right {
  transition: opacity .9s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

/* Decalage automatique des enfants d une grille */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .8s var(--ease-out-expo),
    transform .9s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 95ms);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* Devoilement d image par volet */
[data-wipe] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-out-expo);
}
[data-wipe].is-in { clip-path: inset(0 0 0 0); }

/* Parallaxe (--py pose par enhance.js) */
[data-parallax] { will-change: transform; }

/* ═══════════════════════════════════════════════════════════════
   9. BLOC AVANTAGES - finitions
   ═══════════════════════════════════════════════════════════════ */

.adv-card {
  border-top-width: 3px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(160deg, rgba(0,0,0,.08), rgba(0,0,0,.02)) border-box;
}
.adv-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: currentColor;
  transition: width .6s var(--ease-out-expo);
  z-index: 2;
}
.adv-card:hover::before { width: 100%; }
.adv-card--blue:hover::before { background: #0043B4; }
.adv-card--red:hover::before,
.adv-card:not([class*="adv-card--"]):hover::before { background: var(--red); }
.adv-card--navy:hover::before { background: var(--navy-mid); }
.adv-card--gold:hover::before { background: #c9a84c; }

/* Chiffres cles: apparition en cascade */
.adv-fact { transition: transform .5s var(--ease-spring); }
.adv-fact:hover { transform: translateY(-4px); }
.adv-fact__value {
  letter-spacing: -.02em;
}

/* ═══════════════════════════════════════════════════════════════
   10. FORMULAIRES ET TABLEAUX
   ═══════════════════════════════════════════════════════════════ */

input, select, textarea {
  transition: border-color .3s, box-shadow .3s, background .3s;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(176,0,0,.13);
}

.adv-body tr { transition: background .25s; }
.adv-body tbody tr:hover { background: rgba(176,0,0,.03); }

/* ═══════════════════════════════════════════════════════════════
   11. LIENS DE CONTENU
   ═══════════════════════════════════════════════════════════════ */

/* Les liens dans le texte doivent se voir sans survol: couleur, gras et
   soulignement permanents. Avant, ils etaient invisibles jusqu au hover. */
.content-body a:not(.btn),
.faq-item__a a,
.adv-body a:not(.btn) {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(176, 0, 0, .45);
  transition: color .25s, text-decoration-color .25s;
}
.content-body a:not(.btn):hover,
.faq-item__a a:hover,
.adv-body a:not(.btn):hover {
  color: var(--red-dark);
  text-decoration-color: currentColor;
}
.content-body a:not(.btn):focus-visible,
.faq-item__a a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .hero__scroll-cue { display: none; }
  .marquee { padding: 14px 18px; }
  .marquee__item { font-size: .67rem; letter-spacing: .14em; }
  .marquee__group { gap: 10px 22px; }
}

@media (hover: none) {
  .adv-card::after, .calc-card::after, .article-card::after,
  .listing-card::after, .pillar-card::after, .tools-quick-card::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   13. MOUVEMENT REDUIT - respect des preferences systeme
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right,
  [data-stagger] > *, .split-word {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-wipe] { clip-path: none !important; }
  .hero__scroll-cue { display: none; }
  /* Le carrousel du hero et le degrade du nom restent visibles, sans mouvement */
  .hero__name span { animation: none !important; background-position: 30% 50% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   14. CORRECTIFS DE LISIBILITE SUR FOND SOMBRE
   ═══════════════════════════════════════════════════════════════ */

/* Les CTA principaux etaient en rouge a 15% d opacite sur fond sombre:
   pratiquement invisibles. On en fait de vrais boutons. */
.btn-glass-red {
  background: linear-gradient(135deg, var(--red-light), var(--red) 55%, var(--red-dark)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(176,0,0,.34);
}
.btn-glass-red:hover {
  background: linear-gradient(135deg, #d81414, var(--red-light) 60%, var(--red)) !important;
  box-shadow: 0 12px 34px rgba(176,0,0,.46);
  transform: translateY(-2px);
}

/* Bouton du pied de page: rouge sombre sur fond quasi noir */
.footer__book-btn {
  color: #ff6b5e !important;
  background: rgba(255,61,46,.1) !important;
  border-color: rgba(255,61,46,.42) !important;
  transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease-spring);
}
.footer__book-btn:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Bouton contour fonce place sur un fond sombre: texte marine illisible */
.section--dark .btn-outline-dark,
.contact .btn-outline-dark,
#contact .btn-outline-dark,
.footer .btn-outline-dark {
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.28);
}
.section--dark .btn-outline-dark:hover,
.contact .btn-outline-dark:hover,
#contact .btn-outline-dark:hover,
.footer .btn-outline-dark:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   15. SECTION A PROPOS
   ═══════════════════════════════════════════════════════════════ */

/* Le panorama de fond etait presque efface */
.about-split::before,
#about::before { opacity: .16 !important; }

/* Cadre photo: carte nette, bordure fine, profondeur */
.about-slideshow,
.about-split__image {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--el-4);
  border: 1px solid rgba(10,22,40,.08);
  background: linear-gradient(170deg, #fdfdfc, #f1efe8);
  position: relative;
}
.about-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 -70px 90px -50px rgba(10,22,40,.18);
}
.about-slideshow__dot {
  width: 7px; height: 7px;
  transition: transform .35s var(--ease-spring), background .3s;
}
.about-slideshow__dot.active { transform: scale(1.45); }

/* Puces de specialites: petites pastilles au lieu de simples points */
.about-highlights { gap: 12px 28px; }
.highlight-item {
  position: relative;
  transition: transform .35s var(--ease-spring), color .3s;
}
.highlight-item:hover { transform: translateX(3px); color: var(--navy); }
[dir="rtl"] .highlight-item:hover { transform: translateX(-3px); }

.about-split__text { font-size: 1.04rem; line-height: 1.85; }

/* ═══════════════════════════════════════════════════════════════
   16. FORMULAIRES
   ═══════════════════════════════════════════════════════════════ */

/* Carte du formulaire de contact: vrai verre depoli */
.contact-form,
.contact-card,
#contact form {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* Champs sur fond sombre */
#contact input, #contact textarea, #contact select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 10px;
}
#contact input::placeholder, #contact textarea::placeholder { color: rgba(255,255,255,.42); }
#contact input:focus, #contact textarea:focus, #contact select:focus {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,61,46,.6);
  box-shadow: 0 0 0 3px rgba(255,61,46,.16);
  outline: none;
}

/* Champs sur fond clair (formulaire reseau) */
.network-form input, .network-form select, .network-form textarea,
#network input, #network select, #network textarea {
  border-radius: 10px;
  border: 1px solid rgba(10,22,40,.12);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
#network input:focus, #network select:focus, #network textarea:focus {
  border-color: rgba(176,0,0,.5);
  box-shadow: 0 0 0 3px rgba(176,0,0,.1);
  background: #fff;
  outline: none;
}
#network label { letter-spacing: .01em; }

/* Bouton d envoi du formulaire reseau */
#network button[type="submit"],
.network-form button[type="submit"] {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10,22,40,.22);
  transition: transform .35s var(--ease-spring), box-shadow .4s;
}
#network button[type="submit"]:hover,
.network-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(10,22,40,.3);
}

/* ═══════════════════════════════════════════════════════════════
   17. CARTES D ARTICLES
   ═══════════════════════════════════════════════════════════════ */

.article-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(10,22,40,.07);
}
.article-card__image { position: relative; }
.article-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,22,40,.28));
  opacity: 0;
  transition: opacity .5s var(--ease-smooth);
}
.article-card:hover .article-card__image::after { opacity: 1; }

/* Categorie en pastille plutot qu en texte nu */
.article-card__category {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 40px;
  background: rgba(0,67,255,.08);
  border: 1px solid rgba(0,67,255,.16);
  font-size: .67rem;
  letter-spacing: .1em;
}
.article-card__title { transition: color .35s var(--ease-smooth); }
.article-card:hover .article-card__title { color: var(--red); }
.article-card__meta { border-top: 1px solid rgba(10,22,40,.07); }

/* ═══════════════════════════════════════════════════════════════
   18. PIED DE PAGE
   ═══════════════════════════════════════════════════════════════ */

.footer { position: relative; }
/* Filet lumineux en haut du pied de page */
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,61,46,.55), rgba(46,107,255,.4), transparent);
}
.footer a {
  position: relative;
  transition: color .3s var(--ease-smooth);
}
.footer a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .4s var(--ease-out-expo);
}
.footer a:not(.btn):hover::after { width: 100%; }
[dir="rtl"] .footer a:not(.btn)::after { left: auto; right: 0; }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }

/* ═══════════════════════════════════════════════════════════════
   19. RYTHME ET COUTURES ENTRE SECTIONS
   ═══════════════════════════════════════════════════════════════ */

/* Degrade doux au passage clair -> sombre */
.section--dark::after,
.footer::after { z-index: 1; }

/* Le bloc rouge des chiffres gagne de la matiere */
.stats-bar, .section--red {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 42%),
    radial-gradient(80% 120% at 100% 0%, rgba(0,0,0,.16), transparent 60%);
}
.stat-item { transition: transform .45s var(--ease-spring); }
.stat-item:hover { transform: translateY(-4px); }

/* ═══════════════════════════════════════════════════════════════
   20. TYPOGRAPHIE
   ═══════════════════════════════════════════════════════════════ */

h1, h2 { letter-spacing: -.022em; }
h3 { letter-spacing: -.012em; }
.subtitle, .section-header .subtitle { line-height: 1.75; }

/* Selection de texte aux couleurs de la marque */
::selection { background: rgba(176,0,0,.85); color: #fff; }

/* Focus visible coherent pour la navigation au clavier */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(255,61,46,.75);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   21. CONTRASTE - corrections issues d un audit automatise
   Chaque valeur ci-dessous remonte un rapport de contraste qui
   passait sous le seuil lisible (WCAG AA).
   ═══════════════════════════════════════════════════════════════ */

/* Liens des cartes de services: rouge sombre sur marine (2.5:1) */
.section--dark .service-card__link,
.service-card__link { color: #ff6b5e; }
.service-card:hover .service-card__link { color: #ff8a7e; }

/* Pied de page: rouge sombre sur presque noir (2.6:1) */
.footer__brand-title { color: #ff6b5e; }
.footer__remax { color: #ff6b5e; }
.footer__brand-text { color: rgba(255,255,255,.55); }
.footer__link { color: rgba(255,255,255,.62); }
.footer__link:hover { color: #fff; }
.footer__bottom span,
.footer__bottom { color: rgba(255,255,255,.55); }

/* Eyebrow doree sur fond creme (2.1:1) */
.eyebrow--gold { color: #7d6212; }
.eyebrow--gold::after { background: linear-gradient(90deg, #b08d1f, #7d6212); }

/* Accent dore de la carte Mes rabais (3.3:1) */
.adv-card--gold .adv-card__link { color: #7d6212; }
.adv-facts--gold .adv-fact__value { color: #7d6212; }

/* Badges et eyebrows rouges sur fond sombre (3.0:1) */
.journey-hero__badge { color: #ff6b5e; }
.section--dark .eyebrow,
.journey-hero .eyebrow { color: #ff8a7e; }

/* Textes secondaires sur fond sombre, trop effaces */
.section--dark .subtitle { color: rgba(255,255,255,.66); }
.calc-card__desc { color: rgba(255,255,255,.58); }
.contact-detail__label { color: rgba(255,255,255,.58); }
.hero__trust-label { color: rgba(255,255,255,.6); }
#offices .office-city,
#offices [style*="rgba(255,255,255,.35)"] { color: rgba(255,255,255,.55) !important; }
#offices [style*="rgba(255,255,255,.4)"]  { color: rgba(255,255,255,.6)  !important; }

/* Gris de corps sur fond creme, legerement trop clair */
.adv-card__desc,
.section--light .subtitle,
.gallery-caption { color: #5b6472; }

/* Texte blanc semi-transparent sur le bloc rouge */
.journey-split__text { color: rgba(255,255,255,.82); }
.stat-item__label { color: rgba(255,255,255,.85); }

/* Rattrapages de contraste: regles d origine posees en !important */
.eyebrow--gold { color: #7d6212 !important; }
.eyebrow--gold::after { background: linear-gradient(90deg, #b08d1f, #7d6212) !important; }

/* Gris de corps: legerement assombri pour passer le seuil sur creme */
.subtitle, .tools-tab, .gallery-caption,
.section .text-center { color: #5b6472; }
.section--dark .text-center,
.section--dark .subtitle { color: rgba(255,255,255,.66); }

/* Etiquettes de la galerie: posees sur photo, on garantit la lisibilite */
.gallery-item__label {
  text-shadow: 0 1px 6px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.6);
}

/* Gris de corps global: #6b7280 tombait a 4.43:1 sur creme, juste sous
   le seuil. Un cran plus fonce fait passer tout le site d un coup. */
:root { --gray: #5b6472; }

/* Fil d Ariane: element courant trop efface */
.breadcrumb span:not(.breadcrumb__sep) { color: rgba(255,255,255,.62); }
.breadcrumb__sep { color: rgba(255,255,255,.35); }

/* Derniers cas: textes blancs trop transparents sur marine, eyebrow
   rouge sombre des pages Acheteur / Vendeur. */
.section--dark p.text-center { color: rgba(255,255,255,.62) !important; }
.section--dark .eyebrow,
.journey-hero .eyebrow,
.steps .eyebrow { color: #ff8a7e !important; }
.section--red p { color: rgba(255,255,255,.88); }

/* ══════════════════════════════════════════════
   SECTEURS / PAGES LOCALES
   ══════════════════════════════════════════════ */
.container--narrow { max-width: 820px; }

.sector-hero__actions { margin-top: 28px; }

.sector-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.sector-pill {
  display: inline-block;
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(10,22,40,.05);
  transition: var(--transition);
}
.sector-pill:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-2px);
}

.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.sector-grid--lg { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }

.sector-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: var(--transition);
}
.sector-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.sector-card__city {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
}
.sector-card--lg .sector-card__city { font-size: 1.55rem; }
.sector-card__desc {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--gray);
}
.sector-card__link {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: auto;
}

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}
.faq-item[open] { border-color: var(--red); box-shadow: var(--shadow); }
.faq-item__q {
  padding: 18px 22px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-inline-end: 52px;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: '+';
  position: absolute;
  inset-inline-end: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--red);
  line-height: 1;
}
.faq-item[open] .faq-item__q::after { content: '\2212'; }
.faq-item__a {
  padding: 0 22px 20px;
  color: var(--text);
  line-height: 1.75;
  font-size: .97rem;
}
.faq-item__a p { margin-bottom: 12px; }
.faq-item__a p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   PIED DE PAGE: SECTEURS DESSERVIS
   Restaure le maillage interne site-wide vers les
   pages villes, sans encombrer la navigation.
   ══════════════════════════════════════════════ */
.footer__sectors {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 26px;
  margin-bottom: 26px;
}
.footer__sectors-list {
  font-size: .82rem;
  line-height: 2.1;
  margin: 0;
  max-width: 100%;
}
.footer__sectors-list .footer__link {
  font-size: .82rem;
  white-space: nowrap;
}
.footer__sectors-sep {
  color: rgba(255, 255, 255, .22);
  margin: 0 7px;
  user-select: none;
}
.footer__sectors-all {
  font-weight: 600;
  color: var(--red-light);
}
.footer__sectors-all:hover { color: var(--white); }

@media (max-width: 768px) {
  .footer__sectors { padding-top: 22px; margin-bottom: 22px; }
  .footer__sectors-list { line-height: 2.3; }
}

/* ══════════════════════════════════════════════
   GRANDS ECRANS
   Le contenu restait fige a 1240px quelle que soit
   la largeur du moniteur. Sur un ecran large, ca
   donnait une colonne etroite au centre, percue
   comme un zoom arriere. On elargit le conteneur
   et on augmente legerement la base typographique.
   ══════════════════════════════════════════════ */
@media (min-width: 1600px) {
  :root { --max-width: 1400px; }
  .container { padding: 0 40px; }
}

@media (min-width: 1920px) {
  :root { --max-width: 1560px; }
  html { font-size: 17px; }
}

@media (min-width: 2400px) {
  :root { --max-width: 1720px; }
  html { font-size: 18px; }
}

/* ══════════════════════════════════════════════
   INSCRIPTIONS: GALERIE PHOTO
   ══════════════════════════════════════════════ */
.listing-photos { padding: 40px 0 0; }
.listing-photos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.listing-photos__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--light-gray);
  aspect-ratio: 3 / 2;
}
.listing-photos__item--lead {
  grid-column: span 2;
  grid-row: span 2;
}
.listing-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out-expo);
}
.listing-photos__item:hover img { transform: scale(1.04); }
.listing-photos__count {
  margin-top: 12px;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
}

@media (max-width: 900px) {
  .listing-photos__grid { grid-template-columns: repeat(2, 1fr); }
  .listing-photos__item--lead { grid-column: span 2; grid-row: span 1; }
}

/* ── Barre laterale ── */
.listing-sidebar__mls {
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
  margin: -6px 0 18px;
  letter-spacing: .03em;
}
.listing-sidebar__mls strong { color: rgba(255, 255, 255, .9); }
.listing-sidebar__rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin: 22px 0;
}
.listing-sidebar__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.listing-sidebar__facts li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: .83rem;
  line-height: 1.4;
}
.listing-sidebar__facts li span:first-child { color: rgba(255, 255, 255, .5); }
.listing-sidebar__facts li span:last-child { color: rgba(255, 255, 255, .92); text-align: end; }
.listing-sidebar__source {
  display: block;
  margin-top: 18px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--red-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.listing-sidebar__source:hover { color: var(--white); }