/* ========================================================================== AMEL UP ACADEMY — Design kit Charte « luxe éditorial calme » : crème + encre, serif éditorial, micro-labels espacés, matière (grain, hairlines), calme cinétique. Chaque page charge ce fichier AVANT son CSS spécifique : Fonts requises (head) : Cormorant Garamond 300/400/500/600 + italiques, Jost 200–700. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root{ /* Primitives — hex d'identité, puis équivalent OKLCH exact (les navigateurs modernes prennent la 2e déclaration, les anciens la 1re). */ --paper:#FBF8F2; /* fond vitrine */ --paper:oklch(97.98% 0.0086 84.6); --parchment:#F4EFE4; /* fond espace membre, plus chaud */ --parchment:oklch(95.30% 0.0156 86.4); --parchment-2:#EFE9DC; /* surface alternative espace membre */ --parchment-2:oklch(93.52% 0.0185 86.1); --ink:#221F19; /* encre : texte, boutons pleins */ --ink:oklch(24.05% 0.0120 84.6); --ink-soft:#544D41; /* texte secondaire */ --ink-soft:oklch(42.34% 0.0213 81.2); --taupe:#756A52; /* texte discret, placeholders (assombri pour contraste AA) */ --taupe:oklch(52.79% 0.0383 86.2); --stone:#A2998A; /* texte atténué sur parchment (grands corps) */ --stone:oklch(68.64% 0.0239 80.6); --stone-2:#6E6757; /* micro-labels espace membre (assombri pour contraste) */ --stone-2:oklch(51.55% 0.0259 87.2); --linen:#F6F1E7; /* texte clair posé sur média sombre */ --linen:oklch(95.93% 0.0143 84.6); --char:#1D1A16; /* fond des médias sombres (cartes, decks) */ --char:oklch(21.97% 0.0089 75.1); /* Hairlines : toujours dérivées de l'encre, jamais grises. */ --hair:rgba(34,31,25,.20); --line:rgba(34,31,25,.16); --line-soft:rgba(34,31,25,.10); --gold:rgba(34,31,25,.35); /* encre translucide : filets, ornements */ /* Sémantique de surface. body.member bascule l'espace membre. */ --bg:var(--paper); --tx:var(--ink); --tx-soft:var(--ink-soft); --tx-muted:var(--taupe); /* Typographie */ --serif:'Cormorant Garamond', Georgia, serif; --sans:'Jost', 'Helvetica Neue', Arial, sans-serif; /* Échelle display (fluide) */ --display-xl:clamp(2.8rem, 7.4vw, 6.2rem); /* hero d'accueil */ --display:clamp(2.6rem, 6.5vw, 5rem); /* h1 de page */ --display-wide:clamp(2.875rem, 6vw, 5.75rem); /* h1 espace membre */ --h2:clamp(2rem, 4vw, 3rem); --h3:clamp(1.8rem, 3.6vw, 2.6rem); --lead:clamp(1.2rem, 2.2vw, 1.6rem); /* Lettrage des micro-labels (Jost uppercase) */ --track-s:.24em; --track-m:.30em; --track-l:.36em; --track-xl:.44em; /* Rythme */ --gutter:clamp(1.4rem, 4vw, 3rem); --section-y:clamp(3rem, 7vw, 4.5rem); /* Calme cinétique : ease-out exponentiel, jamais de bounce. */ --ease:cubic-bezier(.16,1,.3,1); --dur:1.1s; } body.member{ --bg:var(--parchment); --tx-muted:var(--stone-2); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scrollbar-gutter:stable both-edges} /* titres : pas de veuve (dernier mot seul sur une ligne) */ h1,.media-card .title,.sec-title{text-wrap:balance} body{ font-family:var(--sans);font-weight:400; color:var(--tx);background:var(--bg); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } .serif{font-family:var(--serif)} ::selection{background:var(--ink);color:var(--paper)} a, button, input, select, textarea{outline:none} :focus-visible{outline:1px solid var(--ink);outline-offset:3px} img, video{max-width:100%;display:block} /* Grain : matière photographique sur toute la page. — aucune balise supplémentaire. */ body[data-grain]::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Cadre hairline fixe (pages plein écran type accueil) */ .frame{position:fixed;inset:22px;border:1px solid var(--line);pointer-events:none;z-index:5} /* Lien d'évitement clavier */ .skip-link{ position:fixed;top:-100%;left:50%;transform:translateX(-50%);z-index:300; background:var(--ink);color:var(--paper);text-decoration:none; font-size:.6rem;letter-spacing:var(--track-m);text-transform:uppercase; padding:.9rem 1.6rem;transition:top .3s var(--ease); } .skip-link:focus-visible{top:0;outline:none} /* -------------------------------------------------------------------------- 3. MICRO-LABELS — la grammaire typographique de la marque -------------------------------------------------------------------------- */ .kicker{ display:flex;align-items:center;gap:1rem; font-size:.56rem;letter-spacing:var(--track-xl);text-transform:uppercase; color:var(--tx-soft); } .kicker::before{content:"";width:46px;height:1px;background:var(--gold)} .eyebrow{ font-size:.6rem;letter-spacing:var(--track-l);text-transform:uppercase; color:var(--tx-muted); } /* Tête de section centrée (vitrine) */ .sec-head{text-align:center} .sec-head .eyebrow{color:var(--ink)} .sec-title{ font-family:var(--serif);font-weight:300;font-size:var(--h2); color:var(--ink);margin-top:.7rem; } .sec-sub{ color:var(--tx-soft);font-size:.95rem;line-height:1.7; max-width:560px;margin:1rem auto 0; } /* Label de section filé (espace membre) */ .section-label{display:flex;align-items:center;gap:28px;padding:18px 0 40px} .section-label span{ font-size:.8rem;letter-spacing:var(--track-m);text-transform:uppercase; color:var(--tx-muted);white-space:nowrap; } .section-label .rule{flex:1;height:1px;background:var(--line)} /* -------------------------------------------------------------------------- 4. HEADER & FOOTER -------------------------------------------------------------------------- */ .wordmark{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:inherit} .wordmark .a{font-size:.8rem;letter-spacing:.46em;text-transform:uppercase;font-weight:400} .wordmark .b{font-size:.54rem;letter-spacing:var(--track-l);text-transform:uppercase;color:var(--ink);margin-top:.55rem} /* lockup de marque : « AMEL UP ACADEMY BY » suivi du logo Airflow (cohérent avec l'accueil) */ .brand-lockup{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit} .brand-lockup .brand-name{font-size:.8rem;letter-spacing:.4em;text-transform:uppercase;font-weight:400;color:var(--ink);white-space:nowrap} .brand-lockup .brand-logo{height:64px;width:auto;display:block} @media(max-width:640px){ .brand-lockup .brand-logo{height:52px} .brand-lockup .brand-name{letter-spacing:.28em} } .site-header{ display:flex;align-items:center;justify-content:space-between; padding:1.4rem 3rem; } .site-header.is-sticky{ position:sticky;top:0;z-index:60; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); } .site-header nav{display:flex;align-items:center;gap:2.4rem} .site-header nav a{ font-size:.58rem;letter-spacing:var(--track-m);text-transform:uppercase; color:var(--ink);text-decoration:none;position:relative;transition:color .4s; } .site-header nav a:not(.member)::after{ content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px; background:var(--gold);transition:width .4s; } .site-header nav a:not(.member):hover{color:var(--gold)} .site-header nav a:not(.member):hover::after{width:100%} .site-header nav a.member{border:1px solid var(--ink);padding:.7rem 1.35rem;transition:.4s} .site-header nav a.member:hover{background:var(--ink);color:var(--bg)} .site-footer{ display:flex;align-items:center;justify-content:space-between; padding:1.6rem 3rem;border-top:1px solid var(--line-soft); } .site-footer .f{font-size:.52rem;letter-spacing:.34em;text-transform:uppercase;color:var(--tx-soft)} .site-footer .f b{color:var(--ink);font-weight:500} .site-footer .fserif{ font-family:var(--serif);font-style:italic;font-size:1.05rem; letter-spacing:.02em;text-transform:none;color:var(--tx-soft); } .site-footer .fserif b{color:var(--ink);font-weight:500;font-style:normal} .site-footer .mid{ display:flex;align-items:center;gap:.7rem;color:var(--tx-soft); font-size:.52rem;letter-spacing:.34em;text-transform:uppercase; } .site-footer .mid .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)} /* -------------------------------------------------------------------------- 5. BOUTONS & LIENS -------------------------------------------------------------------------- */ .btn{ display:inline-block;font-family:var(--sans);font-weight:300; font-size:.6rem;letter-spacing:var(--track-m);text-transform:uppercase; padding:1rem 2rem;cursor:pointer;text-decoration:none;text-align:center; transition:.45s var(--ease); } .btn.solid{background:var(--ink);color:var(--bg);border:1px solid var(--ink)} .btn.solid:hover{background:transparent;color:var(--ink)} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)} .btn.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} .btn[disabled], .btn.is-disabled{opacity:.35;pointer-events:none} /* Lien souligné discret (mentions, retours) */ .underlink{ display:inline-block;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase; color:var(--tx-soft);text-decoration:none; border-bottom:1px solid var(--line-soft);padding-bottom:2px;transition:.3s; } .underlink:hover{color:var(--ink);border-color:var(--ink)} @media (pointer:coarse){ .underlink{padding:.5rem 0 2px} .ouvrir{padding:.5rem 0} } /* -------------------------------------------------------------------------- 6. SECTIONS & BANDEAUX -------------------------------------------------------------------------- */ .section{padding:var(--section-y) 3rem;max-width:1180px;margin:0 auto} .wrap{max-width:1480px;margin:0 auto;padding:0 56px} /* Bandeau de clôture : titre serif + CTA centrés */ .closing{text-align:center;padding:var(--section-y) 3rem 5rem;border-top:1px solid var(--line-soft)} .closing h3{font-family:var(--serif);font-weight:300;font-size:var(--h3);color:var(--ink)} .closing .cta{display:flex;gap:1rem;justify-content:center;margin-top:2rem;flex-wrap:wrap} /* Section éditoriale en deux colonnes (image + propos) */ .split{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem); align-items:center;padding:var(--section-y) 3rem;max-width:1180px;margin:0 auto; } .split .visual{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--char)} .split .visual img{width:100%;height:100%;object-fit:cover} .split .visual::before{content:"";position:absolute;inset:14px;border:1px solid rgba(246,241,231,.25);z-index:2;pointer-events:none} .split h2{font-family:var(--serif);font-weight:300;font-size:var(--h2);color:var(--ink);margin-top:1.2rem} .split p{color:var(--tx-soft);font-size:.95rem;line-height:1.75;margin-top:1.1rem;max-width:52ch} /* -------------------------------------------------------------------------- 7. PROSE — pages de texte long (politique, CGU, règlement) -------------------------------------------------------------------------- */ .prose{max-width:68ch;margin:0 auto;padding:var(--section-y) 3rem} .prose h1{font-family:var(--serif);font-weight:300;font-size:var(--h2);color:var(--ink)} .prose h2{ font-family:var(--serif);font-weight:500;font-size:1.45rem; color:var(--ink);margin-top:2.6em; } .prose h3{font-size:.66rem;letter-spacing:var(--track-m);text-transform:uppercase;font-weight:400;color:var(--tx-soft);margin-top:2.4em} .prose p, .prose li{font-size:.95rem;line-height:1.8;color:var(--tx-soft);margin-top:1em} .prose strong{color:var(--ink);font-weight:500} .prose ul, .prose ol{padding-left:1.2em} .prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);transition:.3s} .prose a:hover{border-color:var(--ink)} .prose hr{border:none;height:1px;background:var(--line-soft);margin:2.8em 0} /* -------------------------------------------------------------------------- 8. TÉMOIGNAGES -------------------------------------------------------------------------- */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem} .tcard{ background:color-mix(in srgb, var(--paper) 60%, white); border:1px solid var(--line-soft);padding:2rem 1.8rem; display:flex;flex-direction:column;transition:.4s; } .tcard:hover{transform:translateY(-5px);box-shadow:0 30px 60px -40px rgba(40,34,20,.4);border-color:var(--hair)} .tcard .quote{font-family:var(--serif);font-size:2.6rem;line-height:.6;color:var(--gold);height:.7em} .tcard p{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--ink);margin-top:.6rem;flex:1} .tcard .who{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)} .tcard .av{ width:42px;height:42px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,#E7D9BE,#CDB88C); display:grid;place-items:center; font-family:var(--serif);font-size:1.1rem;color:#5a4a25; } .tcard .who b{font-size:.82rem;font-weight:500;letter-spacing:.02em;display:block} .tcard .who small{font-size:.56rem;letter-spacing:var(--track-s);text-transform:uppercase;color:var(--taupe)} /* -------------------------------------------------------------------------- 9. ÉTAPES (parcours numéroté) -------------------------------------------------------------------------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem} .step{text-align:center;padding:0 .5rem} .step .n{font-family:var(--serif);font-size:2.6rem;color:var(--gold);line-height:1} .step h4{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);margin-top:.7rem} .step p{font-size:.86rem;color:var(--tx-soft);margin-top:.5rem;line-height:1.6} .step .bar{width:30px;height:1px;background:var(--hair);margin:1rem auto 0} /* -------------------------------------------------------------------------- 10. FORMULAIRES — champs soulignés, libellés en micro-label -------------------------------------------------------------------------- */ .field{display:flex;flex-direction:column} .field label{ font-size:.54rem;letter-spacing:var(--track-s);text-transform:uppercase; color:var(--tx-soft);margin-bottom:.5rem; } .field label .req{color:var(--ink)} .field input, .field select, .field textarea{ font-family:var(--sans);font-weight:300;font-size:.92rem;color:var(--ink); background:transparent;border:none;border-bottom:1px solid var(--hair); padding:.55rem 0;transition:border-color .35s;border-radius:0; } .field textarea{resize:vertical;min-height:5.5em;line-height:1.6} .field input::placeholder, .field textarea::placeholder{color:var(--taupe)} .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--ink)} .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:none} .field.error input, .field.error select, .field.error textarea{border-color:#8C3B2E} .field .field-error{font-size:.7rem;color:#8C3B2E;margin-top:.45rem;letter-spacing:.04em} /* Case à cocher avec mention */ .check{display:flex;align-items:flex-start;gap:.7rem} .check input{width:15px;height:15px;margin-top:2px;accent-color:var(--ink);flex-shrink:0} .check label{font-size:.78rem;line-height:1.55;color:var(--tx-soft)} .check label a{color:var(--ink);border-bottom:1px solid var(--hair);text-decoration:none} /* -------------------------------------------------------------------------- 10b. ESPACE MEMBRE — en-tête ample + intro de page -------------------------------------------------------------------------- */ .topbar{ display:flex;align-items:center;justify-content:space-between; padding:34px 56px;border-bottom:1px solid var(--line); } .topbar .brand .name{font-size:17px;font-weight:400;letter-spacing:.34em;text-transform:uppercase} .topbar .brand .sub{font-size:11px;font-weight:300;letter-spacing:.34em;text-transform:uppercase;color:var(--tx-muted);margin-top:8px} .topbar .brand a{text-decoration:none;color:inherit} .btn-espace{ font-size:12px;font-weight:300;letter-spacing:.26em;text-transform:uppercase; color:var(--ink);text-decoration:none; border:1px solid var(--line);padding:18px 30px; transition:background .5s ease, color .5s ease, border-color .5s ease; } .btn-espace:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} .intro{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;padding:84px 0 56px} .intro-left{max-width:62%} .intro .eyebrow{font-size:13px;letter-spacing:var(--track-m);margin-bottom:26px} .intro h1{ font-family:var(--serif);font-weight:500; font-size:var(--display-wide);line-height:1.02;letter-spacing:-.5px;color:var(--ink); } .intro-right{ font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.5; color:var(--tx-muted);text-align:right;max-width:300px;padding-top:8px; } /* -------------------------------------------------------------------------- 10c. PAGES MODULE — projections vidéo, documents, galerie -------------------------------------------------------------------------- */ /* Rangée de projection : légende éditoriale à gauche, vidéo à droite */ .screen{ display:grid;grid-template-columns:280px 1fr;gap:clamp(1.6rem,4vw,3.5rem); padding:3rem 0;border-top:1px solid var(--line-soft);align-items:start; } .screen:first-of-type{border-top:none} .screen .n{font-family:var(--serif);font-size:2.6rem;color:var(--gold);line-height:1} .screen h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;color:var(--ink);margin-top:.8rem} .screen .dur{font-size:.72rem;letter-spacing:var(--track-s);text-transform:uppercase;color:var(--tx-muted);margin-top:.7rem} .screen p{font-size:.9rem;line-height:1.7;color:var(--tx-soft);margin-top:1rem;max-width:34ch} .screen-media{background:var(--char);border:1px solid var(--hair);overflow:hidden;position:relative} .screen-media video{width:100%;display:block} /* filigrane traçable : identité du membre incrustée, dérivante, non cliquable */ .video-wm{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden} .video-wm span{ position:absolute;font-family:var(--sans);font-weight:400;font-size:.72rem; letter-spacing:.12em;white-space:nowrap;color:rgba(246,241,231,.30); text-shadow:0 1px 3px rgba(0,0,0,.55); transition:left 1.4s ease, top 1.4s ease; } /* vidéo verticale : pilier centré sur fond charbon */ .screen-media.vertical{aspect-ratio:9/16;max-width:340px;margin-inline:auto;display:flex;align-items:center;justify-content:center} .screen-media.vertical video{width:100%;height:100%;object-fit:cover} /* Liste de documents : rangées filetées qui ouvrent la visionneuse */ .doc-list{border-bottom:1px solid var(--line-soft)} .doc{ display:grid;grid-template-columns:90px 1fr auto;gap:1.6rem;align-items:center; width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--line-soft); padding:1.9rem 0;cursor:pointer;font-family:var(--sans);color:var(--ink); } .doc .n{font-family:var(--serif);font-size:2rem;color:var(--gold);line-height:1} .doc h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;color:var(--ink)} .doc .meta{font-size:.72rem;letter-spacing:var(--track-s);text-transform:uppercase;color:var(--tx-muted);margin-top:.5rem} .doc .ouvrir{color:var(--ink)} .doc:hover h3{color:var(--ink-soft)} .doc:hover .ouvrir .arrow{transform:translateX(8px)} /* Galerie de planches : clic = visionneuse */ .plate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:96px} .plate{ position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer; background:var(--char);border:1px solid var(--line-soft);padding:0; } .plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,.84,.34,1)} .plate:hover img{transform:scale(1.05)} /* Mention de contenu à venir, en pied de section */ .coming-note{ font-size:.72rem;letter-spacing:var(--track-s);text-transform:uppercase; color:var(--tx-muted);padding:1.6rem 0 4rem; } /* -------------------------------------------------------------------------- 11. CARTES MÉDIA (espace membre : parcours, modules) -------------------------------------------------------------------------- */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:96px} .media-card{ position:relative;aspect-ratio:3/2.15;overflow:hidden;display:block; text-decoration:none;color:var(--linen);background:var(--char); opacity:0;transform:translateY(26px); animation:rise var(--dur) cubic-bezier(.16,.84,.34,1) forwards; transition:transform .7s cubic-bezier(.16,.84,.34,1), box-shadow .7s ease; } .media-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(43,38,32,.55)} .media-card .media{ position:absolute;inset:0; background-image:var(--img,none);background-size:cover;background-position:center; background-color:var(--char); transition:transform 1.4s cubic-bezier(.16,.84,.34,1); } .media-card video.media{width:100%;height:100%;object-fit:cover} .media-card:hover .media{transform:scale(1.06)} .media-card::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg, rgba(20,17,13,.10) 0%, rgba(20,17,13,.20) 40%, rgba(20,17,13,.72) 100%); } .media-card .body{ position:relative;z-index:3;height:100%;padding:36px; display:flex;flex-direction:column;justify-content:flex-end; } .media-card .num{ position:absolute;top:36px;left:36px; font-size:13px;letter-spacing:.18em;color:rgba(246,241,231,.78); } .media-card .title{font-family:var(--serif);font-weight:500;font-size:38px;line-height:1.04;margin-bottom:14px} .media-card .desc{font-size:15px;font-weight:300;line-height:1.5;color:rgba(246,241,231,.78);max-width:88%;margin-bottom:26px} /* Lien « Ouvrir » avec flèche glissante */ .ouvrir{ font-size:12px;font-weight:300;letter-spacing:.26em;text-transform:uppercase; display:inline-flex;align-items:center;gap:14px; } .ouvrir .arrow{display:inline-block;transition:transform .5s cubic-bezier(.16,.84,.34,1)} .media-card:hover .ouvrir .arrow{transform:translateX(8px)} /* Entrée en cascade des cartes */ .card-grid .media-card:nth-child(1){animation-delay:.05s} .card-grid .media-card:nth-child(2){animation-delay:.11s} .card-grid .media-card:nth-child(3){animation-delay:.17s} .card-grid .media-card:nth-child(4){animation-delay:.23s} .card-grid .media-card:nth-child(5){animation-delay:.29s} .card-grid .media-card:nth-child(6){animation-delay:.35s} .card-grid .media-card:nth-child(7){animation-delay:.41s} .card-grid .media-card:nth-child(8){animation-delay:.47s} .card-grid .media-card:nth-child(9){animation-delay:.53s} .card-grid .media-card:nth-child(10){animation-delay:.59s} .card-grid .media-card:nth-child(11){animation-delay:.65s} .card-grid .media-card:nth-child(12){animation-delay:.71s} .card-grid .media-card:nth-child(13){animation-delay:.77s} .card-grid .media-card:nth-child(14){animation-delay:.83s} /* Pastille « à venir » centrée sur les cartes sans média */ .ph-tag{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2; font-size:10px;letter-spacing:.34em;text-transform:uppercase; color:rgba(246,241,231,.45);border:1px solid rgba(246,241,231,.22); padding:11px 16px;pointer-events:none; } .media-card:has(.media[style]) .ph-tag, .media-card:has(video) .ph-tag{display:none} /* -------------------------------------------------------------------------- 12. CADRE VIDÉO ÉDITORIAL (vitrine) -------------------------------------------------------------------------- */ .video-wrap{margin:3rem auto 0;max-width:960px;position:relative} .video-frame{ position:relative;aspect-ratio:16/9;overflow:hidden; border:1px solid var(--hair); background:linear-gradient(150deg,#ECE4D4,#E0D4BE); display:flex;align-items:center;justify-content:center; box-shadow:0 40px 80px -50px rgba(40,34,20,.5); } .video-frame::before{content:"";position:absolute;inset:14px;border:1px solid var(--line-soft);pointer-events:none;z-index:1} .video-frame video{width:100%;height:100%;object-fit:cover} .play{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center;cursor:pointer;background:none;border:none} .play .disc{ width:84px;height:84px;border-radius:50%;border:1px solid var(--ink); display:grid;place-items:center;background:rgba(251,248,242,.5); backdrop-filter:blur(2px);transition:.4s; } .play .disc svg{width:26px;height:26px;margin-left:4px;fill:var(--ink)} .play:hover .disc{background:var(--ink)} .play:hover .disc svg{fill:var(--paper)} .play .cap{font-family:var(--serif);font-size:1.25rem;color:var(--ink)} .play .sub{font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--tx-soft)} /* -------------------------------------------------------------------------- 13. DECK — visionneuse de présentations (slides) Markup et comportement : voir kit/academy.js (AcademyDeck). -------------------------------------------------------------------------- */ .deck{ position:fixed;inset:0;z-index:1000;background:rgba(18,15,11,.975); display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .55s ease, visibility .55s ease; } .deck.open{opacity:1;visibility:visible;pointer-events:auto} .deck-stage{position:relative;width:92vw;height:86vh;display:flex;align-items:center;justify-content:center} .deck-img{ max-width:100%;max-height:100%;object-fit:contain; box-shadow:0 40px 90px -40px rgba(0,0,0,.8); opacity:0;transition:opacity .35s ease; } .deck-img.shown{opacity:1} .deck-nav{ position:absolute;top:50%;transform:translateY(-50%); width:64px;height:64px;border:1px solid rgba(246,241,231,.28); background:transparent;color:var(--linen); font-family:var(--serif);font-size:34px;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .4s ease, border-color .4s ease;user-select:none; } .deck-nav:hover{background:rgba(246,241,231,.10);border-color:rgba(246,241,231,.6)} .deck-nav.prev{left:-34px} .deck-nav.next{right:-34px} .deck-top{ position:fixed;top:30px;left:0;right:0;z-index:1001; display:flex;align-items:center;justify-content:space-between; padding:0 48px;pointer-events:none; } .deck-title{ font-size:12px;font-weight:300;letter-spacing:var(--track-m);text-transform:uppercase; color:rgba(246,241,231,.7); } .deck-close{ pointer-events:auto; font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.26em;text-transform:uppercase; color:var(--linen);background:transparent;border:1px solid rgba(246,241,231,.28); padding:14px 22px;cursor:pointer; transition:background .4s ease, color .4s ease, border-color .4s ease; } .deck-close:hover{background:var(--linen);color:var(--char);border-color:var(--linen)} /* bouton « plein écran » : bascule la visionneuse en plein écran navigateur. Habillage de .deck-close, bordure plus franche pour qu'il se voie tout de suite. Desktop uniquement : sans clavier ni barres à masquer, il n'a pas de sens sur mobile. */ .deck-full{margin-left:auto;margin-right:12px;border-color:rgba(246,241,231,.6)} @media(max-width:900px){ .deck-full{display:none} } /* en plein écran, la diapo reprend la place laissée par les barres du navigateur */ .deck:fullscreen .deck-stage{width:96vw;height:92vh} .deck:-webkit-full-screen .deck-stage{width:96vw;height:92vh} /* bouton « pivoter » (mobile) : affiché seulement sur petits écrans */ .deck-rotate{ pointer-events:auto;display:none;margin-left:auto;margin-right:12px; width:46px;height:46px;align-items:center;justify-content:center; border:1px solid rgba(246,241,231,.28);background:transparent;color:var(--linen); font-size:22px;line-height:1;cursor:pointer; transition:background .4s ease, color .4s ease, border-color .4s ease; } .deck-rotate:hover{background:var(--linen);color:var(--char);border-color:var(--linen)} @media(max-width:900px){ .deck-rotate{display:inline-flex} } /* visuel pivoté à 90° : remplit l'écran en paysage quand on tourne le téléphone */ .deck.rotated .deck-img{ position:fixed;top:50%;left:50%;z-index:1000; width:100vh;height:100vw;max-width:none;max-height:none; transform:translate(-50%,-50%) rotate(90deg); } .deck-counter{ position:fixed;bottom:34px;left:0;right:0;text-align:center;z-index:1001; font-size:13px;font-weight:300;letter-spacing:.26em; color:rgba(246,241,231,.65);pointer-events:none; } .deck-counter b{font-weight:400;color:var(--linen)} /* -------------------------------------------------------------------------- 13b. BOUCLIER D'ÉCRAN — voile noir quand la page perd le focus / la visibilité -------------------------------------------------------------------------- */ .capture-guard{ position:fixed;inset:0;z-index:5000;background:#0b0a08; display:none;align-items:center;justify-content:center;text-align:center; } .capture-guard.on{display:flex} .capture-guard .cg-mark{ font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-soft,#CDB88C); } .capture-guard p{ font-family:var(--serif);font-size:1.4rem;line-height:1.5;color:rgba(246,241,231,.8);margin-top:1rem; } /* -------------------------------------------------------------------------- 14. MOUVEMENT — révélation à l'entrée -------------------------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(22px);animation:rise var(--dur) var(--ease) forwards} .d1{animation-delay:.1s}.d2{animation-delay:.28s}.d3{animation-delay:.46s} .d4{animation-delay:.64s}.d5{animation-delay:.85s}.d6{animation-delay:1.05s} @keyframes rise{to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .reveal, .media-card{animation:none;opacity:1;transform:none} *, *::before, *::after{transition-duration:.01ms !important;animation-duration:.01ms !important} } /* -------------------------------------------------------------------------- 15. RESPONSIVE -------------------------------------------------------------------------- */ @media(max-width:1100px){ .card-grid{grid-template-columns:repeat(2,1fr)} .plate-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:900px){ .topbar{padding:24px;flex-wrap:wrap;gap:1rem} .btn-espace{padding:12px 18px;white-space:nowrap} .section-label span{white-space:normal;line-height:1.7} .intro{flex-direction:column;padding:56px 0 40px} .intro h1{font-size:clamp(2.1rem,9.5vw,2.875rem)} .intro-left{max-width:100%} .intro-right{text-align:left} .screen{grid-template-columns:1fr;gap:1.2rem;padding:2.2rem 0} .screen p{max-width:none} .doc{grid-template-columns:56px 1fr auto;gap:1rem;padding:1.4rem 0} .doc .n{font-size:1.5rem} .plate-grid{grid-template-columns:repeat(2,1fr)} .site-header{padding:1.1rem 1.3rem;flex-wrap:wrap;row-gap:1rem} .site-header.is-sticky{position:static;backdrop-filter:none} .btn{letter-spacing:.22em;padding:1rem 1.2rem;white-space:normal;line-height:1.7} .site-header nav{gap:1.1rem 1.4rem;flex-wrap:wrap;width:100%;justify-content:flex-start} .site-header nav a{padding:.4rem 0} .site-header nav a.member{padding:.7rem 1.1rem;font-size:.58rem;margin-left:auto} .section{padding:3rem 1.4rem} .wrap{padding:0 1.4rem} .closing{padding:3rem 1.4rem 3.5rem} .closing .cta{width:100%} .closing .cta .btn{flex:1 1 100%;padding:1.15rem 1.4rem} .split{grid-template-columns:1fr;padding:3rem 1.4rem} .prose{padding:3rem 1.4rem} .tgrid{grid-template-columns:1fr} .steps{grid-template-columns:1fr;gap:1.8rem} .step{display:flex;gap:1rem;text-align:left;align-items:flex-start} .step .n{font-size:2rem} .step .bar{display:none} .site-footer{flex-direction:column;gap:.6rem;text-align:center} .site-footer .mid{display:none} .frame{inset:12px} } @media(max-width:640px){ .deck-nav.prev{left:4px} .deck-nav.next{right:4px} .deck-nav{width:48px;height:48px;font-size:26px} .deck-top{padding:0 18px;top:18px} .deck-title{display:none} /* place aux actions sur petit écran */ .deck-close{padding:11px 15px;font-size:11px;letter-spacing:.16em} .deck-rotate{width:42px;height:42px;font-size:20px;margin-right:8px} /* en-tête membre : empilé et compact (le lockup + logo ne chevauchent plus le bouton) */ .topbar{flex-direction:column;align-items:flex-start;gap:.7rem;padding:18px 20px} .topbar > div{flex-wrap:wrap;gap:.6rem;width:100%} .topbar .eyebrow{display:none} /* « Bonjour X » masqué sur téléphone */ .topbar .btn-espace{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 1rem;font-size:.56rem;letter-spacing:.14em} } @media(max-width:680px){ .card-grid{grid-template-columns:1fr} /* cartes plein écran : hauteur mini pour que le numéro ne chevauche pas un titre long */ .media-card{aspect-ratio:auto;min-height:300px} }