/* =====================================================================
   custom.css — Rafraîchissement design (garde la direction artistique)
   Chargé APRÈS main.css. Ne modifie pas le template d'origine.
   Accent : #18bfef · Panneau #main : blanc · Fond wrapper : #212931
   ===================================================================== */

:root {
  --accent: #18bfef;
  --accent-deep: #0f9fc9;
  --ink: #212931;
  --muted: #6a7480;
  --card-bg: #ffffff;
  --card-border: #e8ebee;
  --panel-bg: #f7f9fb;
}

/* =====================================================================
   CORRECTIF GLOBAL
   main.css ligne 278 impose "height: 100px" a TOUS les <p> du site
   (le template d'origine n'a que la marge). Une hauteur figee cree des
   vides verticaux (visible dans le footer) et tronquerait tout
   paragraphe depassant 100px. On rend la hauteur au contenu.
   ===================================================================== */
p {
  height: auto;
}

/* --- Panneau principal : léger fond froid pour faire ressortir les cartes --- */
#main {
  background-color: var(--panel-bg) !important;
}

/* --- En-tête de section "My projects" --- */
#main > .posts {
  gap: 2.5rem;
  /* conserve le rythme horizontal du template (#main > * = 4rem) */
  padding: 3.5rem 4rem 3.5rem 4rem;
  align-items: stretch;
}

/* On neutralise la grille à bordures du template pour passer en vraies cartes */
#main > .posts > * {
  width: calc(50% - 1.25rem) !important;
  padding: 0 !important;
}

#main > .posts > article,
#main > .posts > article:nth-child(n),
#main > .posts > article:nth-child(-n + 2),
#main > .posts > article:nth-child(2n - 1) {
  border: 1px solid var(--card-border) !important;
  border-radius: 16px;
  background: var(--card-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 1px 2px rgba(33, 41, 47, 0.04),
    0 12px 24px -18px rgba(33, 41, 47, 0.25);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
}

#main > .posts > article:hover {
  transform: translateY(-6px);
  border-color: rgba(24, 191, 239, 0.55) !important;
  box-shadow: 0 1px 2px rgba(33, 41, 47, 0.04),
    0 26px 50px -22px rgba(24, 68, 82, 0.45);
}

/* --- Header de carte (badge + titre) --- */
#main > .posts > article > header {
  padding: 1.5rem 1.75rem 0 1.75rem;
  order: 2;
}

#main > .posts > article > header h2 {
  font-size: 1.4rem;
  margin: 0.4rem 0 0 0;
  line-height: 1.25;
}

#main > .posts > article > header h2 a {
  color: var(--ink);
  transition: color 0.25s ease;
}

#main > .posts > article:hover header h2 a {
  color: var(--accent-deep);
}

/* Pastilles technologies (liste .tech dans le <header>) */
#main > .posts > article > header .tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#main > .posts > article > header .tech li {
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  line-height: 1;
  margin: 0;
  /* valeurs par défaut, surchargées par les classes de techno ci-dessous */
  color: var(--accent-deep);
  background: rgba(24, 191, 239, 0.1);
  border: 1px solid rgba(24, 191, 239, 0.22);
}

/* neutralise le style de liste hérité du template */
#main > .posts > article > header .tech li::before {
  display: none;
}

