/* =========================================================== Le Labo du Pilote — couche interactions & animations Chargé sur toutes les pages. CSS-first, sobre, réactif. Respecte prefers-reduced-motion. Ne cache rien si JS absent (les états masqués ne s'appliquent que si ). =========================================================== */ :root { --lp-amber:#D4860A; --lp-navy:#0B1929; } /* Barre de progression de lecture (injectée par labo.js) */ #lp-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,#D4860A,#ffb963); z-index:60; box-shadow:0 0 10px rgba(212,134,10,.55); transition:width .08s linear; } /* Cartes cliquables : élévation vive au survol */ a.group, article.group{ transition:transform .28s cubic-bezier(.16,.84,.44,1), box-shadow .28s ease, border-color .28s ease; } a.group:hover, article.group:hover{ transform:translateY(-6px); box-shadow:0 20px 45px -22px rgba(11,25,41,.5); } /* Titre de carte : léger grossissement au survol de la carte */ .group h2, .group h3{ display:inline-block; transform-origin:left center; transition:transform .28s cubic-bezier(.16,.84,.44,1), color .2s ease; } .group:hover h2, .group:hover h3{ transform:scale(1.03); } /* Icônes flèche : avancent au survol du parent */ .material-symbols-outlined{ transition:transform .25s ease; } .group:hover .material-symbols-outlined, .lp-cta:hover .material-symbols-outlined{ transform:translateX(4px); } /* Bouton d'action principal : ressort */ .lp-cta{ transition:transform .18s ease, background-color .2s ease, box-shadow .2s ease; } .lp-cta:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(212,134,10,.55); } .lp-cta:active{ transform:translateY(0) scale(.98); } /* Liens du menu : soulignement animé */ header nav a{ position:relative; } header nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--lp-amber); transition:width .25s ease; } header nav a:hover::after{ width:100%; } /* Lisibilité du texte des héros par-dessus une photo */ .lp-hero-copy{ text-shadow:0 2px 14px rgba(11,25,41,.55); } @media (prefers-reduced-motion: no-preference){ /* Hero : zoom lent facon Ken Burns */ .lp-hero-bg{ animation:lp-kb 30s ease-in-out infinite alternate; transform-origin:60% 42%; will-change:transform; } @keyframes lp-kb{ from{transform:scale(1.06)} to{transform:scale(1.15)} } /* Apparition au defilement (seulement si JS present) */ .lp-js .lp-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .lp-js .lp-reveal.is-in{ opacity:1; transform:none; } } /* === Bandeau consentement cookies (ajout 2026-07-20) === */ #lp-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#0B1929;color:#fff;border-top:3px solid #D4860A;box-shadow:0 -6px 24px rgba(0,0,0,.28);} #lp-cookie .lp-cookie-in{max-width:1200px;margin:0 auto;padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;} #lp-cookie .lp-cookie-txt{margin:0;flex:1 1 320px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.85);} #lp-cookie .lp-cookie-txt a{color:#F0B45A;text-decoration:underline;text-underline-offset:2px;} #lp-cookie .lp-cookie-btns{display:flex;gap:10px;flex:0 0 auto;} #lp-cookie .lp-cookie-btn{font:inherit;font-size:14px;font-weight:700;padding:10px 22px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:opacity .2s ease;} #lp-cookie .lp-cookie-btn:hover{opacity:.85;} #lp-cookie .lp-cookie-refuse{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);} #lp-cookie .lp-cookie-accept{background:#D4860A;color:#0B1929;} @media (max-width:560px){#lp-cookie .lp-cookie-in{flex-direction:column;align-items:stretch;}#lp-cookie .lp-cookie-btns{justify-content:flex-end;} /* Le conteneur passe en colonne ici. Or .lp-cookie-txt porte flex:1 1 320px : en colonne, ce 320px n'est plus une largeur de base mais une HAUTEUR de base. Le texte, 166 caracteres, se retrouvait etale sur 320px de haut et le bandeau occupait 416px, soit 62% d'un iPhone SE. On rend la base au contenu. Mesure du 04/08/2026 : 416px -> 183px, soit 62% -> 27% de l'ecran d'un iPhone SE. */ #lp-cookie .lp-cookie-txt{flex:1 1 auto;}} /* =========================================================== Confort au pouce (audit mobile du 04/08/2026) Tout ce bloc est enferme sous 768 px, c'est-a-dire sous le point de rupture md: de Tailwind. Au-dela, pas une regle ne s'applique : l'affichage grand ecran est inchange, bit pour bit. Les selecteurs portent [class] ou [aria-label] uniquement pour passer devant les utilitaires Tailwind (.pb-1, .py-4), qui ne valent qu'une classe. Le build Tailwind etant fige, on ne peut pas ajouter d'utilitaire : on corrige donc ici. =========================================================== */ @media (max-width:767px){ /* --- Zones tactiles portees a 44 px -------------------------- Mesures avant correction, sur iPhone SE (375 x 667) : menu principal 30 px de haut fil d'Ariane 14 px de haut liens du pied 24 px de haut La hauteur du bandeau superieur est compensee plus bas pour que le menu, qui est colle en haut, ne mange pas plus d'ecran qu'avant. */ header nav a[class]{padding-top:9px;padding-bottom:9px;} header > div[class]{padding-top:6px;padding-bottom:6px;gap:8px;} nav[aria-label="Fil d'Ariane"] a[class]{padding-top:15px;padding-bottom:15px;} footer a[class]{display:inline-block;padding-top:10px;padding-bottom:10px;} /* Boutons d'appel a l'action : 40 px pour ceux du guide, 42 px pour les boutons marchands (l'icone open_in_new les rehausse un peu). Les 23 portent py-3 et rounded. */ a[class~="py-3"][class~="rounded"]{padding-top:14px;padding-bottom:14px;} /* Retour a l'accueil en fin de page : 14 px mesures. Restreint a main, pour ne pas attraper le logo du bandeau. */ main a[href="/"][class]{display:inline-block;padding-top:15px;padding-bottom:15px;} /* Bandeau de consentement : 43 px mesures, il s'en fallait de 1. */ #lp-cookie .lp-cookie-btn{padding-top:12px;padding-bottom:12px;} /* --- Tableaux : rendre le defilement lateral visible --------- 17 pages portent des tableaux plus larges que l'ecran, jusqu'a 487 px de contenu hors champ sur inaptitude-recours.html. Le defilement fonctionne, mais rien ne le signale : le lecteur croit lire un tableau tronque. Le procede est auto-limitant. Les deux degrades opaques sont en background-attachment:local, donc ils defilent avec le contenu et viennent masquer l'ombre des qu'on atteint le bord. Resultat : l'ombre n'apparait que du cote ou il reste reellement quelque chose a lire, et disparait toute seule si le tableau tient dans l'ecran. On ne touche qu'a background-image et a ses reglages : la couleur de fond posee par Tailwind reste intacte. Les cellules etant transparentes (verifie sur les 30 enveloppes), l'ombre se voit bien au travers du tableau. */ .overflow-x-auto{ background-image: linear-gradient(to right,#F8F9FA 42%,rgba(248,249,250,0)), linear-gradient(to left,#F8F9FA 42%,rgba(248,249,250,0)), radial-gradient(farthest-side at 0 50%,rgba(11,25,41,.20),rgba(11,25,41,0)), radial-gradient(farthest-side at 100% 50%,rgba(11,25,41,.20),rgba(11,25,41,0)); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:26px 100%,26px 100%,13px 100%,13px 100%; background-attachment:local,local,scroll,scroll; } /* Six enveloppes sont posees sur du blanc et non sur le fond de page : le masque doit etre blanc, sinon on verrait deux gris. */ .overflow-x-auto.bg-surface-container-lowest{ background-image: linear-gradient(to right,#fff 42%,rgba(255,255,255,0)), linear-gradient(to left,#fff 42%,rgba(255,255,255,0)), radial-gradient(farthest-side at 0 50%,rgba(11,25,41,.20),rgba(11,25,41,0)), radial-gradient(farthest-side at 100% 50%,rgba(11,25,41,.20),rgba(11,25,41,0)); } }