/* ============================================================ Halles Victoria - feuille de style unique (responsive) ============================================================ */ :root{ /* --- Charte Halles Victoria (couleurs relevees sur le logo) --- */ --hv-bleu:#afdcf1; --hv-violet:#b39cea; --hv-orange:#ff6600; --hv-vert:#01cd76; /* Couleur d'action principale = orange de la charte (les variables gardent leurs anciens noms pour ne rien casser) */ --bordeaux:#ff6600; --bordeaux-fonce:#dd5500; --bordeaux-clair:#ff8533; --or:#b39cea; --sombre:#17161a; /* barres de navigation */ --creme:#fbf9f6; --encre:#1d1b1a; --gris:#6b6663; --gris-clair:#e7e2dc; --gris-fond:#f4f1ec; --blanc:#fff; --vert:#177245; --vert-fond:#e6f4ec; --orange:#b45309; --orange-fond:#fdf1e0; --rouge:#b91c1c; --rouge-fond:#fdeaea; --bleu:#1d4ed8; --bleu-fond:#e8effd; --rayon:12px; --rayon-sm:8px; --ombre:0 1px 2px rgba(29,27,26,.06), 0 8px 24px rgba(29,27,26,.06); --ombre-forte:0 12px 40px rgba(29,27,26,.16); --police:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; } *,*::before,*::after{box-sizing:border-box} /* ------------------------------------------------------------ Taille d'affichage reglable par l'utilisateur. Presque toute la feuille est en rem et en em : changer la taille de reference sur agrandit l'interface entiere, textes, boutons, champs et espacements compris. ------------------------------------------------------------ */ html{--base:100%;--zoom:1;font-size:calc(var(--base) * var(--zoom));-webkit-text-size-adjust:100%} html[data-zoom="2"]{--zoom:1.15} html[data-zoom="3"]{--zoom:1.32} html[data-zoom="4"]{--zoom:1.5} body{margin:0;font-family:var(--police);color:var(--encre);background:var(--gris-fond);font-size:1rem;line-height:1.55} img{max-width:100%;display:block} a{color:var(--bordeaux);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;font-weight:650} h1{font-size:1.55rem} h2{font-size:1.2rem} h3{font-size:1.02rem} p{margin:0 0 1em} small{font-size:.82em} code{background:var(--gris-clair);padding:.1em .4em;border-radius:4px;font-size:.9em} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:999} .ic{width:19px;height:19px;flex:0 0 19px} /* ---------- Boutons ---------- */ .btn{display:inline-flex;align-items:center;gap:.45em;justify-content:center; padding:.62em 1.05em;border-radius:var(--rayon-sm);border:1px solid transparent; font:inherit;font-weight:600;cursor:pointer;text-decoration:none!important; transition:.15s ease;white-space:nowrap;line-height:1.2} .btn:hover{transform:translateY(-1px)} .btn:active{transform:none} .btn-primaire{background:var(--bordeaux);color:#fff} .btn-primaire:hover{background:var(--bordeaux-fonce)} .btn-clair{background:#fff;color:var(--bordeaux);border-color:var(--gris-clair)} .btn-clair:hover{border-color:var(--bordeaux)} .btn-fantome{background:transparent;color:var(--gris);border-color:var(--gris-clair)} .btn-fantome:hover{color:var(--encre);border-color:var(--gris)} .btn-danger{background:var(--rouge);color:#fff} .btn-succes{background:var(--vert);color:#fff} .btn-sm{padding:.38em .7em;font-size:.85rem} .btn-bloc{width:100%} .btn[disabled]{opacity:.5;pointer-events:none} /* ---------- Badges & alertes ---------- */ .badge{display:inline-block;padding:.18em .6em;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap} .badge-vert{background:var(--vert-fond);color:var(--vert)} .badge-orange{background:var(--orange-fond);color:var(--orange)} .badge-rouge{background:var(--rouge-fond);color:var(--rouge)} .badge-bleu{background:var(--bleu-fond);color:var(--bleu)} .badge-gris{background:var(--gris-clair);color:var(--gris)} /* le violet de la charte, pour le role bailleur */ .badge-violet{background:#efeafb;color:#5b3fa8} /* le mot cherche, surligne dans les resultats */ mark{background:#ffe9b3;color:inherit;padding:0 .12em;border-radius:3px} .badge-pt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.4em;vertical-align:middle} .alerte{padding:.8em 1em;border-radius:var(--rayon-sm);margin:0 0 1em;border-left:4px solid} .alerte-ok,.alerte-vert{background:var(--vert-fond);border-color:var(--vert);color:#0f5132} .alerte-orange{background:var(--orange-fond);border-color:var(--orange);color:#7c4a03} .alerte-rouge{background:var(--rouge-fond);border-color:var(--rouge);color:#7f1d1d} .alerte-bleu,.alerte-info{background:var(--bleu-fond);border-color:var(--bleu);color:#1e3a8a} .liste-check{margin:0 0 1em;padding-left:1.2em} .liste-check li{margin:.2em 0;color:var(--gris)} /* ---------- Marque et logo ---------- */ .marque{display:flex;align-items:center;gap:.7em;text-decoration:none!important;color:inherit;min-width:0} .marque-pastille{width:38px;height:38px;flex:0 0 38px;display:block} .marque-pastille img{width:100%;height:100%;object-fit:contain} .marque-txt{display:flex;flex-direction:column;font-weight:700;line-height:1.15;min-width:0} .marque-txt small{font-weight:500;opacity:.7;font-size:.72rem} /* logo complet */ .logo{display:block;height:auto} .logo-sm{max-height:34px;width:auto} .logo-md{max-height:52px;width:auto} .logo-lg{max-height:78px;width:auto} .logo-centre{margin:0 auto} /* filet aux 4 couleurs de la charte, sous les barres de navigation */ .bande-hv{height:4px;display:flex;flex:0 0 4px} .bande-hv span{flex:1} .bande-hv span:nth-child(1){background:var(--hv-bleu)} .bande-hv span:nth-child(2){background:var(--hv-violet)} .bande-hv span:nth-child(3){background:var(--hv-orange)} .bande-hv span:nth-child(4){background:var(--hv-vert)} /* ============================================================ APPLICATION (admin / espace) ============================================================ */ .topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:.9em; padding:.6em 1em;background:var(--sombre);color:#fff;box-shadow:var(--ombre); padding-left:max(1em, env(safe-area-inset-left)); padding-right:max(1em, env(safe-area-inset-right))} /* en mode application installee, on laisse respirer le bas de l'ecran */ @media (display-mode: standalone){ .contenu{padding-bottom:calc(3em + env(safe-area-inset-bottom))} .pub-contenu{padding-bottom:calc(2.4em + env(safe-area-inset-bottom))} } .topbar-wrap{position:sticky;top:0;z-index:60} .topbar a{color:#fff} .topbar-droite{margin-left:auto;display:flex;align-items:center;gap:1em} .lien-discret{opacity:.85;font-size:.86rem} .lien-discret:hover{opacity:1} .compte{display:flex;align-items:center;gap:.55em} .avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2); display:grid;place-items:center;font-weight:700;text-transform:uppercase;font-size:.9rem} .compte-nom{font-size:.88rem;font-weight:600} .burger{display:none;background:none;border:0;padding:6px;cursor:pointer;flex-direction:column;gap:4px} .burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s} .burger.ouvert span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger.ouvert span:nth-child(2){opacity:0} .burger.ouvert span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .shell{display:flex;align-items:flex-start;min-height:calc(100vh - 52px)} .rail{position:sticky;top:52px;flex:0 0 226px;width:226px;height:calc(100vh - 52px);overflow:auto; background:#fff;border-right:1px solid var(--gris-clair);padding:.9em .7em;display:flex;flex-direction:column;gap:2px} .rail-lien{display:flex;align-items:center;gap:.7em;padding:.62em .8em;border-radius:var(--rayon-sm); color:var(--gris);font-weight:600;font-size:.92rem;text-decoration:none!important} .rail-lien:hover{background:var(--gris-fond);color:var(--encre)} .rail-lien.actif{background:var(--bordeaux);color:#fff} .rail-sep{height:1px;background:var(--gris-clair);margin:.6em .4em} .contenu{flex:1;min-width:0;padding:1.4em 1.6em 3em} .entete-page{display:flex;align-items:center;gap:1em;flex-wrap:wrap;margin-bottom:1.2em} .entete-page h1{margin:0;flex:1;min-width:200px} .entete-actions{display:flex;gap:.5em;flex-wrap:wrap} /* ---------- Cartes / grilles ---------- */ .carte{background:#fff;border:1px solid var(--gris-clair);border-radius:var(--rayon); padding:1.1em 1.2em;box-shadow:var(--ombre);margin-bottom:1.2em} .carte>h2:first-child,.carte>h3:first-child{margin-top:0} .carte-titre{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;margin-bottom:.9em} .carte-titre h2,.carte-titre h3{margin:0;flex:1} .grille{display:grid;gap:1em} .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))} .kpi{background:#fff;border:1px solid var(--gris-clair);border-radius:var(--rayon);padding:1em 1.1em;box-shadow:var(--ombre)} .kpi-lib{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);font-weight:700} .kpi-val{font-size:1.7rem;font-weight:750;margin:.15em 0 0;line-height:1.1} .kpi-sub{font-size:.82rem;color:var(--gris)} .kpi-bordeaux{border-top:3px solid var(--bordeaux)} .kpi-or{border-top:3px solid var(--or)} .kpi-vert{border-top:3px solid var(--vert)} .kpi-orange{border-top:3px solid var(--orange)} .kpi-violet{border-top:3px solid #b39cea} /* ---------- Tableaux ---------- */ .tableau-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.3em} table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px} table.tbl th,table.tbl td{padding:.6em .65em;text-align:left;border-bottom:1px solid var(--gris-clair);vertical-align:middle} table.tbl th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gris); font-weight:700;background:var(--gris-fond);position:sticky;top:0} table.tbl tbody tr:hover{background:#fcfaf7} table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} table.tbl tfoot td{font-weight:700;background:var(--gris-fond);border-top:2px solid var(--gris-clair)} .vide{padding:2.2em 1em;text-align:center;color:var(--gris)} .vide svg{opacity:.35;margin:0 auto .6em} /* ---------- Formulaires ---------- */ label{display:block;font-weight:600;font-size:.86rem;margin-bottom:.9em;color:#3c3835} label>input,label>select,label>textarea{margin-top:.3em} input[type=text],input[type=email],input[type=password],input[type=number],input[type=date], input[type=datetime-local],input[type=month],input[type=url],input[type=search],input[type=time], select,textarea{ width:100%;padding:.58em .7em;border:1px solid var(--gris-clair);border-radius:var(--rayon-sm); font:inherit;font-weight:400;background:#fff;color:var(--encre)} input:focus,select:focus,textarea:focus{outline:2px solid rgba(124,29,58,.35);outline-offset:1px;border-color:var(--bordeaux)} textarea{min-height:96px;resize:vertical} input[type=color]{width:52px;height:38px;padding:2px;border:1px solid var(--gris-clair);border-radius:var(--rayon-sm);background:#fff} input[type=file]{width:100%;font-size:.88rem} .form-grille{display:grid;gap:0 1em;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .form-grille .pleine{grid-column:1/-1} .form-actions{display:flex;gap:.6em;flex-wrap:wrap;margin-top:.6em;padding-top:1em;border-top:1px solid var(--gris-clair)} .aide{font-weight:400;color:var(--gris);font-size:.8rem;display:block;margin-top:.25em} .case{display:flex;align-items:center;gap:.55em;font-weight:600;margin-bottom:.7em} .case input{width:17px;height:17px;margin:0;flex:0 0 17px} fieldset{border:1px solid var(--gris-clair);border-radius:var(--rayon-sm);padding:.9em 1em;margin:0 0 1em} legend{font-weight:700;font-size:.86rem;padding:0 .4em} .barre-filtres{display:flex;gap:.6em;flex-wrap:wrap;align-items:flex-end;margin-bottom:1em; background:#fff;border:1px solid var(--gris-clair);border-radius:var(--rayon);padding:.9em 1em} .barre-filtres label{margin:0;min-width:135px;flex:1 1 135px} .barre-filtres .btn{margin-bottom:1px} /* ---------- Onglets ---------- */ .onglets{display:flex;gap:.3em;border-bottom:2px solid var(--gris-clair);margin-bottom:1.2em;overflow-x:auto} .onglets a{padding:.6em .95em;font-weight:650;color:var(--gris);border-bottom:2px solid transparent; margin-bottom:-2px;white-space:nowrap;text-decoration:none!important} .onglets a.actif{color:var(--bordeaux);border-color:var(--bordeaux)} /* ============================================================ CALENDRIER ============================================================ */ .cal-nav{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;margin-bottom:1em} .cal-mois{font-size:1.25rem;font-weight:750;text-transform:capitalize;flex:1;min-width:180px} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--gris-clair); border:1px solid var(--gris-clair);border-radius:var(--rayon);overflow:hidden} .cal-jour-nom{background:var(--gris-fond);padding:.55em .3em;text-align:center;font-size:.74rem; font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gris)} .cal-case{background:#fff;min-height:112px;padding:.35em;display:flex;flex-direction:column;gap:3px} .cal-case.hors{background:#faf8f5} .cal-case.hors .cal-num{opacity:.35} .cal-case.aujourdhui{background:#fffaf0;box-shadow:inset 0 0 0 2px var(--or)} .cal-num{font-size:.8rem;font-weight:700;color:var(--gris);text-align:right;padding:0 .15em} .cal-ev{display:block;font-size:.74rem;line-height:1.25;padding:.22em .38em;border-radius:5px; background:var(--bordeaux);color:#fff!important;text-decoration:none!important; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid rgba(0,0,0,.2)} .cal-ev:hover{filter:brightness(1.12)} .cal-ev.attente{background:var(--orange)} .cal-ev-h{opacity:.85;font-weight:700;margin-right:.25em} .cal-plus{font-size:.7rem;color:var(--gris);text-align:center} /* ---------- Liste d'evenements ---------- */ .ev-liste{display:grid;gap:1em;grid-template-columns:repeat(auto-fill,minmax(285px,1fr))} .ev-carte{background:#fff;border:1px solid var(--gris-clair);border-radius:var(--rayon); overflow:hidden;box-shadow:var(--ombre);display:flex;flex-direction:column;transition:.18s} .ev-carte:hover{box-shadow:var(--ombre-forte);transform:translateY(-2px)} .ev-photo{aspect-ratio:16/9;background:var(--gris-clair) center/cover no-repeat;position:relative} .ev-photo-vide{display:grid;place-items:center;background:var(--sombre);color:rgba(255,255,255,.55); background-image: radial-gradient(circle at 20% 25%, rgba(175,220,241,.35), transparent 55%), radial-gradient(circle at 80% 30%, rgba(179,156,234,.35), transparent 55%), radial-gradient(circle at 30% 85%, rgba(255,102,0,.30), transparent 55%), radial-gradient(circle at 82% 82%, rgba(1,205,118,.30), transparent 55%)} .ev-photo-vide img{max-height:56%;max-width:66%;opacity:.95} .ev-date-pastille{position:absolute;top:10px;left:10px;background:#fff;border-radius:9px; padding:.3em .55em;text-align:center;line-height:1;box-shadow:var(--ombre)} .ev-date-pastille b{display:block;font-size:1.15rem} .ev-date-pastille span{font-size:.66rem;text-transform:uppercase;color:var(--gris);font-weight:700} /* Le jour de la semaine, au-dessus du quantieme */ .ev-date-pastille i{display:block;font-style:normal;font-size:.62rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em;color:var(--orange);margin-bottom:.15em} .ev-corps{padding:.85em 1em 1em;flex:1;display:flex;flex-direction:column;gap:.4em} .ev-corps h3{margin:0;font-size:1.02rem} .ev-meta{font-size:.82rem;color:var(--gris);display:flex;gap:.8em;flex-wrap:wrap} .ev-desc{font-size:.88rem;color:#4a4643;margin:0;flex:1} .ev-pied{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;padding-top:.5em;border-top:1px solid var(--gris-clair)} .ev-cout{font-weight:750;color:var(--bordeaux)} /* ============================================================ PAGES PUBLIQUES ============================================================ */ body.public{background:var(--creme)} .pub-top{display:flex;align-items:center;gap:1em;flex-wrap:wrap;padding:.8em 1.4em; background:#fff;color:var(--encre);position:sticky;top:0;z-index:50; box-shadow:0 1px 0 var(--gris-clair); border-bottom:4px solid transparent; border-image:linear-gradient(90deg,var(--hv-bleu) 0 25%,var(--hv-violet) 25% 50%,var(--hv-orange) 50% 75%,var(--hv-vert) 75% 100%) 1} .pub-top a{color:var(--encre)} .pub-top .logo{max-height:44px;width:auto} .pub-nav{margin-left:auto;display:flex;align-items:center;gap:1.1em;font-weight:600;font-size:.92rem} .pub-nav a.actif{border-bottom:2px solid var(--hv-orange)} .pub-contenu{max-width:1180px;margin:0 auto;padding:1.6em 1.2em 3em} .pub-pied{border-top:1px solid var(--gris-clair);padding:1.6em 1.4em;text-align:center;color:var(--gris); font-size:.86rem;display:flex;gap:1em;align-items:center;justify-content:center;flex-wrap:wrap} .pub-pied .logo{max-height:38px;width:auto;opacity:.9} .hero{background:var(--sombre);color:#fff;position:relative;overflow:hidden; border-radius:var(--rayon);padding:1.9em 1.7em;margin-bottom:1.6em; background-image: radial-gradient(circle at 8% 20%, rgba(175,220,241,.30), transparent 42%), radial-gradient(circle at 92% 12%, rgba(179,156,234,.30), transparent 42%), radial-gradient(circle at 78% 92%, rgba(1,205,118,.26), transparent 42%), radial-gradient(circle at 25% 96%, rgba(255,102,0,.26), transparent 42%)} .hero h1{margin:0 0 .3em;font-size:1.9rem} .hero p{margin:0;opacity:.92;max-width:60ch} .hero .logo{margin-bottom:1em} .fiche-ev{background:#fff;border:1px solid var(--gris-clair);border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)} .fiche-ev-photo{width:100%;max-height:420px;object-fit:cover} .fiche-ev-corps{padding:1.5em 1.6em 2em} /* ============================================================ CONNEXION ============================================================ */ body.page-auth{background:var(--sombre);min-height:100vh;display:grid;place-items:center;padding:1.5em; background-image: radial-gradient(circle at 12% 18%, rgba(175,220,241,.22), transparent 45%), radial-gradient(circle at 88% 14%, rgba(179,156,234,.22), transparent 45%), radial-gradient(circle at 18% 88%, rgba(255,102,0,.20), transparent 45%), radial-gradient(circle at 85% 85%, rgba(1,205,118,.20), transparent 45%)} .carte-auth{background:#fff;border-radius:18px;padding:2em;width:100%;max-width:400px;box-shadow:var(--ombre-forte); border-top:5px solid transparent; border-image:linear-gradient(90deg,var(--hv-bleu) 0 25%,var(--hv-violet) 25% 50%,var(--hv-orange) 50% 75%,var(--hv-vert) 75% 100%) 1} .carte-auth h1{font-size:1.35rem;text-align:center} .carte-auth .marque{justify-content:center;margin-bottom:1.2em} .carte-auth .logo{margin:0 auto 1.4em} /* ============================================================ MEDIATHEQUE ============================================================ */ .media-grille{display:grid;gap:.8em;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .media-vignette{position:relative;border-radius:var(--rayon-sm);overflow:hidden;background:#000; border:1px solid var(--gris-clair);aspect-ratio:1} .media-vignette img,.media-vignette video{width:100%;height:100%;object-fit:cover} .media-vignette figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.8)); color:#fff;font-size:.72rem;padding:1.4em .5em .4em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .media-badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.65);color:#fff; font-size:.66rem;padding:.15em .45em;border-radius:4px;font-weight:700;text-transform:uppercase} .media-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px} .media-actions button,.media-actions a{background:rgba(0,0,0,.65);color:#fff;border:0;border-radius:4px; padding:.2em .4em;font-size:.7rem;cursor:pointer;line-height:1.4} .zone-depot{border:2px dashed var(--gris-clair);border-radius:var(--rayon);padding:2em 1em;text-align:center; color:var(--gris);background:#fff;transition:.15s} .zone-depot.survol{border-color:var(--bordeaux);background:#fff7f0;color:var(--bordeaux)} /* ============================================================ EDITEUR D'ECRANS ============================================================ */ .zones-editeur{display:grid;gap:1em;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .zone-bloc{border:1px solid var(--gris-clair);border-radius:var(--rayon-sm);padding:.85em;background:var(--gris-fond)} .zone-bloc h4{margin:0 0 .6em;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gris)} .apercu-ecran{background:var(--sombre);border-radius:var(--rayon-sm);padding:6px;display:grid;gap:6px; aspect-ratio:16/9;margin:0 auto 1em;width:100%} .apercu-ecran.portrait{aspect-ratio:9/16;max-width:300px} .apercu-zone{background:rgba(255,255,255,.10);border:1px dashed rgba(255,255,255,.28);border-radius:6px; color:#fff;font-size:.72rem;line-height:1.3;display:grid;place-items:center;text-align:center; padding:.35em;overflow:hidden;cursor:pointer;transition:.15s} .apercu-zone:hover{background:rgba(255,102,0,.35);border-color:var(--hv-orange);border-style:solid} .apercu-zone b{font-size:.95rem;opacity:.55} .apercu-zone i{opacity:.7;font-size:.68rem} .apercu-zone span{max-width:100%;overflow:hidden} /* ============================================================ IMPRESSION (factures, comptes rendus) ============================================================ */ .doc{background:#fff;max-width:820px;margin:0 auto;padding:2.4em 2.6em;box-shadow:var(--ombre);border-radius:var(--rayon)} .doc-logo{max-height:62px;width:auto;margin-bottom:1.2em} .doc-entete{display:flex;justify-content:space-between;gap:2em;flex-wrap:wrap;margin-bottom:2em; padding-bottom:1.2em;border-bottom:4px solid transparent; border-image:linear-gradient(90deg,var(--hv-bleu) 0 25%,var(--hv-violet) 25% 50%,var(--hv-orange) 50% 75%,var(--hv-vert) 75% 100%) 1} .doc-titre{font-size:1.7rem;font-weight:750;color:var(--bordeaux);margin:0} .doc-bloc{font-size:.88rem;line-height:1.6} .doc-bloc strong{display:block;font-size:.98rem} .doc table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.9rem} .doc table th{background:var(--gris-fond);text-align:left;padding:.55em .6em;border-bottom:2px solid var(--gris-clair);font-size:.78rem;text-transform:uppercase;color:var(--gris)} .doc table td{padding:.55em .6em;border-bottom:1px solid var(--gris-clair)} .doc table td.num{text-align:right;font-variant-numeric:tabular-nums} .doc-totaux{margin-left:auto;width:min(320px,100%)} .doc-totaux tr td:first-child{color:var(--gris)} .doc-total-final td{font-size:1.1rem;font-weight:750;color:var(--bordeaux);border-top:2px solid var(--bordeaux)!important} .doc-pied{margin-top:2.4em;padding-top:1em;border-top:1px solid var(--gris-clair);font-size:.78rem;color:var(--gris)} .cr-point{border-left:3px solid var(--bordeaux);padding:.2em 0 .8em 1em;margin-bottom:1.4em} .cr-point h3{margin:0 0 .35em;color:var(--bordeaux)} .cr-etiq{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--gris);margin-top:.7em} @media print{ body{background:#fff} .topbar,.rail,.entete-actions,.no-print,.pub-top,.pub-pied{display:none!important} .contenu{padding:0} .doc{box-shadow:none;max-width:none;padding:0;border-radius:0} .shell{display:block} a{color:inherit;text-decoration:none} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1024px){ .contenu{padding:1.2em 1em 3em} .rail{flex:0 0 190px;width:190px} } @media (max-width:820px){ .burger{display:flex} .rail{position:fixed;top:52px;left:0;bottom:0;width:246px;flex:none;z-index:70; transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--ombre-forte);height:auto} .rail.ouvert{transform:none} .voile{position:fixed;inset:52px 0 0;background:rgba(0,0,0,.4);z-index:65;display:none} .voile.actif{display:block} .compte-nom{display:none} .contenu{padding:1em .85em 3em} h1{font-size:1.3rem} .cal-case{min-height:74px;padding:.2em} .cal-ev{font-size:.65rem;padding:.15em .25em} .cal-ev-h{display:none} .cal-jour-nom{font-size:.62rem;padding:.4em .1em} .doc{padding:1.2em} } @media (max-width:560px){ body{font-size:14.5px} .pub-contenu{padding:1em .8em 2.4em} .hero{padding:1.3em 1.1em} .hero h1{font-size:1.45rem} .form-grille{grid-template-columns:1fr} .kpi-val{font-size:1.4rem} .entete-page h1{min-width:0} .cal-case{min-height:58px} .cal-num{font-size:.7rem} .marque-txt small{display:none} .barre-filtres{padding:.7em} .doc-entete{flex-direction:column;gap:1em} } /* ============================================================ MODE APPLICATION — telephone Le site a ete dessine pour un ecran large. Sur mobile, on ne se contente pas de retrecir : on repense la densite, les cibles tactiles et la navigation. ============================================================ */ /* --- Barre d'onglets du bas, l'element le plus "application" --- */ .nav-bas{display:none} @media (max-width:820px){ /* ---------- Lisibilite ---------- */ /* 118 % de 16 px = 19 px de base, avant meme le reglage utilisateur */ html{--base:118%} h1{font-size:1.5rem} h2{font-size:1.22rem} h3{font-size:1.06rem} .contenu{padding:1em .9em calc(6.8em + env(safe-area-inset-bottom))} .carte{padding:1.1em 1em;border-radius:14px;margin-bottom:1em} .aide{font-size:.9rem} .kpi-val{font-size:1.6rem} .kpi-lib{font-size:.8rem} .badge{font-size:.82rem;padding:.24em .7em} /* ---------- Cibles tactiles ---------- */ /* De vrais boutons d'application : hauts, pleins, faciles a viser. 3.2em de 19px font environ 61 px de haut. */ .btn{padding:.95em 1.35em;font-size:1.06rem;font-weight:700;border-radius:14px; min-height:3.2em;gap:.5em;box-shadow:0 1px 2px rgba(29,27,26,.06)} .btn:active{transform:scale(.97)} .btn .ic{width:22px;height:22px;flex:0 0 22px} /* les boutons secondaires restent visiblement plus discrets, tout en gardant les 48 px recommandes au doigt */ .btn-sm{padding:.62em 1em;font-size:.98rem;border-radius:12px;min-height:2.5em} .btn-primaire{box-shadow:0 2px 8px rgba(255,102,0,.28)} .entete-actions{width:100%} .entete-actions .btn{flex:1} .onglets a{padding:.8em 1.1em;font-size:1rem} /* 16px minimum : en dessous, iOS zoome tout seul au moment de la saisie */ input[type=text],input[type=email],input[type=password],input[type=number],input[type=date], input[type=datetime-local],input[type=month],input[type=url],input[type=search],input[type=time], select,textarea{font-size:max(16px, 1rem);padding:.75em .8em;border-radius:10px;min-height:2.9em} textarea{min-height:110px} label{font-size:.92rem;margin-bottom:1.1em} .case{min-height:44px} .case input{width:22px;height:22px;flex:0 0 22px} /* ---------- Barre du haut allegee ---------- */ .topbar{padding-top:calc(.6em + env(safe-area-inset-top))} .topbar-droite .lien-discret{display:none} .marque-pastille{width:32px;height:32px;flex:0 0 32px} /* ---------- Barre d'onglets ---------- */ .nav-bas{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80; background:#fff;border-top:1px solid var(--gris-clair); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 16px rgba(29,27,26,.07)} .nav-bas a,.nav-bas button{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;padding:.55em .2em .6em;background:none;border:0; font:inherit;font-size:.8rem;font-weight:650;color:var(--gris);cursor:pointer; text-decoration:none!important;min-height:72px;line-height:1.15;text-align:center} .nav-bas a:active,.nav-bas button:active{background:var(--gris-fond)} .nav-bas .ic{width:28px;height:28px;flex:0 0 28px;stroke-width:1.75} /* l'onglet courant porte une pastille, comme dans une vraie application */ .nav-bas a.actif{color:var(--bordeaux)} .nav-bas a.actif .ic{stroke-width:2.2} .nav-bas a.actif::before{content:"";position:absolute;top:0;width:34%;height:3px; border-radius:0 0 3px 3px;background:var(--bordeaux)} .nav-bas a{position:relative} .nav-bas span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* le tiroir lateral part du bas, au-dessus de la barre d'onglets */ .rail{top:auto;bottom:0;height:auto;max-height:80vh;width:100%;left:0;border-radius:20px 20px 0 0; transform:translateY(100%);padding:1em .8em calc(1.4em + env(safe-area-inset-bottom)); border-right:0;box-shadow:0 -8px 40px rgba(29,27,26,.22);gap:.5em} .rail.ouvert{transform:none} .rail::before{content:"";display:block;width:42px;height:4px;border-radius:2px; background:var(--gris-clair);margin:0 auto .9em;flex:none} .voile{inset:0} /* chaque ligne du menu devient une vraie tuile tactile */ .rail-lien{padding:.85em .95em;font-size:1.06rem;font-weight:650;gap:.85em; min-height:3.2em;border-radius:14px;background:var(--gris-fond); border:1px solid var(--gris-clair);color:var(--encre);flex:none} .rail-lien .ic{width:24px;height:24px;flex:0 0 24px} .rail-lien::after{content:"";width:8px;height:8px;margin-left:auto;flex:none; border-right:2px solid var(--gris);border-bottom:2px solid var(--gris); transform:rotate(-45deg);opacity:.6} .rail-lien:active{transform:scale(.98)} .rail-lien.actif{background:var(--bordeaux);color:#fff;border-color:var(--bordeaux)} .rail-lien.actif::after{border-color:#fff} .rail-sep{margin:.3em .4em} /* ---------- Tableaux transformes en fiches ---------- */ .tableau-wrap{margin:0;overflow:visible} table.tbl.tbl-fiches{min-width:0;border-collapse:separate} .tbl-fiches thead,.tbl-fiches tfoot{display:none} .tbl-fiches,.tbl-fiches tbody,.tbl-fiches tr,.tbl-fiches td{display:block;width:100%} .tbl-fiches tr{background:#fff;border:1px solid var(--gris-clair);border-radius:12px; margin-bottom:.7em;padding:.75em .9em} .tbl-fiches tr:hover{background:#fff} .tbl-fiches td{border:0;padding:.28em 0;display:flex;align-items:baseline; justify-content:space-between;gap:1em;text-align:right;font-size:.96rem} .tbl-fiches td::before{content:attr(data-libelle);font-weight:600;color:var(--gris); text-align:left;flex:0 0 42%;font-size:.86rem} .tbl-fiches td:empty{display:none} .tbl-fiches td[data-libelle=""]{justify-content:flex-end} .tbl-fiches td[data-libelle=""]::before{content:none} /* la premiere colonne sert de titre a la fiche */ .tbl-fiches td:first-child{display:block;text-align:left;font-size:1.05rem; padding-bottom:.5em;margin-bottom:.4em;border-bottom:1px solid var(--gris-clair)} .tbl-fiches td:first-child::before{display:block;margin-bottom:.15em} .tbl-fiches td.num{font-variant-numeric:tabular-nums} /* les tableaux de saisie gardent leur grille et defilent */ table.tbl:not(.tbl-fiches){min-width:560px} .carte:has(table.tbl:not(.tbl-fiches)) .tableau-wrap{overflow-x:auto} /* ---------- Filtres et formulaires ---------- */ .barre-filtres{flex-direction:column;align-items:stretch;padding:1em} .barre-filtres label{min-width:0;flex:none} .barre-filtres .btn{width:100%} .form-actions{flex-direction:column} .form-actions .btn{width:100%} /* ---------- Calendrier ---------- */ .cal-case{min-height:64px} .cal-nav{gap:.4em} .cal-nav .btn{flex:1;min-width:0} .cal-mois{flex:1 0 100%;text-align:center;order:-1;font-size:1.15rem;margin-bottom:.2em} } @media (max-width:560px){ .g4,.g3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .ev-liste{grid-template-columns:1fr} .doc{padding:1.1em} } /* En mode application installee, la barre du haut ne colle plus a l'encoche */ @media (display-mode: standalone){ .topbar{padding-top:calc(.7em + env(safe-area-inset-top))} .pub-top{padding-top:calc(.8em + env(safe-area-inset-top))} } /* ============================================================ Reglage de la taille d'affichage ============================================================ */ .reglage-taille{border-top:1px solid var(--gris-clair);margin-top:.8em;padding-top:.9em} .reglage-taille p{font-size:.82rem;color:var(--gris);font-weight:700;text-transform:uppercase; letter-spacing:.04em;margin:0 0 .6em} .taille-choix{display:flex;gap:.4em} .taille-choix button{flex:1;border:1px solid var(--gris-clair);background:#fff;border-radius:10px; padding:.6em .2em;font:inherit;font-weight:700;color:var(--gris);cursor:pointer;line-height:1; display:flex;flex-direction:column;align-items:center;gap:.25em;min-height:3em} .taille-choix button small{font-size:.62rem;font-weight:600;opacity:.75} .taille-choix button[aria-pressed="true"]{background:var(--bordeaux);color:#fff;border-color:var(--bordeaux)} .taille-choix button:nth-child(1){font-size:.9rem} .taille-choix button:nth-child(2){font-size:1.05rem} .taille-choix button:nth-child(3){font-size:1.2rem} .taille-choix button:nth-child(4){font-size:1.4rem} /* ============================================================ Recherche d'entreprise par SIRET, dans la fiche client ============================================================ */ .bloc-siret{background:var(--gris-fond);border:1px solid var(--gris-clair); border-radius:var(--rayon);padding:1em 1.1em;margin-bottom:1.2em} .bloc-siret label{margin-bottom:0} .rangee-siret{display:flex;gap:.5em;align-items:stretch;margin-top:.35em} .rangee-siret input{flex:1;min-width:0} .rangee-siret .btn{flex:0 0 auto;white-space:nowrap} .liste-siret{display:flex;flex-direction:column;gap:.4em;margin-top:.7em; max-height:320px;overflow:auto} .res-siret{text-align:left;background:#fff;border:1px solid var(--gris-clair); border-radius:10px;padding:.7em .85em;font:inherit;font-size:.92rem;color:var(--encre); cursor:pointer;line-height:1.4;transition:.12s ease} .res-siret:hover{border-color:var(--bordeaux);background:#fff8f3} .res-siret small{color:var(--gris)} @media (max-width:560px){ .rangee-siret{flex-direction:column} .rangee-siret .btn{width:100%} } /* ============================================================ Refus d'une proposition d'evenement Le motif est obligatoire : le bloc doit se voir, sans pour autant dominer le bouton de validation qui le precede. ============================================================ */ .bloc-refus{border-top:1px solid var(--gris-clair);padding-top:1.1em;margin-top:.2em} .bloc-refus label{margin-bottom:.7em} .bloc-refus textarea{min-height:0;resize:vertical} .bloc-refus .aide{display:block;margin-top:.35em} @media (max-width:820px){ .bloc-refus .btn{width:100%} } /* ============================================================ Accueil en grosses tuiles — le lanceur de l'application ============================================================ */ .tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:.8em;margin-bottom:1.5em} .tuile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.6em; background:#fff;border:1px solid var(--gris-clair);border-radius:18px;padding:1.05em 1em; box-shadow:var(--ombre);color:var(--encre);text-decoration:none!important; min-height:6.4em;transition:transform .15s ease, box-shadow .15s ease} .tuile:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte)} .tuile:active{transform:scale(.98)} .tuile-ic{width:46px;height:46px;border-radius:14px;flex:none; display:grid;place-items:center;background:var(--gris-fond);color:var(--bordeaux)} .tuile-ic .ic{width:25px;height:25px;flex:0 0 25px;stroke-width:1.8} .tuile-nom{font-weight:700;font-size:1rem;line-height:1.2} .tuile-sub{font-size:.8rem;color:var(--gris);line-height:1.3;margin-top:-.35em} .tuile-pastille{position:absolute;top:.65em;right:.65em;min-width:23px;height:23px; padding:0 .45em;border-radius:999px;background:var(--rouge);color:#fff; font-size:.75rem;font-weight:700;display:grid;place-items:center;line-height:1} /* teintes : chaque rubrique garde sa couleur, comme des icones d'application */ .tuile-orange .tuile-ic{background:var(--orange-fond);color:var(--orange)} .tuile-vert .tuile-ic{background:var(--vert-fond);color:var(--vert)} .tuile-bleu .tuile-ic{background:var(--bleu-fond);color:var(--bleu)} .tuile-violet .tuile-ic{background:#f0ecfb;color:#6d4fc4} .tuile-rouge .tuile-ic{background:var(--rouge-fond);color:var(--rouge)} .tuile-gris .tuile-ic{background:var(--gris-fond);color:var(--gris)} /* une tuile peut etre mise en avant : l'action principale de la page */ .tuile-pleine{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff} .tuile-pleine .tuile-ic{background:rgba(255,255,255,.22);color:#fff} .tuile-pleine .tuile-sub{color:rgba(255,255,255,.85)} @media (max-width:820px){ /* sur telephone : deux colonnes, franchement plus grandes */ .tuiles{grid-template-columns:1fr 1fr;gap:.7em;margin-bottom:1.3em} .tuile{min-height:7.6em;padding:1.1em .95em;border-radius:20px} .tuile-ic{width:56px;height:56px;border-radius:17px} .tuile-ic .ic{width:30px;height:30px;flex:0 0 30px} .tuile-nom{font-size:1.04rem} .tuile-sub{font-size:.84rem} /* la tuile mise en avant occupe toute la largeur */ .tuile-large{grid-column:1 / -1;flex-direction:row;align-items:center;gap:.85em;min-height:0} .tuile-large .tuile-sub{margin-top:.1em} } @media (max-width:340px){ .tuiles{grid-template-columns:1fr} } /* bouton Aa de la barre du haut, sur telephone seulement */ .btn-taille{display:none;background:rgba(255,255,255,.15);border:0;color:#fff;border-radius:9px; padding:.45em .7em;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;line-height:1} @media (max-width:820px){ .btn-taille{display:block} }