/* ==========================================================================
   Page d'accueil de test (/indextest) : styles dédiés, chargés sur cette page seulement.
   Reprend les composants existants de style.css (tuiles .qcta-card, encart
   .hp-apporteurs, cartes .team-card) et le bloc rendez-vous de l'accueil
   (.expertise-express, dont les styles sont en ligne dans index.php).
   Contrastes vérifiés (WCAG AA) : voir docs/indextest/RAPPORT.md.
   ========================================================================== */

/* ── Polices auto-hébergées (sous-ensemble latin, licence OFL : /fonts/OFL-*.txt) ──
   Raleway (titres) et Heebo (texte) étaient déclarées par style.css et style_annonces.css
   mais jamais chargées : tout s'affichait en Arial. Correction limitée à cette page pour
   l'instant ; à généraliser à tout le site (voir docs/hero-indextest/RAPPORT.md). */
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/raleway-latin-300-normal.woff2?v=2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/raleway-latin-500-normal.woff2?v=2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/raleway-latin-600-normal.woff2?v=2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/raleway-latin-700-normal.woff2?v=2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/heebo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/heebo-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --it-vert: #75acaa;          /* bleu-vert de la charte (fonds, filets) */
  --it-vert-fonce: #2f5856;    /* texte et boutons sur fond clair : 7,6:1 sur blanc */
  --it-vert-moyen: #3d6664;    /* sur-titres : 6,3:1 sur blanc */
  --it-orange: #f7d3a1;
  --it-rose: #efb8ac;
  --it-encre: #1f2d2c;         /* texte courant : 14,5:1 sur blanc */
  --it-gris: #4f5f5d;          /* texte secondaire : 6,6:1 sur blanc */
  --it-teinte: #eef5f5;        /* fond des sections alternées */
}

/* ── Tout est visible dès le chargement : aucune animation d'entrée ───────── */
[data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── En-tête : lisible une fois passé sur fond bleu-vert ──────────────────── */
/* rgba(117,172,170,.8) sous du texte blanc ne donnait que 2,5:1 : fond foncé opaque */
#header.header-scrolled { background: rgba(47, 88, 86, .97); }

/* ── Boutons communs ──────────────────────────────────────────────────────── */
.it-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font-family: "Raleway", sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; transition: background .15s, color .15s, border-color .15s;
}
.it-btn:focus-visible { outline: 3px solid var(--it-orange); outline-offset: 3px; }
.it-btn--plein { background: var(--it-orange); color: var(--it-encre); border-color: var(--it-orange); }
.it-btn--plein:hover { background: #fff; border-color: #fff; color: var(--it-encre); }
.it-btn--contour { background: rgba(0, 0, 0, .25); color: #fff; border-color: #fff; }
.it-btn--contour:hover { background: #fff; color: var(--it-encre); }
.it-btn--sombre { background: var(--it-vert-fonce); color: #fff; border-color: var(--it-vert-fonce); }
.it-btn--sombre:hover { background: #1f3a39; border-color: #1f3a39; color: #fff; }

/* ══ 1. Hero « haut de gamme » (refonte du 25/09/2026) ═══════════════════════
   - Le logo est la signature : premier élément perçu, grande respiration autour.
   - Le bloc logo + titre + boutons + réassurance est centré verticalement dans la
     hauteur visible, moins la réserve de la carte « Comment pouvons-nous vous aider ? »
     qui chevauche le bas du hero (--it-chevauchement).
   - Fond : <img> absolue (plus de background-attachment: fixed, non géré par iOS et
     saccadé au défilement) sous un dégradé plus sombre en haut (menu) et en bas
     (transition vers la carte), plus léger au centre, teinté bleu-vert.
   ══════════════════════════════════════════════════════════════════════════ */
#hero.it-hero {
  --it-nav: 76px;                 /* hauteur de la barre de navigation */
  --it-chevauchement: 130px;      /* partie du hero recouverte par la carte */
  --it-reserve-carte: 150px;      /* part de la carte à montrer au premier écran */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  height: auto;
  padding: calc(var(--it-nav) + 48px) 0 calc(var(--it-chevauchement) + 40px);
  background: var(--osm-teal-nuit, #1d3534);   /* couleur d'attente, remplace l'ancienne image CSS */
  overflow: hidden;
  isolation: isolate;
}
#hero.it-hero::before { content: none; }          /* ancien voile gris uniforme (style.css) */
.it-hero-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
}
/* Parallaxe légère de la photo du hero (26/09/2026) : l'image descend à 30 % de la vitesse
   du défilement (transform uniquement, jamais background-attachment: fixed). Agrandie à 1,15
   pour garder une marge ; la bande libérée en haut reste de toute façon au-dessus de la zone
   visible (0,3 × défilement < défilement). Au-dessus de 1024 px et hors « réduire les
   animations ». Navigateurs avec animation-timeline : CSS seul, 300 px sur les 1 000
   premiers px de défilement. Sinon : js/indextest.js pose html.it-parallaxe-js et la
   variable --it-parallaxe (requestAnimationFrame, écouteur passif). */
@keyframes it-parallaxe {
  from { transform: translate3d(0, 0, 0) scale(1.15); }
  to   { transform: translate3d(0, 300px, 0) scale(1.15); }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .it-hero-fond {
      will-change: transform;
      animation: it-parallaxe linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 1000px;
    }
  }
  html.it-parallaxe-js .it-hero-fond {
    will-change: transform;
    transform: translate3d(0, var(--it-parallaxe, 0px), 0) scale(1.15);
  }
}
.it-hero-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(8, 20, 20, .82) 0%,
      rgba(8, 20, 20, .58) 16%,
      rgba(10, 24, 24, .56) 45%,
      rgba(10, 24, 24, .62) 70%,
      rgba(8, 20, 20, .86) 100%),
    linear-gradient(rgba(117, 172, 170, .16), rgba(117, 172, 170, .16));   /* teinte de la charte */
}
#hero.it-hero .it-hero-contenu {
  padding-top: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.it-hero-logo {
  display: block; width: clamp(200px, 22vw, 340px); max-width: 80%; height: auto;
  margin: 0 0 26px;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .35));
}
.it-hero-filet { display: block; width: 40px; height: 1px; background: var(--it-orange); margin: 0 0 22px; }
.it-hero-titre {
  font-family: "Raleway", sans-serif; font-weight: 500; color: #fff;
  font-size: clamp(1.6rem, 2.4vw, 2.5rem); line-height: 1.22; letter-spacing: .012em;
  margin: 0 auto 12px; max-width: 1100px;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}
.it-insecable { white-space: nowrap; }
#hero .it-hero-titre span { color: inherit; }   /* style.css colore en or tout span du H1 du hero */
.it-hero-sous {
  font-family: "Heebo", sans-serif; font-weight: 400; color: rgba(255, 255, 255, .85);
  font-size: 1.125rem; line-height: 1.55; margin: 0 auto 30px; max-width: 720px;
}
.it-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 30px; }

