/* ==========================================================================
   04-COMPOSANTS.CSS — Briques réutilisées sur plusieurs pages
   --------------------------------------------------------------------------
   Boutons, libellés, listes-index, emplacements photo, tableaux, formulaires.
   Volontairement sans ombre portée ni angle arrondi : le site tient par les
   filets, l'échelle typographique et le vide.
   ========================================================================== */

/* === LIBELLE MONO ========================================================= */
/* Le marqueur de registre du site. Sert de sur-titre, de numéro d'index,
   de métadonnée. C'est lui qui remplace les « sur-titres » colorés. */

.libelle {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gris-texte);
}
.libelle-accent { color: var(--accent); }

/* Libellé précédé d'un filet horizontal — sert d'ouverture de section. */
.libelle-filet {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.libelle-filet::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}


/* === BOUTONS ============================================================== */
/* Angles nets. Le bouton plein se remplit de noir au survol : un seul
   mouvement, net, sans transformation ni ombre. */

.bouton {
  --fond: var(--accent);
  --texte: var(--blanc);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 50px;
  padding: 0 var(--e-6);
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--fond);
  border-radius: var(--r-0);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--d-court) var(--ease),
              border-color var(--d-court) var(--ease),
              color var(--d-court) var(--ease);
}
.bouton:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }

.bouton-ligne {
  --fond: transparent;
  --texte: var(--noir);
  border-color: var(--gris-filet);
}
.bouton-ligne:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }

.section-inv .bouton { --fond: var(--blanc); --texte: var(--noir); }
.section-inv .bouton:hover { background: var(--accent); border-color: var(--accent); color: var(--blanc); }

/* La flèche avance au survol — le signal « ça va quelque part ». */
.bouton .fleche { transition: transform var(--d-court) var(--ease); }
.bouton:hover .fleche { transform: translateX(4px); }


/* === LIEN-FLECHE ========================================================== */

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-s);
  font-weight: 500;
  padding-block: var(--e-2);
  transition: color var(--d-instant) var(--ease);
}
.lien-fleche .fleche { transition: transform var(--d-court) var(--ease); }
.lien-fleche:hover { color: var(--accent); }
.lien-fleche:hover .fleche { transform: translateX(5px); }


/* === LISTE-INDEX ========================================================== */
/* Remplace les grilles de cartes. Une ligne par entrée, séparée d'un filet,
   numérotée en mono. Au survol, un aplat noir balaie la ligne depuis le bas
   et le texte s'inverse. C'est le composant central du site. */

.index { border-top: var(--filet); }

.index-ligne { position: relative; border-bottom: var(--filet); }

.index-lien {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4) var(--e-5);
  align-items: baseline;
  padding-block: var(--e-6);
  transition: color var(--d-court) var(--ease),
              padding-inline var(--d-court) var(--ease);
}
@media (min-width: 900px) {
  .index-lien {
    grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    padding-block: var(--e-7);
  }
}

/* Le balayage. Posé sur la ligne, pas sur le lien, pour couvrir toute la
   largeur y compris les gouttières. */
.index-ligne::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noir);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--d-court) var(--ease-out);
}
.index-ligne:hover::before,
.index-ligne:focus-within::before { transform: scaleY(1); }

.index-ligne:hover .index-lien,
.index-ligne:focus-within .index-lien { color: var(--blanc); }
@media (min-width: 900px) {
  .index-ligne:hover .index-lien,
  .index-ligne:focus-within .index-lien { padding-inline: var(--e-5); }
}

.index-num {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
  transition: color var(--d-court) var(--ease);
}
.index-ligne:hover .index-num,
.index-ligne:focus-within .index-num { color: var(--accent-clair); }

.index-titre {
  font-size: var(--t-l);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.index-desc {
  font-size: var(--t-s);
  color: var(--gris-texte);
  transition: color var(--d-court) var(--ease);
}
.index-ligne:hover .index-desc,
.index-ligne:focus-within .index-desc { color: rgba(255,255,255,.72); }

.index-fleche { display: none; }
@media (min-width: 900px) { .index-fleche { display: block; } }
.index-ligne:hover .index-fleche { transform: translateX(5px); }
.index-fleche { transition: transform var(--d-court) var(--ease); }


/* === EMPLACEMENT PHOTO ==================================================== */
/* Tant qu'aucune image n'est fournie, l'emplacement affiche ses propres
   spécifications. Il ne fait pas semblant d'être une photo. */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--gris-surface);
  aspect-ratio: var(--ratio, 3 / 2);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-long) var(--ease-out);
}
.photo-zoom:hover img { transform: scale(1.04); }

