/* ========================================================================== 
   regenia.io — feuille de styles principale
   Direction artistique : archive éditoriale, chaleureuse et contemporaine
   ========================================================================== */
:root{
   --navy:#1B2845;
   --navy-2:#101a31;
   --navy-3:#31415f;
   --burgundy:#6B2D2D;
   --burgundy-light:#8b4949;
   --olive:#556B2F;
   --olive-light:#778d4e;
   --cream:#f8f6f1;
   --paper:#fffdfa;
   --white:#fff;
   --ink:#20252d;
   --muted:#737983;
   --line:#e6e3dc;
   --light-gray:#f0eee9;
   --shadow:0 18px 45px rgba(27,40,69,.10);
   --radius:4px;
   --serif:'DM Serif Display',Georgia,serif;
   --sans:'Inter',Arial,sans-serif;
}
*{
   box-sizing:border-box;
}
html{
   scroll-behavior:smooth;
}
body{
   margin:0;
   background:var(--cream);
   color:var(--ink);
   font-family:var(--sans);
   font-size:15px;
   line-height:1.65;
}
body:before{
   content:'';
   position:
   fixed;
   inset:0;
   pointer-events:none;
   opacity:.16;
   background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
   z-index:10;
}
h1,h2,h3,p{
   margin-top:0;
}
h1,h2,h3{
   line-height:1.12;
}
h1{
   font-size:clamp(2.8rem,6vw,5.6rem);
   letter-spacing:-.055em;
}
h2{
   font-size:clamp(2rem,4vw,3.3rem);
   letter-spacing:-.04em;
}
h3{
   font-size:1.2rem;
}
em{
   font-family:var(--serif);
   font-weight:400;
   letter-spacing:0;
}
a{
   color:inherit;
   text-decoration:none;
}
button{
   font:inherit;
   cursor: pointer;
}
.container{
   width:min(1160px,calc(100% - 48px));
   margin:auto;
}
.narrow{
   width:min(800px,calc(100% - 48px));
   margin:auto;
}
.site-header{
   position:fixed;
   width: 100%;
   height:80px;
   background:var(--navy);
   color:#fff;
   z-index:20;
}
.nav-shell{
   width:min(1240px,calc(100% - 48px));
   height:100%;
   margin:auto;
   display:flex;
   align-items:center;
   justify-content:space-between;
}
.brand{
   display:flex;
   align-items:center;
   gap:10px;
   font-size:1.2rem;
   font-weight:700;
   letter-spacing:-.04em;
}
.brand-mark{
   display:grid;
   place-items:center;
   width:29px;
   height:29px;
   background:var(--burgundy);
   color:#fff;
   font-family:var(--serif);
   font-size:1.25rem;
   border-radius:50%;
}
.brand-dot{
   color:#c5d08e;
}
.main-nav{
   display:flex;
   align-items:center;
   gap:27px;
   font-size:.82rem;
   font-weight:600;
}
.main-nav a{
   opacity:.8;
   transition:.25s;
}
.main-nav a:hover{
   opacity:1;
   color:#d4df9c;
}
.nav-cta{
   padding:10px 17px;
   border:1px solid rgba(255,255,255,.3);
   opacity:1!important;
}
.menu-toggle{
   display:none;
   background:none;
   border:0;
   color:#fff;
}
.hero{
   position:relative;
   overflow:hidden;
   background:var(--navy);
   color:#fff;
   padding:90px 0 115px;
}
.hero-grid{
   display:grid;
   grid-template-columns:1.02fr .98fr;
   align-items:center;
   gap:70px;
   position:relative;
   z-index:1;
}
.eyebrow{
   text-transform:uppercase;
   letter-spacing:.16em;
   font-size:.67rem;
   font-weight:800;
   color:var(--olive);
   margin-bottom:18px;
}
.eyebrow.light{
   color:#cbd48e;
}
.hero h1{
   max-width:680px;
   margin-bottom:25px;
}
.hero h1 em{
   color:#cbd48e;
}
.hero-lead{
   font-size:1.08rem;
   line-height:1.8;
   color:#dce0e8;
   max-width:560px;
}
.hero-actions{
   display:flex;
   gap:13px;
   flex-wrap:wrap;
   margin:34px 0;
}
.btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:11px;
   border:1px solid transparent;
   padding:14px 22px;
   /*min-height:48px;*/
   font-size:.78rem;
   font-weight:800;
   cursor:pointer;
   transition:transform .2s,background .2s,box-shadow .2s;
}
.btn:hover{
   transform:translateY(-2px);
   box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.btn-primary,.btn-burgundy{
   background:var(--burgundy);
   color:#fff;
   margin-bottom: 10px;
}
.btn-primary:hover,.btn-burgundy:hover{
   background:var(--burgundy-light);
}
.btn-secondary,.btn-olive{
   background:var(--olive);
   color:#fff;
}
.btn-olive:hover{
   background:var(--olive-light);
}
.btn-ghost{
   border-color:rgba(255,255,255,.35);
   color:#fff;
}
.btn-ghost:hover{
   border-color:#fff;
}
.btn-light{
   background:#fff;
   color:var(--navy);
}
.btn-outline-dark{
   border-color:var(--navy);
   color:var(--navy);
   background:transparent;
}
.btn-outline-light{
   border-color:rgba(255,255,255,.5);
   color:#fff;
   background:transparent;
}
.full{
   width:100%
}
.hero-note{
   display:flex;
   align-items:center;
   gap:11px;
   font-size:.74rem;
   color:#c5cad4;
}
.hero-note strong{
   color:white;
}
.avatar-stack{
   display:flex;
}
.avatar-stack i{
   font-style:normal;
   display:grid;
   place-items:center;
   width:25px;
   height:25px;
   margin-right:-6px;
   border:2px solid var(--navy);
   border-radius:50%;
   background:#bd8c68;
   font-size:.62rem;
}
.avatar-stack i:nth-child(2){
   background:#798b64;
}
.avatar-stack i:nth-child(3){
   background:#d0aa76;
}
.hero-art{
   position:relative;
   min-height:405px;
   display:grid;
   place-items:center;
}
.film-card{
   width:min(370px,90%);
   padding:13px;
   background:#fbfaf5;
   color:var(--ink);
   box-shadow:28px 30px 0 rgba(0,0,0,.12);
   transform:rotate(4deg);
}
.film-image{
   height:270px;
   background:linear-gradient(145deg,rgba(45,65,42,.2),rgba(117,55,36,.2)),linear-gradient(35deg,#9b6c45,#c7ad75 48%,#4e654f);
   position:relative;
   display:flex;
   align-items:center;
   justify-content:center;
}
.film-label{
   position:absolute;
   top:15px;
   left:15px;
   text-transform:uppercase;
   font-size:.62rem;
   letter-spacing:.12em;
   color:#fff;
}
.play-icon {
   border:0;
   border-radius:50%;
   background:rgba(255,255,255,.86);
   width:54px;
   height:54px;
   display:grid;
   place-items:center;
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   font-size: 1.5rem;
   color: rgb(52 84 175 / 90%);
   pointer-events: none;
   text-shadow: 0 2px 4px rgba(0,0,0,0.5);
   cursor:pointer;
}

.film-caption{
   display:flex;
   justify-content:space-between;
   padding:15px 4px 7px;
   font-size:.72rem;
   font-weight:700;
}
.film-caption span:last-child{
   color:var(--muted);
}
.film-wave{
   height:16px;
   display:flex;
   align-items:center;
   gap:3px;
}
.film-wave i{
   display:block;
   width:8%;
   height:5px;
   background:var(--olive);
   opacity:.7;
}
.film-wave i:nth-child(2n){
   height:12px;
}
.film-wave i:nth-child(3n){
   height:8px;
}
.art-tag{
   position:absolute;
   background:#e6e9bd;
   color:var(--navy);
   padding:9px 14px;
   font-size:.7rem;
   font-weight:800;
   box-shadow:5px 6px 0 rgba(0,0,0,.1);
}
.tag-top{
   top:44px;
   right:0;
   transform:rotate(-5deg);
}
.tag-bottom{
   bottom:55px;
   left:15px;
   transform:rotate(4deg);
   background:#e0c7b1;
}
.hero-orbit{
   position:absolute;
   border:1px solid rgba(207,218,152,.2);
   border-radius:50%;
}
.orbit-one{
   width:650px;
   height:650px;
   right:-170px;
   top:-260px;
}
.orbit-two{
   width:450px;
   height:450px;
   left:-230px;
   bottom:-350px;
}
.section{
   padding:110px 0;
}
.centered{
   text-align:center;
}
.section-heading{
   margin-bottom:52px;
}
.section-heading h2{
   margin-bottom:0;
}
.steps-section{
   background:var(--paper);
}
.steps-grid{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:22px;
}
.step-card{
   position:relative;
   padding:34px 28px 32px;
   border-top:1px solid var(--line);
}
.step-number{
   font-size:.7rem;
   font-weight:800;
   color:var(--burgundy);
   letter-spacing:.1em;
}
.step-icon{
   font-size:2.3rem;
   color:var(--olive);
   margin:25px 0 17px;
}
.step-card p{
   color:var(--muted);
   max-width:270px;
}
.demos-section{
   background:#eeece5;
}
.split{
   display:flex;
   align-items:end;
   justify-content:space-between;
}
.carousel-controls{
   display:flex;
   gap:8px;
}
.carousel-arrow{
   width:44px;
   height:44px;
   border:1px solid var(--navy);
   background:transparent;
   color:var(--navy);
   cursor:pointer;
   font-size:1.2rem;
}
.carousel-arrow:hover{
   background:var(--navy);
   color:#fff;
}
.carousel{
   overflow:hidden;
}
.slides{
   display:flex;
   transition:transform .55s ease;
}
.demo-slide{
   min-width:100%;
   display:grid;
   grid-template-columns:1.12fr .88fr;
   gap:60px;
   align-items:center;
}
.demo-thumb{
   height:350px;
   padding:20px;
   display:flex;
   flex-direction:column;
   justify-content:space-between;
   color:#fff;
   position:relative;
   overflow:hidden;
}
.demo-thumb:after{
   content:'';
   position:absolute;
   inset:0;
   background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 55%);
}
.demo-one{
   background:linear-gradient(135deg,#789270,#d4a76f 52%,#8d5442);
}
.demo-two{
   background:linear-gradient(135deg,#7a8da0,#d8b19c 52%,#4b5d5e);
}
.demo-three{
   background:linear-gradient(135deg,#96754d,#d4b87d 52%,#6b4132);
}
.demo-thumb>*{
   position:relative;
   z-index:1;
}
.demo-thumb span{
   font-size:.65rem;
   letter-spacing:.12em;
}
.demo-thumb b{
   font-family:var(--serif);
   font-size:2.5rem;
   font-weight:400;
}
.demo-thumb .play-icon{
   align-self:center;
   position:absolute;
   top:calc(50% - 27px);
}
.demo-slide h3{
   font-family:var(--serif);
   font-weight:400;
   font-size:2rem;
}
.demo-slide p:not(.eyebrow){
   color:var(--muted);
}
.carousel-dots{
   display:flex;
   gap:8px;
   margin-top:30px;
}
.dot{
   width:25px;
   height:3px;
   border:0;
   background:#bbb7ab;
   padding:0;
   cursor:pointer;
}
.dot.active{
   background:var(--burgundy);
}
.cta-band{
   background:var(--burgundy);
   color:#fff;
   padding:62px 0;
}
.cta-inner{
   display:flex;
   align-items:center;
   justify-content:space-between;
}
.cta-inner h2{
   margin:0;
}
.page-hero{
   background:var(--navy);
   color:#fff;
   padding:90px 0 85px;
}
.page-hero h1{
   margin:0 0 20px;
}
.page-hero h1 em{
   color:#d3dc99;
}
.page-hero p:not(.eyebrow){
   color:#dfe3eb;
   max-width:510px;
}
.pricing-section{
   background:var(--cream);
}
.pricing-grid{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:18px;
   align-items:stretch;
}
.pricing-card{
   position:relative;
   background:var(--paper);
   padding:35px 30px;
   box-shadow:var(--shadow);
   display:flex;
   flex-direction:column;
}
.pricing-card h2{
   font-size:2rem;
   margin:0 0 16px;
}
.price{
   font-size:2.6rem;
   font-weight:800;
   letter-spacing:-.06em;
}
.price small{
   font-size:.75rem;
   letter-spacing:0;
   font-weight:500;
   color:var(--muted);
}
.price-note{
   font-size:.75rem;
   color:var(--muted);
   min-height:42px;
}
.feature-list{
   padding:20px 0;
   margin:15px 0 27px;
   border-top:1px solid var(--line);
   list-style:none;
   color:#4c5159;
   font-size:.82rem;
   line-height:2.5;
   flex:1;
}
.burgundy-card{
   border-top:4px solid var(--burgundy);
}
.olive-card{
   border-top:4px solid var(--olive);
}
.plan-badge{
   position:absolute;
   top:0;
   right:20px;
   transform:translateY(-50%);
   padding:6px 10px;
   background:var(--olive);
   color:#fff;
   font-size:.62rem;
   font-weight:800;
   text-transform:uppercase;
   letter-spacing:.08em;
}
.comparison{
   padding-top:120px;
}
.table-wrap{
   overflow-x:auto}table{
   width:100%;
   border-collapse:collapse;
   background:var(--paper);
   font-size:.82rem}th,td{
   text-align:left;
   padding:17px 20px;
   border-bottom:1px solid var(--line)}th{
   background:var(--navy);
   color:#fff;
   font-size:.7rem;
   text-transform:uppercase;
   letter-spacing:.08em}tr:nth-child(even) td{
   background:#f4f2ec}td:not(:first-child),th:not(:first-child){
   text-align:center;
}
.faq{
   padding-top:120px;
   max-width:800px;
   margin:auto;
}
.faq-list details{
   border-top:1px solid var(--line);
   padding:20px 0;
}
.faq-list details:last-child{
   border-bottom:1px solid var(--line)
}
summary{
   list-style:none;
   cursor:pointer;
   font-weight:700;
   display:flex;
   justify-content:space-between;
}
summary::-webkit-details-marker{
   display:none;
}
summary span{
   font-size:1.3rem;
   color:var(--olive);
   font-weight:400;
}
.faq-list details p{
   margin:14px 25px 0 0;
   color:var(--muted);
   font-size:.9rem;
}
.auth-section{
   display:grid;
   place-items:center;
   min-height:650px;
   background:linear-gradient(120deg,var(--cream),#e9eadc);
}
.auth-card{
   width:min(620px,calc(100% - 48px));
   background:var(--paper);
   padding:48px;
   box-shadow:var(--shadow);
}
.auth-card.compact{
   width:min(480px,calc(100% - 48px));
}
.auth-card h1{
   font-size:2.8rem;
   margin-bottom:8px;
}
.muted{
   color:var(--muted);
}
.form-grid{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:17px;
   margin-top:28px;
}
.form-grid .full-field{
   grid-column:1/-1;
}
.stack-form{
   display:grid;
   gap:18px;
   margin-top:28px}label{
   font-size:.72rem;
   font-weight:800;
   color:var(--navy);
   display:grid;
   gap:7px}input{
   width:100%;
   padding:13px 14px;
   border:1px solid #d6d3ca;
   background:#fff;
   font-size:.9rem;
   color:var(--ink);
   outline:none}input:focus{
   border-color:var(--olive);
   box-shadow:0 0 0 3px rgba(85,107,47,.12);
}
.form-errors{
   background:#f4e5e1;
   color:var(--burgundy);
   padding:12px 16px;
   margin:20px 0;
   font-size:.82rem;
}
.form-errors p{
   margin:0 0 4px;
}
.form-errors p:last-child{
   margin:0;
}
.auth-switch{
   text-align:center;
   color:var(--muted);
   font-size:.8rem;
   margin:24px 0 0;
}
.auth-switch a,.panel-heading a,.legal-page a,.guest-notice a{
   color:var(--burgundy);
   font-weight:800;
}
.dashboard{
   padding-top:90px;
}
.dashboard-heading{
   display:flex;
   justify-content:space-between;
   align-items:end;
   margin-bottom:20px;
   margin-top: 20px;
}
.dashboard-heading h1{
   font-size:3.0rem;
   margin-bottom:8px;
}
.account-cards{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:15px;
   margin-bottom:25px;
}
.account-card{
   background:var(--paper);
   padding:25px;
   border-left:3px solid var(--navy);
   display:grid;
   gap:5px;
}
.account-card.accent{
   border-color:var(--olive);
}
.card-label{
   font-size:.65rem;
   text-transform:uppercase;
   letter-spacing:.12em;
   color:var(--muted);
}
.account-card strong{
   font-size:1.2rem;
}
.account-card span:last-child{
   font-size:.76rem;
   color:var(--muted);
}
.dashboard-columns{
   display:grid;
   grid-template-columns:1.6fr .8fr;
   gap:20px;
}
.panel{
   position: relative;
   background:var(--paper);
   padding:28px;
   overflow: hidden;
}
.panel-heading{
   display:flex;
   justify-content:space-between;
   align-items:center;
   margin-bottom:20px;
}
.panel h2{
   font-size:1.35rem;
   margin:0;
}
.empty-state{
   text-align:center;
   padding:50px 15px;
   color:var(--muted);
}
.empty-state span{
   font-size:2rem;
   color:var(--olive);
}
.empty-state .btn{
   margin-top:8px;
}
.status{
   padding:5px 8px;
   text-transform:capitalize;
   font-size:.68rem;
   font-weight:800;
}
.status-pending{
   background:#ede8d2;
   color:#76651c;
}
.status-completed{
   background:#dfead9;
   color:var(--olive);
}
.status-failed{
   background:#f0dedd;
   color:var(--burgundy);
}
.plan-panel form{
   margin-top:22px;
}
.plan-option{
   display:flex;
   grid-template-columns:none;
   align-items:center;
   gap:12px;
   padding:14px 0;
   border-bottom:1px solid var(--line);
   font-size:.8rem
}
.plan-option input{
   width:auto;
}
.plan-panel .btn{
   margin-top:22px;
}
.upload-section{
   min-height:700px;
}
.upload-section h1{
   font-size:4rem;
}
.lead{
   font-size:1.05rem;
   color:var(--muted);
}
.guest-notice{
   border-left:3px solid var(--olive);
   background:#e9edda;
   padding:14px 17px;
   margin:25px 0;
   font-size:.82rem;
}
.upload-form{
   margin-top:35px;
}
.upload-form>label{
   margin-bottom:20px;
}
.drop-zone{
   border:1.5px dashed #9ca78b;
   background:#fbfaf5;
   padding:55px 20px;
   text-align:center;
   transition:.25s;
   position:relative;
}
.drop-zone.dragover{
   border-color:var(--burgundy);
   background:#f7ece5;
}
.drop-zone input[type=file]{
   position:absolute;
   inset:0;
   opacity:0;
   cursor:pointer;
}
.upload-symbol{
   margin:auto;
   display:grid;
   place-items:center;
   width:48px;
   height:48px;
   border-radius:50%;
   background:#e4e9d1;
   color:var(--olive);
   font-size:1.5rem;
}
.drop-zone h2{
   font-size:1.4rem;
   margin:17px 0 5px;
}
.drop-zone p{
   font-size:.82rem;
   color:var(--muted);
}
.drop-zone p strong{
   color:var(--burgundy);
}
.drop-zone small{
   color:#a09c92;
   font-size:.68rem;
}
.file-name{
   font-size:.72rem;
   background:#eeeadd;
   margin:6px auto;
   padding:5px;
   width:max-content;
   max-width:100%;
   position:relative;
   z-index:2;
}
.two-col{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:100px;
   align-items:start;
}
.large-copy{
   font-size:1.15rem;
   line-height:1.9;
   color:#59606a;
}
.values{
   background:var(--paper);
}
.values-grid{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:20px;
}
.values-grid article{
   padding:28px;
   border-top:1px solid var(--navy);
}
.values-grid span{
   color:var(--burgundy);
   font-weight:800;
   font-size:.7rem;
}
.values-grid h3{
   font-family:var(--serif);
   font-size:2rem;
   font-weight:400;
}
.values-grid p{
   color:var(--muted);
}
.numbers-section{
   background:var(--olive);
   color:#fff;
   padding:70px 0;
}
.numbers-grid{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   text-align:center;
}
.numbers-grid div{
   border-right:1px solid rgba(255,255,255,.3);
   display:grid;
   gap:6px;
}
.numbers-grid div:last-child{
   border:0;
}
.numbers-grid strong{
   font-size:3.7rem;
   letter-spacing:-.07em;
}
.numbers-grid strong:after{
   content:'+';
}
.numbers-grid div:last-child strong:after{
   content:'';
}
.numbers-grid span{
   text-transform:uppercase;
   letter-spacing:.14em;
   font-size:.65rem;
}
.team{
   background:var(--cream);
}
.legal-page{
   padding-top:90px;
}
.legal-container{
   max-width:850px;
}
.legal-container>h1{
   font-size:4rem;
}
.updated{
   color:var(--muted);
   font-size:.75rem;
   margin:20px 0 55px;
}
.legal-article{
   border-top:1px solid var(--line);
   padding:27px 0;
}
.legal-article h2,.legal-container>h2{
   font-size:1.2rem;
   margin-bottom:10px;
}
.legal-article p,.legal-container>p{
   color:#606771;
}
.legal-container>h2{
   margin-top:55px;
}
.site-footer{
   background:var(--navy);
   color:#fff;
   padding:70px 0 25px;
}
   .footer-grid{
   display:grid;
   grid-template-columns:2fr 1fr 1fr 1fr;
   gap:40px;
}
.footer-brand{
   margin-bottom:20px;
}
.footer-grid p{
   color:#b9c0ce;
   max-width:260px;
   font-size:.82rem;
}
.footer-grid h3{
   font-size:.7rem;
   text-transform:uppercase;
   letter-spacing:.13em;
   color:#cbd48e;
   margin:3px 0 17px;
}
.footer-grid a:not(.brand){
   display:block;
   color:#bec5d1;
   font-size:.78rem;
   margin:9px 0;
}
.footer-grid a:hover{
   color:#fff;
}
.contact-title{
   margin-top:27px!important;
}
.footer-bottom{
   border-top:1px solid rgba(255,255,255,.14);
   margin-top:60px;
   padding-top:20px;
   display:flex;
   justify-content:space-between;
   color:#8993a7;
   font-size:.68rem;
}
.flash-stack{
   position:fixed;
   top:94px;
   right:22px;
   width:min(370px,calc(100% - 44px));
   z-index:30;
}
.flash{
   padding:15px 40px 15px 17px;
   color:#fff;
   margin-bottom:9px;
   position:relative;
   font-size:.8rem;
   box-shadow:var(--shadow);
}
.flash-success{
   background:var(--olive);
}
.flash-error{
   background:var(--burgundy);
}
.flash-close{
   position:absolute;
   right:12px;
   top:10px;
   border:0;
   background:none;
   color:#fff;
   font-size:1.2rem;
   cursor:pointer;
}
.cookie-banner{
   position:fixed;
   bottom:0;
   left:0;
   right:0;
   background:var(--navy);
   color:#fff;
   padding:18px max(24px,calc((100% - 1160px)/2));
   display:none;
   align-items:center;
   justify-content:space-between;
   gap:25px;
   z-index:25;
   box-shadow:0 -8px 25px rgba(0,0,0,.15);
}
.cookie-banner.visible{
   display:flex;
}
.cookie-banner strong{
   font-size:.85rem;
}
.cookie-banner p{
   margin:3px 0 0;
   color:#c4cbd7;
   font-size:.72rem;
}
.cookie-actions{
   display:flex;
   gap:8px;
   flex-shrink:0;
}
.cookie-actions .btn{
   padding:9px 15px;
   min-height:38px;
   font-size:.68rem;
}
@media(max-width:1024px){
   .hero-grid{
      gap:30px;
   }
   .hero-art{
      min-height:350px;
   }
   .demo-slide{
      gap:35px;
   }
   .section{
      padding:85px 0;
   }
   .two-col{
      gap:50px;
   }
}
@media(max-width:768px){
   .container,.narrow{
      width:min(100% - 36px,600px)
   }
   .site-header{
      height:60px
   }
   .nav-shell{
      width:calc(100% - 36px)
   }
   .menu-toggle{
      display:grid;
      gap:6px;
   }
   .menu-toggle span{
      display:block;
      width:23px;
      height:2px;
      background:#fff
   }
   .main-nav{
      display:none;
      position:absolute;
      left:0;
      right:0;
      top:60px;
      background:var(--navy);
      padding:18px;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      box-shadow:0 12px 20px rgba(0,0,0,.18);
      border: solid 1px;
   }
   .main-nav.open{
      display:flex
   }
   .main-nav a{
      padding:13px;
      border-bottom:1px solid rgba(255,255,255,.1);
   }
   .main-nav .nav-cta{
      text-align:center;
      margin-top:10px
   }
   .hero{
      padding:70px 0 80px;
   }
   .hero-grid{
      grid-template-columns:1fr
   }
   .hero h1{
      font-size:3.5rem
   }
   .hero-art{
      min-height:360px
   }
   .film-card{
      width:330px
   }
   .tag-top{
      right:3px
   }
   .steps-grid,.pricing-grid,.values-grid,.account-cards{
      grid-template-columns:1fr
   }
   .step-card{
      padding:25px 0
   }
   .split,.cta-inner,.dashboard-heading{
      align-items:start;
      flex-direction:column;
      gap:25px
   }
   .demo-slide{
      grid-template-columns:1fr;
      gap:25px
   }
   .demo-thumb{
      height:280px
   }
   .cta-inner{
      align-items:start
   }
   .cta-inner h2{
      font-size:2.4rem
   }
   .form-grid{
      grid-template-columns:1fr
   }
   .form-grid .full-field{
      grid-column:auto
   }
   .auth-card{
      padding:30px 24px
   }
   .dashboard-heading h1{
      font-size:2.8rem
   }
   .dashboard-columns,.two-col{
      grid-template-columns:1fr;
      gap:20px
   }
   .upload-section h1,.legal-container>h1{
      font-size:3.2rem
   }
   .footer-grid{
      grid-template-columns:1fr 1fr;
      gap:30px
   }
   .footer-grid>div:first-child{
      grid-column:1/-1
   }
   .footer-bottom{
      display:block
   }
   .footer-bottom span{
      display:block;
      margin:5px 0
   }
   .numbers-grid strong{
      font-size:2.5rem
   }
   .cookie-banner{
      display:none;
      flex-direction:column;
      align-items:start;
      padding:20px 18px;
      gap:15px
   }
   .cookie-banner.visible{
      display:flex
   }
}
@media(max-width:420px){
   h1{
      font-size:2.7rem
   }
   .hero h1{
      font-size:3rem
   }
   .demo-thumb b{
      font-size:2rem
   }
   .footer-grid{
      grid-template-columns:1fr
   }
   .footer-grid>div:first-child{
      grid-column:auto
   }
}

/* Modales */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(27, 40, 69, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   animation: fadeIn 0.2s ease;
}
.modal-box {
   background: #fff;
   padding: 2.5rem;
   border-radius: 16px;
   width: 90%;
   max-width: 420px;
   position: relative;
   box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-box h2 {
   text-align: center;
   color: #1B2845;
   margin-bottom: 1.5rem;
   font-size: 1.8rem;
}
.modal-close {
   position: absolute;
   top: 15px;
   right: 15px;
   background: none;
   border: none;
   font-size: 2rem;
   color: #999;
   cursor: pointer;
}
.modal-box label {
   display:block;
   font-size:0.85rem;
   margin-top:1rem;
   color:#555;
   font-weight:600;
}
.modal-box input {
   width: 100%;
   padding: 10px;
   margin-top: 4px;
   border: 1px solid #ddd;
   border-radius: 8px;
   font-size: 0.9rem;
}
.btn-primary {
   width: 100%;
   /*margin-top: 1.5rem;*/
   padding: 12px;
   background: #6B2D2D;
   color: white;
   border: none;
   border-radius: 8px;
   font-size: 1.1rem;
   cursor: pointer;
   transition: background 0.2s;
}
.btn-primary:hover {
   background: #552323;
}
.btn-google {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   padding: 12px;
   border: 1px solid #ddd;
   border-radius: 8px;
   text-decoration: none;
   color: #444;
   font-weight: 600;
   transition: background 0.2s;
}
.btn-google:hover {
   background: #f9f9f9;
}
.modal-separator {
   margin: 1.5rem 0;
   border: 0;
   border-top: 1px solid #eee;
   text-align: center;
}
.modal-switch {
   text-align: center;
   margin-top: 1.5rem;
   font-size: 0.9rem;
   color: #666;
}
.modal-switch a {
   color: #6B2D2D;
   font-weight: 600;
   text-decoration: none;
}

.video-share {
   position: absolute;
   top: 8px;
   left: 8px;
   width: 28px;
   height: 28px;
   background: rgba(255,255,255,0.9);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #333;
   font-size: 14px;
   cursor: pointer;
   opacity: 0;
   transition: opacity .2s, transform .2s;
   z-index: 10;
}
.video-card:hover .video-share {
   opacity: 1;
}
.video-card:hover .video-share {
   opacity: 1;
}
@media (hover: none) {
   .video-share {
      opacity: 1;
   }
}

.share-modal {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,.6);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 2000;
}
.share-modal.open {
   display: flex;
}
.share-box {
   background:#fff;
   border-radius:12px;
   padding:1.5rem;
   width: min(420px, 90vw);
   text-align:center;
}
.share-box h3 {
   margin: 0 0 1rem;
}
.share-buttons {
   display:grid;
   grid-template-columns: repeat(3,1fr);
   gap:.75rem;
}
.share-btn {
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:.4rem;
   padding:.75rem .5rem;
   border:1px solid #eee;
   border-radius:10px;
   text-decoration:none;
   color:#333;
   font-size:12px;
   transition: background .2s, transform .2s;
}
.share-btn:hover {
   background:#f7f7f7;
   transform: translateY(-2px);
}
.share-btn svg {
   width:24px;
   height:24px;
}
.share-link-row {
   display:flex;
   gap:.5rem;
   margin-top:1rem;
}
.share-link-row input {
   flex:1;
   padding:.5rem;
   border:1px solid #ddd;
   border-radius:6px;
   font-size:13px;
   color:#555;
}
.share-soon {
   font-size:11px;
   color:#999;
}

.album-toolbar {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-wrap: wrap;
   margin-top: 1rem;
}
.albums-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin: 1rem 0;
}
.tab-btn {
   border: 1px solid #ccc;
   background: #f5f5f5;
   border-radius: 20px;
   padding: 0px 0px 0px 14px;
   cursor: pointer;
   font-size: .78rem;
}
.tab-btn.active {
   background: #3454af;
   color: #fff;
}
.tab-delete {
    font-weight: bold;
    margin: 3px;
    padding: 0px 8px 0px 8px;
    transition: all 0.15s ease;
    font-size: 20px;
    border-radius: 15px;
    vertical-align: middle;
    display: inline-block;
}

.tab-delete:hover {
   color: white;
   background-color: red;
}

.tab-panel {
   display: none;
}
.tab-panel.active {
   display: block;
}
.tab-panel.active .media-gallery {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 1rem;
   max-height: 800px;
   overflow-y: auto;
}
.album-check {
   position: absolute;
   top: 5px;
   left: 5px;
   z-index: 9;
   width: 24px;
   height: 24px;
   background: rgba(255, 255, 255, 0.9);
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 0;
   transition: opacity 0.15s ease;
   pointer-events: auto;
   cursor: pointer;
}
/* Apparition au survol de la vignette */
.media-item:hover .album-check {
    opacity: 1;
}

/* Rester visible tant qu'elle est cochée */
.media-item:has(.media-check:checked) .album-check {
    opacity: 1;
}

/* Mettre la vignette en évidence quand elle est sélectionnée */
.media-item:has(.media-check:checked) {
    outline: 3px solid var(--burgundy, #7a1f3d);
    outline-offset: -3px;
    border-radius: 8px; /* adapte à ton design */
}

/* ====== MOBILE / TACTILE ====== */
/* (hover: none) = appareil sans souris (téléphone, tablette tactile) */
@media (hover: none) {
    .album-check {
        opacity: 0.65; /* toujours visible mais discret */
    }
}

/* Sur écran tactile étroit, on peut agrandir la zone de clic */
@media (hover: none) and (max-width: 640px) {
    .album-check {
        top: 6px;
        left: 6px;
    }
    .album-check input {
        width: 22px;
        height: 22px;
    }
}

.album-check input {
   width: 18px;
   height: 18px;
   cursor: pointer;
   margin: 0px;
}

.selection-bar {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    background: #2c2c2c;
    color: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    z-index: 10;
    transition: all 0.3s ease;
    max-width: 100%;
    min-width: 421px;
}

/* --- Petits écrans --- */
@media (max-width: 769px) {
    .selection-bar {
        /* on abandonne le centrage translateX qui fait déborder */
        left: 10px;
        right: 10px;
        transform: none;
        min-width: 0;           /* annule le min-width: 421px */
        width: calc(100% - 20px);
        border-radius: 20px;    /* pilule moins adaptée en plein écran */
        flex-wrap: wrap;        /* laisse le contenu passer à la ligne */
        justify-content: center;
        padding: 10px 14px;
        gap: 8px;
    }

    .selection-bar button,
    .selection-bar select {
        flex: 0 1 auto;         /* les contrôles peuvent rétrécir */
        max-width: 100%;
    }
}
.selection-bar.visible {
    top: 20px;
    opacity: 1;
}

/* Mode "collée" en haut de la page quand la barre sort de l'écran */
.selection-bar.stuck {
    position: fixed;
    top: 90px;
}
@media (max-width: 769px) {
   .selection-bar.stuck {
       position: fixed;
       top: 66px;
   }
}
.selection-bar select {
    padding: 8px 12px;
    border-radius: 20px;
    border: none;
    background: #f5f5f5;
}
#selection-count {
    font-size: 13px;
    min-width: 100px;
}
#sel-delete-btn {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
}
#sel-move-btn {
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 0px;
}

#sel-cancel-btn {
    border: white solid 1px;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 0px;
}

.shift-hint {
    font-size: 12px;
    opacity: 0.7;
    margin-left: 4px;
}


 /* --- Galerie & Médias --- */
 .media-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     gap: 1rem;
     margin-top: 1.5rem;
     max-height: 800px;
     overflow-y: scroll;
 }
 .media-item {
     position: relative;
     aspect-ratio: 1 / 1;
     overflow: hidden;
     border-radius: 8px;
     cursor: pointer;
     background: #f0f0f0;
 }
 .media-hidden {
     display: none; /* Cache les médias au-delà de la limite */
 }
 .media-thumb {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }
 .media-item:hover .media-thumb {
     transform: scale(1.05);
 }




 .media-delete {
     position: absolute;
     top: 8px; right: 8px;
     width: 28px; height: 28px;
     background: rgba(220, 53, 69, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 18px;
     font-weight: bold;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.2s ease, transform 0.2s ease;
     z-index: 9;
     line-height: 1;
 }
 .media-item:hover .media-delete {
     opacity: 1;
 }
 .media-delete:hover {
     transform: scale(1.1);
     background: rgba(220, 53, 69, 1);
 }

@media (hover: none) {
    .media-delete {
        opacity: 1.0;
    }
}

 .media-frames {
     position: absolute;
     bottom: 0; left: 0; right: 0;
     display: flex;
     gap: 2px;
     transform: translateY(100%);
     transition: transform 0.3s ease;
     background: rgba(0,0,0,0.7);
     padding-top: 4px;
 }
 .media-item:hover .media-frames {
     transform: translateY(0);
 }
 .media-frames img {
     width: 25%;
     height: 50px;
     object-fit: cover;
     opacity: 0.9;
 }
 /* --- Galerie Vidéos (Historique) --- */
 .video-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 1.5rem;
     margin-top: 1.5rem;
 }
 .video-item {
     position: relative;
     /*aspect-ratio: 1 / 1;*/
     overflow: hidden;
     border-radius: 8px;
     cursor: pointer;
     background: #f0f0f0;
 }
 .video-card {
     border-radius: 12px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     border: 1px solid #eee;
     position: relative;
     display: flex;
     flex-direction: column;
 }
 .video-thumb-container {
     position: relative;
     aspect-ratio: 16 / 9;
     background: #f0f0f0;
     overflow: hidden;
 }
 .video-thumb-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }
 .video-thumb-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ccc;
     font-size: 3rem;
 }
 .video-card.video-ready .video-thumb-container {
     cursor: pointer;
 }
 .video-card.video-ready:hover .video-thumb-img {
     transform: scale(1.05);
 }
 .video-card-info {
     padding: 0.5rem 1rem 0.75rem; /* Padding réduit */
     display: flex;
     flex-direction: column;
     gap: 0.1rem;
 }
 .video-actions {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0.25rem;
 }
 .video-edit-btn {
     background: #f0f0f0;
     color: #333;
     padding: 4px 10px;
     border-radius: 20px;
     font-size: 12px;
     text-decoration: none;
     transition: background 0.2s;
 }
 .video-edit-btn:hover {
     background: #e0e0e0;
 }
 .video-delete {
     position: absolute;
     top: 8px; right: 8px;
     width: 28px; height: 28px;
     background: rgba(220, 53, 69, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 18px;
     font-weight: bold;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.2s ease;
     z-index: 10;
     line-height: 1;
 }
 .video-card:hover .video-delete {
     opacity: 1;
 }
@media (hover: none) {
   .video-delete {
      opacity: 1;
   }
}
 .overlay-processing {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     /*background: rgba(0,0,0,0.7);*/
     padding: 10px;
 }
 .overlay-processing .progress-container {
     margin-top: 0;
     height: 24px;
     border-radius: 12px;
 }
 .overlay-processing .progress-text {
     font-size: 10px;
 }

 /* --- Lightbox --- */
 .lightbox {
     position: fixed;
     top: 0; left: 0; right: 0; bottom: 0;
     background: rgba(0,0,0,0.95);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     color: white;
 }
 .lightbox.active { display: flex; }
 .lightbox-content {
     max-width: 90vw;
     max-height: 90vh;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .lightbox-content img, .lightbox-content video {
     max-width: 90vw;
     max-height: 85vh;
     border-radius: 8px;
 }
 .lightbox-close, .lightbox-arrow {
     position: absolute;
     font-size: 2.5rem;
     cursor: pointer;
     user-select: none;
     color: #fff;
     opacity: 0.7;
     transition: opacity 0.2s;
 }
 .lightbox-close { top: 20px; right: 30px; }
 .lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
 .lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
 .lightbox-close:hover, .lightbox-arrow:hover { opacity: 1; }

 /* --- Barre de progression --- */
 .progress-container {
     width: 100%;
     /*background: #e0e0e0;*/
     background-color: #777676;
     border-radius: 4px;
     margin-top: 8px;
     position: relative;
     height: 38px;
     overflow: hidden;
 }
 .progress-bar {
     background: #3454af;
     height: 100%;
     width: 0%;
     transition: width 0.5s ease;
 }
 .progress-text {
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: bold;
     color: #fff;
     text-shadow: 0 1px 2px rgba(0,0,0,0.8);
     text-transform: capitalize;
 }
 .load-more-wrap {
     text-align: center;
     margin-top: 2rem;
 }