/*
Theme Name: Charles Perreault, courtier immobilier
Author: Charles Perreault
Description: Thème du site de courtage de Charles Perreault, généré par construire_theme_wordpress.py.
Version: 0.14.2
Requires at least: 6.6
Text Domain: charles-perreault
*/

/* Repris de Bootstrap 4 (reboot), placé avant la feuille du site comme il l'était */
ol, ul, dl { margin-top: 0; margin-bottom: 1rem; }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
/* Charles Perreault, courtier immobilier : feuille du site, générée par construire_theme_wordpress.py. */

/* Les deux polices du site, hébergées dans le thème (les mêmes fichiers que Google Fonts servait) : deux hôtes tiers de moins. */
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/polices/libre-caslon-display-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/polices/libre-caslon-display-latin.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: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/polices/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/polices/montserrat-latin.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 {
  /* Couleurs officielles RE/MAX 2025 */
  --bleu-fonce: #000E35;   /* sections sombres, en-tête, pied de page */
  --bleu-pont: #0C2749;    /* second sombre, survol */
  --bleu-primaire: #0043FF;/* liens sur fond clair */
  --bleu-ciel: #A3D4F2;    /* liens et accents sur fond sombre */
  --rouge-bouton: #AA1120; /* bouton principal, barre fixe */
  --rouge-bouton-survol: #8C0E1A;
  --creme: #F7F5EE;        /* logotype et texte sur fond sombre */
  --blanc: #FFFFFF;
  --gris: #F2F2F2;         /* sections claires alternées */
  --gris-ligne: #D9D9D9;
  --texte: #232323;
  --texte-doux: #5A5A5A;
  --texte-sur-sombre: rgba(247, 245, 238, 0.82);

  /* Typographie */
  --police-titre: 'Libre Caslon Display', 'Times New Roman', serif;
  --police-texte: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --taille-h1: clamp(2.25rem, 1.2rem + 3.2vw, 3.5rem);   /* 36 à 56 px */
  --taille-h2: clamp(1.75rem, 1rem + 2.2vw, 2.625rem);   /* 28 à 42 px */
  --taille-h3: 1.375rem;
  --taille-texte: 1.0625rem; /* 17 px */
  --taille-petit: 0.875rem;
  --taille-surtitre: 0.75rem;
  --interligne: 1.65;

  /* Espacements */
  --e-1: 0.5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-5: 3rem; --e-6: 4.5rem; --e-7: 6rem;
  --largeur: 1200px;
  --marge: clamp(1rem, 4vw, 2rem);
  --hauteur-entete: 88px;
  --hauteur-barre-fixe: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0; overflow-x: clip; background: var(--blanc); color: var(--texte);
  font-family: var(--police-texte); font-size: var(--taille-texte); line-height: var(--interligne);
  padding-bottom: var(--hauteur-barre-fixe);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-primaire); text-underline-offset: 3px; }
body a { text-decoration: underline; } /* plus précis que la règle d'une extension, moins que nos classes */
a:hover { color: var(--bleu-pont); }
:focus-visible { outline: 3px solid var(--bleu-primaire); outline-offset: 3px; }
html { scroll-padding-bottom: calc(var(--hauteur-barre-fixe) + 24px); }
.entete :focus-visible, .pied :focus-visible, .barre-fixe :focus-visible, .sombre :focus-visible, .propriete :focus-visible,
.bandeau :focus-visible, .bandeau-page :focus-visible, .accueil-b :focus-visible { outline-color: var(--bleu-ciel); }
.reseaux-colonne a:focus-visible { outline-color: var(--creme); outline-offset: -4px; }
.sombre a { color: var(--bleu-ciel); }
.sombre a:hover { color: var(--creme); }
.sombre .bouton-principal, .sombre .bouton-principal:hover { color: var(--blanc); }

h1, h2, h3, h4 { margin: 0 0 var(--e-3); line-height: 1.15; font-weight: 400; }
h1, h2 { overflow-wrap: anywhere; text-wrap: balance; }
.insecable { white-space: nowrap; }
h1 { font-family: var(--police-titre); font-size: var(--taille-h1); text-transform: uppercase; letter-spacing: 0.08em; }
h2 { font-family: var(--police-titre); font-size: var(--taille-h2); text-transform: uppercase; letter-spacing: 0.07em; }
h3 { font-family: var(--police-texte); font-size: var(--taille-h3); font-weight: 600; }
h4 { font-family: var(--police-texte); font-size: 1.0625rem; font-weight: 600; }
p { margin: 0 0 var(--e-3); }
p:last-child { margin-bottom: 0; }
.petit { font-size: var(--taille-petit); color: var(--texte-doux); }
.sombre .petit { color: var(--texte-sur-sombre); }

/* Surtitre : petite étiquette en capitales, majuscule au premier mot seulement dans le texte source */
.surtitre {
  display: block; font-family: var(--police-texte); font-size: var(--taille-surtitre); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rouge-bouton); margin-bottom: var(--e-2);
}
.sombre .surtitre { color: var(--bleu-ciel); }

/* Le filet terminé par un point : signature déjà acquise dans la marque de Charles */
.filet { display: flex; align-items: center; gap: 6px; margin: var(--e-2) 0 var(--e-3); }
.filet::before { content: ''; width: 56px; height: 1px; background: currentColor; opacity: 0.55; }
.filet::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.filet.centre { justify-content: center; }
.filet.centre::before { order: 2; } .filet.centre::after { order: 1; }

/* Mise en page */
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.section { padding: var(--e-6) 0; }
@media (min-width: 900px) { .section { padding: var(--e-7) 0; } }
.sombre { background: var(--bleu-fonce); color: var(--creme); }
.clair-gris { background: var(--gris); }
.grille { display: grid; gap: var(--e-4); }
.grille-2 { grid-template-columns: 1fr; }
.grille-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entete-section { max-width: 720px; margin-bottom: var(--e-5); }
.entete-section.centre { margin-left: auto; margin-right: auto; text-align: center; }

