/* AAAS v2 — neutralise les conteneurs Elementor autour des widgets du nouveau site. Front : les enveloppes Elementor ne créent aucune boîte, le DOM se lit comme le modèle (header sticky, sections pleine largeur). Éditeur : boîtes conservées pour les poignées. */ body.aaas-v2:not(.elementor-editor-active) .elementor, body.aaas-v2:not(.elementor-editor-active) .e-con, body.aaas-v2:not(.elementor-editor-active) .e-con-inner, body.aaas-v2:not(.elementor-editor-active) .elementor-section-wrap, body.aaas-v2:not(.elementor-editor-active) .elementor-widget[class*="elementor-widget-aaas2-"], body.aaas-v2:not(.elementor-editor-active) .elementor-widget[class*="elementor-widget-aaas2-"] > .elementor-widget-container { display: contents; } body.aaas-v2.elementor-editor-active .e-con { padding: 0; gap: 0; --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; } body.aaas-v2.elementor-editor-active .e-con > .elementor-widget { width: 100%; max-width: 100%; } /* Éditeur : les animations d'apparition ne doivent pas masquer une section re-rendue. */ body.elementor-editor-active .reveal, body.elementor-editor-active .reveal.pre { opacity: 1 !important; transform: none !important; } /* Elementor pose ses propres variables (--display, --border…) sur ses conteneurs : on redonne aux widgets les valeurs du :root du modèle (copie conforme de aaas.css). */ body .elementor-widget[class*="elementor-widget-aaas2-"] { --bg: #0A0A0D; --bg-2: #101014; --surface: #15151A; --surface-2: #1A1A21; --surface-3: #22222B; --text: #F2F2F4; --muted: #A3A3AD; --dim: #6B6B77; --violet: #6E0DD0; --glow: #9B66FF; --pink: #FF3CAC; --ok: #03E78B; --warn: #FFB547; --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.13); --grad: linear-gradient(135deg, #6E0DD0 0%, #FF3CAC 100%); --grad-soft: linear-gradient(135deg, rgba(110,13,208,.18), rgba(255,60,172,.10)); --display: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif; --serif: 'Helvetica Neue', Helvetica, Arial, sans-serif; --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: Menlo, Monaco, 'Courier New', monospace; --radius-card: 24px; --radius: 14px; --radius-btn: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --shadow-glow: 0 0 80px -10px rgba(155,102,255,0.45); --shadow-elev: 0 24px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--border); --wrap: 1200px; --gutter-l: max(20px, env(safe-area-inset-left, 0px)); --gutter-r: max(20px, env(safe-area-inset-right, 0px)); } /* Correction du modèle (mise en page seulement, aucun texte touché) : sous 1000 px, la colonne unique des articles prenait la largeur minimale du tableau comparatif (560 px) et la page débordait horizontalement en mobile. minmax(0,1fr) laisse le tableau défiler dans son cadre .table-wrap. */ @media (max-width: 1000px) { body.aaas-v2 .article-layout { grid-template-columns: minmax(0, 1fr); } } /* Correction du modèle (mise en page seulement) : en mobile, un libellé de bouton long (« Recevoir mon plan d'automatisation → ») dépassait de son cadre, faute de retour à la ligne. */ @media (max-width: 600px) { body.aaas-v2 main .btn { white-space: normal; max-width: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; } } /* Correction du modèle (mise en page seulement) : menu burger ouvert (≤ 1200 px), le flou d'arrière-plan de l'en-tête (backdrop-filter) faisait de l'en-tête le bloc de référence du menu « fixed » : le panneau était coupé à la hauteur de l'en-tête (seules 2 entrées visibles). Menu ouvert = en-tête sans flou, fond plein. */ @media (max-width: 1200px) { html.nav-open body.aaas-v2 .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); } /* Le panneau part sous la barre téléphone + la barre de navigation (36 + 72 px) : logo et bouton de fermeture entiers. */ html.nav-open body.aaas-v2 .menu { top: calc(env(safe-area-inset-top, 0px) + 109px); } } /* Correctif en-tête et pied (1.0.6) : le thème hello-elementor contraint toute balise .site-header / .site-footer (max-width 500/600/800/1140 px selon la largeur, marges automatiques, padding-inline 10 px sous 576 px). Les en-tête et pied du modèle portent ces mêmes classes : ils sortaient en boîte étroite centrée qui flottait sur le contenu au défilement. On leur rend la pleine largeur ; les .wrap internes gardent la largeur du contenu. */ body.aaas-v2 .site-header, body.aaas-v2 .site-footer { max-width: none; width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } /* Raccords entre sections (1.0.6, mise en page seulement, aucun texte touché) : chaque frontière de section retombe sur la même teinte de fond (--bg), sans filet ni coupure nette. 1) Les images et vidéos d'arrière-plan se fondent en haut et en bas vers le fond de la section. */ body.aaas-v2 .has-bg > .bg-media { --fade: min(200px, 22%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); } /* Le premier écran garde son image en haut (sous l'en-tête) : fondu en bas seulement. */ body.aaas-v2 .hero.has-bg > .bg-media { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade)), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade)), transparent 100%); } body.aaas-v2 .media-band > .bg-media { --fade: min(140px, 24%); } /* 2) Les bandes à fond plus clair (--bg-2) se raccordent par un dégradé au lieu d'un filet. */ body.aaas-v2 .band, body.aaas-v2 .stack, body.aaas-v2 .media-band { border-block: 0; } body.aaas-v2 .band { background: linear-gradient(180deg, var(--bg) 0, var(--bg-2) min(160px, 18%), var(--bg-2) calc(100% - min(160px, 18%)), var(--bg) 100%); } body.aaas-v2 .stack { background: linear-gradient(180deg, var(--bg) 0, var(--bg-2) 30%, var(--bg-2) 70%, var(--bg) 100%); } body.aaas-v2 .site-footer { border-top: 0; background: linear-gradient(180deg, var(--bg) 0, var(--bg-2) 120px, var(--bg-2) 100%); } /* 3) Grands écrans : le voile « gauche/droite » s'ancre sur la colonne de contenu, pas sur la largeur de l'écran (sinon, au-delà de 1600 px, une large bande noire à gauche et l'image seule à droite). */ @media (min-width: 1600px) { body.aaas-v2 .ov-left::after { background: linear-gradient(90deg, rgba(10,10,13,.62) 0, rgba(10,10,13,.97) calc(50% - var(--wrap) / 2), rgba(10,10,13,.86) calc(50% - 100px), rgba(10,10,13,.35) calc(50% + 380px), rgba(10,10,13,.62) 100%); } body.aaas-v2 .ov-right::after { background: linear-gradient(270deg, rgba(10,10,13,.62) 0, rgba(10,10,13,.97) calc(50% - var(--wrap) / 2), rgba(10,10,13,.86) calc(50% - 100px), rgba(10,10,13,.35) calc(50% + 380px), rgba(10,10,13,.62) 100%); } } /* Sous-menu Services : le lien « Tous les services → » héritait de la grille des entrées (.mega a : colonne d'icône de 40 px) et sortait coupé à droite, sur ordinateur comme dans le menu burger. */ body.aaas-v2 .mega .mega-foot a { display: inline-flex; grid-template-columns: none; padding: 6px 0; border-radius: 0; background: none; } @media (max-width: 1200px) { body.aaas-v2 .mega-foot { flex-wrap: wrap; row-gap: 10px; } } /* Grands écrans : la colonne de contenu (en-tête compris, même variable) s'élargit pour ne pas flotter au milieu d'un écran de 1920 ou 2560 px. */ @media (min-width: 1800px) { body .elementor-widget[class*="elementor-widget-aaas2-"] { --wrap: 1320px; } } @media (min-width: 2300px) { body .elementor-widget[class*="elementor-widget-aaas2-"] { --wrap: 1440px; } } /* Mobile et tablette (≤ 1024 px) : la bulle WhatsApp flottante recouvrait un bouton du premier écran, des champs de formulaire et le texte au bord droit. La barre d'action du bas (WhatsApp + Audit gratuit) est affichée dès l'arrivée et remplace la bulle : WhatsApp reste joignable à tout moment, sans rien masquer. Le bas de page est dégagé. */ @media (max-width: 1024px) { body.aaas-v2 .mobile-cta { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 12px var(--gutter-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); background: rgba(10,10,13,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); transform: none; } body.aaas-v2 .mobile-cta .btn { flex: 1; } body.aaas-v2 .wa-float { display: none; } body.aaas-v2 { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } @media (min-width: 761px) and (max-width: 1024px) { body.aaas-v2 .mobile-cta { padding-left: max(var(--gutter-l), calc(50% - 300px)); padding-right: max(var(--gutter-r), calc(50% - 300px)); } } /* Mobile (≤ 520 px) : les rangées de boutons passent en pleine largeur, empilées. Dans les cartes d'appel à l'action, la rangée alignée à droite laissait le second bouton décalé sous le premier. */ @media (max-width: 520px) { body.aaas-v2 main .btn-row { justify-content: flex-start !important; } body.aaas-v2 main .btn-row > .btn { flex: 1 1 100%; justify-content: center; } } /* 1.0.8 — QA avancée du 24/10/2026 (racine, 3 formats). */ /* Étiquette posée sur une photo d'article (« Relation client ») : texte violet sur fond translucide, illisible sur les zones claires de l'image. Fond sombre opaque derrière l'étiquette, dans tous les formats. */ body.aaas-v2 .post-thumb .lbl, body.aaas-v2 .thumb-art .lbl { background: rgba(10,10,13,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(155,102,255,.45); color: #C9B3FF; } /* Couvertures d'e-book en mobile (≤ 480 px) : à 100 px de large, le sur-titre se coupait (« E- / BOOK ») et le titre long poussait le nombre de pages hors de la couverture. Couverture un peu plus large, textes ajustés à la place. */ @media (max-width: 480px) { body.aaas-v2 .ebook { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; } body.aaas-v2 .ebook-cover { padding: 10px 9px; } body.aaas-v2 .ebook-cover small { font-size: 7.5px; letter-spacing: .08em; white-space: nowrap; } body.aaas-v2 .ebook-cover b { font-size: 14px; line-height: 1.12; overflow-wrap: anywhere; } } /* Pied de page : un libellé sur deux lignes se coupe à un endroit lisible (« loi 09-08 » ne se coupe plus sur le tiret). */ body.aaas-v2 .foot-col a { text-wrap: balance; }/* Espacements utilitaires dans les cartes : « .card p { margin: 0 } » (plus spécifique) annulait « .mt-1 / .mt-2 / .mt-3 », d'où un paragraphe collé sous son titre (cartes de la page Services, entre autres). Même défaut dans le modèle statique. */ body.aaas-v2 .card .mt-1 { margin-top: 12px; } body.aaas-v2 .card .mt-2 { margin-top: 24px; } body.aaas-v2 .card .mt-3 { margin-top: 40px; }body.aaas-v2 .card p.eyebrow { margin-bottom: 14px; } /* 1.0.9 — Pied : « Confidentialité & loi 09-08 » se coupait sur le tiret (« 09- / 08 ») à 390 et 1024 px. Un nowrap déborderait de la colonne (mesuré à 320-390 et 1024 px) : le libellé passe sur deux lignes stables « Confidentialité / & loi 09-08 » tant que la colonne est étroite (≤ 1199 px), une seule ligne au-delà. */ @media (max-width: 1199px) { body.aaas-v2 .foot-col a[href*="politique-confidentialite"] { display: inline-block; max-width: 10.5em; } } /* 1.0.10 — QA avancée du 24/10/2026 (20 pages × 3 formats). Mise en page seulement : aucun texte ajouté, retiré ni modifié. */ /* A. Articles : sous 1000 px la colonne latérale (sommaire + carte service) passe sous l'article, sur une seule colonne. Elle n'a alors plus rien à accompagner : collante (sticky, top 110 px) elle ne bougeait pas, mais tout outil qui la remet dans le flux la décalait de 110 px sur la section suivante (carte coupée, vide au-dessus du sommaire). Position normale. */ @media (max-width: 1000px) { body.aaas-v2 .article-aside { position: static; } } /* B. Tableaux comparatifs en mobile (≤ 680 px) : le tableau de 560 à 640 px défilait dans son cadre sans aucun indice, la dernière colonne restait hors de l'écran et le bord coupait un mot. Chaque ligne s'empile : le critère sur toute la largeur, puis les réponses côte à côte, sous les en-têtes de colonne alignés de la même façon. Tout tient dans l'écran. */ @media (max-width: 680px) { body.aaas-v2 .table-wrap { overflow-x: visible; } body.aaas-v2 .table-wrap table, body.aaas-v2 .prose .table-wrap table { display: block; min-width: 0; width: 100%; font-size: 14px; } body.aaas-v2 .table-wrap thead, body.aaas-v2 .table-wrap tbody { display: block; } body.aaas-v2 .table-wrap tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border); } body.aaas-v2 .table-wrap table:has(tr > :nth-child(4)) tr { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.aaas-v2 .table-wrap tbody tr:last-child { border-bottom: 0; } body.aaas-v2 .table-wrap thead tr { background: var(--bg-2); border-radius: 18px 18px 0 0; } body.aaas-v2 .table-wrap th, body.aaas-v2 .table-wrap td { display: block; min-width: 0; border-bottom: 0; padding: 10px 14px; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; } body.aaas-v2 .table-wrap tr > :first-child { grid-column: 1 / -1; padding-top: 14px; padding-bottom: 2px; } body.aaas-v2 .table-wrap tbody tr > :not(:first-child) { padding-bottom: 14px; } body.aaas-v2 .table-wrap tr > :nth-child(n+3) { border-left: 1px solid var(--border); } body.aaas-v2 .table-wrap th { background: none; } body.aaas-v2 .table-wrap table:has(tr > :nth-child(4)) { font-size: 13px; } body.aaas-v2 .table-wrap table:has(tr > :nth-child(4)) th, body.aaas-v2 .table-wrap table:has(tr > :nth-child(4)) td { padding-left: 10px; padding-right: 10px; } body.aaas-v2 .table-wrap table:has(tr > :nth-child(4)) th { letter-spacing: .06em; } } /* C. Lueur et images du premier écran : la lueur violette (90 % de sa hauteur sous le bloc) était tranchée net au bas du premier écran. Un fondu vers le fond de page, sous le contenu, raccorde le bas du bloc à la section suivante. */ body.aaas-v2 .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(180px, 35%); background: linear-gradient(180deg, rgba(10,10,13,0), var(--bg)); z-index: 1; pointer-events: none; } /* En une colonne (≤ 900 px), le premier écran devient très haut et son image de fond est agrandie jusqu'à 4 fois : ses arêtes et ses chiffres ressortaient en lignes nettes et en lettres fantômes derrière le texte. Image adoucie. */ @media (max-width: 900px) { body.aaas-v2 .hero.has-bg > .bg-media img, body.aaas-v2 .hero.has-bg > .bg-media video { filter: blur(18px); transform: scale(1.08); } } /* D. Bloc d'appel final (≤ 900 px, colonne unique) : les boutons restaient alignés à droite sous un titre aligné à gauche. */ @media (max-width: 900px) { body.aaas-v2 .cta-band .btn-row { justify-content: flex-start !important; } } /* E. Études de cas : la photo (tableau de bord, code) restait lisible derrière le chiffre clé, les étiquettes et le texte. Voile plus dense, photo adoucie, étiquettes sur fond sombre. */ body.aaas-v2 .case-side .thumb-photo { overflow: hidden; } body.aaas-v2 .case-side .thumb-photo img { filter: blur(2px) saturate(.85); transform: scale(1.05); } body.aaas-v2 .case-side .thumb-photo::after { background: linear-gradient(170deg, rgba(10,10,13,.84), rgba(10,10,13,.95) 65%), linear-gradient(135deg, rgba(110,13,208,.30), transparent 60%); } body.aaas-v2 .case-side .chip { background: rgba(10,10,13,.72); } /* F. Cartes des fondateurs en mobile (≤ 520 px) : la photo occupait une colonne de 96 px et le texte se serrait sur 55 % de la largeur. Photo au-dessus, texte sur toute la largeur. */ @media (max-width: 520px) { body.aaas-v2 .person { grid-template-columns: minmax(0, 1fr); } } /* G. Mineurs. */ /* Durées des agents (accueil) : « 2 à 3 semaines » ne passe plus sur deux lignes, le libellé de gauche se replie à sa place. */ body.aaas-v2 main a > span.dim.mono:last-child { white-space: nowrap; flex: none; } body.aaas-v2 main a:has(> span.dim.mono:last-child) > span:first-child { min-width: 0; } /* Témoignages (≥ 1201 px) : la pastille de résultat reste à droite de l'auteur sur les quatre cartes. */ @media (min-width: 1201px) { body.aaas-v2 .quote .who { flex-wrap: nowrap; column-gap: 8px; } body.aaas-v2 .quote .who > span:first-child { flex: 1 1 auto; min-width: 0; } body.aaas-v2 .quote .who .kpi-pill { flex: none; } } /* Formulaire d'inscription en colonne étroite (blog 1366 : e-mail sur 134 px, « Email professic » ; blog 1024 : 89 px). Selon la largeur réelle du formulaire : sous 400 px, champs empilés ; de 400 à 600 px, prénom et e-mail côte à côte, bouton dessous sur toute la largeur. En mobile (≤ 640 px d'écran), la présentation empilée d'origine est conservée. */ body.aaas-v2 .promo form { container-type: inline-size; } @container (max-width: 399px) { body.aaas-v2 .promo .inline-form { grid-template-columns: minmax(0, 1fr); } } @container (min-width: 400px) and (max-width: 600px) { body.aaas-v2 .promo .inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.aaas-v2 .promo .inline-form > :last-child { grid-column: 1 / -1; } } @media (max-width: 640px) { body.aaas-v2 .promo .inline-form { grid-template-columns: minmax(0, 1fr); } body.aaas-v2 .promo .inline-form > :last-child { grid-column: auto; } } /* Article Make / n8n / Zapier en mobile : le titre « Et quand faut-il passer au code ? » se coupait sur le trait d'union (« faut- / il »). Ce titre seul est réparti autrement ; les autres titres gardent leur répartition équilibrée. */ @media (max-width: 600px) { body.aaas-v2 .prose h2#code { text-wrap: pretty; } } /* Grilles de 3 ou 5 cartes passées sur 2 colonnes (641-1000 px) : la dernière carte, seule, se centre. */ @media (min-width: 641px) and (max-width: 1000px) { body.aaas-v2 .g3 > :nth-child(3):last-child, body.aaas-v2 .g3 > :nth-child(5):last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 20px) / 2); } } /* Signature d'article en mobile : le point séparateur restait seul au bout de la ligne de l'auteur. */ @media (max-width: 600px) { body.aaas-v2 .byline > span:nth-child(2) { flex: 1 1 calc(100% - 80px); } body.aaas-v2 .byline > .dim:nth-child(3) { display: none; } } @media (max-width: 386px) { body.aaas-v2 .byline > .dim { display: none; } body.aaas-v2 .byline > span:not(.dim):not(.ph):not(:nth-child(2)) { flex-basis: 100%; } } /* « Ce que comprend la mission » (≥ 901 px) : la carte de la liste se centre face à la colonne de gauche. */ @media (min-width: 901px) { body.aaas-v2 .split[style*="align-items:start"] > .card:last-child:has(> .checks) { align-self: center; } } /* 1.0.11 — Articles sous 1000 px : deux sommaires visibles. Le modèle prévoit un sommaire repliable en tête d'article (.mobile-toc) et masque la colonne latérale sous 1000 px, mais sa règle « .article-aside { display: grid } », écrite après la requête média, l'annulait : le sommaire complet de la colonne se retrouvait empilé sous l'article, en double (même défaut dans le modèle statique). On garde le sommaire de tête et la carte service ; seul le sommaire de la colonne est masqué. Aucun texte modifié. */ @media (max-width: 1000px) { body.aaas-v2 .article-aside > .toc { display: none; } }