/* ═══ Vitrine — occuper l'écran (piste B) — 08.09.2026 ═══════════════════
   Feuille posée APRÈS marketing.css, validée par Johann le 08.09.2026 sur
   le local. Elle reste séparée pour se lire d'un bloc ; elle peut se fondre
   dans marketing.css sans rien changer.
   Ce qu'elle fait, et rien d'autre :
   1. la grille s'ancre aux bords (gouttière fixe, plafond 1760 px) au lieu
      d'une boîte de 1184 px centrée ; les entêtes posent le titre à gauche
      et le paragraphe calé au bord droit ; les grilles filent de bord à bord ;
   2. le héros prend sa place : titre à 84 px, cartouche V2 en haut à droite
      dans la zone calme du fond ;
   3. les blocs de vente (offre, souscription) vont de bord à bord, cadences
      en trois colonnes, récapitulatif fixe pendant la saisie ;
   Le motif Veine d'Or n'est pas touché : fond, trait, tranche, sceau et
   pied restent ceux de marketing.css, sans ajout ni prolongement.
   Aucune règle d'animation, de transition ni de couleur. Rien sous 1100 px :
   mobile et tablette gardent marketing.css tel quel.
   Vérifié par le banc navigateur du skill site-web-hbs et par
   scripts/banc_responsive.py avant livraison. ═══════════════════════════════════════════ */

@media (min-width: 1100px) {

  /* ——— 1 · La grille ——————————————————————————————————————— */
  .site-public {
    --gouttiere: clamp(32px, 4.5vw, 72px);
    --plafond: 1760px;
    --marge: max(var(--gouttiere), calc((100vw - var(--plafond)) / 2 + var(--gouttiere)));
  }
  .site-entete { max-width: none; padding: 0 var(--marge); }
  .site-section { max-width: none; padding: 96px var(--marge); }
  .site-section-teintee, .site-section.section-preuve, .site-cta, .hero-public {
    padding-left: var(--marge); padding-right: var(--marge);
  }
  .site-bande-metier { justify-content: flex-start; padding: 20px var(--marge); }
  .site-pied { max-width: none; padding: 32px var(--marge); }
  .site-pied-veine { max-width: none; margin: 0; }

  /* Entête de section : le titre à gauche, le paragraphe calé au bord droit. */
  .site-section-entete {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 64px; margin-bottom: 56px;
  }
  .site-section-entete h2 { font-size: clamp(36px, 4.2vw, 62px); }
  .site-section-entete > p { max-width: none; justify-self: end; font-size: 16px; }

  /* Les grilles à filets filent de bord à bord : le fil doré du parcours et
     le fil du temps de la feuille de route traversent tout l'écran. */
  .parcours-mydas, .feuille-route {
    margin-left: calc(-1 * var(--marge)); margin-right: calc(-1 * var(--marge));
    padding-left: var(--marge); padding-right: var(--marge);
  }

  /* ——— 2 · Le héros ——————————————————————————————————————— */
  .hero-public { min-height: 680px; padding-top: 72px; padding-bottom: 120px; }
  .hero-public-texte {
    max-width: none; display: grid;
    grid-template-columns: minmax(0, 860px) minmax(0, 1fr);
    column-gap: 48px; align-items: start;
  }
  .hero-public-texte > * { grid-column: 1; }
  .hero-public-texte .annonce-cartouche { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; }
  .hero-public-texte h1 { font-size: clamp(48px, 5.6vw, 84px); max-width: 14ch; margin-top: 20px; }
  .hero-public-intro { max-width: 620px; font-size: 18px; }

  /* ——— 3 · Les sections de l'accueil ————————————————————————— */
  .preuve-grille { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 72px; }
  .parcours-mydas article { min-height: 250px; padding: 32px 30px; }
  .fonctionnalites-public { gap: 18px; }
  .tarif-public-cadre { max-width: 1100px; }
  .site-cta { padding-top: 96px; padding-bottom: 96px; }
  .site-cta > div:not(.site-cta-picto) { max-width: 860px; }
  .site-cta h2 { font-size: clamp(36px, 4vw, 60px); }
  .site-cta p { max-width: 680px; font-size: 16px; }

  /* ——— 4 · La page Offres ———————————————————————————————————— */
  .offres-intro {
    max-width: none; margin: 0; padding: 64px var(--marge) 44px; text-align: left;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
    gap: 0 64px; align-items: end;
  }
  .offres-intro .retour-site { grid-column: 1 / -1; grid-row: 1; }
  .offres-intro .site-eyebrow { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .offres-intro h1 { grid-column: 1; grid-row: 3; max-width: 12ch; font-size: clamp(44px, 5.5vw, 84px); }
  .offres-intro > p { grid-column: 2; grid-row: 3; margin: 0 0 12px; max-width: none; justify-self: end; font-size: 16px; }
  .offre-unique, .souscription-apercu, .offres-aide { max-width: none; margin-left: var(--marge); margin-right: var(--marge); }
  .offre-unique { margin-bottom: 72px; }
  .souscription-apercu {
    grid-template-columns: minmax(0, 1fr) 440px; margin-bottom: 72px;
    background: linear-gradient(90deg, var(--surface) calc(100% - 440px), var(--vert-profond) calc(100% - 440px));
  }
  .souscription-contenu { padding: 56px 64px 56px 56px; }
  .souscription-contenu h2 { font-size: 42px; }
  .recapitulatif-offre { position: sticky; top: 0; align-self: start; background: transparent; padding: 56px 40px; }
  .choix-duree, .choix-mise-en-place { display: grid; gap: 12px; }
  .choix-duree { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choix-mise-en-place { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choix-duree > legend, .choix-mise-en-place > legend { grid-column: 1 / -1; }
  .offres-aide { margin-bottom: 0; }

  /* ——— 5 · La page Hôtel des ventes ————————————————————————— */
  .hv-fin { text-align: left; }
  .hv-fin > div {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
    gap: 20px 64px; align-items: end;
  }
  .hv-fin .site-eyebrow { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .hv-fin h2 { grid-column: 1; grid-row: 2 / span 2; margin: 0; font-size: clamp(40px, 4.6vw, 68px); max-width: 12ch; align-self: start; }
  .hv-fin p { grid-column: 2; grid-row: 2; margin: 0; max-width: none; justify-self: end; font-size: 16px; }
  .hv-fin .btn { grid-column: 2; grid-row: 3; justify-self: end; }
  .hv-deroule { gap: 18px; }
}