/* box-sizing: border-box; */ .minipaddingI {padding:2px !important} .trombitem {} .trombitem img {width:110px;height:150px} .trombiname {width:100%;font-size:11px} .cached2 { content-visibility: hidden; } .disabled {pointer-events: none;user-select: none;} .tablewrap {table-layout:fixed} .tablewrap td {word-wrap: break-word;} .ASCPS_1{background-color:#FFD700;color: #1a1a1a; } .ASCPS_2{background-color:orange;color:#FFF;} .ASCPS_3{background-color:#5CFF80;color:#111;} .ASCPS_4{background-color:#7D3702;color:#FFF;} .ASCPS_5{background-color:#999;color:#FFF;} .ASCPS_10{background-color:#999;color:#FFF;border: 1px solid #999 !important;} .ASCPastilleS { /* Gris neutre profond */ padding: 2px 8px; border-radius: 6px; font-size: 0.9em; font-weight: 600; border: 1px solid #d4c58d; /* Une fine bordure pour donner du relief */ text-align:center; } .datepicker {width:77px;text-align:center;} .ombre2 {box-shadow: 2px 3px 4px 1px #F0C39C} .ombrevert {box-shadow: 3px 5px 6px 1px #82A03D;border: solid 1px white;} .ombrejaune {box-shadow: 1px 2px 12px rgba(200, 185, 139, 1);} .ombreviolet {box-shadow: 0 4px 12px rgba(210, 199, 240, 0.35);} .ombregris {box-shadow: 0 3px 8px rgba(200, 200, 200, 0.30);} .ombregrisleger {box-shadow:0 10px 30px rgba(0, 0, 0, 0.03)}/*leger autour des titres avec cadre*/ .ombregrisfonce {box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);}/*tableaux config*/ .ombretaupegris {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(156, 100, 63, 1);} .ombretaupeclair {box-shadow: 0 4px 8px rgb(205, 165, 140);} .ombretaupe {box-shadow: 0 4px 8px rgba(156, 100, 63, 1);border: solid 1px white;} /* pour fond #D69F6D; */ .entetetabstruc{background-color: #9E9E9E;} .ombredpcompta {box-shadow: 1px 2px 12px rgba(200, 185, 139, 1);} /* #B8B8B8 gris entete */ .fondpasselement {background-color:#E6E0D8;}/*BEIGE clair agorapass */ .fondAPtab1 {background-color:#E8F7EE;}/*Vert lumineux */ .fondAPtab2 {background-color:#FFF3EE;}/*orange rouge */ .fondAPtab3 {background-color:#E6F0FA;}/*Bleu lumineux */ .fondAPtab4 {background-color:#756F8F;}/*violet agora */ .fondBleucanard {background-color:#4A8B9F;}/*bleu canard*/ .fondtab {background-color: #FFFAEB;}/*fond presuqe blanc des tableaux*/ .fondtabblanc {background-color: #FFF;} /*fond blanc casse des tableaux*/ .fondvertclair {background-color:#EEF3EF;} /*fond tableau monitoring vert très clair*/ .fondvert {background-color:#A7B89A;} /*entete tableau*/ .ombrev {box-shadow: 0 6px 12px rgba(120, 135, 113, 0.45)}; .fondvertsauge {background-color:#8FAF8C;} /*pour total tableau*/ .fondcremeasc {background-color:#F5EBDD;} /*Crème chaude très claire */ .fondtaupe {background-color:#D2B48C;} /*entete tableau*/ .fondrosepastel {background-color:#E5B49A;} /*pour total tableau*/ .fondgrisbleu {background-color:#8CA6B8;} /*pour total tableau*/ .fondadmin{background-color: #FAF1D8;} .fondbeigeclair {background-color:#E7D3BA} /*beige clair fiche candidat*/ .fondorangeambre {background-color:#E8893C} .fond9 {background-color:#F5E9DA} .fondvioletclair {background-color: #f5f4ff;} .fondvioletvibrant{background-color: #818cf8;} /* bootstrap */ html {height:100%} body { margin:0px;padding:0px;font-size:11px;font-family:'Noto Sans';background-color:white; color:#1F1F1F; height:100% /* Squirk Corrector*/ /* background-image:linear-gradient(to right,#e9f3d3,#d5fe81) */ } @font-face { font-family: 'Noto Sans'; font-weight:normal; src: url('/font/NotoSans-Regular.woff') format('woff'); } @font-face { font-family: 'Noto Sans'; font-weight:bold; src: url('/font/NotoSans-Bold.woff') format('woff'); } .cached {display:none !important} .invisible {visibility:hidden} .cp {cursor:pointer;} .k {cursor:pointer;} p {margin:0px;} .flex {display:flex; flex-direction: row; justify-content:space-between } .flex2 {display:flex; flex-direction: row; justify-content:space-around;align-items:stretch; gap: 15px; padding: 0 15px; box-sizing: border-box; /* Très important ! */*, *::before, *::after {box-sizing: border-box;}} .gaucheflex {display:flex; flex-direction: row; justify-content:start } .centerflex {display:flex; flex-direction: row; justify-content:space-evenly } .centerflex2 {display:flex; flex-direction: row; justify-content:center } .flex2 .specifique{ flex: 0 1 auto; /* Le bloc s'adapte à la taille de son tableau */ min-width: fit-content; /* Le fond "colle" au contenu */ } /* +++++ LINK ++++++++++++++ */ a:link {color:#1F1F1F;} a:hover {color:#AB5D96;} /* AB5D96 */ a:visited {color:#1F1F1F;} /* Couleur au repos forcée en noir */ .mon-lien { color: #1F1F1F !important; text-decoration: none !important; } /* Couleur au survol forcée en violet */ .mon-lien:hover { color: #AB5D96 !important; } .nonunderline, a {text-decoration:none;} /* ++++++++ useful trick ++++++++++++ */ .ucfirst {text-transform: capitalize;} .noborder {border:solid 0px white !important;} .noborderAll {border:solid 0px white !important;} .noborderAll td {border:solid 0px white !important;} .borderpasspartout{border: 1px solid #e0e0e0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);box-sizing: border-box;} .dashed {box-shadow: 2px 2px 2px #655095; } /* border:dashed 2px #ee2222 !important ne marche pas sur input, le border est modified par le nav */ .dash { border:dashed 2px #bbb } .round15 {border-radius:15px 15px 15px 15px} .round8 {border-radius:8px 8px 8px 8px} .bold {font-weight:bold;} .em2 {font-size:2em} .italic {font-style:italic} .FSI {font-size:inherit} /* ++++++++++++ truc précis +++++++++++++ */ .date2PJmm {width:60% !important;margin-right: 7px;} .date2PJyy {width:calc(39% - 7px) !important} .PHONE {padding:1px;color:black;font-size:11px;height:14px;line-height:14px;} .PHONE div {float:left;} .phonePays {background-color:blue;color:white;padding:1px;float:left;margin-right:1px;font-size:11px;height:12px;} .phoneNum {} .d3dd {width:40px !important} .d3mm {width:101px !important;margin-left:7px;margin-right:7px} /* champ date*/ .d3yy {width:62px !important} .minititre {font-weight:bold;color:#AB5D96} /* +++++ FORM +++++ */ input {font-family:'Noto Sans'} select {font-family:'Noto Sans';font-size:0.8em;color:#000;border-radius : 7px;} select option, option {font-family:'Noto Sans';font-size:1em;} /* firefox ne prend pas la police... mais prĂ©tend le faire ! */ textarea {width:90%;height:250px;} .miniTextarea {height:80px;} .MasterInput {width:18px;height:18px;box-shadow: 1px 1px 1px 1px #777} .infoClic {color:darkviolet;} .editable{} /* edit 2024 ; le SKIN css de editable est dans la classe field !! sinon concurence de hcoix de skin */ .nodivEditable {display:inline;} .nodivEditableW100 {display:inline-block;width:100%} .whiteField {color:white !important;} /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /* ++++ H1 etc ++++++ */ h1 { font-size:44px; font-weight:normal; text-transform:uppercase; color:#666; margin-bottom:1px; margin-top:1px; margin-left: 10% } h2 { font-size:22px; font-weight:normal; margin-top:7px; margin-bottom:7px; } h3 { color:#852007; text-decoration:none; font-size:14px; font-weight:bold; background-image:url(/img/fleche-rouge.gif); background-repeat:no-repeat; background-position:0px 50%; text-indent:25px; } h4 { font-size:2em; font-weight:normal; margin-top:7px; margin-bottom:7px; } h5 { font-size:1.8em; font-weight:bold; margin-top:7px; margin-bottom:7px; color:green; } h6 { font-size:20px; font-weight:normal; margin-top:7px; margin-bottom:7px; } /* ++++ positionneent +++ */ .clr {clear:both;width:100%;height:1px;} .cls {clear:both;width:100%;height:1px;} .clearMe {clear:both} .TAR {text-align:right} .TAL {text-align:left} .TARI {text-align:right !important} .TALI {text-align:left !important} .MID {vertical-align:middle} .MIDI {vertical-align:middle !important} .TOP {vertical-align:top} .centerSVP {text-align:center !important;} .center {text-align:center;} .gauche {float:left} .droite {float:right} .nopadding {padding:0px !important} .padder5 {padding:5px;} .padder10 {padding:10px;} .padder10L {padding-left:10px;} .padder15 {padding:15px;} .padder20 {padding:20px;} .retraitmarginleft{margin-left:2%;} .margeAuto {margin-left:auto;margin-right:auto} .mg0 {margin-left:0px !important} .mr4 {margin-right:4%} .mg1 {margin-left:1%} .mg10 {margin-left:10%} .mg20 {margin-left:20%} .mg30 {margin-left:30%} .mt10 {margin-top:10%} .mt20 {margin-top:20%} .mr30 {margin-top:30%} .mgt10 {margin-top:10px} .mgt5 {margin-top:5px} .mrg15 {margin-right:15px} .mrg25 {margin-right:25px} .mgt25 {margin-top:25px} .mgb1 {margin-bottom:1%} /* +++++ taille ++++ */ .w10 {width:10%} .w105 {width:10.5%} .w12 {width:12%} .w20 {width:20%} .w25 {width:25%} .w30 {width:30%} .w40 {width:40%} .w48 {width:48%} .w50 {width:50%} .w60 {width:60%} .w70 {width:70%} .w80 {width:80%} .w90 {width:90%} .w100 {width:100%} .w100i {width:100% !important} .w100p1 {width:98%;padding:1%} .w100pad10 {width:calc(100% - 20px);padding:10px} /* +++ couleurs +++ */ .red {color:red;} .red2 {color:rgba(164,6,73,1)} .pink {background-color:pink;} .rose {color:#AB5D96;} .yellowOpt, .yellow, .fluo {background-color:yellow !important;} .violet {color:#F1DFFE} .fondblanc, .fond0 {background-color: #FFF;} .fond1 {background-color:#EEE4D7} /*{background-color:#FFFBE6}*/ .fondasc {background-color:#F7F2E9} /* fond asc*/ .color1 {color:#FF5CCC} .fond2 {background-color:#655095} .color2 {color:#655095;} .fond3 {background-color:#ddd3aa} .white {color:white;} .violetclair {background-color:#D0BFF5} .fond4 {background-color:#FFFDF9 } /* fond de toutes les pages */ .color4 {color:#FFFBE6} .fond5 {background-color:#DDD3AA} .color5 {color:#DDD3AA} .fond6 {background-color:#FFFFFA}/* fond tableau jaune très clair */ .fond7 {background-color:#EEE4D7} /*{beige doré chaud}*/ /* +++++++++++++ */ /* ---------- planning ------------ */ .miniinfos {font-size:9px;} .barreprogression {border-radius:7px;height:20px;;position:relative} .innerbarre {background-color:#17eb47;height:19px;position:absolute;top:1px;left:1px;border-radius:7px 0px 0px 7px;float:gauche;} .btxt { position: relative;line-height: 20px;text-indent: 10px;} .edtExam_cadreDay {position:absolute;z-index:222;border:solid 1px #888;top:0px;border-top:0px;box-shadow: 0 3px 8px rgba(0, 0, 0, 0.20);} .edtExam_head {border-radius: 0px 18px 0px 0px;border: solid 1px white;;position:absolute;z-index:333;background-color:#aaa;top:0px;height:40px;text-align:center;line-height:38px;font-size:1.5em} .edtASC_head {border: ;position:absolute;z-index:333;top:0px;height:40px;text-align:center;line-height:38px;font-size:12px} .miniEdt {font-size:1em} .horaires {font-size:1.5em} .edtExam_epreuve {position:absolute;z-index:444;text-align:center;border:solid 1px white;border-radius:7px;} .edtExam_epreuve {overflow:hidden} .edtExam_epreuve a {font-size:1.3em} .edtExam_epreuve a:visited {font-size:1.3em;color:inherit} /* autre section */ .techRepport {width:calc(100% - 101px);font-family:courier;padding : 50px;background-color:#333;color:white} .techRepport table {background-color:inherit;color:yellow;border-collapse:collapse;} .techRepport td {padding-left:4px;} .techRepport h1 {color:white;display:inline;text-transform:uppercase} .techRepport {background-image:url('/img/avatar/avatar_15.png');background-repeat:no-repeat;background-position:15px 15px} .precisionEpreuveSpan {font-size:0.8em;} /* ci dessous truc vraiment utilisé en 2025 */ .bigColName {width:180px;overflow:hidden} /* --- */ .pattern1 {background-repeat:repeat;background-image:url('/img/pattern/pattern_gris1.png');} .pattern2 {background-repeat:repeat;background-image:url('/img/pattern/pattern_2.png');} .pattern3 {background-repeat:repeat;background-image:url('/img/pattern/pattern_violet1.png');} .pattern4 {background-repeat:repeat;background-image:url('/img/pattern/pattern_d1.png');} .pattern5 {background-repeat:repeat;background-image:url('/img/pattern/pattern_d6.png');} .BTNclose2, .BTNPLUS2 , .BTNclose { cursor:pointer; text-transform: uppercase; border-radius: 5px; font-family: 'Noto Sans'; font-weight: bold; padding: 0px 8px; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25); font-size: 12px; } .UPPERcase { text-transform: uppercase; letter-spacing: 1px; } .BTNclose { background-color:#aaa;color:white;text-indent:0px; } .BTNPLUS, .BTNsuppr, .BTNPDF, .BTNEDIT, .BTNVOIR, .GEOBTN, .BTNmail, .BTNGO{ text-indent: 22px; background-repeat: no-repeat; background-position: 5px 8px; cursor:pointer; text-transform: uppercase; border-radius: 7px; font-family: 'Noto Sans'; font-weight: bold; padding: 7px 13px; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25); } .BTNGO { /* Alignement & Structure */ display: inline-flex; align-items: center; justify-content: center; gap: 12px; /* Espace équilibré entre l'icône et le texte */ /* Bouton plus généreux et cliquable */ padding: 0.75rem 1.5rem 0.75rem 3rem; min-height: 46px; /* Typographie */ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; /* Légère ouverture des lettres pour la clarté */ color: #0b0b02; /* Contraste maximal mais moins brut que #000 */ text-transform: uppercase; /* Donne un côté "Action / Décision" (Optionnel) */ /* Background & Icône */ background-color: #F2E307; /* Un jaune plus dense, professionnel et contrasté */ background-image: url('/icon_agora/btnfleche2.png'); background-repeat: no-repeat; background-position: 16px center; /* Alignement stable */ background-size: 22px; /* Proportion parfaite pour un bouton important */ /* Bordures & Coins */ border: 1px solid #D6C804; /* Bordure ton sur ton pour asseoir le bouton */ border-radius: 6px; /* Coins légèrement arrondis, très typé SaaS moderne */ /* Curseur & Comportement */ cursor: pointer; user-select: none; /* Ombre portée affirmée (Effet d'élévation pour l'importance) */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(242, 227, 7, 0.15); /* Légère lueur jaune subtile */ /* Transition fluide sur toutes les propriétés */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* --- ÉTATS D'INTERACTION --- */ /* Au survol : Le bouton s'active et invite au clic */ .BTNGO:hover { background-color: #FFE600; /* Devient plus lumineux */ border-color: #E6CE00; transform: translateY(-2px); /* Légère élévation */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(242, 227, 7, 0.25); /* L'ombre grandit */ } /* Au clic : Retour d'effet mécanique instantané */ .BTNGO:active { transform: translateY(0); /* Redescend */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(242, 227, 7, 0.1); } /* Accessibilité au clavier (Focus) */ .BTNGO:focus-visible { outline: 3px solid rgba(242, 227, 7, 0.5); outline-offset: 2px; } .btn-danger-action { background-color: #dc3545; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; } .btn-danger-action:hover { background-color: #b02a37; } .btn-danger-action:active { transform: scale(0.98); } .BTNmail { background-image: url('/icon_agora/enveloppe_email.png'); /* background-image: url('/img/icon_modifier.png'); */ background-color:#54D1AC; color:#FFF; border: solid 0.3px #BFAEEF; background-position: 4px 5px; background-size:24px; } .boxtable {box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);background-color: #FFFAEB;} .REDBTN {color:white !important;background-color:#ff4444 !important;border-color:red} .BTNVOIR { background-image: url('/icon_agora/oeil.png'); /* background-image: url('/img/icon_modifier.png'); */ background-color:#D7CBF5; color:#000; border: solid 0.3px #BFAEEF; background-position: 4px 5px; } /* .BTNVOIR a {color:white;} */ .BTNEDIT { background-image: url('/icon_agora/edit_20.png'); /* background-image: url('/img/icon_modifier.png'); */ background-color:#FFAE0D; color:#000; border: solid 0.3px #E69B00; background-position: 7px 4px; } .BTNPDF{ background-image: url('/icon_files/iconePDF.png'); background-size:22px; background-color:#ccc; background-position: 5px 4px; color:#000; border: solid 0.3px rgba(120, 135, 113, 0.45); } .GEOBTN { background-image: url('/icon_agora/bus/pin.png'); background-size:16px; background-color:#ddd !important; color:#555 !important; background-position: 5px 4px; border-color:#bbb !important; } .BTNPLUS{ background-image: url('/img/icon_ajouter.png'); background-color:#baff8b; color:#333; border: solid 0.3px #afd996; } .BTNprevious { /* Structure & Alignement */ display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.4rem; min-height: 40px; /* Couleurs de base */ background-color: #ffffff; color: #2f5aa8; border: 1.5px solid #2f5aa8; border-radius: 8px; /* Typographie */ font-family: system-ui, -apple-system, sans-serif; font-size: 0.9rem; font-weight: 600; line-height: 1; /* Aligne la base du texte proprement */ cursor: pointer; user-select: none; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(47, 90, 168, 0.08); } /* La flèche retour : Calée de force sur la ligne du texte */ .BTNprevious::before { content: ""; display: inline-block; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; /* On combine la rotation ET un ajustement vertical fixe (1px ou 2px selon ta police). Le 'translateY(1px)' descend la flèche pour la centrer parfaitement au repos. */ transform: rotate(45deg) translateY(1px); margin-right: 8px; position: relative; left: 0; /* On ne transitionne QUE le 'left' pour le survol, le reste reste figé */ transition: left 0.2s ease-in-out; } /* --- ÉTATS D'INTERACTION --- */ .BTNprevious:hover { background-color: #264C90; border-color: #264C90; color: #ffffff; box-shadow: 0 4px 10px rgba(47, 90, 168, 0.25); transform: translateY(-1px); } /* Au survol : Seul le 'left' bouge de 1.5px. L'alignement vertical ne bouge pas d'un poil. */ .BTNprevious:hover::before { left: -1.5px; } /* Au clic */ .BTNprevious:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(47, 90, 168, 0.25); } .BTNprevious:focus-visible { outline: 3px solid rgba(47, 90, 168, 0.4); outline-offset: 2px; } /* --- STRUCTURE DE BASE --- */ .BTNnext { /* Structure & Alignement */ display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.4rem; min-height: 40px; /* Couleurs de base */ background-color: #ffffff; color: #2f5aa8; border: 1.5px solid #2f5aa8; border-radius: 8px; /* Typographie */ font-family: system-ui, -apple-system, sans-serif; font-size: 0.9rem; font-weight: 600; line-height: 1; /* Aligne la base du texte proprement */ cursor: pointer; user-select: none; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(47, 90, 168, 0.08); } /* --- FLÈCHE SUIVANT (::after) --- */ .BTNnext::after { content: ""; display: inline-block; width: 7px; height: 7px; /* Bordures inversées pour pointer à droite */ border-right: 2px solid currentColor; border-top: 2px solid currentColor; /* Rotation et ajustement vertical */ transform: rotate(45deg) translateY(1px); /* Espacement à gauche du texte */ margin-left: 8px; position: relative; left: 0; /* Animation fluide du décalage */ transition: left 0.2s ease-in-out; } /* --- ÉTATS D'INTERACTION --- */ /* Au survol du bouton */ .BTNnext:hover { background-color: #264C90; border-color: #264C90; color: #ffffff; box-shadow: 0 4px 10px rgba(47, 90, 168, 0.25); transform: translateY(-1px); } /* Au survol : La flèche avance vers la droite */ .BTNnext:hover::after { left: 1.5px; } /* Au clic */ .BTNnext:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(47, 90, 168, 0.25); } /* Accessibilité (Navigation au clavier) */ .BTNnext:focus-visible { outline: 3px solid rgba(47, 90, 168, 0.4); outline-offset: 2px; } .BTNsuppr { /* Structure & Alignement */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Taille réduite pour la discrétion */ padding: 0.5rem 1rem 0.5rem 1rem; /* Espace optimisé pour l'icône à gauche */ min-height: 36px; /* Plus petit que les autres boutons */ /* Icône (croix) calée proprement */ background-image: url('/img/supprimer.png'); background-repeat: no-repeat; background-position: 12px center; background-size: 12px; /* Légèrement réduit pour plus de finesse */ /* Style au REPOS : Ultra discret */ background-color: transparent; /* Fond transparent pour fusionner avec la zone */ color: #718096; /* Un gris neutre, le bouton "s'efface" visuellement */ border: 1px solid transparent; /* Pas de bordure agressive au repos */ border-radius: 6px; /* Typographie */ font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; transition: all 0.2s ease-in-out; } /* --- ÉTATS D'INTERACTION --- */ /* Au survol : Le bouton révèle sa fonction destructrice de manière douce */ .BTNsuppr:hover { color: #c53030; /* Un rouge d'alerte élégant et pro */ background-color: #fff5f5; /* Un fond rose/rouge très léger et subtil */ border-color: #fed7d7; /* Une bordure assortie fine */ /* Optionnel : si tu veux absolument utiliser tes couleurs d'origine au survol, remplace par : background-color: #FFAF9E; color: #333; */ } /* Au clic */ .BTNsuppr:active { background-color: #feb2b2; transform: scale(0.98); /* Petit effet mécanique discret */ } .BTNsuppr:focus-visible { outline: 3px solid rgba(229, 62, 62, 0.3); outline-offset: 2px; } .BTNclose2{ background-color:#ffaf9e; color:#333; border: solid 0.3px #e08573; } .BTNPLUS2{ background-color:#baff8b; color:#333; border: solid 0.3px #afd996; } .BTNverif{ background-color:#baff8b; color:#333; border: solid 0.3px #afd996; } .btn-verify::before { content: ''; width: 10px; height: 5px; border-left: 2px solid #3d5d60; border-bottom: 2px solid #3d5d60; transform: rotate(-45deg); /* Crée la forme du check */ margin-top: -2px; } /* --- EFFET AU SURVOL (Le fameux grossissement) --- */ .btn-verify:hover { transform: scale(1.08); box-shadow: 0 3px 8px rgba(61, 93, 96, 0.15); } /* Effet au clic */ .btn-verify:active { transform: scale(0.95); } /* --- zoom universel 100% WAI compliant--- */ .btn-zoom { /* Propriétés de base */ display: inline-block; vertical-align: middle; cursor: pointer; /* Transition fluide */ transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background-color 0.2s ease; /* Optimisation du rendu (WAI : évite le flou du texte) */ transform: scale(1); backface-visibility: hidden; will-change: transform; } /* WAI : On applique le zoom au survol SOURIS et au focus CLAVIER */ .btn-zoom:hover, .btn-zoom:focus { transform: scale(1.05); box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.3) !important; outline: none; /* On enlève l'outline par défaut pour le remplacer par un plus propre */ } /* WAI : Indicateur visuel clair pour la navigation au clavier */ .btn-zoom:focus-visible { outline: 3px solid #A0522D; /* Ton Terracotta ou une couleur contrastée */ outline-offset: 3px; } /* Effet clic */ .btn-zoom:active { transform: scale(0.98); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2) !important; } /* CRITÈRE WAI CRUCIAL : Désactivation pour les personnes sensibles aux mouvements */ @media (prefers-reduced-motion: reduce) { .btn-zoom { transition: none !important; transform: none !important; /* On garde juste un changement de couleur ou d'ombre simple */ } } .millesimeSwitcher select {font-size:1.2em;background-color:#F1F3F5; } .delete-session-badge { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; padding: 6px 10px; /* On utilise un fond blanc semi-transparent pour laisser passer un peu du magenta */ background-color: rgba(255, 255, 255, 0.9); /* Le texte reste sombre pour un contraste maximal */ color: #333; /* Une bordure fine pour structurer le bouton */ border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; font-size: 13px; font-weight: 600; transition: all 0.2s ease-in-out; } .delete-session-badge:hover { background-color: #ffffff; /* Devient totalement blanc au survol */ transform: scale(1.02); /* Très léger grossissement */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .delete-session-badge:hover img { filter: none; /* L'icône reprend sa couleur au survol */ } .table-caption { font-size: 13px; color: #6B7280; /* gris doux, cohérent avec ta palette */ margin: 16px 0 8px 0; /* espace au-dessus du tableau */ font-weight: 500; letter-spacing: 0.01em; } .bandeau-info { background-color: #EEE4D7; border-top: 1px solid #D6CDB8; border-bottom: 1px solid #D6CDB8; padding: 16px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #5D4E3C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(89, 70, 50, 0.05); } /* --- lien pdf --- */ .felix a { display: inline-block; padding: 11px 26px; background: #b85478; color: white; text-decoration: none; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .felix a:hover { background: #c96a8c; transform: translateY(-1px); text-decoration: none; color: white; } #plan-containercss { margin: 30px 0; padding: 24px; background: #fdfcfb; border-radius: 12px; border: 1px solid #f0d9e3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); position: relative; } #plan-containercss .plan-title { display: block; font-size: 2em; font-weight: 600; color: #b85478; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; } .custom_date {width:auto !important;} /* -----------------pour ne plus avoir nos imput et selecteur avec un contour noir à cause du navigateur--------------------------------------------------------- */ .custom-select { /* 1. Reset complet du style navigateur */ appearance: none; -webkit-appearance: none; outline: none; box-sizing: border-box; /* Harmonisation avec .custom-input (Hauteur stricte) */ display: inline-block; height: 34px; /* 2. Couleurs et Fond */ background-color: rgba(255, 255, 255, 0.75); color: #333333; border: 1px solid #9CA3AF; /* Bordure grise plus prononcée */ border-radius: 6px; /* Arrondi à 6px comme l'input */ /* 3. Dimensions et Espacement */ padding: 4px 10px 4px 10px; font-size: 14px; line-height: normal; cursor: pointer; /* 4. La petite flèche personnalisée (conservée et centrée) */ /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); */ background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; /* 5. Transition fluide */ transition: all 0.2s ease-in-out; } /* Effet au survol */ .custom-select:hover { border-color: #6B7280; background-color: rgba(255, 255, 255, 0.9); } /* Effet au clic (Focus) - Avec fond blanc pur éclatant */ .custom-select:focus { border-color: #4A7BB0; background-color: #F8FAFC; /* Blanc pur éclatant */ outline: none; box-shadow: 0 0 0 3px rgba(74, 123, 176, 0.15); } /* Effet au survol */ .select-session-speciale select:hover { border-color: #B8C2CC; background-color: #EDF0F3; } /* Effet au clic (Focus) - ADIEU LE BLEU, BONJOUR LE MAGENTA */ .select-session-speciale select:focus { border-color: #E718AF !important; /* Ton Magenta en bordure */ background-color: #FFFFFF !important; /* On crée un halo magenta très léger autour */ box-shadow: 0 0 0 3px rgba(231, 24, 175, 0.1) !important; } /* --------pour les input----------------------------------------------------------------------------------------- */ .custom-input { display: inline-block; /* block non acceptable ici */ height: 34px; box-sizing: border-box; appearance: none; -webkit-appearance: none; outline: none; border: 1px solid #9CA3AF; border-radius: 6px; /* Typographie et Espacement */ padding: 4px 10px; font-size: 14px; line-height: normal; color: #333333; background-color: rgba(255, 255, 255, 0.75); /* Transition globale fluide */ transition: all 0.2s ease-in-out; } .custom-input:focus { border-color: #4A7BB0; /* Ton bleu de focus moins électrique */ background-color: #F8FAFC !important; /* Fond au focus (presque blanc) */ outline: none; /* Halo extérieur doux en accord avec ton nouveau bleu */ box-shadow: 0 0 0 3px rgba(74, 123, 176, 0.15); } /* Force le fond sur l'autofill pendant la saisie */ .custom-input:-webkit-autofill, .custom-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #F8FAFC inset !important; -webkit-text-fill-color: #333333 !important; } /* On cible l'input à l'intérieur de notre nouveau conteneur */ .custom-input-session { /* --- REPRISE EXACTE DE TON STYLE --- */ display: inline-block; width: 60px; height: 26px; box-sizing: border-box; appearance: none; -webkit-appearance: none; outline: none; border: 1px solid #D1D5DB; border-radius: 6px; box-shadow: 0 0 0 30px #E3F2FF inset; color: #333; padding: 2px 8px; font-size: 12px; line-height: normal; background-color: #F8FAFC; transition: all 0.2s ease-in-out; text-align:center; margin-top: 15px; } /* État Focus (clic) */ .custom-input-session:focus { border-color: #4A90E2; background-color: #F8FAFC !important; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15), 0 0 0 30px #F8FAFC inset !important; } /* Gestion de l'autofill */ .custom-input-session:-webkit-autofill, .custom-input-session:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #F8FAFC inset !important; -webkit-text-fill-color: #333 !important; } /* État Focus (clic) */ .custom-input.borderfonceviolet{ border: solid 1px #a994c9 !important; } /* Variante compacte des selects (pour horloges) */ .custom-select-session.horloge { min-width: 40px; width: 40px; padding: 2px 16px 2px 5px; font-size: 11px; background-position: right 4px center; background-size: 7px; } /* Empêcher le retour à la ligne dans la cellule */ .custom-select-session.horloge { white-space: nowrap; } /* Ou cibler la cellule du tableau qui contient les horloges */ td.heure-cell { white-space: nowrap; min-width: 250px; } /* -------select---------------------------------------------------------------- */ .custom-select-session { /* --- REPRISE EXACTE DE TON STYLE INPUT --- */ display: inline-block; width: auto; min-width: 60px; height: 26px; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: none; border: 1px solid #D1D5DB; border-radius: 6px; box-shadow: 0 0 0 30px #E3F2FF inset; color: #333; padding: 2px 24px 2px 8px; font-size: 12px; line-height: normal; background-color: #F8FAFC; transition: all 0.2s ease-in-out; cursor: pointer; margin-top: 15px; /* --- FLÈCHE BLEUE --- */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A90E2' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 8px; } /* État Focus (clic) */ .custom-select-session:focus { border-color: #4A90E2; background-color: #F8FAFC !important; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15), 0 0 0 30px #F8FAFC inset !important; } /* État Hover (survol) */ .custom-select-session:hover { border-color: #4A90E2; } /* État Disabled */ .custom-select-session:disabled { opacity: 0.6; cursor: not-allowed; } /* -------fin unput et select---------------------------------------------------------------- */ /* ----------------- move from candidtas.css !!! warning if change */ .parentsMixNoDiv {width:calc(100% - 70px);overflow:hidden;font-size:0.8em;display:block;height:22px;line-height:21px;text-indent:4px} /* parents 90% bug... j'esaie auto */ .parentsMixNoDiv .field {width:95%} /* --------- FILE DISPLAY OK 2025 -------- */ .imgBoxP {position:relative;width:125px;} /* box-shadow: 5px 5px 5px #655095; border:solid 1px #ccc; 135px de laarge a cause de l'ombre de l'icone ? nop */ .imgBoxPfloating_admin {position:relative;float:left;margin-right:30px;margin-bottom:15px;text-align:center;width:auto;} .imgBoxPfloating_famille {position:relative;text-align:center;width:100%;} .imgBoxPfloating_familleIdentity {position:relative;text-align:center;width:50%;float:left;} .imgBoxP img, .imgBoxPfloating_admin img,.imgBoxPfloating_famille img, .imgBoxPfloating_familleIdentity img {width:75px;} .Adm_PJGROUP {padding:11px} .filename {width:100%;text-align:center;padding-top:11px;} .PJBOX_hauteurized {height:auto; min-height:210px;} .zeroDoc {width:100%;color:red;text-align:center;font-size:0.9em} /* controlled 2025 */ .cadredOmbred {border:solid 1px gray;box-shadow: 4px 4px 4px #655095;} .champNumPasseport input {width:90%} .PJinsider {padding:10px;} /* ????? */ .PJI_bloc1 {border:solid 1px #655095;border-radius:4px;width:96%;padding:2%;background-color:#FFF5CC} /*+++++++++++++++++ TABLE 2025 +++++++++++++++ */ .th50td50 {} .th50td50 th, .th50td50 td {width:50%} .th30td70 th {width:30%} .th30td70 td {width:70%} .th40td60 th {width:40%} .th40td60 td {width:60%} .borderAll,.tableBorded {border:solid 1px #aaa} .borderAll {border-collapse:collapse;} .cellBorded td,.borderAll td,.borderAll th {border:solid 1px #aaa} .noCellBorderTable {border-collapse:collapse;} .noCellBorderTable td {border:0px;} .fixedTable {table-layout:fixed;} .noCellPadding {} .noCellPadding td {padding:0px} .MAJTH th {text-transform:uppercase} .formTrBug {background-color:rgba(233,56,131,1);border-radius: 5px 5px;color: white !important;} /* FIXME CHECK LIEU */ /* FIXME TESTER : */ .esayTable tr {background-color:white;cursor:pointer;} .familleTable th {background-color:#bbf;padding-left:11px;padding-right:11px;} .noBoldTH th {font-weight:normal !important} .formtable th {text-align:left;padding-right:1%;border-radius:inherit;} .formtable {border-collapse:collapse;} .formtable td {border-radius:inherit} .formtable tr {height:30px;} /* espacement des champs lignes dans les form 25 01 2023 */ .tableTAL td {text-align:left;} .tableTAL th {text-align:left;} .thTALI th {text-align:left !important;} .tdline {cursor:pointer;} .GenericTableEditor {background-color:#DDDDDD;} .GenericTableEditor table {background-color:#DDDDDD;border-collapse:collapse;font-size:11px;} .GenericTableEditorLine {background-color:#DDDDDD;} .GenericTableEditorLine table {background-color:#DDDDDD;border-collapse:collapse;font-size:11px;border:solid 1px gray;} .GenericTableEditorLine table td {border:solid 1px gray;padding:3px;} .botable th { background-image: url("/img/header_bloc.png"); color: white; font-weight: bold; text-align: center; } .botable td {} .logtable th {text-align:left;} .tr2 {line-height:2em;} .cellpad10 td, .cellpad10 th {padding-top:10px;padding-left:5px;padding-right:5px;padding-bottom:10px;} .space td, .space th {padding-top:10px;padding-left:5px;padding-right:5px;padding-bottom:10px;} .space2 td, .space2 th {padding-top:4px;padding-left:6px;padding-right:6px;padding-bottom:4px;} .cpline {cursor:pointer;} .cpline:hover {background-color:#ccc !important} .searchTab {border-collapse:collapse;font-size:11px;text-align:left;} .searchTab th {color:inherit;text-align:left;width:150px;font-weight:normal;} /* ----------Taille fixe + contenu coupé avec ...------ */ /* -------Taille fixe + texte qui passe à la ligne---------- */ /* ----------------- */ /*+++++++++++++++++ TABLE 2026 +++++++++++++++ */ /* Le conteneur du tableau pour gérer l'arrondi et l'ombre */ /* Si le tbody est vide, on cache le tableau pour éviter le trait */ .agora-table-modern { table-layout: auto; /* Les colonnes ne bougent plus */ border-collapse: separate !important; border-spacing: 0; width: 90%; margin: 20px auto; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #e0e0ff; background-color: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Style des en-têtes (Header) */ .agora-table-modern th { background-color: #d6ecee; color: #2c4e50; padding: 15px; text-align: center; font-weight: 600; text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.5px; border-bottom: 2px solid #c7d2fe; } /* AJOUT : Pour fixer le coin droit du header */ .agora-table-modern th:last-child { border-right: none; } /* Style des cellules (Données) */ .agora-table-modern td { padding: 12px 15px; border-bottom: 1px solid #f0f0ff; color: #333; vertical-align: middle; } /* AJOUT : Pour fixer le coin droit des lignes de données */ .agora-table-modern td:last-child { border-right: none; } /* Alternance de couleur pour les lignes (Zebra stripes) */ .agora-table-modern tr:nth-child(even) { background-color: #fcfcff; } /* Effet au survol de la ligne */ .agora-table-modern tr:hover td { background-color: #f5f4ff !important; transition: background 0.2s ease; color:#4A4A4A !important; } /* Suppression de la bordure sur la dernière ligne pour l'arrondi */ .agora-table-modern tr:last-child td { border-bottom: none; } agora-table-modern tr.ligne-importante td { font-weight: 700; color: #1a1a1a; /* Optionnel : un noir un peu plus profond pour renforcer l'effet */ } /* En-tête coloré */ .agora-table-modern.table_headteal th { background-color: #2A9D8F !important; color: #ffffff !important; border-bottom: 2px solid #E8DCC4 !important; } /* Fond blanc des cellules pour détacher le tableau du fond crème */ .agora-table-modern.table_headteal td { background-color: #ffffff !important; } .agora-table-modern thead th, .agora-table-modern th.pseudoThMarron { background-color: #A0522D; /* Terracotta */ color: #ffffff; padding: 12px 15px; text-align: left; font-size: 14px; border-bottom: 2px solid #8B4513; } /* Cible TOUS les td pour la cohérence */ .agora-table-modern tbody td { padding: 12px 15px; color: #4A4A4A; border-bottom: 1px solid #F0F0F0; font-size: 13px; } .agora-table-modern tr td { background-color: #ffffff; /* Fond blanc par défaut */ padding: 12px 15px; border-bottom: 1px solid #E6E0D8; /* Ta couleur de fond beige en séparation */ color: #4A4A4A; text-align: center; } /* On cible les 'th' qui sont dans un tableau ayant LES DEUX classes */ .agora-table-modern.table-headbleu th { background-color:#4A6FA5 !important; /* Nouvelle couleur de fond (ex: orange clair) */ color: #ffffff !important; /* Nouvelle couleur de texte */ border-bottom: 2px solid #F5EFE6 !important; /* Nouvelle bordure */ } .agora-table-modern.table-headteal th { background-color: rgb(20, 150, 140) !important; /* Un magnifique Teal moderne, frais et dynamique */ color: #ffffff !important; /* Texte blanc qui ressort parfaitement */ border-bottom: 2px solid rgb(15, 110, 105) !important; /* Bordure basse subtile pour la finition */ text-align: center; /* Aligne le texte comme tes autres th */ } .agora-table-modern tr.separateur-table td { padding: 0 !important; height: 0 !important; background: transparent !important; border: none !important; border-top: 2px solid #e5e7eb !important; /* Ligne grise très fine */ } /* ---------coins arrondis avec bordure-------- */ /* 1. COIN HAUT GAUCHE (Première ligne, première cellule) */ .agora-table-modern tr:first-child td:first-child { border-top-left-radius: 6px; } /* 2. COIN HAUT DROIT (Première ligne, dernière cellule) */ .agora-table-modern tr:first-child td:last-child { border-top-right-radius: 6px; } /* 3. COIN BAS GAUCHE (Dernière ligne, première cellule) */ .agora-table-modern tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* 4. COIN BAS DROIT (Dernière ligne, dernière cellule) */ .agora-table-modern tr:last-child td:last-child { border-bottom-right-radius: 6px; } /* Effet de survol sur la ligne pour le côté "Fun/Interactif" */ .agora-table-modern tbody tr:hover { background-color: #F9F4F0; /* Ton beige clair */ transition: background 0.2s ease; } /* --- TES AJOUTS POUR LES LIGNES SPÉCIALES --- */ /* On définit la couleur de base pour les lignes importantes */ .agora-table-modern tr.ligne-importante td { background-color: #AB5D96 !important; /* Ton violet/bleu vibrant */ color: white !important; font-weight: bold; } /* On définit ce qui se passe quand on passe la souris sur ces lignes précises */ .agora-table-modern tr.ligne-importante:hover td { background-color: #964d84 !important; /* Un ton plus foncé pour montrer le survol */ color: white !important; /* On force le texte à rester blanc */ } /* ----------Taille fixe ------ */ .agora-table-modern td.td-fixed { width: 200px; min-width: 200px; max-width: 200px; } /* ----------Taille fixe + contenu va à la ligne------ */ .agora-table-modern td.td-fixed-ligne { width: 110px; min-width: 110px; max-width: 150px; word-wrap: break-word; overflow-wrap: break-word; } /* ----------Taille fixe + contenu coupé avec ...------ */ .agora-table-modern td.td-fixedpoint { width: 150px; min-width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cache le tableau tant qu'il n'y a pas de lignes (tr) à l'intérieur */ #agoraPassListingQueue:not(:has(tr)) { display: none !important; } /* Style pour l'entête spécifique bleu/vert */ .agora-table-modern th.ligne-entete { background-color: #5a8b8f !important; color: #FFFFFF !important; /* Force le blanc pur */ -webkit-text-fill-color: #FFFFFF !important; /* Pour certains navigateurs têtus */ font-weight: bold; text-align: center; padding: 15px; border-bottom: 2px solid #4a7578; /* Une bordure un peu plus foncée pour le relief */ } /* SÉCURITÉ ARRONDIS : On force les coins du haut à suivre la nouvelle couleur */ .agora-table-modern tr:first-child th.ligne-entete:first-child { border-top-left-radius: 6px; } .agora-table-modern tr:first-child th.ligne-entete:last-child { border-top-right-radius: 6px; } /* Ta nouvelle variante d'entête "Sympa" */ .agora-table-modern th.ligne-enteteV2 { /* Dégradé dynamique pour le relief */ background: linear-gradient(135deg, #5a8b8f 0%, #466d70 100%) !important; /* Texte blanc pur et ultra-net */ color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; /* Style typographique moderne */ font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; /* Structure */ padding: 18px 15px; text-align: center; border: none !important; /* Bordure violette en bas pour le "punch" coloré */ border-bottom: 4px solid #655095 !important; /* Ombre interne légère pour donner du cachet */ box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); } /* On ajoute un effet sur la ligne complète qui contient cette classe */ .agora-table-modern tr:has(.ligne-entetev2) { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .agora-table-modern.on-mint { background-color: #e0f2f1; border: 2px solid #4d8277; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } /* En-tête (Header) */ .agora-table-modern.on-mint th { background-color: #4d8277; color: #ffffff; /* Blanc pur pour trancher sur le vert foncé */ border-bottom: 2px solid #335c54 !important; } /* Style des cellules et du texte */ .agora-table-modern.on-mint td { /* TEXTE : Gris anthracite neutre, pas de couleur, mais moins dur que le noir */ color: #333333; border-bottom: 1px solid #b2dfdb; padding: 12px 15px; } .agora-table-modern.on-mint.alignementgauche td { text-align: left; padding-left:8% !important; } .agora-table-modern.on-mint.alignemententeteleft th { text-align: left; padding-left:10% !important; } /* Alternance de lignes (Zebra) */ .agora-table-modern.on-mint tr:nth-child(even) { background-color: #ccede8 !important; } .agora-table-modern.aligncenterth th { text-align: center !important; } /* Effet au survol (Hover) */ .agora-table-modern.on-mint.survolmint tr:hover td { background-color: #f0fdfa !important; color: #1a1a1a; /* Un gris encore plus sombre au survol pour le contraste */ transition: all 0.2s ease; } /* Ligne de Total (si applicable) */ .agora-table-modern.on-mint tr:last-child td { color: #222222; /* Gris très sombre neutre */ } /* ------------------------------------autre tableau modern 2026 peut gérer les hover avec warning ligne appelant php pour changer la couleur des lignes------------------ */ .agora-table-chic { border-collapse: separate !important; border-spacing: 0; width: 90%; margin: 20px auto; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); border: 1px solid #D4D4D4; background-color: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; table-layout: auto; } .agora-table-chic thead th { background-color: #7B5EA7; color: #ffffff; padding: 14px 15px; text-align: center; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 3px solid #F5EFE6; } .agora-table-chic tbody th { background-color: #7B5EA7; color: #ffffff; padding: 14px 15px; text-align: left; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 3px solid #F5EFE6; } .agora-table-chic tbody td { padding: 12px 15px; color: #222222; border-bottom: 1px solid #D4D4D4; font-size: 13px; vertical-align: middle; text-align: center; } .agora-table-chic tbody tr:hover td { background-color: #F2F2F2 ; transition: background 0.2s ease; } .agora-table-chic tr:last-child td { border-bottom: none; } /* Coins arrondis */ .agora-table-chic tr:first-child th:first-child { border-top-left-radius: 6px; } .agora-table-chic tr:first-child th:last-child { border-top-right-radius: 6px; } .agora-table-chic tr:last-child td:first-child { border-bottom-left-radius: 6px; } .agora-table-chic tr:last-child td:last-child { border-bottom-right-radius: 6px; } /* Lignes spéciales */ .agora-table-chic tr.ligne-importante td { background-color: #E91E63; color: #ffffff; font-weight: bold; } .agora-table-chic tr.ligne-importante:hover td { background-color: #C0143C !important; color: #ffffff !important; } .agora-table-chic tr.ligne-success td { background-color: #00BFA5; color: #ffffff; font-weight: bold; } .agora-table-chic tr.ligne-success:hover td { background-color: #00897B !important; color: #ffffff !important; } .agora-table-chic tr.ligne-warning td { background-color: #FFE0B2; color: #5D3A00; font-weight: 500; } .agora-table-chic tr.ligne-warning:hover td { background-color: #FFCC80; color: #5D3A00; } .agora-table-chic.on-luxury thead th { background-color: #4A8B9F; /* Presque noir */ color: #ffffff; /* Blanc cassé */ border-bottom: 3px solid #D2B48C; /* Soulignement Tan */ padding: 14px 15px; /* ... reste du style ... */ } /* ------------------------------------entete tableau bus 2026------------------- */ .agora-table-modern.ligne-enteteV3 th { /* Jaune lumineux */ background: linear-gradient(135deg, #FFDF40 0%, #F5C71A 100%) !important; /* Texte sombre */ color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; padding: 18px 15px; text-align: center; /* --- HARMONISATION DES BORDURES --- */ /* 1. Bordure inférieure : Orange Solaire vibrant (remplace le violet) */ border-bottom: 4px solid #E67E22 !important; /* 2. Bordures latérales/supérieures : Jaune doré doux */ border-top: 1px solid #F1C40F !important; border-left: 1px solid #F1C40F !important; border-right: 1px solid #F1C40F !important; /* Ombre interne légère */ box-shadow: inset 0 -2px 0 rgba(0,0,0,0.05); } /* Bordure des cellules (td) : Jaune très clair pour structurer */ .agora-table-modern.ligne-enteteV3 td { border: 1px solid #F9E79F !important; } /* Effet sur la ligne : Ombre orangée */ .agora-table-modern.ligne-enteteV3 tr:first-child { box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3); } /* --------------------------------------tableau pour les info -----------------------------*/ .tableinfo { border-collapse: separate; border-spacing: 0; background: #fdfdfd; border: 1px solid #5cb8c4; border-radius: 8px; overflow: hidden; margin: 15px 0; font-size: 13px; width: auto; box-shadow: 0 1px 4px rgba(92, 184, 196, 0.08); } .tableinfo th, .tableinfo td { padding: 8px 14px; text-align: left; border: none; } .tableinfo th { color: #0a4a52; font-weight: 600; background: #f0fafb; border-right: 1px solid #b8e0e8; white-space: nowrap; } .tableinfo td { color: #0a4a52; font-weight: 600; } .tableinfo tr:not(:last-child) th, .tableinfo tr:not(:last-child) td { border-bottom: 1px solid #b8e0e8; } /* ------------------------------------bouton download 2026-------------------- */ /* On force le vert sur TOUS les états du lien */ .btn-download, .btn-download:link, .btn-download:visited { color: #3d8c8e !important; text-decoration: none !important; display: inline-flex !important; align-items: center; gap: 10px; /* Réduit de 15px à 10px */ border: 1.5px solid #3d8c8e; /* Bordure un peu plus fine */ margin-top:15px; margin-bottom:5px; /* TAILLE RÉDUITE ICI */ padding: 6px 14px; /* Réduit de 10px/22px à 6px/14px */ font-size: 12px; /* Taille de police plus petite */ border-radius: 6px; font-family: 'Noto Sans', sans-serif; font-weight: bold; background-color: transparent; transition: all 0.4s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Flèche légèrement plus petite aussi */ .btn-download::before { content: ''; width: 6px; /* Réduit de 8px à 6px */ height: 6px; /* Réduit de 8px à 6px */ border-right: 2px solid #3d8c8e !important; border-bottom: 2px solid #3d8c8e !important; transform: rotate(45deg); margin-bottom: 2px; transition: all 0.4s ease; } /* ÉTAT AU SURVOL : Grossissement uniquement */ .btn-download:hover { transform: scale(1.08); /* Un zoom de 8% au lieu de 10% pour rester subtil */ background-color: transparent !important; border-color: #3d8c8e !important; color: #3d8c8e !important; box-shadow: 0 3px 8px rgba(61, 140, 142, 0.15); } .btn-download:hover::before { border-color: #3d8c8e !important; } .btn-download:active { transform: scale(0.95); } /* -----------------------------------pour les boutons "phrase"--------------------------------------- */ .btn-action-light { display: inline-flex; align-items: center; gap: 8px; /* Un fond opaque beige très clair pour se détacher du fond de la page */ background-color: #F9F4F0; /* Ta nouvelle couleur Terracotta */ border: 1px solid #A0522D; color: #A0522D; padding: 6px 12px; border-radius: 15px; font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 5px; margin-bottom: 5px; } .btn-action-light:hover { /* Au survol, on éclaircit légèrement le fond pour l'effet "bouton" */ background-color: #FCF9F7; /* On ajoute une petite ombre terracotta très diffuse */ box-shadow: 0 4px 10px rgba(160, 82, 45, 0.15); transform: translateY(-1px); } .plus-icon { font-size: 18px; font-weight: bold; /* L'icône prend automatiquement la couleur du texte (#A0522D) */ } /* ----------------- */ /* ----------------- */ .kid_avatar img {width:110px;} .ModeCreationWarning {border:solid 2px white;background-color:red;color:white;position:fixed;right:100px;top:50px;width:250px;height:50px;line-height:47px;font-weight:bold;font-size3em;border-radius:15px;text-align:center;vertical-align:middle;z-index:99999} .showMyDisabledCssPlease {border:solid 1px green;} #LOGWARNING {position:fixed;z-index:99999;left:700px;border-radius:7px;top:35px;padding-left:15px;padding-right:15px;padding-top:8px;padding-bottom:8px;font-family:courier;color:white;background-color:#000} #LOGWARNING a {color:white;} /* .field {width:100%} pour famille, bien réfélchir avant de le cganger pour aillerus !*/ .field {border: solid 1px #dfd6ea;border-radius:4px;} /* par defaut ???? padding-left:5px; */ .cadre1 {border:solid 1px red} .cadre2 {border:solid 1px #655095;border-radius:5px;background-color:#FBF9FF} .cadre3 {border: solid 1.5px #C5A07A; border-radius:15px;background-color:#FAF4E6;} .cadre4 {border:solid 1px #B6875D;border-radius:5px;background-color:#FAF1D8} .cadre5 {border: 1px solid #DFD1BE;border-radius: 12px; background-color: #F3EAE0; box-shadow: 0 4px 12px rgba(213, 192, 164, 0.15);padding: 16px;box-sizing: border-box;}/*beige clair fiche candidat "dernierere fiche consulté"*/ .cadre6_moderne {background-color: #FAF4E6; border: 1px solid #C5A07A; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 20px; } #bandoMenuMSGv2 {width:100%;background-color:#FFFDF9;height:32px} #PJAJAXMESSAGE {background-color:red;color:white;text-align:center;} .rouge {background-color:red;color:white;} .rougei {background-color:red !important;color:white !important;} #pano_img {cursor:zoom-in} /* background: linear-gradient(90deg, rgba(164,6,73,1) 0%, rgba(233,56,131,1) 7%, rgba(233,56,131,1) 91%, rgba(164,6,73,1) 100%); */ .configAlert, .alertIcone_info { width:calc(99% - 40px); background: linear-gradient(90deg, rgba(233,56,131,1) 0%, rgba(164,6,73,1) 7%, rgba(164,6,73,1) 91%, rgba(233,56,131,1) 100%); font-size:1em; padding-left:20px;padding-right:20px;font-weight:normal; margin-top:10px; margin-bottom:10px; color:white; background-repeat:no-repeat; position:relative; border-radius:15px; text-indent : 50px; } .configAlert {height:auto;line-height:1.2em;} .alertIcone_info {height:36px;line-height:34px;} .alertIcone_info img {position:absolute;left:22px;top:5px;height:26px} .pastille {position:absolute;top:0px;left:auto;width:25px !important;height:25px;} /* cf candidats.css pour le coté candidat oO !!! */ .pastilleBIG {position:absolute;top:0px;left:auto;width:50px !important;height:50px;} /* cf candidats.css pour le coté candidat oO !!! */ .pastilleEVAL {position:absolute;top:1px;left:30px;width:25px !important;height:25px;} /* .pastille {position:absolute;top:0px;right:30px;width:30px !important;height:30px;} */ .nonakemonster {padding:10px;} /* header dans le coprs sde page pour mettre le h1, des warnings...*/ .maj {text-transform:uppercase} .ucfirst {text-transform:capitalize} .ajaxmessageClass { width:90%; height:25px;line-height:26px;font-size:1.2em; font-weight:bold; margin-top:25px; margin-bottom:25px; color:white; position:relative; text-align:center; border-radius:15px; } .errormessage { background: linear-gradient(90deg, rgba(233,56,131,1) 0%, rgba(164,6,73,1) 7%, rgba(164,6,73,1) 91%, rgba(233,56,131,1) 100%); border-radius:7px; color:white; padding-right:20px; } .error { background: linear-gradient(90deg, rgba(233,56,131,1) 0%, rgba(164,6,73,1) 7%, rgba(164,6,73,1) 91%, rgba(233,56,131,1) 100%); color:white;height:28px;line-height:28px;padding-left:11px;padding-right:11px; } .errormessage_big, .errorpage { background: linear-gradient(90deg, rgba(233,56,131,1) 0%, rgba(164,6,73,1) 7%, rgba(164,6,73,1) 91%, rgba(233,56,131,1) 100%); border-radius:9px; color:white; padding:12px; } .errorpage a {color:white !important;text-decoration:underline} #ajaxmessage { width:fit-content; /* fit-content */ /* background: linear-gradient(90deg, rgba(233,56,131,1) 0%, rgba(164,6,73,1) 7%, rgba(164,6,73,1) 91%, rgba(233,56,131,1) 100%); */ height:25px;line-height:26px;font-size:12px; padding-right:1%;font-weight:bold; margin-bottom:0px; color:#333; background-repeat:no-repeat; position:relative; text-align:right; } #formmsg { width:90%; background: linear-gradient(90deg, rgba(233,56,131,1) 0%, rgba(164,6,73,1) 7%, rgba(164,6,73,1) 91%, rgba(233,56,131,1) 100%); height:25px;line-height:26px;font-size:1.2em; font-weight:bold; margin-top:25px; margin-bottom:25px; color:white; position:relative; text-align:center; border-radius:15px; visibility:hidden; } /* font-display: swap; unicode-range: U+000-5FF; font-display: swap; unicode-range: U+000-5FF; src: local('Noto Sans'),url('/font/NotoSans-Bold.woff') format('woff'); */ #logbody { /* background-image:url('/images/AgoraLoginv3.png');background-repeat:no-repeat;background-position:top right; */ background-color:#FFFDF9 !important; } /* background-image: url(/img/bando_agora_350px_login_TMP.png); */ #bandologin { background-image:url('/img/bando_agora_350px_login_TMP.png');background-repeat:no-repeat;background-position:bottom left; width:100%;height:25%; position:relative; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.25) } #flagiconbarreNOAUTH {position:absolute;right:10px;bottom:-32px} #bandoMince { background-repeat:no-repeat;background-position:bottom left; width:100%; background-image: url(/img/bando_agora_350px_login_TMP.png); position:relative; } #bandoNomEcole {font-style:normal;font-weight:bold;color:#222;font-size:24px;margin-top:11px;} .agora { width:calc(95% - 260px);; position:relative; left:260px;top:20%; font-style:italic; font-size: 12px; } #agoraBandoimg { width:100%; } #bandoBottomMince { background-image:url('/img/loginbottom_v2.jpg');background-repeat:no-repeat;background-position:center left; width:100%;height:20%; } #PJDISPLAYER {position:fixed;top:0px;left:0px;width:85%;margin-left:15%;height:100%;background-color:#222;color:white;text-align:center;z-index:2000;display:none} #pano_cartel {position:fixed;top:0px;left:0px;width:25%;height:100%;display:none;z-index:3000;background-color:white;overflow-y:auto;font-size:1.3em} /* #pano_cartel {position:fixed;top:0px;left:0px;width:10%;height:100%;display:none;z-index:3000;background-color:white;} */ /*#PJDISPLAYER {position:fixed;top:0px;left:0px;width:90%;margin-left:10%;height:100%;background-color:#222;color:white;text-align:center;z-index:2000;display:none} */ #bandoBottomLogin { background-image:url('/img/loginbottom_v2.jpg');background-repeat:no-repeat;background-position:center left; width:100%;height:32%; } /* ----------Formulaire avis ---------------------------------------------------- */ .avis_page { --creme: #FAF4E6; --papier: #FFFDF8; --encre: #25324D; --encre-douce: #5B6478; --trait: #DDD5C4; --trait-fort: #C4BAA3; background: var(--creme); padding: 32px 16px 48px; color: var(--encre); line-height: 1.45; } .avis_form { max-width: 760px; margin: 0 auto; } /* ---------- Titre du formulaire ---------- */ .avis_entete { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 2px solid var(--trait); } .avis_entete h1 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--encre); } .avis_candidature { margin: 0 0 16px; font-size: 1.1rem; color: var(--encre-douce); } .avis_candidature strong { font-weight: 700; color: var(--encre); } /* Établissement / Section */ .avis_infos { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--trait); border-radius: 8px; background: var(--papier); } .avis_infos dt { font-size: .85rem; color: var(--encre-douce); } .avis_infos dd { margin: 2px 0 0; font-weight: 600; color: var(--encre); } /* Texte modifiable par l'établissement */ .avis_message { padding-left: 14px; border-left: 3px solid var(--trait-fort); font-size: .95rem; line-height: 1.55; color: var(--encre-douce); } .avis_message p { margin: 0 0 8px; } .avis_message p:last-child { margin-bottom: 0; } /* ---------- Les deux blocs ---------- */ .avis_bloc { --accent: #25324D; /* bleu nuit : professeur principal */ background: var(--papier); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; margin-bottom: 24px; } .avis_bloc_chef { --accent: #235E63; /* teal : chef d'établissement */ } .avis_titre { margin: 0; padding: 14px 24px; background: var(--accent); color: #fff; font-size: 1.15rem; font-weight: 600; } .avis_contenu { padding: 20px 24px 24px; } /* ---------- Champs : nom + commentaire ---------- */ .avis_champ { margin-bottom: 20px; } .avis_champ:last-child { margin-bottom: 0; } .avis_champ > label, .avis_echelle > legend { display: block; margin-bottom: 6px; padding: 0; font-size: .95rem; font-weight: 600; color: var(--accent); } .avis_champ input[type="text"], .avis_champ textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--trait-fort); border-radius: 6px; background: #fff; font: inherit; color: var(--encre); } .avis_champ input[type="text"] { max-width: 380px; } .avis_champ textarea { min-height: 110px; resize: vertical; } .avis_champ input[type="text"]:focus, .avis_champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* ---------- Échelle d'avis (1 à 5) ---------- */ .avis_echelle { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; } .avis_choix { --teinte: #888; --fond: #F4F4F4; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; margin-bottom: 6px; padding: 10px 14px; border: 1px solid var(--trait); border-radius: 6px; background: #fff; cursor: pointer; transition: background-color .15s, border-color .15s; } .avis_choix:hover { border-color: var(--trait-fort); background: #FDFBF6; } .avis_choix input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--teinte); cursor: pointer; } .avis_choix_libelle { display: block; font-weight: 600; } .avis_choix_detail { display: block; margin-top: 2px; font-size: .875rem; color: var(--encre-douce); } /* Jauge à 5 segments : indique le niveau de l'avis d'un coup d'œil */ .avis_jauge { width: 52px; height: 6px; background: linear-gradient(to right, var(--teinte) calc(var(--niveau) * 11px), var(--trait) 0); -webkit-mask: repeating-linear-gradient(to right, #000 0 8px, transparent 8px 11px); mask: repeating-linear-gradient(to right, #000 0 8px, transparent 8px 11px); } /* Option cochée */ .avis_choix:has(input:checked) { border-color: var(--teinte); background: var(--fond); box-shadow: inset 0 0 0 1px var(--teinte); } /* Navigation clavier */ .avis_choix:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } /* Couleur par niveau */ .avis_choix_1 { --niveau: 1; --teinte: #C8553D; --fond: #FBEDE9; } /* Défavorable */ .avis_choix_2 { --niveau: 2; --teinte: #C98A12; --fond: #FCF3E0; } /* Réservé */ .avis_choix_3 { --niveau: 3; --teinte: #5E9272; --fond: #EDF4EF; } /* Favorable */ .avis_choix_4 { --niveau: 4; --teinte: #2F7A55; --fond: #E4F1EA; } /* Très favorable */ .avis_choix_5 { --niveau: 5; --teinte: #7B5EA7; --fond: #F0EBF7; } /* Exceptionnel */ /* ---------- Pied de formulaire ---------- */ .avis_fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border: 1px solid var(--trait); border-radius: 10px; background: var(--papier); } .avis_terminer { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; } .avis_terminer input { width: 18px; height: 18px; margin: 0; accent-color: var(--encre); } /* Bouton : classe BTN conservée, style limité à ce formulaire */ .avis_form .BTN { padding: 10px 28px; border: 0; border-radius: 6px; background: var(--encre); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .avis_form .BTN:hover { background: #1A2438; } .avis_form .BTN:focus-visible { outline: 3px solid #E0A526; outline-offset: 2px; } /* ---------- Mobile ---------- */ @media (max-width: 560px) { .avis_page { padding: 16px 8px 32px; } .avis_entete h1 { font-size: 1.35rem; } .avis_titre { padding: 12px 16px; } .avis_contenu { padding: 16px; } .avis_fin { padding: 16px; } .avis_form .BTN { width: 100%; } } @media (prefers-reduced-motion: reduce) { .avis_choix { transition: none; } } /* ------------- MISE EN PAGE GENERALE ------------- */ /* utiliser sur page avec menu gauche NE PAS MODIFIER */ #centrePostule, #centrePostule2C { font-size:1.5em;} #centrePostule { margin-left:calc(12% + 10px); width:calc(88% - 10px); /*padding:10px 10px 80px 10px; NON mettre un padder dedans */ background-color:transparent; clear:both; } /* bus candidature et tout... */ #centrePostule2C { width:100%; height: calc(100% - 20% - 34px); background-color:white; min-height:-webkit-fill-available; clear:both; position:absolute; /* fixe height 2025*/ } .centre_hauteur206020 {height:75%;} .centre_admin {height:calc(100% - 234px) !important;min-height:-webkit-fill-available;} .margehaut {margin-top :2%;} .margehaut3 {margin-top :3%;} /* -------------------------- */ #minilinklogin a {display:block;margin-bottom:5px;color:#655095} .sme: {color:red;} .neoadmin {padding:10px;font-size:12px;} .universalCenter {height:100%;overflow:auto} .warningDoIt {background-color:#F0E679;border-radius:8px;width:fit-content;padding-left:7px;padding-right:7px;padding-top:1px;padding-bottom:1px;} /*FFFC35*/ /** VERT CLAIR > #e9f3d3 > COMPL = ddd3f3 VERT "FONCE" > d5fe81 > COMPL = aa81fe background-image:linear-gradient(to right,#434142,#171415) */ /* button !!! */ button {cursor:pointer} .BTN { /* Alignement & Structure */ display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; /* Le juste milieu parfait de taille */ padding: 9px 16px; border-radius: 6px; /* Coins nets et professionnels */ /* Typographie */ font-family: 'Noto Sans', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #ffffff; line-height: 1; /* Base Violette opaque et solide (Ne bave pas sur ton fond #FAF4E6) */ background-color: #6E589F; border: 1px solid #5C4885; /* Dégradé flash (Invisible au repos, calé sur la droite) */ background-image: linear-gradient(135deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 70%); background-size: 300% 100%; background-position: 100% 0; /* Ombre technique fine */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor: pointer; user-select: none; backface-visibility: hidden; /* Transitions fluides */ transition: background-position 0.4s ease-in-out, transform 0.15s ease, box-shadow 0.15s ease; } /* --- ÉTATS D'INTERACTION --- */ /* Au survol : Un éclair de lumière propre balaie le bouton, sans changer la couleur de fond */ .BTN:hover { background-position: 0 0; /* Fait glisser le flash de gauche à droite */ transform: translateY(-1px); /* Légère élévation moderne */ box-shadow: 0 4px 8px rgba(110, 88, 159, 0.2); } /* Au clic : Enfoncement mécanique franc */ .BTN:active { transform: translateY(1px); background-color: #5C4885; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } .BTN:focus-visible { outline: 2px solid #6E589F; outline-offset: 2px; } /* Sécurité pour les liens à l'intérieur */ .BTN a, .BTN a:visited { color: #ffffff !important; text-decoration: none; display: block; } .BIGBTN {font-size:1.1em;text-transform:uppercase;padding:11px 15px;border-radius:7px;font-family:'Noto Sans';font-weight:bold;cursor:pointer;background-color:#655095;color:white;border:solid 0.3px rgba(68, 33, 147, 0.81);box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);} .BTN2 {box-shadow:5px 5px 5px #ccc;background-color:#fff;border-radius:7px} .BTN_grisatre {border-width:1px;text-transform:uppercase;padding:7px 11px;border-radius:7px;font-family:'Noto Sans';font-weight:normal;cursor:pointer;background-color:#F5EFFF;color:#444;border:solid 1px #DBC8FC;box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);} .buttonA {color:blue;} /* __________________ */ .desactivated {background-color:#888 !important;cursor: not-allowed !important;border: 0px !important;color: #ccc !important;} /*.cancelButton {background-color:rgba(177, 58, 61, 1) !important;color:white !important;border-color:rgba(177, 58, 61, 1) !important;border-radius:7px;} */ .BTN_ok { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-transform: uppercase; /* Format compact parfait pour un mot court */ padding: 6px 14px; border-radius: 20px; /* Style pilule moderne */ font-family: 'Noto Sans', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: #ffffff; line-height: 1; /* Un vert/menthe dynamique, parfait pour le sentiment de succès "OK" */ background-color: #10b981; border: 1px solid #059669; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2); cursor: pointer; user-select: none; transition: all 0.15s ease-in-out; } /* La petite coche "Check" en pur CSS, discrète et stable */ .BTN_ok::before { content: ""; display: inline-block; width: 4px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.2s ease; } /* --- INTERACTIONS --- */ .BTN_ok:hover { background-color: #059669; /* Vert un peu plus soutenu */ transform: scale(1.05); /* Un micro-zoom sympa pour un petit bouton */ box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35); } /* Petit effet : la coche sautille légèrement au survol */ .BTN_ok:hover::before { transform: rotate(45deg) scale(1.2) translate(-1px, -1px); } .BTN_ok:active { transform: scale(0.96); box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2); } .btn_manage { /* Un beau bleu classique pour la gestion/édition */ background-color: #007bff !important; color: #ffffff !important; border: 1px solid #007bff !important; /* Structure de base */ padding: 7px 7px; /* J'ai mis 10px au lieu de 15px pour gagner un peu de place dans le tableau */ font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 4px; letter-spacing: 0.3px; line-height: 1.2; /* Légèrement augmenté pour que le texte sur 2 lignes soit lisible */ display: inline-block; /* Animations fluides */ transition: background-color 0.1s ease-in-out, transform 0.01s cubic-bezier(0.175, 0.885, 0.32, 1.275); backface-visibility: hidden; transform: scale(1); /* 🛡️ PROTECTION SPÉCIALE TABLEAU 🛡️ */ max-width: 100%; white-space: normal; /* Autorise le passage à la ligne */ word-wrap: normal; /* Empêche de couper les mots au milieu */ word-break: normal; /* Empêche de couper les mots au milieu */ box-sizing: border-box; } /* Effet au survol : le bleu s'assombrit un peu et le bouton grossit */ .btn_manage:hover { background-color: #0056b3 !important; border-color: #004a99 !important; transform: scale(1.05); } /* Effet d'enfoncement au clic */ .btn_manage:active { transform: scale(0.95); } .cancelButton { background-color: #b13a3d !important; color: #ffffff !important; border: 1px solid #b13a3d !important; padding: 7px 15px; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 4px; /* Priorité à cet arrondi plus moderne */ letter-spacing: 0.3px; line-height: 1; display: inline-block; /* MISE À JOUR : On remplace transform par scale dans la transition */ transition: background-color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* On stabilise le rendu pour éviter le flou pendant le zoom */ backface-visibility: hidden; transform: scale(1); } .btn_delete_bus { /* Un rouge plus vif pour souligner l'action de suppression */ background-color: #dc3545 !important; color: #ffffff !important; border: 1px solid #dc3545 !important; /* Structure identique à votre cancelButton pour garder l'harmonie */ padding: 7px 7px; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 4px; letter-spacing: 0.3px; line-height: 1; display: inline-block; margin-bottom:5px; /* Vos animations fluides */ transition: background-color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); backface-visibility: hidden; transform: scale(1); } /* Effet au passage de la souris (la couleur s'assombrit un peu et le bouton grossit très légèrement) */ .btn_delete_bus:hover { background-color: #c82333 !important; border-color: #bd2130 !important; transform: scale(1.05); } /* Effet d'enfoncement lors du clic */ .btn_delete_bus:active { transform: scale(0.95); } .btn_delete_bus{ max-width: 100%; white-space: normal; /* Autorise le retour à la ligne aux espaces */ word-wrap: normal; /* Empêche de couper un mot en plein milieu */ word-break: normal; /* Empêche de couper un mot en plein milieu */ box-sizing: border-box; } .btn_unaffect { /* Orange d'avertissement */ background-color: #fd7e14 !important; color: #ffffff !important; border: 1px solid #fd7e14 !important; /* Même structure que vos autres boutons */ padding: 7px 7px; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 4px; letter-spacing: 0.3px; line-height: 1; display: inline-block; /* Vos animations fluides */ transition: background-color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); backface-visibility: hidden; transform: scale(1); } /* Effet au survol : l'orange s'assombrit un peu et le bouton grossit */ .btn_unaffect:hover { background-color: #e86e04 !important; border-color: #dc6502 !important; transform: scale(1.05); } /* Effet d'enfoncement au clic */ .btn_unaffect:active { transform: scale(0.95); } .btn_unaffect{ max-width: 100%; white-space: normal; /* Autorise le retour à la ligne aux espaces */ word-wrap: normal; /* Empêche de couper un mot en plein milieu */ word-break: normal; /* Empêche de couper un mot en plein milieu */ box-sizing: border-box; } /* Effet au survol : Zoom + Changement de couleur */ .cancelButton:hover { background-color: #962d30 !important; border-color: #962d30 !important; /* On applique le zoom ici (1.1 pour un zoom visible mais propre) */ transform: scale(1.1); /* Optionnel : petite ombre pour renforcer l'effet de zoom */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Effet au clic : On réduit un peu pour l'effet "pression" */ .cancelButton:active { transform: scale(0.95); } .miniButton {font-size:0.8em;padding:2px 6px;border-radius:7px;box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);} /* used where */ .orangeButton { background-color:#DA922A;color:white;border-color:rgba(177, 58, 61, 1); font-size:0.7em;font-family:'Noto Sans';font-weight:normal;text-transform:uppercase; padding:7px 11px;border-radius:7px;cursor:pointer;border:solid 0.3px;box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25); } .bandoButton {font-size:1em;padding:2px 6px;border-radius:7px;background-size: 15px;} .img100 img {width:-moz-available;width:-webkit-fill-available} .maxH {height: 100%;min-height: -moz-available;height:-webkit-fill-available;} #incorps {width:92%;padding-left:4%;padding-top:4%;} .faketable { display: table; table-layout: fixed; width: 100%; } .faketable2 { display: table; table-layout: fixed; border-collapse:collapse; } .fakeTR {display:table-row;} .fakeTD {display:table-cell;vertical-align:top;} /* laisser vertical-align top ici */ /* ------------------------------ onglet 2022 */ .onglet {width:100%;height:calc(100% - 50px);background-color:#FEF9E3;overflow:auto;} #ongletselector {width:100%;height:28px;padding-top:0px; padding-top: 5px;} .intercalaire { width:150px;height:22px; border-top-left-radius: 7px; border-top-right-radius: 7px; cursor:pointer; font-weight:bold;color:white; margin-left:5px;margin-right:7px; border-color:#444;border-width:1px; background:linear-gradient(340deg,#CFD3D6,#9BA0A3); float:left; padding-top:6px; text-align:center; font-size:16px; } .interCurrent {background:#AB5D96 !important;} /* background:linear-gradient(340deg,#3B7AA8,#A1BFD5) */ section {} /* ------------------------------ */ /* ------------------------------ */ /* ------------------------------ */ /* ------------------------------ */ #logzone {float:right;padding-right:2%} .page {width:100%;text-align:center;} .corps{;margin-left:auto;margin-right:auto;width:100%;position:relative;text-align:left; background-repeat:no-repeat;background-position:0px 120px;} #banTitles span {font-weight:normal;color:#EEEEEE;font-size:26px;} #banTitles { background-image:url(/img/corps_bloc.png); width:100%;height:51px;line-height:51px;text-align:right;font-weight:normal;left:300px;color:#EB7C00;font-size:16px;font-family:arial;letter-spacing:1px; } #avatar {float:right;height:46px;padding-top:5px;margin-right:1%} /* ------------------------------ */ .formH1 {font-weight:bold;font-size: 1.7em; display: block; margin-top: 7px; margin-bottom: 7px; } .puce { padding-left:25px; background-image:url(/img/fleche-rouge.gif); background-repeat:no-repeat; background-position:2px 0px; font-size:12px; } #menuiconbarre {height:28px;width:140px} #flagiconbarre {padding-right:44px} #connectedWith {float:left;text-align:left;text-indent:30px;width:30%;line-height:28px;} /* ------------------------------ MENU ----------------------- */ #homelink a:hover {color:#AB5D96;} #navfui2022 {width:calc(100% - 21px);height:28px;background-color:#DDD3AA ;padding-top: 4px;padding-left: 20px;} /*#FFF5CC*/ #navfui2022_admin {width:100%;height:28px;background-color:#DDD3AA;padding-top: 4px;padding-left: 20px;border-bottom: 2px solid rgba(255, 255, 255, 0.4);} #navfui2022 img, #navfui2022_admin img {height:25px;margin-right:7px;} #menuname {float:left;line-height:27px} #bandoLogo {margin-left:2%;height:46px;width:45px;padding:5px;float:left;} #bandoLogo img {width:100%;} #menu{float:left;margin-left:2%;height:51px;line-height:51px;font-weight:bold;} .link{padding-left:5px;padding-right:5px;font-size:12px;font-weight:normal;} .link input {height:12px;font-size:11px;} .link a {text-decoration:none;font-weight:normal;padding-left:3px;padding-right:3px; font-size:16px;} /* .link a:link {color:#BC2722} */ .link a:hover {color:#AB5D96;} .redlink a {color:red;} #footermenubox {width:100%;text-align:center;} #menufooter {margin-left:auto;margin-right:auto;text-align:left;height:12px;line-height:12px;font-weight:normal;} #menuwidther{} #cadrePhoto {width:60px;height:90px;background-color:gray;border:solid 1px #555555;} #fastIntelBarre {width:100%;font-size:11px;line-height:18px;height:18px;background-color:#777777;color:white;display:none;position:relative;} #backToPageInCorps {position:absolute;right:10%;top:0px;cursor:pointer;} .debug {background-color:black;color:white;font-family:courier;padding:5%;width:fit-content;border-radius:12px;font-size:11px;display:none} .debug table {border:solid 1px white;border-collapse:collapse;} .debug table td {border:solid 1px white;} .debug table th {border:solid 1px white;padding-top:5px;padding-bottom:5px;background-color:#555;} .checker {float:left;width:100px;} .stayInCell {width:80% !important;text-align:center} /* Query */ #boutonsSearchBarre{width:100%;height:25px;padding:5px;} #GO {font-weight:bold;color:inherit;} /* planning css a mettre ailleurs ??? */ .ACT_1 {background-color:#2A6BCD;color:#FFFFFF} .ACT_2 {background-color:#DEFF00;color:#000000} .ACT_3 {background-color:#00B600;color:#FFFFFF} .ACT_4 {background-color:#650394;color:#FFFFFF} .ACT_5 {background-color:#1E5748;color:#FFFFFF} .ACT_6 {background-color:#00018B;color:#FFFFFF} .ACT_7 {background-color:#00DBD5;color:#000000} .ACT_8 {background-color:#00ED44;color:#000000} .ACT_9 {background-color:#C657D6;color:#FFFFFF} .ACT_10 {background-color:#878787;color:#000000} .ACT_11 {background-color:#AE751E;color:#FFFFFF} .ACT_12 {background-color:#00BF91;color:#FFFFFF} .ACT_13 {background-color:#F2FF23;color:#000000} .ACT_14 {background-color:#D63B82;color:#FFFFFF} .ACT_15 {background-color:#E62E27;color:#FFFFFF} .ACT_16 {background-color:#FF0D0F;color:#FFFFFF} .ACT_17 {background-color:#FF4298;color:#000000} .ACT_18 {background-color:#FFCE84;color:#000000} .ACT_19 {background-color:#FF9500;color:#FFFFFF} .ACT_PAT1 {background-image:url('/img/pattern/rayure_GJ v1.png');}