/* idéesculture — feuille de style commune
 * Synchroniser les valeurs avec PALETTE de shared.jsx.
 */

:root {
  --cream: #f5f0e8;
  --paper: #fffdf8;
  --ink: #1a1a2e;
  --ink-soft: #6b6878;
  --red: #c0392b;
  --blue: #2c3e7a;
  --gold: #d4a843;

  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --container-max: 1280px;
  --container-pad: 56px;
  --nav-height: 72px;

  /* Padding horizontal des sections « hero » des pages, utilisé via
     `padding: '88px var(--hero-pad-h) Ypx'` dans les styles inline JSX.
     Réduit en mobile via la media query plus bas (chantier responsive). */
  --hero-pad-h: 56px;

  /* Compteurs V1Stats (home) : tailles desktop, écrasées en mobile. */
  --v1-stats-num: 44px;     /* chiffre normal */
  --v1-stats-big: 36px;     /* chiffre « big » (>= 10000, format compact) */
  --v1-stats-label: 10.5px; /* libellé sous le chiffre */
  --v1-stats-gap: 32px;     /* gap horizontal entre items */
}

@media (max-width: 768px) {
  :root {
    --hero-pad-h: 36px;
    --container-pad: 36px;
    /* Compteurs : tous les chiffres à la même taille en mobile (le « big »
       du desktop est aligné sur les autres pour éviter qu'il sorte plus
       petit visuellement sur petit écran). Label à 8.5px. Gap resserré. */
    --v1-stats-num: 28px;
    --v1-stats-big: 28px;
    --v1-stats-label: 8.5px;
    --v1-stats-gap: 12px;
  }
  /* Petit décalage à gauche du chiffre, pour compenser le centrage visuel
     dû au separator vertical des items voisins. */
  .v1-stats__num {
    padding-left: 4px;
  }

  /* Section « Notre approche » : la grille 2-col passe en 1 col, le bloc
     texte (premier dans le DOM) reste en haut, les puces de valeurs (second)
     passent en dessous. Override de l'inline `gridTemplateColumns: '1fr 1fr'`. */
  .v1-approche__grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Section « Nos prestations » : 3 col → 1 col, les cartes s'empilent. */
  .v1-prestations__grid {
    grid-template-columns: 1fr !important;
  }

  /* CTA final : retire le flex pour que le titre et le bouton s'empilent
     verticalement (display: block bat l'inline `display: flex`). */
  .v1-cta-final__inner {
    display: block !important;
  }
  .v1-cta-final__btn {
    margin-top: 24px;
  }

  /* Section ancrage : on resserre le head (numéro + titre + filet) sous le
     contenu pour ne pas créer d'espace mort en mobile. */
  .v1-ancrage__head {
    margin-bottom: 10px !important;
  }

  /* Section « Références » : en mobile on bascule du layout horizontal
     (titre à gauche, liste 4 col à droite) vers un layout vertical
     (titre dessus, liste 2 col dessous). Le inline `display: flex` est
     écrasé par `display: block`. Le titre passe à 13px avec margin-bottom
     pour respirer. La grille 4 col → 2 col. */
  .v1-refs__inner {
    display: block !important;
  }
  .v1-refs__title {
    font-size: 13px !important;
    letter-spacing: 0.2em !important;
    margin: 0 0 28px !important;
  }
  .v1-refs__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ─── PAGE MÉTIER (page-metier.jsx) ─── */

  /* Hero 2-col → 1-col, le bloc visuel passe sous le texte. */
  .m2-hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .m2-hero__visuals {
    height: 320px !important;  /* plus compact que 460 desktop */
  }
  /* Mot fantôme « Métier » en arrière-plan : taille réduite pour ne pas
     pousser hors écran à 360px. */
  .m2-hero__bg-word-text {
    font-size: 80px !important;
  }

  /* Intro : grille 1fr 1.2fr → 1 col, le couple kicker+titre reste au-dessus
     du paragraphe principal. */
  .m2-intro__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Blocs détaillés (4 lignes alternées photo/texte). En mobile : 1 col,
     photo systématiquement au-dessus du texte (on neutralise le `order`
     inline qui gère l'alternance desktop). */
  .m2-metier-block {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px 0 !important;
  }
  .m2-metier-block__visual {
    order: 1 !important;
    height: 280px !important;
  }
  .m2-metier-block__copy {
    order: 2 !important;
  }
  /* Le grand chiffre 96px du copy fait du bien en desktop, un peu lourd
     sur petit écran. */
  .m2-metier-block__num {
    font-size: 64px !important;
  }
  .m2-metier-block__title {
    font-size: 26px !important;
  }

  /* Valeurs : 3 cards en col → 1 col. */
  .m2-valeurs__grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    margin-bottom: 56px !important;
  }

  /* Méthodologie : 5 items en grille → 2 col mobile (1 col serait trop
     long verticalement avec 5 cards). Le 3e item (« Open source ») garde
     son fond cream — pas de souci visuel à 2 col. */
  .m2-methodo__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Sur la dernière ligne, l'item solitaire (5e) prend toute la largeur. */
  .m2-methodo__item:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* Photoband : 4 colonnes (1 stat + 3 photos) → 2 col, le carré stat reste
     en première position et prend toute la largeur en haut. */
  .m2-photoband__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    height: auto !important;
    grid-auto-rows: 160px;
  }
  .m2-photoband__stat {
    grid-column: 1 / -1;
    min-height: 140px;
  }

  /* CTA final : retire le flex (titre + bouton s'empilent), même règle que
     la home. Variable du sélecteur métier en plus de l'home. */
  .m2-cta-final__inner {
    display: block !important;
  }
  .m2-cta-final__btn {
    margin-top: 24px;
  }

  /* Footer 2-col flex → empilé. */
  .m2-footer {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* ─── PAGE COLLECTIVEACCESS (page-collectiveaccess.jsx) ─── */

  /* H1 du hero : 78px desktop → 68px mobile. overflow-wrap pour éviter qu'un
     mot très long (« Collective ») crée un débordement horizontal. */
  .ca-hero__title {
    font-size: 68px !important;
    overflow-wrap: break-word;
  }

  /* Hero : grille 1.05fr/1fr → 1 col, composition geom raccourcie. */
  .ca-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 36px !important;
  }
  .ca-hero__compo {
    height: 240px !important;
  }

  /* Duo Providence + Pawtucket : 2 col → 1 col. */
  .ca-duo__grid {
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }

  /* Features : grille tabs (320px fixe) + panel (1fr) → empilé en col unique.
     Le rail de tabs s'étale en horizontal en bordure haute, le panel suit. */
  .ca-features__grid {
    grid-template-columns: 1fr !important;
  }

  /* Interop : intro 2-col + grille 3-col → 1 col, sources en 1 col aussi. */
  .ca-interop__intro {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 36px !important;
  }
  .ca-interop__sources {
    grid-template-columns: 1fr !important;
  }

  /* Plugins : intro 2-col + grille 3-col → 1 col chacun. */
  .ca-plugins__intro {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 36px !important;
  }
  .ca-plugins__grid {
    grid-template-columns: 1fr !important;
  }

  /* H1 du hero Références : 88 desktop → 46 mobile (aligné sur les autres pages). */
  .ref-hero__title {
    font-size: 46px !important;
    overflow-wrap: break-word;
  }
  /* Le bloc qui suit (paragraphe + stats) passe d'une grille 2-col à une
     pile flex column. */
  .ref-hero__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* ─── PAGE FORMATION (page-formation.jsx) ─── */

  .f-hero__title {
    font-size: 38px !important;
    overflow-wrap: break-word;
  }
  /* Hero variants split + prominent : 2 col → 1 col, le bloc droit (programme
     ou jalons) passe sous le titre. */
  .f-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* 4 publics : grille 2 col → 1 col, les cartes s'empilent. */
  .f-publics__grid {
    grid-template-columns: 1fr !important;
  }
  /* Parcours : rail vertical 120px → 36px (gain de place pour le contenu). */
  .f-parcours__grid {
    grid-template-columns: 36px 1fr !important;
  }

  /* « Cinq modules conçus pour s'enchaîner » : la ligne 5-col rigide
     (90px 1fr 220px 140px 40px) déborde violemment. On la repense en
     2 col : code/+ à gauche, contenu (titre + résumé + mode + durée)
     empilé à droite. Plus lisible, tient dans 360px. */
  .f-prog-row__btn {
    grid-template-columns: 60px 1fr 28px !important;
    gap: 12px !important;
    padding: 20px 16px !important;
    align-items: start !important;
  }
  .f-prog-row__title {
    font-size: 18px !important;
  }
  .f-prog-row__mode,
  .f-prog-row__duration {
    grid-column: 2 !important;
    font-size: 12px !important;
    margin-top: 6px;
    color: var(--ink-soft);
  }
  .f-prog-row__duration {
    margin-top: 2px;
  }
  .f-prog-row__plus {
    align-self: start;
  }

  /* Détail déplié : 2 col → 1 col partout, padding réduit. */
  .f-prog-detail__split,
  .f-prog-detail__obj,
  .f-prog-detail__jours {
    grid-template-columns: 1fr !important;
  }
  .f-prog-detail__split > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(26,26,46,.12);
  }
  .f-prog-detail__split > div:last-child {
    border-bottom: 0;
  }
  .f-prog-detail__jours > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(26,26,46,.12);
  }
  .f-prog-detail__jours > div:last-child {
    border-bottom: 0;
  }

  /* « Modalités, tarifs et certification » : head en flex baseline déborde
     (filet + sub à droite). On passe en column, on masque le filet et le
     « Cadre & devis ». La grille 3-col devient 1 col, les bordures verticales
     deviennent horizontales, padding 36 → 20. L'encart rouge Qualiopi a
     déjà overflow:hidden inline — il sera contenu dans la pleine largeur. */
  .f-modalites__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
  }
  .f-modalites__title {
    font-size: 32px !important;
  }
  .f-modalites__rule,
  .f-modalites__sub {
    display: none !important;
  }
  .f-modalites__grid {
    grid-template-columns: 1fr !important;
  }
  .f-modalites__cell {
    padding: 24px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .f-modalites__cell:last-child {
    border-bottom: 0;
  }
  /* Encart Qualiopi prominent : on réduit le grand titre 36px qui pouvait
     amener « Qualiopi — » à dépasser dans une cell étroite. */
  .f-modalites__cell--qualiopi h3 {
    font-size: 28px !important;
  }

  /* « Un service archives, trois sessions, SIX mois » : section masquée
     intégralement en mobile (cas type illustratif, pas indispensable). */
  .f-cas-type {
    display: none !important;
  }

  /* ─── PAGE CONTACT (page-contact.jsx) ─── */

  /* H1 hero : 80 → 38px (cohérent avec les autres pages). */
  .ct-hero__title {
    font-size: 38px !important;
    overflow-wrap: break-word;
  }
  /* L'intro après le h1 : grand paragraphe (gauche desktop) au-dessus,
     mention small (droite desktop) en dessous. */
  .ct-hero__intro {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ct-hero__intro-main {
    font-size: 22px !important;
  }
  /* Cartes coordonnées (3 cartes 01/02/03) : grille 3-col → 1 col, les
     bordures verticales deviennent horizontales, padding réajusté. */
  .ct-coords__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ct-coords__card {
    padding: 0 0 32px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(245,240,232,.18) !important;
  }
  .ct-coords__card:last-child {
    border-bottom: 0 !important;
  }
  /* Section « Nous localiser » : on masque uniquement la carte Leaflet
     (lourde et redondante avec le lien Google Maps de la carte 01).
     Le bloc texte « Une seule adresse, aucune succursale » + grille TGV
     reste visible et prend toute la largeur. */
  .ct-map__leaflet,
  .ct-map .leaflet-container {
    display: none !important;
  }
  .ct-map__inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 56px var(--hero-pad-h, 56px) !important;
  }

  /* Overlay « Notre quartier » sur la photo Le Mans : décollage du bord. */
  .ct-photo__overlay {
    left: 36px !important;
  }

  /* ─── PAGES PRESTATIONS — H1 hero générique ─── */
  /* Toutes les h1 hero des pages migration/hebergement/musees/devel/apps font
     entre 84 et 96px en desktop. En mobile, on ramène à 46px (cohérent avec
     formation, references, contact, collectiveaccess). */
  .prest-hero__title {
    font-size: 46px !important;
    overflow-wrap: break-word;
    line-height: 1.05 !important;
  }
  /* Force aussi tout span/em imbriqué dans le h1 à hériter (sinon des spans
     avec leur propre fontSize inline restent énormes). */
  .prest-hero__title * {
    font-size: inherit !important;
  }

  /* H2 de section (>= 40px desktop) : ramené à 28px en mobile, et tous les
     spans imbriqués héritent (sinon « Quatre réponses. », « ce que vous
     n'avez pas trouvé. » etc. — qui ont leur propre fontSize inline 56-72 —
     restent énormes). */
  .prest-section-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
  }
  .prest-section-title * {
    font-size: inherit !important;
  }

  /* CollectiveAccess hero : on aligne sur le standard 46px (le 68px précédent
     restait juste pour « Collective » à la limite du débordement). */
  .ca-hero__title {
    font-size: 46px !important;
  }

  /* ─── PAGES MIGRATION (page-migration-*.jsx) ─── */

  /* Tableau « Onze raisons concrètes » :
     - 4 col → 3 col (on retire la 1ère colonne icône ★/✓)
     - Padding cellules réduit, font-size compactée
     - Accent doré neutralisé (peu lisible sur petit écran), zebra simple
     Chaque enfant direct du wrapper est une rangée (header + N data rows). */
  .fm-compare__table > div {
    /* minmax(0, 1fr) au lieu de 1fr : empêche les colonnes avec un contenu
       long (FROM, TO) d'écraser les colonnes courtes (AXE). Sans ça, 1fr =
       minmax(auto, 1fr) et chaque col s'agrandit selon son contenu min. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    background: transparent !important;
  }
  .fm-compare__table > div:nth-child(odd) {
    background: rgba(26,26,46,.04) !important;
  }
  /* Cellule icône ★/✓ → masquée */
  .fm-compare__table > div > div:first-child {
    display: none !important;
  }
  /* Header (1ère rangée, bg ink) */
  .fm-compare__table > div:first-child {
    background: var(--ink) !important;
  }
  .fm-compare__table > div:first-child > div {
    padding: 10px 6px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.14em !important;
  }
  /* Cellules data */
  .fm-compare__table > div:not(:first-child) > div {
    padding: 12px 8px !important;
    font-size: 12px !important;
  }
  /* Cellule axe (titre de ligne) : 14px et un poil plus grasse pour la repérer.
     Override l'inline `fontSize: 16` du <span> imbriqué. */
  .fm-compare__table > div:not(:first-child) > div:nth-child(2),
  .fm-compare__table > div:not(:first-child) > div:nth-child(2) span {
    font-size: 14px !important;
    font-weight: 500;
  }
  /* Note de bas de tableau : on cache la mise en avant ★ qui n'a plus de sens
     sans la colonne icône. La phrase reste mais perd son préfixe explicatif —
     c'est lisible en l'état. */

  /* « Quatre filets de sécurité » (FMGuaranties) : 2 col → 1 col. */
  .fm-guaranties__grid {
    grid-template-columns: 1fr !important;
  }
  .fm-guaranties__grid > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ink) !important;
  }
  .fm-guaranties__grid > div:last-child {
    border-bottom: 0 !important;
  }

  /* Testimony « Notre base FileMaker comptait… » : 24 → 20px en mobile. */
  .fm-testimony__quote {
    font-size: 20px !important;
  }

  /* CTA « Envoyez-nous un export » : titre puis bouton dessous. */
  .fm-cta__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    padding: 32px 24px !important;
  }

  /* « Nous avons aussi une déclinaison pour vous » (FMOtherSources) :
     - Grille 3 col → 1 col
     - On masque les éléments non essentiels (kind WEB/DESKTOP, flèche →,
       tag italique dans h4, description). On ne garde que le NOM de la
       source comme une simple liste cliquable. */
  .fm-other-sources__grid {
    grid-template-columns: 1fr !important;
  }
  .fm-other-sources__grid a {
    padding: 16px 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(26,26,46,.12) !important;
  }
  .fm-other-sources__grid a:last-child {
    border-bottom: 0 !important;
  }
  /* Le 1er <div> (kind + flèche), le <p> (desc) et le <span> italique
     dans le h4 (tag) : tous masqués. */
  .fm-other-sources__grid a > div,
  .fm-other-sources__grid a > p,
  .fm-other-sources__grid a h4 span {
    display: none !important;
  }
  .fm-other-sources__grid a h4 {
    margin: 0 !important;
    font-size: 17px !important;
  }

  /* CTA « Démarrer ensemble » : bloc inline flex (texte gauche, boutons
     droite) → vertical (texte puis boutons en dessous). Padding réduit. */
  .f-cta__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    padding: 32px 24px !important;
  }
  .f-cta__buttons {
    flex-shrink: 1 !important;
  }

  /* « Continuer la visite » (MetiersOutro) : tête en column, filet caché.
     La grille 4-col devient un scroll horizontal au doigt avec cards de
     largeur fixe. Marges réduites. */
  .metiers-outro__inner {
    padding: 36px var(--hero-pad-h, 56px) !important;
  }
  .metiers-outro__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
  .metiers-outro__title {
    font-size: 24px !important;
  }
  .metiers-outro__rule {
    display: none !important;
  }
  .metiers-outro__grid {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .metiers-outro__item {
    flex: 0 0 70%;
    border-right: 1px solid rgba(26,26,46,.12) !important;
    scroll-snap-align: start;
  }

  /* Sous-nav prestations : on cache le titre « NOS PRESTATIONS » (redondant
     avec le label de la page courante) et on permet au reste de scroller
     horizontalement si les 6 onglets ne tiennent pas dans la viewport. */
  .prestations-subnav__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .prestations-subnav__kicker {
    display: none !important;
  }
  .prestations-subnav__list {
    flex-wrap: nowrap;
  }
  .prestations-subnav__item {
    flex: 0 0 auto;
  }
  .prestations-subnav__link {
    white-space: nowrap;
  }

  /* Frise chronologique : passe en vertical, axe à gauche, dots alignés
     dessus, contenu décalé à droite. Le inline `top: 36px; left: 0; right: 0;
     height: 2px` est intégralement remappé. */
  .ca-timeline__grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .ca-timeline__axis {
    top: 0 !important;
    bottom: 0;
    left: 6px !important;
    right: auto !important;
    width: 2px;
    height: auto !important;
  }
  .ca-timeline__event {
    padding: 0 0 0 36px !important;
    position: relative;
  }
  .ca-timeline__year {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  .ca-timeline__dot {
    position: absolute !important;
    left: 0 !important;
    top: 38px !important;
  }
  .ca-timeline__copy {
    margin-top: 8px !important;
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  /* Garde-fou : aucun élément ne doit pouvoir provoquer un scroll horizontal
     du viewport. Si un titre / mot fantôme dépasse en mobile, il est tronqué
     plutôt que de créer une barre de scroll horizontale parasite. */
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

a { color: inherit; }
img { max-width: 100%; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ─────────── NAV PRINCIPALE ─────────── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.site-nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  /* Typo « idéesculture » alignée sur la signature de la page Contact :
     Newsreader serif, regular, « idées » en italique rouge. */
  font-family: "Newsreader", "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__brand img {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
}
.site-nav__brand .accent {
  color: var(--red);
  font-style: italic;
}

.site-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 32px;
}

.site-nav__item { position: static; }

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 0;
  cursor: pointer;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--red);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.site-nav__item:hover .site-nav__link::after,
.site-nav__link.is-active::after {
  width: 100%;
}

.site-nav__caret {
  font-size: 9px;
  display: inline-block;
  transition: transform 0.25s;
}
.site-nav__item.has-mega:hover .site-nav__caret {
  transform: translateY(1px);
}

/* Bandeau plein-largeur sous la nav, révélé au survol de "Nos prestations" */
.site-nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s;
  z-index: 60;
}
.site-nav__item.has-mega:hover .site-nav__mega,
.site-nav__item.has-mega:focus-within .site-nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__mega-inner {
  display: flex;
  align-items: stretch;
}

