/* Mise en page des pages de prestation (silo /consultant-seo-*, /seo-ecommerce, etc.)
   Nemo Ciment.

   S'appuie sur /assets/css/styles.css pour tout le socle : nav, footer, boutons .btn /
   .btn-primary / .btn-ghost, variables de couleur, `em` en Gasoek One, .wrap. Ce fichier ne
   redéfinit que ce qui est propre aux pages de prestation, sur le même principe que
   /realisations/case-study.css.

   Volontairement différent des études de cas : pas de comparateur avant/après, pas de fiche
   projet en colonne. Une seule colonne de lecture, une grille tarifaire, et une FAQ en
   <details> natif (aucun JS de page requis, contrairement à case-study.js).

   Usage : <link rel="stylesheet" href="/assets/css/landing.css"> après styles.css. */

/* `width: 100%` est indispensable ici, pas cosmetique, et `min-width: 0` seul ne suffit pas.
   styles.css met `body` en `display:flex; flex-direction:column` (pattern sticky-footer),
   donc chaque `.lp` est un element flex. Le `margin: 0 auto` qui centre le conteneur est fait
   de marges horizontales AUTOMATIQUES, et des marges auto desactivent l'etirement (stretch)
   d'un element flex sur son axe transversal : l'element retombe alors en dimensionnement
   `fit-content`, dont le plancher est la largeur min-content de son contenu. Les tableaux
   tarifaires portant `min-width:520px`, `main` restait bloque a 570px sur un ecran de 375px,
   le `overflow-x:auto` du conteneur de tableau ne s'enclenchait jamais, et c'est la PAGE
   ENTIERE qui debordait horizontalement.
   `width: 100%` impose la largeur du parent au lieu de la deduire du contenu ; le tableau
   scrolle alors a l'interieur de son conteneur, comme prevu. A repliquer sur toute nouvelle
   page du silo qui contiendrait un element large (tableau, <pre>, image hors flux). */
.lp { width: 100%; max-width: 820px; min-width: 0; margin: 0 auto; padding: 0 24px; }

/* --- hero avec image en pleine largeur --- */
/* `.lp-hero` ne porte PAS la classe `.lp` : c'est un enfant flex direct de `body`, sans
   marges auto ni max-width, donc il s'etire sur toute la largeur de l'ecran. Le texte, lui,
   est dans `.lp-hero-inner` qui porte `.lp` et reste borne a 820px. */
.lp-hero { position: relative; padding: 208px 0 72px; text-align: center; overflow: hidden; }
.lp-hero-media { position: absolute; inset: 0; z-index: 0; }
/* `picture` est un conteneur inline par defaut : sans ces regles il ne transmet pas la
   hauteur du bloc a l'image, et le `height: 100%` de l'img ne s'applique sur rien. */
.lp-hero-media picture { display: block; width: 100%; height: 100%; }
.lp-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
/* Voile sombre indispensable : sans lui le titre blanc devient illisible sur le ciel clair,
   et la bande photo se raccorde mal au fond noir du reste de la page. Le degrade finit sur
   `--bg` pour que la jointure basse soit invisible. */
.lp-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,6,.70) 0%, rgba(6,6,6,.34) 38%, rgba(6,6,6,.74) 78%, var(--bg) 100%);
}
.lp-hero-inner { position: relative; z-index: 1; }
/* Le voile ayant ete allege pour qu'on reconnaisse la Grand'Place, la lisibilite du texte
   repose sur ces ombres portees plutot que sur l'assombrissement de la photo. */
.lp-hero-inner h1 { text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6); }
.lp-hero-inner .lp-lead { text-shadow: 0 1px 12px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); color: #e4e4e8; }
/* Credit photo exige par la licence Unsplash. Place sous la barre de navigation fixe pour
   ne pas passer dessous. */
/* Pastille sombre plutot qu'un simple texte : le credit se retrouve tantot sur le ciel clair,
   tantot sur une facade, et une ombre portee seule ne suffisait pas a le rendre lisible. */
