/* La vitrine publique.

   AUCUN SCRIPT, et une seule police — celle de la maison, servie depuis notre
   serveur. Un client debout dans le hall de l'aéroport Fès-Saïss, sur un
   réseau chargé, doit voir le numéro et pouvoir appuyer dessus. Chaque fichier
   supplémentaire est un aller-retour de plus avant que la page n'existe, et
   Google mesure ce délai : il pèse sur le classement ET sur la note de page
   d'arrivée qui fixe le prix du clic.

   Les couleurs viennent du logo : le fond sombre du bandeau, le doré du mot
   « ANC ». */

:root {
  --encre: #15171a;
  --encre-douce: #23262b;
  --second: #4e545c;
  --estompe: #878d96;
  --or: #c8873b;
  --or-clair: #e2a85c;
  --surface: #ffffff;
  --fond: #f5f3f0;
  --filet: #e5e2dd;
  --vert: #157a4a;
  --rayon: 14px;
  --large: 1100px;
  --gouttiere: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.62 Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Noto Sans Arabic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--or); }

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

/* ------------------------------------------------------------- en-tête */
.entete {
  background: var(--encre);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.entete .enveloppe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 12px; padding-bottom: 12px;
}
.marque img { width: 132px; }
.langues { display: flex; gap: 2px; }
.langues a {
  color: #cfcbc4; text-decoration: none; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; padding: 7px 10px; border-radius: 8px;
}
.langues a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------------------------------------------------------------- hero
   LE DÉGRADÉ N'EST PAS UNE DÉCORATION : tant qu'il n'y a pas de photographie,
   un aplat noir sur toute la largeur fait « page pas finie ». Deux lueurs
   dorées très diluées suffisent à donner de la profondeur, pour zéro octet et
   zéro requête. Le jour où une photo arrive, elle se pose en `background-image`
   par-dessus et le dégradé devient son voile. */
.hero {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(200, 135, 59, .22), transparent 60%),
    radial-gradient(90% 70% at 12% 100%, rgba(200, 135, 59, .10), transparent 55%),
    var(--encre);
  color: #fff;
  padding: 44px 0 46px;
  text-align: center;
}
.hero h1 {
  margin: 0 auto 12px; max-width: 16ch;
  font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.022em;
}
.chapeau {
  margin: 0 auto; max-width: 56ch; color: #c6c2bb; font-size: 16.5px;
}

/* Les deux boutons sont le but de la page : 52 px de haut (Google recommande
   48 au minimum pour une cible tactile), et assez contrastés pour se lire au
   soleil, un téléphone à la main, debout. */
