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

   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.
   ========================================================================== */

/* ── Palette de marque Pinperf (section 06 de la planche) ──────────────────
   Les rapports de contraste sont ceux calculés par le graphiste, pas estimés.
   Ils redéfinissent aussi les variables du bundle Cms : cette feuille est
   chargée APRÈS `front.css`, donc son `:root` gagne. */
:root {
  --lr-bleu: #1237A3;          /* principale — blanc dessus 9,99:1 */
  --lr-bleu-fonce: #0A246A;    /* survol, actif — blanc dessus 14,25:1 */
  --lr-action: #F59E0B;        /* CTA — encre dessus 8,26:1 */
  --lr-action-fonce: #D97706;  /* survol CTA — encre dessus 5,57:1 */
  --lr-action-trait: #A67C00;  /* voir l'avertissement ci-dessous */
  --lr-encre: #111827;         /* texte courant — sur blanc 17,74:1 */
  --lr-gris: #667085;          /* texte secondaire — sur blanc 4,97:1 */
  --lr-trait: #E2E8F0;
  --lr-fond: #F8FAFC;
  --lr-hero-bg: #F1F5FD;

  /* Les variables du bundle Cms, réalignées sur la marque. */
  --color-primary: #1237A3;
  --color-secondary: #F59E0B;
  --color-tertiary: #111827;
  --color-text: #111827;
  --color-muted: #667085;
  --color-bg-alt: #F8FAFC;

  /* Les jetons des blocs du page builder. Sans eux, la FAQ, le sommaire et
     l'encadré gardent le violet de repli du bundle — #4F46E5, qui
     n'appartient pas à la marque. */
  --pb-accent: #1237A3;
  --pb-border: #E2E8F0;
  --pb-surface: #F8FAFC;
  --pb-text: #111827;
}

/* Le slogan de marque, dans le pied de page. En anglais et en capitales, tel
   qu'il figure dans le lockup — c'est la décision de marque. */
.lr-slogan {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lr-action);
  margin: .15rem 0;
}

/* Le logo Pinperf est un lockup : le pin, le monogramme ET le mot « Pin Perf ».
   Le gabarit du bundle pose systématiquement le nom de l'application à côté du
   logo — ce qui donne « Pin Perf Pinperf ». On masque le doublon plutôt que de
   changer le bundle : une application dont le logo est une marque seule a
   toujours besoin de ce nom. Le nom reste porté par l'`alt` de l'image. */
.front-navbar .navbar-brand img + span { display: none; }

/* 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-bleu); 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-bleu);
  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-action);
  /* ⚠ L'orange sur blanc ne fait que 2,15:1 : la surface ne se détache pas
     seule. La bordure #A67C00 monte à 3,82:1 et rend le bouton perceptible.
     Sur la bande bleue, elle ne gêne pas — l'orange y fait déjà 4,65:1. */
  border-color: var(--lr-action-trait);
  /* ⚠ Jamais de libellé blanc sur l'orange : 2,15:1. L'encre y fait 8,26:1. */
  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-action-fonce);
  border-color: var(--lr-action-trait);
  /* L'encre est conservée au survol : le blanc n'y ferait que 3,19:1. */
  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-bleu);
}
.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-bleu);
  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 de la charte Pinperf, calculés par le graphiste
   blanc sur #1237A3 ......... 9,99:1     #111827 sur #F59E0B ....... 8,26:1
   blanc sur #0A246A ........ 14,25:1     #F59E0B sur #1237A3 ....... 4,65:1
   #111827 sur blanc ........ 17,74:1     #F59E0B sur blanc ......... 2,15:1 ⚠
   #667085 sur blanc ......... 4,97:1     #A67C00 sur blanc ......... 3,82:1

   ⚠ La ligne qui compte : l'orange sur blanc ne passe pas. Un CTA posé sur du
   blanc porte donc toujours une bordure, jamais un aplat nu.
   -------------------------------------------------------------------------- */