/* Covoiturage « Avec l'Accent ». Reprend la direction artistique de la landing.
   Jetons repris à l'identique de index.html : mêmes couleurs, mêmes rayons,
   mêmes polices, pour que l'outil se lise comme une page du site. */

/* Busteball est ici en version « Personal Use » de Ditatype. Dans cette version,
   14 caractères ne sont pas de vraies lettres : ce sont des copies d'un glyphe
   de filigrane « PERSONAL USE ONLY » (tous ont la même largeur, 1725/1000 em).
   Les exclure par unicode-range fait retomber le navigateur sur Archivo, le
   font suivant de la pile, au lieu d'afficher le filigrane.
   Concernés : % & , . et les chiffres 0-9.
   Licence : https://ditatype.com/product/busterball/ */
@font-face{
  font-family:'Busteball';
  src:url('fonts/busteball.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0020-0024, U+0027-002B, U+002D, U+002F, U+003A-007E,
                U+00A0-00FF, U+0152-0153, U+0178, U+2018-201D, U+2026, U+20AC;
}

:root{
  --creme:#FFFFFF;
  --sable:#FAF8F9;
  --encre:#1A1420;
  --encre-doux:#5C5566;
  --gris:#6B6472;
  --trait:#E4E0E8;
  --magenta:#FF0A78;
  --magenta-fonce:#E00068;
  --magenta-clair:#FFE7F1;
  --cyan:#00808A;
  --cyan-clair:#E6F4F5;
  --violet:#7B49C8;
  --violet-clair:#9B6DD6;
  --r:18px;
  --max:1080px;
  --titre:'Busteball','Archivo',sans-serif;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --ombre:0 2px 14px rgba(26,20,32,.06);
  --ombre-haute:0 18px 44px rgba(26,20,32,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sable); color:var(--encre);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--magenta-fonce)}
a:hover{color:var(--magenta)}

.enveloppe{max-width:var(--max); margin:0 auto; padding:0 20px}