/* Boutons : carrés, jamais arrondis */
.bouton {
  display: inline-block; padding: 1.05rem 1.75rem; border: 2px solid transparent; border-radius: 0;
  font-family: var(--police-texte); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer; text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bouton-principal { background: var(--rouge-bouton); color: var(--blanc); border-color: var(--rouge-bouton); }
.bouton-principal:hover { background: var(--rouge-bouton-survol); border-color: var(--rouge-bouton-survol); color: var(--blanc); }
.bouton-contour { background: transparent; color: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.bouton-contour:hover { background: var(--bleu-fonce); color: var(--creme); }
.sombre .bouton-contour { color: var(--creme); border-color: var(--creme); }
.sombre .bouton-contour:hover { background: var(--creme); color: var(--bleu-fonce); }
.bouton-lien { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* En-tête : logos RE/MAX au-dessus de la ligne des 400 px, téléphone de l'agence, FR/EN */
.entete { background: var(--bleu-fonce); color: var(--creme); position: relative; z-index: 60; } /* au-dessus de la galerie des fiches (40 et 45), sous les fenêtres de Bootstrap (1040) : audit du 18 octobre 2026, B2 */
.entete-barre {
  border-bottom: 1px solid rgba(247,245,238,0.14); font-size: 0.8125rem;
}
.entete-barre .conteneur { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: var(--e-2); flex-wrap: wrap; }
.entete-barre .agence { letter-spacing: 0.02em; }
.entete-barre .adresse { display: none; }
@media (min-width: 720px) { .entete-barre .adresse { display: inline; } }
.entete-barre .tel-agence { font-weight: 600; letter-spacing: 0.06em; color: var(--creme); text-decoration: none; font-size: 0.9375rem; }
@media (max-width: 599px) { .entete-barre .tel-agence { flex-basis: 100%; } }
.entete-principal .conteneur { display: flex; align-items: center; justify-content: space-between; min-height: var(--hauteur-entete); gap: var(--e-3); }
.marque { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--creme); }
.marque { min-width: 0; }
.marque img { height: 40px; width: auto; flex-shrink: 0; } /* le logotype RE/MAX ne se déforme jamais (normes RE/MAX; audit du 18 octobre 2026, C10) */
/* Sous 600 px, le logo ne cède jamais sa largeur aux voisins; sous 375 px, les voisins se resserrent, et sous 360 px le logo
   rapetisse en entier (jamais en largeur seulement) */
@media (max-width: 599px) { .marque { flex-shrink: 0; } .marque img { max-width: none; } }
@media (max-width: 374px) { .entete-principal .conteneur { gap: var(--e-1); } .langue a { padding: 6px 4px; } .menu-mobile { padding: 0.55rem 0.6rem; } }
@media (max-width: 359px) { .marque img { height: 36px; } }
@media (min-width: 600px) { .marque img { height: 46px; } }
.marque .nom { display: none; flex-direction: column; line-height: 1.15; border-left: 1px solid rgba(247,245,238,0.35); padding-left: var(--e-3); }
.marque .nom b { white-space: nowrap; font-family: var(--police-titre); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.9375rem; }
.marque .nom span { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-sur-sombre); margin-top: 3px; }
.menu { display: none; gap: 1.05rem; list-style: none; margin: 0; padding: 0; }
.menu a { white-space: nowrap; color: var(--creme); text-decoration: none; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; padding: 0.5rem 0; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--creme); color: var(--creme); }
.langue { display: flex; align-items: center; gap: 0; font-size: 0.75rem; letter-spacing: 0.1em; }
.langue a { color: var(--texte-sur-sombre); text-decoration: none; padding: 6px 8px; }
.langue a[aria-current="true"] { color: var(--creme); font-weight: 700; }
.nav-principale { display: contents; }
.menu-mobile-boite { position: relative; }
.menu-mobile-boite summary { list-style: none; cursor: pointer; }
.menu-mobile-boite summary::-webkit-details-marker { display: none; }
.menu-deroulant { position: absolute; right: 0; top: calc(100% + 12px); background: var(--bleu-fonce); border: 1px solid rgba(247,245,238,0.25); list-style: none; margin: 0; padding: 0.5rem 0; min-width: 220px; z-index: 30; }
.menu-deroulant a { display: block; padding: 0.75rem 1.25rem; color: var(--creme); text-decoration: none; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.menu-deroulant a[aria-current="page"], .menu-deroulant a:hover { background: var(--bleu-pont); }
.menu-mobile { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--creme); background: none; border: 1px solid rgba(247,245,238,0.4); padding: 0.55rem 0.8rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-family: inherit; }
@media (min-width: 600px) { .marque .nom { display: flex; } }
@media (min-width: 1200px) { .menu { display: flex; } .menu-mobile-boite { display: none; } }

/* Accueil, variante A : portrait pleine largeur, voile sombre */

