/* covoiturage/style.css
   Feuille de styles du module covoiturage — reprend la charte du site Rose & Stanislas
   (terracotta / crème / brun, polices Cormorant Garamond + Jost). */

/* ── VARIABLES DE COULEUR (identiques au site principal) ── */
:root{
  --terra:#C4622D; --terra-light:#E8895A; --terra-pale:#F5C9B3;
  --cream:#FAF6F1; --cream-dark:#F2EBE0;
  --brown:#5C3D2E; --brown-light:#8B6355; --white:#FFFFFF; --text:#3D2B1F;
  --green:#5B8C5A; --green-soft:#E3F0E2; --red-soft:#C0563E;
  --shadow:0 18px 38px rgba(196,98,45,.12);
}

/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;background:var(--cream);color:var(--text);
  overflow-x:hidden;line-height:1.5;min-height:100vh;
}

/* ── NAVIGATION DU MODULE ── */
nav{
  position:sticky;top:0;width:100%;z-index:100;
  padding:1.1rem 3rem;display:flex;align-items:center;justify-content:space-between;
  background:rgba(250,246,241,.96);backdrop-filter:blur(10px);
  box-shadow:0 2px 20px rgba(196,98,45,.08);
}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--brown);text-decoration:none}
.nav-logo span{color:var(--terra);font-style:italic}
.nav-links{display:flex;gap:1.8rem;list-style:none;align-items:center}
.nav-links a{
  font-weight:300;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brown);text-decoration:none;position:relative;transition:color .3s
}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--terra);transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--terra)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-burger span{display:block;width:22px;height:1px;background:var(--brown);transition:all .3s}

/* ── TITRES & ÉLÉMENTS PARTAGÉS ── */
.wrap{max-width:1180px;margin:0 auto;padding:0 2rem}
section{padding:4rem 2rem}
.lbl{font-weight:300;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--terra);margin-bottom:.8rem}
.ttl{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2rem,5vw,3.2rem);color:var(--brown);line-height:1.2}
.ttl em{font-style:italic;color:var(--terra)}
.divider{width:55px;height:1px;background:var(--terra);margin:1.3rem 0}
.lead{font-size:.9rem;color:var(--brown-light);font-weight:300;line-height:1.85}
.center{text-align:center}
.center .divider{margin:1.2rem auto}

/* ── ANIMATIONS D'APPARITION ── */
.fade{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.fade.on{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── BOUTONS ── */
.btn{
  display:inline-block;padding:.95rem 2.4rem;border:1px solid var(--terra);
  font-family:'Jost',sans-serif;font-weight:300;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;transition:all .3s;
  background:none;color:var(--terra);text-align:center
}
.btn:hover{background:var(--terra);color:#fff}
.btn.solid{background:var(--terra);color:#fff}
.btn.solid:hover{background:var(--brown);border-color:var(--brown)}
.btn.ghost{border-color:var(--brown-light);color:var(--brown-light)}
.btn.ghost:hover{background:var(--brown-light);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── PAGE D'ACCUEIL (index) ── */
.hero-cov{
  min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:4.5rem 2rem 3rem;background:var(--cream)
}
.hero-cov .ornament{font-size:1.4rem;color:var(--terra);margin-bottom:1rem;animation:fadeUp .8s ease}
.hero-cov h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.4rem,6vw,4rem);color:var(--brown);line-height:1.15;animation:fadeUp .9s ease}
.hero-cov h1 .amp{font-style:italic;color:var(--terra);display:block;font-size:.62em;margin:.1em 0}
.hero-cov .sub{margin-top:1rem;font-weight:200;font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brown-light)}
.hero-cov .intro{max-width:560px;margin:1.8rem auto 0}
.cta-row{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
.live-count{
  margin-top:2.4rem;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.25rem;color:var(--terra)
}
.live-count strong{font-style:normal;font-weight:600}

/* Bloc « comment ça marche » */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:920px;margin:0 auto}
.step{background:var(--cream-dark);padding:2rem 1.5rem;text-align:center;border-radius:14px;transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.step .ico{font-size:1.9rem;margin-bottom:.7rem}
.step h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--brown);font-weight:400;margin-bottom:.4rem}
.step p{font-size:.82rem;color:var(--brown-light);font-weight:300;line-height:1.7}

/* ── FORMULAIRE (inscription) ── */
.form-card{
  max-width:640px;margin:0 auto;background:var(--white);border:1px solid var(--cream-dark);
  border-radius:16px;padding:2.6rem;box-shadow:0 10px 30px rgba(92,61,46,.06)
}
.field{margin-bottom:1.4rem}
.field label{display:block;font-size:.78rem;letter-spacing:.06em;color:var(--brown);font-weight:400;margin-bottom:.45rem}
.field .req{color:var(--terra)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:.8rem .95rem;border:1px solid var(--cream-dark);border-radius:10px;
  font-family:'Jost',sans-serif;font-size:.9rem;color:var(--text);background:var(--cream);
  transition:border-color .25s,box-shadow .25s
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(196,98,45,.12)
}
.field textarea{resize:vertical;min-height:80px}
.field .hint{font-size:.72rem;color:var(--brown-light);font-weight:300;margin-top:.35rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Choix de rôle (radio cartes) */
.role-choice{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.role-opt{position:relative}
.role-opt input{position:absolute;opacity:0;pointer-events:none}
.role-opt label{
  display:block;cursor:pointer;text-align:center;padding:1.3rem 1rem;border:1.5px solid var(--cream-dark);
  border-radius:12px;transition:all .25s;font-weight:300;color:var(--brown);margin:0
}
.role-opt .emoji{font-size:1.7rem;display:block;margin-bottom:.4rem}
.role-opt .t{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--brown)}
.role-opt input:checked + label{border-color:var(--terra);background:var(--terra-pale);box-shadow:0 0 0 3px rgba(196,98,45,.12)}
.role-opt input:focus-visible + label{outline:2px solid var(--terra);outline-offset:2px}

/* Checkbox */
.check{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;color:var(--brown);font-weight:300;cursor:pointer}
.check input{margin-top:.2rem;accent-color:var(--terra);width:16px;height:16px}

/* Messages d'erreur inline (jamais d'alert) */
.error-msg{color:var(--red-soft);font-size:.75rem;font-weight:400;margin-top:.4rem;display:none}
.field.invalid .error-msg{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red-soft)}

/* Sections conditionnelles */
.conditional{display:none}
.conditional.show{display:block;animation:fadeUp .4s ease}

/* Écran de confirmation */
.confirm-screen{display:none;text-align:center;padding:2rem 1rem}
.confirm-screen.show{display:block;animation:fadeUp .5s ease}
.confirm-check{
  width:84px;height:84px;border-radius:50%;background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;margin:0 auto 1.4rem;
  animation:pop .6s ease
}
.confirm-screen h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2rem;color:var(--brown);margin-bottom:.6rem}

