/* ==========================================================================
   presse étude — feuille de styles
   --------------------------------------------------------------------------
   Reprend à l'identique les valeurs du site d'origine (CMS Zébulon :
   _common.css, pageVariableCss.css, mainNavVariableCss.css,
   z_responsiveVariableCss.css, contactFixedCss.css, smallDeviceNav*.css,
   footer.css + CSS communs), réécrites en un seul fichier. Les valeurs
   « mesurées » ont été relevées dans Chrome sur une copie locale de l'ancien
   site.

   Convention de nommage : BEM — .bloc, .bloc__element, .bloc--variante.
   États : .is-open, .is-visible, .is-animated ; page courante :
   [aria-current="page"] ; html.js / html.no-js selon JavaScript.

   Zones d'origine : 1 ≥ 1570 px · 2 1200–1569 · 3 1025–1199 · 4 962–1024 ·
   5 600–961 · 6 ≤ 599.
   ========================================================================== */

/* Polices — fichiers d'origine, hébergés localement.
   Comme à l'origine, chaque graisse est une famille à part n'ayant qu'une
   graisse : les titres et <strong> sont un gras synthétique (rendu identique). */
@font-face {
  font-family: 'Roboto Light';
  src: url('../fonts/roboto-light-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Italic';
  src: url('../fonts/roboto-italic-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Nexa Light';
  src: url('../fonts/nexa_light-webfont.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'BankGothic Light';
  src: url('../fonts/bankgothic_md_bt_light-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Gravity Book';
  src: url('../fonts/gravity-book-webfont.woff2') format('woff2');
  font-display: swap;
}

:root {
  --blanc: #fff;
  --noir: #000;
  --bleu: #2e9dd8;             /* .bleuPresseEtude : titres, secteurs, liens du menu mobile */
  --bleu-clair: #63acdf;       /* menu : survol et page courante */
  --degrade-haut: #6eafe0;     /* fond de page (dégradé) */
  --degrade-bas: #239bd7;
  --texte: #737373;            /* .pageContainer, h2.welcome */
  --texte-page: #707173;       /* .grisFonce, texte des pages */
  --texte-colonne: #a6a7a9;    /* .grisClair : colonne de droite de l'accueil */
  --bouton: #b8b8b8;           /* .inputTraditionalButton */
  --gris-fond: #eee;           /* .bgClearGrey */
  --gris-fond-clair: #fdfdfd;  /* .bgVeryClearGrey */
  --survol-menu: #302f2e;
  --survol-menu-mobile: #f4f4f4;
  --tirets-menu: #dcc3a4;
  --gris-champ: #d7d7d7;
  --gris-saisie: #a3a3a3;
  --bleu-champ: #3f5369;

  --font-light: 'Roboto Light', sans-serif;
  --font-condensed: 'Roboto Condensed', sans-serif;
  --font-italic: 'Roboto Italic', sans-serif;
  --font-nexa: 'Nexa Light', sans-serif;
  --font-bankgothic: 'BankGothic Light', sans-serif;
  --font-gravity: 'Gravity Book', sans-serif;
  --font-texte: arial, sans-serif;

  --marge: 5%;                 /* .pageContainer : 90 % + 2 × 5 % (zones 1, 2, 6) ou 80 % + 2 × 10 % */
  --nav-height: 80px;
  --swing: cubic-bezier(0.37, 0, 0.63, 1);   /* easing « swing » de jQuery */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Fond d'origine : dégradé bleu sur toute la hauteur de la page */
body {
  position: relative;
  margin: 0;
  background: linear-gradient(var(--degrade-haut), var(--degrade-bas)) no-repeat;
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 6000;
  padding: 10px 16px;
  font-family: var(--font-light);
  background: var(--noir);
  color: var(--blanc);
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

/* Séparateur « --- » */
.separator {
  margin: 0 0 30px;
  font-family: var(--font-condensed);
  font-size: 25px;
}
.separator--center { text-align: center; }
.separator--left { text-align: left; }
.separator--small { margin-bottom: 10px; }
.separator--flush { margin-bottom: 0; }
.separator--blue { color: var(--bleu); }

/* Bouton (.inputTraditionalButton) */
.button {
  display: inline-block;
  margin-bottom: 3px;
  padding: 7px 10px;
  border: 1px solid var(--bouton);
  border-radius: 3px;
  font-family: var(--font-light);
  font-size: 16px;
  color: var(--bouton);
  background: none;
  cursor: pointer;
}
.button:hover,
.button:focus-visible {
  border-color: var(--bouton);
  color: var(--blanc);
  background: var(--bouton);
  transition: background 0.5s;
}

/* Informations à compléter avant la mise en ligne */
.placeholder { background: #fff59d; color: var(--noir); }

/* --------------------------------------------------------------------------
   Boutons d'accès rapide (à droite, à moitié hors de l'écran)
   -------------------------------------------------------------------------- */
.quick-nav {
  position: fixed;
  top: 200px;
  right: -80px;
  z-index: 5;
}

.quick-nav__button {
  display: block;
  width: 150px;
  height: 58px;
  margin-bottom: 2px;
  padding: 10px 0 0 12px;
  border-bottom: 3px solid var(--blanc);
  font-size: 34px;
  line-height: 1;
  color: var(--texte-page);
  background: url('../img/motif-groovepaper.png');
  box-shadow: 1px 1px 6px #555;
}
.quick-nav__button:hover,
.quick-nav__button:focus-visible { color: var(--bleu); }

.quick-nav__button--lang {
  padding: 15px 0 0 12px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
}
.quick-nav__button--youtube { padding: 8px 0 0 13px; font-size: 38px; }

/* Haut de page : apparaît après 300 px de défilement (fondu de 500 ms) */
.quick-nav__button--top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--swing), visibility 0s 0.5s;
}
.quick-nav__button--top.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--swing), visibility 0s;
}

/* --------------------------------------------------------------------------
   Menu principal : barre fixe en haut (≥ 962 px)
   -------------------------------------------------------------------------- */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  height: var(--nav-height);
  transition: background-color 0.3s;
}
/* Sur le site en ligne, le motif de la barre (servi par typos.zebulon-creation.com) ne se charge
   plus : la barre est transparente sur le dégradé bleu. Rendu identique en haut de page ; une fois
   la page défilée, le motif rayé revient pour que le menu reste lisible sur le contenu blanc. */
.main-nav.is-scrolled { background: url('../img/motif-darth-stripe.png'); }

.main-nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__item {
  position: relative;
  width: 16.666666666%;
  height: var(--nav-height);
  font-family: var(--font-condensed);
  font-size: 16px;
  text-align: center;
  color: var(--blanc);
  background: url('../img/menu-separator.png') no-repeat right;
}
.main-nav__item:last-child { background: none; }
.main-nav__item:hover,
.main-nav__item:focus-within { color: var(--bleu-clair); background-color: var(--survol-menu); }
.main-nav__item:has([aria-current]) { color: var(--bleu-clair); }

/* Le texte commence à 30 px du haut ; les entrées 2 à 5 sont remontées de 7 px */
.main-nav__link {
  display: block;
  height: 100%;
  padding-top: 30px;
}
.main-nav__item:nth-child(n+2):nth-child(-n+5) .main-nav__link { padding-top: 23px; }
.main-nav__link:focus-visible { outline-offset: -4px; }
.main-nav__icon { margin: -4px 4px 0 0; }

/* --------------------------------------------------------------------------
   En-tête mobile (≤ 961 px) — masqué sur grand écran
   -------------------------------------------------------------------------- */
.mobile-header { display: none; }

/* --------------------------------------------------------------------------
   Logo FEDER / Région (en haut à droite)
   -------------------------------------------------------------------------- */
.feder {
  position: absolute;
  top: 110px;
  right: 90px;
  width: 350px;
  height: 122px;
}

/* --------------------------------------------------------------------------
   En-tête bleu : logo, « Études et réalisations depuis 1969 », lauriers
   -------------------------------------------------------------------------- */
.site-header {
  padding: 150px var(--marge) 50px;
  font-family: var(--font-texte);
  font-size: 16px;
  text-align: center;
  color: var(--texte);
}

/* Le logo (580 px) se réduit sur petit écran : à l'origine il imposait une page de 600 px de large */
.site-header__logo img { max-width: 100%; }

.site-header__tagline {
  margin: 0;
  font-family: var(--font-bankgothic);
  font-size: 24px;
  color: var(--blanc);
}
.site-header__since { font-size: 18px; }

.site-header__laurels { margin-top: 30px; vertical-align: baseline; }

/* --------------------------------------------------------------------------
   Zone de contenu : .pageContainer (90 % + 2 × 5 %) et feuille blanche
   -------------------------------------------------------------------------- */
.section {
  display: flow-root;
  padding: 0 var(--marge) 100px;
  font-family: var(--font-texte);
  font-size: 16px;
  color: var(--texte);
}

.sheet {
  display: flex;               /* empile les blocs sans fusion des marges, comme les flottants d'origine */
  flex-direction: column;
  padding: 100px var(--marge);  /* second .pageContainer imbriqué : mêmes pourcentages, même référence */
  background: var(--blanc);
}
/* Portfolio, contact, mentions : .col96.padding2 directement dans la feuille (2 % au lieu du second .pageContainer) */
.sheet--wide { padding: calc(100px + 2%) 2%; }

.page__title {
  margin: 0 0 10px;
  font-family: var(--font-nexa);
  font-size: 35px;
  font-weight: bold;           /* h1.page / h2.page sans graisse définie à l'origine : gras par défaut */
  text-align: center;
  color: var(--bleu);
}
.page__title--tight { margin-bottom: 0; }   /* contact : titre hors du bloc .paddingBottom10 */

/* Bloc d'introduction gris (.pageIntro) */
.page__intro {
  padding: 2%;
  border-radius: 3px;
  font-family: var(--font-light);
  font-size: 16px;
  text-align: left;
  background: var(--gris-fond);
}
.page__intro--spaced { margin-top: 30px; }

.page__subtitle {
  margin: 30px 0 0;            /* h2.page:not(.first) d'origine : aucune page n'utilise .first */
  font-family: var(--font-nexa);
  font-size: 25px;
  font-weight: bold;           /* h1.page / h2.page sans graisse définie à l'origine : gras par défaut */
  color: var(--texte);
}

/* Texte de page (.pageTxtContainer) et image principale à gauche */
.page-text {
  display: flow-root;
  padding: 2%;
  font-family: var(--font-condensed);
  font-size: 16px;
  line-height: 180%;
  text-align: justify;
  color: var(--texte-page);
}

.page-text__picture {
  display: block;
  float: left;
  width: 50%;
  margin: 10px 4% 10px 0;
}
.page-text__picture:hover img { opacity: 0.8; }

/* Vignettes 200 px (lightbox), flottantes à gauche */
.thumbs {
  display: flow-root;
  padding: 1%;
}
.thumbs--flush { padding: 0; }

.thumbs__item {
  float: left;
  width: 200px;
  max-width: 100%;
  margin: 15px 15px 0 0;
  overflow: hidden;
}
.thumbs__item img { display: block; }
.thumbs__item:hover { opacity: 0.8; }

/* Espace laissé par les blocs vides de l'origine : rangée de vignettes vide (.col98.padding1 : 2 × 1 %)
   et bloc de texte vide (.pageTxtContainer : 2 × 2 %) */
.gap-2 { margin-bottom: 2%; }
.gap-4 { margin-bottom: 4%; }
.gap-6 { margin-bottom: 6%; }

/* Colonnes (Nos spécificités : 3 × 31 %, Parc machine / Actions : 2 × 46 %) */
.columns { display: flow-root; }

.columns__col {
  display: flex;               /* pas de fusion des marges, comme les flottants d'origine */
  flex-direction: column;
  float: left;
  margin-top: 30px;
}
.columns--3 .columns__col { width: 31%; margin-left: 1%; margin-right: 1%; }
.columns--2 .columns__col { width: 46%; margin-left: 2%; margin-right: 2%; }
.columns__col .page__subtitle { margin-bottom: 10px; }
.columns__col .page__intro { margin-top: 30px; }

/* Frise (Présentation) */
.timeline__item {
  width: 90%;
  margin-left: 5%;
}

/* Bouton PDF (sans lien à l'origine) et vidéo */
.pdf-button {
  align-self: center;
  margin: 85px 0 3px;          /* marge basse commune des boutons d'origine */
  padding: 20px;
  border: 1px solid var(--texte);
  border-radius: 3px;
  font-family: var(--font-light);
  text-align: center;
  color: var(--texte);
}
/* Ligne du glyphe Filetypes d'origine (40 px) : 4 px de plus que l'icône (mesuré sur les captures du site en ligne) */
.pdf-button__icon { display: block; width: 40px; height: 40px; margin: 4px auto 14px; }

.video {
  margin-top: 100px;
  text-align: center;
}
.video iframe {
  display: block;
  width: 560px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 4px;          /* espace de ligne sous l'iframe (en ligne à l'origine) */
  aspect-ratio: 16 / 9;        /* 560 × 315 comme à l'origine ; en 16/9 aussi sur mobile (bandeau de 150 px à l'origine) */
  border: 0;
}

.not-found { margin: 0; text-align: center; }

/* Portfolio : 4 photos par ligne (23 % + 2 × 1 %) */
.portfolio__count {
  margin: 0 0 30px;
  font-size: 20px;
  text-align: center;
}

.portfolio { display: flow-root; }

.portfolio__item {
  float: left;
  width: 23%;
  margin: 0 1% 20px;
  overflow: hidden;
}
.portfolio__item img { display: block; width: 100%; }
.portfolio__item:hover { opacity: 0.8; }

/* --------------------------------------------------------------------------
   Accueil : blocs services (gauche) et colonne rayée (droite)
   -------------------------------------------------------------------------- */
.home {
  display: flex;
  background: url('../img/motif-darth-stripe.png');
}

.home__main { width: 70%; }
.home__aside { width: 30%; }

.service {
  display: flex;
  padding: 4%;
}
.service--grey { background: var(--gris-fond); }
.service--light { background: var(--gris-fond-clair); }

/* Vignette : 40 % de la colonne, moins la marge droite de 15 px du conteneur d'origine */
.service__picture {
  flex: none;
  width: calc(40% - 15px);
  margin-right: 15px;
  align-self: flex-start;
}
.service__picture img { display: block; width: 100%; }
.service__picture:hover { opacity: 0.8; }

.service__body {
  display: flex;               /* pas de fusion des marges, comme les flottants d'origine */
  flex-direction: column;
  width: 55%;
  margin-left: 5%;
}

.service__title {
  margin: 0;
  font-family: var(--font-bankgothic);
  font-size: 32px;
  font-weight: normal;
  color: var(--texte);
}
.service__title + .separator { color: var(--texte-page); }

.service__text {
  margin-top: 20px;
  line-height: 26px;
  text-align: justify;
}

.service__sectors {
  margin: 20px 0 0;
  font-family: var(--font-condensed);
  font-size: 14px;
  color: var(--bleu);
}

.service__more {
  margin: 50px 0 0;
  padding-right: 50px;
  text-align: right;
}

/* Colonne de droite : 80 % + 2 × 10 % */
.aside-block {
  display: flex;               /* pas de fusion des marges, comme les flottants d'origine */
  flex-direction: column;
  padding: 10%;
  color: var(--texte-colonne);
}

.aside-block__icon {
  display: block;
  width: 26px;
  height: 30px;
  color: var(--texte-page);
}

.aside-block__title {
  margin: 0;
  font-family: var(--font-bankgothic);
  font-size: 22px;
  font-weight: normal;
  color: var(--bleu);
}

.aside-block__content {
  display: flow-root;
  margin-top: 20px;
}

.aside-block__text {
  float: left;
  width: 50%;
  margin-right: 10%;
  line-height: 26px;
}
.aside-block__text--full {
  float: none;
  width: auto;
  margin: 0;
  font-family: var(--font-condensed);
  text-align: justify;
}

.aside-block__picture {
  float: left;
  width: 40%;
}
/* Image en ligne : 4 px d'espace de ligne dessous, comme le conteneur inline-block d'origine */
.aside-block__picture img { vertical-align: baseline; }
.aside-block__picture:hover { opacity: 0.8; }

.aside-block__more { margin: 20px 0 0; align-self: flex-start; }

.aside-feder {
  width: 70%;
  margin: 50px 0 0 15%;
}
.aside-feder p {
  margin: 0 0 16px;            /* marge basse par défaut du paragraphe d'origine */
  padding-top: 15px;
  font-family: var(--font-light);
  line-height: 180%;
  text-align: justify;
  color: var(--blanc);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { display: flow-root; }

.contact__col {
  float: left;
  width: 45%;
  margin: 0 2% 0 3%;
  padding-bottom: 60px;
  font-family: var(--font-gravity);
  font-size: 18px;
}
.contact__col--form { margin: 0 3% 0 2%; }

.contact-info__title {
  margin: 30px 0 0;
  font-family: var(--font-nexa);
  font-size: 25px;
  font-weight: bold;           /* h1.page / h2.page sans graisse définie à l'origine : gras par défaut */
  color: var(--texte);
}

.contact-info__text { margin: 0; }

/* Les lignes à icône sont plus hautes à l'origine (glyphes Glyphicons) :
   vertical-align reproduit cette hauteur de ligne, top remonte l'icône à sa
   place visuelle sans changer la mise en page. */
.contact-info__icon,
.contact-form__intro-icon {
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.icon--envelope.contact-info__icon,
.icon--clock.contact-info__icon { vertical-align: -9px; top: -7px; }
.icon--phone.contact-info__icon { vertical-align: -12px; top: -10px; }
.contact-form__intro-icon { width: 16px; height: 16px; vertical-align: -7px; top: -5px; }

.contact-info__mail { font-size: 20px; color: #7c7c7c; }
.contact-info__mail:hover { text-decoration: underline; }

.contact-info__map {
  display: inline-block;
  width: 100%;
  height: 400px;
  margin-top: 5px;
  border: 0;
}

.contact-form__intro {
  display: flow-root;
  margin: 10px 0 40px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #b5b5b5;
}
.contact-form__intro p { margin: 0; }

.contact-form { display: flow-root; font-family: var(--font-light); font-size: 16px; }

.contact-form__line {
  float: left;
  width: 100%;
  margin-bottom: 15px;
}

.contact-form__label {
  float: left;
  width: 100%;
  padding: 5px 0 5px 2%;
}

.contact-form__input {
  box-sizing: content-box;     /* 96 % + marges intérieures, comme à l'origine */
  float: left;
  width: 96%;
  padding: 5px 2%;
  border: 1px solid var(--gris-champ);
  border-radius: 3px;
  font-family: var(--font-light);
  font-size: 16px;
  color: var(--gris-saisie);
  background: var(--blanc);
}
.contact-form__input--textarea { resize: vertical; }
.contact-form__input:hover,
.contact-form__input:focus {
  border-color: var(--bleu-champ);
  outline: none;
  color: var(--bleu-champ);
  box-shadow: 0 0 8px var(--bleu-champ);
}

.contact-form__send {
  padding: 5px 10px;
  border: 1px solid var(--texte-page);
  border-radius: 3px;
  font-family: var(--font-light);
  font-size: 16px;
  color: var(--texte-page);
  background: var(--blanc);
  cursor: pointer;
}
.contact-form__send:hover,
.contact-form__send:focus-visible { color: var(--blanc); background: var(--texte-page); }
.contact-form__send:disabled { opacity: 0.6; cursor: wait; }

.contact-form__rgpd {
  float: left;
  width: 100%;
  margin: 0 0 15px;
  font-size: 13px;
}
.contact-form__rgpd a { text-decoration: underline; }

.contact-form__status {
  float: left;
  width: 100%;
  margin: 0;
  color: var(--texte-page);
}
.contact-form__status:empty { display: none; }
.contact-form__status[data-state="success"] { color: #2e7d32; }
.contact-form__status[data-state="error"] { color: #c62828; }

/* Champ piège anti-robots : hors écran */
.contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Mentions légales : colonne de 70 % décalée de 15 % (.col70.marginLeft15)
   -------------------------------------------------------------------------- */
.legal {
  width: 70%;
  margin-left: 15%;
  padding-bottom: 100px;
}
.legal p:not(.separator) {
  margin: 0 0 16px;
  font-family: var(--font-light);
  line-height: 180%;
  text-align: justify;
  color: #7c7c7c;
}
.legal a { color: var(--noir); text-decoration: underline; }
.legal a:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Pied de page : photo de l'atelier, logo, adresse
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 0 var(--marge) 150px;
  font-family: var(--font-texte);
  font-size: 16px;
  text-align: center;
  color: var(--blanc);
}

/* 1000 px fixes comme à l'origine (plus large que le contenu entre 1001 et ~1200 px) ;
   centrée sur la page au lieu de déborder à droite */
.site-footer__workshop {
  display: flow-root;          /* la marge de la légende ne fusionne pas (inline-block à l'origine) */
  position: relative;
  left: 50%;
  width: 1000px;
  margin: 0 0 50px;
  transform: translateX(-50%);
}
@media (max-width: 1000px) {
  .site-footer__workshop { left: 0; width: 100%; transform: none; }
}
.site-footer__workshop figcaption {
  margin-bottom: 16px;
  font-family: var(--font-light);
  line-height: 180%;
}

.site-footer__logo { display: block; margin: 0 auto 4px; }

.site-footer__name { margin: 0; font-size: 30px; }

.site-footer__address { margin: 0; }

.site-footer__legal { font-size: 14px; text-decoration: underline; }
.site-footer__legal:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Lightbox — reprend jquery.lightbox-0.5 (fond noir 80 %, cadre blanc 10 px)
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
}
.lightbox[hidden] { display: none; }

.lightbox__box {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  background: var(--blanc);
}

.lightbox__image {
  position: relative;
  padding: 10px;
  line-height: 0;
}

.lightbox__image img {
  max-width: calc(100vw - 60px);
  max-height: calc(100vh - 150px);
}

.lightbox__nav {
  position: absolute;
  inset: 10px;
  display: flex;
  justify-content: space-between;
}
.lightbox__nav[hidden] { display: none; }

.lightbox__nav button {
  width: 49%;
  padding: 0 10px;
  border: 0;
  background: none;
  font-size: 40px;
  color: var(--blanc);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  cursor: pointer;
}
.lightbox__nav button:hover,
.lightbox__nav button:focus-visible { opacity: 1; }
.lightbox__prev { text-align: left; }
.lightbox__next { text-align: right; }

.lightbox__data {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 20px 10px;
  font: 10px/1.4em Verdana, Helvetica, sans-serif;
  color: #666;
}

.lightbox__details { flex: 1; }
.lightbox__caption { display: block; font-weight: bold; }
.lightbox__count { display: block; padding-bottom: 1em; }

.lightbox__close {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Responsive — logo FEDER (points de rupture propres au bloc d'origine)
   -------------------------------------------------------------------------- */
@media (max-width: 1510px) {
  .feder { width: 300px; }
}
@media (max-width: 1420px) {
  .feder { width: 250px; }
}
@media (max-width: 1320px) {
  .feder {
    position: static;
    display: block;
    height: auto;
    margin: 0 auto;
    padding: 125px 0 0;
  }
}

/* --------------------------------------------------------------------------
   Responsive — zones d'origine
   -------------------------------------------------------------------------- */

/* Zone 2 : 1200–1569 px */
@media (min-width: 1200px) and (max-width: 1569px) {
  .main-nav__item { font-size: 14px; }
  .aside-block__title { font-size: 20px; }
  .aside-block { padding: 5% 15% 5% 5%; }   /* .Z2_padding5 : 5 % partout, contenu toujours à 80 % */
  .aside-block__icon { display: none; }
  .aside-block__content { margin-top: 0; }
  .aside-block__text { font-size: 14px; }
}

/* Zones 3 à 5 : .pageContainer à 80 % + 2 × 10 % */
@media (min-width: 600px) and (max-width: 1199px) {
  :root { --marge: 10%; }
}

/* Zone 3 : 1025–1199 px */
@media (min-width: 1025px) and (max-width: 1199px) {
  .main-nav__item { font-size: 16px; }
  .aside-block__icon { display: none; }       /* .Z3_displayNone */
  .aside-block__title { font-size: 18px; }
  .aside-block__text { font-size: 12px; }
}

/* Zone 4 : 962–1024 px — colonnes de l'accueil empilées */
@media (max-width: 1024px) {
  .main-nav__item { font-size: 16px; }
  .home { display: block; }
  .home__main,
  .home__aside { width: auto; }
  .aside-block { padding: 10%; }
  .aside-block__icon { display: block; }
  .aside-block__content { margin-top: 20px; }
  .aside-block__text { font-size: 16px; }
}
@media (min-width: 962px) and (max-width: 1024px) {
  .aside-block__title { font-size: 30px; }   /* h2.welcome.right : 30 px en zone 4 seulement */
}

/* Zones 5 et 6 : ≤ 961 px — en-tête mobile et bouton MENU / FERMER */
@media (max-width: 961px) {
  .main-nav { display: none; }

  /* Sans JavaScript : le menu principal reste affiché, dans le flux */
  .no-js .main-nav {
    display: block;
    position: static;
    height: auto;
  }
  .no-js .main-nav__list { flex-wrap: wrap; }
  .no-js .main-nav__item { width: 50%; }

  .mobile-header {
    display: flow-root;
    position: relative;
    float: left;               /* flottant comme à l'origine : le logo FEDER remonte à côté */
    width: 100%;
    padding: 30px 0;
    background: var(--blanc);
  }

  .mobile-header__logo {
    float: left;
    width: 40%;
    margin-left: 10%;
  }

  .mobile-header__toggle {
    float: left;
    width: 40%;
    margin: 0;
    padding: 10px 10% 10px 0;
    box-sizing: content-box;
    border: 0;
    font-family: var(--font-gravity);
    font-size: 20px;
    line-height: normal;
    text-align: right;
    color: var(--texte-page);
    background: none;
    cursor: pointer;
  }
  .no-js .mobile-header__toggle { display: none; }
  .mobile-header__toggle .icon { margin: -4px 4px 0 0; }
  .mobile-header__toggle[aria-expanded="true"] .mobile-header__label--open,
  .mobile-header__toggle[aria-expanded="false"] .mobile-header__label--close { display: none; }
  .mobile-header__toggle.is-animated .mobile-header__label { animation: menu-fade-in 0.4s var(--swing); }

  /* Panneau blanc sous l'en-tête ; ouverture / fermeture animées par js/main.js (toggle("slow") d'origine) */
  .mobile-menu {
    clear: both;
    width: 100%;
    background: var(--blanc);
  }
  .js .mobile-menu {
    display: none;
  }
  .js .mobile-menu.is-open { display: block; }

  .mobile-menu__list {
    display: flow-root;
    width: 80%;
    margin: 0 0 16px 10%;
    padding: 0;
    list-style: none;
  }

  .mobile-menu__item {
    float: left;
    width: 96%;
    border-bottom: 1px dashed var(--tirets-menu);
  }

  .mobile-menu__link {
    position: relative;
    display: block;
    padding: 20px 2%;
    font-family: var(--font-gravity);
    font-size: 20px;
    color: var(--bleu);
  }
  .mobile-menu__link:hover,
  .mobile-menu__link:focus-visible { background: var(--survol-menu-mobile); }

  /* Puce d'origine absente du serveur : l'espace est conservé */
  .mobile-menu__chip {
    float: left;
    width: 10px;
    height: 14px;
    margin: 7px 15px 0;
  }
  .mobile-menu__icon { position: relative; top: -2px; width: 16px; height: 16px; margin-right: 11px; }
  .mobile-menu__end,
  .mobile-menu__flag {
    position: absolute;
    right: 10px;
    bottom: 19px;
  }
  .mobile-menu__end { width: 28px; height: 28px; }

  .quick-nav { top: 200px; }

  .section--home .home,
  .sheet { margin-top: 0; }
  .section--home { padding-top: 80px; }
  .sheet { margin-top: 50px; padding-top: 20px; }
  .sheet--wide { padding-top: calc(20px + 2%); }

  .home__aside .aside-block { padding: 10%; }

  .page-text__picture { width: 100%; }
  .video iframe { width: 100%; }
  .columns--3 .columns__col,
  .columns--2 .columns__col { width: 100%; margin-left: 0; margin-right: 0; }
  .thumbs__item { width: 48%; margin: 15px 1% 0; }

  .contact__col,
  .contact__col--form { width: 96%; margin: 0 0 0 2%; padding-bottom: 30px; }
  .contact__col--form { padding-bottom: 60px; }   /* seule la colonne gauche passe à 30 px (.Z5_paddingBottom30) */
}

@keyframes menu-fade-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-header__toggle.is-animated .mobile-header__label { animation: none; }
  .quick-nav__button--top { transition: none; }
}

/* Zone 6 : ≤ 599 px — .pageContainer à 90 % + 2 × 5 % */
@media (max-width: 599px) {
  :root { --marge: 5%; }
  .mobile-header__toggle { font-size: 16px; }
  .mobile-menu__link { font-size: 16px; }
  .page__title { font-size: 31px; }
  /* Titres des activités (32 px, mots longs) : réduits avec l'écran pour ne plus déborder (l'origine débordait) */
  .service__title { font-size: min(32px, 4.4vw); }
  .thumbs__item { width: 100%; margin: 15px 0 0; }
  .thumbs__item img { width: 100%; }
  .portfolio__item { width: 100%; margin: 0 0 20px; }
  /* Zone 6 : .marginLeft3 conservé sur la colonne gauche, .Z6_marginRight2 sur les deux */
  .contact__col { margin-left: 3%; }
  .contact__col--form { margin: 0 2% 0 2%; }
}