:root{ /* Interface utilisateur */ --bg-img-adm:url("/_ico/administrateur-defaut.jpeg"); /* Référence principal : détermine en règle général les dimmensions systèmes (nom à changer) */ --nav-width-closed:3.5rem;/* TODO supprimer cette ligne quand variable remplacée par tout par : */ --sys-w:3.5rem; --sys-fnt:"Bellota Text",serif;/* Atkinson Hyperlegible Mono */ --sys-fnt-w:400;--sys-fnt-s:normal; /* Les couleurs */ --c-surface-rgb:224,224,224;--c-surface:rgb(var(--c-surface-rgb)); --c-surface-l1:rgb(237,237,237); --c-surface-l2:rgb(250,250,250); --c-surface-d1:rgb(212,212,212); --c-surface-d2:rgb(199,199,199); /* Le Body */ --c-bg:var(--c-surface); --c-body:var(--c-surface); --c-txt:#2E2E2E; /* Le texte */ --txt-system:"Bellota Text",serif;/* Atkinson Hyperlegible Mono */ --txt-shdw-dark:1px 1px 1px black; --txt-shdw-light:1px 1px 1px white; /* Les box Shadow */ --bx-shdw-light:rgba(255,255,255,.15); --bx-shdw-dark:rgba(0,0,0,.15); /* Box Shadow Items */ --bx-shdw-itm-x:.5em;--bx-shdw-itm-y:.5em;--bx-shdw-itm-l:1em; --bx-shdw-itm:var(--bx-shdw-itm-x) var(--bx-shdw-itm-y) var(--bx-shdw-itm-l) var(--bx-shdw-dark);/* TODO Couleur en fonction du thème Dark/Light */ --bx-shdw-itm-h:0 0 0 var(--bx-shdw-dark); /* Box Shadow Inputs */ --bx-shdw-ipt-in-x:.2em;--bx-shdw-ipt-in-y:.2em;--bx-shdw-ipt-in-l:.2em; --bx-shdw-ipt-out-x:.2em;--bx-shdw-ipt-out-y:.2em;--bx-shdw-ipt-out-l:.2em; --bx-shdw-ipt-in:calc(var(--bx-shdw-ipt-in-x) * -1) calc(var(--bx-shdw-ipt-in-y) * -1) var(--bx-shdw-ipt-in-l) var(--bx-shdw-light) inset,var(--bx-shdw-ipt-in-x) var(--bx-shdw-ipt-in-y) var(--bx-shdw-ipt-in-l) var(--bx-shdw-dark) inset; --bx-shdw-ipt-out:calc(var(--bx-shdw-ipt-out-x) * -1) calc(var(--bx-shdw-ipt-out-y) * -1) var(--bx-shdw-ipt-out-l) var(--bx-shdw-light),var(--bx-shdw-ipt-out-x) var(--bx-shdw-ipt-out-y) var(--bx-shdw-ipt-out-l) var(--bx-shdw-dark); /* Box Shadow Menu */ --bx-shdw-nav-c:rgba(0,0,0,.5); --bx-shdw-nav-l:1em;--bx-shdw-nav-l2:calc(var(--bx-shdw-nav-l) / 2); --bx-shdw-nav:var(--bx-shdw-nav-l) 0 var(--bx-shdw-nav-l) calc(var(--bx-shdw-nav-l) * -1) var(--bx-shdw-nav-c); --bx-shdw-nav-top:0 var(--bx-shdw-nav-l) var(--bx-shdw-nav-l) calc(var(--bx-shdw-nav-l) * -1) var(--bx-shdw-nav-c); --bx-shdw-nav-y-in:0 calc(var(--bx-shdw-nav-l2) * -1) var(--bx-shdw-nav-l2) calc(var(--bx-shdw-nav-l2) * -1) rgba(0,0,0,.3) inset; --bx-shdw-nav-y-in-inv:0 var(--bx-shdw-nav-l2) var(--bx-shdw-nav-l2) calc(var(--bx-shdw-nav-l2) * -1) rgba(0,0,0,.3) inset; --bx-shdw-nav-bulle:var(--bx-shdw-nav-l2) 0 calc(var(--bx-shdw-nav-l2) * 2) calc(var(--bx-shdw-nav-l2) * -1) var(--bx-shdw-dark); /* Box Shadow Fenêtres */ --bx-shdw-fen-head:0 calc(var(--bx-shdw-nav-l) * -1) var(--bx-shdw-nav-l) calc(var(--bx-shdw-nav-l) * -1) var(--bx-shdw-nav-c) inset; /* Les Border Radius */ --radius:5px;--radius-accent:.5em; --radius-t:var(--radius) var(--radius) 0 0; --radius-b:0 0 var(--radius) var(--radius); --radius-r:0 var(--radius) var(--radius) 0; --radius-l:var(--radius) 0 0 var(--radius); --radius-tr:0 var(--radius) 0 0; --radius-tl:var(--radius) 0 0 0; --radius-br:0 0 var(--radius) 0; --radius-bl:0 0 0 var(--radius); /* Les Padding */ --pad-itm-grid-x:.5em;--pad-itm-grid-y:.5em;--pad-itm-grid:var(--pad-itm-grid-y) var(--pad-itm-grid-x); --pad-itm-list-x:1em;--pad-itm-list-y:.75em;--pad-itm-list:var(--pad-itm-list-y) var(--pad-itm-list-x); --mar-itm-grid:1em; --mar-itm-list:0; /* Les icones */ --ico-w:1.2em;--ico-size:var(--ico-w) var(--ico-w); /* Icones dans le menu principal */ --nav-ico-w:1.4em;--nav-ico-size:var(--nav-ico-w) var(--nav-ico-w); --nav-ico-w-demi:calc(var(--nav-ico-w) / 2);--nav-ico-size-demi:var(--nav-ico-w-demi) var(--nav-ico-w-demi); /* Icones dans le menu page */ --nav-page-ico-w:calc(var(--nav-ico-w) * .9);--nav-page-ico-size:var(--nav-page-ico-w) var(--nav-page-ico-w); --nav-page-ico-w-demi:calc(var(--nav-page-ico-w) / 2);--nav-page-ico-size-demi:var(--nav-page-ico-w-demi) var(--nav-page-ico-w-demi); /* Les petites flèches (plier déplier) */ --nav-fleche-w:calc((var(--sys-w) - var(--nav-ico-w)) / 2); } nav,main,i::after,i[data-ombre]::before,i[data-lumiere]::before,li,ul{transition:all 300ms ease-out;} body>i{display:none !important;}/* Pour le préchargement des icônes en append dans le body */ i{opacity:0;transform:scale(.5);width:var(--ico-w);height:var(--ico-w);display:inline-block;vertical-align:middle;position:relative;} i[data-loaded="1"]{opacity:1;transform:scale(1);} i::after,i[data-ombre]::before,i[data-lumiere]::before, i[data-ombre]>i::before,i[data-lumiere]>i::before{content:'';mask-position:center;mask-repeat:no-repeat;mask-size:100%;mask-mode:alpha;background-color:currentColor;position:absolute;top:0;left:0;right:0;bottom:0;} i[data-ombre]::before,i[data-ombre]>i::before{transform:translate(1px,1px);background-color:black;opacity:.5;} i[data-lumiere]::before,i[data-lumiere]>i::before{transform:translate(-1px,-1px);background-color:white;opacity:.75;} i+span{display:inline-block;vertical-align:middle;} i.menu::after,i.menu[data-ombre]::before,i.menu[data-lumiere]::before,i[data-ombre]>i.menu::before,i[data-lumiere]>i.menu::before{mask-image:url("../../../_ico/menu.svg");}i.croix::after,i.croix[data-ombre]::before,i.croix[data-lumiere]::before,i[data-ombre]>i.croix::before,i[data-lumiere]>i.croix::before{mask-image:url("../../../_ico/croix.svg");}i.profil::after,i.profil[data-ombre]::before,i.profil[data-lumiere]::before,i[data-ombre]>i.profil::before,i[data-lumiere]>i.profil::before{mask-image:url("../../../_ico/profil.svg");}i.croix-large::after,i.croix-large[data-ombre]::before,i.croix-large[data-lumiere]::before,i[data-ombre]>i.croix-large::before,i[data-lumiere]>i.croix-large::before{mask-image:url("../../../_ico/croix-large.svg");}i.menu-open::after,i.menu-open[data-ombre]::before,i.menu-open[data-lumiere]::before,i[data-ombre]>i.menu-open::before,i[data-lumiere]>i.menu-open::before{mask-image:url("../../../_ico/menu-open.svg");}i.menu-quit::after,i.menu-quit[data-ombre]::before,i.menu-quit[data-lumiere]::before,i[data-ombre]>i.menu-quit::before,i[data-lumiere]>i.menu-quit::before{mask-image:url("../../../_ico/menu-quit.svg");}i.panorama::after,i.panorama[data-ombre]::before,i.panorama[data-lumiere]::before,i[data-ombre]>i.panorama::before,i[data-lumiere]>i.panorama::before{mask-image:url("../../../_ico/panorama.svg");}i.chevron-bas::after,i.chevron-bas[data-ombre]::before,i.chevron-bas[data-lumiere]::before,i[data-ombre]>i.chevron-bas::before,i[data-lumiere]>i.chevron-bas::before{mask-image:url("../../../_ico/chevron-bas.svg");}i.chevron-haut::after,i.chevron-haut[data-ombre]::before,i.chevron-haut[data-lumiere]::before,i[data-ombre]>i.chevron-haut::before,i[data-lumiere]>i.chevron-haut::before{mask-image:url("../../../_ico/chevron-haut.svg");}i.chevron-gauche::after,i.chevron-gauche[data-ombre]::before,i.chevron-gauche[data-lumiere]::before,i[data-ombre]>i.chevron-gauche::before,i[data-lumiere]>i.chevron-gauche::before{mask-image:url("../../../_ico/chevron-gauche.svg");}i.chevron-droite::after,i.chevron-droite[data-ombre]::before,i.chevron-droite[data-lumiere]::before,i[data-ombre]>i.chevron-droite::before,i[data-lumiere]>i.chevron-droite::before{mask-image:url("../../../_ico/chevron-droite.svg");}i.fleche-bas-droite::after,i.fleche-bas-droite[data-ombre]::before,i.fleche-bas-droite[data-lumiere]::before,i[data-ombre]>i.fleche-bas-droite::before,i[data-lumiere]>i.fleche-bas-droite::before{mask-image:url("../../../_ico/fleche-bas-droite.svg");}i.agrandir::after,i.agrandir[data-ombre]::before,i.agrandir[data-lumiere]::before,i[data-ombre]>i.agrandir::before,i[data-lumiere]>i.agrandir::before{mask-image:url("../../../_ico/agrandir.svg");}i.reduire::after,i.reduire[data-ombre]::before,i.reduire[data-lumiere]::before,i[data-ombre]>i.reduire::before,i[data-lumiere]>i.reduire::before{mask-image:url("../../../_ico/reduire.svg");}i.upload::after,i.upload[data-ombre]::before,i.upload[data-lumiere]::before,i[data-ombre]>i.upload::before,i[data-lumiere]>i.upload::before{mask-image:url("../../../_ico/upload.svg");}i.selectionner::after,i.selectionner[data-ombre]::before,i.selectionner[data-lumiere]::before,i[data-ombre]>i.selectionner::before,i[data-lumiere]>i.selectionner::before{mask-image:url("../../../_ico/selectionner.svg");}i.selectionner-tout::after,i.selectionner-tout[data-ombre]::before,i.selectionner-tout[data-lumiere]::before,i[data-ombre]>i.selectionner-tout::before,i[data-lumiere]>i.selectionner-tout::before{mask-image:url("../../../_ico/selectionner-tout.svg");}i.deselectionner::after,i.deselectionner[data-ombre]::before,i.deselectionner[data-lumiere]::before,i[data-ombre]>i.deselectionner::before,i[data-lumiere]>i.deselectionner::before{mask-image:url("../../../_ico/deselectionner.svg");}i.deselectionner-tout::after,i.deselectionner-tout[data-ombre]::before,i.deselectionner-tout[data-lumiere]::before,i[data-ombre]>i.deselectionner-tout::before,i[data-lumiere]>i.deselectionner-tout::before{mask-image:url("../../../_ico/deselectionner-tout.svg");}i.ouvrir::after,i.ouvrir[data-ombre]::before,i.ouvrir[data-lumiere]::before,i[data-ombre]>i.ouvrir::before,i[data-lumiere]>i.ouvrir::before{mask-image:url("../../../_ico/ouvrir.svg");}i.ouvrir-tab::after,i.ouvrir-tab[data-ombre]::before,i.ouvrir-tab[data-lumiere]::before,i[data-ombre]>i.ouvrir-tab::before,i[data-lumiere]>i.ouvrir-tab::before{mask-image:url("../../../_ico/ouvrir-tab.svg");}i.reset-right::after,i.reset-right[data-ombre]::before,i.reset-right[data-lumiere]::before,i[data-ombre]>i.reset-right::before,i[data-lumiere]>i.reset-right::before{mask-image:url("../../../_ico/reset-right.svg");}i.editer::after,i.editer[data-ombre]::before,i.editer[data-lumiere]::before,i[data-ombre]>i.editer::before,i[data-lumiere]>i.editer::before{mask-image:url("../../../_ico/editer.svg");}i.editer-fill::after,i.editer-fill[data-ombre]::before,i.editer-fill[data-lumiere]::before,i[data-ombre]>i.editer-fill::before,i[data-lumiere]>i.editer-fill::before{mask-image:url("../../../_ico/editer-fill.svg");}i.plus::after,i.plus[data-ombre]::before,i.plus[data-lumiere]::before,i[data-ombre]>i.plus::before,i[data-lumiere]>i.plus::before{mask-image:url("../../../_ico/plus.svg");}i.supprimer::after,i.supprimer[data-ombre]::before,i.supprimer[data-lumiere]::before,i[data-ombre]>i.supprimer::before,i[data-lumiere]>i.supprimer::before{mask-image:url("../../../_ico/supprimer.svg");}i.supprimer-fill::after,i.supprimer-fill[data-ombre]::before,i.supprimer-fill[data-lumiere]::before,i[data-ombre]>i.supprimer-fill::before,i[data-lumiere]>i.supprimer-fill::before{mask-image:url("../../../_ico/supprimer-fill.svg");}i.telecharger::after,i.telecharger[data-ombre]::before,i.telecharger[data-lumiere]::before,i[data-ombre]>i.telecharger::before,i[data-lumiere]>i.telecharger::before{mask-image:url("../../../_ico/telecharger.svg");}i.deplacer::after,i.deplacer[data-ombre]::before,i.deplacer[data-lumiere]::before,i[data-ombre]>i.deplacer::before,i[data-lumiere]>i.deplacer::before{mask-image:url("../../../_ico/deplacer.svg");}i.renommer::after,i.renommer[data-ombre]::before,i.renommer[data-lumiere]::before,i[data-ombre]>i.renommer::before,i[data-lumiere]>i.renommer::before{mask-image:url("../../../_ico/renommer.svg");}i.renommer-fill::after,i.renommer-fill[data-ombre]::before,i.renommer-fill[data-lumiere]::before,i[data-ombre]>i.renommer-fill::before,i[data-lumiere]>i.renommer-fill::before{mask-image:url("../../../_ico/renommer-fill.svg");}i.imprimer::after,i.imprimer[data-ombre]::before,i.imprimer[data-lumiere]::before,i[data-ombre]>i.imprimer::before,i[data-lumiere]>i.imprimer::before{mask-image:url("../../../_ico/imprimer.svg");}i.imprimer-fill::after,i.imprimer-fill[data-ombre]::before,i.imprimer-fill[data-lumiere]::before,i[data-ombre]>i.imprimer-fill::before,i[data-lumiere]>i.imprimer-fill::before{mask-image:url("../../../_ico/imprimer-fill.svg");}i.viseur::after,i.viseur[data-ombre]::before,i.viseur[data-lumiere]::before,i[data-ombre]>i.viseur::before,i[data-lumiere]>i.viseur::before{mask-image:url("../../../_ico/viseur.svg");}i.retour::after,i.retour[data-ombre]::before,i.retour[data-lumiere]::before,i[data-ombre]>i.retour::before,i[data-lumiere]>i.retour::before{mask-image:url("../../../_ico/retour.svg");}i.info::after,i.info[data-ombre]::before,i.info[data-lumiere]::before,i[data-ombre]>i.info::before,i[data-lumiere]>i.info::before{mask-image:url("../../../_ico/info.svg");}i.utilisateur::after,i.utilisateur[data-ombre]::before,i.utilisateur[data-lumiere]::before,i[data-ombre]>i.utilisateur::before,i[data-lumiere]>i.utilisateur::before{mask-image:url("../../../_ico/utilisateur.svg");}i.mdp::after,i.mdp[data-ombre]::before,i.mdp[data-lumiere]::before,i[data-ombre]>i.mdp::before,i[data-lumiere]>i.mdp::before{mask-image:url("../../../_ico/mdp.svg");}i.aide::after,i.aide[data-ombre]::before,i.aide[data-lumiere]::before,i[data-ombre]>i.aide::before,i[data-lumiere]>i.aide::before{mask-image:url("../../../_ico/aide.svg");}i.connexion::after,i.connexion[data-ombre]::before,i.connexion[data-lumiere]::before,i[data-ombre]>i.connexion::before,i[data-lumiere]>i.connexion::before{mask-image:url("../../../_ico/connexion.svg");}i.deconnexion::after,i.deconnexion[data-ombre]::before,i.deconnexion[data-lumiere]::before,i[data-ombre]>i.deconnexion::before,i[data-lumiere]>i.deconnexion::before{mask-image:url("../../../_ico/deconnexion.svg");}i.tdb::after,i.tdb[data-ombre]::before,i.tdb[data-lumiere]::before,i[data-ombre]>i.tdb::before,i[data-lumiere]>i.tdb::before{mask-image:url("../../../_ico/tdb.svg");}i.engrenage::after,i.engrenage[data-ombre]::before,i.engrenage[data-lumiere]::before,i[data-ombre]>i.engrenage::before,i[data-lumiere]>i.engrenage::before{mask-image:url("../../../_ico/engrenage.svg");}i.calendrier::after,i.calendrier[data-ombre]::before,i.calendrier[data-lumiere]::before,i[data-ombre]>i.calendrier::before,i[data-lumiere]>i.calendrier::before{mask-image:url("../../../_ico/calendrier.svg");}i.internet::after,i.internet[data-ombre]::before,i.internet[data-lumiere]::before,i[data-ombre]>i.internet::before,i[data-lumiere]>i.internet::before{mask-image:url("../../../_ico/internet.svg");}i.dossier::after,i.dossier[data-ombre]::before,i.dossier[data-lumiere]::before,i[data-ombre]>i.dossier::before,i[data-lumiere]>i.dossier::before{mask-image:url("../../../_ico/dossier.svg");}i.article::after,i.article[data-ombre]::before,i.article[data-lumiere]::before,i[data-ombre]>i.article::before,i[data-lumiere]>i.article::before{mask-image:url("../../../_ico/article.svg");}i.produit::after,i.produit[data-ombre]::before,i.produit[data-lumiere]::before,i[data-ombre]>i.produit::before,i[data-lumiere]>i.produit::before{mask-image:url("../../../_ico/produit.svg");}i.gamme::after,i.gamme[data-ombre]::before,i.gamme[data-lumiere]::before,i[data-ombre]>i.gamme::before,i[data-lumiere]>i.gamme::before{mask-image:url("../../../_ico/gamme.svg");}i.structure::after,i.structure[data-ombre]::before,i.structure[data-lumiere]::before,i[data-ombre]>i.structure::before,i[data-lumiere]>i.structure::before{mask-image:url("../../../_ico/structure.svg");}i.utilisateur::after,i.utilisateur[data-ombre]::before,i.utilisateur[data-lumiere]::before,i[data-ombre]>i.utilisateur::before,i[data-lumiere]>i.utilisateur::before{mask-image:url("../../../_ico/utilisateur.svg");}i.page-personnalisation::after,i.page-personnalisation[data-ombre]::before,i.page-personnalisation[data-lumiere]::before,i[data-ombre]>i.page-personnalisation::before,i[data-lumiere]>i.page-personnalisation::before{mask-image:url("../../../_ico/page-personnalisation.svg");}i.theme::after,i.theme[data-ombre]::before,i.theme[data-lumiere]::before,i[data-ombre]>i.theme::before,i[data-lumiere]>i.theme::before{mask-image:url("../../../_ico/theme.svg");}i.apercu::after,i.apercu[data-ombre]::before,i.apercu[data-lumiere]::before,i[data-ombre]>i.apercu::before,i[data-lumiere]>i.apercu::before{mask-image:url("../../../_ico/apercu.svg");}i.disposition::after,i.disposition[data-ombre]::before,i.disposition[data-lumiere]::before,i[data-ombre]>i.disposition::before,i[data-lumiere]>i.disposition::before{mask-image:url("../../../_ico/disposition.svg");}i.fichier::after,i.fichier[data-ombre]::before,i.fichier[data-lumiere]::before,i[data-ombre]>i.fichier::before,i[data-lumiere]>i.fichier::before{mask-image:url("../../../_ico/fichier.svg");}i.image::after,i.image[data-ombre]::before,i.image[data-lumiere]::before,i[data-ombre]>i.image::before,i[data-lumiere]>i.image::before{mask-image:url("../../../_ico/image.svg");}i.administrateur::after,i.administrateur[data-ombre]::before,i.administrateur[data-lumiere]::before,i[data-ombre]>i.administrateur::before,i[data-lumiere]>i.administrateur::before{mask-image:url("../../../_ico/administrateur.svg");}i.question::after,i.question[data-ombre]::before,i.question[data-lumiere]::before,i[data-ombre]>i.question::before,i[data-lumiere]>i.question::before{mask-image:url("../../../_ico/question.svg");}i.info::after,i.info[data-ombre]::before,i.info[data-lumiere]::before,i[data-ombre]>i.info::before,i[data-lumiere]>i.info::before{mask-image:url("../../../_ico/info.svg");}i.erreur::after,i.erreur[data-ombre]::before,i.erreur[data-lumiere]::before,i[data-ombre]>i.erreur::before,i[data-lumiere]>i.erreur::before{mask-image:url("../../../_ico/erreur.svg");}i.attention::after,i.attention[data-ombre]::before,i.attention[data-lumiere]::before,i[data-ombre]>i.attention::before,i[data-lumiere]>i.attention::before{mask-image:url("../../../_ico/attention.svg");}i.enveloppe::after,i.enveloppe[data-ombre]::before,i.enveloppe[data-lumiere]::before,i[data-ombre]>i.enveloppe::before,i[data-lumiere]>i.enveloppe::before{mask-image:url("../../../_ico/enveloppe.svg");}i.succes::after,i.succes[data-ombre]::before,i.succes[data-lumiere]::before,i[data-ombre]>i.succes::before,i[data-lumiere]>i.succes::before{mask-image:url("../../../_ico/succes.svg");}i.ok::after,i.ok[data-ombre]::before,i.ok[data-lumiere]::before,i[data-ombre]>i.ok::before,i[data-lumiere]>i.ok::before{mask-image:url("../../../_ico/ok.svg");}i.palette::after,i.palette[data-ombre]::before,i.palette[data-lumiere]::before,i[data-ombre]>i.palette::before,i[data-lumiere]>i.palette::before{mask-image:url("../../../_ico/palette.svg");}i.disposition::after,i.disposition[data-ombre]::before,i.disposition[data-lumiere]::before,i[data-ombre]>i.disposition::before,i[data-lumiere]>i.disposition::before{mask-image:url("../../../_ico/disposition.svg");}i.controle::after,i.controle[data-ombre]::before,i.controle[data-lumiere]::before,i[data-ombre]>i.controle::before,i[data-lumiere]>i.controle::before{mask-image:url("../../../_ico/controle.svg");}i.utilisateurs::after,i.utilisateurs[data-ombre]::before,i.utilisateurs[data-lumiere]::before,i[data-ombre]>i.utilisateurs::before,i[data-lumiere]>i.utilisateurs::before{mask-image:url("../../../_ico/utilisateurs.svg");}i.rouleau::after,i.rouleau[data-ombre]::before,i.rouleau[data-lumiere]::before,i[data-ombre]>i.rouleau::before,i[data-lumiere]>i.rouleau::before{mask-image:url("../../../_ico/rouleau.svg");}i.cadenas::after,i.cadenas[data-ombre]::before,i.cadenas[data-lumiere]::before,i[data-ombre]>i.cadenas::before,i[data-lumiere]>i.cadenas::before{mask-image:url("../../../_ico/cadenas.svg");}i.menu::after,i.menu[data-ombre]::before,i.menu[data-lumiere]::before,i[data-ombre]>i.menu::before,i[data-lumiere]>i.menu::before{mask-image:url("../../../_ico/menu.svg");}i.menu-open::after,i.menu-open[data-ombre]::before,i.menu-open[data-lumiere]::before,i[data-ombre]>i.menu-open::before,i[data-lumiere]>i.menu-open::before{mask-image:url("../../../_ico/menu-open.svg");}i.menu-quit::after,i.menu-quit[data-ombre]::before,i.menu-quit[data-lumiere]::before,i[data-ombre]>i.menu-quit::before,i[data-lumiere]>i.menu-quit::before{mask-image:url("../../../_ico/menu-quit.svg");}i.qr::after,i.qr[data-ombre]::before,i.qr[data-lumiere]::before,i[data-ombre]>i.qr::before,i[data-lumiere]>i.qr::before{mask-image:url("../../../_ico/qr.svg");}i.code-barre::after,i.code-barre[data-ombre]::before,i.code-barre[data-lumiere]::before,i[data-ombre]>i.code-barre::before,i[data-lumiere]>i.code-barre::before{mask-image:url("../../../_ico/code-barre.svg");}i.etiquette::after,i.etiquette[data-ombre]::before,i.etiquette[data-lumiere]::before,i[data-ombre]>i.etiquette::before,i[data-lumiere]>i.etiquette::before{mask-image:url("../../../_ico/etiquette.svg");}i.gammme::after,i.gammme[data-ombre]::before,i.gammme[data-lumiere]::before,i[data-ombre]>i.gammme::before,i[data-lumiere]>i.gammme::before{mask-image:url("../../../_ico/gammme.svg");}i.partenaire::after,i.partenaire[data-ombre]::before,i.partenaire[data-lumiere]::before,i[data-ombre]>i.partenaire::before,i[data-lumiere]>i.partenaire::before{mask-image:url("../../../_ico/partenaire.svg");}i.view-liste::after,i.view-liste[data-ombre]::before,i.view-liste[data-lumiere]::before,i[data-ombre]>i.view-liste::before,i[data-lumiere]>i.view-liste::before{mask-image:url("../../../_ico/view-liste.svg");}i.view-detail::after,i.view-detail[data-ombre]::before,i.view-detail[data-lumiere]::before,i[data-ombre]>i.view-detail::before,i[data-lumiere]>i.view-detail::before{mask-image:url("../../../_ico/view-detail.svg");}i.view-mosaique::after,i.view-mosaique[data-ombre]::before,i.view-mosaique[data-lumiere]::before,i[data-ombre]>i.view-mosaique::before,i[data-lumiere]>i.view-mosaique::before{mask-image:url("../../../_ico/view-mosaique.svg");}:root{ -color-notif-erreur:#B63842; --color-notif-succes:#3A946E; --color-notif-info:#4A658A; --color-notif-message:#E5891C; } #SBFen::before, #SBImage_centrer::before{ content:"";position:fixed;inset:0;opacity:1; background-color:var(--c-surface-l1); background-color:rgba(255,255,255,.2); background-color:rgba(0,0,0,.05); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:all 300ms ease-out; } #SBFen:not([data-ouverture])::before{pointer-events:none;opacity:0;} .SBFen{--i:1;--nbcontrol:0;--h:calc(var(--nav-width-closed) * 2);position:fixed;top:var(--y,50%);left:var(--x,50%);height:var(--h);width:var(--w,400px);transform:translate(-50%,-50%);border-radius:var(--radius);background-color:var(--c-surface-l1);transition:all 300ms ease-out;} .SBFen .loader{width:.5em;height:.5em;border-radius:50%;display:block;vertical-align:middle;;margin:.75em auto;position:relative;left:-5.5em;box-sizing:border-box;opacity:.75;animation:shadowRolling 2s linear infinite;} @keyframes shadowRolling{ 0%{box-shadow:0 0 transparent,0 0 transparent,0 0 transparent,0 0 transparent;} 12%{box-shadow:5em 0 currentColor,0 0 transparent,0 0 transparent,0 0 transparent;} 25%{box-shadow:5.5em 0 currentColor,5em 0 currentColor,0 0 transparent,0 0 transparent;} 36%{box-shadow:6em 0 currentColor,5.5em 0 currentColor,5em 0 currentColor,0 0 transparent;} 50%{box-shadow:6.5em 0 currentColor,6em 0 currentColor,5.5em 0 currentColor,5em 0 currentColor;} 62%{box-shadow:10em 0 transparent,6.5em 0 currentColor,6em 0 currentColor,5.5em 0 currentColor;} 75%{box-shadow:10em 0 transparent,10em 0 transparent,6.5em 0 currentColor,6em 0 currentColor;} 87%{box-shadow:10em 0 transparent,10em 0 transparent,10em 0 transparent,6.5em 0 currentColor;} 100%{box-shadow:10em 0 transparent,10em 0 transparent,10em 0 transparent,10em 0 transparent;} } .SBFen>section{padding:1em;box-sizing:border-box;max-height:calc(100vh - 2em - var(--nav-width-closed));overflow:auto;} SBFen>section footer{position:absolute;bottom:0;right:0;background:var(--c-surface-l1);} .SBFen[data-reduite]{top:calc(100% - var(--nav-width-closed));left:calc(100% - var(--nav-width-closed) * var(--i));transform:translate(0,0);width:var(--nav-width-closed);height:var(--nav-width-closed);} .SBFen:not([data-reduite]){box-shadow:var(--bx-shdw-itm-x) var(--bx-shdw-itm-y) var(--bx-shdw-itm-l) var(--bx-shdw-dark);} .SBFen[data-reduite]>header>h1{ width:auto; top:0; position:absolute; left:0; white-space: nowrap; font-size: .8em; background: white; padding: .75em 1.5em; border-radius: var(--radius); left:50%; transform: translateX(-50%) scale(.5); pointer-events:none; transition:all 300ms ease-out; opacity:0; } .SBFen[data-reduite]:hover>header>h1{opacity:1;top:-2.7em;transform: translateX(-50%) scale(1);} .SBFen[data-reduite][data-overflowh1right]>header>h1{left:100%;transform:translateX(-100%) scale(.5);} .SBFen[data-reduite][data-overflowh1left]>header>h1{left:0;transform:translateX(0) scale(.5);} .SBFen[data-reduite][data-overflowh1right]:hover>header>h1{transform:translateX(-100%) scale(1);} .SBFen[data-reduite][data-overflowh1left]:hover>header>h1{transform:translateX(0) scale(1);} .SBFen[data-reduite]>header>span{opacity:0;pointer-events:none;} .SBFen[data-reduite]>header{cursor:pointer;} /* Full Screen et Snaps */ /* Prévisualisation */ .SBFen::before{ content:''; position:fixed; background:var(--c-surface-l1); top:50%;left:50%;width:1em;height:1em; opacity:0;pointer-events:none; transition:all 300ms ease-out; box-shadow:0 0 var(--bx-shdw-itm-l) var(--bx-shdw-dark); }.SBFen[data-snap]::before{opacity:.75;} .SBFen[data-snap="top"]::before{left:calc(var(--x) * -1 + 50%);top:calc(var(--y) * -1 + 50%);width:100vw;height:100vh;} .SBFen[data-snap="left"]::before{left:calc(var(--x) * -1 + 50%);top:calc(var(--y) * -1 + 50%);width:50vw;height:100vh;} .SBFen[data-snap="right"]::before{left:calc(var(--x) * -1 + 50% + 50vw);top:calc(var(--y) * -1 + 50%);width:50vw;height:100vh;} .SBFen[data-snap="bottom"]{transform:translate(-50%,-50%) scale(.75);opacity:.5;} /* État réel */ .SBFen[data-fullscreen]:not([data-reduite]), .SBFen[data-snapped="right"]:not([data-reduite]):not([data-fullscreen]), .SBFen[data-snapped="left"]:not([data-reduite]):not([data-fullscreen]){top:calc(50% + var(--dY,0px));height:100%;border-radius:0;} .SBFen[data-fullscreen]:not([data-reduite]){left:calc(50% + var(--dX,0px));width:100%;} .SBFen[data-snapped="right"]:not([data-reduite]):not([data-fullscreen]){left:calc(75% + var(--dX,0px));width:50%;} .SBFen[data-snapped="left"]:not([data-reduite]):not([data-fullscreen]){left:calc(25% + var(--dX,0px));width:50%;} .SBFen[data-fullscreen]:not([data-reduite])>header{cursor:grab;} .SBFen[data-fullscreen]:not([data-reduite])[data-dragging]>header{cursor:grabbing;} .SBFen[data-dragging]{transition:transform 300ms ease-out,opacity 300ms ease-out,width 300ms ease-out,height 300ms ease-out;} .SBFen[data-dragging]>section, .SBFen[data-dragging]>header>*{pointer-events:none;} .SBFen[data-fermeture],.SBFen[data-ouverture]{transform:translate(-50%,-50%) scale(.25);opacity:0;} .SBFen>header{ user-select:none; cursor:move; /*box-shadow:var(--bx-shdw-fen-head);background-color:var(--c-surface-l1);border-radius:var(--radius) var(--radius) 0 0;*/ } .SBFen>header>span{position:absolute;right:.5em;top:.5em;transition:opacity 300ms ease-out;opacity:1;} .SBFen>header>span::after{content:'';box-shadow:var(--bx-shdw-ipt-in);border-radius:var(--radius);position:absolute;inset:0;pointer-events:none;} .SBFen>header>span>i{margin:0;height:calc(var(--nav-width-closed) - 1em);width:calc(var(--nav-width-closed) - 1em);cursor:pointer;background-color:transparent;} .SBFen>header>span>i::after{mask-size:calc(var(--nav-width-closed) / 2.5) calc(var(--nav-width-closed) / 2.5);} .SBFen>header>span>i:first-child{border-radius:var(--radius-l);} .SBFen>header>span>i:last-child{border-radius:var(--radius-r);} .SBFen>header>i:first-child, .SBFen>header>img{ width:var(--nav-width-closed); height:var(--nav-width-closed); border-radius:var(--radius) 0 0 0; margin-right:.5em; } .SBFen>header>i:first-child::after{mask-size:calc(var(--nav-width-closed) / 1.5) calc(var(--nav-width-closed) / 1.5);} .SBFen>header>i:not(:first-child), .SBFen>header>i>i{ position:absolute;background-color:var(--c-surface-l1);border-radius:50% 0 0 0; left:calc(var(--nav-width-closed) - var(--ico-w) - .5em); top:calc(var(--nav-width-closed) - var(--ico-w) - .5em); width:calc(var(--ico-w) + .5em); height:calc(var(--ico-w) + .5em); z-index:1; } .SBFen>header>i:not(:first-child)::after, .SBFen>header>i>i::after{mask-size:var(--ico-w) var(--ico-w);} .SBFen>header>h1{ --retrait:calc(var(--nbcontrol) * ( var(--nav-width-closed) - 1rem ) + 1rem ); width:calc(100% - var(--nav-width-closed) - var(--retrait) - .5rem);overflow:hidden;white-space:nowrap; display:inline-block;vertical-align:middle;margin:0;font-size:1.5em;position:relative; } .SBFen>header>h1::after{content:'';width:1em;background:linear-gradient(90deg,transparent 0,var(--c-surface-l1) 100%);position:absolute;top:0;right:0;bottom:0;} .SBImage{position:relative;transition:all 300ms ease-out;opacity:1;background-size:cover;background-repeat:no-repeat;background-position:var(--x,50%) var(--y,50%);text-align:center;} .SBImage:not([data-loaded]){opacity:0;pointer-events:none;} .SBImage:not([data-size="auto"])>img{display:none;} .SBImage[data-size="contain"]{background-size:contain;} .SBImage[data-size="auto"]>img{max-width:100%;max-height:100%;display:inline-block;vertical-align:middle;} .SBImage[data-size="auto"]::before{content:'';height:100%;display:inline-block;vertical-align:middle;} .SBImage[data-copyright]::after{ content:attr(data-copyright); position:absolute; bottom:.5em;right:.5em; color:white; filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); font-size:.8em;line-height:1em; } /* Notifications */ #SBNotifications{position:fixed;top:0;right:0;width:25em;max-width:100%;box-sizing:border-box;padding:0 1em 1em 1em;text-align:right;max-height:100%;pointer-events:none;} #SBNotifications>div{display:block;margin-top:1em;transition:margin 300ms ease-out;} #SBNotifications>div.out{margin-bottom:calc(var(--notif-h,0) - 1em);} #SBNotifications>div>div{background:white;top:0;display:inline-block;vertical-align:top;box-sizing:border-box;padding:.75em 1em;margin:0;min-width:51%;text-align:left;border-radius:3px;position:relative;font-size:.9em;box-shadow:0 0 .5em rgba(0,0,0,.05),-1em -1em 1em 1em rgba(0,0,0,.05) inset;pointer-events:auto;transform-origin:top;transition:all 300ms ease-out;transform:scale(1);opacity:1;} #SBNotifications>div.in>div,#SBNotifications>div.out>div{transform:scale(.1);opacity:0;} #SBNotifications>div.auto.hover>div{opacity:.5;pointer-events:none;} /* Contenu des notifications */ /*croix pour fermer*/ #SBNotifications>div>div>span{position:absolute;right:.25em;top:.25em;width:1.5em;height:1.5em;text-align:center;cursor:pointer;} #SBNotifications>div>div>span::before, #SBNotifications>div>div>span::after{content:'';width:2px;background:black;height:100%;position:absolute;left:calc(50% - 1px);top:.25em;height:calc(100% - .5em);opacity:.5;transition:opacity 300ms ease-out;} #SBNotifications>div>div>span:hover::before, #SBNotifications>div>div>span:hover::after{opacity:.75;} #SBNotifications>div>div>span::before{transform:rotate(45deg);} #SBNotifications>div>div>span::after{transform:rotate(-45deg);} /* Titre */ #SBNotifications>div>div>h1{margin:0;font-size:1em;font-weight:normal;letter-spacing:.1em;} #SBNotifications>div>div>h1>span{display:inline-block;max-width:calc(100% - 1.75em);vertical-align:middle;} #SBNotifications>div>div>span+h1>span{padding-right:.75em;} #SBNotifications>div.erreur>div>h1::before, #SBNotifications>div.succes>div>h1::before, #SBNotifications>div.info>div>h1::before, .SBAttention::before, .SBInformation::before, #SBNotifications>div.message>div>h1::before{content:'';width:1em;height:1em;display:inline-block;vertical-align:middle;margin:-.25em .5em -.25em -.25em;padding:.25em;background-size:100%;background-position:center;background-repeat:no-repeat;transition:all 300ms ease-out;mask-position:center;mask-repeat:no-repeat;mask-size:100%;mask-mode:alpha;} #SBNotifications>div.erreur>div>h1, .SBAttention{color:var(--color-notif-erreur);} #SBNotifications>div.succes>div>h1{color:var(--color-notif-succes);} #SBNotifications>div.info>div>h1, .SBInformation{color:var(--color-notif-info);} #SBNotifications>div.message>div>h1{color:var(--color-notif-message);} .SBAttention::before{background-color:var(--color-notif-erreur);mask-image:url('/_ico/attention.svg');} #SBNotifications>div.erreur>div>h1::before{background-color:var(--color-notif-erreur);mask-image:url('/_ico/erreur.svg');} #SBNotifications>div.succes>div>h1::before{background-color:var(--color-notif-succes);mask-image:url('/_ico/succes.svg');} .SBInformation::before, #SBNotifications>div.info>div>h1::before{background-color:var(--color-notif-info);mask-image:url('/_ico/info.svg');} #SBNotifications>div.message>div>h1::before{background-color:var(--color-notif-message);mask-image:url('/_ico/enveloppe.svg');} /* Éventuel contenu */ #SBNotifications>div>div>h1+div{margin:.5em -.5em 0 -.5em;padding:.5em .5em 0 .5em;box-shadow:0 .5em .5em -.5em rgba(0,0,0,.33) inset;opacity:.75;} #SBNotifications>div>div>h1+div>b{padding-right:.5em;} /* SBInformation */ .SBAttention, .SBInformation{text-align:justify;position:relative;border-radius:var(--radius);border:1px solid;padding:var(--pad-itm-list);} .SBInformation::before, .SBAttention::before{vertical-align:baseline;} .SBInformation::after, .SBAttention::after{content:'';position:absolute;inset:0;opacity:.1;pointer-events:none;z-index:0;} .SBInformation::after{background-color:var(--color-notif-info);} .SBAttention::after{background-color:var(--color-notif-erreur);} @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap'); :root{ --h2-font-size:1.4em; --footer-height:6em; --header-logo-height:4em; --header-font-size:.6; --header-wrap-pt:0; --header-wrap-pb:2; --header-item-pt:1; --header-item-pb:1; --date-jour-size:.8; --date-numero-size:2; --date-mois-size:1; --date-lh:1; --header-height: calc( ( var(--header-wrap-pt) + /*var(--header-wrap-pb) +*/ var(--header-item-pt) + var(--header-item-pb) + (var(--date-jour-size) * var(--date-lh)) + (var(--date-numero-size) * var(--date-lh)) + (var(--date-mois-size) * var(--date-lh)) ) * var(--header-font-size) * 1em + var(--header-logo-height) ); } /* Clear & général */ html,body{width:100%;height:100%;margin:0;padding:0;} body{font-family:"Source Sans 3",sans-serif;} /* Accueil : Zone de contenu */ body>main{z-index:0;position:relative;width:100%;height:100%;color:var(--txt);} /* Les fonds */ body>main>.SBImage{position:absolute;inset:0;pointer-events:none;transition:all 300ms ease-out;opacity:0;} body>main>.SBImage.focus{opacity:1;} #asseyrades_fond{position:absolute;inset:0;opacity:1;pointer-events:none;background-color:var(--col1,white);background-image:linear-gradient(var(--deg,180deg),var(--col1) 0, var(--col2) 100%);transition:all 300ms ease-out;} #asseyrades_fond.isImage{opacity:.85;} /* Accueil : Header - Menu des dates */ main>header{white-space:nowrap;overflow:auto;position:fixed;top:0;left:0;right:0;text-align:center;z-index:1;} /* Logo Asseyras */ #logo_icone{ mask-image:var(--img-logo-black); mask-position:center; mask-repeat:no-repeat; mask-size:100%; mask-mode:alpha; background-color:var(--txt); aspect-ratio:2;max-width:100%;height:var(--header-logo-height);display:inline-block;vertical-align:top;} /* MENU (=HEADER -> TODO changer en nav? ou header>nav ?) */ main>header>div{ text-align:center; max-width:100%; box-sizing:border-box; font-size:calc(var(--header-font-size) * 1em); padding:calc(var(--header-wrap-pt) * 1em) 0 calc(var(--header-wrap-pb) * 1em) 0; } main>header>div>div{ display:inline-block;vertcal-align:top; box-shadow:0 2em 2em -2em rgba(0,0,0,.5); padding:0 1em; } main>header>div>div>div{ display:inline-block; vertical-align:middle; padding:calc(var(--header-item-pt) * 1em) 0 calc(var(--header-item-pb) * 1em) 0; box-sizing:border-box; width:6em; cursor:pointer; } /* Le pied de page TODO */ main>footer{text-align:center;position:absolute;bottom:0;left:0;right:0;} main>footer>div{width:22em;max-width:calc(100% - 4em);box-sizing:border-box;display:inline-block;vertical-align:top;height:6em;border-radius:.5em .5em 0 0;box-shadow:0 -2em 2em -2em rgba(0,0,0,.5),-2em 0 2em -2em rgba(0,0,0,.5),2em 0 2em -2em rgba(0,0,0,.5);background-color:var(--col1,white);background-image:linear-gradient(var(--deg,180deg),var(--col1) 0, var(--col2) 100%);background-attachment:fixed;transition: all 300ms ease-out; background: var(--txt); color: var(--col2,var(--col1)); } main>footer>div:hover{box-shadow:0 -1em 1em -1.5em rgba(0,0,0,.5), -1em 0 1em -1.5em rgba(0,0,0,.5), 1em 0 1em -1.5em rgba(0,0,0,.5);} main>footer .SBInput, main>footer input[type="button"]{box-sizing:border-box;height:100%;width:100%;font-weight:bold;padding:0;font-size:1.25em;} main>footer input[type="button"]{box-shadow:none;background:transparent;transform-origin:center;text-transform:uppercase;letter-spacing:.2em;transition:all 300ms ease-out;animation:pulse 1.4s ease-in-out infinite;transform-origin:bottom center;} main>footer>div:hover input[type="button"]{text-decoration:underline;} @keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} } .phrase-sanitaire{flex:0 0 100%;text-align:center;font-size:.8em;letter-spacing:.02em;} /* Les titres */ h2{font-size:1.5em;text-align:left;font-weight:normal;margin:0;} main h2{text-align:center;text-transform:uppercase;font-weight:bold;font-size:var(--h2-font-size);filter:var(--shdw-txt);} #SBFen h2{margin-top:1em;padding:0 .25em .5em .25em;} h3{margin:0;text-align:left;font-weight:bold;font-size:1.1em;} /* Les inputs & boutons */ .SBInput{position:relative;} .SBInput>input,textarea{width:100%;box-sizing:border-box;} textarea{padding:1em 1.5em;} .SBInput>input+label{position:absolute;left:calc(1.5em + 1px);bottom:calc(.25em + 1px);font-size:1em;line-height:1.2em;transition:all 300ms ease-out;} .SBInput>input+label>span{font-size:.75em;line-height:1.2em;transition:all 300ms ease-out;} .SBInput>input:placeholder-shown+label{bottom:calc(1em + 1px);} .SBInput>input:placeholder-shown+label>span{font-size:1em;} .SBInput>input{padding:.75em 1.5em 1.25em 1.5em;font-size:1em;line-height:1.2em;transition:all 300ms ease-out;} .SBInput>input:placeholder-shown{padding:1em 1.5em;} /* Radio & Checkbox */ .SBInput>input[type="radio"]+label, .SBInput>input[type="checkbox"]+label{padding:1em 1.5em 1em 2em;position:static;display:block;cursor:pointer;} .SBInput>input[type="radio"]+label>span, .SBInput>input[type="checkbox"]+label>span{font-size:1em;} .SBInput>input[type="radio"], .SBInput>input[type="checkbox"]{margin:0;width:1em;height:1em;position:absolute;left:0;top:50%;transform:translateY(-50%);} /* Boutons */ input[type="button"], input[type="submit"], button[type="button"], button[type="submit"], button{color:inherit;border-radius:.5em;background-image:linear-gradient(-45deg,rgba(0,0,0,0.03),rgba(255,255,255,0.03) 50%),linear-gradient(45deg,rgba(0,0,0,0.03),rgba(255,255,255,0.03) 50%);box-shadow:-.4em -.4em .6em 0 rgba(255,255,255,0.1),.4em .4em .6em 0 rgba(0,0,0,0.1);font-size:1.25em;padding:1.5em 2.5em;border:none;cursor:pointer;transition:all 300ms ease-out; padding: 1.25em 1.75em; line-height: 1em; } input[type="button"]:hover, input[type="submit"]:hover, button[type="button"]:hover, button[type="submit"]:hover, button:hover{background-size:500% 500%,100% 100%;box-shadow:-.5em -.5em .75em -.25em rgba(255,255,255, 0.05),.5em .5em .75em -.25em rgba(0,0,0,0.05);} input[type="submit"], button[type="submit"]{background-color:rgb(177,0,45);color:white;} /* L'affichage des images */ .SBImage span.copyright{position:absolute;bottom:.5em;right:.5em;} .ASS_evt_img .SBImage, .fen_evt_lab .SBImage>img{border-radius:.25em;filter:var(--shdw-img);} /* L'affichage des dates */ .SBDate{filter:var(--shdw-txt);text-align:center;} .SBDate>div{line-height:var(--date-lh);} .SBDate>div:first-child{font-size:calc(var(--date-jour-size) * 1em);text-transform:lowercase;} .SBDate>div:first-child+div{ font-size:calc(var(--date-numero-size) * 1em);} .SBDate>div:first-child+div+div{font-size:calc(var(--date-mois-size) * 1em);text-transform:uppercase;} .SBDate>span{display:block;padding-top:.5em;} /* Page Accueil : L'affichage des événements */ .SBContent_evt{box-sizing:border-box;margin:auto;height:calc(100vh - var(--header-height));position:relative;top:var(--header-height);width:100%;} .SBContent_evt::before{content:'';vertical-align:middle;height:100%;display:inline-block;} .SBContent_evt>div{vertical-align:middle;display:inline-block;width:100%;} /* Un item événement */ .ASS_evt{display:flex;width:100%;gap:1rem;align-items:stretch;box-sizing:border-box;position:relative;overflow:auto;padding:2em calc((100% - min(1200px,100%)) / 2 + 1em);padding-bottom:calc(var(--footer-height) + 2em);} /* Variante si image à droite */ .ASS_evt--reverse{flex-direction:row-reverse;} /* Les item en "surbrillance" */ .ASS_evt .SBDate, .ASS_evt_acts>div, .ASS_evt_type, .ASS_evt_tags>div{background:var(--txt);color:var(--col2,var(--col1));filter:var(--shdw-txt);opacity:.75;border-radius:.25em;/*box-shadow:0 0 1em rgba(0,0,0,.25);*/} /* shdw-img,shdw-txt */ /* Date */ .ASS_evt .SBDate{font-weight:bold;padding:.5em 1em;font-size:1.5em;display:inline-block;vertical-align:bottom;} /* Tarifs & Horaires */ .ASS_evt .SBDate+div{display:inline-block;vertical-align:bottom;text-align:left;padding-bottom:.5em;} .ASS_evt_heure, .ASS_evt_tarif{padding-top:.5em;} .ASS_evt_heure>div:last-child, .ASS_evt_tarif>div:not(:first-child)>span{font-size:1.75em;font-weight:bold;line-height:.9em;} .ASS_evt_tarif>div:not(:first-child){font-weight:bold;} .ASS_evt_heure>div:first-child, .ASS_evt_tarif>div:first-child{line-height:.9em;} /* "Pastille" type d'événement */ .ASS_evt_type{position:absolute;right:1em;top:1em;padding:.5em 1.5em;text-transform:uppercase;font-weight:bold;} /* Image & logo */ .ASS_evt_img{flex:0 0 calc(70% - .5rem);aspect-ratio:1.618;max-height:100%;transition:all 300ms ease-out;position:relative;} .ASS_evt_img>.SBImage{width:100%;height:100%;overflow:hidden;} .ASS_evt_logo{aspect-ratio:1.618;width:100%;filter:var(--shdw-img);margin-top:-4em;} .ASS_evt_logo>.SBImage{width:100%;height:100%;} /* Les information à droite */ .ASS_evt_infos{padding-bottom:1em;display:flex;flex-direction:column;flex:1 1 calc(30% - .5rem);gap:.5rem;justify-content:space-between;text-align:center;transition:all 300ms ease-out;} .ASS_evt_infos>div, .ASS_evt_acts>div, .ASS_evt_prestataire_img{display:flex;flex-wrap:wrap;justify-content:start;align-items:end;gap:1em;} /* Les activités */ .ASS_evt_acts>div{align-items:center;gap:.5em;padding:.5em;text-align:left;} .ASS_evt_acts>div>h3{text-transform:uppercase;text-align:center;} .ASS_evt_acts .SBImage{width:7em;} /* Les "Tags" */ .ASS_evt_tags{text-align:left;margin:-.5em;} .ASS_evt_tags>div{padding:.5em 1.5em;text-transform:uppercase;font-weight:bold;width:auto;display:inline-block;margin:.5em;flex:0 0 100%;} /* Les descriptions */ .ASS_evt_txt{flex:1 1 calc(70% - .5rem);width:70%;text-align:justify;font-size:1.4em;} .ASS_evt_txt a{font-weight:bold;text-decoration:underline;color:inherit;} .ASS_evt_txt>section{margin:1em 0;} /* Les titres de section */ .ASS_evt_txt>section>div:first-child:not(:last-child){height:4em;padding:.25em 0;margin-bottom:1em;box-shadow:0 1em 1em -1em rgba(0,0,0,.2),0 -1em 1em -1em rgba(0,0,0,.2);} .ASS_evt_txt>section>div:first-child:not(:last-child)::before{content:'';display:inline-block;height:100%;vertical-align:middle;} .ASS_evt_txt>section h3{display:inline-block;vertical-align:middle;width:100%;text-transform:uppercase;font-weight:lighter;letter-spacing:.1em;font-size:calc(var(--h2-font-size) - .5em);} .ASS_evt_txt>section .SBImage+h3{width:calc(100% - 4.5em);} .ASS_evt_txt>section>div:first-child:not(:last-child) .SBImage{filter:var(--shdw-txt);width:4em;aspect-ratio:1;display:inline-block;vertical-align:middle;margin-right:.5em;} /* Les contenus de section */ .ASS_evt_txt>section>div:not(:first-child), .ASS_evt_txt>section>div:first-child:last-child{padding:0 0 1em 0;} .ASS_evt_txt>section>div:not(:first-child) .SBImage, .ASS_evt_txt>section>div:first-child:last-child .SBImage{width:8em;aspect-ratio:1;filter:var(--shdw-txt);} /* Passage en mode portrait / écran étroit */ @media (max-width:768px){ .ASS_evt{flex-direction:column;} .ASS_evt--reverse{flex-direction:column-reverse;} .ASS_evt_img{flex:none;width:100%;min-height:0;} .ASS_evt_infos, .ASS_evt_txt{flex:none;width:100%;} .ASS_evt_infos>div{align-items:start;} } @media (min-width:768px){ main h2{flex:0 0 100%;} .ASS_evt{flex-wrap:wrap;} .ASS_evt_txt{flex:0 0 calc(70% - .5rem);} .ASS_evt_infos{position:sticky;top:-1em;} .ASS_evt_logo{margin-top:0;} } /* Le slider */ .SBSlide{overflow:hidden;position:relative;box-sizing:border-box;} .SBSlide_track{display:flex;flex-wrap:nowrap;will-change:transform;} .SBSlide_item{flex:0 0 100%;box-sizing:border-box;min-width:0;} .SBContent_evt>div, .SBContent_evt .SBSlide, .SBContent_evt .SBSlide_track, .SBContent .SBSlide_item, .ASS_evt{height:100%;} /* Les fenêtres */ #SBFen .SBInput:not([data-transparent]){color:black;} #SBFen footer{text-align:right;} .fen_evt .ASS_evt_tarif{font-size:.7em;} .fen_evt h3{margin:0 0 .5em 0;} .fen_evt, .fen_act{position:relative;display:grid;gap:.75em;box-sizing:border-box;} .fen_evt{background-color: var(--col1,white);background-image: linear-gradient(var(--deg,180deg),var(--col1) 0, var(--col2) 100%);color:var(--txt,'rgb(0,0,0)');border-radius:.5em;margin-bottom:.5em;padding:1em;} .fen_act{padding-top:1em;} .fen_evt>label, .fen_act>label{display:block;width:100%;cursor:pointer;} .fen_evt>label+.SBInput, .fen_act>label+.SBInput{position:absolute;top:1.5em;left:1em;pointer-events:none;} .fen_act>label+.SBInput{left:0;} .fen_evt>label+.SBInput>input, .fen_act>label+.SBInput>input{width:2em;height:2em;box-sizing:border-box;margin:0;transform:none;top:0;} .fen_evt_lab{display:grid;grid-template-columns:1fr;gap:.75em;align-items:stretch;position:relative;} .fen_evt_lab .SBDate{width:100%;} .fen_evt_lab .SBImage{width:100%;aspect-ratio:1.618;} .fen_evt_lab .SBImage+.SBImage{position:absolute;top:-1.4em;right:-1.4em;width:3.5em;aspect-ratio:1;} .fen_evt_info{min-width:0;grid-column:1 / -1;} .fen_evt_selected{display:none;} [data-checked]>.fen_evt_selected{display:block;} .fen_evt_form{display:grid;grid-template-columns:1fr;gap:.5em;} .fen_evt_form>div:first-child{display:grid;grid-template-columns:1fr;gap:.5em;} .fen_evt_form>div.adulteOnly:first-child{display:block;} .fen_evt_form .SBInput{font-size:.8em;} .fen_evt_form textarea{height:100%;} @media(min-width:20em){ .fen_evt_lab{grid-template-columns:5em 1fr;} .fen_evt_lab:not(.recap){margin-left:2.5em;} .fen_evt_lab .SBDate{width:5em;} .fen_evt_form{margin-left:2.5em;} .fen_evt_form>div:first-child{grid-template-columns:calc(50% - .25em) calc(50% - .25em);} } @media(min-width:35em){ .fen_evt_lab{grid-template-columns:5em 10em 1fr;} .fen_evt_info{grid-column:initial;} .fen_evt_form{grid-template-columns:8em 1fr;gap:1em;} .fen_evt_form>div:first-child{grid-template-columns:1fr;} } .Fenetre18plus{position:fixed;inset:0;padding:1em;color:black;text-align:center;z-index:1;opacity:1;transition:all 300ms ease-out;} .Fenetre18plus[data-ok]{opacity:0;pointer-events:none;} .Fenetre18plus::after, .Fenetre18plus>div>span::before{content:'';display:inline-block;vertical-align:middle;height:100%;} .Fenetre18plus::before{content:'';position:absolute;inset:0;background-color:rgba(0,0,0,.05);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .Fenetre18plus>div{ position:relative;border-radius:.5em; box-shadow:var(--bx-shdw-itm-x) var(--bx-shdw-itm-y) var(--bx-shdw-itm-l) var(--bx-shdw-dark); width:600px;max-width:100%;max-height:100%;box-sizing:border-box;background:white; display:inline-block;vertical-align:middle;padding:1em 1em .25em 1em; } .Fenetre18plus .SBInput{display:inline-block;vertical-align:top;width:100%;box-sizing:border-box;padding:.5em;} @media screen and (min-width:30em){.Fenetre18plus .SBInput{width:50%;}} .Fenetre18plus .SBInput>button{width:100%;} .Fenetre18plus .SBInput+.SBInput>button{background-color:rgb(177,0,45);color:white;} .Fenetre18plus>div>span{ width: 5em; height: 5em; display: inline-block; border: .5em solid rgb(51,51,51); border-radius: 50%; } .Fenetre18plus>div>span>span{ font-size:1.8em; font-weight: bold; display:inline-block;vertical-align:middle; } .Fenetre18plus p{ font-size:1.2em; } .Fenetre18plus .phrase-sanitaire{ margin-top:1em; } /*#SBFen button[type="submit"], #SBFen button[type="button"]{ margin:.25em; padding:1em .5em; width:auto; max-width:calc(100% - .5em); text-align:left; box-sizing:border-box; }*/ .fen_evt_recap{ text-align:center; } .fen_evt_cpt{ display: inline-block; vertical-align: top; font-size: 1.5em; padding:.25em .5em; } .fen_evt_cpt>span{ font-size: 2em; padding: 0 .25em; vertical-align: sub; } .merci{ text-align: center; font-size: 1.5em; padding: .5em; } .margin-bottom{margin-bottom:1em;} .margin-top{margin-top:1em;} /* Template du formulaire client */ .formClientNom{font-size:1.2em;text-align:center;grid-column:1 / -1;} .formClientNom>span{font-size:1.2em;font-weight:bold;} [data-client]{display:grid;grid-template-columns:repeat(12,1fr);gap:.75em;padding:.75em 0;} [data-client] .SBInput{min-width:0;} [data-form='client'] .SBInput{min-width:0;} [data-name='nom'], [data-name='prenom']{grid-column:span 6;} [data-name='telephone']{grid-column:span 4;} [data-name='email'], [data-name='accepteNewsletter']{grid-column:1 / -1;} [data-name='telephone']+[data-name='email']{grid-column:span 8;} [data-name='codePostal']{grid-column:1 / span 3;} [data-name='ville']{grid-column:span 9;} [data-name='addrLigne1'], [data-name='addrLigne2'], [data-name='addrLigne3']{grid-column:1 / -1;} [data-form='client'] input{width:100%;box-sizing:border-box;} [data-client-email]{position:relative;} [data-client-email] input, [data-client-email] button{width:100%;box-sizing:border-box;} [data-client-email]>[data-mode="button"]{position:absolute;top:.25em;right:.25em;width:3em;height:3em;} [data-client-email]>[data-mode="button"]>input{background-color:rgb(177,0,45);color:white;padding:0;border-radius:50%;height:100%;width:100%;box-sizing:border-box;} @media(max-width:600px){ [data-name='nom'], [data-name='prenom'], [data-name='email'], [data-name='telephone'], [data-name='cp'], [data-name='ville']{grid-column:1 / -1;} [data-client-email]{grid-template-columns:1fr 3.5em;} } /* [data-form='client']{ display:grid; grid-template-columns:repeat(12,1fr); gap:.75em; } */ /* #SBFen button[type="submit"]::after, #SBFen button[type="button"]::before{content:'';display:inline-block;vertical-align:middle;width:1.5em;height:1.5em;background-repeat:no-repeat;background-position:center;background-size:1.5em;} #SBFen button[type="button"]{text-align:left;padding:1em 1.5em 1em .5em;} #SBFen button[type="submit"]{text-align:right;padding:1em .5em 1em 1.5em;background-color:rgb(177,0,45);color:white;} #SBFen button[type="submit"]::after{background-image:url('/_ico/chevron-droite/255,255,255');margin-left:.5em;} #SBFen button[type="button"]::before{background-image:url('/_ico/chevron-gauche/0,0,0');margin-right:.5em;} */ /* .fen_evt{ box-sizing: border-box; position:relative; margin:.5em 0; background-color: var(--col1,white); background-image: linear-gradient(var(--deg,180deg),var(--col1) 0, var(--col2) 100%); color:var(--txt,'rgb(0,0,0)'); border-radius:.5em; margin-left:2.5em; margin-right:.25em; } .fen_evt.fs{margin:1em 0 .5em 0;} .fen_evt h3{text-align:left;} .fen_evt .SBDate{ width:5em; } .fen_evt label, .fen_evt.fs>div{ display:flex; width:100%; gap:.75rem; align-items:stretch; padding:.75em .5em; box-sizing:border-box; position:relative; flex-wrap: wrap; align-items: center; } .fen_evt label{cursor:pointer;} .fen_evt .SBimage{ background-position:center; background-repeat:no-repeat; background-size:cover; flex:0 0 8em; display:flex; flex-direction:column; gap:.5rem; justify-content:space-between; text-align:center; aspect-ratio:1.618; } .fen_evt .SBimage .SBimage{ width: 5em; position: absolute; bottom: -.25em; right: -.75em; } .fen_evt .fen_evt_info{ flex: 1 1 auto; } .fen_evt input[type="checkbox"]{position:absolute;left:-2.5em;top:50%;transform:translateY(-1em);width:2em;height:2em;margin:0;} .fen_evt_form{display:none;padding:0 0 0 1em;flex-wrap:wrap;} .fen_evt[data-checked] .fen_evt_form{display:flex;} .fen_evt_form input, .fen_evt_form textarea{margin:0;width:100% !important;} .fen_evt_form textarea{height:100%;} .fen_evt_form label{padding:.5em 0 0 0;} .fen_evt_form>div{flex:0 0 auto;padding-bottom:1em;} .fen_evt_form>div:last-child{padding-right:1em;} .fen_evt_form>div>div{padding-right:1em;} .fen_evt_nbClient{padding:1rem;font-weight:bold;} .fen_evt_nbClient>span{padding:.5rem;font-size:2em;} .fen_evt .SBImage{width:100%;height:100%;} */ /*.fen_evt_form textarea{flex:1 1 100%;}*/ /* .SBfenetre{ position:fixed;inset:0; background:rgba(255,255,255,0.5); text-align:center; padding:1em; z-index:2; } .SBfenetre::before{content:'';display: inline-block; vertical-align: middle;height:100%;} .SBfenetre>div{ background: white; color: black; padding:0; border-radius: .5em; width: 800px; margin: auto; display: inline-block; vertical-align: middle; max-width: 100%; max-height:100%; box-sizing:border-box; overflow:auto; } .SBfenetre{transition:all 300ms ease-out;} .SBfenetre.chargement{opacity:0;} .SBfenetre h2{font-weight:normal;text-shadow:none;color:black;filter:none;} .SBfenetre input.no-margin{width:calc(100% - 1em) !important;margin:.5em !important;} .SBfenetre>div{position:relative;} .SBfenetre>div>span.icone.ico_croix{ width: 3em; height: 3em; top: .5em; right: .5em; position: absolute; background-color: white; content: "x"; cursor: pointer; background-image: url('/_ico/croix'); background-size: 1.5em; background-position: center; border: 1px solid rgba(0,0,0,.1); background-repeat: no-repeat; border-radius: 5px; } .SBfenetre button[type="submit"], .SBfenetre button[type="button"]{ margin:.25em; padding:1em .5em; width:auto; max-width:calc(100% - .5em); text-align:left; box-sizing:border-box; } .SBfenetre button[type="submit"]::after, .SBfenetre button[type="button"]::before{content:'';display:inline-block;vertical-align:middle;width:1.5em;height:1.5em;background-repeat:no-repeat;background-position:center;background-size:1.5em;} .SBfenetre button[type="button"]{text-align:left;padding:1em 1.5em 1em .5em;} .SBfenetre button[type="submit"]{text-align:right;padding:1em .5em 1em 1.5em;background-color:rgb(177,0,45);color:white;} .SBfenetre button[type="submit"]::after{background-image:url('/_ico/chevron-droite/255,255,255');margin-left:.5em;} .SBfenetre button[type="button"]::before{background-image:url('/_ico/chevron-gauche/0,0,0');margin-right:.5em;} .SBfenetre h2{ font-size: 1.5em; text-align: left; padding: 0 .25em; text-transform: none; } .SBfenetre h1{margin:0;} .SBfenetre header{ position: sticky; top: 0; margin: 0; z-index: 1; background: white; padding: 1.5em 0 1em 0; box-shadow: 0 0 2em rgba(0,0,0,.15); } .SBfenetre div.footer{ box-shadow: 0 -2em 2em -2em rgba(0,0,0,.15); margin-top: 2em; padding: 1em 0 0 0; text-align:right; } .SBfenetre header>span{ position: absolute; right: 1.25em; top: 1.25em; width: 3em; height: 3em; background-color: white; border-radius: .5em; border: 1px solid rgba(0,0,0,.25); background-image: url('_ico/croix'); background-size: 1.5em; background-repeat: no-repeat; background-position: center; cursor: pointer; } */