/* Diplome de Mastering Claude, refonte du 2026-09-04.

   Pourquoi une feuille separee : `exam.css` porte les 95 regles `dip-` d origine, il vient du
   dossier partage avec l ancien site et il est ECRASE a chaque construction. Toute correction
   ecrite dedans serait perdue au prochain `construire.cjs`. Cette feuille est chargee APRES lui,
   donc elle gagne a specificite egale, et elle n appartient qu au site refondu.

   DIRECTION. Le diplome etait un parchemin : guilloche, rosaces d angle, dorure, serif creme.
   C est exactement le certificat generique, et c est aussi le defaut vers lequel toute generation
   converge. Il devient un CERTIFICAT D ETALONNAGE, le document qui accompagne un instrument de
   mesure. Ce n est pas un habillage : c est la signature de la marque, la cote de dessin
   technique, et c est ce que le cours enseigne, ne pas croire un resultat qu on n a pas verifie.

   L element qu on retient n est pas un ornement, c est la MESURE du score, tracee en grand avec le
   seuil de reussite marque. Le document ne felicite pas, il constate. Toute la boldness est
   depensee la ; le reste se tait. */

.dip-shell{
  /* Palette de la marque, et non le creme et l or d origine. Ces valeurs sont celles de
     figures.css, pas des approximations : le diplome doit appartenir au meme monde que le site. */
  --dip-papier:#EDEFEA;
  --dip-carte:#F7F8F5;
  --dip-encre:#131A17;
  --dip-doux:#5A6B60;
  --dip-filet:#CBD2CA;
  /* Cuivre depuis la refonte du 2026-09-14 : un seul accent sur tout le site, celui du robot. */
  --dip-mesure:#D97757;
  --dip-claude:#d97757;
  background:var(--dip-papier)!important;
  padding:0!important;
}

/* --- Le cadre : un filet technique, pas une bordure doree --- */
.dip-shell .dip-frame{
  background:var(--dip-carte)!important;
  /* `background-image:none` explicitement : exam.css pose un degrade creme par-dessus la couleur,
     et redefinir la seule `background-color` le laissait en place. Le document restait beige. */
  background-image:none!important;
  border:1px solid var(--dip-filet)!important;
  border-radius:0!important;
  box-shadow:0 40px 90px -50px rgba(19,26,23,.45)!important;
  padding:clamp(30px,5vw,62px) clamp(24px,5vw,64px) clamp(26px,4vw,48px)!important;
  position:relative;
  overflow:hidden;
}
/* Le document portait DEUX cadres imbriques, l un sur la coque et l autre sur le cadre interieur,
   avec deux rayons differents. Un seul suffit, et c est celui qui tient le contenu. */
.dip-shell{
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background-image:none!important;
}
.dip-shell .dip-frame::after{content:none!important}

/* `.diploma` est la vraie coupable du fond creme et du second cadre, et non `.dip-shell` ni
   `.dip-frame` que je visais d abord. Sonde du 2026-09-04 sur la chaine d elements : profondeur 2,
   `background-image: radial-gradient(...)`, `border-radius: 13px`, `padding: 55px 66px 66px`. Elle
   ajoutait donc un second rembourrage par-dessus celui du cadre, ce qui expliquait aussi l espace
   perdu sur les bords. */
.dip-shell .diploma{
  background:transparent!important;
  background-image:none!important;
  border-radius:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
/* `.diploma` porte aussi des pseudo-elements qui dessinaient un liseré interieur : au troisieme
   tour, un trait fin traversait encore le document sans appartenir a aucun cadre visible. */
.dip-shell .diploma::before,.dip-shell .diploma::after{content:none!important}
/* Filet de tete au jaune de mesure : le seul aplat de couleur vive du document, comme sur le site
   ou il ne sert qu a marquer une valeur mesuree. */
.dip-shell .dip-frame::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:var(--dip-mesure);
}

/* --- Ce qui disparait ---
   Huit ornements se disputaient l attention : guilloche, rayons, rosace centrale, quatre rosaces
   d angle, lauriers, fioritures, etoiles. Aucun ne dit rien du parcours. Ils partent tous, ce qui
   laisse la place a la seule chose qui porte une information, la mesure. Le sceau reste : il
   identifie l emetteur, c est son travail. */
.dip-shell .dip-guill,
.dip-shell .dip-burst,
.dip-shell .dip-filigree,
.dip-shell .dip-corner,
.dip-shell .dip-laurel,
.dip-shell .dip-swash,
.dip-shell .dip-star,
.dip-shell .dip-div{display:none!important}