/* Boutons du hero : même dessin que « Parlons de votre projet » (rayon 4 px, or #f7d3a1) */
.it-hero .it-btn {
  border-radius: 4px; border-width: 2px; min-height: 50px; padding: 12px 28px;
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: 1rem; letter-spacing: .02em;
}
.it-hero .it-btn--plein { background: var(--it-orange); border-color: var(--it-orange); color: #1f2d2c; }
.it-hero .it-btn--plein:hover { background: #fbe4c4; border-color: #fbe4c4; color: #1f2d2c; }
.it-hero .it-btn--contour { background: rgba(8, 20, 20, .25); border-color: var(--it-orange); color: #fff; }
.it-hero .it-btn--contour:hover { background: var(--it-orange); color: #1f2d2c; }
.it-hero .it-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Réassurance : une ligne discrète, logos en blanc, séparés par des filets fins */
.it-reassurance {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px;
  font-family: "Heebo", sans-serif; color: rgba(255, 255, 255, .88); font-size: .9375rem;
}
.it-reassurance-groupe { display: flex; align-items: center; gap: 16px; }
.it-reassurance-libelle {
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .8125rem;   /* 13 px */
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.it-reassurance-filet { width: 1px; height: 24px; background: rgba(255, 255, 255, .35); }
.it-badge { display: inline-flex; align-items: center; min-height: 44px; border-radius: 4px; }
.it-badge img { height: 32px; width: auto; opacity: .85; transition: opacity .2s; }
.it-badge:hover img, .it-badge:focus-visible img { opacity: 1; }
.it-badge:focus-visible, .it-reassurance-lien:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.it-reassurance-lien {
  color: rgba(255, 255, 255, .88); text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; font-size: .9375rem;
}
.it-reassurance-lien:hover { color: #fff; }
.it-reassurance-lien strong { font-weight: 500; color: #fff; }
.it-reassurance-lien .bi { font-size: .875rem; color: var(--it-orange); }

/* Ordinateur : hauteur visible (≤ 900 px) moins la réserve pour la carte */
@media (min-width: 992px) {
  #hero.it-hero { min-height: calc(min(100svh, 900px) - var(--it-reserve-carte)); }
}

/* ── Apparition du hero : fondu + montée de 12 px, 600 ms, 80 ms entre les rangs ─ */
@keyframes it-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.it-apparait { animation: it-monte .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--it-rang, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) { .it-apparait { animation: none; } }

/* ── Logo de la barre : masqué tant que le logo du hero est visible ──────────
   it-js est posé dans <head> ; it-logo-nav par l'IntersectionObserver (indextest.js).
   Il reste atteignable au clavier : il réapparaît dès qu'il reçoit le focus. */
html.it-js #header .logo { opacity: 0; transition: opacity .4s ease; }
html.it-js.it-logo-nav #header .logo,
html.it-js #header .logo:focus-visible { opacity: 1; }
html.it-js:not(.it-logo-nav) #header .logo:not(:focus-visible) { pointer-events: none; }

/* ── 2. Orientation : panneau blanc qui chevauche le bas du hero ──────────── */
.it-orientation { position: relative; z-index: 2; margin-top: -130px; padding-top: 0; padding-bottom: 24px; }
.it-orientation-panneau {
  background: #fff; border-radius: 20px; padding: 18px 22px 22px;
  box-shadow: 0 16px 48px rgba(28, 43, 42, .16);
}
.it-orientation-titre {
  font-family: "Raleway", sans-serif; font-weight: 700; font-size: 1.45rem; color: var(--it-encre);
  text-align: center; margin: 0 0 14px;
}
.it-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.qcta-card.it-tuile { max-width: none; flex: none; padding: 0 0 16px; position: relative; box-shadow: none; }
.qcta-card.it-tuile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .1); }
.qcta-card.it-tuile:focus-visible { outline: 3px solid var(--it-vert-fonce); outline-offset: 3px; }
.it-tuile-img { display: block; width: 100%; height: 92px; object-fit: cover; margin: 0 0 12px; }
.it-tuile-img--haut { object-position: top center; }
.it-tuile .cta-title, .it-tuile .qcta-desc, .it-tuile .qcta-cta-link { padding: 0 16px; }
.it-tuile .cta-title { font-size: 1.1rem; color: var(--it-encre); margin-bottom: 4px; }
.it-tuile .qcta-desc { font-size: 1rem; color: var(--it-gris); line-height: 1.45; margin-bottom: 10px; }
.it-tuile .qcta-cta-link { font-size: 1rem; font-weight: 700; color: var(--it-vert-fonce); }
.it-tuile .cta-ribbon span { background: #b2473a; color: #fff; }   /* rouge brique : 6,2:1 */

/* ── Sections et titres ───────────────────────────────────────────────────── */
.it-section { padding: 56px 0; background: #fff; }
.it-section--teinte { background: var(--it-teinte); }
.it-entete { text-align: center; margin-bottom: 28px; }
.it-surtitre {
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .8125rem;   /* 13 px */
  letter-spacing: .1em; text-transform: uppercase; color: var(--it-vert-moyen); margin: 0 0 6px;
}
.it-titre {
  font-family: "Raleway", sans-serif; font-weight: 700; color: var(--it-encre);
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; margin: 0;
}
.it-centre { text-align: center; margin-top: 28px; }
.it-page p, .it-page li { font-size: 1rem; }
.it-page a:not(.it-btn):not(.hp-app-btn):not(.hp-app-bloc):not(.qcta-card):not(.text-decoration-none):not(.team-card__profil-link):not(.team-card__linkedin):not(.team-card__photo-wrap) {
  color: var(--it-vert-fonce);
}

/* ── 3. Biens à la une (cartes des pages catégories) ──────────────────────── */
.it-biens .property-item { height: 100%; }
@media (max-width: 767.98px) {
  /* Carrousel horizontal : défilement interne, jamais de la page */
  .it-rail {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: 0; margin-right: 0; padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  }
  .it-rail > .annonce-card { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }
}

/* ── 4. Notre offre : trois cartes courtes, sans texte sur photo ──────────── */
.it-offre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.it-offre-carte {
  background: #fff; border-radius: 16px; padding: 24px 24px 22px; border-top: 5px solid var(--it-vert);
  box-shadow: 0 6px 20px rgba(28, 43, 42, .07); display: flex; flex-direction: column;
}
.it-offre-carte--conseil { border-top-color: var(--it-orange); }
.it-offre-carte--foncier { border-top-color: var(--it-rose); }
.it-offre-carte h3 { font-family: "Raleway", sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--it-encre); margin: 0 0 10px; }
.it-offre-carte p { color: var(--it-gris); line-height: 1.6; margin: 0 0 16px; flex-grow: 1; }
.it-offre-carte .it-offre-lien { font-weight: 700; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.it-offre-carte .it-offre-lien:hover { text-decoration: underline; }
.it-offre-carte .it-offre-autres { flex-grow: 0; margin: 0; font-size: .9375rem; color: var(--it-gris); }

/* ── 5. Qui sommes-nous ? ─────────────────────────────────────────────────── */
.it-apropos { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: center; margin-bottom: 40px; }
.it-apropos-photo { width: 100%; height: auto; border-radius: 16px; }
.it-apropos-texte p { color: var(--it-encre); line-height: 1.7; margin: 0 0 14px; }
.it-page .team-card__profil-link { color: var(--it-vert-fonce); min-height: 44px; display: inline-flex; align-items: center; }
.it-page .team-card__profil-link:hover { color: #1f3a39; }
.it-page .team-card__linkedin { color: var(--it-vert-fonce); }
.it-page .team-card__subtitle { color: var(--it-gris); }

/* ── 6. Logos clients : grille statique, niveaux de gris, couleur au survol ─ */
.it-logos {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.it-logos li { background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 14px; height: 96px; }
.it-logos img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .15s, opacity .15s; }
.it-logos li:hover img { filter: none; opacity: 1; }

/* ── 7. Rendez-vous : styles du bloc de l'accueil (copiés), contrastes relevés ─ */
.expertise-express { background: linear-gradient(160deg, #eef5f4 0%, #f8fbfa 55%, #f9f6f2 100%); padding: 64px 0; position: relative; overflow: hidden; scroll-margin-top: 80px; }
.it-rdv .it-entete { margin-bottom: 36px; }
.ee-pretitle { font-family: "Raleway", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--it-vert-moyen); margin-bottom: 14px; }
.ee-headline { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.25; color: var(--osm-encre); margin-bottom: 20px; }
.ee-intro { font-family: "Heebo", sans-serif; font-size: 16px; line-height: 1.72; color: var(--osm-gris); margin-bottom: 28px; }
.ee-cases { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 11px; }
.ee-cases li { font-family: "Heebo", sans-serif; display: flex; gap: 13px; align-items: flex-start; font-size: 16px; color: var(--osm-encre); line-height: 1.55; }
.ee-cases li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--it-vert); }
.ee-facts { display: flex; border-top: 1px solid #c8dbd9; padding-top: 24px; }
.ee-fact { flex: 1; font-size: 14px; color: var(--osm-gris); line-height: 1.45; padding-right: 16px; }
.ee-fact:not(:last-child) { border-right: 1px solid #c8dbd9; margin-right: 16px; }
.ee-fact strong { display: block; font-size: 22px; font-weight: 700; color: var(--osm-teal-fonce); margin-bottom: 1px; }
.ee-card { background: #fff !important; border: none !important; border-radius: 6px !important; box-shadow: 0 12px 48px rgba(28,43,42,.11), 0 2px 8px rgba(28,43,42,.06) !important; padding: 42px !important; position: relative; overflow: hidden; }
.ee-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--it-vert); }
.ee-form-title { font-family: "Raleway", sans-serif; font-size: 21px; font-weight: 700; color: var(--osm-encre); margin-bottom: 4px; }
.ee-form-sub { font-size: 14px; color: var(--it-gris); margin-bottom: 26px; }
#eeForm label { font-size: 14px; font-weight: 600; color: var(--osm-encre); margin-bottom: 5px; display: block; }
#eeForm .form-control { border: 1px solid #768c8a; border-radius: 4px; font-size: 16px; padding: 10px 12px; min-height: 44px; color: var(--osm-encre); transition: border-color .15s, box-shadow .15s; }
#eeForm .form-control:focus { border-color: var(--it-vert-fonce); box-shadow: 0 0 0 3px rgba(47,88,86,.2); outline: none; }
.it-obligatoire { color: #b0301f; }
.it-facultatif { color: var(--it-gris); font-weight: 400; }
.ee-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 22px; }
.ee-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--osm-teal-fonce); cursor: pointer; }
.ee-consent label { font-size: 14px !important; font-weight: 400 !important; color: var(--it-gris) !important; line-height: 1.55; margin: 0 !important; cursor: pointer; }
.ee-consent a { color: var(--it-vert-fonce); text-decoration: underline; }
.ee-submit { width: 100%; min-height: 48px; background: var(--it-vert-fonce); color: #fff; border: none; border-radius: 4px; padding: 14px 20px; font-size: 16px; font-weight: 600; letter-spacing: .025em; cursor: pointer; transition: background .15s; font-family: inherit; }
.ee-submit:hover:not(:disabled) { background: #1f3a39; }
.ee-submit:focus-visible { outline: 3px solid var(--it-orange); outline-offset: 3px; }
.ee-submit:disabled { opacity: .55; cursor: not-allowed; }
.ee-footnote { font-size: 14px; color: var(--it-gris); text-align: center; margin-top: 10px; margin-bottom: 0; }
.ee-feedback { display: none; padding: 10px 14px; border-radius: 4px; font-size: 15px; margin-bottom: 16px; }
.ee-feedback.ok { background: #eef5f4; color: #2f5856; border: 1px solid #c8dbd9; display: block; }
.ee-feedback.err { background: #fef2ef; color: #9e3326; border: 1px solid #f3c4ba; display: block; }
.ee-confirm { display: none; text-align: center; padding: 44px 20px; }
.ee-confirm-icon { width: 60px; height: 60px; background: #eef5f4; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 26px; color: var(--osm-teal-fonce); }
.ee-confirm h3 { font-family: "Raleway", sans-serif; font-size: 24px; font-weight: 700; color: var(--osm-encre); margin-bottom: 10px; }
.ee-confirm p { font-size: 16px; color: var(--it-gris); line-height: 1.7; max-width: 320px; margin: 0 auto; }

/* ── 8. Bas de page compact ───────────────────────────────────────────────── */
.hp-apporteurs.it-apporteurs { padding: 32px 0 20px; }
.it-apporteurs .hp-app-carte { padding: 26px 32px; gap: 24px; border-radius: 22px; }
.it-apporteurs .hp-app-titre { font-size: clamp(1.2rem, 1.8vw, 1.4rem); margin-bottom: 16px; }
.it-apporteurs .hp-app-surtitre { font-size: .8125rem; }
.it-apporteurs .hp-app-bloc { padding: 12px 18px; }
.it-apporteurs .hp-app-bloc .hp-app-taux { font-size: 1.6rem; min-width: 80px; }
.it-recrutement { padding: 4px 0 20px; background: #fff; }
.it-recrutement p { margin: 0; text-align: center; color: var(--it-encre); }
.it-recrutement a { font-weight: 700; }
.it-pages { background: #fff; border-top: 1px solid #e3ecec; padding: 16px 0 18px; }
.it-pages-titre { font-family: "Heebo", sans-serif; font-weight: 500; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--it-gris); text-align: center; margin: 0 0 6px; }
.it-pages-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.it-pages li { font-size: .875rem !important; }
.it-pages a { display: inline-block; padding: 6px 0; }

/* ── Tablette et mobile (conception mobile d'abord pour les tuiles) ───────── */
@media (max-width: 991.98px) {
  .it-tuiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .it-offre { grid-template-columns: 1fr; }
  .it-apropos { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 575.98px) {
  #hero.it-hero { --it-nav: 64px; --it-chevauchement: 52px; padding: calc(var(--it-nav) + 48px) 0 calc(var(--it-chevauchement) + 30px); }
  .it-hero-logo { width: 200px; margin-bottom: 22px; }
  .it-hero-filet { margin-bottom: 18px; }
  .it-hero-sous { font-size: 1rem; margin-bottom: 26px; }
  .it-hero-actions { width: 100%; margin-bottom: 24px; }
  .it-hero-actions .it-btn { width: 100%; }
  .it-reassurance { gap: 4px 16px; }
  .it-reassurance-filet--groupes { display: none; }
  .it-orientation { margin-top: -52px; }
  .it-orientation-panneau { padding: 16px 12px 16px; border-radius: 16px; }
  .it-orientation-titre { font-size: 1.2rem; margin-bottom: 12px; }
  .it-tuile-img { height: 76px; margin-bottom: 8px; }
  .it-tuile .cta-title, .it-tuile .qcta-desc, .it-tuile .qcta-cta-link { padding: 0 10px; }
  .it-tuile .cta-title { font-size: 1.0625rem; }
  .it-tuile .qcta-desc { font-size: 1rem; }
  .it-tuile .qcta-cta-link { font-size: 1rem; }
  .it-section { padding: 40px 0; }
  .expertise-express { padding: 44px 0; }
  .ee-card { padding: 26px 18px !important; }
  .it-apporteurs .hp-app-carte { padding: 22px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PASSE 2 (25/09/2026) : charte unique, deux polices, deux styles de boutons,
   cartes d'annonces, logos clients, portraits. Bloc placé en fin de fichier pour
   l'emporter sur style.css et style_annonces.css (fichiers partagés non modifiés).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── B. Variables de couleur (seule source des couleurs de la page) ─────── */
:root {
  --osm-teal: #75acaa;          /* bleu-vert de la charte : filets, fonds décoratifs */
  --osm-teal-fonce: #2f5856;    /* #75acaa assombri (même teinte) : textes, prix, boutons ; 7,9:1 sur blanc */
  --osm-teal-nuit: #1d3534;     /* base du dégradé du hero, étiquettes sur photo */
  --osm-or: #f7d3a1;            /* or : bouton primaire, filets, étiquette Location */
  --osm-or-clair: #fbe4c4;      /* survol du bouton primaire */
  --osm-rose: #efb8ac;
  --osm-encre: #1f2d2c;         /* texte principal, légèrement teinté bleu-vert ; 14,3:1 sur blanc */
  --osm-gris: #4f5f5d;          /* texte secondaire ; 6,7:1 sur blanc */
  --osm-fond-doux: #eef5f5;     /* fond de section clair teinté */
  --osm-rayon: 4px;             /* boutons (comme « Parlons de votre projet ») */
  --osm-rayon-carte: 16px;
  --osm-ombre-carte: 0 6px 20px rgba(28, 43, 42, .07);
  /* Anciennes variables de la page, désormais alignées sur la charte */
  --it-vert: var(--osm-teal); --it-vert-fonce: var(--osm-teal-fonce); --it-vert-moyen: var(--osm-teal-fonce);
  --it-orange: var(--osm-or); --it-rose: var(--osm-rose); --it-encre: var(--osm-encre);
  --it-gris: var(--osm-gris); --it-teinte: var(--osm-fond-doux);
  /* Gabarit Bootstrap de style_annonces.css (vert #00B98E, marine #0E2E50) neutralisé */
  --primary: var(--osm-teal-fonce);
  --secondary: var(--osm-or);
  --dark: var(--osm-encre);
  --light: var(--osm-fond-doux);
}
body { color: var(--osm-encre); }
.it-page .text-primary, .it-page .it-icone { color: var(--osm-teal-fonce) !important; }

/* Menus déroulants de la barre (bleus marine #0C3C53 / #2A3B4D et survol #47B2E4 du gabarit) */
.navbar .dropdown ul a,
#navbar .dropdown ul.mega .mm-title,
#navbar .dropdown ul.mega-list .mm-label { color: var(--osm-encre); }
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a { color: var(--osm-teal-fonce); }

/* ── C. Typographie : Raleway (titres, prix, noms) et Heebo (texte, boutons, libellés) ─ */
body, .navbar a, .navbar a:focus, .section-title h2, .section-title p, .about .content h3,
.section-subtitle, #footer, .footer, .ee-intro, .ee-cases li { font-family: "Heebo", sans-serif; }
/* Sur-titres : petites capitales espacées */
.it-surtitre, .hp-app-surtitre, .it-pages-titre, .ee-pretitle {
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .8125rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--osm-teal-fonce);
}
.it-pages-titre { color: var(--osm-gris); }
/* H2 : Raleway 500 */
.it-titre, .it-orientation-titre, .hp-app-titre, .section-title p {
  font-family: "Raleway", sans-serif; font-weight: 500; letter-spacing: .005em; color: var(--osm-encre);
}
/* H3 et assimilés : Raleway 600 */
.it-offre-carte h3, .ee-headline, .ee-form-title, .ee-confirm h3, .team-card__name, .it-tuile .cta-title,
.it-biens .property-title, .hp-app-bloc strong, .ee-fact strong {
  font-family: "Raleway", sans-serif; font-weight: 600; color: var(--osm-encre);
}
.hp-app-bloc .hp-app-taux { font-family: "Raleway", sans-serif; font-weight: 600; }
.ee-fact strong { color: var(--osm-teal-fonce); }

/* ── D. Boutons : deux styles seulement, alignés sur le hero ──────────────── */
.it-btn, .ee-submit.it-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 28px; border: 2px solid transparent; border-radius: var(--osm-rayon);
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: 1rem; letter-spacing: .02em; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Primaire : fond or, texte encre (10:1) */
.it-btn--primaire, .it-hero .it-btn--plein, .ee-submit.it-btn--primaire {
  background: var(--osm-or); border-color: var(--osm-or); color: var(--osm-encre);
}
.it-btn--primaire:hover, .it-hero .it-btn--plein:hover, .ee-submit.it-btn--primaire:hover:not(:disabled) {
  background: var(--osm-or-clair); border-color: var(--osm-or-clair); color: var(--osm-encre);
}
/* Secondaire sur fond clair : contour bleu-vert foncé */
.it-btn--secondaire { background: transparent; border-color: var(--osm-teal-fonce); color: var(--osm-teal-fonce); }
.it-btn--secondaire:hover { background: var(--osm-teal-fonce); border-color: var(--osm-teal-fonce); color: #fff; }
/* Secondaire sur fond sombre (hero) : contour or, texte blanc */
.it-hero .it-btn--contour { background: rgba(8, 20, 20, .25); border-color: var(--osm-or); color: #fff; }
.it-hero .it-btn--contour:hover { background: var(--osm-or); color: var(--osm-encre); }
/* Focus visible identique partout */
.it-btn:focus-visible, .ee-submit.it-btn:focus-visible { outline: 3px solid var(--osm-teal-fonce); outline-offset: 3px; }
.it-hero .it-btn:focus-visible { outline-color: #fff; }
.ee-submit.it-btn { width: 100%; }
.it-offre-carte .it-offre-lien { align-self: flex-start; font-weight: 500; }
.it-offre-carte .it-offre-lien:hover { text-decoration: none; }
.it-apporteurs .hp-app-actions { gap: 12px; }

/* Liens et focus des autres éléments cliquables */
.it-page a:focus-visible, .it-page button:focus-visible, .it-page input:focus-visible,
.it-page select:focus-visible, .it-page textarea:focus-visible, #header a:focus-visible {
  outline: 3px solid var(--osm-teal-fonce); outline-offset: 3px;
}
.hp-app-bloc:focus-visible, .qcta-card.it-tuile:focus-visible { outline: 3px solid var(--osm-teal-fonce); outline-offset: 3px; }

/* ── A. Hero : réassurance typographique, sans badges image ───────────────── */
.it-membre { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.it-sigle {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .9375rem; letter-spacing: .12em;
  color: rgba(255, 255, 255, .85); text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s;
}
.it-sigle:hover { color: #fff; text-decoration-color: var(--osm-or); }
.it-sigle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; color: #fff; }
.it-point { color: rgba(255, 255, 255, .55); }


/* ── A5. Compteur d'annonces sur la tuile « Trouver un local » ───────────── */
.it-compteur { color: var(--osm-teal-fonce); font-weight: 500; }

/* ── E. Cartes « Nos biens à la une » ─────────────────────────────────────── */
.it-biens .property-item { border-radius: var(--osm-rayon-carte); box-shadow: var(--osm-ombre-carte); }
.it-biens .property-item:hover { box-shadow: 0 12px 32px rgba(28, 43, 42, .12); }
.it-biens .property-image, .it-biens .image-slider { aspect-ratio: 4 / 3; background: var(--osm-fond-doux); }
.it-biens .property-badges { top: 14px; left: 14px; }
.it-biens .property-badge {
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 3px; line-height: 1.3;
}
.it-biens .property-badge--vente { background: var(--osm-teal-fonce); color: #fff; }
.it-biens .property-badge--location { background: var(--osm-or); color: var(--osm-encre); }
.it-biens .property-type {
  background: rgba(29, 53, 52, .86); color: #fff; font-family: "Heebo", sans-serif; font-weight: 500;
  font-size: .8125rem; letter-spacing: .02em; border-radius: 3px; padding: 6px 12px;
}
.it-biens .property-price { font-family: "Raleway", sans-serif; font-weight: 600; font-size: 1.35rem; color: var(--osm-teal-fonce); margin: 0; }
.it-biens .property-ref { color: var(--osm-gris); font-size: .8125rem; }
.it-biens .property-title {
  font-size: 1.05rem; line-height: 1.35; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.35em);          /* hauteur constante : cartes alignées */
}
.it-biens .property-title:hover { color: var(--osm-encre); }
.it-biens .property-location, .it-biens .feature-item { color: var(--osm-gris); }
.it-biens .property-action { color: var(--osm-teal-fonce); font-weight: 500; }
.it-biens .annonce-card > a:focus-visible .property-item { outline: 3px solid var(--osm-teal-fonce); outline-offset: 2px; }

/* ── F. « Ils nous font confiance » : logos sans cadre, tailles optiques ──── */
.it-clients { background: #fff; }                  /* les logos à fond blanc se fondent dans la section */
.it-clients .it-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 40px 56px; max-width: 1040px; margin: 0 auto;
}
.it-clients .it-logos li { background: none; border-radius: 0; padding: 0; height: 72px; display: flex; align-items: center; }
.it-clients .it-logos img { max-width: none; max-height: none; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease; }
.it-clients .it-logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 575.98px) { .it-clients .it-logos { gap: 28px 36px; } .it-clients .it-logos li { height: 64px; } }

/* ── G. Équipe : même ratio, yeux à la même hauteur, même traitement ──────── */
.it-page .team-card { border-color: #e3ecec; border-radius: var(--osm-rayon-carte); }
.it-page .team-card__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.it-page .team-card__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(var(--it-zoom, 1)); transform-origin: 50% var(--it-origine, 50%);
  filter: saturate(.86) contrast(1.02);
}
.it-page .team-card--compact:hover .team-card__photo-wrap .team-card__photo img { transform: scale(calc(var(--it-zoom, 1) * 1.03)); }
.it-page .team-card__photo::after {        /* voile chaud identique pour les quatre portraits */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(247, 211, 161, .16); mix-blend-mode: soft-light;
}
/* Yeux ramenés à ~34 % de la hauteur : zoom et point d'ancrage par personne (fichiers non retouchés) */
.it-page .team-card__photo img[src*="Annelyse_Daumain"] { --it-zoom: 1.10; --it-origine: 67%; }
.it-page .team-card__photo img[src*="Clement_Mignet"]   { --it-zoom: 1.10; --it-origine: 45%; }
.it-page .team-card__photo img[src*="Khalifa"]          { --it-zoom: 1.12; --it-origine: 6%; }
.it-page .team-card__photo img[src*="Yohann_Mercier"]   { --it-zoom: 1.18; --it-origine: 1%; }
.it-page .team-card__stripe { background: var(--osm-teal); }

/* ── Divers : gouttière du formulaire sur mobile (pas de débordement) ─────── */
@media (max-width: 575.98px) { .it-rdv .row.g-5 { --bs-gutter-x: 1.5rem; } }

/* ── Ajustements après le premier audit de la passe 2 ─────────────────────── */
.it-offre-carte .it-btn.it-offre-lien { min-height: 50px; }        /* même hauteur que les autres boutons */
.it-page input, .it-page select, .it-page textarea { color: var(--osm-encre); }
.it-page input[type="checkbox"] { accent-color: var(--osm-teal-fonce); }
.it-biens .property-features.border-top { border-color: #e3ecec !important; }
.section-title h2 { color: var(--osm-gris); }
/* Pied de page (commun) : bleu-vert nuit de la charte au lieu du noir du gabarit, sur cette page */
#footer { background: #152827; }                        /* bande du copyright : bleu-vert nuit plus profond */
#footer .footer-top { background: var(--osm-teal-nuit); border-bottom-color: rgba(255, 255, 255, .08); }
.it-offre-carte .it-offre-autres { margin: -6px 0 18px; }
.it-offre-carte p:not(.it-offre-autres) { flex-grow: 1; }
.it-offre-carte .it-btn.it-offre-lien { margin-top: auto; }
.it-biens .property-price { white-space: nowrap; font-size: clamp(1.1rem, 4.6vw, 1.35rem); }
@media (max-width: 575.98px) {
  .it-apporteurs .hp-app-actions .it-btn { width: 100%; }
  .it-biens .property-details { padding: 20px 18px 0; }
}
/* Méga-menu (commun) : libellés trop pâles sur blanc (#a7aaa4 = 2,3:1, #8a8f8c = 3,4:1) */
#navbar .dropdown ul.mega-cols .mm-head, #navbar .dropdown .mm-desc { color: var(--osm-gris); }
/* Focus visible sur fond sombre : pied de page et pastille des réseaux sociaux */
#footer a:focus-visible { outline: 2px solid var(--osm-or); outline-offset: 3px; }

/* Performance (A/B local, 31 passages) : le logo est désormais peint dès la première image.
   Son drop-shadow (flou) et le décodage du fichier de 851 px retardaient le premier affichage
   de ~20 ms sur mobile. Ombre retirée (le dégradé assure la lisibilité) ; srcset 400/851 px. */
.it-hero-logo { filter: none; }
/* Écran de chargement commun (#preloader, pied de page) : il masquait tout le hero jusqu'à la
   fin du chargement de la page (plusieurs secondes sur réseau lent). Désactivé sur cette page :
   le hero s'affiche dès la première image (logo et photo prioritaires). */
#preloader { display: none !important; }

/* ══ Corrections du 25/09/2026 (soir) ═════════════════════════════════════════
   1. Formulaire « Réservez votre créneau » : retour à l'aspect léger de la production,
      au minimum WCAG AA (teintes de la production foncées jusqu'au seuil exact).
   2. Boutons : primaire bleu-vert foncé sur fond clair, or sur fond sombre (hero).
   3. Liens d'action dans les cartes : liens texte avec flèche, carte entière cliquable.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --osm-bordure-champ: #719d9a;   /* teinte de la bordure de production (#cfdedd) foncée à 3,00:1 sur blanc */
  --osm-gris-vert: #637b79;       /* teinte des textes d'aide de production (#8fa5a3) foncée à 4,53:1 */
  --osm-libelle: #2e3e3d;         /* libellés de production : 11,2:1, conservés */
}

/* ── 1. Formulaire ──────────────────────────────────────────────────────── */
#eeForm label { font-size: 12.5px; font-weight: 600; color: var(--osm-libelle); }
#eeForm .form-control {
  border: 1px solid var(--osm-bordure-champ); border-radius: 3px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#eeForm .form-control:focus, #eeForm .form-control:focus-visible {
  outline: none; border-color: var(--osm-teal-fonce); box-shadow: 0 0 0 3px rgba(117, 172, 170, .25);
}
.it-facultatif, .ee-form-sub, .ee-footnote, .ee-consent label { color: var(--osm-gris-vert) !important; }
.it-facultatif { font-weight: 400; }

/* ── 2. Boutons primaires : bleu-vert foncé sur fond clair, or sur fond sombre ─ */
.it-btn--primaire, .ee-submit.it-btn--primaire {
  background: var(--osm-teal-fonce); border-color: var(--osm-teal-fonce); color: #fff;
}
.it-btn--primaire:hover, .ee-submit.it-btn--primaire:hover:not(:disabled) {
  background: #1f3a39; border-color: #1f3a39; color: #fff;
}
/* Fond sombre (hero et tout bandeau foncé marqué .it-fond-sombre) : primaire en or */
.it-hero .it-btn--plein, .it-fond-sombre .it-btn--primaire { background: var(--osm-or); border-color: var(--osm-or); color: var(--osm-encre); }
.it-hero .it-btn--plein:hover, .it-fond-sombre .it-btn--primaire:hover { background: var(--osm-or-clair); border-color: var(--osm-or-clair); color: var(--osm-encre); }

/* ── 3. Liens d'action dans les cartes (hors règle des boutons) ─────────── */
.it-lien-carte {
  display: inline-flex; align-items: baseline; gap: 6px; background: none; border: 0; padding: 0;
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: 1rem; color: var(--osm-teal-fonce);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px;
  text-underline-offset: 4px; transition: text-decoration-color .2s ease;
}
.it-fleche { display: inline-block; text-decoration: none; transition: transform .2s ease; }
/* Couleur d'accent : celle du liseré de la carte */
.it-offre-carte { --it-accent: var(--osm-teal); }
.it-offre-carte--conseil { --it-accent: var(--osm-or); }
.it-offre-carte--foncier { --it-accent: var(--osm-rose); }
.qcta-card.it-tuile, .it-biens .property-item { --it-accent: var(--osm-teal); }
/* Survol de la carte ou focus du lien : flèche décalée de 4 px, soulignement fin d'accent */
.it-offre-carte:hover .it-lien-carte, .it-lien-carte:focus-visible,
.qcta-card.it-tuile:hover .it-lien-carte, .qcta-card.it-tuile:focus-visible .it-lien-carte,
.it-biens .annonce-card > a:hover .it-lien-carte, .it-biens .annonce-card > a:focus-visible .it-lien-carte {
  text-decoration-color: var(--it-accent);
}
.it-offre-carte:hover .it-fleche, .it-lien-carte:focus-visible .it-fleche,
.qcta-card.it-tuile:hover .it-fleche, .qcta-card.it-tuile:focus-visible .it-fleche,
.it-biens .annonce-card > a:hover .it-fleche, .it-biens .annonce-card > a:focus-visible .it-fleche {
  transform: translateX(4px);
}
.it-lien-carte:focus-visible { outline: 2px solid var(--osm-teal-fonce); outline-offset: 3px; }

/* Cartes « Notre offre » : carte entière cliquable (lien étiré), « Voir aussi » au-dessus */
.it-offre-carte { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.it-offre-carte .it-lien-etire::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.it-offre-carte .it-offre-autres { position: relative; z-index: 2; }
.it-offre-carte .it-offre-lien { margin-top: auto; align-self: flex-start; min-height: 0; font-weight: 500; }
.it-offre-carte .it-offre-lien:hover { text-decoration-color: var(--it-accent); }
/* Survol des cartes : légère montée et ombre renforcée */
.it-offre-carte:hover, .qcta-card.it-tuile:hover, .it-biens .property-item:hover {
  transform: translateY(-3px); box-shadow: 0 12px 30px rgba(28, 43, 42, .12);
}
.qcta-card.it-tuile, .it-biens .property-item { transition: transform .25s ease, box-shadow .25s ease; }
.it-tuile .qcta-cta-link.it-lien-carte { font-size: 1rem; font-weight: 500; }
.it-biens .property-action.it-lien-carte { font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) {
  .it-offre-carte:hover, .qcta-card.it-tuile:hover, .it-biens .property-item:hover { transform: none; }
  .it-fleche { transition: none; }
}

/* ── Exception documentée à la règle des boutons : les deux CTA du hero ────
   Ils reprennent les deux couleurs du logo (or à gauche, rose à droite), à égalité :
   contour de 1,5 px, fond transparent, texte blanc ; au survol et au focus, le bouton
   se remplit de sa couleur et le texte passe en encre. Ailleurs, la règle est inchangée
   (primaire bleu-vert foncé sur fond clair, or sur fond sombre ; secondaire en contour). */
.it-hero .it-btn--hero-or, .it-hero .it-btn--hero-rose {
  --it-cta: var(--osm-or);
  background: transparent; border: 1.5px solid var(--it-cta); color: #fff;
  min-width: 280px; font-weight: 500;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.it-hero .it-btn--hero-rose { --it-cta: var(--osm-rose); }
.it-hero .it-btn--hero-or:hover, .it-hero .it-btn--hero-or:focus-visible,
.it-hero .it-btn--hero-rose:hover, .it-hero .it-btn--hero-rose:focus-visible {
  background: var(--it-cta); border-color: var(--it-cta); color: var(--osm-encre);
}
.it-hero .it-btn--hero-or:focus-visible, .it-hero .it-btn--hero-rose:focus-visible {
  outline: 2px solid var(--it-cta); outline-offset: 3px;
}
@media (max-width: 575.98px) { .it-hero .it-btn--hero-or, .it-hero .it-btn--hero-rose { min-width: 0; } }
/* Passe 3 (26/09) : Chrome arrondit les largeurs de bordure au pixel physique inférieur
   (1.5px était rendu à 1px, mesuré). Trait de 1,5 px réel : bordure 1px + ombre interne 0,5px,
   non arrondie ; la boîte (et donc la mise en page) ne change pas. */
.it-hero .it-btn--hero-or, .it-hero .it-btn--hero-rose { border-width: 1px; box-shadow: inset 0 0 0 .5px var(--it-cta); }

/* ── Réseaux sociaux dans la barre (remplacent la pastille flottante) ─────
   Ordinateur (≥ 1200 px, au-dessus du menu burger) : icônes 16 px blanches à 70 %,
   zones cliquables de 32×32 px, filet vertical avant « Parlons de votre projet ».
   Menu burger (≤ 1199 px) : icônes 20 px centrées en bas du menu déplié. */
.osm-social-strip { display: none !important; }
.it-nav-reseaux { display: flex; align-items: center; gap: 0; }
.it-nav-reseau {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 4px; color: rgba(255, 255, 255, .7); font-size: 16px; line-height: 1; text-decoration: none;
  transition: color .2s ease;
}
.it-nav-reseau:hover, .it-nav-reseau:focus-visible { color: #fff; }
.it-nav-reseau:focus-visible { outline: 2px solid var(--osm-or); outline-offset: 1px; }
.it-nav-filet { width: 1px; height: 24px; background: rgba(255, 255, 255, .25); margin: 0 18px 0 10px; }
@media (min-width: 1200px) {
  #header .container { justify-content: flex-start !important; }
  #header #navbar { margin: 0 auto; }
  #header .get-started-btn { margin-left: 0; }
}
@media (max-width: 1199px) { .it-nav-reseaux, .it-nav-filet { display: none; } }
/* Entrée des réseaux dans le menu déplié : invisible dans la barre d'ordinateur */
#navbar > ul > li.it-reseaux-menu { display: none; }
#navbar.navbar-mobile > ul > li.it-reseaux-menu {
  display: flex; justify-content: center; gap: 12px; padding: 18px 0 10px; margin-top: 10px; border-top: 1px solid #e3ecec;
}
#navbar.navbar-mobile > ul > li.it-reseaux-menu .it-nav-reseau {
  width: 44px; height: 44px; padding: 0; font-size: 20px; color: var(--osm-teal-fonce);
}
#navbar.navbar-mobile > ul > li.it-reseaux-menu .it-nav-reseau:hover,
#navbar.navbar-mobile > ul > li.it-reseaux-menu .it-nav-reseau:focus-visible { color: var(--osm-encre); background: var(--osm-fond-doux); }
#navbar.navbar-mobile > ul > li.it-reseaux-menu .it-nav-reseau:focus-visible { outline: 2px solid var(--osm-teal-fonce); outline-offset: 2px; }

/* ── Chiffres : Raleway dessine par défaut des chiffres elzéviriens (hauteurs variables).
   Chiffres alignés sur la hauteur des capitales partout sur la page. Raleway ne propose
   pas de chiffres tabulaires (pas de fonction tnum, même dans la fonte source) :
   « tnum » est demandé pour Heebo et sans effet sur Raleway. Fichiers Raleway régénérés
   depuis la fonte source Google Fonts avec toutes les fonctions OpenType (dont lnum). */
body, .it-biens .property-price, .it-biens .property-ref, .it-biens .feature-item, .it-biens .property-title,
.it-compteur, .it-reassurance-lien, .hp-app-taux, .ee-fact strong, .team-card__profil-link, .qcta-cta-link {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.it-biens .property-price, .it-biens .feature-item, .it-biens .property-ref { white-space: nowrap; }
/* « Voir l'annonce → » : garde l'espacement et le centrage vertical d'origine de la carte */
.it-biens .property-action.it-lien-carte { align-items: center; min-height: 44px; padding: 8px 20px 8px 12px; }
.it-biens .property-features { padding: 12px 0 8px 12px; }
.it-biens .property-features { flex-wrap: nowrap; justify-content: space-between; }
.it-biens .feature-item { flex: 0 1 auto; text-align: left; }

/* ── Bloc éditorial (texte visible de présentation, avant le pied de page) ── */
.it-editorial { padding: 48px 0 40px; background: #fff; border-top: 1px solid #e3ecec; }
.it-editorial-texte { max-width: 820px; margin: 0 auto; }
.it-editorial .it-titre { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-bottom: 18px; text-align: left; }
.it-editorial p { color: var(--osm-gris); line-height: 1.75; margin: 0 0 14px; }
.it-editorial a { color: var(--osm-teal-fonce); text-decoration: underline; text-decoration-color: rgba(47, 88, 86, .35); text-underline-offset: 3px; }
.it-editorial a:hover { text-decoration-color: var(--osm-teal-fonce); }

/* ── Pied de page, passe 3 (26/09/2026) ─────────────────────────────────────
   HTML réécrit côté serveur dans indextest.php (le fichier commun n'est pas modifié). */
#footer .footer-top .footer-info h3.it-pied-logo { margin: 0 0 18px; padding: 0; line-height: 0; }
#footer .it-pied-logo img { width: 160px; height: auto; display: block; }
/* Réseaux et portails : une ligne monochrome blanche, 70 % d'opacité, 100 % au survol,
   hauteur visuelle commune de 32 px. FNAIM et SEEIF en texte, comme la ligne « Membre » du hero. */
#footer .it-pied-labels { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 22px; }
#footer .it-pied-label {
  display: inline-flex; align-items: center; min-height: 44px; opacity: .7;
  transition: opacity .2s ease; text-decoration: none; background: none; box-shadow: none; border-radius: 2px;
}
#footer .it-pied-label:hover, #footer .it-pied-label:focus-visible { opacity: 1; }
#footer .it-pied-label img { height: 32px; width: auto; display: block; }
/* Logos très allongés (Setting'Up) : hauteur réduite pour garder un poids visuel comparable aux autres */
#footer .it-pied-label img.it-pied-large { height: 22px; }
#footer .it-pied-texte {
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .9375rem; letter-spacing: .12em;
  color: #fff; line-height: 32px;
}
#footer .it-pied-point { color: #fff; opacity: .45; margin: 0 -10px; }
@media (max-width: 991.98px) { #footer .it-pied-labels { justify-content: center; } }
/* Mention du gabarit (licence gratuite BootstrapMade : la mention doit rester) : discrète */
#footer .credits { font-size: .75rem; opacity: .5; padding-top: 4px; }
#footer .credits a { color: inherit; }
/* Bloc éditorial, passe 3 : 6 liens seulement, soulignement discret 1 px bleu-vert (#75acaa) à 40 %,
   plein au survol et au focus. */
.it-editorial p a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(117, 172, 170, .4); transition: text-decoration-color .2s ease;
}
.it-editorial p a:hover, .it-editorial p a:focus-visible { text-decoration-color: #75acaa; }
/* Passe 3 : lien dans le texte de « Qui sommes-nous ? » repérable autrement que par la couleur
   (Lighthouse link-in-text-block), même soulignement discret que le bloc éditorial. */
.it-apropos-texte p a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(117, 172, 170, .4); transition: text-decoration-color .2s ease;
}
.it-apropos-texte p a:hover, .it-apropos-texte p a:focus-visible { text-decoration-color: #75acaa; }

/* ── Formulaire « Réservez votre créneau » : bordures de la production (26/09/2026) ──────
   DÉROGATION ASSUMÉE à la règle de contraste 3:1 des bordures de champs (WCAG 1.4.11) :
   au repos, les champs, la liste et la zone de texte reprennent à l'identique les valeurs
   calculées de l'accueil en production (#cfdedd = 1,36:1 sur blanc, 1 px, rayon 3 px, fond blanc).
   Focus : bordure bleu-vert foncé + halo doux, conservés pour la navigation au clavier
   (voir docs/indextest-passe3/RAPPORT.md, « Corrections du 26/09 »). */
#eeForm .form-control { border: 1px solid #cfdedd; border-radius: 3px; background-color: #fff; }
#eeForm .form-control:focus, #eeForm .form-control:focus-visible {
  outline: none; border-color: var(--osm-teal-fonce); box-shadow: 0 0 0 3px rgba(117, 172, 170, .25);
}
/* Sigles VEFA et BEFA du bloc éditorial : balisés en <abbr>, aspect identique au texte courant */
.it-editorial abbr[title] { text-decoration: none; border-bottom: 0; cursor: inherit; }

/* ══ Lot 3 (26/09/2026) ═══════════════════════════════════════════════════════ */
/* ── Réassurance, lot 3 : « 20 ans d'expérience | Membre FNAIM · SEEIF | téléphone » ── */
.it-reassurance-haut { display: contents; }                     /* ordinateur : 3 éléments de la même ligne flex */
.it-experience { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; }
.it-experience-chiffre {
  font-family: "Raleway", sans-serif; font-weight: 600; font-size: 1rem; color: #fff; letter-spacing: .02em;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}
.it-point--exp { display: none; }
@media (max-width: 767.98px) {
  /* ligne 1 : expérience · membre ; ligne 2 : téléphone ; aucun filet (sinon filet orphelin en fin de ligne) */
  .it-reassurance-haut { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0 8px; width: 100%; }
  .it-reassurance-filet--exp, .it-reassurance-filet--tel { display: none; }
  .it-point--exp { display: inline; }
  .it-reassurance { row-gap: 0; }
}
@media (max-width: 575.98px) {
  /* taille inchangée ; espacement des lettres resserré sur cette ligne pour qu'elle tienne à 390 px (366 px) */
  .it-reassurance-haut .it-reassurance-libelle { letter-spacing: .12em; }
  .it-reassurance-haut .it-sigle { letter-spacing: .06em; }
  .it-reassurance-haut .it-membre { gap: 8px; }
  .it-experience { gap: 6px; }
}
@media (max-width: 389.98px) {
  /* moins de 390 px : « 20 ans d'expérience » puis « Membre FNAIM · SEEIF », sans point orphelin */
  .it-reassurance-haut { flex-wrap: wrap; }
  .it-point--exp { display: none; }
  .it-experience, .it-reassurance-haut .it-membre { flex-basis: 100%; justify-content: center; }
}

/* ── Bandeau apporteurs, lot 3 : icône Lucide à gauche, titre et description au centre,
   taux à droite (élément le plus visible). Le texte du lien est inchangé (SVG aria-hidden). ── */
.it-apporteurs .hp-app-bloc {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "ico titre taux" "ico desc taux";
  column-gap: 16px; row-gap: 2px; align-items: center;
}
.it-apporteurs .hp-app-ico {
  grid-area: ico; align-self: center; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55); color: var(--osm-encre);
  transition: transform .2s ease, background-color .2s ease;
}
.it-apporteurs .hp-app-svg { width: 22px; height: 22px; display: block; }
.it-apporteurs .hp-app-bloc strong { grid-area: titre; align-self: end; }
.it-apporteurs .hp-app-bloc span.hp-app-desc { grid-area: desc; align-self: start; }
.it-apporteurs .hp-app-bloc .hp-app-taux {
  grid-area: taux; align-self: center; justify-self: end; text-align: right;
  font-size: 1.9rem; min-width: 0; white-space: nowrap;
}
.it-apporteurs .hp-app-bloc:hover .hp-app-ico, .it-apporteurs .hp-app-bloc:focus-visible .hp-app-ico {
  transform: translateY(-2px); background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .it-apporteurs .hp-app-ico { transition: none; }
  .it-apporteurs .hp-app-bloc:hover .hp-app-ico, .it-apporteurs .hp-app-bloc:focus-visible .hp-app-ico { transform: none; }
}

/* Repères des ancres de l'ancien accueil (#contact, #services, #about…), mise en ligne du 26/09/2026 :
   éléments vides, décalés de la hauteur de la barre fixe comme les sections. */
.it-ancre { display: block; height: 0; scroll-margin-top: 80px; }

/* ══ Osmose en vidéo, refonte « éditoriale » (01/10/2026) ══════════════════════
   Section #videos-accueil entre « Notre offre » et l'équipe, classes vx- (index.php).
   Rangée 1 : épisode « Dans vos murs » à la une, carte vert sombre (--osm-teal-fonce, couleur
   de la barre de navigation), vidéo 7/12 + bloc éditorial 5/12 ; pile sous 992 px.
   Rangée 2 : formats courts LinkedIn, rangée native en scroll-snap, cartes 200 px (160 px en mobile),
   flèches dans js/indextest.js. Lecteur : iframe youtube-nocookie créé au clic (includes/video-card.php). */
.vx-section { scroll-margin-top: 80px; }
.vx-chapo { font-family: "Heebo", sans-serif; color: var(--osm-gris); font-size: 1.0625rem; line-height: 1.6; max-width: 640px; margin: 10px auto 0; }

/* Rangée 1 : épisode à la une */
.vx-une {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  background: var(--osm-teal-fonce); color: #fff; border-radius: var(--osm-rayon-carte);
  box-shadow: 0 18px 40px rgba(28, 43, 42, .16); overflow: hidden;
}
.vx-une__media { align-self: stretch; }
/* 16:9 ; si le bloc éditorial est plus haut, la zone s'allonge (min-height) et la vignette est recadrée (cover) */
.vx-lecteur { position: relative; aspect-ratio: 16 / 9; width: 100%; min-height: 100%; background: #1f3a39; overflow: hidden; }
.vx-lecteur__bouton {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; overflow: hidden;
}
.vx-lecteur__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease-out; }
.vx-lecteur__bouton:hover .vx-lecteur__img, .vx-lecteur__bouton:focus-visible .vx-lecteur__img { transform: scale(1.03); }
.vx-lecteur__play {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: 2.6rem; line-height: 1; color: #fff;
  background: rgba(31, 45, 44, .62); border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform .4s ease-out, background-color .4s ease-out;
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .vx-lecteur__play { background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.vx-lecteur__play .bi { margin-left: 5px; }
.vx-lecteur__bouton:hover .vx-lecteur__play, .vx-lecteur__bouton:focus-visible .vx-lecteur__play { transform: scale(1.1); background: rgba(31, 45, 44, .72); }
.vx-lecteur__bouton:focus-visible { outline: none; }
.vx-lecteur__bouton::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.vx-lecteur__bouton:focus-visible::after { box-shadow: inset 0 0 0 3px var(--osm-or); }
.vx-lecteur .video-lite__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vx-lecteur__secours { position: absolute; left: 16px; bottom: 16px; color: #fff; }
.vx-une__texte { padding: 32px 44px; }
.vx-une__label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--osm-or);                                   /* or sur vert sombre : 5,6:1 */
}
.vx-une__label .bi { font-size: 1rem; }
.vx-une__titre {
  font-family: "Raleway", sans-serif; font-weight: 500; font-size: clamp(1.45rem, 1.9vw, 1.85rem); line-height: 1.22;
  letter-spacing: .005em; color: #fff; margin: 0 0 14px;
}
.vx-une__accroche { font-family: "Heebo", sans-serif; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .88); margin: 0 0 12px; }
.vx-une__date { font-family: "Heebo", sans-serif; font-size: .9375rem; color: rgba(255, 255, 255, .78); margin: 0 0 26px; }
.vx-une__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.vx-une .vx-une__regarder { background: var(--osm-or); border-color: var(--osm-or); color: var(--osm-encre); }   /* encre sur or : 10,9:1 */
.vx-une .vx-une__regarder:hover { background: var(--osm-or-clair); border-color: var(--osm-or-clair); color: var(--osm-encre); }
.vx-une .vx-une__regarder:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vx-une .vx-une__regarder .bi { font-size: 1.25rem; }
.vx-lien {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: 1rem; color: var(--osm-teal-fonce);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
/* !important : la règle générale des liens .it-page a:not(…) (10 classes) l'emporterait sinon */
.it-page .vx-une .vx-lien { color: #fff !important; }
.it-page .vx-courts .vx-lien { color: var(--osm-teal-fonce) !important; }
.vx-lien:hover, .vx-lien:focus-visible { text-decoration-color: currentColor; }
.vx-lien__fleche { display: inline-block; text-decoration: none; transition: transform .2s ease; }
.vx-lien:hover .vx-lien__fleche, .vx-lien:focus-visible .vx-lien__fleche { transform: translateX(4px); }
.vx-une .vx-lien:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Rangée 2 : formats courts */
.vx-courts { margin-top: 48px; }
.vx-courts__entete { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.vx-courts__titre {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: "Raleway", sans-serif; font-weight: 600; font-size: 1.35rem; color: var(--osm-encre);
}
.vx-pastille-li {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: #0a66c2; color: #fff; font-size: .875rem;
}
.vx-courts__outils { display: flex; align-items: center; gap: 8px; }
.vx-courts__outils .vx-lien { margin-left: 14px; }
.vx-fleche {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid #cfdedd; background: #fff; color: var(--osm-teal-fonce); font-size: 1.05rem; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.vx-fleche:hover:not(:disabled) { background: var(--osm-teal-fonce); border-color: var(--osm-teal-fonce); color: #fff; }
.vx-fleche:focus-visible { outline: 3px solid var(--osm-teal-fonce); outline-offset: 2px; }
.vx-fleche:disabled { opacity: .35; cursor: default; }
.vx-courts__rangee {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  margin: -12px -12px 0; padding: 12px 12px 16px;          /* place pour l'élévation et l'ombre au survol */
  scroll-padding-inline: 12px;
}
.vx-courts__rangee::-webkit-scrollbar { display: none; }
.vx-courts__rangee:focus-visible { outline: 3px solid var(--osm-teal-fonce); outline-offset: -3px; border-radius: 8px; }
.vx-courts__rangee.vx-suite {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
}
.vx-courts__liste { display: flex; justify-content: flex-start; gap: 20px; list-style: none; margin: 0; padding: 0; width: max-content; }
.vx-court { flex: 0 0 200px; width: 200px; scroll-snap-align: start; }
.vx-court__lien { position: relative; display: block; text-decoration: none; color: inherit; border-radius: 12px; }   /* relative : garde le texte .visually-hidden dans la rangée (sinon débordement de la page) */
.it-page a.vx-court__lien { color: var(--osm-encre) !important; }
.vx-court__lien:focus-visible { outline: 3px solid var(--osm-teal-fonce); outline-offset: 4px; }
.vx-court__media {
  position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #1f3a39;
  box-shadow: 0 4px 14px rgba(28, 43, 42, .12); transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.vx-court__media::after {                                  /* dégradé sombre en bas, au survol */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(18, 30, 29, .7) 0%, rgba(18, 30, 29, 0) 45%);
  opacity: 0; transition: opacity .3s ease-out;
}
.vx-court__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-court__badge {
  position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; background: #0a66c2; color: #fff; font-size: .9rem;
}
.vx-court__play {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(31, 45, 44, .72); color: #fff; font-size: 1.25rem;
  transition: background-color .3s ease-out, color .3s ease-out;
}
.vx-court__play .bi { margin-left: 2px; }
.vx-court__lien:hover .vx-court__media, .vx-court__lien:focus-visible .vx-court__media { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(28, 43, 42, .2); }
.vx-court__lien:hover .vx-court__media::after, .vx-court__lien:focus-visible .vx-court__media::after { opacity: 1; }
.vx-court__lien:hover .vx-court__play, .vx-court__lien:focus-visible .vx-court__play { background: var(--osm-or); color: var(--osm-encre); }
.vx-court__titre {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 12px 0 4px; font-family: "Raleway", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--osm-encre);
}
.vx-court__lien:hover .vx-court__titre { color: var(--osm-teal-fonce); }
.vx-court__auteur { display: block; font-family: "Heebo", sans-serif; font-size: .875rem; color: var(--osm-gris); }

.vx-pied { text-align: center; margin-top: 36px; }

@media (max-width: 1199.98px) {
  .vx-une { grid-template-columns: 1fr; }
  .vx-lecteur { min-height: 0; }
  .vx-une__texte { padding: 28px 28px 32px; }
}
@media (max-width: 767.98px) {
  .vx-courts { margin-top: 36px; }
  .vx-courts__outils .vx-fleche { display: none; }           /* défilement au doigt */
  .vx-courts__outils .vx-lien { margin-left: 0; }
  .vx-court { flex-basis: 160px; width: 160px; }
  .vx-court__titre { font-size: .9375rem; }
}
@media (max-width: 575.98px) {
  .vx-une__texte { padding: 24px 20px 28px; }
  .vx-lecteur__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; font-size: 2.1rem; }
  .vx-une__actions { gap: 8px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-lecteur__img, .vx-lecteur__play, .vx-court__media, .vx-court__media::after, .vx-court__play, .vx-lien__fleche, .vx-fleche { transition: none; }
  .vx-lecteur__bouton:hover .vx-lecteur__img, .vx-lecteur__bouton:focus-visible .vx-lecteur__img { transform: none; }
  .vx-lecteur__bouton:hover .vx-lecteur__play, .vx-lecteur__bouton:focus-visible .vx-lecteur__play { transform: none; }
  .vx-court__lien:hover .vx-court__media, .vx-court__lien:focus-visible .vx-court__media { transform: none; }
}
/* Hero : entrée « Nos décryptages vidéo » dans la ligne de réassurance */
.it-reassurance-video .bi { font-size: 1rem; }
@media (max-width: 767.98px) { .it-reassurance-filet--video { display: none; } }