/* =========================================================================
   Gabriel St-Cyr — Courtier immobilier résidentiel
   Système de design : chaleureux + professionnel + luxueux
   Tokens centralisés ici. L'Agent Site Web doit réutiliser ces variables
   pour garder le site cohérent.
   ========================================================================= */

:root {
  /* Couleurs */
  --creme: #FAF7F2;          /* fond principal */
  --creme-fonce: #F0EAE0;    /* sections alternées */
  --anthracite: #1E2A38;     /* texte principal */
  --navy: #16202E;           /* sections fortes */
  --or: #C9A86A;             /* accent / luxe */
  --or-fonce: #B08F4F;       /* accent au survol */
  --rouge: #C0392B;          /* marqueurs carte / alertes */
  --gris: #6B7280;           /* texte secondaire */
  --blanc: #FFFFFF;
  --bordure: #E3DACB;

  /* Typographie */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Espacement et formes */
  --rayon: 10px;
  --ombre: 0 10px 30px rgba(30, 42, 56, 0.08);
  --ombre-forte: 0 18px 50px rgba(30, 42, 56, 0.16);
  --max: 1180px;
  --transition: 0.25s ease;
}

/* ----- Base ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--anthracite);
  background: var(--creme);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--anthracite); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin-bottom: 1rem; }
a { color: var(--or-fonce); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--anthracite); }
img { max-width: 100%; display: block; }

.contenu { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section--creme { background: var(--creme-fonce); }
.section--navy { background: var(--navy); color: #EDE7DC; }
.section--navy h2, .section--navy h3 { color: var(--blanc); }
.centre { text-align: center; }
.surtitre {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--or-fonce);
  margin-bottom: 0.75rem;
  display: block;
  text-align: center;
}
.intro { max-width: 720px; margin: 0 auto 3rem; color: var(--gris); font-size: 1.1rem; }
.bio { max-width: 760px; margin: 0 auto; }
.bio p { font-size: 1.06rem; margin-bottom: 1.15rem; -webkit-hyphens: auto; hyphens: auto; }
/* Texte justifié seulement sur écran assez large (sinon trous entre les mots) */
@media (min-width: 700px) { .bio p { text-align: justify; } }
.bio .bio-cta { font-size: 1.18rem; color: var(--anthracite); margin-top: 1.5rem; text-align: left; -webkit-hyphens: manual; hyphens: manual; }

/* ----- Boutons ----- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
}
.btn--or { background: var(--or); color: var(--navy); }
.btn--or:hover { background: var(--or-fonce); color: var(--blanc); transform: translateY(-2px); }
.btn--ligne { background: transparent; border-color: var(--or); color: var(--or-fonce); }
.btn--ligne:hover { background: var(--or); color: var(--navy); }
.btn--clair { background: var(--blanc); color: var(--navy); }
.btn--clair:hover { background: var(--or); color: var(--navy); }

/* ----- En-tête / navigation ----- */
.entete {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--anthracite); }
.logo span { color: var(--or-fonce); }
.logo small { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); font-weight: 500; }
.nav-liens { display: flex; gap: 1.6rem; align-items: center; list-style: none; }
.nav-liens a { color: var(--anthracite); font-weight: 500; font-size: 0.95rem; position: relative; }
.nav-liens a:hover, .nav-liens a.actif { color: var(--or-fonce); }
.nav-liens a.actif::after {
  content: ''; position: absolute; bottom: -6px; left: 0; right: 0;
  height: 2px; background: var(--or);
}
.nav-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 1.6rem; color: var(--anthracite); }

/* ----- Menu déroulant (Outils) ----- */
.a-sous-menu { position: relative; }

/* Passerelle invisible entre « Outils » et son panneau.
   Le panneau s'ouvre 14 px plus bas ; sans cette bande, la souris quitte la
   zone de survol en traversant le vide et le menu se referme avant qu'on ait
   pu atteindre une option. Elle couvre exactement l'écart. */
.a-sous-menu::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0;
  height: 26px; /* écart réel mesuré : 22 px — on garde une marge */
}
.a-sous-menu > a::before {
  content: '▾'; font-size: 0.7em; margin-right: 0.35em; color: var(--or-fonce);
  display: inline-block; vertical-align: middle;
}
.sous-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 270px; list-style: none; padding: 0.5rem;
  background: var(--creme); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte);
  opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition);
  z-index: 1100;
}
.a-sous-menu:hover .sous-menu,
.a-sous-menu:focus-within .sous-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.sous-menu li { width: 100%; }
.sous-menu a {
  display: block; padding: 0.75rem 1rem; border-radius: 6px;
  text-align: center; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.82rem; color: var(--anthracite); font-weight: 600;
}
.sous-menu a::after { display: none; } /* pas de soulignement "actif" dans le sous-menu */
.sous-menu a:hover { background: var(--or); color: var(--navy); }

