/* ───────────────────────────────────────────────────────────────────────────── Couche de /legal. La vue charge app.css.php, puis views.view.landing.v2.css, puis views.view.landing.next.css, puis ce fichier. Elle porte donc tout le vocabulaire des landings — hero, .section, .easy-card, .lv-eyebrow, boutons — et il ne reste ici que ce que les landings n'ont pas : une barre de documents, de la prose juridique longue, un tableau, un sommaire. Tout est préfixé .landing-legal : rien ne peut atteindre une autre page. ───────────────────────────────────────────────────────────────────────────── */ /* La coquille des landings coupe ce qui deborde avec overflow:hidden — ce qui fait d'elle un conteneur de defilement, et une barre position:sticky posee dedans colle a ELLE plutot qu'a la fenetre : elle s'en va avec le texte. app.css.php a deja reglé le meme probleme sur (voir le commentaire « clip, not hidden » ligne 139) ; on applique le meme remede a la coquille de cette page, la seule qui contienne des elements collants. */ .wrapper.landing-legal{overflow-x:clip;overflow-y:visible} /* Hero ---------------------------------------------------------------------- Une seule colonne. La grille à deux colonnes des landings existe pour loger une capture de l'application ; ici il n'y en a pas, et un titre de trois mots étalé sur 1.12fr laisserait la moitié de l'écran vide. */ /* Le hero et la carte du document sont bornes a la meme largeur ET a la meme gouttiere : le titre de la page et le bord de la carte tombent sur la meme verticale a toutes les tailles. Le hero du theme a sa propre gouttiere (jusqu'a 40px) la ou la section du document en a une autre, plus la gouttiere de 12px de .container-fluid qui n'entoure que le document : le titre et la carte ne tombaient jamais sur la meme verticale. Le hero reprend ici exactement la meme suite — 12px de gouttiere, puis la meme mesure et la meme marge. */ .landing-legal .legal-hero{padding-inline:12px} .landing-legal .legal-hero .lv-hero-inner{max-width:1180px;padding-inline:clamp(16px,4vw,32px)} .landing-legal .legal-hero .lv-h1{max-width:20ch} .landing-legal .legal-hero .lv-sub{max-width:58ch;margin-bottom:0} /* Barre des documents ------------------------------------------------------- Six pastilles de verre, celle du document ouvert cerclée de lime — l'état « courant » a déjà cette couleur sur la feuille de route d'« À propos », il ne s'en invente pas une autre ici. Elle est collante sous la barre du site : les six documents sont le seul moyen de circuler dans la page, et ils s'échappaient vers le haut dès la première ligne lue. */ .landing-legal .legal-docnav{ /* Un pixel sous la barre du site plutot qu'a sa hauteur exacte : a l'arrondi pres, une ligne de texte se glissait dans l'interstice. */ position:sticky;top:calc(var(--coach-nav-h, 76px) - 1px);z-index:1020; margin:0 auto;padding:10px 0; transition:padding .18s ease, background .2s ease; } /* Tant qu'on n'a pas defile, la barre ne recouvre rien : elle reste posee sur le fond a vagues comme le hero. Elle ne se peint qu'au moment ou du texte commence a passer dessous — sinon c'est une bande noire en travers de la page des le premier coup d'oeil. Et quand elle se peint, elle se peint d'un bord a l'autre. Le fond s'arretait aux 12 px de padding du .container-fluid de Bootstrap : deux lisérés de page restaient visibles a gauche et a droite, et une bande presque pleine largeur se lit comme un defaut d'alignement, pas comme un choix. Une capsule epousant les pastilles a ete essayee — plus proche du langage de la page, faite de pastilles et de cartes arrondies. Elle ne tient pas : le texte defile alors DE PART ET D'AUTRE d'elle, a la meme hauteur, et passe en clair a cote d'un objet cense le masquer. Une barre collante posee sur du texte qui defile doit couvrir toute la largeur, sinon elle ne couvre rien. Le debordement se fait en pourcentage du conteneur et non par une marge negative fixe : le padding de Bootstrap peut changer, la moitie de la fenetre non. .wrapper.landing-shell et body sont en overflow-x:clip, donc les quelques pixels d'une barre de defilement classique sont rognes plutot que de fabriquer un defilement horizontal. */ .landing-legal .legal-docnav.is-condensed{ margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); background:linear-gradient(180deg, rgba(4,10,31,.97), rgba(4,10,31,.86)); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 10px 30px -18px rgba(0,0,0,.9); } .landing-legal .legal-docnav-list{ display:flex;flex-wrap:wrap;justify-content:center;gap:8px; margin:0;padding:0;list-style:none; } .landing-legal .legal-docnav .nav-item{margin:0} .landing-legal .legal-docnav .nav-link{ display:inline-flex;align-items:center;gap:9px; padding:9px 15px;border-radius:100px; border:1px solid var(--glass-b);background:rgba(255,255,255,.04); color:rgba(236,243,255,.82);font-size:13.5px;font-weight:700;letter-spacing:.01em; text-decoration:none;white-space:nowrap; transition:color .18s, background .18s, border-color .18s, transform .12s; } .landing-legal .legal-docnav .nav-link i{font-size:13px;color:var(--easyidp-cyan);line-height:1} .landing-legal .legal-docnav .nav-link:hover{ color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22); transform:translateY(-1px); } .landing-legal .legal-docnav .nav-link.active{ color:var(--easyidp-lime); background:rgba(154,245,87,.10);border-color:rgba(154,245,87,.45); } .landing-legal .legal-docnav .nav-link.active i{color:var(--easyidp-lime)} .landing-legal .legal-docnav .nav-link:focus-visible{ outline:2px solid var(--easyidp-cyan);outline-offset:2px; } /* Condensée une fois dans le texte : les libellés tombent, les icônes restent. font-size:0 plutôt que display:none — le nom du document reste dans l'arbre d'accessibilité, un lecteur d'écran annonce toujours « Politique de confidentialité » et non « lien ». */ .landing-legal .legal-docnav.is-condensed{padding:5px 0} .landing-legal .legal-docnav.is-condensed .nav-link{gap:0;padding:9px 13px} .landing-legal .legal-docnav.is-condensed .legal-docnav-l{font-size:0} @media (prefers-reduced-motion: reduce){ .landing-legal .legal-docnav, .landing-legal .legal-docnav .nav-link{transition:none} } /* Sur téléphone les six pastilles libellées tenaient sur trois lignes et mangeaient un tiers de l'écran avant le premier mot du document : ce sont des icônes dès le départ, une rangée, chacune dans un carré de 44 px — la cible tactile confortable minimale. */ @media (max-width:767.98px){ .landing-legal .legal-docnav-list{flex-wrap:nowrap;justify-content:space-between;gap:4px} .landing-legal .legal-docnav .nav-link{ width:44px;height:44px;padding:0;gap:0;justify-content:center; } .landing-legal .legal-docnav .legal-docnav-l{font-size:0} .landing-legal .legal-docnav .nav-link i{font-size:15px} } /* Document + sommaire ------------------------------------------------------- Le sommaire ne s'ouvre une colonne qu'à partir de 1100 px : en dessous, le texte doit garder toute la largeur, et la barre des documents suffit à circuler. */ .landing-legal .legal-doc{ display:grid;grid-template-columns:minmax(0,1fr);gap:26px; max-width:1180px;margin-inline:auto;align-items:start; padding-inline:clamp(16px,4vw,32px); } @media (min-width:1100px){ .landing-legal .legal-doc{grid-template-columns:minmax(0,1fr) 236px} } /* Le panneau est opaque, pas de verre : la vague lime du fond passait derrière les paragraphes et un texte juridique ne se lit pas sur du vert. */ .landing-legal .legal-panel{ background:linear-gradient(180deg, rgba(10,22,62,.93), rgba(7,17,50,.90)); border:1px solid var(--glass-b);border-radius:24px; box-shadow:0 30px 70px -40px rgba(0,0,0,.9); } .landing-legal .legal-panel .card-body{padding:clamp(20px,3.2vw,40px)} /* Prose --------------------------------------------------------------------- Bornée à 74 caractères. Elle courait sur toute la largeur de la fenêtre : plus de 1300 px sur un portable, soit le double de ce qu'un œil suit sans perdre la ligne suivante. */ .landing-legal .legal-content{max-width:74ch;color:rgba(236,243,255,.86)} /* Titre du document : l'échelle des titres de section des landings (.lv-sec-h). Avant, c'était une pastille verte — le motif qu'« À propos » a justement abandonné parce que, répété, il cessait d'être une hiérarchie. */ .landing-legal .legal-content h2{ font-family:'Poppins',"Trebuchet MS",sans-serif;font-weight:800; font-size:clamp(24px,3vw,32px);line-height:1.15; color:var(--easyidp-white);margin:0 0 10px; /* app.css.php centre tous les h2 places dans une .section : le titre du document partait au milieu de la carte, seul element centre de la page. */ text-align:left; } /* La ligne de date suit toujours le titre dans les partiels : elle devient une étiquette discrète plutôt qu'un paragraphe de plus. */ .landing-legal .legal-content h2 + p{ display:inline-block;margin:0 0 26px;padding:5px 12px;border-radius:100px; border:1px solid var(--glass-b);background:rgba(255,255,255,.05); font-size:12.5px;color:var(--muted); } .landing-legal .legal-content h2 + p strong{color:rgba(236,243,255,.9);font-weight:700} /* Sections. Elles étaient en capitales cyan à 0.92rem — PLUS PETITES que le corps de texte qu'elles introduisaient. Un titre de section se lit comme un titre : plus gros que le texte, en blanc, avec un repère cyan sur le rail gauche pour qu'on les repère en survolant la page du regard. scroll-margin-top : la barre du site et celle des documents font ~130 px à elles deux ; sans cette marge, cliquer une entrée du sommaire dépose le titre dessous. */ .landing-legal .legal-content h3{ position:relative; font-family:'Poppins',"Trebuchet MS",sans-serif;font-weight:700; font-size:17px;line-height:1.35;letter-spacing:0;text-transform:none; color:var(--easyidp-white); margin:34px 0 12px;padding-left:16px;scroll-margin-top:150px; } .landing-legal .legal-content h3::before{ content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px; background:var(--easyidp-cyan);opacity:.75; } .landing-legal .legal-content h3:first-of-type{margin-top:6px} .landing-legal .legal-content p, .landing-legal .legal-content li{font-size:15.5px;line-height:1.75;color:rgba(236,243,255,.86)} .landing-legal .legal-content p + p, .landing-legal .legal-content li + li{margin-top:.55rem} .landing-legal .legal-content p{margin-bottom:0} .landing-legal .legal-content strong{color:#f6fbff;font-weight:700} .landing-legal .legal-content ul, .landing-legal .legal-content ol{margin:12px 0 0;padding-left:20px} .landing-legal .legal-content li::marker{color:var(--easyidp-cyan)} .landing-legal .legal-content a{color:var(--easyidp-cyan);text-decoration:underline;text-underline-offset:2px} .landing-legal .legal-content a:hover{color:var(--easyidp-lime)} /* Renvoi vers un autre document, et téléchargement du modèle parental : deux fins de document, deux traitements discrets. */ .landing-legal .legal-note{ margin-top:26px;padding-top:16px;border-top:1px solid var(--glass-b); font-size:13.5px;color:var(--muted); } .landing-legal .legal-download{margin-top:26px} /* Tableau des sous-traitants ------------------------------------------------ Le