/* ==========================================================================
   Ayat Merimi — Couche d'ambiance
   Volontairement sobre : pas de lueur colorée, pas de néon, pas de bordure
   animée. Le rose sert d'accent de marque, jamais d'effet lumineux.
   ========================================================================== */

/* --- 1. Fond : uni, aucune texture ------------------------------------- */

.ambient { display: none; }

/* --- 2. Titre : dégradé fixe, deux teintes --------------------------- */

.hero h1 .grad {
  background: linear-gradient(96deg, var(--txt) 12%, var(--pink) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: none;
}

/* --- 3. Marque ---------------------------------------------------------- */

.brand span { color: var(--pink); background: none; -webkit-text-fill-color: currentColor; }
.brand::after {
  content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px;
  background: var(--pink); transition: width .3s var(--ease);
}
.brand:hover::after { width: 100%; }

/* --- 4. Navigation ------------------------------------------------------- */

.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1px;
  background: var(--pink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 900px) { .nav-links a::after { display: none; } }

/* --- 5. Pastille de disponibilité --------------------------------------- */

.pill-status {
  background: var(--pink-soft);
  border-color: var(--pink-line);
  color: var(--pink);
  animation: none;
  box-shadow: none;
}
.pill-status .dot { animation: softpulse 3s ease-in-out infinite; }
@keyframes softpulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* --- 6. Cartes & portes : élévation discrète ---------------------------- */

.gate:hover {
  border-color: var(--pink-line);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .7);
}
.gate::before { background: var(--pink); }

.card:hover { border-color: var(--line); }
.card::after { display: none; }

.card-ico { background: var(--surface-2); border-color: var(--line); }

/* --- 7. Chips ------------------------------------------------------------ */

.chip { transition: border-color .2s, color .2s; }
.chip:hover { border-color: var(--pink-line); color: var(--pink); transform: none; box-shadow: none; }
button.chip { cursor: pointer; font-family: var(--f-mono); }
.chip.accent { background: var(--surface-2); border-color: var(--line); color: var(--txt-2); }

/* --- 8. Boutons ---------------------------------------------------------- */

.btn-primary {
  background: var(--pink); border: 1px solid var(--pink); color: #fff;
  box-shadow: none;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--pink) 88%, #000);
  border-color: color-mix(in srgb, var(--pink) 88%, #000);
  box-shadow: none; transform: translateY(-1px);
}
.btn:hover { transform: translateY(-1px); }
.btn::before { display: none; }
.btn-ghost::after { display: none; }

/* --- 9. Titres de section ------------------------------------------------ */

.eyebrow { color: var(--txt-3); }
.eyebrow::before { background: var(--pink); opacity: 1; width: 22px; }

.divider { background: var(--line-soft); }

/* --- 10. Statistiques ---------------------------------------------------- */

.stat b { color: var(--txt); background: none; -webkit-text-fill-color: currentColor; }
.stat b::after {
  content: ''; display: block; width: 20px; height: 2px;
  background: var(--pink); margin: 8px auto 0;
}

/* --- 11. Timeline -------------------------------------------------------- */

.tl-item.on::before { border-color: var(--pink); box-shadow: none; }
.timeline .tl-fill { background: var(--pink); opacity: .45; }
.tl-date { color: var(--txt-3); }

/* --- 12. Étude de cas ---------------------------------------------------- */

.case-head { position: relative; }
.case-head::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--pink); animation: none;
}
.case-cell h4 { color: var(--txt-3); }

/* --- 13. Terminal : toujours sombre, même en thème clair ---------------- */

