/* ══════════════════════════════════════════════════════════════════════════ tigrebois.fr — layout.css Structure du site : squelette de page, lien d'évitement, header collant, navigation (barre puis panneau plein écran), sections, conteneurs, typographie de section, grilles de base et pied de page. Dépend de tokens.css et base.css, chargés AVANT cette feuille. Mobile d'abord. Points de rupture : 480 · 768 · 900 (nav) · 1024 · 1280. Propriétaire du fichier : agent Fondation CSS. ══════════════════════════════════════════════════════════════════════════ */ /* ══ 1. SQUELETTE DE PAGE ═════════════════════════════════════════════════ Le pied de page est toujours collé en bas, même sur une page courte. overflow-x:clip interdit tout défilement horizontal SANS créer de conteneur de défilement — contrairement à overflow:hidden, qui casserait le header collant. ═══════════════════════════════════════════════════════════════════════ */ html{ overflow-x:clip; scrollbar-gutter:stable; /* pas de saut de largeur quand on verrouille */ } body{ display:flex; flex-direction:column; min-height:100vh; min-height:100svh; overflow-x:clip; } main{ flex:1 0 auto; width:100%; min-width:0; /* un enfant large ne pousse jamais la page */ } /* Verrou de défilement posé par app.js sur quand le menu est ouvert. La règle :has() est celle qui agit réellement : porte overflow-x:clip, donc l'overflow de ne se propage plus au viewport. */ html:has(body.tb-verrouille){ overflow:hidden; } body.tb-verrouille{ overflow:hidden; } /* Élément masqué : toujours, quelle que soit la mise en forme locale. */ [hidden]{ display:none !important; } /* ══ 2. LIEN D'ÉVITEMENT ══════════════════════════════════════════════════ */ .tb-evitement{ position:fixed; top:0; left:50%; z-index:var(--tb-z-evitement); transform:translate(-50%,-150%); padding:var(--tb-e3) var(--tb-e6); border-radius:0 0 var(--tb-r2) var(--tb-r2); background:var(--tb-vert); color:var(--tb-creme); font-size:var(--tb-t-petit); font-weight:600; text-decoration:none; box-shadow:var(--tb-ombre2); transition:transform var(--tb-d1) var(--tb-ease); } .tb-evitement:focus, .tb-evitement:focus-visible{ transform:translate(-50%,0); color:var(--tb-creme); outline:var(--tb-focus-trait) solid var(--tb-focus-couleur); outline-offset:-4px; /* le contour reste dans la pastille, jamais coupé */ } /* ══ 3. HEADER COLLANT ════════════════════════════════════════════════════ Le fond translucide et le flou sont portés par ::before, pas par le header lui-même : un backdrop-filter sur .tb-entete créerait un bloc conteneur pour les descendants en position:fixed et casserait le panneau de navigation. ═══════════════════════════════════════════════════════════════════════ */ .tb-entete{ --tb-h:var(--tb-header-h); /* hauteur courante, héritée par .tb-nav */ position:sticky; top:0; z-index:var(--tb-z-entete); isolation:isolate; border-bottom:1px solid var(--tb-ligne); transition:border-color var(--tb-d1) var(--tb-ease), box-shadow var(--tb-d1) var(--tb-ease); } .tb-entete::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--tb-verre-dense); transition:background-color var(--tb-d1) var(--tb-ease); } @supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .tb-entete::before{ background:var(--tb-verre); -webkit-backdrop-filter:var(--tb-flou); backdrop-filter:var(--tb-flou); } } /* État densifié au défilement — attribut posé par app.js. */ .tb-entete[data-defile]{ --tb-h:var(--tb-header-h-dense); border-bottom-color:transparent; box-shadow:var(--tb-ombre1); } .tb-entete[data-defile]::before{ background:var(--tb-verre-dense); } .tb-entete__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--tb-e4); width:100%; max-width:var(--tb-conteneur-large); height:var(--tb-h); margin-inline:auto; padding-inline:var(--tb-gouttiere); transition:height var(--tb-d2) var(--tb-ease); } @media (min-width:900px){ .tb-entete__inner{ gap:var(--tb-e7); } } /* ── 3.1 Mot-marque ──────────────────────────────────────────────────────── */ .tb-marque{ display:inline-flex; align-items:center; gap:var(--tb-e3); min-height:44px; padding-right:var(--tb-e2); border-radius:var(--tb-r2); color:inherit; text-decoration:none; flex:0 1 auto; min-width:0; } .tb-marque:hover{ color:inherit; } .tb-marque__logo{ width:44px; height:44px; flex:none; transition:width var(--tb-d2) var(--tb-ease), height var(--tb-d2) var(--tb-ease); } .tb-entete[data-defile] .tb-marque__logo{ width:34px; height:34px; } .tb-marque__texte{ display:flex; flex-direction:column; justify-content:center; min-width:0; } /* Gothique : usage STRICTEMENT réservé au mot-marque. */ .tb-marque__nom{ font-family:var(--tb-font-gothique); font-size:clamp(1.35rem, 1.05rem + 1vw, 1.8rem); font-weight:400; line-height:1.02; letter-spacing:.01em; color:var(--tb-vert); white-space:nowrap; } .tb-marque__sous{ margin-top:3px; font-family:var(--tb-font-texte); font-size:.625rem; font-weight:500; line-height:1; letter-spacing:.22em; text-transform:uppercase; color:var(--tb-encre-45); white-space:nowrap; } /* Sur les très petits écrans, on garde le mot-marque et on sacrifie la ligne de service, qui ne doit jamais pousser le burger hors de la barre. */ @media (max-width:359.98px){ .tb-marque__sous{ display:none; } } /* ── 3.2 Navigation — panneau plein écran (mobile d'abord) ───────────────── */ .tb-nav{ position:fixed; inset:var(--tb-h) 0 0 0; /* démarre sous le header : le burger reste cliquable */ z-index:var(--tb-z-nav); display:flex; flex-direction:column; justify-content:center; padding:var(--tb-e8) var(--tb-gouttiere) var(--tb-e10); background-color:var(--tb-ivoire); /* Fond très légèrement dégradé : le panneau se distingue de la page sans tache de couleur. */ background-image:linear-gradient(to bottom, var(--tb-ivoire) 0%, var(--tb-ivoire-alt) 100%); overflow-y:auto; overscroll-behavior:contain; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-14px); transition:opacity var(--tb-d2) var(--tb-ease), transform var(--tb-d2) var(--tb-ease), visibility 0s linear var(--tb-d2); } /* Ouvert : attribut posé par app.js sur #tb-nav. */ .tb-nav[data-ouvert]{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; } .tb-nav__liste{ display:flex; flex-direction:column; align-items:stretch; gap:var(--tb-e1); width:100%; max-width:var(--tb-conteneur-etroit); margin-inline:auto; } /* Cascade des liens à l'ouverture — 60 ms de décalage, plafonné. */ .tb-nav__liste > li{ opacity:0; transform:translateY(-12px); transition:opacity var(--tb-d2) var(--tb-ease), transform var(--tb-d2) var(--tb-ease); } .tb-nav[data-ouvert] .tb-nav__liste > li{ opacity:1; transform:none; } .tb-nav[data-ouvert] .tb-nav__liste > li:nth-child(1){ transition-delay:80ms; } .tb-nav[data-ouvert] .tb-nav__liste > li:nth-child(2){ transition-delay:140ms; } .tb-nav[data-ouvert] .tb-nav__liste > li:nth-child(3){ transition-delay:200ms; } .tb-nav[data-ouvert] .tb-nav__liste > li:nth-child(4){ transition-delay:260ms; } .tb-nav[data-ouvert] .tb-nav__liste > li:nth-child(5){ transition-delay:320ms; } .tb-nav__lien{ position:relative; display:flex; align-items:center; min-height:56px; padding-block:var(--tb-e2); border-bottom:1px solid var(--tb-ligne); font-family:var(--tb-font-titre); font-variation-settings:'wght' 600; font-size:clamp(1.6rem, 7vw, 2.35rem); line-height:1.15; color:var(--tb-vert); text-decoration:none; transition:color var(--tb-d1) var(--tb-ease); } /* Soulignement animé : depuis la gauche en panneau, depuis le centre en barre. */ .tb-nav__lien::after{ content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; border-radius:var(--tb-rond); background:var(--tb-orange); transform:scaleX(0); transform-origin:left center; transition:transform var(--tb-d2) var(--tb-ease-sort); } .tb-nav__lien:hover::after, .tb-nav__lien:focus-visible::after, .tb-nav__lien[aria-current='page']::after{ transform:scaleX(1); } .tb-nav__lien:hover{ color:var(--tb-vert-clair); } .tb-nav__lien[aria-current='page']{ color:var(--tb-vert); } /* ── 3.3 Bouton burger — deux traits qui se croisent en X ────────────────── */ .tb-burger{ position:relative; z-index:var(--tb-z-contenu); display:inline-flex; flex:none; width:44px; height:44px; border-radius:var(--tb-r2); color:var(--tb-encre); transition:background-color var(--tb-d1) var(--tb-ease); } .tb-burger:hover{ background:var(--tb-survol-clair); } .tb-burger__trait{ position:absolute; left:50%; top:50%; width:22px; height:2px; border-radius:var(--tb-rond); background:currentColor; transition:transform var(--tb-d2) var(--tb-ease), background-color var(--tb-d1) var(--tb-ease); } .tb-burger__trait:nth-child(1){ transform:translate(-50%,-50%) translateY(-4px); } .tb-burger__trait:nth-child(2){ transform:translate(-50%,-50%) translateY(4px); } .tb-burger[aria-expanded='true']{ color:var(--tb-vert); } .tb-burger[aria-expanded='true'] .tb-burger__trait:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); } .tb-burger[aria-expanded='true'] .tb-burger__trait:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); } /* ── 3.4 Navigation — barre horizontale à partir de 900 px ───────────────── */ @media (min-width:900px){ .tb-burger{ display:none; } .tb-nav{ position:static; inset:auto; z-index:auto; display:block; padding:0; background:none; overflow:visible; opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:none; } .tb-nav__liste{ flex-direction:row; align-items:center; justify-content:flex-end; gap:clamp(var(--tb-e2), 1.4vw, var(--tb-e6)); max-width:none; margin-inline:0; } .tb-nav__liste > li{ opacity:1; transform:none; transition:none; } .tb-nav__lien{ display:inline-flex; justify-content:center; min-height:44px; padding-inline:var(--tb-e2); padding-block:0; border-bottom:0; font-family:var(--tb-font-texte); font-variation-settings:normal; font-size:var(--tb-t-petit); font-weight:500; letter-spacing:.005em; color:var(--tb-encre-70); } /* En barre, le soulignement naît du centre. */ .tb-nav__lien::after{ left:var(--tb-e2); right:var(--tb-e2); bottom:.6rem; width:auto; transform:scaleX(0); transform-origin:center; } .tb-nav__lien[aria-current='page']{ color:var(--tb-vert); font-weight:600; } } /* ══ 4. CONTENEURS ════════════════════════════════════════════════════════ */ .tb-conteneur{ position:relative; z-index:var(--tb-z-contenu); width:100%; max-width:var(--tb-conteneur); margin-inline:auto; padding-inline:var(--tb-gouttiere); } .tb-conteneur--large{ max-width:var(--tb-conteneur-large); } .tb-conteneur--etroit{ max-width:var(--tb-conteneur-etroit); } /* ══ 5. SECTIONS ══════════════════════════════════════════════════════════ Rythme vertical --tb-e11 sur grand écran, resserré sur mobile. Chaque section porte une bande de transition en tête : le fond de la section précédente s'y dissout, ce qui évite toute cassure nette entre un bloc ivoire et un bloc vert. ═══════════════════════════════════════════════════════════════════════ */ .tb-section{ position:relative; padding-block:var(--tb-e10); background-color:var(--tb-ivoire); color:var(--tb-encre); } @media (min-width:768px){ .tb-section{ padding-block:var(--tb-e11); } } @media (min-width:1280px){ .tb-section{ padding-block:var(--tb-e12); } } /* Fonds */ .tb-section--ivoire{ background-color:var(--tb-ivoire); } .tb-section--alt{ background-color:var(--tb-ivoire-alt); } .tb-section--vert{ background-color:var(--tb-vert); color:var(--tb-creme); } .tb-section--vert-profond{ background-color:var(--tb-vert-profond); color:var(--tb-creme); } /* Ombre d'entrée : la section précédente porte son ombre sur la suivante. Elle tient dans la marge haute de la section, jamais sur le contenu. */ .tb-section + .tb-section::before{ content:''; position:absolute; inset-inline:0; top:0; height:var(--tb-e9); background-image:var(--tb-ombre-entree-claire); pointer-events:none; z-index:0; } @media (min-width:768px){ .tb-section + .tb-section::before{ height:var(--tb-e10); } } /* Spécificité doublée : ces règles doivent l'emporter sur la règle combinée .tb-section + .tb-section ci-dessus. */ .tb-section.tb-section--vert::before, .tb-section.tb-section--vert-profond::before{ background-image:var(--tb-ombre-entree-sombre); } /* Liseré d'un pixel en tête de section : or sur fond sombre, encre sur fond clair. Il est dessiné en dégradé horizontal, donc il s'efface sur les bords. */ .tb-section + .tb-section::after, .tb-section--vert::after, .tb-section--vert-profond::after{ content:''; position:absolute; top:0; inset-inline:0; height:1px; background-image:var(--tb-lisere-encre); pointer-events:none; z-index:1; } .tb-section.tb-section--vert::after, .tb-section.tb-section--vert-profond::after{ background-image:var(--tb-lisere-or); opacity:.75; } .tb-section.tb-section--sans-lisere::after{ display:none; } /* Texte sur fond vert : crème pour le courant, blanc cassé pour les titres. */ .tb-section--vert :is(h1,h2,h3,h4,h5,h6), .tb-section--vert-profond :is(h1,h2,h3,h4,h5,h6), .tb-section--vert .tb-titre-section, .tb-section--vert-profond .tb-titre-section{ color:var(--tb-blanc); } .tb-section--vert .tb-chapo, .tb-section--vert-profond .tb-chapo, .tb-section--vert figcaption, .tb-section--vert-profond figcaption, .tb-section--vert dd, .tb-section--vert-profond dd{ color:var(--tb-creme-70); } /* L'orange ne passe pas le contraste AA sur le vert : on bascule sur l'or clair. */ .tb-section--vert .tb-surtitre, .tb-section--vert-profond .tb-surtitre{ color:var(--tb-or-clair); } .tb-section--vert a, .tb-section--vert-profond a{ color:var(--tb-creme); text-decoration-color:rgb(var(--tb-or-rvb) / .6); } .tb-section--vert a:hover, .tb-section--vert-profond a:hover{ color:var(--tb-or-clair); text-decoration-color:var(--tb-or-clair); } .tb-section--vert hr, .tb-section--vert-profond hr{ background-image:var(--tb-lisere-or); } /* Modificateurs de rythme */ .tb-section--compacte{ padding-block:var(--tb-e8); } @media (min-width:768px){ .tb-section--compacte{ padding-block:var(--tb-e9); } } .tb-section--sans-haut{ padding-top:0; } .tb-section--sans-haut::before{ display:none; } .tb-section--sans-bas{ padding-bottom:0; } /* ══ 6. TYPOGRAPHIE DE SECTION ════════════════════════════════════════════ */ .tb-section__tete{ max-width:72ch; margin-bottom:var(--tb-e8); } @media (min-width:768px){ .tb-section__tete{ margin-bottom:var(--tb-e9); } } .tb-section__tete--centre{ margin-inline:auto; text-align:center; } .tb-section__tete--centre .tb-surtitre{ justify-content:center; } .tb-section__tete--centre .tb-chapo{ margin-inline:auto; } /* Surtitre : petites capitales espacées, précédées d'un tiret orange. */ .tb-surtitre{ display:flex; align-items:center; gap:var(--tb-e3); margin:0; font-family:var(--tb-font-texte); font-size:var(--tb-t-micro); font-weight:600; line-height:1.2; letter-spacing:.18em; text-transform:uppercase; color:var(--tb-orange); } .tb-surtitre::before{ content:''; flex:none; width:var(--tb-e6); height:2px; border-radius:var(--tb-rond); background:currentColor; } .tb-surtitre--sans-tiret::before{ display:none; } .tb-titre-section{ margin-top:var(--tb-e3); font-family:var(--tb-font-titre); font-variation-settings:'wght' 600; font-weight:600; font-size:var(--tb-t-h2); line-height:1.08; letter-spacing:-.015em; color:var(--tb-vert); text-wrap:balance; } .tb-chapo{ max-width:62ch; margin-top:var(--tb-e4); font-family:var(--tb-font-texte); font-size:1.125rem; font-weight:400; line-height:1.65; color:var(--tb-encre-70); text-wrap:pretty; } /* ══ 7. GRILLES DE BASE ═══════════════════════════════════════════════════ Briques neutres à disposition des feuilles de page. Les grilles propres à un composant restent dans components.css ou dans css/pages/. ═══════════════════════════════════════════════════════════════════════ */ .tb-grille{ display:grid; gap:var(--tb-e6); } @media (min-width:768px){ .tb-grille{ gap:var(--tb-e7); } } /* Grille fluide : --tb-min pilote la largeur minimale d'une colonne. */ .tb-grille--auto{ grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--tb-min,260px)), 1fr)); } .tb-grille--2{ grid-template-columns:1fr; } .tb-grille--3{ grid-template-columns:1fr; } @media (min-width:768px){ .tb-grille--2{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .tb-grille--3{ grid-template-columns:repeat(3,1fr); } } /* Empilement vertical régulier : --tb-pas règle l'écart. */ .tb-pile{ display:flex; flex-direction:column; gap:var(--tb-pas,var(--tb-e5)); } /* Ligne souple qui passe à la ligne plutôt que de déborder. */ .tb-ligne-souple{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--tb-e3); } /* ══ 8. PIED DE PAGE ══════════════════════════════════════════════════════ */ .tb-pied{ position:relative; margin-top:auto; padding-top:var(--tb-e10); background-color:var(--tb-vert-profond); color:var(--tb-creme-70); font-size:var(--tb-t-petit); } .tb-pied::before{ content:''; position:absolute; top:0; inset-inline:0; height:1px; background-image:var(--tb-lisere-or); opacity:.7; } .tb-pied__inner{ display:grid; grid-template-columns:1fr; gap:var(--tb-e8); width:100%; max-width:var(--tb-conteneur); margin-inline:auto; padding-inline:var(--tb-gouttiere); padding-bottom:var(--tb-e9); } @media (min-width:768px){ .tb-pied__inner{ grid-template-columns:1.4fr .8fr 1.1fr; gap:var(--tb-e9) var(--tb-e8); } } .tb-pied__marque img{ width:64px; height:64px; margin-bottom:var(--tb-e4); } .tb-pied__nom{ font-family:var(--tb-font-gothique); font-size:1.7rem; line-height:1.05; color:var(--tb-creme); } .tb-pied__devise{ margin-top:var(--tb-e2); max-width:34ch; color:var(--tb-creme-70); } .tb-pied__titre{ margin-bottom:var(--tb-e4); font-family:var(--tb-font-texte); font-size:var(--tb-t-micro); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--tb-or-clair); } .tb-pied__nav ul{ display:flex; flex-direction:column; gap:0; list-style:none; padding:0; margin:0; } .tb-pied__nav ul li + li{ margin-top:0; } .tb-pied a{ display:inline-flex; align-items:center; min-height:44px; /* cible tactile confortable */ color:var(--tb-creme-70); text-decoration:none; transition:color var(--tb-d1) var(--tb-ease); } .tb-pied a:hover{ color:var(--tb-creme); text-decoration:underline; text-decoration-color:var(--tb-or-clair); text-underline-offset:.2em; } .tb-pied__synchro{ min-width:0; } .tb-pied__bas{ width:100%; max-width:var(--tb-conteneur); margin-inline:auto; padding:var(--tb-e5) var(--tb-gouttiere); border-top:1px solid var(--tb-ligne-claire); font-size:var(--tb-t-micro); color:rgb(var(--tb-creme-rvb) / .55); text-align:center; } /* ══ 9. MOUVEMENT RÉDUIT ══════════════════════════════════════════════════ base.css neutralise déjà toutes les durées. On fige ici ce qui doit rester utilisable sans transition : ouverture du panneau et cascade des liens. ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .tb-nav, .tb-nav__liste > li, .tb-nav__lien::after, .tb-entete__inner, .tb-marque__logo{ transition:none !important; } .tb-nav[data-ouvert]{ transform:none; } .tb-nav[data-ouvert] .tb-nav__liste > li{ transition-delay:0s !important; } }