/* Aqua Mega Menu - fond blanc, panneau gauche, overlay sombre, cascade 3 colonnes */ /* Couleurs et typos = Global Styles Elementor (custom properties --e-global-*), fallbacks en dur */ .amm, .amm-overlay { --amm-text: var(--e-global-color-31dcc7e, #3B5C5E); --amm-accent: var(--e-global-color-6c75135, #84A1A2); --amm-line: rgba(59,92,94,.14); --amm-font-sans: var(--e-global-typography-text-font-family, 'Josefin Sans'), sans-serif; --amm-font-serif: var(--e-global-typography-primary-font-family, 'Cormorant Garamond'), serif; } /* Burger : couleur du kit PAR DEFAUT partout. Blanc UNIQUEMENT dans l'etat transparent du snippet psb-home-header : .js-home-header:not(.is-solid) (is-solid pose au scroll, rien au top). Scope body:has(.js-hero-section) = uniquement les pages a hero (ou le snippet est actif), pour que les pages SANS hero gardent le burger fonce des le haut. */ .amm-burger span { background: var(--e-global-color-7596cc0, #84A1A2); } body:has(.js-hero-section) .js-home-header:not(.is-solid) .amm-burger span { background: #FFFFFF; } /* Anti-heritage theme : jamais de hover rose dans le panneau */ .amm-panel a:hover, .amm-panel a:focus { color: var(--amm-accent) !important; } /* Burger : deux traits fins decales */ .amm-burger { background: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer; padding: 10px 6px; display: inline-flex; flex-direction: column; gap: 6px; } .amm-burger:hover, .amm-burger:focus, .amm-burger:active, .amm-burger:focus-visible { background: transparent !important; outline: none; } .amm-burger span { display: block; width: 28px; height: 1.5px; background: var(--e-global-color-7596cc0, #84A1A2); transition: transform .3s ease, opacity .3s ease; } .amm-burger span:last-child { width: 19px; margin-left: 9px; } /* Overlay sombre plein ecran */ .amm-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(20,32,33,0); transition: background .35s ease; } .amm-overlay.amm-visible { background: rgba(20,32,33,.45); } /* Panneau blanc glissant depuis la gauche — s'élargit quand une section est ouverte */ .amm-panel { position: absolute; top: 0; left: 0; height: 100%; background: #FFFFFF; color: var(--amm-text); width: 380px; max-width: 100%; transform: translateX(-100%); transition: transform .38s cubic-bezier(.22,.8,.26,1), width .3s ease; display: flex; flex-direction: column; overflow: hidden; } .amm-overlay.amm-visible .amm-panel { transform: translateX(0); } .amm-panel.amm-sub-open { width: 720px; max-width: 94vw; } .amm-panel.amm-cards-open { width: 1060px; max-width: 94vw; } .amm-card-off { display: none !important; } .amm-l3-inline { padding: 12px 0 16px; } .amm-l3-inline .amm-card { margin-bottom: 14px; } .amm-l2 a.amm-cards-active { color: var(--amm-accent); } /* Reset scopé : neutralise les styles du thème dans le panneau */ .amm-panel ul, .amm-panel li { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; list-style: none; } .amm-panel a { line-height: 1.45; } .amm-panel p { margin: 0; } .amm-panel-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 36px 26px 26px; } .amm-close { position: absolute; right: 18px; top: 26px; } body.admin-bar .amm-overlay { top: 32px; } @media (max-width: 782px) { body.admin-bar .amm-overlay { top: 46px; } } .amm-brand { font-family: var(--amm-font-serif); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; } .amm-close { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--amm-text); padding: 2px 6px; } /* Colonnes */ .amm-cols { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } .amm-l1 { width: 360px; flex: 0 0 auto; display: flex; flex-direction: column; padding: 18px 26px calc(34px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; } .amm-l1, .amm-l2, .amm-l3 { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .amm-l2 .amm-l3 { position: static; width: auto; border: none; padding: 20px 0 8px; display: block; max-height: none; overflow: visible; } .amm-l1 ul { list-style: none; margin: 0; padding: 0; } .amm-l1-link { display: flex !important; align-items: center; gap: 14px; padding: 15px 2px !important; margin: 0 !important; color: var(--amm-text); text-decoration: none; font-family: var(--amm-font-sans); font-size: 16px; font-weight: 400; border-bottom: 1px solid var(--amm-line); transition: color .2s ease; } .amm-l1-link i { width: 20px; text-align: center; font-size: 15px; color: var(--amm-accent); flex: 0 0 auto; } .amm-ico { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; display: inline-block; filter: brightness(0) saturate(100%) invert(66%) sepia(11%) saturate(500%) hue-rotate(135deg) brightness(93%) contrast(84%); } .amm-l1-link:hover, .amm-l1-link.amm-active { color: var(--amm-accent); } .amm-chev { margin-left: auto; flex: 0 0 auto; font-size: 22px; line-height: 1; opacity: .75; border: none !important; transform: none !important; width: auto; height: auto; font-family: Georgia, serif; } .amm-logo { max-height: 60px; width: auto; display: block; filter: none !important; } @media (min-width: 1025px) { .amm-l1 ul { margin-bottom: 48px !important; } } .amm-l1-link span, .amm-l2 ul a { text-transform: capitalize; } /* Carte promo + CTA + pied */ .amm-promo { margin-top: auto; display: block; border: 1px solid var(--amm-accent) !important; border-radius: 10px; padding: 14px 16px !important; color: var(--amm-text) !important; text-decoration: none; font-family: var(--amm-font-sans); font-size: 13.5px; line-height: 1.45; transition: background .2s ease; } .amm-promo:hover { background: rgba(132,161,162,.08); } .amm-cta { display: inline-block; align-self: center; width: auto; margin-top: 18px; background: var(--amm-accent) !important; color: #fff !important; text-align: center; text-decoration: none; padding: 12px 34px !important; border-radius: 30px; font-family: var(--amm-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: capitalize; transition: filter .2s ease; } .amm-cta:hover { filter: brightness(.94); } .amm-cta-solo { margin-top: auto !important; } .amm-foot { margin-top: 20px; font-family: var(--amm-font-sans); font-size: 13px; } .amm-langs a { color: var(--amm-text); text-decoration: none; opacity: .6; } .amm-langs a.amm-lang-current { opacity: 1; font-weight: 600; } /* Niveau 2 */ .amm-l2 { width: 320px; flex: 0 0 auto; border-left: 1px solid var(--amm-line); padding: 18px 24px; overflow-y: auto; } .amm-l2-title { font-family: var(--amm-font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--amm-accent); margin: 4px 0 8px; } .amm-l2-title a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .amm-l2 ul { list-style: none; margin: 0; padding: 0; } .amm-l2 a { display: flex; align-items: center; padding: 13px 2px; color: var(--amm-text); text-decoration: none; font-family: var(--amm-font-sans); font-size: 15px; border-bottom: 1px solid var(--amm-line); transition: color .2s ease; } .amm-l2 a:hover { color: var(--amm-accent); } .amm-back { display: none; background: none; border: none; color: var(--amm-accent); font-family: var(--amm-font-sans); font-size: 13px; cursor: pointer; padding: 4px 0 10px; } .amm-back::before { content: "‹"; margin-right: 6px; font-size: 16px; } /* Niveau 3 : cartes featured image */ .amm-l3 { width: 340px; flex: 0 0 auto; border-left: 1px solid var(--amm-line); padding: 22px 24px; overflow-y: auto; } .amm-card { display: block; margin-bottom: 18px; text-decoration: none; color: var(--amm-text); } .amm-card img, .amm-card-ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; } .amm-card-ph { background: linear-gradient(135deg, #84A1A2, #3B5C5E); } .amm-card-label { display: block; margin-top: 8px; font-family: var(--amm-font-sans); font-size: 13.5px; letter-spacing: .04em; } .amm-card:hover .amm-card-label { color: var(--amm-accent); } /* Etats caches */ .amm-l2[hidden], .amm-l3[hidden] { display: none; } /* Scroll lock applique par JS sur body */ body.amm-locked { overflow: hidden; } /* Tablette : l1 + l2 (cartes integrees au niveau 2 via JS) */ @media (max-width: 1024px) { .amm-l1 { width: 330px; } .amm-l2 { width: 320px; } .amm-panel { width: 350px; } .amm-panel.amm-sub-open, .amm-panel.amm-cards-open { width: 670px; max-width: 96vw; } } /* Mobile : plein ecran + drill-down par ecrans */ @media (max-width: 767px) { .amm-panel { width: 100%; } .amm-panel.amm-sub-open { width: 100%; max-width: 100%; } .amm-cols { position: relative; overflow: hidden; } .amm-l1 { width: 100%; transition: transform .32s ease; } .amm-panel.amm-sub-open .amm-l1 { transform: translateX(-14%); opacity: .25; pointer-events: none; } .amm-l2 { position: absolute; inset: 0; width: 100%; background: #fff; border-left: none; transform: translateX(100%); transition: transform .32s ease; z-index: 2; } .amm-l2.amm-current { transform: translateX(0); } .amm-l2[hidden] { display: block; visibility: hidden; } .amm-l2.amm-current[hidden] { visibility: visible; } .amm-back { display: inline-block; } } /* ===== v1.1.4 : logo panneau, respirations, CTA pill ===== */ .amm-logo { filter: none !important; max-height: 60px; width: auto; } .amm-panel-head { justify-content: center; position: relative; padding: 36px 26px 26px; } .amm-close { position: absolute; right: 18px; top: 26px; } .amm-l1 { padding: 18px 26px calc(34px + env(safe-area-inset-bottom, 0px)); } .amm-foot { margin-top: 20px; } .amm-cta { align-self: center; width: auto; display: inline-block; padding: 12px 34px !important; font-size: 13px; letter-spacing: .05em; text-transform: capitalize; border-radius: 30px; background: var(--e-global-color-6c75135, #84A1A2) !important; color: #fff !important; font-family: var(--e-global-typography-e3de32c-font-family, 'Josefin Sans'), sans-serif; } .amm-cta-solo { margin-top: auto !important; } /* ===== v1.5.0 : carte niveau 3 mobile lisible + CTA + langues drapeaux ===== */ .amm-l3-inline { width: 100%; padding: 6px 0 14px; } .amm-l3-inline .amm-card { display: block; width: 100%; margin: 0 0 16px; } .amm-l3-inline .amm-card img, .amm-l3-inline .amm-card-ph { width: 100%; aspect-ratio: 16/9; border-radius: 12px; } .amm-l3-inline .amm-card-label { display: block !important; position: static !important; width: 100%; margin-top: 8px; text-align: center; white-space: normal; overflow: visible; font-size: 14px; letter-spacing: .04em; color: var(--amm-text); } /* Bouton centré verticalement dans l'espace libre entre le menu et les langues */ .amm-l1 ul { flex: 0 0 auto; } .amm-cta { display: block; width: auto; min-width: 200px; max-width: 300px; margin: auto auto 0 !important; text-align: center; } .amm-foot { text-align: center; margin: auto auto 0 !important; padding-top: 22px; } .amm-langs { display: inline-flex; gap: 22px; align-items: center; justify-content: center; } .amm-lang { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; letter-spacing: .06em; } .amm-flag { font-size: 17px; line-height: 1; } @media (max-width: 767px) { .amm-cta { width: 82%; max-width: 340px; margin: auto auto 0 !important; } .amm-langs { gap: 30px; } } /* Vignette promo au-dessus du bouton : même style que les cartes colonne 3, desktop only */ .amm-promo { display: block; margin: auto auto 16px; width: 100%; max-width: 300px; text-decoration: none; border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; } .amm-promo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; box-shadow: none; transition: filter .25s ease; } .amm-promo:hover img { filter: brightness(.94); } .amm-promo span { display: block; margin-top: 8px; text-align: center; font-family: var(--amm-font-sans); font-size: 13.5px; letter-spacing: .04em; color: var(--amm-text); } /* Desktop seulement : la vignette meuble l'espace, donc le bouton se colle dessous */ @media (min-width: 1025px) { .amm-cta:not(.amm-cta-solo) { margin-top: 0 !important; } } /* Tablette/mobile : pas de vignette → bouton centré dans l'espace libre */ @media (max-width: 1024px) { .amm-promo { display: none; } .amm-cta { margin: auto auto 0 !important; } } /* AMM_COM_EXT — blocs ajoutes pour .com */ .amm-overlay .amm-tagline{ margin:6px 0 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; } .amm-overlay .amm-foot-tpl{ margin-bottom:14px; font-size:14px; } .amm-overlay .amm-foot-tpl a{ color:inherit; } .amm-overlay .amm-card-btn{ display:inline-block; margin:6px 0 14px; padding:8px 16px; border-radius:999px; background:var(--amm-accent,#486269); color:#fff; font-size:13px; text-decoration:none; } .amm-overlay .amm-card-btn:hover{ filter:brightness(.92); } .amm-overlay .amm-listing{ margin-top:18px; } .amm-overlay .amm-listing-title{ margin:0 0 10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; } /* AMM_COM_RENDU — corrections de rendu .com (20/09) */ /* 1. logo puis phrase, empiles et centres */ .amm-overlay .amm-panel-head{ flex-direction:column; } .amm-overlay .amm-brandwrap{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; } .amm-overlay .amm-tagline{ margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; } /* 2. espace entre les drapeaux */ .amm-overlay .amm-langs{ display:inline-flex; gap:26px; align-items:center; } /* 3. croix de fermeture : plus petite, arrondi sobre */ .amm-overlay .amm-close{ font-size:20px; line-height:1; width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; top:20px; right:16px; } .amm-overlay .amm-close:hover{ background:rgba(0,0,0,.05); } /* 6 & 7. bouton epingle : reste en haut, le contenu defile dessous */ .amm-overlay .amm-l3{ position:relative; overflow-y:auto; } .amm-overlay .amm-pin{ position:sticky; top:0; z-index:3; display:block; text-align:center; margin:0 0 14px; padding:11px 18px; border-radius:999px; text-decoration:none; background:var(--amm-accent,#486269); color:#fff; font-size:13px; letter-spacing:.04em; } .amm-overlay .amm-pin:hover{ filter:brightness(.92); } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG2 (2026-09-26) — les 3 colonnes tiennent toujours dans le panneau. Cause de la troncature : .amm-l1 (360) + .amm-l2 (320) + .amm-l3 (340) = 1020px de colonnes en `flex: 0 0 auto`, alors que .amm-panel.amm-cards-open est plafonne a `max-width: 94vw`. Sous ~1085px de fenetre, 94vw < 1020px et `.amm-cols { overflow: hidden }` coupe la 3e colonne a droite. Correctif : les colonnes deviennent compressibles (flex-shrink + min-width:0) et la 3e prend le reste. Selecteurs GLOBAUX : .amm-overlay est teleporte dans le body, {{WRAPPER}} n'a aucun effet dessus. Portee : enfants directs de .amm-cols uniquement, pour ne pas toucher au .amm-l3 imbrique de la variante inline (.amm-l2 .amm-l3). ─────────────────────────────────────────────────────────────────────────── */ .amm-overlay .amm-cols > .amm-l1 { flex: 0 1 360px; min-width: 0; } .amm-overlay .amm-cols > .amm-l2 { flex: 0 1 320px; min-width: 0; } .amm-overlay .amm-cols > .amm-l3 { flex: 1 1 280px; min-width: 0; width: auto; } /* Fenetres etroites : on recupere de la place sur les marges plutot que de rogner. */ @media (max-width: 1140px) { .amm-overlay .amm-panel.amm-cards-open { max-width: 98vw; } .amm-overlay .amm-cols > .amm-l1 { flex-basis: 300px; padding-left: 16px; padding-right: 16px; } .amm-overlay .amm-cols > .amm-l2 { flex-basis: 260px; padding-left: 14px; padding-right: 14px; } .amm-overlay .amm-cols > .amm-l3 { padding-left: 14px; padding-right: 14px; } } /* La carte ne deborde jamais de sa colonne. */ .amm-overlay .amm-l3 .amm-card, .amm-overlay .amm-l3 .amm-card img { max-width: 100%; } .amm-overlay .amm-l3 .amm-card-label { overflow-wrap: anywhere; } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG3 (2026-09-26) — vignettes N3 uniformes, jamais hors ecran. Cause : L103 dimensionne les vignettes en `aspect-ratio: 4/3`, donc leur HAUTEUR suit la LARGEUR de la colonne. Depuis AMM_ORG2 la colonne .amm-l3 a un flex-grow, elle s'elargit selon la place restante -> l'image grandit et deborde. Une hauteur FIXE rend les vignettes identiques quelle que soit la largeur du panneau et quelle que soit la featured image du projet. Portee : enfants directs de .amm-cols uniquement — la variante inline (.amm-l3-inline, mobile, 16/9) garde son comportement. Selecteurs GLOBAUX : .amm-overlay est teleporte dans le body. Hauteur ajustable sur la seule ligne `height` ci-dessous. ─────────────────────────────────────────────────────────────────────────── */ .amm-overlay .amm-cols > .amm-l3 .amm-card img, .amm-overlay .amm-cols > .amm-l3 .amm-card-ph { width: 100%; height: 200px; /* <-- hauteur commune a toutes les vignettes N3 */ aspect-ratio: auto; /* neutralise le 4/3 qui liait hauteur et largeur */ object-fit: cover; /* recadre sans deformer */ object-position: center; display: block; } /* La colonne N3 ne depasse jamais le bas de l'overlay : elle scrolle en interne. */ .amm-overlay .amm-cols > .amm-l3 { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* Garde-fou : la colonne ne s'elargit pas indefiniment sur tres grand ecran. */ .amm-overlay .amm-cols > .amm-l3 { max-width: 420px; } @media (max-width: 1140px) { .amm-overlay .amm-cols > .amm-l3 .amm-card img, .amm-overlay .amm-cols > .amm-l3 .amm-card-ph { height: 160px; } } /* AMM_ORG5 (2026-09-26) — bloc annonces du volet 3 (5 dernieres opportunites). Les vignettes heritent deja de la taille uniforme AMM_ORG3 (.amm-card dans .amm-l3). Ici, uniquement le prix et le titre du bloc. Selecteurs globaux. */ .amm-overlay .amm-listing-price { display: block; margin-top: 2px; font-family: var(--amm-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--amm-accent); } .amm-overlay .amm-listing-all { margin-top: 4px; } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG7 (2026-09-26) — colonne N1 : vignette CTA bornee, rien qui deborde. La vignette de .amm-promo n'avait AUCUNE contrainte de taille : sur une image haute elle poussait la colonne au-dela du bas de la fenetre. Selecteurs globaux (.amm-overlay est teleporte dans le body). ─────────────────────────────────────────────────────────────────────────── */ .amm-overlay .amm-promo img { display: block; width: 100%; height: 120px; /* <-- hauteur de la vignette CTA, ajustable ici */ object-fit: cover; object-position: center; border-radius: 8px; } .amm-overlay .amm-promo { flex: 0 0 auto; } /* La colonne N1 reste dans la hauteur de l'overlay et scrolle si besoin. `min-height: 0` est indispensable : sans lui un enfant flex refuse de retrecir sous sa hauteur de contenu et `overflow-y` ne s'applique jamais. */ .amm-overlay .amm-cols > .amm-l1 { max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .amm-overlay .amm-cols { max-height: 100%; min-height: 0; } @media (max-height: 760px) { .amm-overlay .amm-promo img { height: 90px; } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG9 (2026-09-26) — remplace AMM_ORG8. Les masquages CSS d'ORG8 (« See our Listing », bascule texte) sont SUPPRIMES : ces elements ont ete retires du template de pied lui-meme (125783 / 126673), donc plus rien a masquer. Surtout, garder des surcharges ici aurait ecrase les reglages que Severine fera dans ce template depuis Elementor. Ne restent que des valeurs de base, toutes rendues reglables par des controles Elementor (section « Espacements » du widget). ─────────────────────────────────────────────────────────────────────────── */ .amm-overlay .amm-langs { display: flex; gap: 14px; align-items: center; padding: 6px 0 2px; } .amm-overlay .amm-foot { padding-top: 6px; } .amm-overlay .amm-promo { margin-top: 14px; } .amm-overlay .amm-promo img { height: 150px; } .amm-overlay .amm-cta { margin-top: 10px; } .amm-overlay .amm-l1 ul { margin-bottom: 8px; } /* Le pied herite du template : on ne force plus ses espacements, on se contente d'empecher un debordement horizontal. */ .amm-overlay .amm-foot-tpl { max-width: 100%; } .amm-overlay .amm-foot-tpl img { max-width: 100%; height: auto; } @media (max-height: 860px) { .amm-overlay .amm-promo img { height: 120px; } } @media (max-height: 760px) { .amm-overlay .amm-promo img { height: 96px; } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG10 (2026-09-26) — apercu du menu dans l'editeur Elementor. Ne s'applique QUE si le rendu a pose la classe `amm-edit`, ce que seul le mode edition fait. En front, aucune de ces regles ne peut s'activer. ─────────────────────────────────────────────────────────────────────────── */ /* L'overlay revient dans le flux : plus de position fixe, plus de plein ecran. */ .amm-overlay.amm-edit { position: relative !important; inset: auto !important; z-index: 1 !important; background: transparent !important; height: auto !important; /* AMM_ORG13 : l'overlay porte `hidden` en front ; en edition l'attribut n'est pas emis, mais on neutralise aussi tout ce qui pourrait le masquer. */ display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; } .amm-overlay.amm-edit[hidden] { display: block !important; } /* Le panneau est normalement decale hors ecran par une transform. */ .amm-overlay.amm-edit .amm-panel { position: relative !important; transform: none !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 620px; box-shadow: none !important; border: 1px dashed rgba(132,161,162,.6); } /* AMM_ORG11 : ces regles forcaient TOUS les panneaux N2 et TOUTES les cartes N3 a s'afficher en meme temps -> mur d'images illisible. Supprimees. L'ouverture d'UNE section est desormais faite par le script, en rejouant l'interaction reelle : `hidden` reprend donc son role normal et cliquer une autre entree N1 bascule proprement de section, comme en front. */ .amm-overlay.amm-edit .amm-cols { overflow: visible !important; } /* Les colonnes peuvent s'etendre : dans l'editeur on privilegie la lisibilite sur la fidelite au rendu final. */ .amm-overlay.amm-edit .amm-cols > .amm-l1, .amm-overlay.amm-edit .amm-cols > .amm-l2, .amm-overlay.amm-edit .amm-cols > .amm-l3 { max-height: none !important; overflow: visible !important; } /* Repere discret pour se souvenir qu'il s'agit d'un apercu d'edition. */ .amm-overlay.amm-edit::before { content: "Aperçu d'édition — le menu reste masqué en ligne"; display: block; font: 600 11px/1.6 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #84A1A2; padding: 4px 0; } /* AMM_ORG14 : date des articles dans le bloc blog. */ .amm-overlay .amm-listing-date { display: block; margin-top: 2px; font-size: 11.5px; letter-spacing: .04em; opacity: .7; } /* AMM_ORG15 — bloc contact / compte rendu par le widget. Repartis sur toute la largeur, a plat : ni cadre ni fond, icone collee au texte. Reprend exactement la mise en forme obtenue dans le template, mais pilotable depuis le widget. */ .amm-overlay .amm-contact { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; width: 100%; padding: 4px 0 2px; } .amm-overlay .amm-contact-item { display: inline-flex; align-items: center; gap: 8px; color: var(--amm-text); text-decoration: none; font-family: var(--amm-font-sans); font-size: 13.5px; background: none; border: 0; padding: 0; } .amm-overlay .amm-contact-item:last-child { justify-self: end; text-align: right; } .amm-overlay .amm-contact-item img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; display: block; } .amm-overlay .amm-contact-item:hover { color: var(--amm-accent); } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG16 (2026-09-26) — reglages MOBILE uniquement (<= 767 px). Le desktop n'est pas touche : tout est dans la media query. Ces valeurs restent surchargeables par les controles « Espacements » (qui emettent !important) si tu veux affiner sans code. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* 1 & 4 — le panneau occupe l'ecran sans deborder, marges resserrees. */ .amm-overlay .amm-panel, .amm-overlay .amm-panel.amm-sub-open, .amm-overlay .amm-panel.amm-cards-open { width: 100%; max-width: 100%; } .amm-overlay .amm-l1 { padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); } .amm-overlay .amm-l2 { padding: 12px 16px; width: 100%; } /* 1 — entrees de niveau 1 resserrees. */ .amm-overlay .amm-l1-link { padding: 9px 2px !important; } .amm-overlay .amm-l1 ul { margin-bottom: 4px !important; } /* 2 — entrees de niveau 2 resserrees. */ .amm-overlay .amm-l2 a { padding: 8px 2px; } .amm-overlay .amm-l2-title { margin: 2px 0 4px; } /* 3 — vignettes N3 nettement plus petites. La variante inline (.amm-l3-inline) est celle utilisee en mode compact : c'est elle qui portait des images pleine hauteur. */ .amm-overlay .amm-l3-inline .amm-card img, .amm-overlay .amm-l3-inline .amm-card-ph, .amm-overlay .amm-cols > .amm-l3 .amm-card img, .amm-overlay .amm-cols > .amm-l3 .amm-card-ph { height: 110px !important; aspect-ratio: auto !important; object-fit: cover; } .amm-overlay .amm-l3-inline .amm-card { margin-bottom: 10px; } .amm-overlay .amm-card-label { font-size: 12.5px; margin-top: 5px; } /* 5 — chevrons et retour bien visibles. */ .amm-overlay .amm-chev { opacity: 1 !important; font-size: 26px; color: var(--amm-accent); padding-left: 8px; } .amm-overlay .amm-back { display: inline-flex !important; align-items: center; font-size: 14px; font-weight: 600; color: var(--amm-accent); padding: 6px 2px; } .amm-overlay .amm-back::before { font-size: 20px; margin-right: 8px; } .amm-overlay .amm-close { font-size: 26px; width: 40px; height: 40px; color: var(--amm-text); opacity: 1; } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG19 (2026-09-26) — passe unique : mobile (A) + vignettes carrees (B). Remplace ce que faisaient ORG3 / ORG7 / ORG16 sur les tailles de vignettes : une hauteur figee combinee a une largeur variable donnait un ratio different selon l'orientation, d'ou la deformation en rotation. `aspect-ratio` ne depend d'aucun breakpoint et tient donc en portrait, paysage et desktop. ─────────────────────────────────────────────────────────────────────────── */ /* ── B.8 — toutes les vignettes carrees, tous formats ─────────────────────── */ .amm-overlay .amm-card img, .amm-overlay .amm-card-ph, .amm-overlay .amm-l3-inline .amm-card img, .amm-overlay .amm-l3-inline .amm-card-ph, .amm-overlay .amm-cols > .amm-l3 .amm-card img, .amm-overlay .amm-cols > .amm-l3 .amm-card-ph, .amm-overlay .amm-promo img { aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; max-height: none !important; max-width: 100% !important; /* A.5 : jamais hors du viewport */ object-fit: cover !important; object-position: center; display: block; } .amm-overlay .amm-promo img { max-width: 220px !important; } /* Les logos et icones ne sont pas des vignettes : ratio naturel conserve. */ .amm-overlay .amm-logo, .amm-overlay .amm-ico, .amm-overlay .amm-contact-item img { aspect-ratio: auto !important; } .amm-overlay .amm-contact-item img { width: 20px !important; height: 20px !important; } /* ── A — MOBILE uniquement ────────────────────────────────────────────────── */ @media (max-width: 767px) { /* A.1 — le volet 1 occupe toute la largeur. */ .amm-overlay .amm-panel, .amm-overlay .amm-panel.amm-sub-open, .amm-overlay .amm-panel.amm-cards-open { width: 100vw !important; max-width: 100vw !important; left: 0 !important; } .amm-overlay .amm-cols { width: 100% !important; max-width: 100vw !important; } .amm-overlay .amm-cols > .amm-l1 { width: 100% !important; max-width: 100vw !important; flex: 1 1 100% !important; } /* A.2 — le volet 2 debordait (403 px de large, decale a droite sur un ecran de 375). On le remet dans le flux, pleine largeur, sans transform. */ .amm-overlay .amm-l2 { position: static !important; left: 0 !important; right: auto !important; width: 100% !important; max-width: 100vw !important; transform: none !important; border-left: 0 !important; box-sizing: border-box !important; } .amm-overlay .amm-cols > .amm-l3 { position: static !important; width: 100% !important; max-width: 100vw !important; transform: none !important; border-left: 0 !important; } /* A.6 — espacements resserres. */ .amm-overlay .amm-l1-link { padding: 9px 2px !important; } .amm-overlay .amm-l1 ul { margin-bottom: 4px !important; } .amm-overlay .amm-l2 a { padding: 8px 2px; } .amm-overlay .amm-l2-title { margin: 2px 0 4px; } .amm-overlay .amm-l1 { padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); } .amm-overlay .amm-l2 { padding: 12px 16px; } /* A.4 — chevrons visibles sur le volet 1 ET le volet 2. */ .amm-overlay .amm-chev, .amm-overlay .amm-l2 a.amm-has-cards { display: flex; align-items: center; justify-content: space-between; } /* A.7 — Fermer / Retour colles en haut des panneaux longs. */ .amm-overlay .amm-panel-head { position: sticky; top: 0; z-index: 30; background: #fff; } .amm-overlay .amm-back { display: inline-flex !important; align-items: center; position: sticky; top: 0; z-index: 25; background: #fff; width: 100%; padding: 8px 0; margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--amm-accent); } .amm-overlay .amm-back::before { font-size: 20px; margin-right: 8px; } .amm-overlay .amm-close { font-size: 26px; width: 40px; height: 40px; opacity: 1; } /* A.3 — bouton de fermeture du volet 3 (insere par le script). */ .amm-overlay .amm-l3-close { display: block; margin: 0 0 6px auto; width: 32px; height: 32px; line-height: 1; font-size: 22px; color: var(--amm-accent); background: none; border: 0; cursor: pointer; } /* A.5 — rien ne depasse horizontalement. */ .amm-overlay .amm-panel, .amm-overlay .amm-l2, .amm-overlay .amm-l3, .amm-overlay .amm-l3-inline { overflow-x: hidden; } .amm-overlay img { max-width: 100%; } } /* Le bouton de fermeture du volet 3 n'a pas de raison d'exister hors mobile. */ @media (min-width: 768px) { .amm-overlay .amm-l3-close { display: none; } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG23 (2026-09-27) P2 — Le menu etait inutilisable en mobile : .amm-cols restait en `flex-direction: row` (disposition desktop multi-colonnes), donc le volet 1 s'ecrasait a ~42 px (libelles tronques) et le volet 2 vivait a cote a ~54 px au lieu d'etre un panneau plein ecran. On repasse la colonne en pile et on fait du volet 2 un vrai panneau coulissant, ouvert par la classe .amm-current que pose deja le script. P3 — La vignette CTA prend toute la largeur du volet 1, desktop et mobile. ─────────────────────────────────────────────────────────────────────────── */ /* P3 — CTA pleine largeur, partout. */ .amm-overlay .amm-cta { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } @media (max-width: 767px) { /* P2.1 — fin de la rangee horizontale. */ .amm-overlay .amm-cols { flex-direction: column !important; position: relative; overflow: visible !important; } /* P2.2 — volet 1 plein ecran, libelles entiers. */ .amm-overlay .amm-cols > .amm-l1 { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } .amm-overlay .amm-l1-link { white-space: normal; } /* P2.3 — volet 2 : panneau plein ecran, hors champ tant qu'il n'est pas ouvert. `.amm-current` est la classe posee par openSection() dans script.js. */ .amm-overlay .amm-l2 { position: absolute !important; top: 0; left: 0; right: 0; width: 100% !important; max-width: 100vw !important; height: 100%; z-index: 20; background: #fff; transform: translateX(100%); transition: transform .25s ease; border-left: 0 !important; overflow-y: auto; } .amm-overlay .amm-l2.amm-current { transform: translateX(0); } /* Le volet 3 suit la meme logique de pile. */ .amm-overlay .amm-cols > .amm-l3 { position: static !important; width: 100% !important; max-width: 100vw !important; border-left: 0 !important; } /* P2.5 — chevrons et retour bien visibles. */ .amm-overlay .amm-chev { opacity: 1 !important; color: var(--amm-accent) !important; font-size: 24px; } .amm-overlay .amm-back { display: inline-flex !important; align-items: center; position: sticky; top: 0; z-index: 25; background: #fff; width: 100%; padding: 10px 0 8px; font-size: 14px; font-weight: 600; color: var(--amm-accent); } .amm-overlay .amm-back::before { font-size: 20px; margin-right: 8px; } /* P2.4 — plus rien ne depasse du viewport. */ .amm-overlay .amm-l2, .amm-overlay .amm-l3, .amm-overlay .amm-card, .amm-overlay .amm-cta, .amm-overlay .amm-foot, .amm-overlay .amm-foot-tpl { max-width: 100% !important; box-sizing: border-box; } .amm-overlay .amm-panel { overflow-x: hidden; } .amm-overlay img { max-width: 100%; } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG24 (2026-09-27) — quatre finitions. ─────────────────────────────────────────────────────────────────────────── */ /* FIX 1 — la vignette CTA prend toute la largeur du volet 1, comme le bouton. Elle etait bridee par le `max-width: 220px` que j'avais pose pour l'empecher de grossir : ce garde-fou n'a plus lieu d'etre puisque la colonne est bornee. */ .amm-overlay .amm-promo, .amm-overlay .amm-promo img { width: 100% !important; max-width: 100% !important; } @media (max-width: 767px) { /* FIX 3 — de l'air a gauche et a droite. Le padding est pose sur les colonnes et non sur .amm-panel : le panneau en porte deja un, et les cumuler donnerait une marge double. */ .amm-overlay .amm-l1, .amm-overlay .amm-l2, .amm-overlay .amm-cols > .amm-l3, .amm-overlay .amm-foot { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG26 (2026-09-27) — trois correctifs qui n'avaient pas pris. Lecon : sans le prefixe `.amm-overlay`, mes regles mobile etaient battues par les regles de base, elles-memes en !important. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* B — de l'air sur les volets 2 et 3 aussi, pas seulement le 1. */ .amm-overlay .amm-l2, .amm-overlay .amm-cols > .amm-l3 { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; } .amm-overlay .amm-back, .amm-overlay .amm-l2-title { padding-left: 2px !important; } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG27 (2026-09-27) — bloc mobile definitif, mesure a 375 px. Remplace la vignette carree d'ORG26 : la demande est desormais un BANDEAU pleine largeur (160 px de haut), pas un carre. `aspect-ratio: auto` est indispensable pour casser le 1:1 impose par la regle de base, elle-meme en !important. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* 1 — volet 1 : decoller la premiere lettre ET le chevron du bord. */ .amm-overlay .amm-l1 { padding-left: 20px !important; padding-right: 20px !important; } /* 2 — volets 2 et 3 : meme respiration. */ .amm-overlay .amm-l2, .amm-overlay .amm-cols > .amm-l3 { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; } .amm-overlay .amm-back, .amm-overlay .amm-l2-title { padding-left: 2px !important; } /* 3 — vignette en bandeau pleine largeur. */ .amm-overlay .amm-card img, .amm-overlay .amm-card-ph, .amm-overlay .amm-cols > .amm-l3 .amm-card img, .amm-overlay .amm-cols > .amm-l3 .amm-card-ph, .amm-overlay .amm-l3-inline .amm-card img, .amm-overlay .amm-l3-inline .amm-card-ph { width: 100% !important; max-width: 100% !important; height: 160px !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG29 (2026-09-26) — chevron vertical volet 2 + en-tete collante mobile. Etat ouvert = `.amm-cards-active`, pose par showCards() (script.js:127) et retire par la branche mobile (script.js:225). Ce n'est NI `.amm-active` NI `aria-expanded` : ces deux-la n'existent pas sur cet element. Le conteneur qui defile en mobile est `.amm-l2` (position:absolute, height:100%, overflow-y:auto — bloc P2.3). `.amm-back`, `.amm-l2-title` et le `.amm-l3-inline` insere par script.js:119 sont TOUS ses descendants : `position: sticky` s'y resout donc correctement. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* 1 — item du volet 2 qui ouvre des vignettes : le chevron `›` pivote vers le bas pour annoncer un accordeon, et vers le haut une fois ouvert. */ .amm-overlay .amm-l2 a.amm-has-cards .amm-chev { display: inline-block; transform: rotate(90deg); transition: transform .2s ease; } .amm-overlay .amm-l2 a.amm-has-cards.amm-cards-active .amm-chev { transform: rotate(-90deg); } /* 2 — le bandeau logo (194 px) ne reste plus colle : il mangeait tout le haut du volet et repoussait le contenu utile hors de l'ecran. */ .amm-overlay .amm-panel-head { position: static !important; } /* 3 — barre de retour collante. Hauteur RENDUE DETERMINISTE (12 + 20 + 12 = 44 px) pour que le `top` du titre ci-dessous soit exact et non estime. */ .amm-overlay .amm-back { position: sticky !important; top: 0 !important; z-index: 26 !important; background: #fff !important; width: 100% !important; margin: 0 !important; padding: 12px 0 !important; line-height: 20px !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); } /* 4 — titre de section collant juste sous le retour : on sait en permanence ou l'on se trouve et comment remonter, meme au milieu d'une longue liste. */ .amm-overlay .amm-l2-title { position: sticky !important; top: 44px !important; z-index: 25 !important; background: #fff !important; margin: 0 !important; padding: 8px 0 10px !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); } } /* ─────────────────────────────────────────────────────────────────────────── AMM_ORG30 (2026-09-26) — ligne ouverte collante + barres opaques. CORRECTION sur la consigne : `position: sticky` pose sur le LIEN (`a.amm-cards-active`) ne colle a rien. Le bloc contenant d'un sticky est son PARENT ; ici le parent est le `
  • `, haut d'une seule ligne : la course disponible est nulle, l'element ne se decolle jamais. Le `.amm-l3-inline` est insere comme FRERE du `
  • ` dans le meme `