/* =============================================================================
   ARTAWEB — IMPRESSION
   =============================================================================

   POURQUOI CETTE FEUILLE EXISTE. Le site n'en avait aucune : imprimer une page
   ne rendait qu'un bout de la première, sur une seule feuille. Trois causes
   indépendantes, chacune suffisante à elle seule, toutes mesurées le 2026-09-18
   sur l'accueil de la vitrine (document de 7298 px de haut) :

   1. LES BLOCS D'APPARITION RESTENT INVISIBLES. `.reveal` part à `opacity: 0` et
      attend que js/scroll.js lui pose `is-visible` quand il entre dans l'écran.
      À l'impression, l'observateur n'a jamais rien observé du bas de page : sur
      les neuf blocs de l'accueil, HUIT étaient encore à zéro. Ce qui sortait de
      l'imprimante était donc, littéralement, la première section et du blanc.

   2. CHAQUE SECTION PORTE `overflow: hidden`. Un élément qui coupe ce qui
      déborde ne peut pas se couper en deux entre deux feuilles : le navigateur
      le pose sur une page et rogne le reste. Deux sections de l'accueil font
      1492 px et 1447 px — largement plus qu'une feuille A4.

   3. LES CORPS DE SECTION PORTENT UN `transform`. Même règle : un élément
      transformé ne se coupe pas entre deux pages.

   ⚠️  NE PAS RÉSOUDRE CELA DANS LES FEUILLES D'ÉCRAN. `overflow: hidden` sur
   une section protège le site d'un débordement horizontal, et le `transform` de
   `.reveal` EST l'animation. Ce sont de bonnes règles ; elles n'ont simplement
   rien à faire sur du papier. C'est tout l'objet d'une feuille `media="print"` :
   ne rien retirer à l'écran pour réparer l'imprimante.

   CE QU'ON IMPRIME, ET CE QU'ON LAISSE. Sur le papier, tout ce qui sert à
   NAVIGUER n'est plus qu'un pavé d'encre : menu, bouton de menu, bascule
   sombre/clair, retour en haut, bandeau cookies, flèches de carrousel. On les
   retire. Le contenu, le fil d'Ariane et le pied de page restent — c'est là que
   vivent l'adresse et le téléphone, et c'est souvent pour eux qu'on imprime.

   ⚠️  LES FONDS NE S'IMPRIMENT PAS, PAR DÉFAUT ET DANS TOUS LES NAVIGATEURS.
   C'est un choix du navigateur, pas du site, et on ne le force pas : encrer une
   page entière pour un dégradé n'est pas un service. Mais cela a une
   conséquence qu'il FAUT traiter : le texte blanc d'un slider ou d'une section
   sombre se retrouverait blanc sur blanc, donc absent. On lui rend une encre
   sombre partout où le fond ne viendra pas.
   ============================================================================= */

@page {
    margin: 1.5cm;
}

/* ---------------------------------------------------------------------------
   1. CE QUI EMPÊCHAIT LA PAGE DE SE COUPER
   --------------------------------------------------------------------------- */

/* L'animation d'apparition : le contenu est là, il n'attend plus personne.
   Même correctif que le <noscript> de l'en-tête, pour la même raison — un
   contenu qui dépend d'un script pour devenir visible ne doit jamais être perdu
   quand le script ne s'exécute pas. */
.reveal,
.reveal-image,
.section__generic-body {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* Rien ne coupe, tout se répartit sur les feuilles. `!important` est nécessaire :
   ces règles-ci doivent l'emporter sur des déclarations d'égale spécificité
   écrites plus haut dans la cascade, et sur les hauteurs posées en ligne. */
.section,
.section-row,
.section__generic-body,
.block-slider,
.carousel,
.carousel__track,
.page-aside,
#main-content {
    overflow: visible !important;
    max-height: none !important;
}

/* Les hauteurs minimales sont des choix d'ÉCRAN : un héro de 640 px occupe les
   deux tiers d'une feuille pour trois lignes de texte. */
.section,
.block-slider__track,
.block-slider__slide {
    min-height: 0 !important;
}

/* ---------------------------------------------------------------------------
   2. L'HABILLAGE QUI N'A PAS DE SENS SUR LE PAPIER
   --------------------------------------------------------------------------- */

.skip-link,
.main-nav,
.nav-overlay,
.menu-toggle,
.dark-toggle,
.back-to-top,
.cookie-notice,
.carousel__controls,
.block-video__facade > button,
.block-embed__facade > button,
.block-map__facade > button,
.blog-pagination,
.events-cal-nav {
    display: none !important;
}

/* L'en-tête reste, mais couché dans le flux : fixé, il se poserait sur la
   première feuille et masquerait le haut du contenu. On garde le logo — une
   page imprimée doit dire de quel site elle vient. */
.site-header {
    position: static !important;
    box-shadow: none !important;
    background: none !important;
    color: #000 !important;
}
.site-header__inner { padding-block: 0 !important; }

/* ⚠️  LE LOGO CLAIR, TOUJOURS — c'est-à-dire celui à l'encre sombre.
   Un site qui ouvre sur un héro photo pose son logo BLANC dans l'en-tête, qui
   flotte alors au-dessus de la photo. Sur du papier blanc, ce logo-là est
   invisible : mesuré sur la vitrine, il n'en restait que la syllabe orange, et
   la page imprimée s'ouvrait sur un nom à moitié effacé.
   Les deux variantes n'existent que si le site en fournit deux ; sinon ces deux
   règles ne visent rien, et l'unique logo reste. */