/* ----- Hero ----- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center;
  background:
    radial-gradient(60% 50% at 82% 18%, rgba(201,168,106,0.18) 0%, rgba(201,168,106,0) 60%),
    linear-gradient(120deg, rgba(22,32,46,0.80) 0%, rgba(22,32,46,0.38) 60%, rgba(22,32,46,0.15) 100%),
    radial-gradient(circle at 70% 30%, #2c3e52, #16202E);
  color: var(--blanc);
  overflow: hidden;
}
.hero .contenu { position: relative; z-index: 2; }

/* Motif « plan / quartier » très subtil (grille or) + repère de défilement.
   Pseudo-éléments → aucun changement de HTML. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 0H0V44' fill='none' stroke='%23C9A86A' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
}
.hero:not(.hero--page)::after {
  content: '⌄'; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 2; color: var(--or); font-size: 1.8rem; line-height: 1; opacity: 0.85; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero:not(.hero--page)::after { animation: hero-cue 2s ease-in-out infinite; }
}
@keyframes hero-cue {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.85; }
  50% { transform: translate(-50%, 7px); opacity: 0.45; }
}
.hero h1 { color: var(--blanc); max-width: 14ch; }
.hero .slogan { font-size: 1.25rem; max-width: 46ch; margin: 1.4rem 0 2rem; color: #E8E2D7; }
.hero-credits { display: flex; gap: 2.5rem; margin-top: 3rem; flex-wrap: wrap; }
.hero-credit strong { font-family: var(--serif); font-size: 2rem; color: var(--or); display: block; }
.hero-credit span { font-size: 0.85rem; color: #CFC8BB; text-transform: uppercase; letter-spacing: 0.1em; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero plus court pour pages internes ; un peu plus haut pour respirer (2026-09-11 :
   « collé sur le haut » signalé par Gabriel, remonté de 42vh à 48vh). */
.hero--page { min-height: 48vh; }
/* Coussin garanti en haut/bas, peu importe la longueur du H1 (2026-09-11 : « Vivre ici »
   a un titre sur 3 lignes au lieu de 2, ce qui mangeait l'espace de centrage vertical et
   laissait les boutons collés en bas — le vh seul ne garantit rien, le padding oui). */
.hero--page .contenu { padding: 2.4rem 0; }
.hero--page .slogan { margin-bottom: 0; }
/* Étiquette du hero (ex. « ACHETER », « QUI SUIS-JE ») : alignée avec le H1 en dessous,
   pas centrée dans le conteneur large — sinon elle « flotte » loin du titre. Contrairement
   à .surtitre par défaut (centré ailleurs sur le site), le hero garde l'alignement à gauche. */
.hero .surtitre { text-align: left; }

/* ----- Grilles ----- */
.grille { display: grid; gap: 2rem; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }

.carte {
  background: var(--blanc);
  color: var(--anthracite);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 2rem;
  box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte .icone { font-size: 2rem; margin-bottom: 0.8rem; }
/* Cartes « Vendre / Acheter » de l'accueil : bouton toujours aligné en bas de carte,
   même si les deux paragraphes n'ont pas exactement la même longueur. Le bouton est centré ;
   titre et texte restent alignés à gauche pour la lisibilité. L'étiquette (VENDRE/ACHETER)
   hérite du centrage sitewide de .surtitre — rien à faire ici. */
.grille-actions .carte { display: flex; flex-direction: column; }
.grille-actions .carte .btn { margin-top: auto; align-self: center; }
/* Cartes-à-icône (fonctionnalités/valeurs) : contenu centré et uniforme sur tout le site.
   Ciblé via :has(.icone) pour NE PAS toucher les cartes-formulaires (évaluation, contact). */
.carte:has(.icone) { text-align: center; }
.carte:has(.icone) .icone { display: block; }

/* ----- Fiches propriété + carte interactive : RETIRÉ le 2026-08-05 -----
   Le site ne publie pas d'inscriptions (renvoi vers Centris, puis vers l'IDX eXp au lancement).
   Ces ~30 lignes stylaient des fiches et une carte Leaflet plus générées par aucune page.
   Récupérables dans archives/site-proprietes/ si un jour on branche un vrai MLS. */

/* ----- Étapes ----- */
.etapes { counter-reset: etape; display: grid; gap: 1.5rem; }
.etape {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 1.5rem; box-shadow: var(--ombre);
}
.etape::before {
  counter-increment: etape; content: counter(etape);
  flex: 0 0 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--or);
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ----- Témoignages ----- */
.temoignage { background: var(--blanc); border-radius: var(--rayon); padding: 2rem; border: 1px solid var(--bordure); box-shadow: var(--ombre); }
.temoignage .etoiles { color: var(--or); margin-bottom: 0.8rem; }
.temoignage blockquote { font-style: italic; color: var(--anthracite); margin-bottom: 1rem; }
.temoignage cite { font-style: normal; font-weight: 600; color: var(--gris); font-size: 0.9rem; }

/* ----- Outils / calculateurs ----- */
.calc { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 2rem; box-shadow: var(--ombre); }
.calc h3 { margin-bottom: 1.2rem; }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 0.75rem 0.9rem; font-family: var(--sans); font-size: 1rem;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--creme);
  transition: border-color var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--or); }
