.ph-v4-exact{font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:normal;color:#0b124b;-webkit-font-smoothing:antialiased}.ph-v4-exact h1,.ph-v4-exact h2,.ph-v4-exact h3,.ph-v4-exact strong,.ph-v4-exact b{font-weight:700}.ph-v4-exact img,.ph-v4-exact svg{display:inline;vertical-align:baseline}.ph-v4-exact img{max-width:none}.ph-v4-exact .ico{vertical-align:middle}.ph-v4-exact a{color:inherit;text-decoration:none}.ph-v4-exact :focus-visible{outline:2px solid #633cff;outline-offset:3px}.ph-v4-exact .empty-owner{padding:24px;border:1px solid #e5e6fa;border-radius:13px;background:#f7f6ff;color:#53639f;grid-column:1/-1}.ph-v4-exact .resume-item .bar{max-width:100%}.ph-v4-exact .resume-item>div{min-width:0} /* ───────────────────────────────────────────────────────────── [SQA-7674] Correctifs d'intégration au site hôte — 18/09/2026 Le header du site est en position:fixed (81px, z-index 50) et le Hub démarre à top:0 : le H1 du hero passait DERRIÈRE le header. Correctif de mise en page uniquement — aucune règle du template R4 n'est modifiée, aucune couleur, aucune typographie. ───────────────────────────────────────────────────────────── */ .ph-v4-exact{--edtech-site-header-h:81px;padding-top:var(--edtech-site-header-h)} @media (max-width:768px){.ph-v4-exact{--edtech-site-header-h:81px}} /* ─── [SQA-7674] Respiration + alignement des CTA — 18/09/2026 ─── Demande Boss : interlignage trop serré, et les CTA des cartes univers n'étaient pas à la même hauteur (592px vs 608px selon que la description tient sur 1 ou 2 lignes). */ /* 1. RESPIRATION — interlignage seul. Aucune taille de police, aucune marge, aucune couleur touchee. Les selecteurs reprennent la specificite de styles.css (2 classes) : isolation.css etant charge APRES, il emporte les egalites sans avoir besoin de !important. */ .ph-v4-exact{line-height:1.6} .ph-v4-exact p,.ph-v4-exact li,.ph-v4-exact dd{line-height:1.6} .ph-v4-exact .hero p,.ph-v4-exact .catalogue-hero p{line-height:1.6} .ph-v4-exact .story-list-hero p,.ph-v4-exact .featured-resume p{line-height:1.6} .ph-v4-exact .collection-hero p{line-height:1.6} .ph-v4-exact .card p{line-height:1.5} .ph-v4-exact .universe p{line-height:1.5} .ph-v4-exact .hero h1,.ph-v4-exact .catalogue-hero h1{line-height:1.12} .ph-v4-exact .hero h2,.ph-v4-exact .catalogue-hero h2{line-height:1.32} .ph-v4-exact .card h3{line-height:1.3} .ph-v4-exact h1{line-height:1.12} .ph-v4-exact h2{line-height:1.32} .ph-v4-exact h3,.ph-v4-exact h4{line-height:1.35} .ph-v4-exact .cap,.ph-v4-exact small,.ph-v4-exact .muted{line-height:1.55} /* 2. CTA DES CARTES UNIVERS — tous collés au bas de leur carte */ .ph-v4-exact .universe-grid>.universe{display:flex;flex-direction:column} .ph-v4-exact .universe-grid>.universe>div{display:flex;flex-direction:column;flex:1 1 auto} .ph-v4-exact .universe-grid>.universe>div>b{margin-top:auto} /* ═══ 3. RESPIRATION ENTRE LES BLOCS — spec Boss « 1a », 18/09/2026 ═══ Echelle a 4 crans : 16 / 24 / 40 / 72. Regle : l'ecart ENTRE deux blocs vaut au moins le DOUBLE de l'ecart DANS un bloc. Avant : 13px dehors / 9px dedans = 1,4x → tout a plat. Apres : 52px dehors / 24px dedans (Boss 19/09, etait 72) → la hierarchie se voit. Specificite alignee sur styles.css (0,0,2,0) et au-dela ; isolation.css etant charge APRES, il emporte sans !important. */ .ph-v4-exact{--ph-s1:16px;--ph-s2:24px;--ph-s3:40px;--ph-s4:52px} /* 3.1 ECART ENTRE LES GRANDS BLOCS — etait 13px partout */ .ph-v4-exact .wrap>.section,.ph-v4-exact .wrap>.resume{margin-top:var(--ph-s4)} .ph-v4-exact .wrap>:first-child{margin-top:56px} .ph-v4-exact .wrap>:last-child{margin-bottom:80px} /* 3.2 TITRE DE SECTION → SON CONTENU — etait 9px (section) / 8px (panneau) */ .ph-v4-exact .section-head{margin-bottom:var(--ph-s2)} .ph-v4-exact .resume-head{margin-bottom:var(--ph-s1)} /* 3.3 GAP DES GRILLES — etaient 14 / 18 / 13 */ .ph-v4-exact .universe-grid{gap:20px} .ph-v4-exact .collection-row{gap:20px} .ph-v4-exact .resume-row{gap:20px} /* 3.4 PANNEAU « Pour commencer » — etait 10px 14px */ .ph-v4-exact .resume{padding:28px} /* 3.5 MOBILE — ecrans plus courts : ecarts de section divises par ~2. L'ecart interne descend aussi (16), sinon le rapport du double casse. */ @media(max-width:720px){ .ph-v4-exact .wrap>.section,.ph-v4-exact .wrap>.resume{margin-top:var(--ph-s3)} .ph-v4-exact .wrap>:first-child{margin-top:var(--ph-s3)} .ph-v4-exact .wrap>:last-child{margin-bottom:48px} .ph-v4-exact .section-head{margin-bottom:var(--ph-s1)} .ph-v4-exact .resume{padding:20px} } /* ═══ 4. SOUS-HUBS — meme rythme que la home. Boss 19/09/2026 ═══ Concerne : immersifs · stories · worldmaps · fiches · exercices · jeux-outils · jeux-educatifs · videos. Ils partagent le conteneur .wrap avec la home : les 72px entre sections leur etaient DEJA appliques. Restaient trois coutures a 8/9/10px, propres aux sous-hubs : hero -> barre de filtres (.chips) : 8px .chips -> .intro : 9px dernier bloc -> bandeau : 10px Les deux premieres (.chips + .intro) forment l'EN-TETE de la page : elles restent proches l'une de l'autre (24px) et c'est le groupe entier qui prend ses 72px avant la premiere section. Le premier et le dernier ecart sont desormais traites au niveau .wrap (bloc 3), donc ils valent 56px et 80px ici aussi. */ .ph-v4-exact .wrap>.intro{margin-top:var(--ph-s2)} .ph-v4-exact .intro{padding:var(--ph-s1) var(--ph-s2)} /* 4.1 grilles de listing : meme gap que les grilles de la home (etaient 13 et 12) */ .ph-v4-exact .grid6,.ph-v4-exact .grid4{gap:20px} @media(max-width:720px){ .ph-v4-exact .wrap>.intro{margin-top:var(--ph-s1)} .ph-v4-exact .intro{padding:var(--ph-s1)} } /* ═══ 5. HERO — la boite etait rigide, elle devient un plancher ═══ styles.css pose .hero{height:246px;overflow:hidden}. En aerant l'interlignage (bloc 2), le contenu du hero a grandi d'environ 14px (h1 +5,3 · h2 +2,9 · deux lignes de p +6,4) et le bouton « Explorer » s'est retrouve COUPE par le bas du hero sur les huit sous-hubs. Mesure : bouton a +14px sous le bord, contre -9px avec l'interlignage d'origine. Constate a l'oeil sur une capture, PAS par les mesures : les controles de debordement regardaient la largeur de page, et une boite en overflow:hidden ne deborde jamais — elle coupe en silence. Correctif : 246px devient un minimum, le hero grandit si son contenu le demande, et hero-copy retrouve en bas la meme respiration qu'en haut. */ .ph-v4-exact .hero,.ph-v4-exact .catalogue-hero{height:auto;min-height:246px} .ph-v4-exact .hero-copy,.ph-v4-exact .catalogue-hero>div{padding-bottom:25px} /* ═══ 6. HERO DES COLLECTIONS — meme boite rigide, meme remede ═══ .collection-hero fait height:290px (480px en mobile) + overflow:hidden. Mesure avant toute intervention de notre part : il coupait DEJA 84px de son propre contenu en mobile — du texte invisible pour tout visiteur, bug d'origine du gabarit. Notre interlignage a porte la coupe a 108px en mobile et l'a fait apparaitre en desktop (0 -> 5px). On corrige les deux d'un coup : la hauteur devient un plancher. */ .ph-v4-exact .collection-hero{height:auto;min-height:290px} @media(max-width:720px){ .ph-v4-exact .collection-hero{height:auto;min-height:480px} } /* ═══ 7. ACCESSIBILITE — recette a 6 agents du 19/09/2026 ═══ */ /* 7.1 CONTRASTE DES CTA « Explorer » — 5 des 6 sous le seuil AA. Mesure (blanc sur accent, texte 11px gras, seuil requis 4.5:1) : Immersifs 5.73 OK · WorldMaps 4.22 · Stories 3.78 · Fiches 2.40 · Exercices 2.11 · Jeux & Outils 1.76. Du blanc sur orange clair a 1.76:1 en 11px, pour des collegiens. L'accent est pose EN INLINE sur chaque carte (style="--accent:#xxx"), donc on cible chaque univers sans toucher a son identite coloree : le fond ne bouge pas, c'est l'encre qui change. Seul WorldMaps resiste — ni le blanc (4.22) ni une encre sombre (4.31) ne passent : son fond est assombri de 10%, ecart invisible a l'oeil, 4.85:1 au final. */ .ph-v4-exact .universe[style*="#77a7ff"] b, .ph-v4-exact .universe[style*="#28ca91"] b, .ph-v4-exact .universe[style*="#ffb532"] b{color:#0d1236} .ph-v4-exact .universe[style*="#1874ff"] b{background:#176aea} /* Stories : CTA en BLANC (demande Boss 19/09). Le blanc sur #ee27b1 tombe a 3.78:1 ; le rose passe a #d3239d (85% de la teinte d'origine) et le blanc remonte a 4.67:1. L'ecart de teinte est imperceptible, le blanc est garde. */ .ph-v4-exact .universe[style*="#ee27b1"] b{color:#fff;background:#d3239d} /* attendu : Stories 4.81 · Fiches 7.57 · Exercices 8.60 · Jeux & Outils 10.29 · WorldMaps 4.85 · Immersifs inchange 5.73 */ /* 7.2 FOCUS CLAVIER INVISIBLE sur le champ de recherche — 5 routes. Cause exacte : isolation.css porte deja un anneau global `.ph-v4-exact :focus-visible` (specificite 0,0,2,0), mais styles.css pose `.ph-v4-exact .searchbar input{outline:0}` (0,0,2,1) qui le bat d'un cran. Le trou ne concerne donc QUE ce champ — d'ou les 5 routes constatees, celles qui portent une barre de recherche. Une seule regle suffit, a specificite superieure (0,0,3,1). */ .ph-v4-exact .searchbar input:focus-visible{outline:3px solid #2d31e6;outline-offset:2px} /* ═══ 8. DEBORDEMENT HORIZONTAL ENTRE 721px ET 1100px — recette 19/09 ═══ Constate a 768px : /catalogue deborde de 485px (l'onglet « Videos » devient inatteignable) et /collection-univers de 283px (l'etape 5 du parcours devient invisible). Aucun scroll ne permet d'y acceder. Cause : styles.css porte DEJA les bonnes regles — .quick-filters et .cat-tabs en overflow-x:auto, .path-row en flex defilant, .path-item a min-width — mais toutes dans @media(max-width:720px). Or la mise en page de bureau casse des ~721px. Le correctif du vendor est juste pose un palier trop bas ; on le remonte au palier 1100px qu'il utilise deja pour ses autres adaptations. Rien d'invente : ce sont SES valeurs. NB : un defaut invisible au test de scrollWidth de documentElement — il n'apparait que sur document.body.scrollWidth. */ @media(max-width:1100px){ .ph-v4-exact .quick-filters,.ph-v4-exact .cat-tabs{overflow-x:auto} .ph-v4-exact .quick-filters select{min-width:180px} .ph-v4-exact .path-row{display:flex;overflow-x:auto} .ph-v4-exact .path-item{min-width:245px} } /* ═══ 9. TYPOGRAPHIE — Boss 19/09/2026 ═══ styles.css impose font-family:Arial,Helvetica,sans-serif sur .ph-v4-exact. On aligne le Hub sur la typographie du reseau, servie par next/font (auto-hebergee, aucune requete externe cote visiteur). Le selecteur couvre aussi les elements de formulaire, qui n'heritent PAS de la police de leur parent par defaut. */ .ph-v4-exact, .ph-v4-exact input,.ph-v4-exact select,.ph-v4-exact textarea,.ph-v4-exact button{ font-family:var(--font-jakarta),var(--font-inter),ui-sans-serif,-apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif } /* ═══ 10. BLOC « A LA UNE » — les trois visuels manquaient ═══ La maquette (01_Maquettes) montre trois cartes avec une image de fond ; le rendu servait des aplats sans aucune image. Le pack porte desormais le fichier dans une variable --alaune sur chaque carte ; ici on la peint, avec un voile degrade cote texte pour garder la lisibilite du titre par-dessus l'image. Le degrade d'origine du gabarit reste visible la ou l'image ne porte pas de texte. */ .ph-v4-exact .collection-row a[style*="--alaune"]{ background-image:linear-gradient(90deg,rgba(7,16,48,.90) 0%,rgba(7,16,48,.62) 46%,rgba(7,16,48,.18) 100%),var(--alaune); background-size:cover;background-position:center;background-repeat:no-repeat } /* ── BLOC 11 — pastilles de filtre : centrer le texte sur les deux axes ────────── `` et `