.actions {
  display: flex; flex-wrap: wrap; gap: 11px; justify-content: center;
  margin: 24px 0 0;
}
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 16.5px; font-weight: 700; text-decoration: none;
  transition: transform .12s ease, background-color .12s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton.tel { background: var(--or); color: #15171a; box-shadow: 0 8px 22px rgba(200,135,59,.28); }
.bouton.tel:hover { background: var(--or-clair); }
.bouton.wa { background: #25d366; color: #05301a; box-shadow: 0 8px 22px rgba(37,211,102,.24); }
.bouton.wa:hover { background: #38e07c; }

.depuis {
  margin: 18px 0 0; color: var(--or-clair);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}

/* ----------------------------------------------------------- fil d'Ariane */
.fil {
  max-width: var(--large); margin: 0 auto; padding: 14px var(--gouttiere) 0;
  font-size: 13px; color: var(--estompe);
}
.fil a { color: var(--second); text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- blocs
   UN BLOC SUR DEUX CHANGE DE FOND. Sept sections identiques les unes à la
   suite des autres, c'était un mur : l'œil n'avait aucun repère pour savoir
   où il en était. L'alternance crée ce repère sans ajouter un seul mot. */
.bloc { padding: 34px 0 6px; }
.bloc:nth-of-type(even) { background: var(--surface); padding-bottom: 34px; }
.bloc h2 {
  margin: 0 0 18px;
  font-size: 23px; font-weight: 700; letter-spacing: -.018em;
}
/* Le filet doré sous le titre : trois pixels qui rappellent le logo et
   marquent le début d'une section mieux qu'une marge de plus. */
.bloc h2::after {
  content: ""; display: block; width: 38px; height: 3px; border-radius: 2px;
  background: var(--or); margin-top: 10px;
}

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.points li {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 15px 17px; color: var(--second);
  font-size: 15px;
}
.bloc:nth-of-type(even) .points li { background: var(--fond); }
.points strong {
  display: block; color: var(--encre); margin-bottom: 3px;
  font-size: 15.5px; font-weight: 700;
}

/* ---------------------------------------------------------------- flotte
   DES CARTES, PAS UNE LISTE : une voiture se choisit avec les yeux. */
.flotte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
.v-carte {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); overflow: hidden;
  display: flex; flex-direction: column;
}
.bloc:nth-of-type(even) .v-carte { background: var(--fond); }

/* L'EMPLACEMENT DE LA PHOTO EXISTE AVANT LA PHOTO. Le rapport est tenu par
   `aspect-ratio`, donc la carte occupe déjà sa place définitive : le jour où
   les images arrivent, rien ne saute et la page ne se recompose pas sous le
   doigt du visiteur — ce décalage est précisément ce que Google pénalise. */
.v-photo {
  aspect-ratio: 3 / 2; background: var(--encre-douce);
  display: grid; place-items: center; overflow: hidden;
}
.v-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Faute de photo : la silhouette de la catégorie, dessinée à la main (voir
   _silhouette.html). Elle tient la place sans prétendre être une photo, et
   elle distingue déjà un SUV d'une citadine. Le doré très dilué la pose sur le
   fond sombre sans attirer l'œil plus que le prix. */
.v-silhouette {
  width: 72%; height: auto; color: var(--or);
  opacity: .34;
}

.v-texte { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.v-nom { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.v-detail { color: var(--estompe); font-size: 13.5px; }
.v-prix {
  margin-top: 6px; color: var(--vert); font-weight: 700; font-size: 18px;
  white-space: nowrap;
}
.v-prix small { font-size: 13px; font-weight: 600; color: var(--second); }

/* ----------------------------------------------------------- pied de page */
.pied {
  background: var(--encre); color: #b7b2ab; margin-top: 36px;
  padding: 30px 0 38px; font-size: 14px;
}
.pied p { margin: 0 0 5px; }
.pied strong { color: #fff; font-size: 15px; }
.pied a { color: var(--or-clair); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.plan {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px;
  padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .09);
}
.plan a { color: #9a948c; font-size: 13px; }
.plan a:hover { color: var(--or-clair); }

/* ------------------------------------------------------------ grand écran */
@media (min-width: 620px) {
  .flotte { grid-template-columns: repeat(2, 1fr); }
  .points { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  :root { --gouttiere: 24px; }
  .marque img { width: 156px; }
  .hero { padding: 64px 0 66px; }
  .hero h1 { font-size: 52px; }
  .chapeau { font-size: 18px; }
  .bloc { padding-top: 48px; }
  .bloc:nth-of-type(even) { padding-bottom: 48px; }
  .bloc h2 { font-size: 27px; }
  .flotte { grid-template-columns: repeat(3, 1fr); }
  .points { grid-template-columns: repeat(3, 1fr); }
}

/* L'arabe se lit de droite à gauche ; `dir="rtl"` sur <html> retourne déjà la
   mise en page. Le filet sous les titres doit suivre : écrit `margin-left`, il
   resterait accroché à gauche d'un titre aligné à droite. */
[dir="rtl"] .bloc h2::after { margin-inline-start: 0; }

/* Quelqu'un qui a demandé moins d'animations à son système ne doit pas en
   recevoir de nous. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ------------------------------------------------- Instagram et la carte */
.langues .insta {
  display: inline-flex; align-items: center; padding: 7px 9px;
  color: #cfcbc4;
}
.langues .insta:hover { color: var(--or-clair); background: rgba(255,255,255,.1); }

.bouton.route { background: #fff; color: var(--encre); border: 1px solid var(--filet); }
.bouton.route:hover { border-color: var(--or); color: var(--or); }
.bloc:nth-of-type(even) .bouton.route { background: var(--fond); }

/* La carte garde sa hauteur AVANT d'être chargée : en `loading="lazy"`, un
   cadre sans dimension vaut zéro pixel, puis trois cent quarante d'un coup —
   et tout ce qui est en dessous saute sous le doigt du visiteur. */
.carte {
  margin: 16px 0 4px; border-radius: var(--rayon); overflow: hidden;
  border: 1px solid var(--filet); background: var(--fond);
  aspect-ratio: 16 / 9; max-height: 340px;
}
.carte iframe { width: 100%; height: 100%; border: 0; display: block; }

.reseaux { margin-top: 12px; }
.reseaux a { color: var(--or-clair); }

/* ------------------------------------------------------ crédits photos */
.credit-intro { color: var(--second); max-width: 70ch; margin: 0 0 18px; font-size: 15px; }
.credits li { font-size: 14px; }
.credits strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }

/* La mention sous la flotte : lisible, jamais criarde. Elle protège autant le
   client que l'agence, mais elle ne doit pas concurrencer les prix. */
.note-flotte {
  margin: 14px 0 0; color: var(--estompe); font-size: 13px; max-width: 72ch;
}

/* ---------------------------------------------------- questions fréquentes
   Repliées : la page reste courte à l'œil. Le texte est néanmoins dans le
   document, donc lu par Google — un dépliage en JavaScript l'aurait caché. */
.qr { display: grid; gap: 8px; }
.qr details {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 0 16px;
}
.bloc:nth-of-type(even) .qr details { background: var(--fond); }
.qr summary {
  cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 15px;
  list-style: none;
}
.qr summary::-webkit-details-marker { display: none; }
/* La petite croix qui tourne : elle dit « ça s'ouvre » sans un mot, et elle
   marche dans les deux sens de lecture. */
.qr summary::after {
  content: "+"; float: inline-end; color: var(--or);
  font-weight: 400; font-size: 21px; line-height: 1; transition: transform .15s;
}
.qr details[open] summary::after { content: "–"; }
.qr details p {
  margin: 0 0 15px; color: var(--second); font-size: 14.5px;
  border-top: 1px solid var(--filet); padding-top: 12px;
}