/* Theme Name: Derriere Le Rideau Theme URI: https://www.derrierelerideau.fr Author: WERA Author URI: https://wera-agency.org Description: Theme sur-mesure de Derriere Le Rideau : charte bordeaux et or, parcours d'entree au rideau, agenda des soirees et espace abonnes. Ecrit a la main, sans constructeur de pages. Version: 1.12.1 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: derriere-le-rideau */ /* ----------------------------------------------------------------------- PRODUIT par theme/build.py. Ne pas modifier a la main : retoucher le site reconstruit (refonte/generate.py et refonte/index.html), puis reconstruire. ----------------------------------------------------------------------- */ /* ===== pages interieures (generate.py) ===== */ :root{--or:#e6c67e;--or-b:#b8912f;--rouge:#b3122a;--texte:#e9ddcb;--creme:#f3ead9;--noir:#0b0607; --display:"Playfair Display",Georgia,serif;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost","Montserrat",Arial,sans-serif} *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--noir);color:var(--texte);font-family:var(--sans);overflow-x:hidden} a{text-decoration:none;color:inherit}img{display:block;max-width:100%} .wrap{max-width:1240px;margin:0 auto;padding:0 24px} .hdr{position:sticky;top:0;z-index:15;display:flex;justify-content:space-between;align-items:center;padding:14px 26px; background:linear-gradient(180deg,rgba(11,6,7,.96),rgba(11,6,7,.72));backdrop-filter:blur(6px);border-bottom:1px solid rgba(184,145,47,.25)} .menu{display:flex;align-items:center;gap:10px;letter-spacing:.24em;font-size:11px;text-transform:uppercase;cursor:pointer} .menu .b{display:inline-flex;flex-direction:column;gap:4px}.menu .b span{width:24px;height:2px;background:var(--texte);opacity:.85} .hdr .logo{height:46px;width:auto;filter:drop-shadow(0 0 14px rgba(230,198,126,.35))} .cnx{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--or-b);color:var(--or);padding:8px 15px;border-radius:30px; letter-spacing:.18em;font-size:10px;text-transform:uppercase;transition:background .2s} .cnx:hover{background:rgba(230,198,126,.12)}.cnx svg{width:13px;height:13px;fill:var(--or)} .hdr-r{display:flex;align-items:center;gap:12px} .organiser{display:inline-flex;align-items:center;gap:8px;background:var(--or);color:#160b06;padding:9px 18px;border-radius:30px; letter-spacing:.16em;font-size:10px;text-transform:uppercase;font-weight:500;transition:background .25s} .organiser:hover{background:#f0d89c} .organiser svg{width:13px;height:13px;fill:#160b06} @media(max-width:980px){.organiser span{display:none}.organiser{padding:9px 12px}} .navover{position:fixed;inset:0;z-index:40;background:rgba(8,4,5,.965);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;visibility:hidden;transition:opacity .35s} .navover.open{opacity:1;visibility:visible} .navover a{font-family:var(--serif);color:var(--texte);font-size:clamp(22px,3.2vw,38px);letter-spacing:.06em;transition:color .2s,letter-spacing .2s} .navover a:hover{color:var(--or);letter-spacing:.12em} .navover .sep{width:64px;height:1px;margin:4px 0;background:linear-gradient(90deg,transparent,var(--or-b),transparent)} .navover .close{position:absolute;top:22px;right:28px;width:46px;height:46px;border:1px solid var(--or-b);border-radius:50%;background:rgba(10,6,7,.4);color:var(--or);font-size:20px;cursor:pointer} .ptitle{text-align:center;margin:38px 0 6px} .ptitle h1{font-family:var(--serif);color:var(--or);font-weight:600;font-size:clamp(30px,5vw,54px);letter-spacing:.04em} .ptitle p{color:var(--texte);opacity:.7;font-size:13px;letter-spacing:.22em;text-transform:uppercase;margin-top:6px} .rub{display:flex;align-items:center;gap:16px;margin:44px 0 20px} .rub h2{font-family:var(--serif);color:var(--or);font-weight:600;font-size:clamp(22px,3vw,32px);white-space:nowrap;letter-spacing:.03em} .rub .line{flex:1;height:1px;background:linear-gradient(90deg,var(--or-b),transparent)} .rub .all{color:var(--or);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;white-space:nowrap} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .card{background:#140c0d;border:1px solid rgba(184,145,47,.22);border-radius:12px;overflow:hidden;transition:transform .25s,border-color .25s;display:flex;flex-direction:column} .card:hover{transform:translateY(-5px);border-color:rgba(230,198,126,.55)} .card .thumb{aspect-ratio:16/10;background:#0d0708 center/cover no-repeat;position:relative} .card .tag{position:absolute;top:10px;left:10px;background:rgba(10,6,7,.75);color:var(--or);border:1px solid var(--or-b);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:20px} .card .body{padding:15px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1} .card .date{color:var(--or);opacity:.75;font-size:10px;letter-spacing:.12em;text-transform:uppercase} .card h3{font-family:var(--serif);color:var(--texte);font-weight:600;font-size:20px;line-height:1.2} .card p{color:var(--texte);opacity:.62;font-size:12.5px;line-height:1.5} .hero{position:relative;border-radius:16px;overflow:hidden;margin-top:26px;min-height:360px;display:flex;align-items:flex-end;background:#0d0708 center/cover no-repeat;border:1px solid rgba(184,145,47,.3)} .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,6,7,.1) 30%,rgba(11,6,7,.92))} .hero .h-in{position:relative;padding:34px;max-width:760px} .hero .tag{color:var(--or);font-size:11px;letter-spacing:.18em;text-transform:uppercase} .hero h2{font-family:var(--serif);color:#fff;font-weight:600;font-size:clamp(26px,4vw,46px);line-height:1.08;margin:8px 0} .hero p{color:var(--texte);opacity:.85;font-size:15px;line-height:1.6;max-width:620px} .hero .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--or);border:1px solid var(--or);padding:10px 20px;border-radius:30px;font-size:11px;letter-spacing:.16em;text-transform:uppercase} .foot{margin-top:60px;border-top:1px solid rgba(184,145,47,.25);padding:30px 24px;text-align:center;color:#6b625a;font-size:11px} .foot a{color:#8d8175;margin:0 8px;letter-spacing:.1em}.foot a:hover{color:var(--or)} .foot .fdr{font-family:var(--serif);color:var(--or);font-size:20px;letter-spacing:.2em;margin-bottom:10px} /* Article / rubrique */ .back{display:inline-block;margin:24px 0 0;color:var(--or);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.85} .arthead{max-width:820px;margin:10px auto 0;text-align:center} .arthead .tag{color:var(--or);font-size:11px;letter-spacing:.18em;text-transform:uppercase} .arthead h1{font-family:var(--serif);color:#fff;font-weight:600;font-size:clamp(28px,4.4vw,50px);line-height:1.1;margin:10px 0 8px} .arthead .date{color:var(--or);opacity:.75;font-size:11px;letter-spacing:.14em;text-transform:uppercase} .artcover{max-width:960px;margin:24px auto 0;border-radius:14px;overflow:hidden;border:1px solid rgba(184,145,47,.3)} .legalw,.article{max-width:820px} .legal,.article{line-height:1.78;font-size:15.5px;color:#d8ccbb;margin:26px auto 0} .legal h1,.legal h2,.legal h3,.legal h4,.article h1,.article h2,.article h3,.article h4{font-family:var(--serif);color:var(--or);margin:26px 0 12px;font-weight:600;line-height:1.2} .legal h2,.article h2{font-size:26px}.legal h3,.article h3{font-size:20px} .legal p,.article p{margin:0 0 15px} .legal a,.article a{color:var(--or);text-decoration:underline} .legal ul,.legal ol,.article ul,.article ol{margin:0 0 15px 22px}.legal li,.article li{margin:6px 0} .legal strong,.article strong,.legal b,.article b{color:#f0e6d4} .legal img,.article img{margin:16px auto;border-radius:10px;max-width:100%;height:auto} .legal table,.article table{width:100%;border-collapse:collapse;margin:14px 0} .legal td,.legal th,.article td,.article th{border:1px solid rgba(184,145,47,.3);padding:8px} .article iframe{max-width:100%;margin:16px auto;display:block;border-radius:10px;aspect-ratio:16/9;width:100%} /* Formulaire contact + connexion */ .cform{display:flex;flex-direction:column;gap:16px;margin:22px auto 0;max-width:560px} .cform label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);opacity:.9} .cform input,.cform select,.cform textarea{background:#140c0d;border:1px solid rgba(184,145,47,.35);border-radius:8px;padding:12px 14px;color:var(--texte);font-family:var(--sans);font-size:15px} .cform input:focus,.cform select:focus,.cform textarea:focus{outline:1px solid var(--or)} .cform .chk{flex-direction:row;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;color:var(--texte);opacity:.82;font-size:13px} .cform button{align-self:center;background:var(--or);color:#1a0e07;border:none;border-radius:30px;padding:13px 40px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:12px;cursor:pointer} .cform .note{font-size:11px;color:#6b625a;text-transform:none;letter-spacing:0;text-align:center} /* Formules */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin:28px 0} .plan{background:#140c0d;border:1px solid rgba(184,145,47,.3);border-radius:14px;padding:28px 22px;text-align:center} .plan h3{font-family:var(--serif);color:var(--or);font-size:24px;margin-bottom:8px} .plan .price{font-family:var(--serif);color:#fff;font-size:38px;margin:10px 0} .plan .price span{font-size:14px;color:var(--texte);opacity:.7} .plan a{display:inline-block;margin-top:16px;border:1px solid var(--or);color:var(--or);padding:11px 26px;border-radius:30px;font-size:11px;letter-spacing:.14em;text-transform:uppercase} /* ===== REVUE LIBERTINE PARISIENNE ===== */ body{background: radial-gradient(120% 80% at 50% -10%, rgba(120,16,30,.20) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(120,16,30,.10) 0%, transparent 60%), #0a0506} /* Bandeau titre de revue */ .masthead{border-bottom:1px solid rgba(184,145,47,.3);border-top:1px solid rgba(184,145,47,.3); padding:26px 0 22px;margin:34px 0 0;text-align:center;position:relative} .masthead .kicker{font-family:var(--sans);font-size:10px;letter-spacing:.48em;text-transform:uppercase;color:var(--or-b)} .masthead h1{font-family:var(--display);font-weight:700;font-style:italic;color:var(--creme); font-size:clamp(40px,7vw,86px);line-height:.95;margin:10px 0 8px;letter-spacing:-.01em} .masthead .sub{font-family:var(--serif);font-style:italic;color:var(--texte);opacity:.72;font-size:clamp(14px,1.6vw,19px)} .masthead .rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;color:var(--or-b);font-size:11px;letter-spacing:.3em;text-transform:uppercase} .masthead .rule::before,.masthead .rule::after{content:"";height:1px;width:74px;background:linear-gradient(90deg,transparent,var(--or-b),transparent)} /* Section : numéro + filet */ .rub{display:flex;align-items:baseline;gap:18px;margin:64px 0 26px;position:relative} .rub .num{font-family:var(--display);font-style:italic;color:var(--rouge);font-size:clamp(30px,4vw,52px);line-height:1;opacity:.9} .rub h2{font-family:var(--display);color:var(--creme);font-weight:600;font-size:clamp(23px,2.9vw,34px);white-space:nowrap;letter-spacing:.01em} .rub .line{flex:1;height:1px;background:linear-gradient(90deg,rgba(184,145,47,.7),transparent);align-self:center} .rub .all{font-family:var(--sans);color:var(--or);font-size:10px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap; border-bottom:1px solid transparent;transition:border-color .25s} .rub .all:hover{border-color:var(--or)} /* Une : mise en page asymétrique (1 grande + 2 petites) */ .feature{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:stretch} .feature .side{display:grid;grid-template-rows:1fr 1fr;gap:26px} /* Cartes façon papier */ .card{background:linear-gradient(180deg,#170d0f,#110a0b);border:1px solid rgba(184,145,47,.18);border-radius:2px; overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s;position:relative} .card::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid transparent;transition:border-color .35s} .card:hover{transform:translateY(-6px);border-color:rgba(230,198,126,.5);box-shadow:0 26px 60px rgba(0,0,0,.6)} .card:hover::after{border-color:rgba(230,198,126,.22)} .card .thumb{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.72) contrast(1.05)} .card:hover .thumb{transform:scale(1.06);filter:saturate(1) contrast(1.05)} .card .tag{background:rgba(11,6,7,.8);border-radius:0;border-color:rgba(230,198,126,.5);letter-spacing:.2em} .card h3{font-family:var(--display);font-weight:600;font-size:19.5px;color:var(--creme);letter-spacing:-.005em} .card .date{font-family:var(--sans);letter-spacing:.2em} .card p{font-family:var(--serif);font-size:14.5px;opacity:.7} /* Une (hero) éditorial */ .hero{border-radius:2px;min-height:520px;border-color:rgba(184,145,47,.28)} .hero::before{background:linear-gradient(180deg,rgba(10,5,6,.25) 0%,rgba(10,5,6,.55) 45%,rgba(10,5,6,.96) 100%)} .hero .tag{font-family:var(--sans);letter-spacing:.3em;font-size:10px} .hero h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.9vw,52px);letter-spacing:-.01em;text-shadow:0 6px 40px rgba(0,0,0,.8)} .hero p{font-family:var(--serif);font-size:16.5px;opacity:.82} .hero .go{border-radius:0;font-family:var(--sans);letter-spacing:.24em;transition:background .3s,color .3s} .hero .go:hover{background:var(--or);color:#160b06} /* Lettrine (articles) */ .article > p:first-of-type::first-letter{font-family:var(--display);font-size:3.5em;float:left;line-height:.82; padding:6px 12px 0 0;color:var(--or)} .article h1,.article h2,.article h3{font-family:var(--display);color:var(--creme)} .arthead h1{font-family:var(--display);font-weight:700;font-style:italic} .ptitle h1{font-family:var(--display);font-style:italic;color:var(--creme)} /* Apparition fluide au défilement */ html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} html.js .rv.in{opacity:1;transform:none} /* Header : filet doré + logo centré */ .hdr{border-bottom:1px solid rgba(184,145,47,.22)} .cnx{border-radius:0;font-family:var(--sans);letter-spacing:.22em} .navover a{font-family:var(--display);font-style:italic} @media(max-width:900px){.feature{grid-template-columns:1fr}.feature .side{grid-template-rows:auto}} /* ===== ABONNEMENT : contenu inclus / non-abonnés ===== */ .inclus,.nonabo{max-width:760px;margin:44px auto 0;padding:30px 34px;border:1px solid rgba(184,145,47,.26)} .nonabo{margin-top:52px;background:rgba(120,16,30,.07)} .inclus h2,.nonabo h2{font-family:var(--display);font-style:italic;font-weight:700;color:var(--creme); font-size:clamp(21px,2.4vw,28px);margin-bottom:14px;text-align:center} .nonabo p{font-family:var(--serif);font-size:15.5px;line-height:1.75;color:var(--texte);opacity:.8; text-align:center;max-width:60ch;margin:0 auto 8px} .nonabo p b{color:var(--or);font-weight:400} .inclus-note{text-align:center;font-family:var(--serif);font-style:italic;color:var(--texte);opacity:.55; font-size:14px;margin-top:14px} .inclus .avantages,.nonabo .avantages{margin:6px 0 0} .nonabo .avantages a{color:var(--or);border-bottom:1px solid rgba(184,145,47,.4)} .reco-tag{font-family:var(--sans);font-style:normal;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase; color:#160b06;background:var(--or);padding:4px 10px;border-radius:20px;vertical-align:middle;margin-left:12px} /* ===== FICHE ÉVÉNEMENT : informations pratiques ===== */ .piments{display:inline-flex;gap:4px;align-items:center;vertical-align:-3px} .piments .piment{width:24px;height:24px;display:block} .ev-infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:820px;margin:30px auto 0; border-top:1px solid rgba(184,145,47,.3);border-bottom:1px solid rgba(184,145,47,.3)} .ev-i{padding:20px 16px;text-align:center;border-right:1px solid rgba(184,145,47,.16)} .ev-i:last-child{border-right:none} .ev-i i{display:block;font-style:normal;font-family:var(--sans);font-size:9px;letter-spacing:.24em; text-transform:uppercase;color:var(--or-b);margin-bottom:9px} .ev-i b{display:block;font-family:var(--display);font-style:italic;font-weight:700;color:var(--creme);font-size:19px;line-height:1.25} /* Photo de la soirée en vignette : le texte garde la vedette */ .ev-vignette{max-width:820px;margin:30px auto 0} .ev-vignette img{width:260px;max-width:38%;height:auto;float:right;margin:4px 0 18px 26px;border-radius:8px; border:1px solid rgba(184,145,47,.35);cursor:zoom-in;transition:border-color .3s} .ev-vignette img:hover{border-color:var(--or)} @media(max-width:640px){.ev-vignette img{float:none;display:block;margin:0 auto 18px;width:210px;max-width:70%}} .ev-cta{max-width:820px;margin:44px auto 0;text-align:center;padding-top:32px;border-top:1px solid rgba(184,145,47,.22);clear:both} .ev-cta .btn-or{margin:0 8px 12px} .btn-lin{display:inline-block;margin:0 8px 12px;color:var(--texte);opacity:.7;border-bottom:1px solid rgba(184,145,47,.4); font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding-bottom:5px;transition:color .25s,opacity .25s} .btn-lin:hover{color:var(--or);opacity:1} .ev-note{margin-top:18px;font-family:var(--serif);font-style:italic;color:var(--texte);opacity:.5;font-size:13.5px;line-height:1.6} /* Filtres de styles (agenda) */ .filtres{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 4px} .filtres button{border:1px solid rgba(184,145,47,.35);background:transparent;color:var(--texte);opacity:.75; padding:9px 20px;border-radius:30px;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;cursor:pointer;transition:all .25s} .filtres button:hover{opacity:1;border-color:var(--or)} .filtres button.on{background:var(--or);color:#160b06;border-color:var(--or);opacity:1} /* ===== CONNEXION ===== */ .login{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:start;margin:52px 0 0} .login .col-form{padding-right:64px} .login .col-abo{padding-left:64px;border-left:1px solid rgba(184,145,47,.22)} .login h2{font-family:var(--display);font-style:italic;color:var(--creme);font-size:clamp(23px,2.6vw,32px); font-weight:700;margin-bottom:8px} .login .intro{font-family:var(--serif);color:var(--texte);opacity:.68;font-size:15.5px;line-height:1.7;margin-bottom:30px} .login .row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 0 26px;flex-wrap:wrap} .login .oubli{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);opacity:.8; border-bottom:1px solid transparent;transition:border-color .25s} .login .oubli:hover{border-color:var(--or-b)} .login .f-chk{margin:0} .avantages{list-style:none;margin:24px 0 30px;padding:0} .avantages li{display:flex;gap:12px;align-items:flex-start;font-family:var(--serif);font-size:15.5px; color:var(--texte);opacity:.82;padding:11px 0;border-bottom:1px dotted rgba(184,145,47,.22);line-height:1.45} .avantages li:last-child{border-bottom:none} .avantages li::before{content:"\2726";color:var(--or-b);font-size:10px;margin-top:6px;flex:none} .login .prix-rappel{font-family:var(--display);font-style:italic;color:var(--or);font-size:clamp(24px,2.8vw,34px); font-weight:700;margin-bottom:6px} .login .prix-rappel small{font-family:var(--sans);font-style:normal;font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--texte);opacity:.5;margin-left:8px} .btn-or{display:inline-block;border:1px solid var(--or);color:var(--or);padding:14px 34px;font-family:var(--sans); font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;transition:background .3s ease,color .3s ease} .btn-or:hover{background:var(--or);color:#160b06} @media(max-width:880px){ .login{grid-template-columns:1fr;gap:46px} .login .col-form{padding-right:0} .login .col-abo{padding-left:0;border-left:none;border-top:1px solid rgba(184,145,47,.22);padding-top:40px} } /* ===== DÉPÔT DE PHOTOS + ENGAGEMENT SUR L'HONNEUR ===== */ .f-file{border:1px dashed rgba(184,145,47,.45);border-radius:10px;padding:22px 20px;text-align:center; transition:border-color .25s,background .25s;background:rgba(184,145,47,.03)} .f-file:hover{border-color:var(--or);background:rgba(184,145,47,.07)} .f-file svg{width:26px;height:26px;fill:var(--or-b);margin-bottom:10px} .f-file input[type=file]{display:block;width:100%;margin:10px auto 0;color:var(--texte);font-family:var(--sans); font-size:12.5px;border:none;padding:0;background:transparent} .f-file input[type=file]::file-selector-button{background:transparent;border:1px solid var(--or-b);color:var(--or); padding:8px 18px;border-radius:30px;font-family:var(--sans);font-size:10px;letter-spacing:.16em; text-transform:uppercase;cursor:pointer;margin-right:12px;transition:background .25s} .f-file input[type=file]::file-selector-button:hover{background:rgba(230,198,126,.14)} .f-file .aide{display:block;font-family:var(--serif);font-style:italic;color:var(--texte);opacity:.6; font-size:13px;line-height:1.55;margin-top:12px} .f-radios{display:flex;flex-direction:column;gap:10px} .f-radio{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;cursor:pointer; border:1px solid rgba(184,145,47,.28);border-radius:9px;background:rgba(184,145,47,.045); transition:border-color .18s,background .18s} .f-radio:hover{border-color:rgba(184,145,47,.55);background:rgba(184,145,47,.09)} .f-radio input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:#b8912f;cursor:pointer} .f-radio span{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--creme)} .f-radio b{color:var(--or);font-weight:400} .f-radio:has(input:checked){border-color:var(--or);background:rgba(184,145,47,.13)} .f-honneur{display:flex;gap:12px;align-items:flex-start;margin:26px 0 22px;padding:18px 20px; border:1px solid rgba(184,145,47,.4);border-radius:10px;background:rgba(120,16,30,.08)} .f-honneur input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:#b8912f;cursor:pointer} .f-honneur span{font-family:var(--serif);font-size:14.5px;line-height:1.6;color:var(--creme)} .f-honneur b{color:var(--or);font-weight:400} .f-choisis{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;color:var(--or); margin-top:12px;word-break:break-word} .f-ok{border:1px solid rgba(184,145,47,.45);border-radius:12px;padding:40px 32px;text-align:center; background:rgba(184,145,47,.06)} .f-ok strong{display:block;font-family:var(--serif);font-size:24px;font-weight:400;color:var(--or); letter-spacing:.01em;margin-bottom:12px} .f-ok span{display:block;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--texte); opacity:.75;line-height:1.6} /* ===== CONTACT (deux colonnes, champs à filet) ===== */ .contact{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start;margin:52px 0 0} .contact .aside h2{font-family:var(--display);font-style:italic;color:var(--creme);font-size:clamp(24px,2.8vw,34px); font-weight:700;line-height:1.15;margin-bottom:16px} .contact .aside p{font-family:var(--serif);color:var(--texte);opacity:.72;font-size:16px;line-height:1.75} .voie{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-top:1px solid rgba(184,145,47,.2)} .voie:first-of-type{margin-top:30px} .voie .ic{width:38px;height:38px;flex:none;border:1px solid var(--or-b);border-radius:50%;display:flex; align-items:center;justify-content:center} .voie .ic svg{width:16px;height:16px;fill:var(--or)} .voie b{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-b)} .voie span{display:block;font-family:var(--serif);color:var(--creme);font-size:16.5px;margin-top:5px} .voie em{display:block;font-style:normal;font-family:var(--sans);font-size:11px;opacity:.5;margin-top:4px} .discret{margin-top:34px;padding:18px 20px;border:1px solid rgba(184,145,47,.24); font-family:var(--serif);font-style:italic;color:var(--texte);opacity:.68;font-size:14.5px;line-height:1.6} .form2{display:block} .f-line{margin-bottom:30px} .f-line label{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.26em;text-transform:uppercase; color:var(--or-b);margin-bottom:8px} .f-line input,.f-line select,.f-line textarea{width:100%;background:transparent;border:none; border-bottom:1px solid rgba(184,145,47,.4);padding:11px 2px;color:var(--creme);font-family:var(--serif); font-size:16.5px;transition:border-color .35s ease} .f-line select{color:var(--creme)} .f-line select option{background:#160d0f;color:#e9ddcb} .f-line textarea{resize:vertical;min-height:130px;line-height:1.6} .f-line input:focus,.f-line select:focus,.f-line textarea:focus{outline:none;border-bottom-color:var(--or)} .f-line input::placeholder,.f-line textarea::placeholder{color:rgba(233,221,203,.28)} .f-chk{display:flex;gap:12px;align-items:flex-start;margin:8px 0 26px;font-family:var(--serif); font-size:14px;color:var(--texte);opacity:.72;line-height:1.5} .f-chk input{margin-top:4px;accent-color:#b8912f} .f-chk a{color:var(--or);text-decoration:none;border-bottom:1px solid rgba(184,145,47,.4)} .f-chk a:hover{border-bottom-color:var(--or)} .f-send{display:inline-block;background:transparent;border:1px solid var(--or);color:var(--or); padding:15px 44px;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase; cursor:pointer;transition:background .35s ease,color .35s ease} .f-send:hover{background:var(--or);color:#160b06} .f-note{margin-top:18px;font-family:var(--sans);font-size:10px;color:#6b625a;letter-spacing:.06em} @media(max-width:880px){.contact{grid-template-columns:1fr;gap:46px}} /* ===== PAGE RÉCIT (Qui sommes-nous) ===== */ .recit{max-width:720px;margin:0 auto} .chapo{font-family:var(--display);font-style:italic;color:var(--creme);font-size:clamp(21px,2.6vw,31px); line-height:1.4;text-align:center;margin:46px auto 8px;max-width:20ch} .chapo-l{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 40px;color:var(--or-b)} .chapo-l::before,.chapo-l::after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--or-b),transparent)} .chapo-l span{font-size:12px;letter-spacing:.3em} .recit p{font-family:var(--serif);font-size:17px;line-height:1.9;color:var(--texte);opacity:.86;margin:0 0 22px} .recit p:first-of-type::first-letter{font-family:var(--display);font-size:3.6em;float:left;line-height:.8; padding:8px 14px 0 0;color:var(--or)} .recit strong,.recit b{color:var(--creme)} .faits{display:grid;grid-template-columns:repeat(3,1fr);margin:52px 0; border-top:1px solid rgba(184,145,47,.32);border-bottom:1px solid rgba(184,145,47,.32)} .fait{padding:30px 18px;text-align:center;border-right:1px solid rgba(184,145,47,.16)} .fait:last-child{border-right:none} .fait b{display:block;font-family:var(--display);font-style:italic;font-weight:700;color:var(--or); font-size:clamp(26px,3.4vw,40px);line-height:1} .fait i{display:block;font-style:normal;font-family:var(--sans);font-size:9px;letter-spacing:.22em; text-transform:uppercase;opacity:.5;margin-top:11px} .signa{text-align:center;margin:44px 0 0;font-family:var(--display);font-style:italic;color:var(--or);font-size:34px} .signa i{display:block;font-style:normal;font-family:var(--sans);font-size:9px;letter-spacing:.28em; text-transform:uppercase;opacity:.45;margin-top:10px;color:var(--texte)} .cta{display:flex;gap:16px;justify-content:center;margin:44px 0 0;flex-wrap:wrap} .cta a{border:1px solid var(--or-b);color:var(--or);padding:14px 32px;font-family:var(--sans);font-size:9.5px; letter-spacing:.26em;text-transform:uppercase;transition:background .3s ease,border-color .3s ease} .cta a:hover{background:rgba(230,198,126,.12);border-color:var(--or)} @media(max-width:700px){.faits{grid-template-columns:1fr}.fait{border-right:none;border-bottom:1px solid rgba(184,145,47,.16)}} /* ===== BANDEAU PHOTO (haut de page) ===== */ .fhero{position:relative;height:clamp(330px,48vh,480px);overflow:hidden;display:flex;align-items:flex-end; justify-content:center;border-bottom:1px solid rgba(184,145,47,.32)} .fhero .ph{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:var(--pos,center 30%); transform:scale(1.05);animation:respire 22s ease-in-out infinite alternate} @keyframes respire{from{transform:scale(1.03)}to{transform:scale(1.13)}} .fhero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,5,6,.62) 0%,rgba(10,5,6,.22) 42%,rgba(10,5,6,.97) 100%)} .fhero .in{position:relative;z-index:2;text-align:center;padding:0 24px 42px;max-width:900px} .fhero .kicker{font-family:var(--sans);font-size:10px;letter-spacing:.48em;text-transform:uppercase;color:var(--or)} .fhero h1{font-family:var(--display);font-style:italic;font-weight:700;color:var(--creme); font-size:clamp(40px,7vw,84px);line-height:.95;margin:12px 0 10px;text-shadow:0 8px 40px rgba(0,0,0,.85)} .fhero .sub{font-family:var(--serif);font-style:italic;color:var(--creme);opacity:.88;font-size:clamp(15px,1.8vw,20px); text-shadow:0 3px 20px rgba(0,0,0,.9)} .fhero .rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;color:var(--or); font-family:var(--sans);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;opacity:.9} .fhero .rule::before,.fhero .rule::after{content:"";height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--or-b),transparent)} @media (prefers-reduced-motion: reduce){.fhero .ph{animation:none;transform:scale(1.03)}} /* ===== LA CARTE (formules : mise en page éditoriale, sans boîtes) ===== */ .carte{margin:44px 0 0;border-top:1px solid rgba(184,145,47,.3)} .offre{position:relative;display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center; padding:44px 10px;border-bottom:1px solid rgba(184,145,47,.16)} .offre::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%; background:linear-gradient(90deg,var(--or),rgba(230,198,126,.15) 60%,transparent); transform:scaleX(0);transform-origin:left;transition:transform .85s cubic-bezier(.16,.84,.24,1)} .offre:hover::after{transform:scaleX(1)} .offre .t{display:flex;flex-direction:column;min-width:0} .offre .nom{display:block;font-family:var(--display);font-style:italic;font-weight:700;color:var(--creme); font-size:clamp(28px,3.7vw,46px);line-height:1;transition:color .4s ease,transform .55s cubic-bezier(.16,.84,.24,1)} .offre:hover .nom{color:var(--or);transform:translateX(10px)} .offre .desc{display:block;font-family:var(--serif);color:var(--texte);opacity:.7;font-size:16px;line-height:1.65;margin-top:14px;max-width:60ch} .offre .inc{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:16px} .offre .inc span{font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte);opacity:.42} .offre .prix{text-align:right;white-space:nowrap} .offre .prix b{font-family:var(--display);font-style:italic;font-weight:700;color:var(--or);font-size:clamp(36px,4.4vw,60px);line-height:1} .offre .prix b sup{font-size:.42em;vertical-align:super;font-style:normal;margin-left:2px} .offre .prix b.libre{font-size:clamp(22px,2.4vw,30px)} .offre .prix i{display:block;font-style:normal;font-family:var(--sans);font-size:9px;letter-spacing:.24em; text-transform:uppercase;opacity:.45;margin-top:9px} .offre .go{display:block;margin-top:16px;font-family:var(--sans);font-size:9.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--or);opacity:0;transform:translateY(-5px);transition:opacity .45s ease,transform .45s ease} .offre:hover .go{opacity:1;transform:none} .note-tarif{text-align:center;font-family:var(--serif);font-style:italic;color:var(--texte);opacity:.45;font-size:14px;margin-top:34px} @media(max-width:820px){ .offre{grid-template-columns:1fr;gap:18px;padding:32px 4px} .offre .prix{text-align:left} .offre .go{opacity:1;transform:none} .offre:hover .nom{transform:none} } /* ===== VISIONNEUSE D'IMAGES (clic = plein écran) ===== */ .article img,.legal img,.artcover img,.ev-vignette img{cursor:zoom-in} .lb{position:fixed;inset:0;z-index:9998;background:rgba(6,3,4,.965);display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .35s ease} .lb.on{opacity:1;visibility:visible} .lb figure{position:relative;transform:scale(.965);transition:transform .45s cubic-bezier(.16,.84,.24,1);margin:0} .lb.on figure{transform:none} .lb figure img{max-width:92vw;max-height:82vh;width:auto;height:auto;object-fit:contain;display:block; border:1px solid rgba(230,198,126,.45);box-shadow:0 30px 90px rgba(0,0,0,.85)} .lb .x,.lb .ar{position:absolute;border:1px solid var(--or-b);border-radius:50%;background:rgba(10,6,7,.6);color:var(--or); cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--sans);transition:background .25s,border-color .25s} .lb .x:hover,.lb .ar:hover{background:rgba(230,198,126,.16);border-color:var(--or)} .lb .x{top:24px;right:28px;width:48px;height:48px;font-size:19px} .lb .ar{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:26px;line-height:1} .lb .ar.p{left:26px}.lb .ar.n{right:26px} .lb .cnt{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:var(--creme);opacity:.7; font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase} @media(max-width:700px){.lb .ar{width:42px;height:42px;font-size:21px}.lb .ar.p{left:10px}.lb .ar.n{right:10px}.lb .x{top:14px;right:14px}} /* ===== LES LOGES (agenda : panneaux qui s'ouvrent comme des loges) ===== */ .loges{display:flex;gap:8px;height:min(60vh,520px);margin:14px 0 10px} .loge{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:1px solid rgba(184,145,47,.22); transition:flex-grow .75s cubic-bezier(.16,.84,.24,1),border-color .5s;background:#0d0708} .loges:hover .loge{flex-grow:.82} .loge:hover{flex-grow:3.6;border-color:rgba(230,198,126,.55)} .loge .bg{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center; filter:brightness(.52) saturate(.68);transform:scale(1.06); transition:filter .8s ease,transform 1.4s cubic-bezier(.16,.84,.24,1)} .loge:hover .bg{filter:brightness(.92) saturate(1);transform:scale(1)} .loge .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,5,6,.55) 0%,rgba(10,5,6,.05) 34%,rgba(10,5,6,.9) 100%)} .loge .num{position:absolute;top:16px;left:0;right:0;text-align:center;z-index:2} .loge .num b{display:block;font-family:var(--display);font-style:italic;color:var(--or);font-size:34px;line-height:1; font-weight:700;text-shadow:0 3px 18px rgba(0,0,0,.9)} .loge .num i{display:block;font-style:normal;font-family:var(--sans);color:var(--creme);opacity:.8;font-size:9px; letter-spacing:.24em;text-transform:uppercase;margin-top:5px;text-shadow:0 2px 10px rgba(0,0,0,.9)} .loge .vt{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);writing-mode:vertical-rl; max-height:62%;overflow:hidden;font-family:var(--display);color:var(--creme);font-size:16px;font-weight:600; letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.95);z-index:2;transition:opacity .35s ease} .loge:hover .vt{opacity:0} .loge .hz{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;z-index:2;opacity:0;transform:translateY(14px); transition:opacity .5s .12s ease,transform .6s .12s cubic-bezier(.16,.84,.24,1);pointer-events:none} .loge:hover .hz{opacity:1;transform:none} .loge .hz h3{font-family:var(--display);color:#fff;font-size:clamp(20px,2.1vw,30px);font-weight:700;line-height:1.12; text-shadow:0 4px 26px rgba(0,0,0,.95)} .loge .hz p{font-family:var(--serif);color:var(--creme);opacity:.86;font-size:14.5px;line-height:1.55;margin-top:8px; max-width:56ch;text-shadow:0 2px 14px rgba(0,0,0,.95)} .loge .hz .go{display:inline-block;margin-top:14px;color:var(--or);border-bottom:1px solid var(--or-b); font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding-bottom:4px} @media(max-width:820px){ .loges{flex-direction:column;height:auto;gap:12px} .loge{flex:none;height:172px} .loges:hover .loge{flex-grow:1} .loge .bg{filter:brightness(.62) saturate(.85)} .loge .vt{display:none} .loge .hz{opacity:1;transform:none;padding:16px 18px} .loge .hz p{display:none} .loge .num{left:auto;right:14px;text-align:right} .loge .num b{font-size:26px} } /* ===== LE PROGRAMME (agenda façon programme de music-hall) ===== */ .month{display:flex;align-items:baseline;gap:20px;margin:58px 0 2px} .month h2{font-family:var(--display);font-style:italic;color:var(--or);font-size:clamp(24px,3.2vw,36px);font-weight:600;white-space:nowrap} .month .l{flex:1;height:1px;background:linear-gradient(90deg,rgba(184,145,47,.65),transparent)} .month .n{font-family:var(--sans);color:var(--or-b);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap} .prog{border-top:1px solid rgba(184,145,47,.3)} .line{position:relative;display:grid;grid-template-columns:110px 1fr 44px;align-items:center;gap:28px; padding:26px 22px;border-bottom:1px solid rgba(184,145,47,.15);overflow:hidden;isolation:isolate} .line::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--img);background-size:cover; background-position:center;opacity:0;transform:scale(1.14);filter:saturate(.8); transition:opacity .6s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)} .line::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s ease; background:linear-gradient(90deg,rgba(10,5,6,.97) 24%,rgba(10,5,6,.74) 58%,rgba(10,5,6,.38))} .line:hover::before{opacity:.66;transform:scale(1)} .line:hover::after{opacity:1} .line:hover .d b{color:#fff;text-shadow:0 0 30px rgba(230,198,126,.6)} .line:hover h3{color:var(--or)} .line:hover .k{opacity:1;transform:translateX(0)} .line .d{text-align:center;border-right:1px solid rgba(184,145,47,.3);padding-right:20px} .line .d b{display:block;font-family:var(--display);font-style:italic;color:var(--or);font-size:48px;line-height:.9;font-weight:700;transition:color .45s,text-shadow .45s} .line .d i{display:block;font-style:normal;font-family:var(--sans);color:var(--texte);opacity:.55;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;margin-top:8px} .line h3{font-family:var(--display);color:var(--creme);font-size:clamp(19px,2.2vw,27px);font-weight:600;line-height:1.2;transition:color .35s} .line p{font-family:var(--serif);color:var(--texte);opacity:.6;font-size:14.5px;line-height:1.55;margin-top:7px;max-width:74ch} .line .k{justify-self:end;color:var(--or);font-size:24px;opacity:.3;transform:translateX(-10px);transition:opacity .45s,transform .45s} @media(max-width:820px){ .line{grid-template-columns:74px 1fr 22px;gap:16px;padding:18px 12px} .line .d b{font-size:34px}.line .d{padding-right:14px} .line h3{font-size:18px}.line p{display:none} } /* --- Transition RIDEAU entre les pages --- */ .curtains{position:fixed;inset:0;z-index:9999;display:flex;pointer-events:none} .curtains .cur{position:relative;width:50.2%;height:100%; background:linear-gradient(90deg,#1c0406,#3a0810 28%,#611018 50%,#3a0810 72%,#1c0406); box-shadow:inset 0 0 140px rgba(0,0,0,.65)} .curtains .cur::after{content:"";position:absolute;inset:0; background:repeating-linear-gradient(90deg,rgba(0,0,0,.30) 0 11px,rgba(255,255,255,.035) 11px 24px,rgba(0,0,0,.16) 24px 33px)} .curtains .cur.l{border-right:2px solid rgba(230,198,126,.55);animation:curOpenL .85s .12s cubic-bezier(.76,0,.24,1) forwards} .curtains .cur.r{border-left:2px solid rgba(230,198,126,.55);animation:curOpenR .85s .12s cubic-bezier(.76,0,.24,1) forwards} .curtains.closing .cur.l{animation:curCloseL .62s cubic-bezier(.76,0,.24,1) forwards} .curtains.closing .cur.r{animation:curCloseR .62s cubic-bezier(.76,0,.24,1) forwards} @keyframes curOpenL{from{transform:translateX(0)}to{transform:translateX(-101%)}} @keyframes curOpenR{from{transform:translateX(0)}to{transform:translateX(101%)}} @keyframes curCloseL{from{transform:translateX(-101%)}to{transform:translateX(0)}} @keyframes curCloseR{from{transform:translateX(101%)}to{transform:translateX(0)}} @media (prefers-reduced-motion: reduce){.curtains .cur.l{animation:none;transform:translateX(-101%)}.curtains .cur.r{animation:none;transform:translateX(101%)}.curtains.closing .cur{animation:none}} @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.grid{grid-template-columns:1fr}.cnx span{display:none}} /* ===== accueil : rideau, age, marque, video, portes (index.html) Chaque regle est limitee a .dlr-accueil : sans cela, le decor plein ecran de l accueil deborderait sur toutes les pages du site. ===== */ .dlr-accueil :root{ --or:#e6c67e; --or-b:#b8912f; --texte:#e9ddcb; --serif:"Cormorant Garamond",Georgia,serif; --sans:"Montserrat",Arial,sans-serif; } .dlr-accueil *{box-sizing:border-box;margin:0;padding:0} body.dlr-accueil,body.dlr-accueil{background:#0b0607;color:var(--texte);font-family:var(--sans);overflow-x:hidden} body.dlr-accueil{display:flex;flex-direction:column;min-height:100vh} .dlr-accueil a,.dlr-accueil a:link,.dlr-accueil a:visited,.dlr-accueil a:hover{text-decoration:none;color:inherit;-webkit-text-decoration:none} .dlr-accueil .wrap{position:relative;width:100vw;aspect-ratio:1448/1086; background:#0b0607 url("/assets/img/maquette-video.jpg") center/cover no-repeat; background-image:image-set(url("/assets/img/maquette-video.webp") type("image/webp"), url("/assets/img/maquette-video.jpg") type("image/jpeg"))} .dlr-accueil .top{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;justify-content:space-between; align-items:center;padding:2% 2.6%;} .dlr-accueil .menu{display:flex;align-items:center;gap:10px;letter-spacing:.26em;font-size:clamp(9px,1vw,12px); text-transform:uppercase;cursor:pointer;color:var(--texte)} .dlr-accueil .menu .b{display:inline-flex;flex-direction:column;gap:4px} .dlr-accueil .menu .b span{width:24px;height:2px;background:var(--texte);opacity:.85} .dlr-accueil .cnx{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--or-b);color:var(--or); padding:8px 15px;border-radius:30px;letter-spacing:.2em;font-size:clamp(8px,.85vw,11px);text-transform:uppercase; background:rgba(10,6,7,.25);transition:background .25s,box-shadow .25s} .dlr-accueil .cnx:hover{background:rgba(230,198,126,.12);box-shadow:0 0 18px rgba(230,198,126,.3)} .dlr-accueil .cnx svg{width:13px;height:13px;fill:var(--or)} .dlr-accueil .brand{position:absolute;top:1.5%;left:0;right:0;z-index:5;display:flex;flex-direction:column;align-items:center} .dlr-accueil .brand .logo{width:clamp(44px,4vw,60px);height:auto;filter:drop-shadow(0 0 16px rgba(230,198,126,.4))} .dlr-accueil .brand .titre{width:clamp(230px,29vw,370px);height:auto;margin-top:2px;max-width:80%; filter:drop-shadow(0 0 20px rgba(230,198,126,.22))} .dlr-accueil .video{position:absolute;left:24.4%;top:23.8%;width:46.6%;height:28.9%;z-index:4;border-radius:14px;overflow:hidden; background:#000;box-shadow:inset 0 0 80px rgba(0,0,0,.45)} .dlr-accueil .video .vfile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block} .dlr-accueil .video .veil{position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 50% 50%,transparent 62%,rgba(0,0,0,.32))} .dlr-accueil .sound{position:absolute;right:3.5%;bottom:7%;width:clamp(30px,3vw,42px);height:clamp(30px,3vw,42px); border:1px solid var(--or);border-radius:50%;background:rgba(10,6,7,.5);display:flex;align-items:center; justify-content:center;cursor:pointer;z-index:3;box-shadow:0 0 14px rgba(230,198,126,.25);transition:background .2s} .dlr-accueil .sound:hover{background:rgba(230,198,126,.16)} .dlr-accueil .sound svg{width:48%;height:48%;fill:var(--or)} .dlr-accueil .sound .on{display:none} .dlr-accueil .sound.unmuted .off{display:none} .dlr-accueil .sound.unmuted .on{display:block} .dlr-accueil .door{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;border-radius:8px;transition:transform .3s ease} .dlr-accueil .door.agenda{left:22%;top:54%;width:23.5%;height:33%} .dlr-accueil .door.blog{left:51.4%;top:54%;width:20.5%;height:33%} .dlr-accueil .door::before{content:"";position:absolute;inset:-3% -6%;border-radius:12px;opacity:0;transition:opacity .35s ease; background:radial-gradient(65% 62% at 50% 45%, rgba(230,198,126,.22), rgba(230,198,126,0) 72%)} .dlr-accueil .door:hover::before{opacity:1} .dlr-accueil .door:hover{transform:translateY(-3px)} .dlr-accueil .door .in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px} .dlr-accueil .door .nm{font-family:var(--serif);color:var(--or);font-weight:600;letter-spacing:.14em; font-size:clamp(14px,1.9vw,27px);text-shadow:0 2px 14px rgba(0,0,0,.9)} .dlr-accueil .door .sub{font-weight:300;color:var(--texte);font-size:clamp(8px,.92vw,12px);line-height:1.4;max-width:80%; opacity:0;max-height:0;overflow:hidden;transition:opacity .35s ease,max-height .35s ease;text-shadow:0 2px 10px rgba(0,0,0,.95)} .dlr-accueil .door:hover .sub{opacity:.88;max-height:50px} .dlr-accueil .door .chev{margin-top:3px;width:clamp(28px,3vw,40px);height:clamp(28px,3vw,40px);border:1px solid var(--or); border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,6,7,.35); box-shadow:0 0 16px rgba(230,198,126,.3);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease} .dlr-accueil .door:hover .chev{opacity:1;transform:translateY(0)} .dlr-accueil .door .chev svg{width:36%;height:36%;fill:none;stroke:var(--or);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round} .dlr-accueil .menu{cursor:pointer} .dlr-accueil .navover{position:fixed;inset:0;z-index:20;background:rgba(8,4,5,.965); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; opacity:0;visibility:hidden;transition:opacity .35s ease} .dlr-accueil .navover.open{opacity:1;visibility:visible} .dlr-accueil .navover a{font-family:var(--serif);color:var(--texte);font-size:clamp(22px,3.2vw,38px); letter-spacing:.06em;opacity:.92;transition:color .2s,letter-spacing .2s} .dlr-accueil .navover a:hover{color:var(--or);letter-spacing:.12em} .dlr-accueil .navover .sep{width:64px;height:1px;margin:4px 0; background:linear-gradient(90deg,transparent,var(--or-b),transparent)} .dlr-accueil .navover .close{position:absolute;top:22px;right:28px;width:46px;height:46px;border:1px solid var(--or-b); border-radius:50%;background:rgba(10,6,7,.4);color:var(--or);font-size:20px;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background .2s} .dlr-accueil .navover .close:hover{background:rgba(230,198,126,.14)} .dlr-accueil .curtains{position:fixed;inset:0;z-index:9999;display:flex;pointer-events:none} .dlr-accueil .curtains .cur{position:relative;width:50.2%;height:100%;background:linear-gradient(90deg,#1c0406,#3a0810 28%,#611018 50%,#3a0810 72%,#1c0406);box-shadow:inset 0 0 140px rgba(0,0,0,.65)} .dlr-accueil .curtains .cur::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.30) 0 11px,rgba(255,255,255,.035) 11px 24px,rgba(0,0,0,.16) 24px 33px)} .dlr-accueil .curtains .cur.l{border-right:2px solid rgba(230,198,126,.55);animation:curOpenL .85s .12s cubic-bezier(.76,0,.24,1) forwards} .dlr-accueil .curtains .cur.r{border-left:2px solid rgba(230,198,126,.55);animation:curOpenR .85s .12s cubic-bezier(.76,0,.24,1) forwards} .dlr-accueil .curtains.closing .cur.l{animation:curCloseL .62s cubic-bezier(.76,0,.24,1) forwards} .dlr-accueil .curtains.closing .cur.r{animation:curCloseR .62s cubic-bezier(.76,0,.24,1) forwards} @keyframes curOpenL{from{transform:translateX(0)}to{transform:translateX(-101%)}} @keyframes curOpenR{from{transform:translateX(0)}to{transform:translateX(101%)}} @keyframes curCloseL{from{transform:translateX(-101%)}to{transform:translateX(0)}} @keyframes curCloseR{from{transform:translateX(101%)}to{transform:translateX(0)}} @media (prefers-reduced-motion: reduce){ .dlr-accueil .curtains .cur.l{animation:none;transform:translateX(-101%)} .dlr-accueil .curtains .cur.r{animation:none;transform:translateX(101%)} .dlr-accueil .curtains.closing .cur{animation:none}} .dlr-accueil .top-r{display:flex;align-items:center;gap:12px} .dlr-accueil .top-r a.organiser,.dlr-accueil .top-r a.organiser:link,.dlr-accueil .top-r a.organiser:visited,.dlr-accueil .top-r a.organiser:hover{ display:inline-flex;align-items:center;gap:8px;background:var(--or);color:#160b06;padding:9px 18px; border-radius:30px;letter-spacing:.16em;font-size:10px;text-transform:uppercase;font-weight:600; transition:background .25s} .dlr-accueil .top-r a.organiser:hover{background:#f5e2ae} .dlr-accueil .top-r a.organiser svg{width:13px;height:13px;fill:#160b06} .dlr-accueil .troisieme{position:absolute;left:50%;top:92.5%;transform:translateX(-50%);z-index:5;text-align:center;white-space:nowrap} .dlr-accueil .troisieme a{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--or-b);color:var(--or); background:rgba(10,6,7,.55);padding:13px 30px;border-radius:30px;font-family:var(--sans);font-size:10px; letter-spacing:.22em;text-transform:uppercase;transition:background .3s,border-color .3s} .dlr-accueil .troisieme a:hover{background:rgba(230,198,126,.16);border-color:var(--or)} .dlr-accueil .troisieme svg{width:14px;height:14px;fill:var(--or)} .dlr-accueil .troisieme em{display:block;font-style:italic;font-family:var(--serif);font-size:13px;color:var(--texte); opacity:.6;margin-top:9px;letter-spacing:0;text-transform:none} .dlr-accueil .parts{padding:34px 20px 40px;text-align:center;border-top:1px solid rgba(184,145,47,.2);background:#0a0506} .dlr-accueil .parts .lbl{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--or-b); font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:20px} .dlr-accueil .parts .lbl::before,.dlr-accueil .parts .lbl::after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--or-b),transparent)} .dlr-accueil .parts .lst{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 38px} .dlr-accueil .parts .lst a{font-family:var(--serif);color:var(--texte);opacity:.62;font-size:17px;letter-spacing:.06em; transition:color .25s,opacity .25s} .dlr-accueil .parts .lst a:hover{color:var(--or);opacity:1} .dlr-accueil .parts .lst a.rs{display:inline-flex;align-items:center;gap:8px} .dlr-accueil .parts .lst a.rs svg{width:19px;height:19px;fill:currentColor;flex:none} @media(max-width:900px){ .dlr-accueil .organiser span{display:none} .dlr-accueil .organiser{padding:9px 12px} .dlr-accueil .troisieme{top:90.5%} .dlr-accueil .troisieme a{padding:11px 20px;font-size:9px} .dlr-accueil .troisieme em{display:none} .dlr-accueil .parts .lst{gap:12px 22px} .dlr-accueil .parts .lst a{font-size:15px} } .dlr-accueil .age{position:fixed;inset:0;z-index:9998;background:rgba(6,3,4,.975);display:flex;align-items:center; justify-content:center;padding:24px;text-align:center} .dlr-accueil .age.off{display:none} .dlr-accueil .age .in{max-width:560px} .dlr-accueil .age .n18{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border:1px solid var(--or); border-radius:50%;color:var(--or);font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.04em;margin-bottom:22px} .dlr-accueil .age h2{font-family:var(--serif);font-style:italic;color:var(--texte);font-weight:600; font-size:clamp(24px,3.4vw,34px);line-height:1.25;margin-bottom:16px} .dlr-accueil .age p{font-size:14px;line-height:1.8;color:var(--texte);opacity:.72;margin-bottom:10px} .dlr-accueil .age .lg{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px} .dlr-accueil .age .oui{background:var(--or);color:#160b06;border:1px solid var(--or);padding:15px 38px;border-radius:30px; font-size:11px;letter-spacing:.26em;text-transform:uppercase;cursor:pointer;font-family:var(--sans)} .dlr-accueil .age .non{background:transparent;color:var(--texte);border:1px solid rgba(184,145,47,.4);padding:15px 30px; border-radius:30px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;cursor:pointer;opacity:.75;font-family:var(--sans)} .dlr-accueil .age .mentions{margin-top:26px;font-size:11px;opacity:.45;line-height:1.7} .dlr-accueil .age .mentions a{color:var(--or);opacity:.8} @media(max-width:760px){ .dlr-accueil .cnx span{display:none} .dlr-accueil .cnx{padding:8px 10px} .dlr-accueil .door .sub{font-size:9px} .dlr-accueil .navover a{font-size:clamp(20px,6vw,30px)} } /* ===== complement propre au theme ===== */ /* ----------------------------------------------------------------------- Complement propre au theme WordPress. Le site de demonstration n'avait ni recherche, ni pagination, ni page vide : toutes ses pages etaient ecrites d'avance. Un site vivant, lui, en a besoin. Ces regles reprennent la charte sans la rouvrir. ----------------------------------------------------------------------- */ /* Nom du site quand aucun logo n'est choisi : le bandeau ne reste jamais nu. */ .logo-texte{font-family:var(--display);font-size:19px;color:var(--or);letter-spacing:.02em} .brand .titre-txt{font-family:var(--display);font-weight:700;color:var(--creme); font-size:clamp(30px,5.4vw,64px);line-height:1.04;margin:10px 0 6px;text-align:center} .brand .titre-sous{font-family:var(--serif);font-style:italic;opacity:.72; text-align:center;font-size:clamp(14px,1.7vw,18px)} /* Rubrique sans contenu : on le dit, plutot que de laisser une page blanche. */ .dlr-vide{font-family:var(--serif);font-size:17px;font-style:italic;opacity:.7; text-align:center;padding:56px 20px;border:1px dashed rgba(184,145,47,.3); border-radius:4px;margin:30px 0} /* Pagination */ .dlr-pages{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:44px 0 10px} .dlr-pages .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:40px;height:40px;padding:0 13px;border:1px solid rgba(184,145,47,.32); color:var(--texte);font-size:13px;letter-spacing:.06em;transition:border-color .2s,color .2s,background .2s} .dlr-pages .page-numbers:hover{border-color:var(--or);color:var(--or)} .dlr-pages .page-numbers.current{background:var(--or);border-color:var(--or);color:#160b06;font-weight:500} .dlr-pages .dots{border-color:transparent} /* Titre de section a l'interieur d'une page */ .dlr-h2{font-family:var(--display);font-size:clamp(21px,2.6vw,31px);color:var(--creme); margin:44px 0 20px;font-weight:600} /* Recherche */ .dlr-recherche{display:flex;gap:10px;max-width:520px;margin:26px auto 0} .dlr-recherche input{flex:1;background:rgba(255,255,255,.045);color:var(--creme); border:1px solid rgba(184,145,47,.32);border-radius:3px;padding:12px 15px; font-family:var(--sans);font-size:14px} .dlr-recherche input:focus{outline:none;border-color:var(--or)} .dlr-recherche button{background:var(--or);color:#160b06;border:0;border-radius:3px; padding:12px 22px;font-family:var(--sans);font-size:12px;letter-spacing:.14em; text-transform:uppercase;cursor:pointer} .dlr-recherche button:hover{background:#f0d89c} /* Lien d'evitement : invisible, mais atteignable au clavier. */ .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .screen-reader-text:focus{position:fixed;top:12px;left:12px;z-index:100;width:auto; height:auto;clip:auto;padding:12px 20px;background:var(--or);color:#160b06; font-family:var(--sans);font-size:13px;letter-spacing:.08em;border-radius:3px} /* Le contour de focus doit rester visible partout : c'est le seul repere de quelqu'un qui navigue au clavier. */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{ outline:2px solid var(--or);outline-offset:3px} /* Contenus deposes par l'editeur WordPress dans .article */ .article img{height:auto;margin:22px auto;border-radius:2px} .article figure{margin:26px 0} .article figcaption{font-family:var(--serif);font-style:italic;font-size:13.5px; opacity:.65;text-align:center;margin-top:8px} .article blockquote{border-left:2px solid var(--or);margin:26px 0;padding:4px 0 4px 22px; font-family:var(--serif);font-size:18px;font-style:italic;color:var(--creme)} .article ul,.article ol{margin:18px 0 18px 22px} .article li{margin:7px 0} .article table{width:100%;border-collapse:collapse;margin:24px 0;display:block;overflow-x:auto} .article th,.article td{border:1px solid rgba(184,145,47,.24);padding:9px 12px;text-align:left} .article a{color:var(--or);text-decoration:underline;text-underline-offset:3px} /* Le paywall des extensions WERA s'affiche dans le fil du texte : on lui donne la meme respiration que le reste. */ .pmpro_content_message,.wera-paywall{margin:34px 0;padding:24px 26px; border:1px solid rgba(184,145,47,.4);border-radius:6px;background:rgba(120,16,30,.06); font-family:var(--serif);font-size:16px;text-align:center} /* ----------------------------------------------------------------------- The Events Calendar, habille dans la charte. POURQUOI CE BLOC EXISTE Cette extension n'emprunte pas les gabarits du theme : depuis sa version 6, elle compose l'agenda et les fiches de soirees avec ses propres vues. Nos fichiers archive-tribe_events.php et single-tribe_events.php ne sont donc jamais appeles, et ses styles arrivent tels quels — concus pour un fond clair. Constate en previsualisation : le titre d'une soiree s'affichait en gris sombre sur le fond noir, presque illisible, et le prix disparaissait. On ne se bat pas contre l'extension : on repeint ses vues. Les !important sont necessaires — ses regles portent des selecteurs tres specifiques et des styles en ligne. ----------------------------------------------------------------------- */ .tribe-common, .tribe-events, .tribe-common .tribe-common-b1, .tribe-common .tribe-common-b2, .tribe-common .tribe-common-b3{color:var(--texte) !important;font-family:var(--sans) !important} /* Titres : la police d'affichage du site, en creme */ .tribe-common .tribe-common-h1, .tribe-common .tribe-common-h2, .tribe-common .tribe-common-h3, .tribe-common .tribe-common-h4, .tribe-common .tribe-common-h5, .tribe-common .tribe-common-h6, .tribe-common .tribe-common-h4--min-medium, .tribe-events-single-event-title, .tribe-events .tribe-events-calendar-list__event-title{ color:var(--creme) !important;font-family:var(--display) !important;letter-spacing:-.01em} /* Le titre d'une soiree, et son lien */ .tribe-events-calendar-list__event-title a, .tribe-events-calendar-list__event-title-link, .tribe-events-single-event-title a{color:var(--creme) !important;text-decoration:none} .tribe-events-calendar-list__event-title a:hover, .tribe-events-calendar-list__event-title-link:hover{color:var(--or) !important} /* Dates, horaires, prix : l'or, pour qu'ils se detachent */ .tribe-events-calendar-list__event-datetime, .tribe-events-schedule, .tribe-events-schedule__datetime, .tribe-event-date-start,.tribe-event-time,.tribe-event-date-end, .tribe-events-c-small-cta__price, .tribe-events-cost, .tribe-events-event-cost, .tribe-common .tribe-events-calendar-list__event-date-tag-daynum, .tribe-common .tribe-events-calendar-list__event-date-tag-weekday{color:var(--or) !important} /* Liens generiques de l'extension */ .tribe-common a, .tribe-common .tribe-common-anchor, .tribe-common .tribe-common-anchor-thin, .tribe-events a{color:var(--or) !important} .tribe-common a:hover,.tribe-events a:hover{color:#f0d89c !important} /* Champs et boutons : fond sombre, bordure doree */ .tribe-common input[type=text], .tribe-common input[type=search], .tribe-common select, .tribe-events-c-search__input{ background:rgba(255,255,255,.05) !important;color:var(--creme) !important; border:1px solid rgba(184,145,47,.35) !important;border-radius:3px !important} .tribe-common input::placeholder,.tribe-events-c-search__input::placeholder{color:rgba(233,221,203,.45) !important} .tribe-common button, .tribe-events-c-search__button, .tribe-common .tribe-common-c-btn{ background:var(--or) !important;color:#160b06 !important;border:0 !important; border-radius:3px !important;font-family:var(--sans) !important;letter-spacing:.1em} .tribe-common button:hover,.tribe-events-c-search__button:hover{background:#f0d89c !important} /* Navigation entre les mois, choix de vue */ .tribe-events-c-nav, .tribe-events-c-view-selector, .tribe-events-header{background:transparent !important;border-color:rgba(184,145,47,.22) !important} .tribe-events-c-nav__list-item-link, .tribe-events-c-view-selector__list-item-link, .tribe-events-c-view-selector__list-item-text{color:var(--texte) !important} .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text{color:var(--or) !important} .tribe-events-c-top-bar__datepicker-button, .tribe-events-c-top-bar__today-button{color:var(--or) !important;border-color:rgba(184,145,47,.35) !important} /* Les icones de l'extension, en or plutot qu'en gris */ .tribe-common .tribe-common-c-svgicon, .tribe-common .tribe-common-c-svgicon__svg-fill{fill:var(--or) !important;color:var(--or) !important} /* Separateurs et cartes */ .tribe-events-calendar-list__event-row, .tribe-events-calendar-list__month-separator{border-color:rgba(184,145,47,.18) !important} .tribe-events-calendar-list__month-separator-text{color:var(--or) !important; font-family:var(--sans) !important;letter-spacing:.2em;text-transform:uppercase} /* Bandeau d'informations pratiques de la fiche */ .tribe-events-meta-label,.tribe-events-event-meta .tribe-events-meta-label{ color:var(--or) !important;font-family:var(--sans) !important; letter-spacing:.14em;text-transform:uppercase;font-size:11px !important} .tribe-events-meta-value,.tribe-events-event-meta .tribe-events-meta-value{color:var(--texte) !important} .tribe-events-event-meta{background:rgba(120,16,30,.06) !important; border:1px solid rgba(184,145,47,.28) !important;border-radius:6px} /* Le corps de la fiche : meme lecture que les articles du site */ .tribe-events-single .tribe-events-content, .tribe-events-single .tribe-events-content p{ color:var(--texte) !important;font-family:var(--serif) !important; font-size:17px !important;line-height:1.75 !important} /* Le menu deroulant « Ajouter a mon calendrier » */ .tribe-events-c-subscribe-dropdown__button, .tribe-events-c-subscribe-dropdown__list-item-link{color:var(--or) !important} .tribe-events-c-subscribe-dropdown__content{background:#160b0d !important; border:1px solid rgba(184,145,47,.3) !important} /* Les zones restees claires apres la premiere passe : la barre de recherche et les boutons de navigation gardaient le fond blanc de l'extension, avec un texte pale dessus — illisible. Vu en previsualisation. */ .tribe-events-c-search, .tribe-events-c-search__input-group, .tribe-events-header__events-bar, .tribe-events-c-events-bar, .tribe-events-c-events-bar__search-container, .tribe-events-c-top-bar, .tribe-events-header{background:transparent !important;box-shadow:none !important} .tribe-events-c-events-bar__search-button, .tribe-events-c-top-bar__today-button, .tribe-events-c-top-bar__nav-link, .tribe-events-c-view-selector__button{ background:rgba(255,255,255,.05) !important;color:var(--texte) !important; border:1px solid rgba(184,145,47,.32) !important;border-radius:3px !important} .tribe-events-c-events-bar__search-button:hover, .tribe-events-c-top-bar__today-button:hover{border-color:var(--or) !important;color:var(--or) !important} /* Le champ de recherche lui-meme, quel que soit son emballage */ .tribe-events input[type=text], .tribe-events input[type=search], .tribe-events-c-search__input-control-input{ background:rgba(255,255,255,.05) !important;color:var(--creme) !important; border:1px solid rgba(184,145,47,.32) !important} /* Le libelle de la periode affichee (« A venir », « Aujourd'hui ») */ .tribe-events-c-top-bar__datepicker-button, .tribe-events-header__title, .tribe-events-c-top-bar__datepicker-desktop{ background:transparent !important;color:var(--or) !important} /* Les fleches de navigation entre les periodes */ .tribe-events-c-nav__prev,.tribe-events-c-nav__next, .tribe-events-c-top-bar__nav-list-item{background:transparent !important} .tribe-events-c-nav__prev-label,.tribe-events-c-nav__next-label{color:var(--or) !important} /* Derniere passe, apres nouvelle previsualisation. Deux defauts subsistaient : le selecteur « Liste / Mois / Jour » gardait un fond blanc, et le bouton de periode affichait un libelle dore sur un fond dore — donc invisible. */ .tribe-events-c-view-selector, .tribe-events-c-view-selector__list, .tribe-events-c-view-selector__content, .tribe-events-c-events-bar__views{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(184,145,47,.28) !important;border-radius:3px !important} .tribe-events-c-view-selector__list-item-link, .tribe-events-c-view-selector__list-item-text{color:var(--texte) !important} .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link, .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text{ color:var(--or) !important} /* Le bouton de periode : fond dore, donc texte sombre — sinon il s'efface. */ .tribe-events-c-top-bar__datepicker-button, .tribe-events-c-top-bar__datepicker-button-text, button[class*="datepicker"]{ background:var(--or) !important;color:#160b06 !important; border:0 !important;border-radius:3px !important;font-weight:500} .tribe-events-c-top-bar__datepicker-button svg, .tribe-events-c-top-bar__datepicker-button .tribe-common-c-svgicon{fill:#160b06 !important} /* Les fleches de navigation, en dore sur fond sombre */ .tribe-events-c-top-bar__nav-link, .tribe-events-c-nav__prev,.tribe-events-c-nav__next{ background:rgba(255,255,255,.05) !important;border:1px solid rgba(184,145,47,.28) !important; border-radius:3px !important} .tribe-events-c-top-bar__nav-link svg{fill:var(--or) !important} /* ----------------------------------------------------------------------- Forminator : les champs dans la charte. Constate en previsualisation : les zones de saisie gardaient un fond blanc avec du texte noir. Lisible, mais en rupture complete avec le noir et l'or de tout le reste — et sur un formulaire de 45 champs, cela saute aux yeux. ----------------------------------------------------------------------- */ .forminator-ui input[type=text], .forminator-ui input[type=email], .forminator-ui input[type=url], .forminator-ui input[type=tel], .forminator-ui input[type=number], .forminator-ui input[type=date], .forminator-ui input[type=search], .forminator-ui textarea, .forminator-ui select, .forminator-ui .forminator-input, .forminator-ui .forminator-textarea, .forminator-ui .forminator-select, .forminator-ui .forminator-select2 .selection .select2-selection, .forminator-custom-form input:not([type=radio]):not([type=checkbox]):not([type=submit]), .forminator-custom-form textarea, .forminator-custom-form select{ background:rgba(255,255,255,.055) !important;color:var(--creme) !important; border:1px solid rgba(184,145,47,.32) !important;border-radius:3px !important; font-family:var(--sans) !important} .forminator-ui input:focus,.forminator-ui textarea:focus,.forminator-ui select:focus, .forminator-custom-form input:focus,.forminator-custom-form textarea:focus{ border-color:var(--or) !important;outline:none !important; box-shadow:0 0 0 2px rgba(184,145,47,.18) !important} .forminator-ui input::placeholder,.forminator-ui textarea::placeholder, .forminator-custom-form input::placeholder{color:rgba(233,221,203,.42) !important} /* Libelles, descriptions et messages */ .forminator-ui .forminator-label, .forminator-custom-form .forminator-label{color:var(--or) !important; font-family:var(--sans) !important;letter-spacing:.06em} .forminator-ui .forminator-description, .forminator-custom-form .forminator-description{color:rgba(233,221,203,.62) !important} .forminator-ui .forminator-required{color:var(--rouge) !important} /* Cases et boutons radio */ .forminator-ui .forminator-checkbox-box, .forminator-ui .forminator-radio-bullet{border-color:rgba(184,145,47,.5) !important; background:rgba(255,255,255,.05) !important} .forminator-ui input:checked + .forminator-checkbox-box, .forminator-ui input:checked + .forminator-radio-bullet{ background:var(--or) !important;border-color:var(--or) !important} .forminator-ui .forminator-checkbox-label, .forminator-ui .forminator-radio-label{color:var(--texte) !important} /* Bouton d'envoi et depot de fichier */ .forminator-ui .forminator-button-submit, .forminator-custom-form .forminator-button-submit{ background:var(--or) !important;color:#160b06 !important;border:0 !important; font-family:var(--sans) !important;letter-spacing:.12em;text-transform:uppercase} .forminator-ui .forminator-button-submit:hover{background:#f0d89c !important} .forminator-ui .forminator-button-upload, .forminator-ui .forminator-multi-upload, .forminator-ui .forminator-file-upload{ background:rgba(255,255,255,.05) !important;color:var(--texte) !important; border:1px dashed rgba(184,145,47,.4) !important} /* Messages de validation */ .forminator-ui .forminator-error-message{color:#ff8a94 !important} .forminator-ui .forminator-response-message{background:rgba(120,16,30,.1) !important; border:1px solid rgba(184,145,47,.35) !important;color:var(--texte) !important} /* ----------------------------------------------------------------------- Le rectangle dore reste vide sur l'agenda : le libelle de periode (« A venir ») s'affichait en dore sur un fond dore. La regle precedente ne suffisait pas — le texte vit dans un element enfant qui porte sa propre couleur. On force donc toute la descendance. ----------------------------------------------------------------------- */ .tribe-events-c-top-bar__datepicker-button, .tribe-events-c-top-bar__datepicker-button *, [class*="tribe"] [class*="datepicker-button"], [class*="tribe"] [class*="datepicker-button"] *{color:#160b06 !important} .tribe-events-c-top-bar__datepicker-button svg *, [class*="tribe"] [class*="datepicker-button"] svg *{fill:#160b06 !important} /* ========================================================================= LARGEUR DE L'ACCUEIL ========================================================================= La scene de l'accueil est posee en « width:100vw » avec un rapport 1448/1086 : elle doit occuper toute la fenetre. Mais les pages interieures declarent « .wrap{max-width:1240px} », et max-width l'emporte sur width quelle que soit la specificite — ce sont deux proprietes differentes, pas deux valeurs concurrentes. Le decor se trouvait donc bride a 1240 px sur un ecran plus large, portes et marque comprises puisque tout y est positionne en pourcentages. Constate en ligne le 27/08 sur une fenetre de 1707 px. ========================================================================= */ body.dlr-accueil .wrap{ max-width:none; margin:0; padding:0; /* * « 100% » et non « 100vw ». * * La maquette pose la scene en « width:100vw ». Or 100vw compte la barre * de defilement : sur une fenetre de 1893 px utiles, la scene faisait * 1908 px. Quinze pixels de trop. * * On ne les voyait pas — « overflow-x:hidden » les coupait — mais ils * decalaient tout : l'en-tete etant centre sur 1908 et les rideaux sur * 1893, le logo tombait 7,5 px a gauche de l'axe du decor, et le bouton * du compte perdait 15 px de marge a droite. * * Mesure du 01/09 sur le rendu reel. Le customizer ne pouvait pas le * montrer : son cadre d'apercu n'a pas de barre de defilement. */ width:100%; } /* ========================================================================= PANNEAU DE NAVIGATION — UNE CARTE DU SITE, PAS UNE LISTE ========================================================================= Le menu du client compte 23 entrees : 12 liens de premier niveau et deux rubriques — « A Lire avant tout » et « L'eau a la bouche » — qui coiffent leurs pages. Empilees au centre dans la taille d'origine, elles depassaient largement l'ecran. Le dessin d'origine tenait six liens ; il en recoit vingt-trois. D'ou ce parti : une grille de colonnes, chaque rubrique formant un bloc avec ses pages. C'est le modele d'un plan de site en pied de page — il absorbe le nombre sans donner l'impression d'un debordement, et la hierarchie du menu reste lisible d'un coup d'oeil. Les selecteurs de l'accueil sont repris : cette page porte ses regles sous « .dlr-accueil », plus specifiques que les notres. ========================================================================= */ .dlr-accueil .navover, .navover{ display:grid; /* 230 px : la place qu'il faut aux libelles longs en capitales, du genre « JE SUIS UN HOMME, JE VEUX EN ETRE ». A 196 px ils touchaient le bord. */ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-content:center; align-items:start; justify-items:start; gap:18px 44px; /* * Le voile doit couvrir tout l'ecran : on ne lui pose AUCUNE largeur. * C'est le rembourrage lateral qui centre la grille. Une largeur posee * ici retrecirait le voile lui-meme et laisserait reapparaitre les * rideaux sur les cotes — constate en capture le 27/08. */ padding:clamp(76px,9vh,104px) max(28px,calc((100% - 1060px) / 2)) clamp(36px,6vh,56px); overflow-y:auto; overscroll-behavior:contain; } /* Un lien de premier niveau. */ .dlr-accueil .navover a, .navover a{ font-size:clamp(15px,1.55vw,19px); line-height:1.32; letter-spacing:.04em; padding:3px 0; text-align:left; max-width:100%; overflow-wrap:break-word; } /* Une rubrique et ses pages : un seul bloc, donc une seule colonne. */ .dlr-accueil .navover .bloc, .navover .bloc{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; } /* L'intitule de rubrique : un titre, pas un lien. */ .dlr-accueil .navover .grp, .navover .grp{ font-family:var(--sans); font-size:clamp(10px,.92vw,11.5px); font-style:normal; letter-spacing:.26em; text-transform:uppercase; color:var(--or); opacity:.82; margin-bottom:5px; cursor:default; } .dlr-accueil .navover .sous, .navover .sous{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; } /* Les pages filles, plus discretes que les entrees de premier niveau. */ .dlr-accueil .navover a.sub, .navover a.sub{ font-size:clamp(13.5px,1.25vw,15.5px); font-style:normal; letter-spacing:.02em; opacity:.82; } .dlr-accueil .navover a.sub:hover, .navover a.sub:hover{opacity:1} /* Le separateur en filet n'a plus de sens dans une grille. */ .dlr-accueil .navover .sep, .navover .sep{display:none} @media (max-width:760px){ .dlr-accueil .navover, .navover{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 24px; padding-top:72px; } .dlr-accueil .navover a, .navover a{font-size:15px} .dlr-accueil .navover a.sub, .navover a.sub{font-size:13.5px} } /* ========================================================================= TYPOGRAPHIE DES PAGES ELEMENTOR ========================================================================= Constate le 27/08 : dix pages construites sous Elementor imposaient leurs propres polices, heritees de l'ancien theme. /tarification-des-evenements/ Arial 38 elements /je-suis-un-homme…/ Arial 16, Muli 9 /qui-sommes-nous/ Arial 10 /videos/, /formulaire/ Arial 3 Ni Arial ni Muli ne sont chargees par le site : Muli retombe sur la sans-serif generique du navigateur. Le resultat est un melange de caracteres d'une page a l'autre, et parfois dans la meme page. Deux sources : le CSS par page d'Elementor (post-46.css et consorts), qui ecrit les familles en dur ; et le widget de traduction GTranslate. Le correctif ne touche QUE la famille de caracteres — ni les tailles, ni les espacements, qui restent ceux voulus dans Elementor. Le « !important » est necessaire : les selecteurs d'Elementor (.elementor-46 .elementor-element-xxx p) sont plus specifiques que les notres. Mesure apres application, en direct dans le navigateur : /je-suis-un-homme…/ Arial 16 + Muli 9 -> 0 /tarification…/ Arial 38 -> 0 /videos/, /formulaire/ Arial 3 -> 0 ========================================================================= */ .elementor p, .elementor li, .elementor td, .elementor th, .elementor blockquote, .elementor .elementor-text-editor, .elementor .elementor-widget-text-editor, .elementor .elementor-toggle-content, .elementor .elementor-tab-content{ font-family:var(--serif) !important; } /* * ATTENTION — pas de « var(--display) » ici. * * Elementor definit SA PROPRE variable « --display » sur ses conteneurs * (.e-con-inner porte « --display:flex »), qui masque la notre par heritage. * Le navigateur recevait donc une police nommee « flex » et retombait sur son * caractere par defaut, sur 20 elements de la page tarification. * Constate le 27/08. La pile est donc ecrite en toutes lettres. */ .elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6, .elementor .elementor-heading-title{ font-family:"Playfair Display",Georgia,serif !important; } .elementor .elementor-button, .elementor button, .elementor input, .elementor select, .elementor textarea, .elementor .elementor-toggle-title, .elementor .elementor-tab-title, .gtranslate_wrapper, .gtranslate_wrapper *, .nturl, .gt-lang-code{ font-family:var(--sans) !important; } /* ========================================================================= COULEURS VENUES D'AILLEURS ========================================================================= Releve du 27/08 en previsualisation, sur trois pages. 1. LE SELECTEUR DE LANGUE. L'extension GTranslate pose son bouton en BLANC PLEIN — un rectangle de 118x45 px en bas a gauche, sur toutes les pages du site. Dans un decor bordeaux et or, c'est la seule tache claire qui ne soit pas voulue. Les deux autres zones claires relevees sont les boutons dores, eux parfaitement a leur place. 2. LE ROUGE DES FORMULAIRES. Forminator signale ses champs obligatoires et ses erreurs en #b3122a, un rouge vif etranger a la charte, dont le bordeaux est plus sourd. 3. UN GRIS BLEUTE #32373c, valeur par defaut de WordPress, laisse par un bloc de l'editeur. Le rouge de remplacement, #d4697a, est pris dans le rideau lui-meme (#611018 au centre du drape), eclairci pour rester lisible sur fond sombre. Contrastes mesures sur le fond #0b0607 : #d4697a 5,85 lisible #b3122a 2,91 insuffisant <- la valeur actuelle de Forminator #611018 1,53 invisible Le rouge d'origine n'etait donc pas seulement etranger a la charte : il passait sous le seuil de lisibilite de 4,5. On ne touche pas au reste : les bandeaux noirs de la grille tarifaire (« Femme / Homme / Couple ») sont un choix Elementor du client, et le blanc de ses titres reste tres proche du creme de la charte. ========================================================================= */ /* --- Le selecteur de langue ---------------------------------------------- */ .gt_float_switcher, .gt_float_switcher .gt-selected{ background:rgba(11,6,7,.94) !important; color:var(--texte) !important; border-radius:6px !important; box-shadow:none !important; } .gt_float_switcher{ border:1px solid var(--or-b) !important; box-shadow:0 6px 26px rgba(0,0,0,.5) !important; overflow:hidden; } .gt_float_switcher .gt-selected .gt-current-lang, .gt_float_switcher .gt-current-lang, .gt_float_switcher a, .gt_float_switcher span{ background:transparent !important; color:var(--texte) !important; } .gt_float_switcher .gt-lang-code{color:var(--or) !important} .gt_float_switcher a:hover{color:var(--or) !important} .gt_float_switcher .gt_options{ background:rgba(11,6,7,.97) !important; border-top:1px solid var(--or-b) !important; } .gt_float_switcher .gt_options a:hover{background:rgba(230,198,126,.10) !important} /* La fleche du selecteur, dessinee en filet clair. */ .gt_float_switcher .gt-selected .gt-current-lang .gt_float_switcher-arrow{ background:transparent !important; filter:invert(84%) sepia(24%) saturate(420%) hue-rotate(345deg) brightness(96%); } /* --- Le rouge des formulaires -------------------------------------------- */ .forminator-required, .forminator-error-message, .forminator-label .forminator-required, .forminator-ui .forminator-error-message{ color:#d4697a !important; } .forminator-ui.forminator-custom-form .forminator-input.forminator-has_error, .forminator-ui.forminator-custom-form .forminator-textarea.forminator-has_error{ border-color:#d4697a !important; } /* --- Le gris par defaut de WordPress ------------------------------------- */ .wp-block-group[style*="32373c"], [style*="background-color:#32373c"], [style*="background-color: #32373c"]{ background-color:rgba(11,6,7,.9) !important; } /* ========================================================================= L'ACCUEIL SUR TELEPHONE — UNE COMPOSITION A PART ========================================================================= Le decor de l'accueil est une scene PAYSAGE : « width:100vw » avec un rapport fige de 1448/1086, et tout — marque, video, portes — pose en pourcentages par-dessus l'image de fond. Sur un telephone en portrait, cette scene ne peut que devenir une bande. Mesure du 27/08 sur un ecran de 320x480 : scene 320 x 240 px, soit la moitie haute de l'ecran video 149 x 69 px portes 75 x 79 px chacune MENU 68 x 14 px (il faut 40 px pour un doigt) Connexion 35 x 31 px son 30 x 30 px Le titre chevauchait l'en-tete, et plus de la moitie de l'ecran restait noire sous la bande. Etirer la scene ne reglerait rien : les portes sont positionnees en pourcentages PAR-DESSUS l'image, donc changer le rapport les decalerait des portes peintes dans le visuel. D'ou ce parti : sous 700 px, on cesse la superposition. Le decor devient une banniere en haut, fondue dans le noir, et les elements reprennent le fil normal de la page — marque, video, puis AGENDA et BLOG en deux vraies barres pleine largeur, puis le lien « organiser ». Le dessin d'origine reste intact au-dessus de 700 px. ========================================================================= */ @media (max-width:700px){ body.dlr-accueil .wrap{ aspect-ratio:auto; width:100%; min-height:100svh; display:flex; flex-direction:column; align-items:center; gap:clamp(14px,3.6vw,22px); padding:0 16px clamp(30px,8vw,44px); /* Le decor en banniere : l'image cadree sur la scene, fondue vers le bas. */ background: linear-gradient(to bottom,rgba(11,6,7,0) 38%,#0b0607 86%), #0b0607 url("/assets/img/maquette-video.jpg") center top / 178% auto no-repeat; } /* --- l'en-tete reprend le fil, et devient touchable ------------------ */ body.dlr-accueil .top{ position:relative; inset:auto; width:100%; padding:10px 2px; gap:8px; } body.dlr-accueil .menu{ min-height:44px; display:flex; align-items:center; gap:9px; padding:0 4px; } body.dlr-accueil .top-r{gap:8px} body.dlr-accueil .top-r a.organiser, body.dlr-accueil .top-r a.cnx{ min-height:44px; padding:0 14px; display:inline-flex; align-items:center; } /* --- la marque, centree, sans chevaucher quoi que ce soit ------------ */ body.dlr-accueil .brand{ position:relative; inset:auto; width:100%; margin-top:4px; } body.dlr-accueil .brand .logo{width:52px} body.dlr-accueil .brand .titre{width:min(300px,72%);max-width:none} /* --- la video : un vrai bloc, plus une vignette ---------------------- */ body.dlr-accueil .video{ position:relative; inset:auto; width:100%; max-width:440px; height:auto; aspect-ratio:16/9; } body.dlr-accueil .sound{ width:44px; height:44px; right:10px; bottom:10px; } /* --- les deux portes deviennent deux barres -------------------------- */ /* * On vise « .door.agenda » et « .door.blog » nommement : les regles de * bureau portent trois classes (.dlr-accueil .door.agenda), elles * l'emporteraient sur un simple « .door ». Constate le 27/08 — les * portes restaient larges de 64 et 56 px. */ body.dlr-accueil .door, body.dlr-accueil .door.agenda, body.dlr-accueil .door.blog{ position:relative; inset:auto; width:100%; max-width:440px; height:auto; min-height:66px; display:flex; align-items:center; padding:14px 18px; border:1px solid var(--or-b); border-radius:10px; background:linear-gradient(180deg,rgba(46,13,18,.62),rgba(14,7,9,.8)); box-shadow:0 8px 26px rgba(0,0,0,.45); } body.dlr-accueil .door:hover{transform:none} /* Le contenu de la barre : intitule et sous-titre a gauche, chevron a droite. */ body.dlr-accueil .door .in{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"nm chev" "sub chev"; align-items:center; width:100%; gap:1px 14px; text-align:left; } body.dlr-accueil .door .nm{grid-area:nm} body.dlr-accueil .door .chev{ grid-area:chev; margin-top:0; width:38px; height:38px; opacity:1; transform:none; } /* Sans survol sur un telephone, le sous-titre doit s'afficher d'emblee. */ body.dlr-accueil .door .sub{ grid-area:sub; opacity:.78; max-height:none; overflow:visible; font-size:12px; max-width:none; } /* --- le troisieme lien ----------------------------------------------- */ body.dlr-accueil .troisieme{ position:relative; inset:auto; transform:none; width:100%; max-width:440px; white-space:normal; margin-top:2px; } body.dlr-accueil .troisieme a{ width:100%; justify-content:center; min-height:48px; } body.dlr-accueil .troisieme em{display:block;font-size:12px} } /* ========================================================================= AGENDA — DERNIERS RESTES DE THE EVENTS CALENDAR ========================================================================= Releve du 27/08 en previsualisation sur /evenements/ : police « Helvetica Neue » sur les commandes de l'agenda (Liste, Aujourd'hui, le jour abrege, Google Agenda) contraste 1.34 le voile de chargement, texte creme sur fond BLANC 1.65 le menu d'abonnement au calendrier, dore sur BLANC 1.00 le libelle de navigation, dore sur dore — invisible Ces trois surfaces echappaient a la passe precedente parce qu'elles ne s'affichent qu'en survol ou pendant un chargement : elles ne se voient pas sur une capture ordinaire. ========================================================================= */ /* La police de l'agenda rentre dans la charte. */ .tribe-common, .tribe-common button, .tribe-common input, .tribe-common select, .tribe-common a, .tribe-common span, .tribe-events button, .tribe-events a{ font-family:"Jost","Montserrat",Arial,sans-serif !important; } .tribe-common h1, .tribe-common h2, .tribe-common h3, .tribe-events-calendar-list__event-title, .tribe-events-single-event-title{ font-family:"Playfair Display",Georgia,serif !important; } /* Le voile de chargement : fond sombre, pas blanc. */ .tribe-events-view-loader, .tribe-events-view-loader__dots, .tribe-common .tribe-events-view-loader{ background:rgba(11,6,7,.92) !important; } .tribe-events-view-loader__text{color:var(--texte) !important} /* Le menu « s'abonner au calendrier » : meme traitement que le reste. */ .tribe-events-c-subscribe-dropdown__list, .tribe-events-c-subscribe-dropdown__content, .tribe-events-c-subscribe-dropdown__list-item{ background:rgba(11,6,7,.97) !important; border-color:var(--or-b) !important; } .tribe-events-c-subscribe-dropdown__list-item-link, .tribe-events-c-subscribe-dropdown__list-item-text{ color:var(--texte) !important; } .tribe-events-c-subscribe-dropdown__list-item:hover{background:rgba(230,198,126,.10) !important} .tribe-events-c-subscribe-dropdown__list-item:hover .tribe-events-c-subscribe-dropdown__list-item-link{ color:var(--or) !important; } /* Plus de dore sur dore : le fond des fleches de navigation reste transparent. */ .tribe-events-c-nav__next, .tribe-events-c-nav__prev, .tribe-events-c-nav__next a, .tribe-events-c-nav__prev a, .tribe-events-c-nav__next button, .tribe-events-c-nav__prev button{ background:transparent !important; } /* ========================================================================= LA BULLE WHATSAPP ========================================================================= L'extension « Click to Chat » pose son bouton en bas a droite, en position fixe. Sur telephone il se posait PAR-DESSUS le contenu : il masquait le chevron de la barre BLOG sur l'accueil, et une partie du visuel de la premiere soiree sur l'agenda. Constate en capture le 27/08. On ne le supprime pas — c'est un canal de contact que le client utilise — on le remonte au-dessus du selecteur de langue et on le retaille pour qu'il cesse de recouvrir ce qu'il y a dessous. ========================================================================= */ .ht-ctc.ht-ctc-chat, .ht-ctc-chat.ctc_s_5{ bottom:84px !important; right:14px !important; } .ht-ctc.ht-ctc-chat img, .ht-ctc.ht-ctc-chat svg{ width:52px !important; height:52px !important; } @media (max-width:700px){ .ht-ctc.ht-ctc-chat, .ht-ctc-chat.ctc_s_5{ bottom:76px !important; right:10px !important; } .ht-ctc.ht-ctc-chat img, .ht-ctc.ht-ctc-chat svg{ width:46px !important; height:46px !important; } /* Le selecteur de langue lui laisse la place, en bas a gauche. */ .gt_float_switcher{bottom:14px !important;left:12px !important} } /* ========================================================================= LES FILTRES PAR STYLE, SUR L'AGENDA ========================================================================= Reprise du dessin de la maquette : des pastilles a filet dore, en petites capitales espacees, celle qui est active se remplissant d'or. La barre est posee par assets/js/filtres.js, qui la reconstruit chaque fois que The Events Calendar redessine sa liste. ========================================================================= */ .dlr-filtres{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:26px 0 18px; } .dlr-filtres button{ /* * « !important » necessaire, et c'est ma propre regle qu'il faut battre : * la passe sur The Events Calendar plus haut pose * « .tribe-common button{background:var(--or) !important} », et la barre de * filtres vit a l'interieur de .tribe-common. A specificite egale, sans * !important de mon cote, tous les boutons sortaient dores — donc tous * avaient l'air selectionnes. Constate en previsualisation le 27/08. */ border:1px solid rgba(184,145,47,.35) !important; background:transparent !important; color:var(--texte) !important; opacity:.75; padding:9px 20px; border-radius:30px; font-family:var(--sans); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:opacity .25s,border-color .25s,background .25s,color .25s; /* Une pastille reste attrapable au doigt : 9,5 px de texte ne suffisent pas. */ min-height:36px; } .dlr-filtres button:hover{opacity:1;border-color:var(--or) !important} .dlr-filtres button:focus-visible{outline:2px solid var(--or);outline-offset:2px} .dlr-filtres button.on{ background:var(--or) !important; color:#160b06 !important; border-color:var(--or) !important; opacity:1; } .dlr-filtres-vide{ text-align:center; font-family:var(--serif); font-size:16px; color:var(--texte); opacity:.7; margin:26px 0; } @media (max-width:700px){ .dlr-filtres{gap:8px;margin:18px 0 14px} .dlr-filtres button{padding:10px 15px;font-size:9px;letter-spacing:.16em;min-height:40px} } /* ========================================================================= LE FORMULAIRE DE CONNEXION ========================================================================= On n'a pas redessine le formulaire a la main : wp_login_form() porte le jeton anti-rejeu, les erreurs et la redirection. Il sort avec ses propres classes — .login-username, .login-password, .login-remember, .login-submit — qu'on raccorde ici au dessin de la maquette (.f-line). ========================================================================= */ .col-form .login-username, .col-form .login-password{ display:flex; flex-direction:column; gap:7px; margin:0 0 16px; } .col-form .login-username label, .col-form .login-password label{ font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--texte); opacity:.72; } .col-form .login-username input, .col-form .login-password input{ width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(184,145,47,.28); border-radius:2px; padding:13px 15px; color:var(--texte); font-family:var(--sans); font-size:15px; } .col-form .login-username input:focus, .col-form .login-password input:focus{ outline:none; border-color:var(--or); } .col-form .login-remember{ display:flex; align-items:center; gap:9px; margin:0 0 18px; font-size:13px; color:var(--texte); opacity:.8; } .col-form .login-remember input{accent-color:var(--or)} .col-form .login-submit input, .col-form a.f-send{ display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:48px; background:var(--or); color:#160b06; border:none; border-radius:2px; font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; cursor:pointer; transition:background .25s; } .col-form .login-submit input:hover, .col-form a.f-send:hover{background:#f5e2ae} .col-form .f-note a.oubli{color:var(--or)} /* ========================================================================= LA FICHE DE SOIREE — BALISAGE HISTORIQUE DE THE EVENTS CALENDAR ========================================================================= La passe precedente couvrait l'agenda, rendu par les vues « v2 ». La fiche d'une soiree, elle, sort encore avec le balisage historique de l'extension, qui echappait a tout. Releve en previsualisation le 27/08 : bloc « Details » texte #141827 sur fond #0a0506 — contraste 1,15, donc illisible : date, horaire, tarif, organisateur police Helvetica Neue sur 9 elements Six textes etaient concernes. Ce bloc est celui que le visiteur lit pour savoir quand et combien : c'etait le pire endroit ou laisser ca. ========================================================================= */ .tribe-events-single, .tribe-events-single *, .tribe-events-meta-group, .tribe-events-meta-group *, .tribe-events-single-section-title, .tribe-events-abbr, .tribe-events-cost, .tribe-events-event-cost, .tribe-events-meta-item, .tribe-events-meta-value, .tribe-organizer, .tribe-venue, .tribe-events-back, .tribe-events-back a{ font-family:"Jost","Montserrat",Arial,sans-serif !important; color:var(--texte) !important; } .tribe-events-single-section-title, .tribe-events-meta-group .tribe-events-single-section-title{ font-family:"Playfair Display",Georgia,serif !important; color:var(--or) !important; } /* Ce que le visiteur cherche d'abord : quand, et combien. En or. */ .tribe-events-cost, .tribe-events-event-cost, .tribe-event-date-start, .tribe-event-time{ color:var(--or) !important; } .tribe-events-back a, .tribe-events-single a{color:var(--or) !important} .tribe-events-meta-item dt, .tribe-events-meta-item strong{color:var(--or) !important;opacity:.9} /* ========================================================================= LES PAGES INTERIEURES SUR TELEPHONE ========================================================================= La passe mobile precedente n'avait traite que l'accueil. Releve du 27/08 a 320 px, sur Le Media, les CGV et un article — les memes defauts partout : bouton « Organiser » 37 x 31 il faut 40 x 40 pour un doigt bouton du compte 45 x 31 lien « Tout voir » 70 x 16 fil de retour 81 x 18 Et sur Le Media, six elements debordaient : la ligne de rubrique — numero, titre, filet, « Tout voir » — reste sur une seule ligne et sort de l'ecran. ========================================================================= */ @media (max-width:700px){ /* --- l'en-tete des pages interieures --------------------------------- */ .hdr{padding:8px 14px;gap:8px} .hdr .menu{ min-height:44px; display:flex; align-items:center; gap:9px; padding:0 4px; } .hdr .home{ min-height:44px; display:inline-flex; align-items:center; } .hdr-r{gap:8px} .hdr-r a.organiser, .hdr-r a.cnx{ min-height:44px; padding:0 13px; display:inline-flex; align-items:center; } /* --- la ligne de rubrique se replie ---------------------------------- */ .rub{ flex-wrap:wrap; gap:8px 12px; margin:34px 0 18px; } .rub .num{font-size:30px} .rub h2{font-size:22px;flex:1 1 auto;min-width:0} /* Le filet n'a plus de place a cette largeur : il passe sous le titre. */ .rub .line{flex:1 1 100%;order:3;min-width:0} .rub .all{ order:2; min-height:40px; display:inline-flex; align-items:center; padding:0 4px; white-space:nowrap; } /* --- les liens de navigation dans le contenu ------------------------- */ .back, .article .back, .tribe-events-back a{ min-height:44px; display:inline-flex; align-items:center; } } /* ------------------------------------------------------------------------- LE PIED DE PAGE SUR TELEPHONE ------------------------------------------------------------------------- Le pied de page est une suite de liens separes par des points, sur une seule ligne. A 320 px cette ligne se replie sur quatre — et comme la hauteur de ligne vaut la taille du texte, les quatre lignes se touchent : ecart mesure 0 px entre « Conditions Générales de Vente » et « Règlement des soirées ». Un lien de 16 px de haut colle au suivant : impossible de viser le bon. On ne peut pas ecarter ces lignes avec une marge — ce sont des liens en ligne, pas des blocs. C'est la hauteur de ligne qui les separe. On y ajoute un rembourrage vertical sur les liens : il agrandit la zone sensible sans deplacer le texte. ------------------------------------------------------------------------- */ @media (max-width:700px){ .foot{ line-height:2.7; padding-bottom:34px; } .foot a{ padding:9px 3px; display:inline-block; line-height:1; } /* le logo et le bouton de l'en-tete, au millimetre pres */ .hdr .home{padding:0 4px} .hdr-r a.organiser{padding:0 15px} /* l'etiquette de rubrique, en tete d'article */ .article .tag, .tag{ min-height:34px; display:inline-flex; align-items:center; padding:0 12px; } } /* ------------------------------------------------------------------------- « EVENEMENTS SUIVANTS » : UN LIBELLE INVISIBLE ------------------------------------------------------------------------- Mesure du 27/08 sur /evenements/ : le bouton « Évènements suivants » portait une encre doree #e6c67e sur un fond dore #e6c67e. Contraste 1.00 — le texte n'existait tout simplement pas a l'ecran. J'avais deja ecrit, plus haut, une regle censee rendre ce fond transparent. Elle ne s'appliquait pas, et pas par oubli du « !important » : les deux regles en portaient un. .tribe-common button -> une classe + une balise (0,1,1) .tribe-events-c-nav__next -> une classe seule (0,1,0) A egalite de « !important », c'est la specificite qui tranche, et la regle generale l'emportait sur la regle particuliere. C'est le meme piege que pour les boutons de filtre : nommer la balise dans le selecteur general suffit a battre toutes les corrections ecrites en classe seule. La parade est de repasser devant : on nomme le conteneur ET la balise. ------------------------------------------------------------------------- */ .tribe-common a.tribe-events-c-nav__prev, .tribe-common a.tribe-events-c-nav__next, .tribe-common button.tribe-events-c-nav__prev, .tribe-common button.tribe-events-c-nav__next, .tribe-events-c-nav a.tribe-events-c-nav__prev, .tribe-events-c-nav a.tribe-events-c-nav__next, .tribe-events-c-nav button.tribe-events-c-nav__prev, .tribe-events-c-nav button.tribe-events-c-nav__next{ background:transparent !important; border:1px solid rgba(184,145,47,.30) !important; border-radius:3px !important; padding:9px 16px !important; color:var(--or) !important; } .tribe-common a.tribe-events-c-nav__prev:hover, .tribe-common a.tribe-events-c-nav__next:hover, .tribe-common button.tribe-events-c-nav__prev:hover, .tribe-common button.tribe-events-c-nav__next:hover{ background:rgba(184,145,47,.10) !important; border-color:rgba(184,145,47,.55) !important; } /* Le libelle et la fleche suivent le bouton, pas l'inverse. */ .tribe-common .tribe-events-c-nav__prev-label, .tribe-common .tribe-events-c-nav__next-label{ color:var(--or) !important; font-family:var(--sans) !important; letter-spacing:.08em; } .tribe-common .tribe-events-c-nav__prev-icon-svg path, .tribe-common .tribe-events-c-nav__next-icon-svg path{ fill:var(--or) !important; stroke:var(--or) !important; } /* Un bouton desactive — quand il n'y a pas de periode suivante — s'efface sans disparaitre : il doit rester lisible, sinon on croit a un bogue. */ .tribe-common .tribe-events-c-nav__prev[disabled], .tribe-common .tribe-events-c-nav__next[disabled]{ opacity:.42 !important; cursor:default !important; } /* ------------------------------------------------------------------------- LE TEXTE NOIR HERITE D'ELEMENTOR ------------------------------------------------------------------------- Mesure du 27/08 sur /qui-sommes-nous/ : six paragraphes en #000 sur le fond sombre du site. Contraste 1.04 — le texte etait la, et personne ne pouvait le lire. L'encre ne vient ni de la page ni d'un attribut « style » : elle vient d'Elementor, qui habille ses propres conteneurs. Les pages encore montees sous Elementor portent donc toutes ce risque, pas seulement celle-ci. Deux reponses, et il faut les deux : — coller le contenu de la maquette en HTML simple dans ces pages, ce qui fait sortir Elementor pour de bon (c'est le fond du sujet) ; — cette regle, qui protege les pages qu'on n'aura pas encore reprises, et celles que le client montera lui-meme plus tard. Verifie sur /nos-formules/, qui est aussi une page Elementor : le releve est rigoureusement identique avec et sans la regle. Elle ne repeint donc pas ce qui etait deja juste — elle ne rattrape que l'heritage noir. ------------------------------------------------------------------------- */ .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li, .elementor-widget-container > p, .elementor-widget-container > ul li, .elementor-widget-container > ol li, .elementor-widget-container > div > p{ color:var(--texte) !important; } .elementor-widget-heading .elementor-heading-title{ color:var(--creme) !important; } .elementor-widget-container a{ color:var(--or) !important; } /* ========================================================================= LES PANNEAUX DE PAID MEMBERSHIPS PRO ========================================================================= Mesure du 27/08 sur /connexion/ : un bloc « pmpro_card » de 820 x 175, en blanc plein, avec du texte #222 et des liens dores dessus — contraste 1.65 et 1.51. Sur un site noir et or, c'est une plaque blanche au milieu de la page, et les liens ne se lisent plus. Ce n'est pas propre a cette page. Depuis la version 3, Paid Memberships Pro dessine tous ses ecrans avec les memes briques : l'accueil d'un membre connecte .pmpro_logged_in_welcome_wrap la page de compte .pmpro_account le tunnel de commande .pmpro_checkout la confirmation et les factures .pmpro_confirmation_wrap, .pmpro_invoice les messages et les erreurs .pmpro_message, .pmpro_error Le defaut se serait donc montre sur tout l'espace abonne — c'est-a-dire exactement ce que le client vend. On habille l'ensemble d'un coup, plutot que la seule page ou on l'a vu. Les champs de saisie recoivent le meme traitement que ceux de Forminator, pour qu'un abonne ne change pas d'univers en passant du contact au compte. ========================================================================= */ .pmpro_card,.pmpro_card_content,.pmpro_card_actions,.pmpro_box, .pmpro_login_wrap,.pmpro_logged_in_welcome_wrap,.pmpro_member_profile_edit-wrap, .pmpro_checkout,.pmpro_checkout-fields,.pmpro_form,.pmpro_section,.pmpro_table, .pmpro_account,.pmpro_account-profile,.pmpro_confirmation_wrap,.pmpro_invoice{ background:rgba(255,255,255,.04) !important; color:var(--texte) !important; border:1px solid rgba(184,145,47,.24) !important; border-radius:6px; box-shadow:none !important; } .pmpro_card *,.pmpro_box *,.pmpro_checkout *,.pmpro_account *,.pmpro_form *, .pmpro_logged_in_welcome_wrap *,.pmpro_login_wrap *{ color:var(--texte) !important; } .pmpro_card_title,.pmpro_card_title *,.pmpro_checkout h2,.pmpro_checkout h3, .pmpro_account h2,.pmpro_account h3,.pmpro_section_title,.pmpro_section_title *{ color:var(--creme) !important; font-family:"Playfair Display",Georgia,serif !important; } .pmpro_card a,.pmpro_box a,.pmpro_checkout a,.pmpro_account a, .pmpro_logged_in_welcome_wrap a,.pmpro_login_wrap a{color:var(--or) !important} .pmpro_table th,.pmpro_table td{ border-color:rgba(184,145,47,.20) !important; background:transparent !important; color:var(--texte) !important; } .pmpro_table thead th{color:var(--or) !important} .pmpro_form input[type=text],.pmpro_form input[type=email],.pmpro_form input[type=password], .pmpro_form input[type=tel],.pmpro_form select,.pmpro_form textarea, .pmpro_checkout input,.pmpro_checkout select,.pmpro_checkout textarea{ background:rgba(255,255,255,.05) !important; color:var(--texte) !important; border:1px solid rgba(184,145,47,.32) !important; border-radius:3px !important; } .pmpro_btn,.pmpro_btn-submit,.pmpro_card_actions .pmpro_btn,input.pmpro_btn{ background:var(--or) !important; color:#160b06 !important; border:0 !important; border-radius:3px !important; font-family:var(--sans) !important; letter-spacing:.1em; } .pmpro_btn-cancel,.pmpro_btn.pmpro_btn-cancel{ background:transparent !important; color:var(--or) !important; border:1px solid rgba(184,145,47,.35) !important; } /* Un message doit se voir sans crier ; une erreur doit se voir tout court. */ .pmpro_message,.pmpro_success,.pmpro_alert{ background:rgba(184,145,47,.10) !important; border:1px solid rgba(184,145,47,.35) !important; color:var(--texte) !important; } .pmpro_error,.pmpro_message.pmpro_error{ background:rgba(179,18,42,.12) !important; border:1px solid rgba(179,18,42,.45) !important; color:#f0c9d1 !important; } /* ------------------------------------------------------------------------- LA BARRE D'OUTILS DE L'AGENDA SUR TELEPHONE ------------------------------------------------------------------------- Mesure du 27/08 a 320 px : huit elements sortaient de l'ecran, jusqu'a 79 px a droite. En cause, la barre de The Events Calendar, qui aligne la recherche et le selecteur « Liste / Mois / Jour » sur une seule rangee : 184 px de selecteur dans 221 px de large, le reste passe par-dessus bord. On laisse les deux blocs se replier l'un sous l'autre, et on donne aux boutons une hauteur de doigt. Le selecteur reste accessible : la maquette ne le prevoit pas, mais le supprimer priverait le visiteur de la vue par mois — c'est un choix a soumettre au client, pas a trancher ici. ------------------------------------------------------------------------- */ @media (max-width:700px){ .tribe-events-c-events-bar{ flex-wrap:wrap !important; gap:10px !important; width:100% !important;max-width:100% !important; } .tribe-events-c-events-bar__search, .tribe-events-c-events-bar__views{ flex:1 1 100% !important; width:100% !important;max-width:100% !important;min-width:0 !important; } .tribe-events-c-view-selector, .tribe-events-c-view-selector__content{ width:100% !important;max-width:100% !important;min-width:0 !important; } .tribe-events-c-view-selector__list{ width:100% !important;max-width:100% !important; display:flex !important;flex-wrap:wrap !important; gap:6px !important;justify-content:flex-start !important; } .tribe-events-c-view-selector__list-item{flex:0 0 auto !important;margin:0 !important} .tribe-events-c-view-selector__list-item-link{ min-width:64px !important;min-height:44px !important; display:flex !important;align-items:center !important;justify-content:center !important; padding:0 12px !important; } .tribe-common-c-btn-border-small, .tribe-events-c-top-bar__today-button{ min-height:44px !important;padding:0 14px !important; display:inline-flex !important;align-items:center !important; } .tribe-common-c-btn-icon, .tribe-events-c-top-bar__nav-link{ min-width:44px !important;min-height:44px !important; display:inline-flex !important;align-items:center !important;justify-content:center !important; } .tribe-events-header,.tribe-events-l-container,.tribe-events-view{ width:100% !important;max-width:100% !important; overflow-x:hidden; } } /* ------------------------------------------------------------------------- DES CIBLES QU'ON PEUT VISER AU DOIGT ------------------------------------------------------------------------- Releve du 27/08 a 320 px : trois commandes tombaient a 23,5 px de haut, pour un minimum de 24 exige par la norme (WCAG 2.2 AA, critere 2.5.8). Un demi-pixel — mais un demi-pixel du mauvais cote de la ligne : les liens du sommaire deroulant .navover .sub le bouton « choisir un fichier » Forminator, page de contact On ne les agrandit pas : on leur donne une hauteur de boite. Le texte ne bouge pas, la zone sensible grandit. ------------------------------------------------------------------------- */ .navover .sub, .navover .bloc a{ min-height:30px; display:flex; align-items:center; } .forminator-button-upload, .forminator-upload-file--label, [class*="forminator-upload-file--"]{ min-height:40px !important; display:inline-flex !important; align-items:center !important; padding:0 14px !important; } /* ========================================================================= LES COMMENTAIRES DE LA FICHE DE SOIREE ========================================================================= La maquette ne prevoit aucun commentaire. La tentation etait donc de les fermer, au nom de la conformite. J'ai regarde ce qu'il y avait dedans avant de decider, et c'est heureux : « Bonjour, Je suis intéressé par cet événement, ayant 24 ans, je me sens concerné pour participer... » — Clement, 29 août 2026 Ce n'est pas du spam : c'est une candidature. Le client se sert de ce champ comme d'un canal d'inscription, et le fermer lui aurait coute des contacts sans que personne ne s'en apercoive. On garde donc les commentaires, et on les habille : c'est The Events Calendar qui les affiche, sans style, d'ou des commandes a 20-23 px et un bloc qui jurait avec le reste du site. ========================================================================= */ #comments,.comments-area,#respond{ max-width:820px; margin:48px auto 0; color:var(--texte); } h3#comments,.comments-title,#reply-title{ font-family:"Playfair Display",Georgia,serif !important; color:var(--creme) !important; font-size:26px; margin:0 0 18px; } .commentlist,.comment-list{list-style:none;padding:0;margin:0 0 30px} .comment,li.comment,article.comment-body{ background:rgba(255,255,255,.04); border:1px solid rgba(184,145,47,.20); border-radius:6px; padding:16px 18px; margin:0 0 14px; } .comment .fn,.comment-author .fn,cite.fn{ color:var(--or) !important; font-family:var(--sans) !important; font-style:normal; letter-spacing:.06em; } .comment-meta,.comment-metadata,.comment-meta a{ color:rgba(233,221,203,.62) !important; font-size:12px; } .comment p,.comment-content p{ color:var(--texte) !important; font-family:var(--serif) !important; font-size:16.5px; line-height:1.7; } /* Les commandes : jamais sous 24 px, et 40 quand la place le permet. */ .comment-reply-link,.comment-edit-link,.comment-meta a,#cancel-comment-reply-link{ min-height:40px; display:inline-flex; align-items:center; padding:0 10px; color:var(--or) !important; border:1px solid rgba(184,145,47,.28); border-radius:3px; margin:6px 6px 0 0; text-decoration:none; } #respond input[type=text],#respond input[type=email],#respond input[type=url],#respond textarea{ background:rgba(255,255,255,.05) !important; color:var(--texte) !important; border:1px solid rgba(184,145,47,.32) !important; border-radius:3px !important; padding:11px 13px !important; font-family:var(--sans) !important; width:100%;max-width:100%; } #respond label{ color:rgba(233,221,203,.75) !important; font-size:12px;letter-spacing:.1em;text-transform:uppercase; } #respond #submit,#respond input[type=submit]{ background:var(--or) !important; color:#160b06 !important; border:0 !important; border-radius:3px !important; min-height:46px !important; padding:0 24px !important; font-family:var(--sans) !important; letter-spacing:.1em; cursor:pointer; } /* « Ajouter au calendrier » : le bouton et sa liste deroulante. */ .tribe-events-c-subscribe-dropdown__button, .tribe-events-c-subscribe-dropdown__button-text{ min-height:40px !important; display:inline-flex !important; align-items:center !important; } .tribe-events-c-subscribe-dropdown__list-item a{ min-height:40px !important; display:flex !important; align-items:center !important; } /* Le style de la soiree, en pastille — comme les etiquettes de la maquette. */ .tribe-events-event-categories a, .tribe-events-meta-item .tribe-events-event-categories a{ display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border:1px solid rgba(184,145,47,.30); border-radius:999px; color:var(--or) !important; font-size:12px; letter-spacing:.08em; text-decoration:none; margin:2px 4px 2px 0; } /* ========================================================================= LA PORTE D'AGE — LE PREMIER ECRAN DU SITE ========================================================================= Releve du 01/09 sur le rendu reel, en visiteur anonyme. Sous le nouveau theme, la verification d'age arrivait cassee : le panneau tombait a 0 x 0, colle en haut a gauche ; les boutons « Oui » et « Non » partaient en coordonnees negatives ; le decor de l'accueil traversait le voile, si bien que le titre du site s'affichait deux fois, superpose a lui-meme. Sous Blocksy, la meme page est juste : panneau de 500 x 444, centre. La cause est chez moi. L'accueil ouvre par une remise a zero heritee de la maquette : .dlr-accueil *{box-sizing:border-box;margin:0;padding:0} Le module de verification d'age est un enfant de , donc il tombe dedans. Or il se centre par « margin:auto » : dans un conteneur en flex, c'est la marge automatique qui place l'element au milieu, sur les deux axes. Mettre cette marge a zero ne decale pas le panneau — il l'ecrase. C'est le tout premier ecran que voit un visiteur. Il n'apparait jamais dans l'administration, et le customizer ne le montre pas non plus : deux raisons de ne l'avoir jamais vu avant d'ouvrir un vrai navigateur anonyme. Les valeurs ci-dessous ne sont pas choisies : ce sont celles mesurees sur le site en ligne, ou la porte fonctionne. ========================================================================= */ /* * Le voile monte : la page se retire tant qu'on n'est pas entre. * * Premiere version, le 01/09 : je n'avais vise que l'accueil * (« body.dlr-accueil »). Sur toutes les autres pages, le contenu continuait * de traverser le voile — on lisait « L'Agenda » en gros derriere le panneau * de verification, superpose a son propre titre. * * On masque donc tout ce que porte, sauf trois choses : la porte * elle-meme, l'avis de cookies et le repere d'apercu. Une liste d'exceptions * vaut mieux qu'une liste de cibles : elle ne laisse rien passer quand une * page a une structure differente de celle qu'on avait en tete. */ html.age-gate__restricted body > *:not(.age-gate__wrapper):not(#wera-cookies):not(.wera-apercu):not(#wpadminbar):not(script):not(style):not(template):not(link){ display:none !important; } /* Le centrage, qui est tout le sujet. */ .age-gate{ margin:auto !important; padding:20px !important; width:100% !important; max-width:500px !important; } .age-gate__wrapper{ padding:20px !important; box-sizing:border-box !important; } /* Les respirations verticales, une a une, telles qu'elles sont en ligne. */ .age-gate__heading-title{margin:0 0 16px !important} .age-gate__fields{margin:0 0 16px !important} .age-gate__challenge{margin:0 0 24px !important} .age-gate__remember-wrapper{margin:0 0 16px !important} .age-gate__submit{padding:8px 16px !important} .age-gate__additional-information p{margin:0 0 10px !important} /* Le titre reste en blanc plutot qu'au vert sombre du reglage d'origine : sur le voile noir, ce vert donnait un contraste de 1,4 — illisible. */ .age-gate__heading-title{ color:#e9ddcb !important; font-family:"Playfair Display",Georgia,serif !important; } .age-gate__challenge{color:#e9ddcb !important} .age-gate__additional-information, .age-gate__additional-information p, .age-gate__remember{color:rgba(233,221,203,.72) !important} .age-gate__submit{ background:var(--or,#e6c67e) !important; color:#160b06 !important; border:0 !important; border-radius:3px !important; min-height:44px !important; font-family:var(--sans,Jost),sans-serif !important; letter-spacing:.1em; } .age-gate__submit--no, .age-gate__submit-no{ background:transparent !important; color:var(--or,#e6c67e) !important; border:1px solid rgba(184,145,47,.45) !important; } /* ========================================================================= L'AVIS COOKIES SUR TELEPHONE ========================================================================= Mesure du 01/09 en visiteur anonyme, ecran de 375 x 812 : bandeau 375 x 624 — 77 % de la hauteur de l'ecran Le premier ecran du site etait donc, aux trois quarts, un avis de mesure d'audience. On voyait le logo, et rien d'autre. La regle d'origine passe tout en colonne sous 640 px : le texte, puis le lien, puis les deux boutons l'un sous l'autre, plus 76 px de rembourrage en bas pour degager le selecteur de langue. Empile, cela fait 624 px. Les deux boutons tiennent cote a cote : ils font 44 px de haut chacun, et la moitie de 375 px leur suffit largement. On les remet sur une ligne, on resserre le texte, et on garde le degagement du bas — le selecteur de langue est toujours la. Le bandeau descend a environ 190 px, soit un quart de l'ecran. ========================================================================= */ @media (max-width:640px){ body #wera-cookies{ /* * 86 px en bas, et non 70 : la bulle WhatsApp est posee dans le coin * bas-droit, haute de 52 px a 20 px du bord. A 70 px, elle mordait sur * le bouton « Accepter ». Constate le 01/09 sur 375 x 812. */ padding:12px 12px 86px !important; gap:10px !important; /* Un avis qui ne rentrerait pas doit defiler, jamais recouvrir. */ max-height:52vh; overflow-y:auto; } body #wera-cookies .wera-cookies__texte{ flex:1 1 auto !important; min-width:0 !important; font-size:12.5px; line-height:1.5; } body #wera-cookies strong{font-size:13px;margin-bottom:2px} /* Les deux boutons reviennent sur une seule ligne. */ body #wera-cookies .wera-cookies__actions{ flex-direction:row !important; gap:8px !important; width:100%; /* * 58 px reserves a droite : la bulle WhatsApp est posee dans ce coin, * au-dessus de tout le reste (z-index 99999999). Sans ce degagement * elle recouvrait la fin du bouton « Accepter » — mesure du 01/09 sur * 375 x 812. On preferera toujours deux boutons un peu plus etroits a * un bouton qu'on ne peut pas viser entierement. */ padding-right:58px; box-sizing:border-box; } body #wera-cookies .wera-cookies__btn{ flex:1 1 0 !important; min-width:0 !important; padding:11px 8px !important; min-height:44px; } } /* ------------------------------------------------------------------------- LA LISTE DE L'AGENDA SUR TELEPHONE ------------------------------------------------------------------------- Debordement de 2 px a 375 px. The Events Calendar cadre ses lignes avec un couple classique : une marge negative sur la ligne, un rembourrage egal sur son contenu. .tribe-events-calendar-list__event margin 0 -21px .tribe-events-calendar-list__event-details padding 0 21px Le compte est juste tant que la largeur disponible le permet. Sur un telephone, les 21 px de gauche et de droite sortent de l'ecran. ------------------------------------------------------------------------- */ @media (max-width:700px){ .tribe-events-calendar-list__event{ margin-left:0 !important; margin-right:0 !important; max-width:100% !important; } .tribe-events-calendar-list__event-details{ padding-left:0 !important; padding-right:0 !important; max-width:100% !important; } } /* ------------------------------------------------------------------------- LE GRIS DU PIED DE PAGE ------------------------------------------------------------------------- La maquette pose #6b625a sur #0a0506, en 11 px. Le rapport de contraste vaut 3,39 la ou la norme en demande 4,5 a cette taille. C'est le seul endroit du site qui restait sous le seuil, et il y est reste longtemps : c'etait une couleur de la maquette, pas un defaut de ma part, donc je ne l'ai pas touchee sans accord. Accord donne le 01/09. On ne choisit pas une couleur au jugé : on garde le rapport exact entre les trois canaux — donc la teinte, un gris chaud — et on remonte la clarte jusqu'au premier point qui franchit le seuil. #6b625a contraste 3,39 sous la norme #80756c contraste 4,51 conforme, meme teinte Les liens du pied, eux, ne bougent pas : #8d8175 donne deja 5,33. Les eclaircir aussi aurait aplati la distinction entre le texte et les liens, qui est voulue. ------------------------------------------------------------------------- */ body .foot{ color:#80756c; } /* ========================================================================= CE QUE DES EXTENSIONS DESSINAIENT — repris par le site lui-meme ========================================================================= */ /* L'avis de mesure d'audience. Valeurs relevees sur le site en ligne le 01/09. */ #wera-cookies{position:fixed;left:0;right:0;bottom:0;z-index:99998;display:flex;flex-wrap:wrap; align-items:center;justify-content:space-between;gap:14px;padding:14px 84px 14px 24px; background:rgba(11,6,7,.96);border-top:1px solid rgba(184,145,47,.35);color:#e9ddcb; font:400 13.5px/1.55 Jost,Arial,sans-serif;box-shadow:0 -8px 30px rgba(0,0,0,.45)} #wera-cookies .wera-cookies__texte{flex:1 1 420px;min-width:260px} #wera-cookies strong{display:block;margin-bottom:3px;font-size:14px} #wera-cookies a{color:#e6c67e} #wera-cookies .wera-cookies__actions{display:flex;gap:10px;flex:0 0 auto} #wera-cookies .wera-cookies__btn{min-width:132px;padding:11px 20px;border:1px solid #e8c87a;background:transparent; color:#e8c87a;font:inherit;font-weight:500;letter-spacing:.04em;border-radius:3px;cursor:pointer} #wera-cookies .wera-cookies__btn--ok{background:#e6c67e;color:#160b06} @media (max-width:900px){#wera-cookies{padding:14px 84px 14px 14px}} /* La bulle WhatsApp, en bas a droite. */ .ht-ctc-chat{position:fixed;right:20px;bottom:20px;z-index:99999;width:52px;height:52px;border-radius:50%; background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.4)} /* Un message d'une fois, en tete de contenu. */ .dlr-flash{max-width:820px;margin:26px auto 0;padding:12px 16px;border:1px solid rgba(184,145,47,.35); border-radius:6px;background:rgba(184,145,47,.08);color:#e9ddcb;font:400 14px/1.5 Jost,sans-serif} /* La pagination des rubriques. */ .dlr-pages{display:flex;justify-content:center;gap:6px;margin:34px 0 10px;flex-wrap:wrap} .dlr-pages .page-numbers{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center; padding:0 12px;border:1px solid rgba(184,145,47,.28);border-radius:3px;color:#e6c67e;text-decoration:none; font:500 13px Jost,sans-serif;letter-spacing:.06em} .dlr-pages .current{background:#e6c67e;color:#160b06} .dlr-pages .dots{border:0} /* Formulaires du site (connexion, inscription, contact, souscription). */ .dlr-form{max-width:520px} .dlr-form label{display:block;margin:14px 0 6px;font:500 11px Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,221,203,.75)} .dlr-form input[type=text],.dlr-form input[type=email],.dlr-form input[type=password],.dlr-form textarea,.dlr-form select{ width:100%;padding:12px 13px;background:rgba(255,255,255,.05);color:#e9ddcb;border:1px solid rgba(184,145,47,.32); border-radius:3px;font:400 15px Jost,sans-serif} .dlr-form textarea{min-height:160px;resize:vertical} .dlr-form .f-send,.dlr-form button[type=submit]{margin-top:18px;background:#e6c67e;color:#160b06;border:0;border-radius:3px; min-height:46px;padding:0 26px;font:500 13px Jost,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer} .dlr-form .erreur{margin:14px 0 0;padding:10px 14px;border:1px solid rgba(179,18,42,.45);background:rgba(179,18,42,.12);color:#f0c9d1;border-radius:4px} .dlr-form .case{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font:400 13.5px/1.5 Jost,sans-serif;text-transform:none;letter-spacing:0;color:#e9ddcb} .dlr-form .case input{margin-top:4px} .piege{position:absolute;left:-9999px;opacity:0} /* Le seuil du contenu reserve, et les liens vers l'article d'avant et d'apres. */ .dlr-reserve{margin:34px 0 10px;padding:24px 26px;border:1px solid rgba(184,145,47,.35);border-radius:6px; background:rgba(184,145,47,.07);text-align:center} .dlr-reserve p{margin:0 0 16px;font:400 16px/1.5 "Cormorant Garamond",Georgia,serif;color:#e9ddcb} .dlr-voisins{max-width:820px;margin:40px auto 0;display:flex;justify-content:space-between;gap:20px; padding-top:22px;border-top:1px solid rgba(184,145,47,.25);font:400 13px/1.5 Jost,sans-serif} .dlr-voisins a{color:#e6c67e;text-decoration:none;max-width:48%;min-height:44px;display:inline-flex;align-items:center} .dlr-voisins .suiv{margin-left:auto;text-align:right} /* ========================================================================= LA PORTE D'AGE — base, qui vivait dans la feuille du module Age Gate ========================================================================= Le site code n'a plus le module : il faut le voile, le panneau centre et la disposition. Les couleurs et les boutons sont deja regles plus haut. */ html.age-gate__restricted,html.age-gate__restricted body{overflow:hidden;height:100%} .age-gate__wrapper{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center; padding:20px;box-sizing:border-box;background:#0b0607} .age-gate__background-color{position:absolute;inset:0;background:rgba(0,0,0,.7)} .age-gate{position:relative;width:100%;max-width:500px;margin:auto;padding:26px 24px;box-sizing:border-box; background:rgba(20,10,8,.92);border:1px solid rgba(184,145,47,.35);border-radius:6px;text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.6)} .age-gate__form{display:flex;flex-direction:column;align-items:center;justify-content:center} .age-gate__heading-title{font-size:32px;margin:0 0 16px} .age-gate__challenge{font:400 16px Jost,sans-serif;margin:0 0 20px} .age-gate__buttons{display:flex;gap:10px;justify-content:center;margin:0 0 16px} .age-gate__submit{min-width:96px;padding:10px 18px;cursor:pointer;font-size:14px} .age-gate__additional-information{font:400 13px/1.55 Jost,sans-serif;max-width:420px} .age-gate__additional-information p{margin:0 0 10px} /* Sur une fiche de soiree, le texte commence souvent centre : la lettrine se retrouvait seule a gauche, loin de son mot. Pas de lettrine ici. */ .article.soiree p:first-of-type::first-letter, .article.soiree > p:first-child::first-letter{ float:none;font-size:inherit;line-height:inherit;margin:0;padding:0;color:inherit;font-family:inherit} .form2 .erreur{margin:0 0 22px;padding:10px 14px;border:1px solid rgba(179,18,42,.45);background:rgba(179,18,42,.12);color:#f0c9d1;border-radius:4px;font-family:var(--serif);font-size:14.5px} /* Contenus portés depuis les codes courts WordPress */ .article .dlr-video,.legal .dlr-video{display:block;width:100%;max-height:70vh;margin:18px auto;background:#000;border-radius:10px} .article .dlr-audio,.legal .dlr-audio{display:block;width:100%;margin:18px 0} .dlr-galerie{display:grid;grid-template-columns:repeat(var(--col,3),1fr);gap:10px;margin:18px 0} .dlr-galerie figure{margin:0}.dlr-galerie img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:8px} .dlr-figure{margin:18px auto;text-align:center}.dlr-figure figcaption{font-family:var(--serif);font-style:italic;font-size:14px;opacity:.7;margin-top:8px} .dlr-traceurs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px} @media (max-width:640px){.dlr-galerie{grid-template-columns:repeat(2,1fr)}} /* ========================================================================= LE SOMMAIRE PLEIN ÉCRAN, EN TROIS COLONNES (02/09) Trois univers — Le club, Le Média, Vous — et les pages légales sur une ligne discrète. Une seule taille de lien, un seul style : le désordre venait de l'ancien menu WordPress, rendu tel quel. ========================================================================= */ nav.navover.nv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0; padding:88px 28px 40px;overflow:auto;-webkit-overflow-scrolling:touch} nav.navover.nv .nv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 64px;width:100%;max-width:1080px;margin:auto 0} nav.navover.nv .nv-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0} nav.navover.nv .grp{display:block;width:100%;font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase; color:var(--or-b);opacity:.9;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(184,145,47,.28)} nav.navover.nv .nv-col a{display:block;width:100%;font-family:var(--display);font-style:italic;font-weight:400; font-size:clamp(19px,1.75vw,25px);line-height:1.3;letter-spacing:.02em;color:var(--texte);padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04);transition:color .2s,transform .2s} nav.navover.nv .nv-col a:last-child{border-bottom:none} nav.navover.nv .nv-col a:hover{color:var(--or);letter-spacing:.02em;transform:translateX(8px)} nav.navover.nv .nv-col a[aria-current="page"]{color:var(--or)} nav.navover.nv .nv-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;width:100%;max-width:1080px; margin:44px 0 0;padding-top:20px;border-top:1px solid rgba(184,145,47,.2)} nav.navover.nv .nv-legal a{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--texte);opacity:.55;font-style:normal;transition:opacity .2s} nav.navover.nv .nv-legal a:hover{opacity:1;color:var(--or);letter-spacing:.16em} @media (max-width:900px){ nav.navover.nv .nv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px} } @media (max-width:640px){ nav.navover.nv{justify-content:flex-start;padding:80px 22px 32px;background:#080405} nav.navover.nv .nv-grid{grid-template-columns:1fr;gap:26px;margin:0} nav.navover.nv .nv-col a{font-size:20px;padding:6px 0} nav.navover.nv .nv-legal{margin-top:30px} } /* Les piments d'intensité (module WERA de l'ancien site) */ .piments{display:inline-flex;align-items:center;gap:4px;vertical-align:middle} .piment{width:22px;height:22px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))} .loge .piments{position:absolute;top:70px;left:0;right:0;justify-content:center;z-index:2;gap:2px} .loge .piment{width:18px;height:18px} .ev-i .piments{gap:5px;margin-top:2px} .ev-i .piment{width:26px;height:26px;filter:none} @media (max-width:640px){.loge .piments{top:60px}.loge .piment{width:15px;height:15px}} /* ========================================================================= LE BACK-OFFICE (/admin/) : sobre, dans la palette du site ========================================================================= */ body.adm{background:#0c0708;color:var(--texte);font-family:var(--sans);font-size:14px;line-height:1.5;margin:0;min-height:100vh} .adm-hdr{display:flex;align-items:center;gap:26px;padding:12px 26px;border-bottom:1px solid rgba(184,145,47,.25);background:#120a0c;flex-wrap:wrap} .adm-marque{display:flex;align-items:center;gap:10px;color:var(--or);font-family:var(--display);font-style:italic;font-size:20px;text-decoration:none} .adm-marque img{height:34px} .adm-nav{display:flex;gap:4px;flex-wrap:wrap} .adm-nav a{color:var(--texte);text-decoration:none;padding:8px 12px;border-radius:6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.75} .adm-nav a:hover,.adm-nav a.on{opacity:1;background:rgba(184,145,47,.14);color:var(--or)} .adm-droite{margin-left:auto;display:flex;gap:18px} .adm-droite a{color:var(--texte);opacity:.7;text-decoration:none;font-size:13px}.adm-droite a:hover{opacity:1;color:var(--or)} .adm-main{max-width:1180px;margin:0 auto;padding:26px 26px 60px} .adm-main h1{font-family:var(--display);font-style:italic;color:var(--creme);font-size:30px;font-weight:600;margin:6px 0 18px} .adm-main h2{font-family:var(--display);font-style:italic;color:var(--or);font-size:19px;font-weight:600;margin:0 0 12px} .adm-main a{color:var(--or)} .adm-note{color:var(--texte);opacity:.7;font-size:13.5px} .adm-flash{margin:0 0 18px;padding:12px 16px;border:1px solid rgba(184,145,47,.45);background:rgba(184,145,47,.1);color:var(--creme);border-radius:6px} .adm-erreur,.adm .erreur{margin:0 0 16px;padding:10px 14px;border:1px solid rgba(179,18,42,.45);background:rgba(179,18,42,.12);color:#f0c9d1;border-radius:6px} .adm-carte{background:#150c0e;border:1px solid rgba(184,145,47,.2);border-radius:10px;padding:18px 20px;margin:0 0 20px} .adm-cnx{max-width:380px;margin:12vh auto 0;text-align:center} .adm-cnx label{display:block;text-align:left;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-b);margin:16px 0 6px} .adm-cnx input{width:100%;box-sizing:border-box} .adm-cnx .adm-btn{margin-top:16px;width:100%} .adm-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 22px} .adm-chiffre{display:block;background:#150c0e;border:1px solid rgba(184,145,47,.2);border-radius:10px;padding:16px 18px;text-decoration:none;color:var(--texte)} .adm-chiffre b{display:block;font-family:var(--display);font-style:italic;font-size:34px;color:var(--or);line-height:1} .adm-chiffre span{display:block;margin-top:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7} .adm-deux{display:grid;grid-template-columns:1.3fr 1fr;gap:20px} .adm-table{width:100%;border-collapse:collapse;font-size:13.5px} .adm-table th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--or-b);padding:8px 10px;border-bottom:1px solid rgba(184,145,47,.3)} .adm-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top} .adm-table small{opacity:.65}.adm-table code{color:var(--creme)} .adm-liste{list-style:none;margin:0;padding:0}.adm-liste li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:10px;align-items:center} .adm-liste a{text-decoration:none;color:var(--texte)}.adm-liste a:hover{color:var(--or)}.adm-liste b{color:var(--or);margin-right:8px;font-weight:500} .adm-btn{display:inline-block;border:1px solid var(--or);background:transparent;color:var(--or);padding:10px 18px;border-radius:6px;font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:none} .adm-btn:hover{background:var(--or);color:#160b06} .adm-btn.petit{padding:6px 12px;font-size:11px} .adm-btn.gris{border-color:rgba(255,255,255,.3);color:var(--texte)}.adm-btn.gris:hover{background:rgba(255,255,255,.12);color:#fff} .adm-btn.rouge{border-color:#b3122a;color:#f0c9d1}.adm-btn.rouge:hover{background:#b3122a;color:#fff} .adm-inline{display:inline-flex;gap:6px} .adm-titre-ligne{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .adm-lien{font-size:12.5px} .adm-recherche{margin:0 0 18px;display:flex;gap:8px;align-items:center} .adm input[type=text],.adm input[type=search],.adm input[type=password],.adm input[type=datetime-local],.adm textarea,.adm select{ background:#0f0809;border:1px solid rgba(184,145,47,.3);color:var(--creme);padding:9px 11px;border-radius:6px;font-family:var(--sans);font-size:14px} .adm input:focus,.adm textarea:focus{outline:none;border-color:var(--or)} .adm-form label{display:block;margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--or-b)} .adm-form label input[type=text],.adm-form label input[type=datetime-local],.adm-form label textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;text-transform:none;letter-spacing:0} .adm-form label small{text-transform:none;letter-spacing:0;opacity:.6} .adm-code{font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.5} .adm-grille{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:start} .adm-deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px} .adm-bloc{border:1px solid rgba(184,145,47,.25);border-radius:8px;padding:12px 14px;margin:0 0 16px} .adm-bloc legend{padding:0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-b)} .adm-bloc small{display:block;opacity:.6;margin-top:6px} .adm-case{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--texte)} .adm-case input{accent-color:#b8912f} .piments.petit .piment{width:15px;height:15px;filter:none} .adm-apercu{display:block;max-width:100%;border-radius:6px;margin:0 0 10px} .adm-danger{margin-top:30px;padding-top:18px;border-top:1px solid rgba(179,18,42,.3)} @media (max-width:860px){.adm-deux,.adm-grille,.adm-deux-champs{grid-template-columns:1fr}.adm-main{padding:18px 16px 50px}} /* L'éditeur visuel du back-office */ .ed{border:1px solid rgba(184,145,47,.3);border-radius:6px;background:#0f0809;margin-top:6px} .ed-barre{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid rgba(184,145,47,.2);background:#150c0e;border-radius:6px 6px 0 0} .ed-btn{border:1px solid rgba(184,145,47,.3);background:transparent;color:var(--creme);padding:5px 9px;border-radius:4px;font-family:var(--sans);font-size:12px;cursor:pointer} .ed-btn:hover,.ed-btn.on{background:rgba(184,145,47,.18);color:var(--or)} .ed-zone{min-height:320px;max-height:70vh;overflow:auto;padding:14px 16px;color:#e9ddcb;font-family:var(--serif);font-size:16px;line-height:1.65;outline:none;text-transform:none;letter-spacing:0} .ed-zone h2,.ed-zone h3{font-family:var(--serif);color:var(--or);margin:18px 0 8px} .ed-zone p{margin:0 0 12px}.ed-zone a{color:var(--or);text-decoration:underline} .ed-zone blockquote{border-left:2px solid var(--or-b);margin:12px 0;padding:4px 14px;font-style:italic;opacity:.85} .ed-zone img{max-width:100%;height:auto;display:block;margin:10px 0;border-radius:6px} .ed-zone video,.ed-zone audio{display:block;width:100%;margin:10px 0} .ed textarea{display:none;border:none;border-radius:0 0 6px 6px;min-height:320px;width:100%;box-sizing:border-box} .adm-sous-bloc{padding:10px 0 4px;border-top:1px dashed rgba(184,145,47,.2)} .adm-sous-titre{display:block;font-family:var(--display);font-style:italic;color:var(--creme);font-size:16px;margin:0 0 8px;text-transform:none;letter-spacing:0} .adm-medias{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .adm-media{margin:0;cursor:pointer;border:1px solid rgba(184,145,47,.2);border-radius:8px;overflow:hidden;background:#0f0809;transition:border-color .2s} .adm-media:hover{border-color:var(--or)}.adm-media.copie{border-color:#7d9450} .adm-media img{display:block;width:100%;height:120px;object-fit:cover} .adm-media figcaption{padding:6px 8px;font-size:11px;word-break:break-all;opacity:.8} .adm-message{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)} .adm-message header{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:8px} .adm-message header span{font-size:12.5px;opacity:.65} .adm-message.non-lu header b{color:var(--or)} .adm-message-texte{white-space:pre-wrap;font-family:var(--serif);font-size:15px;color:#e9ddcb;background:#0f0809;padding:12px 14px;border-radius:6px;margin:0 0 10px} .adm select{background:#0f0809;border:1px solid rgba(184,145,47,.3);color:var(--creme);padding:6px 8px;border-radius:6px;font-family:var(--sans)} /* Réglages : onglets, couleurs, colonnes */ .adm-onglets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(184,145,47,.25)} .adm-onglet{border:1px solid rgba(184,145,47,.3);background:transparent;color:var(--texte);padding:8px 14px;border-radius:20px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .adm-onglet:hover,.adm-onglet.on{background:rgba(184,145,47,.16);color:var(--or);border-color:var(--or)} .adm-panneau{margin-bottom:10px} .adm-trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .adm-couleurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:12px} .adm-couleur{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--texte)} .adm-couleur input[type=color]{width:44px;height:32px;border:1px solid rgba(184,145,47,.3);border-radius:6px;background:#0f0809;padding:2px} .adm-couleur small{opacity:.5} .adm-brouillon{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:10px;background:rgba(179,18,42,.2);color:#f0c9d1;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase} @media (max-width:900px){.adm-trois{grid-template-columns:1fr}} /* Back-office : colonne de navigation à gauche, raccourcis, onglets par page */ body.adm-avec-menu{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh} .adm-cote{background:#120a0c;border-right:1px solid rgba(184,145,47,.22);padding:18px 14px 28px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:2px} .adm-cote .adm-marque{margin:0 8px 16px} .adm-groupe{margin:16px 10px 6px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--or-b);opacity:.8} .adm-cote-lien{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--texte);line-height:1.25} .adm-cote-lien b{display:block;font-weight:500;font-size:14px;color:var(--creme)} .adm-cote-lien small{display:block;font-size:11.5px;opacity:.55;margin-top:2px} .adm-cote-lien:hover{background:rgba(184,145,47,.1)} .adm-cote-lien.on{background:rgba(184,145,47,.18)}.adm-cote-lien.on b{color:var(--or)} .adm-pastille{display:inline-block;min-width:18px;padding:1px 6px;border-radius:9px;background:#b3122a;color:#fff;font-style:normal;font-size:11px;text-align:center;vertical-align:middle;margin-left:6px} .adm-cote-pied{margin-top:auto;padding:16px 12px 0;border-top:1px solid rgba(184,145,47,.2);display:flex;flex-direction:column;gap:8px} .adm-cote-pied a{color:var(--texte);opacity:.7;text-decoration:none;font-size:13px}.adm-cote-pied a:hover{opacity:1;color:var(--or)} .adm-avec-menu .adm-main{max-width:1180px;width:100%;margin:0;padding:26px 32px 60px} .adm-raccourcis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 22px} .adm-raccourci{display:block;padding:16px 18px;border:1px solid var(--or-b);border-radius:10px;text-decoration:none;background:rgba(184,145,47,.06);transition:background .2s} .adm-raccourci:hover{background:rgba(184,145,47,.16)} .adm-raccourci b{display:block;color:var(--or);font-size:15px;font-weight:500} .adm-raccourci span{display:block;margin-top:4px;font-size:12px;color:var(--texte);opacity:.7} .adm-panneau-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:4px 0 14px} .adm-panneau-tete h2{margin:0} .adm-enregistrer{margin:8px 0 0;display:flex;align-items:center;gap:14px}.adm-enregistrer small{opacity:.55} @media (max-width:900px){body.adm-avec-menu{grid-template-columns:1fr}.adm-cote{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:6px}.adm-cote .adm-marque{width:100%}.adm-groupe{width:100%;margin:8px 10px 2px}.adm-cote-lien small{display:none}.adm-cote-pied{margin-top:8px;width:100%;flex-direction:row;gap:18px}} /* Le Magazine : couverture, sommaire, chapeau */ .hero .kick{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--or);border:1px solid var(--or-b);padding:6px 12px;margin-bottom:12px;background:rgba(11,6,7,.55)} .hero .meta{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte);opacity:.7;margin-top:10px} .mag-sommaire{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:34px 0 8px;border-top:1px solid rgba(184,145,47,.35);border-bottom:1px solid rgba(184,145,47,.35)} .mag-sommaire-titre{padding:16px 22px 16px 0;font-family:var(--display);font-style:italic;color:var(--or);font-size:22px;border-right:1px solid rgba(184,145,47,.25);align-self:center} .mag-sommaire a{flex:1 1 150px;display:flex;flex-direction:column;padding:14px 18px;text-decoration:none;color:var(--texte);border-right:1px solid rgba(184,145,47,.12);transition:background .2s} .mag-sommaire a:last-child{border-right:none} .mag-sommaire a:hover{background:rgba(184,145,47,.08)} .mag-sommaire i{font-family:var(--display);font-style:italic;color:var(--rouge);font-size:15px;line-height:1} .mag-sommaire b{font-family:var(--display);font-weight:600;color:var(--creme);font-size:16px;margin-top:4px} .mag-sommaire small{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-top:4px} .art-chapeau{max-width:760px;margin:18px auto 0;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;color:var(--creme);opacity:.9;text-align:center} .adm-titre-ligne .adm-btn{margin-left:auto} @media (max-width:760px){.mag-sommaire a{flex-basis:45%}.mag-sommaire-titre{width:100%;border-right:none;border-bottom:1px solid rgba(184,145,47,.25);padding:12px 0}} /* ---- commentaires ---- */ .coms{max-width:820px;margin:56px auto 0;padding-top:36px;border-top:1px solid rgba(184,145,47,.22);clear:both} .coms h2{font:600 26px/1.15 'Playfair Display',serif;color:#f2e6d0;margin:0 0 6px} .coms .coms-invite{font:400 14px Jost,sans-serif;color:rgba(233,221,203,.7);margin:0 0 22px} .coms .com{padding:18px 0 14px;border-top:1px solid rgba(255,255,255,.06)} .coms .com.rep{margin-left:38px;padding-left:18px;border-top:0;border-left:2px solid rgba(184,145,47,.35)} .coms .com.maison{background:rgba(184,145,47,.06);padding:18px;border-radius:3px;border-top:0} .coms .com header{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font:500 11px Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e6c67e} .coms .com header b{font-weight:600} .coms .com header time,.coms .com header .com-a{color:rgba(233,221,203,.5);letter-spacing:.04em;text-transform:none;font-size:12px} .coms .com header .maison-badge{background:rgba(184,145,47,.2);color:#e6c67e;padding:2px 8px;border-radius:2px;font-size:10px} .coms .com p{margin:8px 0 0;font:400 15.5px/1.65 Jost,sans-serif;color:#e9ddcb;overflow-wrap:anywhere} .coms .com .com-actions{margin-top:8px} .coms .com .com-actions a{font:500 11px Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,221,203,.5);text-decoration:none} .coms .com .com-actions a:hover{color:#e6c67e} .coms .coms-form{margin-top:34px;padding:26px 28px 30px;border:1px solid rgba(184,145,47,.28);border-radius:3px;background:rgba(255,255,255,.02)} .coms .coms-form h3{font:600 20px 'Playfair Display',serif;color:#f2e6d0;margin:0 0 4px} .coms .coms-form .en-reponse{font:400 13.5px Jost,sans-serif;color:rgba(233,221,203,.7);margin:0 0 6px} .coms .coms-form .en-reponse a{color:#e6c67e} .coms .coms-form textarea{min-height:120px} .coms .coms-grille{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .coms .coms-hp{position:absolute;left:-9999px;opacity:0} .coms .coms-ferme{font:400 14px Jost,sans-serif;color:rgba(233,221,203,.6);margin-top:24px} .coms .coms-ferme a{color:#e6c67e} @media(max-width:640px){.coms .coms-grille{grid-template-columns:1fr}.coms .com.rep{margin-left:12px;padding-left:12px}.coms .coms-form{padding:20px 16px 24px}} /* ---- prélèvement SEPA : mandat ---- */ .mandat-grille{display:grid;grid-template-columns:1fr 2fr 1fr;gap:0 14px} .mandat-texte{margin:22px 0 6px;padding:16px 18px;border:1px solid rgba(184,145,47,.28);border-radius:3px;background:rgba(255,255,255,.02);max-height:220px;overflow:auto} .mandat-texte p{margin:0 0 10px;font:400 13px/1.55 Jost,sans-serif;color:rgba(233,221,203,.85)} .dlr-form h2{font:600 20px 'Playfair Display',serif;color:#f2e6d0;margin:22px 0 2px} .lien-bouton{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-decoration:underline} .mandat-doc{max-width:820px;margin:20px auto 60px;padding:36px 40px;border:1px solid rgba(184,145,47,.35);border-radius:4px;background:rgba(255,255,255,.02)} .mandat-doc header{text-align:center;margin-bottom:26px} .mandat-doc h1{font:600 30px 'Playfair Display',serif;color:#f2e6d0;margin:0 0 6px} .mandat-doc .mandat-sur{font:400 13px Jost,sans-serif;color:rgba(233,221,203,.7);letter-spacing:.04em} .mandat-doc h2{font:500 11px Jost,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#e6c67e;margin:22px 0 8px} .mandat-doc .mandat-ligne{display:flex;gap:16px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font:400 14.5px Jost,sans-serif;color:#e9ddcb} .mandat-doc .mandat-ligne span{flex:0 0 240px;color:rgba(233,221,203,.6)} .mandat-doc .mandat-ligne b{font-weight:500;overflow-wrap:anywhere} .mandat-doc .mandat-legal p{font:400 13.5px/1.6 Jost,sans-serif;color:rgba(233,221,203,.85);margin:0 0 10px} .mandat-doc .mandat-actions{margin-top:28px;text-align:center} @media(max-width:640px){.mandat-grille{grid-template-columns:1fr}.mandat-doc{padding:22px 18px}.mandat-doc .mandat-ligne{flex-direction:column;gap:2px}.mandat-doc .mandat-ligne span{flex:none}} @media print{body.impression{background:#fff!important;color:#000!important}body.impression header,body.impression footer,body.impression .mandat-actions,body.impression .wa,body.impression #curtains{display:none!important} body.impression .mandat-doc{border-color:#000;background:#fff;margin:0;max-width:none}body.impression .mandat-doc *{color:#000!important}body.impression .mandat-doc .mandat-ligne{border-color:#ddd}} /* L'attribut hidden l'emporte sur tout display : le filtre de l'agenda s'en sert. */ [hidden]{display:none!important} /* ---- Le Magazine : sections éditoriales ---- */ /* L'en-tête de rubrique n'est plus une barre : un filet fin, un numéro, un titre. */ .rub{display:flex;align-items:baseline;gap:14px;margin:74px 0 24px;padding-top:16px; border-top:1px solid rgba(184,145,47,.32)} .rub .line{display:none} .rub .num{font-family:var(--display);font-style:italic;color:var(--rouge);font-size:clamp(24px,2.6vw,36px);line-height:1;opacity:.95} .rub h2{font-family:var(--display);color:var(--creme);font-weight:600;font-size:clamp(21px,2.5vw,31px); line-height:1.1;letter-spacing:.004em;flex:1;min-width:0;white-space:normal} .rub .all{font-family:var(--sans);color:var(--or);font-size:10px;letter-spacing:.22em;text-transform:uppercase; white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s,color .25s} .rub .all i{font-style:normal;transition:transform .25s;display:inline-block} .rub .all:hover{border-color:var(--or);color:var(--creme)} .rub .all:hover i{transform:translateX(4px)} /* L'article de tête d'une rubrique : image et texte côte à côte, pleine largeur. */ .mag-tete{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:0;margin-bottom:26px; border:1px solid rgba(184,145,47,.2);background:linear-gradient(180deg,#170d0f,#110a0b); text-decoration:none;overflow:hidden;transition:border-color .3s,box-shadow .3s} .mag-tete:hover{border-color:rgba(230,198,126,.45);box-shadow:0 26px 60px rgba(0,0,0,.55)} .mag-tete .vis{display:block;min-height:290px;background:#0d0708 center/cover no-repeat; filter:saturate(.72) contrast(1.05);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s} .mag-tete:hover .vis{transform:scale(1.04);filter:saturate(1) contrast(1.05)} .mag-tete .txt{display:flex;flex-direction:column;justify-content:center;gap:11px;padding:34px 38px} .mag-tete .tag{font-family:var(--sans);color:var(--or);font-size:10px;letter-spacing:.26em;text-transform:uppercase} .mag-tete h3{font-family:var(--display);color:var(--creme);font-weight:600; font-size:clamp(21px,2.2vw,30px);line-height:1.16;letter-spacing:-.005em} .mag-tete p{font-family:var(--serif);color:var(--texte);opacity:.72;font-size:15.5px;line-height:1.62} .mag-tete .date{font-family:var(--sans);color:var(--or);opacity:.75;font-size:10px;letter-spacing:.2em;text-transform:uppercase} /* Dans une section titrée, l'étiquette de rubrique ferait doublon. */ .grid.sans-etiquette .card .tag{display:none} /* Une rubrique qui n'a que deux articles occupe la largeur à deux. */ .grid.deux{grid-template-columns:repeat(2,1fr)} @media(max-width:900px){ .mag-tete{grid-template-columns:1fr} .mag-tete .vis{min-height:0;aspect-ratio:16/9} .mag-tete .txt{padding:24px 22px} .grid.deux{grid-template-columns:1fr} } @media(max-width:760px){ .rub{margin:48px 0 18px;flex-wrap:wrap;gap:8px 12px} .rub h2{flex:1 1 auto} } /* ================= Le Magazine : allure de magazine imprimé ================= */ /* L'ours : la ligne d'identité du numéro, entre deux filets. */ .mag-ours{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 26px; margin:26px 0 46px;padding:11px 2px;border-top:1px solid rgba(184,145,47,.45); border-bottom:1px solid rgba(184,145,47,.45); font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--or)} .mag-ours sup{font-size:.62em;letter-spacing:0;vertical-align:super} .mag-ours span:nth-child(2){color:rgba(233,221,203,.62)} .mag-ours span:last-child{color:rgba(233,221,203,.4)} /* Le sommaire, comme une table des matières : points de conduite et folios. */ .mag .mag-sommaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 46px; margin:44px 0 8px;padding:22px 0 6px;border-top:1px solid rgba(184,145,47,.3);border-bottom:0} .mag .mag-sommaire-titre{grid-column:1/-1;font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.34em; text-transform:uppercase;color:var(--or);margin-bottom:14px;padding:0;border-right:0;align-self:auto;width:auto} .mag .mag-sommaire a{display:flex;flex-direction:row;align-items:baseline;gap:10px;padding:9px 0; border-right:0;border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;transition:color .25s;flex:0 1 auto} .mag .mag-sommaire a:hover{background:none} .mag .mag-sommaire a i,.mag .mag-sommaire a b,.mag .mag-sommaire a small{margin-top:0} .mag .mag-sommaire a i{font-family:var(--display);font-style:italic;color:var(--rouge);font-size:15px;min-width:26px} .mag .mag-sommaire a b{font-family:var(--serif);font-weight:600;font-size:16.5px;color:var(--creme);white-space:nowrap} /* Les points qui relient le titre au folio, comme sur un sommaire imprimé. */ .mag .mag-sommaire a::after{content:"";flex:1;min-width:14px;margin:0 4px; border-bottom:1px dotted rgba(184,145,47,.5);transform:translateY(-3px)} .mag .mag-sommaire a small{font-family:var(--sans);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--or);opacity:.85;white-space:nowrap;order:9} .mag .mag-sommaire a:hover b{color:var(--or)} /* La lettrine de l'article de tête : la marque d'un texte imprimé. */ .mag-tete p::first-letter{font-family:var(--display);font-size:3.1em;line-height:.82;float:left; margin:5px 9px 0 0;color:var(--or);font-weight:600} /* Une section sur deux inverse l'image et le texte : le rythme d'un magazine. */ .mag-tete.inverse .vis{order:2} .mag-tete.inverse .txt{order:1} /* Les articles d'une section ne sont plus des vignettes en boîtes, mais des colonnes de page, séparées par un filet, comme dans un journal. */ .mag .grid{gap:0} .mag .grid .card{background:none;border:0;border-radius:0;box-shadow:none;padding:0 24px; border-left:1px solid rgba(184,145,47,.22)} .mag .grid .card:first-child{padding-left:0;border-left:0} .mag .grid .card:last-child{padding-right:0} .mag .grid .card:hover{transform:none;box-shadow:none;border-color:rgba(184,145,47,.22)} .mag .grid .card::after{display:none} .mag .grid .card .thumb{aspect-ratio:4/3;border:1px solid rgba(184,145,47,.16)} .mag .grid .card .body{padding:14px 0 0} .mag .grid .card h3{font-size:20.5px;line-height:1.2} .mag .grid .card p{font-size:14px;line-height:1.62;opacity:.66} .mag .grid .card:hover h3{color:var(--or)} .mag .grid .card h3{transition:color .25s} @media(max-width:900px){ .mag .mag-sommaire{grid-template-columns:1fr;gap:0} .mag .grid .card{padding:0;border-left:0;border-top:1px solid rgba(184,145,47,.2);padding-top:22px} .mag .grid .card:first-child{border-top:0;padding-top:0} .mag .grid{gap:24px} } @media(max-width:640px){ .mag-ours{gap:6px 16px;font-size:9px;letter-spacing:.2em} .mag-tete p::first-letter{font-size:2.6em} } /* Un média encore sur l'ancien serveur : on le dit, plutôt qu'un lecteur vide. */ .dlr-media-absent{margin:22px 0;padding:16px 18px;border:1px dashed rgba(184,145,47,.4); border-radius:2px;background:rgba(184,145,47,.05); font:400 14px/1.55 Jost,sans-serif;color:rgba(233,221,203,.75)}