/* Accueil, variante B : bloc bleu et portrait en colonne */
.accueil-b { background: var(--bleu-fonce); color: var(--creme); }
.accueil-b .colonnes { display: grid; grid-template-columns: 1fr; }
.accueil-b .texte { padding: var(--e-4) var(--marge) var(--e-5); display: flex; align-items: center; order: 2; }
.accueil-b .portrait { order: 1; }
.accueil-b .texte > div { width: 100%; }
.accueil-b .portrait { position: relative; min-height: 300px; }
.accueil-b .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage-portrait, 50% 12%); position: absolute; inset: 0; }
/* Une colonne : le cadrage part du haut de la photo, pour ne pas couper la tête; sur tablette, un cadre 4:3 plutôt qu'une bande de 300 px (audit du 9 octobre 2026) */
@media (max-width: 899px) { .accueil-b .portrait img { object-position: 50% 0%; } }
@media (min-width: 600px) and (max-width: 899px) { .accueil-b .portrait { min-height: 0; aspect-ratio: 4 / 3; } }
@media (min-width: 900px) {
  .accueil-b .colonnes { grid-template-columns: 55% 45%; min-height: min(680px, calc(100svh - 124px - var(--hauteur-barre-fixe))); }
  .accueil-b .texte { order: 1; padding: var(--e-5) var(--marge); } .accueil-b .portrait { order: 2; }
  /* Le texte part du même bord gauche que le logo et les sections : la colonne fait 55 % de l'écran, le conteneur est centré */
  .accueil-b .texte > div { margin-left: auto; max-width: calc(5vw + var(--largeur) / 2 - 2 * var(--marge)); }
}

/* Le bloc d'identité de l'accueil : nom, titre au permis, agence à 50 % du nom au minimum */
.identite h1 { margin-bottom: 0.35rem; }
.identite .titre-permis { display: block; font-size: 0.9375rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--creme); margin-bottom: 0.9rem; }
.identite .agence-nom { display: block; font-size: clamp(1.2375rem, 0.66rem + 1.76vw, 1.925rem); font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; color: var(--creme); }
@media (min-width: 900px) { .identite h1 { font-size: clamp(2.75rem, 0.5rem + 3vw, 3.5rem); } .identite .agence-nom { font-size: clamp(1.5125rem, 0.275rem + 1.65vw, 1.925rem); } .identite .phrase { margin: var(--e-2) 0 var(--e-3); } }
/* L'étiquette de maquette ne doit pas pousser le contenu : elle disparaît du vrai site */
.accueil-b .texte > div { position: relative; }
.identite .agence-mention { display: block; font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-sur-sombre); margin-top: 0.35rem; }
.identite .phrase { font-size: 1.125rem; max-width: 34em; color: var(--texte-sur-sombre); margin: var(--e-3) 0 var(--e-4); }
.identite .preuve-ligne { margin-top: var(--e-3); font-size: var(--taille-petit); letter-spacing: 0.04em; color: var(--texte-sur-sombre); }

/* Bande des trois preuves : la barre oblique rouge du nom, en séparateur */
.preuves { border-bottom: 1px solid var(--gris-ligne); }
.preuves .liste { display: grid; grid-template-columns: 1fr; gap: var(--e-3); padding: var(--e-5) 0; list-style: none; margin: 0; }
.preuves li { text-align: center; padding: 0 var(--e-2); }
.preuves .chiffre { font-family: var(--police-titre); font-size: 2.75rem; line-height: 1; color: var(--bleu-fonce); display: block; margin-bottom: 0.5rem; }
.preuves .etiquette { font-size: var(--taille-petit); color: var(--texte-doux); letter-spacing: 0.04em; }
.preuves .etoiles-chiffre { color: #F5B301; font-family: var(--police-texte); font-size: 2.25rem; letter-spacing: 0.08em; padding-top: 0.25rem; } /* les étoiles d'or du bloc Google, à la place de « 5,0 » (Charles, 3 octobre 2026) */
@media (min-width: 720px) {
  .preuves .liste { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .preuves li { position: relative; }
  .preuves li + li::before { content: '/'; position: absolute; left: -0.35em; top: 0.1em; font-family: var(--police-titre); font-size: 2.75rem; color: var(--rouge-bouton); line-height: 1; }
}

/* Les trois chiffres d'une page de secteur : la même bande, posée dans la colonne de texte */
.preuves-secteur { border-top: 1px solid var(--gris-ligne); margin: var(--e-4) 0 var(--e-5); }
.preuves-secteur .liste { padding: var(--e-4) 0; }
.preuves-secteur .chiffre { font-size: 2.25rem; }
@media (min-width: 720px) { .preuves-secteur li + li::before { font-size: 2.25rem; } }

/* Bandeaux Vendre et Acheter */
.bandeaux { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .bandeaux { grid-template-columns: 1fr 1fr; } }
.bandeau { position: relative; color: var(--creme); min-height: 460px; display: flex; align-items: flex-end; background: var(--bleu-pont); overflow: hidden; }
.bandeau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bandeau .voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,14,53,0.45) 0%, rgba(0,14,53,0.72) 45%, rgba(0,14,53,0.92) 100%); }
.bandeau .contenu { position: relative; padding: var(--e-5) var(--marge); max-width: 560px; }
/* À l'ordinateur, le texte du bandeau de gauche part du même bord que le logo et les sections */
@media (min-width: 900px) { .bandeau:first-child .contenu { padding-left: max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge))); max-width: calc(560px + max(0px, (100vw - var(--largeur)) / 2)); } }
.bandeau h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.125rem); }
.bandeau p { color: var(--texte-sur-sombre); margin-bottom: var(--e-3); }
.bandeau .bouton-contour { color: var(--creme); border-color: var(--creme); }
.bandeau .bouton-contour:hover { background: var(--creme); color: var(--bleu-fonce); }

