/* Feuille de style unique du site auto.arenai.fr.
 *
 * Les quatre pages la partagent. Elles n'ont pas la même densité : l'accueil est
 * une page de présentation, large, en sections ; les trois autres sont des pages
 * de lecture, en une colonne. Trois sélecteurs entraient donc en collision entre
 * les deux familles — `main`, les titres, et `.postes`, qui désigne une grille de
 * cartes sur l'accueil et une ligne discrète sous un entretien ailleurs.
 *
 * D'où la classe portée par <body> : `accueil` d'un côté, `interne` de l'autre
 * (plus `legal` pour la politique de confidentialité, dont les titres rythment un
 * texte long au lieu de coiffer des cartes). Renommer les classes dans le
 * balisage aurait aussi marché, mais aurait touché quatre fichiers HTML pour un
 * conflit qui ne tient qu'à leur cohabitation ici.
 *
 * ATTENTION : les pages de données déclarent une politique de sécurité de
 * contenu. Elle autorise `style-src 'self'` justement pour ce fichier ; le
 * déplacer ou le renommer sans mettre la politique à jour laisserait les pages
 * sans aucun style.
 */

/* ── Palette ─────────────────────────────────────────────────────────────────
   L'ambre est celui de l'icône (#fda519, échantillonné). Sur fond clair il ne
   contraste pas assez pour du texte — 1,9:1 — d'où une variante sombre réservée
   aux liens, l'ambre restant à ce qu'il fait bien : les aplats. */
:root {
  --bg: #ffffff;
  --fg: #1a1c1e;
  --muted: #5c6166;
  --line: #e2e5e9;
  --card: #f6f8fa;
  --ambre: #fda519;
  --accent: #a35a00;
  --sur-ambre: #1a1c1e;
  --danger: #c62828;
  --danger-bg: #fdecea;

  /* Largeur de la colonne, reprise par le bandeau, le contenu et le pied pour
     qu'ils s'alignent. L'accueil la redéfinit plus bas. */
  --colonne: 56rem;

  /* Fond de bannière : l'icône est ambrée sur NOIR, et son flou vire donc au
     lavis gris sur fond clair. L'éclaircir ne servirait à rien — le noir reste
     noir quelle que soit la luminosité appliquée. On l'efface donc davantage et
     on sature ce qu'il reste d'ambre, pour un halo chaud plutôt qu'un voile
     terne. Le thème sombre, lui, accueille le lavis sans se ternir. */
  --hero-opacite: .2;
  --hero-saturation: 1.9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #e6e8eb;
    --muted: #9aa1a9;
    --line: #2a2e35;
    --card: #1c1f25;
    --ambre: #fda519;
    --accent: #fdb648;
    --sur-ambre: #14161a;
    --danger: #ff6b6b;
    --danger-bg: #2a1416;
    --hero-opacite: .38;
    --hero-saturation: 1.15;
  }
}

/* ── Base ────────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

p,
li {
  margin: .6rem 0;
}

ul {
  padding-left: 1.25rem;
}

a {
  color: var(--accent);
}

code {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .4em;
  font-size: .9em;
  word-break: break-all;
}

.accueil {
  --colonne: 62rem;
}

.large {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.interne {
  padding-bottom: 4rem;
}

.interne main {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}

/* ── Bandeau et menu ─────────────────────────────────────────────────────── */
.bandeau {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.bandeau>div {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.marque {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}

.interne .marque img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.accueil .marque {
  gap: .65rem;
}

.accueil .marque img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

/* Le menu et le bouton « Mon compte » forment un bloc, pour qu'en repliant sur
   petit écran ils passent à la ligne ensemble plutôt qu'un par un. */
.droite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  font-size: .9rem;
}

/* Chaque entrée est une pastille bordée : cliquable au premier coup d'œil, sans
   se confondre avec « Mon compte ». Celui-ci est un aplat ambré plein —
   l'action principale ; celles-ci ne portent qu'un filet, et restent de la
   navigation. Souligner aurait donné des liens de paragraphe, pas un menu. */
.menu a,
.menu [aria-current] {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  line-height: 1.4;
  white-space: nowrap;
}

.menu a {
  color: var(--fg);
  text-decoration: none;
}

.menu a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--card);
}

