/* ============================================================================ Modul@net — layout.css ---------------------------------------------------------------------------- Trame, en-tête, en-têtes de section, pied de page. Les espacements verticaux entre sections viennent UNIQUEMENT du padding-block de .sec — jamais d'une marge sur un enfant. Piège de cascade signalé au §4.2 du handoff. ============================================================================ */ /* ---------- trame ---------- */ .wrap{width:100%;max-width:var(--mn-wrap);margin-inline:auto;padding-inline:var(--mn-pad)} .sec{padding-block:clamp(72px,7vw,124px)} /* ---------- en-tête ---------- */ /* La règle .mn-header est plus bas dans ce fichier, avec le reste de l'en-tête. Le bloc qui se trouvait ici était un sélecteur d'ÉLÉMENT hérité de la maquette — header{position:sticky} — où la page n'avait qu'un seul
. Sur une page intérieure il y en a deux, et celui de l'article restait collé en haut de l'écran par-dessus le contenu. Retiré. */ .nav{display:flex;align-items:center;gap:34px;height:78px} .logo{display:flex;align-items:center;height:24px;flex:none;color:var(--mn-text)} .logo svg{height:24px;width:auto;display:block} .links{display:flex;gap:30px;margin-left:auto;font-size:var(--mn-t-body);color:var(--mn-muted)} .links a{position:relative;padding-block:6px;transition:color .2s} .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--mn-copper);transition:right .3s var(--mn-e-out)} .links a:hover{color:var(--mn-text)} .links a:hover::after{right:0} .lang{display:flex;gap:2px;font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.1em} .lang a{padding:6px 9px;border-radius:var(--mn-r-pill);color:var(--mn-faint)} .lang a[aria-current]{background:rgba(242,145,100,.16);color:var(--mn-copper)} .burger{display:none;margin-left:auto;background:none;border:0;color:var(--mn-text); font-size:20px;padding:8px;cursor:pointer} /* ---------- en-têtes de section ---------- */ .head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(38px,4vw,64px)} .head h2{margin-top:22px} /* ---------- pied ---------- */ footer.site{padding-block:clamp(56px,6vw,88px) 30px;background:var(--mn-bg)} .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,3vw,52px)} .fgrid h4{font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.15em;text-transform:uppercase; color:var(--mn-faint);margin:0 0 18px;font-weight:400} .fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px; font-size:var(--mn-t-body);color:var(--mn-muted)} .fgrid a:hover{color:var(--mn-copper)} .fmark{margin-top:64px;overflow:hidden;line-height:0} .fmark svg{width:100%;height:auto;display:block;color:rgba(243,240,233,.05)} .fbot{margin-top:26px;padding-top:24px;border-top:1px solid var(--mn-line-soft);display:flex; flex-wrap:wrap;gap:18px;justify-content:space-between;font-family:var(--mn-mono);font-size:var(--mn-t-meta); letter-spacing:.07em;color:var(--mn-faint);text-transform:uppercase} /* ============================================================================ AJOUTS DU THÈME — éléments qui n'existaient pas dans la maquette ============================================================================ */ /* ---------- lien d'évitement ---------- Obligatoire (WCAG 2.4.1). Visible dès qu'il reçoit le focus, jamais avant. Pas de display:none : un lien masqué ainsi n'est pas focalisable. */ .mn-skip{position:absolute;left:16px;top:-100px;z-index:200; padding:14px 22px;border-radius:var(--mn-r-pill); background:var(--mn-copper-deep);color:#231207;font-weight:600; transition:top var(--mn-fast) var(--mn-e-out)} .mn-skip:focus{top:16px} /* ---------- barre de progression de lecture ---------- */ .mn-progress-track{position:fixed;inset:0 0 auto 0;height:2px;z-index:var(--mn-z-progress); pointer-events:none;background:transparent} .mn-progress-track i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--mn-copper-deep),var(--mn-warn))} /* ---------- en-tête ---------- */ .mn-header{position:sticky;top:0;z-index:var(--mn-z-header); background:rgba(9,10,12,.78);backdrop-filter:blur(16px); border-bottom:1px solid transparent;transition:border-color var(--mn-base)} .mn-header.is-stuck{border-bottom-color:var(--mn-line-soft)} /* Le CTA de l'en-tête — correction obligatoire n° 8 du brief : il reste visible sur mobile. Dans le dossier B il disparaissait sous 780 px. */ .mn-header-cta{padding:11px 20px;font-size:var(--mn-t-body);flex:none} .mn-header-cta__short{display:none} /* Le bouton de menu : deux barres, pas une icône de police. */ .mn-burger{display:none;background:none;border:0;padding:10px;cursor:pointer; color:var(--mn-text);border-radius:var(--mn-r-pill)} .mn-burger__bars{display:block;width:22px} .mn-burger__bars i{display:block;height:1.5px;background:currentColor;border-radius:2px; transition:transform var(--mn-base) var(--mn-e-out)} .mn-burger__bars i+i{margin-top:6px} .mn-menu-open .mn-burger__bars i:first-child{transform:translateY(3.75px) rotate(45deg)} .mn-menu-open .mn-burger__bars i:last-child{transform:translateY(-3.75px) rotate(-45deg)} .mn-menu{border-top:1px solid var(--mn-line-soft);background:var(--mn-panel)} .mn-menu__nav{display:flex;flex-direction:column;gap:2px; max-width:var(--mn-wrap);margin-inline:auto;padding:18px var(--mn-pad) 26px} .mn-menu__nav a{padding:14px 0;font-size:1.125rem;color:var(--mn-muted); border-bottom:1px solid var(--mn-line-soft)} .mn-menu__nav a:hover,.mn-menu__nav a:focus-visible{color:var(--mn-text)} /* ---------- en-tête de page intérieure ---------- */ .mn-page-head{padding-block:clamp(48px,6vw,92px) clamp(20px,2vw,32px)} .mn-page-head .tt{margin-top:20px} .mn-page-head .lede{margin-top:24px;max-width:60ch} .mn-page-figure{margin:0;padding-block:clamp(20px,3vw,40px)} .mn-page-figure img{width:100%;height:auto;border-radius:var(--mn-r-m)} /* ---------- fil d'Ariane ---------- */ .mn-crumb ol{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none; font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.1em; text-transform:uppercase;color:var(--mn-faint)} .mn-crumb li+li::before{content:"/";margin-right:10px;color:var(--mn-faint)} .mn-crumb a:hover{color:var(--mn-copper)} .mn-crumb [aria-current]{color:var(--mn-muted)} /* ---------- corps rédactionnel ---------- Une mesure de 68 caractères : au-delà, l'œil perd la ligne suivante. */ .mn-prose{max-width:none} .mn-prose > *{max-width:68ch} .mn-prose > .alignwide,.mn-prose > figure,.mn-prose > table{max-width:none} .mn-prose p{margin-block:0 1.1em;color:var(--mn-muted)} .mn-prose h2{margin-block:2em .6em;font-size:var(--mn-t-h2-sm);letter-spacing:-.03em; line-height:1.08;color:var(--mn-text)} .mn-prose h3{margin-block:1.6em .5em;font-size:var(--mn-t-h3);letter-spacing:-.02em; color:var(--mn-text)} .mn-prose ul,.mn-prose ol{margin-block:0 1.2em;padding-left:1.3em;color:var(--mn-muted)} .mn-prose li{margin-bottom:.5em} /* Les liens de contenu. Le :not(.btn) n'est pas un détail : sans lui, cette règle (0,1,1) l'emporte sur .btn-p (0,1,0) et repeint TOUS les boutons placés dans une page en cuivre souligné — c'est-à-dire en cuivre sur cuivre, illisible. Constaté sur le CTA du bloc mn/hero, où le libellé « Audit gratuit » était invisible à l'œil comme à la mesure (1,1:1). */ .mn-prose a:not(.btn){color:var(--mn-copper);text-decoration:underline;text-underline-offset:.22em; text-decoration-thickness:1px;text-decoration-color:rgba(242,145,100,.4)} .mn-prose a:not(.btn):hover{text-decoration-color:currentColor} .mn-prose blockquote{margin:2em 0;padding-left:26px;border-left:2px solid var(--mn-copper-deep); font-family:var(--mn-serif);font-size:1.5rem;line-height:1.3;color:var(--mn-text)} .mn-prose table{width:100%;border-collapse:collapse;margin-block:1.6em; font-variant-numeric:tabular-nums} .mn-prose th,.mn-prose td{padding:14px 16px;text-align:left; border-bottom:1px solid var(--mn-line-soft)} .mn-prose th{font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.1em; text-transform:uppercase;color:var(--mn-faint)} .mn-prose td{color:var(--mn-muted)} .mn-prose img{border-radius:var(--mn-r-s)} /* Tout tableau large défile DANS son conteneur : le corps de page ne défile jamais horizontalement. */ .mn-prose figure.wp-block-table{overflow-x:auto} /* La réponse directe sous le h1 — 40 à 60 mots, format citable §8.3. */ .mn-answer-first{color:var(--mn-text);border-left:2px solid var(--mn-copper-deep); padding-left:22px} /* ---------- articles voisins ---------- */ .mn-adjacent{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;background:var(--mn-line-soft);border-block:1px solid var(--mn-line-soft); margin-top:clamp(40px,5vw,72px)} .mn-adjacent a{display:block;padding:26px var(--mn-pad);background:var(--mn-bg)} .mn-adjacent a:hover{background:var(--mn-panel)} .mn-adjacent b{display:block;margin-top:10px;font-weight:500;color:var(--mn-text)} /* ---------- pagination ---------- */ .mn-pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(32px,4vw,56px)} .mn-pager a,.mn-pager span{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 14px;border-radius:var(--mn-r-pill); font-family:var(--mn-mono);font-size:var(--mn-t-body);color:var(--mn-muted)} .mn-pager a:hover{background:rgba(255,255,255,.06);color:var(--mn-text)} .mn-pager .current{background:var(--mn-copper-wash);color:var(--mn-copper)} /* ---------- 404 ---------- */ .mn-404{max-width:760px} .mn-404__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} /* ---------- commande de pause ---------- */ .mn-motion-row{margin:0} .motionbtn[aria-pressed="true"]{color:var(--mn-copper)} /* ---------- avertissement de préproduction ---------- */ .mn-warn{margin-top:32px;padding:20px 24px;border-radius:var(--mn-r-s); border:1px solid rgba(240,180,90,.34);background:rgba(240,180,90,.07); color:var(--mn-warn);max-width:88ch} .mn-warn strong{color:var(--mn-warn)} /* ---------- texte réservé aux lecteurs d'écran ---------- */ .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .screen-reader-text:focus{position:static;width:auto;height:auto;margin:0; clip-path:none;white-space:normal} @media (max-width:1000px){ .mn-burger{display:block} .mn-header-cta__long{display:none} .mn-header-cta__short{display:inline} .mn-header .lang{margin-left:auto} .mn-header-cta{margin-left:auto} } @media (min-width:1001px){ .mn-menu{display:none} } /* ============================================================================ EN-TÊTE MOBILE — correction ---------------------------------------------------------------------------- Deux défauts constatés à 400 px, mesurés au navigateur : 1. La règle .btn{width:100%} du bloc responsif — pensée pour les boutons de contenu — s'appliquait aussi au CTA de l'en-tête, qui débordait alors de la barre. Le document faisait 661 px de large pour une fenêtre de 400. 2. Logo + CTA + sélecteur de langue + bouton de menu sur une seule ligne avec 34 px de gouttière : la place n'y est pas, et rien ne cédait. Le CTA reste visible — c'est la correction obligatoire n° 8 du brief — mais il se compacte. Le sélecteur de langue descend dans le menu : il n'y a de toute façon qu'une langue tant que le lot 7 n'est pas fait. ============================================================================ */ @media (max-width:760px){ .mn-header-cta.btn{width:auto;justify-content:center} } @media (max-width:1000px){ .mn-header .nav{gap:14px;height:66px} .mn-header .logo,.mn-header .logo svg{height:20px} .mn-header-cta{margin-left:auto;padding:9px 16px;gap:8px} .mn-header .lang{display:none} .mn-menu .lang{display:flex;margin-top:20px;justify-content:flex-start} } @media (max-width:420px){ .mn-header .nav{gap:10px;padding-inline:16px} .mn-header-cta{padding:9px 14px} .mn-burger{padding:8px} } /* Les menus WordPress sortent des
  • : sans