/* ==========================================================================
   DESIGN SYSTEM (consolide depuis le plugin Simple CSS, 16 juin).
   Source unique du design neobrutaliste, versionne dans git, deploye en SFTP.
   Simple CSS reste actif comme filet de securite tant que la migration
   n'est pas verifiee sur toutes les pages ; il sera desactive ensuite.
   Charge APRES GenerateBlocks ; les correctifs de style.css chargent apres ce fichier.
   ========================================================================== */

/* ============================================================ IRONCLAD DESIGN SYSTEM v8.0 Fred Marketing Web ============================================================ PHILOSOPHIE v8 : - Zéro classe par défaut. Tu tapes du texte, le design s'applique. - Les boutons GenerateBlocks sont stylés automatiquement. - Les espacements entre blocs sont automatiques. - Les classes servent UNIQUEMENT aux exceptions (10% des cas). EXCEPTIONS DISPONIBLES (si tu en as besoin) : - Boutons : .btn-yellow (jaune), .btn-ghost (blanc), .btn-lg (grand) - Titres : .hero-title (immense, pour H1 accueil uniquement) - Textes : .eyebrow (mini-titre mauve au-dessus H2) - Cartes : .cyber-card (+ .cyber-card-yellow, .cyber-card-purple) - Sections : .section-lg (grande) ou .section-sm (compacte) Principes techniques : - Neobrutalisme cyber (stroke noir, ombres dures) - Performance Core Web Vitals (CLS-safe, GPU-only hovers) - Accessibilité WCAG 2.2 AA - Override GeneratePress : !important chirurgical ============================================================ *//* ============================================================ 1. TOKENS ============================================================ */:root { /* Palette marque */ --teal: #4DC7C1; --purple: #7C4DFF; --yellow: #FFD900; --black: #121212; --white: #F8FAFC; --grey-100: #EEEEEE; --border-subtle: rgba(0, 0, 0, 0.1); /* Trait signature */ --stroke: 4px; /* Ombres dures */ --shadow-xs: 2px 2px 0 #000; --shadow-sm: 4px 4px 0 #000; --shadow-md: 6px 6px 0 #000; --shadow-lg: 10px 10px 0 #000; --shadow-xl: 12px 12px 0 #000; /* Espacements */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2.5rem; /* 40px */ --space-xl: 5rem; /* 80px */ --space-2xl: 7.5rem; /* 120px */ --card-padding: clamp(30px, 5vw, 60px); --gutter: clamp(20px, 4vw, 40px); --container-max: 1200px; --content-max: 720px; /* Typographie */ --font-display: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Échelle typographique fluide */ --fs-hero: clamp(2.5rem, 5vw + 1rem, 5rem); --fs-h1: clamp(2rem, 4vw + 0.5rem, 3.5rem); --fs-h2: clamp(1.75rem, 3vw + 0.5rem, 2.75rem); --fs-h3: clamp(1.375rem, 2vw + 0.5rem, 2rem); --fs-h4: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem); --fs-lead: clamp(1.125rem, 1vw + 0.75rem, 1.5rem); --fs-body: clamp(1rem, 0.5vw + 0.9rem, 1.125rem); --fs-sm: clamp(0.875rem, 0.5vw + 0.75rem, 1rem); --fs-column-title: clamp(1.5rem, 2.5vw + 0.5rem, 2.75rem); /* Poids */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tight: -0.04em; --t-fast: 0.1s; --t-step: steps(2);}@media (max-width: 48em) { :root { --stroke: 3px; } /* Section spacing réduit mobile */ /* Prevent horizontal overflow Clip sur les wrappers extérieurs seulement — pas sur entry-content (clippe les borders) */html { overflow-x: hidden; }body { overflow-x: hidden; }.site-content,.site-header,.site-footer,.site-main { max-width: 100%; overflow-x: clip; }.main-navigation,.inside-navigation,.inside-navigation.grid-container { max-width: 100% !important; overflow-x: clip; }/* Fix alignwide GP : empêche le bleed de créer du scroll */.entry-content .alignwide,.entry-content .alignfull { max-width: 100% !important; margin-inline: 0 !important; width: 100% !important;}.section-lg { padding-block: var(--space-lg) !important; } .section-sm { padding-block: var(--space-md) !important; } /* CTA grid 1 col mobile */ .cta-grid { grid-template-columns: 1fr !important; } .cta-animation-wrap { display: none; } /* Stats bar KPI : 2 col */ }/* ============================================================ 2. RESET & A11Y ============================================================ */@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }}:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: var(--stroke) solid var(--purple); outline-offset: 2px;}/* ============================================================ 3. BASE ============================================================ */html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--teal) var(--black);}body { background-color: var(--teal); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}::selection { background: var(--yellow); color: #000; }::-webkit-scrollbar { width: 12px; }::-webkit-scrollbar-track { background: var(--black); }::-webkit-scrollbar-thumb { background: var(--teal); border: 2px solid var(--black); }/* ============================================================ 4. TYPOGRAPHIE AUTOMATIQUE ------------------------------------------------------------ Tous les titres ont le style Ironclad automatiquement. Les paragraphes ont la lecture optimisée automatiquement. ============================================================ */:is(h1,h2,h3,h4,h5,h6) { font-family: var(--font-display) !important; font-weight: var(--fw-black) !important; text-transform: uppercase; color: #000 !important; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; word-break: keep-all; max-inline-size: 100%;}@supports (word-break: auto-phrase) { :is(h1,h2,h3,h4,h5,h6) { word-break: auto-phrase; }}h1 { font-size: var(--fs-h1); text-shadow: 2px 2px 0 var(--yellow) !important; }h2 { font-size: var(--fs-h2); text-shadow: 2px 2px 0 var(--yellow) !important; }/* Override ombres sur fonds colorés — évite shadow invisible sur jaune */.cyber-card-yellow :is(h1,h2,h3,h4) { text-shadow: 1px 1px 0 rgba(0,0,0,0.15) !important;}.cyber-card-purple :is(h1,h2,h3,h4) { text-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;}h3 { font-size: var(--fs-h3); }h4 { font-size: var(--fs-h4); }p { font-size: var(--fs-body); line-height: var(--lh-normal); text-wrap: pretty; max-inline-size: 65ch;}/* AUTO : le premier qui suit directement un H1 = style sous-titre Hero Ça évite d'ajouter la classe .hero-subtitle partout */h1 + p { font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: var(--lh-normal); max-width: 600px; margin-block-start: var(--space-md) !important;}/* AUTO : le premier qui suit un H2 = style lead (accroche de section) */h2 + p { font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: var(--lh-snug); max-width: 600px;}/* ============================================================ 5. ESPACEMENTS AUTOMATIQUES ENTRE BLOCS ------------------------------------------------------------ Les margins sont gérées automatiquement selon l'ordre des blocs. Tu n'as plus à configurer manuellement. ============================================================ *//* Espacement par défaut après un titre */:is(h1,h2,h3,h4) + * { margin-block-start: var(--space-md) !important;}/* Espacement entre paragraphes consécutifs */p + p { margin-block-start: var(--space-sm) !important;}/* Espacement entre un paragraphe et un bouton */p + .wp-block-generateblocks-button-wrapper,p + .wp-block-button,p + .wp-block-buttons { margin-block-start: var(--space-lg) !important;}/* Espacement après un bouton avant un autre bloc */.wp-block-generateblocks-button-wrapper + *,.wp-block-button + *,.wp-block-buttons + * { margin-block-start: var(--space-lg) !important;}/* ============================================================ 6. BOUTONS AUTOMATIQUES ------------------------------------------------------------ TOUS les boutons GenerateBlocks et Gutenberg sont stylés automatiquement en "mauve standard". Modificateurs disponibles : .btn-yellow → fond jaune au lieu de mauve .btn-ghost → fond blanc .btn-lg → plus grand (hero, CTA finaux) ============================================================ *//* Style par défaut appliqué AUTOMATIQUEMENT à tous les boutons */.wp-block-generateblocks-button,.gb-button,.wp-block-button__link,a.wp-block-generateblocks-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-display) !important; font-weight: var(--fw-extrabold) !important; font-size: var(--fs-body) !important; text-transform: uppercase !important; text-decoration: none !important; letter-spacing: 0.02em !important; line-height: 1 !important; padding: 1rem 2rem !important; background-color: var(--purple) !important; color: #FFF !important; border: var(--stroke) solid #000 !important; border-radius: 0 !important; box-shadow: var(--shadow-sm) !important; cursor: pointer !important; transition: transform var(--t-fast) var(--t-step), box-shadow var(--t-fast) var(--t-step) !important;}/* MODIFICATEUR : bouton jaune */.btn-yellow,.wp-block-generateblocks-button.btn-yellow,.gb-button.btn-yellow { background-color: var(--yellow) !important; color: #000 !important;}/* MODIFICATEUR : bouton blanc (ghost) */.btn-ghost,.wp-block-generateblocks-button.btn-ghost,.gb-button.btn-ghost { background-color: var(--white) !important; color: #000 !important;}/* MODIFICATEUR : grand bouton */.btn-lg,.wp-block-generateblocks-button.btn-lg,.gb-button.btn-lg { font-size: var(--fs-lead) !important; padding: 1.25rem 2.5rem !important; box-shadow: var(--shadow-md) !important;}/* Hover desktop */@media (hover: hover) { .wp-block-generateblocks-button:hover,.gb-button:hover,.wp-block-button__link:hover,a.wp-block-generateblocks-button:hover { background-color: var(--yellow) !important; color: #000 !important; transform: translate(-3px, -3px) !important; box-shadow: 7px 7px 0 #000 !important; } .btn-lg:hover { transform: translate(-4px, -4px) !important; box-shadow: 10px 10px 0 #000 !important; }}/* Feedback tactile */.wp-block-generateblocks-button:active,.gb-button:active,.wp-block-button__link:active { transform: translate(2px, 2px) !important; box-shadow: var(--shadow-xs) !important;}/* ============================================================ 7. TITRE HERO (EXCEPTION) ------------------------------------------------------------ Par défaut, un H1 a la taille --fs-h1 (56px max). Pour le H1 MONUMENTAL de la page d'accueil, ajoute .hero-title ============================================================ *//* ============================================================ 8. EYEBROW (mini-titre mauve au-dessus d'un H2) ============================================================ */.eyebrow { font-family: var(--font-display); font-size: clamp(1rem, 0.5vw + 0.85rem, 1.15rem); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--purple); margin-block-end: var(--space-xs) !important;}/* ============================================================ 9. CYBER-CARDS ============================================================ */.cyber-card { background-color: var(--white); border: var(--stroke) solid #000; box-shadow: var(--shadow-lg); padding: var(--card-padding);}.cyber-card-yellow { background-color: var(--yellow);}.cyber-card-purple { background-color: var(--purple); color: #FFF;}.cyber-card-purple :is(h1,h2,h3,h4) { color: #FFF !important; text-shadow: 2px 2px 0 #000 !important;}/* Paragraphes dans les cards : pas de contrainte de largeur */.cyber-card p { max-inline-size: none;}/* ============================================================ 10. SECTIONS & CONTAINERS ============================================================ */.section { padding-block: var(--space-xl); padding-inline: var(--gutter);}.section-sm { padding-block: var(--space-lg); padding-inline: var(--gutter);}.section-lg { padding-block: var(--space-2xl); padding-inline: var(--gutter);}/* .container : max-width retire globalement pour eviter contraintes imbriquees *//* Contraindre le contenu principal a 1200px via inside-article */.inside-article { max-width: var(--container-max) !important; margin-inline: auto !important;}.container-narrow { width: 100%; max-width: var(--content-max); margin-inline: auto;}/* ============================================================ 11. LOGO ============================================================ */.site-logo img { border-radius: 50%; border: 3px solid #000; box-shadow: var(--shadow-md); max-width: 180px; transition: transform var(--t-fast) var(--t-step);}@media (hover: hover) { .site-logo img:hover { transform: rotate(-1.5deg) scale(1.05); }}@media (max-width: 48em) { .site-logo img { max-width: 140px; box-shadow: var(--shadow-sm); }}/* ============================================================ 12. NAVIGATION DESKTOP ============================================================ */.main-navigation .main-nav > ul > li > a { font-family: var(--font-display) !important; color: #000 !important; font-weight: var(--fw-extrabold) !important; font-size: 17px !important; text-transform: uppercase; transition: transform var(--t-fast) var(--t-step), box-shadow var(--t-fast) var(--t-step), background-color var(--t-fast) ease;}.main-navigation .main-nav > ul > li:last-child > a { background-color: var(--purple) !important; color: #FFF !important; border: var(--stroke) solid #000 !important; box-shadow: var(--shadow-sm) !important; margin-inline-start: 20px !important;}.main-navigation ul ul { background-color: #FFF !important; border: var(--stroke) solid #000 !important; box-shadow: var(--shadow-md) !important; padding: 0 !important; overflow: hidden;}.main-navigation .main-nav ul ul li a { background-color: #FFF !important; color: #000 !important; border: none !important; box-shadow: none !important; border-bottom: 1px solid #000 !important; margin: 0 !important; font-weight: var(--fw-bold) !important; font-size: 15px !important; transition: background-color var(--t-fast) ease, padding-inline-start var(--t-fast) ease;}@media (hover: hover) { .main-navigation .main-nav > ul > li > a:hover { background-color: var(--yellow) !important; transform: translate(-3px, -3px); box-shadow: 3px 3px 0 #000; } .main-navigation .main-nav > ul > li:last-child > a:hover { background-color: var(--yellow) !important; color: #000 !important; transform: translate(-4px, -4px); box-shadow: 8px 8px 0 #000 !important; } .main-navigation .main-nav ul ul li a:hover { background-color: var(--yellow) !important; padding-inline-start: 30px !important; }}/* ============================================================ 13. MOBILE (< 48em) ============================================================ */@media (max-width: 48em) { button.menu-toggle { background-color: var(--yellow) !important; color: #000 !important; border: var(--stroke) solid #000 !important; box-shadow: var(--shadow-sm) !important; font-family: var(--font-display) !important; font-weight: var(--fw-black) !important; border-radius: 0 !important; } .main-navigation.toggled .main-nav ul { background-color: var(--white) !important; border: var(--stroke) solid #000 !important; box-shadow: var(--shadow-xl) !important; margin: 15px !important; padding: 20px 0 40px !important; box-sizing: border-box !important; } .main-navigation .main-nav ul li a { font-family: var(--font-display) !important; font-weight: var(--fw-extrabold) !important; font-size: 20px !important; border-bottom: 2px solid #000 !important; text-align: left !important; padding: 15px 20px !important; } .main-navigation ul ul { background-color: var(--grey-100) !important; box-shadow: none !important; border-top: 2px solid #000 !important; } .main-navigation .main-nav ul ul li a { font-size: 16px !important; padding-inline-start: 40px !important; border-bottom: 1px solid var(--border-subtle) !important; } .main-navigation.toggled .main-nav > ul > li:last-child > a { background-color: var(--purple) !important; color: #FFF !important; margin: 25px 20px 10px !important; border: var(--stroke) solid #000 !important; box-shadow: 5px 5px 0 #000 !important; display: block !important; } .main-navigation.toggled .main-nav li:last-child a:active { transform: translate(2px, 2px); box-shadow: var(--shadow-xs) !important; }}/* ============================================================ 14. OVERRIDES GUTENBERG / GENERATEPRESS ============================================================ */.page :is(.featured-image,.post-thumbnail) { display: none !important;}:is(.site-main,.entry-content) .wp-block-group__inner-container { padding: 0 !important;}.entry-content > :not(h1,h2,h3,h4,h5,h6),.entry-content .wp-block-group { margin-inline: 0 !important;}/* Liens inline dans le contenu (non-boutons) */.entry-content a:not([class]),.entry-content a:not(.gb-text):not(.wp-block-button__link) { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; font-weight: var(--fw-medium);}@media (hover: hover) { .entry-content a:not([class]):hover,.entry-content a:not(.gb-text):not(.wp-block-button__link):hover { background-color: var(--yellow); color: #000; text-decoration: none; outline-offset: 2px; }}/* Anti-overflow colonnes GenerateBlocks */.wp-block-columns,.wp-block-columns .wp-block-column,.wp-block-generateblocks-container,.wp-block-generateblocks-grid { min-inline-size: 0;}/* Titres dans colonnes étroites = taille réduite auto */.wp-block-column :is(h1,h2,h3),.wp-block-generateblocks-grid :is(h1,h2,h3) { font-size: var(--fs-column-title);}/* ============================================================ 15. IMPRESSION ============================================================ */@media print { body { background: #FFF; color: #000; } .main-navigation,button.menu-toggle,.wp-block-generateblocks-button,.gb-button,.wp-block-button__link { display: none; } .cyber-card { box-shadow: none; border: 1px solid #000; page-break-inside: avoid; } :is(h1,h2,h3) { text-shadow: none !important; page-break-after: avoid; } a { text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; font-weight: normal; }}/* ============================================================ PATCH v8.0.3 : boutons GenerateBlocks v2 ------------------------------------------------------------ GenerateBlocks v2 ne crée pas de classe bouton dédiée. Tout ce qui est "bouton" est un . On cible donc TOUS les comme boutons. Les liens dans les paragraphes (inline) sont exclus via un sélecteur plus précis. ============================================================ *//* Tous les avec classe gb-text = bouton */a.gb-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-display) !important; font-weight: var(--fw-extrabold) !important; font-size: var(--fs-body) !important; text-transform: uppercase !important; text-decoration: none !important; letter-spacing: 0.02em !important; line-height: 1 !important; padding: 1rem 2rem !important; background-color: var(--purple) !important; color: #FFF !important; border: var(--stroke) solid #000 !important; border-radius: 0 !important; box-shadow: var(--shadow-sm) !important; cursor: pointer !important; width: auto !important; transition: transform var(--t-fast) var(--t-step), box-shadow var(--t-fast) var(--t-step) !important;}/* Hover desktop */@media (hover: hover) { a.gb-text:hover { background-color: var(--yellow) !important; color: #000 !important; transform: translate(-3px, -3px) !important; box-shadow: 7px 7px 0 #000 !important; }}/* Feedback tactile */a.gb-text:active { transform: translate(2px, 2px) !important; box-shadow: var(--shadow-xs) !important;}/* Modificateurs */a.gb-text.btn-yellow { background-color: var(--yellow) !important; color: #000 !important;}a.gb-text.btn-ghost { background-color: var(--white) !important; color: #000 !important;}a.gb-text.btn-lg { font-size: var(--fs-lead) !important; padding: 1.25rem 2.5rem !important; box-shadow: var(--shadow-md) !important;}/* Contraste paragraphe sur fond mauve */.cyber-card-purple p { color: #FFF; font-weight: var(--fw-medium);}/* ============================================================ 16. GRILLE PILIERS (section Pourquoi) ============================================================ *//* Desktop : grille 2x2 gérée par GenerateBlocks */@media (max-width: 48em) { .pillars-grid { grid-template-columns: 1fr !important; }}/* ============================================================ 18. TÉMOIGNAGES (section preuve sociale) ============================================================ *//* Force les cyber-cards de témoignages à utiliser flexbox vertical *//* Le nom s'aligne au bas, l'espace restant va entre citation et nom *//* ============================================================ 19. CTA FINAL (section "Le premier appel est gratuit") ============================================================ *//* La cyber-card prend toute la largeur du container, max 1200px */.cta-final-card { max-width: var(--container-max); margin-inline: auto;}/* Grid CTA : ratio 40/60 sur desktop */.cta-grid { grid-template-columns: 40fr 60fr !important; align-items: center;}@media (max-width: 64em) { .cta-grid { grid-template-columns: 1fr !important; }}/* Container animation : centre l'animation verticalement */.cta-animation-wrap { display: flex; align-items: center; justify-content: center; min-height: 280px;}/* Container infos contact */.cta-contact-info { margin-block-start: var(--space-md) !important; padding-block-start: var(--space-md); border-block-start: 2px solid #000;}.cta-contact-info p { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body); margin: 0; line-height: 1.8; max-width: none;}.cta-contact-info p + p { margin-block-start: var(--space-xs) !important;}/* Vidéo CTA : prend la largeur disponible, bordure brutaliste */.cta-video { display: block; width: 100%; height: auto; max-width: 500px; margin-inline: auto; border: var(--stroke) solid #000; box-shadow: var(--shadow-lg);}/* ============================================================ 20. FORMULAIRE WPFORMS (page Contact) ============================================================ *//* Container du formulaire */.wpforms-container { margin-block-start: var(--space-lg); max-width: none !important;}/* Labels au-dessus des champs */.wpforms-field-label { font-family: var(--font-display) !important; font-weight: var(--fw-extrabold) !important; font-size: var(--fs-sm) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #000 !important; margin-block-end: var(--space-xs) !important;}/* Asterisque required en mauve */.wpforms-required-label { color: var(--purple) !important;}/* Tous les champs input, textarea, select - SÉLECTEURS ÉLARGIS */.wpforms-field input[type="text"],.wpforms-field input[type="email"],.wpforms-field input[type="tel"],.wpforms-field input[type="number"],.wpforms-field textarea,.wpforms-field select,.wpforms-form select,.wpforms-container select,select.wpforms-field-medium,select.wpforms-field-large,select.wpforms-field-small { background-color: var(--white) !important; border: var(--stroke) solid #000 !important; border-radius: 0 !important; padding: 1rem !important; font-family: var(--font-body) !important; font-size: var(--fs-body) !important; color: #000 !important; box-shadow: var(--shadow-sm) !important; width: 100% !important; box-sizing: border-box !important; transition: box-shadow var(--t-fast) ease, border-color var(--t-fast) ease !important;}/* Focus state brutaliste */.wpforms-field input[type="text"]:focus,.wpforms-field input[type="email"]:focus,.wpforms-field input[type="tel"]:focus,.wpforms-field input[type="number"]:focus,.wpforms-field textarea:focus,.wpforms-field select:focus,.wpforms-form select:focus,.wpforms-container select:focus { outline: none !important; box-shadow: var(--shadow-md) !important; border-color: var(--purple) !important;}/* Textarea hauteur minimale */.wpforms-field-textarea textarea { min-height: 150px !important; resize: vertical !important;}/* Style spécifique pour les SELECT (dropdown) - flèche custom */.wpforms-field select,.wpforms-form select,.wpforms-container select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 20px !important; padding-right: 3rem !important; cursor: pointer !important;}/* Options du dropdown */.wpforms-field select option,.wpforms-form select option { background-color: var(--white) !important; color: #000 !important; padding: 0.5rem !important; font-family: var(--font-body) !important; font-size: var(--fs-body) !important;}.wpforms-field select option:hover,.wpforms-field select option:focus,.wpforms-field select option:checked { background-color: var(--yellow) !important; color: #000 !important;}/* Radio buttons et checkboxes */.wpforms-field-radio ul,.wpforms-field-checkbox ul { list-style: none !important; padding: 0 !important; margin: 0 !important;}.wpforms-field-radio li,.wpforms-field-checkbox li { margin-block-end: var(--space-xs) !important;}.wpforms-field-radio input[type="radio"],.wpforms-field-checkbox input[type="checkbox"] { width: 20px !important; height: 20px !important; border: var(--stroke) solid #000 !important; margin-inline-end: var(--space-xs) !important; cursor: pointer; accent-color: var(--purple);}.wpforms-field-radio label,.wpforms-field-checkbox label { font-family: var(--font-body) !important; font-weight: var(--fw-medium) !important; cursor: pointer; color: #000 !important;}/* Espacement entre les champs */.wpforms-field { margin-block-end: var(--space-md) !important; padding: 0 !important;}/* Description sous le label */.wpforms-field-description { font-size: var(--fs-sm) !important; color: #000 !important; opacity: 0.9; margin-block-start: var(--space-xs) !important;}/* Bouton submit en style Ironclad mauve - TEXTE CENTRÉ */.wpforms-submit-container button[type="submit"],.wpforms-submit,.wpforms-form button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-display) !important; font-weight: var(--fw-extrabold) !important; font-size: var(--fs-body) !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; line-height: 1 !important; padding: 1rem 2rem !important; background-color: var(--purple) !important; color: #FFF !important; border: var(--stroke) solid #000 !important; border-radius: 0 !important; box-shadow: var(--shadow-sm) !important; cursor: pointer !important; text-align: center !important; transition: transform var(--t-fast) var(--t-step), box-shadow var(--t-fast) var(--t-step), background-color var(--t-fast) ease !important; width: auto !important; margin-block-start: var(--space-lg) !important; min-height: 48px !important;}/* Hover desktop */@media (hover: hover) { .wpforms-submit-container button[type="submit"]:hover,.wpforms-submit:hover,.wpforms-form button[type="submit"]:hover { background-color: var(--yellow) !important; color: #000 !important; transform: translate(-3px, -3px) !important; box-shadow: 7px 7px 0 #000 !important; }}/* Active state */.wpforms-submit-container button[type="submit"]:active,.wpforms-submit:active,.wpforms-form button[type="submit"]:active { transform: translate(2px, 2px) !important; box-shadow: var(--shadow-xs) !important;}/* Message de succès après envoi */.wpforms-confirmation-container,.wpforms-confirmation-container-full { background-color: var(--yellow) !important; border: var(--stroke) solid #000 !important; box-shadow: var(--shadow-lg) !important; padding: var(--card-padding) !important; margin-block-start: var(--space-lg) !important; color: #000 !important;}.wpforms-confirmation-container p,.wpforms-confirmation-container-full p { font-size: var(--fs-lead) !important; font-weight: var(--fw-medium) !important; color: #000 !important; max-width: none !important;}/* Messages d'erreur */.wpforms-error-message,label.wpforms-error,em.wpforms-error { color: #cf2e2e !important; font-size: var(--fs-sm) !important; font-weight: var(--fw-bold) !important; margin-block-start: var(--space-xs) !important; font-family: var(--font-body) !important;}/* Champs en erreur */.wpforms-field input.wpforms-error,.wpforms-field textarea.wpforms-error,.wpforms-field select.wpforms-error { border-color: #cf2e2e !important;}/* Grid 50/50 pour la section contact principale *//* Colonne gauche : copy aligné en haut *//* Colonne droite : formulaire aligné en haut *//* Sur mobile/tablet, l'eyebrow et H1 reprennent leur taille normale *//* Espace vertical entre les sections de la page Contact */.cta-final-card + .cyber-card,.cyber-card-yellow + .cyber-card { margin-block-start: var(--space-xl) !important;}@media (max-width: 48em) { .cta-final-card + .cyber-card,.cyber-card-yellow + .cyber-card { margin-block-start: var(--space-lg) !important; }}/* ============================================================ PATTERN 1 : HERO STANDARD ------------------------------------------------------------ Hero pour TOUTES les pages secondaires. PAS la page d'accueil (qui utilise .hero-title). Structure : .hero-standard > .container-narrow > .eyebrow? + h1 + p ============================================================ */.hero-standard { padding-block: var(--space-xl); padding-inline: var(--gutter); text-align: center;}.hero-standard .container-narrow { width: 100%; max-width: var(--content-max); margin-inline: auto;}.hero-standard h1 { margin-block-end: var(--space-md) !important; max-width: 100%;}.hero-standard p { margin-inline: auto; max-width: 600px;}.hero-standard .eyebrow { display: block; text-align: center; margin-inline: auto; margin-block-end: var(--space-sm) !important;}@media (max-width: 48em) { .hero-standard { padding-block: var(--space-lg); }}/* ============================================================ 21. FOOTER ============================================================ */.site-footer { background-color: var(--black) !important;}.site-info { background-color: var(--black) !important; border-top: var(--stroke) solid #000;}.inside-site-info { padding-block: var(--space-lg) !important; padding-inline: var(--gutter) !important;}.copyright-bar { font-family: var(--font-display) !important; font-size: var(--fs-sm) !important; font-weight: var(--fw-medium) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--white) !important;}.copyright-bar a { color: var(--teal) !important; text-decoration: none !important; font-weight: var(--fw-bold) !important;}@media (hover: hover) { .copyright-bar a:hover { color: var(--yellow) !important; }}/* ============================================================ 22. HERO V2 — Layout 2 colonnes + cards visuelles Scopé sous .home pour n'affecter QUE la page d'accueil. ============================================================ *//* Grid 2 colonnes — override GenerateBlocks flex (homepage only) */.home .gb-element-3e7d65f1 { display: grid !important; grid-template-columns: 55fr 45fr !important; align-items: center !important; gap: clamp(40px, 6vw, 80px) !important; padding: clamp(60px, 8vh, 120px) var(--gutter) !important; min-height: 85vh !important;}/* Colonne gauche : libérer le max-width du container interne (homepage only) */.home .gb-element-38a7c9d9 { max-width: 100% !important; padding: 0 !important; width: 100% !important;}/* Eyebrow spécifique au hero (avant le H1) */.hero-eyebrow { font-family: var(--font-display) !important; font-size: var(--fs-sm) !important; font-weight: var(--fw-bold) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--purple) !important; margin-block-end: var(--space-sm) !important; margin-block-start: 0 !important; max-inline-size: none !important;}/* Zone visuelle droite */.hero-visual { position: relative; height: clamp(360px, 48vh, 520px); width: 100%;}/* Cartes services empilées — effet neobrutaliste */.hero-card { position: absolute; border: var(--stroke) solid #000; padding: clamp(18px, 2.5vw, 28px) clamp(24px, 3.5vw, 44px); font-family: var(--font-display) !important; font-weight: var(--fw-black) !important; text-transform: uppercase; min-width: clamp(180px, 22vw, 280px); transition: transform var(--t-fast) var(--t-step), box-shadow var(--t-fast) var(--t-step);}.hero-card-label { display: block; font-size: clamp(1.375rem, 2.5vw, 2rem); line-height: 1.1; letter-spacing: var(--ls-tight); color: inherit;}.hero-card-sub { display: block; font-family: var(--font-body) !important; font-weight: var(--fw-medium) !important; font-size: var(--fs-sm) !important; text-transform: none; letter-spacing: 0; line-height: 1.4; margin-block-start: 6px; opacity: 0.9; color: inherit;}/* Carte 1 — blanche, inclinée gauche */.hero-card-1 { background: var(--white); box-shadow: var(--shadow-md); top: 4%; left: 0; transform: rotate(-3deg); z-index: 1; color: #000;}/* Carte 2 — jaune, légèrement droite, la plus grande */.hero-card-2 { background: var(--yellow); box-shadow: var(--shadow-xl); top: 30%; left: 10%; transform: rotate(2deg); z-index: 2; color: #000;}/* Carte 3 — mauve, inclinée gauche */.hero-card-3 { background: var(--purple); box-shadow: var(--shadow-lg); top: 58%; left: 4%; transform: rotate(-1.5deg); z-index: 3; color: var(--white);}.hero-card-3 .hero-card-sub { opacity: 0.85; }/* Hover lift sur les cards (desktop) */@media (hover: hover) { .hero-card:hover { transform: rotate(0deg) translate(-4px, -4px) !important; box-shadow: var(--shadow-xl) !important; z-index: 10 !important; }}/* Badge étoiles Google *//* Tablette : grid 1 colonne */@media (max-width: 64em) { .home .gb-element-3e7d65f1 { grid-template-columns: 1fr !important; min-height: auto !important; padding-block: var(--space-xl) !important; } .hero-visual { height: clamp(260px, 38vw, 360px); margin-block-start: var(--space-lg); }}/* Mobile : masquer le visuel — le texte suffit */@media (max-width: 48em) { .hero-visual { display: none; } .hero-eyebrow { font-size: 11px !important; }}/* ============================================================ 23. SERVICE CARDS POP-ART ============================================================ *//* Outer card: strip default cyber-card padding, become flex column */.service-card { padding: 0 !important; overflow: hidden; display: flex !important; flex-direction: column;}/* Image area: fixed square block at top of card */.service-card-img { width: 100%; height: 280px; display: flex; align-items: center; justify-content: center; border-bottom: var(--stroke) solid #000; flex-shrink: 0; overflow: hidden;}/* Reset WP figure styles inside image area */.service-card-img .wp-block-image { margin: 0; line-height: 0; display: flex; align-items: center; justify-content: center;}/* Constrain the illustration to 200px, centred */.service-card-img .wp-block-image img { width: 200px !important; height: 200px !important; object-fit: contain !important; display: block; transition: transform 0.15s steps(2);}@media (hover: hover) { .service-card:hover .service-card-img .wp-block-image img { transform: scale(1.08) rotate(-3deg); }}/* Card body: padded, fills remaining height, CTA sticks to bottom */.service-card-body { padding: var(--card-padding); display: flex; flex-direction: column; flex: 1;}/* CTA button pushed to bottom */.service-card-body a.gb-text { margin-block-start: auto !important; align-self: flex-start; margin-top: var(--space-lg) !important;}/* ============================================================ TESTIMONIALS — force 3 columns above 600 px (targets the GB-generated class directly so nothing can override) ============================================================ */.gb-element-8f6db9ae { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 40px; row-gap: 40px;}@media (max-width: 600px) { .gb-element-8f6db9ae { grid-template-columns: 1fr !important; }}";s:5:"theme";s:1:"1";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"";s:10:"custom_css";s:0:"/* ============================================================ CSS CONSOLIDE - anciennement dans les mu-plugins Ordre preserve pour respecter la cascade.============================================================ *//* ============== fred-animations ============== *//* ============================================================ RESPECT prefers-reduced-motion Toutes les animations sont désactivées si l'utilisateur a activé "réduire les animations" dans son OS.============================================================ */@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0.01ms !important; transition-duration: 0.01ms !important; }}/* ============================================================ KEYFRAMES============================================================ */@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); }}@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}@keyframes slideInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); }}@keyframes slideInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); }}@keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); }}/* ============================================================ HERO — entrée au chargement de la page============================================================ */.hero-text .eyebrow { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;}.hero-text h1 { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;}.hero-text p { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;}.hero-img { animation: slideInRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;}/* Hero homepage (hero-section) */.home .gb-element-3e7d65f1 .gb-element-38a7c9d9 > * { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;}.home .gb-element-3e7d65f1 .gb-element-38a7c9d9 > *:nth-child(1) { animation-delay: 0.05s; }.home .gb-element-3e7d65f1 .gb-element-38a7c9d9 > *:nth-child(2) { animation-delay: 0.18s; }.home .gb-element-3e7d65f1 .gb-element-38a7c9d9 > *:nth-child(3) { animation-delay: 0.3s; }.home .gb-element-3e7d65f1 .gb-element-38a7c9d9 > *:nth-child(4) { animation-delay: 0.42s; }.home .hero-visual { animation: scaleIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;}/* ============================================================ SCROLL REVEAL — état initial Les éléments ciblés sont invisibles jusqu'à l'entrée dans le viewport (JS ajoute la classe .is-visible).============================================================ */.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);}.reveal.is-visible { opacity: 1; transform: translateY(0);}/* Délais de stagger pour les grilles de cards */.reveal-stagger .wp-block-group:nth-child(1) { transition-delay: 0.05s; }.reveal-stagger .wp-block-group:nth-child(2) { transition-delay: 0.15s; }.reveal-stagger .wp-block-group:nth-child(3) { transition-delay: 0.25s; }.reveal-stagger .wp-block-group:nth-child(4) { transition-delay: 0.35s; }.reveal-stagger .wp-block-group:nth-child(5) { transition-delay: 0.42s; }.reveal-stagger .wp-block-group:nth-child(6) { transition-delay: 0.5s; }/* ============================================================ CYBER-CARDS — hover lift============================================================ */@media (hover: hover) { .cyber-card { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .cyber-card:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 #000 !important; }}/* ============================================================ NAVIGATION — underline slide============================================================ */.main-navigation .main-nav > ul > li > a { position: relative;}.main-navigation .main-nav > ul > li > a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 3px; background: var(--yellow); transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);}.main-navigation .main-nav > ul > li > a:hover::after,.main-navigation .main-nav > ul > li[class*="current-menu"] > a::after { width: 100%;}/* ============================================================ BOUTONS — feedback amélioré============================================================ */.wp-block-button__link,.wp-block-generateblocks-button,a.gb-text { transition: transform 0.12s steps(2), box-shadow 0.12s steps(2), background-color 0.12s steps(2) !important;}/* ============================================================ IMAGES — fade on load============================================================ */img { transition: opacity 0.4s ease;}img[loading="lazy"] { opacity: 0;}img[loading="lazy"].img-loaded { opacity: 1;}/* ============================================================ PAGE TRANSITION — sortie douce============================================================ */body { animation: fadeIn 0.35s ease both;}/* ============================================================ SECTION eyebrow + H2 — slide depuis la gauche============================================================ */.section-lg .eyebrow,.section-lg h2 { /* géré par le scroll-reveal JS */}/* ============== fred-demos-css ============== *//* ============================================================ HERO CENTRÉ (démos sans image droite)============================================================ */.hero-center > .wp-block-group__inner-container { grid-template-columns: 1fr !important;}.hero-center .hero-text { border-right: none !important; text-align: center; padding: clamp(60px, 8vw, 100px) var(--gutter) !important; align-items: center;}.hero-center .hero-text h1 { text-align: center !important; }.hero-center .hero-text p { text-align: center !important; margin-inline: auto !important; }.hero-center .hero-text .eyebrow { text-align: center !important; margin-inline: auto; }/* Badge de navigation inter-démos *//* ============================================================ PROPOSITION A — ACCENTS COULEUR Barre épaisse en haut de card, couleur en rotation.============================================================ *//* Auto-rotate sur .prop-a-grid *//* Icone couleur dans les cards A *//* ============================================================ PROPOSITION B — LAYOUT ALTERNÉ Grande card featured + 2 petites / puis liste horizontale.============================================================ */.featured-grid { display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 0; border: 4px solid #000; box-shadow: var(--shadow-lg); margin-block-start: var(--space-lg);}.featured-main { background: var(--yellow) !important; padding: clamp(40px, 6vw, 70px) !important; border-right: 4px solid #000; display: flex !important; flex-direction: column; justify-content: space-between;}.featured-main h3 { font-size: var(--fs-h2) !important; margin-block-end: var(--space-md) !important; }.featured-side { display: flex; flex-direction: column;}.featured-side-card { flex: 1; padding: clamp(24px, 3vw, 40px) !important; border-bottom: 4px solid #000; background: #fff;}.featured-side-card:last-child { border-bottom: none; }.featured-side-card h3 { font-size: var(--fs-h3) !important; margin-block-end: var(--space-sm) !important; }/* Section "highlight" : fond mauve, texte blanc */.highlight-strip { background: var(--purple) !important; border: 4px solid #000 !important; box-shadow: var(--shadow-lg); padding: clamp(40px, 5vw, 60px) !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-block-start: 40px;}.highlight-strip h3,.highlight-strip h2 { color: #fff !important; text-shadow: 2px 2px 0 #000 !important; font-size: var(--fs-h2) !important; margin: 0 !important;}.highlight-strip p { color: rgba(255,255,255,0.8) !important; font-size: var(--fs-lead) !important; margin: 0 !important; max-width: none !important;}@media (max-width: 48em) { .featured-grid { grid-template-columns: 1fr !important; } .featured-main { border-right: none; border-bottom: 4px solid #000; } .highlight-strip { grid-template-columns: 1fr !important; }}/* ============================================================ PROPOSITION C — FORMAT MAGAZINE Rangées alternées : bloc couleur + texte.============================================================ *//* ============================================================ PROPOSITION D — NUMÉROS EN FOND Chiffre géant, opaque, comme texture de fond.============================================================ */.card-numbered { position: relative; overflow: hidden;}.card-numbered::before { content: attr(data-num); position: absolute; bottom: -1.5rem; right: -0.75rem; font-family: var(--font-display); font-size: clamp(6rem, 12vw, 10rem); font-weight: 900; color: #000; opacity: 0.055; line-height: 1; pointer-events: none; user-select: none; letter-spacing: -0.05em;}/* Variantes couleur de fond avec numéro adapté *//* Badge numéro visible en haut à gauche *//* ============================================================ PROPOSITION E — FORMAT LISTE Lignes numérotées avec bordure gauche couleur.============================================================ *//* ============================================================ PROPOSITION F — STYLE TICKET / COUPON Encoche circulaire sur les côtés, trait pointillé.============================================================ */.tickets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-block-start: var(--space-lg);}.ticket-card { background: #fff; border: 4px solid #000; box-shadow: var(--shadow-md); position: relative; overflow: visible; transition: transform 0.18s ease, box-shadow 0.18s ease;}.ticket-card:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: var(--shadow-xl);}.ticket-top { padding: 1.75rem 1.75rem 1.5rem;}.ticket-tag { display: inline-block; background: var(--yellow); border: 2px solid #000; font-family: var(--font-display); font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.2rem 0.65rem; margin-block-end: 0.8rem;}.ticket-tag-teal { background: var(--teal) !important; }.ticket-tag-purple { background: var(--purple) !important; color: #fff; }.ticket-top h3 { margin: 0 !important; font-size: clamp(1.1rem, 1.5vw + 0.4rem, 1.5rem) !important;}/* Séparateur dentelé */.ticket-sep { position: relative; height: 0; margin: 0; border: none; border-top: 3px dashed rgba(0,0,0,0.25); /* Encoches circulaires */}.ticket-sep::before,.ticket-sep::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); /* couleur du fond de page */ border: 4px solid #000; top: 50%; transform: translateY(-50%);}.ticket-sep::before { left: -17px; }.ticket-sep::after { right: -17px; }.ticket-bottom { padding: 1.25rem 1.75rem 1.75rem; background: #f6f6f6; border-top: 3px dashed rgba(0,0,0,0.18);}.ticket-bottom p { max-width: none !important; font-size: var(--fs-sm) !important; opacity: 0.9; margin-block-end: var(--space-sm) !important;}.ticket-price { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--purple); display: block;}@media (max-width: 64em) { .tickets-grid { grid-template-columns: repeat(2, 1fr); } }@media (max-width: 48em) { .tickets-grid { grid-template-columns: 1fr; } }/* ============================================================ DEMO BEST — ajustements combinaison B+D+F============================================================ *//* Screenshot-tag : mini aperçu d'image stylé comme un badge *//* Version large pour la featured-main card *//* Badge prix dans la featured section */.price-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; background: #000; color: var(--yellow); padding: 0.35rem 0.85rem; border: 3px solid #000; margin-block-start: 0.75rem; display: block; width: fit-content;}.featured-side-card .price-tag { font-size: 0.7rem; margin-block-start: auto; padding: 0.25rem 0.65rem;}.featured-side-card { display: flex !important; flex-direction: column;}/* ── PEAUFINAGE BEST FEATURED ──────────────────────────────── */.best-featured { margin-block-start: var(--space-lg);}/* Hauteur égale entre main et side */.best-featured .featured-grid { align-items: stretch;}/* Main card : moins haute, padding réduit, bullet list cachée */.best-featured .featured-main { padding: clamp(28px, 4vw, 48px) !important; justify-content: flex-start !important; gap: 0;}.best-featured .featured-main ul { display: none !important; /* retire les bullets qui alourdissent */}.best-featured .featured-main h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important; margin-bottom: 0.75rem !important;}.best-featured .featured-main > div > p { margin-bottom: 1.25rem !important;}.best-featured .featured-main > a { margin-top: 1.25rem !important;}/* Side cards : padding uniforme, flex pour coller le CTA en bas */.best-featured .featured-side-card { padding: clamp(24px, 3vw, 36px) !important; display: flex !important; flex-direction: column; gap: 0;}/* Tags : même taille, même position dans toutes les cards */.best-featured .ticket-tag { display: inline-block !important; width: fit-content !important; margin-bottom: 0.9rem !important; margin-top: 0 !important; position: relative; top: 0;}/* Forcer le tag au tout début du contenu — même point de départ */.best-featured .featured-main > div,.best-featured .featured-side-card { padding-top: 0 !important;}.best-featured .featured-main { padding-top: clamp(28px, 4vw, 44px) !important;}.best-featured .featured-side-card { padding-top: clamp(28px, 4vw, 44px) !important;}/* Emoji : espace uniforme après le tag */.best-featured .featured-main > div > span[style*="2.8rem"],.best-featured .featured-side-card > span[style*="1.8rem"] { margin-bottom: 0.6rem !important; display: block !important;}/* Titre h3 des side cards : espacement sous le tag */.best-featured .featured-side-card h3 { margin-top: 0 !important; margin-bottom: 0.5rem !important; font-size: clamp(1.2rem, 1.8vw + 0.4rem, 1.6rem) !important;}/* Description side card : flex-grow pour pousser prix+CTA en bas */.best-featured .featured-side-card > p { flex: 1; margin-bottom: 0.75rem !important;}/* Prix + CTA collés en bas */.best-featured .featured-side-card .price-tag { margin-top: 0 !important; margin-bottom: 0.6rem !important;}.best-featured .featured-side-card > a { margin-top: 0 !important; align-self: flex-start;}/* Ticket analytics — fond jaune, mention spéciale */.ticket-card-featured { border-color: #000 !important; box-shadow: var(--shadow-xl) !important;}.ticket-bottom-featured { background: var(--yellow) !important; border-top: 3px dashed rgba(0,0,0,0.3) !important;}.ticket-inclus { display: inline-block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #000; background: #000; color: var(--yellow); padding: 0.4rem 1rem; margin-block-start: 0.75rem; display: block; text-align: center; border: 3px solid #000;}/* Tickets sur fond blanc — notches blancs */.best-tickets .ticket-sep::before,.best-tickets .ticket-sep::after { background: #fff;}/* Hero centré démo : padding réduit pour moins d'espace sous le nav */.hero-center.hero-standard { padding-block: clamp(36px, 4vw, 56px) !important;}/* Featured-main : bouton en bas, aligné avec side cards */.best-featured .featured-main { display: flex !important; flex-direction: column; justify-content: flex-start !important;}.best-featured .featured-main > div { flex: 1;}/* Bouton collé juste après le contenu, même distance que side cards */.best-featured .featured-main > .wp-block-buttons { margin-top: var(--space-sm) !important; padding-bottom: 0 !important; align-self: flex-start;}/* Side cards : même margin-top sur leur bouton */.best-featured .featured-side-card > .wp-block-buttons { margin-top: var(--space-sm) !important; align-self: flex-start;}/* Bouton jaune — hover noir/jaune pour que l'effet soit visible sur fond jaune */@media (hover: hover) { .btn-yellow:hover { background-color: #000 !important; color: var(--yellow) !important; }}/* Alignement CTA en bas — flex column sur toute la card */.best-tickets .ticket-card { display: flex !important; flex-direction: column;}.best-tickets .ticket-bottom { flex: 1; display: flex !important; flex-direction: column;}.best-tickets .ticket-bottom .wp-block-buttons { margin-top: auto !important; padding-top: 0.75rem;}.best-tickets .ticket-bottom p { margin-bottom: 0.4rem !important;}/* Analytics card — pas de bouton, juste badge inclus en bas */.best-tickets .ticket-bottom-featured { flex: 1; display: flex !important; flex-direction: column; justify-content: space-between;}/* Surcharge pour le ticket featured (fond jaune) */.ticket-card-featured .ticket-sep::before,.ticket-card-featured .ticket-sep::after { background: var(--yellow) !important;}/* ============== fred-enhancements-css ============== *//* ── STATS BAR ─────────────────────────────────────────────── */.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--black); border-top: 4px solid #000; border-bottom: 4px solid #000;}.stat-item { padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem; text-align: center; border-right: 3px solid rgba(255,255,255,0.12); position: relative;}.stat-item:last-child { border-right: none; }.stat-number { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 900; color: var(--yellow); line-height: 1; display: block; letter-spacing: -0.03em;}.stat-label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #fff; display: block; margin-block-start: 0.5rem;}@media (max-width: 48em) { .stats-bar { grid-template-columns: repeat(2, 1fr); } .stat-item:nth-child(2) { border-right: none; } .stat-item:nth-child(3) { border-top: 3px solid rgba(255,255,255,0.12); } .stat-item:nth-child(4) { border-top: 3px solid rgba(255,255,255,0.12); border-right: none; }}/* ── PROCESS STEPS ─────────────────────────────────────────── */.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-block-start: var(--space-lg);}.process-step { padding: var(--card-padding); border: 4px solid #000; margin-left: -4px; position: relative; overflow: hidden; background: #fff;}.process-step:first-child { margin-left: 0; }.process-step:nth-child(2) { background: var(--yellow); z-index: 1; }.process-step-bg-num { font-family: var(--font-display); font-size: 9rem; font-weight: 900; color: #000; opacity: 0.06; line-height: 1; position: absolute; bottom: -1rem; right: 0.5rem; pointer-events: none; user-select: none;}.process-step-icon { font-size: 2.8rem; line-height: 1; margin-block-end: var(--space-md); display: block;}.process-step h3 { font-size: var(--fs-h3) !important; margin-block-end: var(--space-sm) !important;}.process-step p { opacity: 0.9; max-width: none;}@media (max-width: 48em) { .process-steps { grid-template-columns: 1fr; } .process-step { margin-left: 0; margin-top: -4px; } .process-step:first-child { margin-top: 0; }}/* ── FAQ ACCORDION ─────────────────────────────────────────── */.faq-list { margin-block-start: var(--space-lg);}.faq-list details { border: 4px solid #000; margin-block-end: -4px; position: relative; background: #fff;}.faq-list details[open] { background: var(--yellow); z-index: 1;}.faq-list summary { padding: 1.2rem 1.75rem; cursor: pointer; font-family: var(--font-display); font-weight: 900; font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; user-select: none; color: #000;}.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; font-size: 2rem; font-weight: 900; flex-shrink: 0; transition: transform 0.22s cubic-bezier(0.22,1,0.36,1); line-height: 1; color: #000;}.faq-list details[open] > summary::after { transform: rotate(45deg);}.faq-answer { padding: 0.5rem 1.75rem 1.5rem; font-size: var(--fs-body); line-height: 1.7; color: #000; max-width: none !important;}.faq-answer p { max-width: none !important; margin-block-start: 0 !important; color: #000;}/* ── RELATED SERVICES ──────────────────────────────────────── */.related-services { background: var(--black); border-top: 4px solid #000; padding-block: var(--space-xl); padding-inline: var(--gutter);}.related-services .eyebrow { color: var(--teal) !important; }.related-services h2 { color: var(--yellow) !important; text-shadow: none !important;}.related-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: var(--space-lg);}.related-service-link { background: transparent; border: 3px solid rgba(255,255,255,0.3); padding: 1.75rem; color: #fff; text-decoration: none !important; display: block; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;}/* Hover : fond jaune + texte NOIR — ratio 15:1, passe AAA */.related-service-link:hover { border-color: var(--yellow); background: var(--yellow); color: #000 !important; transform: translateY(-3px);}.related-service-link:hover h3 { color: #000 !important; }.related-service-link:hover p { color: #000 !important; }/* Titre sur fond sombre : blanc — ratio 19:1, passe AAA */.related-service-link h3 { color: #fff !important; font-size: var(--fs-h4) !important; text-shadow: none !important; margin-block-end: 0.5rem !important;}/* Description sur fond sombre : opacité 0.82 — ratio ~12:1, passe AAA */.related-service-link p { color: #fff !important; font-size: var(--fs-sm) !important; max-width: none !important; margin: 0 !important;}@media (max-width: 48em) { .related-services-grid { grid-template-columns: 1fr; }}/* ── STICKY MOBILE CTA ─────────────────────────────────────── */.mobile-sticky-cta { display: none; }@media (max-width: 48em) { .mobile-sticky-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; border-top: 4px solid #000; box-shadow: 0 -6px 20px rgba(0,0,0,0.25); } .mobile-sticky-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 1rem 0.5rem; font-family: var(--font-display); font-weight: 900; font-size: 0.95rem; text-transform: uppercase; text-decoration: none !important; letter-spacing: 0.03em; transition: filter 0.1s ease; } .mobile-sticky-cta a:active { filter: brightness(0.88); } .mobile-sticky-cta .sticky-call { background: var(--yellow); color: #000 !important; border-right: 4px solid #000; } .mobile-sticky-cta .sticky-contact { background: var(--purple); color: #fff !important; } /* Compense la hauteur de la barre fixe */ body { padding-bottom: 68px !important; }}/* ── PROGRESS BAR DE LECTURE ───────────────────────────────── */.read-progress { position: fixed; top: 0; left: 0; height: 4px; background: var(--yellow); border-right: 2px solid #000; z-index: 9999; width: 0%; transition: width 0.1s linear; pointer-events: none;}/* ============== fred-portfolio-css ============== *//* ============================================================ TITRES CARDS ACCOMPLISSEMENTS — taille réduite + no break============================================================ */.wp-block-html .card-numbered h3 { font-size: clamp(0.9rem, 0.9vw + 0.5rem, 1.05rem) !important; hyphens: none !important; word-break: keep-all !important; overflow-wrap: normal !important; text-wrap: balance; line-height: 1.2 !important;}/* ============================================================ GRILLE ACHIEVEMENTS — dans les blocs HTML bruts (pas de __inner-container WP, donc règle directe)============================================================ */.project-split .services-grid,.wp-block-html .services-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 20px !important; row-gap: 20px !important; margin-block-start: var(--space-lg) !important;}@media (max-width: 48em) { .project-split .services-grid,.wp-block-html .services-grid { grid-template-columns: 1fr !important; }}/* ============================================================ PROJECT META CARD — panneau latéral sombre============================================================ */.project-meta { background: var(--black); border: 4px solid #000; box-shadow: var(--shadow-lg); overflow: hidden; position: sticky; top: 100px;}.project-meta-item { padding: 1.25rem 1.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 0.3rem;}.project-meta-item:last-child { border-bottom: none; }.project-meta-label { font-family: var(--font-display); font-size: 0.62rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); display: block;}.project-meta-value { font-size: var(--fs-body); font-weight: 500; color: #fff; display: block; line-height: 1.4;}.project-meta-value a { color: var(--yellow) !important; text-decoration: none !important; font-weight: 700;}/* ============================================================ LAYOUT : left column (badge+H2+desc) + right column (meta)============================================================ */.project-split { display: grid !important; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; margin-block-start: var(--space-lg);}.project-split-left { display: flex; flex-direction: column; gap: var(--space-md);}.project-split-h2 { font-family: var(--font-display) !important; font-weight: 900 !important; font-size: var(--fs-h2) !important; text-transform: uppercase !important; color: #000 !important; text-shadow: 2px 2px 0 var(--yellow) !important; line-height: 1.1 !important; margin: 0 !important; hyphens: none; text-wrap: balance;}.project-split-left p { font-size: var(--fs-lead) !important; font-weight: 500 !important; line-height: 1.75 !important; margin: 0 !important; max-width: none !important; opacity: 0.92;}@media (max-width: 64em) { .project-split { grid-template-columns: 1fr !important; } .project-meta { position: static; }}/* ============================================================ NUMÉRO DE SECTION============================================================ */.section-badge { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--purple); margin-block-end: var(--space-xs); display: block;}.section-badge::after { display: none; }/* ============================================================ PALETTE COULEURS============================================================ *//* ============================================================ SCREENSHOTS============================================================ */.screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-block-start: var(--space-lg);}.screen-item { border: 4px solid #000; box-shadow: var(--shadow-md); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease;}@media (hover: hover) { .screen-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }}.screen-label { padding: 0.65rem 1rem; background: #000; color: var(--yellow); font-family: var(--font-display); font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;}.screen-item img { width: 100%; height: auto; display: block; max-height: 580px; object-fit: cover; object-position: top center;}@media (max-width: 48em) { .screens-grid { grid-template-columns: 1fr !important; }}/* ============================================================ KPI RESULTS — chiffres clés du projet============================================================ *//* ============================================================ DECISIONS GRID — "Les choix qui expliquent les résultats" Remplace l'identité visuelle abstraite par des décisions stratégiques concrètes avec impact mesurable.============================================================ */.decisions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 4px solid #000; box-shadow: var(--shadow-lg); margin-block-start: var(--space-lg); overflow: hidden; counter-reset: decision-counter;}.decision-item { padding: clamp(24px, 3vw, 40px); border-right: 4px solid #000; background: #fff; display: flex; flex-direction: column; gap: var(--space-sm); position: relative; overflow: hidden; counter-increment: decision-counter;}.decision-item::before { content: "0" counter(decision-counter); position: absolute; bottom: -1.5rem; right: -0.75rem; font-family: var(--font-display); font-size: clamp(6rem, 12vw, 10rem); font-weight: 900; color: #000; opacity: 0.055; line-height: 1; pointer-events: none; user-select: none; letter-spacing: -0.05em;}.decision-item:last-child { border-right: none; }.decision-item:nth-child(2) { background: #F8FAFC; }.decision-header { display: flex; align-items: center; gap: 0.75rem; margin-block-end: var(--space-xs);}.decision-num { display: none !important;}.decision-h3 { font-family: var(--font-display) !important; font-weight: 900 !important; font-size: clamp(1rem, 1vw + 0.5rem, 1.2rem) !important; text-transform: uppercase !important; line-height: 1.2 !important; margin: 0 0 var(--space-xs) 0 !important; hyphens: none !important; word-break: keep-all !important; color: #000 !important; text-shadow: none !important;}.decision-desc { font-size: var(--fs-sm) !important; opacity: 0.9; flex: 1; margin: 0 !important; max-width: none !important; line-height: 1.6;}.decision-impact { border-top: 2px solid rgba(0,0,0,0.08); padding-top: 0.75rem; margin-top: auto; display: flex; flex-direction: column; gap: 0.25rem;}.impact-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; color: var(--purple); display: block;}.impact-value { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 900; color: #000; text-transform: uppercase; letter-spacing: 0.03em; display: block;}@media (max-width: 64em) { .decisions-grid { grid-template-columns: 1fr 1fr !important; } .decision-item:nth-child(2) { border-right: none; } .decision-item:nth-child(3) { border-top: 4px solid #000; grid-column: 1 / -1; border-right: none; } }@media (max-width: 48em) { .decisions-grid { grid-template-columns: 1fr !important; } .decision-item { border-right: none !important; border-bottom: 4px solid #000; } .decision-item:last-child { border-bottom: none; } .decision-item:nth-child(3) { grid-column: auto; } }/* ============================================================ IDENTITY CARDS v2 — plus visuelles et impactantes============================================================ *//* Typographie *//* Palette *//* Tech tags v2 *//* ============================================================ PAGES PORTFOLIO PROJECT — alignement parfait à 1200px Problème racine : GeneratePress injecte padding:40px sur TOUS les .wp-block-group__inner-container dans .site-main. Certains blocs ont donc 40px + gutter = trop de padding. Stratégie : 1. Annuler le padding GP sur tous les inner-containers 2. Contraindre l'inside-article à 1200px comme "vrai conteneur" 3. Remettre uniquement le padding voulu sur les containers de contenu============================================================ *//* ============================================================ ALIGNEMENT FINAL — logique claire et sans conflit Référence : inside-article = 1200px, padding: 0 Hero/CTA = 100% = 1200px → alignés bord à bord ✓ Container = 1200px max, inner-container a le gutter Text = commence au gutter depuis le bord blanc ✓ Full-bleed = negative margin pour revenir au bord blanc ✓============================================================ *//* 1. GP inner-container padding annulé partout */.parent-pageid-1575 .site-main .wp-block-group__inner-container { padding: 0 !important;}/* 2. inside-article = boîte 1200px, fond blanc, ZÉRO padding */.parent-pageid-1575 .inside-article { max-width: var(--container-max) !important; margin-inline: auto !important; padding: 0 !important;}/* 3. Hero et CTA = 100% naturellement = 1200px */.parent-pageid-1575 .hero-standard,.parent-pageid-1575 .cta-final-card { max-width: 100% !important; width: 100% !important; margin-inline: 0 !important;}/* 4. Sections = 100%, pas de padding latéral + espacement réduit */.parent-pageid-1575 .section-lg,.parent-pageid-1575 .section-sm,.parent-pageid-1575 .section { padding-inline: 0 !important; padding-block: var(--space-xl) !important;}/* 5. Container inner = gutter pour l'espacement du texte Résultat : section-badge, H2, p, project-split commencent tous au même retrait depuis le bord blanc */.parent-pageid-1575 .container > .wp-block-group__inner-container { padding-inline: var(--gutter) !important;}/* 6. Espacement avant stats-bar */.parent-pageid-1575 .stats-bar { margin-block-start: var(--space-xl) !important;}/* 6b. stats-bar : full-bleed via marges négatives larges + clip parent */.parent-pageid-1575 .stats-bar { margin-inline: -9999px !important; padding-inline: 9999px !important; box-sizing: content-box; position: static; left: auto; width: auto !important; max-width: none !important; overflow: hidden;}/* 7. max-width none sur les paragraphes */.parent-pageid-1575 .container > .wp-block-group__inner-container > .wp-block-paragraph,.parent-pageid-1575 .project-split-left p { max-width: none !important;}/* ============================================================ MOBILE — portfolio pages============================================================ */@media (max-width: 48em) { /* inside-article : padding latéral mobile pour back-to-portfolio et éléments orphelins */ .parent-pageid-1575 .inside-article { padding-inline: 0 !important; } .parent-pageid-1575 .back-to-portfolio { margin-inline: var(--gutter); display: inline-flex; } /* Sections : réduire padding vertical */ .parent-pageid-1575 .section-lg,.parent-pageid-1575 .section-sm,.parent-pageid-1575 .section { padding-block: var(--space-lg) !important; } /* Stats-bar mobile : 2 colonnes */ .parent-pageid-1575 .stats-bar { margin-block-start: var(--space-lg) !important; } /* project-kpis : 2 colonnes */ /* screens-grid : déjà 1 col mais assure-toi du padding */ .screens-grid { gap: 16px; } /* decisions-grid : padding interne réduit */ .decision-item { padding: 20px !important; }}/* 8. Décisions grid : fond uniforme sur toutes les cards */.decision-item:nth-child(2) { background: #fff !important;}/* ============================================================ BREADCRUMB RETOUR PORTFOLIO============================================================ */.back-to-portfolio { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #000 !important; text-decoration: none !important; padding: 0.5rem 1rem; border: 3px solid #000; background: #fff; margin-block-end: var(--space-lg); transition: background 0.12s steps(1), color 0.12s steps(1); display: inline-flex;}.back-to-portfolio:hover { background: var(--yellow) !important; color: #000 !important;}/* ============== fred-grid-css ============== *//* ============================================================= 1. CACHE LE TITRE DUPLIQUE DU THEME (entry-title) GeneratePress affiche le post_title avant le contenu. On le masque car chaque page a son propre H1 dans le hero.============================================================= *//* entry-header géré par generate_show_title (fred-seo.php) *//* ============================================================= 2. HERO STANDARD — 2 colonnes Gauche : texte (eyebrow + H1 + subtitle) Droite : image plein cadre (object-fit cover) Fond blanc, bordure basse noire épaisse.============================================================= *//* Wrapper principal */.hero-standard { background: #fff !important; border: 4px solid #000 !important; padding: 0 !important; overflow: hidden; min-height: 460px; display: block;}/* __inner-container = le vrai container GB : on en fait la grille 2 col */.hero-standard > .wp-block-group__inner-container { display: grid !important; grid-template-columns: 55fr 45fr !important; min-height: 460px; width: 100%;}/* Colonne gauche — texte */.hero-text { display: flex !important; flex-direction: column; justify-content: center; padding: clamp(50px, 7vw, 90px) clamp(30px, 5vw, 70px) !important; border-right: 4px solid #000;}.hero-text > .wp-block-group__inner-container { display: flex !important; flex-direction: column; gap: var(--space-sm);}/* Eyebrow */.hero-text .eyebrow { color: var(--purple) !important; margin-block-end: 0 !important;}/* H1 */.hero-text h1 { text-shadow: 3px 3px 0 var(--yellow) !important; color: #000 !important; margin-block: 0 !important; text-align: left !important;}/* Sous-titre */.hero-text p { color: #000 !important; opacity: 0.9; font-size: var(--fs-lead) !important; font-weight: var(--fw-medium) !important; max-width: 480px !important; margin-block: 0 !important; text-align: left !important;}/* Colonne droite — image */.hero-img { overflow: hidden; position: relative; min-height: 320px;}.hero-img > .wp-block-group__inner-container { height: 100%;}.hero-img .wp-block-image { width: 100% !important; height: 100% !important; margin: 0 !important; display: block;}.hero-img .wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block;}/* Tablette : on réduit à 50/50 */@media (max-width: 64em) { .hero-standard > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr !important; }}/* Mobile : stack vertical, image en dessous */@media (max-width: 48em) { .hero-standard > .wp-block-group__inner-container { grid-template-columns: 1fr !important; } .hero-text { border-right: none !important; border-bottom: 4px solid #000; padding: clamp(40px, 8vw, 60px) clamp(24px, 5vw, 40px) !important; } .hero-img { min-height: 240px; }}/* ============================================================= 3. GRILLES DE CARDS WordPress enveloppe chaque wp:group dans deux divs : .services-grid > .wp-block-group__inner-container > [cards] Le grid doit etre sur le __inner-container.============================================================= */.services-grid > .wp-block-group__inner-container { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; margin-block-start: var(--space-lg);}.cta-grid { display: grid !important; grid-template-columns: 40fr 60fr; column-gap: 40px; align-items: center;}@media (max-width: 64em) { .cta-grid { grid-template-columns: 1fr !important; }}@media (min-width: 48.01em) and (max-width: 64em) { .services-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }}@media (max-width: 48em) { .services-grid > .wp-block-group__inner-container { grid-template-columns: 1fr !important; }}/* ============================================================= 3b. PORTFOLIO PAGE — cards full-width, image moins haute============================================================= */.page-id-1575 .section-lg .container { max-width: 100% !important; padding-inline: 0 !important;}.page-id-1575 .section-lg { padding-inline: 0 !important;}.service-card-img { height: 200px !important;}.page-id-1575 .service-card-body h3 { font-size: clamp(1.1rem, 1.5vw + 0.4rem, 1.4rem) !important;}/* Boutons alignés en bas — flex chain complète à travers les __inner-container WP */.service-card { height: 100%;}.service-card > .wp-block-group__inner-container { display: flex !important; flex-direction: column; height: 100%;}.service-card-body { flex: 1; display: flex !important; flex-direction: column;}.service-card-body > .wp-block-group__inner-container { display: flex !important; flex-direction: column; flex: 1;}.service-card-body .wp-block-buttons,.service-card-body > .wp-block-group__inner-container > .wp-block-buttons { margin-top: auto !important; padding-top: var(--space-md);}/* ============================================================= 4. TITRES DANS LES CARDS EN GRILLE============================================================= */.services-grid .cyber-card h2,.services-grid .cyber-card h3,.tickets-grid .ticket-card h3 { font-size: clamp(1rem, 1.1vw + 0.55rem, 1.3rem) !important; hyphens: none !important; word-break: keep-all; overflow-wrap: normal; text-wrap: balance;}/* ============================================================= 5. CARD NUMBERED — numéro géant en fond (Proposition D)============================================================= */.card-numbered { position: relative; overflow: hidden;}.card-numbered::before { content: attr(data-num); position: absolute; bottom: -1.5rem; right: -0.75rem; font-family: var(--font-display); font-size: clamp(6rem, 12vw, 10rem); font-weight: 900; color: #000; opacity: 0.055; line-height: 1; pointer-events: none; user-select: none; letter-spacing: -0.05em;}.card-numbered.cyber-card-yellow::before { opacity: 0.09; }/* Badge numéro visible *//* ============================================================= 6. TICKET CARDS — style coupon/billet (Proposition F)============================================================= */.tickets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-block-start: var(--space-lg);}.ticket-card { background: #fff; border: 4px solid #000; box-shadow: var(--shadow-md); position: relative; overflow: visible; transition: transform 0.18s ease, box-shadow 0.18s ease; display: flex; flex-direction: column;}@media (hover: hover) { .ticket-card:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: var(--shadow-xl); }}.ticket-top { padding: 1.75rem 1.75rem 1.5rem;}.ticket-tag { display: inline-block; background: var(--yellow); border: 2px solid #000; font-family: var(--font-display); font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.2rem 0.65rem; margin-block-end: 0.8rem; width: fit-content;}.ticket-tag-teal { background: var(--teal) !important; }.ticket-tag-purple { background: var(--purple) !important; color: #fff; }.ticket-top h3 { margin: 0 !important; }.ticket-sep { position: relative; height: 0; margin: 0; border: none; border-top: 3px dashed rgba(0,0,0,0.25);}.ticket-sep::before,.ticket-sep::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); border: 4px solid #000; top: 50%; transform: translateY(-50%);}.ticket-sep::before { left: -17px; }.ticket-sep::after { right: -17px; }.ticket-notch { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 4px solid #000; top: 50%; transform: translateY(-50%);}.ticket-notch-left { left: -17px; }.ticket-notch-right { right: -17px; }.ticket-dashes { flex: 1; border-top: 3px dashed rgba(0,0,0,0.25); margin: 0 12px;}.ticket-bottom { padding: 1.25rem 1.75rem 1.75rem; background: #f6f6f6; border-top: 3px dashed rgba(0,0,0,0.18); flex: 1; display: flex; flex-direction: column;}.ticket-bottom p { max-width: none !important; font-size: var(--fs-sm) !important; opacity: 0.9; margin-block-end: var(--space-sm) !important;}.ticket-bottom .wp-block-buttons { margin-top: auto !important; padding-top: 0.75rem;}.ticket-price { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--purple); display: block; margin-block-end: 0.5rem;}.ticket-inclus { display: block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; background: #000; color: var(--yellow); padding: 0.4rem 1rem; border: 3px solid #000; text-align: center; margin-block-start: auto;}.ticket-card-featured { box-shadow: var(--shadow-xl) !important; }.ticket-bottom-featured { background: var(--yellow) !important; border-top: 3px dashed rgba(0,0,0,0.3) !important; }.ticket-bottom-featured p { opacity: 0.9 !important; }@media (max-width: 64em) { .tickets-grid { grid-template-columns: repeat(2, 1fr); } }@media (max-width: 48em) { .tickets-grid { grid-template-columns: 1fr; } }/* ============================================================= 7. FEATURED GRID — grande card + 2 petites (Proposition B)============================================================= */.featured-grid { display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 0; border: 4px solid #000; box-shadow: var(--shadow-lg); margin-block-start: var(--space-lg); align-items: stretch;}.featured-main { background: var(--yellow) !important; padding: clamp(28px, 4vw, 48px) !important; border-right: 4px solid #000; display: flex !important; flex-direction: column; justify-content: flex-start; position: relative; overflow: hidden;}.featured-main > div { flex: 1; }.featured-main > .wp-block-buttons { margin-top: var(--space-sm) !important; align-self: flex-start; }.featured-main h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important; margin-bottom: 0.75rem !important; }.featured-side { display: flex; flex-direction: column; }.featured-side-card { flex: 1; padding: clamp(24px, 3vw, 36px) !important; border-bottom: 4px solid #000; background: #fff; display: flex !important; flex-direction: column; position: relative; overflow: hidden;}.featured-side-card:last-child { border-bottom: none; }.featured-side-card h3 { font-size: clamp(1.2rem, 1.8vw + 0.4rem, 1.6rem) !important; margin: 0 0 0.6rem !important; }.featured-side-card p { flex: 1; }.featured-side-card > .wp-block-buttons { margin-top: var(--space-sm) !important; align-self: flex-start; }/* Highlight strip mauve */.highlight-strip { background: var(--purple) !important; border: 4px solid #000 !important; box-shadow: var(--shadow-lg); padding: clamp(40px, 5vw, 60px) !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-block-start: 40px;}.highlight-strip h2,.highlight-strip h3 { color: #fff !important; text-shadow: 2px 2px 0 #000 !important; margin: 0 !important; }.highlight-strip p { color: rgba(255,255,255,0.8) !important; max-width: none !important; margin: 0 0 1.5rem !important; }/* Prix tag */.price-tag { display: inline-block; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; background: #000; color: var(--yellow); padding: 0.35rem 0.85rem; border: 3px solid #000; margin-block-start: 0.75rem; width: fit-content;}@media (max-width: 48em) { .featured-grid { grid-template-columns: 1fr !important; } .featured-main { border-right: none; border-bottom: 4px solid #000; } .highlight-strip { grid-template-columns: 1fr !important; }}/* ============================================================= MOBILE GLOBAL============================================================= */@media (max-width: 48em) { /* CTA final — vidéo en bannière pleine largeur au-dessus du texte */ .cta-grid { grid-template-columns: 1fr !important; } .cta-animation-wrap { min-height: 200px !important; max-height: 220px !important; overflow: hidden !important; border-bottom: 4px solid #000 !important; } .cta-video { width: 100% !important; height: 220px !important; max-width: 100% !important; object-fit: cover !important; margin: 0 !important; border: none !important; box-shadow: none !important; } .cta-final-card > .gb-element-09c4566e,.cta-final-card > [class*="cta-grid"] { padding: 0 !important; } /* process-steps : 1 colonne, pleine largeur */ .process-steps { grid-template-columns: 1fr !important; } .process-step { margin-left: 0 !important; border-bottom: 4px solid #000; border-right: none !important; } .process-step:last-child { border-bottom: none; } /* cyber-card mobile : shadow vers le bas seulement (pas de décalage horizontal qui déborde) */ .cyber-card { box-shadow: 0 4px 0 #000 !important; } /* tickets-grid : 1 colonne */ .tickets-grid { grid-template-columns: 1fr !important; } .ticket { margin-left: 0 !important; border-bottom: 4px solid #000 !important; border-right: none !important; } .ticket:last-child { border-bottom: none !important; } /* pillars-grid : 1 colonne */ .pillars-grid { grid-template-columns: 1fr !important; } /* highlight-strip : 1 colonne */ .highlight-strip { grid-template-columns: 1fr !important; } .featured-grid { grid-template-columns: 1fr !important; } .featured-main { border-right: none; border-bottom: 4px solid #000; } /* Boutons pleine largeur dans hero et sections */ .hero-text .wp-block-buttons,.cta-final-card .wp-block-buttons { width: 100%; } .hero-text .wp-block-button__link,.cta-final-card .wp-block-button__link { width: 100% !important; justify-content: center !important; } /* Stats bar : texte centré, labels wrappent */ .stat-label { white-space: normal !important; font-size: 0.7rem !important; }}/* Bouton jaune — hover noir/jaune */@media (hover: hover) { .btn-yellow:hover { background-color: #000 !important; color: var(--yellow) !important; }}/* ============== fred-reset-baseline ============== *//* ============================================================ RESET BASELINE — tout le contenu à 100%, zéro padding/margin body.page = spécificité suffisante pour battre portfolio============================================================ */body.page .inside-article .entry-content,body.page .inside-article .wp-block-group,body.page .inside-article .wp-block-group__inner-container,body.page .inside-article .section-lg,body.page .inside-article .section-sm,body.page .inside-article .section,body.page .inside-article .container,body.page .inside-article .container-narrow,body.page .inside-article .hero-standard,body.page .inside-article .hero-text,body.page .inside-article .hero-img,body.page .inside-article .cta-final-card,body.page .inside-article .stats-bar,body.page .inside-article .related-services,body.page .inside-article .highlight-strip,body.page .inside-article .featured-grid,body.page .inside-article .tickets-grid,body.page .inside-article .process-steps,body.page .inside-article .pillars-grid,body.page .inside-article .services-grid,body.page .inside-article .decisions-grid,body.page .inside-article .screens-grid,body.page .inside-article .project-split,body.page .inside-article .project-meta,body.page .inside-article [class*="gb-element-"] { max-width: none !important; width: auto !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important;}/* ============================================================ RÈGLE UNIQUE D'ALIGNEMENT Un seul conteneur gère le padding gauche/droit + largeur max. Tous les blocs enfants (100% du reset) s'alignent dessus.============================================================ */body.page .inside-article { max-width: var(--container-max) !important; /* 1200px */ margin-inline: auto !important; padding-inline: var(--gutter) !important; /* clamp(20px, 4vw, 40px) */ padding-block-end: 0 !important; /* flush avec le footer (CTA full-bleed) */ box-sizing: border-box !important;}/* Annuler les marges GP qui créent un gap avant le footer (.separate-containers .site-main margin:20px + .site-main > * margin-bottom:20px) */body.page .site-main { margin-block-end: 0 !important;}body.page .site-main > * { margin-bottom: 0 !important;}/* ============================================================ SPACING VERTICAL (owl selector, multi-niveaux) Remplace les spacers manuels. Niveau 1 (majeur) : entre les gros blocs — sections, hero, CTA, stats-bar, grilles. S'applique à entry-content ET aux inner-containers de section (où plusieurs blocs s'empilent). Niveau 2 (contenu) : rythme plus serré entre eyebrow, titre et grille à l'intérieur d'un container.============================================================ *//* Niveau 1 — gros écart entre blocs majeurs. Couvre les deux structures : - GenerateBlocks : section-lg > [container, stats-bar, ...] - Core WP group : section-lg > inner-container > [...] */body.page .entry-content > * + *,body.page .section-lg > * + *,body.page .section-lg > .wp-block-group__inner-container > * + * { margin-block-start: clamp(56px, 8vw, 96px) !important;}/* Niveau 2 — rythme du contenu dans un container (eyebrow, titre, grille) */body.page .container > * + *,body.page .container > .wp-block-group__inner-container > * + * { margin-block-start: clamp(20px, 3vw, 32px) !important;}/* Fil d'Ariane "← Portfolio" : petit écart avec le bloc suivant (pas le gros écart inter-sections) */body.parent-pageid-1575 .inside-article .back-to-portfolio + * { margin-block-start: clamp(16px, 2vw, 24px) !important;}/* ============================================================ PADDING INTERNE — blocs qui en ont besoin (le reset ci-dessus les a mis à 0, on les restaure ici)============================================================ */body.page .inside-article .highlight-strip { padding: clamp(40px, 5vw, 60px) !important;}/* Hero : colonne texte Padding horizontal = card-padding - 4px (bordure) pour que le texte du hero s'aligne exactement avec le texte des cartes en dessous */body.page .inside-article .hero-text { padding: clamp(50px, 7vw, 90px) calc(var(--card-padding) - 4px) !important;}/* Eyebrow du hero : aligné à gauche comme le H1 (Simple CSS le centrait) */body.page .inside-article .hero-text .eyebrow { text-align: left !important; margin-inline: 0 !important;}/* Exception : heros explicitement centrés */body.page .inside-article .hero-center .hero-text .eyebrow { text-align: center !important; margin-inline: auto !important;}/* Cartes (core-group) : padding interne sur l'inner-container que le reset avait mis à 0 */body.page .inside-article .cyber-card > .wp-block-group__inner-container { padding: var(--card-padding) !important;}/* Bande "Mes autres services" : padding interne (bloc sombre full-width) */body.page .inside-article .related-services { padding: var(--space-xl) var(--gutter) !important;}/* Prix des tickets : texte centré */body.page .inside-article .ticket-price { text-align: center !important;}/* Bouton dans les cartes ticket : centré */body.page .inside-article .ticket-card .wp-block-buttons,body.page .inside-article .ticket-bottom .wp-block-buttons { justify-content: center !important; text-align: center !important;}/* Stats-bar : pleine largeur viewport (full-bleed band) */body.page .inside-article .stats-bar { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; box-sizing: border-box !important;}/* FAQ : texte aligné sur la ligne B (texte des cartes = var(--card-padding)) */body.page .inside-article .faq-list summary { padding-inline: var(--card-padding) !important;}body.page .inside-article .faq-answer { padding-inline: var(--card-padding) !important;}/* ============================================================ CTA CONTACT — pleine largeur viewport (full-bleed band) Le bloc sort du conteneur 1200px ; son contenu reste centré.============================================================ */body.page .inside-article .cta-final-card { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-block: clamp(48px, 6vw, 88px) !important; padding-inline: 0 !important; /* gutter géré par le contenu pour aligner avec inside-article */ border-left: none !important; border-right: none !important; box-shadow: none !important; box-sizing: border-box !important;}/* Contenu du CTA : même boîte que inside-article (1200px + gutter) pour que la vidéo s'aligne avec les blocs au-dessus */body.page .inside-article .cta-final-card > * { max-width: var(--container-max) !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; box-sizing: border-box !important;}/* Pas de hover sur le conteneur CTA (les éléments internes gardent le leur) */body.page .inside-article .cta-final-card:hover { transform: none !important; box-shadow: none !important;}/* ============================================================ SERVICE CARDS — liens "Voir ce service" alignés en bas (cartes de hauteur égale + lien poussé au fond de la carte)============================================================ */body.page .inside-article .service-card { display: flex !important; flex-direction: column !important; height: 100% !important;}body.page .inside-article .service-card-body { display: flex !important; flex-direction: column !important; flex: 1 !important;}/* margin-top: auto pousse le lien au bas — corrige le conflit margin-block-start:auto vs margin-top:var(--space-lg) */body.page .inside-article .service-card-body a { margin-top: auto !important; margin-block-start: auto !important;}/* ============================================================ VERROU TYPOGRAPHIQUE — COHÉRENCE FORCÉE (set & forget) ------------------------------------------------------------ Chaque niveau de titre = UN seul style partout sur le site. Invariants : police Lexend, graisse 900, MAJUSCULES, interligne et interlettrage identiques, taille fixe par niveau (hiérarchie conservée : h1 > h2 > h3 > h4). La couleur + l'ombre s'adaptent au fond pour rester lisibles. Placé en dernier : prime sur toute surcharge contextuelle.============================================================ *//* 1. INVARIANTS — tous les titres, partout */body.page .inside-article .entry-content :is(h1,h2,h3,h4,h5,h6) { font-family: var(--font-display) !important; font-weight: var(--fw-black) !important; text-transform: uppercase !important; line-height: var(--lh-tight) !important; letter-spacing: var(--ls-tight) !important; color: #000 !important; text-shadow: none !important; text-wrap: balance;}/* 2. TAILLE FIXE PAR NIVEAU (hiérarchie) + ombre jaune signature sur H1/H2 */body.page .inside-article .entry-content h1 { font-size: var(--fs-h1) !important; text-shadow: 2px 2px 0 var(--yellow) !important; }body.page .inside-article .entry-content h2 { font-size: var(--fs-h2) !important; text-shadow: 2px 2px 0 var(--yellow) !important; }body.page .inside-article .entry-content h3 { font-size: var(--fs-h3) !important; }body.page .inside-article .entry-content h4 { font-size: var(--fs-h4) !important; }body.page .inside-article .entry-content h5 { font-size: var(--fs-h4) !important; }body.page .inside-article .entry-content h6 { font-size: var(--fs-h4) !important; }/* 3. EXCEPTIONS LISIBILITÉ — titres sur fonds colorés (l'ombre jaune serait invisible sur jaune ; le texte noir serait illisible sur fond sombre) *//* Fond jaune (carte CTA, etc.) : texte noir, ombre sombre discrète */body.page .inside-article .entry-content .cyber-card-yellow :is(h1,h2,h3,h4) { color: #000 !important; text-shadow: 2px 2px 0 rgba(0,0,0,0.22) !important;}/* Fond mauve : texte blanc, ombre noire */body.page .inside-article .entry-content .cyber-card-purple :is(h1,h2,h3,h4),body.page .inside-article .entry-content .highlight-strip :is(h1,h2,h3,h4) { color: #fff !important; text-shadow: 2px 2px 0 #000 !important;}/* Bande sombre "Mes autres services" : H2 jaune, sous-titres blancs */body.page .inside-article .entry-content .related-services h2 { color: var(--yellow) !important; text-shadow: none !important;}body.page .inside-article .entry-content .related-services :is(h3,h4) { color: #fff !important; text-shadow: none !important;}/* ============================================================ EYEBROW / TAGLINE — un seul style partout (set & forget)============================================================ */body.page .inside-article .entry-content :is(.eyebrow,.hero-eyebrow,.section-badge) { font-family: var(--font-display) !important; font-size: var(--fs-sm) !important; font-weight: var(--fw-bold) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; line-height: var(--lh-snug) !important; color: var(--purple) !important;}/* Eyebrow sur bande sombre : teal pour le contraste */body.page .inside-article .entry-content .related-services :is(.eyebrow,.section-badge) { color: var(--teal) !important;}/* ============================================================ FOOTER — Fred Marketing Web (SEO + UX + design neobrutalisme)============================================================ */.site-footer { background: var(--black) !important; border-top: 4px solid #000; }.site-info { background: transparent !important; padding: 0 !important; }.site-info .inside-site-info { max-width: none !important; padding: 0 !important; }.copyright-bar { padding: 0 !important; }.fred-footer { color: #fff; }.fred-footer-inner { max-width: var(--container-max); margin-inline: auto; padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(28px, 4vw, 40px);}.fred-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); text-align: left;}.fred-footer-logo { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.6rem); letter-spacing: -0.02em; color: #fff; margin: 0 0 0.75rem;}.fred-footer-tagline { color: #fff; font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 1.4rem; max-width: 38ch;}.fred-footer-cta { display: inline-block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: 0.04em; background: var(--yellow); color: #000 !important; text-decoration: none !important; border: 3px solid #000; box-shadow: 4px 4px 0 #000; padding: 0.7rem 1.3rem; transition: transform 0.12s steps(1), box-shadow 0.12s steps(1);}.fred-footer-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }.fred-footer .fred-footer-h { font-family: var(--font-display) !important; font-weight: 900 !important; text-transform: uppercase !important; font-size: 0.72rem !important; letter-spacing: 0.14em !important; color: var(--yellow) !important; text-shadow: none !important; margin: 0 0 1rem !important; line-height: 1.2 !important;}.fred-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }.fred-footer a { color: #fff !important; text-decoration: none !important; font-size: var(--fs-sm); transition: color 0.12s ease;}.fred-footer a:hover { color: var(--yellow) !important; }.fred-footer-contact li { color: #fff; font-size: var(--fs-sm); }.fred-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.14); margin-top: clamp(32px, 4vw, 48px); padding-top: 1.5rem; font-size: var(--fs-sm); color: rgba(255,255,255,0.85);}.fred-footer-bottom a { color: rgba(255,255,255,0.85) !important; text-decoration: underline; text-underline-offset: 2px; }.fred-footer-bottom a:hover { color: var(--yellow) !important; }@media (max-width: 64em) { .fred-footer-grid { grid-template-columns: 1fr 1fr; } }@media (max-width: 40em) { .fred-footer-grid { grid-template-columns: 1fr; } .fred-footer-bottom { flex-direction: column; align-items: flex-start; }}/* ============================================================ FOOTER A11Y — focus clavier visible (WCAG AAA)============================================================ */.fred-footer a:focus-visible,.fred-footer-cta:focus-visible { outline: 3px solid var(--yellow) !important; outline-offset: 3px !important; border-radius: 2px;}.fred-footer-cta:focus-visible { outline-color: #000 !important; }/* Fix contraste : CTA footer toujours noir sur jaune (AAA) */.fred-footer a.fred-footer-cta { color: #000 !important; }.fred-footer a.fred-footer-cta:hover { color: #000 !important; }/* ============================================================ CARTES FORFAITS — version épurée (retire l'esthétique "ticket") Pas de séparateur dentelé, pas d'encoches rondes, fond uni, contenu aligné à gauche, bouton pleine largeur collé en bas.============================================================ */.ticket-sep,.ticket-notch,.ticket-notch-left,.ticket-notch-right,.ticket-dashes { display: none !important; }.ticket-sep::before,.ticket-sep::after { display: none !important; content: none !important; }.ticket-card { background: #fff !important; display: flex !important; flex-direction: column !important; overflow: hidden !important;}.ticket-card:hover { transform: translateY(-5px) !important; }.ticket-top { padding: clamp(28px, 3.5vw, 40px) clamp(26px, 3vw, 34px) 0 !important;}.ticket-top .ticket-tag { margin: 0 0 0.9rem !important; width: fit-content; }.ticket-top h3 { margin: 0 !important; }.ticket-bottom,.best-tickets .ticket-bottom,.ticket-bottom-featured,.best-tickets .ticket-bottom-featured { background: transparent !important; border-top: none !important; padding: clamp(16px, 2vw, 22px) clamp(26px, 3vw, 34px) clamp(28px, 3.5vw, 38px) !important; display: flex !important; flex-direction: column !important; flex: 1 !important; align-items: stretch !important;}.ticket-bottom p { text-align: left !important; opacity: 0.9 !important; margin: 0 0 1.1rem !important;}.ticket-price { text-align: left !important; display: block !important; margin: 0 0 1.4rem !important;}/* Bouton : pleine largeur, centré, collé au bas, aligné dans les 3 cartes */.ticket-bottom .wp-block-buttons,.best-tickets .ticket-bottom .wp-block-buttons { justify-content: stretch !important; margin-top: auto !important; width: 100%;}.ticket-bottom .wp-block-button { width: 100%; }.ticket-bottom .wp-block-button__link { width: 100% !important; justify-content: center !important;}/* Forfaits : prix collé juste au-dessus du bouton (groupe prix+CTA en bas) */.ticket-bottom p { margin: 0 0 1.1rem !important; }.ticket-price { margin-top: auto !important; /* pousse prix + bouton au bas */ margin-bottom: 0.9rem !important; text-align: left !important; display: block !important;}.ticket-bottom .wp-block-buttons,.best-tickets .ticket-bottom .wp-block-buttons { margin-top: 0 !important; /* bouton directement sous le prix */}/* Forfaits : description grandit pour pousser le bouton au bas (fonctionne avec ou sans prix) */.ticket-bottom p { flex: 1 1 auto !important; margin: 0 0 1rem !important; }.ticket-price { margin-top: 0 !important; margin-bottom: 0.9rem !important; }.ticket-bottom .wp-block-buttons,.best-tickets .ticket-bottom .wp-block-buttons { margin-top: 0 !important; }/* ============================================================ ANTI-FOUC MENU — force le layout horizontal sur desktop même si .toggled (état mobile) flashe pendant le chargement. Breakpoint mobile = 768px, donc desktop = >=769px.============================================================ */@media (min-width: 769px) { .main-navigation .main-nav > ul, .main-navigation.toggled .main-nav > ul { display: flex !important; flex-wrap: nowrap !important; } /* Annule le style "bouton mauve mobile" du dernier item sur desktop */ .main-navigation.toggled .main-nav > ul > li:last-child > a { background-color: transparent !important; color: #000 !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; } /* Le hamburger ne doit jamais apparaître sur desktop */ .main-navigation .menu-toggle { display: none !important; }}/* ============================================================ NAV DESKTOP — hover épuré (retire l'effet "bouton jaune" qui flashait au clic). On garde le soulignement (::after).============================================================ */@media (hover: hover) { .main-navigation .main-nav > ul > li > a:hover, .main-navigation .main-nav > ul > li:last-child > a:hover { background-color: transparent !important; transform: none !important; box-shadow: none !important; }}.main-navigation .main-nav > ul > li > a:active,.main-navigation .main-nav > ul > li:last-child > a:active,.main-navigation .main-nav > ul > li > a:focus { background-color: transparent !important; transform: none !important; box-shadow: none !important;}/* ============================================================ NAV — ÉTATS STABLES (correctif final) Aucun déplacement au survol/clic. CONTACT toujours mauve. Liens réguliers : propres (soulignement seulement).============================================================ *//* Aucun transform (déplacement) sur toute la nav, tous états */.main-navigation .main-nav > ul > li > a,.main-navigation .main-nav > ul > li > a:hover,.main-navigation .main-nav > ul > li > a:focus,.main-navigation .main-nav > ul > li > a:active { transform: none !important;}/* Liens réguliers (sauf CONTACT) : pas de fond ni d'ombre au survol/clic */.main-navigation .main-nav > ul > li:not(:last-child) > a:hover,.main-navigation .main-nav > ul > li:not(:last-child) > a:focus,.main-navigation .main-nav > ul > li:not(:last-child) > a:active { background-color: transparent !important; box-shadow: none !important;}/* CONTACT : toujours mauve, ombre stable, dans TOUS les états */.main-navigation .main-nav > ul > li:last-child > a,.main-navigation .main-nav > ul > li:last-child > a:hover,.main-navigation .main-nav > ul > li:last-child > a:focus,.main-navigation .main-nav > ul > li:last-child > a:active { background-color: var(--purple) !important; color: #FFF !important; box-shadow: var(--shadow-sm) !important;}/* Si .toggled flashe sur desktop, CONTACT reste mauve (pas transparent) */@media (min-width: 769px) { .main-navigation.toggled .main-nav > ul > li:last-child > a { background-color: var(--purple) !important; color: #FFF !important; }}/* CONTACT est un bouton, pas un lien texte : pas de soulignement jaune */.main-navigation .main-nav > ul > li:last-child > a::after,.main-navigation .main-nav > ul > li:last-child > a:hover::after { display: none !important; width: 0 !important; content: none !important;}/* ============================================================ HERO — ombre dure signature (neobrutalisme) S'applique à tous les .hero-standard (pages + pattern).============================================================ */.hero-standard { box-shadow: var(--shadow-lg) !important; }@media (max-width: 48em) { .hero-standard { box-shadow: var(--shadow-md) !important; }}/* ============================================================ KILL HSCROLL — coupe le débordement du CTA/stats-bar full-bleed sur les wrappers pleine largeur (fiable, niveau élément).============================================================ */.site,.site-content,.content-area,.site-main { max-width: 100% !important; overflow-x: clip !important;}/* ============================================================ AVIS / PREUVE SOCIALE============================================================ */.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-block-start: var(--space-lg);}.review-card { background: #fff; border: 4px solid #000; box-shadow: var(--shadow-md); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 0.9rem;}.review-stars { color: #000; font-size: 1.3rem; letter-spacing: 3px; line-height: 1; }.review-quote { font-size: var(--fs-body) !important; line-height: 1.6 !important; color: #000 !important; flex: 1; margin: 0 !important; max-width: none !important;}.review-author { display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; }.review-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; color: #000; font-size: 0.95rem; letter-spacing: 0.02em;}.review-biz { font-size: var(--fs-sm); color: #000; }.review-source { font-family: var(--font-display); font-weight: 900; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--purple);}@media (max-width: 64em) { .reviews-grid { grid-template-columns: 1fr; } }/* Service cards : texte plus large, padding réduit + écart resserré. La grille reste alignée sur le conteneur 1200px (choix volontaire). */body.page .service-card-body { padding: clamp(16px, 1.8vw, 24px) !important;}body.page .services-grid,body.page .services-grid > .wp-block-group__inner-container { gap: 24px !important; column-gap: 24px !important;}/* ============================================================ COHÉRENCE TYPO — paragraphes de cartes Tous les textes de description de carte : même taille, même interligne.============================================================ */body.page .service-card-body p,body.page .decision-desc,body.page .ticket-bottom p,body.page .related-service-link p,body.page .review-quote,body.page .featured-main p,body.page .featured-side-card p,body.page .card-numbered p,body.page .cyber-card p { font-size: var(--fs-body) !important; line-height: 1.6 !important;}/* ============================================================ FIL D'ARIANE============================================================ */.back-to-portfolio { display: none !important; }body.page .fred-breadcrumb { max-width: var(--container-max); margin-inline: auto; padding: var(--space-md) var(--gutter) 0; box-sizing: border-box; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;}.fred-breadcrumb .rank-math-breadcrumb p { margin: 0 !important; max-width: none !important; }.fred-breadcrumb a { color: var(--purple) !important; text-decoration: none !important; }.fred-breadcrumb a:hover { color: #000 !important; }.fred-breadcrumb .separator { color: rgba(0,0,0,0.35); margin: 0 0.4rem; }.fred-breadcrumb .last, .fred-breadcrumb .rank-math-breadcrumb p > span:last-child { color: #000; }/* Lien vers tous les avis Google */.reviews-cta { text-align:center; margin-block-start: var(--space-lg); }.reviews-cta a { display:inline-block; font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:0.04em; font-size:var(--fs-sm); color:#000 !important; text-decoration:none !important; border:3px solid #000; background:var(--yellow); box-shadow:4px 4px 0 #000; padding:0.7rem 1.3rem; transition:transform .12s steps(1), box-shadow .12s steps(1); }.reviews-cta a:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000; }/* ============================================================ CORRECTIF — services-grid en HTML brut (calque landing + patterns) Le bloc wp:html ne genere pas de wrapper .wp-block-html cote front, et ces grilles n'ont pas de .wp-block-group__inner-container. On cible donc directement la grille a cartes directes. N'affecte PAS la version wp:group (Magog / pages de service) qui passe par l'inner-container.============================================================ */.services-grid:has(> .cyber-card) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 24px !important; row-gap: 24px !important; margin-block-start: var(--space-lg);}@media (max-width: 64em) { .services-grid:has(> .cyber-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }}@media (max-width: 48em) { .services-grid:has(> .cyber-card) { grid-template-columns: 1fr !important; }}/* ============================================================ HERO SOLO (sans image) — pages de niche / landing Variante 1 colonne, texte centre. S'active via la classe hero-solo sur le .hero-standard. Annule la grille 2 colonnes et le min-height qui supposent une image. Scope body.page .inside-article pour battre le reset-baseline.============================================================ */body.page .inside-article .hero-standard.hero-solo { min-height: 0 !important; }body.page .inside-article .hero-standard.hero-solo > .wp-block-group__inner-container { display: block !important; grid-template-columns: none !important; min-height: 0 !important; max-width: var(--content-max, 880px) !important; margin-inline: auto !important; padding: clamp(48px, 7vw, 88px) var(--gutter) !important; text-align: center;}body.page .inside-article .hero-standard.hero-solo .hero-text { text-align: center; }/* Cartes cliquables (services-grid) : garder le style carte, pas le style lien */.services-grid a.cyber-card, .services-grid a.cyber-card h3, .services-grid a.cyber-card p { color: inherit; }.services-grid a.cyber-card { text-decoration: none; display: block; }/* ============================================================ PAGE 404 PERSONNALISEE (fred-404.php)============================================================ */body.error404 .inside-article { display: none; }.fred-404 { text-align: center; }.fred-404 .container { max-width: var(--content-max, 760px); margin-inline: auto; }.fred-404 p { margin-inline: auto; max-width: 560px; }.fred-404-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-block-start: var(--space-md); }.fred-404-links a { display: inline-block; padding: 12px 22px; border: 3px solid #000; background: #fff; color: #000; font-weight: 700; text-decoration: none; box-shadow: 4px 4px 0 #000; transition: transform .12s, box-shadow .12s, background-color .12s; }.fred-404-links a:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; background: var(--yellow); }.fred-404-links a.fred-404-cta { background: var(--yellow); }/* Utilitaires tags (remplacent les styles inline ticket-tag) */.tag-inline { display: inline-block; width: fit-content; }.tag-inline-mb { display: inline-block; width: fit-content; margin-bottom: 0.8rem; }.tag-inline-row { display: inline-block; width: fit-content; margin: 0 6px 6px 0; }