/* cours-particuliers-prepa.com
   Identité : la copie double à grands carreaux (réglure Seyès, marge rouge) et l'encre bleue.
   Un seul moment fort : la « phrase à trous » de l'accueil, posée sur la réglure. */

:root {
  --papier: #fbfcfe;
  --carte: #ffffff;
  --texte: #1e2430;
  --doux: #566079;
  --encre: #1b3a8c;
  --encre-fonce: #12285f;
  --marge: #d7263d;
  --ligne: #c9d6ee;
  --ligne-fine: #e4eaf6;
  --succes: #1d6b3a;
  --scientifique: #0f6e78;
  --economique: #9a5800;
  --litteraire: #7a3e7a;
  --multi: #566079;
  --titres: 'Literata', Georgia, 'Times New Roman', serif;
  --corps: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --interligne: 1.6;
  --pas: 8px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #10151f;
    --carte: #171e2c;
    --texte: #e6eaf2;
    --doux: #a3adc2;
    --encre: #9db6ff;
    --encre-fonce: #c3d2ff;
    --marge: #ff6b7d;
    --ligne: #2c3a57;
    --ligne-fine: #222c42;
    --succes: #6fd39a;
    --scientifique: #4fc3cf;
    --economique: #f0a648;
    --litteraire: #d895d8;
    --multi: #a3adc2;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font: 1.0625rem/var(--interligne) var(--corps);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--titres); font-weight: 700; line-height: 1.2; color: var(--texte); }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); margin: 2em 0 .6em; }
h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; }
p, ul, ol { margin: 0 0 1em; }

.evitement { position: absolute; left: -999px; top: 0; background: var(--encre); color: #fff; padding: 8px 14px; z-index: 10; }
.evitement:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- en-tête et pied */

.entete { border-bottom: 1px solid var(--ligne); background: var(--carte); }
.entete-in, .pied-in, .principal { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.entete-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); text-decoration: none; font-family: var(--titres); font-size: 1.15rem; font-weight: 500; }
.logo b { font-weight: 700; }
.logo svg rect { fill: var(--carte); }
.menu { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .97rem; }
.menu a { color: var(--texte); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--ligne); }
.menu a[aria-current="page"] { border-bottom-color: var(--marge); }

.principal { padding-top: 24px; padding-bottom: 64px; min-height: 60vh; }

.pied { border-top: 1px solid var(--ligne); background: var(--carte); color: var(--doux); font-size: .93rem; }
.pied-in { padding-top: 24px; padding-bottom: 32px; }
.pied p { max-width: 70ch; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pied a { color: var(--doux); }

.ariane ol { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 4px; font-size: .9rem; color: var(--doux); }
.ariane li + li::before { content: '›'; margin-right: 6px; color: var(--ligne); }
.ariane a { color: var(--doux); }

/* ---------------------------------------------------------------- accueil : la phrase à trous */

.une {
  position: relative;
  margin: -24px -16px 0;
  padding: 48px 16px 40px 56px;
  /* Réglure Seyès : interligne de 8 mm (4 lignes fines), ligne forte bleue, marge rouge */
  --interligne-seyes: 32px;
  background-color: var(--carte);
  background-image:
    linear-gradient(to right, transparent 39px, var(--marge) 39px, var(--marge) 41px, transparent 41px),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--interligne-seyes) - 1px), var(--ligne) calc(var(--interligne-seyes) - 1px) var(--interligne-seyes)),
    repeating-linear-gradient(to bottom, transparent 0 7px, var(--ligne-fine) 7px 8px);
  border-bottom: 1px solid var(--ligne);
}
.une h1 { max-width: 20ch; margin-bottom: .4em; }
.une .chapo { max-width: 60ch; color: var(--doux); font-size: 1.1rem; }

