/* ========================================================================== Le Traiteur Voironnais - refonte 2026 Charte : brun bois clair releve dans la boutique (#a47b53) + ivoire. Le logo reste vert olive : c'est la marque, le client tient a la conserver. Typo : Cormorant Garamond (titres) / Jost (petites capitales) / Newsreader (texte). Remplace l'ancien theme Bootstrap 3 (SIT_TRAITEUR_style.css, conserve tel quel). Commentaires en ASCII pur : le depot est en ISO-8859. ========================================================================== */ :root{ --nuit:#3b2a1c; --nuit2:#2b1e13; --nuit3:#4e3826; --ivoire:#f6f1e6; --ivoire2:#ece3d0; --carte:#fbf7ee; --or:#9a6c3f; --or-clair:#d0ab79; --or-txt:#7d5326; --encre:#2a2119; --encre-doux:#5b4c3e; --pierre:#8d7f70; --ligne:rgba(42,33,25,.16); --ligne2:rgba(42,33,25,.3); --ombre:0 1px 2px rgba(42,33,25,.05), 0 12px 34px -18px rgba(42,33,25,.28); --disp:"Cormorant Garamond",Georgia,serif; --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Newsreader",Georgia,serif; --max:1220px; } /* ------------------------------------------------------------------ base */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0; background:var(--ivoire); color:var(--encre); font-family:var(--serif); font-size:18px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden} img{max-width:100%; height:auto} a{color:var(--or-txt)} a:hover{color:var(--encre)} h1,h2,h3,h4,h5{margin:0; font-family:var(--disp); font-weight:500; line-height:1.06} p{margin:0 0 1.15em} :focus-visible{outline:2px solid var(--or); outline-offset:3px} ::selection{background:var(--or); color:#fff} br.clr{clear:both} span.fond_body_1,span.fond_body_2{display:block} /* --------------------------------------------------------- utilitaires */ .eyebrow{font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.3em; font-size:.7rem; color:var(--or-txt); display:inline-flex; align-items:center; gap:14px} .eyebrow:before{content:""; width:32px; height:1px; background:var(--or)} .eyebrow.c{justify-content:center} .btn{font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; text-decoration:none; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:.8em; padding:16px 30px; transition:background .25s, color .25s, border-color .25s} .btn-or{background:var(--or); color:#fff} .btn-or:hover{background:var(--or-txt); color:#fff} .btn-line{background:transparent; border:1px solid currentColor; padding:15px 29px; color:var(--encre)} .btn-line:hover{background:var(--encre); color:var(--ivoire)} .btn-dark{background:var(--nuit); color:var(--ivoire)} .btn-dark:hover{background:var(--nuit3); color:var(--ivoire)} .btn-clair{background:transparent; border:1px solid rgba(246,241,230,.5); color:var(--ivoire); padding:15px 29px} .btn-clair:hover{background:var(--ivoire); color:var(--nuit)} /* ------------------------------------------------------------- en-tete */ #header{position:sticky; top:0; z-index:60; background:rgba(246,241,230,.95); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--ligne)} #conteneur_header{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,56px); display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); min-height:86px} #logo{margin:0; flex:0 0 auto} #logo h1,#logo strong{margin:0; font-weight:400; font-size:1rem} .marque{display:flex; align-items:center; gap:13px; text-decoration:none} .marque img{height:50px; width:50px; display:block} .marque .m-nom{display:block; font-family:var(--disp); font-weight:600; font-size:1.26rem; line-height:1.05; color:var(--encre); white-space:nowrap} .marque .m-sous{display:block; font-family:var(--sans); font-weight:400; font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--or-txt); margin-top:5px; white-space:nowrap} /* menu principal */ #position-menu{margin-left:auto} #menu_haut ul{display:flex; align-items:center; gap:clamp(12px,1.7vw,26px); list-style:none; margin:0; padding:0} #menu_haut li{position:relative; flex:0 0 auto} #menu_haut a{display:block; font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; text-decoration:none; color:var(--encre); padding:12px 0; white-space:nowrap; position:relative} #menu_haut a:after{content:""; position:absolute; left:50%; right:50%; bottom:6px; height:1px; background:var(--or); transition:left .28s,right .28s} #menu_haut a:hover:after,#menu_haut a.selected:after{left:0; right:0} /* sous-menus */ #menu_haut ul.menu-sub{display:none; position:absolute; left:-18px; top:100%; min-width:255px; background:var(--carte); border:1px solid var(--ligne); box-shadow:var(--ombre); padding:9px 0; flex-direction:column; gap:0; z-index:70} #menu_haut li:hover>ul.menu-sub,#menu_haut li:focus-within>ul.menu-sub{display:flex} #menu_haut ul.menu-sub li{width:100%} #menu_haut ul.menu-sub a{padding:10px 20px; letter-spacing:.06em; font-size:.76rem; text-transform:none} #menu_haut ul.menu-sub a:after{display:none} #menu_haut ul.menu-sub a:hover{background:var(--ivoire2); color:var(--or-txt)} /* outils a droite */ .nav-outils{display:flex; align-items:center; gap:14px; flex:0 0 auto} .btn-menu{display:none; background:none; border:1px solid var(--ligne2); color:var(--encre); cursor:pointer; padding:9px 10px; line-height:0} /* recherche */ #recherche form{display:flex; align-items:center} #recherche input[type=text]{font-family:var(--sans); font-size:.78rem; padding:10px 12px; border:1px solid var(--ligne); border-right:0; background:transparent; color:var(--encre); width:140px} #recherche input[type=text]:focus{border-color:var(--or); outline:none} #recherche button{background:var(--or); color:#fff; border:0; cursor:pointer; padding:11px 13px; line-height:0} /* -------------------------------------------------- banniere de page */ .page-heading{position:relative; overflow:hidden; background:var(--nuit2); min-height:clamp(260px,36vh,400px); display:flex; align-items:flex-end} .page-heading .ph-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:brightness(.62) saturate(1.04); margin:0} .page-heading:after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg,rgba(43,30,19,.94) 0%,rgba(43,30,19,.66) 42%, rgba(43,30,19,.26) 78%,rgba(43,30,19,.22) 100%)} .page-heading .container{position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; padding:clamp(30px,5vw,54px) clamp(20px,5vw,56px) clamp(26px,4vw,44px)} .page-title h1{font-family:var(--disp); font-weight:500; font-size:clamp(2.1rem,4.8vw,3.6rem); line-height:1.02; color:#fff; margin:.7rem 0 0; max-width:22ch; text-shadow:0 2px 20px rgba(0,0,0,.35)} #ariane{font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#c3bcaa; margin:0} #ariane a{color:#c3bcaa; text-decoration:none} #ariane a:hover{color:var(--or-clair)} /* ---------------------------------------------------------------- corps */ #conteneur{width:100%} #contenu{max-width:var(--max); margin:0 auto; padding:clamp(38px,5.5vw,76px) clamp(20px,5vw,56px) clamp(50px,7vw,96px)} #centreetdroite,#centre{width:100%} body.pageAccueil #contenu{max-width:none; padding:0} /* contenu redactionnel saisi dans le back-office (TinyMCE) */ #contenu_scroller{font-size:1.05rem} #contenu_scroller h2{font-family:var(--disp); font-weight:500; font-size:clamp(1.7rem,3vw,2.4rem); margin:1.7em 0 .5em; line-height:1.1} #contenu_scroller h3{font-family:var(--disp); font-weight:600; font-size:1.45rem; margin:1.5em 0 .45em} #contenu_scroller h4{font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.84rem; margin:1.6em 0 .5em; color:var(--or-txt)} #contenu_scroller p{color:var(--encre-doux); max-width:68ch} #contenu_scroller strong,#contenu_scroller b{color:var(--encre); font-weight:600} #contenu_scroller a{color:var(--or-txt); text-decoration:underline; text-underline-offset:3px} #contenu_scroller a:hover{color:var(--encre)} #contenu_scroller ul{max-width:68ch; color:var(--encre-doux); padding-left:0; list-style:none} #contenu_scroller ol{max-width:68ch; color:var(--encre-doux); padding-left:1.4em} #contenu_scroller ul li{position:relative; padding-left:1.5em; margin-bottom:.55em} #contenu_scroller ul li:before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--or-clair); transform:rotate(45deg)} #contenu_scroller ol li{margin-bottom:.55em} #contenu_scroller img{margin:1.4em 0} #contenu_scroller img.imgtitre{margin:0} #contenu_scroller table{border-collapse:collapse; width:100%; margin:1.6em 0; font-size:.95rem} #contenu_scroller th,#contenu_scroller td{border:1px solid var(--ligne); padding:11px 14px; text-align:left} #contenu_scroller th{background:var(--ivoire2); font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem} #contenu_scroller hr{border:0; border-top:1px solid var(--ligne); margin:2.4em 0} #contenu_scroller blockquote{margin:1.8em 0; padding-left:24px; border-left:2px solid var(--or); font-family:var(--disp); font-style:italic; font-size:1.5rem; color:var(--encre)} /* paragraphes du CMS */ .paragraphe{margin-bottom:1.2em} .paragraphe:last-child{margin-bottom:0} .paragraphe h3{font-family:var(--disp); font-weight:600; font-size:1.6rem; margin:0 0 .5em} /* ---------------------------------------------------------- formulaires */ input[type=text],input[type=email],input[type=tel],input[type=password], input[type=number],input[type=date],select,textarea{ font-family:var(--serif); font-size:1rem; color:var(--encre); background:var(--carte); border:1px solid var(--ligne); padding:12px 14px; max-width:100%; transition:border-color .2s} #contenu input[type=text],#contenu input[type=email],#contenu input[type=tel], #contenu select,#contenu textarea{width:100%} input:focus,select:focus,textarea:focus{border-color:var(--or); outline:none} textarea{min-height:150px; resize:vertical} #contenu label{font-family:var(--sans); font-weight:500; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-doux); display:inline-block; margin-bottom:6px} input[type=submit],button[type=submit]{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; background:var(--or); color:#fff; border:0; padding:15px 30px; cursor:pointer; width:auto; transition:background .25s} input[type=submit]:hover,button[type=submit]:hover{background:var(--or-txt)} .obligatoire,.err,.erreur{color:#a8321f} /* -------------------------------------------------------------- modules */ .mdl ul{list-style:none; padding-left:0} .mdl li{margin-bottom:.5em} /* sommaire de sous-pages avec photos (MDL_SOMMAIRE_SSPAGE_PHOTOS) */ #contenu_scroller .sommaire-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:2em 0} .sommaire-photos a{display:block; text-decoration:none; color:inherit; background:var(--carte); border:1px solid var(--ligne); transition:transform .2s, box-shadow .25s, border-color .2s} .sommaire-photos a:hover{transform:translateY(-3px); box-shadow:var(--ombre); border-color:var(--ligne2)} .sommaire-photos img{width:100%; aspect-ratio:4/3; object-fit:cover; margin:0; display:block} .sommaire-photos span{display:block; padding:16px 18px; font-family:var(--disp); font-weight:600; font-size:1.24rem} /* listes d'actualites / billets */ .billet-liste{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:1.5em 0} .billet{background:var(--carte); border:1px solid var(--ligne); display:flex; flex-direction:column} .billet img{width:100%; aspect-ratio:4/3; object-fit:cover; margin:0} .billet .bd{padding:20px} .billet h3{font-size:1.3rem; margin-bottom:.4em} .billet .dat{font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pierre); margin-bottom:8px} /* ---------------------------------------------------------- pied de page */ #pied{background:var(--nuit2); color:#c2bcaa; padding:clamp(52px,7vw,88px) 0 30px; font-family:var(--serif)} #pied a{color:#c2bcaa; text-decoration:none} #pied a:hover{color:var(--ivoire)} .f-grid{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,56px); display:grid; grid-template-columns:1.5fr 1fr 1.1fr 1.1fr; gap:36px} .f-marque{display:flex; align-items:center; gap:13px; margin-bottom:14px} .f-marque img{height:54px; width:54px} .f-marque b{font-family:var(--disp); font-weight:600; font-size:1.4rem; color:var(--ivoire)} #pied p{font-size:.94rem; max-width:38ch; margin-bottom:0} #pied h3{font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--or-clair); margin:0 0 16px} #pied ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px} #pied li{font-size:.94rem; line-height:1.62} .f-social{display:flex; gap:12px; margin-top:18px} .f-social a{width:38px; height:38px; border:1px solid rgba(246,241,230,.25); display:grid; place-items:center; transition:background .25s, border-color .25s, color .25s} .f-social a:hover{background:var(--or); border-color:var(--or); color:#fff} .f-bas{max-width:var(--max); margin:44px auto 0; padding:20px clamp(20px,5vw,56px) 0; border-top:1px solid rgba(246,241,230,.14); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; color:#8d8477} .f-bas a{color:#8d8477} /* --------------------------------------- back-office : edition en ligne */ .bo_paragraphe{border:1px dashed var(--or); padding:6px; margin-bottom:8px; background:rgba(154,108,63,.06)} .bo_barre_boutons{margin:0 0 6px; font-size:.8rem} /* ---------------------------------------------------------- responsive */ @media(max-width:1080px){ #contenu_scroller .sommaire-photos,.billet-liste{grid-template-columns:repeat(2,1fr)} } @media(max-width:960px){ .f-grid{grid-template-columns:1fr 1fr} } /* En-tete : sept entrees de menu depuis "Actualites" (29/10/2026). Le style ** plein (.72rem, interlettrage .13em) ne tient plus a aucune largeur dans le ** conteneur de 1 220 px (il en depassait deja de 110 px avec six entrees) : ** on resserre partout au-dessus du burger, sous-titre du logo masque jusqu'a ** 1500 px. Mesure : aucun defilement horizontal de 1 181 a 1 920 px. ** Ces regles doivent rester AVANT le bloc du burger, qui l'emporte en dessous. */ #conteneur_header{gap:clamp(12px,1.4vw,20px)} #menu_haut ul{gap:clamp(10px,1vw,14px)} #menu_haut a{letter-spacing:.07em; font-size:.7rem} .nav-outils{gap:8px} @media(max-width:1500px){ .marque .m-sous{display:none} } @media(max-width:1320px){ #conteneur_header{padding:0 clamp(16px,2.6vw,36px)} } /* Menu burger : remonte de 860 a 1120 px (six entrees), puis a 1180 px (sept ** entrees, 29/10/2026) ; au-dessus, l'en-tete resserre tient sans deborder. */ @media(max-width:1180px){ #position-menu{position:absolute; left:0; right:0; top:100%; background:var(--ivoire); border-bottom:1px solid var(--ligne); box-shadow:var(--ombre); max-height:calc(100vh - 86px); overflow-y:auto; display:none} #position-menu.ouvert{display:block} #menu_haut ul{flex-direction:column; align-items:stretch; gap:0; padding:6px 0} #menu_haut li{border-top:1px solid var(--ligne)} #menu_haut li:first-child{border-top:0} #menu_haut a{padding:15px clamp(20px,5vw,56px); font-size:.8rem} #menu_haut a:after{display:none} #menu_haut ul.menu-sub{display:flex; position:static; border:0; box-shadow:none; background:var(--ivoire2); padding:0; min-width:0} #menu_haut ul.menu-sub a{padding-left:calc(clamp(20px,5vw,56px) + 20px)} .btn-menu{display:grid} /* le menu passe en position absolue et ne pousse plus les outils a droite */ .nav-outils{margin-left:auto} .marque .m-sous{display:none} #recherche{display:none} #conteneur_header{min-height:74px; gap:12px} .marque img{height:44px; width:44px} .marque .m-nom{font-size:1.1rem; white-space:normal} } /* Petits telephones (03/11/2026) : sous 410 px, logo (217 px, nom sur une ligne) ** + outils (3 x 44 px) + marges ne tenaient plus : le burger sortait de l'ecran ** (33 px caches a 360 px, 18 a 375, 3 a 390) et toutes les pages defilaient en ** largeur. Le logo peut retrecir et le nom passe sur deux lignes ; les trois ** boutons gardent 44 px (taille minimale d'une cible tactile). */ @media(max-width:420px){ #conteneur_header{gap:8px} #logo{flex:0 1 auto; min-width:0} .marque{gap:10px} .marque img{height:38px; width:38px} .marque .m-nom{font-size:1rem} .nav-outils{gap:4px} } @media(max-width:640px){ body{font-size:17px} #contenu_scroller .sommaire-photos,.billet-liste{grid-template-columns:1fr} .f-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} } /* ------------------------------------------------------------ impression */ @media print{ #header,#pied,.page-heading,#ariane,.bo_paragraphe,.noprint{display:none!important} body{background:#fff; color:#000; font-size:12pt} #contenu{padding:0} } /* ========================================================================== PAGE D'ACCUEIL (_includes/SIT_TRAITEUR/accueil.php) ========================================================================== */ .acc-wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,56px)} /* --- bandeau --- */ .acc-hero{position:relative; min-height:clamp(560px,90vh,820px); display:flex; align-items:center; overflow:hidden; color:var(--ivoire); background:var(--nuit2)} .acc-hero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 50%; filter:brightness(.74) saturate(1.05); z-index:0} .acc-hero:after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg,rgba(43,30,19,.9) 0%,rgba(43,30,19,.72) 38%, rgba(43,30,19,.3) 70%,rgba(43,30,19,.15) 100%)} .acc-hero-in{position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,56px)} .acc-hero .eyebrow{color:var(--or-clair)} .acc-hero .eyebrow:before{background:var(--or-clair)} .acc-hero h2{font-family:var(--disp); font-weight:500; color:var(--ivoire); font-size:clamp(3rem,7.5vw,6.4rem); line-height:1; letter-spacing:.005em; margin:1rem 0 0; max-width:16ch; text-wrap:balance} .acc-hero h2 em{font-style:italic; color:var(--or-clair)} .acc-hero p{font-size:clamp(1.05rem,1.5vw,1.25rem); max-width:44ch; margin:1.6rem 0 0; color:#e9e2d0} .acc-actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:2.4rem} .acc-scroll{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; color:var(--ivoire); opacity:.7; font-family:var(--sans); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px} .acc-scroll span{width:1px; height:34px; background:linear-gradient(var(--or-clair),transparent)} .acc-actions.c{justify-content:center} /* --- manifeste --- */ .acc-manif{text-align:center; padding:clamp(58px,8vw,116px) 0} .acc-manif p{font-family:var(--disp); font-weight:400; color:var(--encre); font-size:clamp(1.5rem,2.7vw,2.3rem); line-height:1.36; max-width:44ch; margin:1.3rem auto 0} .acc-manif p em{font-style:italic; color:var(--or-txt)} .acc-sign{font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--pierre); margin-top:1.8rem} /* --- prestations --- */ .acc-metiers{padding:clamp(20px,3vw,40px) 0 clamp(64px,9vw,120px)} .acc-head{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:end; margin-bottom:clamp(34px,5vw,58px)} .acc-head h3{font-family:var(--disp); font-weight:500; font-size:clamp(2.2rem,4.6vw,3.7rem); line-height:1; letter-spacing:.005em; margin-top:.6rem} .acc-head h3 em{font-style:italic; color:var(--or-txt)} .acc-head p{color:var(--encre-doux); font-size:1.08rem; max-width:42ch; margin:0; align-self:center} /* cartes immersives : la photo occupe toute la carte, le texte est pose dessus (meme rendu que .pcard de la maquette V1). */ .acc-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.5vw,30px)} .acc-card{position:relative; overflow:hidden; text-decoration:none; color:var(--ivoire); min-height:400px; display:flex; align-items:flex-end} .acc-card.tall{min-height:520px} .acc-card .ph{position:absolute; inset:0; z-index:0; display:block; overflow:hidden} .acc-card .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; filter:brightness(.9) saturate(1.05); transition:transform .8s cubic-bezier(.2,.7,.2,1)} .acc-card:hover .ph img{transform:scale(1.04)} .acc-card:after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg,rgba(38,27,17,.95) 0%,rgba(38,27,17,.8) 34%, rgba(38,27,17,.4) 56%,transparent 88%)} .acc-card .bd{position:relative; z-index:2; display:block; padding:clamp(26px,3vw,40px)} .acc-card .n{display:block; font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--or-clair)} .acc-card .t{display:block; font-family:var(--disp); font-weight:500; font-size:clamp(1.7rem,2.6vw,2.4rem); line-height:1.06; margin:.4rem 0 .5rem; color:#faf6ec} .acc-card .d{display:block; font-family:var(--serif); color:#eee7d6; font-size:1rem; max-width:40ch; margin:0} .acc-card .go{display:inline-flex; align-items:center; gap:.6em; margin-top:1.1rem; font-family:var(--sans); font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--or-clair)} .acc-card .go i{font-style:normal; transition:transform .25s} .acc-card:hover .go i{transform:translateX(6px)} /* --- mariages --- */ .acc-mariage{display:grid; grid-template-columns:1fr 1fr; background:var(--nuit); color:var(--ivoire)} .acc-mariage-ph{position:relative; min-height:440px; overflow:hidden} .acc-mariage-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; filter:brightness(.86)} .acc-mariage-tx{padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px); display:flex; flex-direction:column; justify-content:center} .acc-mariage .eyebrow{color:var(--or-clair)} .acc-mariage .eyebrow:before{background:var(--or-clair)} .acc-mariage h3{font-family:var(--disp); font-weight:500; color:#fff; font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1.04; margin:1rem 0 0} .acc-mariage h3 em{font-style:italic; color:var(--or-clair)} .acc-mariage p{color:#ded8c6; max-width:44ch; margin:1.3rem 0 0} .acc-tags{list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px 11px} .acc-tags li{font-family:var(--sans); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:#cfc9b7; border:1px solid rgba(246,241,230,.28); padding:8px 13px} /* --- le chef --- */ .acc-chef{padding:clamp(58px,8vw,116px) 0; background:var(--ivoire2)} .acc-chef-g{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,76px); align-items:center} .acc-chef-ph{position:relative} .acc-chef-ph img{width:100%; aspect-ratio:4/5; object-fit:cover; margin:0; display:block} .acc-chef-ph:before{content:""; position:absolute; inset:14px; border:1px solid rgba(154,108,63,.6); z-index:2; pointer-events:none} .acc-chef h3{font-family:var(--disp); font-weight:500; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.06; margin:1rem 0 0} .acc-chef h3 em{font-style:italic; color:var(--or-txt)} .acc-chef p{color:var(--encre-doux); margin-top:1.2rem; max-width:48ch} .acc-stats{display:flex; gap:38px; flex-wrap:wrap; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--ligne)} .acc-stats div{display:flex; flex-direction:column} .acc-stats b{font-family:var(--disp); font-weight:600; font-size:2.4rem; color:var(--or-txt); line-height:1} .acc-stats span{font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.64rem; color:var(--pierre); margin-top:6px; max-width:16ch} /* --- contact --- */ .acc-contact{text-align:center; padding:clamp(58px,8vw,110px) 0} .acc-contact h3{font-family:var(--disp); font-weight:500; font-size:clamp(2rem,4.2vw,3.2rem); margin:1rem auto 0; max-width:20ch} .acc-contact h3 em{font-style:italic; color:var(--or-txt)} .acc-contact p{color:var(--encre-doux); max-width:50ch; margin:1.1rem auto 0} .acc-tel{font-family:var(--disp); font-weight:600; font-size:2.4rem; margin:1.4rem 0 .4rem} .acc-tel a{color:var(--or-txt); text-decoration:none} .acc-tel a:hover{color:var(--encre)} /* --- accueil : bloc boutique (maquette section.shop) --- */ .acc-shop{text-align:center; padding:clamp(60px,8vw,110px) 0} .acc-shop h3{font-family:var(--disp); font-weight:500; font-size:clamp(2rem,4vw,3.2rem); margin:1rem auto 0; max-width:20ch; line-height:1.08} .acc-shop h3 em{font-style:italic; color:var(--or-txt)} .acc-shop .acc-lead{font-family:var(--serif); color:var(--encre-doux); max-width:52ch; margin:1.1rem auto 0; font-size:1.08rem} .acc-steps{display:flex; justify-content:center; flex-wrap:wrap; gap:18px 46px; margin:2.6rem 0} .acc-steps .s{display:flex; align-items:center; gap:13px; font-family:var(--serif); color:var(--encre-doux)} .acc-steps .s .ic{width:46px; height:46px; flex:0 0 auto; border:1px solid var(--or); border-radius:50%; display:grid; place-items:center; color:var(--or-txt)} @media(max-width:900px){ .acc-head{grid-template-columns:1fr} .acc-mariage{grid-template-columns:1fr} .acc-mariage-ph{min-height:300px} .acc-chef-g{grid-template-columns:1fr} .acc-chef-ph{max-width:380px} } @media(max-width:820px){ .acc-cards{grid-template-columns:1fr} .acc-card,.acc-card.tall{min-height:360px} } @media(max-width:640px){ .acc-stats{gap:24px} } /* ========================================================================== LISTES DE MODULES (actualites / billets) Le module emet :

Titre

...texte...
On s'appuie sur le h4 qui ouvre chaque entree pour separer les articles. ========================================================================== */ #contenu_scroller h4{font-family:var(--disp); font-weight:600; font-size:1.55rem; text-transform:none; letter-spacing:0; color:var(--encre); margin:0 0 .7em; padding-top:2.2em; border-top:1px solid var(--ligne)} #contenu_scroller .paragraphe>h4:first-of-type{border-top:0; padding-top:0} #contenu_scroller h4 a{color:inherit; text-decoration:none} #contenu_scroller h4 a:hover{color:var(--or-txt)} #contenu_scroller img[align="left"]{float:left; margin:.2em 28px 16px 0; max-width:320px} #contenu_scroller img[align="right"]{float:right; margin:.2em 0 16px 28px; max-width:320px} #contenu_scroller .prevnext{clear:both; margin-top:2.4em; padding-top:1.2em; border-top:1px solid var(--ligne); font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pierre)} #contenu_scroller .prevnext p{color:var(--pierre); margin:0} @media(max-width:640px){ #contenu_scroller img[align="left"],#contenu_scroller img[align="right"]{ float:none; margin:1em 0; max-width:100%} } /* ========================================================================== MDL_SOMMAIRE_SSPAGE_PHOTOS (pages "Nos services", "Cartes et menus") Markup du module : #liste_lien_page_fille > a > div > img + h3 > span Ce module n'avait aucun style dans l'ancien theme : on lui donne une grille. On vise l'ID et non la classe : le module retire la classe "page_fille_photo" des qu'UNE des sous-pages n'a pas de photo (22/09/2026, une carte ajoutee au back-office sans photo faisait basculer toute la liste). ========================================================================== */ #contenu_scroller #liste_lien_page_fille{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.4vw,28px); margin:0} #contenu_scroller #liste_lien_page_fille>a{display:flex; flex-direction:column; text-decoration:none; background:var(--carte); border:1px solid var(--ligne); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s} #contenu_scroller #liste_lien_page_fille>a:hover{transform:translateY(-4px); box-shadow:var(--ombre)} #contenu_scroller #liste_lien_page_fille>a>div{position:relative; aspect-ratio:4/3; overflow:hidden} #contenu_scroller #liste_lien_page_fille img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; transition:transform .6s cubic-bezier(.2,.7,.2,1)} #contenu_scroller #liste_lien_page_fille>a:hover img{transform:scale(1.05)} /* sous-page sans photo : un aplat a la place de l'image, pour que les vignettes gardent la meme hauteur */ #contenu_scroller #liste_lien_page_fille>a:not(:has(div)):before{content:""; display:block; aspect-ratio:4/3; background:var(--ivoire2) url(../images/refonte/photo-a-venir-large.jpg) center/cover} #contenu_scroller #liste_lien_page_fille h3{font-family:var(--disp); font-weight:600; font-size:1.25rem; margin:0; padding:16px 18px 18px} #contenu_scroller #liste_lien_page_fille h3 span{color:var(--encre)} #contenu_scroller #liste_lien_page_fille>a:hover h3 span{color:var(--or-txt)} @media(max-width:900px){#contenu_scroller #liste_lien_page_fille{grid-template-columns:1fr 1fr}} @media(max-width:600px){#contenu_scroller #liste_lien_page_fille{grid-template-columns:1fr}} /* ========================================================================== PLAN DU SITE / listes a puces des modules Les modules inserent de vieilles puces GIF (images/puce_*.gif) en ligne. On les reduit a un petit carre vert : content:"" remplace le contenu de l'img sur les navigateurs modernes ; a defaut le GIF s'affiche en 7px, ce qui reste discret. La grande marge par defaut des images est annulee ici. ========================================================================== */ #contenu_scroller img[src*="puce"], #contenu_scroller img[src*="/plus.gif"]{display:none} #contenu_scroller .paragraphe p a{line-height:2.1} /* ========================================================================== PAGES INTERIEURES : grille contenu + colonne laterale, bas de page (voir _includes/SIT_TRAITEUR/page_interieure.inc.php) ========================================================================== */ .page-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(30px,4.5vw,68px); align-items:start} .page-grid.pg-pleine{display:block} .page-main{min-width:0} .page-aside{position:sticky; top:106px; display:flex; flex-direction:column; gap:18px} .ct-box{border:1px solid var(--ligne); padding:26px; background:var(--carte)} .ct-box.ct-dark{background:var(--nuit); border-color:transparent} .ct-box h3{font-family:var(--disp); font-weight:600; font-size:1.35rem; margin:0 0 .5rem} .ct-box.ct-dark h3{color:#fff} .ct-box p{font-size:.95rem; color:var(--encre-doux); margin-bottom:1.1rem} .ct-box.ct-dark p{color:#cfc9b7} .ct-tel{display:block; font-family:var(--disp); font-weight:600; font-size:1.55rem; color:var(--or-clair); text-decoration:none; margin-bottom:1.1rem} .ct-tel:hover{color:#fff} .ct-faits{list-style:none; margin:0; padding:0} .ct-faits li{font-size:.94rem; color:var(--encre-doux); padding:12px 0; line-height:1.6} .ct-faits li+li{border-top:1px solid var(--ligne)} .ct-faits b{display:block; font-family:var(--sans); font-weight:500; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pierre); margin-bottom:3px} /* liens vers les pages soeurs */ .pl-wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,56px)} .page-liens{background:var(--ivoire2); border-top:1px solid var(--ligne); padding:clamp(46px,6vw,84px) 0} .pl-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px); margin-top:clamp(20px,3vw,34px)} .pl-card{position:relative; display:block; min-height:210px; overflow:hidden; text-decoration:none; color:#fff} .pl-card .im{position:absolute; inset:0; z-index:0} .pl-card img{width:100%; height:100%; object-fit:cover; margin:0; transition:transform .6s cubic-bezier(.2,.7,.2,1)} .pl-card:hover img{transform:scale(1.05)} .pl-card:after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(38,27,17,.92) 0%,rgba(38,27,17,.5) 52%,transparent 100%)} .pl-card .tt{position:relative; z-index:2; display:flex; align-items:flex-end; height:100%; padding:22px; font-family:var(--disp); font-weight:600; font-size:1.35rem; color:#fff} /* PDF "toutes nos cartes", en bas des pages de cartes (30/09/2026) */ .page-pdf{background:var(--ivoire2); border-top:1px solid var(--ligne); padding:clamp(28px,4vw,46px) 0} #contenu_scroller a.pdf-bloc,a.pdf-bloc{display:flex; align-items:center; gap:clamp(14px,2.4vw,26px); background:var(--carte); border:1px solid var(--ligne); padding:18px 22px; text-decoration:none; color:var(--encre); transition:border-color .2s, transform .2s, box-shadow .25s} a.pdf-bloc:hover{border-color:var(--or); transform:translateY(-2px); box-shadow:var(--ombre)} .pdf-ico{flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--or); color:#fff; font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.1em} .pdf-txt{display:flex; flex-direction:column; gap:3px} .pdf-txt strong{font-family:var(--disp); font-weight:600; font-size:1.2rem; line-height:1.2} .pdf-txt small{font-family:var(--serif); font-size:.92rem; color:var(--encre-doux)} .pdf-fleche{margin-left:auto; font-size:1.3rem; color:var(--or-txt); transition:transform .2s} a.pdf-bloc:hover .pdf-fleche{transform:translateX(4px)} @media(max-width:560px){.pdf-fleche{display:none}} /* cartes + allergenes (26/10/2026) : cote a cote quand la place le permet */ .pdf-liste{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:14px} /* appel a l'action de bas de page */ .page-cta{background:var(--nuit); color:var(--ivoire); text-align:center; padding:clamp(48px,6.5vw,92px) 0} .page-cta .eyebrow{color:var(--or-clair)} .page-cta .eyebrow:before{background:var(--or-clair)} .page-cta h3{font-family:var(--disp); font-weight:500; color:#fff; font-size:clamp(1.9rem,4vw,3rem); margin:1rem auto 0; max-width:22ch} .page-cta h3 em{font-style:italic; color:var(--or-clair)} .page-cta p{color:#cfc9b7; max-width:48ch; margin:1.1rem auto 0} .cta-actions{display:flex; justify-content:center; gap:15px; flex-wrap:wrap; margin-top:2rem} @media(max-width:980px){ .page-grid{grid-template-columns:1fr} .page-aside{position:static; flex-direction:row; flex-wrap:wrap; margin-top:14px} .page-aside>*{flex:1; min-width:260px} .pl-cards{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .pl-cards{grid-template-columns:1fr} .page-aside{flex-direction:column} } /* ========================================================================== PAGES CONTACT L'image d'accroche de la page est injectee en flottant par index.php ; la carte (MDL_PLAN, #map_canvas) doit passer dessous, pas dessous-dessus. ========================================================================== */ #contenu_scroller #map_canvas{clear:both; width:100% !important; height:380px !important; margin:1.6em 0; border:1px solid var(--ligne)} #contenu_scroller #map_canvas img{margin:0; max-width:none} .ct-coord{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px; margin:0 0 1.6em; padding:22px 24px; background:var(--carte); border:1px solid var(--ligne)} .ct-coord div{display:flex; flex-direction:column} .ct-coord b{font-family:var(--sans); font-weight:500; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pierre); margin-bottom:4px} .ct-coord span,.ct-coord a{font-size:1rem; color:var(--encre-doux); text-decoration:none} .ct-coord a:hover{color:var(--or-txt)} @media(max-width:620px){.ct-coord{grid-template-columns:1fr}} /* ========================================================================== MODULE "CARTES ET MENUS" (MDL_CARTE) Donnees gerees au back-office : de_carte > de_carte_categorie > de_carte_item ========================================================================== */ .carte{margin:2.4em 0 0} .carte-tete{text-align:center; padding:clamp(28px,4vw,46px) 0 clamp(20px,3vw,30px); border-top:1px solid var(--ligne)} /* premiere carte de la page : pas de filet au-dessus. :first-child echouait quand le module est precede d'une ancre (page d'une seule carte, 01/10/2026) -- :first-of-type couvre les deux cas. */ .carte:first-child .carte-tete,.carte:first-of-type .carte-tete{border-top:0; padding-top:0} .carte-sur{display:block; font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.28em; font-size:.68rem; color:var(--or-txt); margin-bottom:.7rem} .carte-tete h3{font-family:var(--disp); font-weight:500; font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.04; margin:0} /* introduction d'une carte : alignee a gauche. Centree, une introduction de plusieurs paragraphes partait en escalier (retour du 01/10/2026). */ .carte-intro{max-width:74ch; margin:1.2rem auto 0; color:var(--encre-doux); font-size:1.02rem; line-height:1.6; text-align:left} /* introduction saisie en texte riche au back-office (29/09/2026) */ .carte-intro p{margin:0 0 .7rem; max-width:none; color:inherit; font-size:inherit} .carte-intro>:last-child{margin-bottom:0} .carte-intro ul,.carte-intro ol{margin:.4rem 0 .7rem; padding-left:1.2em; text-align:left} .carte-intro li{margin:0 0 .25rem} .carte-intro a{color:var(--or-txt)} /* sommaire cliquable */ .carte-sommaire{list-style:none; margin:1.8em 0 2.4em; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:9px 10px} .carte-sommaire li{margin:0} .carte-sommaire li:before{display:none} .carte-sommaire a{display:inline-block; font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; text-decoration:none; color:var(--encre-doux); border:1px solid var(--ligne); padding:9px 15px; transition:background .2s, color .2s, border-color .2s} .carte-sommaire a:hover{background:var(--or); border-color:var(--or); color:#fff} /* categorie */ .carte-cat{margin:0 0 2.6em; scroll-margin-top:110px} .carte-cat h4{font-family:var(--disp); font-weight:600; font-size:1.7rem; color:var(--encre); text-transform:none; letter-spacing:0; margin:0 0 .3em; padding:0 0 .45em; border-top:0; border-bottom:1px solid var(--or); display:block} .carte-note{font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pierre); margin:0 0 1.1em} /* articles : nom ... prix */ .carte-items{list-style:none; margin:0; padding:0; max-width:none} .carte-items li{display:flex; align-items:baseline; gap:8px; padding:9px 0; margin:0; position:static} .carte-items li:before{display:none} .carte-items li+li{border-top:1px dotted var(--ligne)} .ci-txt{display:block; flex:0 1 auto} .ci-nom{display:block; font-size:1.04rem; color:var(--encre)} .ci-desc{display:block; font-size:.9rem; color:var(--pierre); font-style:italic; margin-top:2px} .ci-pts{flex:1 1 auto; min-width:18px; border-bottom:1px dotted var(--ligne2); transform:translateY(-4px); align-self:center} .ci-prix{flex:0 0 auto; font-family:var(--sans); font-weight:500; font-size:.95rem; color:var(--or-txt); white-space:nowrap; font-variant-numeric:tabular-nums} @media(max-width:560px){ .carte-items li{flex-wrap:wrap} .ci-pts{display:none} .ci-prix{margin-left:auto} } /* ========================================================================== BOUTIQUE EN LIGNE (module produit / panier greffe depuis gelin) Le module sort le HTML de l'ancien theme : on ne le reecrit pas, on l'habille. Classes emises par lib.produit.inc.php : .liste_categorie .bloc_tri .liste_produits .block_produit .img_produit .desc_produit .prix .prix-gamme .prevnext ========================================================================== */ /* --- bandeau de categories --- */ fieldset.liste_categorie{border:0; margin:0 0 clamp(24px,3vw,38px); padding:0} fieldset.liste_categorie legend{display:none} fieldset.liste_categorie ul{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0} fieldset.liste_categorie li{margin:0} fieldset.liste_categorie li a{display:inline-block; text-decoration:none; font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-doux); background:var(--carte); border:1px solid var(--ligne); padding:11px 20px; transition:background .2s, color .2s, border-color .2s} fieldset.liste_categorie li a:hover{background:var(--nuit); border-color:var(--nuit); color:var(--ivoire)} /* --- barre de tri --- */ .bloc_tri{display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin:0 0 clamp(20px,2.5vw,30px)} .bloc_tri select{font-family:var(--sans); font-size:.78rem; letter-spacing:.04em; color:var(--encre); background:var(--carte); border:1px solid var(--ligne); padding:9px 14px; max-width:230px} .bloc_tri select:focus{outline:none; border-color:var(--or)} /* --- grille de produits --- */ /* minmax(0,1fr) et non 1fr : "1fr" ne descend pas sous la largeur minimale ** d'une carte, et la derniere colonne debordait de la page a 1024 px. */ form.liste_produits{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); margin:0} /* avec la colonne "La gamme" a cote (au-dessus de 980 px), trois cartes ** tomberaient a 190 px : deux colonnes jusqu'a 1080 px */ @media(min-width:981px) and (max-width:1080px){ form.liste_produits{grid-template-columns:repeat(2,minmax(0,1fr))} } .block_produit{display:flex; flex-direction:column; background:var(--carte); border:1px solid var(--ligne); transition:transform .2s, box-shadow .25s, border-color .2s} .block_produit:hover{transform:translateY(-4px); box-shadow:var(--ombre); border-color:var(--ligne2)} .img_produit{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--ivoire2)} .img_produit a{display:block; width:100%; height:100%} .img_produit img{width:100%; height:100%; object-fit:cover; margin:0; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1)} .block_produit:hover .img_produit img{transform:scale(1.05)} /* l'icone "quick view" reclamait Font Awesome, retire a la refonte */ .img_produit .fa,.img_produit .hover-appear,.img_produit .hbw{display:none} .desc_produit{display:flex; flex-direction:column; flex:1; padding:22px 24px 24px} .desc_produit h5{font-family:var(--disp); font-weight:600; font-size:1.32rem; line-height:1.18; margin:0 0 .5rem} .desc_produit h5 a{color:var(--encre); text-decoration:none} .desc_produit h5 a:hover{color:var(--or-txt)} .desc_produit p{color:var(--encre-doux); font-size:.95rem; margin:0 0 .8rem} .desc_produit .prix{margin-top:auto} .desc_produit .prix-gamme{margin:0} .desc_produit span.prix{font-family:var(--disp); font-weight:600; font-size:1.45rem; color:var(--or-txt)} /* --- pagination --- */ .prevnext{margin-top:clamp(30px,4vw,50px)} .prevnext p{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:0} .prevnext a{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; text-decoration:none; font-family:var(--sans); font-size:.82rem; color:var(--encre-doux); background:var(--carte); border:1px solid var(--ligne)} .prevnext a:hover{border-color:var(--or); color:var(--or-txt)} .prevnext a.selected{background:var(--nuit); border-color:var(--nuit); color:var(--ivoire)} @media(max-width:900px){ form.liste_produits{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ form.liste_produits{grid-template-columns:1fr} .bloc_tri{justify-content:stretch} .bloc_tri select{flex:1; max-width:none} } /* Surcharges scopees a #contenu_scroller : les regles redactionnelles (soulignement des liens, puces losange, largeur de lecture) sont posees sur un selecteur d'ID et gagneraient sinon sur les classes de la boutique. */ #contenu_scroller fieldset.liste_categorie ul{max-width:none; color:inherit} #contenu_scroller fieldset.liste_categorie li{padding-left:0; margin-bottom:0} #contenu_scroller fieldset.liste_categorie li:before{display:none} #contenu_scroller fieldset.liste_categorie li a{text-decoration:none; color:var(--encre-doux)} #contenu_scroller fieldset.liste_categorie li a:hover{color:var(--ivoire)} #contenu_scroller .desc_produit h5 a{text-decoration:none; color:var(--encre)} #contenu_scroller .desc_produit h5 a:hover{color:var(--or-txt)} #contenu_scroller .img_produit a{text-decoration:none} #contenu_scroller .img_produit img{margin:0} #contenu_scroller .prevnext a{text-decoration:none} #contenu_scroller .prevnext p{max-width:none} #contenu_scroller .desc_produit p{max-width:none} /* --- fiche produit --- */ .fiche_produit{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,60px); align-items:start; margin-bottom:clamp(34px,4vw,56px)} .left_produit{position:relative} #contenu_scroller .left_produit a{display:block; text-decoration:none; border:1px solid var(--ligne); background:var(--carte)} #contenu_scroller .left_produit img{width:100%; height:auto; display:block; margin:0} .right_produit h3{font-family:var(--disp); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.06; margin:0 0 1.1rem} .prix_fiche{margin:0} .prix_fiche strong{font-family:var(--disp); font-weight:600; font-size:2.3rem; color:var(--or-txt); line-height:1} .right_produit>p{color:var(--encre-doux); font-size:.9rem; margin:.2rem 0 0} /* Regle propre a la FICHE produit : sans le scope, elle ajoutait un filet et une grosse respiration dans chaque carte de la liste. */ .right_produit .btn_ajout_panier{margin-top:clamp(22px,3vw,34px); padding-top:clamp(22px,3vw,32px); border-top:1px solid var(--ligne)} .select_qty p{font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--encre-doux); margin:0 0 .55rem} .select_qty select{font-family:var(--sans); font-size:.95rem; color:var(--encre); background:var(--carte); border:1px solid var(--ligne); padding:12px 16px; min-width:110px} .select_qty select:focus{outline:none; border-color:var(--or)} /* le "bouton" panier est un simple lien dans le module : on l'habille */ /* Regle propre a la FICHE produit. Non scopee, son margin-top:1.1rem decalait le bouton vers le bas dans chaque carte de la liste. */ #contenu_scroller .right_produit .bouton_panier a, #contenu_scroller .right_produit a.bouton_panier{ display:inline-flex; align-items:center; gap:.8em; margin-top:1.1rem; font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; text-decoration:none; background:var(--or); color:#fff; padding:16px 30px; transition:background .25s} #contenu_scroller .right_produit .bouton_panier a:hover, #contenu_scroller .right_produit a.bouton_panier:hover{ background:var(--or-txt); color:#fff} .right_produit .btn_add_qty{display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px} /* infos secondaires (marque, categorie, partage) */ .fiche_produit ~ p{color:var(--encre-doux); font-size:.92rem; margin:.3rem 0} #contenu_scroller h3+p,#contenu_scroller .fiche_produit+p{margin-top:0} @media(max-width:820px){ .fiche_produit{grid-template-columns:1fr} } /* #contenu_scroller h3 (selecteur d'ID) l'emporte sur .right_produit h3 */ #contenu_scroller .right_produit h3{font-family:var(--disp); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.06; margin:0 0 1.1rem} /* --- lightbox des photos produit (fancybox 2.1.5) --- */ .fancybox-overlay{background:rgba(43,30,19,.92)} .fancybox-skin{background:var(--carte); border-radius:0; padding:0!important; box-shadow:0 30px 80px -30px rgba(0,0,0,.7)} .fancybox-title-outside-wrap{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivoire2); margin-top:14px; text-shadow:none} .fancybox-close,.fancybox-nav span{border-radius:0} #contenu_scroller a.fancybox{position:relative; display:block; cursor:zoom-in} /* --- acces au panier dans l'en-tete --- */ .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} .lien-panier{position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--encre); text-decoration:none; border:1px solid transparent; transition:color .2s, border-color .2s} .lien-panier:hover{color:var(--or-txt); border-color:var(--ligne)} .lien-panier.rempli{color:var(--or-txt)} .lien-panier .pastille{position:absolute; top:2px; right:0; min-width:19px; height:19px; padding:0 5px; border-radius:19px; background:var(--or); color:#fff; font-family:var(--sans); font-weight:500; font-size:.66rem; line-height:19px; text-align:center; letter-spacing:0} /* --- popup d'ajout au panier (facebox) --- */ #facebox .popup{border-radius:0} #facebox .content{background:var(--carte); padding:34px 38px; max-width:430px; font-family:var(--serif); color:var(--encre)} #facebox .content p{margin:0 0 1rem; line-height:1.5} #facebox .content p[align="center"]{text-align:center} #facebox .content strong{display:inline-block; margin-top:.5rem; font-family:var(--disp); font-weight:600; font-size:1.4rem; line-height:1.15; color:var(--encre)} #facebox .content img{max-width:120px; height:auto; margin:.4rem auto 1rem; display:block; border:1px solid var(--ligne)} #facebox .content table{width:100%; border-collapse:collapse; margin:1.2rem 0 0} #facebox .content td{border:0; padding:0 6px; text-align:center; vertical-align:top} #facebox .content td p{margin:0} /* les deux boutons de la popup */ #facebox .content a.button_medium,#facebox .content a.button_alt_medium{ display:block; font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; text-decoration:none; padding:14px 18px; transition:background .25s, color .25s, border-color .25s} #facebox .content a.button_medium{background:var(--or); color:#fff} #facebox .content a.button_medium:hover{background:var(--or-txt); color:#fff} #facebox .content a.button_alt_medium{background:transparent; color:var(--encre); border:1px solid var(--ligne2); padding:13px 17px} #facebox .content a.button_alt_medium:hover{background:var(--encre); color:var(--ivoire)} #facebox_overlay{background:#141a0c} /* ========================================================================== PANIER ET TUNNEL DE COMMANDE (mdl_panier_creation.php) Le module sort des tables et des classes de l'ancien theme (.panier, .bloc0/.bloc1, .etape, .action) : on les habille sans toucher au PHP. ========================================================================== */ .mdlPanier h3{font-family:var(--disp); font-weight:500; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.06; margin:0 0 1.1rem} .mdlPanier h3+p{color:var(--encre-doux)} /* Le bandeau "panier de demonstration" a disparu avec le MODE_TEST : sa mise en forme laissait un encadre jaune vide en haut du panier. Regle supprimee. */ .infobulle{position:relative; text-decoration:none} .infobulle span{display:none; position:absolute; left:0; top:24px; z-index:20; width:290px; background:var(--nuit); color:var(--ivoire); padding:12px 15px; font-family:var(--serif); font-size:.85rem; line-height:1.45; text-transform:none; letter-spacing:0} .infobulle:hover span{display:block} /* fil des 4 etapes */ .etape{display:flex; flex-wrap:wrap; gap:0; margin:0 0 clamp(26px,3.5vw,42px); border:1px solid var(--ligne)} .item-etape{flex:1 1 0; min-width:130px; border-right:1px solid var(--ligne)} .item-etape:last-child{border-right:0} .item-etape p{margin:0; padding:15px 12px; text-align:center; font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pierre); background:var(--carte)} .item-etape.active p{background:var(--nuit); color:var(--ivoire)} /* tableau des articles */ table.panier{border-collapse:collapse; width:100%; margin:0 0 1.6rem; font-size:1rem} table.panier th{background:var(--ivoire2); border:1px solid var(--ligne); padding:13px 16px; text-align:left; font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-doux)} table.panier td{border:1px solid var(--ligne); padding:16px; vertical-align:top; background:var(--carte)} table.panier td.bloc1{background:var(--ivoire)} .photo-panier{float:left; margin-right:18px} .photo-panier img{display:block; width:84px; height:84px; object-fit:cover; border:1px solid var(--ligne); margin:0} .right-panier{overflow:hidden} .right-panier strong{font-weight:400} #contenu_scroller .right-panier a{font-family:var(--disp); font-weight:600; font-size:1.2rem; line-height:1.2; color:var(--encre); text-decoration:none} #contenu_scroller .right-panier a:hover{color:var(--or-txt)} .right-panier em{display:inline-block; margin-top:.35rem; font-style:normal; font-family:var(--sans); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pierre)} table.panier td[width] input[type=text]{font-family:var(--sans); font-size:.95rem; text-align:center; width:56px; padding:9px 6px; border:1px solid var(--ligne); background:var(--ivoire); color:var(--encre)} table.panier input[type=text]:focus{outline:none; border-color:var(--or)} /* la corbeille reclamait Font Awesome, retire a la refonte */ table.panier .fa-trash-o:before{content:"Retirer"; font-family:var(--sans); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase} /* ligne de total */ table.panier th[colspan]{background:var(--nuit); color:var(--ivoire); border-color:var(--nuit); font-size:.72rem} /* boutons d'etape */ .mdlPanier p.action{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:clamp(24px,3vw,36px) 0 0} .mdlPanier input[type=submit],.mdlPanier button[type=submit]{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; cursor:pointer; border:0; background:var(--or); color:#fff; padding:16px 30px; transition:background .25s} .mdlPanier input[type=submit]:hover{background:var(--or-txt)} /* le bouton "etape precedente" en secondaire */ .mdlPanier input[name^="PANIER_ETAPE_0"],.mdlPanier input[value*="pr"]{ background:transparent; color:var(--encre); border:1px solid var(--ligne2); padding:15px 29px} .mdlPanier input[name^="PANIER_ETAPE_0"]:hover,.mdlPanier input[value*="pr"]:hover{ background:var(--encre); color:var(--ivoire)} /* formulaire de coordonnees (etape 2) */ .mdlPanier label{display:block; font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-doux); margin:0 0 .4rem} .mdlPanier input[type=text]:not(table.panier input),.mdlPanier input[type=email], .mdlPanier input[type=password],.mdlPanier select,.mdlPanier textarea{ font-family:var(--serif); font-size:1rem; color:var(--encre); background:var(--carte); border:1px solid var(--ligne); padding:12px 14px; max-width:100%} .mdlPanier input[type=radio],.mdlPanier input[type=checkbox]{margin-right:8px} @media(max-width:700px){ .item-etape{min-width:50%; border-bottom:1px solid var(--ligne)} .photo-panier img{width:64px; height:64px} table.panier th,table.panier td{padding:11px} } /* Le contenu redactionnel style th/td via #contenu_scroller (selecteur d'ID) : il bat table.panier th[colspan]. On repasse au meme niveau de specificite. */ #contenu_scroller table.panier{border-collapse:collapse; width:100%; margin:0 0 1.6rem} #contenu_scroller table.panier th{background:var(--ivoire2); border:1px solid var(--ligne); padding:13px 16px; text-align:left; font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-doux)} #contenu_scroller table.panier td{border:1px solid var(--ligne); padding:16px; vertical-align:top; background:var(--carte); text-align:left} #contenu_scroller table.panier td.bloc1{background:var(--ivoire)} /* ligne de separation "Montant de votre commande" */ #contenu_scroller table.panier th[colspan]{background:var(--nuit); color:var(--ivoire); border-color:var(--nuit); font-size:.72rem} /* --- choix du point de retrait (etape 2) --- */ .retrait-intro{color:var(--encre-doux); margin:0 0 1.1rem} .retrait-points{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:0 0 1.2rem} .retrait-point{display:flex; gap:13px; align-items:flex-start; cursor:pointer; background:var(--ivoire); border:1px solid var(--ligne); padding:18px 20px; transition:border-color .2s, background .2s} .retrait-point:hover{border-color:var(--or)} .retrait-point input[type=radio]{margin:4px 0 0; flex:0 0 auto; accent-color:var(--or)} .retrait-point input[type=radio]:checked ~ .rp-corps .rp-nom{color:var(--or-txt)} .rp-corps{display:block} .rp-nom{display:block; font-family:var(--disp); font-weight:600; font-size:1.2rem; line-height:1.2; color:var(--encre); margin-bottom:.3rem} .rp-adr{display:block; font-size:.94rem; color:var(--encre-doux); line-height:1.45} .rp-horaires{display:block; margin-top:.5rem; font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pierre)} .retrait-delai{font-size:.92rem; color:var(--encre-doux); margin:0} /* bouton de finalisation du paiement */ #contenu_scroller a.btn-panier{display:inline-flex; align-items:center; font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; text-decoration:none; background:var(--or); color:#fff; padding:17px 32px; transition:background .25s} #contenu_scroller a.btn-panier:hover{background:var(--or-txt); color:#fff} /* recapitulatif : la colonne "Adresse de livraison" est vide en retrait */ #contenu_scroller table.panier td table td:nth-child(2){display:none} #contenu_scroller table.panier td table td{border:0; padding:0; background:none} #contenu_scroller table.panier td table{margin:0} @media(max-width:700px){ .retrait-points{grid-template-columns:1fr} } /* .retrait-point est un