/* ===================================================================== AMAR — Feuille de styles globale Réutilise les design tokens du mockup original et ajoute la couche d'accessibilité (skip link, focus visible, modes A11yLauncher). ===================================================================== */ /* ========== Polices locales (woff2 servies depuis /assets/fonts/) ===== */ /* Fraunces — italic 300-600 */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/fraunces-italic-300_600-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/fraunces-italic-300_600-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Fraunces — normal 300-600 */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/fraunces-normal-300_600-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/fraunces-normal-300_600-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter (corps) — chargé via Google Fonts dans le de chaque page */ /* JetBrains Mono — pour les éléments mono (tags, badges) */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/jetbrains-mono-normal-600-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } /* Bobby Jones Soft — police d'affichage (titres) */ @font-face { font-family: "Bobby Jones Soft"; font-display: swap; src: url("/assets/fonts/bobby-jones-soft-normal-400.otf") format("opentype"); } /* ========== Design tokens AMAR ========== */ :root { --amar-purple: #5C2483; --amar-purple-deep: #3F1660; --amar-purple-soft: #7E47A6; --amar-teal: #1DAC9B; --amar-teal-deep: #138474; --amar-lilac: #E0D1EE; --amar-lilac-soft: #F1E8F8; --amar-mint: #E7F3E9; --amar-cream: #FBF8F4; --amar-paper: #F6F2EC; --amar-ink: #1B1233; --amar-ink-soft: #4A3F5C; --amar-muted: #5A5066; --amar-line: #E8E1DA; --amar-white: #FFFFFF; --font-display: "Fraunces", "Times New Roman", serif; --font-heading: "Bobby Jones Soft", "Fraunces", "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* ========== Reset ========== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--amar-ink); background: var(--amar-cream); font-size: 18px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* ========== Striped placeholder (héritage du mockup) ========== */ .amar-photo-ph { position: relative; background: repeating-linear-gradient(135deg, rgba(92,36,131,0.08) 0 12px, rgba(92,36,131,0.04) 12px 24px), var(--amar-lilac-soft); color: var(--amar-purple); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; } .amar-photo-ph.teal { background: repeating-linear-gradient(135deg, rgba(29,172,155,0.10) 0 12px, rgba(29,172,155,0.04) 12px 24px), var(--amar-mint); color: var(--amar-teal-deep); } .amar-photo-ph.purple { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 12px, rgba(255,255,255,0.02) 12px 24px), var(--amar-purple); color: rgba(255,255,255,0.85); } /* ========== Skip link (WCAG 2.4.1) ========== */ .a11y-skip-link { position: absolute; left: -9999px; top: 0; background: var(--amar-ink); color: #fff; padding: 12px 20px; font-weight: 700; text-decoration: none; z-index: 100000; border-radius: 0 0 8px 0; } .a11y-skip-link:focus { left: 0; outline: 3px solid var(--amar-teal); outline-offset: 2px; } /* ========== Utilitaire lecteur d'écran ========== */ .a11y-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========== Focus visible global (WCAG 2.4.7) ========== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--amar-teal) !important; outline-offset: 2px !important; border-radius: 4px; } /* ========================================================== */ /* ========== Widget d'accessibilité (overlay fixe) ========== */ /* ========================================================== */ .a11y-launcher { position: fixed; top: 16px; right: 16px; z-index: 99999; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--font-body); } .a11y-launcher__btn { width: 56px; height: 56px; border-radius: 50%; background: #1F5FBF; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.9); cursor: pointer; border: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; } .a11y-launcher__btn:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,1); } .a11y-launcher__btn:focus-visible { outline: 3px solid #FFD400 !important; outline-offset: 3px !important; } .a11y-launcher__btn svg { width: 36px; height: 36px; display: block; } .a11y-launcher__panel { background: #fff; color: #1B1233; width: 340px; max-width: calc(100vw - 32px); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.22); border: 1px solid rgba(0,0,0,0.08); padding: 20px 22px 18px; max-height: calc(100vh - 100px); overflow-y: auto; } .a11y-launcher__panel[hidden] { display: none; } .a11y-launcher__title { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: #1B1233; font-family: var(--font-body) !important; } .a11y-launcher__intro { font-size: 13.5px; color: #4A3F5C; margin: 0 0 16px; line-height: 1.5; } .a11y-launcher__group { border-top: 1px solid #EEE6F2; padding: 14px 0 4px; } .a11y-launcher__group:first-of-type { border-top: 0; padding-top: 0; } .a11y-launcher__label { font-size: 13px; font-weight: 600; color: #1B1233; margin-bottom: 8px; display: block; letter-spacing: 0.01em; } .a11y-launcher__sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .a11y-launcher__size { padding: 8px 4px; border-radius: 8px; background: #F4EEFA; color: #1B1233; font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: background 0.12s; } .a11y-launcher__size:hover { background: #E8DCF3; } .a11y-launcher__size[aria-pressed="true"] { background: #5C2483; color: #fff; border-color: #5C2483; } .a11y-launcher__size:nth-child(1) { font-size: 13px; } .a11y-launcher__size:nth-child(2) { font-size: 15px; } .a11y-launcher__size:nth-child(3) { font-size: 17px; } .a11y-launcher__size:nth-child(4) { font-size: 19px; } .a11y-launcher__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 12px; border-radius: 10px; background: #F8F4FB; color: #1B1233; margin-bottom: 8px; cursor: pointer; border: 2px solid transparent; text-align: left; transition: background 0.12s; } .a11y-launcher__toggle:hover { background: #EFE6F7; } .a11y-launcher__toggle[aria-pressed="true"] { background: #E1F4F1; border-color: #1DAC9B; } .a11y-launcher__toggle-text { display: flex; flex-direction: column; gap: 1px; } .a11y-launcher__toggle-title { font-size: 14px; font-weight: 600; } .a11y-launcher__toggle-desc { font-size: 12px; color: #4A3F5C; } .a11y-launcher__switch { width: 38px; height: 22px; border-radius: 999px; background: #C7BFD3; position: relative; flex-shrink: 0; transition: background 0.15s; } .a11y-launcher__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; } .a11y-launcher__toggle[aria-pressed="true"] .a11y-launcher__switch { background: #1DAC9B; } .a11y-launcher__toggle[aria-pressed="true"] .a11y-launcher__switch::after { transform: translateX(16px); } .a11y-launcher__reset { width: 100%; margin-top: 8px; padding: 10px; background: #1B1233; color: #fff; border-radius: 10px; font-weight: 600; font-size: 14px; border: 0; cursor: pointer; } .a11y-launcher__reset:hover { background: #2A1B47; } .a11y-launcher__note { font-size: 11.5px; color: #6B607A; margin: 10px 0 0; line-height: 1.45; } /* ============================================================ */ /* ========== Modes d'accessibilité appliqués via html ========= */ /* ============================================================ */ /* 1. Taille du texte — zoom global (méthode robuste, marche avec px inline) */ html.a11y-text-110 { zoom: 1.10; } html.a11y-text-125 { zoom: 1.25; } html.a11y-text-150 { zoom: 1.50; } /* 2. Contrastes élevés (AAA — noir / blanc / jaune) */ html.a11y-contrast body, html.a11y-contrast body :not(svg):not(path):not(circle):not(rect):not(g):not(line) { background-color: #000 !important; color: #FFF !important; border-color: #FFF !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-contrast body a, html.a11y-contrast body a * { color: #FFEB3B !important; text-decoration: underline !important; } html.a11y-contrast body button, html.a11y-contrast body [role="button"] { background-color: #FFEB3B !important; color: #000 !important; border: 2px solid #FFF !important; } html.a11y-contrast body h1, html.a11y-contrast body h2, html.a11y-contrast body h3, html.a11y-contrast body h4 { color: #FFEB3B !important; } html.a11y-contrast .a11y-launcher, html.a11y-contrast .a11y-launcher * { background-color: revert !important; color: revert !important; border-color: revert !important; } html.a11y-contrast .a11y-launcher__btn { background: #FFEB3B !important; color: #000 !important; } html.a11y-contrast .a11y-launcher__btn svg path, html.a11y-contrast .a11y-launcher__btn svg circle { fill: #000 !important; } /* 3. Police adaptée dyslexie (Lexend / Atkinson Hyperlegible) */ html.a11y-dyslexia body, html.a11y-dyslexia body * { font-family: "Lexend", "Atkinson Hyperlegible", "OpenDyslexic", "Verdana", sans-serif !important; font-weight: 500 !important; } html.a11y-dyslexia .a11y-launcher, html.a11y-dyslexia .a11y-launcher * { font-family: var(--font-body), system-ui, sans-serif !important; font-weight: revert !important; } /* 4. Espacement renforcé (WCAG 1.4.12) */ html.a11y-spacing body, html.a11y-spacing body p, html.a11y-spacing body li, html.a11y-spacing body h1, html.a11y-spacing body h2, html.a11y-spacing body h3, html.a11y-spacing body h4, html.a11y-spacing body h5, html.a11y-spacing body h6, html.a11y-spacing body span, html.a11y-spacing body a { line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.18em !important; } html.a11y-spacing body p { margin-bottom: 1.2em !important; } html.a11y-spacing .a11y-launcher, html.a11y-spacing .a11y-launcher * { line-height: revert !important; letter-spacing: revert !important; word-spacing: revert !important; } /* 5. Mode lisibilité simplifiée (FALC-friendly) */ html.a11y-falc body { background: #FFFDF5 !important; } html.a11y-falc body p, html.a11y-falc body li, html.a11y-falc body span { font-size: 1.18em !important; line-height: 1.75 !important; max-width: 60ch !important; color: #1B1233 !important; } html.a11y-falc body h1, html.a11y-falc body h2 { font-size: 1.8em !important; color: #5C2483 !important; margin-bottom: 0.6em !important; } html.a11y-falc body h3, html.a11y-falc body h4 { font-size: 1.4em !important; color: #5C2483 !important; } html.a11y-falc body *:not(.a11y-launcher):not(.a11y-launcher *) { background-image: none !important; animation: none !important; transition: none !important; } html.a11y-falc body::before { content: "Mode lisibilité simplifiée activé. Le contenu reste celui du site — le vrai mode FALC complet (texte réécrit selon les règles européennes FALC) est en cours d'élaboration avec des relecteurs experts."; display: block; background: #FFEB3B; color: #1B1233; padding: 14px 24px; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.5; position: sticky; top: 0; z-index: 99998; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Petits écrans */ @media (max-width: 480px) { .a11y-launcher { top: 10px; right: 10px; } .a11y-launcher__btn { width: 48px; height: 48px; } .a11y-launcher__btn svg { width: 30px; height: 30px; } .a11y-launcher__panel { width: calc(100vw - 24px); } } /* ============================================================== */ /* ===== Hover effects sur la nav principale (purple comme active) */ /* ============================================================== */ nav[aria-label="Navigation principale"] ul a:hover, nav[aria-label="Navigation principale"] ul a:focus-visible { color: #5C2483 !important; background: rgba(92, 36, 131, 0.06) !important; font-weight: 600 !important; } nav[aria-label="Navigation principale"] ul a:hover span[aria-hidden="true"], nav[aria-label="Navigation principale"] ul a:focus-visible span[aria-hidden="true"] { background: #5C2483 !important; } /* === Bouton widget accessibilité — fond blanc pour le nouveau logo === */ .a11y-launcher__btn { background: #FFFFFF !important; padding: 6px; } .a11y-launcher__btn:hover { background: #F1E8F8 !important; } .a11y-launcher__btn img { width: 40px !important; height: 40px !important; } /* ============================================================== */ /* ===== Hover effects sur les cartes (un seul actif à la fois) === */ /* ============================================================== */ /* Hover violet pour les box "engagement" (page Agir : Donner / Faire un don / Bénévolat / Mécène) */ .amar-engage-card { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .amar-engage-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(92, 36, 131, 0.25); } /* Hover violet pour les tarifs de don (page Agir : 30/80/200/500 €) */ .amar-tier-card { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; cursor: default; } .amar-tier-card:not(.featured):hover { background: rgb(92, 36, 131) !important; color: #FFFFFF !important; transform: translateY(-4px); box-shadow: 0 12px 30px rgba(92, 36, 131, 0.25); } .amar-tier-card:not(.featured):hover * { color: #FFFFFF !important; } /* Hover vert pour les box "Trois manières / Comment participer" (page Reconditionnement) */ .amar-3box-card { transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; cursor: default; } .amar-3box-card:hover { background: #1DAC9B !important; color: #FFFFFF !important; transform: translateY(-4px); box-shadow: 0 14px 32px rgba(29, 172, 155, 0.3); } .amar-3box-card:hover * { color: #FFFFFF !important; } /* Hover violet pour les box "Notre boucle vertueuse" (4 temps) */ .amar-boucle-card { transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .amar-boucle-card:hover { background: rgb(92, 36, 131) !important; color: #FFFFFF !important; transform: translateY(-4px); box-shadow: 0 14px 32px rgba(92, 36, 131, 0.3); } .amar-boucle-card:hover * { color: #FFFFFF !important; } /* Hover vert pour les box du "POURQUOI AMAR" sur la home (Mission / Vision / Valeurs) */ .amar-pourquoi-card { transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .amar-pourquoi-card:hover { background: #1DAC9B !important; transform: translateY(-4px); box-shadow: 0 14px 32px rgba(29, 172, 155, 0.3); } .amar-pourquoi-card:hover * { color: #FFFFFF !important; } /* Hover violet pour les 4 boxes "Une plateforme..." (Reconditionnement / Solidarité internationale / Traçabilité / Partenariats locaux) */ .amar-4box-card { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .amar-4box-card:hover { background: rgb(92, 36, 131) !important; color: #FFFFFF !important; border-color: rgb(92, 36, 131) !important; transform: translateY(-4px); box-shadow: 0 14px 32px rgba(92, 36, 131, 0.28); } .amar-4box-card:hover * { color: #FFFFFF !important; } .amar-4box-card:hover .ico { background: rgb(63, 22, 96) !important; color: #FFFFFF !important; } /* Hover vert pour les 3 boxes "Collecter / Reconditionner / Distribuer" */ .amar-3line-card { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .amar-3line-card:hover { background: #1DAC9B !important; color: #FFFFFF !important; border-color: #1DAC9B !important; transform: translateX(6px); box-shadow: 0 8px 20px rgba(29, 172, 155, 0.28); } .amar-3line-card:hover * { color: #FFFFFF !important; } .amar-3line-card:hover span[style*="background: var(--amar-mint)"] { background: rgba(255, 255, 255, 0.25) !important; color: #FFFFFF !important; } /* === Mode contraste élevé : visibilité du logo AMAR et des photos === */ /* Logo AMAR de la nav : fond blanc pour bien le faire ressortir sur le noir */ html.a11y-contrast nav[aria-label="Navigation principale"] a[aria-label*="AMAR"] { background: #FFEB3B !important; padding: 8px 14px !important; border-radius: 8px !important; } html.a11y-contrast nav[aria-label="Navigation principale"] img[alt="AMAR"] { filter: none !important; background: transparent !important; } /* Logo AMAR du footer : déjà inversé en blanc dans le HTML — on respecte ça */ html.a11y-contrast footer img[alt="AMAR"] { filter: none !important; background: transparent !important; } /* Garantir la visibilité de TOUTES les images */ html.a11y-contrast img, html.a11y-contrast picture { background-color: transparent !important; opacity: 1 !important; filter: none !important; } /* Conteneurs de bulles de la home : fond transparent + bordure jaune visible sur noir */ html.a11y-contrast .amar-bubble { background-color: transparent !important; border: 3px solid #FFEB3B !important; box-shadow: none !important; } /* Conteneurs absolus des bulles (parent div des bulles) : transparents */ html.a11y-contrast main > section:first-of-type div[style*="position: absolute"] { background-color: transparent !important; } /* Logos partenaires dans le bandeau défilant : fond clair pour les rendre lisibles */ html.a11y-contrast .amar-partner-track > div { background: rgba(255, 235, 59, 0.20) !important; } /* === Mode contraste élevé : compléments pour la home === */ /* Les bulles doivent passer AU-DESSUS du contenu central du hero */ html.a11y-contrast main > section:first-of-type div[style*="position: absolute"] { z-index: 50 !important; background-color: transparent !important; } html.a11y-contrast main > section:first-of-type div[style*="position: absolute"] > .amar-bubble { background-color: #000 !important; /* fond noir derrière la photo circulaire */ } /* ===================================================================== AMAR — Responsive design (mobile & tablette) Surcharge les styles inline avec !important via des sélecteurs d'attribut. Pas de modification du HTML (sauf le menu hamburger injecté par JS via responsive.js). Breakpoints : ≤ 1024px → tablette / petit laptop ≤ 768px → tablette portrait / mobile (déclenche le hamburger) ≤ 480px → mobile portrait ===================================================================== */ /* ============== Tablettes & petits laptops (≤ 1024px) ============== */ @media (max-width: 1024px) { /* Réduction des grandes paddings horizontales (56px → 32px) */ [style*="padding: 56px"], [style*="padding: 64px 56px"], [style*="padding: 80px 56px"], [style*="padding: 100px 56px"], [style*="padding: 120px 56px"], [style*="padding: 100px 56px 40px"], [style*="padding: 80px 56px 40px"], [style*="padding: 72px 56px"], [style*="padding: 40px 56px"], [style*="padding: 32px 56px"], [style*="padding: 20px 56px"], [style*="padding: 12px 56px"] { padding-left: 32px !important; padding-right: 32px !important; } /* Grilles asymétriques deviennent symétriques ou s'empilent */ [style*="grid-template-columns: 1.2fr 1fr"], [style*="grid-template-columns: 1.1fr 1fr"], [style*="grid-template-columns: 1fr 1.1fr"], [style*="grid-template-columns: 1fr 1.15fr 1fr"] { grid-template-columns: 1fr !important; } /* Footer (5 colonnes) → 2 colonnes */ [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } /* Gaps réduits */ [style*="gap: 80px"] { gap: 40px !important; } [style*="gap: 64px"] { gap: 32px !important; } /* Tailles de polices héros réduites */ [style*="font-size: 72px"] { font-size: 52px !important; } [style*="font-size: 64px"] { font-size: 48px !important; } } /* ============== Mobile / tablette portrait (≤ 768px) ============== */ @media (max-width: 768px) { /* === HAMBURGER MENU === */ /* Le menu desktop (ul) et le CTA sont masqués par défaut sur mobile */ nav[aria-label="Navigation principale"] > ul, nav[aria-label="Navigation principale"] > div[style*="display: flex"]:last-of-type { display: none !important; } /* Le bouton hamburger (injecté par JS) est visible */ .amar-hamburger { display: inline-flex !important; } /* État "menu ouvert" : drawer plein écran */ body.amar-nav-open { overflow: hidden; } body.amar-nav-open nav[aria-label="Navigation principale"] > ul { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; right: 0 !important; width: 86% !important; max-width: 360px !important; height: 100vh !important; background: #ffffff !important; padding: 88px 24px 32px !important; margin: 0 !important; z-index: 1100 !important; box-shadow: -8px 0 32px rgba(0,0,0,0.18) !important; gap: 8px !important; overflow-y: auto !important; align-items: stretch !important; } body.amar-nav-open nav[aria-label="Navigation principale"] > div[style*="display: flex"]:last-of-type { display: flex !important; position: fixed !important; right: 24px !important; bottom: 32px !important; z-index: 1101 !important; } body.amar-nav-open nav[aria-label="Navigation principale"] > ul li a { width: 100% !important; padding: 14px 14px !important; font-size: 17px !important; } /* Backdrop */ .amar-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1090; border: 0; padding: 0; cursor: pointer; } body.amar-nav-open .amar-nav-backdrop { display: block; } /* === HEADER : padding réduit, hauteur logo légèrement réduite === */ nav[aria-label="Navigation principale"] { padding: 14px 20px !important; gap: 12px !important; } nav[aria-label="Navigation principale"] img[alt="AMAR"] { height: 40px !important; } /* Bandeau d'annonce en haut */ [role="region"][aria-label="Annonce"] { padding: 10px 20px !important; font-size: 13px !important; } /* === Paddings de sections : grand → mobile === */ [style*="padding: 120px 56px"], [style*="padding: 100px 56px"], [style*="padding: 100px 56px 40px"], [style*="padding: 80px 56px"], [style*="padding: 80px 56px 40px"], [style*="padding: 72px 56px"], [style*="padding: 64px 56px"], [style*="padding: 40px 56px"] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; padding-bottom: 56px !important; } [style*="padding: 32px 56px"], [style*="padding: 20px 56px"], [style*="padding: 12px 56px"] { padding-left: 20px !important; padding-right: 20px !important; } /* Conteneurs internes très padds (cartes en cards) */ [style*="padding: 64px"]:not([style*=" 56px"]) { padding: 32px 24px !important; } /* === Grilles : tout en colonne === */ [style*="grid-template-columns: repeat(2, 1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns: repeat(5, 1fr)"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns: 1.2fr 1fr"], [style*="grid-template-columns: 1.1fr 1fr"], [style*="grid-template-columns: 1fr 1.1fr"], [style*="grid-template-columns: 1fr 1.15fr 1fr"], [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 24px !important; } /* === Typographie : titres XXL → mobile === */ [style*="font-size: 80px"] { font-size: 36px !important; } [style*="font-size: 72px"] { font-size: 34px !important; } [style*="font-size: 64px"] { font-size: 32px !important; } [style*="font-size: 58px"] { font-size: 30px !important; } [style*="font-size: 56px"] { font-size: 30px !important; } [style*="font-size: 52px"] { font-size: 28px !important; } [style*="font-size: 48px"] { font-size: 28px !important; } [style*="font-size: 44px"] { font-size: 26px !important; } [style*="font-size: 40px"] { font-size: 24px !important; } /* Corps de texte gros → mobile */ [style*="font-size: 22px"] { font-size: 17px !important; } [style*="font-size: 21px"] { font-size: 17px !important; } [style*="font-size: 20px"] { font-size: 17px !important; } [style*="font-size: 19px"] { font-size: 16px !important; } /* === Hauteurs d'images grandes → mobile === */ img[style*="height: 600px"] { height: 320px !important; } img[style*="height: 580px"] { height: 320px !important; } img[style*="height: 560px"] { height: 320px !important; } img[style*="height: 540px"] { height: 320px !important; } img[style*="height: 520px"] { height: 320px !important; } img[style*="height: 480px"] { height: 280px !important; } img[style*="height: 460px"] { height: 280px !important; } img[style*="height: 440px"] { height: 260px !important; } img[style*="height: 420px"] { height: 260px !important; } img[style*="height: 400px"] { height: 240px !important; } img[style*="height: 380px"] { height: 240px !important; } img[style*="height: 360px"] { height: 240px !important; } /* === Gaps & marges === */ [style*="gap: 80px"] { gap: 24px !important; } [style*="gap: 64px"] { gap: 24px !important; } [style*="gap: 48px"] { gap: 20px !important; } [style*="margin-bottom: 56px"] { margin-bottom: 32px !important; } [style*="margin-bottom: 48px"] { margin-bottom: 28px !important; } [style*="margin-bottom: 40px"] { margin-bottom: 24px !important; } /* === Border-radius très grand → réduit === */ [style*="border-radius: 32px"] { border-radius: 18px !important; } [style*="border-radius: 28px"] { border-radius: 16px !important; } [style*="border-radius: 24px"] { border-radius: 16px !important; } /* === Newsletter : empilement input + bouton === */ form[name="newsletter"] div[style*="display: flex; gap: 8px"] { flex-direction: column !important; } form[name="newsletter"] input[type="email"], form[name="newsletter"] button[type="submit"] { width: 100% !important; } /* === Footer : padding et stack === */ footer[role="contentinfo"] { padding: 48px 20px 24px !important; } footer[role="contentinfo"] [style*="display: flex; justify-content: space-between; align-items: center"] { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; text-align: left !important; } /* === Liste flex avec gap qui débordent === */ ul[style*="display: flex"][style*="gap: 24px"] { flex-wrap: wrap !important; gap: 12px !important; } /* === Bulles / éléments décoratifs absolus === */ /* Évite les bulles qui se chevauchent ou débordent */ [style*="width: 320px; height: 320px"], [style*="width: 360px; height: 360px"], [style*="width: 280px; height: 280px"] { display: none !important; } /* === Carrousel / arrows ronds → masquer si décoratif === */ div[aria-hidden="true"][style*="border-radius: 50%; border: 1px solid"] { display: none !important; } /* === Cartes statistiques / cards génériques === */ [style*="padding: 48px"] { padding: 28px 24px !important; } [style*="padding: 40px"] { padding: 24px 20px !important; } [style*="padding: 36px"] { padding: 24px 20px !important; } /* === Tableaux ou contenus qui débordent === */ main { overflow-x: hidden; } /* Hero badges/tags */ [style*="padding: 8px 18px"][style*="border-radius: 999px"] { font-size: 11px !important; } } /* ============== Mobile portrait étroit (≤ 480px) ============== */ @media (max-width: 480px) { /* Encore plus petit */ [style*="font-size: 72px"] { font-size: 28px !important; } [style*="font-size: 64px"] { font-size: 28px !important; } [style*="font-size: 58px"] { font-size: 26px !important; } [style*="font-size: 56px"] { font-size: 26px !important; } [style*="font-size: 52px"] { font-size: 24px !important; } [style*="font-size: 48px"] { font-size: 24px !important; } /* Paddings encore plus serrées */ [style*="padding: 120px 56px"], [style*="padding: 100px 56px"], [style*="padding: 100px 56px 40px"], [style*="padding: 80px 56px"], [style*="padding: 80px 56px 40px"], [style*="padding: 72px 56px"], [style*="padding: 64px 56px"], [style*="padding: 40px 56px"] { padding-left: 16px !important; padding-right: 16px !important; padding-top: 40px !important; padding-bottom: 40px !important; } [style*="padding: 32px 56px"], [style*="padding: 20px 56px"], [style*="padding: 12px 56px"] { padding-left: 16px !important; padding-right: 16px !important; } nav[aria-label="Navigation principale"] { padding: 12px 16px !important; } footer[role="contentinfo"] { padding: 40px 16px 24px !important; } /* Cards encore + serrées */ [style*="padding: 32px"] { padding: 22px 18px !important; } [style*="padding: 28px"] { padding: 20px 18px !important; } /* Buttons CTA : un peu + petits */ a[style*="padding: 16px 24px"], a[style*="padding: 14px 24px"], button[style*="padding: 16px 24px"] { padding: 12px 18px !important; font-size: 14px !important; } } /* ============== Bouton hamburger (styles communs, indép. du breakpoint) ============== */ .amar-hamburger { display: none; /* visible uniquement ≤ 768px via la media query */ width: 44px; height: 44px; background: transparent; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; cursor: pointer; padding: 0; align-items: center; justify-content: center; color: rgb(27, 18, 51); z-index: 1102; position: relative; flex-shrink: 0; } .amar-hamburger:hover { background: rgba(92, 36, 131, 0.06); } .amar-hamburger:focus-visible { outline: 3px solid rgb(92, 36, 131); outline-offset: 2px; } .amar-hamburger svg { width: 24px; height: 24px; pointer-events: none; } .amar-hamburger .amar-hamburger-close { display: none; } body.amar-nav-open .amar-hamburger { position: fixed; top: 14px; right: 16px; background: #fff; z-index: 1102; } body.amar-nav-open .amar-hamburger .amar-hamburger-open { display: none; } body.amar-nav-open .amar-hamburger .amar-hamburger-close { display: block; } /* ====== Corrections complémentaires : homepage hero & autres ====== */ @media (max-width: 768px) { /* Titre H1 avec white-space:nowrap — on autorise le retour à la ligne */ h1[style*="white-space: nowrap"], h2[style*="white-space: nowrap"] { white-space: normal !important; } /* spans nowrap (mots avec surligneur) restent groupés, c'est ok */ /* padding-inline élevé sur le hero homepage (21%) → 0 */ [style*="padding-inline: 21%"], [style*="padding-inline:21%"] { padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Bulles décoratives autour du hero homepage → masquées sur mobile (elles se chevauchent et débordent quand le hero rétrécit) */ section .amar-bubble { display: none !important; } /* Le conteneur du carrousel de bulles a min-height:460px qui crée du vide */ section [style*="min-height: 460px"] { min-height: 0 !important; } /* Hero centré : aligne à gauche pour mieux lire les longues lignes */ section [style*="text-align: center; position: relative; min-height"] { text-align: left !important; } section [style*="text-align: center; position: relative; min-height"] p { margin-left: 0 !important; margin-right: 0 !important; } section [style*="text-align: center; position: relative; min-height"] [style*="justify-content: center"] { justify-content: flex-start !important; flex-wrap: wrap !important; } /* Partner marquee : item flex 0 0 calc(... + 16vw) → garder mais limiter */ .amar-partner-track > div { flex-basis: 140px !important; width: 140px !important; max-width: 140px !important; } /* Drapeau / wave colorant sur les mots — la rotation peut déborder */ /* (les spans aria-hidden de surlignage) — on les laisse, ils sont contenus */ /* Whitespace : empêche tout débordement horizontal global */ html, body { max-width: 100vw; overflow-x: hidden; } /* Boutons CTA dans le hero : centrés sur desktop, gauche sur mobile */ div[style*="display: flex; gap: 18px"][style*="justify-content: center"] { justify-content: flex-start !important; } /* Images du carrousel sous le hero (3 grandes images horizontales) : déjà couvert par le stack des grilles, mais on s'assure que les imgs ne débordent pas */ section img[style*="height: 300px"] { height: 220px !important; } } /* === Carte / box CSS classes définies plus tôt mais avec flex column === */ @media (max-width: 768px) { /* Action boxes (homepage "Rejoignez l'aventure") déjà gérées par la grille, mais on réduit l'icône cercle si besoin */ .amar-action-box [style*="width: 56px; height: 56px"] { width: 48px !important; height: 48px !important; } /* 3-line cards (statistiques) sur diverses pages */ .amar-3line-card { padding: 24px !important; } /* Pourquoi cards */ .amar-pourquoi-card { padding: 24px !important; } .amar-pourquoi-card [style*="font-size: 56px"], .amar-pourquoi-card [style*="font-size: 48px"] { font-size: 36px !important; } } /* ====== Corrections finales mobile (v16) ====== */ @media (max-width: 768px) { /* Bandeau d'annonce : laisse la place au widget d'accessibilité (haut-droite) */ [role="region"][aria-label="Annonce"] { padding-right: 64px !important; } /* Nav simple .main-nav (pages accessibilité / mentions légales) : passe en wrap pour ne jamais déborder */ nav.main-nav { flex-wrap: wrap !important; gap: 10px 16px !important; padding: 14px 20px !important; } nav.main-nav a { font-size: 15px !important; } } /* Garantie universelle anti-débordement horizontal (toutes largeurs mobiles) */ @media (max-width: 768px) { html, body { max-width: 100% !important; overflow-x: hidden !important; } /* Toute image ne dépasse jamais son conteneur */ img { max-width: 100%; } } /* ===================================================================== AMAR — Ajustements mobile ciblés (v17) Corrections A1, A4, A10, A11, A12, A13 — mobile uniquement. ===================================================================== */ @media (max-width: 768px) { /* --- A1 : texte "Soutenus et accompagnés par nos partenaires…" passe de 5-6 lignes à ~3 lignes. Le conteneur parent garde un padding latéral de 56px (non couvert ailleurs) qui étrangle le texte → on le réduit, et on élargit la zone de texte. --- */ [style*="padding: 0px 56px"] { padding-left: 16px !important; padding-right: 16px !important; } .amar-partners-intro { font-size: 12px !important; line-height: 1.55 !important; max-width: 100% !important; } /* --- A4 : photos qui se chevauchent (grille 2x2 avec margin-top négatif en quinconce). Une fois empilées, on neutralise les décalages verticaux pour éviter le chevauchement. --- */ [style*="grid-template-columns: 1fr 1fr"] > img[style*="margin-top: 32px"], [style*="grid-template-columns: 1fr 1fr"] > img[style*="margin-top: -32px"] { margin-top: 0 !important; } /* --- A10 : plus d'air entre la carte "Partenariats locaux" / la photo et la section "Pourquoi AMAR". La section blanche (Partenariats + photo) reçoit un padding-bas plus généreux sur mobile. --- */ section[style*="padding: 120px 56px 80px"] { padding-bottom: 72px !important; } /* La carte flottante "350+ appareillages" est décalée à gauche (left: -40px) → on la recadre pour ne pas déborder. --- */ [style*="position: absolute"][style*="left: -40px"] { left: 12px !important; right: 12px !important; } /* --- A11 : plus d'air autour de la photo de la section "Petit geste, grand impact" (grille 1fr 1.1fr empilée). --- */ section[style*="padding: 120px 56px"] [style*="grid-template-columns: 1fr 1.1fr"] { gap: 40px !important; } /* --- A12 : masquer une image en version mobile uniquement --- */ .amar-hide-mobile { display: none !important; } /* --- A13 : bande "AMAR en chiffres" (3 stats dans une grille de 4 colonnes). Empilée en 1 colonne, on remplace les bordures verticales par des séparateurs horizontaux et on centre. --- */ .amar-chiffres-band { border: 0 !important; } .amar-chiffres-band > div { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.35) !important; padding: 28px 24px !important; } .amar-chiffres-band > div:last-child { border-bottom: 0 !important; } } /* ===================================================================== AMAR — Page "Donner du matériel" : FAQ accordéon + galerie ===================================================================== */ /* Masque le marqueur par défaut des
(flèche native) */ .amar-faq summary::-webkit-details-marker { display: none; } .amar-faq summary::marker { content: ""; } /* Icône +/− : bascule en − quand le panneau est ouvert */ .amar-faq[open] .amar-faq-icon { transform: rotate(45deg); } @media (max-width: 768px) { /* Galerie photos : une seule colonne sur mobile, sans spans ni hauteur fixe */ .amar-gallery { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; } .amar-gallery img { grid-column: auto !important; grid-row: auto !important; height: 240px !important; } /* FAQ : un peu moins de padding latéral */ .amar-faq { padding-left: 18px !important; padding-right: 18px !important; } .amar-faq summary { font-size: 17px !important; } } /* Garantit que l'attribut hidden masque bien les panneaux FAQ (le display:flex inline l'emporterait sinon sur le comportement par défaut de [hidden]) */ [hidden] { display: none !important; }