.site-nav__mega-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 14px 0;
  margin-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  text-transform: uppercase;
}
.site-nav__mega-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  display: inline-block;
}

.site-nav__mega-list {
  display: flex;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__mega-item {
  flex: 1;
}

.site-nav__mega-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px 16px;
  text-decoration: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s, color 0.2s;
}
.site-nav__mega-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--cream);
}

.site-nav__mega-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.18em;
}
.site-nav__mega-label {
  font-family: var(--serif);
  font-size: 14px;
}

/* ─────────── NAV MOBILE : HAMBURGER + DRAWER ─────────── */

/* Hamburger : caché par défaut (desktop), affiché sous 900px. */
.site-nav__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.site-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), opacity .2s;
}
.site-nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.site-nav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer mobile : caché par défaut, affiché sous 900px. Commence sous la nav
   ET sa border-bottom (2px) pour que la barre noire reste visible quand le
   menu est ouvert. Le brand « idéesculture » reste visible en permanence,
   et le hamburger animé en croix joue le rôle de bouton de fermeture. */
.site-nav__drawer {
  display: none;
  position: fixed;
  top: calc(var(--nav-height) + 2px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: var(--cream);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.site-nav__drawer.is-open {
  transform: translateX(0);
}

.site-nav__drawer-list {
  list-style: none;
  margin: 0;
  /* Padding-top réduit : le drawer commençant sous la nav, on n'a plus besoin
     de laisser de la place au bouton × et à la respiration sous la barre. */
  padding: 32px 28px 56px;
}

.site-nav__drawer-item {
  border-bottom: 1px solid rgba(26,26,46,.1);
  padding: 22px 0;
}
.site-nav__drawer-item:last-child {
  border-bottom: 0;
}

.site-nav__drawer-item > a {
  display: block;
  font-family: "Newsreader", "Libre Baskerville", Georgia, serif;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 0;
}
.site-nav__drawer-item > a.is-active {
  color: var(--red);
  font-style: italic;
}

.site-nav__drawer-section {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 4px 0 8px;
}

.site-nav__drawer-sub {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.site-nav__drawer-sub li {
  border-top: 1px solid rgba(26,26,46,.06);
}
.site-nav__drawer-sub a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--ink);
}
.site-nav__drawer-sub .num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  flex-shrink: 0;
  min-width: 18px;
}
.site-nav__drawer-sub .lbl {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.005em;
}

