/* =========================================================
   Thème principal + modes CHAOS
   Auteur : toi 🔥 (refactor par chat)
   ========================================================= */

/* --- Typos (Google Fonts valides) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Tangerine:wght@400;700&display=swap');

/* --- Variables globales --- */
:root{
  /* Couleurs */
  --bg: #003049;         /* fond principal */
  --secondary: #EAE2B7;  /* fond secondaire / accents */
  --text: #F5F2E8;       /* blanc cassé */
  --bleu-fonce: #003049;
  --rouge: #D62828;
  --orange: #F77F00;
  --jaune: #FCBF49;
  --beige: #EAE2B7;

  /* Typo */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-accent: "Tangerine", cursive;

  /* UI */
  --radius: 14px;
  --shadow-soft: 0 6px 18px rgba(0,0,0,.18);
  --shadow-strong: 0 6px 28px rgba(0,0,0,.30);
}

/* --- Reset de base --- */
*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; height: auto; display: block; }

/* --- Liens / focus --- */
a{ color: var(--secondary); text-decoration: none; }
main a:hover{ text-decoration: underline; }
:focus-visible{ outline: 2px solid var(--secondary); outline-offset: 3px; }
a, button, [role="button"]{ outline-offset: 3px; }
a:focus-visible, button:focus-visible{ outline: 3px dashed var(--jaune); }

/* --- Header générique (si présent) --- */
header, .site-header{
  position: sticky; top: 0; z-index: 10;
  background: rgba(0,48,73,.9);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: saturate(140%) blur(6px);
}
.site-header .wrap{
  width: min(1100px, 92%);
  margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
}

/* --- Navigation (header & footer) --- */
nav{ display: flex; flex-wrap: wrap; gap: 10px; }
nav a{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
}
nav a:hover{ background: rgba(234,226,183,.12); }
nav a[aria-current="page"]{
  background: rgba(234,226,183,.22);
  border-color: var(--secondary);
}

/* --- Bouton d'ouverture du menu latéral --- */
.menu-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  color: var(--beige);
  background: var(--orange);
  border: none;
  padding: 10px 15px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1100;
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease, transform .15s ease;
}
.menu-toggle:hover { background: var(--rouge); color: var(--beige); }
.menu-toggle:active{ transform: translateY(1px); }

/* --- Menu latéral --- */
.menu-lateral {
  position: fixed;
  inset: 0 auto 0 0;
  width: clamp(260px, 80vw, 360px);
  height: 100dvh;
  background: var(--bleu-fonce);
  color: var(--beige);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem .9rem;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  border-right: 1px solid var(--jaune);
  z-index: 1000;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .4s ease;
}
@supports not (height: 100dvh){ .menu-lateral{ height: 100vh; } }
.menu-lateral.ouvert { transform: translateX(0); }

.fermer-menu {
  font-weight: 400;
  font-size: large;
  background: transparent;
  border: none;
  color: var(--beige);
  align-self: flex-end;
  padding: .25rem .4rem;
  border-radius: 8px;
}
.fermer-menu:hover {
  background: var(--beige);
  color: var(--bleu-fonce);
}

/* --- Items du menu latéral --- */
.element-menu {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem .75rem;
  border-radius: .75rem;
  text-decoration: none;
  border: 1px solid rgba(234,226,183,.25);
  background: transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.indice {
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 600;
  color: var(--jaune);
  transition: color .25s ease;
}
.bloc-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.titre {
  font: 600 1rem/1.15 var(--font-sans);
  color: var(--beige);
  letter-spacing: .2px;
  margin: 0;
}
.sous-titre {
  margin: 0;
  font: 400 .9rem/1.2 var(--font-sans);
  color: var(--jaune);
}
.vignette {
  width: 70px;
  height: 70px;
  background: var(--beige);
  border-radius: .8rem;
  box-shadow: 0 2px 10px var(--bleu-fonce);
  transform: translateY(0);
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}
.element-menu:hover,
.element-menu:focus-visible{
  border: 1px solid var(--jaune);
  color: var(--beige);
}
.element-menu:hover .indice,
.element-menu:hover .titre,
.element-menu:hover .sous-titre,
.element-menu:focus-visible .indice,
.element-menu:focus-visible .titre,
.element-menu:focus-visible .sous-titre{
  color: var(--beige);
}
.element-menu:hover .vignette,
.element-menu:focus-visible .vignette{
  transform: translateY(-6px);
  opacity: .92;
  box-shadow: 0 2px 22px var(--beige);
}

/* --- Conteneur principal --- */
.section{
  width: min(1100px, 92%);
  margin: 32px auto;
  padding: 12px;
}

/* --- Titres --- */
h1{
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 .6em;
  font-family: var(--font-accent);
}
h2{
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--secondary);
  margin: 0 0 .5em;
}

