*/
div.citation-vitrine.citation-colonne {
margin:24px 0px 22px 0px; /* EPSU/02.11.26 - plus d'espace après le bouton du guide */
}
div.citation-vitrine.citation-colonne::before {
margin-bottom:10px;
}
div.citation-vitrine.citation-colonne p.citation-texte {
font-size:16px;
line-height:1.45;
}
div.citation-vitrine.citation-colonne p.citation-auteur {
font-size:11px;
}
/*------------- CITATION ----------------*/
/*------------- ACCUEIL ----------------*/
/* EPSU/01.11.26 - mise en page du texte de l'accueil (rubrique accueil, saisie dans le back office).
Le début du texte (introduction, liens des formations, fil conducteur) garde sa mise en forme d'origine.
Blocs :
h1/h2.accueil-titre titres de section (sans filet)
div.accueil-points encadré gris "L'EPSU en bref" : p.accueil-points-titre puis
div.accueil-actu une par nouvelle : p.accueil-actu-date, p.accueil-actu-titre, puis paragraphes
p.accueil-suite lien "toute l'actualité" puis, en dessous, span.accueil-reseaux (icônes)
Uniquement div, p, a, span avec classes : l'éditeur du back office (TinyMCE 3) les conserve. */
h1.accueil-titre, h2.accueil-titre {
margin:30px 0px 14px 0px;
padding:0px;
border:0px;
font-size:24px;
font-weight:400;
line-height:1.3;
color:#262E38;
}
div.accueil-points {
margin:18px 0px 6px 0px;
padding:14px 16px 6px 16px;
background:#f6f7f6; /* plus clair que les boutons */
}
div.accueil-points p.accueil-points-titre {
margin:0px 0px 10px 0px;
font-size:11px;
font-weight:700;
letter-spacing:1.2px;
text-transform:uppercase;
color:#596163;
}
div.accueil-points ul {
list-style:none;
margin:0px;
padding:0px;
}
div.accueil-points li {
position:relative;
margin:0px 0px 12px 0px;
padding:0px; /* EPSU/03.11.26 - sans puces (avant : 0 0 0 16px, avec carré rouge) */
background:none;
font-size:13px;
line-height:1.5;
color:#363E48;
}
div.accueil-points li::before {
content:none; /* neutralise aussi la puce générale des listes du site */
}
/* EPSU/03.11.26 - puces carrées rouges retirées ; ancien style conservé pour mémoire :
div.accueil-points li {
margin:0px 0px 9px 0px;
padding:0px 0px 0px 16px;
}
div.accueil-points li::before {
content:"";
position:absolute;
left:0px;
top:7px;
width:6px;
height:6px;
background:#d10203;
}
*/
div.accueil-points li strong { color:#262E38; }
div.accueil-actu {
margin:0px 0px 18px 0px;
padding:0px 0px 0px 14px;
border-left:2px solid #e0e1e0;
}
div.accueil-actu p {
margin:0px 0px 6px 0px;
}
div.accueil-actu p.accueil-actu-date {
margin:0px 0px 2px 0px;
font-size:11px;
font-weight:700;
letter-spacing:1.2px;
text-transform:uppercase;
color:#596163;
}
div.accueil-actu p.accueil-actu-titre {
margin:0px 0px 4px 0px;
font-size:15px;
font-weight:700;
color:#262E38;
}
div.accueil-actu p.accueil-actu-titre a { color:#262E38; }
p.accueil-suite {
margin:14px 0px 0px 0px;
padding:0px;
}
p.accueil-suite span.accueil-reseaux { /* icônes sous le lien, alignées à gauche */
display:block;
margin-top:10px;
}
p.accueil-suite span.accueil-reseaux a { margin:0px 6px 0px 0px; }
/* EPSU/09.11.26 - nouvelles dans la colonne droite (accueil de /fr/, environ 240 px) : mêmes blocs que dans le texte
central (h2.accueil-titre, div.accueil-actu, p.accueil-suite), resserrés pour la largeur de la colonne */
td.ColonneDroite h2.accueil-titre {
margin:26px 0px 12px 0px;
font-size:19px;
}
td.ColonneDroite div.accueil-actu {
margin:0px 0px 16px 0px;
padding-left:10px;
}
td.ColonneDroite div.accueil-actu p.accueil-actu-titre {
font-size:14px;
line-height:1.35;
}
td.ColonneDroite p.accueil-suite { margin-top:10px; }
/* EPSU/03.11.26 - paragraphe toujours sur une ligne (ex. liens des formations de l'accueil) : sur écran étroit, les
caractères sont resserrés (font-stretch), sans réduire la taille.
…
Largeur nécessaire pour les liens de l'accueil : 387 px normale, 325 px à 75 %, 288 px à 62,5 %. */
p.ligne-unique {
white-space:nowrap;
}
@media (max-width:430px) {
p.ligne-unique, p.ligne-unique * { font-stretch:75%; }
}
@media (max-width:360px) {
p.ligne-unique, p.ligne-unique * { font-stretch:62.5%; word-spacing:-1px; }
}
/*------------- ACCUEIL ----------------*/
/*------------- BOUTONS ----------------*/
/* EPSU/01.11.26 - bouton de lien (ex. colonne droite de l'accueil : "Étudier en Suisse : notre guide", "Prendre rendez-vous")
aux couleurs du site. Remplace l'aspect de front-office.css (pilule bleue en dégradé, Arial) : tous les a.link-button
du site en profitent. Plusieurs boutons à la suite : les mettre dans un même
.
Appel à l'action (bleu) : ajouter la classe bouton-action. Bouton seul dans le texte central :
…
.
Flèche ajoutée par la feuille de style : ne pas la saisir. */
a.link-button {
display:block;
position:relative;
box-sizing:border-box;
width:100%;
padding:10px 34px 10px 12px;
border:0px;
border-radius:3px;
background:#f0f1f0;
text-shadow:none;
font:700 12.5px/17px "Noto Sans", Verdana, Helvetica, Arial, sans-serif;
color:#262E38;
text-align:left;
text-decoration:none;
transition:background-color .15s;
}
a.link-button::after {
content:"\2192";
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
font-size:14px;
font-weight:400;
color:#596163;
transition:right .15s, color .15s;
}
a.link-button:hover, a.link-button:focus, a.link-button:active {
background:#e0e1e0;
color:#262E38;
}
a.link-button:hover::after, a.link-button:focus::after {
right:8px;
color:#d10203;
}
/* EPSU/03.11.26 - bouton sous une carte (table.menu / table.menu2c, ex. accueil de /matu/) : même largeur que la carte ;
la cellule a 10 px de marge intérieure à droite (front-office.css), comme p.Annonce qui la compense par margin-right:-10px */
table.menu tr.comments td a.link-button, table.menu2c tr.comments td a.link-button {
width:calc(100% + 10px);
}
p.boutons-colonne {
margin:0px 0px 14px 0px;
}
p.boutons-colonne a.link-button {
white-space:nowrap; /* "Étudier en Suisse : notre guide" sur une ligne dans la colonne droite (environ 240 px) */
}
p.boutons-colonne a.link-button + a.link-button {
margin-top:6px;
}
/* EPSU/01.11.26 - bouton d'appel à l'action (rendez-vous, inscription…) : anthracite adouci, rouge au survol ; à n'utiliser que pour ces liens.
Prendre rendez-vous */
a.link-button.bouton-action {
padding:10px 38px 10px 14px;
background:#454e5a; /* anthracite adouci (bandeau : #262E38) */
color:#ffffff;
font-size:12.5px;
line-height:17px;
}
a.link-button.bouton-action::after {
color:#ffffff;
}
a.link-button.bouton-action:hover, a.link-button.bouton-action:focus {
background:#d10203; /* rouge EPSU au survol */
color:#ffffff;
}
a.link-button.bouton-action:active {
background:#454e5a;
color:#ffffff;
}
a.link-button.bouton-action:hover::after, a.link-button.bouton-action:focus::after {
color:#ffffff;
}
/* EPSU/02.11.26 - bouton mis en valeur, bleu saphir brillant (ex. "Étudier en Suisse : notre guide") :
… */
a.link-button.bouton-bleu {
background:#2b4f8f;
background:linear-gradient(to bottom, #3f6cb6 0%, #2b4f8f 100%);
box-shadow:inset 0px 1px 0px rgba(255,255,255,.22), 0px 1px 3px rgba(0,0,0,.25);
text-shadow:0px -1px 0px rgba(0,0,0,.25);
color:#ffffff;
}
a.link-button.bouton-bleu::after {
color:#ffffff;
}
a.link-button.bouton-bleu:hover, a.link-button.bouton-bleu:focus {
background:#3f6cb6; /* s'éclaire au survol */
color:#ffffff;
}
a.link-button.bouton-bleu:active {
background:#2b4f8f;
color:#ffffff;
}
a.link-button.bouton-bleu:hover::after, a.link-button.bouton-bleu:focus::after {
color:#ffffff;
}
/* boutons dans le texte central (ex. "Qui sommes-nous ?" et "Prendre rendez-vous" sous "L'EPSU en bref") :
côte à côte, de même largeur, occupant ensemble toute la largeur de la colonne (comme l'encadré au-dessus) */
p.accueil-rdv {
display:flex;
gap:6px;
margin:10px 0px 0px 0px;
}
p.accueil-rdv a.link-button {
flex:1 1 0px;
display:block;
margin:0px;
padding:10px 38px 10px 14px; /* même taille que le bouton d'action voisin */
font-size:12.5px;
line-height:17px; /* même hauteur (37 px) que les autres boutons */
}
/*------------- BOUTONS ----------------*/
/*------------- TEMOIGNAGES ----------------*/
/* EPSU/01.11.26 - témoignages en cartes (ex. colonne droite de l'accueil), à saisir dans le back office :
Tiret avant l'auteur ajouté par la feuille de style : ne pas le saisir ; pas de guillemets.
Avec /common/js/temoignages.js (chargé par page.html.inc.php) : une carte à la fois, flèches, points, boucle et défilement automatique
(classe temoignages-js ajoutée par le script). Sans le script : cartes côte à côte, défilement horizontal. */
div.temoignages {
display:flex;
align-items:flex-start;
gap:10px;
width:0px; /* ne pas élargir la colonne (tableau de mise en page) */
min-width:100%;
margin:0px 0px 18px 0px;
padding:0px 0px 10px 0px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:thin;
scrollbar-color:#d10203 #e0e1e0;
}
div.temoignage {
flex:0 0 88%;
position:relative;
box-sizing:border-box;
margin:0px;
padding:14px 14px 12px 14px;
background:#f6f7f6; /* plus clair que les boutons */
border-radius:3px;
scroll-snap-align:start;
}
div.temoignage p.temoignage-texte {
margin:0px;
font:italic 400 12.5px/1.55 "Noto Sans", Verdana, Helvetica, Arial, sans-serif;
color:#363E48;
}
div.temoignage p.temoignage-auteur {
margin:10px 0px 0px 0px;
font-size:11px;
letter-spacing:1.2px;
text-transform:uppercase;
color:#596163;
}
div.temoignage p.temoignage-auteur::before {
content:"\2014\00A0";
letter-spacing:0px;
}
/* mode carrousel (temoignages.js) */
div.temoignages.temoignages-js {
display:block;
overflow:hidden;
margin-bottom:0px;
padding:0px;
transition:height .3s ease;
}
div.temoignages-js div.temoignages-piste {
display:flex;
align-items:flex-start;
}
div.temoignages-js div.temoignage {
flex:0 0 100%;
}
div.temoignages-nav {
display:flex;
align-items:center;
justify-content:space-between;
margin:8px 0px 20px 0px;
}
div.temoignages-nav button.temoignages-prec, div.temoignages-nav button.temoignages-suiv {
width:30px;
height:30px;
padding:0px;
border:0px;
border-radius:50%;
background:#f0f1f0;
color:#262E38;
font:400 15px/30px "Noto Sans", Verdana, Helvetica, Arial, sans-serif;
cursor:pointer;
transition:background-color .15s, color .15s;
}
div.temoignages-nav button.temoignages-prec:hover, div.temoignages-nav button.temoignages-suiv:hover,
div.temoignages-nav button.temoignages-prec:focus, div.temoignages-nav button.temoignages-suiv:focus {
background:#e0e1e0;
color:#d10203;
}
div.temoignages-nav span.temoignages-points {
display:flex;
gap:7px;
}
div.temoignages-nav button.temoignages-point {
width:7px;
height:7px;
padding:0px;
border:0px;
background:#d6d8d6;
cursor:pointer;
}
div.temoignages-nav button.temoignages-point.actif {
background:#d10203;
}
/*------------- TEMOIGNAGES ----------------*/
/*------------- PAGES ----------------*/
/* EPSU/01.11.26 - éléments de mise en page réutilisables dans le texte des pages (ex. colonne droite de
"Qui sommes-nous ?"), à saisir dans le back office :
h2.titre-colonne titre dans la colonne droite
div.parcours bloc avec filet gris à gauche : p.parcours-profil (titre en gras) puis paragraphe(s)
div.objectifs-sombre encadré anthracite, texte clair :
TitreTexte
par point
*/
h2.titre-colonne {
margin:0px 0px 12px 0px;
padding:0px;
font-size:18px;
font-weight:400;
line-height:1.3;
color:#262E38;
}
div.parcours {
margin:0px 0px 14px 0px;
padding:0px 0px 0px 14px;
border-left:2px solid #e0e1e0;
}
div.parcours p {
margin:0px;
}
div.parcours p.parcours-profil {
margin:0px 0px 3px 0px;
font-size:13.5px;
font-weight:700;
color:#262E38;
}
div.objectifs-sombre { /* encadré foncé, ex. "Nos objectifs" de la colonne droite : un
TitreTexte
par point */
margin:0px 0px 16px 0px;
padding:14px 14px 4px 14px;
background:#454e5a;
border-radius:3px;
}
div.objectifs-sombre p {
margin:0px 0px 12px 0px;
font-size:12.5px;
line-height:1.5;
color:#e0e1e0;
}
div.objectifs-sombre p strong {
display:block;
margin-bottom:1px;
font-size:13.5px;
color:#ffffff;
}
div.objectifs-sombre p + p {
padding-top:12px;
border-top:1px solid #5d6672;
}
/*------------- PAGES ----------------*/
/*------------- FAQ ----------------*/
/* EPSU/05.11.26 - FAQ (div#faqs, ex. accueil /matu ; ouverture par faq_toggle(), page.html.inc.php) :
chaque question dans une carte gris clair avec un chevron rouge à droite, retourné quand la réponse est
ouverte (:has, navigateurs récents ; sinon chevron fixe) ; réponse dans le prolongement de la carte.
Mots mis en évidence dans les questions avec
ou : anthracite sans gras ; span.Gras reste
en gras pour un vrai gras ; réponses inchangées, pour éviter les taches de gras disparates.
Remplace l'aspect de front-office.css (puce image, réponses en italique). */
#faqs ul {
margin:0px 0px 6px 0px;
}
#faqs ul li, li.faq {
position:relative;
margin:0px;
padding:11px 36px 11px 14px;
background:#f6f7f6 none;
border-radius:3px;
line-height:1.45;
color:#656565;
transition:background-color .15s;
}
#faqs ul li br, li.faq br {
display:none; /* question sur une seule phrase (les
saisis coupaient la ligne) */
}
#faqs ul li::after, li.faq::after {
content:"";
position:absolute;
right:15px;
top:50%;
width:7px;
height:7px;
margin-top:-6px;
border-right:1.5px solid #d10203;
border-bottom:1.5px solid #d10203;
transform:rotate(45deg);
transition:transform .2s, margin .2s;
}
#faqs ul li::before, li.faq::before {
content:none;
}
#faqs ul li:hover, li.faq:hover {
background-color:#eceeec;
}
#faqs ul:has(+ div[style*="block"]) li { /* question ouverte */
background-color:#eceeec;
border-radius:3px 3px 0px 0px;
}
#faqs ul:has(+ div[style*="block"]) li::after {
transform:rotate(-135deg);
margin-top:-2px;
}
#faqs ul li b, li.faq b, #faqs ul li strong, li.faq strong { /* ou (TinyMCE convertit ) : sans gras ; span.Gras reste en gras */
font-weight:400;
color:#262E38;
}
#faqs ul + div { /* réponse */
margin:-6px 0px 6px 0px;
padding:10px 14px 4px 14px;
background:#fbfbfb;
border:1px solid #eceeec;
border-top:0px;
font-style:normal;
}
/*------------- FAQ ----------------*/
/*========== HISTORIQUE DES VERSIONS ==========
Format : MAJEURE.MINEURE.CORRECTIF
1.16.0 - 09.11.26 - EPSU
- Nouvelles de l'accueil dans la colonne droite (td.ColonneDroite) : titre de section, cartes et lien
"toute l'actualité" resserrés pour la largeur de la colonne
1.15.0 - 05.11.26 - EPSU
- Section "FAQ" : questions en cartes gris clair avec chevron rouge (retourné à l'ouverture), réponse dans
le prolongement de la carte, texte en gris des paragraphes (#656565), mots en évidence (, ) en anthracite
sans gras (au lieu de puce image, gras et réponses en italique de front-office.css)
1.14.0 - 03.11.26 - EPSU
- Images du texte central limitées à la largeur de la colonne (max-width:100%)
1.13.0 - 03.11.26 - EPSU
- Bouton (a.link-button) sous une carte table.menu / table.menu2c : même largeur que la carte
1.12.0 - 03.11.26 - EPSU
- Lien « Retour à la page principale » en bloc en ligne : soulignement du survol sur les deux lignes
1.11.0 - 03.11.26 - EPSU
- En-tête d'un site avec titre (ex. /matu/) : logo coupé après le carré EPSU
1.10.0 - 03.11.26 - EPSU
- Encadré "L'EPSU en bref" (div.accueil-points) sans puces, points simplement espacés ; ancien style en commentaire
1.9.0 - 03.11.26 - EPSU
- p.ligne-unique : paragraphe sur une seule ligne, caractères resserrés sur écran étroit (font-stretch 75 %
puis 62,5 %), ex. liens des formations de l'accueil ; Noto Sans à largeur variable (2e @import)
1.8.0 - 02.11.26 - EPSU
- a.link-button.bouton-bleu : bouton mis en valeur, bleu saphir brillant (dégradé, reflet, ombre légère),
ex. "Étudier en Suisse : notre guide" sur l'accueil
- Citation en colonne droite : plus d'espace au-dessus (24 px)
1.7.0 - 01.11.26 - EPSU
- Section "PAGES" : éléments réutilisables pour le texte des pages (h2.titre-colonne, div.parcours,
div.objectifs-sombre), ex. page "Qui sommes-nous ?"
1.6.1 - 01.11.26 - EPSU
- Tous les boutons de même hauteur (37 px) et même taille de texte (12,5 px) : a.link-button 10 px de marge,
interligne 17 px ; texte sur une ligne dans p.boutons-colonne
- Pied de l'accueil (p.accueil-suite) : icônes des réseaux sous "toute l'actualité", alignées à gauche
- a.link-button.bouton-action : anthracite adouci (#454e5a), rouge EPSU au survol, au lieu du bleu
- Dates des nouvelles de l'accueil (p.accueil-actu-date) en gris au lieu du rouge
- Encadré "L'EPSU en bref" et cartes des témoignages plus clairs (#f6f7f6) que les boutons gris
- p.accueil-rdv : boutons côte à côte, de même taille et de même largeur, occupant ensemble toute la largeur
de la colonne (ex. "Qui sommes-nous ?" + "Prendre rendez-vous" sous l'encadré "L'EPSU en bref")
1.6.0 - 01.11.26 - EPSU
- Section "TEMOIGNAGES" : témoignages en cartes (div.temoignages / div.temoignage), carrousel avec flèches,
points et défilement automatique quand /common/js/temoignages.js est chargé
1.5.0 - 01.11.26 - EPSU
- Section "ACCUEIL" : mise en page du texte de l'accueil (titres de section sans filet, encadré
"L'EPSU en bref", nouvelles datées, pied avec réseaux sociaux) ; le début du texte garde sa mise en forme
- Section "BOUTONS" : a.link-button aux couleurs du site (gris clair uni, flèche rouge au survol) au lieu de
la pilule bleue de front-office.css (texte 12 px) ; p.boutons-colonne pour plusieurs boutons à la suite,
a.link-button.bouton-action (fond bleu, plus clair au survol) pour les appels à l'action ; p.accueil-rdv pour un bouton seul
dans le texte central
- Citation : guillemets « » retirés (n'étaient pas encore en production) ; variante .citation-colonne
pour la colonne droite
1.4.0 - 01.11.26 - EPSU
- Section "CITATION" : div.citation-vitrine (citation mise en valeur, ex. accueil : filet rouge, guillemets
et tiret ajoutés par la feuille de style), remplace la photo de l'accueil
1.3.0 - 30.10.26 - EPSU
- Icônes de navigation (li.NavIcons, a.NavIcon) ; règle PlanDuSite valable aussi sur le lien
1.2.1 - 30.10.26 - EPSU
- Plan : une rubrique pointant vers une autre adresse garde l'aspect de titre de groupe
1.2.0 - 30.10.26 - EPSU
- Section "PLAN DU SITE" : mise en forme des listes du plan (rubriques en titres,
filet, sous-niveaux plus discrets, liens externes signalés)
1.1.1 - 30.10.26 - EPSU
- Fichier converti en UTF-8 (auparavant ISO-8859-1), déclaré par @charset
1.1.0 - 30.10.26 - EPSU
- Règle #NavigationTop li.PlanDuSite (lien "Plan du site")
- Valeurs invalides neutralisées sans changer le rendu : font-size:tiny (a.info),
height:21x (hr des titres de section)
- Commentaires "//" remplacés par des commentaires CSS valides
- Règle #ColonneGaucheSR-selected_ signalée comme désactivée
1.0.0 - version antérieure
==============================================*/