/* QuiFaitLeJob : base du système de design (docs/design.md).
   Variables, polices auto-hébergées, typographie, en-tête, boutons, étiquettes. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2) format('woff2');
}

:root {
  --bleu: #1D3F94;          /* bleu de travail : fonds, étiquette PRO, liens */
  --marine: #0E1A3A;        /* texte, contours épais, ombres dures */
  --jaune: #FFC61A;         /* action principale, toujours avec du texte marine */
  --fond: #F3F5F9;
  --surface: #FFFFFF;
  --filet: #D5DBE8;
  --bordure-champ: #7A86A6;
  --texte-2: #4A5675;
  --bleu-pale: #E4EAF8;
  --texte-clair: #E3E9F8;
  --police-titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --police-texte: 'Instrument Sans', system-ui, sans-serif;
  --rayon: 10px;
  --ombre-dure: 3px 3px 0 var(--marine);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--marine);
  background: var(--fond);
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 16px;
}
h1 { font-size: clamp(40px, 7vw, 96px); letter-spacing: -0.035em; line-height: 0.95; }
h2 { font-size: clamp(28px, 4vw, 44px); }

a { color: var(--bleu); }
a:hover { color: var(--marine); }

.conteneur { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* En-tête */
.en-tete { background: var(--surface); border-bottom: 1px solid var(--filet); }
.en-tete__ligne {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 32px; padding-top: 12px; padding-bottom: 12px;
}
.logo {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  text-decoration: none; color: var(--marine);
  font-family: var(--police-titre); font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
}
.logo__tuile {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; background: var(--jaune);
  transform: rotate(8deg); font-size: 19px;
}
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.nav a, .nav__lien { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--marine); font-weight: 700; }
.nav__lien { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }
.en-ligne { display: inline; }
.puces--deux { grid-template-columns: repeat(2, 1fr); }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; }
.case { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.liste-demandes { display: grid; gap: 12px; }
.carte-demande--lien { display: flex; flex-direction: column; gap: 6px; margin-top: 0; text-decoration: none; color: var(--marine); }
.carte-demande--lien:hover { border-color: var(--marine); box-shadow: var(--ombre-dure); }
.pastille { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--bleu-pale); color: var(--bleu); align-self: flex-start; }
.pastille--actif { background: #E3F5E8; color: #1B6B3A; }
.pastille--gele { background: #FFF3C4; color: #7A5A00; }
.pastille--exclu { background: #F3D6D6; color: #8A1C1C; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px;
  border: 2px solid var(--marine); border-radius: var(--rayon);
  background: var(--surface); color: var(--marine);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.bouton--principal { background: var(--jaune); box-shadow: var(--ombre-dure); }
.bouton--principal:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--marine); }

/* Étiquettes PRO et PARTICULIER : elles se distinguent par la clarté, pas seulement par la teinte. */
.etiquette {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  vertical-align: middle;
}
.etiquette--pro {
  margin: 3px; background: var(--bleu); color: #FFFFFF;
  border: 1.5px dashed rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 3px var(--bleu);
}
.etiquette--particulier {
  background: var(--surface); color: var(--marine);
  border: 1.5px dashed var(--marine);
}

/* Bloc d'accueil provisoire */
.hero { padding: 48px 0 32px; max-width: 760px; }
.surtitre { margin: 0 0 12px; font-weight: 700; color: var(--bleu); text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
.hero__texte { font-size: 18px; color: var(--texte-2); max-width: 560px; }
.hero__etiquettes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero__legende { color: var(--texte-2); }
.note { margin-top: 32px; padding: 12px 16px; border-left: 4px solid var(--jaune); background: var(--surface); color: var(--texte-2); font-size: 14px; }

.debug { margin-top: 32px; padding: 16px; overflow: auto; background: var(--surface); border: 1px solid var(--filet); font-size: 13px; white-space: pre-wrap; }

/* Pages */
.page { padding: 32px 0 48px; }
.page--etroite { max-width: 640px; }
.titre-page { font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.03em; }
.fil { margin: 0 0 8px; font-size: 14px; }
.bouton--large { width: 100%; min-height: 52px; font-size: 17px; }
.note-centree { text-align: center; color: var(--texte-2); font-size: 14px; }

/* Formulaires (site et admin) */
.formulaire { max-width: 640px; }
.champ { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.champ label, .champ legend, .champ__legende { font-weight: 700; }
.champ legend { padding: 0; margin-bottom: 6px; }
.champ input:not([type="radio"]):not([type="checkbox"]), .champ select, .champ textarea {
  font: inherit; padding: 11px 14px; border: 1.5px solid var(--bordure-champ); border-radius: var(--rayon);
  background: var(--surface); color: var(--marine); width: 100%;
}
.champ input[type="file"] { padding: 10px; border-style: dashed; }
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid var(--jaune); outline-offset: 1px; border-color: var(--marine); }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: #B42318; }
.champ__erreur { margin: 0; color: #B42318; font-size: 14px; font-weight: 600; }
.champ__aide { margin: 0; color: var(--texte-2); font-size: 13px; }
.champ--case label, .radio { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.radio { font-weight: 500; margin: 4px 0; }
.form__erreurs { margin-bottom: 18px; padding: 12px 16px; border-left: 4px solid #B42318; background: #FFF4F2; border-radius: 6px; }
.form__erreurs p { margin: 0 0 6px; font-weight: 700; }
.form__erreurs ul { margin: 0; padding-left: 20px; }

/* Puces de choix (délai) */
.puces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce span {
  display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 4px;
  border: 2px solid var(--marine); border-radius: var(--rayon); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--marine); cursor: pointer; text-align: center;
}
.puce input:checked + span { background: var(--marine); color: #fff; }
.puce input:focus-visible + span { outline: 3px solid var(--jaune); outline-offset: 1px; }

/* Lieu : suggestions de communes */
.lieu { position: relative; }
.suggestions { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% - 42px); display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--marine); border-radius: var(--rayon); box-shadow: var(--ombre-dure); overflow: hidden; }
.suggestions[hidden], .photos__apercu[hidden] { display: none; }
[hidden] { display: none !important; }
.suggestions__item { text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--filet); background: var(--surface); font: inherit; color: var(--marine); cursor: pointer; }
.suggestions__item:hover, .suggestions__item:focus { background: var(--bleu-pale); outline: none; }
.suggestions__item:last-child { border-bottom: 0; }

/* Photos */
.photos__apercu, .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.photos__apercu img, .photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--filet); }

