/* theaidispatch.tech — charte des carrousels Instagram d'AI Dispatch (identité « Mix ») : grands titres Newsreader,
   texte Archivo, noms de dépôts en JetBrains Mono, encadrés blancs à bord noir et ombre noire pleine, marqueur jaune
   souligné d'orange, un fond de couleur par rubrique (comme un fond par type de slide). Mobile d'abord. */
@font-face { font-family: "Newsreader"; src: url("/assets/Newsreader.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/Archivo.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/JetBrainsMono.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }

:root {
  --encre: #0E1013; --texte: #1F2937; --gris: #374151; --papier: #F7F8FA; --blanc: #FFFFFF;
  --marqueur: #FEF08A; --souligne: #F59E0B;
  --jaune: #FFD93D; --menthe: #6EE7B7; --bleu: #8EC5FF; --rose: #FFA3C2; --lilas: #C4B5FD; --peche: #FDBA74;
  --orchidee: #F0ABFC; --sable: #FDE68A; --corail: #FCA5A5; --ciel: #93C5FD;
  --vert: #15803D; --bleu-fonce: #1D4ED8; --rouge: #B91C1C;
  --titre: "Newsreader", "Iowan Old Style", Georgia, serif;
  --corps: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --bord: 3px solid var(--encre);
  --ombre: 0 8px 0 var(--encre);
  --rayon: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--texte); font: 500 18px/1.5 var(--corps); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--souligne); }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; box-shadow: 0 0 0 6px var(--marqueur); border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; color: var(--encre); letter-spacing: -0.015em; line-height: 1.06; margin: 0; text-wrap: balance; }
p { margin: 0; }
.cadre { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.etroit { max-width: 760px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; background: var(--encre); color: var(--blanc); padding: 10px 14px; border-radius: 10px; z-index: 30; }
.evitement:focus { top: 12px; }

/* ------------------------------------------------------------------ bandes de couleur (une par rubrique) */
.bande { border-bottom: var(--bord); padding: 34px 0 40px; }
.b-jaune { background: var(--jaune); } .b-menthe { background: var(--menthe); } .b-bleu { background: var(--bleu); }
.b-rose { background: var(--rose); } .b-lilas { background: var(--lilas); } .b-peche { background: var(--peche); }
.b-orchidee { background: var(--orchidee); } .b-sable { background: var(--sable); } .b-corail { background: var(--corail); }
.b-papier { background: var(--papier); } .b-ciel { background: var(--ciel); }
.bande-titre { margin-bottom: 20px; }
.bande-titre h2 { font-size: clamp(30px, 7vw, 46px); }
.bande-titre p { margin-top: 8px; font-size: 18px; color: var(--encre); max-width: 40em; }

/* ------------------------------------------------------------------ en-tête (comme l'en-tête des slides) */
.tete { padding-top: 18px; }
.tete .cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; border-bottom: var(--bord); padding-bottom: 14px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--encre); }
.logo-ai { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--encre); color: var(--marqueur); font: 700 21px/1 var(--titre); border-radius: 10px; box-shadow: 0 4px 0 var(--souligne); }
.logo-nom { font: 600 29px/1 var(--titre); letter-spacing: -0.01em; }
.tete-date { font: 800 15px/1 var(--corps); color: var(--encre); }
.nav { display: flex; gap: 8px; width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; font: 800 15px/1 var(--corps); text-decoration: none; color: var(--encre); background: var(--blanc); border: 2.5px solid var(--encre); border-radius: 999px; padding: 9px 14px; box-shadow: 0 3px 0 var(--encre); }
.nav a[aria-current="page"] { background: var(--encre); color: var(--blanc); box-shadow: 0 3px 0 var(--souligne); }
.nav a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); }

/* ------------------------------------------------------------------ titres et texte de une */
.surtitre { font: 800 15px/1.3 var(--corps); color: var(--encre); margin: 26px 0 12px; }
.titre-geant { font-size: clamp(42px, 11.5vw, 84px); line-height: 1.02; }
.titre-page { font-size: clamp(38px, 10vw, 68px); line-height: 1.03; }
.chapo { font-size: clamp(19px, 4.6vw, 23px); line-height: 1.35; color: var(--encre); margin-top: 16px; max-width: 36em; }
mark, .marque { background: var(--marqueur); color: var(--encre); box-shadow: inset 0 -0.1em 0 var(--souligne); border-radius: .1em; padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.b-jaune mark { background: var(--blanc); }
.texte-long { max-width: 40em; }
.texte-long h2 { font-size: clamp(26px, 6vw, 34px); margin: 34px 0 10px; }
.texte-long h3 { font-size: 22px; margin: 24px 0 8px; }
.texte-long p, .texte-long ul, .texte-long ol { margin: 0 0 14px; }
.texte-long li { margin-bottom: 6px; }
.texte-long table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 10px 0 18px; background: var(--blanc); }
.texte-long th, .texte-long td { border: 2px solid var(--encre); padding: 8px 10px; text-align: left; vertical-align: top; }
.defile-x { overflow-x: auto; }

