* { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --blanc: #f1f0ee;
      --noir: #0f0f0f;
      --noir-rgb: 15, 15, 15;
      --gris-moyen: #666666;
      --accent: #d04522 ;
      --accent-rgb: 191, 64, 32;
      --gris-pale: #e0deda;
      --gris-fonce: #1a1a1a;
      --gris-texte: #2e2e2e;
      --gris-source: #747472;
      --separateur: #d5d2cd;
      --fond-citation: #e8e6e2;
      --accent-nav: #df5c34;
    }

    /* Indicateur d'entrée splash */
    @keyframes entrerFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    #splash-entrer {
      position: absolute;
      bottom: 20vh;
      left: 0;
      right: 0;
      text-align: center;
      font-family: 'Roboto', sans-serif;
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gris-source);
      opacity: 0;
      animation: entrerFadeIn 0.8s ease 1.0s forwards;
      pointer-events: none;
    }

    html, body {
      height: 100%;
      background: var(--blanc);
      color: var(--noir);
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
    }



    body { display: flex; height: 100vh; overflow: hidden; }

    /* SIDEBAR */
    .sidebar {
      width: 22vw;
      height: 100vh;
      position: fixed;
      top: 0; left: 0;
      background: var(--noir);
      background-image: url('sidebar-01.jpg');
      background-size: cover;
      background-position: center;
      z-index: 100;
      display: flex;
      flex-direction: column;
      padding: 48px 48px 24px 48px;
      box-sizing: border-box;
    }

    .sidebar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(var(--noir-rgb), 0.88);
      z-index: -1;
    }

    .sidebar-header {
      margin-bottom: 40px;
      flex-shrink: 0;
    }

    .sidebar-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: right;
    }

    .sidebar-soustitre {
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      line-height: 1.5;
      margin-top: 0;
      margin-bottom: 0;
    }

    .sidebar-nom {
      font-family: 'Oswald', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 42px;
      line-height: 1.1;
      color: #eeeeee;
      cursor: default;
      margin-bottom: 10px;
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .sidebar-nav-group {
      margin-bottom: 20px;
    }


    .sidebar-nav a {
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      text-decoration: none;
      cursor: pointer;
      padding: 5px 9px;
      margin-right: -9px;
      margin-left: -9px;
      padding-left: 9px;
      display: block;
      transition: color 0.2s, background 0.2s, padding 0.2s, margin 0.2s;
    }

    .sidebar-nav a:hover,
    .sidebar-nav a.active {
      background: var(--blanc);
      color: var(--noir);
      border-right: none;
      padding-right: 48px;
      margin-right: -48px;
      padding-left: 48px;
      margin-left: -48px;
    }

    .nav-contact {
      margin-top: 24px;
    }

    .sidebar-footer {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      margin-top: 16px;
      text-align: right;
    }

    .sidebar-footer-btn {
      font-family: 'Roboto', sans-serif;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      text-align: right;
      align-self: flex-end;
      flex-shrink: 0;
      transition: color 0.2s;
    }

    .sidebar-footer-btn:hover { color: rgba(255,255,255,0.9); }

    .sidebar-footer-link {
      font-family: 'Roboto', sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      text-decoration: none;
      padding: 0;
      transition: color 0.2s;
    }

    .sidebar-footer-link:hover { color: rgba(255,255,255,0.6); }

    /* ZONE DROITE */
    .droite {
      margin-left: 22vw;
      flex: 1;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    /* Indicateur de scroll — gradient bas, masqué quand on est en bas */
    .droite::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 72px;
      background: linear-gradient(to bottom, transparent, var(--blanc));
      pointer-events: none;
      z-index: 15;
      opacity: 1;
      transition: opacity 0.35s ease;
    }
    .droite.at-bottom::after {
      opacity: 0;
    }

    /* CITATIONS — hauteur fixe */
    .citations-header {
      flex-shrink: 0;
      height: 150px;
      padding: 20px 64px 20px clamp(64px, 4vw, 120px);
      overflow: visible;
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      box-sizing: border-box;
      background: var(--fond-citation);
      transition: background 2.5s ease;
      position: relative;
    }

    .citations-header.fade {
      background: var(--blanc);
    }

    .citations-header::after {
      content: '';
      position: absolute;
      bottom: -60px;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(to bottom, var(--fond-citation), transparent);
      pointer-events: none;
      opacity: 1;
      transition: opacity 2.5s ease;
    }

    .citations-header.fade::after {
      opacity: 0;
    }

    .citation-bloc {
      opacity: 1;
      transition: opacity 2.5s ease;
      width: 100%;
      max-width: 1000px;
      cursor: pointer;
    }

    .citation-bloc:hover { opacity: 0.75; }

    .citation-bloc.fade { opacity: 0; }

    .citation-texte {
      font-family: 'Roboto', sans-serif;
      font-style: italic;
      font-weight: 200;
      font-size: 15px;
      line-height: 1.5;
      color: var(--gris-texte);
      margin-bottom: 12px;
      hyphens: auto;
    }

    .citation-source {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gris-source);
      hyphens: auto;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      font-style: normal;
    }

    .citation-source strong {
      color: var(--gris-moyen);
      font-weight: 400;
    }

    /* CONTENU */
    .contenu {
      flex: 1;
      overflow-y: auto;
    }

    /* Texte accessible masqué visuellement (screen readers uniquement) */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* Scrollbar custom (Chrome / Safari / Edge) */
    .contenu::-webkit-scrollbar { width: 4px; }
    .contenu::-webkit-scrollbar-track { background: transparent; }
    .contenu::-webkit-scrollbar-thumb { background: rgba(var(--noir-rgb), 0.18); border-radius: 2px; }
    .contenu::-webkit-scrollbar-thumb:hover { background: rgba(var(--noir-rgb), 0.35); }

    section {
      display: none;
      padding: 48px 64px 48px 64px;
      min-height: fit-content;
      opacity: 0;
      width: 100%;
      max-width: 1200px;
    }

    section.active {
      display: block;
      animation: sectionIn 0.35s ease forwards;
    }

    @keyframes sectionIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }


    /* À PROPOS — bio texte seul, sans photo */
    .apropos-bio {
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 1em;
      margin-bottom: 24px;
    }

    .apropos-bio .contact-bio-nouvelle {
      font-style: italic;
    }

    .apropos-bio .contact-bio-nouvelle + .contact-bio-nouvelle {
      margin-top: 0;
    }

    #apropos .contact-refs-nouvelle {
      border-top: 0.5px solid var(--separateur);
    }

    /* LIEN PDF CONTACT */
    .contact-pdf-lien {
      font-family: 'Roboto', sans-serif;
      font-size: 13px;
      font-weight: 400;
      color: var(--gris-moyen);
      text-decoration: none;
      margin-top: 4px;
      transition: color 0.15s;
      display: inline-block;
    }
    .contact-pdf-lien:hover { color: var(--accent); }

    /* MODALE MENTIONS LÉGALES */
    #modal-mentions {
      position: fixed;
      inset: 0;
      background: rgba(var(--noir-rgb), 0.55);
      z-index: 9999;
      align-items: center;
      justify-content: center;
    }

    .modal-mentions-inner {
      background: var(--blanc);
      max-width: 520px;
      width: 90%;
      padding: 40px 36px;
      position: relative;
      font-family: 'Roboto', sans-serif;
    }

    .modal-mentions-fermer {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      font-size: 18px;
      color: #aaa;
      cursor: pointer;
    }

    .modal-mentions-titre {
      font-family: 'Roboto', sans-serif;
      font-style: bold;
      font-weight: 200;
      font-size: 22px;
      color: var(--noir);
      margin-bottom: 28px;
    }

    .modal-mentions-rubrique {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gris-moyen);
      margin-bottom: 6px;
    }

    .modal-mentions-texte {
      font-size: 13px;
      font-weight: 300;
      color: var(--noir);
      line-height: 1.5;
      margin-bottom: 24px;
    }

    .modal-mentions-texte--last {
      margin-bottom: 0;
    }

    /* CONTACT */
    .contact-nouveau {
      display: flex;
      flex-direction: column;
      gap: 64px;
      max-width: 1000px;
    }

    .contact-haut {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 64px;
      align-items: start;
    }

    .contact-photo-nouvelle {
      width: 100%;
      aspect-ratio: 3/2;
      object-fit: cover;
      object-position: center top;
      display: block;
      filter: grayscale(20%);
      border-radius: 4px;
    }

    .contact-haut-texte {
      display: flex;
      flex-direction: column;
      gap: 36px;
    }

    .contact-bio-nouvelle {
      font-size: 15px;
      line-height: 1.6;
      color: var(--noir);
      font-weight: 300;
      margin: 0;
    }
    .contact-bio-nouvelle + .contact-bio-nouvelle {
      margin-top: 0.7em;
    }

    .contact-email-wrap {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .contact-email-invite {
      font-family: 'Roboto', sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
      color: var(--noir);
      line-height: 1.6;
    }

    .contact-email-nouvelle {
      font-size: 14px;
      font-weight: 300;
      color: #ffffff;
      background: var(--noir);
      text-decoration: none;
      transition: opacity 0.2s;
      font-family: 'Roboto', sans-serif;
      padding: 14px 24px;
      border-radius: 4px;
      display: inline-block;
      letter-spacing: 0.04em;
      align-self: flex-start;
    }

    .contact-email-nouvelle:hover { opacity: 0.55; }

    .contact-refs-nouvelle {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 48px;
      margin-top: 48px;
      padding-top: 40px;
    }

    .contact-refs-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .contact-refs-cat {
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--gris-moyen);
      margin-bottom: 6px;
    }

    .contact-ref-lien {
      font-size: 13px;
      font-weight: 300;
      color: var(--gris-moyen);
      line-height: 1.5;
      text-decoration: none;
    }

    .contact-ref-lien:hover {
      color: var(--noir);
    }

    .contact-refs-col span:not(.contact-refs-cat) {
      font-size: 13px;
      font-weight: 300;
      color: var(--gris-moyen);
      line-height: 1.5;
    }

    /* ATELIERS MICRO-GRILLE */
    .atelier-projet-wrap {
      margin-bottom: 0;
    }

    .atelier-img-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: auto;
      gap: 0;
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
    }

    .atelier-img-grid .atelier-cell {
      overflow: hidden;
      aspect-ratio: 16/9;
      min-height: 0;
    }

    .atelier-img-grid .atelier-cell img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .atelier-img-grid .atelier-cell-desc {
      aspect-ratio: 16/9;
      overflow: hidden;
      background: var(--gris-pale);
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      box-sizing: border-box;
      min-height: 80px;
    }

    .atelier-img-grid .atelier-ghost {
      aspect-ratio: 16/9;
      background: transparent;
    }
    .atelier-img-grid .atelier-cell-desc .creation-bloc-titre {
      color: var(--noir);
      margin-bottom: 6px;
      font-size: 18px;
      line-height: 1.2;
    }
    .atelier-img-grid .atelier-cell-desc p {
      font-size: 13px;
      line-height: 1.6;
      color: var(--noir);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .atelier-img-grid .atelier-cell-desc .creation-bloc-annee {
      color: var(--gris-moyen);
      margin-top: 6px;
      display: block;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .creation-bloc {
      margin-bottom: 0;
      cursor: pointer;
      position: relative;
      min-width: 0;
      border-radius: 4px;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .creation-bloc:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(var(--noir-rgb), 0.10);
    }

    #ateliers-masonry .creation-bloc:hover {
      transform: none;
      box-shadow: none;
    }

    .atelier-cell-desc {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .atelier-cell-desc:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(var(--noir-rgb), 0.10);
    }

    .creation-bloc-img {
      position: relative;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 16 / 9; /* ratio par défaut — écrasé en JS si ratio 1/1 */
    }

    .creation-bloc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      position: absolute;
      top: 0; left: 0;
    }

    .creation-bloc-role {
      display: none;
    }

    .creation-bloc-role-badge {
      position: absolute;
      bottom: 14px;
      left: 12px;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--blanc);
      text-shadow: 0 1px 4px rgba(0,0,0,0.7);
      z-index: 3;
      pointer-events: none;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
    }

    .creation-bloc-titre {
      font-family: 'Roboto', sans-serif;
      font-style: italic;
      font-weight: 500;
      font-size: 18px;
      color: var(--noir);
      line-height: 1.2;
      display: block;
      margin-bottom: 8px;
    }

    .creation-bloc-icons {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      pointer-events: none;
    }
    .creation-bloc-icons svg {
      display: block;
      width: 16px;
      height: 16px;
      stroke: #fff;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      opacity: 0.7;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    }

    .creation-bloc-titre-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 8px;
    }
    .creation-bloc-titre-row .creation-bloc-titre {
      margin-bottom: 0;
    }

    .creation-bloc-detail {
      max-height: none;
      overflow: hidden;
      background: var(--gris-pale);
      padding: 12px 14px;
      opacity: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      box-sizing: border-box;
      position: relative;
    }

    .creation-bloc-detail .creation-bloc-titre {
      color: var(--noir);
      margin-bottom: 6px;
      font-size: 18px;
      line-height: 1.2;
    }

    .creation-bloc-detail p {
      font-size: 13px;
      line-height: 1.6;
      color: var(--noir);
      margin: 0;
    }

    .creation-bloc-detail .creation-bloc-annee {
      color: var(--gris-moyen);
      margin-top: 6px;
      display: block;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .creation-bloc.open .creation-bloc-detail {
      max-height: 300px;
      padding: 12px 14px;
      opacity: 1;
    }

    .creation-bloc.open {
      align-self: start;
    }

    .creation-bloc-annee {
      font-size: 11px;
      color: var(--gris-moyen);
      text-transform: uppercase;
    }

    .enseignement-outils {
      display: flex;
      gap: 20px;
      align-items: center;
      padding: 32px 0 0 0;
    }

    .enseignement-outils img {
      opacity: 0.75;
      transition: opacity 0.2s;
    }

    .enseignement-outils img:hover {
      opacity: 1;
    }

    /* PLAY OVERLAY */
    .play-overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 4;
      cursor: pointer;
      background: rgba(var(--noir-rgb), 0);
      transition: background 0.25s ease;
    }
    .play-overlay:hover { background: rgba(var(--noir-rgb), 0.25); }
    .play-overlay svg {
      opacity: 0.85;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .play-overlay:hover svg { transform: scale(1.1); opacity: 1; }

    .media-iframe-wrap {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      z-index: 5;
    }
    .media-iframe-wrap iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    .stop-btn {
      position: absolute;
      top: 8px; right: 8px;
      z-index: 6;
      background: rgba(var(--noir-rgb), 0.75);
      border: none;
      cursor: pointer;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .stop-btn:hover { background: rgba(var(--noir-rgb), 0.95); }
    .stop-btn svg { width: 12px; height: 12px; fill: var(--accent); }

    /* ENSEIGNEMENT */
    .enseignement-wrap {
      max-width: 1000px;
    }

    .enseignement-accroche {
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 17px;
      letter-spacing: 0;
      text-transform: none;
      color: var(--noir);
      line-height: 1.6;
    }

    .enseignement-titre {
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--noir);
      margin-bottom: 0;
    }

    /* h2 et h3 utilisés pour la sémantique — rendu visuel identique à avant */
    h2.enseignement-titre,
    h3.enseignement-titre {
      font-size: 15px;
      font-weight: 400;
    }

    .enseignement-blocs {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .enseignement-bloc {
      padding: 64px 0;
      border-top: 0.5px solid var(--separateur);
    }

    /* Le premier cours s'enchaîne directement après l'accroche — pas de bordure ni padding top supplémentaires */
    .enseignement-blocs > .enseignement-bloc:first-child {
      padding-top: 0;
      border-top: none;
    }

    .enseignement-bloc:last-child {
      border-bottom: 0.5px solid var(--separateur);
    }

    .enseignement-bloc-inner {
      display: flex;
      gap: 48px;
      align-items: flex-start;
    }

    .enseignement-bloc:nth-child(even) .enseignement-bloc-inner {
      flex-direction: row-reverse;
    }

    .enseignement-bloc-img {
      width: 240px;
      min-width: 240px;
      height: 240px;
      overflow: hidden;
      flex-shrink: 0;
      border-radius: 4px;
    }

    .enseignement-bloc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: grayscale(20%);
    }

    .enseignement-bloc-texte {
      display: flex;
      flex-direction: column;
      gap: 1em;
      padding-top: 8px;
    }


    .enseignement-texte strong,
    .enseignement-bloc-texte strong {
      font-weight: 500;
    }

    .enseignement-lien {
      color: var(--accent);
      text-decoration: none;
      transition: opacity 0.2s;
    }

    .enseignement-lien:hover {
      opacity: 0.7;
    }

    .enseignement-texte {
      font-size: 15px;
      line-height: 1.6;
      color: var(--noir);
    }

    /* Conteneur intro des sections création / ateliers */
    .section-intro {
      max-width: 1000px;
      margin-bottom: 48px;
    }

    /* Bouton bascule langue (bas sidebar) */
    #lang-toggle {
      font-family: 'Roboto', sans-serif;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.6);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: color 0.2s;
      text-align: left;
    }
    #lang-toggle:hover {
      color: rgba(255, 255, 255, 0.95) !important;
    }

    /* Lien mentions légales (bas sidebar) */
    #link-mentions {
      display: block;
    }
    #link-mentions:hover {
      color: rgba(255, 255, 255, 0.55) !important;
    }

    /* Crédits techniques dans les blocs création */
    .creation-bloc-credits {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 16px;
      width: 100%;
    }

    .credit-tag {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      border: 0.5px solid var(--accent);
      padding: 3px 8px;
      border-radius: 3px;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
    }

    .creation-bloc-extrait {
      font-size: 11px;
      opacity: 0.7;
      font-family: 'Roboto', sans-serif;
      font-style: normal;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .atelier-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: auto;
    }

    .atelier-meta-tag {
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--noir);
      border: 0.5px solid var(--gris-source);
      padding: 3px 8px;
      border-radius: 3px;
      font-family: 'Roboto', sans-serif;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .atelier-meta-tag i {
      font-size: 12px;
      color: var(--gris-source);
    }

    /* MOODBOARD */

    #moodboard-loader {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gris-source);
      padding: 24px 0 24px 64px;
    }

    #moodboard {
      padding: 48px 64px 80px 64px;
    }

    @media (min-width: 1600px) {
      #moodboard {
        padding: 48px 84px 80px 84px;
      }
      #moodboard-loader {
        padding-left: 84px;
      }
    }

    .moodboard-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      max-width: 1000px;
      margin-right: auto;
      align-items: start;
    }

    .moodboard-item {
      position: relative;
      background: var(--blanc);
      grid-column: span 1;
      transition: z-index 0s;
    }

    .moodboard-item:hover {
      z-index: 10;
    }

    .moodboard-img-wrap {
      overflow: visible;
    }

    .moodboard-img-wrap img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.5s ease;
      transform-origin: center center;
      border-radius: 4px;
    }

    .moodboard-item:hover .moodboard-img-wrap img { transform: scale(1.05); }

    .moodboard-item.large  { grid-column: span 2; }
    .moodboard-item.xlarge { grid-column: span 3; }

    .moodboard-item .tooltip {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: rgba(var(--noir-rgb), 0.88);
      color: #fff;
      font-size: 11px;
      padding: 8px 10px;
      opacity: 0;
      transition: opacity 0.3s;
      line-height: 1.5;
    }

    .moodboard-item:hover .tooltip { opacity: 1; }
    .moodboard-item.error { display: none; }

    .moodboard-bouton-wrap {
      text-align: center;
      padding: 48px 0 64px;
    }

    .moodboard-bouton {
      font-size: 42px;
      color: var(--accent);
      background: none;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.3s;
      line-height: 1;
    }

    .moodboard-bouton:hover {
      opacity: 0.7;
      transform: rotate(180deg);
    }

    /* Grilles creation et ateliers — layout de base */
    #creation-masonry {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      row-gap: 40px;
      column-gap: 40px;
      max-width: 1000px;
      align-items: start;
    }

    #ateliers-masonry {
      display: flex;
      flex-direction: column;
      gap: 40px;
      max-width: 1000px;
    }

    /* RESPONSIVE MOBILE
    ================================================ */
    @media (max-width: 1024px) {

      /* Titre de section mobile */
      .section-titre-mobile {
        display: block;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 24px;
      }

      /* Hamburger button */
      #splash-entrer { display: none; }
      .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: max(18px, calc(env(safe-area-inset-top) + 8px));
        right: max(18px, env(safe-area-inset-right));
        z-index: 998;
        cursor: pointer;
        padding: 10px 16px;
        background: var(--noir);
        border-radius: 4px;
      }
      .hamburger span { display: none; }
      .hamburger::after {
        content: 'Menu';
        font-family: 'Roboto', sans-serif;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
      }


      /* Sidebar mobile */
      .sidebar {
        width: 100vw;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.35s ease;
        z-index: 400;
        overflow-y: auto;
        padding: max(48px, calc(env(safe-area-inset-top) + 28px)) 32px 24px 32px;
        position: fixed;
      }

      /* Nom : trop grand pour un plein écran */
      .sidebar-nom {
        font-size: 42px;
      }

      /* Header : réduire l'espace sous le bloc nom/sous-titre */
      .sidebar-header {
        margin-bottom: 28px;
      }

      /* Nav active : recaler sur le padding mobile (32px au lieu de 48px) */
      .sidebar-nav a:hover,
      .sidebar-nav a.active {
        padding-right: 32px;
        margin-right: -32px;
        padding-left: 32px;
        margin-left: -32px;
      }

      /* Lisibilité sidebar */
      .sidebar-soustitre {
        font-size: 13px;
      }

      .sidebar-footer-btn,
      .sidebar-footer-link {
        font-size: 10px;
        padding: 8px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
      }

      /* Contraste mentions légales */
      .sidebar-footer-link {
        color: rgba(255,255,255,0.55);
      }
      .sidebar.open,
      .sidebar.sidebar-ready {
        transform: translateX(0);
      }
      .sidebar.sidebar-ready {
        transition: none;
      }

      /* Zone droite pleine largeur */
      .droite {
        margin-left: 0;
        width: 100vw;
      }

      /* Grilles en 1 colonne */
      #creation-masonry {
        grid-template-columns: 1fr !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        row-gap: 32px !important;
        column-gap: 0 !important;
      }
      #creation-masonry .creation-bloc {
        grid-column: 1 / span 1 !important;
        grid-row: auto !important;
      }

      #creation-masonry .creation-ghost {
        display: none !important;
      }

      #creation-masonry .creation-bloc-detail {
        max-height: 400px !important;
        padding: 10px 14px !important;
        opacity: 1 !important;
      }

      #ateliers-masonry {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 0 !important;
      }

      /* Séparateur entre ateliers */
      #ateliers-masonry .creation-bloc {
        padding-top: 0;
        margin-bottom: 40px;
      }

      /* Titre atelier en grand au-dessus des images */
      #ateliers-masonry .creation-bloc-titre,
      .creation-bloc-titre-mobile {
        display: block;
        font-size: 18px;
        font-weight: 500;
        color: var(--noir);
        margin-bottom: 8px;
      }

      .atelier-img-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
      }

      .atelier-img-grid .atelier-cell,
      .atelier-img-grid .atelier-cell-desc {
        aspect-ratio: 16/9 !important;
        grid-column: unset !important;
        grid-row: unset !important;
      }

      .atelier-img-grid .atelier-ghost {
        display: none !important;
      }

      .atelier-img-grid .atelier-cell-desc {
        width: 100% !important;
        order: -1;
        padding: 10px 14px;
        background: var(--gris-pale);
      }

      .atelier-img-grid .atelier-cell-desc p {
        font-size: 14px;
        line-height: 1.5;
        -webkit-line-clamp: unset;
      }

      /* Mobile : infos métier ancrées en bas */
      .atelier-img-grid .atelier-cell-desc .atelier-meta {
        margin-top: auto;
      }

      .atelier-img-grid .atelier-cell-desc .creation-bloc-titre {
        display: block;
        font-size: 15px;
        margin-bottom: 6px !important;
      }

      /* Citations header — caché sur mobile */
      .citations-header {
        display: none !important;
      }

      /* Citation sidebar mobile — visible */
      .sidebar-citation-mobile {
        display: block;
      }

      /* Sections padding */
      section {
        padding: max(80px, calc(env(safe-area-inset-top) + 60px)) 22px 60px 22px;
      }

      /* Bouton × fermeture sidebar */
      .sidebar-close {
        display: flex;
        position: absolute;
        top: max(18px, calc(env(safe-area-inset-top) + 4px));
        right: 18px;
        background: none;
        border: none;
        color: rgba(255,255,255,0.4);
        font-size: 18px;
        cursor: pointer;
        padding: 10px;
        line-height: 1;
        transition: color 0.2s;
        z-index: 10;
      }
      .sidebar-close:hover,
      .sidebar-close:active { color: rgba(255,255,255,0.9); }

      /* Contact */
      .contact-nouveau {
        gap: 48px;
      }

      .contact-haut {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .contact-haut-texte {
        gap: 28px;
        padding-top: 0;
      }

      /* Accroche contact : passe à bleu-fonce pour matcher visuellement
         les accroches des autres sections (effet de contraste contextuel
         avec le lien rouge et le texte bio adjacents) */
      .contact-email-invite {
        color: var(--noir);
      }

      .contact-photo-nouvelle {
        width: 100%;
        aspect-ratio: 3/2;
        height: auto;
        object-position: center top;
      }

      .contact-bio-nouvelle {
        font-size: 15px;
        line-height: 1.6;
      }

      .contact-refs-nouvelle {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 48px;
        padding-top: 36px;
      }

      .contact-refs-col {
        gap: 6px;
      }

      .contact-ref-lien {
        font-size: 14px;
        line-height: 1.6;
      }

      .contact-refs-col span:not(.contact-refs-cat) {
        font-size: 14px;
        line-height: 1.6;
      }

      .contact-refs-cat {
        font-size: 13px;
        margin-bottom: 2px;
      }

      /* Lisibilité : textes secondaires à 14px minimum */
      .creation-bloc-detail p {
        font-size: 14px;
        line-height: 1.5;
      }

      .enseignement-accroche {
        padding-left: 0;
      }

      .section-intro {
        margin-bottom: 32px;
      }

      /* Lisibilité corps de texte */
      .enseignement-texte {
        font-size: 15px;
        line-height: 1.6;
      }

      /* Zones de tap nav sidebar */
      .sidebar-nav a {
        padding: 10px 9px;
        font-size: 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .enseignement-outils {
        padding: 24px 0 0 0;
        flex-wrap: wrap;
      }

      /* Moodboard */
      .moodboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
      }
      #moodboard {
        padding: 80px 16px 60px 16px !important;
      }
      /* Tooltip toujours visible sur mobile (hover ne fonctionne pas sur tactile) */
      .moodboard-item .tooltip {
        opacity: 1;
        background: rgba(var(--noir-rgb), 0.65);
        font-size: 10px;
        padding: 6px 8px;
      }
      .enseignement-bloc {
        padding: 40px 0;
        border-top: none;
        border-bottom: none;
      }

      .enseignement-blocs > .enseignement-bloc:first-child {
        padding-top: 0;
      }

      .enseignement-bloc-inner,
      .enseignement-bloc:nth-child(even) .enseignement-bloc-inner {
        flex-direction: column;
        gap: 28px;
      }

      .enseignement-bloc-img {
        width: 100%;
        min-width: unset;
        height: auto;
        aspect-ratio: 1/1;
      }

    }

    @media (min-width: 1025px) {
      .hamburger { display: none !important; }
      .section-titre-mobile { display: none; }
      .sidebar-close { display: none !important; }
    }


    /* Bouton fermer sidebar — masqué par défaut (desktop), visible via media query mobile */
    .sidebar-close { display: none; }

    /* Citation sidebar mobile */
    .sidebar-citation-mobile {
      display: none;
      padding: 0 0 24px 0;
      max-height: 35vh;
      overflow: hidden;
    }
    .sidebar-citation-texte {
      font-family: 'Roboto', sans-serif;
      font-style: italic;
      font-weight: 300;
      font-size: 15px;
      line-height: 1.6;
      color: rgba(var(--accent-rgb), 0.75);
      margin-bottom: 8px;
    }
    .sidebar-citation-source {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(var(--accent-rgb), 0.5);
    }

    /* ================================================
       GRAND ÉCRAN (≥ 1600px)
    ================================================ */
    @media (min-width: 1600px) {
      .sidebar {
        width: 360px;
      }
      .droite {
        margin-left: 360px;
      }
      .citations-header {
        padding-left: 84px;
      }
    }

    @media (min-width: 1800px) {
      .sidebar {
        width: 400px;
      }
      .droite {
        margin-left: 400px;
      }
    }