) est masqué sur ce seul gabarit : il est re-rendu en blanc dans le haut de page violet, où le fil clair du chrome n'aurait pas sa place. La cible « > » ne vise que le fil direct enfant du (celui du chrome), jamais celui du hero. */ .page-template-template-langue-php > .ml-fil-ariane { display: none; } /* La barre de menu flotte par-dessus le haut de page violet : même mécanisme que les pages à hero sombre (marge basse négative égale à la hauteur de la barre, voir main.css). La pilule reste opaque et blanche, donc lisible aussi bien sur le violet que sur le contenu clair du dessous : aucune dépendance à un état de défilement piloté par script. */ .page-template-template-langue-php .ml-header { margin-block-end: calc(-1 * (var(--ml-header-h) + var(--ml-space-sm))); } /* ── HAUT DE PAGE ──────────────────────────────────────────────────────── Bloc plein de la couleur de marque, arrondi fixe de 140px en bas à droite. Le raccord d'angle rentrant, en bas à gauche, n'est plus creusé en CSS : il est dessiné par une image posée au sommet gauche de la section qui suit (voir .ml-langue-raccord plus bas). Le padding du haut réserve la hauteur de la barre de menu qui survole le bloc. */ .ml-langue-hero { position: relative; isolation: isolate; background: var(--ml-accent); color: #fff; padding-block: calc(var(--ml-header-h) + var(--ml-space-lg)) var(--ml-space-xl); padding-inline: var(--ml-space-sm); border-end-end-radius: 140px; } .ml-langue-hero-inner { position: relative; z-index: 1; display: grid; gap: var(--ml-space-lg); } @media (min-width: 900px) { .ml-langue-hero-inner { grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--ml-space-xl); } } /* Fil d'Ariane dans le haut de page : blanc, sans la mise en page « générique » de main.css (largeur bornée, padding) qui ne convient plus ici. */ .ml-langue-hero .ml-fil-ariane { max-inline-size: none; margin: 0 0 var(--ml-space-md); padding: 0; color: rgba(255, 255, 255, 0.85); } .ml-langue-hero .ml-fil-ariane a { color: rgba(255, 255, 255, 0.85); } .ml-langue-hero .ml-fil-ariane a:hover, .ml-langue-hero .ml-fil-ariane a:focus-visible { color: #fff; } .ml-langue-hero .ml-fil-ariane a:focus-visible { outline-color: #fff; } .ml-langue-hero .ml-fil-ariane li[aria-current="page"] { color: #fff; } /* Vignette drapeau : petit fanion dessiné (SVG), posé sur une carte blanche arrondie et ombrée. La hauteur est fixe, la largeur suit le format propre de chaque drapeau : aucune déformation. */ .ml-langue-hero-drapeau { display: inline-flex; margin-block-end: var(--ml-space-sm); padding: 4px; background: rgba(255, 255, 255, 0.94); border-radius: 12px; box-shadow: var(--ml-shadow-md); } .ml-langue-drapeau-svg { display: block; block-size: 38px; inline-size: auto; border-radius: 4px; } /* Le surtitre « générique » (main.css) est violet : illisible sur le violet du haut de page. Il passe au blanc, et son trait à un blanc adouci. */ .ml-langue-hero .ml-eyebrow { color: rgba(255, 255, 255, 0.85); } .ml-langue-hero .ml-eyebrow::before { background: rgba(255, 255, 255, 0.55); } .ml-langue-titre { color: #fff; font-size: var(--ml-fs-h1); max-inline-size: 16ch; margin-block: var(--ml-space-xs) var(--ml-space-sm); text-shadow: 0 2px 18px rgba(20, 8, 28, 0.25); } /* Le paragraphe d'introduction du haut de page : le seul

direct du bloc de texte qui ne soit pas le surtitre. */ .ml-langue-hero-texte > p:not(.ml-eyebrow) { color: rgba(255, 255, 255, 0.92); font-size: var(--ml-fs-lg); max-inline-size: 48ch; } /* Trois statistiques calculées, séparées par un filet vertical clair. */ .ml-langue-stats { display: flex; flex-wrap: wrap; gap: var(--ml-space-md); margin-block-start: var(--ml-space-lg); } .ml-langue-stat { display: flex; flex-direction: column; gap: 0.15em; padding-inline-end: var(--ml-space-md); border-inline-end: 1px solid rgba(255, 255, 255, 0.25); } .ml-langue-stat:last-child { padding-inline-end: 0; border-inline-end: none; } .ml-langue-stat-nombre { font-family: var(--ml-font-heading); font-weight: 800; font-size: 2rem; line-height: 1.1; color: #fff; } .ml-langue-stat-libelle { font-size: var(--ml-fs-sm); color: rgba(255, 255, 255, 0.78); } /* Bulle de marque du haut de page (demande de Marino, juillet 2026). Quand la page connaît sa langue, la colonne droite du haut de page porte la bulle à la craie de cette langue (un PNG de marque du thème, posé en chrome par le template), en grand et SANS cadre, SANS fond, SANS bordure : c'est un ornement, le

à côté porte le nom de la langue. La bulle est blanche à trait sombre : elle se détache franchement sur le violet de marque (--ml-accent, #661f80 : le blanc de la craie tient largement au dessus de 4,5:1), aucun voile ni ombre n'est nécessaire pour l'asseoir. / .ml-langue-hero-bulle { display: flex; justify-content: center; align-items: center; } / Les PNG sont larges de 480px : on plafonne l'affichage sous cette valeur pour garder la craie nette (jamais d'agrandissement). Sur mobile la bulle passe sous le texte (ordre du DOM) et reste mesurée pour laisser respirer le titre ; dès 900px, dans sa colonne, elle prend toute la place, au plus près du natif. / .ml-langue-hero-bulle-img { display: block; inline-size: 100%; max-inline-size: 300px; block-size: auto; margin-inline: auto; / Ombre portée (demande de Marino) : drop-shadow et non box-shadow, pour suivre le contour de la bulle et non le rectangle du PNG transparent. Teintée de la nuit violette de la marque, elle assoit la bulle sur le violet du haut de page et suit le flottement (transform). / filter: drop-shadow(0 18px 28px rgba(30, 10, 42, 0.45)); animation: ml-langue-bulle-flotte 6s ease-in-out infinite; } @media (min-width: 900px) { .ml-langue-hero-bulle-img { max-inline-size: 460px; } } / Flottement haut-bas constant : une translation verticale douce, boucle lente, ease-in-out dans les deux sens. Keyframe locale, préfixée ml-langue- : aucun token ni aucune keyframe d'un autre fichier n'est redéclaré ici. / @keyframes ml-langue-bulle-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } / Mouvement réduit demandé : la bulle est immobile, telle quelle. / @media (prefers-reduced-motion: reduce) { .ml-langue-hero-bulle-img { animation: none; } } / Photo du haut de page : bord blanc, coins arrondis, ombre (maquette). Repli affiché uniquement quand aucune langue n'est reliée (sinon c'est la bulle de marque ci-dessus qui occupe la colonne). / .ml-langue-hero-photo-img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ml-radius-lg); border: 4px solid rgba(255, 255, 255, 0.92); box-shadow: var(--ml-shadow-lg); } / ── Titre et intro de section (en-têtes lus depuis les groupes) ────────── Le titre est borné pour rester lisible d'un seul regard, l'intro pour garder une longueur de ligne confortable. / .ml-langue-section-titre { max-inline-size: 24ch; } .ml-langue-section-intro { max-inline-size: 58ch; color: var(--ml-text-mid); font-size: var(--ml-fs-lg); margin-block-end: 0; } / ── POURQUOI APPRENDRE CETTE LANGUE ────────────────────────────────────── La première section claire, juste sous le haut de page violet. Elle porte le raccord d'angle en image (.ml-langue-raccord), posé en absolu à son sommet gauche : le padding du haut est donc augmenté de la taille du raccord pour que le contenu ne passe jamais sur le violet, quelle que soit la largeur de l'écran (sur mobile, le conteneur colle au bord gauche). / .ml-langue-pourquoi { --ml-langue-raccord-taille: 120px; position: relative; padding-block-start: calc(var(--ml-langue-raccord-taille) + var(--ml-space-lg)); } / Le raccord d'angle rentrant : l'image fournie par Marino (un quart concave violet sur fond transparent, la teinte de marque). Elle prolonge le violet du haut de page et creuse la courbe au sommet gauche de la section claire. Purement décorative, sans prise au pointeur, derrière le contenu. / .ml-langue-raccord { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--ml-langue-raccord-taille); block-size: var(--ml-langue-raccord-taille); background: url("../img/border-violet-2.webp") no-repeat left top / contain; pointer-events: none; z-index: 0; } / Le contenu passe au dessus du raccord : sécurité si un jour le texte le rejoignait malgré le padding réservé. / .ml-langue-pourquoi-inner { position: relative; z-index: 1; } .ml-langue-pourquoi p:not(.ml-eyebrow):not(.ml-langue-appel) { max-inline-size: 62ch; color: var(--ml-text-mid); font-size: var(--ml-fs-lg); } / L'appel « écris-moi » : un encart blanc, filet violet à gauche, posé sur le fond lilas de la page (le même contraste que les cartes pays : un fond d'accent dilué ne se verrait pas, la page en est déjà teintée). Le lien garde la couleur de marque et un soulignement franc. / .ml-langue-appel { max-inline-size: 62ch; margin-block-start: var(--ml-space-md); padding: var(--ml-space-md); border: 1px solid var(--ml-accent-bordure); border-inline-start: 3px solid var(--ml-accent); border-radius: var(--ml-radius); background: var(--ml-bg); color: var(--ml-text); } .ml-langue-appel a { color: var(--ml-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } / Deux colonnes quand une image est posée dans le groupe (demande de Marino : la section n'est plus vide à droite). Sans image, la classe .ml-langue-pourquoi--media n'est pas posée et rien ne change : le wrapper .ml-langue-pourquoi-texte reste neutre dans le flux, la section garde sa colonne unique d'origine. Dès qu'une image est choisie, l'ensemble passe en grille à partir de 900px : le texte à gauche, l'image à droite, centrées l'une par rapport à l'autre. / @media (min-width: 900px) { .ml-langue-pourquoi--media { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: var(--ml-space-xl); } } / La colonne de texte peut rétrécir dans la grille sans pousser l'image. / .ml-langue-pourquoi-texte { min-inline-size: 0; } / Choix mobile (documenté) : sous 900px, l'image se place SOUS le texte, dans l'ordre du DOM. C'est une photo de destination qui complète la lecture, elle n'est jamais masquée ni ne l'écrase : un écart la sépare du texte, et son ratio fixe borne sa hauteur. En deux colonnes cet écart tombe, la grille gère l'espacement. / .ml-langue-pourquoi-media { margin-block-start: var(--ml-space-lg); } @media (min-width: 900px) { .ml-langue-pourquoi-media { margin-block-start: 0; } } / L'image elle-même : grand arrondi du langage du site, ombre douce (jamais lourde), et un cadrage qui la borne (object-fit cover + ratio fixe) pour qu'elle ne déborde jamais, quelle que soit la taille du fichier posé. / .ml-langue-pourquoi-img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ml-radius-lg); box-shadow: var(--ml-shadow-md); } / ── LES PAYS QUE NOUS COUVRONS ────────────────────────────────────────── Cartes blanches à bord lilas, l'accent au survol et au focus (maquette). / .ml-langue-pays-grille { display: grid; grid-template-columns: 1fr; gap: var(--ml-space-md); margin-block-start: var(--ml-space-lg); } @media (min-width: 560px) { .ml-langue-pays-grille { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .ml-langue-pays-grille { grid-template-columns: repeat(3, 1fr); } } .ml-langue-pays-carte { position: relative; display: flex; flex-direction: column; gap: var(--ml-space-sm); padding: var(--ml-space-md); background: var(--ml-bg); border: 1px solid var(--ml-accent-bordure); border-radius: var(--ml-radius); box-shadow: var(--ml-shadow-sm); transition: border-color 220ms var(--ml-ease), box-shadow 220ms var(--ml-ease), transform 220ms var(--ml-ease); } .ml-langue-pays-carte:hover, .ml-langue-pays-carte:focus-within { border-color: var(--ml-accent); box-shadow: var(--ml-shadow-md); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .ml-langue-pays-carte { transition: none; } .ml-langue-pays-carte:hover, .ml-langue-pays-carte:focus-within { transform: none; } } .ml-langue-pays-tete { display: flex; align-items: center; gap: var(--ml-space-sm); } / Le drapeau du pays reste l'emoji partagé du thème (ml_drapeau_pays) : le nom du pays est écrit juste à côté, l'emoji est décoratif. / .ml-langue-pays-drapeau { flex: 0 0 auto; font-size: 1.7rem; line-height: 1; } .ml-langue-pays-nom { margin: 0; font-size: var(--ml-fs-h3); } .ml-langue-pays-lien { color: inherit; } / La carte entière est cliquable : le lien du nom s'étend à toute la carte. Le focus clavier reste porté par le lien lui-même (contour global du thème), la carte se soulève au focus-within. / .ml-langue-pays-lien::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .ml-langue-pays-meta { margin: 0.1em 0 0; font-size: var(--ml-fs-sm); color: var(--ml-text-mid); } .ml-langue-pays-desc { margin: 0; font-size: var(--ml-fs-sm); color: var(--ml-text-mid); } .ml-langue-pays-fleche { display: inline-flex; align-items: center; gap: 0.4em; margin-block-start: auto; color: var(--ml-accent); font-family: var(--ml-font-heading); font-weight: 700; font-size: var(--ml-fs-sm); } .ml-langue-pays-fleche svg { transition: transform 220ms var(--ml-ease); } .ml-langue-pays-carte:hover .ml-langue-pays-fleche svg, .ml-langue-pays-carte:focus-within .ml-langue-pays-fleche svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .ml-langue-pays-fleche svg { transition: none; } .ml-langue-pays-carte:hover .ml-langue-pays-fleche svg, .ml-langue-pays-carte:focus-within .ml-langue-pays-fleche svg { transform: none; } } / ── LA SECTION DES VILLES ──────────────────────────────────────────────── Sa propre section, à fond blanc (var(--ml-bg)) : elle tranche franchement avec le lilas de la page et détache le carrousel des cartes pays qui le précèdent. Son en-tête (surtitre, titre « Explore les villes », mini-intro) vient du groupe ml-blk-langue-villes-slider. / .ml-langue-villes { background: var(--ml-bg); } / ── LE CARROUSEL DES VILLES ────────────────────────────────────────────── Sous l'en-tête de la section des villes. Le composant (piste, cartes, flèches, points, et le masquage de la barre d'onglets sans objet sur une page d'une seule langue) est entièrement stylé dans main.css : il ne reste ici qu'à l'espacer de l'en-tête. / .ml-langue-carrousel { margin-block-start: var(--ml-space-lg); } / ── PASSERELLE MOINS DE 18 ANS ────────────────────────────────────────── Le conteneur d'accroche « moins de 18 ans » est une carte accueillante à deux zones : à gauche le texte éditable (titre + paragraphe du groupe, jamais touchés), à droite un médaillon décoratif. Fond en dégradé lilas doux de la palette, bord lilas, ombre légère, grand arrondi : l'esprit des cartes du site. Mobile first : une seule colonne, le médaillon au dessus du texte et centré (flex column-reverse, le texte reste premier dans le DOM et le médaillon décoratif ferme la lecture) ; dès 600px, texte à gauche, médaillon à droite. Contrastes revérifiés sur le point le plus foncé du dégradé (#eddcf7), donc le pire cas ; le reste de la carte est plus clair, donc plus contrasté : - le titre (--ml-primary, #2e123f) : 12,7:1 - le paragraphe (--ml-text-mid, #58515f) : 5,9:1 - le lien éventuel (--ml-accent, #661f80) : 7,8:1 Tous au dessus du minimum de 4,5:1. / .ml-langue-passerelle-inner { display: flex; flex-direction: column-reverse; gap: var(--ml-space-md); padding: var(--ml-space-lg); background: linear-gradient(135deg, #fbf6fe 0%, #eddcf7 100%); border: 1px solid var(--ml-accent-bordure); border-radius: var(--ml-radius-lg); box-shadow: var(--ml-shadow-sm); } @media (min-width: 600px) { .ml-langue-passerelle-inner { flex-direction: row; align-items: center; gap: var(--ml-space-lg); } } / La zone de texte éditable (titre + paragraphe du groupe). min-inline-size: 0 la laisse rétrécir dans la rangée sans déborder le médaillon. / .ml-langue-passerelle-texte { flex: 1 1 auto; min-inline-size: 0; } .ml-langue-passerelle-titre { margin-block-end: var(--ml-space-sm); font-size: var(--ml-fs-h3); } .ml-langue-passerelle-inner p { margin: 0; max-inline-size: 70ch; color: var(--ml-text-mid); } .ml-langue-passerelle-inner a { color: var(--ml-accent); text-decoration: underline; text-underline-offset: 3px; } / Le médaillon décoratif : un disque au dégradé d'accent portant le sac à dos dessiné au trait (blanc, posé en currentColor). Sur mobile il se centre au dessus du texte ; dès 600px il tient dans sa colonne de droite, à taille fixe pour ne jamais écraser le texte. L'ombre reste douce et teintée de l'accent, jamais une ombre lourde. Ornemental (aria-hidden dans le balisage), il ne porte aucune information : le titre et le paragraphe disent tout. Aucune animation : rien à couper pour prefers-reduced-motion. / .ml-langue-passerelle-visuel { flex: 0 0 auto; align-self: center; } .ml-langue-passerelle-medaillon { display: grid; place-items: center; inline-size: 108px; block-size: 108px; border-radius: var(--ml-radius-pill); background: linear-gradient(145deg, var(--ml-accent-vif), var(--ml-accent)); box-shadow: 0 12px 24px rgba(102, 31, 128, 0.2); color: #fff; } .ml-langue-passerelle-medaillon svg { inline-size: 54px; block-size: 54px; } @media (min-width: 600px) { .ml-langue-passerelle-medaillon { inline-size: 124px; block-size: 124px; } .ml-langue-passerelle-medaillon svg { inline-size: 62px; block-size: 62px; } } / Les formules proposées dans cette langue, posées sous l'encart d'accroche par la brique de l'accueil (ml_section_formules() avec la langue en argument, inc/section-formules.php : mêmes cartes que la page d'accueil, demande de Marino). On ne stylise ici que l'écart avec l'encart qui les précède : leur présentation interne appartient à la brique, jamais à ce gabarit. L'écart ne s'applique qu'entre l'encart et les formules, jamais quand les formules sont seules (en-tête retiré par la cliente). / .ml-langue-passerelle-inner + .ml-langue-formules { margin-block-start: var(--ml-space-lg); } / ── APPEL FINAL : dégradé de la couleur de marque (comme les fiches) ───── / .ml-langue-cta { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(120deg, var(--ml-accent), var(--ml-accent-dark)); color: #fff; text-align: center; } .ml-langue-cta h2 { color: #fff; } / Le paragraphe du CTA suit directement le h2, tous deux enfants directs du conteneur : la règle générale .ml-section > .ml-container > h2 + p (main.css, spécificité 0,2,2) le repeignait en gris (--ml-text-mid) par dessus le blanc voulu, .ml-langue-cta p (0,1,1) ne pesait pas assez pour la battre. Même correctif que le CTA des pages pays (fiche-pays.css, .ml-pays-cta) : on reprend la même structure, préfixée des classes de la section, ce qui monte la spécificité à 0,3,2, sans !important. Blanc plein, à la demande de Marino (« force-le ») : contraste mesuré sur le dégradé réel, 10,1:1 sur l'extrémité claire (--ml-accent, #661f80) et 13:1 sur l'extrémité sombre (--ml-accent-dark, #4d1760), très au dessus du minimum de 4,5:1. / .ml-langue-cta.ml-section > .ml-container > h2 + p { color: #fff; max-inline-size: 46ch; margin-inline: auto; } / Filigrane : le même champ de bulles que le CTA des pages (assets/img/bulles-fond.png, identique bit à bit au fichier source AAA.png). Image de fond CSS, aucune balise, donc rien à décrire pour une synthèse vocale et rien à télécharger tant que la section n'est pas peinte. Les bulles sont violettes : en fusion « screen » à faible opacité sur le même violet de fond, elles se devinent ton sur ton, jamais criardes. Le texte, peint au dessus (dans .ml-container), garde tout son contraste. Motif statique : rien à couper pour prefers-reduced-motion. Le conteneur de ce CTA a la même largeur (.ml-container, --ml-container-w) que celui des pages : mêmes valeurs de position et de taille de motif, sans adaptation. / .ml-langue-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: url('../img/bulles-fond.png'); background-repeat: no-repeat; background-position: 58% 0; background-size: 190% auto; mix-blend-mode: screen; opacity: 0.4; pointer-events: none; } @media (min-width: 900px) { .ml-langue-cta::before { background-position: center 0; background-size: 100% auto; } } .ml-langue-cta-inner { display: grid; justify-items: center; gap: var(--ml-space-sm); } .ml-langue-cta-bouton { margin-block-start: var(--ml-space-sm); background: #fff; color: var(--ml-accent); } .ml-langue-cta-bouton:hover { background: var(--ml-accent-soft); } / ── Le cas d'un seul pays ── Une carte seule dans une grille de trois colonnes flotte en haut à gauche d'une bande vide : le visiteur cherche la suite qui n'existe pas, et la page a l'air inachevée alors qu'elle est complète (constat de Marino, juillet 2026). La grille laisse alors place à un panneau large, photo du pays d'un côté, texte de l'autre. C'est une mise en avant, plus un élément de liste. Le corps est enveloppé dans .ml-langue-pays-corps dans TOUS les cas, panneau ou grille : une seule structure de balisage vaut mieux que deux, et cette enveloppe reprend exactement la colonne flexible que portait la carte, de sorte que rien ne bouge dans une grille ordinaire. / .ml-langue-pays-corps { display: flex; flex: 1; flex-direction: column; gap: var(--ml-space-sm); min-inline-size: 0; } / Deux classes plutôt qu'une : les paliers de la grille ordinaire (deux puis trois colonnes) portent le même poids, seule une spécificité plus forte les emporte à coup sûr, quel que soit l'ordre des règles. / .ml-langue-pays-grille.ml-langue-pays-grille--solo { grid-template-columns: 1fr; } / La photo : sous le texte en colonne étroite, à côté dès qu'il y a la place. Décorative (le gabarit la pose en aria-hidden, alt vide) : le nom du pays, juste à côté, porte déjà le sens et le lien. / .ml-langue-pays-photo { overflow: hidden; border-radius: var(--ml-radius-sm); } .ml-langue-pays-photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } @media (min-width: 760px) { .ml-langue-pays-carte--solo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; / Le rembourrage passe au corps : la photo, elle, touche les bords du panneau. overflow: hidden lui fait suivre l'arrondi de la carte. / padding: 0; overflow: hidden; align-items: stretch; } .ml-langue-pays-carte--solo .ml-langue-pays-photo { block-size: 100%; / Une hauteur plancher pour que le panneau garde de l'allure même quand le texte du pays est court. / min-block-size: 260px; border-radius: 0; } .ml-langue-pays-carte--solo .ml-langue-pays-corps { justify-content: center; padding: var(--ml-space-lg); } / Dans le panneau, la flèche suit le texte au lieu d'être plaquée en bas : le bloc entier est centré verticalement, une flèche collée au fond s'en détacherait. */ .ml-langue-pays-carte--solo .ml-langue-pays-fleche { margin-block-start: var(--ml-space-xs); } }