@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&display=swap');
/* RED OWL HUB — Design system 2026. Feuille autonome. */
:root{color-scheme:dark;--page:#0c0d10;--surface:#121318;--surface2:#19161b;--text:#f4eff0;--muted:#b5a8ae;--subtle:#8e8389;--red:#ae2537;--red-bright:#e3475b;--border:#34262d;--max:1180px;--ease:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;min-width:320px;background:var(--page);color:var(--text);font:400 16px/1.75 'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--red-bright);outline-offset:5px}
.container{width:min(var(--max),calc(100% - 56px));margin-inline:auto}.skip-link{position:absolute;top:-100px;left:20px;z-index:9999;padding:10px 18px;background:var(--red);color:#fff}.skip-link:focus{top:12px}
/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(12,13,16,.94);border-bottom:1px solid #33262c;backdrop-filter:blur(18px)}
.header-inner{min-height:82px;display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font:800 21px/1.2 'Manrope',sans-serif;letter-spacing:-.045em}.brand strong,.footer-brand strong{color:var(--red-bright)}.brand-tag{margin-left:12px;color:var(--subtle);font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase}.header-nav{display:flex;align-items:center;gap:30px}.header-nav a{font-size:12px;font-weight:700;color:#bdb2b8;transition:color .2s}.header-nav a:hover{color:#fff}.header-nav .nav-cta{padding:11px 17px;border:1px solid #94404c;border-radius:4px;color:#f4d9de}.header-nav .nav-cta:hover{color:#fff;border-color:var(--red-bright)}.menu-toggle{display:none;border:0;background:transparent;padding:10px;cursor:pointer}.menu-toggle span{display:block;width:24px;height:2px;margin:5px;background:#eee}.mobile-nav{display:none}.mobile-nav[hidden]{display:none!important}
/* Sections */
.section-shell{position:relative}.eyebrow{margin:0 0 22px;color:#f06c7c;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800}h1,h2,p{margin-top:0}h1,h2{font-family:'Manrope',sans-serif;line-height:1.15;letter-spacing:-.055em}h1 em,h2 em{color:var(--red-bright);font-style:normal}h2{font-size:clamp(34px,4.5vw,57px)}
/* Hero */
.hero{background:radial-gradient(ellipse at 78% 35%,rgba(128,29,48,.21),transparent 47%),linear-gradient(135deg,#151016,#0c0d10 70%);border-bottom:1px solid var(--border)}
.hero-grid{min-height:650px;padding-block:90px 100px;display:grid;grid-template-columns:1.16fr .84fr;gap:55px;align-items:center}.hero h1{max-width:760px;font-size:clamp(45px,5.8vw,76px);margin-bottom:28px}.hero-lead{max-width:660px;color:#c8bbc0;font-size:17px;line-height:1.9}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:33px}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:49px;padding:11px 22px;border-radius:4px;border:1px solid transparent;font-weight:700;font-size:12px;transition:background .2s,transform .2s,border-color .2s}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--red);color:#fff}.button-primary:hover{background:var(--red-bright)}.button-ghost{border-color:#5b3c46;color:#e2cdd1}.button-ghost:hover{border-color:var(--red-bright)}
.hero-art{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1}.hero-art::before{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(174,37,55,.24),transparent 70%);content:'';filter:blur(20px)}.hero-art-ring{position:absolute;border:1px solid rgba(214,63,85,.22);border-radius:50%}.hero-art-ring-outer{inset:0}.hero-art-ring-inner{inset:12%;border-style:dashed;animation:slow-spin 45s linear infinite}.hero-owl{position:relative;width:66%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 18px 40px rgba(0,0,0,.32))}.hero-art-caption{position:absolute;bottom:0;color:#967c85;font-size:9px;letter-spacing:.24em}
/* Project */
.project{padding:125px 0;background:#101115;border-bottom:1px solid var(--border)}.section-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:100px}.section-body p{color:#c0b4bb;line-height:1.95;font-size:16px;margin-bottom:23px}.values{display:flex;flex-wrap:wrap;gap:10px;margin-top:35px}.values span{padding:7px 14px;border:1px solid #59313c;background:#21171c;border-radius:30px;color:#e3bac4;font-size:11px;letter-spacing:.04em;font-weight:700}
/* Founder */
.founder{padding:125px 0;background:linear-gradient(115deg,#1b1218,#111216 65%);border-bottom:1px solid var(--border)}.founder-grid{display:grid;grid-template-columns:.65fr 1fr;align-items:center;gap:105px}.founder-mark{min-height:370px;border:1px solid #53313a;background:radial-gradient(circle at center,#41202b,#171318 70%);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:17px;position:relative}.founder-mark::before{content:'';position:absolute;inset:22px;border:1px solid #70404c}.founder-mark span{font:800 clamp(75px,10vw,135px)/1 'Manrope',sans-serif;letter-spacing:-.12em;color:#e1a1ad}.founder-mark small{color:#bfa9b0;font-size:10px;text-transform:uppercase;letter-spacing:.17em}.founder-copy p:not(.eyebrow){color:#c7bbc1;font-size:16px;line-height:1.9;margin-bottom:19px}.text-link{display:inline-block;margin-top:16px;color:#f08b98;border-bottom:1px solid #914353;padding-bottom:7px;font-weight:700;font-size:13px}.text-link:hover{color:#fff}
/* Constellation */
.network{padding:120px 0 70px;background:radial-gradient(ellipse at 50% 60%,#25141c 0,#131116 44%,#0d0e11 82%)}.network-heading{text-align:center}.network-heading h2{margin-bottom:20px}.network-heading>p:last-child{color:var(--muted);font-size:15px}.constellation{position:relative;width:min(100%,1250px);height:720px;margin:35px auto 0;isolation:isolate;--node-size:116px;--halo-size:280px}.connections{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}.connections line{stroke:#7e394b;stroke-width:1.5;transition:stroke .25s,filter .25s}.connections line.connection-active{stroke:#ff4263;stroke-width:3;filter:drop-shadow(0 0 7px rgba(255,55,90,.75))}.connections circle{fill:#ff5671;filter:drop-shadow(0 0 5px #ff4263)}
.hub-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.hub-halo{position:relative;width:var(--halo-size);height:var(--halo-size);border:1px solid #873746;border-radius:50%;background:radial-gradient(circle,#3b1c29,#171219 70%);display:grid;place-items:center;box-shadow:0 0 0 15px rgba(194,40,64,.035),0 0 55px rgba(165,35,54,.16)}.hub-halo::after{content:'';position:absolute;inset:12px;border:1px dashed rgba(231,91,116,.28);border-radius:50%}.hub-logo{position:relative;z-index:1;width:72%;height:72%;object-fit:contain}.hub-nodes{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-node{position:absolute;display:grid;place-items:center;width:var(--node-size);height:var(--node-size);transform:translate(-50%,-50%);border-radius:50%;border:2px solid #50313b;background:#201920;box-shadow:0 0 0 6px rgba(10,11,14,.9),0 0 0 7px rgba(208,55,77,.16),0 15px 35px rgba(0,0,0,.38);pointer-events:auto;transition:border-color .25s,box-shadow .25s}.hub-node:hover,.hub-node:focus-visible{z-index:9;border-color:var(--red-bright);box-shadow:0 0 0 8px rgba(222,61,85,.13),0 0 35px rgba(223,54,83,.3)}.hub-node img{width:100%;height:100%;object-fit:cover;border-radius:50%;transition:transform .3s}.hub-node:hover img,.hub-node:focus-visible img{transform:scale(1.075)}.hub-node span{position:absolute;top:calc(100% + 15px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 10px;border-radius:20px;background:#151117;color:#f0e5e9;font-size:12px;font-weight:700}.hub-node:hover span{color:#fa9fae}.network-note{text-align:center;color:var(--subtle);font-size:12px;letter-spacing:.1em}
/* Footer */
.site-footer{background:#090a0d;border-top:1px solid #35232b;padding:52px 0 25px}.footer-main{display:flex;justify-content:space-between;gap:35px;align-items:flex-start;padding-bottom:38px}.footer-brand span{font:800 21px/1.35 'Manrope',sans-serif}.footer-brand p{margin:9px 0 0;color:var(--subtle);font-size:12px}.footer-right{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:6px}.footer-signature{margin:0;font-size:11px;line-height:1.6;color:var(--subtle)}.footer-signature a{font-weight:700;color:#e59ca8}.footer-signature a:hover{color:#fff}.network-links{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.network-row{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 12px}.network-row a{color:#aca0a7;font-size:11px;line-height:1.6;transition:color .2s}.network-row a:hover{color:#ff8396}.network-row a.active{color:#f06c7c;font-weight:800}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:21px;border-top:1px solid #30242b;color:#84777f;font-size:11px}.footer-bottom a:hover{color:#fff}
@keyframes slow-spin{to{transform:rotate(360deg)}}
/* Responsive */
@media(max-width:980px){.hero-grid{gap:25px}.hero h1{font-size:clamp(39px,5.2vw,60px)}.section-layout{gap:45px}.founder-grid{gap:45px}.header-nav{gap:17px}}
@media(max-width:720px){
    html{scroll-padding-top:80px}
    .container{width:calc(100% - 36px)}
    .header-inner{min-height:74px}
    .brand{font-size:19px}
    .brand-tag{display:none}
    .header-nav{display:none}
    .menu-toggle{display:block}
    .mobile-nav{display:flex;flex-direction:column;padding:6px 18px 20px;background:#111116;border-top:1px solid #30242b}
    .mobile-nav a{padding:11px 5px;color:#e4d7dc;font-size:14px}
    .hero-grid{min-height:0;grid-template-columns:1fr;gap:35px;padding-block:80px 65px}
    .hero h1{font-size:clamp(40px,9vw,62px)}
    .hero-lead{font-size:16px}
    .hero-art{width:min(75vw,330px);margin:auto}
    .project,.founder{padding:78px 0}
    .section-layout,.founder-grid{grid-template-columns:1fr;gap:30px}
    .founder-mark{min-height:190px}
    .founder-mark span{font-size:72px}
    .founder-mark::before{inset:12px}
    .network{padding:80px 0 65px}
    /* Constellation mobile : disposition orbitale */

.constellation {
    position: relative;
    display: block;
    width: calc(100% - 24px);
    height: 540px;
    margin: 34px auto 0;

    --halo-size: 130px;
    --node-size: 70px;
}

.connections {
    display: block;
}

.hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hub-nodes {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    pointer-events: none;
}

.hub-node {
    position: absolute;
    width: var(--node-size);
    height: var(--node-size);
    transform: translate(-50%, -50%);
    margin: 0;
    pointer-events: auto;
}

.hub-node span {
    font-size: 10px;
    top: calc(100% + 10px);
    padding: 4px 7px;
}
    .footer-main{flex-direction:column;gap:25px}.footer-right,.network-links{align-items:flex-start;text-align:left}.network-row{justify-content:flex-start}.footer-bottom{flex-direction:column;gap:7px}}
@media(max-width:420px){
    .hero-actions{flex-direction:column}.button{width:100%}.network-row{gap:5px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.hero-art-ring-inner{animation:none}}
/* Logo Hub — présentation en haut de page */

.hero-owl {
    background: #ffffff;
    border-radius: 50%;
    padding: 12px;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .32));
}

/* Logo Hub — centre de la constellation */

.hub-halo {
    background: #ffffff;
}

.hub-logo {
    object-fit: contain;
}

/* Médaillons de la constellation parfaitement circulaires */

.hub-node {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

.hub-node img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.founder-photo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 430px;
    object-fit: cover;
    object-position: center 25%;

    padding: 10px;
    background: #1b171c;
    border: 1px solid #69313d;
    border-radius: 8px;

    box-shadow:
        0 0 0 6px rgba(169, 35, 50, 0.06),
        0 20px 50px rgba(0, 0, 0, 0.35);
}

.founder-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================================================================
   RED OWL HUB — COFFEE HOUSE LOUNGE / proposition 2
   Surcharge de la feuille existante, sans modifier la constellation JS
   ================================================================ */
:root{
  color-scheme:dark;
  --page:#211b19;--surface:#2b211e;--surface2:#382823;
  --text:#eee1d1;--muted:#c6b1a0;--subtle:#aa9383;
  --red:#833e46;--red-bright:#c78979;--border:#5a4035;
  --coffee:#211b19;--walnut:#49352b;--copper:#c49a68;--cream:#eee1d1;
}
body{background:#211b19;color:var(--text);}
::selection{background:#965e4b;color:#fff8ee}
h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.035em;line-height:1.17}
h1 em,h2 em{font-style:italic;color:#d9ad83}
.eyebrow{color:#d0a87c;font-size:11px;letter-spacing:.18em}
.site-header{background:rgba(34,26,23,.96);border-color:#574036;box-shadow:0 8px 30px rgba(12,7,5,.18)}
.brand{color:#f0e4d5;letter-spacing:-.03em}
.brand strong,.footer-brand strong{color:#c99c74}
.brand-tag{color:#bba38e}
.header-nav a{color:#d2bfae}.header-nav a:hover{color:#fff3e5}
.header-nav .nav-cta{color:#f3dbbd;border-color:#94684d;background:rgba(121,75,50,.16)}
.header-nav .nav-cta:hover{border-color:#d3a373;background:rgba(155,99,62,.2)}
.hero{background:radial-gradient(ellipse at 72% 40%,rgba(169,110,65,.21),transparent 46%),radial-gradient(ellipse at 9% 95%,rgba(113,55,48,.3),transparent 55%),linear-gradient(118deg,#34241e,#211b19 74%);border-color:#604538;overflow:hidden}
.hero::before{content:'';pointer-events:none;position:absolute;inset:0;opacity:.18;background-image:repeating-linear-gradient(95deg,transparent 0 10px,rgba(220,180,129,.055) 11px,transparent 12px 27px);mask-image:linear-gradient(to right,transparent,#000 45%,transparent)}
.hero-grid{min-height:630px}
.hero h1{font-size:clamp(44px,5.5vw,74px)}
.hero-lead{color:#d3bfae;line-height:1.92}
.hero .eyebrow{color:#e3b786}
.hero-art::before{background:radial-gradient(circle,rgba(199,140,81,.25),transparent 72%)}
.hero-art-ring{border-color:rgba(215,169,112,.29)}
.hero-owl{background:#f4e8d8;box-shadow:0 0 75px rgba(200,139,74,.12)}
.hero-art-caption{color:#c4a588}
.button{border-radius:6px;min-height:51px}
.button-primary{background:#945949;color:#fff8ee;box-shadow:0 8px 24px rgba(16,8,5,.2)}
.button-primary:hover{background:#ad7057}
.button-ghost{border-color:#8c6751;color:#e6d0ba}
.button-ghost:hover{border-color:#d3a373}
.project{background:linear-gradient(125deg,#281f1b,#30231e);border-color:#564135}
.section-body p,.founder-copy p:not(.eyebrow){color:#d1bdad}
.values span{background:#443028;border-color:#795342;color:#f2d5b3}
.founder{background:radial-gradient(ellipse at 15% 50%,rgba(167,106,64,.14),transparent 54%),linear-gradient(120deg,#30231f,#211b19);border-color:#604638}
.founder-photo{background:#382820;border-color:#8d624c;box-shadow:0 0 0 8px rgba(182,121,75,.06),0 22px 55px rgba(16,8,5,.45)}
.text-link{color:#e4b88d;border-color:#9f7052}.text-link:hover{color:#fff1dd}
/* Section histoire : deux colonnes, citation et objets inspirés du café */
.owl-story{position:relative;padding:118px 0;background:radial-gradient(ellipse at 88% 25%,rgba(174,103,65,.14),transparent 47%),#251c19;border-bottom:1px solid #5b4034}
.owl-story-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(35px,7vw,110px);align-items:center}
.owl-story-visual{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#553c2c 0%,#32241e 48%,#251c19 72%);border:1px solid #6b4d3e;border-radius:170px 170px 14px 14px;box-shadow:inset 0 0 80px rgba(10,5,3,.25),0 24px 60px rgba(10,5,3,.22)}
.owl-story-visual::before{content:'';position:absolute;inset:16px;border:1px solid rgba(210,160,104,.22);border-radius:155px 155px 9px 9px;pointer-events:none}
.owl-story-visual img {
    display: block;
    width: 62%;
    max-width: 260px;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    transform: translateY(20px);
    filter: drop-shadow(0 16px 24px rgba(0,0,0,.3));
}
.owl-story-stamp{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#d8b183;font-size:10px;letter-spacing:.22em;white-space:nowrap;text-transform:uppercase}
.owl-story-copy h2{margin:0 0 27px}
.owl-story-copy p:not(.eyebrow){font-size:16px;color:#d2c0b0;line-height:1.95;margin-bottom:19px}
.owl-story-copy p strong{color:#f6e4cf;font-weight:700}
.owl-story-quote{border-left:2px solid #bc8f61;padding:5px 0 5px 22px;margin-top:30px;font:italic 500 clamp(20px,2.2vw,27px)/1.45 'Fraunces',Georgia,serif;color:#e4bc90}
.network{background:radial-gradient(ellipse at 50% 55%,#4b3129 0,#2f221e 45%,#211b19 85%)}
.network-heading>p:last-child{color:#cbb39f}
.connections line{stroke:#ad7758}
.connections line.connection-active{stroke:#f0be83;filter:drop-shadow(0 0 7px rgba(240,180,100,.65))}
.connections circle{fill:#efba7e;filter:drop-shadow(0 0 5px #d6a16d)}
.hub-halo{border-color:#a57857;background:#f4e8d8;box-shadow:0 0 0 15px rgba(190,132,73,.045),0 0 68px rgba(205,141,81,.22)}
.hub-halo::after{border-color:rgba(144,86,57,.3)}
.hub-node{background:#33231e;border-color:#88634e;overflow:visible;box-shadow:0 0 0 6px rgba(33,27,25,.95),0 0 0 7px rgba(200,151,96,.3),0 15px 35px rgba(12,7,5,.45)}
.hub-node:hover,.hub-node:focus-visible{border-color:#ebbf87;box-shadow:0 0 0 8px rgba(231,181,115,.14),0 0 38px rgba(220,160,88,.34)}
.hub-node span{top:calc(100% + 11px);left:50%;transform:translateX(-50%);z-index:2;background:#382720;border:1px solid #846047;border-radius:30px;color:#f1d8bc;padding:5px 13px;box-shadow:0 4px 16px rgba(12,6,3,.35)}
.hub-node:hover span,.hub-node:focus-visible span{color:#fff3e4;background:#5c3b30;border-color:#d6a573}
.network-note{color:#c7a78d}
.site-footer{background:#191310;border-color:#604335}
.footer-brand p,.footer-signature,.footer-bottom{color:#b49c89}
.footer-signature a,.network-row a.active{color:#dfac81}
.network-row a{color:#c6b09d}.network-row a:hover{color:#f5c996}
.footer-bottom{border-color:#4a352b}
@media(max-width:720px){
  .mobile-nav{background:#241a17;border-color:#604638}
  .mobile-nav a{color:#ead7c1}
  .owl-story{padding:78px 0}
  .owl-story-grid{grid-template-columns:1fr;gap:35px}
  .owl-story-visual{min-height:315px;max-width:350px;width:100%;margin:auto;border-radius:145px 145px 12px 12px}
  .owl-story-visual img{max-height:265px;width:72%}
  .hub-node span{font-size:10px;padding:3px 8px;top:calc(100% + 8px)}
}
/* Fond blanc pur du logo central */
.hub-halo {
    background: #ffffff;
}

/* ======================================
   CHOUETTE — CADRE RECTANGULAIRE
   ====================================== */

.owl-story-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 420px;
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: 24px;

    background: #2b211e;
    border: 1px solid #8b6046;
    border-radius: 12px;

    overflow: hidden;
    box-sizing: border-box;
}

/* Suppression des décorations de l'arche */
.owl-story-visual::before,
.owl-story-visual::after {
    content: none;
}

/* Image de la chouette */
.owl-story-visual img {
    position: relative;
    display: block;

    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: none;

    margin: 0 auto;
    padding: 0;

    object-fit: contain;
    transform: none;
    z-index: 1;
}

/* Étiquette */
.owl-story-stamp {
    position: relative;
    display: block;

    margin-top: 14px;
    padding: 0;

    color: #c49663;
    font-size: 10px;
    letter-spacing: .15em;
    text-align: center;

    transform: none;
    inset: auto;
    z-index: 2;
}

/* Adaptation iPhone */
@media (max-width: 720px) {

    .owl-story-visual {
        width: 100%;
        max-width: 350px;
        height: auto;
        min-height: 0;
        padding: 18px;
        border-radius: 10px;
    }

    .owl-story-visual img {
        width: 100%;
        max-width: 280px;
        height: auto;
        max-height: none;
        transform: none;
    }

    .owl-story-stamp {
        margin-top: 12px;
        font-size: 9px;
        letter-spacing: .1em;
    }
}