/* ============================================================= home-premium.css — Refonte visuelle "Tech premium sombre" Scopée via body.adc-premium (appliquée sur l'ensemble des pages). Direction : graphite + 1 accent indigo discipliné, typo XXL, surfaces travaillées, motion sobre. Style Linear / Vercel. Aucune dépendance externe (CSP: style-src 'self' OK). Aucune règle non scopée : sans .adc-premium sur , rien ne s'applique. ============================================================= */ /* ---------- 1. Tokens : palette premium (dark par défaut) ---- */ body.adc-premium{ --pd-bg: #0a0b10; --pd-bg-2: #0d0f16; --pd-surface: #101320; --pd-card: #14172130; /* base carte (semi) */ --pd-card-solid:#141824; --pd-card-2: #1a1f2e; --pd-border: rgba(255,255,255,.075); --pd-border-2: rgba(255,255,255,.14); --pd-text-1: #f4f6fb; --pd-text-2: #a7adbd; --pd-text-3: #8b93a7; /* WCAG 1.4.3 : ~4.6:1 sur fond sombre (etait #6b7284 = 3.7:1) */ --pd-accent: #6d7bff; /* indigo — L'accent */ --pd-accent-2: #a06bff; /* violet — pointe de dégradé */ --pd-accent-ink:#c3caff; --pd-glow: rgba(109,123,255,.30); --pd-radius: 18px; --pd-radius-sm: 12px; --pd-radius-xs: 9px; --pd-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -30px rgba(0,0,0,.75); --pd-shadow-hover: 0 1px 0 rgba(255,255,255,.07) inset, 0 40px 90px -34px rgba(0,0,0,.85), 0 0 0 1px var(--pd-border-2); --pd-ease: cubic-bezier(.22,1,.36,1); color-scheme: dark; /* Remap des tokens d'origine → palette premium. Rend cohérentes les sections à styles inline (bandeau, freemium…) et le CSS partagé, sans éditer chaque style inline. Amber → indigo. */ --bg-base:var(--pd-bg); --bg-surface:var(--pd-bg-2); --bg-card:var(--pd-card-solid); --bg-hover:var(--pd-card-2); --bg-2:var(--pd-bg-2); --surface-1:var(--pd-card-solid); --surface-2:var(--pd-card-2); --border:var(--pd-border); --border-strong:var(--pd-border-2); --text-1:var(--pd-text-1); --text-2:var(--pd-text-2); --text-3:var(--pd-text-3); --text-primary:var(--pd-text-1); --amber:var(--pd-accent); --amber-text:var(--pd-accent-ink); --amber-dim:color-mix(in srgb,var(--pd-accent) 12%,transparent); --focus-ring:var(--pd-accent); } /* ---------- Variante claire premium (toggle respecté) -------- */ [data-theme="light"] body.adc-premium{ --pd-bg: #ffffff; --pd-bg-2: #f7f8fc; --pd-surface: #f3f5fb; --pd-card: #ffffff; --pd-card-solid:#ffffff; --pd-card-2: #f7f8fc; --pd-border: rgba(12,16,30,.09); --pd-border-2: rgba(12,16,30,.16); --pd-text-1: #0c0f1a; --pd-text-2: #4b5265; --pd-text-3: #6b7280; /* WCAG 1.4.3 : ~4.6:1 sur fond clair (etait #8a91a3 = 2.9:1) */ --pd-accent: #4f57e6; --pd-accent-2: #8b46e8; --pd-accent-ink:#3a41c9; --pd-glow: rgba(79,87,230,.16); --pd-shadow: 0 1px 2px rgba(12,16,30,.04), 0 20px 44px -30px rgba(12,16,30,.28); --pd-shadow-hover: 0 24px 60px -30px rgba(12,16,30,.34), 0 0 0 1px var(--pd-border-2); color-scheme: light; } /* ---------- 2. Base ----------------------------------------- */ body.adc-premium{ background:var(--pd-bg); color:var(--pd-text-2); font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.adc-premium main{background:var(--pd-bg);} body.adc-premium h1, body.adc-premium h2, body.adc-premium h3, body.adc-premium .section-title, body.adc-premium .nl-title{ font-family:"Syne",system-ui,sans-serif; color:var(--pd-text-1); letter-spacing:-.02em; } /* Section backgrounds — alternance sobre, pas de gris plat */ body.adc-premium .section-padding{background:var(--pd-bg);position:relative;} body.adc-premium .bg-light, body.adc-premium .jobs-section, body.adc-premium .nl-section{background:var(--pd-bg-2);} body.adc-premium .stats-strip{background:var(--pd-surface);} /* Eyebrow mono */ body.adc-premium .section-num{ color:var(--pd-accent); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.72rem;letter-spacing:.06em;text-transform:lowercase; opacity:.9;margin-bottom:.6rem; } body.adc-premium .section-title{ font-size:clamp(1.9rem,1.1rem+3vw,3.2rem); font-weight:800;line-height:1.05;margin-bottom:.7rem; } body.adc-premium .section-subtitle{ color:var(--pd-text-2);font-size:clamp(.95rem,.9rem+.3vw,1.08rem); line-height:1.6;max-width:56ch; } /* ---------- 3. Header : verre premium ----------------------- */ body.adc-premium .header{ background:color-mix(in srgb,var(--pd-bg) 72%,transparent); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--pd-border); } body.adc-premium .nav a{color:var(--pd-text-2);transition:color .2s var(--pd-ease);} body.adc-premium .nav a:hover, body.adc-premium .nav a.active{color:var(--pd-text-1);} body.adc-premium .nav a.active{position:relative;} body.adc-premium .nav a.active::after{ content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px; background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-2));border-radius:2px; } body.adc-premium .lang-switch a{color:var(--pd-text-3);} body.adc-premium .lang-switch a.active{color:var(--pd-text-1);} /* ---------- 4. Boutons -------------------------------------- */ body.adc-premium .btn{ border-radius:var(--pd-radius-xs);font-weight:650;letter-spacing:-.01em; transition:transform .2s var(--pd-ease),box-shadow .25s var(--pd-ease),background .2s var(--pd-ease),border-color .2s var(--pd-ease); } body.adc-premium .btn-primary, body.adc-premium .btn-secondary, body.adc-premium .nl-submit{ /* WCAG 1.4.3 : dégradé assombri (indigo-600 -> violet-600) pour que le texte blanc du CTA passe >=4.9:1 ; l'accent clair --pd-accent restait a 3.5:1. */ background:linear-gradient(135deg,#4f57e6,#7c3aed); color:#fff;border:none; box-shadow:0 8px 24px -10px var(--pd-glow),0 1px 0 rgba(255,255,255,.2) inset; } body.adc-premium .btn-primary:hover, body.adc-premium .btn-secondary:hover, body.adc-premium .nl-submit:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -12px var(--pd-glow),0 1px 0 rgba(255,255,255,.25) inset; opacity:1; } body.adc-premium .btn-outline, body.adc-premium .btn-ghost-amber{ background:color-mix(in srgb,var(--pd-text-1) 4%,transparent); color:var(--pd-text-1); border:1px solid var(--pd-border-2); } body.adc-premium .btn-outline:hover, body.adc-premium .btn-ghost-amber:hover{ border-color:var(--pd-accent); color:var(--pd-text-1); background:color-mix(in srgb,var(--pd-accent) 12%,transparent); transform:translateY(-2px); } /* ---------- 5. HERO ----------------------------------------- */ body.adc-premium .hero{ background:radial-gradient(120% 90% at 78% -10%,color-mix(in srgb,var(--pd-accent) 16%,transparent) 0%,transparent 55%),var(--pd-bg)!important; padding-top:clamp(3rem,2rem+4vw,6rem); padding-bottom:clamp(3rem,2rem+4vw,6rem); border-bottom:1px solid var(--pd-border); overflow:hidden; } /* Halo unique discipliné : on garde 1 orbe, on efface le reste */ body.adc-premium .hbc-orb--1{ background:radial-gradient(circle,var(--pd-glow) 0%,transparent 70%)!important; opacity:.9; } body.adc-premium .hbc-orb--2{ background:radial-gradient(circle,color-mix(in srgb,var(--pd-accent-2) 22%,transparent) 0%,transparent 70%)!important; opacity:.5; } body.adc-premium .hbc-orb--3{display:none!important;} body.adc-premium .hbc-grid{ background-image:linear-gradient(color-mix(in srgb,var(--pd-accent) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pd-accent) 8%,transparent) 1px,transparent 1px)!important; -webkit-mask-image:radial-gradient(120% 80% at 60% 0%,#000 0%,transparent 70%); mask-image:radial-gradient(120% 80% at 60% 0%,#000 0%,transparent 70%); opacity:.6; } body.adc-premium .hbc-photo{opacity:.06!important;} body.adc-premium .hero-tag{ display:inline-flex;align-items:center;gap:.45rem; background:color-mix(in srgb,var(--pd-accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--pd-accent) 30%,transparent); color:var(--pd-accent-ink)!important; font-family:"JetBrains Mono",monospace;font-size:.68rem;font-weight:600; letter-spacing:.04em;padding:5px 12px;border-radius:100px; } body.adc-premium .hero-left h1{ font-size:clamp(2.6rem,1.4rem+5.6vw,5.4rem); line-height:.98;font-weight:800;letter-spacing:-.035em; margin:.2rem 0 1.1rem;color:var(--pd-text-1); } body.adc-premium .hero-left h1 .accent{ background:linear-gradient(105deg,var(--pd-accent) 0%,var(--pd-accent-2) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } body.adc-premium .hero-description{ color:var(--pd-text-2);font-size:clamp(1rem,.95rem+.4vw,1.22rem); line-height:1.6;max-width:34ch; } body.adc-premium .hero-description strong{color:var(--pd-text-1);} body.adc-premium .hero-cta{margin-top:1.6rem;gap:.8rem;} /* Terminal — chrome premium (légitime pour une école QA/dev) */ body.adc-premium .terminal-window{ background:linear-gradient(180deg,var(--pd-card-2),var(--pd-card-solid)); border:1px solid var(--pd-border-2); border-radius:var(--pd-radius); box-shadow:var(--pd-shadow); overflow:hidden;position:relative; } body.adc-premium .terminal-window::after{ content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit; box-shadow:0 0 90px -30px var(--pd-glow) inset; } body.adc-premium .terminal-bar{ background:color-mix(in srgb,var(--pd-bg) 55%,var(--pd-card-2)); border-bottom:1px solid var(--pd-border); } body.adc-premium .terminal-title{color:var(--pd-text-3);font-family:"JetBrains Mono",monospace;} body.adc-premium .terminal-body{font-family:"JetBrains Mono",monospace;font-size:.82rem;line-height:1.65;} body.adc-premium .ct-comment{color:var(--pd-text-3);} body.adc-premium .ct-keyword{color:var(--pd-accent);} body.adc-premium .ct-module{color:var(--pd-accent-2);} body.adc-premium .ct-str{color:#7fd6c0;} body.adc-premium .ct-method{color:var(--pd-accent-ink);} body.adc-premium .terminal-cursor{background:var(--pd-accent);} /* ---------- 6. Stats strip ---------------------------------- */ body.adc-premium .stats-strip{ border-top:1px solid var(--pd-border);border-bottom:1px solid var(--pd-border); } body.adc-premium .stat-item{border:none;} body.adc-premium .stat-label{color:var(--pd-text-3);font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;} body.adc-premium .stat-value{ font-family:"Syne",sans-serif;font-weight:800;color:var(--pd-text-1); background:linear-gradient(120deg,var(--pd-text-1),var(--pd-accent-ink)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* ---------- 7. Cartes : traitement unifié ------------------- */ body.adc-premium .icp-card, body.adc-premium .domain-card, body.adc-premium .formation-type-card, body.adc-premium .formation-card, body.adc-premium .job-card, body.adc-premium .certification-card, body.adc-premium .testimonial-card, body.adc-premium .blog-card, body.adc-premium .proof-item{ background:var(--pd-card-solid); border:1px solid var(--pd-border); border-radius:var(--pd-radius); box-shadow:var(--pd-shadow); transition:transform .28s var(--pd-ease),box-shadow .28s var(--pd-ease),border-color .28s var(--pd-ease); } body.adc-premium .icp-card:hover, body.adc-premium .domain-card:hover, body.adc-premium .formation-type-card:hover, body.adc-premium .formation-card:hover, body.adc-premium .job-card:hover, body.adc-premium .certification-card:hover, body.adc-premium .blog-card:hover{ transform:translateY(-4px); box-shadow:var(--pd-shadow-hover); border-color:var(--pd-border-2); } body.adc-premium .icp-card h3, body.adc-premium .domain-card h3, body.adc-premium .formation-type-card h3, body.adc-premium .formation-card h3, body.adc-premium .job-card h3, body.adc-premium .certification-card h3, body.adc-premium .testimonial-card strong, body.adc-premium .blog-card h3{color:var(--pd-text-1);} body.adc-premium .icp-card p, body.adc-premium .domain-card p, body.adc-premium .formation-type-card p, body.adc-premium .formation-card p, body.adc-premium .job-card p, body.adc-premium .certification-card p, body.adc-premium .blog-card p{color:var(--pd-text-2);} /* ---------- 8. ICP : icônes fines (fin des emojis) ---------- */ body.adc-premium .icp-card-emoji{display:none;} /* emoji cassé masqué */ body.adc-premium .icp-card-ico{ display:inline-flex;align-items:center;justify-content:center; width:48px;height:48px;border-radius:13px;margin-bottom:1rem; background:color-mix(in srgb,var(--pd-accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--pd-accent) 28%,transparent); color:var(--pd-accent-ink);font-size:1.15rem; } body.adc-premium .icp-card-tag{ color:var(--pd-accent-ink); font-family:"JetBrains Mono",monospace;font-size:.68rem; letter-spacing:.05em;text-transform:uppercase; } body.adc-premium .icp-card-link, body.adc-premium .domain-link, body.adc-premium .icp-footer-link{ color:var(--pd-accent-ink);font-weight:600; } body.adc-premium .icp-card-link:hover, body.adc-premium .domain-link:hover{color:var(--pd-text-1);} body.adc-premium .icp-footer-note{color:var(--pd-text-2);} /* ---------- 9. Domaines : fin de l'arc-en-ciel -------------- */ /* Un seul accent pour toutes les cartes, quelle que soit data-dc-color */ body.adc-premium .domain-card[data-dc-color]{--dc-color:var(--pd-accent)!important;--dc-text:var(--pd-accent-ink)!important;} body.adc-premium .domain-icon{ background:color-mix(in srgb,var(--pd-accent) 14%,transparent)!important; border:1px solid color-mix(in srgb,var(--pd-accent) 26%,transparent); color:var(--pd-accent-ink)!important; } /* Carte "meilleur démarrage" : bordure dégradée subtile */ body.adc-premium .domain-card--featured{ position:relative; background: linear-gradient(var(--pd-card-solid),var(--pd-card-solid)) padding-box, linear-gradient(135deg,var(--pd-accent),var(--pd-accent-2)) border-box; border:1px solid transparent; } body.adc-premium .domain-featured-badge{ background:linear-gradient(135deg,var(--pd-accent),var(--pd-accent-2));color:#fff; } body.adc-premium .domain-coming{ background:repeating-linear-gradient(135deg,var(--pd-bg-2),var(--pd-bg-2) 10px,var(--pd-surface) 10px,var(--pd-surface) 20px); border:1px dashed var(--pd-border-2);box-shadow:none; } body.adc-premium .domain-badge{color:var(--pd-text-3);border:1px solid var(--pd-border-2);} /* ---------- 10. Formations / jobs / certifs details --------- */ body.adc-premium .ft-duration, body.adc-premium .formation-meta span, body.adc-premium .job-meta span{color:var(--pd-text-3);} body.adc-premium .formation-type-icon, body.adc-premium .cert-icon{ background:color-mix(in srgb,var(--pd-accent) 13%,transparent); color:var(--pd-accent-ink); } body.adc-premium .job-skill{ background:color-mix(in srgb,var(--pd-accent) 10%,transparent); border:1px solid var(--pd-border-2);color:var(--pd-text-2); } body.adc-premium .job-tag.remote, body.adc-premium .job-tag.hybrid{ background:color-mix(in srgb,var(--pd-accent) 16%,transparent);color:var(--pd-accent-ink); border:1px solid color-mix(in srgb,var(--pd-accent) 30%,transparent); } body.adc-premium .cert-level{color:var(--pd-accent-ink);} /* ---------- 11. Impact / témoignages ------------------------ */ body.adc-premium .proof-item{padding:1.4rem 1rem;text-align:center;} body.adc-premium .proof-value{ font-family:"Syne",sans-serif;font-weight:800;color:var(--pd-text-1); background:linear-gradient(120deg,var(--pd-text-1),var(--pd-accent-ink)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } body.adc-premium .proof-label{color:var(--pd-text-3);} /* Les temoignages sont entierement traites en section 21. L'ancien bloc a ete retire : `.testimonial-author span` (0,2,2) battait toutes les regles de la section 21 (0,2,1) a cause du selecteur d'element, ce qui aplatissait etoiles, role et societe sur une meme couleur. */ /* ---------- 12. Blog ---------------------------------------- */ body.adc-premium .blog-card-image{background:var(--pd-card-2);} body.adc-premium .blog-card-image i{color:var(--pd-accent-ink);opacity:.5;} body.adc-premium .blog-card-meta span{color:var(--pd-text-3);} body.adc-premium .blog-card-content a{color:var(--pd-accent-ink);font-weight:600;} /* ---------- 13. Newsletter / freemium ----------------------- */ body.adc-premium .nl-right{background:var(--pd-card-solid);border:1px solid var(--pd-border);border-radius:var(--pd-radius);box-shadow:var(--pd-shadow);} body.adc-premium .nl-input{background:var(--pd-bg-2);border:1px solid var(--pd-border-2);color:var(--pd-text-1);} body.adc-premium .nl-input:focus{border-color:var(--pd-accent);box-shadow:0 0 0 3px var(--pd-glow);} body.adc-premium .nl-eyebrow{ background:color-mix(in srgb,var(--pd-accent) 13%,transparent); color:var(--pd-accent-ink); } body.adc-premium .nl-title em{color:var(--pd-accent-ink)!important;} body.adc-premium .nl-sub, body.adc-premium .nl-list li{color:var(--pd-text-2);} body.adc-premium .nl-sub a{color:var(--pd-accent-ink)!important;} body.adc-premium .nl-list .fa-check{color:var(--pd-accent)!important;} body.adc-premium .nl-label{color:var(--pd-text-1);} body.adc-premium .nl-legal{color:var(--pd-text-3);} /* ---------- 14. CTA final ----------------------------------- */ body.adc-premium .cta-section{ background: radial-gradient(90% 120% at 50% 0%,color-mix(in srgb,var(--pd-accent) 18%,transparent) 0%,transparent 60%), var(--pd-bg-2); border-top:1px solid var(--pd-border);border-bottom:1px solid var(--pd-border); } body.adc-premium .cta-section h2{color:var(--pd-text-1);} body.adc-premium .cta-section h2 .accent{ background:linear-gradient(105deg,var(--pd-accent),var(--pd-accent-2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } body.adc-premium .cta-section p{color:var(--pd-text-2);} /* ---------- 15. Bannières emoji → accent -------------------- */ body.adc-premium #wb-banner{ background:var(--pd-surface);border-bottom:1px solid var(--pd-border); } body.adc-premium .wb-banner-text{color:var(--pd-text-2);} body.adc-premium .wb-banner-cta{ background:linear-gradient(135deg,var(--pd-accent),var(--pd-accent-2));color:#fff; } /* bandeau webinaire (inline amber) neutralisé vers l'accent */ body.adc-premium .wb-inline-ico{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:11px;flex-shrink:0; background:color-mix(in srgb,var(--pd-accent) 15%,transparent); color:var(--pd-accent-ink);font-size:1rem; } /* ---------- 16. Footer -------------------------------------- */ body.adc-premium .footer{ background:var(--pd-bg-2);border-top:1px solid var(--pd-border);color:var(--pd-text-2); } body.adc-premium .footer a{color:var(--pd-text-2);transition:color .2s var(--pd-ease);} body.adc-premium .footer a:hover{color:var(--pd-text-1);} body.adc-premium .footer-col-heading{color:var(--pd-text-1);} body.adc-premium .footer-tag{color:var(--pd-text-3);} body.adc-premium .footer-social a{border:1px solid var(--pd-border-2);color:var(--pd-text-2);} body.adc-premium .footer-social a:hover{border-color:var(--pd-accent);color:var(--pd-accent-ink);} /* ---------- 17. Back-to-top --------------------------------- */ body.adc-premium #back-to-top{ background:var(--pd-card-2);border:1px solid var(--pd-border-2);color:var(--pd-text-1); } body.adc-premium #back-to-top:hover{border-color:var(--pd-accent);} /* ---------- 18. Divers / séparateurs ------------------------ */ body.adc-premium hr, body.adc-premium .section-padding + .section-padding{border-color:var(--pd-border);} /* ---------- 19. Cartes/bannières claires (landing pages) → premium dark ---------- */ body.adc-premium .hero-card, body.adc-premium .tool-card, body.adc-premium .forwhom-card, body.adc-premium .funding-card, body.adc-premium .persona, body.adc-premium .module, body.adc-premium .prog-item, body.adc-premium .reg-step, body.adc-premium .step, body.adc-premium .testi, body.adc-premium .faq-q, body.adc-premium .faq-a, body.adc-premium .formation-card, body.adc-premium .calc, body.adc-premium .pb, body.adc-premium .cb, body.adc-premium .cr-item, body.adc-premium .fc-pill, body.adc-premium .stats-bar{ background:var(--pd-card-solid)!important; border:1px solid var(--pd-border)!important; color:var(--pd-text-2)!important; } /* Titres/labels internes → texte clair */ body.adc-premium .hero-card :is(h1,h2,h3,h4,strong,b,label), body.adc-premium .tool-card :is(h3,h4,.tool-name), body.adc-premium .forwhom-card :is(h3,h4,strong), body.adc-premium .funding-card :is(h3,h4,strong), body.adc-premium .persona :is(h3,h4,strong), body.adc-premium .module :is(h3,h4,strong), body.adc-premium .prog-item :is(h3,h4,strong), body.adc-premium .reg-step :is(h3,h4,strong), body.adc-premium .step :is(h3,h4,strong), body.adc-premium .testi :is(h3,h4,strong), body.adc-premium .faq-q, body.adc-premium .faq-a :is(h3,h4,strong), body.adc-premium .formation-card :is(h3,h4,strong), body.adc-premium .calc :is(h3,h4,strong,label), body.adc-premium .cb :is(h3,h4,strong), body.adc-premium .cr-item :is(h3,h4,strong){ color:var(--pd-text-1)!important; } /* Badges/bannières accent → tint indigo */ body.adc-premium .fmt-urgency-banner, body.adc-premium .reg-badge.soon, body.adc-premium .crt-badge.expert, body.adc-premium .crt-badge.specialist, body.adc-premium .stats-bar{ background:color-mix(in srgb,var(--pd-accent) 12%,transparent)!important; border-color:color-mix(in srgb,var(--pd-accent) 34%,transparent)!important; color:var(--pd-accent-ink)!important; } /* Badges danger → tint rouge (sémantique préservée) */ body.adc-premium .badge-new, body.adc-premium .reg-badge.critical, body.adc-premium .reg-step.danger{ background:color-mix(in srgb,#ef4444 14%,transparent)!important; border-color:rgba(239,68,68,.38)!important; color:#fca5a5!important; } /* ---------- 20. Bento domaines · logos clients · notation ---------- */ /* Bento : casse la grille uniforme */ body.adc-premium .domains-grid--bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); gap:1rem; } body.adc-premium .domains-grid--bento .domain-card{height:100%;} body.adc-premium .domains-grid--bento .domain-card--featured{ grid-column:span 2;grid-row:span 2;padding:2rem; } body.adc-premium .domains-grid--bento .domain-card--featured h3{font-size:clamp(1.4rem,1rem+1.4vw,1.8rem);} body.adc-premium .domains-grid--bento .domain-card--featured .domain-icon{width:56px;height:56px;font-size:1.4rem;} body.adc-premium .domains-grid--bento .domain-card--wide{grid-column:span 2;} /* Tags d'outils dans la carte featured (remplit l'espace, ajoute du concret) */ body.adc-premium .domains-grid--bento .domain-card--featured{display:flex;flex-direction:column;} body.adc-premium .domain-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 auto;} body.adc-premium .domain-tags span{ font-family:"JetBrains Mono",monospace;font-size:.72rem; padding:.28rem .7rem;border-radius:100px; background:color-mix(in srgb,var(--pd-accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--pd-accent) 26%,transparent); color:var(--pd-accent-ink); } /* Mur de logos clients */ body.adc-premium .logos-wall{ padding:2.2rem 0; border-top:1px solid var(--pd-border); border-bottom:1px solid var(--pd-border); background:var(--pd-bg); } body.adc-premium .logos-wall-label{ text-align:center;font-family:"JetBrains Mono",monospace; font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--pd-text-3);margin-bottom:1.1rem; } body.adc-premium .logos-wall-row{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:1.1rem 2.6rem; } body.adc-premium .logo-wm{ display:inline-flex;align-items:center;gap:.5rem; font-family:"Syne",sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:-.01em; color:var(--pd-text-2);opacity:.62; transition:opacity .25s var(--pd-ease),color .25s var(--pd-ease),transform .25s var(--pd-ease); } body.adc-premium .logo-wm:hover{opacity:1;color:var(--pd-text-1);transform:translateY(-2px);} body.adc-premium .logo-ico{width:22px;height:22px;display:block;flex-shrink:0;} /* ---------- Marquee « technologies » (bande defilante) ------------------- Deux pistes identiques (.lw-track) qui se suivent : quand la 1re a defile de 50%, la 2e occupe exactement sa place -> boucle sans couture. Animation sur transform uniquement (compositor-friendly). Fondu sur les bords via mask. Pause au survol. Sous prefers-reduced-motion : plus d'animation, la bande redevient une grille centree qui s'enroule. */ body.adc-premium .lw-marquee{ --lw-speed:42s; display:flex;width:100%;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } body.adc-premium .lw-track{ list-style:none;margin:0;padding:0; display:flex;flex-shrink:0;align-items:center;gap:2.4rem; padding-right:2.4rem; animation:lwScroll var(--lw-speed) linear infinite; will-change:transform; } body.adc-premium .lw-marquee:hover .lw-track{animation-play-state:paused;} @keyframes lwScroll{from{transform:translateX(0);}to{transform:translateX(-100%);}} body.adc-premium .lw-chip{ display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap; font-family:"Syne",sans-serif;font-weight:700;font-size:1.08rem;letter-spacing:-.01em; color:var(--pd-text-2);opacity:.6; transition:opacity .25s var(--pd-ease),color .25s var(--pd-ease); } body.adc-premium .lw-marquee:hover .lw-chip{opacity:.9;} body.adc-premium .lw-chip:hover{opacity:1;color:var(--pd-text-1);} body.adc-premium .lw-mark{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:9px;flex-shrink:0; background:color-mix(in srgb,var(--pd-accent) 9%,transparent); border:1px solid color-mix(in srgb,var(--pd-accent) 22%,transparent); color:var(--pd-accent); } body.adc-premium .lw-ico{width:20px;height:20px;display:block;} /* ---------- Parcours QA condense (page combinee formations) ------------- */ .qa-steps{ list-style:none;margin:2rem 0 0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem; } @media (max-width:820px){.qa-steps{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:520px){.qa-steps{grid-template-columns:1fr;}} .qa-step{ display:flex;gap:.85rem;align-items:flex-start; padding:1.1rem 1.15rem;border:1px solid var(--border);border-radius:12px; background:var(--bg-card,var(--bg-surface)); } .qa-step-num{ flex-shrink:0;width:34px;height:34px;border-radius:9px; display:flex;align-items:center;justify-content:center; font-family:var(--font-mono,monospace);font-weight:700;font-size:.78rem; color:var(--amber-text,#b45309); background:color-mix(in srgb,var(--amber-text,#f59e0b) 12%,transparent); border:1px solid color-mix(in srgb,var(--amber-text,#f59e0b) 26%,transparent); } .qa-step strong{display:block;font-size:.92rem;color:var(--text-1);margin-bottom:.2rem;} .qa-step span{font-size:.8rem;color:var(--text-2);line-height:1.5;} .qa-parcours-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;} /* ---------- Consulting summary (homepage) ------------------------------- Composant dedie : 2 cartes egales (entreprises / particuliers), chacune avec sa tuile d'icone accentuee, sa liste de benefices et un lien dirige. Theme-aware via les tokens globaux ; responsive 2 -> 1 colonne. Remplace la reutilisation bancale des classes .domain-card--featured (bento). */ .consult-grid{ display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem; } @media (max-width:840px){.consult-grid{grid-template-columns:1fr;}} .consult-card{ --ca:#6366f1; position:relative;display:flex;flex-direction:column; padding:1.9rem 1.8rem;border-radius:16px;overflow:hidden;isolation:isolate; border:1px solid var(--border-strong,rgba(0,0,0,.12)); background:var(--bg-card,#fff); transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s ease,box-shadow .28s ease; } .consult-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--ca),transparent 75%); } .consult-card::after{ content:"";position:absolute;top:-45%;right:-30%;width:62%;height:85%;z-index:-1;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--ca) 15%,transparent),transparent 70%); } .consult-card:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--ca) 45%,var(--border-strong,rgba(0,0,0,.12))); box-shadow:0 18px 44px rgba(0,0,0,.10); } .consult-card--a{--ca:#f59e0b;} .consult-card--b{--ca:#6366f1;} .consult-card--c{--ca:#16a34a;} .consult-card--d{--ca:#ec4899;} /* Variante 3 colonnes (resume Formation) */ .consult-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));} @media (max-width:1080px){.consult-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:620px){.consult-grid--3{grid-template-columns:1fr;}} /* Variante 4 colonnes (ICP, formats) */ .consult-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));} @media (max-width:1040px){.consult-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:560px){.consult-grid--4{grid-template-columns:1fr;}} /* Bande « Formats » : la separer nettement de l'ICP juste au-dessus. Fond teinte ambre (chaud) vs le fond neutre de l'ICP (froid) + hairlines. */ .formats-band{ position:relative; background:color-mix(in srgb, #f59e0b 6%, var(--bg-surface,#f1f5f9)); border-top:1px solid var(--border-strong,rgba(0,0,0,.14)); border-bottom:1px solid var(--border-strong,rgba(0,0,0,.14)); } /* Accent uniforme (ambre) sur les cartes Formats : distingue nettement du nuancier arc-en-ciel de l'ICP. Scope au conteneur -> pas de changement de markup, l'override bat les modificateurs .consult-card--a/b/c/d. */ .formats-band .consult-card{--ca:#f59e0b;} .formats-band .consult-ico{border-radius:12px;} /* ---------- Couvertures de formation (catalogue) ----------------------- Les vignettes img/courses/*.jpg n'existaient pas (404 -> masquees par onerror). Remplacees par une couverture generee : degrade thematique + icone. Auto-portee (aucun asset), theme-neutre, jamais cassee. */ .aij-cover{ height:130px;margin:-1.4rem -1.2rem .8rem;border-radius:9px 9px 0 0; display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; color:#fff;background:linear-gradient(135deg,var(--cv1,#6d7bff),var(--cv2,#a06bff)); } .aij-cover::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 130% at 100% 0%, rgba(255,255,255,.20), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(0,0,0,.16), transparent 60%); } .aij-cover i,.aij-cover svg{position:relative;width:2.5rem;height:2.5rem;font-size:2.5rem;opacity:.95;filter:drop-shadow(0 2px 8px rgba(0,0,0,.30));} /* ---------- Correctif bouton CTA « blanc » ------------------------------ .btn-white (fond blanc) devient invisible sur le fond CLAIR des sections .cta-section en theme clair : on ne le voyait qu'au survol. On le rend en bouton ambre plein, lisible sur les deux themes (fond clair et fond sombre). */ body.adc-premium .cta-section .btn-white, body.adc-premium .cta-section .btn-white:link, body.adc-premium .cta-section .btn-white:visited{ background:var(--amber,#f59e0b); color:#0f0f0f; border-color:var(--amber,#f59e0b); box-shadow:0 8px 24px color-mix(in srgb,var(--amber,#f59e0b) 35%,transparent); } body.adc-premium .cta-section .btn-white:hover, body.adc-premium .cta-section .btn-white:focus-visible{ background:#fbbf24;border-color:#fbbf24;color:#0f0f0f; transform:translateY(-2px); } /* Bouton secondaire des CTA : contour accent lisible sur les deux fonds (clair et sombre). Remplace l'ancien "blanc sur transparent" invisible en theme clair. S'applique a about.html et success-stories.html. */ body.adc-premium .cta-section .btn-outline, body.adc-premium .cta-section .btn-outline:link, body.adc-premium .cta-section .btn-outline:visited{ background:transparent; color:var(--amber,#6d7bff); border:2px solid color-mix(in srgb,var(--amber,#6d7bff) 55%,transparent); } body.adc-premium .cta-section .btn-outline:hover, body.adc-premium .cta-section .btn-outline:focus-visible{ background:color-mix(in srgb,var(--amber,#6d7bff) 12%,transparent); border-color:var(--amber,#6d7bff); color:var(--amber,#6d7bff); transform:translateY(-2px); } /* Titre long (ICP) : h3 sur sa propre ligne sous l'en-tete icone+tag */ .consult-card .consult-title{font-family:var(--font-sans,'Syne',sans-serif);font-size:1.08rem;font-weight:800;color:var(--text-1);line-height:1.25;margin:0 0 .55rem;} /* ---------- Alumni (section temoignages, sans citation) ---------------- Cartes d'identite alumni : avatar accentue + badge « verifie » (ces personnes ont donne leur accord pour figurer). Pas de citation tant que le verbatim n'est pas valide par ecrit. Grille auto-fit -> responsive naturel. */ .alumni{ list-style:none;margin:2.4rem 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem; } .alumni-item{ position:relative;display:flex;align-items:center;gap:.95rem; padding:1.15rem 1.2rem;border-radius:14px; border:1px solid var(--border-strong,rgba(0,0,0,.12)); background:var(--bg-card,#fff); transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s ease,box-shadow .25s ease; } .alumni-item:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,#6d7bff 40%,var(--border-strong,rgba(0,0,0,.12))); box-shadow:0 14px 34px rgba(0,0,0,.10); } .alumni-av{ position:relative;flex-shrink:0;width:50px;height:50px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--font-sans,'Syne',sans-serif);font-weight:800;font-size:.92rem;color:#fff; background:linear-gradient(135deg,#6d7bff,#a06bff); box-shadow:0 4px 14px rgba(109,123,255,.32); } .alumni-badge{ position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;border-radius:50%; background:#16a34a;border:2px solid var(--bg-card,#fff); display:flex;align-items:center;justify-content:center;color:#fff; } .alumni-badge svg{width:10px;height:10px;} .alumni-id{display:flex;flex-direction:column;min-width:0;} .alumni-name{font-family:var(--font-sans,'Syne',sans-serif);font-weight:800;font-size:.98rem;color:var(--text-1);line-height:1.15;} .alumni-role{font-size:.8rem;color:var(--text-2);margin-top:.15rem;} .alumni-org{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--text-3,var(--text-2));margin-top:.28rem;font-family:var(--font-mono,'JetBrains Mono',monospace);} .alumni-org i{font-size:.7rem;opacity:.85;} .consult-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;} .consult-ico{ flex-shrink:0;width:50px;height:50px;border-radius:14px; display:flex;align-items:center;justify-content:center;font-size:1.35rem; color:var(--ca); background:color-mix(in srgb,var(--ca) 13%,transparent); border:1px solid color-mix(in srgb,var(--ca) 30%,transparent); } .consult-tag{ display:block;font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ca);margin-bottom:.2rem; } .consult-card h3{ font-family:var(--font-sans,'Syne',sans-serif);font-size:1.2rem;font-weight:800; color:var(--text-1);line-height:1.2;margin:0; } .consult-desc{color:var(--text-2);font-size:.9rem;line-height:1.6;margin:0 0 1.15rem;} .consult-list{list-style:none;margin:0 0 1.45rem;padding:0;display:grid;gap:.55rem;} .consult-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--text-2);line-height:1.45;} .consult-list li i{color:var(--ca);font-size:.72rem;margin-top:.28rem;flex-shrink:0;} .consult-link{ margin-top:auto;display:inline-flex;align-items:center;gap:.45rem; font-family:var(--font-sans,'Syne',sans-serif);font-weight:700;font-size:.88rem;color:var(--ca); } .consult-link i{transition:transform .2s ease;} .consult-card:hover .consult-link i{transform:translateX(4px);} .consult-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.4rem;margin-top:2.2rem;} .consult-note{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;color:var(--text-2);} .consult-note i{color:#f59e0b;} @media (max-width:520px){ .consult-card{padding:1.5rem 1.35rem;} .consult-cta{flex-direction:column;gap:1rem;text-align:center;} } @media (max-width:560px){ body.adc-premium .lw-track{gap:1.6rem;padding-right:1.6rem;} body.adc-premium .lw-chip{font-size:.98rem;} body.adc-premium .lw-mark{width:30px;height:30px;} } @media (prefers-reduced-motion:reduce){ body.adc-premium .lw-marquee{ overflow:visible;flex-wrap:wrap;justify-content:center;gap:1rem 2.2rem; -webkit-mask-image:none;mask-image:none; } body.adc-premium .lw-track{animation:none;flex-wrap:wrap;justify-content:center;padding-right:0;} body.adc-premium .lw-track[aria-hidden="true"]{display:none;} } /* Badge notation témoignages */ body.adc-premium .testi-rating{ display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap; margin:.2rem 0 1.8rem;padding:.45rem 1rem; background:color-mix(in srgb,var(--pd-accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--pd-accent) 26%,transparent); border-radius:100px; } body.adc-premium .testi-rating-stars{color:#fbbf24;letter-spacing:.05em;} body.adc-premium .testi-rating strong{color:var(--pd-text-1);font-size:1.05rem;} body.adc-premium .testi-rating-sub{color:var(--pd-text-3);font-size:.82rem;} /* Responsive bento + logos */ @media (max-width:900px){ body.adc-premium .domains-grid--bento{grid-template-columns:repeat(2,minmax(0,1fr));} body.adc-premium .domains-grid--bento .domain-card--featured{grid-column:span 2;grid-row:auto;} body.adc-premium .domains-grid--bento .domain-card--wide{grid-column:span 2;} } @media (max-width:560px){ body.adc-premium .domains-grid--bento{grid-template-columns:1fr;} body.adc-premium .domains-grid--bento .domain-card--featured, body.adc-premium .domains-grid--bento .domain-card--wide{grid-column:auto;} body.adc-premium .logos-wall-row{gap:.9rem 1.4rem;} body.adc-premium .logo-wm{font-size:1rem;} } /* ---------- 21. Témoignages : composition éditoriale --------- 1 avis vedette (colonne large, sur 2 rangées) + 2 avis secondaires empilés. Grille plate a 3 enfants — meme logique que le bento des domaines. Avant : .testimonial-grid n'etait defini nulle part, donc display:block et 3 bandes pleine largeur collees. */ /* Etoiles : le bundle icons.min.js fournit un fa-star en trace (fill:none, stroke:currentColor). Sans ce remplissage, un 5/5 s'affiche en 5 etoiles VIDES et se lit comme 0/5. Vaut pour toutes les notations du site. */ body.adc-premium .testimonial-stars svg, body.adc-premium .testi-rating-stars svg, body.adc-premium .testi-stars svg{ fill:currentColor;stroke:none; } body.adc-premium .testimonial-stars, body.adc-premium .testi-stars{ color:#fbbf24;font-size:.78rem;letter-spacing:.08em;line-height:1; display:inline-flex;gap:.1em;flex-shrink:0; } body.adc-premium .testimonial-grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:1.15rem; align-items:stretch; } /* --- carte commune --- */ body.adc-premium .testimonial-card{ position:relative;overflow:hidden; display:flex;flex-direction:column;gap:1.15rem; padding:1.6rem 1.5rem;margin:0; } /* guillemet courbe en filigrane. U+201C et non « : dans Syne, les chevrons se lisent comme un ">>" et non comme une citation. */ body.adc-premium .testimonial-card::before{ content:"\201C"; position:absolute;top:-.18em;right:.1em; font-family:"Syne",Georgia,serif; font-size:6.5rem;line-height:1;font-weight:800; color:var(--pd-accent);opacity:.13; pointer-events:none;user-select:none; } body.adc-premium .testimonial-quote{ margin:0;border:0;padding:0; color:var(--pd-text-2); font-size:.95rem;line-height:1.62; position:relative;z-index:1; flex:1 1 auto; } body.adc-premium .testimonial-quote::before{content:"« ";} body.adc-premium .testimonial-quote::after{content:" »";} /* Verbatim non encore fourni : rendu volontairement voyant pour qu'il ne passe pas inapercu en relecture. Le garde-fou reel est check-verbatims.js, appele par create-deploy.ps1 — rien ne part en ligne avec ce marqueur. */ body.adc-premium .testimonial-quote[data-verbatim="pending"]{ color:#f59e0b;font-style:italic;font-weight:400; } body.adc-premium .testimonial-quote[data-verbatim="pending"]::before{content:"[A COMPLETER] ";} body.adc-premium .testimonial-quote[data-verbatim="pending"]::after{content:"";} /* --- bloc auteur --- */ body.adc-premium .testimonial-author{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:.8rem; padding-top:1.05rem; border-top:1px solid var(--pd-border); } body.adc-premium .testimonial-avatar{ display:grid;place-items:center; width:40px;height:40px;border-radius:50%; font-family:var(--font-mono,ui-monospace,monospace); font-size:.78rem;font-weight:700;letter-spacing:.04em; color:var(--pd-accent-ink); background:color-mix(in srgb,var(--pd-accent) 16%,transparent); border:1px solid color-mix(in srgb,var(--pd-accent) 32%,transparent); } body.adc-premium .testimonial-id{display:flex;flex-direction:column;min-width:0;} body.adc-premium .testimonial-name{ color:var(--pd-text-1);font-size:.88rem;font-weight:700;line-height:1.3; } body.adc-premium .testimonial-role{ color:var(--pd-text-2);font-size:.78rem;line-height:1.35; } body.adc-premium .testimonial-org{ color:var(--pd-text-3);font-size:.73rem;line-height:1.35; } /* --- avis vedette : colonne gauche, sur les 2 rangees --- */ body.adc-premium .testimonial-card--featured{ grid-row:span 2; padding:2.1rem 2rem; gap:1.5rem; /* la vedette est plus haute que son contenu (elle couvre 2 rangees) : on centre le bloc au lieu de laisser un vide sous la citation */ justify-content:center; background: linear-gradient(160deg,color-mix(in srgb,var(--pd-accent) 7%,transparent) 0%,transparent 46%), var(--pd-card-solid); border-color:color-mix(in srgb,var(--pd-accent) 22%,var(--pd-border)); } /* filet d'accent en tete de la carte vedette */ body.adc-premium .testimonial-card--featured::after{ content:"";position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-2) 65%,transparent); } body.adc-premium .testimonial-card--featured::before{font-size:10rem;opacity:.15;} /* citation naturelle : c'est le conteneur qui centre, pas la citation qui pousse */ body.adc-premium .testimonial-card--featured .testimonial-quote{flex:0 0 auto;} body.adc-premium .testimonial-card--featured .testimonial-quote{ color:var(--pd-text-1); font-size:clamp(1.05rem,.92rem + .55vw,1.32rem); line-height:1.5;font-weight:500;letter-spacing:-.01em; } body.adc-premium .testimonial-card--featured .testimonial-avatar{ width:52px;height:52px;font-size:.92rem; } body.adc-premium .testimonial-card--featured .testimonial-name{font-size:1rem;} body.adc-premium .testimonial-card--featured .testimonial-stars{font-size:.9rem;} /* --- interactions --- */ body.adc-premium .testimonial-card{ transition:transform .28s var(--pd-ease),box-shadow .28s var(--pd-ease),border-color .28s var(--pd-ease); } body.adc-premium .testimonial-card:hover{ transform:translateY(-3px); box-shadow:var(--pd-shadow-hover); border-color:var(--pd-border-2); } body.adc-premium .testimonial-card--featured:hover{ transform:none; /* la vedette ne bouge pas */ border-color:color-mix(in srgb,var(--pd-accent) 40%,transparent); box-shadow:var(--pd-shadow-hover),0 0 60px -22px var(--pd-glow); } /* --- tablette : vedette pleine largeur, secondaires cote a cote --- */ @media (max-width:1024px){ body.adc-premium .testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr));} body.adc-premium .testimonial-card--featured{grid-row:auto;grid-column:1 / -1;} } /* --- mobile : pile simple --- */ @media (max-width:640px){ body.adc-premium .testimonial-grid{grid-template-columns:1fr;gap:.9rem;} body.adc-premium .testimonial-card--featured{grid-column:auto;padding:1.6rem 1.35rem;} body.adc-premium .testimonial-card{padding:1.35rem 1.2rem;gap:1rem;} body.adc-premium .testimonial-card::before{font-size:5.5rem;} body.adc-premium .testimonial-card--featured::before{font-size:7rem;} /* les etoiles passent sous l'identite plutot que de compresser le nom */ body.adc-premium .testimonial-author{ grid-template-columns:auto minmax(0,1fr); row-gap:.55rem; } body.adc-premium .testimonial-stars{grid-column:1 / -1;} body.adc-premium .testi-rating{width:100%;justify-content:flex-start;} } /* ---------- 21b. Bandeau alumni (identites sans citation) ----- Affiche les personnes reelles ayant donne leur accord — nom, poste, employeur — sans leur attribuer de propos. Les cartes-citations de la section 21 restent en place et reprendront du service des que les verbatims seront valides (voir tasks/verbatims-a-valider.md). Pas d'etoiles ici : une note sans avis reste une allegation invérifiable. */ body.adc-premium .alumni-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1rem; list-style:none;margin:0;padding:0; } body.adc-premium .alumni-card{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;gap:.85rem; padding:1.15rem 1.15rem; background:var(--pd-card-solid); border:1px solid var(--pd-border); border-radius:var(--pd-radius-sm); box-shadow:var(--pd-shadow); transition:transform .28s var(--pd-ease),box-shadow .28s var(--pd-ease),border-color .28s var(--pd-ease); } body.adc-premium .alumni-card:hover{ transform:translateY(-3px); box-shadow:var(--pd-shadow-hover); border-color:color-mix(in srgb,var(--pd-accent) 30%,transparent); } @media (max-width:640px){ body.adc-premium .alumni-grid{grid-template-columns:1fr;gap:.7rem;} body.adc-premium .alumni-card{padding:1rem;} } @media (prefers-reduced-motion: reduce){ body.adc-premium .alumni-card:hover{transform:none;} } /* ---------- 22. Avis des landing pages (.testi) --------------- lp-qa-automation, lp-llm-ia-generative et formation-ai-act-b2b ont chacune leur bloc