/* =========================================================================
   Accueil (ordinateur) — de la section « services » au pied de page.
   -------------------------------------------------------------------------
   Feuille propre aux sections réécrites de frontend/views/site/index.php.
   Elle ne cherche pas à corriger le thème : elle habille un balisage écrit
   pour elle, sous le préfixe « ac- ».

   Palette relevée sur le logo, la même que le shell mobile : bleu du bus,
   bleu marine de la carte d'Afrique, rouge du lettrage.

   Les règles portent « .ac-… » sans dépendre de Bootstrap, à une exception
   près : « .container », que le thème définit déjà et qui aligne ces sections
   sur le reste de la page.
   ========================================================================= */

:root {
  --ac-bleu:   var(--yb-blue, #0d65c9);
  --ac-navy:   var(--yb-navy, #0d233e);
  --ac-rouge:  var(--yb-red, #ce130d);
  --ac-encre:  #101828;
  --ac-texte:  #667085;
  --ac-ligne:  #e7eaf0;
  --ac-fond:   #f6f8fb;
}

/* ---------- Ossature commune --------------------------------------------- */

.ac-section, .ac-services, .ac-double, .ac-final { padding: 40px 0; }
.ac-section--grise { background: var(--ac-fond); }

.ac-titre { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.ac-titre--rang {
  max-width: none; margin-bottom: 34px; text-align: left;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.ac-surtitre {
  display: inline-block; margin-bottom: 10px; padding: 5px 13px; border-radius: 999px;
  background: #eef4ff; color: var(--ac-bleu);
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.ac-titre h2 {
  margin: 0; font-size: 34px; line-height: 1.25; font-weight: 800;
  letter-spacing: -.7px; color: var(--ac-encre);
}
.ac-titre p { margin: 12px 0 0; font-size: 16px; color: var(--ac-texte); }

.ac-tout {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 700; color: var(--ac-bleu) !important;
}
.ac-tout:hover { text-decoration: underline; }

.ac-vide {
  padding: 34px; border-radius: 16px; background: #fff; border: 1px dashed var(--ac-ligne);
  text-align: center; color: var(--ac-texte); margin: 0;
}

/* ---------- Services ------------------------------------------------------ */

.ac-grille-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* La tuile entière est cliquable : viser un lien de trois mots à la souris
   est plus coûteux que viser une carte. */
.ac-service {
  display: block; position: relative; overflow: hidden;
  padding: 28px 24px 24px; border-radius: 18px;
  background: #fff; border: 1px solid var(--ac-ligne);
  color: var(--ac-encre) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ac-service:hover {
  transform: translateY(-4px); border-color: transparent;
  box-shadow: 0 16px 38px rgba(16, 24, 40, .13);
}
/* Un filet coloré en haut distingue les quatre métiers sans recourir à quatre
   fonds pleins, qui alourdiraient la rangée. */
.ac-service::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ac-t);
}
.ac-bleu   { --ac-t: var(--yb-blue, #0d65c9); --ac-c: #eff4ff; }
.ac-ambre  { --ac-t: #d97706; --ac-c: #fff7ed; }
.ac-vert   { --ac-t: #059669; --ac-c: #ecfdf5; }
.ac-violet { --ac-t: #7c3aed; --ac-c: #f5f3ff; }

.ac-service__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--ac-c); color: var(--ac-t); font-size: 27px; margin-bottom: 16px;
}
.ac-service h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--ac-encre); }
.ac-service p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--ac-texte); }
.ac-service__chiffre {
  display: block; font-size: 13px; font-weight: 700; color: var(--ac-t);
  padding-top: 13px; border-top: 1px solid var(--ac-ligne);
}
.ac-service__lien {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--ac-encre);
}
.ac-service:hover .ac-service__lien { color: var(--ac-t); }

/* ---------- Suivi de colis et bus urbain --------------------------------- */

.ac-double { padding-top: 0; }
.ac-double__grille { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }

.ac-etiquette {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  padding: 6px 13px; border-radius: 999px;
  background: #eef4ff; color: var(--ac-bleu); font-size: 12.5px; font-weight: 700;
}
.ac-etiquette--claire { background: rgba(255, 255, 255, .16); color: #fff; }

.ac-suivi {
  padding: 34px; border-radius: 20px; background: #fff;
  border: 1px solid var(--ac-ligne); box-shadow: 0 10px 30px rgba(16, 24, 40, .07);
}
.ac-suivi h3 { margin: 0 0 6px; font-size: 25px; font-weight: 800; color: var(--ac-encre); }
.ac-suivi p { margin: 0 0 18px; font-size: 14.5px; color: var(--ac-texte); }

.ac-suivi__champ { display: flex; gap: 10px; }
.ac-suivi__champ input {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px;
  border: 1px solid var(--ac-ligne); border-radius: 12px; background: var(--ac-fond);
  font-size: 15.5px; letter-spacing: 1px; color: var(--ac-encre); outline: none;
}
.ac-suivi__champ input:focus { border-color: var(--ac-bleu); background: #fff; }
.ac-suivi__champ button {
  flex: 0 0 auto; height: 52px; padding: 0 26px; border: 0; border-radius: 12px;
  background: var(--ac-bleu); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ac-suivi__champ button:hover { background: var(--yb-blue-dark, #0a52a4); }
.ac-lien-clair {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 16px;
  font-size: 14px; font-weight: 700; color: var(--ac-bleu) !important;
}

.ac-urbain {
  position: relative; overflow: hidden;
  padding: 34px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, var(--ac-navy) 0%, #17417a 55%, var(--ac-bleu) 100%);
}
/* Deux halos très doux : la base ne porte aucun visuel de réseau, et un aplat
   nu à côté d'une carte blanche paraîtrait inachevé. */
.ac-urbain::before, .ac-urbain::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.ac-urbain::before {
  width: 260px; height: 260px; top: -130px; right: -70px;
  background: radial-gradient(circle, rgba(255, 255, 255, .15), transparent 70%);
}
.ac-urbain::after {
  width: 200px; height: 200px; bottom: -120px; left: -60px;
  background: radial-gradient(circle, rgba(41, 171, 226, .3), transparent 70%);
}
.ac-urbain h3 { position: relative; margin: 0 0 8px; font-size: 25px; font-weight: 800; color: #fff; }
.ac-urbain p { position: relative; margin: 0 0 22px; font-size: 15px; color: rgba(255, 255, 255, .86); }
.ac-urbain__liens { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.ac-urbain__liens a {
  padding: 12px 22px; border-radius: 12px;
  background: #fff; color: var(--ac-navy) !important; font-size: 14.5px; font-weight: 700;
}
.ac-urbain__liens .ac-urbain__plat {
  background: rgba(255, 255, 255, .14); color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* ---------- Cartes (logements et voitures) -------------------------------- */

.ac-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.ac-carte {
  background: #fff; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--ac-ligne);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ac-carte:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(16, 24, 40, .13); }

.ac-carte__media { position: relative; display: block; background: var(--ac-fond); }
/* Hauteur fixe : les fiches portent des photos de formats très différents et
   une grille en dents de scie se lit mal. */
.ac-carte__media img { width: 100%; height: 210px; object-fit: cover; display: block; }
.ac-carte__sansphoto {
  display: flex; align-items: center; justify-content: center;
  height: 210px; color: #cbd2e0; font-size: 40px;
}
.ac-etiq {
  position: absolute; left: 14px; top: 14px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--ac-navy);
  font-size: 12px; font-weight: 700; text-transform: capitalize;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .16);
}

.ac-carte__corps { padding: 18px 20px 20px; }
.ac-carte__corps h3 { margin: 0; font-size: 18.5px; font-weight: 800; letter-spacing: -.3px; }
.ac-carte__corps h3 a { color: var(--ac-encre) !important; }
.ac-carte__corps h3 a:hover { color: var(--ac-bleu) !important; }
.ac-carte__lieu {
  margin: 7px 0 0; display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ac-texte);
}

.ac-specs { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.ac-specs li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; background: var(--ac-fond);
  font-size: 12.5px; font-weight: 700; color: var(--ac-encre);
}
.ac-specs li i { font-size: 15px; color: var(--ac-texte); }

.ac-carte__pied {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ac-ligne);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ac-prix { margin: 0; min-width: 0; line-height: 1.3; }
.ac-prix span { font-size: 12.5px; color: var(--ac-texte); }
.ac-prix strong { display: block; font-size: 20px; font-weight: 800; color: var(--ac-bleu); }
.ac-prix--absent { font-size: 13.5px; font-weight: 600; color: var(--ac-texte); }
.ac-btn {
  flex: 0 0 auto; padding: 11px 22px; border-radius: 11px;
  background: var(--ac-bleu); color: #fff !important; font-size: 14px; font-weight: 700;
}
.ac-btn:hover { background: var(--yb-blue-dark, #0a52a4); }

/* ---------- Application mobile --------------------------------------------
   Même traitement que .ac-urbain (dégradé marine/bleu, halos) : la bannière
   d'origine avait été retirée faute d'application réelle, celle-ci existe
   mais n'est pas encore publiée sur les stores — donc un CTA vers
   l'inscription (#abonnement), pas de boutons App Store / Google Play qui
   ne mèneraient nulle part. */
.ac-appli {
  position: relative; overflow: hidden;
  padding: 56px 0; color: #fff;
  background: linear-gradient(135deg, var(--ac-navy) 0%, #17417a 55%, var(--ac-bleu) 100%);
}
.ac-appli::before, .ac-appli::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.ac-appli::before {
  width: 300px; height: 300px; top: -140px; right: 10%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
}
.ac-appli::after {
  width: 220px; height: 220px; bottom: -120px; left: 6%;
  background: radial-gradient(circle, rgba(41, 171, 226, .28), transparent 70%);
}
.ac-appli__grille {
  position: relative; display: grid; grid-template-columns: 1fr .8fr; gap: 40px; align-items: center;
}
.ac-appli__visuel { display: flex; justify-content: center; }
.ac-appli__visuel img {width: 100%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.ac-appli__texte h3 { margin: 14px 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.6px; color: #fff; }
.ac-appli__texte p { margin: 0 0 22px; font-size: 15px; color: rgba(255, 255, 255, .86); max-width: 420px; }
.ac-appli__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 24px; border-radius: 12px;
  background: #fff; color: var(--ac-navy) !important; font-size: 14.5px; font-weight: 700;
}
@media (max-width: 900px) {
  .ac-appli__grille { grid-template-columns: 1fr; text-align: center; }
  .ac-appli__texte p { margin-left: auto; margin-right: auto; }
  .ac-appli__visuel img { max-width: 220px; }
}

/* ---------- Confiance et abonnement --------------------------------------- */

.ac-final { background: var(--ac-navy); color: #fff; }
/* La liste « Pourquoi passer par YadeBus » est plus haute que la carte
   d'abonnement : « start » calait celle-ci en haut de la rangée plutôt que
   de la centrer sur la hauteur de la colonne voisine. */
.ac-final__grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }

.ac-confiance h2 {
  margin: 0 0 26px; font-size: 30px; font-weight: 800; letter-spacing: -.6px; color: #fff;
}
.ac-confiance ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.ac-confiance li { display: flex; gap: 15px; align-items: flex-start; }
.ac-confiance li i {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 21px;
}
.ac-confiance strong { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.ac-confiance span { font-size: 14px; color: rgba(255, 255, 255, .74); line-height: 1.6; }

.ac-abo { padding: 30px; border-radius: 20px; background: rgba(255, 255, 255, .07); }
.ac-abo h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: #fff; }
.ac-abo > p { margin: 0 0 20px; font-size: 14.5px; color: rgba(255, 255, 255, .74); }
.ac-abo label {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .74);
}
.ac-abo__champ { display: flex; gap: 10px; }
.ac-abo__champ input {
  flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; outline: none;
}
.ac-abo__champ input::placeholder { color: rgba(255, 255, 255, .45); }
.ac-abo__champ input:focus { border-color: #fff; background: rgba(255, 255, 255, .14); }
.ac-abo__champ button {
  flex: 0 0 auto; height: 50px; padding: 0 24px; border: 0; border-radius: 12px;
  background: #fff; color: var(--ac-navy); font-size: 14.5px; font-weight: 800; cursor: pointer;
}
.ac-abo__note {
  margin: 14px 0 0; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: rgba(255, 255, 255, .6);
}
/* Le retour d'inscription se lit à la couleur ET au texte : la teinte seule ne
   suffit pas pour qui distingue mal les couleurs. */
.ac-abo__retour {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600;
}
.ac-abo__retour--ok     { background: rgba(5, 150, 105, .22); color: #a7f3d0; }
.ac-abo__retour--erreur { background: rgba(220, 38, 38, .22); color: #fecaca; }

/* ---------- Largeurs intermédiaires --------------------------------------- */

@media (max-width: 1199.98px) {
  .ac-grille-services { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
  .ac-section, .ac-services, .ac-final { padding: 54px 0; }
  .ac-titre h2 { font-size: 28px; }
  .ac-cartes { grid-template-columns: repeat(2, 1fr); }
  .ac-double__grille, .ac-final__grille { grid-template-columns: 1fr; }
}

/* En dessous de 768px, c'est index-mobile.php qui est servie ; ces règles ne
   valent que pour les tablettes étroites et les fenêtres réduites. */
@media (max-width: 767.98px) {
  .ac-grille-services, .ac-cartes { grid-template-columns: 1fr; }
  .ac-titre--rang { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ac-suivi, .ac-urbain, .ac-abo { padding: 24px; }
  .ac-suivi__champ, .ac-abo__champ { flex-direction: column; }
  .ac-suivi__champ button, .ac-abo__champ button { width: 100%; }
}

/* Pieds de carte alignés : toutes les fiches ne portent pas le même nombre de
   caractéristiques, et des prix à des hauteurs différentes se comparent mal. */
.ac-carte { display: flex; flex-direction: column; }
.ac-carte__corps { display: flex; flex-direction: column; flex: 1 1 auto; }
.ac-carte__pied { margin-top: auto; }
.ac-specs { margin-bottom: 4px; }