/* --- Couleurs officielles des technologies --- */
#main > .posts > article > header .tech li.tech-html {
  color: #e6532d;
  background: rgba(230, 83, 45, 0.1);
  border-color: rgba(230, 83, 45, 0.28);
}
#main > .posts > article > header .tech li.tech-css {
  color: #1572b6;
  background: rgba(21, 114, 182, 0.1);
  border-color: rgba(21, 114, 182, 0.28);
}
#main > .posts > article > header .tech li.tech-js {
  color: #a88600; /* jaune JS assombri pour rester lisible sur fond clair */
  background: rgba(247, 223, 30, 0.22);
  border-color: rgba(216, 195, 26, 0.45);
}
#main > .posts > article > header .tech li.tech-react {
  color: #0b8fb0; /* cyan React assombri pour le contraste */
  background: rgba(97, 218, 251, 0.16);
  border-color: rgba(97, 218, 251, 0.4);
}
#main > .posts > article > header .tech li.tech-sass {
  color: #b13a75;
  background: rgba(204, 102, 153, 0.12);
  border-color: rgba(204, 102, 153, 0.3);
}
#main > .posts > article > header .tech li.tech-php {
  color: #6a74a8;
  background: rgba(119, 123, 179, 0.12);
  border-color: rgba(119, 123, 179, 0.3);
}
#main > .posts > article > header .tech li.tech-node {
  color: #5a8f3d;
  background: rgba(83, 158, 67, 0.12);
  border-color: rgba(83, 158, 67, 0.3);
}

/* --- Image de carte : ratio constant + cover + léger zoom au survol --- */
#main > .posts > article > .image,
#main > .posts > article > a.image.fit {
  order: 1;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  display: block;
  /* main.css fige .image.fit à height:245px, ce qui laissait une bande
     vide sous l'image : on laisse le conteneur épouser l'image. */
  height: auto;
  line-height: 0;
  /* sous 736px main.css plafonne .image a max-width:25rem (366px) : sur
     une carte plus large (ex. 460px a 563px de viewport) cela laissait
     une bande blanche a droite. L'image doit remplir la carte. */
  max-width: none;
  width: 100%;
}

#main > .posts > article > .image img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  max-height: none !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#main > .posts > article:hover > .image img {
  transform: scale(1.05);
}

/* Voile dégradé subtil en bas de l'image */
#main > .posts > article > .image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(33, 41, 47, 0) 55%,
    rgba(33, 41, 47, 0.18) 100%
  );
  pointer-events: none;
}

/* --- Paragraphe --- */
#main > .posts > article > p {
  order: 3;
  padding: 0.9rem 1.75rem 0 1.75rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
  flex: 1 1 auto;
  /* main.css justifie le texte : illisible en colonne etroite (rivieres) */
  text-align: left;
  hyphens: none;
}

/* --- Actions / bouton preview --- */
#main > .posts > article > .actions.special {
  order: 4;
  padding: 1.5rem 1.75rem 1.75rem 1.75rem;
  margin: 0;
  justify-content: flex-start;
  /* sous 480px main.css passe ul.actions en flex-direction:column ;
     sans align-items le <li> s'etire (stretch) sur toute la carte */
  align-items: flex-start;
}

/* le bouton epouse son contenu et reste aligne a gauche,
   comme les pastilles, le titre et le texte */
#main > .posts > article > .actions.special li {
  width: auto;
  padding: 0;
  flex: 0 0 auto;
  text-align: left;
}

#main > .posts > article .actions .button {
  background-color: var(--accent);
  border: 0;
  color: #ffffff !important;
  box-shadow: none;
  border-radius: 10px;
  padding: 0 1.6rem;
  height: 2.9rem;
  line-height: 2.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  /* main.css force width:100% sous 480px : le bouton epouse son contenu
     (la hauteur de 2.9rem garde une cible tactile confortable) */
  width: auto;
  transition: background-color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease;
}

#main > .posts > article .actions .button:hover {
  background-color: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(24, 191, 239, 0.8);
}

/* --- Bouton "Check my resume" (harmonisation) --- */
#main > .actions.special .button {
  border-radius: 10px;
}

/* --- Responsive : tablette --- */
@media screen and (max-width: 980px) {
  #main > .posts {
    padding: 3rem 2.5rem;
    gap: 2rem;
  }
}