.photo-vide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: var(--e-5);
  border: 1px dashed var(--gris-filet);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}
.photo-vide strong { font-weight: 500; color: var(--noir); }

.photo-legende {
  margin-top: var(--e-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}


/* === BANDE DEFILANTE ====================================================== */
/* Un seul élément décoratif du site. S'arrête au survol et en animations
   réduites, comme l'exige la règle sur les contenus en mouvement. */

.bande {
  border-block: var(--filet);
  padding-block: var(--e-5);
  overflow: hidden;
  white-space: nowrap;
}
.bande-piste {
  display: inline-flex;
  gap: var(--e-7);
  padding-right: var(--e-7);
  animation: defile 38s linear infinite;
}
.bande:hover .bande-piste,
.bande:focus-within .bande-piste { animation-play-state: paused; }

.bande-item {
  font-size: var(--t-l);
  font-weight: 450;
  letter-spacing: -0.03em;
  color: var(--gris-texte);
}
.bande-item::after {
  content: "·";
  margin-left: var(--e-7);
  color: var(--accent);
}

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* === CHIFFRES ============================================================= */

.chiffres {
  display: grid;
  gap: var(--e-7);
  border-top: var(--filet);
  padding-top: var(--e-7);
}
@media (min-width: 640px)  { .chiffres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .chiffres { grid-template-columns: repeat(4, 1fr); gap: var(--e-6); } }

.chiffre-valeur {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre-note {
  margin-top: var(--e-4);
  font-size: var(--t-s);
  color: var(--gris-texte);
  max-width: 26ch;
}


/* === ETIQUETTES =========================================================== */

.etiquettes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.etiquette {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--e-4);
  border: var(--filet);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--gris-texte);
}


/* === NOTE ENCADREE ======================================================== */

.note {
  border-left: 2px solid var(--accent);
  padding-left: var(--e-5);
  font-size: var(--t-m);
}
.note-mono {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: var(--e-3);
}

.a-rediger {
  border: 1px dashed var(--gris-filet);
  padding: var(--e-5);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
  line-height: 1.7;
}


/* === TABLEAU ============================================================== */

.tableau { font-size: var(--t-s); }
.tableau th, .tableau td {
  text-align: left;
  padding: var(--e-4) var(--e-4);
  border-bottom: var(--filet);
  vertical-align: top;
}
.tableau thead th {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-texte);
  font-weight: 500;
  border-bottom: 1px solid var(--noir);
}
.tableau tbody tr:hover { background: var(--gris-surface); }
.tableau .oui { color: var(--accent); font-weight: 500; }
.tableau .non { color: var(--gris-texte); }


/* === ACCORDEON (FAQ) ====================================================== */

.accordeon { border-top: var(--filet); }
.accordeon details { border-bottom: var(--filet); }
.accordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding-block: var(--e-5);
  min-height: 64px;
  font-size: var(--t-m);
  font-weight: 450;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  transition: color var(--d-instant) var(--ease);
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary:hover { color: var(--accent); }
.accordeon summary .signe {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--t-m);
  transition: transform var(--d-court) var(--ease);
}
.accordeon details[open] summary .signe { transform: rotate(45deg); }
.accordeon .reponse {
  padding-bottom: var(--e-5);
  max-width: 70ch;
  color: var(--gris-texte);
  font-size: var(--t-s);
}


/* === FIL D'ARIANE ========================================================= */

.ariane {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}
.ariane li + li::before { content: "/"; margin-right: var(--e-3); }
.ariane a:hover { color: var(--noir); }


/* === FORMULAIRE =========================================================== */

.champ { margin-bottom: var(--e-5); }
.champ label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris-texte);
  margin-bottom: var(--e-3);
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--e-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gris-filet);
  border-radius: 0;
  font-size: var(--t-m);
  transition: border-color var(--d-court) var(--ease);
}
.champ textarea { min-height: 120px; resize: vertical; padding-top: var(--e-4); }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.champ-aide { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--gris-texte); }

/* L'erreur est écrite, pas seulement colorée. */
.champ-erreur {
  margin-top: var(--e-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: #C81E1E;
}
.champ.en-erreur input,
.champ.en-erreur textarea { border-bottom-color: #C81E1E; }

.resume-erreurs {
  border: 1px solid #C81E1E;
  padding: var(--e-4);
  margin-bottom: var(--e-6);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: #C81E1E;
}