/* ==========================================================================
   front-localrank.css — charte du site vitrine Local rank.

   Lié depuis app/templates/bundles/QcdgoneCmsBundle/front/page.html.twig, donc
   chargé sur toutes les pages publiques du CMS, pas seulement l'accueil.

   ⚠ Les sections sont ciblées par leur `htmlId`, jamais par une classe : le
   moteur de rendu émet un second attribut `class` sur la ligne, que le
   navigateur ignore. Les classes posées sur une LIGNE sont donc perdues ;
   celles des colonnes et des blocs, non.

   CSS servi tel quel : ni Sass, ni build, ni npm.
   ========================================================================== */

:root {
  --lr-indigo: var(--color-primary, #4F46E5);
  --lr-indigo-fonce: #3730A3;
  --lr-jaune: var(--color-secondary, #FEC90C);
  --lr-jaune-fonce: #EBB800;
  --lr-encre: var(--color-tertiary, #1E1E1E);
  --lr-trait: #E5E7EB;
  --lr-hero-bg: #F4F4FE;
}

/* Les bandes pleine largeur se calent sur la fenêtre (`50vw`) : on neutralise
   le décalage qu'introduirait l'apparition d'une barre de défilement. */
body { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   1. Typographie de section (classes posées sur les blocs)
   -------------------------------------------------------------------------- */
.lr-eyebrow, .lr-eyebrow p {
  margin: 0 0 .75rem;
  font-size: .8125rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-muted, #6B7280);
}
#lr-hero .lr-eyebrow p { color: #6C63E8; }

h1.lr-h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 4.4vw, 3.375rem); line-height: 1.1;
  font-weight: 800; letter-spacing: -.02em;
  color: var(--lr-indigo); text-wrap: balance;
}
h2.lr-h2 {
  margin: 0 0 1rem; max-width: 42em;
  font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2;
  font-weight: 800; letter-spacing: -.015em; color: var(--lr-encre);
}
#lr-pourquoi h2.lr-h2 { margin-bottom: 3rem; }
#lr-faq h2.lr-h2 { margin-bottom: 2rem; }

.lr-lead p { margin: 0 0 1rem; font-size: 1.1875rem; line-height: 1.65; color: var(--color-text, #4B5563); text-wrap: pretty; }
.lr-lead p:last-child { margin-bottom: 0; }
.lr-note p { margin: .875rem 0 0; font-size: .875rem; color: var(--color-muted, #6B7280); }

.lr-pillar h3 {
  margin: 0 0 .75rem; padding-top: 1rem;
  border-top: 3px solid var(--lr-indigo);
  font-size: 1.125rem; font-weight: 700; color: var(--lr-encre);
}
.lr-pillar p:last-child { margin-bottom: 0; }
.lr-narrow { max-width: 800px; }

/* --------------------------------------------------------------------------
   2. Bouton — variante jaune.

   ⚠ Spécificité `.lr-cta.btn` et non `.lr-cta` seule : le moteur pose
   `btn btn-primary` en classes de base et ne sait pas les retirer. Une simple
   classe utilitaire concurrente ne gagnerait que par l'ordre du fichier
   Bootstrap, ce qui n'est pas une garantie.
   -------------------------------------------------------------------------- */
.lr-cta.btn {
  background-color: var(--lr-jaune);
  border-color: var(--lr-jaune);
  color: var(--lr-encre);
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: .5rem;
}
.lr-cta.btn:hover, .lr-cta.btn:focus-visible {
  background-color: var(--lr-jaune-fonce);
  border-color: var(--lr-jaune-fonce);
  color: var(--lr-encre);
}
.lr-cta.btn:focus-visible { outline: 3px solid rgba(30,30,30,.35); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. #lr-hero — champ « introduction » de la page d'accueil.

   C'est le seul endroit du site rendu HORS conteneur : la bande y est
   réellement pleine largeur, sans artifice. La colonne reprend elle-même la
   largeur de lecture de 1200 px.
   -------------------------------------------------------------------------- */
#lr-hero {
  background: var(--lr-hero-bg);
  border-bottom: 1px solid #E7E7FA;
  padding: 5rem 0 4.5rem;
}
.lr-hero-col { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.lr-hero-col > .lr-eyebrow,
.lr-hero-col > h1,
.lr-hero-col > .lr-lead,
.lr-hero-col > .lr-note { max-width: 800px; margin-left: auto; margin-right: auto; }

.lr-shot.img-fluid {
  display: block; width: 100%; max-width: 1060px;
  margin: 3.5rem auto 0;
  border: 1px solid #E0E0F2; border-radius: .75rem; background: #fff;
  box-shadow: 0 18px 40px -18px rgba(79,70,229,.28);
}

/* --------------------------------------------------------------------------
   4. Sections du champ « content » (dans le conteneur 1200 px)
   -------------------------------------------------------------------------- */
#lr-grille { padding: 5rem 0; }
#lr-pourquoi { padding: 5rem 0 4rem; }
#lr-faq { padding: 0 0 5rem; }

.lr-proscons { margin-top: 3rem; }

/* Bande grise pleine largeur simulée : le conteneur borne à 1200 px, on en
   ressort par des marges négatives calées sur la fenêtre. */
#lr-comparatif {
  background: var(--color-bg-alt, #F9FAFB);
  border-top: 1px solid #EFF0F3;
  border-bottom: 1px solid #EFF0F3;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 5rem calc(50vw - 50%);
}

/* Tableau comparatif — bloc `html`, faute de bloc « tableau » au catalogue.
   C'est le seul endroit de la page qui n'est pas éditable à la souris. */
.lr-compare {
  margin-top: 2.5rem;
  background: #fff;
  border: 1px solid var(--lr-trait);
  border-radius: .75rem;
  overflow: hidden;
}
.lr-compare table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9375rem; }
.lr-compare th, .lr-compare td {
  padding: 1.25rem 1.5rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid #F0F1F4;
}
.lr-compare thead th {
  padding: 1.125rem 1.5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted, #6B7280);
}
.lr-compare thead th.lr-col-us {
  font-size: 1rem; font-weight: 800; letter-spacing: 0;
  text-transform: none; color: var(--lr-indigo);
}
.lr-compare .lr-col-us { background: #F7F7FE; }
.lr-compare tbody th { width: 22%; font-weight: 700; color: var(--lr-encre); }
.lr-compare tbody td { color: #374151; }
.lr-compare tbody td.lr-col-them { color: var(--color-muted, #6B7280); }
.lr-compare tbody tr:last-child th,
.lr-compare tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 767.98px) {
  .lr-compare { overflow-x: auto; }
  .lr-compare table { min-width: 620px; }
}

/* --------------------------------------------------------------------------
   5. #lr-cta-final — bande indigo pleine largeur simulée
   -------------------------------------------------------------------------- */
#lr-cta-final {
  background: var(--lr-indigo);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 4.5rem calc(50vw - 50%);
  align-items: center;
}
#lr-cta-final h2.lr-h2 { color: #fff; margin-bottom: .875rem; }
#lr-cta-final .lr-lead p { color: #DEDCFB; }
#lr-cta-final .lr-note p { color: #C9C6F8; }
.lr-cta-col { text-align: center; }

@media (min-width: 768px) {
  .lr-cta-col { text-align: right; }
}

/* --------------------------------------------------------------------------
   6. Contrastes vérifiés sur fond réel
   #4F46E5 sur #F4F4FE : 6,6:1   |   #1E1E1E sur #FEC90C : 11,9:1
   #4B5563 sur #FFFFFF : 7,6:1   |   #DEDCFB sur #4F46E5 : 5,4:1
   -------------------------------------------------------------------------- */