/* -- Barre de navigation --------------------------------------------------- */
.topbar{
  background:var(--creme); border-bottom:1px solid var(--trait);
  position:sticky; top:0; z-index:900; box-shadow:var(--ombre);
}
.topbar .enveloppe{display:flex; align-items:center; gap:16px; min-height:64px}
.marque{
  font-family:var(--titre); font-size:26px; letter-spacing:.5px;
  color:var(--encre); text-decoration:none; line-height:1; white-space:nowrap;
}
.marque span{color:var(--magenta)}
.topnav{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.topnav a{
  color:var(--encre-doux); text-decoration:none; font-weight:500; font-size:15px;
  padding:8px 12px; border-radius:999px;
}
.topnav a:hover{background:var(--sable); color:var(--encre)}
.topnav a.actif{background:var(--magenta-clair); color:var(--magenta-fonce)}
.pastille{
  display:inline-block; min-width:18px; padding:0 6px; margin-left:6px;
  background:var(--magenta); color:#fff; border-radius:999px;
  font-size:12px; font-weight:700; text-align:center; line-height:18px;
}

/* -- Menu en petit écran --------------------------------------------------
   Sous 760 px, les liens ne tiennent plus sur une ligne et s'empilaient en
   colonne désordonnée à côté du logo. Ils passent derrière un bouton. */
.burger{
  display:none; margin-left:auto; align-items:center; justify-content:center;
  width:44px; height:44px;                 /* cible tactile confortable */
  background:transparent; border:0; cursor:pointer; border-radius:12px;
  -webkit-tap-highlight-color:transparent;
}
.burger:hover{background:var(--sable)}
.burger:focus-visible{outline:3px solid var(--magenta-clair); outline-offset:2px}
.burger-traits{display:block; width:22px; height:16px; position:relative}
.burger-traits span{
  position:absolute; left:0; width:100%; height:2.5px; border-radius:2px;
  background:var(--encre); transition:transform .18s ease, opacity .18s ease;
}
.burger-traits span:nth-child(1){top:0}
.burger-traits span:nth-child(2){top:6.75px}
.burger-traits span:nth-child(3){top:13.5px}
/* Ouvert, les trois traits deviennent une croix. */
.burger.actif .burger-traits span:nth-child(1){transform:translateY(6.75px) rotate(45deg)}
.burger.actif .burger-traits span:nth-child(2){opacity:0}
.burger.actif .burger-traits span:nth-child(3){transform:translateY(-6.75px) rotate(-45deg)}

@media(max-width:759px){
  .topbar{position:sticky}
  .topbar .enveloppe{position:relative}
  .burger{display:inline-flex}
  .marque{font-size:23px}
  .topnav{
    /* left/right à 0 : le bloc conteneur est la boîte de padding de
       .enveloppe, qui couvre déjà toute la largeur. Des valeurs négatives
       débordaient de 20 px de chaque côté et faisaient défiler la page. */
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--creme); border-top:1px solid var(--trait);
    border-bottom:1px solid var(--trait); box-shadow:var(--ombre-haute);
    padding:10px 20px 16px; margin:0;
  }
  .topnav.ouvert{display:flex}
  .topnav a{
    padding:13px 14px; border-radius:12px; font-size:16px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .topnav a + a{border-top:1px solid var(--trait)}
  .topnav a.actif{background:var(--magenta-clair)}
}

/* -- Titres ---------------------------------------------------------------- */
h1,h2,h3{margin:0 0 .5em; line-height:1.15}
h1{font-family:var(--titre); font-size:clamp(32px,5vw,52px); font-weight:400; letter-spacing:.5px}
h2{font-family:var(--display); font-size:clamp(22px,3vw,30px); font-weight:800}
h3{font-family:var(--display); font-size:19px; font-weight:600}
.sur-titre{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.14em; font-size:13px; color:var(--cyan); margin-bottom:10px;
}
.chapeau{font-size:18px; color:var(--encre-doux); max-width:62ch}
/* En hero, le sur-titre respire davantage : il porte une ligne d'info et non
   une simple étiquette de carte, et le h1 qui suit est bien plus gros. */
.hero .sur-titre{margin-bottom:22px}

/* -- Sections -------------------------------------------------------------- */
.section{padding:36px 0}
.hero{
  background:linear-gradient(180deg,var(--creme) 0%,var(--sable) 100%);
  border-bottom:1px solid var(--trait); padding:40px 0 32px;
}

/* -- Boutons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--magenta); color:#fff; text-decoration:none;
  font-family:var(--display); font-weight:800; font-size:15px;
  padding:12px 22px; border-radius:999px; border:0; cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{background:var(--magenta-fonce); color:#fff; transform:translateY(-1px)}
.btn:active{transform:none}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.btn-ghost{background:transparent; color:var(--encre); box-shadow:inset 0 0 0 2px var(--trait)}
.btn-ghost:hover{background:var(--creme); color:var(--encre); box-shadow:inset 0 0 0 2px var(--encre)}
.btn-cyan{background:var(--cyan)}
.btn-cyan:hover{background:#00666f}
.btn-petit{padding:8px 16px; font-size:14px}
.btn-large{padding:15px 30px; font-size:17px}
.btn-danger{background:transparent; color:var(--magenta-fonce); box-shadow:inset 0 0 0 2px var(--magenta-clair)}
.btn-danger:hover{background:var(--magenta-clair); color:var(--magenta-fonce)}

/* -- Cartes ---------------------------------------------------------------- */
.carte{
  background:var(--creme); border-radius:var(--r); padding:22px;
  box-shadow:var(--ombre); border:1px solid var(--trait);
}
.grille{display:grid; gap:18px}
@media(min-width:760px){ .grille-2{grid-template-columns:1fr 1fr} }

/* -- Étiquettes ------------------------------------------------------------ */
.etiq{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em;
  padding:5px 12px; border-radius:999px;
}
.etiq-offre{background:var(--cyan-clair); color:var(--cyan)}
.etiq-demande{background:var(--magenta-clair); color:var(--magenta-fonce)}
.etiq-aller{background:#EFE9FA; color:var(--violet)}
.etiq-retour{background:#FFF2DC; color:#96601A}
.etiq-aller_retour{background:#E6F4F5; color:#00666f; box-shadow:inset 0 0 0 1px #B9DFE2}
.etiq-neutre{background:var(--sable); color:var(--gris)}
.etiq-complet{background:var(--trait); color:var(--gris)}
.etiq-complet-bandeau{border-left-color:var(--gris); background:var(--sable); color:var(--encre-doux)}

/* -- Trajets --------------------------------------------------------------- */
.trajets{display:grid; gap:14px; margin:0; padding:0; list-style:none}
.trajet{
  background:var(--creme); border:1px solid var(--trait); border-left:5px solid var(--cyan);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--ombre);
  transition:box-shadow .15s ease, transform .15s ease;
}
.trajet:hover{box-shadow:var(--ombre-haute); transform:translateY(-2px)}
.trajet.est-demande{border-left-color:var(--magenta)}
.trajet.est-surligne{outline:3px solid var(--violet-clair); outline-offset:2px}
/* Offre complète : atténuée sans être illisible, et le liseré perd sa couleur
   pour qu'on la distingue au premier coup d'œil dans une liste. Les boutons
   restent pleinement contrastés : on doit pouvoir contacter quand même. */
.trajet.est-complet{opacity:.6; border-left-color:var(--trait)}
.trajet.est-complet:hover{opacity:1}
.trajet-tete{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.trajet-lieu{font-family:var(--display); font-weight:800; font-size:19px; margin:0}
.trajet-meta{color:var(--gris); font-size:14px; display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}
.trajet-notes{margin:10px 0 0; color:var(--encre-doux); font-size:15px}
.trajet-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}

/* -- Filtres --------------------------------------------------------------- */
.filtres{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 18px}
.filtre{
  border:0; cursor:pointer; font-family:var(--display); font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em;
  padding:9px 16px; border-radius:999px;
  background:var(--creme); color:var(--gris); box-shadow:inset 0 0 0 1px var(--trait);
}
.filtre:hover{color:var(--encre)}
.filtre[aria-pressed="true"]{background:var(--encre); color:#fff; box-shadow:none}

/* -- Formulaires ----------------------------------------------------------- */
.champ{margin-bottom:18px}
.champ label{display:block; font-weight:700; font-size:14px; margin-bottom:6px}
.champ .aide{display:block; font-weight:400; color:var(--gris); font-size:13px; margin-top:2px}
input[type=text],input[type=email],input[type=tel],input[type=time],input[type=number],select,textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--encre);
  background:var(--creme); border:1px solid var(--trait); border-radius:12px;
  padding:12px 14px; transition:border-color .12s ease, box-shadow .12s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px var(--magenta-clair);
}
textarea{min-height:96px; resize:vertical}
.champ-inline{display:flex; gap:14px; flex-wrap:wrap}
.champ-inline > *{flex:1 1 160px}
.case{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5}
.case input{margin-top:3px; width:18px; height:18px; accent-color:var(--magenta); flex:none}

/* Choix radio présentés en grandes cartes cliquables */
.choix{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media(max-width:559px){ .choix{grid-template-columns:1fr} }
.choix label{
  display:block; cursor:pointer; background:var(--creme);
  border:2px solid var(--trait); border-radius:var(--r); padding:16px;
}
.choix input{position:absolute; opacity:0; pointer-events:none}
.choix input:checked + .choix-corps{color:var(--encre)}
.choix label:has(input:checked){border-color:var(--magenta); background:var(--magenta-clair)}
.choix label:has(input:focus-visible){box-shadow:0 0 0 3px var(--magenta-clair)}
.choix-titre{font-family:var(--display); font-weight:800; font-size:16px; display:block}
.choix-aide{color:var(--gris); font-size:13px; display:block; margin-top:2px}

/* -- Messages système ------------------------------------------------------ */
.alerte{
  border-radius:14px; padding:14px 18px; margin:0 0 20px;
  border-left:5px solid var(--cyan); background:var(--cyan-clair); color:#00565e;
}
.alerte-ok{border-color:var(--cyan); background:var(--cyan-clair); color:#00565e}
.alerte-ko{border-color:var(--magenta); background:var(--magenta-clair); color:#A8004E}
.alerte-info{border-color:var(--violet); background:#EFE9FA; color:#4B2A85}

.vide{
  text-align:center; padding:44px 20px; color:var(--gris);
  background:var(--creme); border:2px dashed var(--trait); border-radius:var(--r);
}

/* -- Messagerie ------------------------------------------------------------ */
.fil{display:grid; gap:12px; margin-bottom:20px}
.bulle{
  max-width:min(80%,560px); padding:12px 16px; border-radius:16px;
  background:var(--creme); border:1px solid var(--trait); box-shadow:var(--ombre);
}
.bulle-moi{margin-left:auto; background:var(--magenta-clair); border-color:transparent}
.bulle-date{display:block; font-size:12px; color:var(--gris); margin-top:5px}

/* -- Pied de page --------------------------------------------------------
   Repris tel quel de la landing (index.html) : mêmes valeurs, pour que le
   passage d'une page à l'autre ne se voie pas. */
footer{padding:44px 0 40px; border-top:1px solid var(--trait); background:var(--sable); margin-top:48px}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:flex-end}
.mark{font-family:var(--titre); letter-spacing:.01em; line-height:1}
.foot .mark{font-size:30px; color:var(--magenta)}
.foot-links{display:flex; flex-wrap:wrap; gap:20px; font-size:14px}
.foot-links a{text-decoration:none; color:var(--encre-doux)}
.foot-links a:hover{color:var(--cyan)}
.credit{width:100%; font-size:12px; color:var(--gris); margin-top:24px; line-height:1.5}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}