/* chiffres-chocs (comme la couverture) */
.chiffres { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.chiffre { background: var(--blanc); border: var(--bord); border-radius: 14px; box-shadow: 0 6px 0 var(--encre); padding: 10px 18px 12px; min-width: 140px; }
.chiffre b { display: block; font: 800 34px/1.05 var(--corps); color: var(--vert); font-variant-numeric: tabular-nums; }
.chiffre:nth-child(2) b { color: var(--bleu-fonce); } .chiffre:nth-child(3) b { color: var(--rouge); }
.chiffre span { font: 700 14px/1.2 var(--corps); color: var(--gris); }

/* ------------------------------------------------------------------ boutons */
.actions { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: 26px; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 800 18px/1.1 var(--corps); letter-spacing: .01em; text-decoration: none; color: var(--blanc); background: var(--encre); border: var(--bord); border-radius: 14px; padding: 15px 20px; box-shadow: 0 6px 0 var(--souligne); cursor: pointer; min-height: 52px; }
.bouton img { width: 26px; height: 26px; }
.bouton:hover { text-decoration: none; }
.bouton:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--souligne); }
.bouton-blanc { background: var(--blanc); color: var(--encre); box-shadow: 0 6px 0 var(--encre); }
.bouton-blanc:active { box-shadow: 0 2px 0 var(--encre); }
.bouton[disabled], .bouton[aria-disabled="true"] { background: #E5E7EB; color: var(--gris); border-color: #9CA3AF; box-shadow: 0 6px 0 #9CA3AF; cursor: not-allowed; transform: none; }
.bouton-large { width: 100%; }
@media (prefers-reduced-motion: reduce) { .bouton:active, .nav a:active, .lien-carte:active { transform: none; } }

/* ------------------------------------------------------------------ encadrés */
.carte { position: relative; background: var(--blanc); border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px 20px 22px; }
.carte h3 { font-size: 25px; line-height: 1.12; }
.grille { display: grid; gap: 26px 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grille-2 { grid-template-columns: 1fr 1fr; } .grille-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grille-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* rangée à faire glisser (comme le carrousel) */
.glisse { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 18px; margin: 0 -20px; scrollbar-width: thin; scrollbar-color: var(--encre) transparent; }
.glisse > * { scroll-snap-align: start; }
@media (min-width: 1000px) { .glisse { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 4px 0 8px; } }
.glisse-aide { display: inline-flex; align-items: center; gap: 8px; font: 800 16px/1 var(--corps); color: var(--encre); margin-top: 6px; }
.glisse-aide img { width: 30px; height: 30px; }
@media (min-width: 1000px) { .glisse-aide { display: none; } }

/* fiche d'un dépôt */
.depot { display: flex; flex-direction: column; gap: 10px; }
.depot-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.depot-nom { font: 800 15px/1.3 var(--mono); color: var(--encre); letter-spacing: -0.02em; word-break: break-all; }
.depot-nom a { text-decoration: none; }
.etoiles { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font: 800 15px/1 var(--corps); background: var(--marqueur); border: 2.5px solid var(--encre); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.rubrique { align-self: flex-start; font: 800 13px/1 var(--corps); background: var(--encre); color: var(--blanc); border-radius: 8px; padding: 5px 8px; }
.gain { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font: 800 15px/1.2 var(--corps); color: var(--encre); background: var(--blanc); border: 2.5px solid var(--encre); border-radius: 10px; padding: 5px 9px; }
.gain img { width: 22px; height: 22px; }
.nouveaute { background: var(--marqueur); border-radius: 10px; padding: 8px 11px; font-weight: 600; color: var(--encre); font-size: 16px; }
.depot p.resume { font-size: 16.5px; line-height: 1.45; }
.config { display: flex; gap: 10px; align-items: flex-start; border: 2.5px solid var(--encre); border-radius: 12px; padding: 9px 11px; font: 700 15px/1.35 var(--corps); color: var(--encre); background: var(--blanc); }
.config img { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 1px; }
.config b { display: block; font: 800 12.5px/1.2 var(--corps); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.a-savoir { margin: 0; padding-left: 20px; font-size: 16px; }
.a-savoir li { margin-bottom: 4px; }
.liens-depot { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 2px; }
.liens-depot a { font: 800 16px/1.3 var(--corps); color: var(--bleu-fonce); }
.depot video { border: var(--bord); border-radius: 12px; background: var(--encre); width: 100%; max-height: 520px; object-fit: contain; }
.depot-vu { font-size: 14px; color: var(--gris); }

/* liens de la bio (gros encadrés à toucher) */
.liens-bio { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .liens-bio { grid-template-columns: 1fr 1fr; } }
.lien-carte { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; align-items: center; text-decoration: none; color: var(--encre); background: var(--blanc); border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 18px; }
.lien-carte:hover { text-decoration: none; }
.lien-carte:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--encre); }
.lien-carte .pictogramme { grid-row: span 2; width: 56px; height: 56px; border-radius: 14px; border: 2.5px solid var(--encre); display: flex; align-items: center; justify-content: center; }
.lien-carte .pictogramme img { width: 38px; height: 38px; }
.lien-carte strong { font: 600 23px/1.12 var(--titre); letter-spacing: -0.01em; }
.lien-carte span.detail { font-size: 15.5px; line-height: 1.35; color: var(--gris); }
.lien-carte .prix { font: 800 15px/1 var(--corps); background: var(--marqueur); box-shadow: inset 0 -.12em 0 var(--souligne); padding: 2px 5px; border-radius: 4px; color: var(--encre); }

/* inscription à la newsletter */
.formulaire { display: grid; gap: 12px; }
.formulaire label.champ { font: 800 15px/1.2 var(--corps); color: var(--encre); }
.formulaire input[type="email"], .formulaire input[type="text"] { width: 100%; font: 600 18px/1.2 var(--corps); color: var(--encre); background: var(--blanc); border: var(--bord); border-radius: 12px; padding: 14px 14px; min-height: 52px; }
.formulaire input::placeholder { color: #6B7280; }
.case { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; color: var(--encre); }
.case input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--encre); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.message { border: var(--bord); border-radius: 12px; padding: 12px 14px; background: var(--blanc); font-weight: 600; color: var(--encre); }
.message.erreur { background: #FEE2E2; border-color: var(--rouge); color: #7F1D1D; }
.note { font-size: 14.5px; line-height: 1.45; color: var(--gris); }

/* offres (Megathread, toolkit) */
.offres { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 720px) { .offres { grid-template-columns: 1fr 1fr; } }
.offre { display: flex; flex-direction: column; gap: 12px; }
.offre .montant { font: 600 54px/1 var(--titre); color: var(--encre); letter-spacing: -0.02em; }
.offre .montant small { font: 700 17px/1.2 var(--corps); letter-spacing: 0; color: var(--gris); }
.offre ul { margin: 0; padding-left: 20px; font-size: 16.5px; }
.offre form { margin-top: auto; }
.ruban { align-self: flex-start; font: 800 13px/1 var(--corps); background: var(--menthe); border: 2.5px solid var(--encre); border-radius: 999px; padding: 5px 10px; }
.cle-affichee { font: 700 17px/1.4 var(--mono); word-break: break-all; background: var(--marqueur); border: var(--bord); border-radius: 12px; padding: 14px; color: var(--encre); user-select: all; }
.sommaire-mt { margin: 0; padding-left: 24px; font: 600 20px/1.35 var(--titre); color: var(--encre); }
.sommaire-mt li { margin-bottom: 6px; }
.contenu-mt .tableau { overflow-x: auto; }
.contenu-mt table { border-collapse: collapse; font-size: 15px; width: 100%; background: var(--blanc); }
.contenu-mt th, .contenu-mt td { border: 2px solid var(--encre); padding: 6px 8px; text-align: left; vertical-align: top; }

/* projets */
.projet { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--encre); }
.projet:hover { text-decoration: none; }
.projet:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--encre); }
.projet .projet-nom { font: 600 30px/1.05 var(--titre); letter-spacing: -0.015em; }
.projet .projet-desc { font-size: 16.5px; line-height: 1.45; color: var(--texte); }
.projet .projet-url { margin-top: auto; font: 700 14.5px/1 var(--mono); color: var(--encre); display: inline-flex; gap: 8px; align-items: center; }
.projet .projet-url::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--teinte, var(--menthe)); border: 2.5px solid var(--encre); }