.term {
  background: #0c0e13;
  border-color: #212636;
  box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .55);
}
.term::after { display: none; }
.term-bar { background: #151926; border-bottom-color: #212636; }
.term-bar em { color: #7b8499; }
.term-body p { color: #a4adc2; }
.term-body .cmd { color: #e8ecf5; }
.term-body .cmd b { color: #00e5a0; }
.term-body .ok { color: #34d399; }
.term-body .err { color: #fb7185; }
.term-body .mut { color: #6b7488; }
.term-input span { color: #00e5a0; }
.term-input input { color: #e8ecf5; }
.term-input input::placeholder { color: #5a6272; }

/* --- 13b. Schémas SVG : couleurs pilotées par le thème ------------------ */

.diagram .d-t { fill: var(--txt); }
.diagram .d-m { fill: var(--txt-3); }
.diagram .d-line { stroke: var(--txt-3); opacity: .6; }

/* --- 14. Labs ------------------------------------------------------------ */

.lab-head { background: transparent; border-bottom: 1px solid var(--line); }
.lab:hover { box-shadow: none; }

/* --- 15. Pied de page ---------------------------------------------------- */

footer li a { position: relative; }
footer li a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--pink); transition: width .25s var(--ease);
}
footer li a:hover::after { width: 100%; }

/* --- 16. Barre de progression -------------------------------------------- */

#progress { background: var(--pink); box-shadow: none; height: 2px; }

/* --- 17. Sélection & défilement ------------------------------------------ */

::selection { background: var(--pink); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 10px; border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--txt-3); }

/* --- 18. Écran de démarrage ---------------------------------------------- */

#boot { background: var(--bg); }
#boot .boot-bar i { background: var(--pink); }
#boot .boot-line b { color: var(--pink); }

/* --- 19. Bandeau easter egg ---------------------------------------------- */

#egg { border-color: var(--line); color: var(--txt-2); box-shadow: none; }

/* --- 20. Icônes ----------------------------------------------------------- */

.ico {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.card-ico { color: var(--pink); background: var(--surface-2); border-color: var(--line); }
.ico-sm { width: 17px; height: 17px; }

/* --- 21. Respiration : moins de texte, plus d'espace --------------------- */

section { padding: 116px 0; }
section.tight { padding: 72px 0; }
.hero { padding: 168px 0 104px; }

h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.028em; }

.lede { font-size: 1.16rem; line-height: 1.6; max-width: 46ch; color: var(--txt-2); }
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 44ch; }

.card p { font-size: .92rem; }
.card { padding: 30px 28px; }

/* Phrase-clé : une idée, gros calibre */
.claim {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.32; letter-spacing: -.025em;
  font-weight: 600; color: var(--txt);
  max-width: 22ch; margin: 0;
}
.claim em { font-style: normal; color: var(--pink); }

/* --- 22. Dévoilement : le détail à la demande --------------------------- */

details.more { margin-top: 20px; }
details.more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-3);
  transition: color .25s var(--ease);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::marker { content: ''; }
details.more > summary:hover { color: var(--pink); }
details.more > summary .pl {
  width: 24px; height: 24px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .35s var(--ease), border-color .25s, color .25s;
}
details.more > summary .pl::before {
  content: ''; width: 9px; height: 9px;
  background:
    linear-gradient(currentColor, currentColor) center/9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 9px no-repeat;
}
details.more > summary:hover .pl { border-color: var(--pink-line); }
details.more[open] > summary { color: var(--pink); }
details.more[open] > summary .pl { transform: rotate(135deg); border-color: var(--pink); }

details.more .more-body {
  padding-top: 18px;
  animation: unfold .45s var(--ease);
}
details.more .more-body > *:last-child { margin-bottom: 0; }
@keyframes unfold {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Grille de détails compacte */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 34px; }
.detail-grid h4 {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 7px;
}
.detail-grid p, .detail-grid ul { font-size: .9rem; margin: 0; color: var(--txt-2); }
.detail-grid ul { padding-left: 16px; }
.detail-grid li { margin-bottom: 4px; }
@media (max-width: 700px) { .detail-grid { grid-template-columns: 1fr; } }

/* --- 23. Page À propos --------------------------------------------------- */

.about-hero {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 56px; align-items: center;
}
@media (max-width: 820px) {
  .about-hero { grid-template-columns: 1fr; gap: 34px; }
  .about-hero .portrait { max-width: 260px; }
}

.portrait {
  width: 100%; max-width: 330px; aspect-ratio: 1; border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  object-fit: cover; display: block;
  position: relative; overflow: hidden;
  margin-left: auto;
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .8);
}
.portrait::after {
  content: 'portrait'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .72rem; color: var(--txt-3);
}
img.portrait::after { content: none; }

/* Récit : un fil vertical qui relie les moments */
.story { position: relative; padding-left: 34px; }
.story::before {
  content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 1px; background: var(--line);
}
.story-step { position: relative; padding-bottom: 40px; }
.story-step:last-child { padding-bottom: 0; }
.story-step::before {
  content: ''; position: absolute; left: -34px; top: 9px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line);
  transition: border-color .3s;
}
.story-step.on::before { border-color: var(--pink); }
.story-step h3 { font-size: 1.15rem; margin-bottom: 6px; }
.story-step .when {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 8px;
}
.story-step p { font-size: .96rem; max-width: 56ch; margin-bottom: 0; }

/* --- 23b. Figures & galeries -------------------------------------------- */

figure.fig { margin: 0; max-width: 780px; }
figure.fig a { display: block; line-height: 0; border-radius: var(--r); overflow: hidden; }

/* Les planches de maquettes ont besoin d'un peu plus de largeur */
figure.fig.board { max-width: 940px; }

/* Pixel art : on garde les pixels nets à l'agrandissement */
figure.fig.pixel img { image-rendering: pixelated; image-rendering: crisp-edges; }
figure.fig img,
figure.fig object,
figure.fig .fig-svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .25s;
}
figure.fig a:hover img { border-color: var(--pink-line); opacity: 1; }
figure.fig figcaption {
  font-family: var(--f-mono); font-size: .73rem; line-height: 1.55;
  color: var(--txt-3); margin-top: 10px;
}
figure.fig figcaption b { color: var(--txt-2); font-weight: 500; }

/* Les schémas ont un fond sombre : on les laisse respirer */
figure.fig.dark img, figure.fig.dark object { background: #0d1117; border-color: #212636; }

.fig-row { display: grid; gap: 20px; margin-top: 26px; }
.fig-row.two   { grid-template-columns: repeat(2, 1fr); }
.fig-row.three { grid-template-columns: repeat(3, 1fr); }
.fig-row.side  { grid-template-columns: 1.5fr 1fr; align-items: start; }
@media (max-width: 780px) {
  .fig-row.two, .fig-row.three, .fig-row.side { grid-template-columns: 1fr; }
}

/* Bandeau de chiffres mesurés */
.metrics {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0;
  padding: 0; list-style: none;
}
.metrics li {
  font-family: var(--f-mono); font-size: .76rem;
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--pink-line); color: var(--txt-2);
  background: var(--pink-soft);
}
.metrics li b { color: var(--pink); font-weight: 700; }

/* --- 23bis. Cadres d'appareil -------------------------------------------- */

.frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 18px 40px -32px rgba(0, 0, 0, .5);
  transition: border-color .25s, transform .3s var(--ease);
}
a:hover > .frame { border-color: var(--pink-line); transform: translateY(-2px); }

.frame-bar {
  height: 32px; display: flex; align-items: center; gap: 6px;
  padding: 0 13px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; flex: none; }
.frame-bar em {
  font-family: var(--f-mono); font-size: .68rem; font-style: normal;
  color: var(--txt-3); margin-left: 10px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.frame img {
  display: block; width: 100%; height: auto;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}

/* Cadre téléphone */
.frame-phone {
  max-width: 250px; margin: 0 auto;
  border-radius: 30px; padding: 8px;
  border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .5);
}
.frame-phone img { border-radius: 22px; display: block; width: 100%; }

/* --- 23c. Présentations en alternance ------------------------------------ */

.show {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 52px; align-items: center;
  margin: 0 0 78px;
}
.show > .show-visual { order: 1; min-width: 0; }
.show > .show-body   { order: 2; min-width: 0; margin-top: 0; }
.show.rev > .show-visual { order: 2; }
.show.rev > .show-body   { order: 1; }

/* Planche pleine largeur : les maquettes multi-écrans */
.show.full { display: block; }
.show.full .show-body { max-width: 66ch; margin-top: 26px; }

.show:last-child { margin-bottom: 0; }
@media (max-width: 880px) {
  .show { grid-template-columns: 1fr; gap: 24px; margin-bottom: 58px; }
  .show > .show-visual, .show > .show-body,
  .show.rev > .show-visual, .show.rev > .show-body { order: unset; }
}

.show-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.show-n {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
  color: var(--pink); flex: none;
}
.show-head h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin: 0; letter-spacing: -.022em; }
.show-head .card-meta { margin: 0; }

.show-body { margin-top: 24px; max-width: 64ch; }
.show-body > p { font-size: 1rem; }
.show-body > p:last-of-type { margin-bottom: 0; }

/* Variante : visuel étroit à gauche, texte à droite */
.show.side {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 48px; align-items: center;
}
.show.side .show-body { margin-top: 0; }
.show.side .show-head { margin-bottom: 14px; }
.show.side figure.fig { max-width: none; }
@media (max-width: 860px) {
  .show.side { grid-template-columns: 1fr; gap: 26px; }
  .show.side figure.fig { max-width: 420px; }
  .show { margin-bottom: 58px; }
}

/* Le visuel respire */
.show figure.fig img { box-shadow: 0 26px 60px -44px rgba(0, 0, 0, .55); }
.show figure.fig a:hover img { border-color: var(--pink-line); }

/* --- 23d. Morpion --------------------------------------------------------- */

.mor-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: 100%; max-width: 300px;
}
.mor-cell {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); cursor: pointer;
  font-family: var(--f-sans); font-size: 2rem; font-weight: 700;
  color: var(--txt); line-height: 1;
  display: grid; place-items: center;
  transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.mor-cell:not(:disabled):hover { border-color: var(--pink); transform: translateY(-2px); }