/* Spinner de chargement */
.spinner{
  display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-left:.5rem
}

/* ── LISTE DES TRAJETS ── */
.toolbar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;max-width:1180px;margin:0 auto 2rem;justify-content:center}
.search-box{position:relative;flex:1;min-width:240px;max-width:420px}
.search-box input{
  width:100%;padding:.8rem .95rem .8rem 2.6rem;border:1px solid var(--cream-dark);border-radius:30px;
  font-family:'Jost',sans-serif;font-size:.88rem;background:var(--white);color:var(--text)
}
.search-box input:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(196,98,45,.1)}
.search-box .icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--brown-light)}

.zone-group{max-width:1180px;margin:0 auto 2.5rem}
.zone-title{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--brown);font-weight:400;
  display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;padding-bottom:.6rem;border-bottom:1px solid var(--terra-pale)
}
.zone-title .pin{color:var(--terra)}
.zone-title .badge{font-family:'Jost',sans-serif;font-size:.7rem;background:var(--terra-pale);color:var(--brown);padding:.2rem .6rem;border-radius:20px;font-weight:400}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.ride-card{
  background:var(--white);border:1px solid var(--cream-dark);border-radius:14px;padding:1.5rem;
  transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden
}
.ride-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ride-card.full{opacity:.78}
.ride-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;margin-bottom:.8rem}
.ride-name{font-family:'Cormorant Garamond',serif;font-size:1.45rem;color:var(--brown);font-weight:400;line-height:1.15}
.ride-badge{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .6rem;border-radius:20px;white-space:nowrap;font-weight:400}
.ride-badge.ok{background:var(--green-soft);color:var(--green)}
.ride-badge.full{background:#F3E0DB;color:var(--red-soft)}
.ride-meta{list-style:none;font-size:.84rem;color:var(--brown-light);font-weight:300;line-height:1.95}
.ride-meta li{display:flex;gap:.55rem;align-items:center}
.ride-meta .k{color:var(--terra)}
.ride-msg{font-size:.8rem;color:var(--brown-light);font-style:italic;font-weight:300;margin-top:.7rem;line-height:1.6;border-left:2px solid var(--terra-pale);padding-left:.7rem}
.contact-reveal{margin-top:1.1rem}
.contact-email{display:none;margin-top:.7rem;font-size:.84rem;text-align:center;background:var(--cream-dark);padding:.7rem;border-radius:10px}
.contact-email.show{display:block;animation:fadeUp .3s ease}
.contact-email a{color:var(--terra);text-decoration:none;font-weight:400}

.empty-state{text-align:center;color:var(--brown-light);font-weight:300;padding:3rem 1rem;max-width:480px;margin:0 auto}
.empty-state .big{font-size:2.4rem;margin-bottom:.8rem}

/* ── DASHBOARD ── */
.login-card{max-width:420px;margin:3rem auto;background:var(--white);border:1px solid var(--cream-dark);border-radius:16px;padding:2.6rem;text-align:center;box-shadow:0 10px 30px rgba(92,61,46,.06)}
.login-card .lock{font-size:2rem;margin-bottom:1rem}
#dash-content{display:none}
#dash-content.show{display:block}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.3rem;max-width:1180px;margin:0 auto 2rem}
.stat{background:var(--white);border:1px solid var(--cream-dark);border-radius:14px;padding:1.6rem;text-align:center}
.stat .n{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:300;color:var(--terra);line-height:1}
.stat .l{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-light);margin-top:.4rem}

