/* ========================================================================= GOFORMIA · COUCHE ATELIER Charge apres style.css, portee limitee a . Direction : lumineuse et accueillante. La page est claire du haut en bas, aucun grand aplat sombre. Le rythme vient de l'alternance blanc / violet tres clair, de filets teintes dans le violet de la marque, et des photos. Le violet Goformia est l'unique accent, utilise franchement. Ecrite en mobile first : le socle est le telephone, les media queries n'ajoutent que ce que la place permet. Trois points d'arret, 640 / 960 / 1280, contre treize incoherents avant. ATTENTION SPECIFICITE : ".at X" vaut 0,2,0 et bat donc les regles de style.css, y compris celles posees dans une media query. Tout ce qui est surcharge ici doit l'etre pour TOUS les points d'arret, sinon l'ancienne regle ne reprend jamais la main. Voir en particulier la navigation, ou un display pose sur .btn faisait disparaitre le menu burger. Retirer la classe "at" du body suffit a revenir a l'ancien rendu. ========================================================================= */ /* ------------------------------------------------------------------------- 1. JETONS ---------------------------------------------------------------------- */ .at { /* Fonds. Blanc par defaut, violet tres clair pour marquer les sections. */ --paper: #FFFFFF; --tint: #F5F1FF; --tint-2: #EBE4FF; --surface: #FFFFFF; /* Encres. Violet tres fonce plutot que noir : plus chaud, moins dur. */ --ink: #1B1533; --ink-2: #4A4266; --ink-3: #6B6484; /* Accent unique, verrouille sur toute la page */ --accent: #6C3EF5; --accent-deep: #5024D8; --accent-wash: rgba(108, 62, 245, 0.07); /* Filets teintes dans le violet : plus vivants qu'un gris neutre */ --rule: rgba(108, 62, 245, 0.16); --rule-strong: rgba(108, 62, 245, 0.34); /* Un seul rayon sur toute la page. Aucune pilule. */ --r: 10px; /* Rythme vertical */ --sp-section: 3.75rem; --sp-block: 2rem; --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; } @media (min-width: 640px) { .at { --sp-section: 5rem; --sp-block: 2.5rem; } } @media (min-width: 960px) { .at { --sp-section: 6.5rem; --sp-block: 3rem; } } /* ------------------------------------------------------------------------- 2. SOCLE ---------------------------------------------------------------------- */ .at .container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 640px) { .at .container { padding-inline: 2rem; } } @media (min-width: 1280px) { .at .container { max-width: 1260px; padding-inline: 2.5rem; } } .at section, .at .stats-band, .at .section-cta { padding-block: var(--sp-section); } .at *:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .at .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* La barre de navigation est collante : sans marge de defilement, un lien vers #formations amene le titre de section sous la barre. */ .at #formations, .at #clients, .at #about, .at [id]:target { scroll-margin-top: 84px; } /* ------------------------------------------------------------------------- 3. TYPOGRAPHIE Le display porte la personnalite. Le corps reste Inter : audience non technique, lecture longue sur telephone, coherence avec les autres pages. ---------------------------------------------------------------------- */ .at h1, .at h2, .at h3, .at .stat-num, .at .satisfaction-num, .at .fc-price, .at .ppf-stat-val, .at .ladder-num, .at .ladder-name { font-family: var(--font-display); font-optical-sizing: auto; color: var(--ink); } .at h1 { font-size: clamp(2.1rem, 8.5vw, 3.9rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.028em; text-wrap: balance; margin: 0; } .at h2 { font-size: clamp(1.7rem, 5.4vw, 2.65rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; } .at h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.28; letter-spacing: -0.012em; } .at p { color: var(--ink-2); text-wrap: pretty; } .at strong { color: var(--ink); font-weight: 650; } /* Les
des titres etaient cales sur l'ancienne echelle. */ @media (max-width: 1279px) { .at h1 br, .at h2 br { display: none; } } /* Emphase : meme famille, accent plein. Ni degrade, ni italique serif. */ .at .highlight { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; font-style: normal; font-weight: inherit; } /* Surtitres : deux sur toute la page, geres dans le HTML. */ .at .section-eyebrow, .at .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; background: none; padding: 0; border: 0; } .at .section-eyebrow::before, .at .hero-eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 1px; background: var(--accent); } .at .hero-eyebrow-dot { display: none; } .at .label-center { justify-content: center; } @media (max-width: 420px) { .at .hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.1em; } } .at .section-desc, .at .section-subtitle, .at .section-intro { font-size: 1.02rem; line-height: 1.62; color: var(--ink-2); max-width: 58ch; margin-top: 0.9rem; } .at .text-center + .section-intro { margin-inline: auto; } /* ------------------------------------------------------------------------- 4. ZONES Toute la page est claire. Le rythme vient de l'alternance blanc / teinte. ---------------------------------------------------------------------- */ .at .zone-paper { background: var(--paper); } .at .zone-cream, .at .zone-cream-deep, .at .zone-tint { background: var(--tint); } .at .zone-tint + .zone-tint, .at .zone-paper + .zone-paper { border-top: 1px solid var(--rule); } /* ------------------------------------------------------------------------- 5. BOUTONS Un seul rayon, aucun halo. Pleine largeur au telephone pour que la zone de pouce soit large et le libelle centre. ---------------------------------------------------------------------- */ .at .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 50px; padding: 0.85rem 1.5rem; border-radius: var(--r); font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-align: center; border: 1px solid transparent; box-shadow: none; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .at .btn-sm { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.92rem; } .at .btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } .at .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .at .btn-secondary, .at .btn-ghost { background: var(--surface); border-color: var(--rule-strong); color: var(--accent-deep); } .at .btn-secondary:hover, .at .btn-ghost:hover { background: var(--accent-wash); border-color: var(--accent); } /* ------------------------------------------------------------------------- 6. NAVIGATION Bascule a 1024px pour que les sept liens tiennent sur une seule ligne. ".at .btn" porte un display, donc l'affichage de la nav doit etre redeclare ici au meme niveau de specificite. ---------------------------------------------------------------------- */ .at .nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); box-shadow: none; } .at .nav-links a { font-size: 0.93rem; font-weight: 500; color: var(--ink-2); border-radius: var(--r); } .at .nav-links a:hover { color: var(--accent-deep); } .at .nav-links > a.active { color: var(--ink); font-weight: 600; } .at .nav-links > a.active::after { background: var(--accent); } .at .nav-links, .at .nav-cta { display: none; } .at .hamburger { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; border-radius: var(--r); border: 1px solid var(--rule-strong); color: var(--accent-deep); background: var(--surface); } @media (min-width: 1024px) { .at .nav-inner, .at .nav-container { min-height: 70px; } .at .nav-links { display: flex; } .at .nav-cta { display: inline-flex; min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.92rem; } .at .hamburger { display: none; } } .at .nav-logo { min-height: 44px; align-items: center; } .at .mobile-nav a, .at .mobile-nav button { display: flex; align-items: center; min-height: 48px; padding-block: 0.5rem; } .at .dropdown-menu a { display: block; min-height: 48px; padding-block: 0.7rem; } /* ------------------------------------------------------------------------- 7. HERO Quatre elements de texte au maximum : surtitre, titre, sous-titre, boutons. Le paragraphe de contexte vit dans "Notre approche", la preuve sociale et le bloc Qualiopi dans la bande de confiance, sous le hero. ---------------------------------------------------------------------- */ .at .hero { padding-top: 2.25rem; padding-bottom: var(--sp-section); background: radial-gradient(120% 85% at 100% 0%, var(--tint) 0%, rgba(245, 241, 255, 0) 62%), var(--paper); border-bottom: 1px solid var(--rule); } .at .hero::before { display: none; } @media (min-width: 960px) { .at .hero { padding-top: 4rem; padding-bottom: 4.5rem; } } .at .hero-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 960px) { .at .hero-layout { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 3.5rem; align-items: center; } } @media (min-width: 1280px) { .at .hero-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4.5rem; } } .at .hero-content, .at .hero-visual { margin: 0; padding: 0; } .at .hero h1 { margin-bottom: 1.05rem; } .at .hero-lede { font-size: 1.06rem; line-height: 1.55; color: var(--ink-2); max-width: 44ch; margin: 0 0 1.6rem; } @media (min-width: 640px) { .at .hero-lede { font-size: 1.15rem; } } /* Telephone : boutons pleine largeur, empiles, principal en premier. */ .at .hero-buttons, .at .cta-buttons, .at .formations-cta .btn, .at .highlight-card .card-cta .btn { margin: 0; } .at .hero-buttons, .at .cta-buttons { display: grid; grid-template-columns: 1fr; gap: 0.7rem; } @media (min-width: 520px) { .at .hero-buttons, .at .cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } .at .hero-buttons .btn, .at .cta-buttons .btn { flex: 0 1 auto; } .at .cta-buttons { justify-content: center; } } /* ------------------------------------------------------------------------- 8. SIGNATURE · L'ECHELLE DES 4 NIVEAUX Deux informations a faire passer d'un coup d'oeil : le parcours monte d'un cran a chaque niveau, et on n'est pas oblige de commencer en bas. La jauge encode la hauteur reelle du niveau, un barreau de plus par marche, sans piste de fond grise. Meme structure verticale du telephone au grand ecran, donc aucune bascule de mise en page a maintenir. ---------------------------------------------------------------------- */ .at .ladder { position: relative; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: 0 1px 2px rgba(27, 21, 51, 0.04), 0 14px 36px rgba(108, 62, 245, 0.09); overflow: hidden; } .at .ladder-head { padding: 1rem 1.15rem; background: var(--tint); border-bottom: 1px solid var(--rule); } .at .ladder-caption { margin: 0; font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); } .at .ladder-note { margin: 0.45rem 0 0; font-size: 0.87rem; line-height: 1.45; color: var(--ink-2); max-width: 42ch; } .at .ladder-list { list-style: none; margin: 0; padding: 0; } .at .ladder-step { position: relative; } .at .ladder-step + .ladder-step { border-top: 1px solid var(--rule); } .at .ladder-link { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: start; gap: 0 0.9rem; min-height: 62px; padding: 0.95rem 1.15rem; text-decoration: none; color: inherit; transition: background-color 0.18s ease; } .at .ladder-link:hover { background: var(--accent-wash); } .at .ladder-rank { display: flex; flex-direction: column; align-items: flex-start; gap: 0.32rem; } .at .ladder-num { font-size: 0.82rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* La jauge : autant de barreaux que le niveau, hauteur croissante. */ .at .ladder-gauge { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; } .at .ladder-gauge i { display: block; width: 3px; border-radius: 1px; background: var(--accent); } .at .ladder-gauge i:nth-child(1) { height: 5px; } .at .ladder-gauge i:nth-child(2) { height: 8px; } .at .ladder-gauge i:nth-child(3) { height: 11px; } .at .ladder-gauge i:nth-child(4) { height: 15px; } /* Le rail relie les quatre marches, sous la jauge. */ .at .ladder-rank::before { content: ""; position: absolute; left: 1.62rem; top: 3.05rem; width: 2px; border-radius: 1px; height: calc(100% - 2.15rem); background: var(--rule); } .at .ladder-step:last-child .ladder-rank::before { display: none; } .at .ladder-name { display: block; font-size: 1rem; font-weight: 600; line-height: 1.28; letter-spacing: -0.012em; color: var(--ink); } .at .ladder-req { display: block; margin-top: 0.2rem; font-size: 0.84rem; line-height: 1.4; color: var(--ink-3); } /* Les niveaux sans prerequis portent la mention en accent : c'est la reponse a la question "je peux commencer ou ?". */ .at .ladder-req-open { color: var(--accent); font-weight: 600; } .at .ladder-meta { padding-top: 0.1rem; font-size: 0.84rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .at .ladder-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: 0.85rem 1.15rem; border-top: 1px solid var(--rule); background: var(--tint); font-size: 0.88rem; font-weight: 600; color: var(--accent-deep); text-decoration: none; } .at .ladder-foot::after { content: "\2192"; font-size: 1rem; line-height: 1; } .at .ladder-foot:hover { background: var(--tint-2); } @media (prefers-reduced-motion: no-preference) { .at .ladder-step { opacity: 0; transform: translateY(8px); animation: at-rise 0.5s ease forwards; } .at .ladder-step:nth-child(2) { animation-delay: 0.07s; } .at .ladder-step:nth-child(3) { animation-delay: 0.14s; } .at .ladder-step:nth-child(4) { animation-delay: 0.21s; } } @keyframes at-rise { to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------------------- 9. BANDE DE CONFIANCE, sous le hero et non dedans ---------------------------------------------------------------------- */ .at .trust-band { padding-block: 1.6rem; background: var(--paper); border-bottom: 1px solid var(--rule); } .at .trust-band .container { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; } @media (min-width: 900px) { .at .trust-band .container { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; } } .at .hero-proof { display: block; } .at .hero-proof-text { font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); max-width: 48ch; margin: 0; } .at .hero-qualiopi { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--tint); text-decoration: none; box-shadow: none; } .at .hero-qualiopi:hover { border-color: var(--rule-strong); background: var(--tint-2); } .at .hero-qualiopi img { width: 92px; height: auto; flex: none; } .at .hero-qualiopi-text strong { display: block; font-family: var(--font-display); font-size: 0.88rem; color: var(--ink); } .at .hero-qualiopi-text small { display: block; margin-top: 0.2rem; font-size: 0.75rem; line-height: 1.4; color: var(--ink-3); max-width: 42ch; } /* ------------------------------------------------------------------------- 10. CHIFFRES Pas de cartes : des colonnes separees par des filets. ---------------------------------------------------------------------- */ .at .stats-band { background: var(--tint); border-bottom: 1px solid var(--rule); padding-block: 2.75rem; } .at .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } @media (min-width: 860px) { .at .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .at .stat-item { padding: 1.1rem 1rem 1.1rem 0; text-align: left; border-top: 1px solid var(--rule); background: none; } .at .stats-grid .stat-item:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rule); } @media (min-width: 860px) { .at .stat-item { border-top: 0; padding: 0 1.5rem; border-left: 1px solid var(--rule); } .at .stats-grid .stat-item:first-child { border-left: 0; padding-left: 0; } .at .stats-grid .stat-item:nth-child(even) { padding-left: 1.5rem; } } .at .stats-band .stat-num { font-size: clamp(2.1rem, 6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; } .at .stats-band .stat-label { margin-top: 0.5rem; font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); text-transform: none; letter-spacing: 0; } /* ------------------------------------------------------------------------- 11. NOTRE APPROCHE Quatre entrees separees par des filets, pas quatre cartes identiques. La mesure de largeur appartient au paragraphe, pas au bloc entier : posee sur le bloc, elle etait calculee en "ch" sur la taille du corps de texte et coincait le h2 dans 400px. ---------------------------------------------------------------------- */ .at .features-header { max-width: none; margin-bottom: var(--sp-block); } .at .features-header h2 { max-width: 16ch; } .at .features-header .section-desc { max-width: 56ch; } @media (min-width: 760px) { .at .features-header h2 { max-width: 24ch; } } .at .features-grid { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 760px) { .at .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .at .feature-card { padding: 1.5rem 0; border-top: 1px solid var(--rule); background: none; border-radius: 0; box-shadow: none; } .at .feature-card::before { display: none; } .at .feature-card:hover { transform: none; box-shadow: none; } @media (min-width: 760px) { .at .feature-card { padding: 1.75rem 2rem 1.75rem 0; } .at .features-grid .feature-card:nth-child(even) { padding-left: 2rem; padding-right: 0; border-left: 1px solid var(--rule); } } .at .feature-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; } .at .feature-card p { font-size: 0.95rem; line-height: 1.6; margin: 0; } /* Photo de session, pleine largeur sous les quatre entrees. */ .at .approach-figure { margin: var(--sp-block) 0 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); background: var(--tint); } .at .approach-figure img { display: block; width: 100%; height: auto; } .at .approach-figure figcaption { padding: 0.8rem 1.1rem; border-top: 1px solid var(--rule); font-size: 0.8rem; color: var(--ink-3); } /* ------------------------------------------------------------------------- 12. POURQUOI MAINTENANT ---------------------------------------------------------------------- */ .at .why-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-block); } @media (min-width: 960px) { .at .why-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 3.5rem; align-items: start; } } .at .check-list { display: grid; gap: 0; margin-top: var(--sp-block); } .at .check-item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.85rem; padding: 1.15rem 0; border-top: 1px solid var(--rule); background: none; border-radius: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); } .at .check-item:last-child { border-bottom: 1px solid var(--rule); } .at .check-icon { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #FFFFFF; margin: 0; } .at .check-icon svg { width: 0.8rem; height: 0.8rem; } .at .highlight-card { padding: 1.75rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--tint); box-shadow: none; } .at .highlight-card .card-emoji { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--r); background: var(--accent); color: #FFFFFF; font-size: 1.3rem; margin-bottom: 1rem; } .at .highlight-card h3 { font-size: 1.25rem; margin: 0 0 0.75rem; } .at .highlight-card p { font-size: 0.95rem; line-height: 1.62; } .at .highlight-card .card-cta { margin-top: 1.25rem; } /* ------------------------------------------------------------------------- 13. FORMATIONS Fond teinte, cartes blanches, un visuel par niveau pour que la grille ait de la variation reelle et que chaque formation soit reconnaissable. ---------------------------------------------------------------------- */ .at .formations-section { background: var(--tint); } .at .formations-section::after { display: none; } .at .formations-section h2 { max-width: 22ch; } .at .formations-section .section-subtitle { max-width: 58ch; } .at .official-badge-banner { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; padding: 1.4rem; margin-bottom: var(--sp-block); border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); } @media (min-width: 760px) { .at .official-badge-banner { grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; } } .at .official-badge-banner p { font-size: 0.88rem; line-height: 1.6; color: var(--ink-2); margin: 0.35rem 0 0; } .at .official-badge-banner a { color: var(--accent-deep); } .at .official-badge-banner strong { font-family: var(--font-display); } .at .formation-cards-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 700px) { .at .formation-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } @media (min-width: 1280px) { .at .formation-cards-grid { gap: 1.5rem; } } .at .formation-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .at .formation-card:hover { transform: none; border-color: var(--rule-strong); box-shadow: 0 12px 30px rgba(108, 62, 245, 0.12); } /* Rapport fixe : aucun saut de mise en page au chargement, et remplacable par une vraie photo sans retoucher le CSS. */ .at .fc-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); border-bottom: 1px solid var(--rule); } .at .fc-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .at .fc-header { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); background: none; } .at .fc-level-badge { font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 0.3rem 0.55rem; border: 1px solid var(--rule); border-radius: 5px; background: none; } .at .fc-badge-ppf { color: #FFFFFF; background: var(--accent); border-color: var(--accent); } .at .fc-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; } .at .fc-body h3 { font-size: 1.18rem; margin: 0 0 0.6rem; } .at .fc-body > p { font-size: 0.92rem; line-height: 1.6; margin: 0 0 1.1rem; } .at .fc-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; } .at .fc-chip { font-size: 0.78rem; font-weight: 500; color: var(--ink-2); padding: 0.28rem 0.6rem; border: 1px solid var(--rule); border-radius: 5px; background: var(--tint); } .at .fc-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rule); } .at .fc-price { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .at .fc-cta { font-size: 0.88rem; font-weight: 600; color: var(--accent); } .at .fc-pdf-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; margin-top: 0.4rem; font-size: 0.8rem; color: var(--ink-3); text-decoration: none; background: none; border: 0; padding: 0; } .at .fc-pdf-link:hover { color: var(--accent-deep); text-decoration: underline; } .at .tarifs-note { margin-top: 1.5rem; font-size: 0.82rem; color: var(--ink-3); text-align: center; } .at .ppf-stats-box { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: var(--sp-block); padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); } .at .ppf-stats-box-icon { color: var(--accent); font-size: 1.5rem; } .at .ppf-stats-title { display: block; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); } .at .ppf-stat-row { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 0.75rem; } .at .ppf-stat-val { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; } .at .ppf-stat-lbl { font-size: 0.8rem; color: var(--ink-2); margin-top: 0.15rem; } .at .ppf-note { font-size: 0.76rem; line-height: 1.55; color: var(--ink-3); margin-top: 0.9rem; } .at .formations-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: var(--sp-block); padding-top: var(--sp-block); border-top: 1px solid var(--rule); } .at .formations-cta p { margin: 0; font-size: 1rem; color: var(--ink); } /* ------------------------------------------------------------------------- 14. CLIENTS Mur de logos : des logos, rien d'autre. Autant de colonnes que de logos, sinon une cellule vide traine en bout de ligne. ---------------------------------------------------------------------- */ .at .clients-logos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--sp-block); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; } @media (min-width: 640px) { .at .clients-logos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .at .client-logo-card { display: grid; place-items: center; min-height: 112px; padding: 1.25rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: var(--surface); box-shadow: none; } .at .client-logo-card:hover { transform: none; box-shadow: none; background: var(--tint); } .at .client-logo-card img { max-height: 48px; width: auto; filter: none; opacity: 1; } .at .client-name, .at .client-label { display: none; } .at .satisfaction-band { margin-top: var(--sp-block); padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--tint); } .at .satisfaction-num { font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; color: var(--accent); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------- 15. A PROPOS ---------------------------------------------------------------------- */ .at .about-photo-wrap { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); background: var(--tint); box-shadow: none; } .at .about-photo-wrap img { display: block; width: 100%; height: auto; } .at .about-quote { margin-top: 1.5rem; padding: 1.1rem 0 1.1rem 1.25rem; border-left: 3px solid var(--accent); background: none; border-radius: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); } .at .tag { display: inline-block; padding: 0.32rem 0.65rem; margin: 0 0.35rem 0.35rem 0; border: 1px solid var(--rule); border-radius: 5px; background: var(--tint); font-size: 0.8rem; color: var(--ink-2); } /* ------------------------------------------------------------------------- 16. ACTUALITES ---------------------------------------------------------------------- */ .at .actu-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .at .actu-card:hover { transform: none; border-color: var(--rule-strong); box-shadow: 0 12px 30px rgba(108, 62, 245, 0.12); } .at .actu-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--rule); } .at .actu-card-media img { width: 100%; height: 100%; object-fit: cover; } .at .actu-card:hover .actu-card-media img { transform: none; } .at .actu-card-body { padding: 1.15rem; display: flex; flex-direction: column; flex: 1; } /* Les etiquettes posees par dessus le visuel sont un tic de mise en page : la categorie vit dans le corps de la carte. */ .at .actu-card-media .actu-badge { display: none; } .at .actu-card-body .actu-badge { display: inline-flex; align-items: center; align-self: flex-start; margin-bottom: 0.5rem; padding: 0.24rem 0.55rem; border: 0; border-radius: 5px; background: var(--accent-wash); color: var(--accent-deep); font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: none; backdrop-filter: none; } .at .actu-meta, .at .actu-meta time, .at .actu-meta span { color: var(--ink-3); font-size: 0.78rem; } .at .actu-card-title { font-size: 1.05rem; line-height: 1.32; margin: 0 0 0.6rem; } .at .actu-card-title a { display: block; min-height: 44px; color: var(--ink); text-decoration: none; } .at .actu-card-title a:hover { color: var(--accent-deep); } .at .actu-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--rule); } .at .actu-tag { color: var(--ink-2); background: none; border: 1px solid var(--rule); border-radius: 5px; padding: 0.2rem 0.45rem; font-size: 0.74rem; } .at .actu-lire { color: var(--accent); font-weight: 600; font-size: 0.82rem; margin-left: auto; } /* ------------------------------------------------------------------------- 17. FAQ ---------------------------------------------------------------------- */ .at .faq-list { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--rule); } .at .faq-item { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; margin: 0; } .at .faq-summary { padding: 1.15rem 2.5rem 1.15rem 0; min-height: 56px; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--ink); background: none; } .at .faq-answer { padding: 0 2.5rem 1.35rem 0; font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); background: none; } /* ------------------------------------------------------------------------- 18. APPEL FINAL Le bloc etait construit pour un fond sombre : halo violet en pseudo element, texte gris clair, bouton fantome. Tout est neutralise. ---------------------------------------------------------------------- */ .at .section-cta { background: var(--tint-2); border-top: 1px solid var(--rule); text-align: center; } .at .section-cta::before { display: none; } .at .section-cta h2 { color: var(--ink); max-width: 22ch; margin-inline: auto; } .at .section-cta .highlight { color: var(--accent-deep); } .at .section-cta p { color: var(--ink-2); max-width: 54ch; margin: 0 auto 1.75rem; font-size: 1.02rem; } .at .section-cta .section-label, .at .section-cta .section-eyebrow { background: none; color: var(--accent-deep); border: 0; } /* ------------------------------------------------------------------------- 19. PIED DE PAGE Il etait sur violet profond. La page doit rester lumineuse de bout en bout, donc il passe en teinte claire avec l'encre normale. ---------------------------------------------------------------------- */ .at footer { background: var(--tint); border-top: 1px solid var(--rule); color: var(--ink-2); } .at footer p, .at footer li, .at footer span, .at footer .fl-item { color: var(--ink-2); } .at footer strong, .at footer h4, .at footer .fl-label, .at footer .social-title { color: var(--ink); } .at footer h4 { font-family: var(--font-display); } .at footer a { color: var(--ink-2); } .at footer a:hover { color: var(--accent-deep); } .at footer nav a, .at .footer-col a, .at .footer-links a { display: inline-flex; align-items: center; min-height: 40px; } .at .footer-bottom, .at .footer-bottom span { border-top-color: var(--rule); color: var(--ink-3); } .at .social-title { color: var(--ink); } /* ------------------------------------------------------------------------- 20. BOUTON WHATSAPP Il recouvrait un bouton du hero sur telephone. Il remonte au dessus de la zone de pouce et respecte l'encoche. ---------------------------------------------------------------------- */ .at .whatsapp-fab { width: 52px; height: 52px; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 6px 20px rgba(27, 21, 51, 0.2); } @media (min-width: 640px) { .at .whatsapp-fab { width: 56px; height: 56px; right: 1.5rem; bottom: 1.5rem; } } /* ------------------------------------------------------------------------- 21. MOUVEMENT REDUIT ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .at *, .at *::before, .at *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .at .ladder-step { opacity: 1; transform: none; } } /* Les libelles du bandeau satisfaction heritaient d'un gris trop clair du theme d'origine, 4.35 contre 4.5 requis. */ .at .satisfaction-label, .at .ppf-stat-lbl, .at .stat-label { color: var(--ink-2); } /* ------------------------------------------------------------------------- 22. PASSE DESKTOP · EXPLOITATION DE L'ESPACE Mesures relevees a 1440px avant correction : la photo de session etait devenue une cinquieme cellule de la grille des quatre entrees, donc 590px de large au lieu de la pleine largeur, et le mur de logos s'arretait a 1180px dans un conteneur de 1260px. ---------------------------------------------------------------------- */ .at .approach-figure { grid-column: 1 / -1; margin-top: var(--sp-block); } /* Une photo 3:2 en pleine largeur ferait 840px de haut sur grand ecran et ecraserait la section. Le cadrage s'allonge a mesure que la place grandit. */ .at .approach-figure img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%; } @media (min-width: 760px) { .at .approach-figure img { aspect-ratio: 2.1 / 1; } } @media (min-width: 1100px) { .at .approach-figure img { aspect-ratio: 2.5 / 1; } } /* Le mur de logos occupe toute la largeur disponible. */ .at .clients-logos-grid { max-width: none; width: 100%; } /* Colonne photo du bloc formateur : elle etait figee a 300px et ne suivait pas l'elargissement du conteneur. */ @media (min-width: 960px) { .at .about-section .container > div, .at .about-grid { align-items: start; } .at .about-photo-wrap { max-width: 380px; } } /* ========================================================================= 23. PASSE FINALE · COMPOSITIONS Chaque section a maintenant sa propre famille de mise en page : hero en deux colonnes, bento pour l'approche, liste et carte pour "pourquoi", grille de cartes pour les formations, mur de logos, texte et citation pour la mission, une a la une plus deux breves pour les actualites, accordeon pour la FAQ. Aucune famille n'apparait deux fois. ========================================================================= */ /* ---- Bento : photo de session + quatre cellules ------------------------- La photo ancre la composition et occupe deux rangees. La cellule violette porte la promesse la plus forte, c'est le seul aplat d'accent de la page. */ .at .bento { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .at .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .at .bento-photo { grid-column: 1 / -1; } } @media (min-width: 960px) { .at .bento { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 1.1rem; } .at .bento-photo { grid-column: 1; grid-row: 1 / 3; } } .at .bento-photo { display: flex; flex-direction: column; margin: 0; min-height: 0; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--tint); } .at .bento-photo img { display: block; width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%; } @media (min-width: 960px) { .at .bento-photo img { aspect-ratio: auto; height: 100%; } } .at .bento-photo figcaption { flex: none; padding: 0.7rem 1rem; border-top: 1px solid var(--rule); font-size: 0.78rem; color: var(--ink-3); background: var(--surface); } .at .bento-cell { padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); } .at .bento-cell h3 { margin: 0 0 0.55rem; font-size: 1.12rem; } .at .bento-cell p { margin: 0; font-size: 0.93rem; line-height: 1.6; } .at .bento-cell-accent { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } .at .bento-cell-accent h3 { color: #FFFFFF; font-size: 1.3rem; } .at .bento-cell-accent p { color: rgba(255, 255, 255, 0.88); } /* ---- Mission : texte et citation, sans fiche identite ------------------- */ .at .mission { display: grid; grid-template-columns: 1fr; gap: var(--sp-block); align-items: start; } @media (min-width: 960px) { .at .mission { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; } } .at .mission-text h2 { margin-bottom: 1.25rem; } .at .mission-text p { font-size: 1.02rem; line-height: 1.65; max-width: 58ch; } .at .mission-text p + p { margin-top: 1rem; } .at .mission-quote { margin: 0; padding: 1.75rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--accent); } @media (min-width: 960px) { .at .mission-quote { margin-top: 0.4rem; padding: 2.25rem; } } .at .mission-quote blockquote { margin: 0; padding: 0; border: 0; background: none; } .at .mission-quote blockquote p { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; } @media (min-width: 960px) { .at .mission-quote blockquote p { font-size: 1.5rem; } } .at .mission-quote figcaption { margin-top: 1.1rem; font-size: 0.85rem; color: var(--ink-3); } /* ---- Actualites : une a la une, deux breves ------------------------------ Selection par position, jamais par classe : le script qui regenere ce bloc ne connait pas la couche Atelier. */ .at .actu-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 960px) { .at .actu-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 1.1rem; } .at .actu-grid .actu-card:first-child { grid-row: 1 / 3; } } /* Les deux breves : visuel a gauche, texte a droite, des le telephone. */ .at .actu-grid .actu-card:not(:first-child) { flex-direction: row; } .at .actu-grid .actu-card:not(:first-child) .actu-card-media { flex: 0 0 38%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--rule); } .at .actu-grid .actu-card:not(:first-child) .actu-card-body { padding: 1rem 1.1rem; } .at .actu-grid .actu-card:not(:first-child) .actu-card-resume { display: none; } .at .actu-grid .actu-card:not(:first-child) .actu-card-title { font-size: 0.98rem; } .at .actu-grid .actu-card:not(:first-child) .actu-card-footer .actu-tag { display: none; } .at .actu-grid .actu-card:first-child .actu-card-title { font-size: 1.25rem; } @media (min-width: 960px) { .at .actu-grid .actu-card:first-child .actu-card-title { font-size: 1.45rem; } .at .actu-grid .actu-card:first-child .actu-card-body { padding: 1.5rem; } } .at .actu-section-cta { margin-top: var(--sp-block); } /* ---- Appel final : les deux boutons sur une ligne, telephone compris ---- */ .at .cta-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; max-width: 520px; margin-inline: auto; } @media (max-width: 519px) { .at .cta-buttons .btn { padding-inline: 0.75rem; font-size: 0.94rem; min-height: 50px; } } @media (min-width: 520px) { .at .cta-buttons { display: flex; justify-content: center; max-width: none; } } /* ---- Logos partenaires : plus grands, plus d'air ------------------------- */ .at .client-logo-card { min-height: 150px; padding: 1.5rem; } .at .client-logo-card img { max-height: 74px; max-width: 78%; } @media (min-width: 960px) { .at .client-logo-card { min-height: 170px; } .at .client-logo-card img { max-height: 84px; } } /* ---- Pied de page : logo violet sur fond clair ---------------------------- */ .at footer .nav-logo { color: var(--ink); } .at footer .nav-logo-mot { width: auto; height: 26px; } /* ========================================================================= 24. MOUVEMENT Quatre gestes, tous justifiables en une phrase, tous coupes par prefers-reduced-motion. Rien ne boucle, rien ne clignote. 1. Le hero se met en place a l'ouverture, un element apres l'autre. 2. Les groupes de contenu se revelent en entrant dans l'ecran. 3. Les visuels des cartes respirent au survol. 4. La jauge de l'echelle grandit au survol du niveau. Sans JavaScript, tout est visible d'emblee : l'etat cache n'existe que sous html.js. ========================================================================= */ @media (prefers-reduced-motion: no-preference) { /* 1. Mise en place du hero */ .at .hero-content > * { opacity: 0; transform: translateY(12px); animation: at-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .at .hero-content > :nth-child(1) { animation-delay: 0.05s; } .at .hero-content > :nth-child(2) { animation-delay: 0.12s; } .at .hero-content > :nth-child(3) { animation-delay: 0.2s; } .at .hero-content > :nth-child(4) { animation-delay: 0.28s; } .at .hero-eyebrow::before { transform-origin: left; animation: at-grow 0.6s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .at .ladder { animation: at-rise 0.6s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .at .ladder-step:nth-child(1) { animation-delay: 0.4s; } .at .ladder-step:nth-child(2) { animation-delay: 0.47s; } .at .ladder-step:nth-child(3) { animation-delay: 0.54s; } .at .ladder-step:nth-child(4) { animation-delay: 0.61s; } /* 2. Revelation au defilement */ html.js .at [data-reveal-group] > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } html.js .at [data-reveal-group].is-in > * { opacity: 1; transform: none; } html.js .at [data-reveal-group].is-in > :nth-child(2) { transition-delay: 0.07s; } html.js .at [data-reveal-group].is-in > :nth-child(3) { transition-delay: 0.14s; } html.js .at [data-reveal-group].is-in > :nth-child(4) { transition-delay: 0.21s; } html.js .at [data-reveal-group].is-in > :nth-child(5) { transition-delay: 0.28s; } html.js .at [data-reveal-group].is-in > :nth-child(6) { transition-delay: 0.35s; } /* 3. Les visuels respirent au survol */ .at .fc-media img, .at .actu-card-media img, .at .bento-photo img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; } .at .formation-card:hover .fc-media img, .at .actu-card:hover .actu-card-media img { transform: scale(1.04); } /* 4. La jauge grandit sous le curseur */ .at .ladder-gauge i { transform-origin: bottom; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); } .at .ladder-link:hover .ladder-gauge i { transform: scaleY(1.3); } } @keyframes at-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* La photo du bento prenait 1135px de haut au telephone : l'attribut height="1067" du HTML servait de base au flex et neutralisait le rapport 3:2. La hauteur redevient automatique sauf sur grand ecran. */ .at .bento-photo img { height: auto; } @media (min-width: 960px) { .at .bento-photo img { height: 100%; } } /* Bento grand ecran : la photo occupait 37 % de la largeur, elle passe a 44 % et les cellules gagnent un peu de hauteur pour l'equilibrer. */ @media (min-width: 960px) { .at .bento { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); } .at .bento-cell { min-height: 210px; display: flex; flex-direction: column; justify-content: center; } } /* ========================================================================= 25. PAGES INTERIEURES La couche s'applique maintenant a toutes les pages publiques. Les blocs ci-dessous n'existent pas sur l'accueil : entete de page, programme en etapes, formulaire de contact, carte, equipe, pages legales, articles, ressources. Meme palette, meme rayon, meme discipline : aucun aplat sombre, aucune ombre lourde, aucun deplacement au survol. ========================================================================= */ /* ---- Entete de page (formations, contact, equipe, legal) ---------------- */ .at .page-hero, .at .page-hero-sm { padding: 2.25rem 0 2.5rem; background: radial-gradient(120% 85% at 100% 0%, var(--tint) 0%, rgba(245, 241, 255, 0) 62%), var(--paper); border-bottom: 1px solid var(--rule); } @media (min-width: 960px) { .at .page-hero { padding: 4rem 0 4rem; } .at .page-hero-sm { padding: 3.5rem 0 3rem; } } .at .page-hero p { color: var(--ink-2); max-width: 60ch; } .at .page-hero p.cta-note { color: var(--ink-3); } .at .page-hero-meta { gap: 1rem 1.75rem; } .at .page-hero-meta .meta-item { color: var(--ink-2); font-size: 0.92rem; } .at .level-badge, .at .section-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.7rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--tint); color: var(--accent-deep); font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .at .breadcrumb { padding: 0.85rem 0; font-size: 0.8rem; color: var(--ink-3); } .at .breadcrumb a { color: var(--ink-2); } .at .breadcrumb a:hover { color: var(--accent-deep); } .at .breadcrumb .sep { color: var(--ink-3); } /* ---- Fonds de section --------------------------------------------------- */ .at .section-full, .at .section-full-sm, .at .legal-section { background: var(--tint); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .at .section-full + .section-full, .at .section-full + .section-cta { border-top: 0; } /* ---- Programme en etapes (pages formation) ------------------------------ */ .at .steps { margin-top: var(--sp-block); } .at .step-num { background: var(--accent); color: #FFFFFF; border: 0; box-shadow: none; font-family: var(--font-display); font-weight: 700; } .at .step-line { background: var(--rule); width: 2px; } .at .step-time { color: var(--accent); } .at .step-content h3 { font-size: 1.08rem; } .at .step-content p { color: var(--ink-2); } .at .step-tags .tag, .at .step-tags span { background: var(--tint); border: 1px solid var(--rule); border-radius: 5px; color: var(--ink-2); } .at .audience-item { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; } .at .audience-item:hover { border-color: var(--rule-strong); transform: none; } .at .audience-item strong { color: var(--ink); } .at .audience-item span { color: var(--ink-2); } .at .audience-item .icon { color: var(--accent); } /* ---- Cartes generiques -------------------------------------------------- */ .at .card, .at .cards-grid .card { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; } .at .card:hover { transform: none; box-shadow: 0 12px 30px rgba(108, 62, 245, 0.1); border-color: var(--rule-strong); } .at .card-highlight { background: var(--tint); border-color: var(--rule); } .at .card-icon { background: var(--tint); color: var(--accent); border-radius: var(--r); } .at .card p { color: var(--ink-2); } /* ---- Contact ------------------------------------------------------------ */ .at .contact-grid { gap: var(--sp-block); } @media (min-width: 960px) { .at .contact-grid { gap: 3.5rem; } } .at .contact-form-box { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; padding: 1.5rem; } @media (min-width: 640px) { .at .contact-form-box { padding: 2.25rem; } } .at .form-group label { color: var(--ink); font-size: 0.86rem; } .at .form-group input, .at .form-group textarea, .at .form-group select, .at .ressource-form input[type="email"], .at .ressource-form input[type="text"] { border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--surface); color: var(--ink); min-height: 48px; font-size: 1rem; box-shadow: none; } .at .form-group input:focus, .at .form-group textarea:focus, .at .form-group select:focus, .at .ressource-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); box-shadow: none; } .at .form-group input::placeholder, .at .form-group textarea::placeholder { color: var(--ink-3); } .at .contact-item .c-icon { background: var(--tint); color: var(--accent); border-radius: 8px; } .at .contact-item strong { color: var(--ink-3); } .at .contact-item a, .at .contact-item span { color: var(--ink); } .at .contact-item a:hover { color: var(--accent-deep); } .at .mini-faq-title { color: var(--ink-3); } .at .mini-faq-item { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); } .at .map-container { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--tint); } .at .social-links a { border: 1px solid var(--rule); border-radius: 8px; color: var(--ink-2); background: var(--surface); } .at .social-links a:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--tint); } /* ---- Equipe ------------------------------------------------------------- */ .at .team-card { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; } .at .team-card::before { display: none; } .at .team-card:hover { transform: none; box-shadow: 0 12px 30px rgba(108, 62, 245, 0.1); } .at .team-card img { border-radius: 8px; } .at .team-name { font-family: var(--font-display); color: var(--ink); } .at .team-role { color: var(--accent-deep); } .at .team-badges span { background: var(--tint); border: 1px solid var(--rule); border-radius: 5px; color: var(--ink-2); } .at .handicap-box { border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: var(--r); background: var(--tint); } .at .handicap-box .hb-icon { color: var(--accent); } /* ---- Pages legales ------------------------------------------------------ */ .at .legal-toc { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; } .at .legal-toc-title { color: var(--ink-3); font-family: var(--font-display); } .at .legal-toc a { color: var(--ink-2); border-radius: 6px; } .at .legal-toc a:hover { color: var(--accent-deep); background: var(--tint); } .at .legal-card { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; } .at .legal-card h2 { font-size: 1.3rem; } .at .legal-card h2::before { background: var(--accent); } .at .legal-card p, .at .legal-card li { color: var(--ink-2); } .at .legal-highlight { background: var(--tint); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: var(--r); } /* ---- Articles ----------------------------------------------------------- */ .at .article-header h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); } .at .article-chapeau { color: var(--ink-2); } .at .article-meta { color: var(--ink-3); border-color: var(--rule); } .at .article-tags .actu-tag, .at .article-tags span { background: none; border: 1px solid var(--rule); border-radius: 5px; color: var(--ink-2); } .at .article-corps p, .at .article-corps li { color: var(--ink-2); } .at .article-corps h2, .at .article-corps h3, .at .article-corps h4 { color: var(--ink); } .at .article-corps a { color: var(--accent-deep); } .at .article-corps code { background: var(--tint); border: 1px solid var(--rule); } .at .article-corps blockquote { border-left: 3px solid var(--accent); background: none; color: var(--ink-2); } .at .article-figure, .at .article-hero-media { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); } .at .article-figure img, .at .article-hero-media img { display: block; width: 100%; height: auto; } .at .article-figure figcaption { font-size: 0.8rem; color: var(--ink-3); padding: 0.6rem 0.9rem; border-top: 1px solid var(--rule); background: var(--surface); } /* Les encarts de fin d'article etaient sur fond sombre. */ .at .article-cta, .at .article-ressource { background: var(--tint-2); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: none; } .at .article-cta h2, .at .article-cta h3, .at .article-cta strong, .at .article-ressource h2, .at .article-ressource h3, .at .article-ressource strong { color: var(--ink); } .at .article-cta p, .at .article-ressource p { color: var(--ink-2); } .at .article-cta a:not(.btn), .at .article-ressource a:not(.btn) { color: var(--accent-deep); } .at .article-cta .btn-primary, .at .article-ressource .btn-primary { background: var(--accent); color: #FFFFFF; border-color: var(--accent); } .at .article-share a { border: 1px solid var(--rule); border-radius: 8px; color: var(--ink-2); background: var(--surface); } .at .actu-related { border-top: 1px solid var(--rule); } /* ---- Liste des actualites ----------------------------------------------- */ .at .actu-hero { padding: 2.25rem 0 2rem; background: radial-gradient(120% 85% at 100% 0%, var(--tint) 0%, rgba(245, 241, 255, 0) 62%), var(--paper); border-bottom: 1px solid var(--rule); } @media (min-width: 960px) { .at .actu-hero { padding: 3.5rem 0 3rem; } } .at .actu-filtres a, .at .actu-filtres button { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink-2); min-height: 40px; padding: 0.4rem 0.8rem; font-size: 0.86rem; } .at .actu-filtres .actif, .at .actu-filtres [aria-current] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } .at .actu-une { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; overflow: hidden; } .at .actu-une:hover { box-shadow: 0 12px 30px rgba(108, 62, 245, 0.1); border-color: var(--rule-strong); } .at .actu-une-media { background: var(--tint); } .at .actu-une-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); } /* Dans la liste complete, toutes les cartes gardent le format vertical. */ .at .actu-liste .actu-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .at .actu-liste .actu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .at .actu-liste .actu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; } } .at .actu-liste .actu-grid .actu-card:first-child { grid-row: auto; } .at .actu-liste .actu-grid .actu-card:not(:first-child) { flex-direction: column; } .at .actu-liste .actu-grid .actu-card:not(:first-child) .actu-card-media { flex: none; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--rule); } .at .actu-liste .actu-grid .actu-card:not(:first-child) .actu-card-resume, .at .actu-liste .actu-grid .actu-card:not(:first-child) .actu-tag { display: initial; } .at .actu-liste .actu-grid .actu-card:not(:first-child) .actu-card-title, .at .actu-liste .actu-grid .actu-card:first-child .actu-card-title { font-size: 1.05rem; } .at .actu-related .actu-grid { grid-template-rows: none; } .at .actu-related .actu-grid .actu-card:first-child { grid-row: auto; } .at .actu-related .actu-grid .actu-card:not(:first-child) { flex-direction: column; } .at .actu-related .actu-grid .actu-card:not(:first-child) .actu-card-media { flex: none; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--rule); } /* ---- Ressources --------------------------------------------------------- */ .at .ressource-hero { padding: 2.25rem 0 2.5rem; background: radial-gradient(120% 85% at 100% 0%, var(--tint) 0%, rgba(245, 241, 255, 0) 62%), var(--paper); border-bottom: 1px solid var(--rule); } @media (min-width: 960px) { .at .ressource-hero { padding: 3.5rem 0 3.5rem; } } .at .ressource-card { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; overflow: hidden; } .at .ressource-card:hover { transform: none; box-shadow: 0 12px 30px rgba(108, 62, 245, 0.1); border-color: var(--rule-strong); } .at .ressource-vignette { background: var(--tint); } .at .ressource-vignette-vide { background: var(--tint-2); color: var(--accent-deep); } .at .ressource-couverture { border-radius: var(--r); box-shadow: 0 14px 36px rgba(108, 62, 245, 0.14); } .at .ressource-form-bloc { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: none; } .at .ressource-form label { color: var(--ink); } .at .rf-facultatif, .at .rf-obligatoire { color: var(--ink-3); } .at .rf-succes { background: var(--tint); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: var(--r); color: var(--ink); } /* ---- Indicateurs et encadres divers ------------------------------------- */ .at .satisfaction-band, .at .indicateurs-box, .at .official-badge-banner { background: var(--surface); } .at .zone-tint .official-badge-banner { background: var(--surface); } /* ---- Correctifs releves au controle des pages interieures ---------------- */ /* Formulaire de contact : la grille a deux colonnes ne se repliait pas au telephone et les champs debordaient du viewport. */ @media (max-width: 639px) { .at .form-row { grid-template-columns: 1fr; } } .at .form-group input, .at .form-group textarea, .at .form-group select, .at .ressource-form input { width: 100%; max-width: 100%; box-sizing: border-box; } .at .contact-form-box, .at .ressource-form-bloc { max-width: 100%; box-sizing: border-box; overflow: hidden; } /* Gris trop clairs du theme d'origine sur les pages formation. */ .at .check, .at li.check, .at .check span, .at .check-item span, .at .meta-item, .at .page-hero-meta span, .at .step-content p, .at .audience-item span, .at .card-desc-sm, .at .cta-note, .at .prog-grid p, .at .prog-grid li, .at .section-full p, .at .section-full li, .at .indicateur-label, .at .indic-label, .at .kpi-label, .at .stat-label { color: var(--ink-2); } .at .check::before, .at .check-item .check-icon { color: var(--accent); } .at .page-hero-meta strong, .at .meta-item strong { color: var(--ink); } .at a:not(.btn):not(.nav-logo):not(.ladder-link):not(.ladder-foot) { color: var(--accent-deep); } .at .nav-links a, .at .mobile-nav a, .at .breadcrumb a, .at footer a, .at .actu-card-title a, .at .fc-pdf-link, .at .legal-toc a, .at .contact-item a { color: inherit; } .at .nav-links a, .at .mobile-nav a { color: var(--ink-2); } .at .breadcrumb a { color: var(--ink-2); } .at footer a { color: var(--ink-2); } .at .actu-card-title a { color: var(--ink); } .at .contact-item a { color: var(--ink); } /* Metadonnees et separateurs gris clair dans les articles et la liste. */ .at .article-meta span, .at .article-meta time, .at .actu-meta span, .at .actu-meta time, .at .article-meta .sep, .at .actu-une-meta, .at .actu-une-meta span { color: var(--ink-3); } .at .actu-badge, .at [class*="actu-badge-"] { background: var(--accent-wash); color: var(--accent-deep); border: 0; } /* Zones tactiles des petits liens (sommaire legal, partage, etiquettes). */ .at .legal-toc a, .at .article-share a, .at .article-tags a, .at .actu-filtres a, .at .social-links a, .at .footer-links a { display: inline-flex; align-items: center; min-height: 44px; } .at .legal-toc a { padding: 0.35rem 0.6rem; } .at .article-tags a, .at .article-tags span { min-height: 36px; padding: 0.3rem 0.6rem; } /* Fil d'Ariane des articles (classe differente de celle des autres pages). */ .at .fil-ariane { padding: 0.85rem 0; font-size: 0.8rem; color: var(--ink-3); } .at .fil-ariane a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 40px; } .at .fil-ariane a:hover { color: var(--accent-deep); } .at .fil-ariane span { color: var(--ink-3); } .at .fil-ariane span[aria-current], .at .fil-ariane .courant { color: var(--ink-2); } /* Lien vers la carte, sous les coordonnees. */ .at .maps-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-deep); } /* Indicateurs de resultats et encadres des pages formation. */ .at #indicateurs div, .at #indicateurs p, .at #indicateurs li, .at .card p, .at .card li, .at .card-highlight p, .at .card-highlight li, .at .section-full .card p { color: var(--ink-2); } .at #indicateurs strong, .at .card strong { color: var(--ink); } .at #indicateurs .stat-num, .at #indicateurs .ppf-stat-val, .at .card .stat-num { color: var(--accent); } /* ========================================================================= 26. RELECTURE DE L'ACCUEIL, SECONDE PASSE ========================================================================= */ /* Adresse du lieu de formation dans le pied de page. */ .at .footer-adresse { display: block; margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); } /* Les titres de section suivent tous le meme bord. Seuls la FAQ et l'appel final restent centres : ce sont des moments de conclusion. */ .at .clients-section, .at .clients-section h2, .at .clients-section .section-intro, .at .actu-section, .at .actu-section h2, .at .actu-section .section-intro { text-align: left; } .at .clients-section .section-intro, .at .actu-section .section-intro { margin-inline: 0; } .at .actu-section-cta { text-align: left; } /* Menu deroulant des formations : meme surface, meme rayon, meme filet. */ .at .dropdown-menu { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: 0 14px 36px rgba(108, 62, 245, 0.12); padding: 0.5rem; } .at .dropdown-menu a { border-radius: 8px; color: var(--ink); font-weight: 600; } .at .dropdown-menu a span { display: block; color: var(--ink-3); font-weight: 400; font-size: 0.78rem; margin-top: 0.15rem; } .at .dropdown-menu a:hover { background: var(--tint); color: var(--accent-deep); } /* Fleche portee par le style, pas par le texte : un seul geste, identique partout. */ .at .fc-cta::after, .at .actu-lire::after { content: "\2192"; margin-left: 0.35rem; } /* ========================================================================= 27. PAGES FORMATION · ENTETE EN DEUX COLONNES ET FICHE Meme logique que l'accueil : la promesse a gauche, l'objet a droite. La fiche porte les faits que l'acheteur cherche (duree, tarif, format, effectif, prerequis), le visuel du niveau, le programme PDF et la ligne de financement. Le bouton PDF quitte la rangee de boutons : deux appels suffisent dans l'entete. ========================================================================= */ .at .fh-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 960px) { .at .fh-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; align-items: center; } } @media (min-width: 1280px) { .at .fh-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 4.5rem; } } .at .page-hero h1 { margin: 0.9rem 0 1rem; } .at .fh-content > p { font-size: 1.04rem; line-height: 1.6; max-width: 52ch; margin: 0 0 1.5rem; } @media (min-width: 640px) { .at .fh-content > p { font-size: 1.1rem; } } .at .fh-content .hero-buttons { margin-bottom: 0.9rem; } .at .fh-content .cta-note { font-size: 0.82rem; line-height: 1.5; color: var(--ink-3); max-width: 52ch; margin: 0; } .at .fh-card { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: 0 1px 2px rgba(27, 21, 51, 0.04), 0 14px 36px rgba(108, 62, 245, 0.09); overflow: hidden; } .at .fh-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); border-bottom: 1px solid var(--rule); } .at .fh-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .at .fh-facts { margin: 0; padding: 0.35rem 1.15rem; } .at .fh-fact { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--rule); font-size: 0.92rem; line-height: 1.4; } .at .fh-fact:first-child { border-top: 0; } .at .fh-fact dt { margin: 0; color: var(--ink-3); } .at .fh-fact dd { margin: 0; color: var(--ink); font-weight: 600; font-family: var(--font-display); } .at .fh-foot { padding: 0.9rem 1.15rem 1rem; border-top: 1px solid var(--rule); background: var(--tint); display: grid; gap: 0.35rem; } .at .fh-pdf { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; font-weight: 600; color: var(--accent-deep); font-size: 0.9rem; } .at .fh-pdf::before { content: "\2193"; } .at .fh-qualiopi { font-size: 0.78rem; color: var(--ink-3); } /* Public vise : une liste a filets, pas trois cartes identiques. */ .at .audience-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--sp-block); border-top: 1px solid var(--rule); } @media (min-width: 760px) { .at .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } } .at .audience-item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.9rem; padding: 1.15rem 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; } .at .audience-item .icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 8px; background: var(--tint); color: var(--accent); font-size: 1.1rem; } .at .audience-item strong { font-family: var(--font-display); font-size: 1rem; } .at .audience-item span { font-size: 0.92rem; line-height: 1.55; } /* Encadre de confirmation, anciennement en style inline vert. */ .at .note-ok { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: var(--r); background: var(--tint); } .at .note-ok-icon { color: var(--accent); font-size: 1.2rem; display: inline-flex; } .at .note-ok p, .at .note-ok span:not(.note-ok-icon) { color: var(--ink-2); margin: 0; } /* Colonne droite du programme : encadres en teinte, pas en boites blanches ombrees. */ .at .prog-grid { gap: 2.5rem; } @media (min-width: 960px) { .at .prog-grid { gap: 4rem; } } .at .prog-grid .card { background: var(--tint); padding: 1.4rem; } .at .prog-grid .card + .card { margin-top: 1rem; } .at .prog-grid .card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; } .at .prog-grid .check-item { padding: 0.55rem 0; font-size: 0.92rem; border-top: 1px solid var(--rule); } .at .prog-grid .check-item:first-child { border-top: 0; } .at .prog-grid .check-item:last-child { border-bottom: 0; } .at .check { color: var(--accent); font-weight: 700; } /* Anciens styles en ligne des pages formation, devenus des classes. */ .at .badge-officiel { background: var(--accent); color: #FFFFFF; border-color: var(--accent); } .at .note-tint { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding: 1.2rem 1.5rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--tint); } .at .card-tint { background: var(--tint); } .at .stat-big { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; } .at .icon-lg { font-size: 1.8rem; flex-shrink: 0; color: var(--accent); } .at .card-icon-lg { font-size: 1.5rem; margin-bottom: 0.8rem; color: var(--accent); } /* ========================================================================= 28. CONTACT ET EQUIPE ========================================================================= */ /* Entete courte : alignee a gauche comme tout le site, mesure tenue. */ .at .page-hero-sm .container { text-align: left; } .at .page-hero-sm h1 { max-width: 20ch; } .at .page-hero-sm p { margin-inline: 0; max-width: 56ch; } .at .page-hero-sm .section-label, .at .page-hero-sm .level-badge { margin-bottom: 0.9rem; } /* Formulaire : l'objet de la page. */ .at .contact-form-box h2, .at .contact-form-box h3 { font-size: 1.3rem; margin-bottom: 0.35rem; } .at .contact-form-box > p { color: var(--ink-3); font-size: 0.88rem; margin-bottom: 1.4rem; } .at .form-group { margin-bottom: 1.1rem; } .at .form-group label { margin-bottom: 0.4rem; } .at .contact-form-box .btn, .at .contact-form-box button[type="submit"] { width: 100%; } @media (min-width: 640px) { .at .contact-form-box .btn, .at .contact-form-box button[type="submit"] { width: auto; min-width: 220px; } } .at .contact-info h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); } .at .contact-items { gap: 0.9rem; } .at .contact-item { padding: 0.35rem 0; } .at .map-container { height: 340px; } @media (min-width: 960px) { .at .map-container { height: 420px; } } .at .mini-faq-item { padding: 1rem 1.15rem; } .at .mini-faq-item strong { display: block; font-family: var(--font-display); margin-bottom: 0.3rem; color: var(--ink); } /* Equipe : deux personnes, deux cartes, la photo en premier. */ .at .team-grid { gap: 1.25rem; } @media (min-width: 960px) { .at .team-grid { gap: 1.5rem; } } .at .team-card { padding: 1.5rem; } .at .team-card img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--rule); } .at .team-name { font-size: 1.2rem; margin-top: 1rem; } .at .team-role { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75rem; } .at .team-badges { margin-top: 1rem; } .at .handicap-box { margin-top: var(--sp-block); padding: 1.5rem; } .at .handicap-box h3 { margin-bottom: 0.5rem; } .at .btn-full { width: 100%; } /* ========================================================================= 29. VISUELS D'ACTUALITE AU FORMAT NATIF Les visuels sont composes en 1200x630 avec du texte dedans : tout recadrage coupe le titre. Le cadre prend donc exactement ce rapport, et dans les breves le visuel s'aligne en haut de sa colonne au lieu d'etre etire sur la hauteur de la carte. ========================================================================= */ .at .actu-card-media, .at .actu-liste .actu-grid .actu-card:not(:first-child) .actu-card-media, .at .actu-related .actu-grid .actu-card:not(:first-child) .actu-card-media { aspect-ratio: 1200 / 630; } .at .actu-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Les deux breves de l'accueil : colonne visuel de 42 %, image en haut au format natif, le reste de la colonne en teinte. */ .at .actu-grid .actu-card:not(:first-child) .actu-card-media { flex: 0 0 42%; aspect-ratio: auto; display: flex; flex-direction: column; background: var(--tint); } .at .actu-grid .actu-card:not(:first-child) .actu-card-media img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; flex: none; } .at .actu-liste .actu-grid .actu-card:not(:first-child) .actu-card-media, .at .actu-related .actu-grid .actu-card:not(:first-child) .actu-card-media { display: block; flex: none; } .at .actu-liste .actu-grid .actu-card:not(:first-child) .actu-card-media img, .at .actu-related .actu-grid .actu-card:not(:first-child) .actu-card-media img { height: 100%; aspect-ratio: auto; } /* La une de la page liste : visuel au format natif, texte a cote. */ .at .actu-une { align-items: start; } .at .actu-une-media { aspect-ratio: 1200 / 630; align-self: stretch; } .at .actu-une-media img { width: 100%; height: 100%; object-fit: cover; } /* Titres du pied de page : des h2 pour l'ordre des titres, l'oeil ne voit pas la difference. */ .at footer .footer-heading { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin: 0 0 0.9rem; } .at .h3-look { font-size: 1.15rem; } /* Lien d'evitement : invisible jusqu'au focus clavier, puis en tete de page. */ .at .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; padding: 0.7rem 1rem; border-radius: 8px; background: var(--accent); color: #FFFFFF; font-weight: 600; text-decoration: none; transition: top 0.15s ease; } .at .skip-link:focus { top: 1rem; outline: 2px solid #FFFFFF; outline-offset: 2px; } .at .ancre-contenu { position: relative; top: -84px; height: 0; overflow: hidden; }