.lp-credit {
  /* 104px : la barre de navigation fixe descend a 91px en desktop (valeur mesuree), on se
     place franchement en dessous plutot qu'a la limite. */
  position: absolute; top: 104px; right: 20px; z-index: 2; margin: 0;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.4;
  color: rgba(255,255,255,.72);
  background: rgba(6,6,6,.42); border-radius: 999px; padding: 5px 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lp-credit a { color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 2px; }
.lp-credit a:hover { color: var(--pink); }
.lp-hero h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; margin: 0 0 18px; }
.lp-lead { font-size: 18.5px; color: #d0d0d4; line-height: 1.65; margin: 0 auto 26px; max-width: 660px; }
.lp-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* bandeau de preuve sous le hero */
.lp-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px auto 0; }
.lp-proof div { border: 1px solid rgba(34,197,94,.26); border-radius: 16px; padding: 22px 18px 20px; background: rgba(6,6,6,.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: center; }
.lp-proof b { display: block; font-family: var(--font-display); font-size: 30px; color: var(--ink); line-height: 1; }
.lp-proof span { display: block; margin-top: 10px; font-size: 13.5px; color: #b9b9c0; line-height: 1.45; }

/* --- corps --- */
.lp-body { margin: 76px auto 0; }
.lp-body section + section { margin-top: 62px; }
.lp-body h2 { font-size: clamp(26px, 3vw, 33px); margin: 0 0 18px; }
.lp-body h3 { font-size: 21px; margin: 32px 0 10px; color: var(--ink); }
.lp-body p { margin: 0 0 18px; color: #d0d0d4; font-size: 17px; line-height: 1.72; }
.lp-body strong { color: var(--pink); font-weight: 600; }
.lp-body a { color: var(--pink); }
.lp-body a:hover { text-decoration: underline; }
/* Un lien se distingue d'une mise en evidence : italique dans tout le texte courant.
   Les boutons du hero et le bandeau de credit gardent le romain. */
.lp-body p a, .lp-body li a, .lp-body dd a, .lp-body .acc-in a { font-style: italic; }
.lp-body ul.fancy { list-style: none; margin: 6px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.lp-body ul.fancy li { position: relative; padding-left: 30px; color: #d0d0d4; font-size: 16.5px; line-height: 1.6; }
.lp-body ul.fancy li::before { content: "✦"; position: absolute; left: 0; top: 2px; color: var(--pink); font-size: 14px; }

/* --- process en étapes numérotées --- */
.lp-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: st; }
.lp-steps li { counter-increment: st; position: relative; padding-left: 62px; }
.lp-steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--pink); border: 1px solid rgba(34,197,94,.32); border-radius: 999px; padding: 7px 12px; background: rgba(34,197,94,.08); }
.lp-steps h3 { margin: 4px 0 6px; font-size: 19px; }
.lp-steps p { margin: 0; font-size: 16.5px; }

/* --- grille tarifaire --- */
.lp-table-wrap { overflow-x: auto; margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.02); scrollbar-width: thin; scrollbar-color: rgba(34,197,94,.45) transparent; }
/* La barre de defilement interne apparait sur mobile (le tableau est plus large que l'ecran) :
   sans ca elle s'affiche en gris clair par defaut et tranche sur le fond sombre du site. */
.lp-table-wrap::-webkit-scrollbar { height: 8px; }
.lp-table-wrap::-webkit-scrollbar-track { background: transparent; }
.lp-table-wrap::-webkit-scrollbar-thumb { background: rgba(34,197,94,.4); border-radius: 999px; }
.lp-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(34,197,94,.6); }
.lp-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.lp-table th, .lp-table td { text-align: left; padding: 15px 18px; font-size: 16px; color: #d0d0d4; border-bottom: 1px solid rgba(34,197,94,.12); vertical-align: top; }
.lp-table thead th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.lp-table tbody tr:last-child th, .lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table tbody th { font-weight: 400; color: var(--ink); }
.lp-table .price { font-family: var(--font-display); color: var(--pink); font-size: 19px; white-space: nowrap; }
/* `.lp-body p` vaut (0,1,1) en specificite et l'emporterait sur un simple `.lp-note` (0,1,0) :
   les <span class="lp-note"> des cellules passaient, mais les <p class="lp-note"> repassaient
   en corps de texte. D'ou le selecteur explicite ci-dessous. */
.lp-note,
.lp-body p.lp-note { font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); line-height: 1.6; margin: 0 0 18px; }