/* Bouton « FERMER ✕ » en bas du drawer, complément du × en haut.
   Pleine largeur, présence claire, accessible aux pouces. */
.site-nav__drawer-close-bottom {
  display: block;
  margin: 24px 28px 40px;
  padding: 18px 0;
  width: calc(100% - 56px);
  background: var(--ink);
  color: var(--cream);
  border: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Bascule à 900px : on cache le menu desktop, on affiche hamburger + drawer. */
@media (max-width: 900px) {
  .site-nav__menu { display: none; }
  .site-nav__hamburger { display: flex; }
  .site-nav__drawer { display: block; }
}

/* ─────────── BANDEAU LOGOS RÉFÉRENCES ─────────── */
/* Défilement horizontal infini ; track dupliquée pour boucler sans saut.
 * - filter: grayscale par défaut, restauré au hover d'un logo
 * - mask gradient sur les bords pour fondu progressif
 * - pause au hover du conteneur
 * - logos individuels : scale + couleur au hover */

.refs-logos {
  background: var(--paper);
  border-top: 1px solid rgba(26, 26, 46, 0.12);
  border-bottom: 1px solid rgba(26, 26, 46, 0.12);
  padding: 32px 0 40px;
  overflow: hidden;
  position: relative;
}

.refs-logos__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.refs-logos__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
}
.refs-logos__count {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.refs-logos__viewport {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

.refs-logos__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 16px 0;
  /* Le déplacement est piloté en JS (cran-par-cran avec pause). */
  will-change: transform;
}

.refs-logos__item {
  flex-shrink: 0;
  /* Carré uniforme : les logos horizontaux et verticaux s'inscrivent dans
     la même empreinte visuelle, contraints en object-fit: contain. */
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
  cursor: default;
}
.refs-logos__item:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.08);
}
.refs-logos__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none; /* le hover passe à <li> */
}