.mor-cell:disabled { cursor: default; }
.mor-cell.filled { color: var(--txt); }
.mor-cell.win { border-color: var(--pink); background: var(--pink-soft); color: var(--pink); }

.mor-scores-grid { max-width: 220px; gap: 6px; }
.mor-score {
  aspect-ratio: 1; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .9rem; color: var(--txt-3);
}
.mor-score.chosen { border-color: var(--pink); color: var(--pink); background: var(--pink-soft); font-weight: 700; }

/* --- 23e. Filtres d'image ------------------------------------------------- */

#filt-hist { width: 100%; height: 80px; display: block; border-radius: var(--r-sm); background: var(--bg-elev); }

.filt-formula {
  font-family: var(--f-mono); font-size: .84rem; color: var(--pink);
  background: var(--pink-soft); border: 1px solid var(--pink-line);
  border-radius: var(--r-sm); padding: 10px 14px; display: inline-block;
}

input[type="range"] {
  width: 100%; accent-color: var(--pink); height: 22px;
}

/* --- 23f. Mosaïque personnelle ------------------------------------------- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 96px;
  gap: 14px;
  max-width: 940px;
}
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); }
.mosaic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .55s var(--ease), border-color .25s;
}
.mosaic figure:hover img { transform: scale(1.04); border-color: var(--pink-line); }

/* La légende n'apparaît qu'au survol, ou en permanence au toucher */
.mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  font-family: var(--f-mono); font-size: .72rem; line-height: 1.4;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  border-radius: 0 0 var(--r) var(--r);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.mosaic figure:hover figcaption,
.mosaic figure:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) { .mosaic figcaption { opacity: 1; transform: none; } }