.calc-resultat {
  margin-top: 1.2rem; padding: 1.2rem; border-radius: 8px;
  background: var(--navy); color: var(--blanc); text-align: center;
}
.calc-resultat .montant { font-family: var(--serif); font-size: 2rem; color: var(--or); }

/* ----- Détail du droit de mutation (tableau dans la boîte navy) -----
   Montrer le travail plutôt qu'un seul chiffre : le calcul par tranches est
   contre-intuitif, et voir chaque portion taxée à son propre taux évite
   l'erreur la plus courante — croire que tout le montant subit le taux le
   plus élevé. */
.tb-ville {
  font-family: var(--serif); font-size: 1.05rem; color: var(--blanc);
  margin: 0.1rem 0 1rem; letter-spacing: 0.01em;
}
.tb-table {
  width: 100%; border-collapse: collapse; text-align: left;
  font-size: 0.84rem; color: #E8E2D8; margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.tb-table caption {
  caption-side: top; text-align: left; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #9AA3AD; padding-bottom: 0.5rem;
}
.tb-table th, .tb-table td { padding: 0.42rem 0.3rem; font-weight: 400; }
.tb-table thead th {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9AA3AD; border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.tb-table tbody th { color: #E8E2D8; font-weight: 400; }
.tb-table tbody tr + tr th, .tb-table tbody tr + tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.tb-table .tb-montant { text-align: right; white-space: nowrap; }
.tb-table tfoot th, .tb-table tfoot td {
  border-top: 2px solid var(--or); padding-top: 0.6rem;
  color: var(--blanc); font-weight: 700;
}
.tb-table tfoot th { text-align: left; letter-spacing: 0.04em; }
.tb-message {
  font-size: 0.82rem; line-height: 1.6; color: #CFC8BB;
  margin: 0.9rem 0 0; text-align: left;
}
/* Avertissement sous le sélecteur, quand une ville ne publie pas sa grille. */
.tb-alerte {
  display: none; font-size: 0.82rem; line-height: 1.55;
  color: #7A4A18; background: #FBF1E2; border-left: 3px solid #C9821F;
  padding: 0.7rem 0.9rem; border-radius: 6px; margin-top: 0.6rem;
}
@media (max-width: 560px) {
  .tb-table { font-size: 0.78rem; }
  .tb-table th, .tb-table td { padding: 0.36rem 0.2rem; }
}

/* ----- Tableau des finalités (politique de confidentialité, §8) -----
   🔁 Ajouté le 2026-09-12. Ce tableau existait depuis la veille, mais ses styles étaient
   ÉCRITS EN LIGNE (`style="..."` sur chaque cellule) — et une media query ne peut pas
   vivre dans un attribut `style`. Il était donc, par construction, impossible à rendre
   responsive : trois colonnes de prose écrasées sur 375 px de large.
   C'est la vraie leçon : un style en ligne n'est pas seulement moins propre, il FERME
   la porte au responsive. */
.tbl-finalites {
  width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem;
}
.tbl-finalites th {
  text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--anthracite);
}
.tbl-finalites td {
  padding: 0.5rem; border-bottom: 1px solid var(--bordure); vertical-align: top;
}
.tbl-finalites th:first-child, .tbl-finalites td:first-child { width: 22%; }
.tbl-finalites th:last-child,  .tbl-finalites td:last-child  { width: 17%; }

@media (max-width: 640px) {
  /* Chaque ligne devient une fiche. L'en-tête reste dans le DOM pour les lecteurs
     d'écran (masqué à l'œil, pas retiré) et la 3e cellule retrouve son libellé via
     `::before` — sinon « Inactif » tout seul ne veut plus rien dire. */
  .tbl-finalites thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tbl-finalites, .tbl-finalites tbody, .tbl-finalites tr, .tbl-finalites td {
    display: block; width: 100%;
  }
  .tbl-finalites tr {
    border: 1px solid var(--bordure); border-radius: 8px;
    padding: 0.7rem 0.9rem; margin-bottom: 0.7rem;
  }
  .tbl-finalites td { border: 0; padding: 0.15rem 0; }
  .tbl-finalites td:first-child { font-size: 1.02rem; }
  .tbl-finalites td:last-child::before { content: 'Par défaut : '; color: var(--gris); }
}

/* ----- Avertissement de conformité ----- */
.avis {
  font-size: 0.85rem; color: var(--gris);
  background: var(--creme-fonce); border-left: 3px solid var(--or);
  padding: 0.9rem 1.1rem; border-radius: 6px; margin-top: 1rem;
}

/* ----- Case de consentement (opt-in) ----- */
.consentement { display: flex; gap: 0.65rem; align-items: flex-start; margin: 1.2rem 0; font-size: 0.9rem; color: var(--anthracite); }
.consentement input { margin-top: 0.2rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--or-fonce); cursor: pointer; }
.consentement label { font-weight: 400; line-height: 1.5; }

