/* ============================================================ FRĒRES CŌRP. — FEUILLE DE STYLES Associée à : Frēres_Cōrp__-_Site_internet_2026_06_07_v14.html Lien dans le : ⚠ Placer ce fichier dans le MÊME dossier que le HTML. Charte : Bleu Nuit · Or Champagne · Rouge Cardinal · Fraunces + Hanken Grotesk ============================================================ */ /* ============================================================ FRĒRES CŌRP. — IDENTITÉ DE MARQUE Bleu Nuit dominant · Blanc/Ivoire · Rouge Cardinal ponctue · Or souligne ============================================================ */ :root{ --bleu-nuit:#0B1F3A; --bleu-900:#081627; --bleu-700:#0F2A4D; --bleu-500:#16406E; --bleu-300:#3A5A86; --rouge:#8B0000; --rouge-clair:#A81515; --noir-encre:#14171D; --blanc:#FFFFFF; --ivoire:#F4F1EA; --ivoire-2:#EAE5DA; --or:#B08A4F; --or-clair:#C8A871; --gris-ardoise:#525B66; --gris-clair:#A7AEB8; --font-titre:'Fraunces', Georgia, serif; --font-texte:'Hanken Grotesk', system-ui, sans-serif; --max:1240px; --gut:clamp(24px,5vw,80px); } *{margin:0;padding:0;box-sizing:border-box} /* — Accessibilité — */ .skip-link{position:fixed;top:-60px;left:16px;z-index:500;background:var(--rouge);color:#fff;padding:11px 20px;border-radius:8px;font-weight:600;font-size:.9rem;text-decoration:none;transition:top .3s ease} .skip-link:focus{top:16px} :focus-visible{outline:2px solid var(--or-clair);outline-offset:3px;border-radius:3px} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px} .hero:focus{outline:none} html{scroll-behavior:smooth} body{ font-family:var(--font-texte); background:var(--bleu-nuit); color:var(--ivoire); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--or);color:var(--bleu-900)} h1,h2,h3,h4{font-family:var(--font-titre);font-weight:500;line-height:1.05;letter-spacing:-.01em} .serif-it{font-style:italic;font-weight:300} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} .eyebrow{ font-size:.72rem;letter-spacing:.32em;text-transform:uppercase; font-weight:700;color:var(--or);display:inline-flex;align-items:center;gap:14px; } .eyebrow::before{content:"";width:34px;height:1px;background:var(--or)} /* ---------- MONOGRAMME SVG ---------- */ .mono{display:block} .mono .ring{fill:none;stroke:currentColor;stroke-width:11} .mono .bar{fill:currentColor} /* ============================================================ NAVBAR ============================================================ */ .nav{ position:fixed;top:0;left:0;width:100%;z-index:100; padding:22px 0; transition:background .4s ease, padding .4s ease, border-color .4s ease; border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(8,22,39,.86); backdrop-filter:blur(14px); padding:14px 0; border-bottom:1px solid rgba(176,138,79,.18); } .nav .wrap{display:flex;align-items:center;justify-content:space-between} .brand{display:flex;align-items:center;gap:13px;color:var(--blanc)} .brand-logo{height:46px;width:auto;display:block;transition:height .4s ease, transform .4s ease} .nav.scrolled .brand-logo{height:38px} .brand:hover .brand-logo{transform:scale(1.03)} .brand-logo-foot{height:52px;-webkit-box-reflect:below 4px linear-gradient(transparent,transparent 62%,rgba(244,241,234,.10))} .navlinks{display:flex;align-items:center;gap:38px} .navlinks a{ font-size:.82rem;letter-spacing:.06em;color:var(--ivoire);font-weight:500; position:relative;padding:4px 0;transition:color .3s; } .navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--or);transition:width .35s ease} .navlinks a:hover{color:var(--blanc)} .navlinks a:hover::after{width:100%} .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-texte);font-size:.82rem;font-weight:700;letter-spacing:.04em; padding:13px 26px;border-radius:2px;cursor:pointer;border:none; transition:transform .3s ease, box-shadow .3s ease, background .3s ease; } .btn-primary{background:var(--rouge);color:var(--blanc)} .btn-primary:hover{background:var(--rouge-clair);transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(139,0,0,.7)} .btn-ghost{background:transparent;color:var(--blanc);border:1px solid rgba(244,241,234,.35)} .btn-ghost:hover{border-color:var(--or);color:var(--or-clair);transform:translateY(-2px)} .btn-dark{background:var(--bleu-nuit);color:var(--blanc)} .btn-dark:hover{background:var(--bleu-700);transform:translateY(-2px)} .nav .btn{padding:11px 22px} .menu-toggle{display:none;background:none;border:none;color:var(--blanc);cursor:pointer;flex-direction:column;gap:5px} .menu-toggle span{width:26px;height:2px;background:var(--ivoire);transition:.3s} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;min-height:100vh;display:flex;align-items:center; padding:150px 0 150px;overflow:hidden;background:#081627; } .hero-track{position:absolute;inset:0;z-index:0} .slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity 1s ease} .slide.active{opacity:1;visibility:visible} .slide-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .bg-a{background: radial-gradient(120% 80% at 85% 20%, rgba(22,64,110,.45) 0%, transparent 55%), radial-gradient(90% 90% at 10% 90%, rgba(11,31,58,.6) 0%, transparent 60%), linear-gradient(160deg,#0B1F3A 0%,#081627 100%);} .bg-b{background: radial-gradient(100% 100% at 15% 25%, rgba(22,64,110,.5) 0%, transparent 55%), radial-gradient(80% 120% at 95% 80%, rgba(11,31,58,.55) 0%, transparent 60%), linear-gradient(135deg,#0E2444 0%,#0A1424 100%);} .bg-c{background: radial-gradient(110% 90% at 75% 75%, rgba(22,64,110,.42) 0%, transparent 55%), radial-gradient(70% 90% at 18% 18%, rgba(139,0,0,.16) 0%, transparent 55%), linear-gradient(170deg,#0B1F3A 0%,#0A1526 100%);} .hero-mono{ position:absolute;right:-10%;top:50%;transform:translateY(-50%); width:min(720px,70vw);color:rgba(58,90,134,.10);z-index:1;pointer-events:none; } /* ===== Système orbital — orchestration des expertises (hero) ===== */ .hero-orbit{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(760px,72vw);aspect-ratio:1/1;z-index:1;pointer-events:none} .hero-orbit .orbit-sys{display:block;width:100%;height:100%;overflow:visible} .fc-logo{color:rgba(86,124,170,.20);transform-box:fill-box;transform-origin:center;animation:fcLogoSpin 150s linear infinite} .fc-halo{opacity:.5;transform-box:fill-box;transform-origin:center;animation:fcHaloBreath 9s ease-in-out infinite} .fc-rings{transform-box:fill-box;transform-origin:center;animation:fcRingsSpin 140s linear infinite} .fc-comet{offset-path:path('M70,300 C190,120 410,120 530,300 C410,480 190,480 70,300');offset-rotate:0deg;animation:fcComet 7.5s cubic-bezier(.22,.61,.36,1) infinite} /* Plan métier : légère respiration orbitale */ .fc-plane{transform-box:fill-box;transform-origin:center;animation:fcPlane 26s ease-in-out infinite} /* Flux fins centre -> satellite (apparition + circulation) */ .fc-flow{stroke-dasharray:3 7;opacity:.5;animation:fcFlow 9s linear infinite} .fc-orch{stroke-dasharray:2 8;opacity:0;animation:fcOrch 6s ease-in-out infinite} /* Satellites métiers */ .fc-sat{opacity:0;transform-box:fill-box;animation:fcSatIn .9s cubic-bezier(.22,.61,.36,1) forwards, fcSatFloat 7s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .9s)} .fc-sat-ring{fill:rgba(8,20,38,.82);stroke:rgba(200,168,113,.9);stroke-width:1.2} .fc-sat-ic{color:#F0E4C8} .fc-sat-dot{opacity:.95} .fc-sat--accent .fc-sat-ring{fill:rgba(28,10,12,.82);stroke:#C2342B;stroke-width:1.6} .fc-sat--accent .fc-sat-ic{color:#F4D2C0} .fc-sat--accent{animation:fcSatIn .9s cubic-bezier(.22,.61,.36,1) forwards, fcSatPulse 3.4s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .9s)} @keyframes fcLogoSpin{to{transform:rotate(360deg)}} @keyframes fcRingsSpin{to{transform:rotate(360deg)}} @keyframes fcHaloBreath{0%,100%{opacity:.30;transform:scale(.95)}50%{opacity:.55;transform:scale(1.05)}} @keyframes fcComet{0%{offset-distance:0%;opacity:0}9%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}} @keyframes fcPlane{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}} @keyframes fcFlow{to{stroke-dashoffset:-200}} @keyframes fcOrch{0%,100%{opacity:0;stroke-dashoffset:0}50%{opacity:.55;stroke-dashoffset:-40}} @keyframes fcSatIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} @keyframes fcSatFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes fcSatPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} /* Économie : on suspend les animations des diapositives inactives */ .slide:not(.active) .hero-orbit *{animation-play-state:paused} /* Responsive : tablette = système allégé ; mobile = satellites masqués, logo + orbites conservés */ @media(max-width:980px){ .fc-orchs{display:none} .fc-sat-ic{display:none} .fc-sat-ring{r:8} } @media(max-width:600px){ .hero-orbit{width:min(520px,86vw);right:-22%} .hero-orbit--left{left:-22%!important;width:min(520px,86vw)!important} .fc-plane,.fc-flows{display:none} } @media (prefers-reduced-motion: reduce){ .hero-orbit *{animation:none!important} .fc-comet{opacity:0} .fc-sat{opacity:1} .fc-orch{opacity:.4} } .slide .wrap{position:relative;z-index:2;width:100%} .hero-inner{max-width:880px;opacity:0;transform:translateY(28px);transition:opacity .85s ease .2s, transform .85s ease .2s} .slide.active .hero-inner{opacity:1;transform:none} .hero h1{ font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:400;color:var(--blanc); margin:26px 0 0;letter-spacing:-.02em; } .hero h1 em{font-weight:300;color:var(--or-clair)} .hero .lead{ font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--gris-clair); max-width:560px;margin:30px 0 42px;font-weight:400;line-height:1.7; } .hero-cta{display:flex;gap:16px;flex-wrap:wrap} /* carousel controls */ .hero-arrow{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%; background:rgba(8,22,39,.35);border:1px solid rgba(244,241,234,.22);color:var(--ivoire);cursor:pointer; display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:background .3s,color .3s,border-color .3s} .hero-arrow:hover{background:rgba(176,138,79,.92);border-color:transparent;color:var(--bleu-nuit)} .hero-arrow.prev{left:clamp(12px,2vw,28px)} .hero-arrow.next{right:clamp(12px,2vw,28px)} .hero-dots{position:absolute;bottom:128px;left:0;width:100%;z-index:6;display:flex;justify-content:center;gap:12px} .hero-dots button{width:30px;height:3px;border:none;border-radius:2px;background:rgba(244,241,234,.25);cursor:pointer;transition:.4s;padding:0} .hero-dots button.on{background:var(--or);width:46px} /* ---------- TUILES STRATÉGIQUES ---------- */ .tiles{position:relative;z-index:5;margin-top:-72px} .tiles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .tile{position:relative;display:flex;flex-direction:column;min-height:184px;padding:26px 24px;border-radius:4px; background:rgba(11,31,58,.94);border:1px solid rgba(176,138,79,.22);backdrop-filter:blur(8px); box-shadow:0 30px 60px -30px rgba(0,0,0,.7);overflow:hidden; transition:transform .4s ease,border-color .4s ease,background .4s ease} .tile::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--or);transition:width .45s ease} .tile:hover{transform:translateY(-6px);border-color:rgba(176,138,79,.55);background:rgba(15,42,77,.96)} .tile:hover::before{width:100%} .tile .t-ico{width:32px;height:32px;color:var(--or-clair);margin-bottom:14px} .tile h3{font-family:var(--font-titre);font-size:1.2rem;color:var(--blanc);font-weight:500;margin-bottom:8px;line-height:1.2} .tile p{font-size:.84rem;color:var(--gris-clair);line-height:1.55;margin-bottom:16px} .tile .t-go{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-clair);font-weight:700;margin-top:auto;transition:gap .3s} .tile:hover .t-go{gap:14px} .tile.accent{background:var(--rouge);border-color:transparent} .tile.accent::before{background:var(--or-clair)} .tile.accent .t-ico,.tile.accent p,.tile.accent .t-go{color:rgba(255,255,255,.92)} .tile.accent h3{color:#fff} .tile.accent:hover{background:var(--rouge-clair)} @media(max-width:980px){.tiles-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.tiles-grid{grid-template-columns:1fr}.tiles{margin-top:-48px}} /* ---------- ASSISTANT CONVERSATIONNEL ---------- */ .chat-fab{position:fixed;right:24px;bottom:24px;z-index:200;width:60px;height:60px;border-radius:50%; background:var(--bleu-nuit);border:1px solid rgba(176,138,79,.4);color:var(--or-clair);cursor:pointer; display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -10px rgba(0,0,0,.55);transition:transform .3s,background .3s} .chat-fab:hover{transform:translateY(-3px);background:var(--bleu-700)} .chat-fab .dotpulse{position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%;background:var(--rouge);animation:pulse 2.2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(139,0,0,.55)}70%{box-shadow:0 0 0 11px rgba(139,0,0,0)}100%{box-shadow:0 0 0 0 rgba(139,0,0,0)}} .chat-panel{position:fixed;right:24px;bottom:96px;z-index:201;width:min(372px,calc(100vw - 48px)); background:var(--noir-encre);border:1px solid rgba(176,138,79,.28);border-radius:12px;overflow:hidden; box-shadow:0 40px 80px -20px rgba(0,0,0,.7);display:flex;flex-direction:column;max-height:min(620px,calc(100dvh - 200px)); opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .3s ease,transform .3s ease} .chat-panel.open{opacity:1;transform:none;pointer-events:auto} .chat-head{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--bleu-nuit);border-bottom:1px solid rgba(176,138,79,.2)} .chat-head .av{width:40px;height:40px;border-radius:50%;background:rgba(176,138,79,.14);border:1px solid rgba(176,138,79,.4);display:flex;align-items:center;justify-content:center;color:var(--or-clair);flex:none} .chat-head .av .mono{width:22px;height:24px} .chat-head .who b{font-family:var(--font-titre);color:#fff;font-size:1.02rem;font-weight:500;display:block;line-height:1.1} .chat-head .who span{font-size:.73rem;color:var(--gris-clair);letter-spacing:.04em} .chat-head .close{margin-left:auto;background:none;border:none;color:var(--gris-clair);cursor:pointer;font-size:1.4rem;line-height:1} .chat-head .close:hover{color:#fff} .chat-body{padding:18px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px} .msg{max-width:84%;padding:11px 14px;border-radius:13px;font-size:.9rem;line-height:1.5} .msg.bot{background:#1d222b;color:var(--ivoire);border-top-left-radius:3px;align-self:flex-start} .msg.me{background:var(--bleu-500);color:#fff;border-top-right-radius:3px;align-self:flex-end} .msg.typing{display:flex;gap:5px;align-items:center;padding:13px 14px} .msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--gris-clair);display:inline-block;animation:typ 1.2s infinite ease-in-out} .msg.typing i:nth-child(2){animation-delay:.18s} .msg.typing i:nth-child(3){animation-delay:.36s} @keyframes typ{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} .chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px} .chip{font-size:.78rem;color:var(--or-clair);background:rgba(176,138,79,.1);border:1px solid rgba(176,138,79,.35); padding:8px 12px;border-radius:20px;cursor:pointer;transition:.25s;font-family:inherit} .chip:hover{background:var(--or);color:var(--bleu-nuit);border-color:transparent} .chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(176,138,79,.2);background:var(--bleu-900)} .chat-input input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(176,138,79,.25);border-radius:8px; padding:10px 12px;color:var(--ivoire);font-family:inherit;font-size:.88rem;outline:none} .chat-input input::placeholder{color:var(--gris-ardoise)} .chat-input input:focus{border-color:var(--or)} .chat-input button{background:var(--rouge);border:none;color:#fff;border-radius:8px;padding:0 14px;cursor:pointer;transition:.25s;display:flex;align-items:center} .chat-input button:hover{background:var(--rouge-clair)} .chat-foot{text-align:center;font-size:.64rem;color:var(--gris-ardoise);padding:8px;background:var(--bleu-900);letter-spacing:.08em;text-transform:uppercase} @media(max-width:520px){.chat-panel{right:12px;left:12px;width:auto;bottom:86px}.chat-fab{right:16px;bottom:16px}} @media(max-width:600px){ .hero-arrow{display:none} .slide{align-items:flex-start;padding-top:96px;padding-bottom:84px} .hero h1{font-size:clamp(2.1rem,8vw,2.9rem);margin-top:18px} .hero .lead{margin:20px 0 30px;font-size:1rem;line-height:1.6} .hero-dots{bottom:32px} } /* ---------- RÉSEAUX SOCIAUX ---------- */ .socials{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap} .socials a{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid rgba(176,138,79,.35);display:flex;align-items:center;justify-content:center;color:var(--gris-clair);transition:transform .4s cubic-bezier(.2,.9,.3,1.4),background .35s,color .35s,border-color .35s,box-shadow .35s} .socials a::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--rouge);opacity:0;transform:scale(.7);transition:opacity .45s ease,transform .45s ease;pointer-events:none} .socials a:hover,.socials.stagger.in>a:hover{background:var(--or);border-color:transparent;color:var(--bleu-nuit);transform:translateY(-4px) scale(1.06);box-shadow:0 10px 26px -8px rgba(176,138,79,.6)} .socials a:hover::after{opacity:.55;transform:scale(1)} .socials svg{width:17px;height:17px;position:relative;z-index:1} /* Cascade d'apparition des icônes */ .socials.stagger>a{opacity:0;transform:translateY(14px) scale(.8)} .socials.stagger.in>a{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.9,.3,1.4)} .socials.stagger.in>a:nth-child(2){transition-delay:.06s} .socials.stagger.in>a:nth-child(3){transition-delay:.12s} .socials.stagger.in>a:nth-child(4){transition-delay:.18s} .socials.stagger.in>a:nth-child(5){transition-delay:.24s} .socials.stagger.in>a:nth-child(6){transition-delay:.30s} .socials.stagger.in>a:nth-child(7){transition-delay:.36s} /* ---------- NEWSLETTER ---------- */ .foot-news{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;padding:34px 0;border-bottom:1px solid rgba(176,138,79,.18)} .foot-news .nl-txt h4{position:relative;display:inline-block;font-family:var(--font-titre);font-size:clamp(1.4rem,2.4vw,1.7rem);color:var(--blanc);font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;padding-bottom:10px} .foot-news .nl-txt h4::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:54px;border-radius:2px;background:linear-gradient(90deg,var(--or),var(--rouge));transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .25s} .foot-news.in .nl-txt h4::after{transform:scaleX(1)} .foot-news .nl-txt p{font-size:.92rem;color:var(--gris-clair);max-width:420px;line-height:1.6} .nl-form{display:flex;flex-direction:column;gap:9px;min-width:300px;flex:1;max-width:450px} .nl-row{display:flex;gap:10px} .nl-row input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(176,138,79,.3);border-radius:7px;padding:13px 15px;color:var(--ivoire);font-family:inherit;font-size:.92rem;outline:none;transition:border-color .35s,box-shadow .35s,background .35s} .nl-row input:focus{border-color:var(--or);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(176,138,79,.16)} .nl-row input::placeholder{color:var(--gris-ardoise)} .nl-row button{position:relative;overflow:hidden;background:var(--rouge);color:#fff;border:none;border-radius:7px;padding:0 26px;font-family:inherit;font-weight:600;font-size:.85rem;letter-spacing:.03em;cursor:pointer;white-space:nowrap;transition:background .3s,transform .3s,box-shadow .3s} .nl-row button::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.30) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none} .nl-row button:hover{background:var(--rouge-clair);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(168,21,21,.7)} .nl-row button:hover::before{transform:translateX(130%)} .nl-row button>*{position:relative;z-index:1} .nl-consent{font-size:.72rem;color:var(--gris-ardoise);line-height:1.55} .nl-consent a{color:var(--or-clair);text-decoration:underline} .nl-msg{font-size:.85rem;color:var(--or-clair);min-height:2px} .foot-bottom .legal a{position:relative;font-size:.78rem;color:var(--gris-ardoise);letter-spacing:.04em;cursor:pointer;transition:color .3s;padding-bottom:3px} .foot-bottom .legal a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:linear-gradient(90deg,var(--or-clair),var(--rouge-clair));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)} .foot-bottom .legal a:hover{color:var(--or-clair)} .foot-bottom .legal a:hover::after{transform:scaleX(1)} @media(max-width:760px){.foot-news{flex-direction:column;align-items:flex-start}.nl-form{max-width:none;width:100%}} /* ---------- COOKIES (RGPD / CNIL) ---------- */ .ck-banner{position:fixed;left:24px;right:24px;bottom:24px;z-index:250;max-width:560px;margin:0 auto; background:var(--noir-encre);border:1px solid rgba(176,138,79,.3);border-radius:13px; box-shadow:0 40px 90px -25px rgba(0,0,0,.8);padding:26px 26px 22px; transform:translateY(160%);transition:transform .55s cubic-bezier(.2,.7,.2,1)} .ck-banner.show{transform:none} .ck-banner h4{font-family:var(--font-titre);color:#fff;font-size:1.22rem;font-weight:500;margin-bottom:10px} .ck-banner p{font-size:.85rem;color:var(--gris-clair);line-height:1.6;margin-bottom:18px} .ck-banner p a{color:var(--or-clair);text-decoration:underline} .ck-actions{display:flex;gap:10px;flex-wrap:wrap} .ck-actions button{flex:1;min-width:120px;padding:12px 14px;border-radius:7px;font-family:inherit;font-size:.83rem;font-weight:600;cursor:pointer;transition:.3s;border:1px solid transparent} .ck-accept{background:var(--rouge);color:#fff} .ck-accept:hover{background:var(--rouge-clair)} .ck-refuse{background:transparent;border-color:rgba(176,138,79,.4);color:var(--ivoire)} .ck-refuse:hover{border-color:var(--or);color:#fff} .ck-custom{background:rgba(176,138,79,.12);border-color:rgba(176,138,79,.4);color:var(--or-clair)} .ck-custom:hover{background:rgba(176,138,79,.22)} .ck-overlay{position:fixed;inset:0;z-index:260;background:rgba(8,16,28,.72);backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s} .ck-overlay.show{opacity:1;pointer-events:auto} .ck-modal{background:var(--noir-encre);border:1px solid rgba(176,138,79,.3);border-radius:14px;width:min(620px,100%); max-height:88vh;overflow-y:auto;box-shadow:0 50px 100px -25px rgba(0,0,0,.85)} .ck-modal-head{display:flex;align-items:center;gap:14px;padding:20px 26px;border-bottom:1px solid rgba(176,138,79,.18);position:sticky;top:0;background:var(--noir-encre);z-index:1} .ck-modal-head .av{width:40px;height:40px;border-radius:50%;background:rgba(176,138,79,.14);border:1px solid rgba(176,138,79,.4);display:flex;align-items:center;justify-content:center;color:var(--or-clair);flex:none} .ck-modal-head .av svg{width:22px;height:24px} .ck-modal-head h3{font-family:var(--font-titre);color:#fff;font-size:1.3rem;font-weight:500;flex:1} .ck-modal-head .x{background:none;border:none;color:var(--gris-clair);font-size:1.6rem;cursor:pointer;line-height:1} .ck-modal-head .x:hover{color:#fff} .ck-modal-body{padding:20px 26px} .ck-intro{font-size:.86rem;color:var(--gris-clair);line-height:1.65;margin-bottom:6px} .ck-intro a{color:var(--or-clair);text-decoration:underline} .ck-cat{border-top:1px solid rgba(176,138,79,.15);padding:18px 0} .ck-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px} .ck-cat-head h5{color:#fff;font-size:1rem;font-weight:600} .ck-cat p{font-size:.81rem;color:var(--gris-ardoise);line-height:1.55;margin-top:8px;max-width:92%} .ck-state{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--or-clair);white-space:nowrap} .ck-toggle{position:relative;width:46px;height:25px;flex:none} .ck-toggle input{opacity:0;width:0;height:0;position:absolute} .ck-track{position:absolute;inset:0;background:rgba(255,255,255,.12);border:1px solid rgba(176,138,79,.3);border-radius:20px;transition:.3s;cursor:pointer;display:block} .ck-track::before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:var(--gris-clair);top:3px;left:4px;transition:.3s} .ck-toggle input:checked + .ck-track{background:rgba(176,138,79,.4);border-color:var(--or)} .ck-toggle input:checked + .ck-track::before{transform:translateX(20px);background:var(--or-clair)} .ck-toggle input:disabled + .ck-track{opacity:.65;cursor:not-allowed} .ck-modal-foot{display:flex;gap:10px;flex-wrap:wrap;padding:18px 26px 24px;border-top:1px solid rgba(176,138,79,.18);position:sticky;bottom:0;background:var(--noir-encre)} .ck-modal-foot button{flex:1;min-width:130px;padding:13px;border-radius:7px;font-family:inherit;font-size:.83rem;font-weight:600;cursor:pointer;transition:.3s;border:1px solid transparent} .ck-confirm{background:var(--rouge);color:#fff} .ck-confirm:hover{background:var(--rouge-clair)} .ck-modal-foot .ck-refuse,.ck-modal-foot .ck-accept2{background:transparent;border-color:rgba(176,138,79,.4);color:var(--ivoire)} .ck-modal-foot .ck-refuse:hover,.ck-modal-foot .ck-accept2:hover{border-color:var(--or);color:#fff} @media(max-width:520px){.ck-banner{left:12px;right:12px;bottom:12px;padding:22px 18px}} /* ---------- MODAL DOCUMENTS LÉGAUX ---------- */ .doc-overlay{position:fixed;inset:0;z-index:270;background:rgba(8,16,28,.72);backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s} .doc-overlay.show{opacity:1;pointer-events:auto} .doc-modal{background:var(--noir-encre);border:1px solid rgba(176,138,79,.3);border-radius:14px;width:min(720px,100%); max-height:88vh;display:flex;flex-direction:column;box-shadow:0 50px 100px -25px rgba(0,0,0,.85)} .doc-body{padding:24px 30px 34px;overflow-y:auto} .doc-body h4{font-family:var(--font-titre);color:var(--or-clair);font-size:1.08rem;font-weight:500;margin:22px 0 8px} .doc-body h4:first-child{margin-top:0} .doc-body p{font-size:.9rem;color:var(--gris-clair);line-height:1.7;margin-bottom:10px} .doc-body ul{margin:6px 0 12px;padding-left:20px} .doc-body li{font-size:.9rem;color:var(--gris-clair);line-height:1.65;margin-bottom:6px} .doc-body a{color:var(--or-clair);text-decoration:underline;cursor:pointer} .doc-body .doc-meta{font-size:.76rem;color:var(--gris-ardoise);font-style:italic;margin-top:20px;border-top:1px solid rgba(176,138,79,.15);padding-top:14px} .doc-body strong{color:var(--ivoire);font-weight:600} @media(max-width:520px){.doc-body{padding:20px 18px 26px}} /* ============ MODALE — DÉMARRER UN PROJET ============ */ .pj-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px); background:rgba(6,12,22,.80);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .45s ease} .pj-overlay.show{opacity:1;pointer-events:auto} body.pj-lock{overflow:hidden} .pj-modal{position:relative;display:flex;width:min(1000px,100%);max-height:min(94vh,860px);overflow:hidden; background:var(--noir-encre);border:1px solid rgba(176,138,79,.32);border-radius:18px; box-shadow:0 50px 120px -30px rgba(0,0,0,.8);transform:translateY(26px) scale(.985);opacity:0;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s ease} .pj-overlay.show .pj-modal{transform:none;opacity:1} /* Panneau de marque (gauche) */ .pj-aside{position:relative;flex:0 0 38%;max-width:380px;padding:clamp(28px,3vw,44px);overflow:hidden; background:linear-gradient(165deg,var(--bleu-700),var(--bleu-nuit) 55%,var(--bleu-900));border-right:1px solid rgba(176,138,79,.18)} .pj-aside .pj-mono{position:absolute;right:-46px;bottom:-40px;width:230px;height:230px;color:rgba(176,138,79,.10);pointer-events:none} .pj-aside .pj-mono svg{width:100%;height:100%} .pj-eyebrow{display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:22px} .pj-eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--or),var(--rouge))} .pj-aside h2{position:relative;z-index:1;font-family:var(--font-titre);font-weight:400;color:#fff;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.12;margin-bottom:20px} .pj-aside .pj-intro{position:relative;z-index:1;color:var(--gris-clair);font-size:.95rem;line-height:1.65;margin-bottom:28px;max-width:300px} .pj-assur{position:relative;z-index:1;list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:30px} .pj-assur li{display:flex;gap:13px;align-items:flex-start;color:var(--ivoire-2);font-size:.9rem;line-height:1.5} .pj-assur svg{flex:none;width:20px;height:20px;color:var(--or-clair);margin-top:1px} .pj-aside .pj-contact{position:relative;z-index:1;border-top:1px solid rgba(176,138,79,.2);padding-top:20px;font-size:.85rem;color:var(--gris-clair);line-height:1.7} .pj-aside .pj-contact a{color:var(--or-clair);text-decoration:none} .pj-aside .pj-contact a:hover{text-decoration:underline} /* Zone formulaire (droite) */ .pj-main{flex:1;display:flex;flex-direction:column;min-width:0} .pj-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px clamp(24px,3vw,38px) 0} .pj-head .pj-kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);font-weight:700} .pj-head h3{font-family:var(--font-titre);color:#fff;font-weight:500;font-size:1.5rem;margin-top:6px} .pj-x{flex:none;background:none;border:1px solid rgba(176,138,79,.3);color:var(--gris-clair);width:38px;height:38px;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer;transition:color .3s,border-color .3s,transform .3s,background .3s} .pj-x:hover{color:#fff;border-color:var(--or);transform:rotate(90deg)} /* Stepper */ .pj-stepper{position:relative;padding:22px clamp(24px,3vw,38px) 6px} .pj-line{position:absolute;left:calc(clamp(24px,3vw,38px) + 18px);right:calc(clamp(24px,3vw,38px) + 18px);top:40px;height:2px;background:rgba(176,138,79,.22);border-radius:2px} .pj-line-fill{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--or),var(--rouge-clair));transition:width .5s cubic-bezier(.2,.7,.2,1)} .pj-nodes{position:relative;display:flex;justify-content:space-between} .pj-node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1} .pj-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:600; background:var(--noir-encre);border:1px solid rgba(176,138,79,.35);color:var(--gris-clair);transition:all .4s ease} .pj-node label{font-size:.72rem;letter-spacing:.04em;color:var(--gris-ardoise);transition:color .4s ease;white-space:nowrap} .pj-node.done .pj-num{background:rgba(176,138,79,.16);border-color:var(--or);color:var(--or-clair)} .pj-node.is-active .pj-num{background:linear-gradient(140deg,var(--or),var(--rouge));border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px rgba(168,21,21,.7)} .pj-node.is-active label{color:var(--ivoire)} .pj-node.done label{color:var(--gris-clair)} /* Corps défilant */ .pj-body{flex:1;overflow-y:auto;padding:18px clamp(24px,3vw,38px) 8px} .pj-step{display:none} .pj-step.active{display:block;animation:pjFade .5s cubic-bezier(.2,.7,.2,1) both} @keyframes pjFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .pj-step h4{font-family:var(--font-titre);color:#fff;font-weight:500;font-size:1.2rem;margin-bottom:4px} .pj-step .pj-sub{color:var(--gris-clair);font-size:.88rem;margin-bottom:18px} .pj-group{margin-bottom:20px} .pj-group>.pj-glabel{display:block;font-size:.78rem;letter-spacing:.04em;color:var(--or-clair);text-transform:uppercase;font-weight:600;margin-bottom:11px} /* Cartes sélectionnables (multi) */ .pj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .pj-opt{position:relative;display:flex;align-items:center;gap:12px;padding:14px 15px;border:1px solid rgba(176,138,79,.26);border-radius:11px;cursor:pointer;background:rgba(255,255,255,.015);transition:border-color .3s,background .3s,transform .3s} .pj-opt:hover{border-color:rgba(176,138,79,.55);background:rgba(176,138,79,.06);transform:translateY(-1px)} .pj-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0} .pj-opt-check{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(176,138,79,.5);display:flex;align-items:center;justify-content:center;transition:all .3s ease} .pj-opt-check::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--rouge-clair);transform:scale(0);transition:transform .25s cubic-bezier(.2,.9,.3,1.6)} .pj-opt-label{font-size:.9rem;color:var(--ivoire-2);line-height:1.35} .pj-opt:has(input:checked){border-color:var(--or);background:linear-gradient(120deg,rgba(176,138,79,.14),rgba(168,21,21,.06))} .pj-opt:has(input:checked) .pj-opt-check{border-color:var(--or);background:rgba(176,138,79,.18)} .pj-opt:has(input:checked) .pj-opt-check::after{transform:scale(1)} .pj-opt:focus-within{outline:2px solid rgba(200,168,113,.5);outline-offset:2px} /* Puces radio (cadre) */ .pj-chips{display:flex;flex-wrap:wrap;gap:9px} .pj-chip{position:relative;display:inline-flex;align-items:center;padding:9px 16px;border:1px solid rgba(176,138,79,.3);border-radius:30px;cursor:pointer;font-size:.85rem;color:var(--gris-clair);background:rgba(255,255,255,.015);transition:all .3s ease} .pj-chip:hover{border-color:rgba(176,138,79,.6);color:var(--ivoire-2)} .pj-chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0} .pj-chip:has(input:checked){border-color:transparent;background:linear-gradient(135deg,var(--or),var(--rouge));color:#fff;box-shadow:0 8px 18px -8px rgba(168,21,21,.6)} .pj-chip:focus-within{outline:2px solid rgba(200,168,113,.5);outline-offset:2px} /* Champs */ .pj-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pj-field{display:flex;flex-direction:column;gap:6px} .pj-field.col2{grid-column:1 / -1} .pj-field label{font-size:.78rem;color:var(--gris-clair)} .pj-field label .req{color:var(--rouge-clair)} .pj-field input,.pj-field textarea{background:rgba(255,255,255,.05);border:1px solid rgba(176,138,79,.3);border-radius:9px;padding:12px 14px;color:var(--ivoire);font-family:inherit;font-size:.92rem;outline:none;transition:border-color .3s,box-shadow .3s,background .3s;width:100%} .pj-field textarea{resize:vertical;min-height:96px;line-height:1.6} .pj-field input:focus,.pj-field textarea:focus{border-color:var(--or);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(176,138,79,.16)} .pj-field input::placeholder,.pj-field textarea::placeholder{color:var(--gris-ardoise)} .pj-field.err input,.pj-field.err textarea{border-color:var(--rouge-clair);box-shadow:0 0 0 3px rgba(168,21,21,.15)} .pj-consent{display:flex;gap:11px;align-items:flex-start;margin-top:4px;font-size:.82rem;color:var(--gris-clair);line-height:1.5;cursor:pointer} .pj-consent input{flex:none;margin-top:2px;width:17px;height:17px;accent-color:var(--or)} .pj-consent a{color:var(--or-clair);text-decoration:underline} .pj-consent.err{color:var(--rouge-clair)} /* Honeypot anti-spam : invisible, hors flux, non focusable */ .pj-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden} /* Champ fichier élégant */ .pj-file{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px dashed rgba(176,138,79,.4);border-radius:10px;cursor:pointer;background:rgba(255,255,255,.02);transition:border-color .3s,background .3s} .pj-file:hover{border-color:var(--or);background:rgba(176,138,79,.06)} .pj-file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} .pj-file svg{flex:none;width:20px;height:20px;color:var(--or-clair)} .pj-file-text{font-size:.9rem;color:var(--gris-clair)} .pj-file.has-file{border-style:solid;border-color:var(--or)} .pj-file.has-file .pj-file-text{color:var(--ivoire-2)} .pj-file:focus-within{outline:2px solid rgba(200,168,113,.5);outline-offset:2px} /* Montage CAPTCHA (vide tant que la clé n'est pas posée) */ .pj-captcha:empty{display:none} .pj-captcha{margin:6px 0 14px} .pj-err{display:none;color:var(--rouge-clair);font-size:.8rem;margin-top:10px} .pj-err.show{display:block;animation:pjFade .3s ease both} /* Récapitulatif */ .pj-recap{list-style:none;display:flex;flex-direction:column;gap:0;border:1px solid rgba(176,138,79,.2);border-radius:12px;overflow:hidden} .pj-recap li{display:flex;gap:14px;padding:13px 16px;border-bottom:1px solid rgba(176,138,79,.12);font-size:.88rem} .pj-recap li:last-child{border-bottom:none} .pj-recap .k{flex:0 0 38%;color:var(--or-clair);font-weight:600} .pj-recap .v{flex:1;color:var(--ivoire-2);line-height:1.5;word-break:break-word} .pj-recap .v.muted{color:var(--gris-ardoise)} /* Pied de modale */ .pj-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px clamp(24px,3vw,38px);border-top:1px solid rgba(176,138,79,.18);background:rgba(8,16,28,.4)} .pj-foot .pj-count{font-size:.78rem;color:var(--gris-ardoise);letter-spacing:.04em} .pj-foot .pj-actions{display:flex;gap:10px} .pj-btn{font-family:inherit;font-weight:600;font-size:.85rem;letter-spacing:.02em;border-radius:8px;padding:12px 22px;cursor:pointer;border:1px solid transparent;transition:all .35s ease;display:inline-flex;align-items:center;gap:8px} .pj-btn-ghost{background:transparent;border-color:rgba(176,138,79,.4);color:var(--ivoire-2)} .pj-btn-ghost:hover{border-color:var(--or);color:#fff} .pj-btn-primary{position:relative;overflow:hidden;background:var(--rouge);color:#fff} .pj-btn-primary:hover{background:var(--rouge-clair);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(168,21,21,.7)} .pj-btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s cubic-bezier(.2,.7,.2,1)} .pj-btn-primary:hover::before{transform:translateX(130%)} .pj-btn svg{width:16px;height:16px} /* Succès */ .pj-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px)} .pj-success.show{display:flex;animation:pjFade .55s ease both} .pj-check{width:84px;height:84px;margin-bottom:26px} .pj-check circle{fill:none;stroke:var(--or);stroke-width:3;stroke-dasharray:264;stroke-dashoffset:264;animation:pjDraw .9s cubic-bezier(.2,.7,.2,1) .15s forwards} .pj-check path{fill:none;stroke:var(--rouge-clair);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:pjDraw .5s cubic-bezier(.2,.7,.2,1) .9s forwards} @keyframes pjDraw{to{stroke-dashoffset:0}} .pj-success h3{font-family:var(--font-titre);color:#fff;font-weight:500;font-size:1.7rem;margin-bottom:12px} .pj-success p{color:var(--gris-clair);font-size:.95rem;line-height:1.7;max-width:440px;margin-bottom:8px} .pj-success .pj-ref{margin:18px 0 26px;font-size:.82rem;letter-spacing:.05em;color:var(--or-clair);border:1px dashed rgba(176,138,79,.4);border-radius:8px;padding:10px 18px} .pj-success .pj-success-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} /* Responsive */ @media(max-width:860px){ .pj-modal{flex-direction:column;max-height:94vh} .pj-aside{flex:none;max-width:none;border-right:none;border-bottom:1px solid rgba(176,138,79,.18);padding:24px 26px} .pj-aside h2{font-size:1.45rem;margin-bottom:14px} .pj-aside .pj-intro{margin-bottom:0} .pj-assur,.pj-aside .pj-contact{display:none} .pj-aside .pj-mono{width:150px;height:150px;right:-30px;bottom:-26px} } @media(max-width:560px){ .pj-grid,.pj-fields{grid-template-columns:1fr} .pj-node label{display:none} .pj-foot{flex-direction:column-reverse;align-items:stretch} .pj-foot .pj-actions{justify-content:space-between} .pj-btn{flex:1;justify-content:center} } @media (prefers-reduced-motion: reduce){ .pj-overlay,.pj-modal,.pj-step.active,.pj-success.show{transition:none;animation:none} .pj-check circle,.pj-check path{animation:none;stroke-dashoffset:0} .pj-btn-primary::before{display:none} } @media (prefers-reduced-motion: reduce){.slide,.hero-inner{transition:none}} /* ---------- bande logos / confiance ---------- */ .trust{background:var(--bleu-900);padding:34px 0;border-top:1px solid rgba(176,138,79,.12);border-bottom:1px solid rgba(176,138,79,.12)} .trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap} .trust .label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-ardoise);font-weight:700;white-space:nowrap} .trust .doms{display:flex;gap:38px;flex-wrap:wrap} .trust .doms .dom-link{position:relative;font-size:.86rem;letter-spacing:.04em;color:var(--gris-clair);font-weight:500;padding-bottom:3px;transition:color .3s} .trust .doms .dom-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--or);transition:width .35s ease} .trust .doms .dom-link:hover{color:var(--blanc)} .trust .doms .dom-link:hover::after{width:100%} .exp.flash{animation:expflash 1.7s cubic-bezier(.2,.7,.2,1)} @keyframes expflash{ 0%{box-shadow:inset 0 0 0 0 rgba(176,138,79,0)} 12%{box-shadow:inset 0 0 0 3px rgba(176,138,79,.95)} 100%{box-shadow:inset 0 0 0 0 rgba(176,138,79,0)}} .exp.flash::before{height:100%} /* ============================================================ SECTIONS GÉNÉRIQUES ============================================================ */ section{position:relative} .sec{padding:clamp(80px,11vw,150px) 0} .sec-light{background:var(--ivoire);color:var(--noir-encre)} .sec-light .eyebrow{color:var(--rouge)} .sec-light .eyebrow::before{background:var(--or)} .sec-dark{background:var(--bleu-nuit)} .sec-encre{background:var(--noir-encre)} .sec-head{max-width:760px;margin-bottom:64px} .sec-head h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:400;margin:22px 0 0} .sec-light .sec-head h2{color:var(--bleu-nuit)} .sec-head p{font-size:1.06rem;margin-top:22px;color:var(--gris-ardoise);max-width:620px} .sec-dark .sec-head p,.sec-encre .sec-head p{color:var(--gris-clair)} /* ---------- EXPERTISES ---------- */ .grid-exp{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:rgba(176,138,79,.18);border:1px solid rgba(176,138,79,.18)} .exp{ background:var(--ivoire);padding:48px 40px;position:relative; transition:background .4s ease, transform .4s ease;overflow:hidden; } .exp .num{font-family:var(--font-titre);font-size:.95rem;color:var(--or);letter-spacing:.1em} .exp h3{font-size:1.5rem;margin:18px 0 14px;color:var(--bleu-nuit);font-weight:500} .exp p{font-size:.95rem;color:var(--gris-ardoise);line-height:1.7} .exp .ico{position:absolute;right:30px;top:40px;width:30px;height:30px;color:var(--or);opacity:.55;transition:.4s} .exp::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--rouge);transition:height .45s ease} .exp:hover{background:var(--bleu-nuit)} .exp:hover::before{height:100%} .exp:hover h3{color:var(--blanc)} .exp:hover p{color:var(--gris-clair)} .exp:hover .num{color:var(--or-clair)} .exp:hover .ico{color:var(--or-clair);opacity:1;transform:rotate(8deg)} .exp-tier{margin-top:0} .exp-tier + .exp-tier{margin-top:48px} .tier-label{display:inline-flex;align-items:center;gap:14px;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--rouge);margin-bottom:20px} .tier-label::before{content:"";width:30px;height:1px;background:var(--or)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} @media(max-width:1000px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.grid-4,.grid-3{grid-template-columns:1fr}} /* ---------- APPROCHE ---------- */ .approche{background:var(--bleu-nuit)} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;position:relative;padding-top:1px} /* Rail : conteneur (un seul enfant non-.step pour préserver les nth-child) */ .steps-rail{position:absolute;top:0;left:0;height:1px;width:100%} .rail-base{position:absolute;inset:0;background:rgba(176,138,79,.16)} .rail-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0); background:linear-gradient(90deg,rgba(176,138,79,.55),rgba(200,168,113,.85)); box-shadow:0 0 12px rgba(200,168,113,.25); transition:transform 1.5s cubic-bezier(.3,.7,.2,1) .15s} .steps.in .rail-fill{transform:scaleX(1)} /* Comète : balaye les quatre temps en continu, élégamment */ .rail-comet{position:absolute;top:50%;left:0;width:120px;height:2px; transform:translateY(-50%);border-radius:3px;opacity:0;pointer-events:none; background:linear-gradient(90deg,transparent,var(--or-clair) 52%,#fff 80%,transparent); box-shadow:0 0 16px 1px rgba(200,168,113,.5)} .steps.in .rail-comet{animation:railComet 6.5s cubic-bezier(.45,.05,.5,.95) 1.7s infinite} @keyframes railComet{ 0%{left:-7%;opacity:0} 7%{opacity:1} 62%{opacity:1} 90%{opacity:0} 100%{left:100%;opacity:0} } .step{padding:38px 32px 38px 0;position:relative;opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .steps.in .step{opacity:1;transform:none} .steps.in .step:nth-child(2){transition-delay:.10s} .steps.in .step:nth-child(3){transition-delay:.22s} .steps.in .step:nth-child(4){transition-delay:.34s} .steps.in .step:nth-child(5){transition-delay:.46s} .step .st-num{font-family:var(--font-titre);font-size:3.2rem;color:rgba(176,138,79,.4);font-weight:300;line-height:1} /* Les chiffres s'illuminent en or au passage, puis se posent — en cascade */ .steps.in .step .st-num{animation:numGlow 1.7s ease-out both} .steps.in .step:nth-child(2) .st-num{animation-delay:.50s} .steps.in .step:nth-child(3) .st-num{animation-delay:.68s} .steps.in .step:nth-child(4) .st-num{animation-delay:.86s} .steps.in .step:nth-child(5) .st-num{animation-delay:1.04s} @keyframes numGlow{ 0%{color:rgba(176,138,79,.1);text-shadow:none} 45%{color:rgba(200,168,113,.95);text-shadow:0 0 22px rgba(200,168,113,.45)} 100%{color:rgba(176,138,79,.4);text-shadow:none} } .step h3{font-size:1.25rem;color:var(--blanc);margin:18px 0 10px;font-weight:500} .step p{font-size:.92rem;color:var(--gris-clair);line-height:1.65;max-width:280px} .step .dot{position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--rouge);transform:scale(0);transition:transform .55s cubic-bezier(.2,.9,.3,1.5);box-shadow:0 0 0 0 rgba(168,21,21,0)} .step .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(176,138,79,.55);opacity:0} .steps.in .step .dot{transform:scale(1)} .steps.in .step:nth-child(2) .dot{transition-delay:.30s} .steps.in .step:nth-child(3) .dot{transition-delay:.45s} .steps.in .step:nth-child(4) .dot{transition-delay:.60s} .steps.in .step:nth-child(5) .dot{transition-delay:.75s} /* Pulsations en vague (décalées d'un temps à l'autre) */ .steps.in .step .dot::after{animation:ring 3.4s ease-out 1.1s infinite} .steps.in .step:nth-child(3) .dot::after{animation-delay:1.35s} .steps.in .step:nth-child(4) .dot::after{animation-delay:1.6s} .steps.in .step:nth-child(5) .dot::after{animation-delay:1.85s} @keyframes ring{0%{opacity:.65;transform:scale(.6)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0}} @media (prefers-reduced-motion: reduce){ .steps .step{opacity:1;transform:none} .rail-fill{transform:scaleX(1);transition:none} .rail-comet{display:none} .steps.in .step .st-num{animation:none;color:rgba(176,138,79,.4)} .step .dot{transform:scale(1)}.steps.in .step .dot::after{animation:none} } /* ---------- RÉALISATIONS ---------- */ .cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:30px} .case{ background:linear-gradient(165deg,var(--bleu-700),var(--bleu-900)); border:1px solid rgba(176,138,79,.18);border-radius:3px;overflow:hidden; transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease; position:relative; } .case .visual{height:200px;position:relative;overflow:hidden;background:var(--bleu-900);display:flex;align-items:center;justify-content:center} .case .visual .mono{width:130px;color:rgba(176,138,79,.16);transition:.6s} .case .visual .tag{position:absolute;top:18px;left:18px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair);background:rgba(8,22,39,.7);padding:6px 12px;border:1px solid rgba(176,138,79,.3);border-radius:2px} .case .body{padding:30px} .case h3{font-size:1.35rem;color:var(--blanc);font-weight:500;margin-bottom:12px} .case p{font-size:.92rem;color:var(--gris-clair);line-height:1.65;margin-bottom:20px} .case .more{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-clair);font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:gap .3s} .case:hover{transform:translateY(-8px);border-color:rgba(176,138,79,.5);box-shadow:0 30px 60px -25px rgba(0,0,0,.7)} .case:hover .visual .mono{transform:scale(1.12) rotate(6deg);color:rgba(176,138,79,.28)} .case:hover .more{gap:14px} .case .meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair);font-weight:700} .case .meta::before{content:"";width:20px;height:1px;background:var(--or)} .case .actors{margin-top:2px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-clair);font-weight:700;display:flex;align-items:center;gap:10px} .case .actors::before{content:"";width:16px;height:1px;background:var(--rouge)} .cases.featured{grid-template-columns:repeat(2,1fr)} .case-feat .visual{height:230px} .case-feat h3{font-size:1.6rem} @media(max-width:760px){.cases.featured{grid-template-columns:1fr}} /* ---------- RÉFÉRENCES & CONFIANCE ---------- */ .refs{background:var(--bleu-900);border-top:1px solid rgba(176,138,79,.16)} .refs .inner{text-align:center;max-width:780px;margin:0 auto} .refs h2{font-size:clamp(1.8rem,3.8vw,2.8rem);color:#fff;font-weight:400;margin:22px 0 0} .refs p{color:var(--gris-clair);margin:24px auto 0;font-size:1.04rem;max-width:620px;line-height:1.75} .partners-band{position:relative;max-width:1040px;margin:54px auto 0} /* Trait supérieur qui se trace à l'apparition */ .partners-band::before{content:"";display:block;height:1px;width:100%;margin:0 auto 46px; background:linear-gradient(90deg,transparent,rgba(176,138,79,.55) 18%,rgba(176,138,79,.55) 82%,transparent); transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .partners-band.in::before{transform:scaleX(1)} .partners{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(28px,4.6vw,60px);flex-wrap:wrap;padding-bottom:18px} .partner{position:relative;font-family:var(--font-titre);font-size:clamp(1.2rem,2.3vw,1.7rem);color:var(--gris-clair);letter-spacing:.01em;font-weight:500;opacity:.8;white-space:nowrap;z-index:1; -webkit-box-reflect:below 3px linear-gradient(transparent,transparent 60%,rgba(244,241,234,.12)); transition:color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease, text-shadow .45s ease} /* Séparateur doré dégradé */ .partner:not(:first-child)::before{content:"";position:absolute;left:calc(-1 * clamp(14px,2.3vw,30px));top:50%;transform:translateY(-50%);width:1px;height:1.1em;background:linear-gradient(rgba(176,138,79,0),rgba(176,138,79,.5),rgba(176,138,79,0))} /* Soulignement animé or → Rouge Cardinal */ .partner::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--or-clair),var(--rouge-clair)); transform:scaleX(0);transform-origin:left; transition:transform .65s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, height .3s ease} /* Faisceau lumineux qui balaie la rangée en continu */ .partners .scan{position:absolute;top:50%;left:0;width:150px;height:150%; transform:translate(-60%,-50%);pointer-events:none;opacity:0;z-index:2;border-radius:50%; background:radial-gradient(ellipse 80px 70px at center,rgba(255,247,235,.32),rgba(200,168,113,.20) 42%,rgba(168,21,21,.12) 64%,transparent 76%); filter:blur(5px);mix-blend-mode:screen} .refs .partners-band.in .scan{animation:scanSweep 7.5s cubic-bezier(.45,.05,.5,.95) 1.8s infinite} @keyframes scanSweep{0%{left:-4%;opacity:0}9%{opacity:1}86%{opacity:1}100%{left:100%;opacity:0}} /* Apparition en cascade, dans l'ordre */ .refs .partners-band .partner{opacity:0;transform:translateY(18px)} .refs .partners-band.in .partner{opacity:.8;transform:none;transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1), color .45s ease, text-shadow .45s ease} .refs .partners-band.in .partner:nth-child(1){transition-delay:.10s} .refs .partners-band.in .partner:nth-child(2){transition-delay:.24s} .refs .partners-band.in .partner:nth-child(3){transition-delay:.38s} .refs .partners-band.in .partner:nth-child(4){transition-delay:.52s} .refs .partners-band.in .partner::after{transform:scaleX(1)} .refs .partners-band.in .partner:nth-child(1)::after{transition-delay:.34s} .refs .partners-band.in .partner:nth-child(2)::after{transition-delay:.48s} .refs .partners-band.in .partner:nth-child(3)::after{transition-delay:.62s} .refs .partners-band.in .partner:nth-child(4)::after{transition-delay:.76s} .partner:hover{color:var(--blanc);opacity:1;transform:translateY(-4px);text-shadow:0 6px 22px rgba(0,0,0,.45)} .partner:hover::after{height:3px;box-shadow:0 0 16px rgba(168,21,21,.6),0 0 8px rgba(200,168,113,.55)} @media(max-width:620px){.partner:not(:first-child)::before{display:none}.partner{-webkit-box-reflect:none}} @media (prefers-reduced-motion: reduce){ .refs .partners-band .partner{opacity:.8;transform:none} .refs .partners-band.in .partner::after{transform:scaleX(1);transition:none} .partners-band::before{transform:scaleX(1)} .partners .scan{display:none} } .refs .closing{font-family:var(--font-titre);font-style:italic;font-weight:300;color:var(--or-clair);font-size:clamp(1.05rem,2vw,1.35rem);margin-top:46px} /* ---------- VALEURS / CABINET ---------- */ .cabinet{background:var(--ivoire);color:var(--noir-encre)} .cab-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center} .cab-left h2{position:relative;font-size:clamp(2rem,4vw,3.2rem);color:var(--bleu-nuit);font-weight:400;margin:22px 0 34px} .cab-left h2::after{content:"";position:absolute;left:0;bottom:-12px;height:3px;width:66px;border-radius:3px; background:linear-gradient(90deg,var(--or),var(--rouge));transform:scaleX(0);transform-origin:left; transition:transform .85s cubic-bezier(.2,.7,.2,1) .35s} .cab-left.in h2::after{transform:scaleX(1)} .cab-left p{color:var(--gris-ardoise);font-size:1.04rem;margin-bottom:20px;max-width:520px} .cab-quote{position:relative;font-family:var(--font-titre);font-style:italic;font-size:1.5rem;color:var(--bleu-nuit);font-weight:300;padding-left:26px;margin-top:34px;line-height:1.4} .cab-quote::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px; background:linear-gradient(var(--or),var(--rouge));transform:scaleY(0);transform-origin:top; transition:transform .8s cubic-bezier(.2,.7,.2,1) .5s} .cab-left.in .cab-quote::before{transform:scaleY(1)} .values{display:flex;flex-direction:column;gap:0} .value{position:relative;padding:30px 0 30px 4px;border-top:1px solid rgba(176,138,79,.3);display:flex;gap:24px;align-items:flex-start; transition:background .45s ease, padding-left .45s cubic-bezier(.2,.7,.2,1)} .value:last-child{border-bottom:1px solid rgba(176,138,79,.3)} /* Barre d'accent Rouge Cardinal au survol */ .value::before{content:"";position:absolute;left:-16px;top:50%;width:3px;height:60%;border-radius:3px; background:linear-gradient(var(--rouge),var(--rouge-clair)); transform:translateY(-50%) scaleY(0);transform-origin:center; transition:transform .5s cubic-bezier(.2,.7,.2,1)} .value:hover::before{transform:translateY(-50%) scaleY(1)} /* Balayage doré (apparition en cascade) */ .value::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(115deg,transparent 36%,rgba(176,138,79,.16) 50%,transparent 64%); transform:translateX(-130%)} .values.in .value::after{animation:valSweep 1.5s cubic-bezier(.2,.7,.2,1) both} .values.in .value:nth-child(1)::after{animation-delay:.35s} .values.in .value:nth-child(2)::after{animation-delay:.55s} .values.in .value:nth-child(3)::after{animation-delay:.75s} @keyframes valSweep{0%{transform:translateX(-130%)}60%{transform:translateX(130%)}100%{transform:translateX(130%)}} .value:hover{background:linear-gradient(90deg,rgba(176,138,79,.10),rgba(176,138,79,0) 72%);padding-left:14px} .value>div,.value .vico{position:relative;z-index:1} /* Picto : anneau qui se dessine */ .value .vico{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--or);transition:color .4s ease, transform .5s cubic-bezier(.2,.7,.2,1)} .value .vico .vico-ring{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg);overflow:visible} .value .vico .vico-ring circle{fill:none;stroke:var(--or);stroke-width:1.2;stroke-linecap:round; stroke-dasharray:142;stroke-dashoffset:142;transition:stroke-dashoffset 1.05s cubic-bezier(.2,.7,.2,1), stroke .4s ease} .values.in .value .vico .vico-ring circle{stroke-dashoffset:0} .values.in .value:nth-child(1) .vico-ring circle{transition-delay:.20s} .values.in .value:nth-child(2) .vico-ring circle{transition-delay:.36s} .values.in .value:nth-child(3) .vico-ring circle{transition-delay:.52s} .value .vico-ic{position:relative;z-index:2} .value:hover .vico{color:var(--rouge-clair);transform:scale(1.06) rotate(-4deg)} .value:hover .vico .vico-ring circle{stroke:var(--rouge-clair)} .value h3{font-size:1.3rem;color:var(--bleu-nuit);font-weight:500;margin-bottom:6px;transition:color .35s ease} .value:hover h3{color:var(--rouge)} .value p{font-size:.94rem;color:var(--gris-ardoise);line-height:1.6} @media (prefers-reduced-motion: reduce){ .cab-left.in h2::after,.cab-left.in .cab-quote::before{transform:none;transition:none} .values.in .value .vico-ring circle{stroke-dashoffset:0;transition:none} .values.in .value::after{animation:none} } /* ---------- CTA BAND ---------- */ .cta{ background: radial-gradient(100% 120% at 80% 0%, rgba(22,64,110,.5),transparent 60%), linear-gradient(140deg,#0B1F3A,#081627); text-align:center;position:relative;overflow:hidden; } .cta-mono{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:560px;color:rgba(176,138,79,.05)} .cta .wrap{position:relative;z-index:2} .cta h2{font-size:clamp(2.2rem,5vw,4rem);color:var(--blanc);font-weight:400;max-width:780px;margin:24px auto 0} .cta h2 em{font-style:italic;font-weight:300;color:var(--or-clair)} .cta p{color:var(--gris-clair);max-width:520px;margin:24px auto 40px;font-size:1.05rem} .cta .hero-cta{justify-content:center} /* ---------- CONTACT / FOOTER ---------- */ .foot{background:var(--noir-encre);padding-top:clamp(70px,9vw,110px)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:60px} .foot .brand .name{font-size:1.5rem} .foot-about{color:var(--gris-clair);font-size:.95rem;line-height:1.7;margin:24px 0;max-width:340px} .foot-tag{font-family:var(--font-titre);font-style:italic;color:var(--or-clair);font-size:1.05rem} .foot col-h,.foot h4{position:relative;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:22px;display:inline-block;padding-bottom:8px} .foot-grid h4::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:26px;background:linear-gradient(90deg,var(--or),var(--rouge));transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1) .2s} .foot-grid.in h4::after{transform:scaleX(1)} .foot .brand{transition:transform .4s ease} .foot .brand:hover{transform:translateY(-2px)} .foot ul{list-style:none} .foot ul li{margin-bottom:13px} .foot ul li a,.foot ul li{color:var(--gris-clair);font-size:.92rem;transition:color .35s} .foot ul li a{position:relative;display:inline-block;padding-bottom:2px} .foot ul li a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:linear-gradient(90deg,var(--or-clair),var(--rouge-clair));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)} .foot ul li a:hover{color:var(--blanc)} .foot ul li a:hover::after{transform:scaleX(1)} .foot .contact-line{display:block;margin-bottom:13px;color:var(--gris-clair);font-size:.92rem} .foot .contact-line--ico{display:flex;align-items:flex-start;gap:11px;line-height:1.5} .foot .contact-line--ico>svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--or-clair);opacity:.85;transition:opacity .35s,transform .35s} .foot .contact-line--ico:hover>svg{opacity:1;transform:translateY(-1px)} .foot .contact-line a{position:relative;display:inline-block;transition:color .35s} .foot .contact-line a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:linear-gradient(90deg,var(--or-clair),var(--rouge-clair));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)} .foot .contact-line a:hover{color:var(--or-clair)} .foot .contact-line a:hover::after{transform:scaleX(1)} .foot-bottom{border-top:1px solid rgba(176,138,79,.18);padding:26px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px} @media (prefers-reduced-motion: reduce){ .foot-news.in .nl-txt h4::after,.foot-grid.in h4::after{transform:scaleX(1);transition:none} .socials.stagger>a{opacity:1;transform:none} .nl-row button::before{display:none} } .foot-bottom p{font-size:.78rem;color:var(--gris-ardoise);letter-spacing:.04em} .foot-bottom .legal{display:flex;gap:24px;flex-wrap:wrap} /* ============================================================ ANIMATIONS ============================================================ */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* Révélation en cascade : les enfants arrivent l'un après l'autre, en rythme */ .stagger>*{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1)} .stagger.in>*{opacity:1;transform:none} .stagger.in>*:nth-child(2){transition-delay:.12s} .stagger.in>*:nth-child(3){transition-delay:.24s} .stagger.in>*:nth-child(4){transition-delay:.36s} .stagger.in>*:nth-child(5){transition-delay:.48s} /* Reflet lumineux qui balaie la carte au survol */ .case::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(115deg,transparent 32%,rgba(200,168,113,.12) 50%,transparent 68%); transform:translateX(-120%);transition:transform 1s cubic-bezier(.2,.7,.2,1)} .case:hover::after{transform:translateX(120%)} @media (prefers-reduced-motion: reduce){ .stagger>*{opacity:1;transform:none;transition:none} .case::after{display:none} } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:860px){ .navlinks{ position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(320px,80vw); background:var(--bleu-900);flex-direction:column;justify-content:center; gap:30px;transform:translateX(24px);opacity:0;visibility:hidden; transition:transform .4s ease,opacity .4s ease,visibility .4s ease; border-left:1px solid rgba(176,138,79,.2);z-index:99;padding:40px; } .navlinks.open{transform:none;opacity:1;visibility:visible} .menu-toggle{display:flex;z-index:101} .menu-toggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle.x span:nth-child(2){opacity:0} .menu-toggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .cab-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:36px} .hero-meta{gap:28px} } /* ============================================================ AJOUTS v15 — Cards enrichies, infobulles, section IA & DX, gouvernance, globe international, triptyque ============================================================ */ /* — Justification corporate du corps de texte — */ .exp p,.case p,.lab-card p,.gov-card p,.acc-body p,.globe-txt p,.tri-card p, .sec-head p,.cab-left p,.foot-about{ text-align:justify; text-justify:inter-word; hyphens:auto; } .sec-head p{ text-align:center; } /* — Card d'expertise enrichie — */ .exp{ overflow:visible; } /* permet à l'infobulle de déborder proprement */ .exp:hover,.exp:focus-within{ z-index:6; } .exp .ico-wrap{ position:absolute; right:26px; top:34px; } .exp .ico-wrap[data-go]{ cursor:pointer; border-radius:10px; } .exp .ico-wrap[data-go]:focus-visible{ outline:2px solid var(--or-clair); outline-offset:4px; } .exp .ico-wrap[data-go]::after{ content:""; position:absolute; right:-7px; bottom:-7px; width:13px; height:13px; border-radius:50%; background:var(--or-clair); color:var(--bleu-900); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='3'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; opacity:0; transform:scale(.6); transition:opacity .35s, transform .35s; box-shadow:0 4px 10px -3px rgba(0,0,0,.5); } .exp:hover .ico-wrap[data-go]::after,.exp:focus-within .ico-wrap[data-go]::after{ opacity:1; transform:scale(1); } .exp .ico{ position:static; width:30px; height:30px; color:var(--or); opacity:.55; transition:.4s; } .exp:hover .ico,.exp:focus-visible .ico{ color:var(--or-clair); opacity:1; transform:rotate(8deg); } .exp .exp-accroche{ font-family:var(--font-titre); font-style:italic; font-weight:300; font-size:1.04rem; color:var(--rouge); margin:0 0 12px; text-align:left; line-height:1.4; } .exp:hover .exp-accroche,.exp:focus-within .exp-accroche{ color:var(--or-clair); } .exp .exp-keys{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid rgba(176,138,79,.22); display:flex; flex-wrap:wrap; gap:8px 10px; } .exp .exp-keys li{ font-size:.74rem; letter-spacing:.02em; color:var(--gris-ardoise); font-weight:600; background:rgba(176,138,79,.10); border:1px solid rgba(176,138,79,.22); padding:5px 11px; border-radius:999px; transition:.4s; } .exp:hover .exp-keys{ border-top-color:rgba(200,168,113,.4); } .exp:hover .exp-keys li,.exp:focus-within .exp-keys li{ color:var(--ivoire-2); border-color:rgba(200,168,113,.4); background:rgba(200,168,113,.10); } /* — Infobulle élégante (icône expertise) — */ .exp-tip{ position:absolute; top:calc(100% + 12px); right:-6px; width:max-content; max-width:230px; background:var(--bleu-900); color:var(--ivoire); font-family:var(--font-texte); font-size:.78rem; font-weight:500; line-height:1.5; letter-spacing:0; text-align:left; padding:11px 14px; border:1px solid rgba(200,168,113,.34); border-radius:10px; box-shadow:0 22px 44px -22px rgba(0,0,0,.7); opacity:0; transform:translateY(-6px) scale(.97); transform-origin:top right; pointer-events:none; transition:opacity .28s ease, transform .28s ease; z-index:8; } .exp-tip::before{ content:""; position:absolute; top:-5px; right:18px; width:10px; height:10px; rotate:45deg; background:var(--bleu-900); border-left:1px solid rgba(200,168,113,.34); border-top:1px solid rgba(200,168,113,.34); } .exp .ico-wrap:hover .exp-tip,.exp:focus-within .exp-tip{ opacity:1; transform:translateY(0) scale(1); } /* ============================================================ SECTION IA & TRANSFORMATION (fc-lab) ============================================================ */ .fc-lab .sec-head{ margin-bottom:34px; } .lab-tabs{ display:flex; gap:10px; justify-content:center; margin:0 auto 40px; flex-wrap:wrap; } .lab-tab{ font-family:var(--font-texte); font-size:.92rem; font-weight:700; letter-spacing:.02em; color:var(--gris-clair); background:transparent; border:1px solid rgba(176,138,79,.32); padding:12px 26px; border-radius:999px; cursor:pointer; transition:.35s; } .lab-tab:hover{ color:var(--ivoire); border-color:rgba(200,168,113,.6); } .lab-tab.is-active{ color:var(--bleu-900); background:linear-gradient(135deg,#C8A871,#9b7a45); border-color:transparent; } .lab-panel{ display:none; animation:labFade .5s cubic-bezier(.2,.7,.2,1); } .lab-panel.is-active{ display:block; } @keyframes labFade{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } .lab-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; } .lab-card{ position:relative; background:linear-gradient(160deg,rgba(22,64,110,.42),rgba(8,22,39,.6)); border:1px solid rgba(176,138,79,.2); border-radius:16px; padding:34px 30px 30px; overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s, box-shadow .45s; } .lab-card::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% 0,rgba(200,168,113,.14),transparent 60%); opacity:0; transition:opacity .5s; pointer-events:none; } .lab-card:hover{ transform:translateY(-7px); border-color:rgba(200,168,113,.5); box-shadow:0 34px 64px -30px rgba(0,0,0,.8); } .lab-card:hover::after{ opacity:1; } .lab-num{ font-family:var(--font-titre); font-size:.9rem; color:var(--or-clair); letter-spacing:.12em; } .lab-ico{ position:absolute; top:30px; right:28px; width:30px; height:30px; color:var(--or); opacity:.6; transition:.45s; } .lab-ico svg{ width:100%; height:100%; } .lab-card:hover .lab-ico{ color:var(--or-clair); opacity:1; transform:rotate(6deg); } .lab-card h3{ font-size:1.4rem; color:var(--blanc); margin:14px 0 12px; font-weight:500; } .lab-card p{ font-size:.92rem; color:var(--gris-clair); line-height:1.7; } .lab-list{ list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid rgba(176,138,79,.18); display:flex; flex-direction:column; gap:8px; } .lab-list li{ position:relative; padding-left:20px; font-size:.84rem; color:var(--ivoire-2); } .lab-list li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--or); box-shadow:0 0 0 3px rgba(176,138,79,.18); } /* — Accordéons — */ .lab-acc{ margin-top:26px; border-top:1px solid rgba(176,138,79,.16); } .acc{ border-bottom:1px solid rgba(176,138,79,.16); } .acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 4px; font-family:var(--font-titre); font-size:1.1rem; font-weight:500; color:var(--ivoire); transition:color .3s; } .acc summary::-webkit-details-marker{ display:none; } .acc summary:hover{ color:var(--or-clair); } .acc .acc-x{ width:22px; height:22px; color:var(--or-clair); flex:none; transition:transform .4s ease; } .acc[open] .acc-x{ transform:rotate(180deg); } .acc-body{ overflow:hidden; } .acc-body p{ padding:0 4px 22px; font-size:.92rem; color:var(--gris-clair); line-height:1.75; max-width:920px; } .acc[open] .acc-body{ animation:accOpen .45s ease; } @keyframes accOpen{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} } /* — Confiance & gouvernance — */ .gov{ margin-top:64px; padding-top:54px; border-top:1px solid rgba(176,138,79,.18); } .gov-head{ max-width:760px; } .gov-head h3{ font-size:clamp(1.5rem,3vw,2.1rem); color:var(--blanc); font-weight:500; margin:14px 0 14px; } .gov-head p{ color:var(--gris-clair); font-size:1rem; line-height:1.75; text-align:justify; } .gov-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:36px 0 30px; } .gov-card{ background:rgba(11,31,58,.5); border:1px solid rgba(176,138,79,.2); border-radius:14px; padding:26px 24px; transition:transform .4s, border-color .4s; } .gov-card:hover{ transform:translateY(-5px); border-color:rgba(200,168,113,.45); } .gov-ico{ display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:12px; background:rgba(200,168,113,.12); border:1px solid rgba(200,168,113,.3); color:var(--or-clair); margin-bottom:16px; } .gov-ico svg{ width:23px; height:23px; } .gov-card h4{ font-family:var(--font-titre); font-size:1.12rem; color:var(--blanc); font-weight:500; margin-bottom:8px; } .gov-card p{ font-size:.86rem; color:var(--gris-clair); line-height:1.6; } .gov-quote{ font-family:var(--font-titre); font-style:italic; font-weight:300; font-size:clamp(1.1rem,2.2vw,1.4rem); color:var(--or-clair); line-height:1.5; max-width:900px; padding-left:22px; border-left:3px solid var(--rouge); } /* ============================================================ GLOBE INTERNATIONAL ============================================================ */ .globe-sec{ overflow:hidden; } .globe-wrap{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,5vw,70px); } .globe-txt h2{ margin:14px 0 18px; } .globe-txt p{ color:var(--gris-clair); font-size:1.02rem; line-height:1.75; } .globe-points{ list-style:none; margin:26px 0 0; display:flex; flex-direction:column; gap:14px; } .globe-points li{ display:flex; align-items:center; gap:14px; font-size:.95rem; color:var(--ivoire-2); } .gp-dot{ width:9px; height:9px; border-radius:50%; background:var(--or-clair); box-shadow:0 0 0 4px rgba(200,168,113,.16); flex:none; } .globe-stage{ display:flex; justify-content:center; } .globe-sys{ width:min(460px,92%); height:auto; } .globe-glow{ animation:globePulse 6s ease-in-out infinite; transform-origin:230px 230px; transform-box:view-box; } .globe-grid{ transform-origin:230px 230px; transform-box:view-box; } .globe-par{ /* parallèles statiques (axe de rotation vertical) */ } .globe-merid{ animation:globeTurn 14s ease-in-out infinite; transform-origin:230px 230px; transform-box:view-box; } .globe-dots circle{ transform-origin:230px 230px; } .globe-orbit-dot{ transform-origin:230px 230px; transform-box:view-box; animation:globeComet 14s linear infinite; } @keyframes globeSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes globeTurn{ 0%,100%{ transform:scaleX(1) } 50%{ transform:scaleX(-1) } } @keyframes globePulse{ 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.6;transform:scale(1.05)} } @keyframes globeComet{ from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes dotTwinkle{ 0%,100%{opacity:.35} 50%{opacity:1} } /* ============================================================ TRIPTYQUE — POUR QUI / CAS D'USAGE / ENGAGEMENTS ============================================================ */ .tri-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; align-items:stretch; } .tri-card{ position:relative; display:flex; flex-direction:column; background:var(--blanc); border:1px solid rgba(176,138,79,.24); border-radius:16px; padding:36px 30px 32px; overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s; } .tri-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg,var(--or),var(--or-clair)); opacity:.55; transition:opacity .45s; } .tri-card:hover{ transform:translateY(-6px); box-shadow:0 32px 60px -32px rgba(11,31,58,.35); border-color:rgba(176,138,79,.5); } .tri-card:hover::before{ opacity:1; } .tri-card h3{ font-family:var(--font-titre); font-size:1.35rem; color:var(--bleu-nuit); font-weight:500; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(176,138,79,.24); } .tri-list{ list-style:none; display:flex; flex-direction:column; gap:12px; } .tri-list li{ position:relative; padding-left:24px; font-size:.92rem; color:var(--gris-ardoise); line-height:1.5; text-align:left; } .tri-list li::before{ content:""; position:absolute; left:0; top:6px; width:11px; height:11px; border-radius:3px; border:1.5px solid var(--or); transition:background .35s, border-color .35s; } .tri-card:hover .tri-list li::before{ background:rgba(176,138,79,.18); border-color:var(--or-clair); } /* ============================================================ RESPONSIVE — ajouts v15 ============================================================ */ @media(max-width:880px){ .globe-wrap{ grid-template-columns:1fr; } .globe-stage{ order:-1; margin-bottom:8px; } .globe-sys{ width:min(360px,80%); } } @media(max-width:600px){ .exp .exp-tip{ display:none; } /* infobulles masquées proprement sur mobile */ .lab-tab{ padding:11px 20px; font-size:.86rem; } .lab-card{ padding:28px 22px; } .gov-quote{ font-size:1.05rem; } .globe-sys{ width:min(300px,86%); } } /* — Accessibilité mouvement — */ @media (prefers-reduced-motion: reduce){ .globe-glow,.globe-grid,.globe-orbit-dot,.globe-dots circle{ animation:none !important; } .lab-panel{ animation:none; } .acc[open] .acc-body{ animation:none; } } /* ============================================================ v16 — Constellation orbitale : micro-nœuds lumineux (enrichit le système orbital existant, sans le modifier) ============================================================ */ .fc-dust{ transform-origin:300px 300px; transform-box:view-box; } .orbit-sys .fc-dust{ animation:fcDustDrift 120s linear infinite; } .fc-dust circle{ transform-box:fill-box; transform-origin:center; will-change:opacity; } .fc-dust .fcd{ animation:fcDustTwinkle var(--td,5s) ease-in-out var(--tdl,0s) infinite; } @keyframes fcDustTwinkle{ 0%,100%{opacity:var(--o0,.18)} 50%{opacity:var(--o1,.8)} } @keyframes fcDustDrift{ from{transform:rotate(0)} to{transform:rotate(360deg)} } /* l'orbite gauche (plus discrète) garde des poussières encore plus douces */ .hero-orbit--left .fc-dust circle{ opacity:.5; } @media (prefers-reduced-motion: reduce){ .orbit-sys .fc-dust{ animation:none !important; } .fc-dust .fcd{ animation:none !important; opacity:.45 !important; } } /* ============================================================ v17 — Module « repères » public optionnel (masqué par défaut) ============================================================ */ .foot-stats{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 30px; margin:0 0 46px; padding:26px 30px; border:1px solid rgba(176,138,79,.2); border-radius:16px; background:linear-gradient(160deg,rgba(22,64,110,.28),rgba(8,22,39,.34)); } .foot-stats[hidden]{ display:none; } .fs-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; min-width:120px; } .fs-k{ font-family:var(--font-titre); font-size:1.7rem; font-weight:400; color:var(--or-clair); line-height:1; } .fs-v{ font-size:.78rem; letter-spacing:.04em; color:var(--gris-clair); text-transform:uppercase; } .fs-sep{ width:1px; height:34px; background:linear-gradient(180deg,transparent,rgba(176,138,79,.4),transparent); } @media(max-width:640px){ .fs-sep{ display:none; } .foot-stats{ gap:22px; padding:24px 20px; } } /* ============================================================ v18 — Statut d'envoi des formulaires (succès / repli) ============================================================ */ .pj-send-status{ font-size:.86rem; line-height:1.5; margin:-8px 0 22px; padding:10px 16px; border-radius:8px; max-width:440px; transition:opacity .3s; } .pj-send-status:empty{ display:none; } .pj-send-status.is-sending{ color:var(--gris-clair); } .pj-send-status.is-ok{ color:#1f7a4d; background:rgba(31,122,77,.08); border:1px solid rgba(31,122,77,.28); } .pj-send-status.is-fallback{ color:#8a5a1f; background:rgba(176,138,79,.1); border:1px solid rgba(176,138,79,.34); } /* ============================================================ v18 — Animations métier ciblées (au survol uniquement, sobres) ============================================================ */ @media (prefers-reduced-motion: no-preference){ #exp-01:hover .ico{ animation:icoBreath 2.4s ease-in-out infinite; } /* SI : micro-connexion */ #exp-02:hover .ico{ animation:icoPulse 1.7s ease-in-out infinite; } /* IA : pulsation contrôlée */ #exp-03:hover .ico{ animation:icoBreath 2.6s ease-in-out infinite; } /* stratégie : respiration */ #exp-04:hover .ico{ animation:icoSlide 1.9s ease-in-out infinite; } /* transformation : glissement */ #exp-05:hover .ico{ animation:icoBob 2.1s ease-in-out infinite; } /* sourcing : sélection */ #exp-06:hover .ico{ animation:icoSignal 1.8s ease-in-out infinite; } /* intermédiation : signal */ #exp-07:hover .ico{ animation:icoSpin 9s linear infinite; } /* supply chain : flux/rotation */ } @keyframes icoBreath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} } @keyframes icoPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.13);opacity:.85} } @keyframes icoSlide{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} } @keyframes icoBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} } @keyframes icoSignal{ 0%,100%{opacity:1} 50%{opacity:.45} } @keyframes icoSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} } /* ============================================================ v19 — Sélecteur de langue · Graphe de fréquentation · Satellites d'expertise cliquables · CAPTCHA ============================================================ */ /* — Sélecteur de langue (nav) — */ .lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px 6px;border:1px solid rgba(176,138,79,.34);border-radius:999px;background:rgba(255,255,255,.04)} .lang-switch .lang-globe{width:15px;height:15px;color:var(--or-clair);margin:0 3px 0 2px;opacity:.85;flex:none} .lang-btn{appearance:none;border:none;background:transparent;color:var(--gris-clair);font-family:var(--font-texte);font-weight:700;font-size:.72rem;letter-spacing:.06em;padding:4px 8px;border-radius:999px;cursor:pointer;transition:color .25s ease,background .25s ease} .lang-btn:hover{color:var(--blanc)} .lang-btn.is-active{background:var(--or);color:var(--bleu-900)} .lang-btn:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px} /* — Graphe de fréquentation (footer) — */ .foot-visits{margin:8px 0 6px;padding:26px 28px;border-radius:16px; background:linear-gradient(180deg,rgba(176,138,79,.06),rgba(255,255,255,.02)); border:1px solid rgba(176,138,79,.18); display:grid;grid-template-columns:minmax(190px,260px) 1fr;gap:22px 34px;align-items:center} .fv-head{display:flex;flex-direction:column;gap:8px} .fv-eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair)} .fv-count{display:flex;flex-direction:column;gap:2px} .fv-num{font-family:var(--font-titre);font-weight:400;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums} .fv-label{font-size:.82rem;line-height:1.5;color:var(--gris-clair)} .fv-since{color:var(--or-clair);white-space:nowrap} .fv-chart{display:flex;align-items:flex-end;gap:clamp(3px,1vw,7px);height:74px;min-width:0} .fv-bar{flex:1 1 0;min-width:3px;border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,var(--or-clair),rgba(176,138,79,.35)); height:6px;transform-origin:bottom;transition:height 1.1s cubic-bezier(.2,.7,.2,1);position:relative} .fv-bar.is-today{background:linear-gradient(180deg,#E2BE84,var(--or))} .fv-bar::after{content:attr(data-day);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%) translateY(4px); font-size:.64rem;color:var(--blanc);background:var(--bleu-700);border:1px solid rgba(176,138,79,.4); padding:3px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease} .fv-bar:hover::after,.fv-bar:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)} .fv-foot{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-size:.72rem;color:var(--gris-ardoise);letter-spacing:.02em} .fv-dot{width:7px;height:7px;border-radius:50%;background:var(--or-clair);box-shadow:0 0 0 0 rgba(200,168,113,.6);animation:pulse 2.6s infinite} @media(max-width:720px){ .foot-visits{grid-template-columns:1fr;gap:18px;padding:22px 20px} .fv-chart{height:62px} } @media(prefers-reduced-motion: reduce){ .fv-bar{transition:none} .fv-dot{animation:none} } /* — Satellites d'expertise cliquables (système orbital du hero) — */ .slide:not(.active) .hero-orbit{pointer-events:none} .hero-orbit{pointer-events:none} /* l'orbite ne capte rien… */ .orbit-sys .fc-sat[role="link"]{pointer-events:auto;cursor:pointer} /* …sauf les satellites */ .orbit-sys .fc-sat[role="link"] .fc-sat-ring{transition:r .25s ease,stroke-width .25s ease,opacity .25s ease} .orbit-sys .fc-sat[role="link"]:hover .fc-sat-ring, .orbit-sys .fc-sat[role="link"]:focus-visible .fc-sat-ring{r:24;stroke-width:2;opacity:1} .orbit-sys .fc-sat[role="link"]:hover .fc-sat-ic, .orbit-sys .fc-sat[role="link"]:focus-visible .fc-sat-ic{color:#fff} .orbit-sys .fc-sat[role="link"]:focus{outline:none} .orbit-sys .fc-sat[role="link"]:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px;border-radius:50%} .orbit-sys .fc-sat--accent[role="link"]:hover .fc-sat-ring, .orbit-sys .fc-sat--accent[role="link"]:focus-visible .fc-sat-ring{stroke:var(--rouge-clair)} /* — CAPTCHA (Turnstile) : intégration sobre — */ .pj-captcha{margin:10px 0 14px;min-height:0} .pj-captcha .cf-turnstile,.pj-captcha iframe{max-width:100%} /* ============================================================ v20 — RESPONSIVE PREMIUM, MODALES MOBILES, 7 TEMPS, REFLET LOGO, ÉTATS UI, DIAGRAMME — sans régression v19 ============================================================ */ /* — Garde anti-débordement horizontal, toutes tailles — */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* Clipping horizontal sûr : sur le body uniquement. (overflow-x:hidden sur html OU overflow-x:clip sur body se propage au viewport et bloque le défilement vertical — à ne pas utiliser ici.) */ html{ overflow-x:clip; } body{ overflow-x:clip; } html,body{ max-width:100%; } img,svg,video,canvas{ max-width:100%; } *{ min-width:0; } /* — Hauteur du hero : viewport mobile fiable (barres navigateur) — */ .hero{ min-height:100svh; } @supports (height:100dvh){ .hero{ min-height:100dvh; } } /* — Conteneurs flex des modales : autoriser le scroll interne — */ .pj-main{ min-height:0; } .pj-body{ min-height:0; -webkit-overflow-scrolling:touch; } /* ============================================================ MODALES « Démarrer un projet » + « Nous écrire » (≤ 760px) Feuille plein écran, en-tête compact, corps défilant, pied collant ============================================================ */ @media (max-width:760px){ .pj-overlay{ padding:0; align-items:stretch; justify-content:stretch; } .pj-modal{ width:100%; max-width:100%; height:100svh; max-height:100svh; border:none; border-radius:0; flex-direction:column; } .pj-aside{ flex:none; max-width:none; padding:16px 18px 14px; border-right:none; border-bottom:1px solid rgba(176,138,79,.18); } .pj-aside .pj-eyebrow{ font-size:.62rem; } .pj-aside h2{ font-size:1.18rem; line-height:1.18; margin-bottom:6px; } .pj-aside .pj-intro{ font-size:.85rem; line-height:1.5; max-width:none; margin-bottom:0; } .pj-assur,.pj-aside .pj-contact{ display:none; } .pj-aside .pj-mono{ width:118px; height:118px; right:-22px; bottom:-20px; } .pj-main{ flex:1 1 auto; min-height:0; } .pj-head{ padding:16px 18px 0; } .pj-head h3{ font-size:1.2rem; } .pj-stepper{ padding-left:18px; padding-right:18px; } .pj-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 18px 10px; } .pj-foot{ position:sticky; bottom:0; z-index:2; padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(8,16,28,.96); backdrop-filter:blur(8px); } } @supports (height:100dvh){ @media (max-width:760px){ .pj-modal{ height:100dvh; max-height:100dvh; } } } /* — Ergonomie tactile : champs ≥ 16px (anti-zoom iOS), cibles confortables — */ @media (max-width:760px){ .pj-body input,.pj-body select,.pj-body textarea{ font-size:16px; min-height:46px; } .pj-body textarea{ min-height:104px; } .pj-consent{ align-items:flex-start; } .pj-btn{ min-height:46px; } .pj-x,.ck-modal-head .x,.doc-head .x{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; } } /* — Modales secondaires (cookies, documents légaux) : plein écran sous 560px — */ @media (max-width:560px){ .ck-overlay,.doc-overlay{ padding:0; align-items:stretch; } .ck-modal,.doc-modal{ width:100%; max-width:100%; height:100svh; max-height:100svh; border:none; border-radius:0; } .ck-modal{ overflow-y:auto; } } @supports (height:100dvh){ @media (max-width:560px){ .ck-modal,.doc-modal{ height:100dvh; max-height:100dvh; } } } /* — Chatbot : feuille basse propre sur petits écrans — */ @media (max-width:520px){ .chat-panel{ max-height:min(70svh,560px); } } @supports (height:100dvh){ @media (max-width:520px){ .chat-panel{ max-height:min(70dvh,560px); } } } /* ============================================================ AFFINEMENTS PAR PALIERS (très petits écrans) ============================================================ */ @media (max-width:420px){ .wrap,.container{ padding-left:18px; padding-right:18px; } } @media (max-width:360px){ .nav .btn-primary{ padding-left:14px; padding-right:14px; } } /* ============================================================ LES 7 TEMPS — séquence méthodologique (timeline premium) ============================================================ */ .temps{ margin-top:46px; display:grid; gap:14px; grid-template-columns:repeat(4,1fr); } .temps .tp{ position:relative; padding:22px 20px 22px; border:1px solid rgba(176,138,79,.16); border-radius:6px; background:linear-gradient(160deg,rgba(176,138,79,.05),rgba(11,31,58,0)); transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .4s ease; } .temps .tp:hover{ transform:translateY(-4px); border-color:rgba(176,138,79,.4); box-shadow:0 18px 40px -24px rgba(0,0,0,.7); } .temps .tp .tp-num{ font-family:var(--font-titre); font-size:1.05rem; font-weight:500; color:var(--or-clair); letter-spacing:.04em; display:inline-flex; align-items:center; gap:9px; margin-bottom:12px; } .temps .tp .tp-num i{ width:30px; height:30px; flex:none; border-radius:50%; border:1px solid rgba(176,138,79,.45); display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:.82rem; color:var(--or-clair); background:rgba(176,138,79,.08); } .temps .tp h3{ color:#fff; font-size:1.02rem; font-weight:600; margin-bottom:8px; line-height:1.25; } .temps .tp p{ color:var(--gris-clair); font-size:.85rem; line-height:1.6; } /* Le 7e temps — accent Rouge Cardinal discret (point d'attention) */ .temps .tp.tp-key{ border-color:rgba(194,52,43,.32); } .temps .tp.tp-key .tp-num i{ border-color:rgba(194,52,43,.55); color:var(--rouge-clair); background:rgba(168,21,21,.08); } .temps .tp.tp-key:hover{ box-shadow:0 18px 40px -22px rgba(168,21,21,.45); } /* Note éditoriale sous le titre de section Approche */ .approche .sec-lead{ max-width:760px; } .approche .lead-discernement{ color:var(--gris-clair); font-size:1rem; line-height:1.7; margin-top:14px; max-width:760px; } @media (max-width:1024px){ .temps{ grid-template-columns:repeat(3,1fr); } } @media (max-width:760px){ .temps{ grid-template-columns:repeat(2,1fr); gap:12px; } .temps .tp{ padding:18px 16px; } } @media (max-width:440px){ .temps{ grid-template-columns:1fr; } } /* ============================================================ FOOTER — reflet inversé subtil sous le logo (signature premium) ============================================================ */ .brand-foot-wrap{ position:relative; display:inline-block; line-height:0; } .brand-foot-wrap .brand-logo-foot{ display:block; -webkit-box-reflect:below 2px linear-gradient(to bottom,transparent 38%,rgba(255,255,255,.16) 100%); } /* ============================================================ ÉTATS UI — focus visible homogène, disabled, loading ============================================================ */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,[tabindex]:focus-visible,.fc-sat:focus-visible{ outline:2px solid var(--or-clair); outline-offset:3px; border-radius:4px; } button:disabled,.pj-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; } .is-loading{ position:relative; color:transparent !important; pointer-events:none; } .is-loading::after{ content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:fcSpin .7s linear infinite; } @keyframes fcSpin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .is-loading::after{ animation-duration:1.4s; } } /* ============================================================ v20 — Module Fréquentation & Présence (sci-fi sobre) ============================================================ */ #fcVisits{ position:relative; overflow:hidden; } /* Trame technologique discrète + halo */ #fcVisits::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(176,138,79,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(176,138,79,.05) 1px,transparent 1px); background-size:30px 30px; mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 75%); -webkit-mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 75%); } /* Scanline animée (désactivable via reduced-motion) */ .fv-scan{ position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; z-index:1; background:linear-gradient(90deg,transparent,rgba(200,168,113,.5),transparent); opacity:.0; } @media (prefers-reduced-motion: no-preference){ .fv-scan{ animation:fvScan 6.5s ease-in-out infinite; } @keyframes fvScan{ 0%{ top:0; opacity:0 } 12%{ opacity:.7 } 88%{ opacity:.7 } 100%{ top:100%; opacity:0 } } } #fcVisits>*{ position:relative; z-index:2; } /* Barre : tooltip accessible au survol/focus */ .fv-bar{ cursor:default; } .fv-bar:hover,.fv-bar:focus-visible{ filter:brightness(1.25); } /* Libellé « mode prudence » (caché en mode public) */ .fv-sober{ display:none; font-family:var(--font-titre); font-size:1.15rem; color:var(--or-clair); } #fcVisits[data-mode="sober"] .fv-num, #fcVisits[data-mode="sober"] .fv-label{ display:none; } #fcVisits[data-mode="sober"] .fv-sober{ display:inline-block; } /* État vide / fallback */ .fv-empty{ color:var(--gris-ardoise); font-size:.85rem; line-height:1.5; margin:10px 0 0; } /* Présence multi-territoires */ .fv-presence{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(176,138,79,.14); } .fv-pres-title{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--or); font-weight:700; margin-right:2px; } .fv-node{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--gris-clair); cursor:default; border-radius:20px; padding:3px 4px; transition:color .3s ease; outline-offset:3px; } .fv-node:hover,.fv-node:focus-visible{ color:#fff; } .fv-node i{ width:8px; height:8px; border-radius:50%; background:var(--or-clair); box-shadow:0 0 0 0 rgba(200,168,113,.5); flex:none; } .fv-node-key i{ background:var(--rouge-clair); box-shadow:0 0 0 0 rgba(194,52,43,.55); } @media (prefers-reduced-motion: no-preference){ .fv-node i{ animation:fvPulse 2.6s ease-in-out infinite; } .fv-node-key i{ animation:fvPulse 2.2s ease-in-out infinite; } @keyframes fvPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(200,168,113,.45) } 50%{ box-shadow:0 0 0 5px rgba(200,168,113,0) } } } /* Tooltip premium */ .fv-tip{ position:absolute; z-index:5; pointer-events:none; transform:translate(-50%,-118%); background:rgba(8,16,28,.96); border:1px solid rgba(176,138,79,.4); border-radius:8px; padding:8px 11px; font-size:.76rem; line-height:1.35; color:var(--ivoire,#EFE7DA); white-space:nowrap; box-shadow:0 14px 30px -12px rgba(0,0,0,.7); opacity:0; transition:opacity .18s ease; } .fv-tip.show{ opacity:1; } .fv-tip b{ color:var(--or-clair); font-weight:600; } .fv-tip .up{ color:#7FbF8f; } .fv-tip .down{ color:var(--rouge-clair); } @media (max-width:520px){ .fv-presence{ gap:8px 12px; } .fv-node{ font-size:.76rem; } } /* v20 — Offset du header fixe pour le défilement vers les ancres/routes */ html{ scroll-padding-top:84px; } section[id], footer[id], [id="contact"]{ scroll-margin-top:84px; } @media (max-width:860px){ html{ scroll-padding-top:70px; } section[id], footer[id], [id="contact"]{ scroll-margin-top:70px; } } /* v20 — Orbite décorative contenue sur très petits écrans (anti-débordement) */ @media (max-width:480px){ .hero-orbit{ width:min(440px,88vw); right:-16%; } .hero-orbit--left{ width:min(440px,88vw)!important; left:-16%!important; } } @media (max-width:360px){ .hero-orbit{ width:min(380px,86vw); right:-20%; opacity:.92; } .hero-orbit--left{ width:min(380px,86vw)!important; left:-20%!important; } } /* v20 — Contention de l'orbite décorative sur très petits écrans (≤380px) */ @media (max-width:380px){ .hero-orbit{ width:min(360px,80vw); right:-8%; } .hero-orbit .orbit-sys{ overflow:hidden; } .hero-orbit--left{ left:-8%!important; width:min(360px,80vw)!important; } } /* ============================================================ v21 — Vérification humaine, flash cards, micro-animations, module Présence numérique (pays + horloge), reflets ============================================================ */ /* — Vérification humaine intégrée (anti-bot, sans dépendance) — */ .fc-check{ margin-top:4px; } .fc-check-btn{ display:inline-flex; align-items:center; gap:11px; cursor:pointer; background:rgba(8,16,28,.5); border:1px solid rgba(176,138,79,.3); border-radius:10px; padding:11px 14px; color:var(--gris-clair); font:inherit; font-size:.86rem; transition:all .3s ease; width:100%; } .fc-check-btn:hover{ border-color:rgba(176,138,79,.55); } .fc-check-box{ position:relative; width:22px; height:22px; flex:none; border-radius:6px; border:1.5px solid rgba(176,138,79,.55); display:inline-flex; align-items:center; justify-content:center; color:#7FBF8F; background:rgba(8,16,28,.6); } .fc-check-box svg{ width:15px; height:15px; opacity:0; transform:scale(.4); transition:all .3s cubic-bezier(.2,.8,.2,1); } .fc-check-spin{ position:absolute; inset:0; margin:auto; width:15px; height:15px; border:2px solid rgba(200,168,113,.35); border-top-color:var(--or-clair); border-radius:50%; opacity:0; } .fc-check-label{ flex:1; text-align:left; } .fc-check-badge{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--or); border:1px solid rgba(176,138,79,.3); border-radius:20px; padding:3px 9px; } .fc-check.is-verifying .fc-check-spin{ opacity:1; animation:fcSpin .7s linear infinite; } .fc-check.is-verified .fc-check-box{ border-color:#7FBF8F; background:rgba(127,191,143,.12); } .fc-check.is-verified .fc-check-box svg{ opacity:1; transform:scale(1); } .fc-check.is-verified .fc-check-btn{ border-color:rgba(127,191,143,.5); color:#fff; } .fc-check.is-verified .fc-check-badge{ color:#7FBF8F; border-color:rgba(127,191,143,.45); } .fc-check.is-error .fc-check-btn{ border-color:var(--rouge-clair); animation:fcShake .4s ease; } @keyframes fcShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } @media (prefers-reduced-motion: reduce){ .fc-check.is-error .fc-check-btn{ animation:none; } } /* — Mise en évidence d'une card d'expertise (bascule depuis l'icône) — */ .exp.is-flash{ animation:expFlash 1.6s cubic-bezier(.2,.7,.2,1); } @keyframes expFlash{ 0%{ box-shadow:0 0 0 0 rgba(200,168,113,0); } 18%{ box-shadow:0 0 0 2px rgba(200,168,113,.55), 0 18px 50px -22px rgba(176,138,79,.5); } 100%{ box-shadow:0 0 0 0 rgba(200,168,113,0); } } @media (prefers-reduced-motion: reduce){ .exp.is-flash{ animation:none; outline:2px solid var(--or-clair); outline-offset:2px; } } /* — Micro-animations sobres des icônes d'expertise (survol/focus) — */ .exp .ico{ transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease; } .exp:hover .ico, .exp:focus-within .ico{ filter:drop-shadow(0 0 6px rgba(200,168,113,.4)); } .exp .ico-wrap:hover .ico, .exp .ico-wrap:focus-visible .ico{ transform:translateY(-1px) scale(1.06); } @media (prefers-reduced-motion: no-preference){ .exp:hover .ico, .exp:focus-within .ico{ animation:icoPulse 2.4s ease-in-out infinite; } @keyframes icoPulse{ 0%,100%{ filter:drop-shadow(0 0 4px rgba(200,168,113,.25)); } 50%{ filter:drop-shadow(0 0 9px rgba(200,168,113,.55)); } } } /* — Module Présence numérique : grille deux colonnes + reflets — */ .fv-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:30px 40px; align-items:start; } .fv-col-geo{ border-left:1px solid rgba(176,138,79,.14); padding-left:32px; } .fv-today{ font-size:.82rem; color:var(--gris-clair); margin:2px 0 14px; } .fv-today b{ color:var(--or-clair); font-family:var(--font-titre); font-size:1rem; } /* Provenance par pays */ .fv-countries{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; } .fv-c{ display:grid; grid-template-columns:1fr 70px auto; align-items:center; gap:10px; font-size:.82rem; color:var(--gris-clair); outline-offset:3px; } .fv-c-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fv-c-bar{ height:5px; border-radius:3px; background:rgba(176,138,79,.14); overflow:hidden; } .fv-c-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--or),var(--or-clair)); border-radius:3px; box-shadow:0 0 8px rgba(200,168,113,.4); } .fv-c-val{ font-family:var(--font-titre); color:#fff; font-size:.86rem; min-width:22px; text-align:right; } .fv-c-key .fv-c-bar i{ background:linear-gradient(90deg,var(--rouge),var(--rouge-clair)); box-shadow:0 0 8px rgba(194,52,43,.45); } .fv-c-key .fv-c-name{ color:#fff; } /* Horloge temps réel */ .fv-clock{ display:flex; gap:14px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid rgba(176,138,79,.12); } .fv-z{ display:flex; flex-direction:column; gap:1px; } .fv-z-city{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--or); font-weight:700; } .fv-z-time{ font-family:var(--font-titre); font-size:1.18rem; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.02em; } .fv-z-utc{ font-size:.6rem; color:var(--gris-ardoise); letter-spacing:.05em; } .fv-tip-sub{ color:var(--gris-ardoise); font-size:.68rem; } /* Reflet/profondeur subtils du module */ #fcVisits{ background:linear-gradient(180deg,rgba(176,138,79,.04),rgba(8,16,28,0) 60%); border-radius:12px; } #fcVisits::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(200,168,113,.3),transparent); } @media (max-width:860px){ .fv-grid{ grid-template-columns:1fr; gap:24px; } .fv-col-geo{ border-left:none; padding-left:0; border-top:1px solid rgba(176,138,79,.14); padding-top:22px; } } @media (max-width:520px){ .fv-z-time{ font-size:1.05rem; } .fv-c{ grid-template-columns:1fr 54px auto; } } /* ============================================================ v22 — Tableau de bord « Présence numérique » (refonte) KPIs, sections, partages, continents, horloge mondiale, modes ============================================================ */ .fv-board-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .fv-updated{ font-size:.7rem; color:var(--gris-ardoise); letter-spacing:.04em; font-variant-numeric:tabular-nums; } .fv-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; } .fv-kpi{ display:flex; flex-direction:column; gap:3px; padding:16px 18px; border:1px solid rgba(176,138,79,.16); border-radius:12px; background:linear-gradient(160deg,rgba(176,138,79,.06),rgba(8,16,28,.2)); position:relative; overflow:hidden; } .fv-kpi::after{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(200,168,113,.35),transparent); } .fv-kpi-val{ font-family:var(--font-titre); font-size:2rem; line-height:1; color:#fff; font-variant-numeric:tabular-nums; } .fv-kpi-lab{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--or); font-weight:700; } .fv-kpi-sub{ font-size:.66rem; color:var(--gris-ardoise); } .fv-sub-title{ display:block; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--or); font-weight:700; margin:0 0 10px; } .fv-sub-cont{ margin-top:22px; } .fv-engage{ display:grid; grid-template-columns:1.5fr 1fr; gap:22px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(176,138,79,.12); } .fv-sections{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .fv-s{ display:grid; grid-template-columns:1fr 60px auto; align-items:center; gap:10px; font-size:.8rem; color:var(--gris-clair); } .fv-s-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fv-s-empty{ font-size:.78rem; color:var(--gris-ardoise); font-style:italic; } .fv-eng-share{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .fv-share-val{ font-family:var(--font-titre); font-size:2.1rem; line-height:1; color:var(--or-clair); font-variant-numeric:tabular-nums; } .fv-share-sub{ font-size:.66rem; color:var(--gris-ardoise); letter-spacing:.04em; } .fv-continents{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .fv-ct{ display:grid; grid-template-columns:1fr 60px auto; align-items:center; gap:10px; font-size:.8rem; color:var(--gris-clair); } .fv-ct-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fv-continents .fv-c-bar i{ background:linear-gradient(90deg,rgba(176,138,79,.7),rgba(200,168,113,.9)); } /* Horloge mondiale (5 fuseaux) — pleine largeur */ .fv-clockbar{ margin-top:26px; padding-top:18px; border-top:1px solid rgba(176,138,79,.14); } .fv-clock{ display:flex; gap:22px; flex-wrap:wrap; margin-top:6px; padding-top:0; border-top:none; } .fv-clock .fv-z{ display:flex; flex-direction:column; gap:1px; min-width:84px; } .fv-clock .fv-z-time{ font-size:1.12rem; } .fv-demo{ color:var(--gris-ardoise); font-style:italic; } /* Modes d'affichage */ #fcVisits[data-mode="sober"] .fv-kpis, #fcVisits[data-mode="sober"] .fv-grid, #fcVisits[data-mode="sober"] .fv-engage{ display:none; } #fcVisits[data-mode="sober"] .fv-clockbar{ border-top:none; padding-top:0; } @media (max-width:860px){ .fv-kpis{ grid-template-columns:repeat(2,1fr); } .fv-engage{ grid-template-columns:1fr; gap:18px; } } @media (max-width:520px){ .fv-kpi-val{ font-size:1.6rem; } .fv-clock{ gap:16px; } .fv-clock .fv-z-time{ font-size:1rem; } } /* v22 — neutralise le grid hérité v19 sur le conteneur du tableau de bord (les blocs board-head / KPIs / grille / horloge s'empilent en pleine largeur) */ #fcVisits{ display:block; align-items:initial; } /* ============================================================ v22 — Lisibilité & justification (césure + garde mobile) ============================================================ */ .exp p, .tp p, .globe-txt p, .fc-lab p, .exp-accroche{ text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; } .sec-head p, .cab-left p, .foot-about{ hyphens:auto; -webkit-hyphens:auto; } .exp p, .tp p, .cab-left p, .globe-txt p{ line-height:1.72; } /* Confort de largeur de ligne (mesure typographique) */ .globe-txt p{ max-width:60ch; } /* Sur mobile, on supprime la justification pour éviter les blancs disgracieux */ @media (max-width:600px){ .exp p, .tp p, .globe-txt p, .fc-lab p, .exp-accroche, .sec-head p, .cab-left p, .foot-about{ text-align:left; hyphens:manual; } } /* v22 — section « Pour qui » : 4 cards alignées sur grand écran (Quand inclus) */ @media (min-width:1080px){ #pour-qui .tri-grid{ grid-template-columns:repeat(4,1fr); } }