@media (prefers-reduced-motion: reduce) {
  .refs-logos__track { transform: none; }
}

/* ─────────── PAGE RÉFÉRENCES — CARTES CATALOGUES ─────────── */
/* Hauteur du hero (capture ou faux site) dans CatalogMockup.
   Au-dessus du seuil où le container atteint sa largeur max (1320 + paddings),
   on rétrécit légèrement pour un crop plus harmonieux des captures 1368×912. */
.cat-mockup__hero {
  height: 220px;
}
@media (min-width: 1320px) {
  .cat-mockup__hero { height: 194px; }
}

/* ─────────── SOUS-NAV « NOS PRESTATIONS » ─────────── */

.prestations-subnav {
  position: sticky;
  top: var(--nav-height);
  z-index: 40;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.prestations-subnav__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.prestations-subnav__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 14px 0;
  margin-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}
.prestations-subnav__kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  display: inline-block;
}
.prestations-subnav__list {
  display: flex;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.prestations-subnav__item { flex: 1; }
.prestations-subnav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px 16px;
  text-decoration: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s, color 0.2s;
}
.prestations-subnav__link:hover {
  background: rgba(255, 255, 255, 0.05);
}
.prestations-subnav__link.is-active {
  background: var(--cream);
  color: var(--ink);
}
.prestations-subnav__link.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
}
.prestations-subnav__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.prestations-subnav__link.is-active .prestations-subnav__num {
  color: var(--red);
}
.prestations-subnav__label {
  font-family: var(--serif);
  font-size: 14px;
}