.phrase { margin: 32px 0 20px; }
.phrase p {
  font-family: var(--titres);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
  line-height: 2;
  margin: 0 0 20px;
  color: var(--texte);
  max-width: 34em;
}
.trou { display: inline-block; }
.trou select {
  font: inherit;
  font-family: var(--titres);
  color: var(--encre);
  font-style: italic;
  background: transparent;
  border: 0;
  border-bottom: 2px dashed var(--encre);
  border-radius: 0;
  padding: 0 1.2em 0 .1em;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - .55em) 55%, calc(100% - .3em) 55%;
  background-size: .25em .25em;
  background-repeat: no-repeat;
  cursor: pointer;
  field-sizing: content;
}
.trou select:hover, .trou select:focus { border-bottom-style: solid; }
.trou select option, .trou select optgroup { font-style: normal; color: #1e2430; font-family: var(--corps); font-size: 1rem; }
.une-autre { color: var(--doux); }

/* ---------------------------------------------------------------- blocs, boutons */

.bloc { max-width: 1120px; margin-top: 48px; }
.bloc > h2:first-child { margin-top: 0; }

button, .bouton {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  background: var(--encre);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 11px 20px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
@media (prefers-color-scheme: dark) { button, .bouton { color: #0d1322; } }
button:hover, .bouton:hover { background: var(--encre-fonce); text-decoration: none; }
button:disabled { opacity: .6; cursor: wait; }
button.danger { background: transparent; color: var(--marge); border: 1px solid currentColor; }
.bouton + a { margin-left: 16px; }

.chapo { font-size: 1.12rem; color: var(--doux); max-width: 62ch; }
.tete-page { margin-bottom: 24px; }
.tete-page h1 { max-width: 28ch; }

/* ---------------------------------------------------------------- fiches d'annonces */

.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.fiche {
  --voie: var(--multi);
  display: flex;
  gap: 14px;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-left: 5px solid var(--voie);
  border-radius: 3px;
  padding: 14px 16px;
}
.voie-scientifique { --voie: var(--scientifique); }
.voie-economique { --voie: var(--economique); }
.voie-litteraire { --voie: var(--litteraire); }
.voie-multi { --voie: var(--multi); }
.fiche-photo { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; flex: none; }
.fiche-corps { min-width: 0; }
.fiche h3 { margin: 2px 0 6px; font-size: 1.08rem; }
.fiche h3 a { color: var(--texte); text-decoration: none; }
.fiche h3 a:hover { color: var(--encre); text-decoration: underline; }
.fiche p { margin: 0 0 4px; font-size: .95rem; }
.fiche-type { font-size: .85rem !important; font-weight: 700; }
.type-offre { color: var(--encre); }
.type-demande { color: var(--marge); }
.fiche-matieres { color: var(--texte); }
.fiche-filieres { display: flex; flex-wrap: wrap; gap: 4px; }
.filiere { font-size: .8rem; font-weight: 700; color: var(--voie); border: 1px solid currentColor; border-radius: 2px; padding: 0 5px; }
.fiche .filiere { color: var(--voie); }
.fiche-lieu { color: var(--doux); }
.fiche-tarif { display: block; color: var(--texte); font-weight: 700; }

.compte { color: var(--doux); margin: 16px 0 12px; }
.vide { border: 1px dashed var(--ligne); padding: 24px; border-radius: 3px; background: var(--carte); max-width: 60ch; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 32px 0; }

/* Index des matières, rangé par voie */
.index-matieres .voie { margin-bottom: 20px; }
.index-matieres .voie h3 { font-size: 1rem; margin: 0 0 8px; color: var(--voie); }
.index-matieres ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.index-matieres > ul { margin-top: 8px; }

.etapes ol { padding-left: 1.4em; max-width: 60ch; }
.etapes li { margin-bottom: 6px; }
.confiance { border-top: 1px solid var(--ligne); padding-top: 24px; color: var(--doux); max-width: 70ch; }

/* ---------------------------------------------------------------- filtres */

.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 3px; }
.filtres label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--doux); flex: 1 1 160px; }
.filtres label.dep { flex: 0 1 130px; }
.filtres select, .filtres input { font: inherit; font-size: 1rem; color: var(--texte); background: var(--papier); border: 1px solid var(--ligne); border-radius: 3px; padding: 8px; min-width: 0; }

/* ---------------------------------------------------------------- page d'annonce */

.tete-annonce h1 { max-width: 30ch; }
.auteur { color: var(--doux); }
.annonce-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.annonce-texte { max-width: 68ch; }
.annonce-infos { background: var(--carte); border: 1px solid var(--ligne); border-top: 5px solid var(--voie); border-radius: 3px; padding: 16px 18px; }
.annonce-infos dl { margin: 0; }
.annonce-infos dt { font-weight: 700; font-size: .9rem; color: var(--doux); margin-top: 12px; }
.annonce-infos dt:first-child { margin-top: 0; }
.annonce-infos dd { margin: 2px 0 0; }
.puces { list-style: none; padding: 0; margin: 0; }
.note { font-size: .85rem; color: var(--doux); margin: 14px 0 0; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 20px; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; border: 1px solid var(--ligne); }

.contact { margin-top: 40px; max-width: 640px; }
.encadre { border-left: 4px solid var(--marge); background: var(--carte); padding: 12px 16px; margin: 24px 0; }
.encadre p:last-child { margin-bottom: 0; }
.signaler { margin-top: 32px; max-width: 640px; color: var(--doux); }
.signaler summary { cursor: pointer; }
.signaler[open] summary { margin-bottom: 12px; }

/* ---------------------------------------------------------------- formulaires */

.formulaire { display: grid; gap: 16px; max-width: 720px; }
.formulaire fieldset { border: 1px solid var(--ligne); border-radius: 3px; padding: 16px; margin: 0; background: var(--carte); display: grid; gap: 12px; min-width: 0; }
.formulaire legend { font-family: var(--titres); font-weight: 700; font-size: 1.1rem; padding: 0 6px; }
.formulaire label { display: grid; gap: 4px; font-weight: 700; font-size: .95rem; }
.formulaire input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .formulaire textarea, .formulaire select {
  font: inherit; font-weight: 400; color: var(--texte); background: var(--papier);
  border: 1px solid var(--ligne); border-radius: 3px; padding: 10px; width: 100%;
}
.formulaire > button { justify-self: start; }
.formulaire textarea { resize: vertical; line-height: 1.5; }
.formulaire [aria-invalid="true"] { border-color: var(--marge) !important; }
.formulaire label.case { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.formulaire label.case input { margin-top: .3em; flex: none; width: 1.1em; height: 1.1em; accent-color: var(--encre); }
.grille-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px 16px; }
.ligne-cases, .choix-type { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.choix-type label.case { font-weight: 700; font-size: 1.05rem; }
.groupe-titre { font-weight: 700; color: var(--voie); margin: 4px 0 6px; font-size: .95rem; }
.lieu { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.aide { font-weight: 400; font-size: .88rem; color: var(--doux); margin: 0; }
.piege { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.apercu-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.apercu-photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 3px; border: 1px solid var(--ligne); }
.erreur-champ { color: var(--marge); font-weight: 700; font-size: .9rem; margin: 2px 0 0; }
.resultat { margin: 0; font-weight: 700; }
.resultat.succes { color: var(--succes); }
.resultat.echec { color: var(--marge); }
.alerte { border-left: 4px solid var(--marge); padding: 8px 12px; background: var(--carte); }
.cf-turnstile { min-height: 65px; }

/* ---------------------------------------------------------------- pages de texte */

.texte.avec-sommaire { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: 'tete tete' 'prose sommaire'; gap: 0 48px; }
.texte.avec-sommaire .tete-page { grid-area: tete; }
.texte.avec-sommaire .prose { grid-area: prose; }
.sommaire { grid-area: sommaire; position: sticky; top: 16px; align-self: start; font-size: .92rem; border-left: 2px solid var(--ligne); padding-left: 14px; }
.sommaire p { font-weight: 700; margin-bottom: 6px; }
.sommaire ol { padding-left: 1.2em; margin: 0; }
.prose { max-width: 68ch; }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: 6px; }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; border: 1px solid var(--ligne); border-radius: 3px; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; background: var(--carte); }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--ligne-fine); }
thead th { background: var(--papier); border-bottom: 1px solid var(--ligne); }
.maj { color: var(--doux); font-size: .9rem; margin-top: 2em; }