/* --- Cartouche de tete, comme sur une planche technique ---
   Le bandeau `dip-eyebrow` devient un cartouche : ce que le document est, a gauche, et rien
   d autre. Le sceau passe a droite, au lieu de troner au centre. */
.dip-shell .dip-sealrow{
  display:flex!important;justify-content:flex-end!important;margin:0 0 6px!important;
}
.dip-shell .dip-sealwrap{
  width:clamp(70px,10vw,104px)!important;height:auto!important;
  /* Le medaillon d origine portait une ombre portee doree et un fond rond. Le robot est un signe,
     pas une pastille : il se pose a nu sur le papier. */
  background:none!important;box-shadow:none!important;filter:none!important;
}
.dip-shell .dip-ribbons{display:none!important}
/* Le robot en metal Claude, teinte par le meme filtre que le hero de l accueil, dont les valeurs
   ont ete calees en minimisant l ecart avec `#d97757`. Un document officiel qui montrerait un
   autre embleme que la marque qu il atteste se contredirait lui meme. */
/* Aucun filtre : l image est deja le robot en metal Claude. Un filtre par-dessus le ternirait. */
.dip-shell .dip-robot{display:block;width:100%;height:auto}

.dip-shell .dip-eyebrow{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:11.5px!important;letter-spacing:.22em!important;text-transform:uppercase!important;
  color:var(--dip-doux)!important;text-align:left!important;
  margin:0 0 10px!important;
  display:flex;align-items:center;gap:14px;
}
.dip-shell .dip-eyebrow::after{content:"";flex:1;height:1px;background:var(--dip-filet)}

/* --- Le titre de l epreuve : discret. Le heros du document est le NOM du titulaire, pas le nom
       du cours, qui figure deja partout ailleurs. --- */
.dip-shell .dip-course{
  font-family:"Bricolage Grotesque",system-ui,sans-serif!important;
  font-size:clamp(19px,2.4vw,26px)!important;font-weight:700!important;
  letter-spacing:-.02em!important;color:var(--dip-encre)!important;
  text-align:left!important;margin:0 0 4px!important;line-height:1.1!important;
}
.dip-shell .dip-curric{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:11.5px!important;letter-spacing:.1em!important;text-transform:uppercase!important;
  color:var(--dip-doux)!important;text-align:left!important;margin:0 0 clamp(22px,4vw,40px)!important;
}

/* --- La formule d attribution, et le nom --- */
.dip-shell .dip-award{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:11.5px!important;letter-spacing:.16em!important;text-transform:uppercase!important;
  color:var(--dip-doux)!important;text-align:left!important;margin:0 0 6px!important;
}
.dip-shell .dip-name{display:block!important;text-align:left!important;margin:0 0 4px!important}
/* Les filets qui encadraient le nom disparaissent : le nom n a pas besoin d etre soutenu, il est
   deja la plus grosse chose de la page. */
.dip-shell .dip-rule{display:none!important}
.dip-shell .dip-name-t{
  font-family:"Bricolage Grotesque",system-ui,sans-serif!important;
  font-size:clamp(38px,7.4vw,74px)!important;font-weight:800!important;
  letter-spacing:-.04em!important;line-height:.96!important;
  color:var(--dip-encre)!important;font-style:normal!important;
  display:block;text-wrap:balance;
}

/* Le microtexte de securite reste : il fait partie de ce qui rend un document difficile a
   contrefaire, et il est vrai, il porte la reference et le nom. Il passe en filet discret. */
.dip-shell .dip-microtext{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:5.4px!important;letter-spacing:.04em!important;color:var(--dip-filet)!important;
  text-align:left!important;margin:2px 0 clamp(18px,3vw,28px)!important;
  overflow:hidden;white-space:nowrap;
}

.dip-shell .dip-mention{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:11.5px!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--dip-claude)!important;text-align:left!important;
  margin:0 0 clamp(16px,3vw,26px)!important;font-style:normal!important;
}

.dip-shell .dip-body{
  font-family:"Newsreader",Georgia,serif!important;
  font-size:clamp(14.5px,1.6vw,17px)!important;line-height:1.6!important;
  color:var(--dip-doux)!important;text-align:left!important;
  max-width:62ch!important;margin:0 0 clamp(22px,4vw,34px)!important;
}