/* ----- Formulaire de contact ----- */
.contact-grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.coord-item { display: flex; gap: 0.9rem; margin-bottom: 1.4rem; align-items: flex-start; }
.coord-item .icone { font-size: 1.3rem; color: var(--or-fonce); }

/* ----- Pied de page ----- */
.pied { background: var(--navy); color: #C9C2B6; padding: 3.5rem 0 2rem; }
.pied a { color: #C9C2B6; }
.pied a:hover { color: var(--or); }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
/* Encadré « Abonnez-vous » (infolettre) — bande en haut du pied de page */
.pied-infolettre { border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 1.9rem; margin-bottom: 2.3rem; }
/* Étiquette « 📬 Infolettre » alignée avec le « R » de « Restez à l'affût » juste en dessous,
   pas centrée dans la largeur du pied de page (2026-09-11, signalé par Gabriel). */
.pied-infolettre .surtitre { text-align: left; }
.pied-infolettre .pi-titre { color: var(--blanc); font-size: 1.3rem; margin: 0.35rem 0 0.3rem; }
.pied-infolettre .pi-desc { font-size: 0.9rem; color: #B7B0A3; margin: 0 0 1rem; max-width: 54ch; }
.pied-infolettre .pi-champs { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; max-width: 660px; }
.pied-infolettre input { flex: 1 1 120px; min-width: 110px; height: 44px; padding: 0 0.9rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: var(--blanc); color: var(--anthracite); font-family: var(--sans); font-size: 0.95rem; }
.pied-infolettre input[type="email"] { flex: 2 1 200px; }
.pied-infolettre .pi-champs .btn { height: 44px; flex: 0 0 auto; }
.pied-infolettre .pi-note { font-size: 0.78rem; color: #8C8578; margin: 0.7rem 0 0; }
.pied-infolettre .pi-succes { font-size: 0.95rem; color: var(--or); margin: 0.5rem 0 0; }
.pied h4 { color: var(--blanc); margin-bottom: 1rem; font-size: 1.1rem; }
.pied ul { list-style: none; }
.pied li { margin-bottom: 0.5rem; }
.pied-permis { background: rgba(201,168,106,0.12); border: 1px dashed var(--or); border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.85rem; margin-top: 1rem; }
.pied-social { display: flex; gap: 0.75rem; margin: 1.3rem 0 0.5rem; }
.social-lien {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(201,168,106,0.45);
  color: #C9C2B6; transition: all var(--transition);
}
.social-lien:hover { background: var(--or); color: var(--navy); border-color: var(--or); transform: translateY(-2px); }
.social-lien svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.social-titre { color: #fff; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; margin: 1.3rem 0 0; }
.pied-bas { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem; font-size: 0.82rem; text-align: center; color: #8C8578; }

/* ----- Bouton flottant « Discutons » (injecté par main.js) ----- */
.bouton-flottant {
  position: fixed; right: 22px; bottom: 22px; z-index: 1200;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem; border-radius: 50px;
  background: var(--or); color: var(--navy);
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 8px 24px rgba(30, 42, 56, 0.28);
  transition: all var(--transition);
}
.bouton-flottant:hover { background: var(--or-fonce); color: #fff; transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.bouton-flottant .bf-icone { font-size: 1.15rem; line-height: 1; }
@media (max-width: 560px) {
  .bouton-flottant { right: 16px; bottom: 16px; padding: 0.95rem; }
  .bouton-flottant .bf-texte { display: none; } /* icône seule sur petit écran */
}

/* ----- Chat (assistant IA, panneau injecté par main.js) ----- */
.chat-panneau {
  position: fixed; right: 22px; bottom: 86px; z-index: 1200;
  width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: 16px; box-shadow: var(--ombre-forte); overflow: hidden;
}
/* Respecte l'attribut hidden (sinon display:flex empêche la fermeture). */
.chat-panneau[hidden] { display: none; }
.chat-entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; background: var(--navy); color: #fff; }
.chat-entete strong { font-family: var(--serif); font-size: 1.05rem; }
.chat-sous { font-size: 0.72rem; color: #CFC8BB; text-transform: uppercase; letter-spacing: 0.1em; }
.chat-fermer { background: none; border: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--creme); }
.chat-bulle { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 14px; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; }
.chat-agent { align-self: flex-start; background: #fff; border: 1px solid var(--bordure); border-bottom-left-radius: 4px; }
.chat-visiteur { align-self: flex-end; background: var(--or); color: var(--navy); border-bottom-right-radius: 4px; }
.chat-bulle a { color: var(--or-fonce); font-weight: 600; text-decoration: underline; word-break: break-word; }
.chat-visiteur a { color: var(--navy); }
.chat-attente { color: var(--gris); font-style: italic; }
.chat-saisie { display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--bordure); background: #fff; }
.chat-saisie input { flex: 1; padding: 0.6rem 0.85rem; border: 1px solid var(--bordure); border-radius: 50px; font-family: var(--sans); font-size: 0.95rem; background: var(--creme); }
.chat-saisie input:focus { outline: none; border-color: var(--or); }
.chat-saisie button { flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--or); color: var(--navy); font-size: 1.05rem; cursor: pointer; transition: all var(--transition); }
.chat-saisie button:hover { background: var(--or-fonce); color: #fff; }
.chat-avis { margin: 0; padding: 0.5rem 1rem 0.7rem; font-size: 0.7rem; color: var(--gris); text-align: center; background: #fff; }
@media (max-width: 560px) {
  .chat-panneau { right: 8px; left: 8px; bottom: 78px; width: auto; height: 72vh; }
}

/* ===== SECTIONS « ESSAI » (retirables) ============================== */

/* ----- Bandeau de réassurance (sous le hero) ----- */
.reassurance { background: var(--or); color: var(--navy); padding: 1.1rem 0; }
.reassurance-grille { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1rem 2rem; text-align: center; }
.reassurance-item { font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.reassurance-item .icone { font-size: 1.15rem; }
@media (max-width: 640px) { .reassurance-grille { flex-direction: column; align-items: center; } }

/* ----- Processus en 3 étapes ----- */
.proc-num {
  width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--navy); color: var(--or);
  font-family: var(--serif); font-size: 1.7rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ----- FAQ (accordéon, sans JavaScript) ----- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  margin-bottom: 0.9rem; padding: 0 1.4rem; box-shadow: var(--ombre);
}
.faq summary {
  cursor: pointer; padding: 1.15rem 0; font-family: var(--serif); font-weight: 600;
  font-size: 1.1rem; color: var(--anthracite); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--or-fonce); font-size: 1.6rem; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details > p { padding: 0 0 1.2rem; margin: 0; color: var(--gris); }

/* ===== fin sections « essai » ======================================= */

/* ----- CTA ruban ----- */
.ruban { background: var(--or); color: var(--navy); text-align: center; }
.ruban h2 { color: var(--navy); }

/* ----- Accessibilité : focus clavier visible -----
   Anneau or visible uniquement à la navigation clavier (:focus-visible), pas à
   la souris. Indispensable pour les personnes qui naviguent au clavier. */
:focus-visible {
  outline: 2px solid var(--or-fonce);
  outline-offset: 3px;
}
/* Sur fond navy, l'anneau or-foncé manque de contraste → on l'éclaircit */
.section--navy a:focus-visible,
.hero a:focus-visible,
.ruban a:focus-visible,
.pied a:focus-visible,
.pied .social-lien:focus-visible {
  outline-color: var(--or);
}

/* ----- Apparitions au défilement (effet premium) -----
   La classe .reveal est ajoutée par main.js uniquement ; si le JS ne charge
   pas, le contenu reste visible. On n'anime QUE si l'utilisateur n'a pas
   demandé de réduire les animations (double sécurité avec le garde JS). */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
  }
  .reveal.visible {
    opacity: 1;
    transform: none;
  }
}

/* ----- Responsive ----- */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-liens {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--creme);
    border-bottom: 1px solid var(--bordure); padding: 1rem 1.5rem;
    display: none;
  }
  .nav-liens.ouvert { display: flex; }
  .nav-liens li { width: 100%; padding: 0.6rem 0; border-bottom: 1px solid var(--bordure); }

  /* Sous-menu : affiché en liste indentée sur mobile (pas de survol) */
  .sous-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; box-shadow: none; border: none; padding: 0.3rem 0 0;
    background: transparent;
  }
  /* ⚠️ Le survol doit être neutralisé AUSSI. La règle de bureau
     `.a-sous-menu:hover .sous-menu` réapplique `translateX(-50%)` — en écran
     étroit, ça projetait tout le sous-menu à moitié hors de l'écran, vers la
     gauche, dès que la souris passait dessus. Ici, aucun déplacement. */
  .a-sous-menu:hover .sous-menu,
  .a-sous-menu:focus-within .sous-menu {
    transform: none;
  }
  /* Pas de passerelle en mode liste : elle recouvrirait les liens du dessous. */
  .a-sous-menu::after { content: none; }
  .sous-menu a { text-align: left; text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--gris); padding: 0.45rem 0 0.45rem 1rem; }
  .a-sous-menu > a::before { content: ''; margin: 0; }
  .grille-2, .grille-3, .contact-grille, .pied-grille { grid-template-columns: 1fr; }
  .hero-credits { gap: 1.5rem; }
  .section { padding: 3.5rem 0; }
}

/* ═══ PALIER TABLETTE — le cas qui manquait (ajouté le 2026-09-12) ═══
   Le site n'avait que deux densités : 3 colonnes au-dessus de 860 px, 1 seule en dessous.
   Une tablette en portrait (iPad : 768 px) tombait donc dans la mise en page du TÉLÉPHONE —
   une colonne unique sur un écran large, qui gaspille la moitié de la surface et allonge
   la page inutilement. Ce n'est pas cassé, c'est simplement non conçu : il manquait un
   palier.

   ⚠️ Ce bloc DOIT rester après le `@media (max-width: 860px)` ci-dessus : même
   spécificité, c'est donc l'ordre d'écriture qui décide. Le déplacer plus haut annulerait
   silencieusement le palier.

   `.contact-grille` et `.grille-2` restent à une colonne, volontairement : elles portent
   un formulaire et des blocs de texte, qui deviendraient trop étroits pour se lire. */
@media (min-width: 561px) and (max-width: 860px) {
  .grille-3 { grid-template-columns: repeat(2, 1fr); }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ===== Modale de téléchargement des guides (aimants à leads) ===== */
.modale-guide {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(22, 32, 46, 0.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modale-guide[hidden] { display: none; }
.modale-boite {
  position: relative; background: var(--creme); border-radius: 14px;
  width: 100%; max-width: 440px; padding: 2rem 1.8rem 1.6rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35); border-top: 4px solid var(--or);
}
.modale-fermer {
  position: absolute; top: 10px; right: 14px; background: none; border: none;
  font-size: 1.7rem; line-height: 1; color: var(--gris); cursor: pointer;
}
.modale-corps h3 { font-family: var(--serif); color: var(--navy); }
.modale-sous { font-size: 0.95rem; margin-bottom: 1rem; }
.modale-form .champ { margin-bottom: 0.8rem; }
.modale-form .champ label { display: block; font-weight: 600; font-size: 0.9rem; }
.modale-form input[type="text"], .modale-form input[type="email"] {
  width: 100%; margin-top: 4px; padding: 0.6rem 0.7rem;
  border: 1px solid var(--bordure); border-radius: 8px; font: inherit;
}
.modale-consent {
  display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem;
  color: var(--anthracite); margin: 0.2rem 0 1rem; cursor: pointer;
}
.modale-consent input { margin-top: 3px; }
.modale-avis { font-size: 0.78rem; color: var(--gris); margin-top: 0.8rem; text-align: center; }
.modale-succes { text-align: center; padding: 0.5rem 0; }

/* ===== Menu d'autocomplétion d'adresse (Geoapify) ===== */
.adr-sugg {
  margin-top: 4px; border: 0.5px solid var(--bordure); border-radius: 8px;
  background: var(--blanc); overflow: hidden;
}
.adr-sugg[hidden] { display: none; }
.adr-row {
  padding: 10px 12px; cursor: pointer; font-size: 0.92rem; color: var(--anthracite);
  border-bottom: 0.5px solid var(--bordure); display: flex; gap: 6px; align-items: baseline;
}
.adr-row:last-child { border-bottom: none; }
.adr-row:hover { background: var(--creme-fonce); }

/* ═══ Bannière de consentement au suivi (Loi 25, art. 8.1) ═══
   Ajoutée le 2026-09-11. Barre en bas, PAS une modale : le visiteur peut lire le site
   pendant qu'il décide. Les trois boutons ont le MÊME poids visuel — un refus plus
   difficile qu'une acceptation n'est pas un consentement libre.
   🔴 Z-INDEX REMONTÉ À 1401 LE 2026-09-12, et il fallait le faire. La barre était à 900,
   « au-dessus du contenu mais sous la modale des guides ». Ça se défendait tant qu'elle ne
   bloquait rien. Depuis qu'un voile suspend le site, l'inventaire des couches change tout :
   l'en-tête collant est à **1000** et le menu déroulant à **1100**. Un voile posé sous eux
   aurait laissé le visiteur ouvrir le menu et quitter la page sans jamais choisir — le
   blocage aurait été une illusion. Voile à 1400, barre à 1401 : au-dessus de l'en-tête
   (1000), du menu (1100), de la modale (1000) et du chat (1200).

   ⚖️ La référence était « art. 9.1 » : corrigée le 2026-09-11 après vérification en
   source. Le 1er alinéa de l'art. 9.1 EXCLUT les témoins de connexion ; la disposition
   qui s'applique est l'art. 8.1 (informer au préalable + moyens d'ACTIVER les fonctions
   d'identification, de localisation ou de profilage). Voir `main.js` pour le détail.

   🗂️ Deux niveaux depuis le 2026-09-11 : `.bc-haut` (phrase courte, aucun nom de
   fournisseur) et `.bc-detail` (une finalité par bloc, replié par défaut). La hauteur
   varie donc à l'ouverture — c'est `remesurer()` dans `main.js` qui replace la bulle
   de chat, jamais une règle d'ici. */
/* Le voile : suspend l'interaction, PAS la lecture.
   Aucun `overflow` et aucun `touch-action` ici, volontairement — le voile n'étant pas
   lui-même défilable, la molette et le glissement du doigt se répercutent sur le
   document. Le visiteur peut donc lire et parcourir tout le site ; il ne peut simplement
   rien y cliquer avant d'avoir choisi.
   L'assombrissement est léger mais nécessaire : un clic sans réponse, sans indice visuel,
   se lit comme un site cassé. */
.consent-voile {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(22, 32, 46, 0.3);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}

.bandeau-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1401;
  background: var(--navy); color: #EDE7DC;
  border-top: 2px solid var(--or);
  box-shadow: 0 -10px 30px rgba(30, 42, 56, 0.25);
  padding: 1.1rem 1.4rem;
  /* Le détail déplié peut dépasser un petit écran : on le fait défiler DANS la barre
     plutôt que de laisser « Enregistrer mes choix » sortir du champ. */
  max-height: 85vh; overflow-y: auto;
}
/* ⚠️ MÊME largeur maximale que `.bc-detail` ci-dessous, et c'est le point.
   Jusqu'au 2026-09-12, `.bc-haut` s'étalait sur toute la largeur pendant que
   `.bc-detail` était bridé à 72ch : sur un écran large, le texte commençait à gauche
   des cartes et les boutons finissaient à leur droite. Les deux moitiés de la barre
   ne s'alignaient sur rien. Si l'une des deux valeurs change, changer l'autre. */
.bandeau-consent .bc-haut {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: center;
  max-width: 1100px; margin: 0 auto;
}
.bandeau-consent .bc-texte {
  font-size: 0.88rem; line-height: 1.5; max-width: 62ch; flex: 1 1 320px;
}
.bandeau-consent .bc-texte strong { color: var(--blanc); }
.bandeau-consent .bc-texte a { color: var(--or); }
.bandeau-consent .bc-boutons { display: flex; gap: 0.6rem; flex: 0 0 auto; flex-wrap: wrap; }
/* ⚖️ « Accepter » et « Refuser » partagent la classe `btn--clair` ET cette largeur
   minimale : même poids visuel, même surface de clic. Refuser ne coûte pas un geste de
   plus qu'accepter. L'or est réservé à « Enregistrer mes choix » — c'est le choix
   granulaire qu'on met en avant, pas l'acceptation en bloc. */
.bandeau-consent .bc-boutons .btn { min-width: 118px; text-align: center; }
.bandeau-consent .bc-boutons .bc-enregistrer { min-width: 186px; }

/* 🔁 Le lien « Masquer le détail » a existé quelques heures le 2026-09-12, puis a été
   retiré à la demande de Gabriel : une commande de plus pour compenser un contenu trop
   long, c'est traiter le symptôme. La hauteur se règle en coupant du texte, pas en
   ajoutant un bouton. Le détail est visible partout, il n'y a rien à déplier. */

/* ─── Niveau 2 : le détail par finalité ─── */
.bandeau-consent .bc-detail {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid rgba(237, 231, 220, 0.22);
  max-width: 1100px; margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column; gap: 0.75rem;
}
/* 🔁 `.bc-mode` — la phrase dorée « Tout accepter les active tous les deux… » — a été
   retirée le 2026-09-12, après que Gabriel l'a vue en place sur téléphone. Elle avait sa
   raison d'être quand les boutons s'appelaient « Accepter » et « Refuser » ; une fois
   passés à « TOUT accepter » et « TOUT refuser », le mot « tout » dit ce qu'elle
   expliquait. Elle répétait donc les boutons situés trois centimètres au-dessus, en
   coûtant trois lignes de hauteur sur un écran de téléphone. */
/* 🖥️ TROIS COLONNES DÈS QU'IL Y A LA PLACE (2026-09-12).
   Les trois fiches s'empilaient à toutes les tailles. Sur un écran d'ordinateur, ça
   donnait une barre qui dépassait le bas de la fenêtre et se mettait à défiler
   toute seule — pendant que la moitié droite restait vide. Constaté par Gabriel sur PC.
   ⚠️ Seuil à 860 px, PAS plus bas, et c'est calculé : chaque fiche porte son titre et son
   interrupteur sur la même ligne. « Mesure d'audience » fait ~130 px, l'interrupteur 46 px,
   l'espace entre eux 12 px — soit ~188 px minimum. À 860 px de fenêtre, une colonne offre
   ~234 px de contenu : ça passe. À 700 px elle n'en offrait que ~180, et le titre serait
   passé sous l'interrupteur. En dessous de 860, l'empilement reste le bon choix, et les
   tablettes en portrait ont de toute façon la hauteur pour l'absorber. */
@media (min-width: 860px) {
  .bandeau-consent .bc-detail {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  }
}
.bandeau-consent .bc-cat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(237, 231, 220, 0.14);
  border-radius: 8px; padding: 0.75rem 0.9rem;
}
/* Les « Nécessaires » ne se règlent pas : le bloc le montre au lieu d'afficher un
   interrupteur désactivé, qui donnerait l'illusion d'un choix. */
.bandeau-consent .bc-cat--fixe { background: rgba(255, 255, 255, 0.03); }
.bandeau-consent .bc-cat-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.bandeau-consent .bc-cat-nom {
  font-weight: 600; color: var(--blanc); font-size: 0.95rem;
}
/* Le nom est un <label> pour les deux finalités réglables : cliquer le texte bascule
   la case, et un lecteur d'écran annonce le bon libellé. */
label.bc-cat-nom { cursor: pointer; }
.bandeau-consent .bc-cat-fixe {
  font-size: 0.78rem; color: var(--or); white-space: nowrap;
}
.bandeau-consent .bc-cat p {
  margin: 0.45rem 0 0; font-size: 0.83rem; line-height: 1.5; color: #DCD5C9;
}
/* 🔁 `.bc-note` (le rappel « hors Québec » en bas de panneau) a été retiré le 2026-09-12
   pour gagner de la hauteur sur téléphone. L'information n'est pas perdue : la politique
   la porte en §5 ET §8, et son lien est dans le texte du haut de la barre. C'est le
   modèle par couches — le fait matériel au premier plan, le détail à un clic. */

/* Interrupteur bâti sur une vraie case à cocher : le clavier, le focus et les lecteurs
   d'écran fonctionnent sans une ligne de JavaScript. */
.bandeau-consent .bc-bascule {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 46px; height: 26px; margin: 0;
  border-radius: 999px; border: 1px solid rgba(237, 231, 220, 0.35);
  background: rgba(0, 0, 0, 0.28); position: relative; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.bandeau-consent .bc-bascule::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #EDE7DC; transition: transform 0.18s ease;
}
.bandeau-consent .bc-bascule:checked { background: var(--or); border-color: var(--or); }
.bandeau-consent .bc-bascule:checked::after { transform: translateX(20px); background: var(--navy); }
.bandeau-consent .bc-bascule:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bandeau-consent .bc-bascule,
  .bandeau-consent .bc-bascule::after { transition: none; }
}

@media (max-width: 560px) {
  /* Sur téléphone, les boutons passent pleine largeur et côte à côte, pour rester
     atteignables au pouce sans allonger la barre outre mesure. */
  .bandeau-consent { padding: 1rem; }
  .bandeau-consent .bc-boutons { width: 100%; }
  .bandeau-consent .bc-boutons .btn { flex: 1 1 0; min-width: 0; }

  /* 📱 Densité resserrée, information intacte (2026-09-12).
     Gabriel a signalé que la barre prenait tout l'écran sur son téléphone. Le gros du
     gain vient d'ailleurs — un paragraphe retiré et trois descriptions réduites à une
     ligne — mais ces réglages finissent le travail : ~90 px de moins, sans qu'une seule
     phrase disparaisse. C'est la bonne façon de gagner de la hauteur : resserrer ce qui
     entoure le texte avant de toucher au texte. */
  .bandeau-consent .bc-texte { font-size: 0.84rem; }
  .bandeau-consent .bc-detail { margin-top: 0.75rem; padding-top: 0.75rem; gap: 0.5rem; }
  .bandeau-consent .bc-cat { padding: 0.55rem 0.7rem; }
  .bandeau-consent .bc-cat-nom { font-size: 0.9rem; }
  .bandeau-consent .bc-cat p { margin-top: 0.25rem; font-size: 0.8rem; }
  /* L'interrupteur rapetisse, mais reste au-dessus du seuil confortable au pouce. */
  .bandeau-consent .bc-bascule { width: 42px; height: 24px; }
  .bandeau-consent .bc-bascule::after { width: 16px; height: 16px; }
  .bandeau-consent .bc-bascule:checked::after { transform: translateX(18px); }
  /* « Enregistrer mes choix » ne tient pas sur un tiers de téléphone : il prend sa
     propre rangée, pleine largeur, JUSTE SOUS les deux autres — donc toujours visible
     sans défiler. C'est précisément le défaut signalé le 2026-09-12 : au bas du panneau,
     il pouvait tomber sous la ligne de flottaison selon l'écran. */
  .bandeau-consent .bc-boutons .bc-enregistrer { flex: 1 0 100%; min-width: 0; }
}

/* ⚠️ La collision avec la bulle « Discutons » et le panneau de chat (z-index 1200, tous
   deux ancrés en bas à droite) N'EST PAS réglée ici, volontairement — elle l'est en
   JavaScript, dans `basculerFlottants`.

   🔁 CE BLOC DÉCRIVAIT UN MÉCANISME QUI N'EXISTE PLUS (corrigé le 2026-09-12).
   Il expliquait que le code « mesure la hauteur réelle de la barre et décale les deux
   éléments d'autant, en style en ligne », et défendait ce choix en trois points. Le
   décalage a été retiré le 2026-09-12 : il n'était borné par rien, et l'ouverture du
   panneau propulsait la bulle hors de l'écran.

   ✅ Ce qui se passe maintenant : la bulle et le panneau sont simplement MASQUÉS
   (`display:none` en ligne, `display` d'origine mémorisé puis restitué) tant que la barre
   est affichée. Borné par construction, identique sur tous les écrans, et il n'y a plus de
   hauteur à mesurer ni de collision à gérer.

   ⛔ Ne pas rajouter de règle `bottom` ni `display` ici pour `.bouton-flottant` ou
   `.chat-panneau` : le style en ligne posé par le JS l'écraserait. */