/* ============================================================ ACO FRONT — pages publiques cours (charte plateforme) Tokens valides sur maquettes 00_docs/maquettes_front_2026-07 ============================================================ */ /* Tokens aussi sur :root : certains blocs (espace chauffeur, formulaires) sont rendus hors du conteneur .acofr et n'héritaient donc d'aucune variable — les boutons sortaient sans fond (texte blanc sur blanc). */ :root { --acofr-blue: #2B6CA3; --acofr-blue-dark: #1F5580; --acofr-blue-pale: #EAF2F8; --acofr-red: #D64541; --acofr-green: #2E8B57; --acofr-amber: #E67E22; --acofr-ink: #1C2B36; --acofr-grey: #5C6B77; --acofr-line: #E3E8EC; } .acofr { --acofr-blue: #2B6CA3; --acofr-blue-dark: #1F5580; --acofr-blue-pale: #EAF2F8; --acofr-red: #D64541; --acofr-green: #2E8B57; --acofr-amber: #E67E22; --acofr-ink: #1C2B36; --acofr-grey: #5C6B77; --acofr-line: #E3E8EC; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--acofr-ink); font-size: 15px; line-height: 1.55; max-width: 1140px; margin: 0 auto; } .acofr * { box-sizing: border-box; } .acofr a { text-decoration: none; } /* ---- Boutons ---- */ .acofr-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .acofr-btn--red { background: var(--acofr-red); color: #fff; } .acofr-btn--blue { background: var(--acofr-blue); color: #fff; } .acofr-btn--ghost { background: #fff; color: var(--acofr-blue); border-color: var(--acofr-blue); } .acofr-btn--full { width: 100%; margin: 14px 0 10px; } .acofr-btn:hover { filter: brightness(.95); } /* ---- Filtres ---- */ .acofr-filters { display: flex; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--acofr-line); border-radius: 12px; padding: 14px; margin-bottom: 14px; } .acofr-filters select, .acofr-filters input { flex: 1; min-width: 140px; padding: 10px 12px; border: 1px solid var(--acofr-line); border-radius: 8px; font-size: 14.5px; color: var(--acofr-ink); background: #fff; } .acofr-filters select:focus, .acofr-filters input:focus { outline: none; border-color: var(--acofr-blue); box-shadow: 0 0 0 3px rgba(43,108,163,.12); } .acofr-count { color: var(--acofr-grey); font-size: 14px; margin: 0 0 16px; } .acofr-empty { color: var(--acofr-grey); padding: 26px 0; } /* Case à cocher « paiement en ligne » dans les filtres */ .acofr-filters__check { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--acofr-ink); cursor: pointer; margin-top: 2px; } .acofr-filters__check input { flex: 0 0 auto; min-width: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--acofr-blue); } /* Badges de paiement / précommande */ /* 1.204.0 : .acofr-pay* supprime — aucun usage PHP restant, et ces couleurs dupliquaient celles de .acofr-mode juste en dessous. Les modes de paiement passent par .aco-pastille (assets/css/aco-etats.css). */ /* Légende explicative */ .acofr-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; background: #fff; border: 1px solid var(--acofr-line); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; } .acofr-legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--acofr-grey); } .acofr-legend__item .aco-pastille { flex: 0 0 auto; } /* Badges de mise en avant (boost) — 1.204.0 : supprimes. .acofr-badge etait declare DEUX fois dans ce fichier, ici et plus bas pour l'espace chauffeur, a specificite egale : la seconde ecrasait la premiere, et le gap:4px prevu pour l'espacement etoile/texte ne s'appliquait jamais. Tous les usages passent sur .aco-pastille. */ /* ---- Ligne cours ---- */ .acofr-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: #fff; border: 1px solid var(--acofr-line); border-radius: 10px; margin-bottom: 10px; flex-wrap: wrap; position: relative; } /* 1.206.0 — Etiquette de boost, posee sur le bord haut de la carte. Le ruban diagonal de la 1.205.0 obligeait a degager le coin (60px de decalage) : les lignes boostees ne s'alignaient plus avec les autres. L'etiquette horizontale n'impose rien au contenu — seule une marge haute evite qu'elle chevauche la ligne du dessus. Couleur = celle de la bordure de la carte, texte en blanc. C'est ce lien qui fait lire l'etiquette comme l'onglet de SA carte et non comme une pastille flottante. */ .acofr-row--etiq { margin-top: 18px; } .acofr-etiq { position: absolute; top: -11px; left: 14px; padding: 2px 11px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.6; color: #fff; white-space: nowrap; pointer-events: none; } .acofr-etiq--une { background: var(--acofr-blue); } .acofr-etiq--last { background: var(--aco-et-last-fg); } /* La carte « Derniere minute » n'existait pas : seule « A la une » avait sa bordure. Meme traitement, autre couleur, fond blanc conserve pour que les deux boosts restent distinguables au premier coup d'oeil. */ .acofr-row--last { border-color: var(--aco-et-last-fg); box-shadow: inset 3px 0 0 0 var(--aco-et-last-fg); } /* Cours « À la une » : mise en avant discrète (fond pâle + liseré bleu) */ .acofr-row--une { background: var(--acofr-blue-pale); border-color: var(--acofr-blue); box-shadow: inset 3px 0 0 0 var(--acofr-blue); } /* Sections dédiées (accueil) : À la une / Dernière minute dans un cadre distinct */ .acofr-feat { border-radius: 14px; padding: 18px 18px 6px; border: 1px solid var(--acofr-line); } .acofr-feat__h { margin: 0 0 2px; } .acofr-feat--une { background: var(--acofr-blue-pale); border-color: var(--acofr-blue); } .acofr-feat--last { background: #FDECEC; border-color: #F5C2C0; } .acofr-feat .acofr-sec-sub { margin-top: 0; } .acofr-feat .acofr-row { border-color: var(--acofr-line); } /* Fiche vitrine centre */ .acofr-vit-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 26px; align-items: start; } .acofr-vit-desc { color: var(--acofr-ink); font-size: 15px; line-height: 1.6; } .acofr-vit-side { background: #fff; border: 1px solid var(--acofr-line); border-radius: 12px; padding: 16px 18px; } .acofr-vit-contact { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .acofr-vit-contact a { color: var(--acofr-blue); text-decoration: none; } .acofr-vit-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .acofr-vit-soc { display: inline-block; font-size: 13px; font-weight: 600; color: var(--acofr-blue); border: 1px solid var(--acofr-blue); border-radius: 999px; padding: 5px 12px; text-decoration: none; } .acofr-vit-soc:hover { background: var(--acofr-blue-pale); } .acofr-centre-page .acofr-centre__flag { background: #fff; border-radius: 12px; padding: 6px; display: inline-flex; } @media (max-width: 720px) { .acofr-vit-grid { grid-template-columns: 1fr; } } /* Annonces (emploi) */ .acofr-note { border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; } .acofr-note--ok { background: #E4F4EA; color: #1E7C43; } .acofr-note--info{ background: var(--acofr-blue-pale); color: #235a86; } .acofr-note--err { background: #FDECEC; color: #B42318; } /* ⚠️ 1.216.0 — la page de publication n'avait AUCUN conteneur de largeur : .acofr-annonce-form etait une classe sans regle. Le contenu commencait donc ou le theme voulait, decale par rapport au logo, et colle sous l'en-tete. Meme gabarit que .acofr-page (1140 px, 20 px de marge laterale), avec le dessus de la page d'activation (32 px) puisqu'il n'y a pas de bandeau. */ .acofr-annonce-form { max-width: 1140px; margin: 0 auto; padding: 32px 20px 56px; } .acofr-annonce__head { margin: 0 0 16px; } .acofr-annonce__lead { color: var(--acofr-ink); font-size: 15px; margin: 4px 0 0; } .acofr-annonce__hint { color: var(--acofr-grey); font-size: 13.5px; margin: 8px 0 0; } .acofr-annonce__hint a { color: var(--acofr-blue); font-weight: 600; } .acofr-annonce { background: #fff; border: 1px solid var(--acofr-line); border-radius: 12px; padding: 24px; } /* La carte remplit la colonne : ses bords s'alignent sur le logo et sur le pied de page. Le 720 px d'origine la laissait flotter dans le vide. */ .acofr-annonce-form .acofr-annonce { max-width: none; } .acofr-annonce__type { border: 1px solid var(--acofr-line); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; } .acofr-annonce__type legend { font-weight: 700; font-size: 13px; color: var(--acofr-grey); padding: 0 6px; } .acofr-annonce__opt { display: block; padding: 6px 0; font-size: 14.5px; } .acofr-annonce__hint { color: var(--acofr-grey); font-style: normal; font-size: 13px; } .acofr-annonce__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .acofr-annonce__grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--acofr-ink); } .acofr-annonce__grid input, .acofr-annonce__grid textarea, .acofr-annonce__grid select { padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-weight: 400; } .acofr-annonce__full { grid-column: 1 / -1; } .acofr-annonce__note { color: var(--acofr-grey); font-size: 13px; margin: 14px 0; } .acofr-annonces__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; } .acofr-annonce-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .acofr-annonce-card { display: block; background: #fff; border: 1px solid var(--acofr-line); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--acofr-ink); transition: box-shadow .15s, border-color .15s; } .acofr-annonce-card:hover { border-color: var(--acofr-blue); box-shadow: 0 6px 18px rgba(43,108,163,.10); } .acofr-annonce-card h3 { margin: 10px 0 4px; font-size: 16px; } .acofr-annonce-card__meta { color: var(--acofr-grey); font-size: 12.5px; } .acofr-annonce-card p { color: var(--acofr-ink); font-size: 14px; line-height: 1.5; margin: 8px 0 10px; } .acofr-annonce-card__more { color: var(--acofr-blue); font-weight: 600; font-size: 13.5px; } @media (max-width: 620px) { .acofr-annonce__grid { grid-template-columns: 1fr; } } .acofr-dt { background: var(--acofr-blue-pale); color: var(--acofr-blue); border-radius: 8px; padding: 8px 12px; text-align: center; font-weight: 700; font-size: 15px; min-width: 64px; line-height: 1.2; } .acofr-dt small { display: block; font-weight: 500; color: var(--acofr-grey); font-size: 12px; } .acofr-t { flex: 1 1 auto; min-width: 0; } .acofr-theme { display: block; font-size: 16px; font-weight: 700; color: var(--acofr-ink); line-height: 1.3; margin: 0 0 3px; } .acofr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--acofr-grey); font-size: 13.5px; } .acofr-sub i { font-style: normal; font-weight: 600; color: var(--acofr-ink); } .acofr-sub .sep { opacity: .55; } .acofr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; } .acofr-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--acofr-blue-pale); color: var(--acofr-blue); white-space: nowrap; } .acofr-lg { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--acofr-grey); border: 1px solid var(--acofr-line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .acofr-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; } .acofr-rowact { display: flex; gap: 8px; } /* 1.204.0 : plus de couleur ici. La disponibilite est rendue par aco_etat_txt(), qui pose le ton ; ce selecteur ne garde que la taille. Laisser un « color » ici le ferait gagner sur le ton (meme specificite, feuille chargee apres). */ .acofr-places { font-size: 13px; white-space: nowrap; } .acofr-prix { font-weight: 800; font-size: 17px; white-space: nowrap; } /* ============================================================ LIGNE DE COURS — refonte 1.164.0 (retour client du 31.08.2026) Disposition : [date] [titre / centre-ville / langue + dispo] [pictos, prix, boutons] ============================================================ */ /* Pastille date : jour, mois, puis ANNEE sur une 3e ligne. */ .acofr-dt__y { font-weight: 500; color: var(--acofr-grey); font-size: 11px; letter-spacing: .02em; } /* 3e ligne du bloc central : langue puis disponibilite. Remplace .acofr-tags, qui portait la categorie et les pastilles de mode. */ .acofr-rowmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; } .acofr-rowmeta .sep { color: var(--acofr-grey); opacity: .55; } .acofr-lgline { display: inline-flex; align-items: center; gap: 6px; color: var(--acofr-grey); font-size: 13px; } /* Drapeau SVG de la langue du cours. */ .acofr-flag { display: block; border-radius: 2px; flex: 0 0 auto; } /* Pictos de mode, en haut a droite. ⚠️ min-width identique pour --online et --centre : le client veut deux pictos de MEME largeur. La valeur est calee sur le libelle le plus long des deux langues, « Au centre » en francais (l'allemand « Vor Ort » et « Online » sont plus courts) ; verifiee par capture a 1440 / 1024 / 375 px. Si un libelle est rallonge en traduction, remesurer. */ .acofr-modes { display: flex; align-items: center; gap: 6px; } /* 1.204.0 : .acofr-mode et ses variantes sont supprimees — les pastilles de mode de paiement et de precommande sont rendues par aco_pastille(). Seul le conteneur .acofr-modes reste, il ne porte aucune couleur. */ .acofr-mode__i { flex: 0 0 auto; } .acofr-right .acofr-modes { justify-content: flex-end; } /* Prix dans la 3e ligne de la colonne de gauche (maquette client 31.08.2026). */ .acofr-metatxt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; } .acofr-rowmeta > .acofr-prix { margin-right: 6px; } /* Cours complet : bouton conserve mais inerte. pointer-events:none en plus du sans href — ceinture et bretelles. */ .acofr-btn--off { background: #EEF2F5; color: #9AA6B0; border-color: transparent; cursor: not-allowed; pointer-events: none; } .acofr-btn--off:hover { filter: none; } /* Legende sous la liste : meme composant que les lignes, sinon le picto explique ne ressemble pas au picto affiche. */ .acofr-legend__item .aco-pastille { flex: 0 0 auto; } /* ------------------------------------------------------------ LIGNE DE COURS EN MOBILE (< 620 px) — maquette client du 31.08.2026 [date] [pictos] [prix] titre / centre-ville / langue + dispo [Détail] [S'inscrire] ⚠️ Passage en GRILLE, pas en flex. La pastille de date doit occuper DEUX rangees (pictos puis prix a sa droite) : un conteneur flex ne sait pas faire ca, seule la grille le permet. ⚠️ display:contents sur .acofr-t, .acofr-rowmeta et .acofr-right efface leur boite et promeut leurs enfants en items de la grille — c'est ce qui permet de sortir le prix de la 3e ligne et de le remonter en haut a droite SANS le dupliquer dans le HTML. Ne pas remplacer par display:block. ------------------------------------------------------------ */ @media (max-width: 620px) { .acofr-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dt modes" "dt prix" "theme theme" "sub sub" "meta meta" "act act"; gap: 7px 12px; align-items: start; padding: 14px 16px; } .acofr-t, .acofr-rowmeta, .acofr-right { display: contents; } /* 1.206.0 : l'etiquette ne touche pas au gabarit de la grille — elle est simplement un peu plus petite et un peu plus a gauche. */ .acofr-etiq { left: 12px; top: -10px; font-size: 10px; padding: 2px 9px; } .acofr-dt { grid-area: dt; align-self: start; } /* ⚠️ Selecteur descendant obligatoire : la regle bureau « .acofr-right .acofr-modes { justify-content: flex-end } » a une specificite (0,2,0) et gagnerait sur un « .acofr-modes » simple (0,1,0). */ .acofr-right .acofr-modes { grid-area: modes; justify-content: flex-end; } .acofr-row .acofr-prix { grid-area: prix; justify-self: end; font-size: 21px; } .acofr-theme { grid-area: theme; font-size: 17px; margin: 4px 0 0; } .acofr-sub { grid-area: sub; font-size: 14px; } .acofr-metatxt { grid-area: meta; font-size: 13.5px; } .acofr-rowmeta > .acofr-prix { margin-right: 0; } /* ⚠️ width:100% obligatoire, et pas justify-self:stretch. Mesure du 31.08.2026 : sur cet item, ni « justify-self: stretch » ni « justify-items: stretch » sur la grille n'ont le moindre effet — la largeur reste bloquee au contenu (163 px sur 305 disponibles) et les boutons se tassent a droite. « width: 100% » fonctionne. Le parent .acofr-rowact est un enfant de .acofr-right, qui est en display:contents ; c'est vraisemblablement lie a ca, mais je ne l'ai pas prouve — retenir le fait mesure, pas l'explication. */ .acofr-rowact { grid-area: act; margin-top: 4px; width: 100%; } .acofr-rowact .acofr-btn--row { flex: 1 1 0; } /* Pictos reduits pour que les deux tiennent a cote de la pastille de date sur un ecran de 375 px (demande client : « picto plus petit »). */ .acofr-mode__i { width: 13px; height: 13px; } } /* ---- Pagination ---- */ .acofr-pager { display: flex; gap: 8px; justify-content: center; margin-top: 22px; } .acofr-pager a { padding: 8px 14px; border: 1px solid var(--acofr-line); border-radius: 8px; background: #fff; font-weight: 600; color: var(--acofr-ink); } .acofr-pager a.on { background: var(--acofr-blue); color: #fff; border-color: var(--acofr-blue); } /* ---- Fiche cours ---- */ .acofr-fiche { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; } .acofr-card { background: #fff; border: 1px solid var(--acofr-line); border-radius: 10px; padding: 26px; margin-bottom: 18px; } .acofr-h1 { font-size: 28px; margin: 10px 0 6px; letter-spacing: -.3px; line-height: 1.25; } .acofr-h2 { font-size: 18px; margin: 0 0 10px; } .acofr-meta { color: var(--acofr-grey); font-size: 14.5px; } .acofr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; } .acofr-fact { background: var(--acofr-blue-pale); border-radius: 8px; padding: 12px 14px; font-size: 14px; } .acofr-fact b { display: block; font-size: 12.5px; color: var(--acofr-blue); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; } .acofr-des { font-size: 15px; } .acofr-prix-big { font-size: 30px; font-weight: 800; } /* 1.205.0 : la pastille est en inline-flex ; on la sort sur sa propre ligne avec une marge, sans lui imposer display:block (qui casserait le centrage vertical de l'icone). */ .acofr-fiche__aside .acofr-places { margin-top: 8px; font-size: 13px; } .acofr-trust { font-size: 13px; color: var(--acofr-grey); } .acofr-trust div { margin: 5px 0; } /* ---- Responsive ---- */ @media (max-width: 880px) { .acofr-fiche { grid-template-columns: 1fr; } .acofr-h1 { font-size: 23px; } } @media (max-width: 560px) { .acofr-facts { grid-template-columns: 1fr; } .acofr-row { padding: 14px; flex-wrap: wrap; } .acofr-t { flex: 1 1 100%; } .acofr-right { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; margin-top: 4px; } .acofr-rowact { margin-left: auto; } } /* ============================================================ TOPBAR / FOOTER / PAGE — gabarits front rendus par le plugin ============================================================ */ body.acofr-body { margin: 0; background: #F7F9FA; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .acofr-topbar { background: #fff; border-bottom: 1px solid #E3E8EC; position: sticky; top: 0; z-index: 50; transition: box-shadow .2s ease, border-color .2s ease; } .acofr-topbar.is-scrolled { box-shadow: 0 6px 22px rgba(28,43,54,.10); border-bottom-color: transparent; } .acofr-topbar__in { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 26px; min-height: 72px; flex-wrap: wrap; /* box-sizing : voir la regle groupee plus bas (.acofr-topbar__in, ...). */ } /* Marque : logo (panneau routier) + lettrage oacp.ch/czv.ch + slogan. Le panneau est un PICTOGRAMME, pas le porteur du nom : le texte « oacp.ch » gravé dedans ne fait que 19,7 % de la hauteur du panneau (mesuré : 182 px sur 922 dans le fichier source), donc à 46 px de haut il retombe à 9 px et n'est plus lisible. C'est le lettrage à côté qui porte le nom — ne pas supprimer .acofr-wm en croyant que le logo suffit. */ .acofr-brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; } .acofr-logo { display: inline-flex; align-items: baseline; text-decoration: none; line-height: 1; } .acofr-logo--mark { align-items: center; gap: 11px; } .acofr-logo__mark { display: block; height: 46px; width: auto; flex: 0 0 auto; } .acofr-logo__col { display: flex; flex-direction: column; align-items: flex-start; } .acofr-wm { font-size: 34px; font-weight: 800; letter-spacing: -.8px; line-height: 1; } .acofr-wm__name { color: #1C2B36; } .acofr-wm__tld { color: #2B6CA3; } .acofr-logo__txt { font-size: 24px; font-weight: 800; color: #2B6CA3; } .acofr-logo__tag { font-size: 10.5px; font-weight: 600; color: #5C6B77; line-height: 1.2; letter-spacing: .3px; margin-top: 2px; } /* Le menu se cale a DROITE, contre la zone d'actions, au lieu de rester colle au bloc marque (demande client du 31.08.2026 : mesure avant correction, marque finissant a 469px et menu demarrant a 503px, avec 400px de vide entre le menu et les actions). */ .acofr-nav { display: flex; gap: 24px; flex: 1; flex-wrap: wrap; margin-left: 8px; margin-right: 12px; justify-content: flex-end; } .acofr-nav a { position: relative; color: #1C2B36; font-weight: 500; font-size: 15px; text-decoration: none; padding: 6px 0; } .acofr-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: #2B6CA3; transition: right .2s ease; } .acofr-nav a:hover { color: #2B6CA3; } .acofr-nav a:hover::after { right: 0; } .acofr-topbar__cta { box-shadow: 0 4px 14px rgba(214,69,65,.28); } /* ============================================================ MENU PRINCIPAL — un niveau de sous-entrees (1.167.0) Centres / Entreprises / Chauffeurs sont regroupes sous « Espaces » au lieu d'occuper trois entrees de premier niveau. Mesure du 31.08.2026 sur oacp26 (fenetre 1536 px, 1100 px utiles) : marque 328 + menu 6 entrees 562 + actions 153 + 2 gaps = 1095 px. Il restait CINQ pixels — d'ou le passage a la ligne constate par le client des que la police rend un peu plus large. ============================================================ */ .acofr-menu { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .acofr-menu > li { position: relative; } /* Chevron sur l'entree qui ouvre un sous-menu. ⚠️ Porte par le
  • et non par le : « .acofr-nav a::after » est deja pris par le soulignement anime au survol. */ .acofr-menu > li.menu-item-has-children > a { padding-right: 15px; } .acofr-menu > li.menu-item-has-children::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -1px; border: 4px solid transparent; border-top-color: #8A97A1; pointer-events: none; transition: border-top-color .15s ease; } .acofr-menu > li.menu-item-has-children:hover::after { border-top-color: var(--acofr-blue); } /* Pont invisible entre l'entree et le panneau : sans lui, le survol se perd dans l'espace vertical qui les separe et le menu se referme tout seul. */ .acofr-menu > li.menu-item-has-children::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } .acofr-menu .sub-menu { position: absolute; top: calc(100% + 12px); left: -12px; min-width: 214px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--acofr-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(28,43,54,.14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 60; } /* :focus-within ouvre le panneau au clavier sans une ligne de JavaScript. */ .acofr-menu > li:hover > .sub-menu, .acofr-menu > li:focus-within > .sub-menu, .acofr-menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; } .acofr-menu .sub-menu li { margin: 0; } .acofr-menu .sub-menu a { display: block; padding: 9px 12px; border-radius: 7px; font-size: 14.5px; white-space: nowrap; } .acofr-menu .sub-menu a:hover { background: var(--acofr-blue-pale); color: var(--acofr-blue); } /* Le soulignement anime n'a pas de sens dans un panneau vertical. */ .acofr-menu .sub-menu a::after { display: none; } /* Zone d'actions a droite : langue + compte + panier + burger */ .acofr-actions { display: flex; align-items: center; gap: 14px; } /* Bouton du menu deroulant mobile. Masque tant que la barre tient sur une ligne ; la media query plus bas l'affiche et transforme .acofr-nav en panneau deroulant. */ .acofr-burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; transition: background .15s ease; } .acofr-burger:hover { background: #EAF2F8; } .acofr-burger__b { display: block; width: 20px; height: 2px; border-radius: 2px; background: #1C2B36; transition: transform .18s ease, opacity .18s ease; } /* Ouvert : les trois barres deviennent une croix. */ .acofr-burger.is-open .acofr-burger__b:nth-child(1) { transform: translateY(6px) rotate(45deg); } .acofr-burger.is-open .acofr-burger__b:nth-child(2) { opacity: 0; } .acofr-burger.is-open .acofr-burger__b:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .acofr-lang { font-size: 13px; font-weight: 700; color: #9AA6B0; user-select: none; letter-spacing: .3px; } .acofr-lang__on { color: #1C2B36; } .acofr-lang__sep { margin: 0 3px; color: #cbd5e1; } .acofr-lang__off { color: #9AA6B0; } /* 1.256.0 : la langue non courante est desormais un lien. */ .acofr-lang a { text-decoration: none; color: inherit; transition: color .15s ease; } .acofr-lang a:hover, .acofr-lang a:focus-visible { color: #2B6CA3; } .acofr-lang a:focus-visible { outline: 2px solid #2B6CA3; outline-offset: 3px; border-radius: 3px; } .acofr-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: #1C2B36; background: transparent; text-decoration: none; transition: background .15s ease, color .15s ease; } .acofr-ico:hover { background: #EAF2F8; color: #2B6CA3; } .acofr-cart { position: relative; } .acofr-cart__badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #D64541; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; } /* ------------------------------------------------------------ MENU DEROULANT (< 1100 px) ⚠️ Seuil MESURE, pas choisi au jugé. Rendu de la barre reelle (Chromium, meme pile de polices que le site) : marque 338 px + menu 5 entrees + actions 155 px + 2 gaps de 26 px. Le menu commence a passer a la ligne a 1060 px de fenetre. Le seuil est pose a 1099 px pour garder ~40 px de marge : la pile -apple-system / Segoe UI / Roboto ne rend pas la meme largeur sur macOS, Windows et Linux. ⚠️ Ce seuil depend des 5 libelles actuels (Trouver un cours / Centres / Entreprises / Chauffeurs / Actualites). Si le client ajoute une entree au menu, il faut remesurer et remonter le seuil, sinon la barre repasse a deux lignes entre 1100 px et la nouvelle limite. ------------------------------------------------------------ */ @media (max-width: 1099px) { .acofr-burger { display: inline-flex; } /* Les actions collent a droite puisque la nav ne remplit plus la ligne. */ .acofr-actions { margin-left: auto; } .acofr-topbar__in { row-gap: 0; } .acofr-nav { display: none; order: 3; flex: 0 0 100%; flex-direction: column; gap: 0; margin-left: 0; padding: 4px 0 10px; border-top: 1px solid var(--acofr-line, #E3E9EF); } .acofr-nav.is-open { display: flex; } .acofr-nav li { list-style: none; margin: 0; } /* Le menu deroulant « Espaces » n'a pas de sens dans un panneau deja deroulant : sous 1100 px le sous-menu est simplement deplie et indente. */ .acofr-menu { flex-direction: column; gap: 0; width: 100%; align-items: stretch; } .acofr-menu > li.menu-item-has-children::after, .acofr-menu > li.menu-item-has-children::before { display: none; } .acofr-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 4px 16px; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .acofr-menu .sub-menu a { padding: 10px 2px; font-size: 14.5px; color: var(--acofr-grey); white-space: normal; } .acofr-menu .sub-menu a:hover { background: transparent; } .acofr-nav a { display: block; padding: 12px 2px; font-size: 15.5px; border-bottom: 1px solid #F1F5F8; } .acofr-nav li:last-child a, .acofr-nav > a:last-child { border-bottom: 0; } /* Le soulignement anime n'a pas de sens dans une liste verticale. */ .acofr-nav a::after { display: none; } .acofr-nav a:active { background: #F6F9FB; } } @media (max-width: 782px) { .acofr-logo__tag { display: none; } /* 1.256.0 : le selecteur reste visible sur mobile. Tant qu'il n'etait qu'un decor, le cacher ne coutait rien ; maintenant qu'il fonctionne, le cacher priverait de tout moyen de changer de langue la moitie des visiteurs — et sur ce site, la moitie qui consulte depuis un telephone est la plus nombreuse. Il ne prend qu'une quarantaine de pixels. */ .acofr-lang { margin-right: 2px; } } .acofr-main { min-height: 60vh; } /* ⚠️ box-sizing sur TOUS les conteneurs de largeur du front, en un seul endroit. Le plugin ne pose border-box que via « .acofr * » et « .acofr-home * » : tout conteneur situe HORS de ces deux racines retombe sur content-box, ou max-width s'applique au contenu et les 2 x 20px de padding s'ajoutent par-dessus -> boite de 1180px au lieu de 1140, contenu decale de 20px. Corrige pour l'en-tete et le pied en 1.164.0 ; .acofr-page avait ete oublie, ce qui decalait la fiche cours, le panier, le caddie, mon-compte et la confirmation (constate le 31.08.2026 : contenu de page a 198px contre 218px pour l'en-tete). Ajouter ici tout nouveau conteneur de largeur. */ .acofr-topbar__in, .acofr-footer__in, .acofr-page, .acofr-annonce-form, .acofr-wrap { box-sizing: border-box; } .acofr-page { max-width: 1140px; margin: 0 auto; padding: 22px 20px 56px; } .acofr-page .acofr-h1 { margin: 0 0 16px; font-size: 26px; } .acofr-footer { background: #1C2B36; color: #B9C4CD; font-size: 14px; margin-top: 40px; } .acofr-footer__in { max-width: 1140px; margin: 0 auto; padding: 30px 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* 1.211.0 : liens de bas de page (tarifs, conditions générales, …). */ .acofr-footer__liens { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; } .acofr-footer__liens a { color: #D6DEE5; text-decoration: none; border-bottom: 1px solid transparent; } .acofr-footer__liens a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); } .acofr-footer__copy { color: #8A99A6; } @media (max-width: 640px) { .acofr-footer__in { justify-content: flex-start; } .acofr-footer__liens { gap: 6px 16px; } } .acofr-footer b { color: #fff; } .acofr-footer a { color: #B9C4CD; text-decoration: none; margin-right: 14px; } .acofr-footer a:hover { color: #fff; } @media (max-width: 640px) { .acofr-topbar__in { gap: 14px; row-gap: 0; padding: 8px 14px; min-height: 0; } /* Le lettrage reste lisible, le panneau se contente d'accompagner. */ .acofr-logo__mark { height: 36px; } .acofr-logo--mark { gap: 9px; } .acofr-wm { font-size: 28px; } .acofr-actions { gap: 6px; } } /* ============================================================ HARMONISATION PANIER (#aco-panier-wrap) sur la charte Overrides CSS seuls — le template store reste inchange. !important requis : le kit Elementor du theme force les