/* Cartes de propriété, sombres comme chez Bardagi */
.propriete { background: var(--bleu-fonce); color: var(--creme); display: flex; flex-direction: column; }
.propriete .photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bleu-pont); position: relative; }
.propriete .photo img { width: 100%; height: 100%; object-fit: cover; }
.propriete .etiquette-vendu { position: absolute; top: 1rem; left: 1rem; background: var(--rouge-bouton); color: var(--blanc); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; padding: 0.45rem 0.8rem; }
.propriete .corps { padding: var(--e-3); display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.propriete .secteur { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bleu-ciel); font-weight: 600; }
.propriete .type { font-size: 1.0625rem; font-weight: 600; }
.propriete .prix { font-family: var(--police-titre); font-size: 1.5rem; margin-top: 0.25rem; }
.propriete .liens { margin-top: auto; padding-top: var(--e-2); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.propriete .liens a { color: var(--creme); text-decoration: none; border-bottom: 1px solid var(--bleu-ciel); padding-bottom: 2px; }

/* Cartes de secteur */
.secteur-carte { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bleu-pont); color: var(--creme); text-decoration: none; }
.secteur-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.secteur-carte:hover img { transform: scale(1.03); }
.secteur-carte .voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,14,53,0) 40%, rgba(0,14,53,0.85) 100%); }
.secteur-carte .nom { position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); font-family: var(--police-titre); font-size: 1.375rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--creme); }
.secteur-carte.grande { grid-column: span 1; }
@media (min-width: 720px) { .secteur-carte.grande { grid-column: span 2; aspect-ratio: auto; height: 100%; } }
@media (min-width: 720px) { .grille-secteurs { grid-template-columns: repeat(3, 1fr); } }
.secteurs-autres { margin-top: var(--e-4); color: var(--texte-doux); }

/* Témoignages et bloc Google */
.google-bloc { border: 1px solid rgba(247,245,238,0.25); padding: var(--e-4); }
.google-bloc .note { font-family: var(--police-titre); font-size: 4rem; line-height: 1; }
.google-bloc .etoiles { color: #F5B301; font-size: 1.375rem; letter-spacing: 0.15em; margin: 0.5rem 0 0.25rem; }
.google-bloc .actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.temoignage { border-left: 2px solid var(--rouge-bouton); padding-left: var(--e-3); margin: 0; }
.sombre .temoignage { border-left-color: var(--bleu-ciel); }
.temoignage p { font-size: 1.0625rem; margin-bottom: var(--e-2); }
.temoignage footer { font-size: var(--taille-petit); letter-spacing: 0.04em; }
.temoignage footer b { font-weight: 600; }
.temoignage footer .trad { display: block; font-size: 0.75rem; opacity: 0.75; }

/* Articles */
.article-carte { display: block; text-decoration: none; color: var(--texte); border-top: 1px solid var(--gris-ligne); padding-top: var(--e-3); }
.article-carte .date { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-doux); }
.article-carte h3 { margin: 0.5rem 0; font-size: 1.125rem; }
.article-carte:hover h3 { color: var(--bleu-primaire); }

/* Formulaire court */
.formulaire { display: grid; gap: var(--e-2); }
.formulaire .deux { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 600px) { .formulaire .deux { grid-template-columns: 1fr 1fr; } }
.formulaire label { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.35rem; }
.formulaire input, .formulaire textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid #767676; border-radius: 0; font: inherit; background: var(--blanc); color: var(--texte); }
.formulaire input:focus-visible, .formulaire textarea:focus-visible { border-color: var(--bleu-primaire); outline: 3px solid var(--bleu-primaire); outline-offset: 2px; }
.formulaire .consentement { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--taille-petit); color: var(--texte-doux); }
.formulaire .consentement input { width: 18px; height: 18px; margin-top: 3px; }

/* Bloc de contact */
.coordonnees .tel { font-family: var(--police-titre); font-size: 2rem; letter-spacing: 0.04em; color: var(--bleu-fonce); text-decoration: none; display: inline-block; }
.sombre .coordonnees .tel { color: var(--creme); }
.coordonnees .courriel { font-size: 1rem; }
/* « 3 façons dont je peux vous aider », sous le courriel de la page Contact : les mots de l'infolettre de Charles */
.trois-facons { margin: 0 0 var(--e-3); padding-left: 1.3em; }
.trois-facons li { margin-bottom: 0.6rem; padding-left: 0.2em; }
.trois-facons li::marker { color: var(--rouge-bouton); font-weight: 600; }

/* Pied de page : toutes les mentions RE/MAX */
.pied { background: var(--bleu-fonce); color: var(--creme); padding: var(--e-6) 0 var(--e-4); font-size: var(--taille-petit); }
.pied .colonnes { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .pied .colonnes { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pied img { height: 56px; width: auto; margin-bottom: var(--e-3); }
.pied .identite-pied b { display: block; font-family: var(--police-titre); font-weight: 400; font-size: 1.125rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pied .identite-pied .titre { display: block; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; margin: 0.25rem 0 0.75rem; }
.pied .agence-pied { font-size: 1.375rem; font-weight: 500; margin-top: 0.5rem; }
.pied .spa { font-size: 0.75rem; color: var(--texte-sur-sombre); margin-top: 0.35rem; }
.pied .tel-pied { display: inline-block; font-size: 1.25rem; font-weight: 600; color: var(--creme); text-decoration: none; margin: 0.35rem 0; letter-spacing: 0.04em; }
.pied .courriel-pied { font-size: 0.875rem; }
.pied h4 { color: var(--creme); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--e-2); }
.pied ul { list-style: none; margin: 0; padding: 0; }
/* La ligne de gratitude, au-dessus des colonnes du pied de page */
.pied .merci-pied { font-family: var(--police-titre); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); letter-spacing: 0.03em; line-height: 1.3; color: var(--creme); margin: 0 0 var(--e-5); }
.pied li { margin-bottom: 0.15rem; }
.pied a { color: var(--texte-sur-sombre); text-decoration: none; }
.pied li a, .pied .bas a { display: inline-block; padding: 4px 0; }
.pied a:hover { color: var(--creme); text-decoration: underline; }
.pied .bas { border-top: 1px solid rgba(247,245,238,0.14); margin-top: var(--e-5); padding-top: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); justify-content: space-between; color: var(--texte-sur-sombre); font-size: 0.75rem; }