/* --- encart mis en avant --- */
.lp-callout { border: 1px solid rgba(34,197,94,.32); border-radius: 18px; padding: 24px 26px; background: linear-gradient(180deg, rgba(34,197,94,.1), rgba(34,197,94,.02)); margin: 26px 0; }
.lp-callout p:last-child { margin-bottom: 0; }

/* --- FAQ en details natif, sans JS --- */
.lp-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lp-faq details { border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); }
/* Pas de `cursor` ici volontairement : styles.css donne le curseur vert personnalise a
   `a, button, label, summary...` sous `@media (pointer: fine)`, et un `cursor: pointer` pose
   ici (specificite 0,2,1) l'ecraserait. On laisse donc la regle globale s'appliquer. */
.lp-faq summary { list-style: none; padding: 17px 18px; font-family: var(--font-display); font-size: 18px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color .2s; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:hover, .lp-faq details[open] summary { color: var(--pink); }
.lp-faq summary .ico { flex: none; width: 22px; height: 22px; position: relative; }
.lp-faq summary .ico::before, .lp-faq summary .ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--violet); transform: translate(-50%, -50%); transition: transform .35s var(--ease-out); }
.lp-faq summary .ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.lp-faq details[open] summary .ico::after { transform: translate(-50%, -50%) rotate(0); }
.lp-faq .acc-in { padding: 0 18px 18px; color: #d0d0d4; font-size: 16px; line-height: 1.7; }
.lp-faq .acc-in p { margin: 0 0 12px; font-size: 16px; }
.lp-faq .acc-in p:last-child { margin-bottom: 0; }

/* --- CTA de fin --- */
/* Meme raison que `.lp` ci-dessus : marges horizontales auto sur un element flex, donc
   `width: 100%` pour ne pas dependre de la largeur du contenu. */
.lp-cta { width: 100%; max-width: 720px; margin: 66px auto 84px; padding: 34px 32px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(34,197,94,.08), transparent); text-align: center; }
.lp-cta p { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.lp-cta .sub { font-family: var(--font-body); font-size: 16px; color: var(--muted); margin-bottom: 20px; }


/* Les overrides responsive sont volontairement placés APRÈS toutes les règles non
   conditionnelles ci-dessus : une règle non conditionnelle placée plus bas dans le fichier
   gagnerait la cascade même à une largeur où le media query s'applique. */
@media (max-width: 900px) {
  .lp-hero { padding: 158px 0 52px; }
  /* Le hero depasse 1000px de haut sur mobile (accroche sur 8 lignes + 3 cartes empilees).
     Etirer la photo sur toute cette hauteur la zoome au point de la rendre meconnaissable,
     meme avec le recadrage portrait. On borne donc la bande photo au haut du hero : le
     degrade la fond dans le fond de page, et les cartes reposent sur du noir uni. */
  .lp-hero-media { bottom: auto; height: 620px; }
  .lp-hero-media img { object-position: 50% 40%; }
  /* La barre de navigation mesure 86px de haut sous 900px : en dessous de 98px le credit
     passe dessous. Valeur mesuree, pas estimee. */
  .lp-credit { top: 98px; right: 14px; font-size: 11px; padding: 4px 10px; }
  .lp-proof { grid-template-columns: 1fr; }

  /* Les tableaux tarifaires tiennent dans l'ecran plutot que de defiler lateralement :
     `min-width` retire, corps de texte et rembourrages reduits. Le scroll interne reste
     disponible en secours si un contenu plus large arrive un jour. */
  .lp-table { min-width: 0; }
  .lp-table th, .lp-table td { padding: 11px 8px; font-size: 13px; }
  .lp-table thead th { font-size: 11px; letter-spacing: .02em; }
  .lp-table .price { font-size: 14.5px; }
  .lp-table .lp-note { font-size: 11.5px; line-height: 1.35; }
  .lp-body { margin-top: 56px; }
  .lp-body section + section { margin-top: 48px; }
  .lp-cta { margin: 50px auto 64px; padding: 28px 22px; }
}

/* Tres petits ecrans (iPhone SE et Android d'entree de gamme, 320px de large) : a ce
   palier la premiere grille tarifaire debordait encore de 6px. Rembourrage et corps de
   texte resserres d'un cran de plus. Ce bloc doit rester APRES le media query 900px
   ci-dessus, sinon il ne l'emporte pas. */
@media (max-width: 400px) {
  .lp-table th, .lp-table td { padding: 10px 6px; font-size: 12.5px; }
  .lp-table thead th { font-size: 11px; letter-spacing: .01em; }
  .lp-table .price { font-size: 13.5px; }
  .lp-table .lp-note { font-size: 11px; }
}

/* ===================================================================
   Composants supplementaires du silo.
   Chaque page de prestation en utilise un jeu different, pour que les
   pages ne se ressemblent ni dans la structure ni a l'oeil.
   =================================================================== */

/* --- cartes en deux colonnes (causes, profils de clients) --- */
.lp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 10px 0 8px; padding: 0; list-style: none; }
.lp-cards > * { border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 20px; background: rgba(255,255,255,.02); }
.lp-cards h3 { margin: 0 0 8px; font-size: 18.5px; }
.lp-cards p { margin: 0; font-size: 15.5px; line-height: 1.65; }