/* La page courante garde la pastille, mais remplie et sans lien : elle situe au
   lieu d'inviter à un clic qui ne mènerait nulle part. */
.menu [aria-current] {
  color: var(--muted);
  background: var(--card);
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-block;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--sur-ambre);
  background: var(--ambre);
  border: 0;
  border-radius: 8px;
  padding: .55rem 1.15rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.bouton:hover {
  filter: brightness(1.08);
}

.bouton.discret {
  color: var(--fg);
  background: none;
  border: 1px solid var(--line);
}

/* ═══ Page d'accueil ═════════════════════════════════════════════════════ */

/* ── Bannière ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 3.5rem 0 3rem;
  text-align: center;
}

/* L'icône de l'application, démesurément agrandie et floutée, sert de fond de
   bannière. Débordant de 25 % de chaque côté, le flou ne laisse voir aucun bord
   franc. Le calque est décoratif : aucune information ne s'y trouve. */
.hero::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -2;
  background: url("/icone-app.png") center / cover no-repeat;
  filter: blur(var(--hero-flou, 72px)) saturate(var(--hero-saturation));
  opacity: var(--hero-opacite);
}

/* Voile de lisibilité : le fond ambré remonterait sinon sous le texte, et
   fondrait la bannière dans la section suivante sans transition. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 35%, var(--bg));
}

.hero img.icone {
  width: 132px;
  height: 132px;
  border-radius: 28px;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 0 0 .5rem;
}

.accroche {
  font-size: 1.15rem;
  color: var(--muted);
  margin: 0 auto 1.75rem;
  max-width: 34rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

.mentions {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  justify-content: center;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.accueil section {
  padding: 3rem 0;
  border-top: 1px solid var(--line);
}

.accueil section.pose {
  background: var(--card);
}

.accueil h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 .4rem;
}

.chapeau {
  color: var(--muted);
  margin: 0 0 2rem;
  max-width: 38rem;
}

.grille {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.carte {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem;
}

.carte h3 {
  margin: .7rem 0 .3rem;
  font-size: 1.05rem;
}

.carte p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.picto {
  color: var(--ambre);
  display: block;
}

/* Les postes suivis par l'application. À ne pas confondre avec `.postes` des
   pages internes, plus bas : même nom, deux rôles, d'où la classe sur <body>. */
.accueil .postes {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.accueil .postes li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1rem;
}

.accueil .postes strong {
  display: block;
  font-size: .98rem;
}

.accueil .postes span {
  color: var(--muted);
  font-size: .88rem;
}

.etapes {
  counter-reset: etape;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.etapes li {
  margin: 0;
}

.etapes li::before {
  counter-increment: etape;
  content: counter(etape);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ambre);
  color: var(--sur-ambre);
  font-weight: 700;
  margin-bottom: .6rem;
}

.etapes h3 {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
}

.etapes p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.encadre {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ambre);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0;
}

.encadre p:first-child {
  margin-top: 0;
}

.encadre p:last-child,
.encadre ul:last-child {
  margin-bottom: 0;
}

.accueil footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  color: var(--muted);
  font-size: .9rem;
}

.accueil footer .large {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  justify-content: space-between;
}

.accueil footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
}

footer a {
  color: var(--accent);
}

/* Séparé des liens destinés aux visiteurs : celui-ci ne mène qu'à un formulaire
   de mot de passe, mais autant qu'il ne se lise pas comme une entrée du site. */
.lien-admin {
  max-width: var(--colonne);
  margin: 1.5rem auto 0;
  padding: 0 1.25rem;
  font-size: .8rem;
  opacity: .6;
}

.lien-admin a {
  color: inherit;
}