/* Barre fixe du bas : un seul appel à l'action */
.barre-fixe { position: fixed; left: 0; right: 0; bottom: 0; height: var(--hauteur-barre-fixe); background: var(--bleu-fonce); color: var(--creme); border-top: 1px solid rgba(247,245,238,0.16); z-index: 60; }
.barre-fixe .conteneur { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.barre-fixe .texte { font-size: 0.875rem; display: none; }
.barre-fixe .bouton { padding: 0.8rem 1.4rem; font-size: 0.75rem; }
.barre-fixe .appel { display: inline-flex; align-items: center; gap: 0.6rem; }
@media (min-width: 720px) { .barre-fixe .texte { display: block; } }
/* Sur téléphone, la barre devient le bouton d'appel : le bureau seulement, jamais le cellulaire */
.barre-fixe .rendez-vous { display: none; }
@media (min-width: 720px) { .barre-fixe .rendez-vous { display: inline-block; } .barre-fixe .appel { display: none; } }
@media (max-width: 719px) { .barre-fixe .conteneur { justify-content: center; } .barre-fixe .appel { width: 100%; justify-content: center; } }

/* Colonne des réseaux, bord droit, ordinateur seulement */
.reseaux-colonne { display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 15; flex-direction: column; }
.reseaux-colonne a { width: 40px; height: 40px; display: grid; place-items: center; background: var(--bleu-fonce); color: var(--creme); text-decoration: none; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; border-bottom: 1px solid rgba(247,245,238,0.16); }
.reseaux-colonne a:hover { background: var(--rouge-bouton); color: var(--blanc); }
@media (min-width: 1220px) { .reseaux-colonne { display: flex; } }

/* Note de maquette : visible seulement dans les brouillons, jamais dans le site */
.faux-texte { color: var(--texte-doux); font-style: italic; }
.sombre .faux-texte { color: var(--texte-sur-sombre); }

/* Page intérieure : bandeau de titre */
.bandeau-page { background: var(--bleu-fonce); color: var(--creme); padding: var(--e-6) 0; }
.bandeau-page.avec-photo { position: relative; overflow: hidden; padding: var(--e-7) 0 var(--e-6); }
.bandeau-page .fond { position: absolute; inset: 0; }
.bandeau-page .fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.bandeau-page.avec-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,14,53,0.94) 0%, rgba(0,14,53,0.8) 50%, rgba(0,14,53,0.45) 100%); }
.bandeau-page.avec-photo .conteneur { position: relative; z-index: 1; }
@media (max-width: 899px) { .bandeau-page.avec-photo::after { background: linear-gradient(90deg, rgba(0,14,53,0.94) 0%, rgba(0,14,53,0.86) 55%, rgba(0,14,53,0.72) 100%); } }
@media (max-width: 599px) { .bandeau-page h1 { font-size: min(2.25rem, 8.7vw); } }
.bandeau-page .surtitre { color: var(--bleu-ciel); }
.bandeau-page p { max-width: 40em; color: var(--texte-sur-sombre); }
.prose { max-width: 42em; }
.prose h2 { font-size: 1.75rem; letter-spacing: 0.06em; margin-top: var(--e-5); }
/* « Confidentialité » est trop long pour le titre courant sur téléphone; la politique a aussi des intertitres plus petits */
@media (max-width: 599px) { .bandeau-politique h1 { font-size: 1.625rem; } }
.politique h2 { font-size: 1.25rem; margin-top: var(--e-4); }
/* Pages de secteur : trois boutons, foire aux questions, listes de liens (9 octobre 2026) */
.actions-secteur { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.faq h3 { font-size: 1.0625rem; margin: var(--e-3) 0 0.35rem; }
.faq p { margin-top: 0; }
.liste-liens { list-style: none; padding: 0; margin: var(--e-2) 0 0; }
.liste-liens li { padding: 0.55rem 0; border-bottom: 1px solid var(--gris-ligne); }
.prose h3 { margin-top: var(--e-4); }
.prose ul { padding-left: 1.2em; }
.a-propos-colonnes { display: grid; gap: var(--e-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .a-propos-colonnes { grid-template-columns: 1.3fr 1fr; } }
.portrait-cadre img { width: 100%; }
.faits { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--gris-ligne); }
.faits li { display: flex; justify-content: space-between; gap: var(--e-3); padding: 0.9rem 0; border-bottom: 1px solid var(--gris-ligne); font-size: 0.9375rem; }
.faits li span:first-child { color: var(--texte-doux); }
.faits li span:last-child { text-align: right; font-weight: 500; }

/* Mosaïque de photos régulière, sans adresse lisible */
.mosaique { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mosaique img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.mosaique-2, .mosaique-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaique-2 img, .mosaique-3 img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
.mosaique-3 img:first-child { grid-column: 1 / -1; }
.prose .mosaique { margin: var(--e-3) 0 var(--e-4); }
@media (min-width: 720px) { .mosaique { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (min-width: 720px) { .mosaique-2, .mosaique-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mosaïque libre de la page À propos : des colonnes où chaque photo garde ses proportions (portraits, paysages, bannières) */
.mosaique-libre { columns: 2; column-gap: 6px; }
.mosaique-libre img { display: block; width: 100%; height: auto; margin-bottom: 6px; break-inside: avoid; }
.a-propos-colonnes + .mosaique-libre { margin-top: var(--e-5); }
@media (min-width: 720px) { .mosaique-libre { columns: 3; column-gap: 8px; } .mosaique-libre img { margin-bottom: 8px; } }
@media (min-width: 1000px) { .mosaique-libre { columns: 4; } }

/* Bande de photos au bas de l'accueil. Aucun script : une rangée qu'on balaie du doigt; à l'ordinateur elle défile
   seule et s'arrête sous le curseur. Les photos en double (.double) ne servent qu'à boucler le défilement. */
.bande-photos { padding: var(--e-5) 0; }
.bande-photos .surtitre { display: block; margin: 0 0 var(--e-3); }
.bande-photos .defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bande-photos .piste { display: flex; gap: 6px; width: max-content; padding: 0 var(--marge); }
.bande-photos img { flex: none; height: clamp(150px, 17vw, 220px); width: auto; }
.bande-photos .double { display: none; }
.bande-pause { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bande-photos .defile { overflow: hidden; }
  .bande-photos .piste { padding: 0; animation: bande-defile var(--duree, 110s) linear infinite; }
  .bande-photos .double { display: block; }
  .bande-photos .defile:hover .piste { animation-play-state: paused; }
  .bande-photos:has(.bande-pause input:checked) .piste { animation-play-state: paused; }
  /* Invisible pour le visiteur à la souris (Charles, 10 octobre 2026) : la case n'apparaît que lorsqu'on y arrive au clavier. */
  .bande-pause { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--taille-petit); color: var(--texte-doux); cursor: pointer;
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bande-pause:focus-within { position: static; width: auto; height: auto; margin: 0 0 var(--e-3); overflow: visible; clip-path: none; }
  .bande-pause input { width: 18px; height: 18px; margin: 0; }
}
@keyframes bande-defile { to { transform: translateX(calc(-50% - 3px)); } }
/* La même rangée à l'intérieur d'une section (les photos d'OSE, page À propos), et le logo d'OSE au-dessus des trois faits */
.bande-photos.interne { padding: var(--e-5) 0 0; }
.logo-ose { display: block; width: 104px; height: auto; margin: 0 0 var(--e-3); }
/* Le portrait de l'adjointe (page À propos, bloc « Qui vous accompagne »), carré, au-dessus des heures */
.portrait-adjointe img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 0 var(--e-4); }

/* Bannière des 25 ans et logotype avec insertion (normes RE/MAX p. 7) */
.banniere-large { width: 100%; height: auto; }
.signature-remax { width: 100%; max-width: 420px; height: auto; margin-bottom: var(--e-4); }

/* Carte des transactions */
.carte-ventes { width: 100%; height: auto; border: 1px solid var(--gris-ligne); }
.legende-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: var(--e-2); font-size: var(--taille-petit); color: var(--texte-doux); }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--gris-ligne); margin-right: 0.4rem; vertical-align: -1px; }
.pastille.rouge { background: #AA1120; } .pastille.bleue { background: #0043FF; }

.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avis-note { max-width: 560px; margin: 0 auto; text-align: center; }
.avis-note .actions { justify-content: center; }
.liste-avis { gap: var(--e-5) var(--e-4); align-items: start; }


/* Retouches de design du 11 octobre 2026 (vérification finale, rapport 08) */
/* Titres : jamais un mot seul sur la deuxième ligne */
.secteur-carte .nom, .preuves .etiquette { text-wrap: balance; }
/* Petites majuscules : deux interlettrages au lieu de sept, et les libellés de formulaire en bas de casse */
:root { --capitales: 0.12em; --capitales-large: 0.18em; }
.bouton, .propriete .liens, .menu-deroulant a, .marque .nom span, .identite .agence-mention { letter-spacing: var(--capitales); }
.identite .titre-permis, .propriete .etiquette-vendu { letter-spacing: var(--capitales-large); }
.formulaire label, .formulaire-jetpack label { text-transform: none; letter-spacing: 0; font-size: var(--taille-petit); }
.article-carte .date { text-transform: none; letter-spacing: 0.02em; font-size: 0.8125rem; }
/* Pages de secteur : le bloc de droite suit la lecture au lieu de laisser la colonne vide */
@media (min-width: 900px) and (min-height: 760px) {
  .a-propos-colonnes > aside:has(.colonne-collante) { align-self: stretch; }
  .colonne-collante { position: sticky; top: var(--e-3); }
}
.a-propos-colonnes > aside div.secteur-carte .nom, .a-propos-colonnes > aside div.secteur-carte .voile { display: none; }
.prose > h2:first-child { margin-top: 0; }
/* Téléphone : les secteurs et le pied de page sur deux colonnes */
@media (max-width: 719px) {
  .grille-secteurs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .grille-secteurs .secteur-carte { aspect-ratio: 1 / 1; }
  .grille-secteurs .secteur-carte.grande { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .grille-secteurs .secteur-carte:not(.grande) .nom { font-size: 1rem; left: .75rem; right: .75rem; bottom: .75rem; line-height: 1.2; }
  .pied .colonnes { grid-template-columns: 1fr 1fr; }
  .pied .identite-pied { grid-column: 1 / -1; }
}

/* Guides de l'acheteur et du vendeur (12 octobre 2026) : l'exemplaire en image, le contenu et le bouton à côté */
.bloc-guide { display: grid; gap: var(--e-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .bloc-guide { grid-template-columns: 1fr 1.15fr; gap: var(--e-6); } .bloc-guide.inverse .exemplaire-guide { order: 2; } }
.exemplaire-guide img { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.contenu-guide ul { padding-left: 1.2em; margin: 0 0 var(--e-3); }
.contenu-guide li { margin-bottom: 0.35rem; }
.contenu-guide .bouton { margin-top: var(--e-2); }
/* Les deux guides côte à côte (accueil) */
.guides-deux { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .guides-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-guide { text-align: center; }
.carte-guide .exemplaire-guide img { max-width: 340px; }
.carte-guide h3 { font-family: var(--police-titre); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.06em; margin: var(--e-3) 0 var(--e-1); }
.carte-guide p { margin: 0 auto var(--e-3); max-width: 26em; }
/* Les listes déroulantes du formulaire reprennent le champ de texte */
.formulaire select, .formulaire-jetpack select { width: 100%; padding: 0.85rem 1rem; border: 1px solid #767676; border-radius: 0; font: inherit; background-color: var(--blanc); color: var(--texte); }
.formulaire select:focus-visible, .formulaire-jetpack select:focus-visible { border-color: var(--bleu-primaire); outline: 3px solid var(--bleu-primaire); outline-offset: 2px; }

/* Thème 0.12.0 (18 octobre 2026) : décisions de Charles et audit des ingénieurs */
/* Le métier entre dans le h1 de l'accueil (C16) sans changer ce qui s'affiche */
.identite h1 { margin-bottom: 0; }
.identite h1 .titre-permis { font-family: var(--police-texte); line-height: var(--interligne); margin-top: 0.35rem; }
/* Titres du pied de page et de l'aparté des secteurs en h2, au même dessin que les h4 d'avant (D1) */
.pied .titre-pied { font-family: var(--police-texte); font-weight: 600; line-height: 1.15; color: var(--creme); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 var(--e-2); }
.titre-aparte { font-family: var(--police-texte); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; margin: 0 0 var(--e-3); }
/* Pages de secteur : l'appel qui suit la lecture, dans la colonne de droite */
.appel-secteur { margin-top: var(--e-4); padding: var(--e-3); background: var(--bleu-fonce); color: var(--creme); }
.appel-secteur .titre-aparte { color: var(--creme); margin-bottom: var(--e-2); }
/* Accueil : les titres « Vous pensez vendre » et « Vous pensez acheter » à la même hauteur */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .bandeaux { grid-template-rows: 1fr auto auto auto; }
    .bandeau { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .bandeau .contenu { grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; align-content: end; }
    .bandeau .contenu > .bouton { justify-self: start; align-self: start; }
  }
}
/* Grille des secteurs au téléphone : la dernière tuile seule prend toute la largeur (D10) */
@media (max-width: 719px) { .grille-secteurs > .secteur-carte:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 9; } }
/* Pas de mot seul en fin de titre (D11) */
.article-carte h3, .secteur-carte .nom { text-wrap: balance; }
/* Page de remerciement */
.merci-colonnes { display: grid; gap: var(--e-5); align-items: center; }
.merci-portrait img { width: 100%; max-width: 360px; height: auto; display: block; }
@media (min-width: 720px) { .merci-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
/* Neuf entrées au menu depuis « Guides » (Charles, 18 octobre 2026) : le menu se resserre pour ne pas toucher le nom */
@media (min-width: 1200px) { .menu { gap: 0.75rem; } .menu a { letter-spacing: 0.08em; } }

/* Thème 0.13.2 (réaudit du 18 octobre 2026) */
/* N2 : au téléphone, la page Merci dit d'abord que la demande est arrivée, la photo vient ensuite (Charles) */
@media (max-width: 719px) { .merci-colonnes .prose { order: -1; } .merci-portrait img { max-width: 240px; } }
.merci .tel { white-space: nowrap; }
/* C11 : sous 400 px, le voile monte plus haut, pour les noms de secteur sur deux lignes */
@media (max-width: 399px) { .secteur-carte .voile { background: linear-gradient(180deg, rgba(0,14,53,0.1) 0%, rgba(0,14,53,0.55) 35%, rgba(0,14,53,0.9) 100%); } }

/* Ajustements WordPress : aucun espace entre les blocs, le formulaire Jetpack prend le style du formulaire */
.wp-site-blocks > * + * { margin-block-start: 0; }
.formulaire-jetpack { margin: 0; }
.formulaire-jetpack .wp-block-jetpack-contact-form { gap: var(--e-3); }
.formulaire-jetpack input[type="text"], .formulaire-jetpack input[type="email"], .formulaire-jetpack input[type="tel"], .formulaire-jetpack textarea { width: 100%; }
/* Le bouton d'envoi reprend le bouton rouge du site */
.formulaire-jetpack .wp-block-button__link {
  display: inline-block; padding: 1.05rem 1.75rem; border: 2px solid var(--rouge-bouton); border-radius: 0;
  background: var(--rouge-bouton); color: var(--blanc); font-family: var(--police-texte); font-size: 0.8125rem;
  font-weight: 600; letter-spacing: var(--capitales, 0.12em); text-transform: uppercase; line-height: 1.2; cursor: pointer;
}
.formulaire-jetpack .wp-block-button__link:hover { background: var(--rouge-bouton-survol); border-color: var(--rouge-bouton-survol); }
/* La case de consentement : texte courant, pas une étiquette en majuscules */
.formulaire-jetpack .checkbox label, .formulaire-jetpack .contact-form__checkbox-wrap label {
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--taille-petit); color: var(--texte-doux);
}
.formulaire-jetpack input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; }
.note-formulaire { margin-top: var(--e-2); color: var(--texte-doux); }
/* Fiches SyncBroker (thème 0.10.0) : le contenu de l'extension entre l'en-tête et le pied de page du site */
.fiche-syncbroker-contenu { padding-top: var(--e-5); padding-bottom: var(--e-3); }
.section.lien-remax-fiche { padding: 0 0 var(--e-5); }
.aucune-propriete { color: var(--texte-doux); }
/* Sur une fiche, l'icône du numéro du bureau est un téléphone, pas un cellulaire (Font Awesome de l'extension) */
body.tel-bureau .fa-mobile-alt::before { content: "\f095"; }
/* La carte Leaflet d'une fiche range ses couches à 400 et plus : isolée, elle reste sous l'en-tête (thème 0.11.0, B2).
   Pas l'enveloppe entière de l'extension : ses fenêtres modales y sont rangées et resteraient sous leur fond grisé. */
.fiche-syncbroker-contenu .leaflet-container { isolation: isolate; }
/* Les commandes de la fiche rendues accessibles au clavier par le thème (0.11.0, B4) gardent l'anneau du site */
.fiche-syncbroker-contenu [data-cp-clavier]:focus-visible { outline: 3px solid var(--bleu-primaire); outline-offset: 2px; }
/* Thème 0.12.0 : RE/MAX (nouveau), choisi par Charles le 18 octobre 2026, habillé aux couleurs du site */
.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--creme); color: var(--bleu-fonce); padding: 0.75rem 1rem; font-weight: 600; }
.lien-evitement:focus { left: 1rem; top: 1rem; }
.fiche-syncbroker-contenu .Banner--remax2 :where(p, span, a, li, td, th, label, h4, h5, input, select, button, b, strong, div) { font-family: var(--police-texte); }
.fiche-syncbroker-contenu .Banner--remax2 h1.propertyType, .fiche-syncbroker-contenu .Banner--remax2 .sectionTitle {
  font-family: var(--police-titre); font-weight: 400; color: var(--bleu-fonce); letter-spacing: 0.02em; text-transform: none; }
.fiche-syncbroker-contenu .Banner--remax2 h1.propertyType { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.15; }
.fiche-syncbroker-contenu .Banner--remax2 .textPrice { font-family: var(--police-titre); color: var(--bleu-fonce); font-weight: 400; }
.fiche-syncbroker-contenu .Banner--remax2 a { color: var(--bleu-fonce); }
.fiche-syncbroker-contenu .Banner--remax2 .btn-primary, .fiche-syncbroker-contenu .Banner--remax2 #monthlyPayment {
  background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: var(--blanc); border-radius: 0; }
.fiche-syncbroker-contenu .Banner--remax2 .btn-primary:hover { background: var(--bleu-pont); border-color: var(--bleu-pont); }
.fiche-syncbroker-contenu .Banner--remax2 .btn-primary { text-transform: uppercase; letter-spacing: var(--capitales, 0.12em); font-size: 0.8125rem; font-weight: 600; padding: 0.9rem 1.5rem; }
.fiche-syncbroker-contenu .Banner--remax2 .modalButton { background: var(--blanc); color: var(--bleu-fonce); border: 1px solid var(--bleu-fonce); border-radius: 0; }
.fiche-syncbroker-contenu .Banner--remax2 .broker p:first-child { font-family: var(--police-titre); color: var(--creme); font-size: 1.25rem; }
/* Téléphone et courriel : texte crème sur la carte marine, contour fin, comme les boutons du site sur fond foncé (Charles, 18 octobre 2026) */
.fiche-syncbroker-contenu .Banner--remax2 .broker p:not(:first-child) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.fiche-syncbroker-contenu .Banner--remax2 .broker p:not(:first-child) a {
  display: inline-flex; align-items: center; gap: 0.5rem; background: transparent !important; color: var(--creme) !important;
  border: 1px solid rgba(247,245,238,0.55) !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0.7rem 1.1rem !important; text-decoration: none !important; font-size: 0.9375rem; }
.fiche-syncbroker-contenu .Banner--remax2 .broker p:not(:first-child) a:hover { background: rgba(247,245,238,0.08) !important; }
.fiche-syncbroker-contenu .Banner--remax2 .broker i { color: var(--creme) !important; }
.fiche-syncbroker-contenu .Banner--remax2 img.mainImage, .fiche-syncbroker-contenu .Banner--remax2 img.topImage,
.fiche-syncbroker-contenu .Banner--remax2 img.leftImage, .fiche-syncbroker-contenu .Banner--remax2 img.rightImage { border-radius: 0; cursor: pointer; }
.fiche-syncbroker-contenu #sync-broker-map-wrapper { display: none !important; }
/* N3 et N5 (réaudit) : un anneau visible partout sur les fiches, et des bordures de champ à 3:1 */
.fiche-syncbroker-contenu .Banner .btn:focus-visible, .fiche-syncbroker-contenu .Banner .form-control:focus,
.fiche-syncbroker-contenu .carousel-control-prev:focus-visible, .fiche-syncbroker-contenu .carousel-control-next:focus-visible,
.fiche-syncbroker-contenu .btn-header-link:focus-visible { box-shadow: none !important; outline: 3px solid var(--bleu-primaire) !important; outline-offset: 3px; }
.fiche-syncbroker-contenu .Banner--remax2 .broker a:focus-visible { outline: 3px solid var(--creme) !important; outline-offset: 3px; }
.fiche-syncbroker-contenu .Banner .form-control { border-color: #767676; }
#custCarousel2 .carousel-control-prev:focus-visible, #custCarousel2 .carousel-control-next:focus-visible { outline-color: #FFBC00 !important; }   /* inversé à l'écran en #0043FF par le filtre du modèle; la visionneuse (#custCarousel) garde le bleu */   /* « API KEY REQUIRED » : en attente de SyncBroker */
body.tel-bureau .fa-mobile-phone::before { content: "\f095"; }
/* Une fiche vendue ou louée ne montre ni prix ni calculatrice (OACIQ), seulement son état */
.fiche-vendue .textPrice, .fiche-louee .textPrice { font-size: 0 !important; }
.fiche-vendue .textPrice::after, .fiche-louee .textPrice::after { font-size: 1.75rem; content: "Vendu"; }
.fiche-louee .textPrice::after { content: "Loué"; }
html[lang^="en"] .fiche-vendue .textPrice::after { content: "Sold"; }
html[lang^="en"] .fiche-louee .textPrice::after { content: "Leased"; }
.fiche-vendue .calculatorDiv, .fiche-louee .calculatorDiv, .fiche-vendue a[href="#mortgage-calculator"], .fiche-louee a[href="#mortgage-calculator"] { display: none !important; }