/* Gabarits — trois portraits en haut, trois paysages en dessous. Aucun trou. */
.m-a, .m-b, .m-c { grid-column: span 2; grid-row: span 4; }   /* portrait */
.m-d, .m-e, .m-f { grid-column: span 2; grid-row: span 3; }   /* paysage court */

@media (max-width: 820px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; max-width: none; }
  .m-a, .m-b { grid-column: span 2; grid-row: span 4; }
  .m-c       { grid-column: span 4; grid-row: span 3; }
  .m-d, .m-e { grid-column: span 2; grid-row: span 3; }
  .m-f       { grid-column: span 4; grid-row: span 3; }
}
@media (max-width: 520px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 84px; }
  .m-a, .m-b { grid-column: span 1; grid-row: span 4; }
  .m-c, .m-d, .m-e, .m-f { grid-column: span 2; grid-row: span 3; }
}

/* --- 24. Lien discret ---------------------------------------------------- */

.link-q {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: .76rem;
  letter-spacing: .06em; color: var(--txt-3);
  transition: color .25s, gap .25s var(--ease);
}
.link-q:hover { color: var(--pink); gap: 11px; opacity: 1; }
.link-q .ico { width: 14px; height: 14px; }

/* --- 24. Mouvement réduit ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .ambient { display: none !important; }
  .pill-status .dot { animation: none; }
  details.more .more-body { animation: none; }
}