/* --- Responsive : 1 colonne sur mobile --- */
@media screen and (max-width: 736px) {
  #main > .posts {
    padding: 2.5rem 1.5rem;
    gap: 1.75rem;
  }
  #main > .posts > * {
    width: 100% !important;
  }
  #main > .posts > article > .image img {
    height: 190px;
  }
  #main > .posts > article > header {
    padding: 1.25rem 1.25rem 0 1.25rem;
  }
  #main > .posts > article > header h2 {
    font-size: 1.25rem;
  }
  #main > .posts > article > p {
    padding: 0.8rem 1.25rem 0 1.25rem;
  }
  #main > .posts > article > .actions.special {
    padding: 1.25rem;
  }
  /* le zoom au survol n'a pas de sens au toucher */
  #main > .posts > article:hover > .image img {
    transform: none;
  }
  #main > .posts > article:hover {
    transform: none;
  }
}

/* --- Petit polish sur l'intro : le titre géant ne déborde pas sur mobile --- */
@media screen and (max-width: 736px) {
  .animate-character {
    font-size: 84px !important;
  }

  /* En arrivant sur le site, l'intro doit occuper tout l'ecran.
     main.css la reduit a 80vh sous 736px : on la remet en plein ecran.
     100dvh (dynamic viewport height) tient compte des barres du
     navigateur mobile, contrairement a 100vh. */
  #intro {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* la marge de 4rem sous le bitmoji faisait deborder le contenu :
     l'intro debordait alors de l'ecran au lieu de tenir en une vue */
  #intro img {
    margin-bottom: 1.75rem;
  }
}
@media screen and (max-width: 480px) {
  .animate-character {
    font-size: 58px !important;
  }

  #intro img {
    max-width: 150px;
    margin-bottom: 1.5rem;
  }
}

/* Ecrans courts (petits telephones, paysage) : on compacte le hero pour
   qu'il tienne en une vue plutot que de deborder. */
@media screen and (max-width: 736px) and (max-height: 640px) {
  .animate-character {
    font-size: 46px !important;
  }

  #intro img {
    max-width: 112px;
    margin-bottom: 1rem;
  }

  #intro p {
    margin-top: 0;
  }
}

/* =====================================================================
   FOOTER & COPYRIGHT
   main.css ouvre un commentaire ligne 4408 qui n'est jamais referme
   avant la ligne 4677 (il est ferme par la fin du commentaire
   "Nav Panel"). Consequence : ~270 lignes sont neutralisees, dont
   TOUTES les media queries responsive du footer et l'integralite des
   styles #copyright. On les retablit ici sans toucher au template.
   ===================================================================== */

/* Le conteneur debordait (410px de contenu dans un footer de 316px) */
#footer > section.split.contact {
  padding: 3.5rem 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}

#footer > section.split.contact > section {
  min-width: 0;
}

#footer h3 {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

/* L'adresse email doit se couper plutot que forcer un debordement */
#footer > section.split.contact > section p a {
  overflow-wrap: anywhere;
}

/* Le footer est centre, mais le "text-align: justify" global de main.css
   ecrasait l'heritage et collait l'email a gauche. */
#footer > section.split.contact > section p {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Mobile : les deux colonnes s'empilent --- */
@media screen and (max-width: 736px) {
  #footer {
    display: block;
    width: calc(100% - 2rem);
  }
  #footer > section.split.contact {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
  #footer > section.split.contact > section {
    width: 100%;
    flex-basis: auto;
    padding: 2.25rem 1.5rem;
    border-top: 1px solid #e2e2e2;
  }
  #footer > section.split.contact > section:first-child {
    border-top: 0;
  }
}

/* --- Copyright : styles entierement perdus dans la zone morte --- */
#copyright {
  position: relative;
  color: rgba(255, 255, 255, 0.35);
  cursor: default;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.075em;
  line-height: 1.5;
  text-align: center;
  margin: 4rem auto;
  padding: 0 1.5rem;
}

#copyright a {
  color: inherit;
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

#copyright a:hover {
  color: var(--accent);
}

#copyright ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#copyright ul li {
  border-left: solid 2px;
  display: inline-block;
  line-height: 1;
  margin-left: 1rem;
  padding-left: 1rem;
}

#copyright ul li:first-child {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

#copyright ul li::before {
  display: none;
}