.site-header__logo-img--light-only { display: block !important; }
.site-header__logo-img--dark-only  { display: none !important; }

/* Le décalage que la mise en page réserve à l'en-tête fixe n'a plus d'objet. */
#main-content,
#main-content > .section:first-child,
.page-aside__side {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
   3. L'ENCRE — parce que les fonds ne viennent pas
   --------------------------------------------------------------------------- */

body {
    background: #fff !important;
    color: #000 !important;
}

/* Tout ce qui écrit en clair sur un fond qui ne s'imprimera pas. Le slider et
   les sections sombres fixent `#fff` en dur, précisément parce que leur texte
   vit sur une photo : sans cette règle, ils sortiraient blancs sur blanc. */
.section--dark,
.section--bg,
.block-slider,
.block-slider__title,
.block-slider__text,
.section--dark :is(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, div) {
    color: #000 !important;
    text-shadow: none !important;
}

/* ON RETIRE LES PHOTOS DE FOND NOUS-MÊMES, et ce n'est pas redondant avec le
   refus du navigateur. « Imprimer les arrière-plans » est une case que le
   lecteur peut cocher : cochée, le titre noir qu'on vient d'écrire se poserait
   sur une photo sombre, et deviendrait illisible — l'inverse exact du défaut
   qu'on répare. Les retirer ici rend le résultat le même dans les deux cas.
   Et une photo pleine page coûte plus d'encre qu'elle n'apporte au lecteur. */
.block-slider,
.section--bg {
    background-image: none !important;
    background-color: transparent !important;
}

/* ⚠️  ET LA PHOTO DU SLIDER AVEC — elle a cessé d'être un fond le 2026-09-18.
   Une <img> s'imprime, elle, sans rien demander à personne : la retirer des
   fonds ne suffisait plus. Le raisonnement ne change pas — une photo pleine
   page coûte plus d'encre qu'elle n'apporte, et le titre qu'on vient de passer
   en noir se poserait dessus. */
.block-slider__photo { display: none !important; }

/* ⚠️  ET LE DÉGRADÉ D'UNE SECTION SOMBRE AVEC — il n'est pas une photo, mais il
   est tout aussi noir. Lui rendre une encre sombre sans lui retirer son fond
   donnerait du noir sur du noir chez qui imprime les arrière-plans : le pire des
   deux mondes, et une bande d'encre pleine page pour l'obtenir.
   `background` et non `background-image` : c'est un dégradé, donc une image de
   fond, mais la couleur qui l'accompagne doit partir dans le même geste. */
.section--dark,
.section--dark.section--bg::before {
    background: none !important;
}

/* LES CALQUES DÉCORATIFS, TOUS. Voile du slider, voile de section, halo des
   sections foncées, projecteur du héro vidéo : quatre éléments qui n'existent
   que pour poser une couleur par-dessus une image. Sans image, ils ne sont plus
   qu'une teinte sur du blanc — repérée à l'écran d'essai sous la forme d'un
   voile pêche en haut de page, que rien n'expliquait tant qu'on cherchait un
   `background` : celui-là vivait dans un `::after`. */
.block-slider__overlay,
.section--bg::before,
.section--dark::after,
.hero__spotlight {
    display: none !important;
}

/* Un bouton est une cible à cliquer ; sur le papier, c'est une étiquette. On lui
   garde sa forme — elle dit « ceci était une action » — sans son aplat. */
.btn {
    color: #000 !important;
    background: none !important;
    border: 1px solid #666 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   4. LA PLEINE LARGEUR ET LES CARROUSELS
   --------------------------------------------------------------------------- */

/* `width: 100vw` avec une marge négative sort le slider de son conteneur pour
   qu'il touche les bords de l'écran. Sur une feuille, `vw` vaut la largeur de
   page ENTIÈRE, marges comprises : le bloc déborderait des deux côtés. */
.block-slider {
    width: auto !important;
    margin-left: 0 !important;
}

/* UN CARROUSEL IMPRIME TOUTES SES SLIDES, LES UNES SOUS LES AUTRES. Elles sont
   empilées dans une seule cellule de grille et masquées sauf l'active : n'en
   imprimer qu'une perdrait le contenu des autres, en silence. Sur du papier,
   il n'y a pas de bouton pour aller voir la suite. */
.carousel__track { display: block !important; }
.carousel__item {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
.carousel__item + .carousel__item { margin-top: var(--space-lg, 2rem); }

/* ---------------------------------------------------------------------------
   5. OÙ LES PAGES SE COUPENT
   --------------------------------------------------------------------------- */

/* Un titre seul en bas de feuille, son texte sur la suivante : c'est le défaut
   d'impression le plus banal, et le plus facile à éviter. */
h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
    page-break-after: avoid;
}

/* Une carte, une image légendée, une ligne de tableau : des objets qu'on ne
   coupe pas en deux. */
.block-card,
.block-iconlist__item,
.block-stat,
figure,
tr,
.content-card {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Deux lignes seules, en haut ou en bas d'une feuille, se lisent mal. */
p, li {
    orphans: 3;
    widows: 3;
}

img {
    max-width: 100% !important;
    break-inside: avoid;
    page-break-inside: avoid;
}