/* ============================================================ HOLANGCOURS : Tokens. SOURCE UNIQUE de vérité. Variables déclarées dans .hol-scope, JAMAIS dans :root (cohabitation avec euduc.com en production). Aucune couleur de marque hors de ce fichier. ============================================================ */ .hol-scope { /* Gouttière du site : marge horizontale de TOUTES les pages 100 px par défaut ; réduite sous 900 px pour tenir à 360 px. */ /* Marge horizontale du site. Une seule valeur, fluide : 100px sur grand écran, réduite d'elle-même jusqu'à 24px sur mobile (8vw). */ --hol-gutter: clamp(24px, 8vw, 100px); /* AIR VERTICAL D'UNE SECTION. Même principe que la gouttière, et pour la même raison : Jimmy, écran de téléphone en main, « il y a trop d'espace entre les sections, ça fait vide ». Les quatre-vingt-huit pixels dessinés pour un grand écran valaient aussi sur trois cent soixante-quinze, où ils font un tiers de la hauteur visible. La valeur descend donc d'elle-même à cinquante-deux, sans règle de média et sans qu'une page ait à le savoir. « dense » est la variante des sections qui s'enchaînent sans respiration. */ --hol-bloc: clamp(52px, 9vw, 88px); --hol-bloc-dense: clamp(40px, 6.6vw, 64px); /* Motif de fond des sections claires (dérivés de brand / brand-clair / accent-clair) Décoratif uniquement. Modifier ces trois valeurs suffit à régler le grain et les halos. */ --hol-motif-dot: rgba(62, 64, 149, .085); /* = --hol-brand à 8,5 % */ --hol-motif-halo-1: rgba(150, 152, 222, .20); /* = --hol-brand-clair à 20 % */ --hol-motif-halo-2: rgba(240, 152, 155, .12); /* = --hol-accent-clair à 12 % */ /* LE MÊME GRAIN, SUR FOND SOMBRE. Le point bleu à 8,5 % disparaît sur le bleu nuit : il faut de la lumière, pas de l'encre. Mêmes dessins, mêmes tailles, trois valeurs changées. Voir « .hol-grain--sombre ». */ /* 3,5 % et pas 9 : sur du bleu nuit, la lumière ressort bien plus que l'encre ne ressort sur du clair. À 9 % la grille se comptait point par point et prenait le pas sur la photo ; à 3,5 % elle ne se voit plus, elle se devine, et c'est tout ce qu'on lui demande. */ --hol-motif-dot-clair: rgba(255, 255, 255, .035); --hol-motif-halo-clair-1: rgba(150, 152, 222, .17); --hol-motif-halo-clair-2: rgba(240, 152, 155, .09); /* LE VERRE. Une carte posée sur une photo peut être une plaque opaque, ou une vitre dépolie qui laisse deviner ce qu'il y a dessous. La seconde se tient dans la page au lieu d'être collée dessus. Trois valeurs : la vitre, son bord, et la lumière qui court sur son arête haute. */ /* 93 % et pas 90 : sous les trois derniers pour cent, le texte gris des mentions passait à 4,4 contre 1 sur une photo sombre, c'est-à-dire sous le seuil de lisibilité. La vitre reste une vitre, elle est juste honnête. */ --hol-verre: rgba(255, 255, 255, .93); --hol-verre-bord: rgba(255, 255, 255, .60); --hol-verre-lueur: rgba(255, 255, 255, .85); --hol-verre-reflet: rgba(255, 255, 255, .38); /* Surfaces, */ --hol-surface-0: #EEF1F8; /* fond de page (le plus fréquent) */ --hol-surface-1: #FFFFFF; /* cartes et blocs */ --hol-surface-2: #FFFFFF; /* surélevé (menus, modales) + shadow */ --hol-surface-inverse: #1E2340; /* sections sombres, rares, intentionnelles */ /* LE MÊME MARINE, MAIS PAS TOUT À FAIT OPAQUE. Il ne sert qu'à une chose : le pied des cartes à photo de fond, où le texte blanc se lit sur un aplat. Jimmy : « ce bleu est trop compact ; baisse-le un peu pour que je voie légèrement ce qu'il y a derrière, sans que mes yeux quittent le texte ». Huit pour cent de photo qui transparaît, c'est une texture, pas une image : on la devine, on ne la lit pas. POURQUOI .94 ET NON .92. Les deux se ressemblent à l'œil, mais la mesure les sépare. Le contraste a été calculé sur les vraies photos, pixel par pixel, sous le bloc de texte : à .92 le texte courant tombait à 4,5:1 sur la photo des tarifs, c'est-à-dire pile sur le seuil, sans marge. À .94 il remonte autour de 5:1 et le blanc reste au-dessus de 8:1, pendant qu'on devine toujours ce qu'il y a derrière. Ne pas descendre sans refaire ce calcul sur la photo la plus claire du site. */ --hol-voile-fond: rgba(30, 35, 64, .94); --hol-voile-modale: rgba(30, 35, 64, .62); /* derrière une fenêtre ouverte au milieu de l'écran */ /* =========================================================================== LA SIGNATURE SUR LE BORD D'UNE CARTE (.hol-card--signee) Jimmy, en regardant les grandes cartes du site : « mets notre petite icône légèrement sur la bordure, en haut à gauche, centrée sur la bordure, pour que ça fasse un effet premium dans tout le site ». C'est le même dessin que la puce du hero, en image de fond plutôt qu'en balise : une carte n'a pas à porter un élément de plus dans son HTML pour être signée, une classe suffit, et la marque ne s'intercale pas dans la lecture d'un lecteur d'écran, où elle n'aurait rien à dire. ELLE EST À CHEVAL SUR LE BORD, à moitié dedans, à moitié dehors, et elle emporte avec elle un peu de la couleur du fond pour interrompre le filet : sans cela, la bordure passerait entre les trois traits et l'on croirait à un défaut. Le fond se règle par « --hol-signe-fond » quand la carte n'est pas posée sur la surface ordinaire. DEUX ENCRES, comme la puce : les bleus sur fond clair, le blanc sur fond sombre. Un fichier SVG séparé aurait demandé un second aller-retour réseau pour vingt-six pixels ; il est donc écrit dans le jeton. =========================================================================== */ --hol-signe: url("data:image/svg+xml,"); --hol-signe-inverse: url("data:image/svg+xml,"); /* Hero (référence verrouillée), */ --hol-hero-navy: #23284D; /* LE FONDU DU BORD D'UNE RANGÉE QUI DÉFILE. Une opacité ne se déduit pas d'un hexadécimal sans color-mix(), que les vieux Android ignorent : les deux bouts du dégradé s'écrivent donc, et ils valent --hol-surface-inverse. Le bout transparent est écrit en rgba et non « transparent » : les moteurs anciens interpolent « transparent » en passant par le noir, et le fondu laissait une bavure grise. */ --hol-inverse-fondu-plein: rgba(30,35,64,1); --hol-inverse-fondu-nul: rgba(30,35,64,0); --hol-hero-scrim-a: rgba(14,15,30,.9); --hol-hero-scrim-b: rgba(20,22,42,.72); --hol-hero-scrim-c: rgba(20,22,42,.32); /* Voile intermédiaire : assez dense pour tenir la couleur du site sur une photo, assez clair pour que la photo reste lisible dessous. */ --hol-hero-scrim-d: rgba(20,22,42,.82); /* Fin de voile : la même teinte à zéro, jamais le mot « transparent ». Les WebKit anciens interpolent ce mot vers du noir transparent et laissent une bavure grise au milieu du dégradé. */ --hol-hero-scrim-nul: rgba(20,22,42,0); /* Le voile de la scène sonore. Il n'est pas là pour cacher l'image, il est là pour que le texte posé dessus se lise : il est donc dense AU CENTRE, derrière les mots, et il s'efface vers les bords, où l'image reste nette. La teinte générale, légère, garde la carte dans les couleurs de la maison sans éteindre la photo. */ --hol-voile-son-a: rgba(30,35,64,.88); /* au centre, sous le texte */ --hol-voile-son-nul: rgba(30,35,64,0); /* aux bords, rien */ --hol-voile-son-b: rgba(62,64,149,.30); /* la teinte de marque, partout */ --hol-header-bg: rgba(255,255,255,.94); /* Texte, */ --hol-text-primary: #1A1C2B; /* 16,9:1 / blanc */ --hol-text-secondary: #565C72; /* 6,6:1 */ --hol-text-muted: #656B7F; /* 5,3:1 / blanc, 4,7:1 / surface-0 */ --hol-text-inverse: #FFFFFF; --hol-text-inverse-1: #DDE0EC; --hol-text-inverse-2: #C7CBDD; /* 9,5:1 / inverse */ --hol-text-inverse-muted: rgba(255,255,255,.6); /* Bordures, */ --hol-border-subtle: #E3E7F1; --hol-border-strong: #CFD4E4; --hol-border-on-dark: rgba(255,255,255,.16); /* Surfaces posées SUR un fond sombre. Un aplat de la marque n'y ressort pas : bleu sur bleu se sépare à 1,6:1, très loin des 3:1 qu'un élément d'interface doit atteindre pour se lire comme une forme. */ --hol-surface-sur-sombre: rgba(255,255,255,.13); --hol-surface-sur-sombre-fort: rgba(255,255,255,.22); /* Le CONTOUR d'un élément posé sur du sombre, pas son remplissage : c'est lui qui doit atteindre 3:1, sinon la pastille se lit comme du texte qui flotte. Un fond assez opaque pour y arriver seul étoufferait la photo. */ --hol-bordure-sur-sombre: rgba(255,255,255,.46); /* Trame diagonale posée sur un aplat sombre : décorative, presque invisible, juste assez pour que l'aplat ne soit pas mort. */ --hol-trame-sur-sombre: rgba(255,255,255,.03); /* Marque = ACTION PRINCIPALE, */ --hol-brand: #3E4095; /* blanc dessus 8,9:1 */ --hol-brand-hover: #34377E; /* LE BOUTON PRINCIPAL. Chez nous il est la marque ; une maison peut le passer sur son accent (voir enseignes.bouton_principal). Ces trois jetons ne se posent qu'ici et sur la fiche : les boutons les lisent, rien d'autre. */ --hol-bouton-fond: var(--hol-brand); --hol-bouton-encre: var(--hol-text-inverse); --hol-bouton-survol: var(--hol-brand-hover); --hol-brand-active: #2B2D68; --hol-brand-clair: #9698DE; /* sur inverse 5,7:1 */ --hol-brand-wash: #ECECF4; /* pastilles/aplats très clairs */ --hol-brand-border: rgba(62,64,149,.26); /* le pendant de accent-border et succes-border */ --hol-brand-doux: #4C5894; /* étiquettes sur fond clair, 7,1:1 */ /* ── LE CHAMP DE SAISIE ──────────────────────────────────────────────── Un formulaire sans couleur n'a l'air de rien, et sur une carte claire un champ blanc bordé de gris pâle se cherche. Ces deux valeurs sont la seule source : l'entrée, l'administration et l'espace y puisent, de sorte qu'un formulaire ne dépende jamais de la page où il se trouve. Le fond est le bleu le plus clair qui reste un bleu : 14,1:1 pour le texte posé dessus, soit trois fois ce que la norme demande. LA BORDURE EST MESURÉE, PAS CHOISIE À L'ŒIL. Un champ de saisie doit se distinguer de ce qui l'entoure d'au moins 3:1 (WCAG 1.4.11) : c'est ce qui permet de voir OÙ ÉCRIRE sans deviner. La marque à 38 % n'en donnait que 2,3 contre une carte blanche, et le fond du champ, à 1,2 contre cette même carte, ne rattrapait rien. À 65 % la bordure donne 3,9 contre le blanc et 3,3 contre son propre fond : les deux passent, et le bleu se voit enfin. */ --hol-champ-fond: #E9EAF4; --hol-champ-bord: rgba(62,64,149,.65); /* ── LA CARTE D'APPRENANT ──────────────────────────────────────────────── CES TEINTES VIENNENT DU GABARIT FOURNI, et elles ne servent qu'à la carte. Elles sont déclarées ici parce que c'est la règle de la maison : aucun hexadécimal ne s'écrit dans une page. Elles ne rejoignent pas la palette générale pour autant : un violet de carte n'est pas une couleur d'action, et il n'a rien à faire sur un bouton. ────────────────────────────────────────────────────────────────────── */ --hol-crt-brand: #4844A0; /* le pied de page du verso */ --hol-crt-encre: #0C0839; /* le nom, les valeurs */ --hol-crt-second: #615DA6; /* les étiquettes, le texte du dos */ --hol-crt-filet: #DCD6FA; /* les filets fins */ --hol-crt-papier-a:#FFFFFF; /* le fond, en haut à gauche */ --hol-crt-papier-b:#FBFBFF; /* le fond, en bas à droite */ --hol-crt-badge: #EEEBFF; /* la pastille */ --hol-crt-badge-e: #655DC0; /* son texte */ --hol-crt-qr: #A398E9; /* le contour du code */ /* Les biais, du plus lavé au plus plein. */ --hol-crt-b1: #EEEBFF; --hol-crt-b2: #C8C1F6; --hol-crt-b3: #5B52B8; --hol-crt-b4: #DFDBFC; --hol-crt-b5: #A49BE8; --hol-crt-b6: #4941A5; /* dégradé du coin bas droit, départ */ --hol-crt-b7: #6C63C7; /* dégradé du coin bas droit, arrivée */ --hol-crt-b8: #F0EDFF; --hol-crt-b9: #D8D3FA; --hol-crt-b10: #B0A8EF; /* Accent rouge = IDENTITÉ SEULEMENT progression, état actif, blocs mission Haïti. INTERDIT en texte courant (4,48:1 sur surface-0). Autorisé : grand texte, gras, sur blanc, ou aplat. Jamais une action. Jamais un état système. */ --hol-accent: #CD3438; --hol-accent-hover: #902427; --hol-accent-clair: #F0989B; /* sur inverse 7,1:1 */ --hol-accent-wash: rgba(205,52,56,.12); /* L'ENCRE QUI SE LIT SUR L'ACCENT. Chez nous l'accent est un rouge sombre et c'est du blanc ; chez un locataire ce peut être un or, et ce sera sa couleur de marque. Elle est calculée sur la clarté réelle, jamais supposée : du blanc sur #FFD231 ne se lit pas. */ --hol-accent-encre: #FFFFFF; --hol-accent-border: rgba(240,152,155,.4); /* L'ENCRE DES SURTITRES D'ACCENT. Chez nous, c'est l'accent lui-même : le rouge se lit sur son propre voile. Chez un locataire, elle se recalcule sur SON voile et peut en différer : un or sur un voile d'or pâle ne se lit pas. Voir Enseigne::jetons(). */ --hol-accent-texte: var(--hol-accent); /* États système (distincts de la marque, toujours + icône & libellé), */ --hol-succes: #157F52; --hol-succes-wash: rgba(21,127,82,.10); --hol-succes-border: rgba(21,127,82,.30); --hol-alerte: #B45309; --hol-alerte-wash: #FBEEDD; /* LES TROIS POLICES SONT DES JETONS, comme les couleurs, et pour la même raison : une marque blanche change de police autant que de teinte. Elles étaient écrites en dur cent dix-neuf fois dans ce fichier ; un locataire n'aurait pas pu en changer sans qu'on réécrive la feuille. Les familles par défaut restent les nôtres : sans enseigne, rien ne bouge. */ --hol-police-titre: 'Bricolage Grotesque'; --hol-police-texte: Inter; --hol-police-mono: 'IBM Plex Mono'; /* ═══ ET LA CLASSE POSE LA POLICE, PAS SEULEMENT SON NOM ═════════════════ LE DÉFAUT, TROUVÉ LE 4 OCTOBRE 2026 en mesurant la page d'accueil : CENT DEUX éléments sur deux cent quarante-cinq s'affichaient en Times. Jimmy l'avait vu sans pouvoir le nommer : « une police qui n'est pas la nôtre ». POURQUOI. Ces variables sont déclarées sur « .hol-scope » et non sur « :root », pour cohabiter avec le site d'EUDUC. Or neuf pages, dont l'accueil, le catalogue et les cours, ouvraient sur un « » SANS cette classe : leur règle « font-family: var(--hol-police-texte) » portait donc sur une variable inconnue. Une variable inconnue rend la déclaration invalide, et « font-family » retombe sur le défaut du navigateur, qui est un Times. Tout ce qui héritait du corps suivait, en-tête compris. LA CLASSE POSE DONC LA POLICE ELLE-MÊME. Partout où les jetons existent, le texte est dans la bonne fonte, quoi qu'ait écrit la page. C'est la ceinture ; la bretelle est la classe ajoutée aux neuf « » qui l'avaient perdue. */ font-family: var(--hol-police-texte), system-ui, -apple-system, sans-serif; --hol-erreur: #A61B23; /* Le voile de l'erreur. Il manquait, et les blocs d'erreur empruntaient celui de l'accent, c'est-à-dire le rouge de la marque : --hol-accent dit l'identité, jamais un état du système. */ --hol-erreur-wash: rgba(166,27,35,.12); /* LES CINQ PALIERS DE LA CARTE DU MONDE, du plus pâle au bleu de marque. Écrits, et non calculés : color-mix() manque aux vieux Android que nous servons, et une teinte calculée en JavaScript ferait dépendre la couleur d'un script, pas seulement la forme. */ --hol-monde-1: #DFE3F1; --hol-monde-2: #C2C8E6; --hol-monde-3: #9AA2D6; --hol-monde-4: #6E77C0; /* LES MÊMES ÉTATS, SUR FOND SOMBRE. Le vert et l'orange ci-dessus sont calculés pour être lus sur du blanc ; posés sur le voile d'une vidéo, ils passent tout juste. Ces deux-là sont leurs doubles pour fond sombre, et ils ne servent que là. */ --hol-succes-clair: #7CE0A8; --hol-alerte-clair: #F7C66A; /* Le verre posé sur une image : la fenêtre d'une question dans la vidéo. */ --hol-verre-fond: rgba(255,255,255,.12); --hol-verre-bord: rgba(255,255,255,.24); --hol-verre-fond-vif: rgba(255,255,255,.20); --hol-verre-bord-vif: rgba(255,255,255,.70); --hol-verre-creux: rgba(0,0,0,.20); /* Le noir du plein écran. Pas le bleu sombre de la marque : en plein écran, tout ce qui n'est pas l'image doit disparaître, et un fond coloré autour d'une vidéo tire l'œil hors de ce qu'on regarde. */ --hol-noir: #000000; /* Interaction, */ --hol-disabled-bg: #E3E7F1; --hol-disabled-text: #A9AEBE; --hol-focus: #4A4FC4; /* anneau, surfaces claires */ --hol-focus-inverse: #A9ACEC; /* anneau, surface-inverse */ --hol-scrim: rgba(20,22,42,.55); /* voile de modale */ /* Verre (sections inverses uniquement), */ --hol-glass: rgba(255,255,255,.07); --hol-glass-2: rgba(255,255,255,.05); --hol-glass-border: rgba(255,255,255,.16); --hol-glass-hi: rgba(255,255,255,.3); --hol-chip-dark: rgba(20,22,42,.62); --hol-wave: rgba(62,64,149,.45); /* Cartes verre (surfaces claires) : translucide + reflet + élévation + lueur discrète, */ --hol-card-glass: rgba(255,255,255,.72); --hol-card-glass-border: rgba(62,64,149,.18); --hol-shadow-glass: inset 0 1px 0 rgba(255,255,255,.85), 0 20px 46px rgba(30,35,64,.13), 0 0 42px rgba(62,64,149,.18); --hol-shadow-glass-sm: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 26px rgba(30,35,64,.1), 0 0 30px rgba(62,64,149,.14); --hol-shadow-glass-hover: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px rgba(30,35,64,.2), 0 0 54px rgba(62,64,149,.26); /* Ombres (une seule teinte, 3 niveaux), */ --hol-shadow-1: 0 1px 2px rgba(30,35,64,.08), 0 2px 6px rgba(30,35,64,.06); --hol-shadow-2: 0 8px 20px rgba(30,35,64,.1), 0 4px 10px rgba(30,35,64,.08); --hol-shadow-3: 0 24px 50px rgba(30,35,64,.16); /* Rayons (deux valeurs + pastille), */ --hol-r-sm: 12px; --hol-r-lg: 20px; --hol-r-pill: 999px; --hol-r-ed: 3px; /* rayon éditorial net (page Offrir) */ --hol-s1:4px; --hol-s2:8px; --hol-s3:16px; --hol-s4:24px; --hol-s5:32px; --hol-s6:48px; --hol-s7:64px; --hol-s8:96px; --hol-s9:128px; --hol-ease: cubic-bezier(.16,1,.3,1); --hol-dur: 500ms; --hol-max: 1200px; } /* Focus structurel à double anneau : l'anneau intérieur reprend la surface, garantissant la séparation même contre un bouton de la même teinte. Décliner .hol-focus-ring-inverse sur les sections sombres. */ /* La règle de survol supposait que tout lien est foncé sur fond clair. Posé en clair sur un fond sombre, un lien redevenait bleu nuit au survol et disparaissait. Le survol passe donc par une variable : un conteneur qui recolore ses liens redéfinit les deux, et la règle générale ne le contredit plus. Sans redéfinition, le comportement est inchangé. */ /* ═══ UN LIEN QUI RESTE SUR LA PAGE Y GLISSE, IL N'Y SAUTE PAS ═════════════ Demandé par Jimmy le 4 octobre 2026, depuis le pied de page : « quand je clique sur un bouton, si l'information est sur cette même page, il faut que ça roule doux. Quand ça va trop brut, je ne vois même pas ce qui s'est passé. » C'est exact, et ce n'est pas qu'une affaire de goût : un saut instantané de quatre écrans ne dit pas qu'on a bougé, il donne l'impression que la page a changé. Le glissement montre le chemin, donc il situe. SUR LA RACINE, PAS SUR « .hol-scope » : c'est l'élément qui défile, et il est au-dessus de nos portées. C'est la seule règle de ce fichier posée là. ET SEULEMENT POUR QUI NE DEMANDE PAS MOINS DE MOUVEMENT. Un défilement animé déclenche des nausées chez certaines personnes ; la préférence du système fait foi, et le saut instantané reste alors le bon comportement. Un navigateur qui ne connaît pas la propriété saute comme avant : rien ne se casse, le confort s'ajoute. */ @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } /* ═══ LA PISTE « L'EXPÉRIENCE » ET SES FLÈCHES ═════════════════════════════ LES FLÈCHES BORDENT LES CARTES, à mi-hauteur, et mordent légèrement sur la piste : posées à l'extérieur elles auraient mangé la gouttière, posées au milieu elles auraient caché une carte. Elles flottent au-dessus, sur un fond plein, avec l'ombre qui les décolle. SUR TÉLÉPHONE ELLES RESTENT, ET ELLES SE POSENT SUR LA PHOTO. On les avait retirées en pensant que le doigt suffisait. Jimmy, écran en main : « on ne voit pas qu'on peut défiler, et la barre grise en dessous fait moche ». La barre de défilement native est donc masquée, et ce sont les deux flèches qui disent, à sa place, qu'il y a autre chose à droite. Elles se calent à la hauteur du visuel, pas au milieu d'une carte de six cents pixels de haut, et restent à l'intérieur du cadre pour ne pas mordre la gouttière. */ .hol-scope .exp-cadre{position:relative} .hol-scope .exp-fleche{position:absolute;top:50%;z-index:3; width:46px;height:46px;margin-top:-23px; display:flex;align-items:center;justify-content:center; border-radius:var(--hol-r-pill); border:1px solid var(--hol-border-strong); background:var(--hol-surface-1);color:var(--hol-brand); box-shadow:var(--hol-shadow-2);cursor:pointer; transition:background-color .15s ease,border-color .15s ease, opacity .15s ease} .hol-scope .exp-fleche--prec{left:-10px} .hol-scope .exp-fleche--suiv{right:-10px} .hol-scope .exp-fleche:hover{background:var(--hol-brand);color:var(--hol-text-inverse); border-color:var(--hol-brand)} .hol-scope .exp-fleche:focus-visible{outline:2px solid var(--hol-brand);outline-offset:2px} /* ÉTEINTE PLUTÔT QU'ESCAMOTÉE : si elle s'en allait au bout de la piste, les cartes sauteraient de côté à chaque extrémité. */ .hol-scope .exp-fleche[disabled]{opacity:.32;cursor:default; background:var(--hol-surface-1); color:var(--hol-brand); border-color:var(--hol-border-subtle)} /* MAIS UNE PISTE QUI NE DÉBORDE PAS N'A PAS DE FLÈCHES DU TOUT, et il faut le dire ici. Le gabarit pose « hidden » sur les deux boutons et le script ne l'enlève que si la bande déborde vraiment ; seulement, le « display:flex » de la règle au-dessus battait la règle du navigateur qui escamote un élément caché. Résultat sur grand écran : deux ronds blancs posés sur la première et la dernière carte, alors qu'il n'y avait rien à faire défiler. */ .hol-scope .exp-fleche[hidden]{display:none} @media (max-width:760px){ /* 112 px : le milieu du visuel, qui fait trois quarts de la largeur de carte. Les flèches rentrent dans le cadre, sinon elles sortiraient de l'écran. */ .hol-scope .exp-fleche{top:112px;margin-top:-19px;width:38px;height:38px} .hol-scope .exp-fleche--prec{left:6px} .hol-scope .exp-fleche--suiv{right:6px} } /* ═══ LE NUMÉRO AU-DESSUS DU CADRE (.hol-numero) ══════════════════════════ D'ABORD POSÉ DANS UNE PASTILLE PLEINE, ET REFUSÉ. Jimmy : « je n'aime pas la façon dont tu le mets dans un background. J'aimerais que ce soit plus stylé. Tu pourrais le faire un petit peu sur la bordure du cadre, en haut à gauche : ça donne plus une image de marque prestigieuse. » Il a d'abord été posé À CHEVAL sur le filet, avec un fond de la couleur du dessous pour couper le trait. Jimmy, loupe à l'appui : « enlève le petit rectangle en dessous du numéro, laisse le numéro seulement ». Il avait raison là aussi : ce fond ne pouvait pas se confondre avec une carte de verre translucide posée sur un fond à pois, et il se voyait comme une plaquette. LE CHIFFRE SE POSE DONC JUSTE AU-DESSUS DU FILET, à cinq pixels, aligné sur le retrait de la carte. Plus rien à couper, donc plus rien à remplir : il ne reste que les deux chiffres, comme la cote d'un plan en marge de son cadre. Il appartient toujours à la carte, qui le porte et le déplace avec elle. DEUX RÉGLAGES, parce que les cartes ne se ressemblent pas : - « --hol-numero-encre » : la couleur du chiffre, pour les cartes qui ont la leur. - « --hol-numero-x » : sa distance au bord gauche, alignée sur le retrait de la carte qui le porte. ET IL FAUT LUI FAIRE DE LA PLACE AU-DESSUS : dix-sept pixels, hors de la carte. Toute piste qui porte des cartes numérotées prend donc vingt pixels de retrait en haut, sans quoi son « overflow » coupe le chiffre. LA PASTILLE PLEINE (.hol-rang) RESTE, mais pour autre chose : les listes d'étapes de la méthode et les trois partis pris, où le numéro est une puce au début d'une ligne, pas la légende d'un cadre. Il est décoratif : l'ordre est déjà celui des cartes, d'où l'« aria-hidden » sur chacun. */ .hol-scope .hol-encadre{position:relative} .hol-scope .hol-numero{position:absolute;z-index:2; bottom:100%;left:var(--hol-numero-x,22px); margin-bottom:5px; font-family:var(--hol-police-mono),monospace; font-size:12px;font-weight:600;letter-spacing:.2em; line-height:1; color:var(--hol-numero-encre,var(--hol-brand))} /* ET UNE VARIANTE EN FLUX, pour une ligne qui n'a pas de cadre : les trois partis pris sont des paragraphes posés sur le fond, pas des cartes. Le chiffre y tient la colonne de gauche comme une puce, mais nu lui aussi : la page porterait sinon deux façons de numéroter à deux écrans d'écart. */ .hol-scope .hol-numero--puce{position:static;flex:none;margin:3px 0 0; min-width:30px} /* ═══ LE BANDEAU DES CARTES FORMAT RÉSERVE SA LIGNE (.fmt-tete__titre) ═════ Les quatre titres ne font pas la même longueur. Tant que le numéro était une pastille posée dans le bandeau, il lui prenait cinquante pixels et « Parcours en cohorte » passait sur deux lignes quand les trois autres en gardaient une : son bandeau faisait vingt pixels de plus, sa photo démarrait vingt pixels plus bas, une marche au milieu de la bande. Le numéro est passé sur le filet, la place est revenue, et une ligne suffit de nouveau. LA HAUTEUR RESTE ÉCRITE, parce que la cause, elle, n'a pas disparu : en créole les mêmes titres seront plus longs, et le premier qui passera sur deux lignes décalerait encore toute la rangée. On réserve donc la hauteur du titre le plus long, mesurée, plutôt que de la découvrir en production. */ .hol-scope .fmt-tete__titre{line-height:1.2;min-height:1.2em} /* LA PISTE DU JOURNAL A SON PROPRE REPÈRE (.jrn-cadre) Sa photo est un seize-neuvième de carte : cent quarante-six pixels de haut, deux fois moins qu'une carte format. Les flèches communes, calées à mi-hauteur de carte, tombaient cinq pixels SOUS l'image, sur le surtitre « À paraître ». Elles se posent donc au milieu du visuel, mesuré, et la translation les y centre quelle que soit leur taille. */ .hol-scope .jrn-cadre .exp-fleche{top:73px;margin-top:0; transform:translateY(-50%)} /* LES CARTES SANS PHOTO PRENNENT LEURS FLÈCHES EN DESSOUS (.exp-cadre--dessous) Sur une carte format, la flèche se pose sur l'image : elle ne cache rien qu'on lise. Sur une carte faite de texte, au même endroit, elle mange le début de deux lignes. Elles passent donc sous la bande, à droite, comme la commande d'un diaporama. Le cadre le dit, le script ne change pas. */ .hol-scope .exp-cadre--dessous{position:relative} .hol-scope .exp-barre{display:flex;gap:10px;justify-content:flex-end} .hol-scope .exp-cadre--dessous .exp-fleche{position:static;top:auto;left:auto; right:auto;margin:14px 0 0; width:42px;height:42px} @media (max-width:760px){ .hol-scope .exp-cadre--dessous .exp-fleche{width:40px;height:40px} } /* PLUS DE BARRE GRISE SOUS LA PISTE : les flèches disent le défilement, et la piste garde le glissement du doigt et de la molette. */ .hol-scope .exp-piste{scrollbar-width:none;-ms-overflow-style:none} .hol-scope .exp-piste::-webkit-scrollbar{width:0;height:0;display:none} @media (prefers-reduced-motion:reduce){ .hol-scope .exp-fleche{transition:none} } /* ═══ LES RAPPORTS D'IMAGE, SANS « aspect-ratio » ══════════════════════════ « aspect-ratio » manque aux Android anciens que ce site doit servir : là où il est ignoré, le cadre s'effondre à zéro et l'image disparaît. Cinq blocs l'employaient encore. La vieille méthode du rembourrage proportionnel marche partout depuis toujours : une hauteur nulle, une marge basse en pourcentage de la LARGEUR, et le contenu posé en absolu par-dessus. 56,25 % = 9/16 · 75 % = 3/4 · 125 % = 5/4. */ .hol-scope .hol-ratio{position:relative;overflow:hidden;height:0} .hol-scope .hol-ratio > img, .hol-scope .hol-ratio > picture, .hol-scope .hol-ratio > video, .hol-scope .hol-ratio > iframe, .hol-scope .hol-ratio > .hol-slot{position:absolute;top:0;right:0;bottom:0;left:0; width:100%;height:100%} .hol-scope .hol-ratio > img, .hol-scope .hol-ratio > picture img, .hol-scope .hol-ratio > video{object-fit:cover} /* =========================================================================== LA VIDÉO DU FONDATEUR PREND LA HAUTEUR DE SON TEXTE Les deux colonnes étaient centrées l'une sur l'autre : le seize-neuvièmes faisait trois cent vingt pixels de haut face à une colonne de texte qui en faisait près de cinq cents, et la vidéo flottait au milieu de deux bandes vides. Jimmy : « la zone de vidéo est trop petite par rapport au texte ». La carte s'étire sur toute la hauteur de la ligne, et son cadre perd son rembourrage proportionnel pour la remplir ; l'image recouvre, elle ne se déforme pas. Sous 900 px les colonnes s'empilent, la vidéo reprend ses seize-neuvièmes sur toute la largeur, et cette règle ne s'applique plus. =========================================================================== */ @media (min-width:901px){ .hol-scope .fond-media{align-self:stretch} .hol-scope .fond-media .hol-ratio{height:100%;padding-bottom:0;min-height:320px} } .hol-scope .hol-ratio--16x9{padding-bottom:56.25%} .hol-scope .hol-ratio--4x3 {padding-bottom:75%} .hol-scope .hol-ratio--4x5 {padding-bottom:125%} /* LE MENU DE L'EN-TÊTE : deux écarts, deux rôles. Celui qui le détache de la marque est le plus large, c'est la zone de respiration du logo ; celui qui sépare les liens reste plus serré, pour qu'ils se lisent comme un groupe. Les deux se resserrent sous 1100 px, juste avant que la barre ne se replie. */ .hol-scope .ent-nav{display:flex;gap:28px;margin-left:30px;flex:1 1 auto; flex-wrap:wrap;white-space:nowrap} @media (max-width:1100px){ .hol-scope .ent-nav{gap:20px;margin-left:14px} } /* ═══ LA CARTE « ACCOMPAGNEMENT PROFESSIONNEL » ═════════════════════════════ TROIS PAGES LA PORTENT : l'accueil, les tarifs et la page professionnelle. Elle était dessinée dans chacune, donc elle divergeait, et sur l'accueil elle partageait la carte en deux moitiés égales : les mots s'entassaient à gauche pendant que la moitié droite restait presque vide avec deux éléments posés en haut. Jimmy : « un manque d'élégance, c'est trop serré vers la gauche et il reste trop de place à droite ». TROIS COLONNES, DONT UN COULOIR. Les mots prennent la place qu'ils demandent ; un filet d'un pixel de haut en bas sépare ; le bloc d'action occupe une colonne de largeur décidée, ni étirée ni rabougrie. Le filet n'est pas un ornement de bloc, c'est une séparation entre deux contenus, et il est neutre. SUR TÉLÉPHONE, LE COULOIR SE COUCHE : il devient le trait horizontal qui sépare les deux moitiés empilées, ce qui est le même geste dans l'autre sens. PAS DE « min() » ICI, ni nulle part : les Android anciens que ce site doit servir ne le connaissent pas, et la déclaration entière tomberait. */ .hol-scope .offre-pro{display:grid;grid-template-columns:1fr;gap:24px;align-items:center} .hol-scope .offre-pro__mots{min-width:0} .hol-scope .offre-pro__couloir{height:1px;background:var(--hol-border-subtle)} .hol-scope .offre-pro__devis{min-width:0;display:flex;flex-direction:column; gap:14px;align-items:flex-start} .hol-scope .offre-pro__prix{font-family:var(--hol-police-mono),ui-monospace,monospace; font-size:clamp(20px,2.4vw,26px);font-weight:600; color:var(--hol-brand);white-space:nowrap} .hol-scope .offre-pro__aide{margin:0;font-size:13.5px;line-height:1.55; color:var(--hol-text-muted)} /* LE BOUTON PREND TOUTE SA COLONNE : posé à sa largeur naturelle, il flottait au milieu d'un vide. Occupant son couloir, il devient le bas du bloc. */ .hol-scope .offre-pro__devis .hol-btn{width:100%;justify-content:center;text-align:center} @media (min-width:880px){ .hol-scope .offre-pro{grid-template-columns:minmax(0,1fr) 1px minmax(240px,300px); gap:clamp(30px,4.5vw,56px)} .hol-scope .offre-pro__couloir{width:1px;height:auto;align-self:stretch} } /* LES CONTRÔLES DE FORMULAIRE N'HÉRITENT PAS DE LA POLICE, c'est le navigateur qui leur en impose une, et c'est pourquoi trois boutons sortaient en Arial au milieu d'une page en Inter. Seule la FAMILLE est forcée : la taille et la graisse restent celles que chaque bouton déclare. */ .hol-scope button, .hol-scope input, .hol-scope select, .hol-scope textarea, .hol-scope optgroup { font-family: inherit; } .hol-scope a { color: var(--hol-lien, var(--hol-brand)); text-decoration: none; } .hol-scope a:hover { color: var(--hol-lien-survol, var(--hol-brand-active)); } /* ═══ LES SURFACES SOMBRES RECOLORENT LEURS LIENS, TOUTES ═══════════════════ LE DÉFAUT, MESURÉ LE 4 OCTOBRE 2026. Jimmy a vu « Se connecter » devenir illisible au survol dans le pied de page. J'ai audité le site au lieu de corriger ce bouton-là : sur la seule page d'accueil, DIX-NEUF liens tombaient sous 2,5:1 au survol, et certains à 1,1:1, c'est-à-dire invisibles. LA CAUSE EST DANS LA RÈGLE JUSTE AU-DESSUS. Au repos, un lien posé sur un fond sombre reçoit sa couleur claire par un style propre ; au survol, la règle générale la remplace par « --hol-brand-active », un bleu nuit. Sur du navy, du rouge ou du bleu de marque, ce bleu nuit disparaît. LA RÉPARATION SE FAIT PAR SURFACE, PAS PAR LIEN. Chaque conteneur qui peint un fond sombre déclare les deux jetons pour tout ce qu'il contient : l'en-tête tant qu'il n'est pas figé, le hero, le pied, les boutons d'action, et les sections sombres, qu'on attrape par leur style en ligne faute de classe. PUIS ON REND LA MAIN AUX ÎLOTS CLAIRS. Une carte blanche posée dans une section sombre reprend les jetons du site, sinon ses liens sortiraient blancs sur blanc. L'audit vérifie les deux sens. */ .hol-scope .auth-logo, .hol-scope .esp-marque, .hol-scope .adm-marque, .hol-scope header[data-entete]:not([data-fige="1"]), .hol-scope [data-hero], .hol-scope footer, .hol-scope [data-bouton], .hol-scope [style*="--hol-surface-inverse"], .hol-scope [style*="--hol-hero-navy"], .hol-scope [style*="--hol-brand)"], .hol-scope [style*="--hol-accent)"]{--hol-lien:var(--hol-text-inverse); --hol-lien-survol:var(--hol-text-inverse)} .hol-scope [data-hero] .hol-card, .hol-scope [style*="--hol-surface-inverse"] .hol-card, .hol-scope [style*="--hol-surface-inverse"] [style*="--hol-surface-1)"], .hol-scope [style*="--hol-surface-inverse"] [style*="--hol-surface-0)"], .hol-scope footer [style*="--hol-surface-1)"]{--hol-lien:var(--hol-brand); --hol-lien-survol:var(--hol-brand-active)} .hol-scope ::selection { background: var(--hol-brand); color: var(--hol-text-inverse); } @keyframes holpulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .9; } 50% { transform: translate(-50%,-50%) scale(1.5); opacity: .35; } }@keyframes holmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hol-scope [data-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } /* Lévitation au survol : cible toute carte-verre par son ombre token, sans markup dédié. */ .hol-scope [style*="hol-shadow-glass"] { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s; } .hol-scope [style*="hol-shadow-glass"]:hover { transform: translateY(-6px); box-shadow: var(--hol-shadow-glass-hover) !important; } .hol-scope .hol-list-row:last-child { border-bottom: none !important; } @media (prefers-reduced-motion: reduce) { .hol-scope * { animation: none !important; transition: none !important; } .hol-scope [style*="hol-shadow-glass"]:hover { transform: none; } } /* ── Composant carte unique (.hol-card) : géométrie seule, tokens only ── */ .hol-scope .hol-card { background: var(--hol-card-glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--hol-card-glass-border); border-radius: var(--hol-r-lg); box-shadow: var(--hol-shadow-glass); padding: 24px; transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s; } .hol-scope .hol-card:hover { transform: translateY(-6px); box-shadow: var(--hol-shadow-glass-hover); } /* Variante fond sombre : même géométrie, surface adaptée. */ .hol-scope .hol-card--dark { background: var(--hol-glass); border-color: var(--hol-glass-border); box-shadow: var(--hol-shadow-3); } .hol-scope .hol-card--dark:hover { box-shadow: var(--hol-shadow-3), 0 0 44px rgba(0,0,0,.3); } /* Variante ligne compacte (lecteurs audio, listes). */ .hol-scope .hol-card--row { padding: 16px 18px; border-radius: var(--hol-r-sm); } /* Variante posée (états « bientôt », placeholders) : pas de lévitation. */ .hol-scope .hol-card--flat { box-shadow: var(--hol-shadow-1); } .hol-scope .hol-card--flat:hover { transform: none; box-shadow: var(--hol-shadow-1); } /* Carte cliquable : focus clavier visible. */ .hol-scope a.hol-card, .hol-scope button.hol-card { cursor: pointer; display: block; text-align: inherit; } /* --------------------------------------------------------------------------- CE QUI SE CLIQUE SE SOULÈVE. La convention existait pour les cartes, pas pour les boutons : au survol, rien ne bougeait. Deux niveaux, parce qu'un bouton n'est pas une carte. Le déplacement vaut pour TOUT élément cliquable, y compris les boutons discrets et transparents. L'ombre, elle, ne vaut que pour ceux qui ont une surface pleine, marqués « data-bouton » : une ombre portée autour d'un bouton transparent flotterait dans le vide. --------------------------------------------------------------------------- */ .hol-scope button:not([disabled]), .hol-scope [data-bouton] { transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease; } .hol-scope button:not([disabled]):hover, .hol-scope [data-bouton]:hover { transform: translateY(-2px); } .hol-scope [data-bouton]:hover { box-shadow: var(--hol-shadow-2); } /* Appuyer repose le bouton : sans cela, il reste en l'air pendant le clic. */ .hol-scope button:not([disabled]):active, .hol-scope [data-bouton]:active { transform: translateY(0); box-shadow: var(--hol-shadow-1); } /* Une carte cliquable garde sa lévitation, plus ample : elle est plus grande. */ .hol-scope button.hol-card:hover { transform: translateY(-6px); } .hol-scope button.hol-card--flat:hover { transform: none; } @media (prefers-reduced-motion: reduce) { .hol-scope button:hover, .hol-scope [data-bouton]:hover, .hol-scope button:active, .hol-scope [data-bouton]:active { transform: none; } } .hol-scope .hol-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hol-surface-0), 0 0 0 4px var(--hol-focus); } .hol-scope .hol-card--dark:focus-visible { box-shadow: 0 0 0 2px var(--hol-surface-inverse), 0 0 0 4px var(--hol-focus-inverse); } @media (max-width: 400px) { .hol-scope .hol-card { padding: 18px; } .hol-scope .hol-card--row { padding: 14px 15px; } } /* Gouttière : paliers responsives (le contrôle 360 px en dépend). */ /* --------------------------------------------------------------------------- Emplacement d'image non encore fourni. Volontairement visible : un visuel manquant doit se remarquer, pas se déguiser. Voir templates/partials/image.php --------------------------------------------------------------------------- */ .hol-slot{ width:100%;height:100%;min-height:120px; display:flex;align-items:center;justify-content:center; padding:16px;text-align:center; background: linear-gradient(var(--hol-brand-wash),var(--hol-brand-wash)), repeating-linear-gradient(45deg,transparent 0 10px,rgba(62,64,149,.05) 10px 20px); border:1px dashed var(--hol-border-strong); color:var(--hol-text-muted); } /* L'EMPLACEMENT EST UNE COLONNE : la marque au centre, et la consigne dessous quand un administrateur regarde. Pour un visiteur, il n'y a que la marque. */ .hol-slot{flex-direction:column;gap:14px} .hol-slot__marque{display:flex;flex-direction:column;align-items:center;gap:11px; width:100%;height:100%;justify-content:center;opacity:.38} /* LE GLOBE SE MET À L'ÉCHELLE DE SON EMPLACEMENT. Posé à une taille fixe, il flottait comme une vignette perdue au milieu d'un grand rectangle vide, et c'est exactement l'effet que Jimmy a trouvé laid sur les blocs hauts de la page d'accueil. Il prend donc un cinquième de la hauteur disponible, borné des deux côtés : jamais minuscule dans un grand cadre, jamais écrasant dans un petit. La largeur suit, et l'image ne se déforme pas. */ .hol-slot__logo{height:20%;min-height:46px;max-height:118px; width:auto;max-width:56%;object-fit:contain;display:block} .hol-slot__nom{font-family:var(--hol-police-mono),ui-monospace,monospace; font-size:10px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--hol-text-muted)} .hol-slot-p{ font-family:var(--hol-police-mono),ui-monospace,monospace; font-size:11.5px; line-height:1.45;letter-spacing:.02em;max-width:34ch; } /* Lien d'évitement : invisible jusqu'à la tabulation, obligatoire au clavier. */ .hol-evitement{ /* Posé sur le bleu de marque : il garde sa couleur au survol, sinon il vire au bleu foncé sur bleu et devient illisible. */ --hol-lien:var(--hol-text-inverse);--hol-lien-survol:var(--hol-text-inverse); position:absolute;left:-9999px;top:0;z-index:100; padding:12px 18px;background:var(--hol-brand);color:var(--hol-text-inverse); font-weight:600;text-decoration:none;border-radius:0 0 var(--hol-r-sm) 0; } .hol-evitement:focus{left:0} /* Lu par les lecteurs d'écran, absent de l'écran. */ .hol-visuellement-cache{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* =========================================================================== ACCUEIL : styles portés de Landing.dc.html (en-tête, hero, compteur). Vivent ici parce que l'en-tête est un partial servi sur toutes les pages. =========================================================================== */ /* Fond des sections claires : trame de points + deux halos diffus. Décoratif. DEUX PORTES D'ENTRÉE, ET C'EST VOULU. Les pages portées de la maquette déclarent leur fond dans leur style en ligne : le sélecteur d'attribut les attrape sans rien changer au portage. Les pages écrites depuis, dont le fond est posé une fois sur leur conteneur, n'ont aucune section à attraper : elles demandent le grain par la classe « hol-grain ». Même dessin, un seul endroit où il est défini. */ /* « .hol-scope .hol-grain » exige un ANCÊTRE portant .hol-scope. Or la moitié des pages posent les deux classes sur le MÊME élément, et la règle ne s'appliquait pas : catalogue, transparence, attestations, fiche de cours et offrir sont restées au fond plat sans que cela se voie dans le balisage. Les deux écritures sont désormais visées. */ .hol-scope section[style*="--hol-surface-0"], .hol-scope .hol-grain, .hol-scope.hol-grain{position:relative;isolation:isolate} .hol-scope section[style*="--hol-surface-0"]::before, .hol-scope .hol-grain::before, .hol-scope.hol-grain::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:-1; background-image: radial-gradient(var(--hol-motif-dot) 1.1px, transparent 1.7px), radial-gradient(circle at 8% 12%, var(--hol-motif-halo-1), transparent 52%), radial-gradient(circle at 92% 88%, var(--hol-motif-halo-2), transparent 46%); background-size:24px 24px, auto, auto; } /* LE GRAIN EN RETRAIT, pour les écrans où l'on travaille longtemps. Une page de leçon se regarde une heure d'affilée : le motif y est une signature, pas une décoration, et à pleine force il vient chercher l'œil pendant qu'on lit une transcription. À quarante pour cent il se devine encore, et c'est tout ce qu'on lui demande. */ .hol-scope .hol-grain--discret::before, .hol-scope.hol-grain--discret::before{opacity:.5} /* LE GRAIN SUR FOND SOMBRE. Le dessin ne change pas d'une ligne : seules les trois couleurs sont reprises, en lumière au lieu d'encre. Une page de compte est bleu nuit, et le point bleu y était invisible. */ .hol-scope .hol-grain--sombre, .hol-scope.hol-grain--sombre{ --hol-motif-dot: var(--hol-motif-dot-clair); --hol-motif-halo-1: var(--hol-motif-halo-clair-1); --hol-motif-halo-2: var(--hol-motif-halo-clair-2); } /* Carrousel du hero : trois médias empilés, fondu croisé d'une seconde. */ .hero-fond{position:absolute;inset:0;overflow:hidden;z-index:0} .hero-media{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out} .hero-media[data-actif="1"]{opacity:1} .hero-media img,.hero-media video,.hero-media .hol-slot{width:100%;height:100%;object-fit:cover;display:block} /* Point d'ancrage de la PREMIÈRE diapositive du hero, et d'elle seule. Sur un écran étroit, « cover » ne garde que la bande centrale de la photo. Sur la photo d'accueil livrée, l'apprenante est à 79% de la largeur et son visage à 32% de la hauteur : sans ancrage elle sort entièrement du champ, et il ne reste que le bureau et le carnet. Or c'est elle qui amène les gens sur le site. 81% place son visage aux trois quarts de la largeur, c'est-à-dire à droite du texte, qui est calé à gauche : elle reste visible sans rien masquer. La composition de l'accueil est ainsi la même sur téléphone que sur grand écran, texte à gauche et apprenante à droite. Sur grand écran la photo déborde en HAUTEUR et non en largeur : les 81% n'y ont aucun effet, seuls les 32% jouent, et ils gardent sa tête entière dans le cadre. Le hero de référence n'est donc pas modifié là où il était déjà juste. CE RÉGLAGE EST LIÉ À CETTE PHOTO. Si « Hero, première photo » est changée depuis /admin, ce point d'ancrage est à revoir avec la nouvelle image. Les diapositives 2 et 3 restent centrées : ce sont des tenants-lieu, et ancrer une image dont on ne connaît pas le sujet ferait plus de mal que de bien. */ #hero-bg{object-position:81% 32%} /* Photo remplacée depuis /admin : on ne sait plus où est le sujet, donc on revient au centre. Un cadrage neutre vaut mieux qu'un cadrage faux. */ [data-hero-photo="personnalisee"] #hero-bg{object-position:50% 50%} @media (prefers-reduced-motion:reduce){.hero-media{transition:none}} /* En-tête : bleu nuit au-dessus du hero, clair dès le défilement. L'attribut data-fige est posé par holangcours-site.js. */ header[data-entete]{backdrop-filter:blur(12px);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;background-color:var(--hol-header-bg) !important;border-bottom:1px solid var(--hol-border-subtle) !important} header[data-entete] .ent-logo{transition:opacity .3s ease} header[data-entete] .ent-logo--sombre{opacity:0 !important} header[data-entete][data-fige="1"]{box-shadow:var(--hol-shadow-1) !important} header[data-entete]:not([data-fige="1"]){background-color:var(--hol-surface-inverse) !important;border-bottom-color:var(--hol-border-on-dark) !important;box-shadow:none !important} header[data-entete]:not([data-fige="1"]) nav a{color:var(--hol-text-inverse-1) !important} header[data-entete]:not([data-fige="1"]) nav a:first-child{color:var(--hol-text-inverse) !important} header[data-entete]:not([data-fige="1"]) .ent-logo--clair{opacity:0 !important} header[data-entete]:not([data-fige="1"]) .ent-logo--sombre{opacity:1 !important} /* L'EN-TÊTE A DEUX ÉTATS, ET LA PASTILLE DES RÉGLAGES DOIT SUIVRE LES DEUX. En haut de page elle flotte sur le bleu nuit : fond de verre, texte clair. Défilée, l'en-tête devient claire : fond clair, texte sombre. Depuis que langue et devise ne font qu'un groupe, c'est « ent-choix » qui porte le fond ; l'habiller seulement en clair donnait du texte clair sur fond clair, et « EN » devenait illisible en haut de page. */ header[data-entete]:not([data-fige="1"]) .ent-choix{background:var(--hol-glass) !important; border:1px solid var(--hol-border-on-dark)} header[data-entete]:not([data-fige="1"]) .ent-choix__groupe--suite{border-left-color:var(--hol-border-on-dark)} /* Sur fond bleu nuit : devises, langues et « Se connecter » passent en teintes claires. */ header[data-entete]:not([data-fige="1"]) [data-devises] button, header[data-entete]:not([data-fige="1"]) [data-langues] a{color:var(--hol-text-inverse-2) !important} header[data-entete]:not([data-fige="1"]) [data-devises] button[data-actif="1"], header[data-entete]:not([data-fige="1"]) [data-langues] a[aria-current]{color:var(--hol-text-inverse) !important} /* Les liens de compte se reconnaissent à leur ATTRIBUT, pas à leur adresse. Viser « href*=connexion » attrapait /deconnexion par hasard et manquait /mon-espace comme /mes-cours, qui restaient bleus sur le hero sombre. */ header[data-entete]:not([data-fige="1"]) a[data-compte], header[data-entete]:not([data-fige="1"]) button[data-compte]{color:var(--hol-text-inverse) !important} /* Le rond du compte bascule comme eux : sur le hero sombre son prénom passe en blanc, et son survol prend le verre plutôt que le lavis bleu, qui ne se voyait pas sur le bleu nuit. */ header[data-entete]:not([data-fige="1"]) .hol-identite{color:var(--hol-text-inverse) !important} header[data-entete]:not([data-fige="1"]) .hol-identite:hover{background:var(--hol-glass)} /* La déconnexion est un bouton d'envoi : elle doit se lire comme les liens voisins, et non comme un bouton de formulaire. */ .ent-deco{display:inline-flex;align-items:center;margin:0} .ent-deco__bouton{padding:0;border:0;background:none;cursor:pointer; font:inherit;font-size:15px;font-weight:600; color:var(--hol-text-muted)} .ent-deco__bouton:hover{color:var(--hol-brand)} .ent-deco__bouton:focus-visible{outline:none;border-radius:var(--hol-r-sm); box-shadow:0 0 0 2px var(--hol-surface-1),0 0 0 4px var(--hol-focus)} /* Le panier suit le même basculement : sur le hero il est blanc, une fois l'en-tête figé il redevient bleu. Sa pastille garde le rouge d'identité. */ header[data-entete]:not([data-fige="1"]) a[data-panier]{color:var(--hol-text-inverse) !important} /* --------------------------------------------------------------------------- UN LIBELLÉ QUI NE BOUGE PAS D'UNE LANGUE À L'AUTRE « Se connecter » et « Log in » n'ont pas la même longueur, ni « Tarifs & accès » et « Pricing & access ». Tout ce qui suit glissait au changement de langue, jusqu'à 55 px pour le sélecteur de langue lui-même, qui se trouvait alors ailleurs qu'à l'endroit où on venait de cliquer. Les deux versions sont empilées dans la même case de grille : la largeur est celle de la plus longue, la hauteur celle de la visible. Aucune valeur n'est devinée, et le jour où un libellé est réécrit, la réserve suit. --------------------------------------------------------------------------- */ .ent-stable{display:inline-grid;align-items:center;justify-items:start} .ent-stable > *{grid-area:1/1} .ent-fantome{visibility:hidden;height:0;overflow:hidden;white-space:nowrap;pointer-events:none} /* Dans le panneau déroulant, les liens font toute la largeur : il n'y a plus rien à réserver, et une réserve y créerait un blanc au milieu d'une ligne. */ /* Les libellés doublés ne servent que la barre dépliée : repliée, la place ne manque plus. Même seuil que le pli, forcément. */ @media (max-width:1259px){ .ent-stable{display:inline} .ent-fantome{display:none} } /* --------------------------------------------------------------------------- LE PANIER : UNE ICÔNE, SON COMPTEUR DESSUS Le mot occupait la place de deux liens dans une barre qui en manque. L'icône est dessinée pour ce site : son anse reprend le méridien du globe du logo. Le mot revient dans le panneau déroulant, sous 1100 px, où les liens sont des lignes pleine largeur et où une icône seule ne dirait rien. --------------------------------------------------------------------------- */ .ent-panier{position:relative;display:inline-flex;align-items:center;gap:9px; justify-content:center;min-width:42px;min-height:42px; color:var(--hol-brand);font-size:15px;font-weight:600; border-radius:var(--hol-r-sm);transition:background .18s ease} .ent-panier:hover{background:var(--hol-brand-wash)} header[data-entete]:not([data-fige="1"]) .ent-panier:hover{background:var(--hol-surface-sur-sombre)} .ent-panier-dessin{width:23px;height:23px;flex:none} .ent-panier-mot{display:none} /* La pastille chevauche l'icône, comme partout : elle dit « il y a quelque chose dedans » sans ajouter une colonne à la barre. Son nombre est répété dans le libellé du lien, pour qui ne voit pas la couleur. */ .ent-panier-n{position:absolute;top:1px;right:1px; min-width:18px;height:18px;padding:0 5px; display:inline-flex;align-items:center;justify-content:center; background:var(--hol-accent);color:var(--hol-accent-encre,var(--hol-text-inverse)); font-family:var(--hol-police-mono),monospace;font-size:11px;font-weight:600; line-height:1;border-radius:var(--hol-r-pill); border:2px solid var(--hol-header-bg)} header[data-entete]:not([data-fige="1"]) .ent-panier-n{border-color:var(--hol-hero-navy)} /* Compteur du hero : relief de verre, entrée en basculement 3D, pouls discret. */ /* LA COLONNE DE DROITE porte le placement des deux pastilles, qui le portaient chacune pour soi : elles partageaient le bord droit sans partager la largeur, et le journal pendait sous un angle du compteur. La colonne est centrée verticalement, ses enfants prennent toute sa largeur. */ .hero-droite{position:absolute;z-index:2;right:var(--hol-gutter);top:50%; transform:translateY(-50%); width:230px;display:flex;flex-direction:column;gap:12px} .hero-compteur{/* Pastille de verre sur le hero sombre : même raison. */ --hol-lien:var(--hol-text-inverse);--hol-lien-survol:var(--hol-text-inverse); opacity:0;transform-style:preserve-3d;animation:hc-entree 1.1s cubic-bezier(.22,.9,.24,1) .5s forwards;transition:transform .45s cubic-bezier(.22,.9,.24,1),box-shadow .45s ease;display:block} @keyframes hc-entree{ from{opacity:0;transform:translateX(22px) perspective(900px) rotateY(-14deg) rotateX(5deg) scale(.94)} to{opacity:1;transform:translateX(0) perspective(900px) rotateY(-7deg) rotateX(2deg) scale(1)} } .hero-compteur:hover,.hero-compteur:focus-visible{transform:perspective(900px) rotateY(-2deg) rotateX(0deg) scale(1.03)} .hero-compteur:focus-visible{outline:none;box-shadow:0 0 0 2px var(--hol-hero-navy),0 0 0 5px var(--hol-focus-inverse),0 22px 48px -12px rgba(9,10,32,.62)} /* Reflet de vitre : bande claire en diagonale sur la moitié haute. */ .hero-compteur::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.06) 34%,transparent 58%)} .hero-compteur > *{position:relative} .hero-pouls{animation:hc-pouls 2.6s ease-in-out infinite} @keyframes hc-pouls{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--hol-accent-border)}50%{opacity:.55;box-shadow:0 0 0 6px transparent}} @media (max-width:1100px){.hero-droite{display:none}} @media (prefers-reduced-motion:reduce){ .hero-compteur{opacity:1;animation:none;transform:none} .hero-pouls{animation:none} .hol-marquee{animation:none !important} } /* =========================================================================== CONTENEUR UNIQUE DU SITE max-width 1480px centré, marge horizontale clamp(24px, 8vw, 100px). Donne 1280px de contenu utile entre deux marges de 100px sur grand écran, et le MÊME bord gauche/droit partout : sections claires, sections sombres, pied de page, pages internes. Une section pleine largeur (hero, bandeau) garde son fond en pleine largeur et pose ce conteneur à l'intérieur, le contenu reste aligné sur le trait. =========================================================================== */ .hol-scope .eu-container{ max-width:1480px; margin-left:auto; margin-right:auto; padding-left:var(--hol-gutter); padding-right:var(--hol-gutter); width:100%; } /* Couleurs officielles des réseaux, au survol seulement. Elles n'entrent pas dans la palette du site : aucun autre élément d'interface ne les utilise. */ .hol-scope [data-reseau]{transition:background-color .2s ease,border-color .2s ease,color .2s ease} .hol-scope [data-reseau="youtube"]:hover {background:#FF0000;border-color:#FF0000;color:#FFF} .hol-scope [data-reseau="facebook"]:hover {background:#1877F2;border-color:#1877F2;color:#FFF} .hol-scope [data-reseau="instagram"]:hover{background:linear-gradient(45deg,#F58529 0%,#DD2A7B 45%,#8134AF 75%,#515BD4 100%);border-color:#DD2A7B;color:#FFF} .hol-scope [data-reseau="tiktok"]:hover {background:#000;border-color:#000;color:#FFF} .hol-scope [data-reseau="linkedin"]:hover {background:#0A66C2;border-color:#0A66C2;color:#FFF} /* --------------------------------------------------------------------------- EN-TÊTE, comportement sur petits écrans. À 390px, l'en-tête montait à 234px de haut : logo pleine largeur, puis navigation, devises, langues et boutons sur quatre lignes. Sur un en-tête collant, cela mangeait un quart de l'écran en permanence. Le PNG du logo porte 127px de vide transparent à gauche : la compensation vaut TOUJOURS 20% de la hauteur rendue (9,8/48,8 = 12,8/64 = 0,2). En l'exprimant en calc, le logo se réduit sans que le cadrage se décale. --------------------------------------------------------------------------- */ .hol-scope{ --ent-logo-h: 48.8px; } @media (max-width:900px){ .hol-scope{ --ent-logo-h: 40px; } } @media (max-width:600px){ .hol-scope{ --ent-logo-h: 32px; } } header[data-entete] .ent-logo--sombre{ height:var(--ent-logo-h); width:auto; margin-left:calc(var(--ent-logo-h) * -0.2); } /* La version couleur est cadrée serrée : pas de compensation, et une hauteur proportionnellement plus faible, conforme au rapport 34/48,8 du brief. */ header[data-entete] .ent-logo--clair{ height:calc(var(--ent-logo-h) * 0.697); width:auto; } @media (max-width:900px){ /* La navigation défile latéralement au lieu de passer à la ligne : tous les liens restent atteignables, et l'en-tête garde une seule hauteur. */ header[data-entete] nav{ flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:16px !important; margin-left:0 !important; } header[data-entete] nav::-webkit-scrollbar{display:none} header[data-entete] [data-devises] button, header[data-entete] [data-langues] a{min-width:34px;padding:0 7px} } @media (max-width:600px){ header[data-entete] > div{gap:8px 12px !important} header[data-entete] nav{order:3;flex:1 0 100% !important;font-size:14px} header[data-entete] nav a{font-size:14px !important} /* Le CTA reste au bout de la première ligne, à portée de pouce. */ header[data-entete] > div > a:last-of-type{padding:9px 14px !important;font-size:14px !important} } /* ══════════════════════════════════════════════════════════════════════════ MENU REPLIÉ : téléphone et tablette uniquement Sous 1100 px, l'en-tête se déployait sur trois lignes : logo et sélecteurs, puis compte, panier et appel à l'action, puis la navigation. Beaucoup de choses pour une barre qui doit surtout dire où l'on est et laisser voir la page. Il ne reste donc que le logo et un bouton. AU-DESSUS DE 1100 PX, RIEN NE CHANGE : le conteneur est en display:contents, ses enfants restent des enfants directs de la barre, et la mise en page du prototype n'est pas touchée d'un pixel. Ces règles viennent APRÈS les blocs 900 px et 600 px : à spécificité égale, c'est l'ordre qui tranche, et ce sont elles qui doivent gagner. ══════════════════════════════════════════════════════════════════════════ */ .ent-menu,.ent-choix{display:contents} .ent-bascule{display:none} /* LE PLI DE L'EN-TÊTE PASSE DE 1100 À 1259 PIXELS, et c'est une mesure, pas un goût. Barre complète d'un administrateur connecté, tout compacté : 1 055 px de contenu. La place vaut 84 % de l'écran sous 1 250 px, puis la largeur moins 200. Il faut donc 1 256 px d'écran pour que la rangée tienne ; en dessous, elle se cassait en deux et le bouton rouge tombait sous la marque. Jimmy, sur un treize pouces : « ça déborde en dessous du logo, ce n'est pas professionnel ». Mieux vaut un en-tête replié, qui est un objet net, qu'une barre à deux rangs qui ressemble à un accident. */ @media (max-width:1259px){ /* La barre : logo à gauche, bouton à droite, et rien entre les deux. */ header[data-entete] > div{flex-wrap:nowrap !important;gap:12px !important; justify-content:space-between} .ent-bascule{display:inline-flex;align-items:center;gap:10px;flex:none; min-height:44px;padding:0 14px;cursor:pointer; background:transparent;border:1px solid var(--hol-border-strong); border-radius:var(--hol-r-sm);color:var(--hol-brand); font:inherit;font-size:14px;font-weight:600} .ent-bascule-mot{white-space:nowrap} /* Sur le hero, l'en-tête est bleu nuit : le bouton doit basculer comme le reste, sinon il reste bleu sur bleu et ne se lit plus. Même mécanique que le lien de connexion, plus haut. */ header[data-entete]:not([data-fige="1"]) .ent-bascule{color:var(--hol-text-inverse) !important; border-color:var(--hol-border-on-dark)} /* Les trois traits deviennent une croix à l'ouverture. Ils héritent de la couleur du bouton, donc ils suivent le basculement clair/sombre. */ .ent-traits{display:grid;gap:4px;width:18px} .ent-traits span{display:block;height:2px;border-radius:2px; background:currentColor;transition:transform .18s ease,opacity .18s ease} [aria-expanded="true"] .ent-traits span:nth-child(1){transform:translateY(6px) rotate(45deg)} [aria-expanded="true"] .ent-traits span:nth-child(2){opacity:0} [aria-expanded="true"] .ent-traits span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (prefers-reduced-motion:reduce){.ent-traits span{transition:none}} /* Le panneau. Il prend la couleur de la barre : sur le hero il est bleu nuit, une fois l'en-tête figé il devient clair. Les règles de bascule déjà écrites plus haut habillent alors son contenu sans rien de plus. */ .ent-menu{position:absolute;left:0;right:0;top:100%;display:none; flex-direction:column;align-items:stretch;gap:0; padding:6px var(--hol-gutter) 20px; /* Surface PLEINE, et non --hol-header-bg : ce token vaut du blanc à 94%, prévu pour flotter au-dessus du contenu avec un flou. Derrière un menu, on lisait la page à travers les liens. */ background:var(--hol-surface-1); border-top:1px solid var(--hol-border-subtle); box-shadow:var(--hol-shadow-2); max-height:calc(100svh - 100%);overflow-y:auto;overscroll-behavior:contain} header[data-entete]:not([data-fige="1"]) .ent-menu{background:var(--hol-surface-inverse); border-top-color:var(--hol-border-on-dark)} header[data-entete][data-menu-ouvert="1"] .ent-menu{display:flex} /* La navigation redevient une liste : plus de défilement latéral, chaque lien occupe la largeur et fait 48 px de haut, la taille d'un pouce. */ header[data-entete] nav{order:0 !important;flex:none !important; flex-direction:column;flex-wrap:nowrap !important; overflow-x:visible !important;gap:0 !important; margin-left:0 !important;white-space:normal} header[data-entete] nav a{display:flex;align-items:center;min-height:48px; font-size:16px !important; border-bottom:1px solid var(--hol-border-subtle)} header[data-entete]:not([data-fige="1"]) nav a{border-bottom-color:var(--hol-border-on-dark)} /* Langue et devise côte à côte, sur leur propre ligne. */ .ent-choix{display:flex;gap:10px;align-items:center;margin-top:18px} /* Compte et panier, taille de cible respectée. Le panier redevient une ligne nommée : dans une liste pleine largeur, une icône seule flotterait sans rien dire, et la pastille reprend sa place à la suite du mot. */ .ent-menu > a[data-compte], .ent-menu > .ent-deco, .ent-menu > a[data-panier]{min-height:48px;display:flex;align-items:center; font-size:16px;margin-top:6px} .ent-menu > .ent-deco .ent-deco__bouton{font-size:16px} /* Dans le panneau, le rond du compte est une ligne comme les autres : même hauteur de cible, même taille de texte, pleine largeur. */ .ent-menu > .hol-identite{min-height:48px;margin-top:6px;border-radius:var(--hol-r-sm)} .ent-menu > .hol-identite .hol-identite__nom{font-size:16px;max-width:none} /* UN ANGLE DROIT SUR UNE LIGNE SURLIGNÉE FAIT BRUT. Jimmy : « l'encadré qui montre que c'est sélectionné devrait avoir des bordures arrondies, ce serait plus professionnel ». La ligne garde sa pleine largeur, mais son fond de survol a maintenant les mêmes coins que les cartes du site, et un peu d'air de chaque côté pour qu'on les voie. */ .ent-menu > .ent-panier{justify-content:flex-start;padding:0 12px; margin-left:-12px;border-radius:var(--hol-r-sm)} .ent-panier-mot{display:inline} .ent-menu > .ent-panier .ent-panier-n{position:static;margin-left:10px;border:none} /* L'appel à l'action ferme le panneau, pleine largeur. */ .ent-menu > a:last-child{display:flex;align-items:center;justify-content:center; min-height:52px;margin-top:18px;font-size:16px !important; padding:0 20px !important} } /* =========================================================================== COMPOSANT « bloc image de fond » (.hol-bloc-image) Une carte sombre dont l'image occupe le fond à droite et dont SEUL LE BORD GAUCHE se dissout dans la couleur de la carte. Le texte passe par-dessus la zone noyée, il n'est pas enfermé dans une colonne à côté. Il vivait dans le style d'une seule page. Deux pages l'emploient désormais ; recopié, il aurait divergé au premier ajustement. Le fondu est un dégradé de la couleur du fond, pas un masque CSS : un masque laisse un bord net là où il n'est pas pris en charge, un dégradé se comporte partout pareil. =========================================================================== */ /* ----- Structure ---------------------------------------------------------- L'image occupe le fond, à droite, et se dissout vers la gauche dans le bleu de la carte. Le texte passe PAR-DESSUS cette dissolution : il n'est plus enfermé dans une colonne, il a la place de respirer. Le fondu est fait de deux dégradés superposés, pas d'un masque CSS : un masque laisserait un bord net là où il n'est pas pris en charge, alors qu'un dégradé de la couleur du fond se comporte partout pareil. */ /* LE TEXTE ET L'ACTION SUR UNE MÊME LIGNE, CENTRÉS. Le bouton était posé SOUS la colonne de texte : la carte gagnait sa hauteur, et l'espace ne se répartissait plus également en haut et en bas. Côte à côte et centrés, la hauteur de la carte est celle du texte, et les marges sont les mêmes des quatre côtés. La marge est écrite avec « .hol-scope » en tête : sans cela, la règle de « .hol-card », plus spécifique, l'emportait et la carte restait à 24 px au lieu des 34 à 60 px voulus ici. Le texte collait aux bords depuis le début. */ .hol-scope .hol-bloc-image{position:relative;overflow:hidden;isolation:isolate; padding:clamp(34px,5vw,60px); display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:clamp(22px,3vw,44px)} /* LA PHOTO COUVRE TOUTE LA CARTE, et c'est ce qui manquait. Elle n'occupait que les 62 % de droite : à trente-huit pour cent, le bord gauche de l'image tombait net sur le marine de la carte, et le voile, qui ne vaut là que soixante-douze pour cent, laissait voir cette arête comme un trait clair du haut en bas. Jimmy : « il y a une ligne blanche qui passe sur cette carte ». Un dégradé ne peut pas dissoudre un bord qui n'existe pas dans l'image : il faut que l'image soit là. Elle part donc du bord gauche, le cadrage se cale à droite pour que le sujet reste où il était, et c'est le voile seul qui décide de ce qu'on voit. Plus d'arête possible, à aucune largeur. */ /* Les quatre côtés en toutes lettres : « inset » n'existe pas sur les Android anciens que ce site doit servir. */ .hol-bloc-image__vue{position:absolute;margin:0; top:0;right:0;bottom:0;left:0;z-index:0} .hol-bloc-image__vue img, .hol-bloc-image__vue picture{display:block;width:100%;height:100%; object-fit:cover;object-position:75% center} /* SEUL LE BORD GAUCHE SE NOIE. Le dégradé est opaque sur la première moitié de la bande d'image, puis disparaît : passé 66 %, l'image est nette, sans aucun voile. Un voile qui la couvrirait entière reviendrait à l'assombrir, et il n'y aurait plus rien à montrer. POURQUOI 66 % ET NON 58 %. La colonne de texte va jusqu'à 66 % de la carte : une ligne de titre un peu longue, ou une note poussée à droite, atterrissait sur la zone déjà nette. Le voile s'arrête maintenant là où le texte s'arrête. La photo garde tout son tiers droit, celui où se trouve le sujet. */ .hol-bloc-image__fondu{position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg, var(--hol-surface-inverse) 0%, var(--hol-surface-inverse) 16%, var(--hol-hero-scrim-b) 38%, var(--hol-hero-scrim-c) 54%, transparent 66%)} /* Le texte déborde largement la moitié, et c'est possible parce que le bord gauche de l'image est déjà noyé : il s'arrête là où l'image redevient nette. Serré sur 620 px, le titre partait sur quatre lignes. */ .hol-bloc-image__mots{position:relative;z-index:1;max-width:min(66%,800px)} .hol-bloc-image__mots h2{max-width:none} .hol-bloc-image__mots p{max-width:54ch} /* ----- Le pied de la carte : l'action et sa note --------------------------- Les deux étaient collés l'un à l'autre en bas à gauche, empilés dans la colonne de texte, pendant que la moitié de la carte restait vide. Ils s'écartent maintenant aux deux bouts d'une même ligne. JUSQU'OÙ, EXACTEMENT. Pas jusqu'au bord : passé 58 % de la carte, le fondu est fini et la photo est nette. Une note grise posée là ne se lirait plus. La ligne s'arrête donc avant, dans la zone où l'image est encore noyée. */ /* LE BOUTON ET SA NOTE VONT JUSQU'À LA MARGE DROITE DE LA CARTE, serrés l'un contre l'autre comme au premier jour. Le groupe est calé à droite : c'est la marge de la carte qui l'arrête, pas une largeur calculée. */ .hol-bloc-image__pied{position:relative;z-index:1;flex:0 0 auto; display:flex;align-items:center;flex-wrap:wrap; justify-content:flex-end;gap:18px} .hol-bloc-image__pied p{margin:0;max-width:34ch} /* Sur un téléphone, une image de côté n'a plus de place : elle passe en fond de toute la carte, très en retrait, et le texte la recouvre. */ @media(max-width:860px){ /* Plus de côte à côte : le texte prend toute la largeur et le bouton passe dessous, comme avant. */ .hol-scope .hol-bloc-image{display:block} .hol-bloc-image__pied{margin-top:26px} .hol-bloc-image__vue{width:100%} /* Plus de largeur à répartir, et nulle part où se caler : les deux blocs se suivent simplement, à leur place. */ .hol-bloc-image__pied{justify-content:flex-start} /* LE BLEU DOIT ÊTRE EN HAUT, PARCE QUE L'ÉCRITURE EST BLANCHE. Les arrêts étaient en pourcentage de la hauteur de la carte. Sur un téléphone cette carte fait sept cents pixels de haut : « opaque à 54 % » tombait trois cent cinquante pixels plus bas que la première ligne du titre, qui se retrouvait donc en blanc sur la partie claire de la photo. Les arrêts sont maintenant en pixels, mesurés depuis le haut de la carte : la photo garde une fenêtre d'une centaine de pixels, le marine est plein à cent trente, et le texte, qui ne commence qu'à cent cinquante, est toujours posé dessus. */ /* CINQ ARRÊTS, ET LE DERNIER ARRIVE TARD. Avec trois arrêts, le voile passait de neuf dixièmes à l'opacité pleine en cinquante pixels : l'œil voit une arête, pas un fondu, et c'est ce que Jimmy appelle « mastoc ». Les quatre paliers de voile du hero sont donc tous employés, répartis en proportion de la hauteur réservée, et le marine plein n'arrive qu'à quatre-vingt-douze pour cent. On garde le corps de la photo bien plus bas, et la transition ne se repère plus. */ /* ET LE VOILE COMMENCE PLUS BAS, pour qu'on voie l'image. Il partait du bord haut de la carte : même très léger, un voile posé dès le premier pixel ternit toute la photo. Jimmy : « je veux voir un peu plus l'image ; que le dégradé sorte fort en bas et monte légèrement, avec de petits paliers en remontant. » Les quatre dixièmes du haut sont donc laissés nus, la photo s'y lit telle quelle. Le voile ne prend qu'ensuite, en quatre paliers resserrés vers le bas, et le marine est plein juste avant le premier mot. Fort en bas, léger en montant : c'est le sens de lecture de la carte. */ /* TREIZE ARRÊTS SUR UNE COURBE, ET PLUS AUCUN COUDE. Les quatre voiles du hero sont des paliers : entre deux, le navigateur interpole en ligne droite, et chaque changement de pente se voit comme un trait horizontal. Le plus visible était le premier, là où le voile démarrait. Jimmy : « la fin du dégradé est trop brusque ; je veux que mes yeux ne puissent même pas faire la différence entre le dégradé et la photo, qu'il baigne dedans ». Le voile suit donc une courbe, alpha = t puissance 2,5, échantillonnée en treize points. Il n'y a plus de départ : à un dixième de la hauteur l'opacité vaut trois millièmes, on ne peut pas la voir. Elle ne devient sensible qu'au deuxième tiers, et atteint sa valeur de pied juste sous le titre. Une courbe n'a pas de coude, donc il n'y a plus rien à repérer. */ .hol-bloc-image__fondu{background:linear-gradient(180deg, rgba(30, 35, 64, 0) 0, rgba(30, 35, 64, .003) calc(var(--hol-img-haut) * .10), rgba(30, 35, 64, .017) calc(var(--hol-img-haut) * .20), rgba(30, 35, 64, .046) calc(var(--hol-img-haut) * .30), rgba(30, 35, 64, .095) calc(var(--hol-img-haut) * .40), rgba(30, 35, 64, .166) calc(var(--hol-img-haut) * .50), rgba(30, 35, 64, .262) calc(var(--hol-img-haut) * .60), rgba(30, 35, 64, .385) calc(var(--hol-img-haut) * .70), rgba(30, 35, 64, .505) calc(var(--hol-img-haut) * .78), rgba(30, 35, 64, .626) calc(var(--hol-img-haut) * .85), rgba(30, 35, 64, .743) calc(var(--hol-img-haut) * .91), rgba(30, 35, 64, .849) calc(var(--hol-img-haut) * .96), var(--hol-voile-fond) var(--hol-img-haut))} .hol-bloc-image__mots{max-width:none} .hol-bloc-image__mots p{max-width:52ch} /* AVEC « .hol-scope » DEVANT, SINON LA RÈGLE NE PASSAIT PAS : la règle de base s'écrit « .hol-scope .hol-bloc-image », deux classes contre une, et elle gagnait. La carte gardait donc ses trente-quatre pixels de haut, la photo n'avait pas sa fenêtre, et le titre blanc tombait dessus. */ /* LA FENÊTRE DE LA PHOTO ET LA PLACE QU'ON LUI RÉSERVE SONT LA MÊME MESURE. Les arrêts du fondu étaient en pixels fixes, la réserve en clamp : sur un téléphone les deux tombaient juste, sur un iPad la réserve montait à deux cent vingt pendant que le marine devenait plein dès cent trente-deux, et il restait quatre-vingt-dix pixels de bleu nu entre la photo et le premier mot. Une seule variable, et l'écart ne peut plus réapparaître. */ /* ET ON LUI DONNE PLUS DE HAUTEUR POUR LE FAIRE : un fondu n'est doux que s'il a de la place. Deux cent vingt pixels sur un iPad n'en laissaient pas assez. */ .hol-scope .hol-bloc-image{--hol-img-haut:clamp(170px,38vw,300px); padding-top:var(--hol-img-haut)} } /* =========================================================================== FIL D'ARIANE DU SITE PUBLIC (.hol-fil) Une bande claire sous l'en-tête, collée juste dessous quand on défile : le chemin de retour ne doit pas disparaître au moment où l'on en a besoin, au fond d'une page longue. =========================================================================== */ /* La hauteur de l'en-tête n'est pas constante : il se replie sur deux rangs entre 900 et 1250 px, et fait alors 120 px au lieu de 70. Le fil se collait sous une valeur figée et passait donc SOUS l'en-tête à ces largeurs-là. Le script mesure la vraie hauteur et la pose ici ; 70 px reste le repli. */ .hol-fil{position:sticky;top:var(--hol-entete-h,70px);z-index:55; background:var(--hol-header-bg);backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid var(--hol-border-subtle)} .hol-fil ol{list-style:none;margin:0;padding:11px 0;display:flex;flex-wrap:wrap; align-items:center;gap:9px; font-size:13.5px;color:var(--hol-text-muted)} .hol-fil li{display:flex;align-items:center;gap:9px} .hol-fil li + li::before{content:"·";color:var(--hol-border-strong)} .hol-fil a{color:var(--hol-text-secondary);text-decoration:none; padding:3px 2px;border-radius:var(--hol-r-sm)} .hol-fil a:hover{color:var(--hol-brand);text-decoration:underline;text-underline-offset:3px} .hol-fil [aria-current]{color:var(--hol-brand);font-weight:600} /* Le retour se distingue : c'est une action, pas une étape du chemin. */ .hol-fil__retour{margin-right:4px} .hol-fil__retour + li::before{content:none} .hol-fil__retour a{display:inline-flex;align-items:center;gap:5px;min-height:34px; padding:0 12px;font-weight:600;color:var(--hol-brand); border:1px solid var(--hol-border-subtle);background:var(--hol-surface-1)} .hol-fil__retour a:hover{border-color:var(--hol-brand);text-decoration:none} @media (max-width:600px){ .hol-fil ol{font-size:12.5px;gap:7px;padding:9px 0} /* Sur un téléphone, le chemin complet ne tient pas : on garde le retour et la page courante, qui sont les deux seules choses utiles au doigt. */ .hol-fil li:not(.hol-fil__retour):not(:last-child){display:none} .hol-fil li:last-child::before{content:none} } /* =========================================================================== REMONTER EN HAUT (.hol-haut) Caché tant qu'on n'a pas descendu : un bouton permanent encombrerait le coin de l'écran sans servir. Révélé par le script, donc absent sans lui, ce qui est le bon repli pour un pur confort. =========================================================================== */ /* LE COIN BAS DROIT EST PARTAGÉ avec le bouton d'Eddy, qui s'y pose en bas. La remontée se range donc au-dessus de lui : superposés, l'un des deux deviendrait impossible à viser au doigt. La hauteur ajoutée est celle du bouton d'Eddy (60px) et l'écart entre les deux (12px). */ /* LA FLÈCHE SE CENTRE SUR LE BOUTON D'EDDY, pas sur son bord. Les deux étaient alignés à DROITE, à la même distance du bord de l'écran ; mais l'un fait soixante pixels et l'autre quarante-huit, donc leurs axes tombaient à six pixels l'un de l'autre, et la pile penchait. On décale donc de la moitié de la différence, calculée et non écrite : si la taille d'Eddy change un jour, l'axe suit. Sans Eddy, le repli vaut 48 et le décalage est nul. */ .hol-haut{position:fixed; right:calc(var(--eddy-bord, clamp(14px,3vw,28px)) + (var(--eddy-taille, 48px) - 48px) / 2); bottom:calc(clamp(14px,3vw,28px) + 72px); z-index:58;display:grid;place-items:center;width:48px;height:48px; border:1px solid var(--hol-border-subtle);border-radius:var(--hol-r-pill); background:var(--hol-surface-1);color:var(--hol-brand); box-shadow:var(--hol-shadow-2);cursor:pointer; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s ease,transform .2s ease,visibility .2s} .hol-haut[data-visible="1"]{opacity:1;visibility:visible;transform:none} /* Le bandeau cookies occupe le bas de l'écran tant qu'on n'a pas répondu. Le bouton se range au-dessus de lui plutôt que dessous, où il serait inatteignable au moment précis où la page est la plus longue. L'attribut est posé par le script, pas par « :has() » : ce sélecteur manque encore sur les Android anciens, que ce site doit servir. */ .hol-haut[data-bandeau="1"]{bottom:calc(var(--hol-bandeau-h, 104px) + 12px + 72px)} /* ═══ LES TROIS CHOIX DU BANDEAU COOKIES ════════════════════════════════════ AUCUN DES TROIS NE RÉAGISSAIT AU SURVOL : ils étaient habillés dans l'attribut « style », qui ne sait pas porter de « :hover ». Et le troisième était souligné, ce que Jimmy refuse. REFUSER RESTE AUSSI SIMPLE QU'ACCEPTER, et ce n'est pas une préférence de dessin : même taille, même graisse, même cible pour les deux premiers. Le troisième est un choix plus fin, « seulement l'indispensable » ; il se distingue par sa teinte et sa graisse, jamais par un trait. */ .hol-scope .hol-cook__btn{font-family:var(--hol-police-texte),sans-serif; min-height:40px;border-radius:var(--hol-r-sm); cursor:pointer;white-space:nowrap;text-decoration:none; transition:background-color .15s ease,border-color .15s ease, color .15s ease} .hol-scope .hol-cook__btn--oui{background:var(--hol-brand);color:var(--hol-text-inverse); font-weight:600;font-size:13.5px;border:1px solid var(--hol-brand); padding:0 16px} .hol-scope .hol-cook__btn--oui:hover{background:var(--hol-brand-active); border-color:var(--hol-brand-active)} .hol-scope .hol-cook__btn--non{background:transparent;color:var(--hol-text-inverse); font-weight:600;font-size:13.5px; border:1px solid var(--hol-border-on-dark);padding:0 16px} .hol-scope .hol-cook__btn--non:hover{background:var(--hol-verre-fond); border-color:var(--hol-text-inverse)} /* LE TROISIÈME CHOIX : un fantôme qui se remplit quand on le vise. Sa teinte au repos reste en retrait, et elle monte au blanc plein au survol : la lisibilité ne dépend donc jamais de l'état. */ .hol-scope .hol-cook__btn--min{background:transparent;color:var(--hol-text-inverse-2); font-weight:500;font-size:12.5px; border:1px solid transparent;padding:0 12px} .hol-scope .hol-cook__btn--min:hover{background:var(--hol-verre-fond); border-color:var(--hol-verre-bord); color:var(--hol-text-inverse)} .hol-scope .hol-cook__btn:focus-visible{outline:2px solid var(--hol-focus-inverse); outline-offset:2px} @media (prefers-reduced-motion:reduce){.hol-scope .hol-cook__btn{transition:none}} .hol-haut:hover{background:var(--hol-brand);color:var(--hol-text-inverse); border-color:var(--hol-brand)} .hol-haut svg{width:20px;height:20px} @media (prefers-reduced-motion:reduce){.hol-haut{transition:none}} /* =========================================================================== QUESTIONS FRÉQUENTES (.faq-*) Un accordéon
natif : dépliable sans script, navigable au clavier, et le texte des réponses reste lisible par un moteur de recherche. Le script n'ajoute que le mouvement et le calage sous les barres collantes. =========================================================================== */ /* UNE ANCRE S'ÉCARTE DES BARRES COLLANTES. Sans cette marge, le navigateur pose le titre visé exactement en haut de la fenêtre, c'est-à-dire derrière l'en-tête et le fil d'Ariane : on arrive sur la bonne section en croyant qu'elle a sauté. La hauteur réelle des deux barres est posée par le script du pied de page ; 128px est le repli quand il ne tourne pas. */ .faq-section,.faq-item,.faq-ecrire{scroll-margin-top:calc(var(--hol-collant, 128px) + 14px)} .faq-liste{display:flex;flex-direction:column;gap:10px} .faq-item{padding:0;overflow:hidden} .faq-som{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px; padding:18px 20px;font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:16.5px;line-height:1.35;color:var(--hol-text-primary); transition:background .18s ease} /* Safari pose son propre triangle par un pseudo-élément à lui. */ .faq-som::-webkit-details-marker{display:none} .faq-som::marker{content:""} .faq-som:hover{background:var(--hol-brand-wash)} .faq-som:focus-visible{outline:2px solid var(--hol-focus);outline-offset:-2px} .faq-som__q{flex:1} .faq-chev{flex:none;width:26px;height:26px;border-radius:var(--hol-r-pill); background:var(--hol-brand-wash);color:var(--hol-brand); display:flex;align-items:center;justify-content:center;font-size:13px; transition:transform .22s ease,background .18s ease,color .18s ease} /* Le chevron dit l'état : vers le bas fermé, vers le haut ouvert. Il ne le disait pas, faute de cette règle : la transition était écrite, la rotation jamais. */ .faq-item[open] .faq-chev{transform:rotate(180deg); background:var(--hol-brand);color:var(--hol-text-inverse)} /* Le conteneur dont la hauteur s'anime. Il ne porte aucune marge intérieure : une marge ne suit pas la hauteur animée et laisserait un sursaut au départ comme à l'arrivée. Tout l'espace est porté par le bloc du dedans. */ .faq-corps{overflow:hidden} .faq-rep{padding:16px 20px 20px;border-top:1px solid var(--hol-border-subtle); font-size:15px;line-height:1.65;color:var(--hol-text-secondary)} /* --- Poser une question, sans quitter la page --------------------------- Une question qui n'est pas dans la liste EST une question de la liste : on la pose au même endroit, dans le même mouvement. Partir sur une page de contact pour une seule phrase fait renoncer, et ce renoncement ne se voit nulle part. */ .faq-ecrire{margin-top:22px;border:1px solid var(--hol-border-strong); border-radius:var(--hol-r-lg);background:var(--hol-surface-1); overflow:hidden} .faq-ecrire[open]{border-color:var(--hol-brand)} .faq-ecrire__som{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px; padding:16px 20px;font-size:15px;color:var(--hol-text-secondary); transition:background .18s ease} .faq-ecrire__som::-webkit-details-marker{display:none} .faq-ecrire__som::marker{content:""} .faq-ecrire__som:hover{background:var(--hol-brand-wash)} .faq-ecrire__som:focus-visible{outline:2px solid var(--hol-focus);outline-offset:-2px} .faq-ecrire__som b{color:var(--hol-brand);font-weight:600} .faq-ecrire__signe{flex:none;margin-left:auto;color:var(--hol-brand);font-size:17px; transition:transform .22s ease} .faq-ecrire[open] .faq-ecrire__signe{transform:rotate(90deg)} .faq-ecrire__corps{padding:4px 20px 22px;border-top:1px solid var(--hol-border-subtle)} /* L'ASTÉRISQUE DIT « DEMANDÉ », il ne dit pas « erreur ». C'est un repère de formulaire, pas un état du système : il n'annonce rien qui soit arrivé. Il prend donc le rouge de la marque, et le sens est porté par la légende sous les champs, pas par la couleur seule. */ .faq-oblig{color:var(--hol-accent-texte);margin-left:3px;font-weight:700} .faq-legende{font-size:12.5px;line-height:1.5;color:var(--hol-text-muted);margin:14px 0 0} .faq-etiq{display:block;font-size:13.5px;font-weight:600;margin:16px 0 6px; color:var(--hol-text-primary)} .faq-champ{width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px; background:var(--hol-surface-1);color:var(--hol-text-primary); border:1px solid var(--hol-border-strong);border-radius:var(--hol-r-sm)} .faq-champ:focus-visible{outline:2px solid var(--hol-focus);outline-offset:1px; border-color:var(--hol-brand)} textarea.faq-champ{min-height:120px;line-height:1.55;resize:vertical} .faq-final{font-size:13.5px;line-height:1.55;color:var(--hol-text-muted);margin:14px 0 0} .faq-envoi{display:inline-flex;align-items:center;justify-content:center;min-height:50px; margin-top:14px;padding:0 26px;cursor:pointer;font:inherit;font-weight:600; font-size:15.5px;border:0;border-radius:var(--hol-r-sm); background:var(--hol-brand);color:var(--hol-text-inverse)} .faq-mot{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:12px 14px; font-size:14.5px;line-height:1.55;border-radius:var(--hol-r-sm)} .faq-mot--ok{background:var(--hol-succes-wash);border:1px solid var(--hol-succes-border); color:var(--hol-succes)} .faq-mot--non{background:var(--hol-accent-wash);border:1px solid var(--hol-accent-border); color:var(--hol-erreur)} @media (prefers-reduced-motion:reduce){ .faq-chev,.faq-ecrire__signe,.faq-som,.faq-ecrire__som{transition:none} } /* =========================================================================== À L'IMPRESSION, RIEN NE FLOTTE Une attestation imprimée est une pièce : ni bouton de remontée, ni assistant dans la marge. Les pages qui s'impriment ont leur propre règle pour le reste. =========================================================================== */ @media print{ .hol-haut,.eu-eddy,.eu-eddy-launch,.eu-eddy-nudge{display:none !important} } /* =========================================================================== BANDEAU « RÉSERVER UN COURS D'ESSAI » (.essai-*) Les choix étaient des boutons qui ne choisissaient rien : un attribut « aria-pressed » figé dans le balisage, et aucun script pour le changer. Ce sont maintenant de vrais boutons radio, cachés à l'œil mais présents dans le formulaire : la sélection fonctionne SANS JAVASCRIPT, elle se parcourt au clavier avec les flèches, et elle part avec l'envoi. =========================================================================== */ .essai-choix{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px} /* Le bouton radio reste dans la page pour le clavier et les lecteurs d'écran : « display:none » le retirerait des deux. */ .essai-choix input{position:absolute;opacity:0;width:1px;height:1px;margin:0} .essai-opt{display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 14px;cursor:pointer; border:1px solid var(--hol-border-on-dark);border-radius:var(--hol-r-sm); background:transparent;color:var(--hol-text-inverse-2); font-family:var(--hol-police-mono),monospace;font-size:13px;font-weight:600; transition:background .18s ease,border-color .18s ease,color .18s ease} .essai-opt--large{flex:1 1 130px;font-family:var(--hol-police-texte),sans-serif;font-size:13.5px} .essai-choix input:checked + .essai-opt{border-color:var(--hol-accent-clair); background:var(--hol-glass-hi); color:var(--hol-text-inverse)} .essai-choix input:focus-visible + .essai-opt{outline:2px solid var(--hol-brand-clair); outline-offset:2px} .essai-choix label:hover .essai-opt{border-color:var(--hol-bordure-sur-sombre); color:var(--hol-text-inverse)} @media (prefers-reduced-motion:reduce){.essai-opt{transition:none}} /* =========================================================================== CARTES DU CATALOGUE (.cat-card) Elles n'avaient que du texte : trois lignes à lire avant de savoir de quoi il s'agit, et deux cartes voisines impossibles à distinguer d'un coup d'œil. Chacune porte maintenant son visuel, et sa marque d'état posée dessus. LE RAPPORT EST TENU SANS « aspect-ratio », par la vieille méthode du remplissage proportionnel : la propriété manque sur les Android anciens que ce site doit servir, et une image sans hauteur y ferait sauter toute la grille au chargement. =========================================================================== */ .cat-card{padding:0;overflow:hidden;display:flex;flex-direction:column} .cat-card__vue{position:relative;margin:0;flex:none;overflow:hidden; padding-bottom:62%;background:var(--hol-surface-0)} .cat-card__vue > img, .cat-card__vue > .hol-slot{position:absolute;top:0;right:0;bottom:0;left:0; width:100%;height:100%;object-fit:cover; transition:transform .35s ease} /* Le survol anime l'image, et elle seule : c'est la règle des cartes format de l'accueil, reprise telle quelle pour que le site n'ait qu'un seul geste. */ .cat-card:hover .cat-card__vue > img{transform:scale(1.03)} /* La marque d'état se pose SUR la photo, en pastille claire : sur un fond d'image quelconque, un aplat blanc est la seule valeur qui tienne toujours. */ .cat-card__marque{position:absolute;top:12px;right:12px;z-index:1; display:inline-flex;align-items:center; font-family:var(--hol-police-mono),monospace;font-size:10.5px; font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:5px 10px;border-radius:var(--hol-r-pill); background:var(--hol-surface-1);color:var(--hol-brand); box-shadow:var(--hol-shadow-1)} .cat-card__marque--bientot{color:var(--hol-text-muted)} .cat-card__corps{display:flex;flex-direction:column;flex:1 1 auto;padding:20px 22px 22px} @media (prefers-reduced-motion:reduce){ .cat-card__vue > img{transition:none} .cat-card:hover .cat-card__vue > img{transform:none} } /* =========================================================================== CADRE VIDÉO (.hol-video) Un seul cadre pour tout le site : la page Méthode l'avait écrit à la main, la fiche de cours en avait besoin à son tour. Recopié, il aurait divergé. =========================================================================== */ .hol-video{position:relative;overflow:hidden;padding:0} .hol-video__cadre{position:relative;padding-bottom:56.25%;background:var(--hol-surface-0)} .hol-video__cadre > img, .hol-video__cadre > video, .hol-video__cadre > .hol-slot{position:absolute;top:0;right:0;bottom:0;left:0; width:100%;height:100%;object-fit:cover} .hol-video__lecture{position:absolute;top:0;right:0;bottom:0;left:0; display:flex;align-items:center;justify-content:center;pointer-events:none} /* « display:flex » l'emporte sur le display:none que le navigateur pose sur un élément caché : sans cette ligne, le bouton restait affiché par-dessus la vidéo lancée, et l'on croyait le clic sans effet. */ .hol-video__lecture[hidden]{display:none} /* Le même dessin, mais cliquable : sur un vrai lecteur, c'est un bouton. Le voile ne prend pas le clic (pointer-events:none plus haut) ; celui-ci, si. */ .hol-video__lecture--bouton{pointer-events:auto;cursor:pointer; padding:0;border:0;background:none; width:100%;height:100%;color:inherit} .hol-video__lecture--bouton:hover .hol-video__bouton{background:var(--hol-brand-hover)} .hol-video__lecture--bouton:focus-visible{outline:none; box-shadow:inset 0 0 0 3px var(--hol-focus-inverse)} .hol-video__bouton{width:76px;height:76px;border-radius:var(--hol-r-pill); background:var(--hol-brand);border:1px solid var(--hol-glass-hi); box-shadow:var(--hol-shadow-3); display:flex;align-items:center;justify-content:center} .hol-video__bouton span{width:0;height:0;margin-left:5px; border-left:20px solid var(--hol-text-inverse); border-top:13px solid transparent;border-bottom:13px solid transparent} /* Sur un vrai lecteur, la pastille remonte : en bas, elle se posait sur la barre de commandes du navigateur et prenait le clic de la lecture. */ .hol-video--lecteur .hol-video__etiquette{top:16px;bottom:auto} .hol-video__etiquette{position:absolute;left:16px;bottom:16px;pointer-events:none; font-family:var(--hol-police-mono),monospace;font-size:11px; color:var(--hol-text-inverse);background:var(--hol-chip-dark); backdrop-filter:blur(6px);border:1px solid var(--hol-border-on-dark); padding:5px 10px;border-radius:7px} /* =========================================================================== SYLLABUS (.syl-*) Une liste de modules et de leçons se lit mal en tableau plat : on cherche où commence le module suivant. Chaque module devient un bloc, son numéro une pastille, et les leçons se suivent le long d'un rail vertical, comme les arrêts d'un parcours. C'est la métaphore de la passerelle du site, tenue avec un trait de deux pixels et rien d'autre. =========================================================================== */ .syl-module{padding:0;margin-bottom:14px;overflow:hidden} .syl-module__tete{display:flex;align-items:center;gap:14px;padding:14px 18px; background:var(--hol-brand-wash); border-bottom:1px solid var(--hol-border-subtle)} .syl-module__n{flex:none;display:grid;place-items:center;width:30px;height:30px; border-radius:var(--hol-r-pill);background:var(--hol-brand); color:var(--hol-text-inverse); font-family:var(--hol-police-mono),monospace;font-size:12px;font-weight:600} .syl-module__titre{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:16.5px;line-height:1.25;min-width:0} .syl-module__compte{margin-left:auto;flex:none; font-family:var(--hol-police-mono),monospace;font-size:11px; color:var(--hol-text-secondary);background:var(--hol-surface-1); border:1px solid var(--hol-border-subtle); padding:4px 10px;border-radius:var(--hol-r-pill);white-space:nowrap} /* Le rail : il court entre la première et la dernière leçon, jamais au-delà, sinon il pend sous la dernière comme un fil coupé. */ .syl-lecons{position:relative;padding:10px 14px 14px} .syl-lecons::before{content:"";position:absolute;left:26px;top:22px;bottom:22px; width:2px;background:var(--hol-border-subtle)} .syl-lecon{position:relative;display:flex;align-items:center;gap:14px; padding:10px 8px;border-radius:var(--hol-r-sm); transition:background .18s ease} .syl-lecon:hover{background:var(--hol-surface-0)} /* L'anneau blanc masque le rail derrière la puce : sans lui, le trait traverse le point et le fait paraître creux. */ .syl-puce{flex:none;width:10px;height:10px;border-radius:var(--hol-r-pill); background:var(--hol-brand-clair);box-shadow:0 0 0 4px var(--hol-surface-1)} .syl-lecon__titre{flex:1;min-width:0;font-size:14.5px;line-height:1.4; color:var(--hol-text-primary)} .syl-niveau{flex:none;font-family:var(--hol-police-mono),monospace;font-size:11px;font-weight:600; color:var(--hol-brand);background:var(--hol-brand-wash); padding:3px 8px;border-radius:var(--hol-r-pill)} .syl-type{flex:none;font-family:var(--hol-police-mono),monospace;font-size:11px; color:var(--hol-text-muted)} @media (max-width:520px){ .syl-type{display:none} .syl-module__titre{font-size:15px} } @media (prefers-reduced-motion:reduce){.syl-lecon{transition:none}} /* =========================================================================== FICHE LATÉRALE D'UN COURS (.cours-fiche) Trois lignes de texte gris se ressemblent toutes : on relit les trois pour trouver celle qui répond. Chaque ligne porte donc son signe, et son libellé passe en capitales étroites pour se distinguer de la réponse. =========================================================================== */ .cours-fiche{padding:20px 22px 22px} .cours-fiche__kicker{font-family:var(--hol-police-mono),monospace;font-size:10px; letter-spacing:.1em;text-transform:uppercase; color:var(--hol-text-muted);margin-bottom:6px} .cours-fiche__ligne{display:flex;align-items:flex-start;gap:13px; padding:14px 0;border-top:1px solid var(--hol-border-subtle)} .cours-fiche__icone{flex:none;display:grid;place-items:center;width:30px;height:30px; border-radius:var(--hol-r-sm); background:var(--hol-brand-wash);color:var(--hol-brand)} .cours-fiche__icone svg{width:17px;height:17px} .cours-fiche__texte{display:flex;flex-direction:column;gap:3px;min-width:0} .cours-fiche__label{font-family:var(--hol-police-mono),monospace;font-size:10.5px; letter-spacing:.08em;text-transform:uppercase; color:var(--hol-text-muted)} .cours-fiche__val{font-size:14.5px;line-height:1.45;color:var(--hol-text-primary)} .cours-fiche__cta{--hol-lien:var(--hol-text-inverse);--hol-lien-survol:var(--hol-text-inverse); display:block;text-align:center;min-height:48px;line-height:48px; margin-top:20px;background:var(--hol-brand);color:var(--hol-text-inverse); font-weight:600;font-size:15px;border-radius:var(--hol-r-sm); text-decoration:none} .cours-fiche__cta:hover{background:var(--hol-brand-hover)} /* =========================================================================== HERO D'UNE FICHE DE COURS (.cours-hero) UNE FICHE DE COURS EST UNE PAGE DE VENTE. Le premier écran répond à trois questions, avant tout défilement : de quoi s'agit-il, à quoi cela ressemble, par où j'entre. Le titre répond à la première, la vidéo à la deuxième, les deux boutons à la troisième. Tout le reste de la page vient après. LA VIDÉO MONTE DANS LE HERO. Elle vivait sous le pli : on arrivait sur une carte coupée en deux, moitié dedans moitié dehors, ce qui donne l'air d'une page mal montée avant même qu'on ait lu une ligne. LA PHRASE RESTE SOUS LE TITRE, DANS SA COLONNE. Elle a d'abord couru sous les deux colonnes, pour tenir sur deux lignes : elle passait alors sous la carte vidéo, et l'on ne voyait plus à quoi elle se rattachait. Une colonne, un bloc : le titre, la phrase et les boutons tombent sur le même bord, la vidéo occupe l'autre colonne, et rien ne se chevauche. DEUX LIGNES À PARTIR DE 1400 px, largeur à laquelle la phrase la plus longue des deux langues tient entièrement dans sa colonne (mesuré : 739 px de large à 16,5 px). En dessous, elle s'écoule sur trois lignes plutôt que d'être tronquée : mieux vaut une ligne de plus qu'une phrase coupée au milieu. =========================================================================== */ .cours-hero{position:relative;background:var(--hol-hero-navy);overflow:hidden} .cours-hero__fond,.cours-hero__voile{position:absolute;top:0;right:0;bottom:0;left:0} .cours-hero__fond{z-index:0} /* Deux voiles, pas un : l'horizontal tient la colonne de texte, le vertical assombrit le bas du cadre, où la photo remonte derrière la phrase et les boutons. Sans le second, du texte blanc passerait sur une zone claire. */ .cours-hero__voile{z-index:1;pointer-events:none; background:linear-gradient(90deg,var(--hol-hero-scrim-a) 0%, var(--hol-hero-scrim-b) 48%, var(--hol-hero-scrim-c) 100%)} .cours-hero__voile--bas{background:linear-gradient(0deg,var(--hol-hero-scrim-d) 0%, var(--hol-hero-scrim-nul) 58%)} .cours-hero__grille{--hol-cours-titre:clamp(36px,4.6vw,62px); position:relative;z-index:2;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,34%); column-gap:44px;row-gap:22px;align-items:center; padding-top:58px;padding-bottom:62px} .cours-hero__tete {grid-column:1;grid-row:1;min-width:0} .cours-hero__bas {grid-column:1;grid-row:2;min-width:0} /* La vidéo tient toute la colonne de droite, centrée en face du bloc de texte. */ .cours-hero__media{grid-column:2;grid-row:1 / span 2;align-self:center;min-width:0} .cours-hero__retour{--hol-lien:var(--hol-text-inverse-2);--hol-lien-survol:var(--hol-text-inverse); display:inline-block;margin-bottom:16px; font-size:13.5px;font-weight:600;text-decoration:none} .cours-hero__retour:hover{text-decoration:underline;text-underline-offset:3px} .cours-hero__kicker{font-family:var(--hol-police-mono),monospace;font-size:12px;letter-spacing:.13em; text-transform:uppercase;color:var(--hol-accent-clair);margin-bottom:14px} /* La taille du titre est nommée : la hauteur réservée au hero s'en déduit, plus bas, et les deux ne peuvent plus diverger. */ .cours-hero__titre{font-family:var(--hol-police-titre),sans-serif;font-weight:800; font-size:var(--hol-cours-titre);line-height:1.03;letter-spacing:-.025em; color:var(--hol-text-inverse);margin:0;max-width:22ch;text-wrap:balance} /* VINGT-DEUX SIGNES, ET NON QUATORZE. Jimmy, le 24 octobre : « Anglais du quotidien » sur une seule ligne, comme « Everyday English » en anglais. À quatorze, le nom français se coupait en deux alors que la colonne avait la place. Un titre plus long que vingt-deux signes repasse sur deux lignes, équilibrées par « balance ». */ .cours-hero__desc{margin:0;font-size:16.5px;line-height:1.6; color:var(--hol-text-inverse-1);text-wrap:pretty} .cours-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .cours-hero__cta{--hol-lien:var(--hol-text-inverse);--hol-lien-survol:var(--hol-text-inverse); display:inline-flex;align-items:center;justify-content:center; min-height:54px;padding:0 30px;border:1px solid var(--hol-brand); background:var(--hol-brand);color:var(--hol-text-inverse); font-weight:600;font-size:16px;border-radius:var(--hol-r-sm);text-decoration:none} .cours-hero__cta:hover{background:var(--hol-brand-hover);border-color:var(--hol-brand-hover)} .cours-hero__cta--ghost{background:var(--hol-glass);border-color:var(--hol-border-on-dark)} .cours-hero__cta--ghost:hover{background:var(--hol-glass-hi);border-color:var(--hol-glass-hi)} .cours-hero__cta:focus-visible{outline:none; box-shadow:0 0 0 2px var(--hol-hero-navy),0 0 0 5px var(--hol-focus-inverse)} /* La carte vidéo se détache du bleu nuit : c'est le point de fuite du premier écran, elle porte donc l'ombre la plus profonde de la palette. */ .cours-hero__media .hol-video{box-shadow:var(--hol-shadow-3)} /* LA HAUTEUR SE RÉSERVE SUR LE CADRE, PAS DANS LE TEXTE. « Everyday English » tient sur une ligne, « Anglais du quotidien » en prend deux : le hero changeait de hauteur d'une langue à l'autre et la carte vidéo sautait. Réserver la deuxième ligne DANS le titre creusait un trou sous un titre court. La réserve est donc posée sur le cadre, et « align-content » recentre tout le bloc dedans : sous un titre d'une ligne, le sous-titre remonte contre le titre, et le jeu part en air au-dessus et en dessous, là où personne ne le voit. Le calcul suit la taille du titre, donc toutes les largeurs : deux lignes de titre, plus ce qui l'entoure. Il est volontairement large de quelques pixels : trop court, il serait ignoré et l'instabilité reviendrait. */ @media (min-width:901px){ .cours-hero__grille{min-height:calc(342px + 2.06 * var(--hol-cours-titre)); align-content:center} } /* Sous 1280 px, la phrase n'est plus tenue à deux lignes : elle peut en prendre trois d'un côté et quatre de l'autre, le français étant plus long que l'anglais. La réserve prend donc une ligne de phrase de plus. */ @media (min-width:901px) and (max-width:1279px){ .cours-hero__grille{min-height:calc(367px + 2.06 * var(--hol-cours-titre))} } /* Entre 900 et 1400 px, la colonne de texte n'est plus assez large pour tenir la phrase en deux lignes à 16,5 px. Plutôt que de la laisser filer sur trois lignes, on rend 4 points de largeur à la colonne de gauche et on descend d'un point de corps : les deux langues repassent en deux lignes jusque vers 1260 px, sans jamais descendre sous les 13 px de la charte. */ @media (min-width:901px) and (max-width:1399px){ .cours-hero__grille{grid-template-columns:minmax(0,1fr) minmax(0,30%)} .cours-hero__desc{font-size:15.5px} } /* La coupe à deux lignes ne s'arme QUE là où les deux langues y tiennent entièrement : au-dessous, elle tronquerait une phrase au milieu. */ @media (min-width:1280px){ .cours-hero__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} } /* Sous 900 px la vidéo passe SOUS le titre et AVANT la phrase : c'est encore elle qu'on doit voir sans défiler, un téléphone n'ayant pas la place de mettre deux blocs côte à côte. */ /* Sur téléphone la même règle s'applique, mais la vidéo entre dans le compte : elle est empilée sous le titre, et sa hauteur vaut 9/16 de la largeur du cadre, gouttières déduites. Cela se calcule, donc rien n'est deviné. */ @media (max-width:900px){ .cours-hero__grille{grid-template-columns:minmax(0,1fr);row-gap:22px; padding-top:34px;padding-bottom:40px; align-content:center; min-height:calc(458px + 2.06 * var(--hol-cours-titre) + 0.5625 * (100vw - 80px))} .cours-hero__tete,.cours-hero__media,.cours-hero__bas{grid-column:1;grid-row:auto} .cours-hero__titre{max-width:none} .cours-hero__desc{font-size:16px} .cours-hero__actions{margin-top:20px} } /* Les boutons ne prennent toute la largeur que sur un téléphone. Sur une tablette en portrait, un bouton de 724 px de long ne se lit plus comme un bouton : il garde donc sa largeur naturelle dès 600 px. */ @media (max-width:600px){ .cours-hero__cta{width:100%} } /* Sous 600 px la gouttière tombe à 22 px : le cadre vidéo s'élargit d'autant, et la hauteur réservée suit. */ @media (max-width:600px){ .cours-hero__grille{min-height:calc(458px + 2.06 * var(--hol-cours-titre) + 0.5625 * (100vw - 44px))} } /* Sur un téléphone, le surtitre se lit encore à 11 px en capitales étroites, et tient alors sur une seule ligne : à 12 px il passait à deux et poussait le titre d'autant. */ @media (max-width:600px){ .cours-hero__kicker{font-size:11px;letter-spacing:.09em;margin-bottom:12px} } /* =========================================================================== LE TEMPS DE SE POSER (html[data-hol-pose]) L'en-tête est bleu nuit en haut de page et clair dès qu'on défile, et il passe de l'un à l'autre en trois dixièmes de seconde. C'est juste quand on défile. Ça ne l'est pas au chargement : une page rouverte plus bas (un rafraîchissement, un changement de langue) s'affichait avec l'en-tête du haut, puis le voyait virer sous les yeux. Un reflet, à chaque ouverture. Tant que l'attribut est posé, AUCUNE transition ne joue nulle part : la page prend son état, d'un coup et sans bruit. Le script de l'en-tête le retire une fois la page posée, et tout redevient animé pour la suite. L'attribut n'est posé que par ce script : sans JavaScript, ces règles ne s'appliquent jamais. =========================================================================== */ html[data-hol-pose] *, html[data-hol-pose] *::before, html[data-hol-pose] *::after{transition:none !important} /* =========================================================================== TÊTE DU CATALOGUE (.cat-tete) Le titre et le dessin de signature, côte à côte. Le dessin est décoratif : sous 900 px la colonne disparaît plutôt que de se tasser, un téléphone devant garder sa hauteur pour les cours eux-mêmes. =========================================================================== */ .cat-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%); column-gap:40px;align-items:center;padding-top:60px;padding-bottom:0} .cat-tete__texte{min-width:0} .cat-tete__signe{min-width:0} @media (max-width:900px){ .cat-tete{grid-template-columns:minmax(0,1fr);padding-top:44px} .cat-tete__signe{display:none} } /* =========================================================================== LES SIGNATURES DESSINÉES (.hol-signe) Une par page, à droite du titre : le catalogue, la méthode, l'histoire, les tarifs, les questions fréquentes. Toutes tiennent dans le même trait de deux pixels, les mêmes pastilles, le même mono pour les niveaux, et ne tirent leurs couleurs que des tokens. Elles sont décoratives : le titre porte le sens, elles le racontent. Elles disparaissent quand la colonne disparaît, plutôt que de se tasser : sur un téléphone, la hauteur revient au contenu. =========================================================================== */ .hol-signe{display:block;width:100%;height:auto;max-width:480px;margin-left:auto} /* Hero de page : le texte à gauche, le dessin à droite. La variante étroite sert aux titres qui réclament leur largeur, comme celui de la méthode, qui passerait à trois lignes sous 780 px. */ .hero-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36%); column-gap:40px;align-items:center;width:100%} .hero-duo--etroit{grid-template-columns:minmax(0,1fr) minmax(0,28%)} .hero-duo__signe{min-width:0} @media (max-width:900px){ .hero-duo,.hero-duo--etroit{grid-template-columns:minmax(0,1fr)} .hero-duo__signe{display:none} } /* Questions fréquentes : la liste garde ses 840 px, le dessin prend le reste et se cale en haut, à hauteur du titre. Il part plus tôt que les autres : sous 1100 px la liste occupe déjà toute la largeur utile. */ .faq-duo{display:grid;grid-template-columns:minmax(0,840px) minmax(0,1fr); column-gap:48px;align-items:center} .faq-duo__liste{min-width:0;max-width:840px} /* Calé au milieu de la hauteur de la liste, et poussé contre le bord droit : c'est la place que la section lui laisse. */ .faq-duo__signe{min-width:0} .faq-duo__signe .hol-signe{max-width:340px} @media (max-width:1100px){ .faq-duo{grid-template-columns:minmax(0,1fr)} .faq-duo__signe{display:none} } /* =========================================================================== LES TRÈS PETITS ÉCRANS (320 px : iPod touch, iPhone SE de première génération, Android d'entrée de gamme encore très répandus en Haïti) DEUX DÉBORDEMENTS, DEUX CAUSES, MESURÉES. 1. L'EN-TÊTE. Sous 1100 px la barre est en « nowrap » : le logo à gauche, le bouton à droite, et rien entre les deux. Le logo fait 188 px à sa hauteur de charte, le bouton 96 px avec son mot, la gouttière en prend 44 : il faut 340 px de large pour que tout tienne. En dessous, le mot « Menu » s'efface et les trois traits suffisent. Le bouton garde son nom pour les lecteurs d'écran, qui l'annoncent comme avant. Ni la hauteur du logo ni la gouttière ne bougent : ce sont deux règles de marque, et c'est au libellé de céder. 2. LES GRILLES DE CARTES. Une piste « minmax(300px,1fr) » réclame 300 px pour sa colonne, alors qu'il n'en reste que 276 : la carte dépassait de 24 px. Sous 600 px, ces grilles n'ont de toute façon qu'une colonne, la deuxième ne pouvant apparaître qu'autour de 650 px de large : leur rendre la largeur disponible ne change donc rien ailleurs, et supprime le débordement là où il existe. =========================================================================== */ @media (max-width:340px){ .ent-bascule-mot{display:none} } @media (max-width:600px){ .hol-scope [style*="minmax(300px"], .hol-scope [style*="minmax(280px"]{grid-template-columns:minmax(0,1fr) !important} } /* =========================================================================== LES JALONS D'UN PARCOURS (.jalons) Quatre cartes posées côte à côte ne disaient pas qu'elles se suivent : on y lisait quatre faits, pas un chemin. Elles s'accrochent donc au rail de la passerelle, celui du programme d'un cours et des dessins de signature, et chacune porte son numéro sur le rail. LE RAIL SE DESSINE PAR MORCEAUX : chaque jalon trace le segment qui le relie au suivant, et le dernier n'en trace pas. C'est ce qui permet au trait de commencer au premier point et de s'arrêter au dernier, sans calcul de largeur ni de gouttière, quelle que soit la taille de l'écran. LE DERNIER JALON EST L'ARRIVÉE : son point se remplit, sa carte prend le fond de la marque. C'est HOLANGCOURS, le reste du chemin y mène. Sur téléphone le rail se redresse : il descend à gauche, les jalons se suivent de haut en bas, comme les leçons d'un module. =========================================================================== */ .jalons{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} .jalon{position:relative;padding-top:40px;min-width:0} .jalon::before{content:"";position:absolute;top:16px;left:20px;right:-22px;height:2px; background:var(--hol-border-strong);opacity:.45} .jalon:last-child::before{content:none} /* LE POINT SUR LE RAIL NE PORTE PLUS LE NUMÉRO : le numéro est descendu dans la carte, en grand. Deux fois le même chiffre à dix pixels d'écart, c'était une redite ; le rail n'a besoin que de ses points. */ .jalon__n{position:absolute;top:9px;left:0;z-index:1; width:15px;height:15px;border-radius:var(--hol-r-pill); background:var(--hol-surface-1);border:2px solid var(--hol-brand-clair)} .jalon:last-child .jalon__n{background:var(--hol-brand);border-color:var(--hol-brand)} .jalon__carte{position:relative;overflow:hidden; display:flex;flex-direction:column;gap:13px;height:100%;padding:22px 22px 26px} /* Le numéro en filigrane, dans l'angle bas : il numérote sans se mettre devant le texte, et donne à la carte le poids qui lui manquait. */ .jalon__chiffre{position:absolute;right:14px;bottom:-4px;pointer-events:none; font-family:var(--hol-police-mono),monospace;font-size:46px;font-weight:600; line-height:1;color:var(--hol-brand);opacity:.1} /* LA DERNIÈRE ÉTAPE PASSE EN BLEU NUIT. La charte réserve ce fond aux sections rares et intentionnelles : celle-ci l'est. Trois cartes claires et une sombre, et l'on voit où mène le chemin avant d'avoir lu une ligne. */ .jalon:last-child .jalon__carte{background:var(--hol-surface-inverse);border-color:transparent} .jalon:last-child .jalon__chiffre{color:var(--hol-text-inverse);opacity:.18} /* LA DATE EST UNE ÉTIQUETTE, pas une ligne de texte de plus. En pastille, elle se distingue du titre au lieu de lui faire concurrence, et le jour où elle sera renseignée elle se lira comme une donnée : c'en est une. */ .jalon__date{align-self:flex-start;display:inline-flex;align-items:center;gap:8px; padding:5px 11px;border-radius:var(--hol-r-pill); background:var(--hol-surface-0);border:1px solid var(--hol-border-subtle); font-family:var(--hol-police-mono),monospace;font-size:10.5px;font-weight:600; letter-spacing:.09em;text-transform:uppercase;color:var(--hol-text-muted)} .jalon:last-child .jalon__date{background:var(--hol-glass); border-color:var(--hol-border-on-dark); color:var(--hol-text-inverse-2)} /* Le point rouge dit qu'il manque quelque chose ; rempli, il ne dit plus rien et redevient une simple puce de marque. */ .jalon__puce{flex:none;width:7px;height:7px;border-radius:var(--hol-r-pill); background:var(--hol-accent)} .jalon__titre{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:18.5px;line-height:1.2;letter-spacing:-.012em; color:var(--hol-text-primary)} .jalon:last-child .jalon__titre{color:var(--hol-text-inverse)} .jalon__texte{margin:-2px 0 0;font-size:15px;line-height:1.6;color:var(--hol-text-secondary)} .jalon:last-child .jalon__texte{color:var(--hol-text-inverse-1)} /* Quatre colonnes ne s'ouvrent qu'à partir de 1220 px : en dessous, chaque carte tomberait sous les 240 px et le titre d'un jalon s'y hacherait en quatre lignes. Deux rangs de deux se lisent mieux qu'une rangée serrée. */ @media (max-width:1220px){ .jalons{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 22px} /* Sur deux rangs, le rail ne doit pas sauter d'une ligne à l'autre : il s'arrête au bout de chaque rang. */ .jalon:nth-child(2n)::before{content:none} } @media (max-width:640px){ .jalons{grid-template-columns:minmax(0,1fr);gap:0} .jalon{padding-top:0;padding-left:38px;padding-bottom:20px} .jalon__n{top:24px} .jalon::before{content:"";top:24px;bottom:2px;left:6px;right:auto;width:2px;height:auto} .jalon:nth-child(2n)::before{content:""} .jalon:last-child::before{content:none} } /* =========================================================================== COQUILLE DE L'ADMINISTRATION (.adm-*) L'administration est un outil de travail : elle doit se tenir comme une application, et ressembler au site qu'elle administre. Une barre d'identité, une rangée d'onglets, un bandeau de page, et le grain de la marque dessous. La barre est SOMBRE et les onglets vivent dedans : on sait toujours qu'on est du côté outil, et la zone de travail garde tout le reste de l'écran. =========================================================================== */ /* LE HAUT RESTE À L'ÉCRAN : l'identité, les onglets ET le fil d'Ariane. Dans un outil, on descend dans une longue liste et il faut pouvoir changer d'écran, ou remonter d'un cran, sans revenir en haut. Un seul conteneur collant plutôt que trois : la hauteur de la barre change avec la largeur de l'écran, et il n'y a ainsi rien à mesurer. */ .adm-haut{position:sticky;top:0;z-index:60} /* Une ancre d'administration s'écarte de la barre collante, dont la hauteur est mesurée par le script de la coquille et non devinée. */ .adm-ancre{scroll-margin-top:calc(var(--hol-collant, 170px) + 18px)} .adm-barre{background:var(--hol-surface-inverse);color:var(--hol-text-inverse); box-shadow:var(--hol-shadow-2)} .adm-barre__rang{display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding-top:14px;padding-bottom:14px} .adm-marque{display:inline-flex;align-items:center;flex:none} /* Taille de charte sur fond sombre : à 26 px le globe du O se bouchait. */ .adm-logo{height:48.8px;width:auto;margin-left:-9.8px;display:block} /* LE LOGO D'UN LOCATAIRE N'EST PAS UN LETTRAGE. Le nôtre est large et bas, et son retrait de 9,8 px rattrape le blanc que porte le fichier. Celui d'un client est souvent carré ou rond : la même hauteur en ferait un pavé, et le retrait le collerait au bord. Il reçoit donc sa propre mesure, et un plafond de largeur pour qu'une bannière très allongée ne pousse pas les onglets. */ .adm-logo--locataire{height:38px;max-width:190px;margin-left:0;object-fit:contain} /* LE LOGO DE PREVALOG, SUR LA CONSOLE (Domain/Console). Moins large que notre lettrage : sa hauteur est la sienne, et son retrait ne rattrape que le mince blanc que porte le fichier. */ .adm-logo--prevalog{height:40px;margin-left:-3px} .adm-mot{font-family:var(--hol-police-mono),monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--hol-brand-clair); padding:5px 11px;border-radius:var(--hol-r-pill); border:1px solid var(--hol-border-on-dark);background:var(--hol-glass)} .adm-barre__droite{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .adm-lien{--hol-lien:var(--hol-text-inverse-2);--hol-lien-survol:var(--hol-text-inverse); font-size:14px;text-decoration:none;white-space:nowrap} .adm-lien:hover{text-decoration:underline;text-underline-offset:3px} .adm-sortie{margin:0} .adm-sortie__bouton{min-height:38px;padding:0 16px;cursor:pointer;font:inherit;font-size:13.5px; font-weight:600;color:var(--hol-text-inverse); background:var(--hol-glass);border:1px solid var(--hol-border-on-dark); border-radius:var(--hol-r-sm)} .adm-sortie__bouton:hover{background:var(--hol-glass-hi)} .adm-sortie__bouton:focus-visible{outline:none; box-shadow:0 0 0 2px var(--hol-surface-inverse),0 0 0 4px var(--hol-focus-inverse)} /* LES ONGLETS. Une rangée qui défile plutôt qu'une pile qui se replie : sur un écran étroit, six onglets empilés mangeraient la page entière. */ /* DES BOUTONS, PAS SIX MOTS ALIGNÉS. Un trait rouge sous un mot, et rien autour : on ne voyait pas qu'il y avait là de quoi cliquer, et l'onglet ouvert ne se distinguait qu'au trait. Chacun devient une pastille qui réagit au survol ; l'onglet ouvert prend le fond clair et le texte sombre, comme la touche enfoncée d'un sélecteur. Le rouge reste où il dit quelque chose : sur le compteur de ce qui attend d'être traité. */ .adm-onglets{border-top:1px solid var(--hol-border-on-dark)} /* ON NE DEVINE PAS QU'UNE RANGÉE DÉFILE. Quatorze onglets ne tiennent pas sur un écran, et la barre de défilement d'un Mac ne se montre que pendant qu'on défile : on arrivait sur l'écran sans savoir qu'il y avait quelque chose à droite. Le dernier onglet visible était coupé net, ce qui ressemble à un défaut d'affichage plutôt qu'à une invite. DEUX FLÈCHES, ET ELLES CLIQUENT. Un simple fondu dirait qu'il y a une suite, sans dire comment y aller : sur un ordinateur sans pavé tactile horizontal, il faudrait attraper la barre de défilement à la souris. La flèche n'apparaît que du côté où il reste quelque chose, et disparaît quand on est au bout : c'est elle qui dit où l'on en est. */ /* LES FLÈCHES SONT AUX BORDS DE L'ÉCRAN, et c'est leur place. */ .adm-onglets__cadre{position:relative} /* LA RANGÉE PREND TOUTE LA LARGEUR DE LA BARRE, et c'est ce qui manquait. Elle était centrée dans un conteneur de 1480 pixels comme le reste de l'administration : sur un grand écran, le premier onglet commençait à plus de cent pixels de la flèche, et l'on voyait un rond perdu dans le vide. Elle s'étend maintenant d'un bord à l'autre et ne s'écarte que de la place des flèches, de la même mesure des deux côtés. C'est la seule rangée du site dans ce cas : elle défile, elle n'est pas un bloc de lecture. */ .adm-onglets__piste{display:flex;gap:6px;overflow-x:auto; -webkit-overflow-scrolling:touch; padding-top:8px;padding-bottom:8px; padding-left:calc(var(--hol-gutter) + 22px); padding-right:calc(var(--hol-gutter) + 22px); max-width:none;margin-left:0;margin-right:0; scrollbar-width:none} .adm-onglets__piste::-webkit-scrollbar{height:0;width:0} .adm-fleche{position:absolute;top:0;bottom:0;z-index:2; display:flex;align-items:center; width:calc(var(--hol-gutter) + 16px); padding:0;border:0;cursor:pointer;color:var(--hol-text-inverse); transition:opacity .15s ease} /* Les deux flèches restent visibles tant qu'il y a de quoi défiler ; elles ne s'effacent que si toute la rangée tient à l'écran. Celle qui est au bout de sa course garde son allure et ne répond plus : l'annoncer par la couleur ferait changer la barre d'aspect selon l'endroit où l'on en est. */ .adm-fleche[hidden]{display:none} .adm-fleche[aria-disabled="true"]{pointer-events:none} .adm-fleche--g{left:0;justify-content:flex-start;padding-left:max(10px,calc(var(--hol-gutter) - 30px)); background:linear-gradient(to right, var(--hol-inverse-fondu-plein) 72%, var(--hol-inverse-fondu-nul) 100%)} .adm-fleche--d{right:0;justify-content:flex-end;padding-right:max(10px,calc(var(--hol-gutter) - 30px)); background:linear-gradient(to left, var(--hol-inverse-fondu-plein) 72%, var(--hol-inverse-fondu-nul) 100%)} .adm-fleche__rond{display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:var(--hol-r-pill); background:var(--hol-glass-hi); border:1px solid var(--hol-border-on-dark)} .adm-fleche:hover .adm-fleche__rond{background:var(--hol-surface-1)} .adm-fleche:hover{color:var(--hol-surface-inverse)} .adm-fleche:focus-visible{outline:none} .adm-fleche:focus-visible .adm-fleche__rond{box-shadow:0 0 0 2px var(--hol-surface-inverse), 0 0 0 4px var(--hol-focus-inverse)} .adm-fleche svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .adm-onglet{--hol-lien:var(--hol-text-inverse-2);--hol-lien-survol:var(--hol-text-inverse); display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none; min-height:38px;padding:0 15px;font-size:14px;font-weight:600; text-decoration:none;border-radius:var(--hol-r-pill); border:1px solid transparent; transition:background .15s ease,border-color .15s ease,color .15s ease} .adm-onglet:hover{background:var(--hol-glass-hi);border-color:var(--hol-border-on-dark)} /* Le passage entre la console Prevalog et la maison HOLANGCOURS (Domain/Console) : un lien au bout de la rangée, marqué d'un filet pour ne pas passer pour un onglet de plus. */ .adm-bascule{--hol-lien:var(--hol-text-inverse-2);--hol-lien-survol:var(--hol-text-inverse); display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none; min-height:38px;padding:0 15px;margin-left:10px;font-size:14px;font-weight:600; text-decoration:none;border-radius:var(--hol-r-pill); border:1px dashed var(--hol-border-on-dark)} .adm-bascule:hover{background:var(--hol-glass-hi)} .adm-onglet[aria-current]{--hol-lien:var(--hol-surface-inverse); --hol-lien-survol:var(--hol-surface-inverse); color:var(--hol-surface-inverse); background:var(--hol-surface-1); border-color:var(--hol-surface-1); box-shadow:var(--hol-shadow-1)} .adm-onglet[aria-current]:hover{background:var(--hol-surface-1); border-color:var(--hol-surface-1)} .adm-onglet:focus-visible{outline:none; box-shadow:0 0 0 2px var(--hol-surface-inverse),0 0 0 4px var(--hol-focus-inverse)} .adm-pastille{display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:20px;padding:0 6px;border-radius:var(--hol-r-pill); background:var(--hol-accent);color:var(--hol-accent-encre,var(--hol-text-inverse)); font-family:var(--hol-police-mono),monospace;font-size:11.5px;font-weight:600} /* LE BANDEAU DE PAGE : le patron des pages publiques, en plus serré. C'est ce qui dit, sans le dire, qu'on est toujours chez HOLANGCOURS. */ .adm-hero{padding:clamp(26px,4vw,40px) 0 clamp(22px,3vw,30px); border-bottom:1px solid var(--hol-border-subtle)} .adm-hero__kicker{font-family:var(--hol-police-mono),monospace;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--hol-brand);margin-bottom:10px} .adm-hero__titre{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:clamp(26px,4vw,38px);line-height:1.1;letter-spacing:-.02em; color:var(--hol-text-primary);margin:0} .adm-hero__intro{margin:10px 0 0;font-size:16px;line-height:1.6; color:var(--hol-text-secondary);text-wrap:pretty} /* LE GRAIN DE LA MARQUE COUVRE TOUTE LA FENÊTRE, et non le bloc de contenu. Posé sur le conteneur, il s'arrêtait à sa largeur ; posé sur le contenu, il s'arrêtait à sa hauteur, et sur un écran peu rempli une couture courait en travers de la page. Il est donc porté par le corps lui-même, en fond fixe : le motif tient à la fenêtre, pas au flux, et il n'y a plus de bord. Le bandeau de page n'a plus de fond propre, sans quoi il masquerait ce motif-là pour en reposer un identique. */ /* Pas de « overflow-x:hidden » ici : il masquerait un vrai débordement au lieu de le montrer. Les tableaux larges défilent dans leur propre cadre. */ .adm-corps{background-color:var(--hol-surface-0);color:var(--hol-text-primary); background-image: radial-gradient(var(--hol-motif-dot) 1.1px, transparent 1.7px), radial-gradient(circle at 8% 12%, var(--hol-motif-halo-1), transparent 52%), radial-gradient(circle at 92% 88%, var(--hol-motif-halo-2), transparent 46%); background-size:24px 24px, auto, auto; background-attachment:fixed} /* ═══ LA BARRE D'ADMINISTRATION TIENT SUR UN RANG, À TOUTES LES LARGEURS ═══ Trois paliers, et ils sont calculés, pas devinés. À sa taille de dessin, la barre demande 945 px : la marque 244, la pastille 187, les quatre commandes 478, et les écarts. La place disponible vaut 84 % de la largeur de l'écran, gouttière déduite. · au-delà de 1200 px : 1008 px de place pour 945 demandés, rien à faire ; · de 1001 à 1200 px : il manque jusqu'à 85 px, on les reprend sur le logo, la pastille et les écarts, et tout reste lisible ; · jusqu'à 1000 px : même en serrant tout, il manquerait encore cent pixels. La pastille et le prénom s'effacent, le bandeau juste en dessous les redit de toute façon. Jimmy, sur iPad Pro : « ça fait un peu des briques quand il y a ces deux lignes ; j'aimerais que ce soit affiché comme sur un ordinateur, sur une seule ligne. Si ça ne peut pas prendre, rétrécis le texte et Super Admin. » C'est exactement ce que fait le palier du milieu. */ @media (max-width:1000px){ /* La barre reste collée, donc elle doit coûter le moins de hauteur possible : sur un téléphone, chaque pixel retenu en haut est un pixel retiré au travail. */ /* Sur un téléphone, barre et fil feraient plus du quart de l'écran : seule la barre reste collée, le fil s'en va avec la page. */ .adm-haut{position:static} .adm-barre{position:sticky;top:0;z-index:60} .adm-barre__rang{gap:10px;padding-top:7px;padding-bottom:7px} .adm-logo{height:30px;margin-left:-5px} .adm-logo--locataire{height:28px;max-width:140px;margin-left:0} .adm-logo--prevalog{height:30px;margin-left:-2px} .adm-sortie__bouton{min-height:34px;padding:0 12px;font-size:13px} .adm-lien{font-size:13.5px} /* Sur un téléphone, la barre tenait sur trois rangs. Le prénom et la pastille « administration » s'effacent : le bandeau les redit juste en dessous, et c'est la place qui manque, pas l'information. Le rond, lui, reste : c'est la porte du compte, et il ne se remplace pas par un mot. */ .adm-mot{display:none} .adm-barre .hol-identite__nom{display:none} .adm-barre .hol-identite{padding-right:3px} .adm-onglet{min-height:34px;padding:0 12px;font-size:13.5px} } /* DE 701 À 1000 PIXELS, ON INTERDIT LE REPLI. La place existe une fois le logo réduit et la pastille retirée ; il se déclenchait pour une poignée de pixels. */ @media (min-width:701px) and (max-width:1000px){ .hol-scope .adm-barre__rang{flex-wrap:nowrap} .hol-scope .adm-barre__droite{flex-wrap:nowrap;gap:12px;min-width:0} } /* ───── LE PALIER DU MILIEU : 1001 À 1200 PIXELS (iPad Pro en portrait) ───── Tout reste à l'écran, marque, pastille et quatre commandes, mais d'un cran plus serré. Le compte : logo 190 au lieu de 244, pastille 153 au lieu de 187, écarts 14 et 12 au lieu de 18 et 16. Soit 837 px demandés pour 840 disponibles au plus étroit du palier. */ @media (min-width:1001px) and (max-width:1200px){ .hol-scope .adm-barre__rang{flex-wrap:nowrap;gap:14px} .hol-scope .adm-logo{height:38px;margin-left:-7.6px} .hol-scope .adm-logo--locataire{height:32px;max-width:160px} .hol-scope .adm-logo--prevalog{height:36px;margin-left:-3px} .hol-scope .adm-mot{font-size:9.5px;letter-spacing:.1em;padding:4px 9px} .hol-scope .adm-barre__droite{flex-wrap:nowrap;gap:12px;min-width:0} .hol-scope .adm-lien{font-size:13px} .hol-scope .adm-sortie__bouton{min-height:34px;padding:0 13px;font-size:13px} } /* LA BARRE A GAGNÉ TROIS COMMANDES DEPUIS LE COMPTE CI-DESSUS (24 octobre 2026) : la liste « Maison », le lien vers la console et les appareils reconnus. Entre 701 et 1200 pixels, celle d'un super administrateur sortait de l'écran de 40 à 90 pixels. Le prénom s'efface derrière son rond (il reste au survol), et la liste des maisons se resserre. */ @media (min-width:701px) and (max-width:1200px){ .hol-scope .adm-barre .hol-identite__nom{display:none} .hol-scope .adm-barre .hol-identite{padding-right:3px} .hol-scope .adm-barre select[data-hl-liste]{max-width:150px !important;margin-left:0 !important} } /* SUR UNE TABLETTE ÉTROITE (701 à 860), la pastille « Super administrateur » s'efface aussi, comme sur un téléphone : la barre sortait de 30 à 80 pixels. */ @media (min-width:701px) and (max-width:860px){ .hol-scope .adm-mot{display:none} .hol-scope .adm-barre select[data-hl-liste]{max-width:130px !important} } @media (min-width:701px) and (max-width:800px){ .hol-scope .adm-barre__rang{gap:8px} .hol-scope .adm-barre__droite{gap:7px} .hol-scope .adm-barre select[data-hl-liste]{max-width:146px !important;padding-left:9px !important} .hol-scope .adm-logo{height:30px;margin-left:-6px} .hol-scope .adm-logo--prevalog{height:28px;margin-left:-2px} .hol-scope .adm-sortie__bouton{padding:0 10px} } @media (min-width:701px) and (max-width:748px){ .hol-scope .adm-barre select[data-hl-liste]{max-width:104px !important} } /* =========================================================================== LA BARRE D'ADMINISTRATION SUR UN TÉLÉPHONE : DEUX RANGS, PAS TROIS Sur trois cent soixante-quinze pixels, la marque et les quatre commandes demandent cinq cents pixels : aucun réglage ne les mettra sur une ligne, et les forcer ne produisait qu'un débordement de cent cinq pixels vers la droite. On assume donc deux rangs nets, et on les tient : la marque seule en haut, les commandes dessous, alignées à droite jusqu'à la gouttière. Le libellé « Voir le site » s'efface derrière sa flèche, sans quoi le rang des commandes se couperait à son tour. =========================================================================== */ @media (max-width:700px){ /* DE L'AIR AU-DESSUS DE LA MARQUE. Sept pixels séparaient le logo du bord haut : sur un Android à encoche, la caméra mordait dessus, et même sans encoche la barre commençait à ras bord quand l'en-tête du site public, lui, garde vingt-cinq pixels. Jimmy : « le logo est caché, descends un peu l'en-tête ». Quatorze pixels en valeur sûre, et la mesure de l'encoche en plus là où le système la donne : la seconde déclaration est ignorée par les moteurs qui ne connaissent pas « env », qui gardent donc les quatorze. */ .hol-scope .adm-barre__rang{flex-wrap:wrap;row-gap:8px; padding-top:14px;padding-bottom:10px} .hol-scope .adm-barre__rang{padding-top:calc(14px + env(safe-area-inset-top, 0px))} .hol-scope .adm-barre__droite{flex:0 0 100%;margin-left:0; justify-content:flex-end;flex-wrap:nowrap;gap:10px} .hol-scope .adm-lien__mot{display:none} /* L'application se demande pour l'ordinateur : sur un téléphone, la barre n'a pas la place d'un bouton de plus, il s'efface. */ .hol-scope .adm-installer{display:none} .hol-scope .adm-lien{font-size:18px;line-height:1} /* TRENTE-QUATRE, PAS VINGT-SIX. La marque était plus basse que le bouton de déconnexion posé juste dessous : elle est ce qui dit où l'on se trouve, elle ne peut pas être l'élément le plus discret de la barre. À trente- quatre elle fait cent soixante-dix-sept pixels de large, la moitié d'un écran de trois cent soixante, et elle est seule sur son rang. */ .hol-scope .adm-logo{height:34px;margin-left:-6.8px} .hol-scope .adm-logo--locataire{height:30px;max-width:150px;margin-left:0} .hol-scope .adm-logo--prevalog{height:32px;margin-left:-2px} /* La liste des maisons part de la gouttière, comme le reste de la barre : sa marge de douze pixels ne servait qu'à l'écarter du logo voisin. */ .hol-scope .adm-barre select[data-hl-liste]{margin-left:0 !important} } /* LE SUPER ADMINISTRATEUR SOUS 375 PIXELS. Il a une commande de plus (la console) : à 320, le rang dépassait de sept pixels, et vingt-quatre de plus pour rester dans la gouttière comme le cadenas au-dessus. Les écarts passent de dix à six, FR et EN de trente-huit à trente-deux, le bouton de sortie perd six pixels de marge intérieure. Trente-deux reste le plancher des cibles tactiles (fin de feuille) : le sélecteur est plus précis que le leur, sans quoi il perdrait, écrit plus haut. */ @media (max-width:374px){ .hol-scope .adm-barre__droite{gap:6px} .hol-scope .adm-langues .adm-langue{min-width:32px;padding:0 6px} .hol-scope .adm-sortie__bouton{padding:0 9px} } /* =========================================================================== LES LISTES DÉROULANTES DU SITE La flèche du système change de dessin d'un navigateur à l'autre, et d'un système à l'autre : sur le même écran, deux listes voisines n'avaient pas la même. On la remplace par un chevron unique, le même que partout ailleurs sur le site, et on garde la hauteur et le cadre des autres champs. CETTE RÈGLE NE SERVAIT QUE L'ADMINISTRATION. Les formulaires publics, eux, gardaient la flèche du système, collée au bord droit du champ et dessinée autrement sur chaque machine. Elle vaut maintenant pour tout « .hol-scope », c'est-à-dire pour le site entier. ELLE GAGNE SANS « !important » : deux classes de sélecteur contre une seule dans les pages (« .pro-champ », « .champ », « .edi-champ »), donc elle passe devant sans qu'aucune page ait à être réécrite. LA COULEUR DU CHEVRON EST LA SEULE ÉCRITE EN DUR du fichier de tokens : une image en URI de données ne sait pas lire une variable CSS. Elle reprend exactement --hol-text-secondary. Si ce token change, cette ligne change. =========================================================================== */ .hol-scope select{ -webkit-appearance:none;-moz-appearance:none;appearance:none; width:100%;min-height:46px;padding:0 42px 0 14px; font:inherit;font-size:15px;color:var(--hol-text-primary); background-color:var(--hol-surface-1); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23565C72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:18px 18px; border:1px solid var(--hol-border-strong);border-radius:var(--hol-r-sm); cursor:pointer; } .hol-scope select:hover{border-color:var(--hol-brand-clair)} .hol-scope select:focus-visible{outline:none;border-color:var(--hol-brand); box-shadow:0 0 0 3px var(--hol-brand-wash)} .hol-scope select:disabled{cursor:not-allowed;opacity:.6} /* Une liste à choix multiples n'a pas de flèche : elle montre ses lignes. */ .hol-scope select[multiple],.hol-scope select[size]{background-image:none;padding-right:14px;min-height:0} /* =========================================================================== LES ICÔNES DES GROUPES DE RÉGLAGES (.adm-ico) Un repère, pas une illustration : 18 px, le trait du site, et la couleur du texte à côté. Dans l'entrée active, elles passent au blanc avec le libellé. =========================================================================== */ .adm-ico{flex:none;width:18px;height:18px;opacity:.75} .onglet[aria-current] .adm-ico{opacity:1} /* =========================================================================== LE RACCOURCI VERS LA BANQUE (.adm-raccourci) À droite d'un réglage du test : le nombre de questions qui existent, et la porte pour aller les voir. Il se lit comme une information, pas comme un bouton d'action : c'est un passage, pas une décision. =========================================================================== */ .adm-raccourci{--hol-lien:var(--hol-brand);--hol-lien-survol:var(--hol-brand-hover); flex:none;display:inline-flex;align-items:center;gap:8px; min-height:48px;padding:0 14px;text-decoration:none; font-size:13.5px;font-weight:600; background:var(--hol-surface-1);border:1px solid var(--hol-border-subtle); border-radius:var(--hol-r-sm)} .adm-raccourci:hover{border-color:var(--hol-brand-clair);background:var(--hol-brand-wash)} .adm-raccourci:focus-visible{outline:none;border-color:var(--hol-brand); box-shadow:0 0 0 3px var(--hol-brand-wash)} .adm-raccourci__n{font-family:var(--hol-police-mono),monospace;font-size:14px; min-width:24px;height:24px;display:inline-flex;align-items:center; justify-content:center;border-radius:var(--hol-r-pill); background:var(--hol-brand-wash);color:var(--hol-brand)} .adm-raccourci__fleche{font-size:15px;line-height:1} @media (max-width:640px){ .adm-raccourci{width:100%;justify-content:flex-start} } /* =========================================================================== LA LISTE DÉROULANTE DESSINÉE (.hol-liste) Le champ d'origine reste en place, masqué : c'est lui qui part dans le formulaire. Ce qui suit n'est que son apparence, posée par le script, et seulement quand il s'exécute : sans lui, la liste du système s'affiche et la règle « .hol-scope select » plus haut lui donne déjà le chevron du site. =========================================================================== */ .hol-liste{position:relative;flex:1 1 260px;min-width:0} .hol-liste__natif{position:absolute;width:1px;height:1px;padding:0;margin:0; overflow:hidden;clip-path:inset(50%);border:0} .hol-liste__bouton{display:flex;align-items:center;gap:10px;width:100%;min-height:46px; padding:0 13px;cursor:pointer;text-align:left; font:inherit;font-size:15px;color:var(--hol-text-primary); background:var(--hol-surface-1); border:1px solid var(--hol-border-strong);border-radius:var(--hol-r-sm)} .hol-liste__bouton:hover{border-color:var(--hol-brand-clair)} .hol-liste__bouton:focus-visible{outline:none;border-color:var(--hol-brand); box-shadow:0 0 0 3px var(--hol-brand-wash)} .hol-liste__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Le chevron est tracé en CSS : deux traits, pas une image. Il pivote à l'ouverture, ce qui dit où va le panneau. */ .hol-liste__chevron{flex:none;width:10px;height:10px;margin-right:2px; border-right:2px solid var(--hol-text-secondary); border-bottom:2px solid var(--hol-text-secondary); transform:translateY(-2px) rotate(45deg); transition:transform .18s ease} .hol-liste.est-ouverte .hol-liste__chevron{transform:translateY(2px) rotate(-135deg)} .hol-liste.est-ouverte .hol-liste__bouton{border-color:var(--hol-brand)} /* LE PANNEAU N'EST PAS PRISONNIER DE LA LARGEUR DU BOUTON. Il était posé « left:0; right:0 », donc exactement aussi large que le champ fermé : un sélecteur étroit coupait ses propres entrées, et l'on lisait « HOLANGCOUR » sans le S. Jimmy : « tout le nom ne s'affiche pas, il peut y avoir des noms d'entreprises un peu longs, il ne faut pas couper. » « right:auto » SANS LARGEUR DÉCLARÉE : un bloc positionné en absolu se rétrécit alors sur son contenu, ce qui est exactement ce qu'on veut, et ce comportement existe depuis toujours. Pas de « max-content », que les Android anciens ignorent. « min-width:100% » garantit qu'il ne sera jamais plus étroit que le bouton, et le plafond de 380 l'empêche de traverser l'écran sur un libellé à rallonge. LE PANNEAU SE RESSERRE SUR SES LIBELLÉS (Jimmy) : calé sur toute la largeur d'un champ de 450 px, il laissait les mots à gauche et un grand vide à droite. Il ne descend plus sous 240 px et ne dépasse jamais le champ (le plafond de 380 a sauté : un titre de groupe doit tenir sur sa ligne). IL S'OUVRE SOUS LA FLÈCHE (Jimmy) : calé à droite du champ, là où l'on a cliqué, et non sous le début du libellé. */ .hol-liste__panneau{position:absolute;z-index:40;top:calc(100% + 6px);left:auto;right:0; min-width:min(100%,240px);max-width:100%; margin:0;padding:6px;list-style:none;max-height:min(320px,60vh); overflow-y:auto;overscroll-behavior:contain; background:var(--hol-surface-1); border:1px solid var(--hol-border-subtle);border-radius:var(--hol-r-sm); box-shadow:var(--hol-shadow-3)} /* Ouvert vers le haut quand la place manque en dessous : voir placer() dans holangcours-liste.js. */ .hol-liste.est-en-haut .hol-liste__panneau{top:auto;bottom:calc(100% + 6px)} /* ET SI UN LIBELLÉ DÉPASSE MÊME CE PLAFOND, il passe à la ligne au lieu d'être coupé : on perd un peu de hauteur, jamais la fin d'un mot. L'alignement part du haut, sans quoi la coche flotterait au milieu d'une entrée de deux lignes. */ .hol-liste__option{display:flex;align-items:flex-start;gap:14px;min-height:40px; padding:9px 12px; border-radius:var(--hol-r-sm);font-size:14.5px;line-height:1.35; overflow-wrap:break-word; color:var(--hol-text-primary);cursor:pointer; transition:background-color .12s ease} /* La ligne visée, au clavier comme à la souris : les deux posent la même marque, et l'on voit toujours celle qui part si l'on valide. */ .hol-liste__option.est-vise, .hol-liste__option:hover{background:var(--hol-brand-wash)} /* L'OPTION VISÉE AU CLAVIER SE DIT PAR SON FOND, défini juste au-dessus. Elle a porté un trait de couleur à gauche ; ce trait est banni partout sur le site, et il était de toute façon redondant avec le fond. */ .hol-liste__option[aria-selected="true"]{color:var(--hol-brand);font-weight:600} /* LES TITRES DE GROUPE () : petits, en capitales, ils ne se choisissent pas ; les options du groupe se décalent à peine dessous. */ /* LA DÉMARCATION SE VOIT (Jimmy) : un filet au-dessus de chaque groupe sauf le premier, le titre dans la couleur d'action sur un fond à peine teinté, et il reste collé en haut du panneau tant qu'on parcourt son groupe. */ .hol-liste__groupe{position:sticky;top:-6px;z-index:1; margin:8px -6px 4px;padding:9px 18px 8px; border-top:1px solid var(--hol-border-subtle); border-bottom:1px solid var(--hol-border-subtle); background:var(--hol-surface-0); font-size:12px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--hol-brand);cursor:default; /* SUR UNE SEULE LIGNE (Jimmy) : le panneau s'élargit pour le titre, jusqu'à la largeur du champ, jamais au-delà. */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hol-liste__groupe:first-child{margin-top:-6px;border-top:0} .hol-liste__option--groupe{padding-left:12px} /* L'entrée vide (« Choisir… ») n'est pas un choix : grisée, sans coche. */ .hol-liste__option--vide{color:var(--hol-text-muted)} .hol-liste__option--vide[aria-selected="true"]{color:var(--hol-text-muted);font-weight:500} .hol-liste__option.hol-liste__option--vide[aria-selected="true"]::after{opacity:0} /* La coche marque le choix courant : la couleur seule ne se lit pas par tout le monde. Elle garde sa place quand elle est absente, sinon la liste danse. */ /* ELLE SE TIENT À DROITE (Jimmy) : à gauche, elle repoussait tous les libellés d'une colonne vide, décalés de leurs titres de groupe. Les mots partent maintenant du même bord que les titres. */ .hol-liste__option::after{content:"";flex:none;order:2;width:12px;height:7px;margin:4px 2px 0 auto; border-left:2px solid var(--hol-brand); border-bottom:2px solid var(--hol-brand); transform:rotate(-45deg);opacity:0} .hol-liste__option[aria-selected="true"]::after{opacity:1} .hol-liste__option[aria-disabled="true"]{color:var(--hol-text-muted);cursor:not-allowed} @media (prefers-reduced-motion:reduce){ .hol-liste__chevron,.hol-liste__option{transition:none} } /* Le bouton d'aperçu : une porte, pas une action. Il se distingue du bouton d'enregistrement, qui est la seule décision de cet écran. */ .adm-apercu{--hol-lien:var(--hol-brand);--hol-lien-survol:var(--hol-brand-hover); display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 20px; font-size:15px;font-weight:600;text-decoration:none; background:var(--hol-surface-1);border:1px solid var(--hol-border-strong); border-radius:var(--hol-r-sm)} .adm-apercu:hover{border-color:var(--hol-brand);background:var(--hol-brand-wash)} .adm-apercu:focus-visible{outline:none;border-color:var(--hol-brand); box-shadow:0 0 0 3px var(--hol-brand-wash)} .adm-apercu__oeil{flex:none;display:inline-flex} .adm-apercu__oeil svg{width:19px;height:19px} /* =========================================================================== LE BANDEAU D'APERÇU DU TEST (.test-apercu) Un écran d'essai qui ressemble trait pour trait à l'écran public se confond avec lui. Celui-ci porte le rouge d'identité, il colle sous l'en-tête, et il ne quitte pas l'écran : on ne peut pas oublier qu'on est en essai. =========================================================================== */ /* Sous l'en-tête ET sous le fil d'Ariane, qui sont collants tous les deux : calé sur la hauteur du seul en-tête, le bandeau se glissait derrière le fil et le teintait de rouge. « --hol-collant » est la hauteur des deux, mesurée par le script du pied de page. */ .test-apercu{position:sticky;top:var(--hol-collant,128px);z-index:50; background:var(--hol-accent);color:var(--hol-accent-encre,var(--hol-text-inverse))} .test-apercu__rang{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding-top:10px;padding-bottom:10px} .test-apercu__mot{font-family:var(--hol-police-mono),monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;padding:4px 10px;border-radius:var(--hol-r-pill); background:var(--hol-glass-hi);flex:none} .test-apercu__texte{font-size:14px;line-height:1.45;flex:1 1 320px;min-width:0} .test-apercu__retour{--hol-lien:var(--hol-text-inverse);--hol-lien-survol:var(--hol-text-inverse); flex:none;font-size:13.5px;font-weight:600;text-decoration:underline; text-underline-offset:3px} /* =========================================================================== LE FIL D'ARIANE DE L'ADMINISTRATION (.adm-fil) D'où l'on vient, et comment y retourner. Chaque étape est une pastille, pas un mot séparé par un point : on voit tout de suite où cliquer, et la page courante se distingue sans avoir à lire. Le chevron entre deux pastilles dit le sens de la descente ; il ne se sélectionne pas et ne se lit pas. =========================================================================== */ .adm-fil{background:var(--hol-surface-1);border-bottom:1px solid var(--hol-border-subtle)} .adm-fil__piste{list-style:none;margin:0;display:flex;flex-wrap:wrap;align-items:center; gap:7px;padding-top:11px;padding-bottom:11px} .adm-fil__piste li{display:flex;align-items:center;gap:7px;min-width:0} /* Le chevron, tracé en CSS comme celui des listes : deux traits, pas un caractère, pour qu'il ne parte pas dans une sélection ni dans une lecture. */ .adm-fil__piste li + li::before{content:"";flex:none;width:6px;height:6px; border-top:1.6px solid var(--hol-border-strong); border-right:1.6px solid var(--hol-border-strong); transform:rotate(45deg)} .adm-fil__piste a, .adm-fil__piste [aria-current]{display:inline-flex;align-items:center;min-height:32px; padding:0 13px;border-radius:var(--hol-r-pill); font-size:13px;font-weight:600;white-space:nowrap; max-width:46vw;overflow:hidden;text-overflow:ellipsis} .adm-fil__piste a{--hol-lien:var(--hol-text-secondary);--hol-lien-survol:var(--hol-brand); text-decoration:none;background:var(--hol-surface-0); border:1px solid var(--hol-border-subtle)} .adm-fil__piste a:hover{border-color:var(--hol-brand-clair);background:var(--hol-brand-wash)} .adm-fil__piste a:focus-visible{outline:none;border-color:var(--hol-brand); box-shadow:0 0 0 3px var(--hol-brand-wash)} .adm-fil__piste [aria-current]{color:var(--hol-brand);background:var(--hol-brand-wash); border:1px solid var(--hol-brand-clair)} /* =========================================================================== MÉDIATHÈQUE ET DÉPÔT (.med-*) Ces règles vivaient dans l'écran des réglages. La banque de questions s'en sert aussi : une question porte une image, un son ou une vidéo, et c'est le même geste. Une seule source, donc, pour les deux écrans. Le bouton sert aussi bien à un