/* ============================================================ ARCREANE — assets/css/arcreane.css Direction artistique techno-mystique tirée du logo. Thème enfant OceanWP. Toutes les classes sont préfixées .arc- pour ne jamais entrer en conflit avec OceanWP. ============================================================ */ /* ─── 1. VARIABLES ──────────────────────────────────────────── */ :root{ --arc-night: #0a0820; /* fond principal */ --arc-night-2: #11103a; /* cartes */ --arc-night-3: #1a1850; /* hover */ --arc-indigo: #1A1B4B; /* indigo du logo */ --arc-violet: #7B6FB8; /* violet/lavande du logo */ --arc-violet-soft: #a299d6; --arc-gold: #FFD60A; /* or — particules du logo */ --arc-gold-hot: #ffe04c; --arc-gold-deep: #c9a800; --arc-paper: #f5f1ff; /* texte principal */ --arc-paper-mute: #9994c4; /* texte secondaire */ --arc-line: #2a2670; /* séparateurs */ --arc-gut: clamp(20px, 4vw, 56px); /* LARGEURS — réglages centralisés. Tout part d'ici, plus de valeurs en dur éparpillées. --arc-maxw : largeur max d'une section (cadre général du site). --arc-readw : largeur de la colonne de texte pur, pour garder un confort de lecture (lignes pas trop longues). On combine % et plafond : la page respire sur grand écran sans jamais devenir illisible. */ --arc-maxw: min(92%, 1500px); --arc-readw: min(92%, 920px); } /* ─── 2. RESET DOUX & BASE ─────────────────────────────────── */ /* ÉCHELLE TYPOGRAPHIQUE GLOBALE — IMPORTANT. Diagnostic : OceanWP (ou un de ses réglages) force la racine du site à 10px (font-size:62.5%). Du coup tout le thème, conçu en "rem", était calculé sur une base deux fois trop petite — d'où le "texte petit partout". Correctif : on rétablit une base saine de 16px sur avec une spécificité maximale (html:root + !important) pour passer devant OceanWP, et on neutralise toute surcharge éventuelle sur . À partir de là, 1rem = 16px comme prévu partout. */ html:root{ font-size: 16px !important; } body.arcreane-theme, html:root body.arcreane-theme{ font-size: 1.06rem !important; /* ≈ 17px — confort de lecture global */ } body.arcreane-theme{ background: var(--arc-night) !important; color: var(--arc-paper); font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; margin: 0; } /* On neutralise le conteneur OceanWP par défaut pour reprendre la main sur la largeur et le fond. */ body.arcreane-theme #wrap, body.arcreane-theme #main, body.arcreane-theme #content-wrap, body.arcreane-theme .site-content{ background: transparent !important; padding: 0 !important; margin: 0 !important; max-width: none !important; } /* Halo de fond animé */ body.arcreane-theme::before{ content:""; position: fixed; inset: -10%; background: radial-gradient(800px 600px at 12% 8%, rgba(123,111,184,0.18), transparent 60%), radial-gradient(900px 700px at 90% 30%, rgba(255,214,10,0.06), transparent 60%), radial-gradient(700px 600px at 50% 90%, rgba(123,111,184,0.12), transparent 60%); pointer-events: none; z-index: 0; animation: arc-aurora 22s ease-in-out infinite alternate; } @keyframes arc-aurora{ 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(2%,-2%) scale(1.05); } } /* Grain fin */ body.arcreane-theme::after{ content:""; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; opacity: .5; z-index: 1; } /* Tout le contenu passe au-dessus du décor */ .arc-nav, .arc-main, .arc-footer, .arc-contact-cta, .arc-particles{ position: relative; z-index: 3; } /* ─── 3. PARTICULES DORÉES ─────────────────────────────────── */ .arc-particles{ position: fixed; inset: 0; pointer-events: none; z-index: 2; } .arc-particles span{ position: absolute; background: var(--arc-gold); opacity: .7; border-radius: 2px; filter: drop-shadow(0 0 6px var(--arc-gold)); animation: arc-drift linear infinite; } @keyframes arc-drift{ 0% { transform: translateY(110vh) rotate(0deg); opacity: 0; } 10% { opacity: .8; } 90% { opacity: .8; } 100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; } } /* ─── 4. TYPOGRAPHIE ───────────────────────────────────────── */ .arc-mono{ font-family: 'JetBrains Mono', monospace; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--arc-violet-soft); } body.arcreane-theme a{ color: inherit; text-decoration: none; } .arc-lnk{ position: relative; padding-bottom: 2px; border-bottom: 1px solid rgba(245,241,255,0.3); transition: border-color .3s, color .3s; color: var(--arc-paper); } .arc-lnk:hover{ color: var(--arc-gold); border-color: var(--arc-gold); } /* ─── 4bis. BANDEAU "SITE EN COURS DE REFONTE" ───────────────── Bandeau honnête qui prévient les visiteurs que certaines pages ne sont pas finalisées. Sticky tout en haut, le menu reste fixe juste en dessous. Une fois fermé, il disparaît jusqu'à ce que l'utilisateur vide son cache (localStorage). */ .arc-notice{ position: fixed; top: 0; left: 0; right: 0; z-index: 60; /* au-dessus du menu fixe */ background: linear-gradient(90deg, rgba(26,24,80,0.96) 0%, rgba(17,16,58,0.96) 50%, rgba(26,24,80,0.96) 100%); border-bottom: 1px solid var(--arc-gold); box-shadow: 0 2px 14px rgba(0,0,0,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .4s ease, opacity .4s ease; } .arc-notice.arc-notice-hidden{ transform: translateY(-100%); opacity: 0; pointer-events: none; } .arc-notice-inner{ display: flex; align-items: center; gap: 16px; max-width: var(--arc-maxw); margin: 0 auto; padding: 10px var(--arc-gut); } .arc-notice-tag{ flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--arc-gold); padding: 4px 10px; border: 1px solid var(--arc-gold); border-radius: 3px; background: rgba(255,214,10,0.06); } .arc-notice-text{ flex: 1; font-size: .92rem; color: var(--arc-paper); line-height: 1.4; } .arc-notice-close{ flex-shrink: 0; background: transparent; border: 1px solid var(--arc-line); color: var(--arc-violet-soft); width: 32px; height: 32px; border-radius: 50%; font-size: .85rem; cursor: pointer; line-height: 1; display: grid; place-items: center; transition: border-color .3s, color .3s, background .3s; } .arc-notice-close:hover{ border-color: var(--arc-gold); color: var(--arc-gold); background: rgba(255,214,10,0.08); } /* Décalage du menu fixe quand le bandeau est visible. body.arc-notice-shown est posée par le script tant que le bandeau n'est pas fermé. */ body.arcreane-theme.arc-notice-shown .arc-nav{ top: var(--arc-notice-h, 50px); } body.arcreane-theme.arc-notice-shown{ scroll-padding-top: calc(var(--arc-notice-h, 50px) + 80px); } /* ─── 5. EN-TÊTE ───────────────────────────────────────────── */ .arc-nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 12px var(--arc-gut); display: flex; align-items: center; justify-content: space-between; background: rgba(10,8,32,0.8); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(123,111,184,0.18); } .arc-brand{ display: flex; align-items: center; gap: 14px; color: var(--arc-paper); } .arc-brand img{ height: 46px; width: auto; display: block; filter: drop-shadow(0 0 14px rgba(255,214,10,0.25)); transition: filter .4s, transform .4s; } .arc-brand:hover img{ filter: drop-shadow(0 0 22px rgba(255,214,10,0.55)); transform: rotate(-3deg) scale(1.04); } .arc-brand-text{ font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .16em; color: var(--arc-paper); line-height: 1.1; } .arc-brand-text small{ display: block; font-family: 'JetBrains Mono', monospace; font-size: .58rem; color: var(--arc-violet-soft); letter-spacing: .16em; font-weight: 400; margin-top: 3px; } .arc-menu-list{ display: flex; gap: 28px; align-items: center; list-style: none; margin: 0; padding: 0; } .arc-menu-list li{ margin: 0; } .arc-menu-list a{ font-size: 1rem; font-weight: 500; color: var(--arc-paper); position: relative; padding: 6px 0; display: inline-block; } .arc-menu-list a::after{ content:""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--arc-gold); transition: width .35s ease; } .arc-menu-list a:hover{ color: var(--arc-gold); } .arc-menu-list a:hover::after{ width: 100%; } .arc-menu-list .current-menu-item > a{ color: var(--arc-gold); } .arc-menu-list .current-menu-item > a::after{ width: 100%; } /* Bouton CTA dans le menu — ajoute la classe "arc-cta" au lien dans Apparence > Menus (option "Classes CSS"), ou laisse le menu de secours s'en charger. */ .arc-menu-list a.arc-cta, .arc-menu-list .arc-cta > a{ border: 1px solid var(--arc-gold); color: var(--arc-gold); padding: 10px 20px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s, box-shadow .3s; } .arc-menu-list a.arc-cta:hover, .arc-menu-list .arc-cta > a:hover{ background: var(--arc-gold); color: var(--arc-indigo); box-shadow: 0 0 24px rgba(255,214,10,0.4); } .arc-menu-list a.arc-cta::after, .arc-menu-list .arc-cta > a::after{ display: none; } /* Sous-menus déroulants. On cible .arc-sub-menu (classe posée par notre walker) et on monte la spécificité avec body.arcreane-theme pour passer devant le CSS de menu d'OceanWP. */ .arc-menu-list li{ position: relative; margin: 0; } body.arcreane-theme .arc-menu-list .sub-menu, body.arcreane-theme .arc-menu-list .arc-sub-menu{ position: absolute; top: 100%; left: 0; display: block; /* annule un éventuel display:flex hérité */ background: var(--arc-night-2); border: 1px solid var(--arc-line); border-radius: 4px; padding: 8px 0; min-width: 220px; list-style: none; margin: 10px 0 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; box-shadow: 0 18px 50px rgba(0,0,0,0.45); z-index: 70; } /* Petit pont invisible pour que le survol ne se coupe pas entre le parent et le sous-menu (sinon le menu se referme). */ body.arcreane-theme .arc-menu-list .arc-has-children::after{ content:""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } body.arcreane-theme .arc-menu-list li:hover > .sub-menu, body.arcreane-theme .arc-menu-list li:hover > .arc-sub-menu, body.arcreane-theme .arc-menu-list li:focus-within > .sub-menu, body.arcreane-theme .arc-menu-list li:focus-within > .arc-sub-menu{ opacity: 1; visibility: visible; transform: translateY(0); } body.arcreane-theme .arc-menu-list .arc-sub-menu li{ width: 100%; } body.arcreane-theme .arc-menu-list .arc-sub-menu a{ padding: 9px 20px; display: block; font-size: .95rem; white-space: nowrap; } body.arcreane-theme .arc-menu-list .arc-sub-menu a::after{ display: none; } body.arcreane-theme .arc-menu-list .arc-sub-menu a:hover{ background: var(--arc-night-3); color: var(--arc-gold); } /* Flèche indicatrice sur les éléments parents */ .arc-caret{ display: inline-block; margin-left: 5px; font-size: .7em; color: var(--arc-violet-soft); transition: transform .3s, color .3s; } .arc-menu-list .arc-has-children:hover > a .arc-caret{ transform: rotate(180deg); color: var(--arc-gold); } .arc-menu-toggle{ display: none; border: none; background: none; color: var(--arc-paper); font-family: 'JetBrains Mono', monospace; cursor: pointer; font-size: .8rem; letter-spacing: .1em; } /* ─── 6. CONTENEUR PRINCIPAL ───────────────────────────────── */ .arc-main{ display: block; padding-top: 0; } /* ─── 7. SECTIONS GÉNÉRIQUES ───────────────────────────────── */ .arc-section{ position: relative; z-index: 3; padding: 120px var(--arc-gut); max-width: var(--arc-maxw); margin: 0 auto; } .arc-section-head{ display: grid; grid-template-columns: minmax(0,160px) 1fr; gap: 36px; align-items: start; margin-bottom: 64px; } .arc-num{ font-family: 'JetBrains Mono', monospace; color: var(--arc-gold); font-size: .76rem; letter-spacing: .14em; padding-top: 14px; border-top: 1px solid var(--arc-gold); word-break: break-word; } .arc-section-head h2{ font-family: 'Cinzel', serif; font-weight: 500; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; color: var(--arc-paper); margin: 0; } .arc-section-head h2 em{ font-style: normal; background: linear-gradient(180deg, var(--arc-gold) 0%, var(--arc-gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .arc-lead{ margin-top: 20px; color: var(--arc-paper-mute); max-width: 62ch; font-size: 1.12rem; line-height: 1.65; } /* ─── 8. HERO (page d'accueil) ─────────────────────────────── */ .arc-hero{ position: relative; z-index: 3; min-height: 100vh; padding: 150px var(--arc-gut) 90px; display: grid; grid-template-columns: 1fr; align-content: center; isolation: isolate; max-width: var(--arc-maxw); margin: 0 auto; } .arc-hero-sup{ display: flex; gap: 18px; align-items: center; margin-bottom: 36px; } .arc-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--arc-gold); box-shadow: 0 0 0 6px rgba(255,214,10,0.18), 0 0 16px var(--arc-gold); animation: arc-pulse 2.4s ease-in-out infinite; } @keyframes arc-pulse{ 0%,100% { box-shadow: 0 0 0 6px rgba(255,214,10,0.18), 0 0 14px var(--arc-gold); } 50% { box-shadow: 0 0 0 10px rgba(255,214,10,0.08), 0 0 22px var(--arc-gold); } } .arc-hero-title{ font-family: 'Cinzel', serif; font-weight: 500; font-size: clamp(2.4rem, 8vw, 7.5rem); line-height: 1; letter-spacing: .005em; text-transform: uppercase; margin: 0; color: var(--arc-paper); } .arc-line{ display: block; overflow: hidden; } .arc-line > span{ display: inline-block; transform: translateY(110%); animation: arc-reveal-text 1s cubic-bezier(.2,.85,.2,1) forwards; } .arc-line:nth-child(2) > span{ animation-delay: .1s; } .arc-line:nth-child(3) > span{ animation-delay: .2s; } @keyframes arc-reveal-text{ to { transform: translateY(0); } } .arc-hero-title em{ font-style: normal; background: linear-gradient(180deg, var(--arc-gold) 0%, var(--arc-gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(255,214,10,0.3)); } .arc-hero-sub{ margin-top: 36px; font-family: 'Cinzel', serif; font-weight: 400; font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.45rem); letter-spacing: .04em; color: var(--arc-violet-soft); max-width: 720px; } .arc-hero-meta{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--arc-line); align-items: start; } .arc-k{ display: block; color: var(--arc-gold); font-family: 'JetBrains Mono', monospace; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; } .arc-hero-meta p{ font-size: 1.05rem; color: var(--arc-paper); max-width: 46ch; line-height: 1.6; margin: 0; } .arc-hero-corner{ position: absolute; right: var(--arc-gut); top: 150px; font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--arc-violet-soft); text-align: right; line-height: 1.9; letter-spacing: .06em; } .arc-hero-corner b{ color: var(--arc-gold); font-weight: 500; } .arc-seal{ position: absolute; right: -100px; bottom: -100px; width: 600px; height: 600px; opacity: .08; pointer-events: none; z-index: -1; animation: arc-rotate 80s linear infinite; } .arc-seal svg{ width: 100%; height: 100%; } @keyframes arc-rotate{ to { transform: rotate(360deg); } } /* ─── 9. SERVICES (accueil) ────────────────────────────────── */ .arc-services{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-top: 1px solid var(--arc-line); } .arc-service{ grid-column: span 6; padding: 52px 40px 52px 0; border-bottom: 1px solid var(--arc-line); position: relative; cursor: pointer; transition: background .5s ease; color: var(--arc-paper); } .arc-service:nth-child(odd){ border-right: 1px solid var(--arc-line); padding-right: 40px; } .arc-service:nth-child(even){ padding-left: 40px; } .arc-service:hover{ background: linear-gradient(180deg, transparent 0%, rgba(123,111,184,0.08) 100%); } .arc-service::after{ content:"→"; position: absolute; right: 40px; top: 52px; font-family: 'Cinzel', serif; font-size: 1.7rem; color: var(--arc-violet-soft); transition: transform .45s cubic-bezier(.2,.8,.2,1), color .35s; } .arc-service:nth-child(even)::after{ right: 0; } .arc-service:hover::after{ transform: translateX(14px); color: var(--arc-gold); } .arc-stamp{ font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--arc-gold); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 24px; display: block; } .arc-service h3{ font-family: 'Cinzel', serif; font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: .005em; text-transform: uppercase; margin: 0 0 18px; color: var(--arc-paper); } .arc-service h3 em{ font-style: normal; color: var(--arc-gold); } .arc-service p{ color: var(--arc-paper-mute); max-width: 48ch; font-size: 1.05rem; line-height: 1.65; margin: 0; } .arc-tags{ margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; } .arc-tag{ font-family: 'JetBrains Mono', monospace; font-size: .7rem; padding: 5px 11px; border: 1px solid var(--arc-line); border-radius: 999px; color: var(--arc-violet-soft); letter-spacing: .04em; transition: border-color .3s, color .3s; } .arc-service:hover .arc-tag{ border-color: rgba(255,214,10,0.6); color: var(--arc-gold-hot); } /* ─── 10. OUTILS ───────────────────────────────────────────── */ .arc-tools{ background: linear-gradient(180deg, transparent 0%, rgba(17,16,58,0.6) 50%, transparent 100%); max-width: none; } .arc-tools .arc-section-head, .arc-tools .arc-tools-grid{ max-width: var(--arc-maxw); margin-left: auto; margin-right: auto; } .arc-tools-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* Variante 2 cartes (Moodle + Disponibilités) : 2 colonnes, centrée et resserrée pour ne pas laisser de vide. */ .arc-tools-grid--two{ grid-template-columns: repeat(2, 1fr); max-width: 920px; } .arc-tools .arc-tools-grid--two{ margin-left: auto; margin-right: auto; } .arc-tool-card{ background: linear-gradient(180deg, var(--arc-night-2) 0%, var(--arc-night) 100%); border: 1px solid var(--arc-line); border-radius: 6px; padding: 38px 32px 32px; position: relative; overflow: hidden; transition: border-color .4s, transform .4s, box-shadow .4s; color: var(--arc-paper); } .arc-tool-card::before{ content:""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 50% 0%, rgba(255,214,10,0.18), transparent 70%); opacity: 0; transition: opacity .5s; } .arc-tool-card:hover{ border-color: rgba(255,214,10,0.6); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(255,214,10,0.08); } .arc-tool-card:hover::before{ opacity: 1; } .arc-tool-card > *{ position: relative; z-index: 1; } .arc-tool-icon{ width: 56px; height: 56px; display: grid; place-items: center; border: 1.5px solid var(--arc-gold); color: var(--arc-gold); border-radius: 50%; margin-bottom: 26px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.4rem; background: radial-gradient(circle, rgba(255,214,10,0.14), transparent 70%); box-shadow: 0 0 24px rgba(255,214,10,0.2); } .arc-badge{ display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--arc-violet); color: var(--arc-violet-soft); border-radius: 999px; margin-bottom: 18px; } .arc-tool-card h3{ font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.55rem; line-height: 1.12; letter-spacing: .01em; margin: 0 0 14px; text-transform: uppercase; color: var(--arc-paper); } .arc-tool-card p{ color: var(--arc-paper-mute); font-size: 1rem; margin: 0 0 28px; min-height: 78px; line-height: 1.6; } .arc-go{ display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: .76rem; color: var(--arc-gold); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; } .arc-go::after{ content:"↗"; transition: transform .3s; } .arc-tool-card:hover .arc-go::after{ transform: translate(4px,-4px); } /* ─── 11. PROFIL / ABOUT ───────────────────────────────────── */ .arc-about-wrap{ display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: center; } .arc-about-portrait{ aspect-ratio: 4/5; background: radial-gradient(circle at 50% 30%, rgba(123,111,184,0.3), transparent 65%), linear-gradient(160deg, var(--arc-night-2) 0%, var(--arc-indigo) 100%); border: 1px solid var(--arc-line); position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 6px; } .arc-runes{ position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,214,10,0.6) 1px, transparent 1.5px); background-size: 36px 36px; background-position: 18px 18px; opacity: .18; } .arc-initials{ font-family: 'Cinzel', serif; font-weight: 500; font-size: clamp(7rem, 14vw, 13rem); line-height: .85; letter-spacing: .02em; text-transform: uppercase; background: linear-gradient(180deg, var(--arc-paper) 0%, var(--arc-violet-soft) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; z-index: 2; } .arc-about-portrait::before{ content:""; position: absolute; top: 18px; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--arc-gold), transparent); z-index: 4; } .arc-about-portrait::after{ content: "DOMINIQUE YOLIN · DEV C++ EXPERT"; position: absolute; bottom: 18px; left: 18px; right: 18px; font-family: 'JetBrains Mono', monospace; font-size: .64rem; color: var(--arc-gold); letter-spacing: .16em; text-align: center; z-index: 4; } /* La photo de profil. Elle remplit le cadre et reçoit un léger traitement pour rester dans la DA du thème. */ .arc-about-portrait img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; z-index: 1; } /* Quand une photo est présente : on passe les runes par-dessus en très discret, et on ajoute un dégradé sombre en bas pour que le label mono reste lisible sur l'image. */ .arc-about-portrait.arc-has-photo .arc-runes{ z-index: 2; opacity: .1; mix-blend-mode: overlay; } .arc-about-portrait.arc-has-photo::before{ /* voile sombre bas + halo violet doux */ content:""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, transparent 55%, rgba(10,8,32,0.85) 100%), radial-gradient(circle at 50% 25%, rgba(123,111,184,0.18), transparent 70%); height: auto; /* annule la hauteur 1px héritée */ } .arc-about-portrait.arc-has-photo::after{ color: var(--arc-gold); text-shadow: 0 1px 8px rgba(10,8,32,0.9); } .arc-role{ font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--arc-gold); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 28px; display: flex; align-items: center; gap: 14px; } .arc-role::before{ content:""; width: 42px; height: 1px; background: var(--arc-gold); flex-shrink: 0; } .arc-about p{ color: var(--arc-paper); font-size: 1.12rem; line-height: 1.75; margin: 0 0 22px; max-width: 62ch; } .arc-about p strong{ color: var(--arc-gold); font-weight: 600; } .arc-mono-block{ color: var(--arc-paper-mute) !important; font-size: .96rem !important; font-family: 'JetBrains Mono', monospace; letter-spacing: .03em; line-height: 1.7 !important; } .arc-stats{ display: grid; grid-template-columns: repeat(4, auto); gap: 44px; margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--arc-line); } .arc-n{ font-family: 'Cinzel', serif; font-size: 2.7rem; font-weight: 500; background: linear-gradient(180deg, var(--arc-gold) 0%, var(--arc-gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .arc-l{ display: block; font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--arc-paper-mute); letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; } .arc-about-links{ margin-top: 40px !important; } /* ─── 12. MANIFESTE ────────────────────────────────────────── */ .arc-manifesto{ padding-top: 140px; padding-bottom: 140px; } .arc-manifesto blockquote{ font-family: 'Cinzel', serif; font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 3.8vw, 3rem); line-height: 1.28; letter-spacing: .01em; max-width: 1100px; margin: 0; color: var(--arc-paper); } .arc-manifesto blockquote::before{ content:"\201C "; color: var(--arc-gold); font-size: 1.4em; font-style: normal; } .arc-manifesto blockquote::after{ content:" \201D"; color: var(--arc-gold); font-size: 1.4em; font-style: normal; } .arc-highlight{ background: linear-gradient(180deg, var(--arc-gold) 0%, var(--arc-gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; } .arc-sig{ margin-top: 50px; display: flex; align-items: center; gap: 18px; font-family: 'JetBrains Mono', monospace; font-size: .78rem; color: var(--arc-violet-soft); letter-spacing: .12em; text-transform: uppercase; } .arc-sig::before{ content:""; width: 60px; height: 1px; background: var(--arc-gold); } /* ─── 13. PAGES STANDARD (page.php) ────────────────────────── */ .arc-page{ padding-top: 150px; } /* CONTENU DES PAGES. Le conteneur occupe toute la largeur de la section et se centre. À l'intérieur : - le TEXTE est limité à --arc-readw (confort de lecture) et centré ; - les IMAGES, tableaux et le calendrier peuvent s'étendre plus large que le texte, et restent centrés. Résultat : la page n'est plus tassée à gauche, le texte reste lisible, les médias respirent. */ .arc-page-content{ width: 100%; font-size: 1.15rem; line-height: 1.8; color: var(--arc-paper); } /* Le texte courant : largeur de lecture, centré. */ .arc-page-content > p, .arc-page-content > ul, .arc-page-content > ol, .arc-page-content > h1, .arc-page-content > h2, .arc-page-content > h3, .arc-page-content > h4, .arc-page-content > h5, .arc-page-content > h6, .arc-page-content > blockquote, .arc-page-content > .arc-page-links{ max-width: var(--arc-readw); margin-left: auto; margin-right: auto; } .arc-page-content h1, .arc-page-content h2, .arc-page-content h3, .arc-page-content h4{ font-family: 'Cinzel', serif; color: var(--arc-paper); text-transform: uppercase; letter-spacing: .01em; margin-top: 2em; margin-bottom: .6em; line-height: 1.2; } .arc-page-content h2{ font-size: 1.9rem; } .arc-page-content h3{ font-size: 1.45rem; } .arc-page-content h4{ font-size: 1.15rem; color: var(--arc-gold); } .arc-page-content p{ margin-top: 0; margin-bottom: 1.4em; } .arc-page-content a{ color: var(--arc-gold); border-bottom: 1px solid rgba(255,214,10,0.4); transition: border-color .3s; } .arc-page-content a:hover{ border-color: var(--arc-gold); } .arc-page-content ul, .arc-page-content ol{ margin-top: 0; margin-bottom: 1.4em; padding-left: 1.4em; } .arc-page-content li{ margin-bottom: .5em; } /* Images : centrées, peuvent s'étendre au-delà de la colonne de texte (jusqu'à la largeur de section), jamais déformées. */ .arc-page-content img{ display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; border-radius: 4px; } /* Figures et blocs image WordPress : centrés également. */ .arc-page-content figure, .arc-page-content .wp-block-image, .arc-page-content .wp-caption{ margin-left: auto; margin-right: auto; text-align: center; } .arc-page-content figure img, .arc-page-content .wp-block-image img{ margin-left: auto; margin-right: auto; } .arc-page-content figcaption, .arc-page-content .wp-caption-text{ text-align: center; color: var(--arc-paper-mute); font-family: 'JetBrains Mono', monospace; font-size: .82rem; margin-top: .6em; } .arc-page-content blockquote{ max-width: var(--arc-readw); border-left: 2px solid var(--arc-gold); padding-left: 24px; margin: 1.8em auto; font-family: 'Cinzel', serif; font-style: italic; color: var(--arc-violet-soft); } .arc-page-content table{ width: 100%; max-width: var(--arc-readw); border-collapse: collapse; margin: 1.6em auto; } .arc-page-content th, .arc-page-content td{ border: 1px solid var(--arc-line); padding: 10px 14px; text-align: left; } .arc-page-content th{ background: var(--arc-night-2); color: var(--arc-gold); font-family: 'JetBrains Mono', monospace; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; } /* Boutons générés par WordPress / plugins (dont Caldera Forms). Le texte est forcé en indigo foncé : du blanc sur fond doré serait illisible. !important neutralise le CSS du plugin qui impose sinon sa propre couleur de texte. */ .arc-page-content .wp-block-button__link, .arc-page-content button, .arc-page-content input[type="submit"], .arc-page-content input[type="button"], .arc-page-content input[type="reset"], .arc-page-content .caldera-grid .btn, .arc-page-content .caldera-grid input[type="submit"], .arc-page-content .caldera-grid button{ background: var(--arc-gold) !important; color: var(--arc-indigo) !important; border: none !important; text-shadow: none !important; padding: 12px 26px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: transform .3s, box-shadow .3s, background .3s; } .arc-page-content .wp-block-button__link:hover, .arc-page-content button:hover, .arc-page-content input[type="submit"]:hover, .arc-page-content input[type="button"]:hover, .arc-page-content input[type="reset"]:hover, .arc-page-content .caldera-grid .btn:hover, .arc-page-content .caldera-grid input[type="submit"]:hover, .arc-page-content .caldera-grid button:hover{ background: var(--arc-gold-hot) !important; color: var(--arc-indigo) !important; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,214,10,0.3); } /* Variante "lien stylé en bouton" que Caldera peut produire */ .arc-page-content .caldera-grid a.btn{ display: inline-block; text-decoration: none; } /* Champs de formulaire (Caldera Forms, etc.) */ .arc-page-content input[type="text"], .arc-page-content input[type="email"], .arc-page-content input[type="tel"], .arc-page-content input[type="url"], .arc-page-content input[type="number"], .arc-page-content textarea, .arc-page-content select{ background: var(--arc-night-2); border: 1px solid var(--arc-line); color: var(--arc-paper); padding: 12px 14px; border-radius: 4px; font-family: 'Inter Tight', sans-serif; font-size: .95rem; width: 100%; max-width: 480px; } .arc-page-content input:focus, .arc-page-content textarea:focus, .arc-page-content select:focus{ outline: none; border-color: var(--arc-gold); box-shadow: 0 0 0 3px rgba(255,214,10,0.12); } .arc-page-links{ margin-top: 2em; font-family: 'JetBrains Mono', monospace; } .arc-page-links a{ color: var(--arc-gold); margin: 0 4px; } /* ─── 13bis. PLUGIN ICS CALENDAR (page Disponibilités) ────── Le plugin ICS Calendar génère son calendrier avec son propre CSS, calibré pour un fond clair : texte noir, cellules blanches. Sur le fond indigo nuit d'Arcreane, c'est illisible. On force ici un habillage sombre cohérent avec le thème. Les classes ICS Calendar varient selon la version (.ics-calendar, .r34ics, .ics-calendar-grid…). On ratisse large ; si une zone reste illisible, envoie le HTML inspecté pour un ciblage exact. ─────────────────────────────────────────────────────────── */ /* LARGEUR DU CALENDRIER. Le conteneur de page occupe désormais toute la largeur de section, donc le calendrier n'a plus besoin de "déborder" : il prend simplement 100% de la largeur disponible et se centre. Plus de calc() fragile. */ .arc-page-content .ics-calendar, .arc-page-content .r34ics, .arc-page-content [class*="ics-calendar"]:not([class*="ics-calendar-"]), .arc-page-content [class*="r34ics"]:not([class*="r34ics-"]){ width: 100%; max-width: var(--arc-maxw); margin-left: auto; margin-right: auto; } .arc-page-content .ics-calendar, .arc-page-content .r34ics, .arc-page-content .ics-calendar *, .arc-page-content .r34ics *, .arc-page-content [class*="ics-calendar"], .arc-page-content [class*="ics-calendar"] *, .arc-page-content [class*="r34ics"], .arc-page-content [class*="r34ics"] *{ color: var(--arc-paper); border-color: var(--arc-line) !important; } /* Conteneur général du calendrier */ .arc-page-content .ics-calendar, .arc-page-content .r34ics, .arc-page-content [class*="ics-calendar"]{ background: transparent; } /* Cellules, lignes et tableaux du calendrier */ .arc-page-content .ics-calendar table, .arc-page-content .r34ics table, .arc-page-content [class*="ics-calendar"] table{ background: var(--arc-night-2); border-collapse: collapse; } .arc-page-content .ics-calendar td, .arc-page-content .ics-calendar th, .arc-page-content .r34ics td, .arc-page-content .r34ics th, .arc-page-content [class*="ics-calendar"] td, .arc-page-content [class*="ics-calendar"] th{ background: var(--arc-night-2); border: 1px solid var(--arc-line); color: var(--arc-paper); } /* En-têtes (jours de la semaine, titre du mois) */ .arc-page-content .ics-calendar th, .arc-page-content .r34ics th, .arc-page-content [class*="ics-calendar"] th, .arc-page-content [class*="ics-calendar"] caption, .arc-page-content [class*="ics-month"], .arc-page-content [class*="ics-calendar-month"]{ background: var(--arc-indigo); color: var(--arc-gold) !important; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .04em; } /* Événements / créneaux dans le calendrier */ .arc-page-content [class*="ics-event"], .arc-page-content [class*="ics-calendar-event"], .arc-page-content [class*="r34ics-event"]{ background: rgba(123,111,184,0.22); border-left: 3px solid var(--arc-gold); color: var(--arc-paper) !important; border-radius: 3px; } .arc-page-content [class*="ics-event"] a, .arc-page-content [class*="ics-calendar-event"] a, .arc-page-content [class*="r34ics-event"] a{ color: var(--arc-gold) !important; } /* Liens et boutons de navigation du calendrier (mois précédent/suivant) */ .arc-page-content .ics-calendar a, .arc-page-content .r34ics a, .arc-page-content [class*="ics-calendar"] a{ color: var(--arc-gold); } .arc-page-content [class*="ics-calendar"] button, .arc-page-content [class*="ics-nav"] button, .arc-page-content [class*="ics-calendar-nav"] a{ background: var(--arc-night-3) !important; color: var(--arc-gold) !important; border: 1px solid var(--arc-line) !important; } /* Jour courant mis en valeur */ .arc-page-content [class*="ics-today"], .arc-page-content [class*="today"]{ outline: 1px solid var(--arc-gold); outline-offset: -1px; } /* "Afficher/masquer tout" et autres libellés de contrôle */ .arc-page-content [class*="ics-calendar"] label, .arc-page-content [class*="ics-calendar"] legend, .arc-page-content [class*="ics-toggle"]{ color: var(--arc-paper) !important; } /* Cases à cocher : on garde leur rendu natif lisible */ .arc-page-content [class*="ics-calendar"] input[type="checkbox"]{ accent-color: var(--arc-gold); } /* ─── 14. PAGE SERVICE (template-service.php) ──────────────── */ .arc-service-hero{ margin: 0 auto 50px; max-width: var(--arc-maxw); } .arc-service-hero img{ width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--arc-line); } .arc-service-nav{ margin-top: 90px; padding-top: 40px; border-top: 1px solid var(--arc-line); } .arc-service-nav h4, .arc-schools h4{ font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--arc-gold); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 24px; } .arc-service-nav-grid{ display: flex; flex-wrap: wrap; gap: 14px; } .arc-service-nav-grid a{ font-family: 'Cinzel', serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; color: var(--arc-violet-soft); padding: 10px 22px; border: 1px solid var(--arc-line); border-radius: 999px; transition: border-color .3s, color .3s, background .3s; } .arc-service-nav-grid a:hover{ color: var(--arc-gold); border-color: var(--arc-gold); background: rgba(255,214,10,0.06); } /* ─── 15. PAGE ENSEIGNEMENT (template-enseignement.php) ────── */ .arc-schools{ margin-top: 70px; } .arc-schools-grid{ display: flex; flex-wrap: wrap; gap: 10px; } .arc-schools-grid span{ font-family: 'JetBrains Mono', monospace; font-size: .8rem; padding: 8px 16px; border: 1px solid var(--arc-line); border-radius: 4px; color: var(--arc-paper-mute); letter-spacing: .04em; transition: border-color .3s, color .3s; } .arc-schools-grid span:hover{ border-color: var(--arc-violet); color: var(--arc-paper); } .arc-moodle-cta{ margin-top: 70px; background: linear-gradient(135deg, var(--arc-night-2) 0%, var(--arc-indigo) 100%); border: 1px solid var(--arc-line); border-radius: 8px; padding: 48px; position: relative; overflow: hidden; } .arc-moodle-cta::before{ content:""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 90% 10%, rgba(255,214,10,0.12), transparent 70%); pointer-events: none; } .arc-moodle-inner{ display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; position: relative; z-index: 1; } .arc-moodle-text h3{ font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.7rem; text-transform: uppercase; margin: 0 0 12px; color: var(--arc-paper); } .arc-moodle-text p{ color: var(--arc-paper-mute); margin: 0; font-size: 1.05rem; line-height: 1.6; max-width: 60ch; } /* ─── 16. ARCHIVE / BLOG (index.php) ───────────────────────── */ .arc-archive-list{ max-width: var(--arc-readw); margin: 0 auto; } .arc-archive-item{ padding: 36px 0; border-bottom: 1px solid var(--arc-line); } .arc-archive-date{ font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--arc-gold); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; } .arc-archive-title{ font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.7rem; text-transform: uppercase; margin: 0 0 12px; line-height: 1.2; } .arc-archive-title a{ color: var(--arc-paper); transition: color .3s; } .arc-archive-title a:hover{ color: var(--arc-gold); } .arc-archive-excerpt{ color: var(--arc-paper-mute); margin-bottom: 14px; line-height: 1.65; } .arc-pagination{ margin-top: 50px; font-family: 'JetBrains Mono', monospace; } .arc-pagination .page-numbers{ padding: 8px 14px; border: 1px solid var(--arc-line); border-radius: 4px; margin-right: 6px; color: var(--arc-paper); display: inline-block; } .arc-pagination .page-numbers.current, .arc-pagination .page-numbers:hover{ background: var(--arc-gold); color: var(--arc-indigo); border-color: var(--arc-gold); } /* ─── 17. APPEL CONTACT (footer.php) ───────────────────────── */ .arc-contact-cta{ padding: 110px var(--arc-gut); text-align: center; background: radial-gradient(800px 400px at 50% 50%, rgba(123,111,184,0.16), transparent 70%); border-top: 1px solid var(--arc-line); border-bottom: 1px solid var(--arc-line); } .arc-contact-cta h2{ font-family: 'Cinzel', serif; font-weight: 500; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 20px; color: var(--arc-paper); } .arc-contact-cta h2 em{ font-style: normal; color: var(--arc-gold); } .arc-contact-cta p{ color: var(--arc-paper-mute); font-size: 1.15rem; max-width: 540px; margin: 0 auto 40px; line-height: 1.6; } .arc-btn-primary{ display: inline-flex; align-items: center; gap: 14px; background: var(--arc-gold); color: var(--arc-indigo); padding: 18px 36px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; transition: transform .3s, box-shadow .3s; } .arc-btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 40px rgba(255,214,10,0.3), 0 0 0 4px rgba(255,214,10,0.16); } /* ─── 18. PIED DE PAGE ─────────────────────────────────────── */ .arc-footer{ background: var(--arc-night-2); padding: 80px var(--arc-gut) 30px; } .arc-foot-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--arc-line); max-width: var(--arc-maxw); margin: 0 auto; } .arc-foot-grid h4{ font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--arc-gold); margin: 0 0 22px; } .arc-foot-brand{ display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .arc-foot-brand img{ height: 54px; width: auto; } .arc-foot-brand-text{ font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.3rem; letter-spacing: .12em; line-height: 1.1; } .arc-foot-brand-text small{ display: block; font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--arc-violet-soft); letter-spacing: .14em; font-weight: 400; margin-top: 4px; } .arc-foot-tag{ color: var(--arc-paper-mute); max-width: 38ch; margin: 0; line-height: 1.6; font-size: 1rem; } .arc-foot-grid p, .arc-foot-grid li{ font-size: .98rem; color: var(--arc-paper); margin: 0 0 8px; line-height: 1.6; } .arc-foot-grid ul{ list-style: none; margin: 0; padding: 0; } .arc-foot-grid li a{ transition: color .3s; } .arc-foot-grid li a:hover{ color: var(--arc-gold); } .arc-foot-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: 28px; max-width: var(--arc-maxw); margin: 0 auto; font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--arc-paper-mute); letter-spacing: .08em; } .arc-social a{ margin-left: 18px; transition: color .3s; } .arc-social a:hover{ color: var(--arc-gold); } /* ─── 19. ANIMATIONS AU SCROLL ─────────────────────────────── */ .arc-reveal{ opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); } .arc-reveal.arc-in{ opacity: 1; transform: none; } /* ─── 20. RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 980px){ /* Bandeau "en travaux" : passe en deux lignes pour rester compact. */ .arc-notice-inner{ flex-wrap: wrap; gap: 10px; padding: 10px var(--arc-gut); } .arc-notice-text{ flex-basis: 100%; order: 3; font-size: .85rem; } .arc-notice-close{ margin-left: auto; } .arc-menu{ position: fixed; top: 0; right: -100%; width: 84%; max-width: 340px; height: 100vh; background: var(--arc-night-2); padding: 90px 30px; transition: right .45s cubic-bezier(.2,.8,.2,1); border-left: 1px solid var(--arc-line); z-index: 60; overflow-y: auto; } .arc-menu.arc-open{ right: 0; } .arc-menu-list{ flex-direction: column; align-items: flex-start; gap: 0; width: 100%; } .arc-menu-list li{ width: 100%; } .arc-menu-list a{ font-size: 1.1rem; padding: 16px 0; width: 100%; border-bottom: 1px solid var(--arc-line); } .arc-menu-list a.arc-cta, .arc-menu-list .arc-cta > a{ margin-top: 16px; width: auto; border-bottom: 1px solid var(--arc-gold); } /* En mobile : sous-menus dépliés en accordéon statique, pas en survol. */ body.arcreane-theme .arc-menu-list .sub-menu, body.arcreane-theme .arc-menu-list .arc-sub-menu{ position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: none; padding: 0 0 0 16px; margin: 0; box-shadow: none; min-width: 0; } body.arcreane-theme .arc-menu-list .arc-sub-menu a{ font-size: 1rem; padding: 12px 0; } .arc-menu-list .arc-has-children::after{ display: none; } /* pas de pont de survol en mobile */ .arc-caret{ display: none; } /* la flèche n'a pas de sens en accordéon statique */ .arc-menu-toggle{ display: block; } .arc-hero{ padding-top: 130px; } .arc-hero-title{ font-size: clamp(2.1rem, 11vw, 4rem); } .arc-hero-meta{ grid-template-columns: 1fr; gap: 22px; margin-top: 50px; } .arc-hero-corner{ display: none; } .arc-section{ padding-top: 90px; padding-bottom: 90px; } .arc-page{ padding-top: 120px; } .arc-section-head{ grid-template-columns: 1fr; gap: 14px; } .arc-services{ grid-template-columns: 1fr; } .arc-service{ grid-column: span 1 !important; padding: 40px 0 !important; border-right: none !important; } .arc-service::after{ right: 0 !important; top: 40px; } .arc-tools-grid{ grid-template-columns: 1fr; } .arc-about-wrap{ grid-template-columns: 1fr; gap: 40px; } .arc-about-portrait{ max-width: 340px; margin: 0 auto; } .arc-stats{ grid-template-columns: repeat(2, 1fr); gap: 24px; } .arc-n{ font-size: 2.1rem; } .arc-moodle-inner{ grid-template-columns: 1fr; gap: 24px; text-align: left; } /* Calendrier ICS : sur tablette/mobile, il garde 100% de largeur et défile horizontalement si son contenu est trop large pour l'écran (sinon les cellules deviennent illisibles). */ .arc-page-content .ics-calendar, .arc-page-content .r34ics, .arc-page-content [class*="ics-calendar"]:not([class*="ics-calendar-"]), .arc-page-content [class*="r34ics"]:not([class*="r34ics-"]){ width: 100%; max-width: 100%; overflow-x: auto; } .arc-foot-grid{ grid-template-columns: 1fr 1fr; gap: 30px; } .arc-foot-bottom{ flex-direction: column; gap: 16px; align-items: flex-start; } } @media (max-width: 560px){ .arc-brand-text{ display: none; } /* logo seul sur très petit écran */ .arc-stats{ grid-template-columns: 1fr 1fr; } .arc-foot-grid{ grid-template-columns: 1fr; } .arc-moodle-cta{ padding: 32px 24px; } } /* ─── 21. ACCESSIBILITÉ : préférence "mouvement réduit" ────── */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .arc-reveal{ opacity: 1; transform: none; } .arc-line > span{ transform: none; } }