@charset "utf-8"; /* Theme Name: PadelShop Theme URI: https://padelshop.tn/ Author: KisyTech Author URI: https://kisytech.fr/ Description: Thème WooCommerce 100 % sur-mesure pour PadelShop Tunisie. Une seule famille typographique (Archivo variable jouée sur l'axe de largeur), visuels produits en SVG dessinés à la main, tunnel de commande pensé pour le paiement à la livraison et les 24 gouvernorats. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: padelshop Tags: e-commerce, woocommerce, custom-colors, custom-menu, translation-ready WC requires at least: 8.0 WC tested up to: 9.4 */ /* ============================================================ Cette feuille est le socle du thème : tokens, base, boutons, en-tête, carte produit, formulaires, tableaux, pied de page. Elle vient telle quelle des maquettes validées le 4 septembre. Le CSS propre à un gabarit vit dans assets/css/.css et n'est chargé que sur la page concernée (voir inc/assets.php). Le raccord avec le balisage généré par WooCommerce lui-même (notices, onglets, variations, select2) est dans assets/css/woocommerce.css. Les valeurs du bloc :root sont dupliquées dans theme.json pour que l'éditeur de blocs propose la même palette. Si vous changez une couleur ici, changez-la là-bas aussi. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root{ /* Couleurs */ --court: #08284A; /* bleu terrain profond — fonds sombres */ --court-2: #0E3A66; /* bleu terrain clair — dégradés */ --azur: #1D5FD0; /* bleu Sidi Bou Saïd — actions primaires */ --azur-2: #2B7BEE; /* survol */ --azur-pale: #E8F0FD; /* fonds teintés */ --balle: #D8F23F; /* jaune balle — accent unique */ --brique: #DE3B2F; /* urgence : promo, stock faible */ --vert: #1B8A4B; /* validation, disponibilité */ --chaux: #F2F5F8; /* blanc chaulé — fond de page */ --blanc: #FFFFFF; --encre: #0C1B2A; /* texte */ --gris: #5D7183; /* texte secondaire */ --ligne: #DDE4EB; /* filets et bordures */ /* Élévation : ombres teintées bleu, jamais du gris neutre */ --lift-1: 0 2px 6px -2px rgba(8,40,74,.14); --lift-2: 0 14px 34px -14px rgba(8,40,74,.38); /* Rayons : volontairement différents selon le rôle */ --r-tuile: 4px; --r-carte: 14px; --r-btn: 8px; --gouttiere: clamp(1rem, 3.2vw, 2rem); --max: 1320px; } /* ---------- 2. Base ---------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--chaux); color:var(--encre); font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-variation-settings:'wdth' 100; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* WordPress imprime les styles globaux de theme.json tantôt dans , tantôt dans selon le gabarit. Sa règle a:where(:not(.wp-element-button)) a exactement la même spécificité que la nôtre, donc c'est l'ordre d'arrivée qui tranche — et l'en-tête changeait de couleur d'une page à l'autre. Un sélecteur d'un cran plus fort met fin au tirage au sort ; les liens qui ont leur propre couleur passent par une classe, ils restent prioritaires. */ body a{color:inherit} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} input,select,textarea{font:inherit} h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.05;letter-spacing:-.02em} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:3px solid var(--azur);outline-offset:3px;border-radius:2px} /* ---------- 3. Typographie et gabarit ---------- */ /* Une seule famille : Archivo variable, jouée sur l'axe de largeur. */ .wide{font-variation-settings:'wdth' 118} .h1{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;line-height:1.02;font-variation-settings:'wdth' 114;letter-spacing:-.025em} .h2{font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:800;font-variation-settings:'wdth' 114} .h3{font-size:1.05rem;font-weight:700;line-height:1.25;letter-spacing:-.01em} .h4{font-size:.92rem;font-weight:700;line-height:1.3} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)} .wrap-etroit{max-width:960px;margin-inline:auto;padding-inline:var(--gouttiere)} .band{padding-block:clamp(2.25rem,4.5vw,4rem)} .band-serre{padding-block:clamp(1.5rem,3vw,2.5rem)} .vh,.screen-reader-text,.says{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .lien-evitement{position:absolute;left:-9999px} .lien-evitement:focus{position:fixed;top:.5rem;left:.5rem;z-index:99;width:auto;height:auto;clip:auto;background:var(--balle);color:var(--court);padding:.7rem 1.1rem;border-radius:var(--r-btn);font-weight:700} .gris{color:var(--gris)} .mini{font-size:.8rem} .tete-section{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.75rem} .tete-section p{color:var(--gris);margin-top:.55rem;max-width:52ch} /* Sur téléphone, le lien « tout voir » passe sous le titre plutôt que de l'écraser. */ @media(max-width:700px){ .tete-section{display:block} .tete-section .lien-tout{display:inline-block;margin-top:.8rem} } .lien-tout{font-weight:700;font-size:.9rem;color:var(--azur);border-bottom:2px solid transparent;white-space:nowrap} .lien-tout:hover{border-bottom-color:var(--azur)} /* ---------- 4. Boutons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.9rem 1.5rem;border-radius:var(--r-btn); font-weight:700;font-size:.98rem;font-variation-settings:'wdth' 106; text-align:center; transition:background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .btn-primaire{background:var(--azur);color:#fff} .btn-primaire:hover{background:var(--azur-2)} .btn-balle{background:var(--balle);color:var(--court)} .btn-balle:hover{background:#c9e52c} .btn-encre{background:var(--encre);color:#fff} .btn-encre:hover{background:var(--court)} .btn-ligne{border:2px solid var(--ligne);color:var(--encre);background:var(--blanc)} .btn-ligne:hover{border-color:var(--encre)} .btn-fantome{border:2px solid rgba(255,255,255,.35);color:#fff} .btn-fantome:hover{border-color:#fff;background:rgba(255,255,255,.1)} .btn-wa{background:#25D366;color:#06301A} .btn-wa:hover{background:#1FBA5A} .btn-bloc{width:100%} .btn-grand{padding:1.05rem 1.6rem;font-size:1.05rem} .btn-petit{padding:.55rem 1rem;font-size:.85rem} .btn:active{transform:translateY(1px)} .btn[aria-disabled="true"]{opacity:.45;pointer-events:none} /* ---------- 5. Barre d'annonce ---------- */ .annonce{background:var(--court);color:rgba(255,255,255,.9);font-size:.8rem} .annonce .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px} .annonce-liste{display:flex;gap:1.6rem;align-items:center} .annonce b{color:var(--balle);font-weight:700} .annonce-droite{display:flex;gap:1.2rem;align-items:center;white-space:nowrap} @media(max-width:900px){.annonce-liste li,.annonce-droite a:first-child{display:none}.annonce-liste li.est-visible{display:block}} /* ---------- 6. En-tête ---------- */ .entete{background:var(--blanc);position:sticky;top:0;z-index:50;box-shadow:var(--lift-1)} .entete-haut{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.5rem);align-items:center;padding-block:1rem} /* Le bouton de menu n'existe que sous 940px : au-delà, la barre de catégories tient sur une ligne et n'a rien à replier. */ .bouton-menu{display:none;width:44px;height:44px;border-radius:var(--r-btn);color:var(--encre);place-items:center} .bouton-menu:hover{background:var(--chaux)} /* Logo vertical (P raquette au-dessus du mot) : on fixe la hauteur, la largeur suit le ratio. En dessous de 60 px le mot « PADELSHOP.TN » devient illisible, d'où le plancher mobile à 52 px. */ .logo{display:flex;align-items:center;flex:none} .logo-image{display:block;height:64px;width:auto;max-width:none} @media(max-width:940px){.logo-image{height:52px}} /* Recherche : volontairement large, c'est le premier levier de conversion */ .recherche{display:flex;background:var(--chaux);border:2px solid var(--ligne);border-radius:var(--r-btn);overflow:hidden;transition:border-color .16s} .recherche:focus-within{border-color:var(--azur)} .recherche select{border:0;background:transparent;padding:0 .8rem;color:var(--gris);font-size:.85rem;font-weight:600;border-right:1px solid var(--ligne);max-width:170px} .recherche input{flex:1;border:0;background:transparent;padding:.85rem 1rem;min-width:0;outline:none} .recherche button{background:var(--court);color:#fff;padding:0 1.15rem;display:grid;place-items:center} .recherche button:hover{background:var(--azur)} .actions{display:flex;align-items:center;gap:.35rem} .action{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .7rem;border-radius:var(--r-btn);font-size:.68rem;font-weight:600;color:var(--gris);position:relative} .action:hover{background:var(--chaux);color:var(--encre)} .pastille{position:absolute;top:.15rem;right:.35rem;background:var(--brique);color:#fff;font-size:.6rem;font-weight:800;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 4px} .panier-total{font-weight:800;color:var(--encre)} .nav{border-top:1px solid var(--ligne)} .nav .wrap>ul{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none} .nav .wrap>ul::-webkit-scrollbar{display:none} .nav a{display:block;padding:.85rem .95rem;font-size:.9rem;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent} .nav a:hover{color:var(--azur);border-bottom-color:var(--azur)} .nav .actif,.nav .est-actif>a{color:var(--azur);border-bottom-color:var(--azur)} .nav .promo{color:var(--brique)} .nav .promo:hover{border-bottom-color:var(--brique);color:var(--brique)} /* Sous-menus : la rangée passe en retour a la ligne, sinon le defilement horizontal rognerait le panneau. Classe posee par l'en-tete seulement quand le menu a reellement des enfants (voir padelshop_menu_a_sous_menus). */ .nav-deroulante .wrap>ul{overflow:visible;flex-wrap:wrap} .nav .wrap>ul>li{position:relative} .sous-menu{position:absolute;top:100%;left:0;z-index:40;min-width:15rem;display:none; background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-tuile); box-shadow:0 14px 30px rgba(11,31,58,.13);padding:.35rem} .nav .wrap>ul>li:hover>.sous-menu, .nav .wrap>ul>li:focus-within>.sous-menu{display:block} .sous-menu a{padding:.6rem .75rem;border-bottom:0;border-radius:6px;white-space:normal} .sous-menu a:hover{background:var(--azur-pale);color:var(--azur)} @media(max-width:940px){ .entete-haut{grid-template-columns:auto 1fr auto;row-gap:.85rem;gap:.75rem} .bouton-menu{display:grid;order:1} /* Porté par l'en-tête principal seulement : l'en-tête du tunnel n'a que le logo, et un order le ferait passer sous la réassurance. */ .entete-haut .logo{order:2} .actions{order:3} .recherche{order:4;grid-column:1/-1} .action{font-size:0;padding:.5rem} .action svg{width:22px;height:22px} .panier-total{display:none} /* La barre de catégories devient le menu du bouton. */ .nav{display:none} .nav-ouverte{display:block} .nav .wrap>ul{flex-direction:column;gap:0} .nav .wrap>ul>li{border-bottom:1px solid var(--ligne)} .nav a{padding:.9rem .2rem;border-bottom:0} /* Dans le menu deroulant du bouton, le sous-menu se deplie en liste indentee : un survol n'existe pas au doigt. */ .sous-menu{position:static;display:block;min-width:0;border:0;border-radius:0; box-shadow:none;padding:0 0 .5rem .9rem} .sous-menu a{padding:.5rem .2rem;font-weight:500;color:var(--gris)} body.menu-ouvert{overflow:hidden} } /* ---------- 7. Fil d'ariane ---------- */ .ariane{background:var(--blanc);border-bottom:1px solid var(--ligne);font-size:.82rem;color:var(--gris)} .ariane ol{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-block:.8rem;margin:0} .ariane li::after{content:"/";margin-left:.5rem;color:var(--ligne)} .ariane li:last-child::after{content:""} .ariane a:hover{color:var(--azur)} .ariane [aria-current]{color:var(--encre);font-weight:600} /* ---------- 8. Carte produit ---------- */ .produits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .produits-3{grid-template-columns:repeat(3,1fr)} .produit{background:var(--blanc);border-radius:var(--r-carte);overflow:hidden;display:flex;flex-direction:column; border:1px solid var(--ligne);transition:box-shadow .18s ease,transform .18s ease} .produit:hover{box-shadow:var(--lift-2);transform:translateY(-3px)} /* hauteur fixe plutôt qu'un ratio : les visuels n'ont pas tous la même forme, c'est la seule façon d'aligner le bas des cartes */ .produit-visuel{position:relative;height:clamp(210px,20vw,262px);background:linear-gradient(165deg,#EAF1FA,#DCE7F5);display:grid;place-items:center;padding:1.6rem} .produit-visuel svg{width:100%;height:100%;color:var(--court)} /* photo réelle : contenue dans la boîte, centrée, sans déformation ni débordement. Ces boîtes « visuel » à taille fixe étaient dessinées pour un SVG ; une vraie photo doit y être bornée en hauteur comme en largeur. */ .produit-visuel img,.ligne-visuel img,.ajout-visuel img,.recent-visuel img, .barre-fixe-visuel img,.mini-visuel img,.recap-visuel img,.encart-visuel img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} /* Sans piste explicite, la rangée de la grille se dimensionne sur la photo et déborde de la boîte : le max-height:100% ci-dessus se mesure alors sur cette rangée étirée, donc ne borne plus rien. Une piste minmax(0,1fr) la ramène à la hauteur de la boîte. */ .produit-visuel,.ligne-visuel,.ajout-visuel,.recent-visuel, .barre-fixe-visuel,.mini-visuel,.recap-visuel,.encart-visuel{ grid-template:minmax(0,1fr)/minmax(0,1fr)} /* Le dégradé bleuté n'accompagne que les visuels SVG : derrière une photo, blanc uni. */ .produit-visuel:has(img),.ligne-visuel:has(img),.ajout-visuel:has(img),.recent-visuel:has(img), .barre-fixe-visuel:has(img),.mini-visuel:has(img),.recap-visuel:has(img),.encart-visuel:has(img){background:#fff} .badge{position:absolute;top:.7rem;left:.7rem;white-space:nowrap;font-size:.68rem;font-weight:800;padding:.25rem .55rem;border-radius:4px;color:#fff;background:var(--brique)} .badge-neuf,.badge-court{background:var(--court)} .badge-balle{background:var(--balle);color:var(--court)} .coeur{position:absolute;top:.55rem;right:.55rem;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--gris)} .coeur:hover{color:var(--brique)} .produit-corps{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1} .marque{font-size:.72rem;font-weight:700;color:var(--azur)} .produit h3{min-height:2.6em} /* Prix, stock et bouton calés en bas de la carte : un titre sur trois lignes ne décale plus ce trio par rapport aux cartes voisines de la même rangée. */ .produit-corps .prix{margin-top:auto;padding-top:.15rem} .notes{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--gris)} .etoiles{color:#F5A623;letter-spacing:.05em} .prix{display:flex;align-items:baseline;gap:.55rem;margin-top:.15rem;flex-wrap:wrap} .prix b{font-size:1.32rem;font-weight:900;font-variation-settings:'wdth' 112;letter-spacing:-.02em} .prix s{color:var(--gris);font-size:.85rem} .remise{font-size:.72rem;font-weight:800;color:#fff;background:var(--brique);padding:.15rem .4rem;border-radius:4px;white-space:nowrap} .stock{display:flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--brique)} .stock-ok{color:var(--vert)} .stock-non{color:var(--gris)} .stock i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .produit .btn{margin-top:.6rem} @media(max-width:1080px){.produits,.produits-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.produits,.produits-3{grid-template-columns:1fr}} /* ---------- 9. Cartes, encarts, notes ---------- */ .carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);padding:clamp(1.15rem,2.4vw,1.75rem)} .carte-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem} .carte-plate{border-radius:var(--r-tuile)} .note{display:flex;gap:.75rem;align-items:flex-start;border-radius:var(--r-tuile);padding:.85rem 1rem;font-size:.86rem;line-height:1.5} .note svg{flex:none;margin-top:2px} .note b{font-weight:700} .note-info{background:var(--azur-pale);color:var(--court)} .note-info svg{color:var(--azur)} .note-ok{background:#E6F4EC;color:#0F5C31} .note-ok svg{color:var(--vert)} .note-alerte{background:#FDECEA;color:#8C1F17} .note-alerte svg{color:var(--brique)} .note-balle{background:var(--balle);color:var(--court)} /* Bandeau code promo, repris de la fiche produit */ .promo-code{display:flex;align-items:center;gap:.7rem;background:var(--balle);color:var(--court); border-radius:var(--r-tuile);padding:.7rem .9rem;font-size:.85rem;font-weight:600} .promo-code code{font-family:inherit;background:var(--court);color:var(--balle);padding:.15rem .5rem;border-radius:4px;font-weight:800} /* ---------- 10. Formulaires ---------- */ .champs{display:grid;gap:1rem} .champs-2{grid-template-columns:1fr 1fr} .champs-3{grid-template-columns:repeat(3,1fr)} .champ{display:flex;flex-direction:column;gap:.35rem;min-width:0} .champ-large{grid-column:1/-1} .champ label,.etiq{font-size:.82rem;font-weight:700} .champ label .opt{font-weight:500;color:var(--gris)} .champ input,.champ select,.champ textarea{ width:100%;padding:.8rem .95rem;border:2px solid var(--ligne);border-radius:var(--r-btn); background:var(--blanc);color:var(--encre);outline:none;transition:border-color .16s; } .champ textarea{min-height:120px;resize:vertical;line-height:1.55} .champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--azur)} .champ input::placeholder,.champ textarea::placeholder{color:#9AAAB8} .champ .aide-champ{font-size:.76rem;color:var(--gris)} .champ-erreur input,.champ-erreur select{border-color:var(--brique);background:#FFF8F7} .champ .msg-erreur{font-size:.76rem;font-weight:600;color:var(--brique)} .case{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;line-height:1.45} .case input{accent-color:var(--azur);width:18px;height:18px;margin:0;flex:none;margin-top:2px} .case a{text-decoration:underline} @media(max-width:640px){.champs-2,.champs-3{grid-template-columns:1fr}} /* Carte de formulaire : connexion, contact, et le formulaire de connexion que WooCommerce insere sur la confirmation d'une commande rattachee a un compte. */ .bloc{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);padding:clamp(1.35rem,2.6vw,2rem)} .bloc h2{font-size:1.25rem;font-variation-settings:'wdth' 112;margin-bottom:.4rem} .bloc-intro{font-size:.88rem;color:var(--gris);margin-bottom:1.35rem} .mdp-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .oubli{font-size:.78rem;font-weight:700;color:var(--azur)} .oubli:hover{text-decoration:underline} /* Option radio en bloc : livraison, paiement, adresses */ .option{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start; border:2px solid var(--ligne);border-radius:var(--r-btn);background:var(--blanc);padding:1rem 1.1rem;cursor:pointer; transition:border-color .16s, background-color .16s} .option:hover{border-color:var(--azur)} .option input{accent-color:var(--azur);width:19px;height:19px;margin:0;margin-top:2px} .option:has(input:checked){border-color:var(--court);background:var(--azur-pale)} .option-nom{font-size:.94rem;font-weight:700;line-height:1.3} .option-nom small{display:block;font-weight:500;color:var(--gris);font-size:.8rem;margin-top:.2rem} .option-prix{text-align:right;font-weight:800;font-size:.92rem;white-space:nowrap} .option-prix small{display:block;font-weight:700;color:var(--vert);font-size:.72rem} .option-detail{grid-column:2/-1;padding-top:.85rem;margin-top:.15rem;border-top:1px solid var(--ligne);font-size:.84rem;color:var(--gris)} /* Placement explicite : WooCommerce masque le bouton radio quand il n'y a qu'un moyen de paiement, et sans ces règles tout remonte d'une colonne. */ .option>input{grid-column:1} .option-nom{grid-column:2} .option-prix,.logo-paiement{grid-column:3} .option-detail p{margin:0} .option-detail p+p{margin-top:.5rem} .option-marque{display:inline-block;margin-left:.45rem;padding:.1rem .45rem;border-radius:999px; background:var(--balle);color:var(--court);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle} /* Compteur de quantité, repris de la fiche produit */ .compteur{display:inline-flex;align-items:center;border:2px solid var(--ligne);border-radius:var(--r-btn);background:var(--blanc)} .compteur button{width:38px;height:40px;font-size:1.15rem;font-weight:700;color:var(--gris)} .compteur button:hover{color:var(--encre)} .compteur input{width:38px;text-align:center;border:0;background:transparent;font-weight:700;outline:none;-moz-appearance:textfield} .compteur input::-webkit-outer-spin-button,.compteur input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* ---------- 11. Puces de filtre ---------- */ .puces{display:flex;flex-wrap:wrap;gap:.5rem} .puce{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem;border:2px solid var(--ligne); border-radius:999px;font-size:.84rem;font-weight:600;background:var(--blanc)} .puce:hover{border-color:var(--azur);color:var(--azur)} .puce[aria-pressed="true"],.puce-actif{background:var(--court);border-color:var(--court);color:#fff} .puce-retrait{background:var(--azur-pale);border-color:var(--azur-pale);color:var(--court)} .puce-retrait:hover{border-color:var(--azur)} .puce-retrait b{font-weight:800} /* ---------- 12. Tableaux ---------- */ .tableau{width:100%;border-collapse:collapse;font-size:.9rem} .tableau th{text-align:left;font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase; color:var(--gris);padding:.7rem .9rem;border-bottom:2px solid var(--ligne);white-space:nowrap} .tableau td{padding:.9rem;border-bottom:1px solid var(--ligne);vertical-align:middle} .tableau tbody tr:last-child td{border-bottom:0} .tableau .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .tableau-defile{overflow-x:auto} /* Miniature produit en ligne (panier, commande, compte) */ .mini-prod{display:flex;gap:.9rem;align-items:center;min-width:0} .mini-visuel{width:62px;height:74px;flex:none;background:linear-gradient(165deg,#EAF1FA,#DCE7F5); border-radius:var(--r-tuile);display:grid;place-items:center;padding:.4rem} .mini-visuel svg{width:100%;height:100%;color:var(--court)} .mini-nom{font-size:.9rem;font-weight:700;line-height:1.3} .mini-nom .marque{display:block;margin-bottom:.15rem} .mini-var{font-size:.78rem;color:var(--gris);margin-top:.25rem} /* ---------- 13. Récapitulatif de commande ---------- */ .recap{position:sticky;top:150px;display:flex;flex-direction:column;gap:1rem} /* Lignes d'articles du récapitulatif — panier, commande et confirmation */ .recap-articles{display:grid;gap:.9rem;margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--ligne)} .recap-article{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center} .recap-visuel{position:relative;width:52px;height:62px;flex:none;background:linear-gradient(165deg,#EAF1FA,#DCE7F5); border-radius:var(--r-tuile);display:grid;place-items:center;padding:.3rem} .recap-visuel svg{width:100%;height:100%;color:var(--court)} .recap-qte{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:10px;background:var(--court); color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;padding:0 5px} .recap-nom{font-size:.85rem;font-weight:700;line-height:1.3} .recap-nom small{display:block;font-weight:500;color:var(--gris);font-size:.76rem;margin-top:.15rem} .recap-montant{font-size:.88rem;font-weight:800;white-space:nowrap} .recap-modifier{font-size:.82rem;font-weight:700;color:var(--azur)} .recap-modifier:hover{text-decoration:underline} .recap-lignes{display:grid;gap:.6rem;font-size:.9rem} .recap-lignes div{display:flex;justify-content:space-between;gap:1rem} .recap-lignes .offert{color:var(--vert);font-weight:700} .recap-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; border-top:2px solid var(--encre);margin-top:.9rem;padding-top:.9rem} .recap-total b{font-size:1.6rem;font-weight:900;font-variation-settings:'wdth' 112;letter-spacing:-.02em} @media(max-width:960px){.recap{position:static}} /* Jauge de franco de port */ .jauge{display:grid;gap:.5rem} .jauge-barre{height:8px;border-radius:5px;background:var(--ligne);overflow:hidden} .jauge-barre span{display:block;height:100%;background:linear-gradient(90deg,var(--azur),var(--balle));border-radius:5px} .jauge-texte{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600} .jauge-texte .icone{flex:none;color:var(--vert)} .jauge-texte b{color:var(--azur)} /* ---------- 14. Étapes et chronologie ---------- */ .etapes{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;font-size:.85rem;font-weight:600;color:var(--gris)} .etapes li{display:flex;align-items:center;gap:.55rem} .etapes .n{width:24px;height:24px;border-radius:50%;background:var(--ligne);color:var(--blanc); display:grid;place-items:center;font-size:.75rem;font-weight:800;flex:none} .etapes .faite .n{background:var(--vert)} .etapes .faite{color:var(--encre)} .etapes [aria-current] .n{background:var(--azur)} .etapes [aria-current]{color:var(--encre)} .chrono{display:grid;gap:0;position:relative} .chrono li{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding-bottom:1.6rem;position:relative} .chrono li:last-child{padding-bottom:0} .chrono li::before{content:"";position:absolute;left:13px;top:30px;bottom:0;width:2px;background:var(--ligne)} .chrono li:last-child::before{display:none} .chrono .pion{width:28px;height:28px;border-radius:50%;background:var(--blanc);border:2px solid var(--ligne); display:grid;place-items:center;color:var(--gris);z-index:1} .chrono .faite .pion{background:var(--vert);border-color:var(--vert);color:#fff} .chrono .faite::before{background:var(--vert)} .chrono .encours .pion{background:var(--azur);border-color:var(--azur);color:#fff} .chrono b{display:block;font-size:.94rem;font-weight:700;line-height:1.3} .chrono span{font-size:.82rem;color:var(--gris)} /* ---------- 15. Pagination ---------- */ .pagination{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center;margin-top:2.5rem} .pagination a,.pagination span{min-width:42px;height:42px;padding:0 .8rem;display:grid;place-items:center; border:1px solid var(--ligne);border-radius:var(--r-tuile);background:var(--blanc);font-size:.9rem;font-weight:600} .pagination a:hover{border-color:var(--azur);color:var(--azur)} .pagination [aria-current]{background:var(--court);border-color:var(--court);color:#fff} .pagination .points{border:0;background:none} /* ---------- 16. Réassurance et aide ---------- */ .reassurance{background:var(--blanc);border-bottom:1px solid var(--ligne)} .reassurance ul{display:grid;grid-template-columns:repeat(var(--colonnes,4),1fr);gap:clamp(.75rem,2vw,2rem);padding-block:1.35rem} .reassurance li{display:flex;gap:.8rem;align-items:flex-start} .reassurance svg{flex:none;color:var(--azur);margin-top:2px} .reassurance b{display:block;font-size:.9rem;font-weight:700;line-height:1.3} .reassurance span{font-size:.78rem;color:var(--gris);line-height:1.4} @media(max-width:860px){.reassurance ul{grid-template-columns:1fr 1fr;gap:1.1rem}} @media(max-width:480px){.reassurance ul{grid-template-columns:1fr}} .aide{display:flex;align-items:center;gap:.85rem;font-size:.85rem} .aide svg{flex:none;color:#25D366} .aide b{display:block} .aide span{color:var(--gris);font-size:.8rem} /* ---------- 17. Entête de page sombre ---------- */ .tete-page{background:linear-gradient(160deg,var(--court-2) 0%,var(--court) 68%);color:#fff;position:relative;overflow:hidden} .tete-page .wrap,.tete-page .wrap-etroit{position:relative;z-index:2;padding-block:clamp(1.75rem,3.5vw,3rem)} .tete-page h1{margin-bottom:.7rem;text-wrap:balance} .tete-page .surtitre{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.62);margin-bottom:.35rem} .tete-page p{color:rgba(255,255,255,.76);max-width:64ch} /* Le visuel de tête est un filigrane : jamais de hauteur intrinsèque, sinon le SVG prend toute la largeur de la page. */ .tete-visuel{position:absolute;z-index:1;right:clamp(1rem,5vw,4rem);top:50%; transform:translateY(-50%) rotate(-10deg);width:clamp(90px,11vw,150px);height:auto; opacity:.26;color:#fff;pointer-events:none} @media(max-width:860px){.tete-visuel{display:none}} .trame{position:absolute;inset:0;z-index:1;opacity:.09;pointer-events:none; background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 16px), repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 16px)} /* ---------- 18. Pied de page ---------- */ .pied{background:var(--encre);color:rgba(255,255,255,.68)} .pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-block:clamp(2.5rem,5vw,3.5rem)} .pied h4{color:#fff;font-size:.92rem;font-weight:700;margin-bottom:1rem} .pied li{margin-bottom:.55rem;font-size:.88rem} .pied a:hover{color:#fff} .pied-intro{font-size:.88rem;line-height:1.6;max-width:38ch;margin:1rem 0 1.25rem} .pied .logo-image{height:88px} .contact-ligne{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;margin-bottom:.6rem} .contact-ligne svg{flex:none;color:var(--balle);margin-top:3px} .pied-bas{border-top:1px solid rgba(255,255,255,.12);padding-block:1.25rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;font-size:.8rem} .paiements{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .paiement{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:.35rem .6rem;font-size:.72rem;font-weight:700;color:#fff} @media(max-width:900px){.pied-haut{grid-template-columns:1fr 1fr}} @media(max-width:520px){.pied-haut{grid-template-columns:1fr}} /* ---------- 19. Barre mobile persistante ---------- */ .barre-mobile{display:none} @media(max-width:720px){ .barre-mobile{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--blanc);padding:.65rem var(--gouttiere);border-top:1px solid var(--ligne); box-shadow:0 -6px 20px -10px rgba(8,40,74,.35); } .barre-mobile-prix{display:flex;align-items:center;font-size:1.15rem;font-weight:900; font-variation-settings:'wdth' 110;line-height:1.2} .barre-mobile-prix del{font-size:.82rem;font-weight:600;color:var(--gris);margin-right:.4rem} .barre-mobile .btn{white-space:nowrap} body{padding-bottom:84px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .produit:hover{transform:none} } /* ---------- 20. Encart d'aide (page de contenu et suivi de commande) ---------- */ /* Partagé par deux gabarits : il vit donc ici, pas dans une feuille de page. */ .aide-carte{background:var(--court);color:#fff;border-radius:var(--r-carte);padding:1.35rem;position:relative;overflow:hidden} .aide-carte>*{position:relative;z-index:2} /* déclarée après : sinon la trame perdrait son absolute et disparaîtrait */ .aide-carte>.trame{position:absolute;inset:0;z-index:1} .aide-carte b{display:block;font-size:1rem;margin-bottom:.5rem} .aide-carte p{font-size:.85rem;color:rgba(255,255,255,.72);line-height:1.55;margin-bottom:1.1rem} .aide-carte .btn+.btn{margin-top:.6rem} .aide-liens b{display:block;font-size:1rem;margin-bottom:.7rem} .aide-liens ul{display:grid;gap:.5rem;font-size:.9rem} .aide-liens a{color:var(--azur);font-weight:600} .aide-liens a:hover{text-decoration:underline} /* ---------- 21. Composants partages entre gabarits ---------- Une seule feuille de gabarit est chargee par page (voir padelshop_feuille_gabarit) : tout composant qui apparait sur plus d'un gabarit doit vivre ici, sinon il sort sans style sur les autres pages. */ /* Carte d'article : rubrique Conseils, article (« À lire ensuite »), 404. L'accueil garde sa propre variante dans accueil.css. */ .articles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .conseil{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);overflow:hidden;display:flex;flex-direction:column} .conseil:hover{box-shadow:var(--lift-2)} .conseil:hover .conseil-titre{color:var(--azur)} .conseil-visuel{aspect-ratio:16/9;background:linear-gradient(150deg,var(--court-2),var(--court));position:relative;display:grid;place-items:center;overflow:hidden} .conseil-visuel svg.sujet{width:auto;height:62%;color:rgba(255,255,255,.85);position:relative;z-index:2} .conseil-visuel img.sujet{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .conseil-corps{padding:1.15rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .conseil-cat{font-size:.74rem;font-weight:700;color:var(--azur)} .conseil-titre{font-size:1.05rem;font-weight:700;line-height:1.3;transition:color .16s} .conseil p{font-size:.86rem;color:var(--gris);line-height:1.55} .conseil .meta{margin-top:auto;padding-top:.6rem} @media(max-width:1080px){ .articles{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .articles{grid-template-columns:1fr} } .meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem;color:var(--gris);align-items:center} .meta i{width:3px;height:3px;border-radius:50%;background:var(--ligne)} /* Prose : page de contenu, accueil editorial, texte SEO d'une categorie. */ .contenu{max-width:74ch} .contenu>p{font-size:1rem;line-height:1.75;color:#22323F;margin-bottom:1.05rem} .contenu .chapeau{font-size:1.12rem;line-height:1.65;color:var(--encre);font-weight:500;margin-bottom:1.75rem} .contenu h2{font-size:clamp(1.3rem,2.2vw,1.7rem);font-variation-settings:'wdth' 112;margin:2.5rem 0 .9rem; padding-top:1.5rem;border-top:1px solid var(--ligne);scroll-margin-top:160px} .contenu h2:first-of-type{margin-top:0;padding-top:0;border-top:0} .contenu h3{font-size:1.05rem;font-weight:700;margin:1.6rem 0 .55rem} .contenu ul.liste{display:grid;gap:.55rem;margin-bottom:1.15rem} .contenu ul.liste li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;font-size:.96rem;line-height:1.65;color:#22323F} .contenu ul.liste svg{color:var(--azur);flex:none;margin-top:5px} .contenu b{font-weight:700;color:var(--encre)} .contenu a.lien{color:var(--azur);font-weight:600;border-bottom:1px solid var(--azur)} .contenu .tableau{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);overflow:hidden;margin:1.35rem 0} .contenu .tableau th{background:var(--chaux)} /* Prose saisie dans l'éditeur (pages et articles) : listes, liens, tableaux, citations et images n'ont pas de classe, ils doivent quand même se lire. */ :is(.contenu,.corps) :is(ul,ol):not(.liste){margin:0 0 1.15rem;padding-left:1.35rem;display:grid;gap:.4rem} :is(.contenu,.corps) ul:not(.liste){list-style:disc} :is(.contenu,.corps) ol:not(.liste){list-style:decimal} :is(.contenu,.corps) :is(ul,ol):not(.liste) li{font-size:.97rem;line-height:1.65;color:#22323F;padding-left:.2rem} :is(.contenu,.corps) :is(ul,ol):not(.liste) li::marker{color:var(--azur);font-weight:700} :is(.contenu,.corps) :is(p,li,td) a:not([class]){color:var(--azur);font-weight:600;text-decoration:underline;text-underline-offset:2px} :is(.contenu,.corps) :is(p,li,td) a:not([class]):hover{color:var(--azur-2)} :is(.contenu,.corps) blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background:var(--azur-pale);border-left:4px solid var(--azur);border-radius:0 var(--r-btn) var(--r-btn) 0} :is(.contenu,.corps) blockquote p{margin:0;font-size:.97rem;line-height:1.65;color:var(--encre)} :is(.contenu,.corps) figure{margin:1.75rem 0} :is(.contenu,.corps) figure img{border-radius:var(--r-carte);width:100%;height:auto} :is(.contenu,.corps) figcaption{font-size:.8rem;color:var(--gris);margin-top:.5rem} :is(.contenu,.corps) .wp-block-table{margin:1.5rem 0;overflow-x:auto} :is(.contenu,.corps) .wp-block-table table{width:100%;border-collapse:collapse;background:var(--blanc);font-size:.9rem;min-width:480px} :is(.contenu,.corps) .wp-block-table :is(th,td){border:1px solid var(--ligne);padding:.6rem .8rem;text-align:left;vertical-align:top;line-height:1.5} :is(.contenu,.corps) .wp-block-table th{background:var(--chaux);font-weight:700} /* FAQ depliante : page de contenu et bas de page categorie. */ .faq{margin-top:1.5rem} .faq details{border-bottom:1px solid var(--ligne)} .faq summary{list-style:none;cursor:pointer;padding:1rem 0;font-size:.96rem;font-weight:700; display:flex;justify-content:space-between;gap:1rem;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary .icone-chevron{transform:rotate(90deg);color:var(--gris);flex:none;transition:transform .18s} .faq details[open] summary .icone-chevron{transform:rotate(-90deg)} .faq p{padding-bottom:1.1rem;font-size:.92rem;color:var(--gris);line-height:1.7} /* Etat vide : recherche sans resultat, categorie sans produit, panier vide. */ .rien{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte); padding:clamp(2rem,5vw,3.25rem);display:grid;justify-items:center;text-align:center;gap:1rem} .rien-visuel{width:88px;color:var(--ligne)} .rien p{color:var(--gris);max-width:52ch} .rien-pistes{display:grid;gap:.6rem;text-align:left;width:100%;max-width:520px;margin-top:.5rem;font-size:.9rem;color:var(--gris)} .rien-pistes li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start} .rien-pistes svg{color:var(--azur);flex:none;margin-top:3px} .rien-actions, .vide-ctas{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.5rem} /* Pastille de statut : tableau des commandes du compte, page de suivi. */ .statut{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;white-space:nowrap} .statut i{width:6px;height:6px;border-radius:50%;background:currentColor} .statut-attente{background:#EEF2F6;color:var(--gris)} .statut-route{background:var(--azur-pale);color:var(--azur)} .statut-livre{background:#E6F4EC;color:#0F5C31} .statut-annule{background:#FDECEA;color:#8C1F17} .lien{color:var(--azur);font-weight:600;border-bottom:1px solid var(--azur)} .lien:hover{color:var(--court);border-bottom-color:var(--court)} /* Reactions d'article : wp_list_comments et comment_form sortent leur propre balisage, on l'habille ici plutot que de reecrire le walker. */ .commentaires{display:grid;gap:1.35rem} .commentaires .h2{font-size:1.25rem;font-variation-settings:'wdth' 112} .liste-commentaires{list-style:none;display:grid;gap:1.1rem;margin:0;padding:0} .liste-commentaires .children{list-style:none;display:grid;gap:1.1rem;margin:1.1rem 0 0;padding-left:clamp(1rem,4vw,2.5rem); border-left:2px solid var(--ligne)} .comment-body{display:grid;gap:.55rem} .comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-size:.82rem;color:var(--gris)} .comment-author{display:flex;align-items:center;gap:.6rem} .comment-author .avatar{width:36px;height:36px;border-radius:50%;flex:none} .comment-author .fn{font-weight:700;font-style:normal;color:var(--encre)} .comment-author .says{display:none} .comment-metadata a{color:inherit} .comment-content p{font-size:.95rem;line-height:1.7;color:#22323F} .comment-content p+p{margin-top:.7rem} .comment-body .reply{font-size:.82rem;font-weight:700} .comment-body .reply a{color:var(--azur)} .comment-awaiting-moderation{font-size:.8rem;color:var(--gris);font-style:italic} .comment-respond{display:grid;gap:.9rem} .liste-commentaires+.comment-respond{margin-top:.4rem;padding-top:1.35rem;border-top:1px solid var(--ligne)} .comment-reply-title{font-size:1.1rem;font-weight:800;font-variation-settings:'wdth' 112} .comment-reply-title small{font-size:.8rem;font-weight:600;margin-left:.6rem} .comment-form{display:grid;gap:1rem} .comment-form .champ label{font-size:.82rem;font-weight:700} .comment-form textarea, .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url]{width:100%;padding:.8rem .95rem;border:2px solid var(--ligne);border-radius:var(--r-btn); background:var(--blanc);color:var(--encre);outline:none;transition:border-color .16s} .comment-form textarea{min-height:120px;resize:vertical;line-height:1.55} .comment-form textarea:focus,.comment-form input:focus{border-color:var(--azur)} .comment-form-author,.comment-form-email,.comment-form-url{display:grid;gap:.35rem} .comment-form-author label,.comment-form-email label,.comment-form-url label{font-size:.82rem;font-weight:700} .comment-form-cookies-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem} .comment-form-cookies-consent input{accent-color:var(--azur);width:18px;height:18px;margin:0;flex:none;margin-top:2px} .comment-form .form-submit{margin:0} .comment-notes,.logged-in-as{font-size:.84rem;color:var(--gris)} @media(min-width:640px){ .comment-form{grid-template-columns:1fr 1fr} .comment-form>p:not(.comment-form-author):not(.comment-form-email){grid-column:1/-1} } /* ---------- Bandeau cookies (inc/mesure.php) ---------- */ .cookies{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:0 var(--gouttiere) calc(var(--gouttiere) + env(safe-area-inset-bottom,0px));pointer-events:none} .cookies-boite{pointer-events:auto;max-width:640px;background:var(--blanc);color:var(--encre);border-radius:var(--r-carte);box-shadow:var(--lift-2);border:1px solid var(--ligne);padding:1.1rem 1.25rem;display:grid;gap:.7rem;font-size:.9rem;line-height:1.5} .cookies[hidden],.cookies [hidden]{display:none!important} .cookies-titre{font-size:1rem} .cookies-boite p{margin:0;color:var(--gris)} .cookies-boite p a{color:var(--azur);text-decoration:underline} .cookies-choix{display:grid;gap:.45rem} .cookies-choix label{display:flex;gap:.55rem;align-items:center} .cookies-actions{display:flex;flex-wrap:wrap;gap:.5rem} .pied-cookies{margin-left:.75rem;text-decoration:underline}