` à deux niveaux (cadre .hero-subtitle + intérieur .hero-subtitle-in) : les 3 règles `.hero-in p` (§14 l.545, §17) ne matchent plus le div → aucune interférence. box-shadow léger assumé (enveloppe posée, pas une carte/encart charte). inline-block borne la largeur en desktop ; à 360px le bloc reste centré, liseré net, aucun débordement (vérifié 360/390/414). ============================================================================== */ /* v1.5.18 — RETOUCHE HERO : l'airmail passe de sous-titre-en-flux (sous `.hero-in`) à PETIT RECTANGLE ABSOLU collé bas-centre du conteneur `.hero-img`. Il porte désormais la ligne-titre `

` (l'ancien H1 séparé 40px est supprimé, §14). Style airmail prod CONSERVÉ (liseré diagonal rouge/bleu via padding + repeating-linear-gradient, intérieur papier plein). Différences vs v1.5.16 : DROIT (aucune rotation, contraste avec le sticker penché −2,5°), compact (padding 7/15, largeur = contenu), position absolue bottom:3% (offset parent = `.hero-img`, position:relative). Le sélecteur passe de `.hero-in .hero-subtitle` à `.hero-img .hero-subtitle` (l'élément est maintenant frère de `.hero-in`, pas enfant). ⚠ bottom:3% = ~8px @clamp mini 280px (mobile), ~10px @340px (desktop) : marge px variable mais toujours proche-bord sans toucher (vérifié aux 2 bornes). / .hero-img .hero-subtitle{ position:absolute; left:50%; bottom:3%; transform:translateX(-50%); / DROIT — aucune rotation / z-index:2; padding:6px; / liseré airmail (conservé) / background:repeating-linear-gradient(45deg, #b23a2e 0 10px, #f7f0e0 10px 20px, #2d5f78 20px 30px, #f7f0e0 30px 40px); box-shadow:0 3px 8px rgba(43,36,25,.25); } .hero-img .hero-subtitle-in{ background:#f7f0e0; padding:7px 15px; / compact, serré autour du texte / text-align:center; } .hero-img .hero-subtitle-in .hero-h1{ / ligne 1 = H1 SEO, rendu ~14px serif italique / font:italic 700 14px/1.15 Georgia,'Times New Roman',serif; color:#2b2419; margin:0; max-width:none; letter-spacing:normal; text-shadow:none; white-space:nowrap; } .hero-img .hero-subtitle-pa{ display:block; font:700 9px/1 "Helvetica Neue",Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#2d5f78; margin-top:5px; } / Très petits écrans (≤360px) : la mention PAR AVION est le seul risque de débordement → on resserre son letter-spacing plutôt que de la casser. / @media(max-width:360px){ .hero-img .hero-subtitle-pa{letter-spacing:.13em} } / ============================================================================== §20 — HERO STICKER « stampbox » v1.5.13 (2026-07-09). Append-only, PRIME sur tout ce qui précède. Réf : towd-hero-ajuste.html (état cible). Remplace l'ancien `.hero-badge` (double cadre simulé par `::before`, non remplissable) retiré du §14. Structure DOM réelle à deux éléments (front-page.php) : `.stampbox` > `.stampbox-inner` > `.l1` + `.l2`. Rectangle EXTÉRIEUR = liseré rouge fin + fond papier (le padding 5px laisse voir ce fond papier entre les deux cadres = liseré papier, robuste sur l'aquarelle maintenant que le voile est retiré). Rectangle INTÉRIEUR = rempli rouge plein `--stamp`, deux lignes de texte blanc. Inclinaison PRÉSERVÉE : rotate(-1.6deg) (valeur de l'ancien `.hero-badge`, ≠ −2° du mockup — « toujours penché comme avant »). text-transform:uppercase repris de l'ancien badge (le HTML garde la casse d'origine). ============================================================================== / / v1.5.19 — STICKER plus gros + remonté au sommet du Fuji. Passe de sticker-en-flux (centré ~49% par `.hero-img{align-items:center}` sur `.hero-in`) à RECTANGLE ABSOLU sur `.hero-img` (patron airmail §19). Sélecteurs `.hero-in .stampbox` → `.hero-img .stampbox` OBLIGATOIRE : hors de `.hero-in` les anciens sélecteurs ne matchaient plus (perte du `white-space:nowrap` → titre wrappé). Markup : `.stampbox` déplacé en enfant direct de `.hero-img` (frère de `.hero-in` vide + `.hero-subtitle`). Taille +~20% (l1 13→16, l2 9→11, inner pad 11/20→13/24, liseré 5→6) : rendu 311×89. Position desktop `top:11%` (bas du sticker effleure le sommet ~30%) ; le Fuji se recadre en mobile (sommet ~38%) → override `@media` plus bas (top:9% + taille capée). Rotation −2.5° conservée. z-index:3 (> voile / airmail). / .hero-img .stampbox{ position:absolute; left:50%; top:11%; transform:translateX(-50%) rotate(-2.5deg); / translate d'abord, rotation −2.5° conservée / z-index:3; display:inline-block; border:2px solid var(--stamp); / rectangle EXTÉRIEUR (liseré rouge fin) / background:var(--paper); / fond papier → liseré papier dans le padding / padding:6px; / v1.5.19 : 5 → 6 (liseré proportionnel) / } .hero-img .stampbox-inner{ border:1.5px solid var(--stamp); / rectangle INTÉRIEUR / background:var(--stamp); / rempli rouge plein #b23a2e / padding:13px 24px; / v1.5.19 : 11/20 → 13/24 / text-transform:uppercase; text-align:center; / v1.5.20 : centre le .l2 (le .l1 nowrap fixe la largeur) / } .hero-img .stampbox .l1{color:#fff;font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.13em;white-space:nowrap;line-height:1} / v1.5.19 : 13 → 16 / .hero-img .stampbox .l2{color:#fff;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.13em;margin-top:5px;line-height:1;white-space:nowrap} / v1.5.19 : 9 → 11 / / Mobile ≤600px : le Fuji se recadre (sommet plus bas ~38%) → sticker remonté à top:9% ; taille CAPÉE (14/10, inner 11/18) pour rester compact sans risque de largeur (268<374). / @media(max-width:600px){ .hero-img .stampbox{top:9%} .hero-img .stampbox-inner{padding:11px 18px} .hero-img .stampbox .l1{font-size:14px} .hero-img .stampbox .l2{font-size:10px} } / v1.5.18 — `.hero-in h1` text-shadow retiré (orphelin : plus de H1 dans `.hero-in`). / / ============================================================================== §21 — HERO v1.5.14 (2026-07-09). Append-only, PRIME sur tout ce qui précède. (1) VOILE RÉINTRODUIT ATTÉNUÉ : le voile radial `.hero-in::before` retiré en v1.5.13 (le H1 « se prépare ici. » devenait peu lisible sur le torii) est remis avec la MÉCANIQUE D'ORIGINE inchangée (pseudo-élément, inset:-70px -160px, z-index:-1, ellipse centrée derrière le texte) ; SEULE l'opacité change : pic papier .90 → .20 (charte teinte papier #e7dcc0 = rgba(231,220,192), pas de blanc pur) pour détacher le titre SANS délaver l'aquarelle (raison du retrait v1.5.13). (2) HAUTEUR MOBILE : diagnostic Phase 0 — aucune inflation de `min-height`/padding de base (padding `.hero-in`=40px inchangé depuis le home v3 ; min-height clamp floor 280px non pilotant). Le hero mobile a grandi ~273→336px car le sous-titre est passé d'un paragraphe nu (`margin:0`) au bloc-enveloppe airmail (contenu VALIDÉ, conservé) + une marge `margin-top:22px` ajoutée en v1.5.12. On ne comprime PAS le contenu validé (sticker, H1 2 lignes, étiquette) ; on restaure seulement le VIDE vertical en mobile (padding/marge) vers la proportion compacte d'origine. Scopé ≤600px → desktop (validé v1.5.13) intact. ============================================================================== / / v1.5.16 — FIX visibilité : le voile n'était PAS masqué (diag CDP : z-index:-1 dans le stacking context de `.hero-in`[z:1] peint bien AU-DESSUS de l'image sœur `.hero-art`, test rouge .9 le prouve) — la cause était géométrique : `inset:-70px -160px` étalait le pic .28 au centre d'une ellipse géante hors cadre → wash quasi plat imperceptible. Correction : `inset:0` (couvre la boîte `.hero-in`, centrée sous le titre, max-width 720px en desktop) + gradient RESSERRÉ centré 50% 40% → glow papier perceptible sous le H1, coins aquarelle intacts. Pic maintenu à .28 ; z-index:-1 conservé (fonctionne). / .hero-in::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(62% 48% at 50% 40%, rgba(231,220,192,.28) 0%, rgba(231,220,192,.16) 50%, transparent 80%); } @media (max-width:600px){ .hero-in{padding-top:30px;padding-bottom:30px} / 40/40 → 30/30 : vide mobile restauré / / v1.5.18 : règles `.hero-in h1` / `.hero-in .hero-subtitle` retirées (orphelines — H1 supprimé, airmail sorti de `.hero-in` en absolu §19). / } / ============================================================ §22 — CTA outil : médaillon rond illustré (V2.14) — v1.5.17 Base `.towd-cta-tool` déjà display:flex/align-center (l.820) : on n'ajoute QUE le médaillon (1er enfant) + le shrink responsive. Pas de teinte par silo (design uniforme V2.14). ============================================================ / .towd-cta-toolmedallion{ flex:0 0 auto;width:74px;height:74px; border:2px solid var(--ink);border-radius:50%; background:var(--kraft); display:flex;align-items:center;justify-content:center; overflow:hidden;margin:0; } .towd-cta-toolmedallion img{ width:100%;height:100%;max-height:100%;object-fit:contain;display:block; } @media (max-width:480px){ .towd-cta-toolmedallion{width:60px;height:60px;} .towd-cta-toolmedallion img{width:100%;height:100%;max-height:100%;} } / ========================================================================= §24 — PAGE ARCHIVE « Toutes les pages du carnet » (page-toutes-les-pages.php, v1.5.25). Append-only. Réutilise les composants prod : hero (.hero-img) en variante courte .hero-mini, silostrip/.chip en FILTRE, fiche silo .silo-grid/.card en 2 colonnes, pagination .silo-body .pagination. Couleur par carte via [data-silo]→--silo (mapping officiel §7). Full-bleed scopé body.towd-archive (miroir de body.category §22). Filtre/tri/pagination 100 % query string. ========================================================================= / / ---- Full-bleed scopé (hero + silostrip pleine largeur, comme body.category) ---- / body.towd-archive #page.grid-container{max-width:100%;padding:0} body.towd-archive #content.site-content{padding:0;max-width:100%} body.towd-archive #primary.content-area, body.towd-archive #main.site-main{width:100%;max-width:100%;margin:0;padding:0} body.towd-archive #main.site-main{border:none;background:transparent;box-shadow:none} body.towd-archive .hero-img, body.towd-archive .silostrip{width:100%;max-width:100%;margin:0} / ---- 1. HERO réduit : bande aquarelle courte, sticker recentré (pas de calage Fuji) ---- / .hero-mini{min-height:clamp(190px,24vw,230px)} .hero-mini .stampbox{position:static;transform:rotate(-2.5deg);margin:0} / recentré par le flex de .hero-img (align/justify center) / .hero-mini .stampbox h1.l1{margin:0;padding:0} / .l1 = H1 SEO → neutralise la marge h1 par défaut / @media(max-width:600px){ .hero-mini{min-height:170px} .hero-mini .stampbox{top:auto} } / ---- 2. SILOSTRIP en FILTRE : visible AUSSI en mobile (l'originale est display:none <900px) ---- / .silostrip.carnet-filter{display:block} .carnet-filter .chip.is-active{background:var(--silo,var(--stamp));color:var(--paper)} .carnet-filter .chip.is-active .dot{background:var(--paper)} .carnet-filter .chip--all{border-color:var(--ink)} .carnet-filter .chip--all .dot{background:var(--ink)} .carnet-filter .chip--all.is-active{background:var(--ink);color:var(--paper)} .carnet-filter .chip--all.is-active .dot{background:var(--paper)} @media(max-width:900px){ .silostrip.carnet-filter{display:block} .silostrip.carnet-filter .in{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:14px} .carnet-filter .chip{flex:0 0 auto} } / ---- 3b. Barre tri : total « N pages » (count-stamp réutilisé) + tri ---- / .carnet-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft)} .carnet-toolbar .count-stamp{border:1.5px solid var(--ink);color:var(--ink);padding:3px 12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px;transform:rotate(1deg);background:var(--paper)} .carnet-sort{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap} .carnet-sort .lbl{text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:700;color:var(--ink-soft)} .carnet-sort a{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);padding:4px 12px;background:var(--paper)} .carnet-sort a:hover{background:var(--kraft)} .carnet-sort a.is-active{background:var(--ink);color:var(--paper)} / ---- 3. GRILLE 2 colonnes (surcharge le 3-col de .silo-grid ; carte prod inchangée) ---- / .carnet-grid{grid-template-columns:repeat(2,1fr)} .carnet-grid .card .cmeta{text-transform:none;font-size:11px;letter-spacing:.04em} .carnet-grid .card .cmeta .silo{color:var(--silo,var(--stamp-blue));font-weight:800;letter-spacing:.08em;text-transform:uppercase} @media(max-width:640px){ .carnet-grid{grid-template-columns:1fr} } @media(max-width:520px){ .carnet-toolbar .carnet-sort{margin-left:0} } / ========================================================================= §25 — PAGES OUTILS : gabarit unifié (v1.5.28, 2026-07-12). Append-only, PRIME sur tout ce qui précède. Fuseau / Durée de vol / Bagage cabine : grille 2 col [contenu 1fr | sidebar outils 300px sticky], bandeau image, en-tête widget en aplat silo. Scopé par body.towd-outil (+ --sea/--sun/--forest). Les CSS/JS des widgets restent INTACTS : l'en-tête est recoloré par override scopé (spécificité body-class (0,0,2) > widget (0,0,1), sans !important). ========================================================================= / / ── Grille 2 colonnes ── / .towd-outil-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:42px; align-items:start; max-width:var(--wrap,1120px); margin:0 auto; padding:10px 0 60px; } .towd-outil-main{min-width:0;} / Sidebar sticky : align-self:start empêche l'étirement du cell → sticky effectif ; la colonne s'arrête naturellement avant le footer (fin de la grille). / .towd-outil-aside{ min-width:0; position:sticky; top:24px; align-self:start; } / ── Titre de page ── / .towd-outil-head{margin:0 0 18px;} .towd-outil-title{ font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-weight:700; font-size:2rem;line-height:1.16;color:var(--ink);margin:0; } / ── Bandeau image (Nano Banana), pleine largeur colonne, ~21:9, filet encre ── / .towd-outil-banner{margin:0 0 26px;} .towd-outil-banner img{ display:block;width:100%;height:auto; aspect-ratio:1584 / 672;object-fit:cover; border:1.5px solid var(--ink); } / ── Typo du contenu SEO — combinateur enfant DIRECT : ne touche JAMAIS les internes du widget (ses
/

restent stylés par son propre CSS). ── / .towd-outil-content{color:var(--ink);} .towd-outil-content > p{ font-family:Georgia,'Times New Roman',serif;font-size:1rem;line-height:1.72; color:var(--ink-soft);margin:0 0 1.05em; } .towd-outil-content > p:first-child{ / lede sous H1 / font-size:1.1rem;line-height:1.66;color:var(--ink); } .towd-outil-content > h2{ font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-weight:700; font-size:1.5rem;line-height:1.2;color:var(--ink); margin:1.9em 0 .5em;padding-top:.55em;border-top:1px solid var(--kraft-dk); } .towd-outil-content > h3{ font-family:Georgia,serif;font-weight:700;font-size:1.1rem;color:var(--ink); margin:1.5em 0 .3em; } .towd-outil-content > ul{margin:0 0 1.2em;padding-left:1.15em;} .towd-outil-content > ul li{ font-family:Georgia,serif;font-size:1rem;color:var(--ink-soft);line-height:1.6;margin:.25em 0; } .towd-outil-content > p a, .towd-outil-content > ul a{color:var(--stamp);text-decoration:underline;} .towd-outil-content > p a:hover, .towd-outil-content > ul a:hover{color:var(--ink);} .towd-outil-content > p em{font-style:italic;color:var(--ink-soft);} / ── En-tête du widget → aplat silo plein (override scopé, widget CSS intact) ── / .towd-outil--sea .towd-fz-head{background:var(--sea);} .towd-outil--sea .towd-fz-kick{color:#fff;} .towd-outil--sea .towd-fz-star{filter:brightness(0) invert(1);} / Soleil #e0992f trop clair pour du blanc lisible (~2,3:1) → texte encre, cohérent avec la règle charte « camping (sun) = encre ». Étoile laissée en encre. / .towd-outil--sun .towd-dv-head{background:var(--sun);} .towd-outil--sun .towd-dv-kick{color:var(--ink);} .towd-outil--forest .towd-bc-head{background:var(--forest);} .towd-outil--forest .towd-bc-kicker{color:#fff;} .towd-outil--forest .towd-bc-title{color:#fff;} / ── Panneau « Les outils du carnet » ── / .towd-opanel{ background:var(--paper);border:1.5px solid var(--ink); padding:20px 20px 22px;margin:0 0 22px; } .towd-opanelkick{ display:block;font-family:'Helvetica Neue',Arial,sans-serif; text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:700; color:var(--stamp-blue);margin:0 0 4px; } .towd-opaneltitle{ font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-weight:700; font-size:1.24rem;color:var(--ink);margin:0 0 14px;line-height:1.15; } .towd-otool-list{list-style:none;margin:0 0 16px;padding:0;} .towd-otool{ display:flex;gap:11px;align-items:flex-start; padding:11px 0;border-top:1px solid var(--kraft-dk); } .towd-otool:first-child{border-top:0;padding-top:2px;} .towd-otool[data-accent="sea"]{--oaccent:var(--sea);} .towd-otool[data-accent="sun"]{--oaccent:var(--sun);} .towd-otool[data-accent="forest"]{--oaccent:var(--forest);} .towd-otoolic{ flex:0 0 auto;width:34px;height:34px; border:1.5px solid var(--oaccent);color:var(--oaccent); background:var(--paper);display:flex;align-items:center;justify-content:center; } .towd-otoolic svg{width:19px;height:19px;stroke:currentColor;fill:none;} .towd-otoolb{min-width:0;display:flex;flex-direction:column;gap:1px;} .towd-otoolk{ font-family:'Helvetica Neue',Arial,sans-serif;text-transform:uppercase; letter-spacing:.1em;font-size:.6rem;font-weight:700;color:var(--oaccent); } .towd-otoolname{ font-family:Georgia,serif;font-size:.95rem;font-weight:700;color:var(--ink); line-height:1.25;text-decoration:none; } a.towd-otoolname:hover{color:var(--stamp);text-decoration:underline;} .towd-otool.is-here{opacity:.6;} .towd-otool.is-here .towd-otoolname{color:var(--ink-soft);} .towd-otoolhere{ display:inline-block;font-family:'Helvetica Neue',Arial,sans-serif; font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:var(--stamp);margin-top:3px; } / CTA rouge « Proposer un outil » (→ contact, même formulaire que /outils/) / .towd-opanelcta{ display:block;text-align:center;background:var(--stamp);color:#fff; font-family:'Helvetica Neue',Arial,sans-serif;text-transform:uppercase; letter-spacing:.08em;font-size:.72rem;font-weight:700; padding:11px 14px;text-decoration:none;border:1.5px solid var(--ink); } .towd-opanelcta:hover{background:var(--ink);color:#fff;} / ── Bloc « À lire dans le carnet » ── / .towd-oread{background:var(--paper);border:1.5px solid var(--ink);padding:18px 18px 20px;} .towd-oreadtitle{ font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-weight:700; font-size:1.1rem;color:var(--ink);margin:0 0 13px; } .towd-oreadlist{display:flex;flex-direction:column;gap:13px;} .towd-oreadcard{display:flex;gap:11px;align-items:center;text-decoration:none;} .towd-oreadimg{ flex:0 0 auto;width:66px;height:50px;overflow:hidden; border:1px solid var(--ink);background:var(--kraft); } .towd-oreadimg img{width:100%;height:100%;object-fit:cover;display:block;} .towd-oreadph{display:block;width:100%;height:100%; background:linear-gradient(135deg,var(--kraft),var(--kraft-dk));} .towd-oreadb{min-width:0;display:flex;flex-direction:column;gap:2px;} .towd-oreadk{ font-family:'Helvetica Neue',Arial,sans-serif;text-transform:uppercase; letter-spacing:.08em;font-size:.58rem;font-weight:700;color:var(--stamp-blue); } .towd-oreadh{font-family:Georgia,serif;font-size:.86rem;line-height:1.26;color:var(--ink);} .towd-oreadcard:hover .towd-oreadh{color:var(--stamp);text-decoration:underline;} / ── Responsive : la sidebar passe sous le contenu (empilement), sticky off ── / @media (max-width:900px){ .towd-outil-layout{grid-template-columns:1fr;gap:34px;} .towd-outil-aside{position:static;top:auto;} } @media (max-width:600px){ .towd-outil-title{font-size:1.62rem;} .towd-outil-content > h2{font-size:1.3rem;} .towd-outil-content > p:first-child{font-size:1.05rem;} } / ---- v1.5.30 (2026-07-12) — HERO SILO CAMPING recadrage Y (override §PJ1/PJ2 l.1957). Remonte le cadrage 50%→68% pour révéler davantage la tente (bas de la bannière). Append-only ; override par ordre de cascade. ---- / .silo-hero[data-silo="camping"]{background-position:center 68%,center} / ---- v1.5.30 (2026-07-12) — HERO SILO CAMPING recadrage Y (override §PJ1/PJ2 l.1957). Remonte le cadrage 50%->62% pour reveler davantage la tente (bas de la banniere). Append-only ; override par ordre de cascade. ---- / .silo-hero[data-silo="camping"]{background-position:center 62%,center} / ---- v1.5.31 (2026-07-12) — PAGE CONTACT permutation fonds (override l.1208/1213). Fond de page .contact-wrap kraft->paper (ne se confond plus avec le .contact-hero kraft) ; carte .postcard paper->kraft (ressort sur le fond clair, cohérente avec l en-tete). Append-only ; override par ordre de cascade. ---- / .contact-wrap{background:var(--paper)} .postcard{background:var(--kraft)} / ---- v1.5.32 (2026-07-12) — PAGE CONTACT carte postale eclaircie (override l.1213/v1.5.31). .postcard kraft plein -> ton intermediaire kraft/paper (#ede2c8) : moins soutenu, reste distinct du fond .contact-wrap paper. Append-only. ---- / .postcard{background:#ede2c8} / ========================================================================= §26 — REFONTE BLOC OUTILS (v1.5.33, 2026-07-13). Append-only, PRIME sur §25. (1) Carte « fiche article » enveloppant la colonne gauche (pages outils + pages compagnies). (2) Compactage des espacements §25. (3) Volet compagnies (.towd-ocomp) en colonne droite, esprit .towd-opanel. (4) Recolor silo de l'en-tête widget unifié (nouvelles classes titre/kicker). Colonne droite existante (panneau outils / à lire) INTACTE. ========================================================================= / / ── (1) Carte fiche article : titre + bandeau + contenu + widget dans un seul rectangle papier bordé encre. Zéro radius, zéro ombre (charte v3). ── / .towd-outil-card{ background:var(--paper); border:1.5px solid var(--ink); padding:clamp(22px,3vw,40px); } / ── (2) Compactage : la carte porte désormais la respiration, on resserre la grille et les marges internes du contenu. ── / .towd-outil-layout{gap:34px;padding:10px 0 44px;} .towd-outil-head{margin:0 0 14px;} .towd-outil-banner{margin:0 0 20px;} .towd-outil-content > h2{margin:1.4em 0 .45em;} .towd-outil-content > p:first-child{margin-bottom:1.05em;} / Widget centré dans la carte (les widgets à largeur bridée restent au milieu). / .towd-outil-card .towd-fz, .towd-outil-card .towd-dv, .towd-outil-card .towd-bc{margin-left:auto;margin-right:auto;} / ── (3) Volet compagnies — colonne droite, décalqué .towd-opanel. ── / .towd-ocomp{ background:var(--paper);border:1.5px solid var(--ink); padding:18px 18px 20px;margin:0 0 22px; } .towd-ocompkick{ display:block;font-family:'Helvetica Neue',Arial,sans-serif; text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:700; color:var(--stamp-blue);margin:0 0 3px; } .towd-ocomptitle{ font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-weight:700; font-size:1.14rem;color:var(--ink);margin:0 0 12px;line-height:1.15; } .towd-ocomplist{list-style:none;margin:0;padding:0;} .towd-ocompitem{padding:9px 0;border-top:1px solid var(--kraft-dk);} .towd-ocompitem:first-child{border-top:0;padding-top:2px;} .towd-ocompname{ font-family:Georgia,serif;font-size:.95rem;font-weight:700;color:var(--ink); text-decoration:none;line-height:1.25; } a.towd-ocompname:hover{color:var(--stamp);text-decoration:underline;} .towd-ocompitem.is-here{opacity:.6;} .towd-ocompitem.is-here .towd-ocompname{color:var(--ink-soft);} .towd-ocomphere{ display:block;font-family:'Helvetica Neue',Arial,sans-serif; font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:var(--stamp);margin-top:3px; } / ── (4) En-tête widget unifié (modèle bagage) : recolor silo des NOUVELLES classes de Fuseau (sea) et Durée (sun). Le fond de cartouche reste posé par les règles §25 (.towd-fz-head/.towd-dv-head) ; on ne recolore ici que les kicker + titre nouvellement introduits. Sun (#e0992f) trop clair → texte encre (règle charte camping=encre), Sea → texte blanc. ── / .towd-outil--sea .towd-fz-kicker, .towd-outil--sea .towd-fz-title{color:#fff;} .towd-outil--sun .towd-dv-kicker, .towd-outil--sun .towd-dv-title{color:var(--ink);} / Responsive : la carte reste confortable, la grille passe déjà en 1 col (§25). / @media (max-width:600px){ .towd-outil-card{padding:18px 16px 22px;} } / ========================================================================= §27 — RETOUCHES OUTILS (v1.5.34, 2026-07-13). Append-only, PRIME sur §26/§25. Fixes visuels post-refonte + affordance volet. Le coin valise du header bagage vit dans bagage-cabine.css (.towd-bc-corner). Scopé body.towd-outil. ========================================================================= / / (1) Bouton d'inversion des villes/aéroports : glyphe ⇄ centré (manquait le flex). / .towd-fz-swap, .towd-dv-swap{display:flex;align-items:center;justify-content:center;line-height:1;} / (2) Puce ● bleue devant la note « calculé en direct » retirée (c'est un caractère dans un span, pas un list-style). Le texte de la note est conservé. / .towd-fz-note-lock, .towd-dv-note-lock{display:none;} / (3+4) Médaillons du header agrandis (54→58) pour la présence, + filtre contraste sur la valise (asset clair/creux, peu lisible à petite taille). Scopé body-class (0,2,0) > widget (0,1,0) → gagne sans !important. / .towd-outil .towd-fz-headstamp, .towd-outil .towd-dv-headstamp, .towd-outil .towd-bc-headstamp{width:58px;height:58px;} .towd-outil .towd-fz-headstamp img, .towd-outil .towd-dv-headstamp img, .towd-outil .towd-bc-headstamp img{width:50px;height:50px;} .towd-outil .towd-bc-headstamp img{filter:contrast(1.35) brightness(.86);} / (5) Volet « Compagnies populaires » : rangée entière cliquable + chevron + hover (invite au clic). Charte v3 : 0 radius, 0 ombre douce. Réécrit la présentation §26 des items (structure .towd-ocomplink introduite en v1.5.34). / .towd-ocompitem{padding:0;border-top:1px solid var(--kraft-dk);} .towd-ocompitem:first-child{border-top:0;} .towd-ocomplink{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 8px 11px 10px;text-decoration:none; border-left:3px solid transparent; } .towd-ocomplink:hover{background:var(--kraft);border-left-color:var(--stamp);} .towd-ocompname{ font-family:Georgia,serif;font-size:.95rem;font-weight:700;color:var(--ink); line-height:1.25; } a.towd-ocomplink:hover .towd-ocompname{color:var(--stamp);} .towd-ocompchev{ flex:0 0 auto;font-family:Georgia,serif;font-size:1.2rem;line-height:1; color:var(--stamp); } .towd-ocompitem.is-here .towd-ocomplink{opacity:.6;flex-direction:column;align-items:flex-start;gap:1px;cursor:default;} .towd-ocompitem.is-here .towd-ocompname{color:var(--ink-soft);} / (6) Bloc affilié valises dormant masqué (markup + slot conservés → réactivable Vague 3 en retirant cette règle). / .towd-bc-affil{display:none;} / (7) Pages compagnies : lien retour pilier « ← Toutes les compagnies » rendu en bouton tampon centré sous le tableau. Cible l'ancre exacte du contenu. / .towd-compagnie .towd-outil-content a[href="/outils/bagage-cabine/"]{ display:block;width:max-content;max-width:100%;margin:2em auto; background:var(--stamp);color:#fff; font-family:'Helvetica Neue',Arial,sans-serif;font-size:.78rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;text-align:center; padding:12px 22px;border:1.5px solid var(--ink);text-decoration:none; } .towd-compagnie .towd-outil-content a[href="/outils/bagage-cabine/"]:hover{ background:var(--ink);color:#fff; } / ---- v1.5.35 (2026-07-12) — ENCART CHECKLIST refonte "bordereau perforé + tampon" (§28, override du §17 l.918-922). Le markup généré (aside.towd-callout.towd-checklist > p.label > span.icon + ul.list) est INCHANGÉ ; tout passe en CSS → rétroactif sur tous les articles. Signature : perforation bord gauche + cases tracées main cochées rouge + tampon "Prêt" (span.icon recyclé en médaillon SVG). Append-only. ---- / .towd-checklist{ background:var(--paper); border:1.5px solid var(--ink); box-shadow:none; padding:22px 26px 24px 40px; position:relative; } .towd-checklist::before{ content:"";position:absolute;left:-6px;top:14px;bottom:14px;width:12px; background-image:radial-gradient(circle 4px at 6px 6px,#d8c9a8 0 4px,transparent 4.5px); background-size:12px 20px;background-repeat:repeat-y; } .towd-checklist .towd-calloutlabel{align-items:center;gap:14px} .towd-checklist .towd-callouticon{ width:76px;height:52px;flex:none;transform:rotate(-8deg); background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2076%2052'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'70'%20height%3D'46'%20rx%3D'6'%20fill%3D'none'%20stroke%3D'%23b23a2e'%20stroke-width%3D'2.6'%2F%3E%3Ctext%20x%3D'38'%20y%3D'26'%20text-anchor%3D'middle'%20font-family%3D'Helvetica%2CArial%2Csans-serif'%20font-size%3D'15'%20font-weight%3D'800'%20letter-spacing%3D'1.5'%20fill%3D'%23b23a2e'%3EPR%C3%8AT%3C%2Ftext%3E%3Ctext%20x%3D'38'%20y%3D'39'%20text-anchor%3D'middle'%20font-family%3D'Helvetica%2CArial%2Csans-serif'%20font-size%3D'6.5'%20font-weight%3D'700'%20letter-spacing%3D'1.8'%20fill%3D'%23b23a2e'%3ETOWD%20%C2%B7%20SAC%3C%2Ftext%3E%3C%2Fsvg%3E"); background-repeat:no-repeat;background-position:center;background-size:contain; opacity:.9; } .towd-checklistlist{list-style:none;margin:0;padding:0} .towd-checklistlist li{ position:relative;padding:0 0 0 30px;margin:0; font-family:var(--serif);font-size:1rem;line-height:1;height:36px; display:flex;align-items:center;border-bottom:1px solid var(--kraft-dk); } .towd-checklistlist li:first-child{border-top:1px solid var(--kraft-dk)} .towd-checklistlist li:last-child{margin:0} .towd-checklistlist li::before{ content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%); width:16px;height:16px;background-repeat:no-repeat;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2018%2018'%3E%3Cpath%20d%3D'M2.5%2C2.2%20L15.6%2C1.8%20L15.4%2C15.7%20L2.2%2C15.5%20Z'%20fill%3D'none'%20stroke%3D'%232b2419'%20stroke-width%3D'1.4'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M4.5%2C9%20L7.8%2C12.6%20L14%2C4.2'%20fill%3D'none'%20stroke%3D'%23b23a2e'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E"); } / ========================================================================= §29 — v1.5.36 (2026-07-18) — ENCART COMPARE refonte « billet / titre de transport perforé » (override du §9 l.925-932 ; dernier encart resté v2). Markup pipeline (aside.towd-compare > p.label + table thead/tbody) INCHANGÉ ; tout passe en CSS → rétroactif sur tous les comparatifs. Annule le header vert --forest + l'icône verte deux-rectangles v2, supprime le zébrage. Signature : bord perforé gauche (repris §28) + en-têtes options serif italique + label rouge tampon (picto billet) + déchirure pointillée entre les 2 coupons. Header en --ink (aucun --forest). Append-only, PRIME sur §9. ========================================================================= / .towd-compare{padding-left:16px} .towd-compare::before{ content:"";position:absolute;left:-6px;top:14px;bottom:14px;width:12px; background-image:radial-gradient(circle 4px at 6px 6px,var(--page-bg) 0 4px,transparent 4.5px); background-size:12px 20px;background-repeat:repeat-y; } .towd-compare .towd-calloutlabel{color:var(--stamp);border-bottom:1.5px dashed var(--kraft-dk)} .towd-compare .towd-callouticon{width:22px;height:14px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2022%2014'%3E%3Cpath%20d='M1.5%2C2%20H20.5%20V5%20a1.6%2C1.6%200%200%200%200%2C4%20V12%20H1.5%20V9%20a1.6%2C1.6%200%200%200%200%2C-4%20Z'%20fill='none'%20stroke='%23b23a2e'%20stroke-width='1.3'%2F%3E%3Cline%20x1='11'%20y1='2.6'%20x2='11'%20y2='11.4'%20stroke='%23b23a2e'%20stroke-width='1.1'%20stroke-dasharray='1.4%201.4'%2F%3E%3C%2Fsvg%3E")} / en-têtes options = mention imprimée du billet : serif italique, header --ink / .towd-compare thead th{background:transparent;border-color:var(--ink);font-family:var(--serif-title);font-style:italic;font-weight:700;font-size:1rem;color:var(--ink);text-align:center;padding:12px 14px;border-bottom:2px solid var(--ink)} .towd-compare thead th:first-child{border:none} / libellés de champ (Prix/Durée/Arrivée) = intitulés de billet, petites capitales / .towd-compare tbody th{font-family:var(--sans);font-weight:700;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);border-color:var(--kraft-dk);border-left:none;background:var(--paper)} .towd-compare tbody td{font-family:var(--serif);font-size:1rem;color:var(--ink);text-align:center;border-color:var(--kraft-dk)} .towd-compare tbody td:last-child{border-right:none} / déchirure : filet pointillé vertical entre les 2 coupons / .towd-compare thead th:nth-child(2), .towd-compare tbody td:nth-child(2){border-right:1.5px dashed var(--kraft-dk)} / dernière ligne sans filet bas + suppression du zébrage v2 / .towd-compare tbody tr:last-child th, .towd-compare tbody tr:last-child td{border-bottom:none} .towd-compare tbody tr:nth-child(even){background:transparent} / mobile : 3 colonnes tenues, casse 390px, libellés FR non écrasés / @media(max-width:430px){ .towd-compare th,.towd-compare td{padding:8px;font-size:.8rem} .towd-compare thead th{font-size:.86rem;white-space:normal} .towd-compare tbody th{font-size:.6rem;letter-spacing:.05em} } @media(max-width:390px){ .towd-compare th,.towd-compare td{padding:7px 6px;font-size:.75rem} .towd-compare .towd-callout__label{padding:11px 12px} .towd-compare tbody th{font-size:.58rem} } / ========================================================================= §30 — v1.5.37 (2026-07-27) — CRÉDIT D'ATTRIBUTION IMAGE. Append-only. Rendu par functions.php (towd_img_credit_html), deux emplacements : .towd-img-credit--featured → , sous la featured de l'article .towd-img-credit--inline →
, dans les figures .article-image N'apparaît QUE si _towd_img_license exige l'attribution (CC BY , CC BY-SA ). Charte v3 : Helvetica ~11,5 px, --ink-soft, aligné à droite, liens --stamp sans soulignement permanent, zéro border-radius, zéro box-shadow. Le plafond 480 px des infographies (§ « Infographies 4:5 ») est préservé : le figcaption vit DANS la figure, donc sous le même max-width. ========================================================================= / .towd-img-credit { display: block; margin-top: 6px; font-family: var(--sans); font-size: .72rem; line-height: 1.45; letter-spacing: .01em; color: var(--ink-soft); text-align: right; font-style: normal; background: none; border: 0; border-radius: 0; box-shadow: none; } .towd-img-credit a { color: var(--stamp); text-decoration: none; border-bottom: 1px solid transparent; } .towd-img-credit a:hover, .towd-img-credit a:focus { border-bottom-color: var(--stamp); } / Featured : le suit l' dans .featured-image, il doit passer en bloc. / .featured-image .towd-img-credit--featured { margin-top: 6px; } / Figures pipeline : neutralise un éventuel centrage de légende hérité de GP. / .entry-content figure.article-image > figcaption.towd-img-credit--inline { margin-top: 6px; text-align: right; font-size: .72rem; color: var(--ink-soft); } @media (max-width: 480px) { .towd-img-credit { font-size: .68rem; } } / ========================================================================= §31 — v1.5.38 (2026-07-27) — CRÉDIT IMAGE : garantie « une seule ligne ». Append-only, PRIME sur §30. Premier rideau (functions.php) : le titre de l'œuvre est retiré du format, qui devient « Photo : {auteur} · {licence} » — court par construction. Second rideau (ici) : même un nom d'auteur anormalement long ne doit jamais déborder de la largeur de l'image. nowrap + overflow caché sur le conteneur. text-align:right conservé du §30. Note : l'ellipse n'est PAS utilisée comme remède au titre long (elle ne garantit pas ce qui saute et pourrait manger la licence) ; elle n'est ici qu'un dernier recours cosmétique sur le seul nom d'auteur. ========================================================================= / .towd-img-credit { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } / Le conteneur de la featured borne la ligne sur la largeur réelle de l'image. / .featured-image .towd-img-credit--featured { display: block; max-width: 100%; } .entry-content figure.article-image > figcaption.towd-img-credit--inline { max-width: 100%; } / ========================================================================= §32 — v1.5.39 (2026-07-29) — IMAGES TRÈS ALLONGÉES : PLANCHER DE HAUTEUR D'AFFICHAGE. Append-only, arrive en dernier → prime à spécificité égale. PROBLÈME. Wikimedia Commons sert régulièrement des panoramiques (mesurés : 1920×527 = 3,64:1 et 1920×622 = 3,09:1). En featured pleine colonne ils rendent une bande de 202 px de haut en desktop et 89 px en mobile : le sujet n'est plus lisible. Le corpus towd plafonne sinon à 1,79:1 (standard pipeline 1376×768) — la bande de ratios ]1,79 ; 3,09[ est vide. PRINCIPE. On ne teste PAS le ratio (le CSS ne sait pas le faire) : on pose un PLANCHER DE HAUTEUR D'AFFICHAGE. Le défaut d'un panoramique est d'être trop COURT, pas trop large — un min-height ne s'active donc que sous le plancher, c'est-à-dire exactement sur les trop allongées, et reste strictement no-op sur tout le reste. La sélectivité est intrinsèque : aucune liste de classes à maintenir. Le fichier n'est JAMAIS touché — cadrage à l'écran uniquement, donc pas d'œuvre dérivée sur les CC BY-SA, et _towd_img_modified reste à 0 à juste titre (le crédit n'affiche pas « · recadrée »). SEUILS EFFECTIFS. Colonnes mesurées : 736 px desktop, 326 px mobile. desktop min-height 300px → se déclenche au-delà du ratio 2,45 mobile min-height 160px → se déclenche au-delà du ratio 2,04 Le plancher mobile reste sous les 182 px du gabarit standard 1,79 : marge mince mais mesurée, le standard n'est jamais rogné. GARDE [srcset]. Sans elle, une image plus étroite que la colonne (200 px de côté) serait étirée à 300 px de haut puis recadrée en upscale. WordPress ne génère pas de srcset sous 300 px de large : l'attribut sert donc de garde « image assez grande pour remplir la colonne ». Garde partielle et assumée — elle ferme le cas dégénéré, pas un hypothétique 500×140. Un test exact sur la largeur intrinsèque n'est pas exprimable en CSS. Les seuls extensions actives (GenerateBlocks, Rank Math) ne touchent pas au srcset ; s'il venait à disparaître globalement, la perte des variantes responsive serait un symptôme bien plus visible que l'extinction de cette règle. HORS PORTÉE PAR CONSTRUCTION (vérifié, inchangé au pixel) : · infographies 4:5 — exclues par :not(--infographic) ET par géométrie (portrait, plus hautes que le plancher) ; leur plafond 480 px est intact ; · bandeau outil 21:9 (.towd-outil-banner) et médaillons :::tool — hors des deux sélecteurs ; · vignettes home / silo / « à la une » / articles liés — .featured-image n'existe que sur l'article seul, et ces vignettes cadrent déjà par aspect-ratio + object-fit:cover ; · crédit d'attribution (§30/§31) — le /
est un FRÈRE de l', jamais atteint : il reste sous l'image, sur une ligne, à droite. Charte v3 : zéro border-radius, zéro box-shadow. Le border 2px --ink des images de corps suit la boîte recadrée. ========================================================================= / .featured-image img.wp-post-image[srcset], .entry-content figure.article-image:not(.article-image--infographic) img[srcset] { min-height: 300px; object-fit: cover; object-position: center; } @media (max-width: 768px) { .featured-image img.wp-post-image[srcset], .entry-content figure.article-image:not(.article-image--infographic) img[srcset] { min-height: 160px; } } / RÉSERVE — ancrage du cadrage, RÉDIGÉE ET NON POSÉE (arbitrage 28/07 : option a, centrage accepté). object-position:center est aveugle au sujet : si un panoramique réel se fait couper l'essentiel, décommenter et poser la classe sur la
(interne) ou sur .featured-image (featured). Ne pas activer par anticipation — une classe non utilisée est une règle non contrôlée. .towd-img-anchor--left img { object-position: left center; } .towd-img-anchor--right img { object-position: right center; } .towd-img-anchor--top img { object-position: center top; } / / ========================================================================= §33 — v1.5.42 (2026-07-29) — LOT PRÉ-LEVÉE DU 503. Append-only, arrive en dernier → prime à spécificité égale. Source : rapport-audit-desktop-mobile.md du 29/07, §7 (arbitrage). Cinq points : A4, A3, A1, B2, B1. Rien ici ne modifie une règle antérieure en place : tout est ajouté en fin de fichier. Les lignes d'origine citées (789, 1207, 1341-1342, 1472-1474) restent physiquement intactes ; elles sont surchargées, pas réécrites. ========================================================================= / / ---- A4 — CHAMPS DE SAISIE À 16 px MINIMUM ------------------------------- Sous 16 px, Safari iOS zoome à la prise de focus et le visiteur doit dézoomer entre chaque champ. Seul le formulaire de contact était concerné : mesuré sur 81 champs de saisie du site, 4 étaient sous le seuil (les 3 champs réels + le pot de miel), tous à 15 px via `.pc-left input,.pc-left textarea` (l.789). Les trois calculateurs sont DÉJÀ au-dessus (fz-input 19,2 px, dv-input 18,4 px, bc-select 16 px, dv-hour 24-30,4 px) et ne sont pas touchés — leur largeur est contrainte, y toucher aurait été le seul vrai risque de casse. Les champs de recherche (GeneratePress, 17 px) étaient déjà conformes. / .pc-left input, .pc-left textarea { font-size: 16px; } / ---- A3 — L'ILLUSTRATION DÉCORATIVE NE BARRE PLUS LE TITRE (≤ 430 px) ---- Sous 400 px le titre du bandeau passe sur deux lignes et court sous l'avion (ou la valise) posé en absolu : le fuselage traversait « entre » dans « Décalage horaire entre deux villes ». Pourquoi masquer et non réduire — c'est mesuré, pas supposé. Le recouvrement entre l'illustration et les rects de ligne du titre a été relevé sur trois jeux de valeurs : 62 px à l'état live, 41 px à 78 px de large, 28 px à 70 px. Il ne tombe jamais à zéro : le bandeau ne fait que 93 px de haut à cette largeur et le titre occupe toute la colonne, la géométrie ne laisse pas de place. Passer l'illustration DERRIÈRE la bande (z-index) rend exactement la même image — la bande est opaque, l'avion disparaît entièrement — tout en conservant le débordement. Le masquage sous seuil est donc la seule des trois options de la mission qui atteigne le résultat. Effet de bord assumé et vérifié : ferme aussi C3 (débordement de 3 à 7 px absorbé par overflow-x:hidden — le document passait à 397/393 px pour une fenêtre de 390). Il n'était pas visé. Les illustrations restent intactes à 431 px et au-delà : à 768 et 1440 le widget fait 640 px fixes, le titre tient sur une ligne et passe au large. / @media (max-width: 430px) { .towd-fz-plane, .towd-dv-plane, .towd-bc-corner { display: none; } } / ---- A1 — « À LA UNE » : LES DEUX RANGÉES AU MÊME TRAITEMENT -------------- `.une .u-sm .uimg` était figée à 104 px (l.1207) quand les grandes sont passées à 200 px (l.1315, dont le commentaire assume « les 3 petites restent à 104px »). Une hauteur en pixels ne suit pas la largeur de la carte : à 768 px la grille passe en une colonne, la carte fait 668 px de large et l'image reste à 104 → bandeau de 6,42:1, sujet détruit (la tête du grimpeur de la via ferrata sortait du cadre). Correction : les petites prennent la hauteur des grandes. Les grandes ne bougent pas d'un pixel à aucune largeur — la valeur 200 px est celle qui est déjà en vigueur, réécrite ici uniquement pour rendre l'intention lisible. Ratios obtenus / avant : 1440 petites 2,00:1 (3,85) grandes 3,06:1 (inchangé) 768 petites 3,34:1 (6,42) grandes 3,34:1 (inchangé) 390 petites 1,67:1 (3,21) grandes 1,67:1 (inchangé) Un aspect-ratio uniforme (16/7 ou 16/9) a été mesuré aussi : il aplatit les GRANDES cartes à 390 px (1,67 → 2,29) — régression — et rallonge la page de 1 166 px à 768. Écarté. / .une .u-big .uimg, .une .u-sm .uimg { height: 200px; } / ---- B2 — LISIBILITÉ DU TEXTE DES HEROS SILO ----------------------------- Texte crème sur aquarelle claire à marges crème, sur les six rubriques. Mesure au pire pixel du fond réellement sous les glyphes (p98 de luminance, pas la moyenne de bande) : 36 mesures sur 36 sous le seuil de 4,5, de 1,46 à 3,60. CE BLOC NE S'EMPILE PAS SUR LES PRÉCÉDENTS, IL LES REMPLACE. Le fichier portait déjà DEUX tentatives sur ce même défaut : · §14.19 item 9 (l.1341-1342) — voile bas .55 → .66, hauteur 36 % → 42 %, double text-shadow sur le résumé ; · item 3 (l.1472-1474) — voile haut .42 → .52, text-shadow à quatre couches sur le fil d'Ariane et le résumé. Toutes deux renforcent un dégradé qui s'éteint précisément là où le texte se trouve, et une ombre portée que WCAG ne compte pas. Une troisième couche du même genre aurait échoué de la même façon. Les `text-shadow` de ces deux lots sont donc explicitement annulés ci-dessous (`text-shadow:none`) : le fond est désormais porté par le texte lui-même, l'ombre n'a plus d'objet. Le voile plein sur toute la bannière (§14.16b) a aussi été mesuré : il dégage les 36 mesures mais assombrit l'aquarelle entière à 390 px, où le hero ne fait que 230 px de haut et où les deux bandes se rejoignent. Écarté au titre de la contrainte « ne pas dénaturer l'aquarelle ». Résultat : 0 mesure sur 36 sous le seuil, de 6,94 à 9,49. L'aquarelle est intégralement conservée, y compris à 390 px. / .silo-hero .breadcrumb { width: max-content; max-width: calc(100% - 2 clamp(16px, 4vw, 44px)); /* aligne le chip sur le bord gauche du cartouche, à toutes les largeurs / margin-left: calc(max(0px, 100% - var(--wrap)) / 2 + clamp(16px, 4vw, 44px)); margin-right: 0; padding: 5px 12px; background: rgba(43, 36, 25, .74); border: 1px solid rgba(43, 36, 25, .55); text-shadow: none; } .silo-hero .inner p { padding: 7px 12px; background: rgba(43, 36, 25, .74); border: 1px solid rgba(43, 36, 25, .55); text-shadow: none; } / ---- B1 — GABARITS 404 ET RECHERCHE -------------------------------------- Le thème enfant ne fournissait ni search.php ni 404.php : les trois vues tombaient sur GeneratePress avec la zone de widgets sidebar-1 jamais personnalisée. Les gabarits livrés reprennent les composants existants (.silo-body, .silo-frame, .silo-grid, .card, .silo-tools, [towd_silo_stamps]) ; il ne reste ici que la mise en pleine largeur, calquée sur body.category, et le formulaire de recherche. / body.error404 #content.site-content, body.search #content.site-content { padding: 0; max-width: 100%; } body.error404 #primary.content-area, body.error404 #main.site-main, body.search #primary.content-area, body.search #main.site-main { width: 100%; max-width: 100%; margin: 0; padding: 0; } body.error404 #main.site-main, body.search #main.site-main { border: none; background: transparent; box-shadow: none; } / Tête de page, registre charte : surtitre tampon, titre Baskerville italique, chapô en encre douce. Vit DANS le .silo-frame (carte papier, filet encre). / .towd-pageheadkick { display: block; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--stamp-blue); margin: 0 0 8px; } .towd-pageheadtitle { font-family: var(--serif-title); font-style: italic; font-size: clamp(25px, 3.6vw, 36px); line-height: 1.14; margin: 0 0 12px; color: var(--ink); } .towd-pagehead__lead { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 62ch; } / Formulaire de recherche — champ à 16 px (A4 : aucun champ neuf sous le seuil). / .towd-search { display: flex; margin: 20px 0 4px; max-width: 520px; } .towd-search input[type="search"] { flex: 1 1 auto; min-width: 0; font-family: var(--sans); font-size: 16px; padding: 11px 14px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-right: 0; } .towd-search button { font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 11px 20px; color: var(--paper); background: var(--stamp); border: 2px solid var(--ink); cursor: pointer; } .towd-search button:hover { background: var(--ink); } .towd-sect-title { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 26px 0 2px; } / ---- B1 (suite) — PAGINATION DES RÉSULTATS ------------------------------- Découverte en contrôlant le gabarit livré : la règle « pagination carnet (carrés encre) » des l.726-729 vise `.silo-body .pagination`, or `the_posts_pagination()` ne rend ici QUE `
` — le conteneur `
` attendu n'est pas émis dans ce contexte. La règle n'a donc jamais pu s'appliquer ; elle est restée invisible parce qu'aucun silo n'atteint le seuil de pagination (7 pages au maximum pour 10 par page). La recherche, elle, pagine dès 11 résultats. On vise donc le conteneur réellement produit, sans toucher aux l.726-729. / .silo-body .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; } .silo-body .nav-links .page-numbers { min-width: 36px; height: 36px; margin: 0; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 13px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); text-decoration: none; } .silo-body .nav-links .page-numbers.current { color: var(--paper); background: var(--ink); } .silo-body .nav-links .page-numbers.dots { border: none; background: transparent; } / ========================================================================= §33 — v1.5.43 (2026-07-30) — ENCART CHECKLIST : la hauteur suit le contenu. Override du §28 (v1.5.35, l.2152-2181), append-only, ne touche QUE le checklist. Aucun autre type d'encart n'est vise ni atteint. Defaut corrige : le §28 posait `height:36px` (hauteur FIXE, pas un plancher) avec `line-height:1` et `align-items:center`. Un libelle FR de 3 lignes fait 48px, deborde de 12px repartis en haut ET en bas, et vient peindre par dessus les elements voisins. Mesure du 30/07 : casse a 460px et en dessous, tient a partir de 470px ; 10 des 21 elements publies debordaient a 390px, sur 4 des 5 pages porteuses. Le rythme des filets (registre carnet) n'est pas supprime : il devient un PAS MINIMAL de 36px que le contenu peut depasser, au lieu d'un gabarit dans lequel le contenu doit rentrer. Un element d'une seule ligne fait toujours exactement 36px, premiere rangee comprise. Invariance : `line-height` est explicite, la hauteur de ligne ne depend donc pas des metriques de la fonte servie. Un visiteur sans Georgia wrappe a une autre longueur, mais la boite suit dans tous les cas. Aucun plafond de longueur n'est pose cote producteur : calibre sur Georgia, il serait faux ailleurs. Geometrie, a 16px de font-size et box-sizing:border-box : ligne = 1.45em = 23.2px rangee courante (1 filet bas) : padding = (36 - 1 - 1.45em) / 2 = 5.9px haut et bas 1 ligne = 5.9 + 23.2 + 5.9 + 1 = 36.0px exactement premiere rangee (filet haut ET bas, cf. §28 :first-child) : padding = (36 - 2 - 1.45em) / 2 = 5.4px haut et bas 1 ligne = 5.4 + 23.2 + 5.4 + 1 + 1 = 36.0px exactement 2 lignes = la boite grandit (59.2px), c'est l'objet du correctif La case a cocher est alignee sur la PREMIERE ligne, jamais centree sur le bloc : une case designe le debut de l'element, et l'oeil descend la colonne en attendant un ancrage regulier. Son `top` se simplifie, les termes en `em` s'annulant, en (pas - filets - 16px) / 2 : il reste juste quelle que soit la taille de police. ========================================================================= */ .towd-checklistlist li{ --towd-chk-pas:36px; height:auto; min-height:var(--towd-chk-pas); line-height:1.45; padding-top:calc((var(--towd-chk-pas) - 1px - 1.45em) / 2); padding-bottom:calc((var(--towd-chk-pas) - 1px - 1.45em) / 2); align-items:flex-start; } .towd-checklistlist li:first-child{ padding-top:calc((var(--towd-chk-pas) - 2px - 1.45em) / 2); padding-bottom:calc((var(--towd-chk-pas) - 2px - 1.45em) / 2); } .towd-checklistlist li::before{ top:calc((var(--towd-chk-pas) - 1px - 16px) / 2); transform:none; } .towd-checklistlist li:first-child::before{ top:calc((var(--towd-chk-pas) - 2px - 16px) / 2); }