/* ── Dialogue de connexion ───────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--fg);
  padding: 1.6rem;
  max-width: 28rem;
  width: calc(100% - 2rem);
}

dialog::backdrop {
  background: rgba(0, 0, 0, .6);
}

.accueil dialog h2 {
  font-size: 1.25rem;
  margin-top: 0;
}

dialog .fin {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.4rem;
}

#zone-bouton-google {
  min-height: 44px;
  margin: 1.4rem 0 .25rem;
}

.echec {
  color: #d13438;
}

/* ═══ Pages internes ═════════════════════════════════════════════════════ */

.interne h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 .35rem;
}

.interne h2 {
  font-size: 1.15rem;
  margin: 0 0 .2rem;
}

.sub {
  color: var(--muted);
  margin: 0 0 2rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ambre);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0;
}

.card p:first-child {
  margin-top: 0;
}

.card p:last-child {
  margin-bottom: 0;
}

.barre {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}

.erreur {
  border-left: 3px solid #d13438;
  padding-left: .9rem;
  margin: 1.25rem 0;
}

.interne footer {
  color: var(--muted);
  font-size: .875rem;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

/* ── Consultation des données ────────────────────────────────────────────── */
.plaque {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05em .45em;
  font-size: .85rem;
  color: var(--muted);
}

.km {
  color: var(--muted);
  font-size: .9rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .9rem;
}

th,
td {
  text-align: left;
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
}

td.nb {
  white-space: nowrap;
}

/* Les postes cochés, listés sous le libellé d'un entretien. */
.interne .postes {
  color: var(--muted);
  font-size: .9rem;
}

.vide {
  color: var(--muted);
  font-style: italic;
}

.scroll {
  overflow-x: auto;
}

/* ── Suppression des données ─────────────────────────────────────────────── */
.alerte {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-left: 5px solid var(--danger);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}

.interne .alerte h2 {
  color: var(--danger);
  margin-top: 0;
}

.alerte p:last-child {
  margin-bottom: 0;
}

.compte {
  font-weight: 600;
}

.case {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1.25rem 0;
  cursor: pointer;
}

.case input {
  margin-top: .3rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.bouton-danger {
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--danger);
  border: 0;
  border-radius: 8px;
  padding: .65rem 1.25rem;
  cursor: pointer;
}

.bouton-danger:hover {
  filter: brightness(1.1);
}

.succes {
  border-left: 5px solid #2e7d32;
  padding: .1rem 0 .1rem 1rem;
  margin: 1.5rem 0;
}

/* ── Politique de confidentialité ────────────────────────────────────────── */
/* Ses titres rythment un texte long, là où ceux des autres pages internes
   coiffent des cartes : il leur faut plus d'air au-dessus. */
.legal section.content {
  margin-bottom: 3rem;
}

.legal h1 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 .35rem;
}

.legal h2 {
  font-size: 1.15rem;
  margin: 2.25rem 0 .6rem;
}

.legal hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* ── Écran étroit ────────────────────────────────────────────────────────── */
/* Replié sur trois lignes, un bandeau collant mangerait un cinquième de la
   hauteur utile à chaque défilement. Il repart donc en haut de page. */
@media (max-width: 30rem) {
  .bandeau {
    position: static;
  }

  .bandeau>div {
    gap: .35rem .9rem;
  }

  .marque {
    font-size: .95rem;
  }

  .interne .marque img {
    width: 32px;
    height: 32px;
    border-radius: 7px;
  }

  .accueil .marque img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .hero {
    padding: 2.5rem 0 2rem;
    --hero-flou: 48px;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero img.icone {
    width: 104px;
    height: 104px;
    border-radius: 22px;
  }

  /* Seuls les appels à l'action prennent toute la largeur. Étendre la règle à
     tous les boutons ferait du « Mon compte » du bandeau une barre pleine,
     hors de proportion avec son rôle. */
  .actions {
    flex-direction: column;
  }

  .actions .bouton {
    width: 100%;
    text-align: center;
  }
}
/* « Se connecter avec Apple » : noir, texte blanc, sous le bouton Google. */
.bouton-apple {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 16px;
  border-radius: 6px;
  background: #000;
  color: #fff;
  font: 500 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
}
.bouton-apple:hover { background: #222; }