/* ========================================================================== plateforme-resa-pc.css — APERÇU PART 2 (revue CEO PC). PREMIER JET, direction à valider — NE PAS MERGER SANS VALIDATION DU CEO. -------------------------------------------------------------------------- Le tunnel B2C n'occupait qu'une colonne centrale étroite (deux grandes marges vides) sur PC. Ici il « s'approprie l'écran » : fond vert « Atelier vivant » pleine largeur, bannière plus grande, CTA « Réserver » mis en évidence, et l'étape créneaux passe en 2 colonnes (créneaux à droite, infos + Valider à gauche). Palette = vert plateforme (--pf-* / --pf-pin-*), JAMAIS VoxNote. PORTÉE : PC UNIQUEMENT (>=1024px) → MOBILE INCHANGÉ (aucune règle hors media query). Route-scopé via `.aa-resa-pc` posé sur la
de la fiche et de l'étape créneaux (aucune autre page touchée). Zéro emoji, zéro JS. Le contenu reste dans des cartes (--pf-surface) → contraste texte AA préservé ; le fond vert ne porte que le décor (aucun texte long dessus). ========================================================================== */ @media (min-width: 1024px) { /* --- 1. FOND VERT PLEINE LARGEUR derrière tout le tunnel ------------- */ body.pf-root:has(.aa-resa-pc) #pf-main { background: radial-gradient(1100px 640px at 10% -10%, color-mix(in srgb, var(--pf-brand-strong) 34%, transparent), transparent 62%), radial-gradient(940px 560px at 98% 2%, color-mix(in srgb, var(--pf-brand) 26%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--pf-brand) 10%, var(--pf-bg)), var(--pf-bg) 66%); } /* --- 2. Le tunnel s'élargit (fini la colonne étroite) --------------- */ body.pf-root:has(.aa-resa-pc) #pf-main > .pf-profil > .pf-container, body.pf-root:has(.aa-resa-pc) #pf-main > .pf-profil > .pf-container--narrow { max-width: min(1200px, 94vw); padding-block: 28px 44px; } /* Page CRÉNEAUX : le rectangle principal ENCORE plus large (retour CEO « juste un rectangle pas assez large »). :has ciblé sur la carte créneaux → n'élargit QUE cette étape (source plus tardive → gagne à spécificité égale). */ body.pf-root:has([data-testid="pf-creneaux-propositions"]) #pf-main > .pf-profil > .pf-container--narrow { max-width: min(1380px, 97vw); } /* La FICHE reste BORD À BORD (la bannière logo déborde) : padding interne géré par .pf-fiche-head / .pf-fiche-body. On garde juste l'ombre + le liseré verts qui la détachent du fond « Atelier vivant ». */ .aa-resa-pc .pf-fiche.pf-profil-card { padding: 0; box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--pf-brand) 55%, transparent), 0 2px 0 color-mix(in srgb, var(--pf-brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pf-brand) 18%, var(--pf-border)); } /* Cartes des ÉTAPES du tunnel (saisie, marque, réserver, créneaux, pré-diag) : elles n'ont PAS de bannière → le padding:0 de la fiche COLLAIT le contenu au bord (bug CEO : « le D de Décrivez touche le bord »). On leur rend un padding interne CONFORTABLE : le contenu ne touche JAMAIS le bord du cadre. */ .aa-resa-pc .pf-profil-card:not(.pf-fiche) { padding: 40px 44px 44px; box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--pf-brand) 55%, transparent), 0 2px 0 color-mix(in srgb, var(--pf-brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pf-brand) 18%, var(--pf-border)); } /* Le rectangle INTERNE (« Que se passe-t-il ? » et autres fieldsets) respire aussi : son contenu ne colle plus à ses propres bords. */ .aa-resa-pc .pf-profil-card:not(.pf-fiche) .pf-fieldset { padding: 22px 24px 24px; } /* --- 3. GRANDE BANNIÈRE (logo) : plus haute, teinte verte ----------- */ .aa-resa-pc .pf-fiche-cover { min-height: 200px; background: radial-gradient(700px 240px at 50% -40%, color-mix(in srgb, var(--pf-brand-strong) 40%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--pf-brand) 22%, var(--pf-surface)), var(--pf-surface)); display: flex; align-items: center; justify-content: center; } .aa-resa-pc .pf-fiche-logo-plaque, .aa-resa-pc .pf-fiche-medallion { transform: scale(1.18); } /* --- 4. CTA « Réserver une intervention » MIS EN ÉVIDENCE ----------- */ /* Le rail devient une carte verte franche, collée (sticky) et lumineuse. */ .aa-resa-pc .pf-fiche-reserve { border: 1.5px solid color-mix(in srgb, var(--pf-brand-strong) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--pf-brand) 12%, var(--pf-surface)), var(--pf-surface)); box-shadow: 0 18px 44px -24px color-mix(in srgb, var(--pf-brand) 60%, transparent); } .aa-resa-pc [data-testid="pf-reserver-link"] { font-size: 1.06rem; padding-block: 16px; box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--pf-accent) 65%, transparent); transition: transform .16s ease, box-shadow .16s ease; } .aa-resa-pc [data-testid="pf-reserver-link"]:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px color-mix(in srgb, var(--pf-accent) 78%, transparent); } /* --- 5. ÉTAPE CRÉNEAUX : 2 colonnes (créneaux à DROITE, Valider à GAUCHE) */ .aa-resa-pc [data-pf-choix] { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr); /* row-gap 0 : les 3 créneaux à droite occupent des rangées implicites (span large) ; un row-gap non nul multiplierait par le nombre de rangées vides et creuserait un grand vide. L'espacement vertical de la colonne gauche passe donc par les marges des éléments (bouton, hint), pas par le gap de grille. */ gap: 0 40px; align-items: start; } /* Les 3 créneaux occupent la colonne de droite, sur toute la hauteur. */ .aa-resa-pc [data-pf-choix] .pf-creneau-options { grid-column: 2; grid-row: 1 / span 30; gap: 16px; } /* Créneaux plus GRANDS (choix mis en avant). */ .aa-resa-pc .pf-creneau-card { padding: 20px 22px; border-radius: 16px; } .aa-resa-pc .pf-creneau-jour { font-size: 1.14rem; } .aa-resa-pc .pf-creneau-heure { font-size: 1rem; } /* Colonne GAUCHE = pavé réglementaire (rétractation 14 j) + Valider. Plus d'AIR entre le pavé et le bouton (retour CEO). */ .aa-resa-pc [data-pf-choix] > [data-testid="pf-creneaux-choix-submit"] { grid-column: 1; /* + les 16px de margin-bottom du pavé rétractation = ~28px d'air (CEO). */ margin-top: 12px; } .aa-resa-pc [data-pf-choix] .pf-retract, .aa-resa-pc [data-pf-choix] [data-testid="pf-retractation"] { grid-column: 1; } .aa-resa-pc [data-pf-choix] > .pf-field-hint { grid-column: 1; } /* L'intro + l'urgence restent pleine largeur au-dessus des 2 colonnes. */ .aa-resa-pc [data-testid="pf-creneaux-propositions"] .pf-profil-name { font-size: 1.9rem; } } /* ========================================================================== EXTENSION TUNNEL (revue CEO 2026-07-18) — « il faut s'accaparer tout l'écran » : le pleine largeur + fond vert s'applique à TOUTES les étapes du tunnel (résultats, marque, saisie, réserver), plus seulement fiche + créneaux. Le fond vert (§1) et l'élargissement des cartes .pf-profil (§2) ci-dessus couvrent DÉJÀ marque/saisie/réserver (ce sont des .pf-profil > .pf-container--narrow). Il reste : les RÉSULTATS (structure .pf-results, pas .pf-profil), les grilles 2-colonnes internes de saisie/réserver, et le recadrage des CTA « bloc » (sinon un bouton pleine largeur sur 1200px). PC UNIQUEMENT (>=1024px) → MOBILE INCHANGÉ (tout est sous @media). ========================================================================== */ @media (min-width: 1024px) { /* --- RÉSULTATS : la liste s'étale (fond vert derrière), pas une colonne. */ body.pf-root:has(.aa-resa-pc.pf-results) #pf-main > .pf-results > .pf-container { max-width: min(1320px, 95vw); padding-block: 8px 12px; } /* Barre de recherche : carte franche posée sur le vert (teinte + relief). */ .aa-resa-pc.pf-results .pf-results-bar { border-color: color-mix(in srgb, var(--pf-brand) 20%, var(--pf-border)); box-shadow: 0 16px 44px -28px color-mix(in srgb, var(--pf-brand) 55%, transparent); } /* Grille de cartes : 2 à 4 colonnes selon la largeur (base plus large). */ .aa-resa-pc.pf-results .pf-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; } /* --- SAISIE : description (large) | photos, CÔTE À CÔTE (plus d'air, on exploite la surface). Le wrapper .pf-saisie-cols est un bloc transparent en mobile (fieldset en flux normal) → mobile INCHANGÉ ; grid en PC seul. */ .aa-resa-pc .pf-saisie-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4px 34px; align-items: start; } .aa-resa-pc .pf-saisie-cols > .pf-field { min-width: 0; margin: 0; } /* La zone de texte respire (colonne large) + s'aligne en hauteur aux photos. */ .aa-resa-pc [data-testid="pf-saisie"] .pf-textarea { min-height: 172px; } /* --- RÉSERVER : panne (gauche) | coordonnées + compte (droite). */ .aa-resa-pc .pf-resa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 34px; align-items: start; } .aa-resa-pc .pf-resa-col { min-width: 0; display: flex; flex-direction: column; gap: 22px; } .aa-resa-pc .pf-resa-col > .pf-fieldset, .aa-resa-pc .pf-resa-col > .pf-auth-connecte { margin: 0; } /* --- CTA « bloc » recadré : un bouton pleine largeur sur ~1200px est disgracieux → on le centre à une largeur lisible (le hint suit, cf. B3). */ .aa-resa-pc [data-testid="pf-saisie-form"] > .pf-btn--block, .aa-resa-pc [data-testid="pf-reservation-form"] > .pf-btn--block, .aa-resa-pc [data-testid="pf-creneaux-lieu-form"] > .pf-btn--block, .aa-resa-pc .pf-marque-form > .pf-btn--block { /* display:flex (block-level) : un inline-flex ne se centre PAS par margin:auto — sans ça le bouton capé reste collé à gauche. */ display: flex; max-width: 540px; margin-inline: auto; } } /* Sobriété / accessibilité : pas d'animation de survol en reduced-motion. */ @media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .aa-resa-pc [data-testid="pf-reserver-link"] { transition: none; } .aa-resa-pc [data-testid="pf-reserver-link"]:hover { transform: none; } }