/* Fiche d'une demande (suivi client) */
.carte-demande { margin-top: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--filet); border-radius: 12px; }
.carte-demande__texte { white-space: pre-line; }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 15px; }
.fiche dt { color: var(--texte-2); }
.fiche dd { margin: 0; }

/* Messages flash */
.flash { margin: 16px 0; padding: 12px 16px; border-radius: 8px; border: 1.5px solid; font-weight: 600; }
.flash--succes { background: #E3F5E8; border-color: #1B6B3A; color: #1B6B3A; }
.flash--erreur { background: #FFF4F2; border-color: #B42318; color: #B42318; }
.flash--info { background: var(--bleu-pale); border-color: var(--bleu); color: var(--bleu); }

/* Pied de page */
.pied { padding: 24px 0 40px; color: var(--texte-2); font-size: 14px; }

@media (max-width: 480px) {
  .puces { grid-template-columns: 1fr; }
  .fiche { grid-template-columns: 1fr; gap: 2px 0; }
  .fiche dd { margin-bottom: 8px; }
}

/* Utilitaires : remplacent les attributs style, interdits par la Content-Security-Policy
   (style-src 'self'). !important pour l'emporter sur les composants, chargés après. */
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-32 { margin-top: 32px !important; }
.ml-8 { margin-left: 8px !important; }
.m-0 { margin: 0 !important; }
.mb-4 { margin: 0 0 4px !important; }
.titre-bloc { font-size: 20px !important; margin: 0 0 8px !important; }
.titre-bloc--espace { margin-bottom: 12px !important; }
.pre-ligne { white-space: pre-line !important; }
.largeur-5em { width: 5em !important; }
.largeur-6em { max-width: 6em !important; }
.largeur-7em { max-width: 7em !important; }
.largeur-9em { max-width: 9em !important; }
.largeur-12em { max-width: 12em !important; }
.ecart-16 { gap: 0 16px !important; }