.message { max-width: 60ch; padding: 24px 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.actions form { margin: 0; }

/* ---------------------------------------------------------------- modération */

.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.onglets button { background: var(--carte); color: var(--texte); border: 1px solid var(--ligne); font-weight: 400; }
.onglets button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.fiche-admin { background: var(--carte); border: 1px solid var(--ligne); border-radius: 3px; padding: 16px; margin-bottom: 16px; }
.fiche-admin.suspecte { border-left: 5px solid var(--marge); }
.fiche-admin h2 { margin: 0 0 8px; font-size: 1.15rem; }
.meta-admin { color: var(--doux); font-size: .92rem; padding-left: 1.1em; }
.texte-admin { white-space: pre-wrap; max-width: 75ch; }
.signalements { border-left: 4px solid var(--marge); padding-left: 12px; margin-bottom: 12px; }
.signalements h3 { margin-top: 0; }

/* ---------------------------------------------------------------- petits écrans */

@media (max-width: 860px) {
  .annonce-grille { grid-template-columns: 1fr; }
  .texte.avec-sommaire { grid-template-columns: 1fr; grid-template-areas: 'tete' 'sommaire' 'prose'; }
  .sommaire { position: static; margin-bottom: 24px; }
}
@media (max-width: 560px) {
  .une { padding-left: 36px; padding-top: 32px; }
  .une { background-image:
    linear-gradient(to right, transparent 21px, var(--marge) 21px, var(--marge) 23px, transparent 23px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--ligne) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 7px, var(--ligne-fine) 7px 8px); }
  .lieu { grid-template-columns: 1fr; }
  .menu { font-size: .92rem; gap: 2px 14px; }
  .bouton + a { display: inline-block; margin: 12px 0 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.pied .freres { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ligne-fine); font-size: .88rem; }