/* ==========================================================
   Cyril Verdon — feuille de style unique
   Reprend le design « work.html » (template Nitro), réécrit
   sans Bootstrap ni jQuery. Le menu de gauche reste toujours
   visible ; sur mobile il devient une barre fixe en haut.
   ========================================================== */

/* ---------- Polices (hébergées en local, pas d'appel à Google) ---------- */
@font-face { font-family: "Roboto"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/roboto-300.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/roboto-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/roboto-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/montserrat-700.woff2") format("woff2"); }

/* ---------- Variables ---------- */
:root {
  --rouge: #da1212;
  --noir: #000;
  --texte: #666;
  --texte-doux: #757575;
  --bordure: #e6e6e6;
  --fond: #fff;
  --menu-l: clamp(210px, 15vw, 280px);
  --site-max: 1600px;          /* largeur max du site, centré au-delà */
  --fond-ext: #f5f5f5;         /* fond de part et d'autre sur grand écran */
  --font-texte: "Roboto", Arial, sans-serif;
  --font-titre: "Montserrat", Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond-ext);
  font-family: var(--font-texte);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: var(--texte);
}
@media (max-width: 992px) { body { font-size: 16px; } }

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--rouge); text-decoration: none; transition: color .3s; }
a:hover, a:focus { color: var(--rouge); text-decoration: underline; }
p { margin: 0 0 1.5em; font-weight: 400; }
strong { font-weight: 700; color: #333; }
::selection { color: #fff; background: var(--rouge); }

h1, h2, h3, h4 {
  color: var(--noir);
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 30px;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.15em; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--noir); color: #fff; padding: .5em 1em;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Menu de gauche : toujours visible ---------- */
/* Cadre du site : centré, menu collé à gauche du contenu */
.page {
  display: flex;
  align-items: flex-start;
  max-width: var(--site-max);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--fond);
}
@media (min-width: 1601px) {
  .page { border-left: 1px solid var(--bordure); border-right: 1px solid var(--bordure); }
}

.aside {
  position: sticky;            /* reste visible au défilement, sans quitter le cadre */
  top: 0;
  height: 100vh;
  flex: 0 0 var(--menu-l);
  width: var(--menu-l);
  padding: 30px 10px;
  border-right: 1px solid var(--bordure);
  background: var(--fond);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.aside__logo { margin: 0 0 30px; text-align: center; }
.aside__logo a { display: inline-block; }
.aside__logo img { width: 90px; height: 90px; margin: 0 auto; }

.menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu li { margin: 0 0 10px; }
.menu a {
  position: relative;
  display: inline-block;
  padding: 10px;
  color: rgba(0, 0, 0, .55);
  font-family: var(--font-titre);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 7px;
  height: 2px;
  background: var(--rouge);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
}
.menu a:hover, .menu a:focus, .menu a[aria-current="page"] { color: var(--noir); text-decoration: none; }
.menu a:hover::after, .menu a:focus::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }

.aside__footer {
  margin-top: auto;
  padding-top: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, .6);
}
.aside__footer p { margin: 0 0 .5em; }
.aside__social { display: flex; justify-content: center; gap: 12px; margin: 0 0 .8em; padding: 0; list-style: none; }
.aside__social a { color: rgba(0, 0, 0, .7); display: inline-flex; }
.aside__social a:hover, .aside__social a:focus { color: var(--rouge); }
.aside__social svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Zone principale ---------- */
.main { flex: 1 1 auto; min-width: 0; min-height: 100vh; }
.narrow { width: 80%; max-width: 1400px; margin: 0 auto; padding: 4em 0; }

/* ---------- Mobile : le menu devient une barre fixe en haut ---------- */
@media (max-width: 768px) {
  .page { display: block; }
  .aside {
    position: sticky;
    bottom: auto;
    width: 100%;
    height: auto;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--bordure);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: visible;
  }
  .aside__logo { margin: 0; }
  .aside__logo img { width: 48px; height: 48px; }
  .menu ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; }
  .menu li { margin: 0; }
  .menu a { font-size: 12px; letter-spacing: .12em; padding: 8px 6px; }
  .menu a::after { left: 6px; right: 6px; bottom: 4px; }
  .aside__footer { display: none; }
  .main { margin-left: 0; }
  .narrow { width: 100%; padding: 2.5em 16px; }
}

/* ---------- En-tête de page ---------- */
.page-heading { margin-bottom: 1.5em; }
.page-heading h1 { font-size: 1.15em; margin: 0; }
.page-heading .sous-titre { display: block; margin-top: .3em; color: var(--rouge); font-size: .8em; }

/* ---------- Grille des projets (accueil) ---------- */
.works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1200px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .works { grid-template-columns: 1fr; } }

.work-item a { display: block; text-decoration: none; }
.work-item img {
  width: 100%;
  height: auto;            /* image entière, jamais recadrée */
  margin-bottom: 10px;
  border: 10px solid transparent;
  transition: border-color .4s;
}
.work-item a:hover img, .work-item a:focus img { border-color: var(--noir); }
.work-item h2 { font-size: 15px; font-weight: 700; color: var(--noir); margin: 0 0 6px; padding: 0 10px; }
.work-item p { font-size: 14px; color: var(--texte-doux); margin: 0; padding: 0 10px; }