/* --- Le pied : trois donnees en colonnes, en police de donnees --- */
.dip-shell .dip-meta{
  display:grid!important;
  /* 210 px et non 150 : `Auteur, Mastering Claude` tombait sur deux lignes dans une colonne trop
     etroite, alors que les deux autres donnees tenaient sur une. Trois colonnes inegales se
     lisent mal sur un document officiel. */
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  gap:clamp(14px,3vw,28px)!important;
  border-top:1px solid var(--dip-filet)!important;
  padding-top:clamp(14px,2vw,20px)!important;margin:0!important;
}
.dip-shell .dip-meta > div{text-align:left!important;display:flex;flex-direction:column;gap:4px}
.dip-shell .dip-meta span{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:10.5px!important;letter-spacing:.12em!important;text-transform:uppercase!important;
  color:var(--dip-doux)!important;
}
.dip-shell .dip-meta b{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:13.5px!important;font-weight:600!important;color:var(--dip-encre)!important;
  font-variant-numeric:tabular-nums;
}
/* Le nom du signataire etait en italique serif, identique au nom du titulaire : deux personnes
   differentes ecrites de la meme facon sur le meme document. */
.dip-shell .dip-sig-name{
  font-family:"Bricolage Grotesque",system-ui,sans-serif!important;
  font-size:13.5px!important;font-weight:700!important;font-style:normal!important;
  color:var(--dip-encre)!important;
}
.dip-shell .dip-sig i{display:none!important}

/* --- Le QR : il chevauchait la rosace d angle ET le pied de page ---
   Mesure du 2026-09-04 sur le rendu reel. Il etait en position absolue dans un coin. Il rentre
   dans le flux, a cote des trois donnees, ou il est a sa place : c est une donnee de plus. */
/* Le porteur du QR heritait d un centrage : le cadre se posait au milieu du document alors que
   tout le reste est cale a gauche. Un document technique ne melange pas deux axes. */
.dip-shell .dip-frame > .dip-qr,.dip-shell .diploma > .dip-qr{align-self:flex-start!important}
.dip-shell .dip-qr{
  margin-right:auto!important;
  position:static!important;
  /* `inline-flex` et non `flex` : en bloc, le cadre du QR s etirait sur les 776 px de la page,
     mesure du 2026-09-04, et le petit carre flottait dans un grand vide blanc. */
  display:inline-flex!important;align-items:center;gap:14px;
  margin-top:clamp(16px,3vw,24px)!important;
  padding:12px 18px 12px 12px!important;
  border:1px solid var(--dip-filet)!important;
  border-radius:2px!important;
  background:var(--dip-papier)!important;
}
.dip-shell .dip-qr svg,.dip-shell .dip-qr canvas,.dip-shell .dip-qr img{
  width:74px!important;height:74px!important;flex:none;
}
.dip-shell .dip-qr span{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:10.5px!important;letter-spacing:.1em!important;text-transform:uppercase!important;
  color:var(--dip-doux)!important;max-width:22ch;line-height:1.5;
}

/* Le pied passait SOUS le QR et se chevauchait avec lui. */
.dip-shell .dip-foot{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase!important;
  color:var(--dip-doux)!important;text-align:left!important;
  margin-top:clamp(14px,2vw,18px)!important;line-height:1.6!important;
  word-break:break-word;
}

/* ============================================================================
   LA COTE DE MESURE, piece signature du document
   Injectee par socle-examen.js, qui la place apres la mention. Elle porte la valeur REELLE du
   score et le seuil de reussite reellement applique par le code : un document qui afficherait une
   graduation decorative, sans rapport avec la note, serait un mensonge grave sur une attestation.
   ============================================================================ */
.dip-cote{margin:0 0 clamp(24px,4vw,36px)}
.dip-cote-tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px;
}
.dip-cote-lib{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dip-doux);
}
.dip-cote-val{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;
  font-size:clamp(30px,5vw,52px);letter-spacing:-.04em;line-height:1;color:var(--dip-encre);
  font-variant-numeric:tabular-nums;
}
.dip-cote-val i{font-style:normal;font-size:.44em;font-weight:700;margin-left:2px;color:var(--dip-doux)}

.dip-cote-piste{position:relative;height:10px;border-radius:999px;background:var(--dip-filet);overflow:hidden}
.dip-cote-atteint{
  position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--dip-encre);
  /* Tracee de gauche a droite a l ouverture. C est le seul mouvement du document, et il dit
     quelque chose : la mesure se fait sous les yeux du lecteur. IDENTITE.md pose deja ce geste
     pour la cote des lecons. */
  width:0;animation:dipCote 1100ms cubic-bezier(.32,.72,0,1) 260ms forwards;
}
@keyframes dipCote{to{width:var(--dip-score,0%)}}

.dip-cote-grads{position:relative;height:12px;margin-top:8px}
.dip-cote-grads i{position:absolute;top:0;width:1px;height:7px;background:var(--dip-filet);transform:translateX(-.5px)}
.dip-cote-grads i.seuil{height:12px;width:2px;background:var(--dip-encre)}
.dip-cote-seuil{
  position:absolute;top:-2px;transform:translateX(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;
  color:var(--dip-encre);background:var(--dip-mesure);padding:2px 7px;border-radius:999px;
  white-space:nowrap;
}
.dip-cote-bornes{
  display:flex;justify-content:space-between;margin-top:22px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--dip-doux);
  font-variant-numeric:tabular-nums;
}