/* archives */
.archives { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.archives a { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; text-decoration: none; background: var(--blanc); border: 2.5px solid var(--encre); border-radius: 12px; padding: 12px 14px; box-shadow: 0 5px 0 var(--encre); }
.archives a:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--encre); }
.archives .quand { font: 800 14px/1.3 var(--corps); color: var(--gris); white-space: nowrap; }
.archives .quoi { font: 600 19px/1.2 var(--titre); color: var(--encre); }
@media (max-width: 560px) { .archives a { grid-template-columns: 1fr; } }

/* fil d'Ariane */
.ariane { font: 700 14px/1.4 var(--corps); margin: 18px 0 0; color: var(--encre); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.ariane li + li::before { content: "/"; margin-right: 6px; color: var(--gris); }
.ariane a { text-decoration: none; border-bottom: 2px solid var(--encre); }

/* pied de page */
.pied { background: var(--encre); color: #E5E7EB; padding: 36px 0 44px; }
.pied .logo { color: var(--blanc); }
.pied .logo-ai { box-shadow: 0 4px 0 var(--souligne); background: var(--marqueur); color: var(--encre); }
.pied p { margin-top: 14px; max-width: 34em; font-size: 16px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.pied a { color: var(--blanc); font-weight: 700; font-size: 15.5px; }
.pied .credits { margin-top: 20px; font-size: 13.5px; color: #9CA3AF; }
.pied .credits a { color: #D1D5DB; font-weight: 600; font-size: 13.5px; }

/* page d'erreur */
.page-erreur { min-height: 60vh; }

@media (min-width: 720px) {
  .cadre { padding: 0 32px; }
  .glisse { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
  .bande { padding: 48px 0 56px; }
  .nav { width: auto; overflow: visible; padding: 0; margin: 0; }
  .tete .cadre { flex-wrap: nowrap; }
  .logo-ai { width: 46px; height: 46px; font-size: 24px; }
  .logo-nom { font-size: 34px; }
}
@media (min-width: 1000px) { .glisse { margin: 0; padding: 4px 0 8px; } }

/* utilitaires (aucun style en ligne : la politique de sécurité n'autorise que cette feuille) */
.espace-sous { margin-bottom: 14px; } .note.espace-sous { margin-top: 6px; }
.espace-haut { margin-top: 24px; }
.espace-groupe { margin-bottom: 34px; }
.titre-groupe { font-size: 26px; margin: 8px 0 16px; }
.carte-etroite { max-width: 640px; }
.pile { display: grid; gap: 22px; align-content: start; }
.fond-rose { background: var(--rose); } .fond-sable { background: var(--sable); } .fond-menthe { background: var(--menthe); }
.fond-bleu { background: var(--bleu); } .fond-jaune { background: var(--jaune); } .fond-orchidee { background: var(--orchidee); }
.teinte-bleu { --teinte: var(--bleu); } .teinte-menthe { --teinte: var(--menthe); } .teinte-rose { --teinte: var(--rose); } .teinte-peche { --teinte: var(--peche); }
.teinte-lilas { --teinte: var(--lilas); } .teinte-jaune { --teinte: var(--jaune); } .teinte-orchidee { --teinte: var(--orchidee); } .teinte-sable { --teinte: var(--sable); }

/* retouches après les captures du 10/11 */
.carte h3 a, .carte h2 a { text-decoration: none; }
.carte h3 a:hover, .carte h2 a:hover { text-decoration: underline; text-decoration-color: var(--souligne); }
.lien-carte .prix { white-space: nowrap; }
.liens-bio { align-items: start; }
.une-grille { display: grid; grid-template-columns: 1fr; }
.couverture { display: none; margin: 0; }
@media (min-width: 1000px) {
  .une-grille { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: 56px; align-items: center; }
  .couverture { display: block; }
  .couverture img { width: 100%; border: var(--bord); border-radius: 18px; box-shadow: 0 12px 0 var(--encre); transform: rotate(1.5deg); }
}
@media (max-width: 719px) {
  /* téléphone : les quatre rubriques visibles d'un coup, en deux rangées de pastilles faciles à toucher */
  .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; padding: 0 0 4px; margin: 0; }
  .nav a { text-align: center; padding: 11px 8px; }
}
/* téléphone : le bouton du dossier du jour au-dessus de la ligne de flottaison (arrivée depuis Instagram) */
.bande-une { padding-top: 0; }
.tete { padding-top: 16px; }
@media (max-width: 719px) {
  .titre-geant { font-size: clamp(36px, 10.4vw, 60px); }
  .chapo { font-size: 18px; margin-top: 12px; }
  .surtitre { margin: 18px 0 10px; }
  .une-grille .chiffres { display: none; }
  .actions { margin-top: 20px; }
}
/* grilles : une colonne ne s'élargit jamais au-delà de l'écran (contenu long coupé à la ligne) */
.grille { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grille-2, .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projet, .lien-carte { overflow-wrap: anywhere; min-width: 0; }