/* ============================================================ ARTISTIC — Refonte graphique Éditorial · premium · studio musical ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&display=swap'); :root{ /* warm dark editorial base */ --ink: oklch(0.165 0.014 55); --ink-2: oklch(0.205 0.016 55); --ink-3: oklch(0.255 0.016 55); --paper: oklch(0.955 0.014 90); --paper-2: oklch(0.90 0.013 88); --dim: oklch(0.70 0.012 85); --line: oklch(0.34 0.012 60); /* vivid accents — shared L/C, hue varies */ --coral: oklch(0.745 0.175 38); --coral-hi: oklch(0.80 0.155 45); --blue: oklch(0.745 0.135 245); --lime: oklch(0.86 0.16 120); --maxw: 1320px; --gut: clamp(20px, 5vw, 72px); --serif: 'Playfair Display', Georgia, serif; --sans: 'Roboto', system-ui, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font-family:inherit;cursor:pointer} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} /* ---------- typography helpers ---------- */ .eyebrow{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--coral-hi); display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:""; width:32px;height:1px;background:var(--coral); display:inline-block; } .eyebrow.center::before{display:none} /* ---------- base heading rules — respect Design font selection ---------- */ h1,h2,h3,h4{ font-family:var(--font-title,var(--font-title,var(--serif))); font-weight:600; line-height:1.05; letter-spacing:-.015em; text-wrap:balance; } h1{font-size:clamp(2.2rem,5vw,4rem);margin:.2em 0 .5em} h2{font-size:clamp(1.6rem,3.5vw,2.8rem);margin:.25em 0 .5em} h3{font-size:clamp(1.2rem,2.5vw,1.9rem);margin:.3em 0 .4em} h4{font-size:clamp(1rem,1.8vw,1.4rem);margin:.3em 0 .4em} [contenteditable] p{margin:.4em 0} [contenteditable] pre{ font-family:var(--font-body,var(--sans));font-size:.82rem; white-space:normal;background:none;margin:.4em 0; color:var(--paper-2); } .display{ font-family:var(--font-title,var(--font-title,var(--serif))); font-weight:600; line-height:.98; letter-spacing:-.015em; text-wrap:balance; overflow-wrap:break-word; /* un mot plus large que l'écran passe à la ligne au lieu d'être coupé (mobile) */ } /* Filet de sécurité anti-coupure : aucun titre ne doit déborder horizontalement (ex. .hero{overflow:hidden} coupait un gros titre sur mobile). */ #blocks h1,#blocks h2,#blocks h3{overflow-wrap:break-word} .display em{font-style:italic;font-weight:500} h2.section-title{ font-family:var(--font-title,var(--font-title,var(--serif))); font-weight:600; font-size:clamp(2.3rem,5vw,4.2rem); line-height:1.0; letter-spacing:-.018em; margin:0; text-wrap:balance; } h2.section-title em{font-style:italic} .lead{ color:var(--paper-2); font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.55; } /* Largeur gouvernée par le contrôle « Colonnes » : dans un bloc .section, le texte (lead / corps) remplit la largeur de la section choisie au lieu d'être plafonné par un max-width interne. (Hero/cover full-bleed =
sans classe .section → non concernés, ils gardent leur mesure de lecture.) */ .block-wrapper .section .lead, .block-wrapper .section [data-c="lead"], .block-wrapper .section [data-c="body_html"]{ max-width:none !important; } /* ---------- placeholders ---------- */ .ph{ position:relative; background: repeating-linear-gradient(135deg, var(--ink-2) 0, var(--ink-2) 13px, var(--ink-3) 13px, var(--ink-3) 26px); overflow:hidden; border-radius:2px; } .ph-tag{ position:absolute; left:14px;bottom:14px; font-family:var(--sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); background:color-mix(in oklab, var(--ink) 78%, transparent); border:1px solid var(--line); padding:6px 10px; border-radius:100px; backdrop-filter:blur(4px); } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.01em; padding:.95em 1.6em; border-radius:100px; border:1px solid transparent; transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s; white-space:nowrap; } .btn .arr{transition:transform .35s var(--ease)} .btn:hover .arr{transform:translateX(4px)} .btn-coral{background:var(--coral);color:var(--ink)} .btn-coral:hover{background:var(--coral-hi);transform:translateY(-2px)} .btn-ghost{border-color:var(--line);color:var(--paper)} .btn-ghost:hover{border-color:var(--paper);background:color-mix(in oklab,var(--paper) 8%,transparent)} .btn-dark{background:var(--ink);color:var(--paper)} .btn-dark:hover{transform:translateY(-2px)} /* ============================================================ NAV ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; gap:24px; padding:18px var(--gut); transition:background .4s var(--ease), border-color .4s, padding .4s; border-bottom:1px solid transparent; } .nav.scrolled{ background:color-mix(in oklab,var(--ink) 86%, transparent); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line); padding-top:13px;padding-bottom:13px; } /* Menu secondaire (barre au-dessus du menu principal) — barre utilitaire discrète, liens simples sans sous-menu. Masquée par défaut (display:none) tant qu'aucun lien n'est configuré ; window.renderTopMenu() bascule body.has-topmenu. */ .topmenu{ display:none; position:fixed;top:0;left:0;right:0;z-index:101; height:var(--topmenu-h,34px);align-items:center;justify-content:flex-end; padding:0 var(--gut); background:oklch(0.13 0.01 55); font-family:sans-serif; } body.has-topmenu .topmenu{display:flex} body.has-topmenu .nav{top:var(--topmenu-h,34px)} body.has-topmenu .hero-inner{padding-top:calc(140px + var(--topmenu-h,34px))} .topmenu-links{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0} /* Chaque
  • centré verticalement sur lui-même : sans ça, un lien avec une icône plus grande (icon_size individuel, cf. renderTopMenu) agrandit son et le pousse en haut de son
  • (empilement inline classique, pas de centrage réel) → décalage visuel vs les liens texte seuls. `align-items:center` sur .topmenu-links centre chaque
  • DANS LA BARRE, mais pas son contenu DANS le
  • lui-même si les
  • ont des hauteurs différentes — d'où ce 2ᵉ niveau de centrage. */ .topmenu-links>li{display:flex;align-items:center} .topmenu-links a{color:inherit;font-size:.78rem;text-decoration:none;opacity:.8;transition:opacity .2s;display:inline-flex;align-items:center} .topmenu-links a:hover{opacity:1} .topmenu-links a.icon-only{gap:0} .topmenu-ic{margin-right:6px;line-height:1} .topmenu-links a.icon-only .topmenu-ic{margin-right:0;font-size:1.05em} .mobile-top-link .topmenu-ic{margin-right:8px} /* Séparateur vertical entre liens de la barre secondaire (nav.top_links, entrée {sep:true}) — currentColor : suit la couleur du texte (top_color), pas cliquable (aria-hidden). */ .topmenu-sep{width:1px;height:1.1em;background:currentColor;opacity:.3;display:inline-block;flex-shrink:0} @media(max-width:768px){ /* La barre secondaire RESTE VISIBLE sur téléphone (demande explicite). Elle ne peut pas s'empiler sur plusieurs lignes — ça mangerait le haut de l'écran et décalerait tout le contenu — donc elle DÉFILE horizontalement : une seule ligne, glissement au doigt, et la barre de défilement est masquée (elle traverserait les liens sur 34px de haut). */ body.has-topmenu .topmenu{ display:flex;justify-content:flex-start; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; } body.has-topmenu .topmenu::-webkit-scrollbar{display:none} .topmenu-links{flex-wrap:nowrap;white-space:nowrap;gap:16px} .topmenu-links>li{flex:0 0 auto} /* Les liens sont désormais visibles dans la barre : on ne les répète plus en fin de menu hamburger (renderNavLinks les y ajoute toujours pour les cas où la barre est masquée). */ .art-mobile-links .mobile-top-link,.art-mobile-links .mobile-sep{display:none} } .brand{ font-family:var(--font-logo, var(--font-title,var(--serif))); font-weight:600; font-size:1.65rem; letter-spacing:.02em; display:flex;align-items:center;gap:.5em; } .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--coral);display:inline-block} .nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .nav-links > li{position:relative} .nav-links > li > a{ display:flex;align-items:center;gap:.4em; padding:10px 14px; font-size:.92rem;font-weight:500; font-family:var(--font-nav, var(--sans)); color:var(--paper-2); border-radius:100px; transition:color .25s, background .25s; } .nav-links > li > a:hover{color:var(--paper)} .nav-links > li.has-menu > a::after{ content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px);transition:transform .25s; } .nav-links > li.has-menu:hover > a::after{transform:rotate(225deg) translateY(-1px)} .dropdown{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px); min-width:230px; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:8px; overflow:hidden; /* clippe le fond des liens internes aux coins arrondis (sinon ils débordent) */ opacity:0;visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; box-shadow:0 24px 60px -20px rgba(0,0,0,.7); } /* Pont invisible anti-survol : comble l'écart link↔dropdown. Posé sur le
  • (PAS dans le dropdown, qui est en overflow:hidden) et seulement au survol → ne bloque rien le reste du temps. */ .nav-links > li.has-menu:hover::before{content:"";position:absolute;left:0;right:0;top:100%;height:18px;z-index:1} .nav-links > li.has-menu:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} /* Aperçu en édition : épingle les sous-menus ouverts (classe posée par le panneau Nav). On ne force QUE opacity/visibility — pas le transform — pour ne pas écraser la position gauche/droite (dropdown_align). Le léger décalage translateY(8px) de l'état non-survolé est sans conséquence pour l'aperçu. */ #nav.nav-show-submenu .nav-links > li.has-menu .dropdown{opacity:1!important;visibility:visible!important} .dropdown a{ display:block;padding:9px 13px; font-size:.88rem;color:var(--paper-2); transition:background .2s,color .2s; } /* Survol = simple bandeau pleine largeur (pas de rayon) ; les coins suivent ceux du panneau via overflow:hidden du .dropdown. */ .dropdown a:hover{background:var(--ink-3);color:var(--coral-hi)} /* ── 3ᵉ NIVEAU : sous-sous-menu en flyout latéral ────────────────────────── Le .dropdown parent est en overflow:hidden (clip des coins) ; on le passe en overflow:visible UNIQUEMENT s'il contient un sous-item (sinon le flyout serait coupé). */ .dropdown:has(.dropdown-sub){overflow:visible} .dropdown:has(.dropdown-sub) > a,.dropdown:has(.dropdown-sub) .dropdown-sub-link{border-radius:8px} .dropdown-sub{position:relative} .dropdown-sub > .dropdown-sub-link{display:flex;align-items:center;justify-content:space-between;gap:10px} .dropdown-sub-caret{opacity:.5;font-size:1.15em;line-height:1} .dropdown-sub:hover > .dropdown-sub-link{background:var(--ink-3);color:var(--coral-hi)} /* le flyout est lui-même un .dropdown : on REPLACE sa position (centrée) par une position latérale */ .dropdown-flyout{left:100%;top:-9px;right:auto;transform:translateX(10px);margin-left:4px} /* pont anti-survol entre le sous-item et son flyout */ .dropdown-sub:hover::after{content:"";position:absolute;left:100%;top:0;width:16px;height:100%} /* le flyout reste CACHÉ quand seul le menu parent est ouvert ; il n'apparaît qu'au survol du sous-item */ .nav-links > li.has-menu:hover .dropdown-flyout{opacity:0;visibility:hidden;transform:translateX(10px)} .nav-links > li.has-menu .dropdown-sub:hover > .dropdown-flyout, #nav.nav-show-submenu .dropdown-sub:hover > .dropdown-flyout{opacity:1!important;visibility:visible!important;transform:translateX(0)!important} /* mobile : 2ᵉ niveau de sous-menu indenté */ .art-mobile-links .sub-2{margin-left:16px;border-left:1px solid rgba(255,255,255,.12);padding-left:8px} .nav-cta{display:flex;align-items:center;gap:14px} .nav-phone{font-size:.88rem;color:var(--dim);font-variant-numeric:tabular-nums} .nav-phone:hover{color:var(--paper)} .burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:transparent;flex-direction:column;gap:5px;align-items:center;justify-content:center} .burger span{width:18px;height:1.6px;background:var(--paper);transition:transform .3s,opacity .3s} /* ============================================================ NAV STYLES — variantes ============================================================ */ /* ME100B — logo centré */ .nav-inner-100b{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; gap:16px; } .nav-brand-center{justify-self:center} .nav-col-left{display:flex;align-items:center} .nav-col-right{display:flex;align-items:center;gap:12px;justify-content:flex-end} /* Tous les boutons icônes nav */ .nav-icon-btn{ background:transparent;border:none;color:var(--paper-2); cursor:pointer;padding:8px;border-radius:100px; display:flex;align-items:center;justify-content:center; transition:color .2s,background .2s; flex-shrink:0; } .nav-icon-btn:hover{color:var(--paper);background:rgba(255,255,255,.07)} /* Rétrocompat */ .nav-search-btn,.nav-account-btn{background:transparent;border:none;color:var(--paper-2);cursor:pointer;padding:8px;border-radius:100px;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s} .nav-search-btn:hover,.nav-account-btn:hover{color:var(--paper);background:rgba(255,255,255,.07)} /* CTA button variants */ .btn-outline-coral{ background:transparent; border:1.5px solid var(--coral); color:var(--coral); } .btn-outline-coral:hover{background:var(--coral);color:#fff} .btn-ghost-coral{ background:transparent;border:none; color:var(--paper-2);font-weight:500; } .btn-ghost-coral:hover{color:var(--paper)} /* ME202N — liens répartis des deux côtés */ .nav-inner-202n{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; gap:16px; } .nav-inner-202n .nav-brand-center{justify-self:center} .nav-inner-202n .nav-col-left{display:flex;align-items:center;justify-content:flex-end} .nav-inner-202n .nav-col-right{display:flex;align-items:center;justify-content:flex-start;gap:8px} @media(max-width:768px){ .nav-inner-100b,.nav-inner-202n{grid-template-columns:1fr auto} .nav-col-left{display:none} .nav-inner-202n .nav-col-right #art-nav-links-right{display:none} .nav-col-right .nav-icon-btn,.nav-col-right .nav-search-btn,.nav-col-right .nav-account-btn{display:none} /* Le bouton CTA RESTE visible en mobile (demande explicite) — juste un peu compacté pour cohabiter avec le burger sans déborder. */ .nav-col-right #art-nav-cta{display:inline-flex;font-size:.82rem;padding-left:.9em;padding-right:.9em} .nav-col-right .burger{display:flex} /* ⚠️ LE BURGER NE DOIT JAMAIS ÊTRE POUSSÉ HORS DE L'ÉCRAN. Sur un téléphone, logo + CTA + burger ne tiennent pas toujours : sans ces gardes, la barre débordait et le burger sortait à droite — le menu devenait tout simplement inatteignable (et avec lui les liens du menu secondaire, qui y sont repris). Le burger ne rétrécit pas ; tout le reste rétrécit. */ .nav-inner-100b,.nav-inner-202n,.nav-col-right,.brand{min-width:0} .nav-col-right .burger{flex-shrink:0} .nav-col-right #art-nav-cta{min-width:0;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Logo image : sur mobile la hauteur devient un PLAFOND et la largeur est bornée — l'image se réduit proportionnellement au lieu de déborder (--logo-max-h vient du réglage de hauteur). */ .nav .brand-has-img img{height:auto!important;max-height:var(--logo-max-h,40px);width:auto!important;max-width:min(46vw,240px)!important} } /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-block:var(--section-pt,0) var(--section-pb,0)} .hero-slides{position:absolute;inset:0} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--slide-dur,1.1s) var(--ease)} .hero-slide.is-active{opacity:1} .hero-slides[data-effect="slide"] .hero-slide{opacity:1;transform:translateX(100%);transition:transform var(--slide-dur,0.8s) var(--ease)} .hero-slides[data-effect="slide"] .hero-slide.is-active{transform:translateX(0)} .hero-slides[data-effect="slide"] .hero-slide.is-prev{transform:translateX(-100%)} .hero-slides[data-effect="zoom"] .hero-slide{opacity:0;transform:scale(1.06);transition:opacity var(--slide-dur,1.1s) var(--ease),transform var(--slide-dur,1.1s) var(--ease)} .hero-slides[data-effect="zoom"] .hero-slide.is-active{opacity:1;transform:scale(1)} .hero-slide .ph{position:absolute;inset:0;border-radius:0} .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top} .hero-tint{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none} .hero-slide .ph-tag{left:auto;right:18px;bottom:118px} .hero-overlay{ position:absolute;inset:0; background: radial-gradient(120% 90% at 80% 0%, color-mix(in oklab,var(--coral) 26%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in oklab,var(--ink) 55%,transparent) 0%, transparent 28%), linear-gradient(0deg, var(--ink) 6%, color-mix(in oklab,var(--ink) 30%,transparent) 55%, transparent 100%); } .hero-overlay{pointer-events:none}/* voile décoratif : ne bloque jamais le survol (utile pour le fond « obturateur ») */ .hero-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(48px,7vw,90px);padding-top:140px} /* Hero à fond « Révélation obturateur » : le survol de la zone doit atteindre le .sb-shutter (sous le texte) pour déclencher la révélation → on rend les conteneurs de texte transparents au pointeur, et on réactive le pointeur seulement sur les éléments interactifs (texte éditable, liens, boutons). */ .hero:has(>.sb-shutter) .hero-inner,.hero:has(>.sb-shutter) .hero-meta{pointer-events:none} .hero:has(>.sb-shutter) .hero-inner :is([data-c],a,button,.cta-btn),.hero:has(>.sb-shutter) .hero-meta :is(a,button){pointer-events:auto} /* Idem pour le fond « révélation fluide » : le survol du texte doit atteindre le blob. */ .hero:has(>.sb-blob) .hero-inner,.hero:has(>.sb-blob) .hero-meta{pointer-events:none} .hero:has(>.sb-blob) .hero-inner :is([data-c],a,button,.cta-btn),.hero:has(>.sb-blob) .hero-meta :is(a,button){pointer-events:auto} .hero h1{ font-size:clamp(2.8rem,7.4vw,7.4rem); line-height:1.06; margin:.3em 0 .85em; max-width:16ch; } .hero .lead{max-width:50ch} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero-meta{ position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:0; display:flex;justify-content:space-between;align-items:center;gap:20px; padding:18px 0; border-top:1px solid var(--line); font-size:.82rem;color:var(--dim); letter-spacing:.04em; } .hero-meta strong{color:var(--paper);font-weight:500} .hero-ctrl{display:flex;align-items:center;gap:10px} .hero-dots{display:flex;gap:7px} .hero-dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--ink-3);transition:background .3s,width .3s;padding:0} .hero-dots button.on{background:var(--coral);width:26px;border-radius:100px} .hero-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--paper);display:grid;place-items:center;transition:background .25s,border-color .25s} .hero-arrow:hover{border-color:var(--paper);background:color-mix(in oklab,var(--paper) 10%,transparent)} /* ============================================================ MARQUEE ============================================================ */ .marquee{ border-block:1px solid var(--line); background:var(--ink-2); padding:22px 0; overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{display:inline-flex;gap:0;animation-name:scroll;animation-duration:var(--mq-speed,38s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--mq-dir,normal)} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-track span{ font-family:var(--mq-font,var(--font-title,var(--serif))); font-style:var(--mq-italic,italic); font-size:var(--mq-size,clamp(1.6rem,3vw,2.6rem)); color:var(--mq-color,var(--paper-2)); padding:0 .55em; display:inline-flex;align-items:center;gap:.55em; } .mq-sep{font-style:normal;font-size:.6em} @keyframes scroll{to{transform:translateX(var(--mq-move,-16.666%))}} /* ============================================================ SECTION SHELL ============================================================ */ .section{padding-block:clamp(80px,11vw,150px)} /* Section composable (sec-builder) : les modules s'alignent en HAUT entre colonnes. L'espacement vertical vient du gap de colonne (+ marge par module), pas des marges par défaut des titres/paragraphes — sinon un titre (marge auto) et un texte ne s'alignent pas. */ .sec-builder .sb-el>*:not(.cr-divider-wrap){margin-block:0 !important} .sec-builder img{max-width:100%;height:auto} /* Modules Toggle / Accordion (sec-builder) —
    natif (accordéon exclusif via name=). */ .sb-toggle,.sb-acc-item{border:var(--tg-bd,1px solid var(--line,rgba(0,0,0,.14)));border-radius:var(--tg-radius,10px);margin-bottom:10px;overflow:hidden} .sb-accordion{display:flex;flex-direction:column} .sb-tg-sum{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:var(--tg-pad,14px 18px);cursor:pointer;font-weight:600;list-style:none;user-select:none;background:var(--tg-bg,transparent)} .sb-toggle[open]>.sb-tg-sum,.sb-acc-item[open]>.sb-tg-sum{background:var(--tg-bg-open,var(--tg-bg,transparent))} .sb-tg-sum::-webkit-details-marker{display:none} .sb-tg-title{flex:1;min-width:0} .sb-tg-ic{flex:0 0 auto;font-size:var(--tg-ic-size,1.15em);opacity:.7;line-height:1;color:var(--tg-ic-color,inherit)} .sb-tg-body{padding:2px 18px 16px;background:var(--tg-body-bg,transparent)} .sb-toggle:not([open]) .sb-ic-o,.sb-acc-item:not([open]) .sb-ic-o{display:none} .sb-toggle[open] .sb-ic-c,.sb-acc-item[open] .sb-ic-c{display:none} /* Petit effet d'ouverture/fermeture (hauteur + fondu). Chrome/éditeur : animé via ::details-content + interpolate-size ; navigateurs sans support : ouverture instantanée (dégradation propre). */ @supports (interpolate-size: allow-keywords){ :root{ interpolate-size: allow-keywords; } } .sb-toggle::details-content,.sb-acc-item::details-content{ height:0;overflow:clip;opacity:0; transition:height .3s ease,opacity .25s ease,content-visibility .3s; transition-behavior:allow-discrete; } .sb-toggle[open]::details-content,.sb-acc-item[open]::details-content{height:auto;opacity:1} .sb-tg-ic{transition:transform .25s ease,opacity .2s ease} .sb-toggle[open] .sb-tg-ic,.sb-acc-item[open] .sb-tg-ic{transform:rotate(180deg)} /* Tabs (module) — PUR CSS via radios :checked (pas de JS, marche publié). Jusqu'à 8 onglets. */ .sb-tabs{position:relative} .sb-tab-radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .sb-tab-nav{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line,rgba(0,0,0,.14))} .sb-tab-label{padding:10px 16px;cursor:pointer;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;opacity:.6;transition:opacity .15s,border-color .15s} .sb-tab-label:hover{opacity:.85} /* Onglets stylés en boutons (el.tab_btn via l'éditeur de boutons) : pas de soulignement, espacés ; actif = pleine opacité (règle :checked existante). */ .sb-tabs-btn .sb-tab-nav{border-bottom:none;gap:8px;flex-wrap:wrap} .sb-tabs-btn .sb-tab-label{margin-bottom:0;border-bottom:none!important;opacity:.55} .sb-tabs-btn .sb-tab-label:hover{opacity:.8} .sb-tab-panel{display:none;padding:16px 2px} .sb-tab-panels>.sb-tab-panel:first-child{display:block} /* repli sans radio coché */ .sb-tab-radio:checked~.sb-tab-panels>.sb-tab-panel{display:none} .sb-tab-radio:nth-of-type(1):checked~.sb-tab-nav>.sb-tab-label:nth-child(1),.sb-tab-radio:nth-of-type(2):checked~.sb-tab-nav>.sb-tab-label:nth-child(2),.sb-tab-radio:nth-of-type(3):checked~.sb-tab-nav>.sb-tab-label:nth-child(3),.sb-tab-radio:nth-of-type(4):checked~.sb-tab-nav>.sb-tab-label:nth-child(4),.sb-tab-radio:nth-of-type(5):checked~.sb-tab-nav>.sb-tab-label:nth-child(5),.sb-tab-radio:nth-of-type(6):checked~.sb-tab-nav>.sb-tab-label:nth-child(6),.sb-tab-radio:nth-of-type(7):checked~.sb-tab-nav>.sb-tab-label:nth-child(7),.sb-tab-radio:nth-of-type(8):checked~.sb-tab-nav>.sb-tab-label:nth-child(8){opacity:1;border-bottom-color:var(--coral,#e8613a)} /* Pricing Tables (module) */ .sb-price-card{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:26px 22px;text-align:center} .sb-price-card.is-featured{border-color:var(--coral,#e8613a);box-shadow:0 10px 34px rgba(0,0,0,.1)} .sb-price-amt{font-weight:800;margin:.2em 0 .1em;line-height:1} .sb-price-cur{font-size:1.2em;vertical-align:super;opacity:.8} .sb-price-val{font-size:2.6em} .sb-price-per{font-size:.9em;opacity:.6} .sb-price-feats{list-style:none;padding:0;margin:1.1em 0;text-align:left} /* Bar Counters (module) */ .sb-bar{margin-bottom:14px} .sb-bar-head{display:flex;justify-content:space-between;margin-bottom:5px;font-size:.9em} .sb-bar-pct{opacity:.7} .sb-bar-track{height:10px;border-radius:6px;background:rgba(0,0,0,.1);overflow:hidden} .sb-bar-fill{height:100%;border-radius:6px;width:0;transition:width 1.2s var(--ease,ease)} /* Circle Counter (module) */ .sb-circle-fill{transition:stroke-dashoffset 1.2s var(--ease,ease)} /* Social Media Follow (module) */ .sb-social-ic{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:#555;color:#fff;text-decoration:none;font-size:1.2em;line-height:1;transition:filter .15s} .sb-social-ic:hover{filter:brightness(1.15)} .sb-social-circle{border-radius:50%}.sb-social-square{border-radius:0}.sb-social-rounded{border-radius:9px} /* Fond vidéo de rangée — calque derrière les colonnes */ .sb-row-bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none} .sb-row-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sb-row-bg iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;border:0;pointer-events:none} .sb-row-bg-ov{position:absolute;inset:0} .sb-row:has(>.sb-row-bg)>.sb-col{position:relative;z-index:1} /* Image (module) — voile + icône au survol */ .sb-img-wrap{text-decoration:none;color:inherit} .sb-img-wrap .sb-img-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none} .sb-img-wrap:hover .sb-img-ov{opacity:var(--ov-op,1)} /* Anti-débordement : dans un module flex centré (align-items:center, ex. CTA), un bloc enfant grossit à sa largeur max-content → un long mot/titre sortait de la colonne. On cape tout texte éditable de module à la largeur dispo et on coupe les mots trop longs (éditeur ET publié). */ .sec-builder [data-c]{max-width:100%;overflow-wrap:break-word;word-break:break-word} .sec-builder .sb-cta>*,.sec-builder .sb-blurb-text>*{max-width:100%} /* Apparence commune des modules (.sb-el) — survol (fond/bordure/effet) */ .sb-el.hv-bg,.sb-el.hv-bd,.sb-el.hv-lift,.sb-el.hv-zoom,.sb-el.hv-radius{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease,border-radius .25s ease} .sb-el.hv-bg:hover{background:var(--h-bg)!important} .sb-el.hv-bd:hover{border-color:var(--h-bd)!important} .sb-el.hv-radius:hover{border-radius:var(--h-radius)!important} .sb-el.hv-lift:hover{transform:translateY(-5px)} .sb-el.hv-zoom:hover{transform:scale(1.03)} /* Animations d'entrée des modules (.sb-el[data-anim]) — armées par window.initAnimations (publié) */ .sb-el[data-anim][data-armed]{opacity:0} .sb-el[data-anim].sb-anim-in{opacity:1} .sb-el[data-anim="fade"].sb-anim-in{animation:sbFade var(--anim-dur,700ms) var(--anim-delay,0ms) both} .sb-el[data-anim="slide-up"].sb-anim-in{animation:sbSlideUp var(--anim-dur,700ms) var(--anim-delay,0ms) both} .sb-el[data-anim="slide-down"].sb-anim-in{animation:sbSlideDown var(--anim-dur,700ms) var(--anim-delay,0ms) both} .sb-el[data-anim="slide-left"].sb-anim-in{animation:sbSlideLeft var(--anim-dur,700ms) var(--anim-delay,0ms) both} .sb-el[data-anim="slide-right"].sb-anim-in{animation:sbSlideRight var(--anim-dur,700ms) var(--anim-delay,0ms) both} .sb-el[data-anim="zoom"].sb-anim-in{animation:sbZoom var(--anim-dur,700ms) var(--anim-delay,0ms) both} .sb-el[data-anim="bounce"].sb-anim-in{animation:sbBounce var(--anim-dur,700ms) var(--anim-delay,0ms) both} .sb-el[data-anim="flip"].sb-anim-in{animation:sbFlip var(--anim-dur,700ms) var(--anim-delay,0ms) both} @keyframes sbFade{from{opacity:0}to{opacity:1}} @keyframes sbSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}} @keyframes sbSlideDown{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}} @keyframes sbSlideLeft{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} @keyframes sbSlideRight{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}} @keyframes sbZoom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}} @keyframes sbBounce{0%{opacity:0;transform:translateY(40px)}60%{opacity:1;transform:translateY(-12px)}80%{transform:translateY(6px)}100%{transform:translateY(0)}} @keyframes sbFlip{from{opacity:0;transform:perspective(800px) rotateX(-90deg)}to{opacity:1;transform:none}} /* Avant/Après (module) — pur CSS, divider piloté par --pos */ .sb-ba{position:relative;overflow:hidden;border-radius:inherit;user-select:none} .sb-ba-handle{position:absolute;top:0;bottom:0;left:calc(var(--pos,50)*1%);width:2px;background:var(--ba-color,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;transform:translateX(-1px);z-index:2} .sb-ba-handle::after{content:'';position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:50%;background:var(--ba-color,#fff);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:0} .sb-ba-arr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;color:var(--ba-arrow,#333);font-size:.72rem;line-height:1;letter-spacing:1px;pointer-events:none} .sb-ba-arr::before{content:'\25C0\25B6'} .sb-ba-lbl{position:absolute;top:12px;z-index:2;background:rgba(0,0,0,.55);color:#fff;padding:3px 9px;border-radius:4px;font-size:.78rem;pointer-events:none} .sb-ba-lbl-a{left:12px}.sb-ba-lbl-b{right:12px} .sb-ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;z-index:3} /* Avant/Après vertical */ .sb-ba[data-orient="vertical"] .sb-ba-handle{left:0;right:0;top:calc(var(--pos,50)*1%);bottom:auto;width:auto;height:2px;transform:translateY(-1px)} .sb-ba[data-orient="vertical"] .sb-ba-arr::before{content:'\25B2\25BC'} .sb-ba[data-orient="vertical"] .sb-ba-range{writing-mode:vertical-lr;cursor:ns-resize} /* Galerie — overlay au survol (couleurs surchargées en inline si définies) */ .sb-gal-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;opacity:0;transition:opacity .3s ease;pointer-events:none;background:rgba(0,0,0,.4);color:#fff} .sb-gal-cell:hover .sb-gal-ov{opacity:var(--ov-op,1)} /* Vidéo — poster + icône Play */ .sb-video-poster .sb-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.4rem;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.55);transition:transform .2s ease} .sb-video-poster:hover .sb-video-play{transform:translate(-50%,-50%) scale(1.12)} /* Carrousel 3D infini (module carousel3d) — anneau de cartes (cylindre rotateY). Le positionnement des cartes et la rotation sont pilotés en JS (window.initCarousel3d) ; ici uniquement la scène 3D et l'aspect des cartes. Aucun filtre couleur sur les médias (cf. plainte de la réf.). */ .sb-car3d{position:relative;width:100%;overflow:hidden} .sb-car3d-stage{position:absolute;top:0;left:50%;width:0;height:100%;transform-style:preserve-3d;will-change:transform} .sb-car3d-cell{position:absolute;top:50%;left:0;background:#111;box-shadow:0 24px 60px -24px rgba(0,0,0,.65);text-decoration:none;color:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity .2s linear} /* Option « Ombre des cartes » désactivée (el.card_shadow:false) → rendu épuré, sans ombre portée. */ .sb-car3d-noshadow .sb-car3d-cell{box-shadow:none} /* Orbite (module orbit, réf. Framer « Orbit Team Section ») — position des éléments en JS (window.initOrbit) ; ici le survol (halo + label + mise au premier plan). L'orbite se fige pendant le survol d'un élément (géré en JS, data-pause). */ .sb-orbit{position:relative;width:100%} .sb-orbit-stage{will-change:transform} .sb-orbit-item{will-change:transform;text-decoration:none;color:inherit;z-index:1} .sb-orbit-item:hover{z-index:4} .sb-orbit-av{transition:box-shadow .2s ease,transform .2s ease,filter .2s ease} /* Halo au survol : drop-shadow coloré (épouse la forme de la photo) piloté par les variables --orbit-glow-* du bloc. */ .sb-orbit-item:hover .sb-orbit-av{transform:scale(1.12);filter:drop-shadow(0 0 var(--orbit-glow-size,0px) var(--orbit-glow-color,transparent))} .sb-orbit-name{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.8rem;font-weight:500;color:inherit;opacity:0;pointer-events:none;transition:opacity .18s ease} .sb-orbit-item:hover .sb-orbit-name{opacity:1} .sb-orbit-name-curved{color:inherit;opacity:0;pointer-events:none;transition:opacity .18s ease} .sb-orbit-item:hover .sb-orbit-name-curved{opacity:1} /* Timeline (module sec-builder « timeline », réf. Framer « Milestone Timeline »). GÉOMÉTRIE relevée en live : arc de cercle, sommet au CENTRE du conteneur, graduations TOURNÉES radialement. Tout est positionné par window.initTimeline via `transform` sur des points d'ancrage de taille NULLE placés SUR la ligne de l'arc (transform-origin = ce point) → la rotation pivote exactement sur la règle. Les graduations fines (effet chronomètre) sont générées par le JS. Année AU-DESSUS de la graduation, icône + titre EN DESSOUS de la ligne. */ .sb-timeline{user-select:none;-webkit-user-select:none} /* Pas de drag natif (fantôme traîné à l'écran) sur les icônes/images : le glisser doit SCRUBER. */ .sb-timeline img,.sb-tl-icon,.sb-tl-year{-webkit-user-drag:none;user-drag:none} /* Le scrub donne le focus au conteneur (pour les flèches clavier) → pas de contour à la souris, mais on garde l'anneau de focus au CLAVIER (accessibilité). */ .sb-timeline:focus{outline:none} .sb-timeline:focus-visible{outline:2px solid var(--tl-active,#e8613a);outline-offset:2px} .sb-tl-scene{position:absolute;inset:0} .sb-tl-rail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} /* Graduation fine (subdivision) : pivote sur son extrémité BASSE, qui est posée sur la règle. */ .sb-tl-mtick{position:absolute;left:0;top:0;width:1px;background:var(--tl-line);transform-origin:50% 100%;pointer-events:none;opacity:.75} /* Jalon : point d'ancrage de taille nulle, posé sur la règle ; pivote dessus (transform-origin 0 0). */ .sb-tl-item{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0} .sb-tl-anchor{position:absolute;left:0;top:0;width:0;height:0} .sb-tl-year{position:absolute;left:0;bottom:calc(var(--tl-tick-h,34px) + 10px);transform:translateX(-50%);white-space:nowrap;font-weight:700;font-size:var(--tl-year-size-off,.95rem);color:var(--tl-year-off,rgba(128,128,128,.85));transition:color .25s ease,font-size .25s ease,opacity .25s ease} .sb-tl-item.is-active .sb-tl-year{color:var(--tl-year-on,inherit);font-size:var(--tl-year-size,1.7rem)} .sb-tl-tick{position:absolute;left:-.5px;bottom:0;width:1px;height:var(--tl-tick-h,34px);background:var(--tl-line);transition:height .25s ease,width .25s ease,background .25s ease} .sb-tl-item.is-active .sb-tl-tick{width:2px;left:-1px;height:calc(var(--tl-tick-h,34px) * 1.5);background:var(--tl-active,#e8613a)} .sb-tl-icon{position:absolute;left:0;top:18px;transform:translateX(-50%);font-size:var(--tl-icon-size,26px);line-height:1;opacity:.45;transition:opacity .25s ease,transform .25s ease} .sb-tl-item.is-active .sb-tl-icon{opacity:1;transform:translateX(-50%) scale(1.12)} .sb-tl-icon-dot{width:8px;height:8px;border-radius:50%;background:currentColor} .sb-tl-item.is-active .sb-tl-icon-dot{background:var(--tl-active,#e8613a)} .sb-tl-body{position:absolute;left:0;top:calc(28px + var(--tl-icon-size,26px));transform:translateX(-50%);width:var(--tl-body-w,260px);text-align:center;opacity:0;pointer-events:none;transition:opacity .28s ease;user-select:text;-webkit-user-select:text} .sb-tl-item.is-active .sb-tl-body{opacity:1;pointer-events:auto} .sb-tl-title{margin:0 0 .3em;font-size:1.05rem;font-weight:700;line-height:1.25} .sb-tl-text{font-size:.86rem;line-height:1.45;opacity:.85} .sb-tl-link{display:inline-block;margin-top:9px;font-size:.82rem;font-weight:600} /* Révélation « obturateur » (module shutter) — verre dépoli + fenêtre qui s'ouvre au survol. Le positionnement/suivi curseur est en JS (window.initShutterReveal) ; ici la scène + l'obturateur. --sx/--sy (registrés via @property) transitionnent la largeur PUIS la hauteur (feeling mécanique). */ @property --sx{syntax:'';inherits:false;initial-value:0} @property --sy{syntax:'';inherits:false;initial-value:0} .sb-shutter{position:relative;overflow:hidden;background:#0a0a0a;isolation:isolate;cursor:crosshair} .sb-shutter-defs{position:absolute;width:0;height:0;pointer-events:none} /* Verre (dépoli) ET révélation (nette) = deux
    à image de fond STRICTEMENT identiques : inset:0 sur un
    remplit EXACTEMENT le conteneur (contrairement à un qui garde son ratio et déborde → clip-path décalé). Même boîte + même cadrage cover = alignement pixel garanti. L'image de fond est posée en JS (initShutterReveal) depuis data-src. */ .sb-shutter-glass,.sb-shutter-reveal{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;pointer-events:none} .sb-shutter-reveal{clip-path:inset(50% 50%)}/* fermé par défaut ; JS ouvre la fenêtre au survol */ .sb-shutter-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")} /* Overlay de la fenêtre (ombre intérieure + coins) : positionné/dimensionné sur la fenêtre par le JS, au-dessus de la révélation. Ne contient PAS l'image (l'image nette est la couche .sb-shutter-reveal). */ .sb-shutter-win{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .18s ease} .sb-shutter.is-open .sb-shutter-win{opacity:1} /* Coins de viseur (façon appareil photo) aux angles de la fenêtre. */ .sb-shutter-frame{position:absolute;inset:0;pointer-events:none} .sb-shutter-frame>i{position:absolute;width:16px;height:16px;border:2px solid var(--fc,#fff);box-shadow:0 0 6px rgba(0,0,0,.5)} .sb-shutter-frame>i.tl{left:-1px;top:-1px;border-right:0;border-bottom:0} .sb-shutter-frame>i.tr{right:-1px;top:-1px;border-left:0;border-bottom:0} .sb-shutter-frame>i.bl{left:-1px;bottom:-1px;border-right:0;border-top:0} .sb-shutter-frame>i.br{right:-1px;bottom:-1px;border-left:0;border-top:0} /* En FOND de hero (bg_type:shutter) : le .sb-shutter remplit le hero (position absolute inset:0), sous le contenu (texte/boutons du hero, z-index:3). Le survol de la zone déclenche la révélation ; les éléments de texte/boutons du hero captent leur clic (pointer-events par défaut). */ .hero>.sb-shutter{position:absolute;inset:0;width:auto;height:auto;border-radius:0;z-index:0} /* Révélation FLUIDE (blob gooey). Le svg .sb-blob-svg remplit le conteneur ; image A (couverture) visible, image B révélée à travers un de blobs animés (initBlobReveal). Alignement garanti : les deux couvrent la MÊME boîte (viewBox = taille du conteneur, preserveAspectRatio slice). */ .sb-blob{position:relative;overflow:hidden;background:#0a0a0a;isolation:isolate;cursor:crosshair} .sb-blob-svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} .sb-blob-empty{color:inherit} /* En FOND de hero (bg_type:blob) : plein cadre sous le contenu (texte/boutons z-index:3). */ .hero>.sb-blob{position:absolute;inset:0;width:auto;height:auto;border-radius:0;z-index:0} /* FOND « révélation fluide » d'un BLOC : calque AU-DESSUS du fond du bloc mais SOUS le contenu. ⚠️ On ÉLÈVE le contenu en z-index:1 (calque blob en z-index:0), en EXCLUANT la barre d'options (.block-controls) et les calques décoratifs → le fond blob reste sous le contenu SANS déplacer la barre. ⚠️ On N'UTILISE PAS `isolation:isolate` : ça créerait un contexte d'empilement qui CONFINERAIT la barre d'options (elle passerait sous un bloc voisin à découpe/z-index). L'écoute du survol = le .block-wrapper. */ .block-wrapper>.blob-bg-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit} .block-wrapper:has(>.blob-bg-fx)>:not(.blob-bg-fx):not(.block-controls):not(.block-divider):not(.block-border-random):not(.divider-blob-fx){position:relative;z-index:1} .blob-bg-fx .sb-blob-svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} /* Révélation sur DIVISEUR : le SVG (forme couleur B masquée par le blob) remplit l'overlay calé sur le diviseur. */ .divider-blob-fx .sb-blob-svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} .sb-car3d-cell img,.sb-car3d-cell video{width:100%;height:100%;object-fit:cover;display:block} .sb-car3d-empty{color:inherit} /* Slider (module) */ .sb-slider{position:relative;min-height:360px;overflow:hidden;border-radius:inherit} .sb-slides{position:absolute;inset:0} .sb-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s var(--ease,ease);color:#fff;text-align:center} .sb-slide.is-active{opacity:1;z-index:1} .sb-slider[data-effect="slide"] .sb-slide{opacity:1;transform:translateX(100%);transition:transform .6s var(--ease,ease)} .sb-slider[data-effect="slide"] .sb-slide.is-active{transform:translateX(0);z-index:1} .sb-slider[data-effect="slide"] .sb-slide.is-prev{transform:translateX(-100%)} .sb-slide-ov{position:absolute;inset:0} .sb-slide-in{position:relative;z-index:1;max-width:80%;padding:40px} .sb-sl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,.35);color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:1.6rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center} .sb-sl-prev{left:14px}.sb-sl-next{right:14px} .sb-sl-arrow:hover{background:rgba(0,0,0,.6)} .sb-sl-dots{position:absolute;bottom:14px;left:0;right:0;z-index:3;display:flex;gap:8px;justify-content:center} .sb-sl-dot{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0} .sb-sl-dot.is-active{background:#fff} /* ===== Module Audio : lecteur playlist moderne (window.initAudioPlayers) ===== */ .sb-audio-player{background:color-mix(in oklab,var(--ink) 6%,var(--paper));border:1px solid color-mix(in oklab,var(--ink) 12%,transparent);border-radius:16px;padding:16px;color:var(--ink);box-shadow:0 8px 30px -18px rgba(0,0,0,.4)} .sb-ap-head{display:flex;gap:16px;align-items:center} .sb-ap-cover{width:88px;height:88px;flex:0 0 auto;border-radius:12px;background:linear-gradient(135deg,var(--coral,#e8613a),color-mix(in oklab,var(--coral,#e8613a) 50%,#000));background-size:cover;background-position:center;display:grid;place-items:center;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)} .sb-ap-cover-ph{font-size:2rem;color:rgba(255,255,255,.85)} .sb-ap-cover[style*="background-image"] .sb-ap-cover-ph{display:none} .sb-ap-now{flex:1;min-width:0} .sb-ap-title{font-weight:700;font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-ap-artist{opacity:.65;font-size:.85rem;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-ap-bar{position:relative;height:6px;border-radius:99px;background:color-mix(in oklab,var(--ink) 16%,transparent);margin:12px 0 8px;cursor:pointer} .sb-ap-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--coral,#e8613a)} .sb-ap-bar::after{content:"";position:absolute;top:50%;left:var(--ap-pos,0);transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--coral,#e8613a);opacity:0;transition:opacity .15s} .sb-ap-bar:hover::after{opacity:1} .sb-ap-row{display:flex;align-items:center;gap:10px} .sb-ap-row button{border:none;background:transparent;color:var(--ink);cursor:pointer;font-size:1.05rem;line-height:1;padding:4px;border-radius:8px;transition:background .15s,transform .1s} .sb-ap-row button:hover{background:color-mix(in oklab,var(--ink) 10%,transparent)} .sb-ap-row button:active{transform:scale(.92)} .sb-ap-play{width:42px;height:42px;display:grid;place-items:center;background:var(--coral,#e8613a)!important;color:#fff!important;border-radius:50%!important;font-size:1.1rem!important} .sb-ap-play:hover{filter:brightness(1.08)} .sb-ap-time{margin-left:auto;font-size:.78rem;opacity:.6;font-variant-numeric:tabular-nums} .sb-ap-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid color-mix(in oklab,var(--ink) 10%,transparent)} .sb-ap-track{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:9px;cursor:pointer;transition:background .15s} .sb-ap-track:hover{background:color-mix(in oklab,var(--ink) 7%,transparent)} .sb-ap-track.is-active{background:color-mix(in oklab,var(--coral,#e8613a) 14%,transparent)} .sb-ap-tnum{width:22px;text-align:center;opacity:.5;font-size:.85rem;font-variant-numeric:tabular-nums} .sb-ap-track.is-active .sb-ap-tnum{color:var(--coral,#e8613a);opacity:1} .sb-ap-tmeta{display:flex;flex-direction:column;min-width:0;flex:1} .sb-ap-ttitle{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-ap-tartist{opacity:.6;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-ap-tico{opacity:0;color:var(--coral,#e8613a);font-size:.8rem} .sb-ap-track:hover .sb-ap-tico,.sb-ap-track.is-active .sb-ap-tico{opacity:.9} .sb-audio-player.is-playing .sb-ap-track.is-active .sb-ap-tico{opacity:1} .sb-ap-empty{opacity:.5;font-size:.85rem;text-align:center;padding:18px} @media(max-width:520px){.sb-ap-cover{width:64px;height:64px}} /* Countdown (module) */ .sb-countdown .cd-clock{flex-wrap:wrap} .cd-unit{display:flex;flex-direction:column;align-items:center;min-width:2.4em} .cd-num{font-size:2.4em;font-weight:800;line-height:1;font-variant-numeric:tabular-nums} .cd-lbl{font-size:.66em;opacity:.65;text-transform:uppercase;letter-spacing:.08em;margin-top:.3em} .sb-tab-radio:nth-of-type(1):checked~.sb-tab-panels>.sb-tab-panel:nth-child(1),.sb-tab-radio:nth-of-type(2):checked~.sb-tab-panels>.sb-tab-panel:nth-child(2),.sb-tab-radio:nth-of-type(3):checked~.sb-tab-panels>.sb-tab-panel:nth-child(3),.sb-tab-radio:nth-of-type(4):checked~.sb-tab-panels>.sb-tab-panel:nth-child(4),.sb-tab-radio:nth-of-type(5):checked~.sb-tab-panels>.sb-tab-panel:nth-child(5),.sb-tab-radio:nth-of-type(6):checked~.sb-tab-panels>.sb-tab-panel:nth-child(6),.sb-tab-radio:nth-of-type(7):checked~.sb-tab-panels>.sb-tab-panel:nth-child(7),.sb-tab-radio:nth-of-type(8):checked~.sb-tab-panels>.sb-tab-panel:nth-child(8){display:block} /* Responsive (les styles inline posent display:flex|grid + largeurs fixes → on surcharge en !important ; couvre le mode flex ET les modes grid sidebar/masonry). Tablette (≤980px) : les rangées multi-colonnes passent à 2 colonnes max. Mobile (≤768px) : tout s'empile sur une seule colonne. */ @media(max-width:980px) and (min-width:769px){ .sec-builder .sb-row{flex-wrap:wrap !important} .sec-builder .sb-col{flex:1 1 calc(50% - 40px) !important;width:auto !important;min-width:0} /* masonry (grid-template-columns:repeat(n,1fr)) → 2 colonnes */ .sec-builder .sb-row[style*="repeat"]{grid-template-columns:repeat(2,1fr) !important} } @media(max-width:768px){ .sec-builder .sb-row{flex-direction:column !important;grid-template-columns:1fr !important} .sec-builder .sb-col{flex-basis:auto !important;width:100% !important;min-width:0} } .section-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(46px,6vw,72px)} .section-head .lead{margin-top:4px} .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap} /* ---------- disciplines grid ---------- */ .disc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,20px)} .disc{ position:relative; background:var(--grad,var(--coral)); color:var(--ink); border:1px solid color-mix(in oklab,var(--paper) 16%,transparent); border-radius:18px; overflow:hidden; display:flex;flex-direction:column; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:transform .5s var(--ease), box-shadow .5s var(--ease); } .disc:nth-child(1){--grad:linear-gradient(155deg, oklch(0.90 0.17 124 / .92), oklch(0.82 0.14 195 / .78)); --shadow:oklch(0.86 0.16 130 / .35)} .disc:nth-child(2){--grad:linear-gradient(155deg, oklch(0.80 0.175 48 / .92), oklch(0.74 0.16 8 / .78)); --shadow:oklch(0.75 0.17 38 / .4)} .disc:nth-child(3){--grad:linear-gradient(155deg, oklch(0.82 0.13 232 / .92), oklch(0.76 0.15 300 / .78)); --shadow:oklch(0.78 0.14 250 / .4)} .disc:nth-child(4){--grad:linear-gradient(155deg, oklch(0.82 0.13 332 / .92), oklch(0.82 0.155 45 / .78)); --shadow:oklch(0.80 0.13 330 / .4)} /* Animation au survol des cartes — pilotée par une classe sur .disc-grid (renderCardGrid). Défaut historique = .card-hover-lift. .card-hover-off désactive toute animation. */ .card-hover-lift .disc:hover{transform:translateY(-8px);box-shadow:0 30px 64px -22px var(--shadow,#000)} .card-hover-zoom .disc:hover{transform:scale(1.04);box-shadow:0 30px 64px -22px var(--shadow,#000)} .card-hover-lift-zoom .disc:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 34px 70px -22px var(--shadow,#000)} .card-hover-glow .disc:hover{box-shadow:0 0 0 2px var(--shadow,#000),0 22px 56px -20px var(--shadow,#000)} .card-hover-tilt .disc{transform-style:preserve-3d} .card-hover-tilt .disc:hover{transform:perspective(800px) rotateX(5deg) translateY(-5px);box-shadow:0 30px 64px -22px var(--shadow,#000)} .card-hover-off .disc{transition:none} /* Rangée pleine largeur (plein écran) : sort de la bande de contenu centrée (.wrap) pour couvrir 100vw. */ .sb-row.sb-full-bleed{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;border-radius:0!important} .disc-img{aspect-ratio:16/10;position:relative} .disc-img .ph{background:repeating-linear-gradient(135deg, color-mix(in oklab,var(--ink) 20%,transparent) 0 12px, transparent 12px 24px)} .disc-img .ph-tag{color:var(--ink);background:color-mix(in oklab,var(--paper) 50%,transparent);border-color:color-mix(in oklab,var(--ink) 25%,transparent)} .disc-num{ position:absolute;top:14px;left:16px;z-index:2; font-family:var(--font-title,var(--serif));font-size:1.05rem;color:var(--ink); background:color-mix(in oklab,var(--paper) 55%,transparent); border:1px solid color-mix(in oklab,var(--ink) 26%,transparent); width:42px;height:42px;border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(4px); } .disc-body{padding:clamp(20px,1.7vw,26px);display:flex;flex-direction:column;gap:12px;flex:1} .disc-body h3{font-family:var(--font-title,var(--serif));font-weight:600;font-size:clamp(1.55rem,1.9vw,1.95rem);margin:0;line-height:1.02;letter-spacing:-.01em;color:var(--ink)} .disc-body p{margin:0;color:color-mix(in oklab,var(--ink) 74%,transparent);font-size:.93rem;line-height:1.55;flex:1} .disc-link{ display:inline-flex;align-items:center;gap:.5em; font-weight:600;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase; color:var(--ink);margin-top:6px; } .disc-link .arr{transition:transform .35s var(--ease)} .disc:hover .disc-link .arr{transform:translateX(5px)} /* Bouton de carte (renderCtaBtn) : .disc-body est flex-column → un enfant s'étire en largeur. On force le bouton à épouser son contenu (sinon un bouton rempli prend toute la largeur). */ .disc-body>.cta-btn{align-self:flex-start;margin-top:6px} /* ============================================================ PORTES OUVERTES — colour block ============================================================ */ .po{background:var(--coral);color:var(--ink);position:relative;overflow:hidden} .po .eyebrow{color:color-mix(in oklab,var(--ink) 70%,transparent)} .po .eyebrow::before{background:var(--ink)} .po-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,90px);align-items:center} .po h2{font-family:var(--font-title,var(--serif));font-weight:600;font-size:clamp(2.8rem,6.5vw,5.6rem);line-height:.95;letter-spacing:-.02em;margin:18px 0 0} .po-date{font-family:var(--font-title,var(--serif));font-style:italic;font-size:clamp(1.4rem,2.4vw,2rem);margin:18px 0 22px} .po p{font-size:1.1rem;line-height:1.55;max-width:46ch;color:color-mix(in oklab,var(--ink) 86%,transparent)} .po-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .po-chips span{ font-size:.85rem;font-weight:500;letter-spacing:.02em; padding:.5em 1em;border-radius:100px; border:1px solid color-mix(in oklab,var(--ink) 35%,transparent); color:var(--ink); } .po-card{ background:var(--ink);color:var(--paper); border-radius:20px;padding:clamp(28px,3vw,40px); display:flex;flex-direction:column;gap:18px; } .po-card .big{font-family:var(--font-title,var(--serif));font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:-.01em} .po-card .sub{color:var(--dim);font-size:.95rem} .po-card .btn{margin-top:6px;align-self:flex-start} /* ============================================================ INSCRIPTIONS ============================================================ */ .insc-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(34px,5vw,72px);align-items:start} .insc-text p{color:var(--paper-2);font-size:1.06rem;line-height:1.65;margin:0 0 18px} .insc-text a.inline{color:var(--coral-hi);border-bottom:1px solid color-mix(in oklab,var(--coral) 45%,transparent);transition:border-color .25s} .insc-text a.inline:hover{border-color:var(--coral)} .dl-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .card{ background:var(--ink-2);border:1px solid var(--line);border-radius:18px; padding:clamp(26px,3vw,38px); } .card h3{font-family:var(--font-title,var(--serif));font-weight:500;font-size:1.7rem;margin:0 0 4px;letter-spacing:-.01em} .card .addr{color:var(--dim);font-size:.95rem;margin-bottom:22px} .hours{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)} .hours .row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.96rem} .hours .row span:first-child{color:var(--paper-2)} .hours .row span:last-child{color:var(--paper);font-variant-numeric:tabular-nums;font-weight:500;text-align:right} .card .note{font-size:.86rem;color:var(--dim);font-style:italic;margin-top:18px;line-height:1.5} .card .tel{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:1.05rem;font-weight:500} .card .tel .lbl{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600} /* ============================================================ VIDEO ============================================================ */ .video-frame{ position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line); aspect-ratio:16/9;background:var(--ink-2); } .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- en savoir plus ---------- */ .more-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px} .more-links a{ display:inline-flex;align-items:center;gap:.6em; padding:.8em 1.3em;border:1px solid var(--line);border-radius:100px; font-size:.9rem;color:var(--paper-2);transition:border-color .25s,color .25s,background .25s; } .more-links a:hover{border-color:var(--coral);color:var(--paper);background:var(--ink-2)} .more-links a .arr{color:var(--coral-hi)} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--ink-2);border-top:1px solid var(--line);padding-top:clamp(64px,8vw,110px)} .footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:60px} .footer-brand .brand{font-size:2.4rem;margin-bottom:18px} .footer-brand p{color:var(--dim);font-size:.95rem;max-width:30ch;line-height:1.6} .fcol h4{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 18px;font-weight:600} .fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .fcol a{color:var(--paper-2);font-size:.95rem;transition:color .2s,padding-left .25s} .fcol a:hover{color:var(--coral-hi);padding-left:4px} .fcol .contact-line{color:var(--paper-2);font-size:.95rem;line-height:1.5} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--line);font-size:.82rem;color:var(--dim)} .footer-bottom a:hover{color:var(--paper)} /* ===== Blocs Pied de page (ft-*) ===== */ .ftb{font-family:var(--sans);color:var(--paper)} .ftb a{color:inherit} .ftb .ftb-link{color:var(--dim);font-size:.92rem;line-height:2;width:fit-content;transition:color .2s,padding-left .25s} .ftb .ftb-link:hover{color:var(--paper)} .ftb .ftb-link .t-link{color:var(--coral-hi)} .ftb-coltitle{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:.85;margin:0 0 14px} .ftb-soc{display:flex;flex-wrap:wrap;gap:18px} .ftb-soc .ftb-link{font-size:.88rem;line-height:1.4} .ftb-bar{display:flex;justify-content:space-between;align-items:center;gap:18px 36px;flex-wrap:wrap;font-size:.82rem;color:var(--dim)} .ftb-bar .ftb-link{font-size:.82rem;line-height:1.4} .ftb-totop{display:inline-flex;align-items:center;gap:7px;color:var(--dim);cursor:pointer;transition:color .2s} .ftb-totop:hover{color:var(--coral-hi)} .ftb-mega-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(32px,5vw,64px)} .ftb-cta-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 40px} /* Pied composable */ .ftb-builder-grid{display:grid;gap:clamp(32px,5vw,64px)} .ftb-wtext{color:var(--dim);font-size:.95rem;line-height:1.7;margin:0} .ftb-cline{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px} .ftb-cic{color:var(--coral-hi);flex-shrink:0;font-size:1rem;line-height:1.7} .ftb-cline .ftb-link{line-height:1.5} .ftb-html{color:var(--dim);font-size:.92rem;line-height:1.6} @media(max-width:860px){ .ftb-builder-grid{grid-template-columns:1fr 1fr!important} .ftb-builder-grid>div:first-child{grid-column:1/-1} } @media(max-width:560px){.ftb-builder-grid{grid-template-columns:1fr!important}} /* ===== Pied Wordmark & Newsletter (ft-kosbiotic) ===== */ .ftk{font-family:'Roboto Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--paper)} /* Pleine largeur : on lève le max-width du .wrap (on garde une gouttière latérale) */ .ftk .wrap{max-width:none;padding-inline:clamp(20px,3.5vw,56px)} .ftk a{color:inherit;text-decoration:none} .ftk-grid{display:grid;grid-template-columns:1fr;grid-template-areas:"nl" "brand" "cols" "copy"} .ftk-brand{grid-area:brand;font-family:'Helvetica Neue','Arial Black',Helvetica,system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:.82;font-size:clamp(3rem,22vw,20rem);white-space:nowrap;overflow:hidden;margin:32px 0} .ftk-nl{grid-area:nl} .ftk-cols{grid-area:cols} .ftk-copyright{grid-area:copy;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:36px} .ftk-nl-title{font-family:inherit;font-size:.95rem;font-weight:500;padding-bottom:14px;border-bottom:1px solid var(--line);margin:0 0 18px} .ftk-nl-form{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px} .ftk-nl-form input{flex:1;background:none;border:0;color:var(--paper);font-family:inherit;font-size:.95rem;outline:none;padding:6px 0} .ftk-nl-form input::placeholder{color:var(--dim)} .ftk-nl-form button{background:none;border:0;color:var(--paper);cursor:pointer;display:flex;padding:4px;flex-shrink:0;transition:transform .2s} .ftk-nl-form button:hover{transform:translateX(3px)} .ftk-consent{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer} .ftk-consent input{accent-color:var(--coral);width:13px;height:13px} .ftk-socials{display:flex;gap:18px;margin-top:30px} .ftk-soc{display:flex;opacity:.85;transition:opacity .2s} .ftk-soc:hover{opacity:1} .ftk-col-title{font-family:inherit;font-size:.9rem;font-weight:500;margin-bottom:16px} .ftk-col-links{display:flex;flex-direction:column;gap:11px} .ftk-link{font-size:.86rem;color:var(--dim);transition:color .2s;width:fit-content;line-height:1.4} .ftk-link:hover{color:var(--paper)} @media(min-width:860px){ .ftk-grid{grid-template-columns:minmax(240px,1fr) 2.6fr;grid-template-areas:"brand brand" "nl cols" "copy copy";column-gap:clamp(40px,6vw,90px)} .ftk-brand{border-bottom:1px solid var(--line);padding-bottom:clamp(24px,4vw,44px);margin:0 0 clamp(36px,5vw,60px)} .ftk-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);padding-left:clamp(36px,5vw,80px);border-left:1px solid var(--line)} .ftk-copyright{margin-top:clamp(44px,6vw,76px)} } @media(max-width:859px){ .ftk-cols{display:flex;flex-direction:column;margin-top:34px;border-top:1px solid var(--line)} .ftk-col{border-bottom:1px solid var(--line);padding:18px 0} .ftk-col-title{display:flex;justify-content:space-between;align-items:center;margin:0;cursor:pointer} .ftk-col-title::after{content:'+';font-size:1.15rem;font-weight:400} .ftk-col.open .ftk-col-title::after{content:'\2212'} .ftk-col-links{display:none;margin-top:16px} .ftk-col.open .ftk-col-links{display:flex} } @media(max-width:860px){ .ftb-mega-grid{grid-template-columns:1fr 1fr} .ftb-mega-grid>div:first-child{grid-column:1/-1} } @media(max-width:560px){ .ftb-mega-grid{grid-template-columns:1fr} .ftb-cta-head{align-items:flex-start} } /* ============================================================ RESPONSIVE ============================================================ */ /* Grilles responsives ------------------------------------------------- */ /* art-grid : grilles à N colonnes pilotées par --g-cols */ .art-grid{display:grid;grid-template-columns:repeat(var(--g-cols,3),1fr)} /* sb-masonry : galerie masonry (Pinterest) — CSS columns, hauteurs naturelles */ .sb-masonry{column-count:var(--g-cols,3);column-gap:var(--g-gap,16px)} .sb-masonry > *{break-inside:avoid;-webkit-column-break-inside:avoid} /* art-split : layout 2 colonnes (texte/image, cta-band) */ .art-split{display:grid;grid-template-columns:1fr 1fr} /* cl- column blocks */ .cl-grid-3{display:grid;grid-template-columns:repeat(3,1fr);align-items:start} .cl-grid-4{display:grid;grid-template-columns:repeat(4,1fr);align-items:start} @media (max-width:1000px){ .nav-links,.nav-phone{display:none} .burger{display:flex} /* disc-grid : 4→2 colonnes */ .disc-grid{grid-template-columns:repeat(2,1fr) !important;gap:18px} /* art-grid / masonry : N→2 colonnes max */ .art-grid{--g-cols:2 !important} .sb-masonry{--g-cols:2 !important} .po-grid,.insc-grid{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} /* cl-grid-4 : 4→2 colonnes */ .cl-grid-4{grid-template-columns:repeat(2,1fr) !important} } @media (max-width:768px){ /* art-split : côte à côte → empilé */ .art-split{grid-template-columns:1fr !important} .art-split > *:last-child{margin-top:0} /* cl-grid-3/4 : empilé */ .cl-grid-3,.cl-grid-4{grid-template-columns:1fr !important} /* gallery-mosaic : forcer 1 colonne */ .art-mosaic{grid-template-columns:1fr !important;grid-template-rows:auto !important;aspect-ratio:unset !important} .art-mosaic > div{aspect-ratio:4/3 !important} } @media (max-width:600px){ /* disc-grid : 2→1 colonne */ .disc-grid{grid-template-columns:1fr !important} /* art-grid / masonry : 2→1 colonne */ .art-grid{--g-cols:1 !important} .sb-masonry{--g-cols:1 !important} } @media (max-width:560px){ body{font-size:16px} .hero-actions{flex-direction:column;align-items:stretch} .hero-actions .btn{justify-content:center} .footer-top{grid-template-columns:1fr} .hero-meta{flex-direction:column;align-items:flex-start;gap:12px} } /* mobile menu panel */ .mobile-menu{ position:fixed;inset:0;z-index:99;background:var(--ink); padding:90px var(--gut) 40px;overflow-y:auto; transform:translateY(-100%);transition:transform .5s var(--ease); } .mobile-menu.open{transform:translateY(0)} .mobile-menu ul{list-style:none;margin:0;padding:0} .mobile-menu > ul > li{border-bottom:1px solid var(--line)} .mobile-menu > ul > li > a{display:block;font-family:var(--font-title,var(--serif));font-size:1.8rem;padding:18px 0} .mobile-menu .sub{padding:0 0 18px;display:flex;flex-wrap:wrap;gap:8px} .mobile-menu .sub a{font-family:var(--sans);font-size:.85rem;color:var(--dim);border:1px solid var(--line);padding:.4em .9em;border-radius:100px} .mobile-menu .btn{margin-top:28px;width:100%;justify-content:center} /* Liens du menu secondaire (barre du haut, masquée en mobile) — repris en fin de menu mobile pour rester atteignables, avec un style plus discret que les liens principaux. */ .mobile-menu > ul > li.mobile-sep{border-bottom:0;height:1px;background:var(--line);padding:0;margin:10px 0 6px} .mobile-menu > ul > li.mobile-top-link{border-bottom:0} .mobile-menu > ul > li.mobile-top-link > a{font-family:var(--sans);font-size:1rem;padding:8px 0;opacity:.7} /* Séparateur (nav.top_links {sep:true}) repris en filet horizontal côté mobile (liste verticale) — distinct de .mobile-sep qui borne main↔secondaire. */ .mobile-menu > ul > li.mobile-top-sep{border-bottom:0;height:1px;background:var(--line);padding:0;margin:6px 0;opacity:.6} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} } /* ---- Formulaires Formspree ---- */ .bf-form{width:100%} .bf-input{width:100%;background:var(--bf-input-bg,rgba(255,255,255,.07));border:1px solid var(--bf-border,rgba(255,255,255,.18));border-radius:var(--bf-radius,8px);color:var(--bf-color,var(--ink));padding:.75em 1em;font-family:var(--sans);font-size:.92rem;outline:none;transition:border-color .2s;box-sizing:border-box} .bf-input:focus{border-color:var(--bf-focus,var(--coral))} .bf-input::placeholder{color:var(--bf-placeholder,var(--ink-3))} textarea.bf-input{resize:vertical;min-height:110px} .bf-label{display:block;font-size:.78rem;font-weight:600;color:var(--bf-label-color,var(--ink-2));margin-bottom:5px;letter-spacing:.02em} .bf-field{display:flex;flex-direction:column;margin-bottom:16px} .bf-row{display:flex;gap:10px;align-items:stretch} .bf-row .bf-input{flex:1;min-width:0} .bf-btn{background:var(--bf-btn-bg,var(--coral));color:var(--bf-btn-color,#fff);border:none;border-radius:var(--bf-radius,8px);padding:.75em 1.8em;font-family:var(--sans);font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .15s;white-space:nowrap;letter-spacing:.01em;flex-shrink:0} .bf-btn:hover{opacity:.88;transform:translateY(-1px)} .bf-btn:disabled{opacity:.5;cursor:wait;transform:none} @media(max-width:580px){.bf-row{flex-direction:column}.bf-btn{width:100%}} /* ---- CL48 — Onglets ---- */ .tab-wrap{} .tab-nav{display:flex;border-bottom:1px solid var(--line);margin-bottom:0} .tab-nav.center{justify-content:center} .tab-nav.right{justify-content:flex-end} .tab-btn{background:var(--tb-bg,none);border:none;padding:10px 20px 12px;font-family:var(--tb-font,var(--sans));font-size:var(--tb-size,.72rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tb-color,var(--dim));cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s,background .2s;white-space:nowrap} .tab-btn:hover{color:var(--tb-hover,var(--ink));background:var(--tb-hover-bg,transparent)} .tab-btn.active{color:var(--tb-active,var(--ink));border-bottom-color:var(--tb-active-line,var(--coral));background:var(--tb-active-bg,none)} .tab-panel{display:none} .tab-panel.active{display:block} /* ---- CL100 — Titre + 2 colonnes ---- */ .cl-2cols-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)} @media(max-width:600px){.cl-2cols-inner{grid-template-columns:1fr}} /* ===== Images dans le texte riche : habillage (wrapping) + redimensionnement ===== */ .rt-img{height:auto;max-width:100%;border-radius:4px} .rt-img-none{display:block;margin:.5em 0} /* bloc, pas d'habillage */ .rt-img-center{display:block;margin:.6em auto} /* centré */ .rt-img-left{float:left;margin:.25em 1.2em .7em 0;max-width:55%} /* texte à droite */ .rt-img-right{float:right;margin:.25em 0 .7em 1.2em;max-width:55%} /* texte à gauche */ .rt-img-full{display:block;width:100%;margin:.6em 0} /* pleine largeur */ .rt-img-inline{display:inline-block;vertical-align:middle;margin:0 .35em} /* dans la ligne */ .rt-clear{clear:both;display:block;height:0;line-height:0} /* stop habillage (équiv.
    ) */ /* Image ronde : cercle + le texte épouse le contour (shape-outside, sur flottant gauche/droite). */ .rt-img-round{border-radius:50%;aspect-ratio:1;object-fit:cover;-webkit-shape-outside:circle(50%);shape-outside:circle(50%);clip-path:circle(50%)} /* Les conteneurs de texte riche doivent englober les images flottées (clearfix). */ [data-c$="_html"]::after,.sb-tg-body::after,.sb-tab-panel::after,.disc-body::after{content:"";display:table;clear:both} /* Chrome d'édition d'image (overlays fixes, jamais dans le contenu sauvegardé ni publié) */ #ttb-img-outline{position:fixed;z-index:100039;border:2px solid var(--ed-accent,#e8613a);border-radius:4px;pointer-events:none;display:none} #ttb-img-outline.visible{display:block} #ttb-img-handle{position:fixed;z-index:100040;width:14px;height:14px;border-radius:50%;background:var(--ed-accent,#e8613a);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:nwse-resize;display:none} #ttb-img-handle.visible{display:block} /* ===== PILE RÉVÉLÉE AU DÉFILEMENT (module « stack », réf. Framer Stack Scroll Reveal) ===== Piste haute + conteneur `sticky` centré : les cartes sont empilées au même endroit et c'est le défilement qui fait sortir celle de devant. Géométrie relevée sur la référence : origine de transformation EN BAS (la carte bascule autour de son bord inférieur), perspective sur la scène. */ .sb-stack{position:relative} .sb-stack-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center} /* ⚠️ PAS de `transform-style:preserve-3d` sur la SCÈNE : il ferait trier les cartes par leur profondeur 3D, ce qui ANNULE le z-index → la carte qui bascule en sortant passerait DERRIÈRE la suivante (pas naturel). Comme dans la référence, la préservation 3D est portée par la CARTE. */ .sb-stack-stage{position:relative;width:100%;margin:0 auto} .sb-stk-card{position:absolute;left:0;right:0;top:50%;margin-top:-250px; display:flex;overflow:hidden;transform-origin:50% 100%;backface-visibility:hidden; box-shadow:0 24px 60px rgba(0,0,0,.28);will-change:transform,opacity;transform-style:preserve-3d} .sb-stk-card:first-child{position:relative;top:auto;margin-top:0} .sb-stk-body{flex:1 1 55%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.5em;color:#fff} .sb-stk-num{font-size:1.5rem;font-weight:600;opacity:.9} .sb-stk-kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75} .sb-stk-title{margin:0;font-size:1.9rem;line-height:1.15;font-weight:600} .sb-stk-text{font-size:.95rem;line-height:1.5;opacity:.88} .sb-stk-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:.6em} /* Éventail : carte étroite → typographie resserrée, sinon un mot par ligne. */ .sb-stack[data-layout="fan"] .sb-stk-card{flex-direction:column;justify-content:flex-end} .sb-stack[data-layout="fan"] .sb-stk-title{font-size:1.05rem;line-height:1.2} .sb-stack[data-layout="fan"] .sb-stk-text{font-size:.82rem;line-height:1.4} .sb-stack[data-layout="fan"] .sb-stk-num{font-size:1.1rem} .sb-stack[data-layout="fan"] .sb-stk-kicker{font-size:.62rem} .sb-stack[data-layout="fan"] .sb-stk-body{gap:.25em} .sb-stk-media{flex:0 0 45%;max-width:45%;min-width:0;box-sizing:border-box} .sb-stk-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--stk-media-r,0)} /* Fond de carte en image/vidéo : calques sous le contenu (le texte doit rester lisible). */ .sb-stk-vidwrap{position:absolute;inset:0;overflow:hidden;z-index:0;container-type:size} .sb-stk-vidwrap>iframe,.sb-stk-vidwrap>video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0} .sb-stk-vidwrap>video{width:100%;height:100%;object-fit:contain} .sb-stk-vidwrap:not(.is-cover)>iframe{width:100%;height:100%} /* « Couvrir toute la carte » : la vidéo 16/9 DÉBORDE du cadre au lieu de laisser des bandes noires (équivalent d'object-fit:cover pour un embed, en unités de conteneur). */ .sb-stk-vidwrap.is-cover>video{object-fit:cover} .sb-stk-vidwrap.is-cover>iframe{width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw)} .sb-stk-veil{position:absolute;inset:0;z-index:0} .sb-stk-card > .sb-stk-body,.sb-stk-card > .sb-stk-media{position:relative;z-index:1} @media(max-width:768px){ .sb-stk-card{flex-direction:column} .sb-stk-media{max-height:40%} .sb-stk-title{font-size:1.35rem} } /* ===== CARTES DÉPLIABLES (module « flipper », réf. Framer Feature Flipper) ===== Accordéon horizontal : les largeurs sont pilotées par flex-grow, la transition CSS fait le reste. Durée et courbe relevées sur le composant : 800 ms, cubic-bezier(.44, 0, .56, 1). */ .sb-flipper{align-items:stretch} .sb-fl-card{position:relative;flex:1 1 0%;min-width:0;height:var(--fl-h,420px); cursor:pointer;color:#fff;overflow:visible; transition:flex var(--fl-dur,1400ms) cubic-bezier(.44,0,.56,1)} /* Carte visible : calque interne à largeur PROPRE. Il atteint sa cible plus vite que la case de la grille → pendant le mouvement il déborde par-dessus la voisine (comportement de la référence). */ /* ⚠️ Le calque DEVANCE la mise en page. Sa courbe doit donc DÉMARRER en douceur ET ATTERRIR en douceur : une expo-out (départ à pleine vitesse) donne un à-coup au départ, la courbe symétrique de la mise en page s'arrête sec une fois la durée raccourcie. D'où cette courbe qui prend son élan puis se pose longuement. */ .sb-fl-inner{position:absolute;top:0;bottom:0;overflow:hidden;color:#fff; display:flex;flex-direction:column;justify-content:space-between; transition:width var(--fl-dur,1400ms) cubic-bezier(.35,.05,.15,1)} .sb-fl-card[data-anchor="left"] .sb-fl-inner{left:0;right:auto} .sb-fl-card[data-anchor="right"] .sb-fl-inner{right:0;left:auto} /* ⚠️ La carte qui s'ouvre passe EN DESSOUS de ses voisines : son calque atteint sa largeur finale avant que la mise en page ne suive, et il se glisse SOUS la carte d'à côté qui, elle, reste au premier plan. C'est ce décalage qui donne le chevauchement de la référence. */ .sb-fl-card{z-index:2} .sb-fl-card.is-open{z-index:1} /* Fond en calque : zoomable au survol sans bouger le contenu. */ /* Calque de zoom au SURVOL. */ .sb-fl-bgz{position:absolute;inset:0;transition:transform .6s cubic-bezier(.44,0,.56,1)} /* Image : sa LARGEUR traîne derrière celle de la carte. Comme elle est en `cover`, une boîte plus large = image plus grande → le zoom se poursuit après que la carte s'est posée, et se termine sur une courbe presque plate. Rien n'est appliqué d'un coup : aucun sursaut au clic. */ /* ⚠️ `min-width:100%` : en traînant, l'image deviendrait plus ÉTROITE que la carte pendant qu'elle s'ouvre → une bande sans image apparaissait sous le voile. Bornée à la largeur de la carte, elle la couvre TOUJOURS ; l'inertie ne se voit donc que quand elle est encore trop GRANDE (elle déborde et se fait rogner), ce qui est précisément l'effet de zoom qui se relâche. */ /* Cadrage de l'image : `--fl-foc` quand la carte est fermée (étroite → rognée sur les côtés), `--fl-foc-open` quand elle est dépliée (large → rognée en haut/bas). Le glissement de l'un à l'autre suit la même inertie que la largeur, donc l'image se recadre sans à-coup. */ .sb-fl-bg{position:absolute;top:0;bottom:0;min-width:100%;background-size:cover; background-position:var(--fl-foc,center center); will-change:width; transition:width var(--fl-bg-dur,2660ms) cubic-bezier(.12,.75,.15,1), background-position var(--fl-bg-dur,2660ms) cubic-bezier(.12,.75,.15,1)} .sb-fl-card.is-open .sb-fl-bg{background-position:var(--fl-foc-open,var(--fl-foc,center center))} .sb-fl-card[data-anchor="left"] .sb-fl-bg{left:0;right:auto} .sb-fl-card[data-anchor="right"] .sb-fl-bg{right:0;left:auto} .sb-fl-card:not(.is-open):hover .sb-fl-bgz{transform:scale(var(--fl-zoom,1.06))} .sb-fl-inner>.sb-fl-top,.sb-fl-inner>.sb-fl-bottom{flex:0 0 auto} .sb-fl-card:not(.is-open):hover .sb-fl-btn{background:rgba(255,255,255,.45)} .sb-fl-card:not(.is-open):hover .sb-fl-btn span{transform:translateX(2px)} .sb-fl-btn span{display:block;transition:transform .3s cubic-bezier(.44,0,.56,1)} /* Voile UNIFORME sur toute l'image (et non un dégradé du bas vers le haut) : le réglage « Voile sur l'image (%) » assombrit l'image entière, uniformément. */ .sb-fl-veil{position:absolute;inset:0;background:#000;pointer-events:none} /* Texture : calque distinct au-dessus du voile, pour régler grain et voile indépendamment. */ .sb-fl-tex{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;mix-blend-mode:overlay} .sb-fl-top,.sb-fl-bottom{position:relative;z-index:1;padding:18px} .sb-fl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .sb-fl-tag{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px; background:rgba(255,255,255,.16);backdrop-filter:blur(8px);font-size:.8rem;white-space:nowrap} .sb-fl-btn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff;font-size:1rem;line-height:1; display:grid;place-items:center;transition:background .2s} .sb-fl-btn:hover{background:rgba(255,255,255,.3)} .sb-fl-bottom{display:flex;align-items:flex-end;gap:18px;margin-top:auto} /* Position du contenu dans la carte : bas (défaut), milieu ou haut. */ .sb-flipper[data-align="middle"] .sb-fl-bottom{margin-top:auto;margin-bottom:auto;align-items:center} .sb-flipper[data-align="top"] .sb-fl-bottom{margin-top:0;margin-bottom:auto;align-items:flex-start} .sb-fl-main{min-width:0;flex:1 1 auto} /* ⚠️ Jamais de coupure au milieu d'un mot : sur une carte étroite, une césure ou un `break-word` hérité du thème renverrait des lettres à la ligne. Un mot va à la ligne ENTIER. */ /* ⚠️ Spécificité : deux règles plus haut dans ce fichier coupent les mots — `.sec-builder [data-c]` (word-break) et `#blocks h1,h2,h3` (overflow-wrap, avec un ID donc plus fort). Il faut donc scoper par `#blocks` ici aussi pour reprendre la main. */ .sb-flipper .sb-fl-title,.sb-flipper .sb-fl-desc,.sb-flipper .sb-fl-tag, #blocks .sb-flipper .sb-fl-title,#blocks .sb-flipper .sb-fl-desc,#blocks .sb-flipper .sb-fl-tag{ hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal;word-wrap:normal} .sb-fl-title{margin:0;font-size:1.5rem;line-height:1.15;font-weight:500} /* ⚠️ Sur une carte rétrécie le titre part sur trop de lignes et débordait SOUS le bord, où il était rogné. Il est borné en nombre de lignes tant que la carte n'est pas dépliée → il reste TOUJOURS lisible en entier. Une fois dépliée, plus aucune limite. */ .sb-fl-card:not(.is-open) .sb-fl-title{display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:var(--fl-lines,3);overflow:hidden} .sb-fl-bottom{max-height:100%;min-height:0} .sb-fl-main{overflow:hidden} /* Description et visuels : révélés seulement quand la carte est ouverte, après son élargissement. */ /* Les boutons de carte se révèlent avec la description (mêmes règles d'apparition). */ .sb-fl-btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:.9em} .sb-fl-desc,.sb-fl-btns,.sb-fl-extras{opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .45s ease,transform .45s ease} .sb-fl-card.is-open .sb-fl-desc,.sb-fl-card.is-open .sb-fl-btns,.sb-fl-card.is-open .sb-fl-extras{opacity:1;transform:none;pointer-events:auto;transition-delay:.35s} .sb-fl-desc{margin-top:.5em;font-size:.95rem;line-height:1.5} /* Ombre du texte (lisibilité sur image claire) : émise seulement si le réglage est > 0. */ .sb-fl-title,.sb-fl-desc{text-shadow:var(--fl-tsh,none)} .sb-fl-extras{display:flex;gap:12px;flex:0 0 auto} .sb-fl-extras img{width:190px;max-width:32vw;border-radius:14px;display:block} /* Rétrécie : le titre passe sur plusieurs lignes, on garde l'essentiel lisible. */ .sb-fl-card.is-shrunk .sb-fl-title{font-size:1.15rem} @media(max-width:768px){ .sb-flipper[data-stackm="1"]{flex-direction:column} .sb-flipper[data-stackm="1"] .sb-fl-card{flex:none!important;height:auto;min-height:260px} /* Empilé : plus de débordement latéral, le calque reprend toute la largeur. */ .sb-flipper[data-stackm="1"] .sb-fl-inner{position:relative;width:auto!important;left:auto;right:auto;min-height:260px} .sb-fl-extras{display:none} } /* ============================================================ VISIBILITÉ PAR APPAREIL (« masquer sur … ») Équivalent du « Disabled On » de Divi. Deux points non évidents : 1. PLAGES indépendantes : cocher « tablette » ne doit pas masquer le mobile (des `max-width` empilées le feraient). Divi a `tabletOnly`/`desktopAbove` pour ça. 2. En ÉDITION on ne masque PAS (`body.webby-editing`) : un élément réellement retiré du flux serait impossible à sélectionner pour le ré-afficher. Il est rendu translucide par le