/* =====================================================================
   Verbatims V2 · TelesCoop
   Un formulaire court, un aperçu. Noir et blanc, aucune dépendance au
   design system. Feuille commune au formulaire et à la page de liste.
   ===================================================================== */

@font-face{
  font-family:"JetBrains Mono";
  src:url("../../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
}

/* Les polices de la marque, pour la carte image dessinée au canvas. */
@font-face{font-family:"Anton";src:url("../../fonts/anton-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../../fonts/barlow-condensed-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../../fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../../fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --encre:#000000;
  --fond:#ffffff;
  --filet:#8c8c8c;
  --filet-fort:#000000;
  --gris:#3a3a3a;
  --focus:#0b57d0;
  --marge:clamp(1.5rem, 5vw, 4rem);
  --bloc:clamp(2.5rem, 6vw, 4rem);
}

*{box-sizing:border-box;}

html{background:var(--fond);-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:1rem;
  line-height:1.6;
}

a{color:inherit;}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.page{max-width:72rem;padding:var(--marge);}

.entete{margin:0 0 var(--bloc);}
.marque{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;}
.marque img{display:block;width:150px;max-width:45vw;height:auto;}
.marque .lab{font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;}


/* -- Cadres et champs -------------------------------------------------- */

.cadre{
  border:1px solid var(--filet);
  padding:clamp(1.5rem, 4vw, 2.5rem);
}

.deux{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media (min-width:860px){
  .deux{grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
}

.rang{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.rang-projet{grid-template-columns:1fr 7rem;}
@media (max-width:520px){
  .rang, .rang-projet{grid-template-columns:1fr;}
}

.champ{margin:0 0 1.1rem;display:block;}

label{
  display:block;
  font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gris);
  margin-bottom:.35rem;
}

input[type="text"], textarea{
  font:inherit;
  font-size:1rem;
  width:100%;
  padding:.65rem .75rem;
  border:1px solid var(--filet);
  border-radius:0;
  background:var(--fond);
  color:var(--encre);
}
input[type="text"]:focus, textarea:focus{border-color:var(--filet-fort);}
textarea{resize:vertical;line-height:1.55;}

/* Le piège à robots, invisible pour l’œil et pour le lecteur d’écran. */
#appat{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}


/* -- Points forts ------------------------------------------------------ */

.bloc-compet{
  border:0;
  padding:0;
  margin:0 0 1.1rem;
  min-width:0;
}

.bloc-compet legend{
  padding:0;
  font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gris);
  margin-bottom:.5rem;
}

.etiquettes{display:flex;flex-wrap:wrap;gap:.5rem;}

.etiquette{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .7rem;
  border:1px solid var(--filet);
  /* La règle générale des libellés met les capitales et le gris : une
     étiquette est du texte à lire, pas un intitulé de champ. */
  font-size:.875rem;
  line-height:1.3;
  letter-spacing:normal;
  text-transform:none;
  color:var(--encre);
  margin:0;
  cursor:pointer;
  user-select:none;
}
.etiquette:hover{border-color:var(--filet-fort);}
.etiquette input{
  width:1rem;height:1rem;margin:0;
  accent-color:var(--encre);
  cursor:pointer;
}
.etiquette:has(input:checked){
  background:var(--encre);
  color:var(--fond);
  border-color:var(--encre);
}
.etiquette:has(input:checked) input{accent-color:var(--fond);}
.etiquette:focus-within{outline:3px solid var(--focus);outline-offset:2px;}


/* -- Boutons ----------------------------------------------------------- */

.bt{
  display:inline-block;
  font:inherit;font-size:.875rem;
  padding:.65rem 1.1rem;
  border:1px solid var(--filet-fort);
  background:var(--fond);color:var(--encre);
  text-decoration:none;cursor:pointer;
}
.bt:hover{background:var(--encre);color:var(--fond);}
.bt-plein{background:var(--encre);color:var(--fond);}
.bt-plein:hover{background:var(--fond);color:var(--encre);}
.bt[disabled]{opacity:.45;cursor:default;}
.bt-danger[data-arme="1"]{background:var(--encre);color:var(--fond);}

.pied-form{margin-top:1.5rem;}

.mention{
  margin:.9rem 0 0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--gris);
  max-width:60ch;
}

.retour{
  margin:1rem 0 0;
  min-height:1.4em;
  font-size:.8125rem;
  color:var(--gris);
}


/* -- Aperçu ------------------------------------------------------------ */

.apercu{
  position:sticky;
  top:var(--marge);
}

.ap-projet{
  margin:0 0 1.25rem;
  font-size:.8125rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gris);
  min-height:1.2em;
}

.ap-citation{
  margin:0 0 1.5rem;
  font-family:"Barlow Condensed", system-ui, sans-serif;
  font-size:clamp(1.5rem, 3.2vw, 2rem);
  line-height:1.25;
  min-height:3rem;
}

.ap-nom{
  margin:0;
  font-family:"Anton", Impact, sans-serif;
  font-size:1.25rem;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.ap-precision{margin:.25rem 0 0;font-size:.875rem;color:var(--gris);}

.ap-compet{
  margin:1.25rem 0 0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--gris);
}


/* -- Merci ------------------------------------------------------------- */

.merci{font-size:1.125rem;margin:0;}


/* =====================================================================
   PAGE DE LISTE
   ===================================================================== */

.section{margin:0 0 var(--bloc);}

.titre-section{
  margin:0 0 1.25rem;
  font-size:.8125rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gris);
}

.fiches{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:860px){
  .fiches{grid-template-columns:1fr 1fr;gap:1.5rem;}
}

.fiche{border:1px solid var(--filet);padding:clamp(1.25rem, 3vw, 2rem);}
.fiche .ap-citation{font-size:1.375rem;margin-bottom:1.25rem;}
.fiche .actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--filet);}

.lien-champ{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-start;margin-top:1.25rem;}
.lien-champ input{flex:1 1 22rem;}

.vide{color:var(--gris);font-size:.9375rem;margin:0;}