/* --- Paragraphes & encadrés règle --- */
p{ margin: 0 0 1em; }
p.regle{
  margin-top: .5em;
  padding: .75em 1em;
  border-left: 4px solid var(--secondary);
  background: rgba(234,226,183,.12);
  border-radius: 8px;
}

/* --- Cartes de principe --- */
.principe{
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 18px;
  background: rgba(255,255,255,.03);
  margin: 18px 0;
  box-shadow: var(--shadow-soft);
}

/* --- Zones image --- */
.image{
  display: grid;
  place-items: center;
  min-height: 200px;
  margin: 14px 0;
  border: 1px dashed rgba(234,226,183,.5);
  border-radius: 10px;
  color: rgba(234,226,183,.85);
  padding: 8px;
}
.section_coherence img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* --- Mise en page cohérence (2 colonnes → 1 en mobile) --- */
.section_coherence{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items: start;
  align-content: start;
}
.section_coherence .image{ min-height: 240px; }

.form-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: 28px 22px;
  display: grid;
  gap: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  width: min(700px, 92%);
  margin: 40px auto;
}

.champ {
  width: 100%;
  border: 1px solid rgba(234, 226, 183, .35);
  background: rgba(234, 226, 183, .12);
  color: var(--text);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 1rem;
  text-align: center;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.champ::placeholder {
  color: rgba(245, 242, 232, .7);
}

.champ:focus {
  border-color: var(--jaune);
  background: rgba(234, 226, 183, .18);
  box-shadow: 0 0 0 3px rgba(252, 191, 73, .25);
}

/* Zone texte */
#texte { min-height: 60px; }

/* Groupe de boutons */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Boutons */
.btn {
  border: 0;
  border-radius: var(--radius);
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* “Supprimer” (envoi) */
.btn-envoyer {
  background: linear-gradient(180deg, var(--orange), #d86f00);
  color: #fff;
  box-shadow: 0 6px 14px rgba(247, 127, 0, .35);
}
.btn-envoyer:hover { background: linear-gradient(180deg, #ff8d1a, #cf6700); }
.btn-envoyer:active { transform: translateY(1px); }

/* “Envoyer” (efface) */
.btn-supprimer {
  background: rgba(234, 226, 183, .14);
  color: var(--beige);
  border: 1px solid rgba(234, 226, 183, .35);
}
.btn-supprimer:hover {
  background: rgba(234, 226, 183, .22);
  border-color: var(--jaune);
}
.btn-supprimer:active { transform: translateY(1px); }

/* --- Footer --- */
footer{
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,.1);
  background: #0a2f46;
}
.footer-content{
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 20px 0 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.footer-text{
  text-align: center;
  opacity: .85;
  margin: 0; padding: 10px 0 20px;
}

/* --- Responsive --- */
@media (max-width: 880px){
  .section_coherence{ grid-template-columns: 1fr; }
}

/* =========================================================
   CHAOS LIGHT
   ========================================================= */
body.chaos-light { --tilt: 0.8deg; --nudge: 6px; }
body.chaos-light * { transition: transform .25s ease, letter-spacing .25s ease, box-shadow .25s ease; }

/* Header & nav : léger tilt + paddings irréguliers */
body.chaos-light header,
body.chaos-light .site-header { transform: rotate(var(--tilt)); }

body.chaos-light nav a:nth-child(odd)  { padding-inline: 14px 18px; }
body.chaos-light nav a:nth-child(even) { padding-inline: 18px 14px; }

/* Titres */
body.chaos-light h1,
body.chaos-light h2 {
  transform: rotate(-0.4deg) translateY(1px);
  letter-spacing: 0.3px;
}

/* Paragraphes alternés */
body.chaos-light .section > p:nth-of-type(odd)  { transform: translateX(var(--nudge)); }
body.chaos-light .section > p:nth-of-type(even) { transform: translateX(calc(var(--nudge) * -1)); }

/* Cartes principe */
body.chaos-light .principe:nth-of-type(odd)  { transform: translateX(8px) rotate(0.4deg); }
body.chaos-light .principe:nth-of-type(even) { transform: translateX(-6px) rotate(-0.3deg); }
body.chaos-light .principe { box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* Bloc cohérence */
body.chaos-light .section_coherence { grid-template-columns: 1.05fr 1fr; gap: 18px; }
body.chaos-light .section_coherence img {
  transform: rotate(1.2deg) scale(1.01);
  border: 2px solid var(--jaune);
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}

/* Encadrés “règle” */
body.chaos-light p.regle {
  border-left-color: var(--orange);
  background: rgba(252,191,73,.14);
}

/* Footer */
body.chaos-light footer { transform: rotate(-0.7deg); border-top-color: rgba(252,191,73,.6); }

/* =========================================================
   CHAOS MEDIUM
   ========================================================= */
body.chaos-medium {
  --tilt: 2deg;
  --nudge: 14px;
  background: linear-gradient(135deg, var(--rouge) 10%, var(--orange) 60%, var(--jaune) 100%);
  color: #1b1b1b;
  transition: background 0.5s ease, color 0.5s ease;
}

/* transitions plus visibles */
body.chaos-medium * {
  transition: transform .3s ease, color .3s ease, background .3s ease, border .3s ease;
}

/* Header */
body.chaos-medium header,
body.chaos-medium .site-header {
  transform: rotate(var(--tilt)) translateY(4px);
  background: var(--rouge);
  border-bottom: 3px solid var(--orange);
}

/* Nav */
body.chaos-medium nav a {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  transform: rotate(-1deg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.chaos-medium nav a:hover {
  background: var(--jaune);
  color: var(--rouge);
  border-color: transparent;
}

/* Titres */
body.chaos-medium h1,
body.chaos-medium h2 {
  transform: rotate(-1.5deg) translateY(3px);
  color: var(--rouge);
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 rgba(255,255,255,.3);
}

/* Paragraphes */
body.chaos-medium p {
  transform: rotate(1deg);
  color: #111;
}
body.chaos-medium p:nth-of-type(odd)  { margin-left: var(--nudge); }
body.chaos-medium p:nth-of-type(even) { margin-right: var(--nudge); }

/* Cartes principe */
body.chaos-medium .principe {
  background: var(--beige);
  border: 2px dashed var(--rouge);
  color: var(--bleu-fonce);
  transform: rotate(1.2deg);
  box-shadow: var(--shadow-strong);
}
body.chaos-medium .principe:nth-of-type(odd)  {
  transform: rotate(2deg) translateX(10px);
  background: var(--jaune);
}
body.chaos-medium .principe:nth-of-type(even) {
  transform: rotate(-1.5deg) translateX(-10px);
  background: var(--orange);
}

/* Images */
body.chaos-medium .section_coherence img {
  transform: rotate(3deg) scale(1.04);
  border: 4px solid var(--rouge);
  box-shadow: 0 6px 28px rgba(0,0,0,.3);
}

/* Encadrés “règle” */
body.chaos-medium p.regle {
  border-left: 5px solid var(--rouge);
  background: rgba(255,255,255,.4);
  color: var(--bleu-fonce);
  font-weight: 600;
}

/* Footer */
body.chaos-medium footer {
  transform: rotate(-2deg);
  background: var(--orange);
  color: var(--bleu-fonce);
  border-top: 3px solid var(--rouge);
}
body.chaos-medium footer a { color: var(--bleu-fonce); text-decoration: underline; text-underline-offset: 2px; }
body.chaos-medium footer a:hover { color: var(--rouge); }

/* Hover animés */
body.chaos-medium img:hover,
body.chaos-medium .principe:hover {
  transform: rotate(3deg) scale(1.05);
}

/* =========================================================
   CHAOS ULTIMATE (Défaillance statique + écran cassé pop)
   ========================================================= */
body.chaos-ultimate{
  /* Variables overlay */
  --impact-x: 52%;
  --impact-y: 38%;
  --crack: 255 255 255;  /* couleur fissures (RGB) */
  --screen-on: 1;        /* 0 pour couper rapidement */

  /* Fond TV + dégradé */
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.035) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, var(--rouge) 10%, var(--orange) 60%, var(--jaune) 100%);
  background-blend-mode: screen, screen, multiply, normal;
  animation: tv-static-move 14s linear infinite;
  color: #1b1b1b;
}

/* Transitions plus fermes en ultimate */
body.chaos-ultimate *{
  transition: transform .25s ease, color .25s ease, background .25s ease, border .25s ease, filter .25s ease;
}

/* Overlay 1 : texture/halos/scanlines/vignette */
body.chaos-ultimate::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483646;
  opacity: calc(.95 * var(--screen-on));
  background:
    radial-gradient(circle at var(--impact-x) var(--impact-y), rgba(255,255,255,.10) 0 6vmin, transparent 20vmin),
    radial-gradient(circle at var(--impact-x) var(--impact-y), rgba(180,220,255,.09) 0 2vmin, transparent 8vmin),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 50%, transparent 0 60vmin, rgba(0,0,0,.38) 100vmin);
  background-blend-mode: screen, screen, normal, multiply;
  animation: cracked-flicker 7s steps(40,end) infinite;
  will-change: filter, opacity;
}

/* Overlay 2 : fissures (SVG data URI) */
body.chaos-ultimate::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  opacity: calc(.98 * var(--screen-on));
  color: rgb(var(--crack));
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
  <defs><filter id='g'><feGaussianBlur stdDeviation='0.35'/></filter></defs>\
  <g stroke='currentColor' stroke-opacity='0.88' stroke-width='0.32' fill='none' stroke-linecap='round'>\
    <path d='M52,38 L 10,20'/>\
    <path d='M52,38 L 90,18'/>\
    <path d='M52,38 L 95,60'/>\
    <path d='M52,38 L 12,70'/>\
    <path d='M52,38 L 50,95'/>\
    <path d='M52,38 L 5,45'/>\
    <path d='M52,38 L 75,95'/>\
    <path d='M52,38  Q 48,30 40,28 T 26,26' stroke-opacity='0.7'/>\
    <path d='M52,38  Q 60,32 70,30 T 86,24' stroke-opacity='0.7'/>\
    <path d='M52,38  Q 56,46 58,54 T 62,70' stroke-opacity='0.7'/>\
    <path d='M52,38  Q 46,44 38,50 T 24,58' stroke-opacity='0.7'/>\
    <path d='M40,28 l -2,-4 l -3,1' stroke-opacity='0.5'/>\
    <path d='M62,70 l 3,5 l -2,3' stroke-opacity='0.5'/>\
    <path d='M24,58 l -4,2 l -2,-3' stroke-opacity='0.5'/>\
    <path d='M86,24 l 4,-1 l 3,2' stroke-opacity='0.5'/>\
  </g>\
  <g stroke='white' stroke-opacity='0.20' stroke-width='0.8' filter='url(#g)'>\
    <path d='M52,38 L 11,21'/>\
    <path d='M52,38 L 89,19'/>\
    <path d='M52,38 L 94,59'/>\
  </g>\
</svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translateZ(0) scale(1);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s, opacity .5s;
  animation: cracks-pulse 3.8s ease-in-out infinite;
  will-change: transform, filter, opacity;
}

/* Mode POP (projection en avant) */
html{ perspective: 900px; }
body.chaos-ultimate{ transform-style: preserve-3d; }

body.chaos-ultimate.crack-pop::before{
  transform: translateZ(60px) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -6deg)) scale(1.06);
  filter: brightness(1.12) contrast(1.08) drop-shadow(0 12px 40px rgba(0,0,0,.35));
}
body.chaos-ultimate.crack-pop::after{
  transform: translateZ(90px) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -6deg)) scale(1.08);
  filter: drop-shadow(0 14px 48px rgba(0,0,0,.45));
  animation: crack-pop-impulse .28s ease-out both, cracks-pulse 3.8s ease-in-out infinite .28s;
}

