/* ========================================================================= Dégaine Ton Style, refonte 2026 Feuille de style du thème enfant, écrite à partir du README de handoff, qui fait foi sur toutes les valeurs. Les polices sont déclarées dans assets/css/fonts.css, chargée avant. ========================================================================= */ /* ------------------------------------------------------------------ */ /* Jetons */ /* ------------------------------------------------------------------ */ :root { /* La règle vermillon est stricte : --vermillon aplats, bandeaux, filets, et titres de plus de 24 px --vermillon-fonce vermillon en TEXTE COURANT sur fond clair 5,06:1 --vermillon-clair vermillon en TEXTE sur fond encre 7,37:1 Ne jamais poser --vermillon en texte de moins de 24 px. */ --encre: #111111; --encre-doux: #1A1A1A; --vermillon: #D93A21; --vermillon-fonce: #C0301A; --vermillon-clair: #FF7A5E; --creme: #F5F1E8; --creme-bloc: #EFE9DC; --blanc: #FFFFFF; --gris-texte: #5A544A; --gris-legende: #6E6555; --texte-long: #3D3831; --fond-depliant: #FFFDF7; --desactive: #B5AE9E; --filet-clair: rgba(17,17,17,.14); --filet-clair-fort: rgba(17,17,17,.20); --separateur: rgba(17,17,17,.08); --filet-sombre: rgba(245,241,232,.25); --filet-sombre-fort: rgba(245,241,232,.33); --titre: "Anton", "Arial Narrow", Impact, sans-serif; --texte: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --r-xs: 6px; --r-sm: 12px; --r-md: 14px; --r-lg: 18px; --r-pilule: 999px; --pad-section: 64px 48px; } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ .dts * { box-sizing: border-box; } /* ⚠️ LE BUG QUI CASSAIT TOUTES LES PAGES BOUTIQUE. WooCommerce pose une classe « columns-3 » sur le des archives produit, et une regle du site la traduit en « column-count: 3 ». Le corps entier de la page partait alors en trois colonnes de journal : les filtres dans la premiere, les produits dans la deuxieme, le PIED DE PAGE dans la troisieme. Aucune de mes grilles n'y pouvait quoi que ce soit : le decoupage etait impose au-dessus d'elles. Un corps de page n'est jamais multi-colonnes. On le neutralise ici. */ body.dts-refonte { column-count: auto; columns: auto; } body.dts-refonte { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .dts h1, .dts h2, .dts h3 { font-family: var(--titre); font-weight: 400; text-transform: uppercase; margin: 0; } /* ⚠️ Astra pose une couleur EXPLICITE sur ses titres, et une déclaration explicite l'emporte toujours sur une couleur héritée du parent. Sans les règles ci-dessous, le H1 du hero sort en noir sur fond noir. Chaque titre doit donc porter sa couleur, jamais compter sur l'héritage. */ .dts-hero h1, .dts-404 h1, .dts-pied h2, .dts-pied h3, .dts-section--sombre h1, .dts-section--sombre h2, .dts-section--sombre h3 { color: var(--creme); } .dts-produit h1, .dts-boutique-tete h1, .dts-themes h2, .dts-vide h1, .dts-vide h2, .dts-carte h2, .dts-carte h3 { color: var(--encre); } .dts-section--sombre .dts-carte h2, .dts-section--sombre .dts-carte h3 { color: var(--creme); } .dts p { margin: 0; } /* :where() met la spécificité à zéro. Sans lui, « .dts a » (0,1,1) écrase « .dts-btn--encre » (0,1,0) et le bouton de l'en-tête se retrouve en texte noir sur fond noir. C'est la collision de spécificité classique. */ :where(.dts) a { color: inherit; text-decoration: none; } .dts img { max-width: 100%; display: block; } .dts ol, .dts ul { margin: 0; padding: 0; list-style: none; } .dts-icone { width: 24px; height: 24px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dts-invisible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .dts-invisible:focus { position: static; width: auto; height: auto; margin: 0; clip: auto; padding: 12px 20px; background: var(--encre); color: var(--creme); display: inline-block; } .dts-surtitre { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--vermillon-fonce); margin: 0 0 8px; } .dts-surtitre--sombre { color: var(--vermillon-clair); } .dts-section { padding: var(--pad-section); } .dts-section--sombre { background: var(--encre); color: var(--creme); } .dts-section--doux { background: var(--encre-doux); } .dts-section--voisins { padding-top: 16px; padding-bottom: 0; } .dts-tete-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; } .dts-tete-section h2 { font-size: 52px; line-height: 1; } .dts-fleches { display: flex; gap: 12px; } /* Le focus doit rester visible : c'est la seule façon de naviguer au clavier. */ .dts a:focus-visible, .dts button:focus-visible, .dts input:focus-visible, .dts summary:focus-visible { outline: 3px solid var(--vermillon); outline-offset: 3px; border-radius: var(--r-xs); } .dts-section--sombre a:focus-visible, .dts-section--sombre button:focus-visible, .dts-404 a:focus-visible, .dts-404 input:focus-visible { outline-color: var(--vermillon-clair); } /* ---- Boutons ---- */ .dts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--titre); text-transform: uppercase; letter-spacing: .08em; border-radius: var(--r-pilule); border: 1px solid transparent; cursor: pointer; text-align: center; min-height: 44px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .dts-btn--primaire { background: var(--vermillon); color: #fff; font-size: 19px; padding: 19px 34px; } .dts-btn--primaire:hover { background: var(--creme); color: var(--encre); } .dts-btn--encre { background: var(--encre); color: var(--creme); font-size: 15px; padding: 12px 20px; } .dts-btn--encre:hover { background: var(--vermillon); color: #fff; } .dts-btn--fantome { background: transparent; border-color: var(--filet-sombre-fort); color: var(--creme); font-family: var(--texte); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 17px; padding: 18px 28px; } .dts-btn--fantome:hover { border-color: var(--creme); } .dts-btn--contour { background: transparent; border-color: var(--filet-clair-fort); color: var(--encre); font-family: var(--texte); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 17px; padding: 16px 26px; } .dts-btn--contour:hover { background: var(--encre); color: var(--creme); border-color: var(--encre); } .dts-rond { width: 48px; height: 48px; min-height: 48px; border-radius: var(--r-pilule); border: 1px solid var(--filet-clair-fort); background: transparent; color: var(--encre); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .dts-rond:hover { background: var(--encre); color: var(--creme); } /* ------------------------------------------------------------------ */ /* En-tête */ /* ------------------------------------------------------------------ */ .dts-entete { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 48px; background: var(--creme); border-bottom: 1px solid var(--separateur); } .dts-logo { display: inline-flex; align-items: center; gap: 12px; } .dts-logo img { height: 52px; width: auto; } .dts-logo-mot { font-family: var(--titre); font-size: 17px; line-height: .92; letter-spacing: .01em; text-transform: uppercase; } .dts-logo-mot span { display: block; } .dts-logo-mot .l2 { color: var(--vermillon-fonce); } .dts-nav { display: flex; gap: 34px; font-size: 16px; font-weight: 500; } .dts-nav a { padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .15s ease; } .dts-nav a:hover, .dts-nav a[aria-current="page"] { border-bottom-color: var(--vermillon); } .dts-recherche-pilule { display: flex; align-items: center; gap: 8px; border: 1px solid var(--filet-clair); border-radius: var(--r-pilule); padding: 9px 16px; color: var(--gris-legende); font-size: 15px; background: transparent; min-height: 44px; } .dts-recherche-pilule input { border: 0; background: transparent; font: inherit; color: var(--encre); width: 168px; padding: 0; } /* ⚠️ Ce « outline: none » annulait le contour de focus du thème sur le champ de recherche, sans rien mettre à la place : plus aucun repère au clavier. Relevé au dixième audit. On le garde, parce qu'un contour AUTOUR DU CHAMP dans une pilule est laid, mais on déplace le repère sur la pilule entière grâce à :focus-within. L'information reste, l'esthétique aussi. */ .dts-recherche-pilule input:focus { outline: none; } .dts-recherche-pilule:focus-within { outline: 3px solid var(--vermillon); outline-offset: 3px; } .dts-entete .dts-recherche-pilule:focus-within { outline-color: var(--encre); } .dts-recherche-pilule--large { max-width: 420px; margin-top: 20px; } .dts-recherche-pilule--large input { width: 100%; } .dts-entete-actions { display: flex; align-items: center; gap: 16px; } /* ------------------------------------------------------------------ */ /* Hero */ /* ------------------------------------------------------------------ */ .dts-hero { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--encre); color: var(--creme); } .dts-hero-texte { padding: 76px 56px 68px; display: flex; flex-direction: column; justify-content: center; gap: 28px; } .dts-hero-texte .dts-surtitre { font-size: 14px; letter-spacing: .22em; color: var(--vermillon-clair); margin: 0; } .dts-hero h1 { font-size: clamp(46px, 6.2vw, 88px); line-height: .9; letter-spacing: -.01em; text-wrap: balance; } .dts-hero h1 .accent { color: var(--vermillon); display: block; } .dts-hero-chapo { font-size: 19px; line-height: 1.55; color: rgba(245,241,232,.8); max-width: 460px; } .dts-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .dts-hero-mention { font-size: 14px; color: rgba(245,241,232,.6); } .dts-hero-visuels { background: var(--encre-doux); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .dts-hero-visuels a { display: block; height: 100%; } .dts-hero-visuels img { width: 100%; height: 100%; object-fit: cover; } .dts-hero-visuels > *:first-child { grid-row: span 2; } /* ------------------------------------------------------------------ */ /* Bandeau défilant */ /* ------------------------------------------------------------------ */ .dts-bandeau { background: var(--vermillon); color: #fff; padding: 14px 0; overflow: hidden; } .dts-bandeau-piste { display: flex; gap: 44px; width: max-content; font-family: var(--titre); font-size: 17px; letter-spacing: .14em; text-transform: uppercase; animation: dts-defile 26s linear infinite; } .dts-bandeau-piste span { white-space: nowrap; } @keyframes dts-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .dts-bandeau-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding: 0 24px; } .dts-rail { scroll-behavior: auto; } } /* ------------------------------------------------------------------ */ /* Rails et cartes produit */ /* ------------------------------------------------------------------ */ .dts-rail { display: flex; gap: 22px; overflow-x: auto; scroll-behavior: smooth; padding: 24px 48px 56px; margin: 0 -48px; scrollbar-width: thin; } .dts-rail::-webkit-scrollbar { height: 6px; } .dts-rail::-webkit-scrollbar-thumb { background: var(--filet-clair-fort); border-radius: 3px; } .dts-rail > .dts-carte { flex: 0 0 300px; } .dts-carte { display: flex; flex-direction: column; gap: 14px; } .dts-carte-visuel { position: relative; } .dts-carte-visuel img, .dts-carte-vide { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: var(--r-lg); background: var(--blanc); } .dts-carte h2, .dts-carte h3 { font-family: var(--texte); font-weight: 700; text-transform: none; font-size: 18px; line-height: 1.3; color: var(--encre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; } .dts-carte-lien { font-size: 15px; color: var(--gris-legende); } .dts-carte-lien strong { color: var(--vermillon-fonce); font-weight: 700; } .dts-carte:hover .dts-carte-lien strong { text-decoration: underline; } .dts-badge { position: absolute; top: 14px; left: 14px; background: var(--encre); color: var(--creme); font-family: var(--titre); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--r-pilule); } .dts-grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; } .dts-grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px 24px; } .dts-section--sombre .dts-tete-section h2 { color: var(--creme); } .dts-section--sombre .dts-carte h2, .dts-section--sombre .dts-carte h3 { color: var(--creme); font-size: 19px; } .dts-section--sombre .dts-carte-visuel img { background: var(--encre-doux); } /* Sur fond sombre, le cartouche « visuel bientôt disponible » doit rester lisible : en reprenant le fond encre, il devenait une case noire muette, c'est-à-dire exactement ce qu'il est censé éviter. */ .dts-section--sombre .dts-carte-vide { background: var(--encre-doux); border-color: var(--filet-sombre); } .dts-section--sombre .dts-carte-vide strong { color: var(--vermillon-clair); } .dts-section--sombre .dts-carte-vide span { color: rgba(245,241,232,.6); } .dts-section--sombre .dts-carte-lien { color: rgba(245,241,232,.6); } .dts-section--sombre .dts-carte-lien strong { color: var(--vermillon-clair); } .dts-lien-souligne { font-size: 16px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--filet-sombre-fort); } .dts-lien-souligne:hover { border-bottom-color: var(--creme); } /* ------------------------------------------------------------------ */ /* Trouve ton thème */ /* ------------------------------------------------------------------ */ .dts-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .dts-themes h2 { font-size: 40px; line-height: 1.05; } .dts-themes p { font-size: 17px; line-height: 1.6; color: var(--gris-texte); max-width: 420px; margin-top: 16px; } .dts-pilules { display: flex; flex-wrap: wrap; gap: 10px; } .dts-pilules--centrees { justify-content: center; margin-top: 28px; } .dts-pilule { border: 1px solid var(--filet-clair-fort); border-radius: var(--r-pilule); padding: 12px 20px; font-size: 16px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .dts-pilule:hover { background: var(--encre); color: var(--creme); border-color: var(--encre); } .dts-pilule--pleine { background: var(--vermillon); color: #fff; border-color: var(--vermillon); font-weight: 700; } .dts-pilule--pleine:hover { background: var(--encre); border-color: var(--encre); } /* ------------------------------------------------------------------ */ /* Pied de page */ /* ------------------------------------------------------------------ */ .dts-pied { background: var(--encre); color: var(--creme); padding: 56px 48px 40px; } .dts-pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } /* h2 depuis le 12/08/2026 : le h3 sautait un niveau sur les pages sans h2. */ .dts-pied h2, .dts-pied h3 { font-size: 28px; } .dts-pied-chapo { font-size: 16px; color: rgba(245,241,232,.67); margin-top: 12px; } .dts-pied-titre { font-family: var(--texte); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,241,232,.7); font-weight: 500; } .dts-pied-liens { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; font-size: 15px; } .dts-pied-liens a:hover { color: var(--vermillon-clair); } .dts-reseaux { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .dts-reseaux a { border: 1px solid var(--filet-sombre); border-radius: var(--r-pilule); padding: 9px 16px; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; } .dts-reseaux a:hover { border-color: var(--creme); } .dts-copyright { font-size: 13px; color: rgba(245,241,232,.6); margin-top: 16px; } /* ------------------------------------------------------------------ */ /* Fiche produit */ /* ------------------------------------------------------------------ */ .dts-fil { font-size: 14px; color: var(--gris-legende); padding: 20px 48px 0; } .dts-fil ol { display: flex; flex-wrap: wrap; gap: 8px; } /* 12/08/2026 : les barres obliques étaient des

. Un lecteur d'écran annonçait donc « liste de 5 éléments » pour un fil de 3 étapes. Elles sont désormais dessinées par le CSS, qui n'est jamais lu à voix haute. L'espacement reste identique : 8px de gap, la barre, 8px de marge. */ .dts-fil li + li::before { content: "/"; margin-right: 8px; } .dts-fil a:hover { color: var(--encre); text-decoration: underline; } .dts-fil [aria-current="page"] { color: var(--encre); } .dts-produit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; padding: var(--pad-section); } .dts-produit-visuel img { border-radius: var(--r-lg); aspect-ratio: 1; object-fit: cover; width: 100%; } /* ---- Agrandissement du visuel, sur la balise native