.progress-wrap{max-width:1180px;margin:0 auto 2rem;background:var(--white);border:1px solid var(--cream-dark);border-radius:14px;padding:1.6rem}
.progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}
.progress-head .pct{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--terra)}
.progress-bar{height:14px;background:var(--cream-dark);border-radius:20px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--terra-light),var(--terra));border-radius:20px;transition:width .8s ease;width:0}

.alert-box{max-width:1180px;margin:0 auto 2rem;padding:1.1rem 1.4rem;border-radius:12px;font-size:.85rem;font-weight:300;line-height:1.7}
.alert-box.warn{background:#FBEFD9;color:#8A6420;border:1px solid #EAD3A0}
.alert-box.good{background:var(--green-soft);color:var(--green);border:1px solid #BcDcBA}

.table-wrap{max-width:1180px;margin:0 auto 2rem;overflow-x:auto;background:var(--white);border:1px solid var(--cream-dark);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:.84rem}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--cream-dark);white-space:nowrap}
th{background:var(--cream-dark);color:var(--brown);font-weight:500;letter-spacing:.05em;font-size:.74rem;text-transform:uppercase;position:sticky;top:0}
tbody tr:hover{background:var(--cream)}
td .pill{font-size:.7rem;padding:.2rem .55rem;border-radius:20px;font-weight:400}
td .pill.driver{background:var(--terra-pale);color:var(--brown)}
td .pill.passenger{background:var(--cream-dark);color:var(--brown-light)}

.dash-actions{display:flex;gap:1rem;flex-wrap:wrap;max-width:1180px;margin:0 auto;justify-content:center}

/* Aperçu email rappel J-7 */
.email-preview{max-width:680px;margin:1.5rem auto 0;background:var(--cream-dark);border:1px dashed var(--terra-pale);border-radius:12px;padding:1.4rem;display:none}
.email-preview.show{display:block;animation:fadeUp .4s ease}
.email-preview pre{white-space:pre-wrap;font-family:'Jost',sans-serif;font-size:.82rem;color:var(--text);line-height:1.7}
.email-preview .who{font-size:.78rem;color:var(--brown-light);margin-bottom:.8rem}

/* ── CARTE ── */
#cov-map{height:560px;width:100%;max-width:1180px;margin:0 auto;border:1px solid var(--terra-pale);border-radius:12px}
.map-legend{
  position:absolute;top:1rem;right:1rem;z-index:500;background:rgba(255,255,255,.95);
  padding:.8rem 1rem;border-radius:10px;font-size:.78rem;box-shadow:0 4px 14px rgba(0,0,0,.12);line-height:1.9
}
.map-legend .dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:.5rem;vertical-align:middle}

/* ── FOOTER ── */
footer{background:var(--brown);color:rgba(255,255,255,.8);text-align:center;padding:2.6rem 2rem;margin-top:3rem}
.ft-names{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:300;color:#fff;margin-bottom:.3rem}
.ft-date{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;font-weight:300;opacity:.55}
footer a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .3s}
footer a:hover{color:#fff}

/* ── RESPONSIVE — mobile first : breakpoints 375 / 768 / 1200 ── */
@media(max-width:768px){
  nav{padding:1rem 1.4rem}
  .nav-burger{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;width:100%;background:var(--cream);
    flex-direction:column;gap:0;padding:.8rem 0;box-shadow:0 10px 30px rgba(0,0,0,.08);align-items:stretch
  }
  .nav-links.open{display:flex}
  .nav-links li{padding:.8rem 1.6rem;list-style:none}
  .steps{grid-template-columns:1fr}
  .field-row,.role-choice{grid-template-columns:1fr}
  .form-card{padding:1.8rem 1.3rem}
  section{padding:3rem 1.2rem}
  .dash-actions{flex-direction:column}
  .dash-actions .btn{width:100%}
}
@media(max-width:375px){
  .hero-cov h1{font-size:clamp(2rem,9vw,2.6rem)}
  .cta-row{flex-direction:column}
  .cta-row .btn{width:100%}
}