/* --- blocs numerotes en gros chiffre (chantiers e-commerce) --- */
.lp-num { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: nb; }
.lp-num li { counter-increment: nb; position: relative; padding: 0 0 26px 0; border-bottom: 1px solid rgba(34,197,94,.12); margin-bottom: 26px; }
.lp-num li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.lp-num li::before { content: counter(nb); display: block; font-family: var(--font-display); font-size: 34px; line-height: 1; color: rgba(34,197,94,.55); margin-bottom: 10px; }
.lp-num h3 { margin: 0 0 8px; font-size: 20px; }
.lp-num p { margin: 0; font-size: 16.5px; }

/* --- lignes libelle / valeur (plateformes, zone) --- */
.lp-kv { margin: 10px 0 20px; padding: 0; }
.lp-kv dt { font-family: var(--font-display); font-size: 18px; color: var(--pink); margin: 20px 0 6px; }
.lp-kv dt:first-of-type { margin-top: 0; }
.lp-kv dd { margin: 0; font-size: 16.5px; line-height: 1.7; color: #d0d0d4; }

/* --- variante de voile pour une photo a ciel blanc (Douai) : le degrade standard
       laisse un fond trop clair derriere le titre. --- */
.lp-hero.voile-fort .lp-hero-media::after {
  background: linear-gradient(180deg, rgba(6,6,6,.80) 0%, rgba(6,6,6,.56) 38%, rgba(6,6,6,.84) 78%, var(--bg) 100%);
}

@media (max-width: 700px) {
  .lp-cards { grid-template-columns: 1fr; }
  .lp-num li::before { font-size: 28px; }
}

/* --- variante pour une photo trop chargee en details (capture d'ecran, texte dans
       l'image) : elle devient une texture au lieu de concurrencer le titre. Le leger
       agrandissement evite les bords transparents crees par le flou. --- */
.lp-hero.image-floue .lp-hero-media img { filter: blur(5px); transform: scale(1.06); }

/* Sous 340 px, le tableau a trois colonnes de la page e-commerce ne tient plus :
   on autorise le retour a la ligne dans la cellule de prix. Le montant lui-meme reste
   insecable grace aux espaces U+00A0 du HTML, seul un « dès » qui precede descend. */
@media (max-width: 340px) {
  .lp-table .price { white-space: normal; }
}