/* ─────────── BLOC CTA PARTENAIRES ─────────── */

.cta-partenaires {
  background: var(--gold);
  color: var(--ink);
  border-top: 1px solid rgba(26, 26, 46, 0.18);
  padding: 64px 0 72px;
}
.cta-partenaires__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.cta-partenaires__col {
  display: flex;
  flex-direction: column;
}
.cta-partenaires__col--copy {
  border-left: 1px solid rgba(26, 26, 46, 0.18);
  padding-left: 56px;
}
.cta-partenaires__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  color: var(--ink);
}
.cta-partenaires__title em { font-style: italic; }
.cta-partenaires__sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(26, 26, 46, 0.75);
  margin: 0 0 28px;
  max-width: 460px;
}
.cta-partenaires__btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-block;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  transition: background 0.25s, color 0.25s;
}
.cta-partenaires__btn:hover {
  background: var(--cream);
  color: var(--ink);
}

@media (max-width: 900px) {
  .cta-partenaires__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cta-partenaires__col--copy {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(26, 26, 46, 0.18);
    padding-top: 32px;
  }
}

/* ─────────── FOOTER ─────────── */

.site-footer {
  border-top: 1px solid rgba(26, 26, 46, 0.12);
  background: var(--cream);
  padding: 32px 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer .accent { color: var(--red); }

/* Responsive : sous 1400 px, les kickers « NOS PRESTATIONS » prennent trop
   de place horizontalement et poussent les 6 onglets hors champ. On les
   masque, dans la sous-nav prestations comme dans la mega-nav principale. */
@media (max-width: 1400px) {
  .prestations-subnav__kicker,
  .site-nav__mega-kicker { display: none !important; }
}