/* Quelqu un qui refuse le mouvement voit la cote a sa valeur finale, immediatement. */
@media (prefers-reduced-motion:reduce){
  .dip-cote-atteint{animation:none;width:var(--dip-score,0%)}
}

/* ============================================================================
   CARTE D EXAMEN ET SALLE D EPREUVE, refonte du 2026-09-14.
   exam.css habillait la carte et la salle en or et creme, rayon de 22 px et ruban : mesure du jour,
   `rgb(138,100,48)` et `rgb(253,246,236)` dans `main`, un autre site pose au milieu de celui-ci.
   Elles rejoignent la planche : papier, encre, un seul accent cuivre, angles droits. Les regles
   vivent ici et jamais dans exam.css, ecrase a chaque construction.
   ============================================================================ */
.examcard{border-radius:0!important;padding:0!important;background:var(--ink)!important;
  box-shadow:none!important;border-top:4px solid var(--copper)}
.examcard::before{inset:1px!important;border-radius:0!important;background:var(--paper-raise)!important}
.examcard.locked::before{background:var(--paper-raise)!important}
.examcard .ex-tag,.ex-top .ex-tag{font-family:var(--f-data)!important;font-size:13px!important;font-weight:500!important;
  letter-spacing:.01em!important;text-transform:none!important;color:var(--copper-ink)!important;
  border:1px solid var(--rule)!important;border-radius:0!important;background:transparent!important;padding:4px 10px!important}
.examcard h3,.ex-card h2,.exroom.result h2{font-family:var(--f-display)!important;font-weight:800!important;
  letter-spacing:-.02em;color:var(--ink)!important}
.examcard.locked h3{color:var(--ink-soft)!important}
.examcard p,.exroom.result p{color:var(--ink-soft)!important;font-family:var(--f-read)}
.examcard .ex-bar,.ex-prog{border-radius:0!important;background:var(--rule)!important}
.examcard .ex-bar span,.ex-prog span{border-radius:0!important;background:var(--copper)!important}
.ex-go,.ex-prim,.ex-prim.gold{border-radius:0!important;background:var(--ink)!important;color:var(--paper)!important;
  box-shadow:none!important;font-family:var(--f-display);min-height:44px}
.ex-go:hover,.ex-prim:hover,.ex-prim.gold:hover{background:var(--copper)!important;color:#131A17!important;transform:none!important}
.ex-alt{border-radius:0!important;border:1px solid var(--ink)!important;color:var(--ink)!important;min-height:44px;font-family:var(--f-display)}
.ex-alt:hover{background:var(--paper)!important}
.exroom{border-radius:0!important;background:var(--paper-raise)!important;border-top:4px solid var(--copper);box-shadow:var(--sh-modal)!important}
.examov,.dipov{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.ex-card,.ex-weak{border-radius:0!important;background:var(--paper)!important;border:1px solid var(--rule)!important;box-shadow:none!important}
.ex-mod,.ex-weak h4{font-family:var(--f-data)!important;font-size:13px!important;font-weight:500!important;
  letter-spacing:.01em!important;text-transform:none!important;color:var(--copper-ink)!important}
.ex-opt{border-radius:0!important;border:1px solid var(--rule)!important;background:var(--paper-raise)!important;
  color:var(--ink)!important;min-height:44px}
.ex-opt:hover{border-color:var(--ink)!important;transform:none!important}
.ex-opt.on{border-color:var(--copper)!important;background:var(--copper-pale)!important;box-shadow:inset 3px 0 0 var(--copper)!important}
.ex-name{border-radius:0!important;border:1px solid var(--ink)!important;font-family:var(--f-display)!important}
.ex-weak-row b{color:var(--refuted)!important}
.ex-count,.ex-quit{color:var(--ink-soft)!important}

/* --- Impression ---
   Le document existe pour etre imprime. Les ombres et les fonds coutent de l encre et rendent
   gris ; le filet de mesure, lui, doit survivre, sinon la page perd son seul reperage. */
@media print{
  .dip-shell{background:#fff!important}
  .dip-shell .dip-frame{
    box-shadow:none!important;border:1px solid #999!important;background:#fff!important;
  }
  .dip-shell .dip-frame::before{
    background:#111!important;height:4px!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .dip-cote-atteint{animation:none;width:var(--dip-score,0%);background:#111!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dip-cote-seuil{background:#fff!important;border:1px solid #111;color:#111!important}
}