@keyframes crack-pop-impulse{
  0%   { transform: translateZ(0) scale(1); }
  60%  { transform: translateZ(105px) scale(1.1); }
  100% { transform: translateZ(90px) scale(1.08); }
}

/* Bouton POP (fixe, en bas à droite) */
.crack-btn{
  position: fixed;
  right: 14px; bottom: 16px;
  z-index: 2147483648;
  font: 600 14px/1.1 var(--font-sans, system-ui);
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px dashed currentColor;
  color: var(--bleu-fonce, #14213d);
  background: var(--jaune, #ffd166);
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
  transform: rotate(-2deg);
  cursor: pointer; user-select: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease;
}
.crack-btn:hover{ transform: rotate(2deg) scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.crack-btn:active{ transform: rotate(0) scale(0.98); }
body.chaos-ultimate.crack-pop .crack-btn{ background: var(--orange, #f77f00); color: #1b1b1b; }

/* Animations bruit/scanlines + overlay */
@keyframes tv-static-move{
  0%   { background-position: 0 0,      0 0,    0 0,    0 0; }
  25%  { background-position: 10px 8px, 0 2px,  2px 0,  0 0; }
  50%  { background-position: -6px 12px,0 -2px, -3px 0, 0 0; }
  75%  { background-position: 8px -10px,0 3px,  4px 0,  0 0; }
  100% { background-position: 0 0,      0 0,    0 0,    0 0; }
}
@keyframes cracked-flicker{
  0%,3%,8%,100% { filter: brightness(100%) contrast(105%); }
  1%            { filter: brightness(120%) contrast(110%); }
  6%            { filter: brightness(90%)  contrast(98%);  }
}
@keyframes cracks-pulse{
  0%,100% { opacity: calc(.92 * var(--screen-on)); }
  50%     { opacity: calc(1.00 * var(--screen-on)); }
}

/* Accessibilité : limiter le mouvement */
@media (prefers-reduced-motion: reduce){
  body.chaos-ultimate,
  body.chaos-ultimate::before,
  body.chaos-ultimate::after{
    animation: none !important;
    transition: none !important;
  }
}

/* Utilitaires */
body.chaos-ultimate.crack-off::before,
body.chaos-ultimate.crack-off::after{ opacity: 0 !important; }