/* ---------- Page projet (gabarit work.html) ---------- */
.intro {
  width: 66.666%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 0 30px;
}
.intro__texte { grid-column: 2; grid-row: 1; }
.intro__infos { grid-column: 1; grid-row: 1; padding-top: 6px; }
.intro__texte .categorie {
  display: block; margin-bottom: .4em;
  font-family: var(--font-titre); font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rouge);
}
.intro__infos h2 { font-size: 1em; margin-bottom: 15px; }
.intro__infos dl { margin: 0; font-size: 15px; }
.intro__infos dt {
  font-family: var(--font-titre); font-weight: 500; color: var(--noir);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.intro__infos dd { margin: 0 0 1em; font-weight: 400; }

@media (max-width: 1200px) { .intro { width: 100%; } }
@media (max-width: 992px) {
  .intro { grid-template-columns: 1fr; }
  .intro__texte, .intro__infos { grid-column: 1; grid-row: auto; }
  .intro__infos { border-top: 1px solid var(--bordure); padding-top: 1.5em; margin-bottom: 1em; }
}

.gallery { margin-top: 2em; }
.gallery figure { margin: 0 0 2em; text-align: center; }
.gallery img, .gallery video { margin: 0 auto; }
.gallery figcaption { margin-top: .6em; font-size: 14px; color: #999; }

.pagination {
  width: 66.666%;
  margin: 0 auto;
  padding: 3em 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #f0f0f0;
}
.pagination a { color: var(--noir); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 16px; }
.pagination a:hover, .pagination a:focus { color: var(--rouge); }
.pagination svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.pagination .prev { justify-self: start; }
.pagination .next { justify-self: end; }
@media (max-width: 1200px) { .pagination { width: 100%; } }
@media (max-width: 480px) { .pagination span { display: none; } }

/* ---------- Pages texte (profil, contact, articles) ---------- */
.texte { max-width: 760px; }
.profil { display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: start; }
.profil__texte { grid-column: 1; }
.profil__photo { grid-column: 3; }
@media (max-width: 992px) {
  .profil { grid-template-columns: 1fr; }
  .profil__texte, .profil__photo { grid-column: 1; }
  .profil__photo { max-width: 420px; margin-bottom: 2em; order: -1; }
}
.lead { font-size: 15px; line-height: 1.6; }
.liste-tirets { list-style: none; padding: 0; margin: 0 0 1.5em; font-size: 15px; font-weight: 400; }
.liste-tirets li { margin-bottom: .5em; }
.liste-tirets li::before { content: "— "; color: var(--rouge); }

.coordonnees { list-style: none; padding: 0; margin: 0 0 2em; font-size: 16px; font-weight: 400; }
.coordonnees li { margin-bottom: .6em; }
.coordonnees span { display: inline-block; min-width: 110px; color: var(--noir); font-family: var(--font-titre); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.voir-aussi { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid #f0f0f0; }
.voir-aussi h2 { font-size: 1em; }
.voir-aussi ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; }

/* ---------- Formulaire de contact ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; max-width: 900px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 13px; font-family: var(--font-titre); letter-spacing: .1em; text-transform: uppercase; color: var(--noir); margin-bottom: 6px; }
.form input, .form textarea {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px 14px;
  font: 400 16px/1.4 var(--font-texte);
  color: #333;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--rouge); }
.form textarea { min-height: 180px; resize: vertical; }
.form .piege { position: absolute; left: -9999px; }
.btn {
  display: inline-block;
  padding: 14px 30px;
  border: 2px solid var(--rouge);
  background: var(--rouge);
  color: #fff;
  font: 500 14px var(--font-titre);
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.btn:hover, .btn:focus { background: #fff; color: var(--rouge); text-decoration: none; }
@media (max-width: 768px) { .form { grid-template-columns: 1fr; } }

.message { display: none; padding: 1em 1.2em; margin-bottom: 2em; font-size: 16px; font-weight: 400; border-left: 4px solid; }
.message:target { display: block; }
.message--ok { border-color: #2e7d32; background: #f1f8f1; color: #1b5e20; }
.message--erreur { border-color: var(--rouge); background: #fdf1f1; color: #8a0c0c; }

/* ---------- Apparition au défilement (effet fadeInLeft du template) ---------- */
/* Ne s'applique que si JavaScript est actif (classe .js posée dans le <head>). */
.main { overflow-x: hidden; }
.js .anim { opacity: 0; }
.js .anim.is-visible { animation: fadeInLeft 1s both; }
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-50px, 0, 0); }   /* valeur du template Nitro */
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .anim { opacity: 1; }
  .js .anim.is-visible { animation: none; }
}

/* ---------- Bloc « Un accompagnement graphique à 360° » (accueil) ---------- */
.accompagnement { margin-top: 5em; padding-top: 4em; border-top: 1px solid #f0f0f0; }
.accompagnement__intro { max-width: 58%; margin-bottom: 3em; }
.accompagnement__intro h2 { color: var(--rouge); font-size: 1.3em; }
.accompagnement__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.accompagnement h3 { color: var(--rouge); font-family: var(--font-texte); font-weight: 400; font-size: 15px; margin: 0 0 .6em; }
@media (max-width: 992px) {
  .accompagnement__intro { max-width: none; }
  .accompagnement__cols { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Emplacement publicitaire (accueil, entre le titre et les projets) ---------- */
.pub { margin: 0 0 2.5em; }
.pub__mention {
  display: block; margin-bottom: 6px;
  font-family: var(--font-titre); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: #999;
}
.pub a { display: block; }
.pub img { width: 100%; height: auto; }