/* * Ambiance « application » (body.application) : rendu identique à l'application d'inscription du site existant * (Laravel, Bootstrap 3.3.1 + bootstrap-theme 3.3.1 + style.css, n2i.css, podium.css, timeline.css). Aucune * bibliothèque n'est chargée : les valeurs (couleurs, dégradés du thème, bordures, rayons, ombres, marges, tailles * en px, polices) sont recopiées des feuilles du site existant, composant par composant, sous des noms de classes * en français. Correspondance des composants : * conteneur Bootstrap (.container) -> main (largeurs 750 / 970 / 1170 px) * .navbar.navbar-default + .dropdown-menu -> .barre-appli (templates/_barre_application.html.twig), .menu-deroulant * .panel / .panel-heading / variantes -> .carte / .carte__titre / .carte--defaut|primaire|succes|info|avertissement|danger * titre posé dans le conteneur (style.css .container > h1) -> main > h1|h2|h3, .titre-page * .alert-* -> .alerte--succes|info|avertissement|erreur * .btn, .btn-* , .btn-lg|sm|xs -> .bouton, .bouton--defaut|primaire|succes|info|avertissement|danger, --grand|petit|mini * .label-* -> .pastille--defaut|primaire|succes|info|avertissement|danger * .row / .col-md-N / .col-md-offset-N -> .ligne / .col-N / .col-decale-N * .table, -striped, -bordered -> .tableau, .tableau--zebre, .tableau--borde * .form-group, .form-control -> .champ, champs de saisie * .list-group -> .liste-groupe (+ --info, --succes, --avertissement, --danger) * .thumbnail / .caption -> .vignette / .vignette__legende * timeline.css (.timeline-horizontal) -> .chronologie * n2i.css (.defiList, .siteList…) -> .bloc-liste * .glyphicon -> .icone (Bootstrap Icons en SVG, assets/images/icones, MIT) * Repris aussi : l'affiche de l'édition en fond, fixe, sur #22b8c7 ; les cellules #999 des listes (texte noir, liens * #002a5c) ; l'encadré des erreurs en tête de formulaire ; la croix de fermeture des messages ; la fenêtre de * confirmation des suppressions (contrôleur confirmation). Écarts volontaires (docs/site-existant/ecarts.md, lots 13 * quater et 13 quinquies) : contrastes RGAA (étiquettes assombries, aides #555, liens #333 sur l'affiche), messages * de session en trois couleurs, erreurs aussi sous chaque champ, focus visible, mise en page adaptative. Les pages du * site (body.public : accueil, FAQ, charte) ne sont pas concernées. */ /* Base : typographie et fond de l'application (Bootstrap scaffolding + style.css). ----------------------------- */ body.application { /* Variables des composants communs (app.css) dans les couleurs de l'application. */ --nuit-fond-2: #f5f5f5; --nuit-surface: rgba(255, 255, 255, 0.8); --nuit-surface-2: #f5f5f5; --nuit-bord: #ddd; --nuit-texte: #333; --nuit-texte-2: #6b6b6b; /* Bleu des liens assombri (RGAA 3.2, 14/10/2026) : voir la règle des liens ci-dessous. */ --nuit-lune: #23527c; --nuit-lune-2: #163756; --nuit-succes: #3c763d; --nuit-erreur: #a94442; --nuit-info: #31708f; --champ-fond: #fff; --champ-texte: #555; --rayon: 4px; --ombre: 0 1px 2px rgba(0, 0, 0, 0.05); --police: "Helvetica Neue", Helvetica, Arial, sans-serif; --police-titres: "Helvetica Neue", Helvetica, Arial, sans-serif; color-scheme: light; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; /* Affiche servie en fond par l'application en ligne (/inscription/img/background.png, style.css : centrée en haut, sans répétition, fixe, sur #22b8c7) ; remplacer les deux fichiers par l'affiche de l'édition quand elle existe. Servie sur chaque page : WebP (63 Ko, qualité 80) au lieu du PNG de 488 Ko, JPEG (91 Ko) pour un navigateur qui ne lit pas image-set() avec type() ; jamais de variable CSS ici, une variable invalide ne retomberait pas sur le JPEG. Conversion : cwebp -q 80 -m 6 -sharp_yuv, et ImageMagick -quality 75 (docs/site-existant/ecarts.md). */ background: #22b8c7 url("../images/site/fond-application-fMf9ic8.jpg") no-repeat center top fixed; background-image: image-set(url("../images/site/fond-application-3JGdx72.webp") type('image/webp'), url("../images/site/fond-application-fMf9ic8.jpg") type('image/jpeg')); } body.application h1, body.application h2, body.application h3, body.application h4, body.application h5, body.application h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-transform: none; } body.application h1, body.application h2, body.application h3 { margin: 20px 0 10px; } body.application h4, body.application h5, body.application h6 { margin: 10px 0; } body.application h1 { font-size: 36px; } body.application h2 { font-size: 30px; } body.application h3 { font-size: 24px; } body.application h4 { font-size: 18px; } body.application h5 { font-size: 14px; } body.application h6 { font-size: 12px; } body.application :is(h1, h2, h3) small { font-size: 65%; font-weight: 400; line-height: 1; color: #6b6b6b; } body.application :is(h4, h5, h6) small { font-size: 75%; font-weight: 400; line-height: 1; color: #6b6b6b; } body.application p { margin: 0 0 10px; } body.application ul, body.application ol { margin: 0 0 10px; } body.application hr { height: 0; box-sizing: content-box; margin: 20px 0; border: 0; border-top: 1px solid #eee; } body.application small { font-size: 85%; } body.application strong, body.application b { font-weight: 700; } body.application label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; } /* Écart RGAA (critère 3.2, 14/10/2026) : le bleu #337ab7 de Bootstrap tombait à 2,9-3,4:1 sur les cartes blanches à 80 % posées sur l'affiche. #23527c (le bleu de survol de Bootstrap) atteint 5,1:1 dans le pire cas (carte sur une zone noire de l'affiche : fond #ccc), 8,2:1 sur blanc ; survol #163756. Vérifié par tests/Public/ContrasteTest.php. */ body.application a, body.application a:link, body.application a:visited { color: #23527c; text-decoration: none; } body.application a:hover, body.application a:focus { color: #163756; text-decoration: underline; } /* Écart RGAA (critère 10.6, audit du 28/10/2026) : un lien posé dans une phrase ou un élément de liste qui contient aussi du texte ne se distinguait que par sa couleur (#23527c contre #333 : 1,6:1, il faut 3:1) ; il est souligné. :where() garde la spécificité basse : les composants qui retirent le soulignement (listes de liens en blocs, barres) le gardent retiré. Boutons et étiquettes ne sont pas concernés. */ body.application main :where(p, li, dd, td, label, legend) a:where(:not(.bouton, .pastille)):is(:link, :visited) { text-decoration: underline; } body.application :focus-visible { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; border-radius: 0; } body.application .texte-centre { text-align: center; } body.application .texte-droite { text-align: right; } /* Texte discret : #777 de Bootstrap à 4,47:1 sur blanc ; #555 garde 4,6:1 au pire, sur une carte translucide posée sur la partie sombre de l'affiche (#ccc) (audit RGAA du 28/10/2026). */ body.application .texte-discret { color: #555; } body.application .texte-succes { color: #3c763d; } body.application .texte-danger { color: #a94442; } body.application .fond-avertissement { background-color: #fcf8e3; } /* Conteneur : le contenu tient dans le conteneur Bootstrap (layouts/header). ------------------------------------ */ body.application main { width: 100%; max-width: none; margin: 0 auto; padding: 0 15px; } @media (min-width: 768px) { body.application main { width: 750px; } } @media (min-width: 992px) { body.application main { width: 970px; } } @media (min-width: 1200px) { body.application main { width: 1170px; } } body.application main::after { content: ""; display: table; clear: both; } /* L'application existante n'a pas de pied de page (layouts/footer ne fait que fermer le conteneur). */ /* Barre de l'application (layouts/navbar de l'existant : .navbar.navbar-default + bootstrap-theme), dans la largeur du conteneur ; menus déroulants (.dropdown-menu) en
. --------------------------------------------------- */ .barre-appli { width: 100%; margin: 0 auto; padding: 0 15px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; } @media (min-width: 768px) { .barre-appli { width: 750px; } } @media (min-width: 992px) { .barre-appli { width: 970px; } } @media (min-width: 1200px) { .barre-appli { width: 1170px; } } .barre-appli__barre { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; min-height: 50px; margin: 0 0 20px; padding: 0 15px; border: 1px solid #e7e7e7; border-radius: 4px; background-color: #f8f8f8; background-image: linear-gradient(to bottom, #fff 0, #f8f8f8 100%); background-repeat: repeat-x; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075); } .barre-appli :is(.barre-appli__gauche, .barre-appli__droite) { margin: 0; padding: 0; list-style: none; } .barre-appli__liens { display: flex; flex: 1 1 auto; justify-content: space-between; } .barre-appli__gauche, .barre-appli__droite { display: flex; } .barre-appli .barre-appli__droite { margin-right: -15px; } /* Marque : icône maison seule (navbar-brand). */ .barre-appli a.barre-appli__marque, .barre-appli a.barre-appli__marque:link, .barre-appli a.barre-appli__marque:visited { display: block; height: 50px; margin-left: -15px; padding: 15px; font-size: 18px; line-height: 20px; color: #777; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); text-decoration: none; } .barre-appli a.barre-appli__marque:is(:hover, :focus) { color: #5e5e5e; text-decoration: none; } /* Liens de la barre (.navbar-default .navbar-nav > li > a). */ .barre-appli__gauche > li > a, .barre-appli__gauche > li > a:link, .barre-appli__gauche > li > a:visited, .barre-appli__droite > li > a, .barre-appli__droite > li > a:link, .barre-appli__droite > li > a:visited, .barre-appli .menu-deroulant > summary { display: block; padding: 15px; line-height: 20px; color: #6b6b6b; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); text-decoration: none; cursor: pointer; } .barre-appli__gauche > li > a:is(:hover, :focus), .barre-appli__droite > li > a:is(:hover, :focus), .barre-appli .menu-deroulant > summary:hover { color: #333; background-color: transparent; text-decoration: none; } .barre-appli .menu-deroulant[open] > summary { color: #555; background-color: #e7e7e7; background-image: linear-gradient(to bottom, #dbdbdb 0, #e2e2e2 100%); background-repeat: repeat-x; box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075); } /* « Revenir à mon login » (a.alert-danger dans la barre). */ .barre-appli a.barre-appli__desincarner, .barre-appli a.barre-appli__desincarner:link, .barre-appli a.barre-appli__desincarner:visited { color: #555; background-color: #f2dede; background-image: linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%); background-repeat: repeat-x; } .barre-appli a.barre-appli__desincarner:is(:hover, :focus) { color: #333; } /* Menus déroulants. */ .menu-deroulant { position: relative; } .menu-deroulant > summary { list-style: none; } .menu-deroulant > summary::-webkit-details-marker { display: none; } .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } .barre-appli .menu-deroulant__liste { position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 160px; margin: 0; padding: 5px 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-top-left-radius: 0; border-top-right-radius: 0; border-radius: 0 0 4px 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } .barre-appli .menu-deroulant__liste--droite { right: 0; left: auto; } .barre-appli .menu-deroulant__liste > li > a, .barre-appli .menu-deroulant__liste > li > a:link, .barre-appli .menu-deroulant__liste > li > a:visited { display: block; clear: both; padding: 3px 20px; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; text-decoration: none; } .barre-appli .menu-deroulant__liste > li > a:is(:hover, :focus) { color: #262626; text-decoration: none; background-color: #e8e8e8; background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%); background-repeat: repeat-x; } .barre-appli .menu-deroulant__liste > li > a[aria-current="page"] { color: #fff; background-color: #2e6da4; background-image: linear-gradient(to bottom, #337ab7 0, #2e6da4 100%); background-repeat: repeat-x; } /* Séparateurs du menu Administration :
de l'existant (20px au-dessus et au-dessous, filet #eee). */ .menu-deroulant__filet { height: 0; margin: 20px 0; border-top: 1px solid #eee; } /* Menu du compte (ul.nav.nav-pills imbriqué : padding 10px 15px, survol #eee, coins 4px ; login en #0fb1f5 gras 14px dans l'existant, assombri en #0b72a0 : 2,3:1 sur la barre, 4,6:1 au pire sur le survol #eee). */ .barre-appli .menu-deroulant--compte > summary { margin: 5px 0; padding: 10px 15px; border-radius: 4px; color: #23527c; text-shadow: none; } .barre-appli .menu-deroulant--compte > summary:hover, .barre-appli .menu-deroulant--compte[open] > summary { background-color: #eee; background-image: none; box-shadow: none; color: #23527c; } .barre-appli__compte { color: #0b72a0; font-size: 14px; font-weight: 700; } .barre-appli .menu-deroulant--compte .menu-deroulant__liste > li > a { font-size: 13px; } .barre-appli .menu-deroulant--compte .menu-deroulant__liste { border-radius: 4px; margin-top: 2px; } /* Bouton à trois barres (.navbar-toggle), sous 768px seulement. */ .barre-appli__bascule { display: none; position: relative; margin: 8px 0 8px auto; padding: 9px 10px; background: transparent; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; } .barre-appli__bascule:is(:hover, :focus) { background-color: #ddd; } .barre-appli__bascule span { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: #888; } .barre-appli__bascule span + span { margin-top: 4px; } @media (max-width: 767px) { .barre-appli__bascule { display: block; } .barre-appli__liens { display: none; flex-basis: 100%; flex-direction: column; margin: 0 -15px; padding: 0 15px; border-top: 1px solid #e7e7e7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .barre-appli.entete--menu-ouvert .barre-appli__liens { display: flex; } .barre-appli .barre-appli__gauche, .barre-appli .barre-appli__droite { flex-direction: column; margin: 7.5px -15px; } .barre-appli__gauche > li > a, .barre-appli__droite > li > a, .barre-appli .menu-deroulant > summary { padding: 10px 15px; } .barre-appli .menu-deroulant__liste { position: static; float: none; border: 0; box-shadow: none; background-color: transparent; } } /* Titres de page posés dans le conteneur (style.css : .container > h1, h2, h3). ---------------------------------- */ body.application main > :is(h1, h2, h3), body.application .titre-page { background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; padding: 10px; color: #333; } /* Premier titre du contenu : dans l'existant sa marge haute fusionne avec la marge basse de la barre (20px en tout) ; main est un élément flex (app.css), qui empêche cette fusion. */ body.application main > :is(h1, h2, h3, .titre-page):first-child, body.application main > :first-child > .titre-page:first-child { margin-top: 0; } /* Panneaux (.panel, .panel-heading, .panel-body, variantes du thème). ------------------------------------------- */ body.application .carte { margin: 0 0 20px; padding: 15px; overflow: visible; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #bce8f1; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } body.application .carte::after { content: ""; display: table; clear: both; } body.application .carte + .carte { margin-top: 0; } body.application .carte > * { margin-left: 0; margin-right: 0; } body.application .carte > :last-child { margin-bottom: 0; } /* Bandeau : le titre garde la taille de sa balise (h1 36px, h2 30px… comme dans les vues), padding 10px 15px. */ body.application .carte > .carte__titre { margin: -15px -15px 15px; padding: 10px 15px; border-bottom: 1px solid #bce8f1; border-radius: 3px 3px 0 0; color: #285e79; background-color: #d9edf7; background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%); background-repeat: repeat-x; text-align: inherit; } body.application .carte > .carte__titre:last-child { margin-bottom: -15px; border-bottom: 0; border-radius: 3px; } /* Bandeau de texte simple (panel-heading sans titre : 14px, graisse normale). */ body.application .carte > .carte__titre--simple { font-size: 14px; font-weight: 400; line-height: 1.42857143; } body.application .carte > .carte__titre a { color: inherit; } body.application .carte > .carte__titre .pastille { font-size: 75%; vertical-align: middle; } /* Titres dans le corps d'un panneau : filet inférieur de la couleur du texte (style.css .panel-body h1, h2, h3). */ body.application .carte :is(h1, h2, h3):not(.carte__titre) { border-bottom: 1px solid; padding-bottom: 0; } body.application .carte .carte { margin-bottom: 20px; } /* Variantes (bordure, couleur et dégradé du bandeau). */ body.application .carte--defaut { border-color: #ddd; } body.application .carte--defaut > .carte__titre { color: #333; background-color: #f5f5f5; background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%); border-bottom-color: #ddd; } body.application .carte--primaire { border-color: #337ab7; } body.application .carte--primaire > .carte__titre { color: #fff; background-color: #337ab7; background-image: linear-gradient(to bottom, #337ab7 0, #2e6da4 100%); border-bottom-color: #337ab7; } body.application .carte--succes { border-color: #d6e9c6; } body.application .carte--succes > .carte__titre { color: #2f6230; background-color: #dff0d8; background-image: linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%); border-bottom-color: #d6e9c6; } body.application .carte--info { border-color: #bce8f1; } body.application .carte--info > .carte__titre { color: #285e79; background-color: #d9edf7; background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%); border-bottom-color: #bce8f1; } body.application .carte--avertissement { border-color: #faebcc; } body.application .carte--avertissement > .carte__titre { color: #7a6034; background-color: #fcf8e3; background-image: linear-gradient(to bottom, #fcf8e3 0, #faf2cc 100%); border-bottom-color: #faebcc; } body.application .carte--danger { border-color: #ebccd1; } body.application .carte--danger > .carte__titre { color: #8a3836; background-color: #f2dede; background-image: linear-gradient(to bottom, #f2dede 0, #ebcccc 100%); border-bottom-color: #ebccd1; } /* Largeurs : tout est pleine largeur dans l'existant, sauf la connexion (col-md-6 décalée de 3) et la fiche d'une équipe (col-md-10 décalée de 1). */ body.application .etroit, body.application .moyen { max-width: none; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { body.application .etroit { width: 50%; } body.application .moyen { width: 83.33333333%; } } /* Grille (.row, .col-md-N, .col-md-offset-N : colonnes côte à côte à partir de 992px, .col-sm-6 dès 768px). ------- */ body.application .ligne { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } body.application .ligne > * { position: relative; width: 100%; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { body.application .ligne > .col-sm-6 { width: 50%; } } @media (min-width: 992px) { body.application .ligne > .col-1 { width: 8.33333333%; } body.application .ligne > .col-2 { width: 16.66666667%; } body.application .ligne > .col-3 { width: 25%; } body.application .ligne > .col-4 { width: 33.33333333%; } body.application .ligne > .col-5 { width: 41.66666667%; } body.application .ligne > .col-6 { width: 50%; } body.application .ligne > .col-7 { width: 58.33333333%; } body.application .ligne > .col-8 { width: 66.66666667%; } body.application .ligne > .col-9 { width: 75%; } body.application .ligne > .col-10 { width: 83.33333333%; } body.application .ligne > .col-11 { width: 91.66666667%; } body.application .ligne > .col-12 { width: 100%; } body.application .ligne > .col-decale-1 { margin-left: 8.33333333%; } body.application .ligne > .col-decale-2 { margin-left: 16.66666667%; } body.application .ligne > .col-decale-3 { margin-left: 25%; } body.application .ligne > .col-decale-4 { margin-left: 33.33333333%; } } body.application .actions { gap: 4px; } /* Alertes (.alert + dégradés et bordures du thème). ------------------------------------------------------------- */ body.application .alerte { margin: 0 0 20px; padding: 15px; border: 1px solid transparent; border-radius: 4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); background-repeat: repeat-x; } body.application .alerte > :is(p, ul, ol):last-child { margin-bottom: 0; } body.application .alerte > p + p { margin-top: 5px; } body.application .alerte h4 { margin-top: 0; color: inherit; } body.application .alerte a { font-weight: 700; } /* Texte des messages et des bandeaux assombri (audit RGAA du 28/10/2026, contraste mesuré au pixel) : sur le bas des dégradés du thème Bootstrap, #3c763d, #31708f, #8a6d3b et #a94442 tombaient à 3,6-4,4:1 ; #2f6230, #285e79, #7a6034 et #8a3836 restent au-dessus de 4,6:1 sur tout le dégradé. Liens inchangés (#2b542c, #245269, #66512c, #843534). */ body.application .alerte--succes { color: #2f6230; background-color: #dff0d8; background-image: linear-gradient(to bottom, #dff0d8 0, #c8e5bc 100%); border-color: #b2dba1; } body.application .alerte--succes a { color: #2b542c; } body.application .alerte--info { color: #285e79; background-color: #d9edf7; background-image: linear-gradient(to bottom, #d9edf7 0, #b9def0 100%); border-color: #9acfea; } body.application .alerte--info a { color: #245269; } body.application :is(.alerte--avertissement, .alerte--attention) { color: #7a6034; background-color: #fcf8e3; background-image: linear-gradient(to bottom, #fcf8e3 0, #f8efc0 100%); border-color: #f5e79e; } body.application :is(.alerte--avertissement, .alerte--attention) a { color: #66512c; } body.application .alerte--erreur { color: #8a3836; background-color: #f2dede; background-image: linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%); border-color: #dca7a7; } body.application .alerte--erreur a { color: #843534; } body.application .alerte hr { border-top-color: rgba(0, 0, 0, 0.1); } /* Boutons (.btn + dégradés du thème ; au survol le dégradé remonte de 15px). -------------------------------------- */ body.application .bouton, body.application a.bouton:link, body.application a.bouton:visited { display: inline-block; gap: 0; margin: 0; padding: 6px 12px; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; text-transform: none; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; text-decoration: none; border: 1px solid #2b542c; border-radius: 4px; transition: none; color: #fff !important; background-color: #3c763d; background-image: linear-gradient(to bottom, #3c763d 0, #2d5a2e 100%); background-repeat: repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } body.application .bouton:hover, body.application .bouton:focus { color: #fff !important; text-decoration: none; border-radius: 4px; background-color: #2d5a2e; background-position: 0 -15px; border-color: #234524; } body.application .bouton:active { background-image: none; outline: 0; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } body.application .bouton:disabled, body.application .bouton[aria-disabled="true"] { cursor: not-allowed; opacity: 0.65; box-shadow: none; background-image: none; } body.application form .bouton { margin-top: 0; } /* Variantes. Écart RGAA (critère 3.2, 14/10/2026) : texte blanc sur les teintes de Bootstrap 3 à 1,9:1 (orange #f0ad4e), 2,1:1 (bleu clair #5bc0de), 2,5:1 (vert #5cb85c, bouton par défaut ci-dessus) et 3,96:1 (rouge #d9534f). Teintes assombries comme les étiquettes : vert #3c763d (5,4:1), bleu #31708f (5,5:1), rouge #a94442 (5,8:1), primaire #337ab7 inchangé (4,6:1) ; l'orange garde sa teinte avec un texte #333 (6,5:1, 5,2:1 au survol). Dégradés et survols plus sombres encore (8:1 et plus). Vérifié par tests/Public/ContrasteTest.php. */ body.application :is(.bouton--defaut, .bouton--secondaire), body.application a:is(.bouton--defaut, .bouton--secondaire):link, body.application a:is(.bouton--defaut, .bouton--secondaire):visited { color: #333 !important; background-color: #fff; background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%); border-color: #ccc; text-shadow: 0 1px 0 #fff; } body.application :is(.bouton--defaut, .bouton--secondaire):is(:hover, :focus) { color: #333 !important; background-color: #e0e0e0; border-color: #adadad; } body.application .bouton--primaire, body.application a.bouton--primaire:link, body.application a.bouton--primaire:visited { background-color: #337ab7; background-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%); border-color: #245580; } body.application .bouton--primaire:is(:hover, :focus) { background-color: #265a88; border-color: #204d74; } body.application .bouton--info, body.application a.bouton--info:link, body.application a.bouton--info:visited { background-color: #31708f; background-image: linear-gradient(to bottom, #31708f 0, #245269 100%); border-color: #245269; } body.application .bouton--info:is(:hover, :focus) { background-color: #245269; border-color: #1d4256; } body.application :is(.bouton--avertissement, .bouton--attention), body.application a:is(.bouton--avertissement, .bouton--attention):link, body.application a:is(.bouton--avertissement, .bouton--attention):visited { color: #333 !important; background-color: #f0ad4e; background-image: linear-gradient(to bottom, #f0ad4e 0, #eb9316 100%); border-color: #e38d13; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } body.application :is(.bouton--avertissement, .bouton--attention):is(:hover, :focus) { color: #333 !important; background-color: #eb9316; border-color: #d58512; } body.application .bouton--danger, body.application a.bouton--danger:link, body.application a.bouton--danger:visited { background-color: #a94442; background-image: linear-gradient(to bottom, #a94442 0, #843534 100%); border-color: #843534; } body.application .bouton--danger:is(:hover, :focus) { background-color: #843534; border-color: #6d2c2b; } /* Tailles (.btn-lg, .btn-sm, .btn-xs, .btn-block). */ body.application .bouton--grand { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } body.application .bouton--grand:is(:hover, :focus) { border-radius: 6px; } body.application .bouton--petit { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; border-width: 1px; } body.application .bouton--petit:is(:hover, :focus) { border-radius: 3px; } body.application .bouton--mini { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } body.application .bouton--bloc { display: block; width: 100%; } body.application .bouton .icone { margin-right: 4px; } /* Tailles de bouton posées sur un lien (« a.bouton:link » l'emporterait sinon). */ body.application a.bouton--grand:is(:link, :visited, :hover, :focus) { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } body.application a.bouton--petit:is(:link, :visited, :hover, :focus) { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } body.application a.bouton--mini:is(:link, :visited, :hover, :focus) { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } /* Titre posé dans un bandeau (div.panel-heading > h1|h2|h3) : il garde ses marges, jamais le filet des titres du corps. */ body.application .carte > .carte__titre > :is(h1, h2, h3) { border-bottom: 0; } /* Groupe de boutons accolés (.btn-group). */ body.application .groupe-boutons { position: relative; display: inline-flex; vertical-align: middle; } body.application .groupe-boutons > :is(.bouton, form) + :is(.bouton, form) { margin-left: -1px; } body.application .groupe-boutons > .bouton:not(:first-child):not(:last-child), body.application .groupe-boutons > form:not(:first-child):not(:last-child) .bouton { border-radius: 0; } body.application .groupe-boutons > .bouton:first-child:not(:last-child), body.application .groupe-boutons > form:first-child:not(:last-child) .bouton { border-top-right-radius: 0; border-bottom-right-radius: 0; } body.application .groupe-boutons > .bouton:last-child:not(:first-child), body.application .groupe-boutons > form:last-child:not(:first-child) .bouton { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Étiquettes (.label-*). Teintes assombries pour un contraste d'au moins 4,5:1 (RGAA, texte de 12 px en gras) : blanc sur #666, #2e6da4, #3c763d, #31708f et #a94442 ; #333 sur l'orange #f0ad4e. */ body.application .pastille { display: inline; padding: 0.2em 0.6em 0.3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25em; background: #666; } body.application .pastille:empty { display: none; } body.application .pastille--defaut { background: #666; color: #fff; } body.application .pastille--primaire { background: #2e6da4; color: #fff; } body.application :is(.pastille--succes, .pastille--ouvert) { background: #3c763d; color: #fff; } body.application .pastille--info { background: #31708f; color: #fff; } body.application :is(.pastille--avertissement, .pastille--lune) { background: #f0ad4e; color: #333; } body.application :is(.pastille--danger, .pastille--ferme) { background: #a94442; color: #fff; } /* Tableaux (.table, .table-striped de style.css, .table-bordered). Le fond #999 des cellules de style.css n'est pas repris : le texte et les liens n'y atteignent pas le contraste RGAA. */ body.application .tableau { width: 100%; max-width: 100%; margin-bottom: 20px; border-collapse: collapse; border-spacing: 0; background-color: transparent; } body.application .tableau :is(th, td) { padding: 8px; line-height: 1.42857143; vertical-align: top; text-align: left; border: 0; border-top: 1px solid #ddd; } body.application .tableau th { color: #333; font-weight: 700; font-size: 14px; } body.application .tableau > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; } body.application .tableau > thead:first-child > tr:first-child > :is(th, td) { border-top: 0; } body.application .tableau > tbody + tbody { border-top: 2px solid #ddd; } body.application .tableau--zebre > tbody > tr:nth-child(odd) { background-color: #f9f9f9; } body.application .tableau--zebre > tbody > tr:nth-child(even) > :is(td, th), body.application .tableau tbody tr:nth-child(even) td { background-color: #d9d9d9; } body.application .tableau--borde { border: 1px solid #ddd; } body.application .tableau--borde :is(th, td) { border: 1px solid #ddd; } body.application .tableau--borde > thead > tr > :is(th, td) { border-bottom-width: 2px; } body.application .tableau tr.ligne--succes > td { background-color: #dff0d8; } body.application .tableau tr.ligne--avertissement > td { background-color: #fcf8e3; } /* Formulaires (.form-group, label, .form-control, .checkbox, .help-block, .has-error). ------------------------------ */ body.application .champ { margin-bottom: 15px; } body.application .champ label, body.application .champ legend { display: inline-block; margin-bottom: 5px; font-weight: 700; } body.application :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="tel"], input[type="date"], input[type="datetime-local"], select, textarea) { display: block; width: 100%; height: 34px; padding: 6px 12px; font-family: inherit; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } body.application textarea { height: auto; } body.application select[multiple], body.application select[size] { height: auto; } body.application :is(input, select, textarea)::placeholder { color: #999; opacity: 1; } body.application :is(input, select, textarea):focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } body.application :is(input, select, textarea):is([disabled], [readonly]) { cursor: not-allowed; background-color: #eee; opacity: 1; } body.application :is(input, select, textarea)[aria-invalid="true"] { border-color: #a94442; } body.application :is(input, select, textarea)[aria-invalid="true"]:focus { border-color: #843534; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; } /* #737373 de Bootstrap n'atteint que 3,1 à 3,7:1 sur les panneaux translucides posés sur l'affiche : #555 (RGAA 3.2). */ body.application .champ__aide { display: block; margin: 5px 0 10px; font-size: 14px; color: #555; } body.application .champ__erreur { margin: 5px 0 0; font-size: 14px; color: #a94442; } body.application input[type="checkbox"], body.application input[type="radio"] { margin: 4px 0 0; padding: 0; line-height: normal; width: auto; height: auto; accent-color: auto; } body.application .champ--case { display: block; position: relative; margin: 10px 0; padding-left: 20px; } body.application .champ--case input { position: absolute; left: 0; margin: 4px 0 0; } body.application .champ--case label { min-height: 20px; margin: 0; font-weight: 400; cursor: pointer; } body.application input[type="file"] { display: block; } body.application fieldset { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; } body.application legend { display: block; width: 100%; margin-bottom: 20px; padding: 0; font-size: 21px; font-weight: 400; line-height: inherit; color: #333; border: 0; border-bottom: 1px solid #e5e5e5; } /* Zones de texte riches de l'existant (.textArea : bordure #999 sur fond blanc). */ body.application .zone-texte, body.application textarea.zone-texte { border-color: #999; background-color: #fff; min-height: 4em; } /* Éditeur de texte riche (Quill 2, contrôleur editeur-riche, App\Form\TexteRicheType) et texte riche affiché (macro _texte_riche.html.twig). Zone d'édition comme les .textArea de l'existant (bordure #999 sur fond blanc), barre grise à la manière de celle de CKEditor ; libellés de la bulle de lien en français (le thème snow les écrit en anglais dans son CSS). Le texte riche reprend les classes de l'application : encadrés .alerte--info|avertissement| erreur, .texte-centre|droite|justifie ; couleurs « Vert » / « Rouge » en vert et rouge des messages (#3c763d, #a94442) et surlignages « Marker » en fonds des messages (#dff0d8, #f2dede), lisibles sur les panneaux (RGAA 3.2) à la place du Lime et du red de l'existant. Deux lignes d'encadré qui se suivent forment un seul encadré. ---------- */ body.application .editeur-riche > textarea[hidden] { display: none; } body.application .editeur-riche .ql-toolbar.ql-snow { border-color: #999; border-radius: 4px 4px 0 0; background-color: #f5f5f5; background-image: linear-gradient(to bottom, #fff 0, #e9e9e9 100%); font-family: inherit; } body.application .editeur-riche .ql-container.ql-snow { border-color: #999; border-radius: 0 0 4px 4px; background-color: #fff; font-family: inherit; font-size: 14px; } body.application .editeur-riche .ql-editor { min-height: 8em; line-height: 1.42857143; color: #333; } body.application .editeur-riche .ql-editor:focus { outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } body.application .editeur-riche .ql-editor[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #a94442; } body.application .editeur-riche .ql-toolbar button:focus-visible, body.application .editeur-riche .ql-picker-label:focus-visible, body.application .editeur-riche .ql-picker-item:focus-visible { outline: 2px solid #337ab7; outline-offset: 1px; } body.application .editeur-riche .ql-picker.ql-style { width: 170px; } body.application .editeur-riche .ql-picker.ql-style .ql-picker-label::before, body.application .editeur-riche .ql-picker.ql-style .ql-picker-item::before { content: attr(data-label); } body.application .editeur-riche .ql-snow .ql-tooltip { z-index: 2; } body.application .editeur-riche .ql-snow .ql-tooltip::before { content: "Lien :"; } body.application .editeur-riche .ql-snow .ql-tooltip[data-mode="link"]::before { content: "URL :"; } body.application .editeur-riche .ql-snow .ql-tooltip a.ql-action::after { content: "Editer le lien"; } body.application .editeur-riche .ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "OK"; } body.application .editeur-riche .ql-snow .ql-tooltip a.ql-remove::before { content: "Supprimer le lien"; } body.application :is(.texte-riche, .ql-editor) .texte-justifie { text-align: justify; } body.application :is(.texte-riche, .ql-editor) .texte-centre { text-align: center; } body.application :is(.texte-riche, .ql-editor) .texte-droite { text-align: right; } body.application :is(.texte-riche, .ql-editor) .couleur-vert { color: #3c763d; } body.application :is(.texte-riche, .ql-editor) .couleur-rouge { color: #a94442; } body.application :is(.texte-riche, .ql-editor) .surligne-vert { background-color: #dff0d8; } body.application :is(.texte-riche, .ql-editor) .surligne-rouge { background-color: #f2dede; } body.application .ql-editor .alerte { margin-bottom: 10px; } body.application :is(.texte-riche, .ql-editor) :is(.alerte--info + .alerte--info, .alerte--avertissement + .alerte--avertissement, .alerte--erreur + .alerte--erreur) { margin-top: -20px; padding-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } body.application .ql-editor :is(.alerte--info + .alerte--info, .alerte--avertissement + .alerte--avertissement, .alerte--erreur + .alerte--erreur) { margin-top: -10px; } body.application :is(.texte-riche, .ql-editor) :is(.alerte--info:has(+ .alerte--info), .alerte--avertissement:has(+ .alerte--avertissement), .alerte--erreur:has(+ .alerte--erreur)) { padding-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; } /* Encadré sur plusieurs lignes : fond uni (le dégradé recommencerait à chaque ligne). */ body.application :is(.texte-riche, .ql-editor) :is(.alerte--info:has(+ .alerte--info), .alerte--info + .alerte--info, .alerte--avertissement:has(+ .alerte--avertissement), .alerte--avertissement + .alerte--avertissement, .alerte--erreur:has(+ .alerte--erreur), .alerte--erreur + .alerte--erreur) { background-image: none; } body.application .texte-riche > :last-child { margin-bottom: 10px; } body.application .rendu-formulaire__restitution { margin: 0 0 10px; } /* Formulaire en ligne (.form-inline, à partir de 768px). */ @media (min-width: 768px) { body.application .formulaire-en-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } body.application .formulaire-en-ligne .champ { display: inline-block; margin-bottom: 0; vertical-align: middle; } body.application .formulaire-en-ligne :is(input, select) { display: inline-block; width: auto; vertical-align: middle; } } /* Listes groupées (.list-group). -------------------------------------------------------------------------------- */ body.application .liste-groupe { padding-left: 0; margin: 0 0 20px; list-style: none; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); } body.application .liste-groupe > li { position: relative; display: block; margin-bottom: -1px; padding: 10px 15px; background-color: #fff; border: 1px solid #ddd; } body.application .liste-groupe > li:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } body.application .liste-groupe > li:last-child { margin-bottom: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } body.application .liste-groupe > li > a { color: #555; } body.application .liste-groupe > li.liste-groupe--info, body.application .liste-groupe--info > li { color: #31708f; background-color: #d9edf7; } body.application .liste-groupe > li.liste-groupe--succes, body.application .liste-groupe--succes > li { color: #3c763d; background-color: #dff0d8; } body.application .liste-groupe > li.liste-groupe--avertissement, body.application .liste-groupe--avertissement > li { color: #8a6d3b; background-color: #fcf8e3; } body.application .liste-groupe > li.liste-groupe--danger, body.application .liste-groupe--danger > li { color: #a94442; background-color: #f2dede; } /* Listes simples héritées (.liste-propre) : sans filet, à la manière des listes Bootstrap. */ body.application .liste-propre li { padding: 0; border-bottom: 0; } /* Vignettes (.thumbnail, .caption). ------------------------------------------------------------------------------ */ body.application .vignette { display: block; margin-bottom: 20px; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); } body.application .vignette img { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; } body.application .vignette__legende { padding: 9px; color: #333; } body.application .vignettes { gap: 0 30px; } body.application .vignettes li { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 4px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); } /* Chronologie horizontale des inscriptions (timeline.css, .timeline-horizontal). -------------------------------- */ body.application .chronologie { position: relative; display: inline-block; margin: 0; padding: 20px 0; list-style: none; } body.application .chronologie::before { content: " "; position: absolute; left: 56px; right: 0; bottom: 26px; width: 94%; height: 3px; margin-bottom: 20px; background-color: #888; } body.application .chronologie__etape { position: relative; display: table-cell; width: 20%; min-width: 179px; height: 280px; margin: 0 auto; padding: 0 20px 0 0; vertical-align: bottom; } body.application .chronologie__panneau { position: relative; bottom: 64px; display: inline-block; width: 100%; margin-bottom: 20px; padding: 20px; background: #fff; border: 1px solid #c0c0c0; border-radius: 2px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } body.application .chronologie__panneau::before { content: " "; position: absolute; left: 28px; bottom: -16px; display: inline-block; border-top: 16px solid #c0c0c0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 0; } body.application .chronologie__panneau :is(h4, h5) { margin-top: 0; color: inherit; } body.application .chronologie__panneau > p:last-child { margin-bottom: 0; } body.application .chronologie__pastille { position: absolute; left: 43px; bottom: 0; z-index: 100; width: 54px; height: 54px; margin-left: -25px; line-height: 52px; font-size: 22px; text-align: center; color: #fff; background-color: #7c7c7c; border: 3px solid #fff; border-radius: 50%; } body.application .chronologie__pastille .icone { top: 2px; left: 0; } body.application .chronologie__pastille--primaire { background-color: #1f9eba; } body.application .chronologie__pastille--info { background-color: #5bc0de; } body.application .chronologie__pastille--succes { background-color: #59ba1f; } body.application .chronologie__pastille--avertissement { background-color: #d1bd10; } body.application .chronologie__pastille--danger { background-color: #ba1f1f; } /* Sous 992 px, le défilement est celui du cadre (.chronologie-cadre, focalisable au clavier), pas de la liste elle-même : un seul conteneur défilant, atteignable à la tabulation (audit d'accessibilité du 31/10/2026). */ @media (max-width: 991px) { body.application .chronologie { display: block; } } /* Listes de l'existant (n2i.css : .defiList .defi, .teamList .team, .companyList .company, .siteList .site). ----- */ body.application .bloc-liste__element { margin: 10px 0; padding: 5px; border: 1px solid #ccc; background: transparent; } body.application .bloc-liste__element > * { display: inline-block; vertical-align: middle; } body.application .bloc-liste__titre { width: 50%; padding: 5px; font-size: 1.25em; line-height: normal; border-left: 12px solid #dee7ec; } body.application .bloc-liste__titre a { display: block; margin-bottom: 5px; font-size: 1.75em; } body.application .bloc-liste__milieu { width: 30%; padding: 5px; text-align: center; } body.application .bloc-liste__compteurs { width: 10%; padding: 5px; text-align: center; } body.application .bloc-liste__compteurs--droite { float: right; } body.application .bloc-liste__compte { display: block; font-size: 2em; } body.application .lettre-index { margin-bottom: 5px; font-size: 2em; font-weight: 700; } body.application .index-lettres { margin: 1em; font-size: 1.2em; text-align: center; } /* Podium (podium.css) : couleurs des rangs (médailles : voir « Médailles » plus bas). */ body.application .rang1, body.application .rang1 a { color: #d1ba21; } body.application .rang2, body.application .rang2 a { color: #818181; } body.application .rang3, body.application .rang3 a { color: #986035; } /* Icônes : Bootstrap Icons 1.11.3 (MIT, assets/images/icones/LICENSE), à la place des Glyphicons Halflings de l'existant, dont la licence ne couvre clairement que l'usage avec Bootstrap. Une icône = un SVG en masque, de la couleur du texte ; seules les icônes des vues de l'existant sont reprises. */ .icone { position: relative; top: 1px; display: inline-block; width: 1em; height: 1em; line-height: 1; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; } .icone--accueil { -webkit-mask-image: url("../images/icones/house-fill-Bq0e3sL.svg"); mask-image: url("../images/icones/house-fill-Bq0e3sL.svg"); } .icone--actualiser { -webkit-mask-image: url("../images/icones/arrow-clockwise-jUpB1Vk.svg"); mask-image: url("../images/icones/arrow-clockwise-jUpB1Vk.svg"); } .icone--cadenas { -webkit-mask-image: url("../images/icones/lock-fill-Vrrjme0.svg"); mask-image: url("../images/icones/lock-fill-Vrrjme0.svg"); } .icone--coche { -webkit-mask-image: url("../images/icones/check-square-uSKVWie.svg"); mask-image: url("../images/icones/check-square-uSKVWie.svg"); } .icone--drapeau { -webkit-mask-image: url("../images/icones/flag-fill-KMXPT1c.svg"); mask-image: url("../images/icones/flag-fill-KMXPT1c.svg"); } .icone--feu { -webkit-mask-image: url("../images/icones/fire-A1M3NJi.svg"); mask-image: url("../images/icones/fire-A1M3NJi.svg"); } .icone--discord { -webkit-mask-image: url("../images/icones/discord-p0jKbIV.svg"); mask-image: url("../images/icones/discord-p0jKbIV.svg"); } .icone--image { -webkit-mask-image: url("../images/icones/image-obSV0TA.svg"); mask-image: url("../images/icones/image-obSV0TA.svg"); } .icone--info { -webkit-mask-image: url("../images/icones/info-circle-fill-X2hAcii.svg"); mask-image: url("../images/icones/info-circle-fill-X2hAcii.svg"); } .icone--livre { -webkit-mask-image: url("../images/icones/book-fill-zI5c35S.svg"); mask-image: url("../images/icones/book-fill-zI5c35S.svg"); } .icone--mallette { -webkit-mask-image: url("../images/icones/briefcase-fill-w-5VxCw.svg"); mask-image: url("../images/icones/briefcase-fill-w-5VxCw.svg"); } .icone--plus { -webkit-mask-image: url("../images/icones/plus-lg-8G2dzFP.svg"); mask-image: url("../images/icones/plus-lg-8G2dzFP.svg"); } .icone--porte-voix { -webkit-mask-image: url("../images/icones/megaphone-fill-vMgyqLT.svg"); mask-image: url("../images/icones/megaphone-fill-vMgyqLT.svg"); } .icone--repere { -webkit-mask-image: url("../images/icones/geo-alt-fill-YJ4fVQ9.svg"); mask-image: url("../images/icones/geo-alt-fill-YJ4fVQ9.svg"); } .icone--utilisateur { -webkit-mask-image: url("../images/icones/person-fill-9j1Ca_O.svg"); mask-image: url("../images/icones/person-fill-9j1Ca_O.svg"); } .icone--reglages { -webkit-mask-image: url("../images/icones/gear-fill-_tZ63No.svg"); mask-image: url("../images/icones/gear-fill-_tZ63No.svg"); } .icone--liste { -webkit-mask-image: url("../images/icones/list-Rd_3DWn.svg"); mask-image: url("../images/icones/list-Rd_3DWn.svg"); } .icone--liste-lignes { -webkit-mask-image: url("../images/icones/list-ul-oQpccAP.svg"); mask-image: url("../images/icones/list-ul-oQpccAP.svg"); } .icone--trombone { -webkit-mask-image: url("../images/icones/paperclip-Cf47hSr.svg"); mask-image: url("../images/icones/paperclip-Cf47hSr.svg"); } .icone--deconnexion { -webkit-mask-image: url("../images/icones/power-Peq8-3c.svg"); mask-image: url("../images/icones/power-Peq8-3c.svg"); } /* ================================================================================================================ Pages (une section par groupe d'écrans ; valeurs relevées dans les vues de l'existant) ================================================================================================================ */ /* Compte : connexion, problème de connexion, activation, mot de passe, profil, sécurité. ------------------------ */ /* Connexion (users/loginform) : .row.col-md-6.col-md-offset-3, d'où 15px de retrait de chaque côté du panneau. */ body.application .connexion { padding-left: 15px; padding-right: 15px; } /* « J'ai un problème de connexion » : form-group text-center hors du panel-body (15px + 15px au-dessus). */ body.application .carte > .connexion__probleme { margin: 30px 0 10px; } /* « form-group alert-danger » ou « row alert-danger » de l'existant : couleurs et dégradé danger du thème, sans la classe .alert (ni padding, ni bordure, ni ombre). */ body.application .encadre-danger, body.application .alerte.encadre-danger { color: #8a3836; background-color: #f2dede; background-image: linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%); background-repeat: repeat-x; } body.application .alerte.encadre-danger { margin: 0 0 15px; padding: 0; border: 0; border-radius: 0; box-shadow: none; text-shadow: none; } /* div.row posé directement dans un panel-body, sans colonne : marges de -15px, contient les marges de ses enfants. */ body.application .carte > .rangee { display: flow-root; margin-left: -15px; margin-right: -15px; } /* Titre h1 qui reprend un h2 de l'existant (30px). */ body.application .titre-h2 { font-size: 30px; } /* Formulaire en ligne (form-inline) : erreurs et aide passent sous la ligne. */ body.application .formulaire-en-ligne > :is(.champ__erreur, .champ__aide) { flex-basis: 100%; } /* Code en ligne (Bootstrap code) : clé et codes de récupération de la double authentification. */ body.application code { padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } /* QR code d'enrôlement (SVG) dans une vignette. */ body.application .vignette svg { display: block; max-width: 100%; height: auto; margin: 0 auto; } /* Inscriptions (gabarits inscription) : vues inscriptions/participant, organisateur, partenaire, activation et timeline_creation_site|defi de l'existant. */ /* Panneau sans variante (.panel seul : bordure transparente), qui porte la chronologie. */ body.application .carte--neutre { border-color: transparent; } /* Cadre de la chronologie (.col-md-12 > div : inline-block, pleine largeur, défilement) ; marge basse du ul Bootstrap. */ body.application .chronologie-cadre { display: inline-block; width: 100%; padding: 0 15px; overflow-y: auto; } body.application .chronologie-cadre > .chronologie { margin-bottom: 10px; } /* Titre d'une étape (h4.timeline-title : 18px, graisse 500, sans marge haute). */ body.application .chronologie__panneau > .chronologie__titre { margin: 0 0 10px; font-size: 18px; font-weight: 500; line-height: 1.1; } /* Légende et case de la charte dans l'encadré jaune : texte de l'alerte, sans filet ni marges en trop. */ body.application .alerte legend { margin-bottom: 10px; font-size: 14px; line-height: inherit; color: inherit; border-bottom: 0; } body.application .alerte .champ--case:first-child { margin-top: 0; } body.application .alerte .champ--case:last-child { margin-bottom: 0; } /* Lien « Déjà un compte ? » sous les boutons (marge d'un paragraphe Bootstrap). */ /* Sites (hub/liste, hub/voir, hub/formulaire, ecole et sponsor, demandes d'accès) : sites/…, inscriptions/equipe, ecoles/…, sponsors/create. */ /* Bandeau dont le titre garde les marges d'un h1/h2/h3 posé dans .panel-heading (20px au-dessus, 10px dessous). */ body.application .carte > .carte__titre--marge { padding-top: 30px; padding-bottom: 20px; } /* Titre d'un sous-panneau (dans le corps d'un panneau) : souligné à la base du h2, comme .panel-body h2 de style.css. */ body.application .carte .carte > .carte__titre--marge:not(.carte__titre--simple) { position: relative; } body.application .carte .carte > .carte__titre--marge:not(.carte__titre--simple)::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 20px; border-bottom: 1px solid; } /* Colonnes posées dans le corps d'un panneau sans .row (sites/create, sites/edit) : pas de débord, contenu décalé de 15px. */ body.application .ligne.ligne--interne { margin-left: 0; margin-right: 0; } /* Cases à cocher des formulaires de site : libellé en gras comme les