/* assets/raw.css */
/* raw.css — les règles que l'import CSS d'Instatic détruit.

   Pourquoi ce fichier existe
   Super Import fait passer styles.css et custom.css dans l'éditeur de styles d'Instatic, qui
   réécrit chaque règle. Vérifié le 25/09/2026 (règles de test relues dans Instatic, rendu
   comparé dans Chromium), il perd sans avertir :
   - `@property` : --cut-k n'a plus de valeur, le clip-path des coins coupés devient invalide ;
   - `animation-timeline` et `animation-range` (et tout bloc `@supports` qui les teste) :
     plus d'animations au défilement ;
   - `-webkit-box-orient: vertical`, réécrit en `-moz-box-orient` : le line-clamp ne coupe plus.
   Ce fichier-ci ne passe PAS par Super Import. Il est déposé dans Instatic comme feuille de
   style de code (« code asset », chemin src/styles/raw.css, toutes les pages), qu'Instatic
   sert telle quelle, octet pour octet. Voir GUIDES/GUIDE-INSTATIC-EXPORT-README.md.

   La publication d'Instatic perd aussi des règles ajoutées après l'import (éditeur ou
   site_apply_css) : chaque règle est rangée sous sa dernière classe et n'est publiée que si
   un nœud porte cette entrée précise (styleRuleTreeShake.ts). Vérifié le 27/09/2026 sur
   dev.woma.fr. Les règles ajoutées après coup vont donc ici aussi (fin du fichier).

   Règles pour ce fichier
   - N'y mettre que ce qu'Instatic abîme ; tout le reste va dans custom.css.
   - Après chaque modification, recopier le fichier entier dans Instatic (src/styles/raw.css).
   - Les pages le chargent après custom.css, comme Instatic après ses propres styles. */

/* Coin coupé qui mord au survol (custom.css, « Mouvement » 2) : --cut-k doit être déclarée
   pour que sa transition soit interpolée. custom.css lit var(--cut-k, 1) : sans ce fichier,
   les coins restent coupés, seule l'animation manque. */
@property --cut-k { syntax: "<number>"; inherits: false; initial-value: 1; }

/* Textes limités à 2 lignes (mini-cartes Espaces, agenda en rangée) : le reste de la règle
   (display: -webkit-box; -webkit-line-clamp: 2) est dans custom.css. */
.mini-card-text, .agenda--row .agenda-body p { -webkit-box-orient: vertical; }

/* Mouvement 3 (custom.css) — défilement : la forme d'un bandeau tourne jusqu'à sa place quand
   la section entre ; les éléments des grilles apparaissent, les titres restent immobiles.
   Keyframes (block-rise, block-forme-scroll-*) : custom.css, qu'Instatic garde. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* 3a. La forme d'un bandeau se pose en tournant pendant que la section entre. */
    .block:not(.hero, .pageheader, .error) .block-forme {
      animation: block-forme-scroll-droite linear both; animation-timeline: view(); animation-range: entry 0% cover 45%;
    }
    .block:not(.hero, .pageheader, .error) .block-forme--gauche { animation-name: block-forme-scroll-gauche; }

    /* 3b. Éléments de liste et de grille (les titres de section restent immobiles). */
    :is(.features-grid, .features-bento, .features-iconleft, .services-detailed, .pricing-grid, .contact-cards,
        .values-icons, .values-grid, .impact-stats, .impact-stories, .services .actus-grid) > *,
    :is(.features-list, .services-list, .values-manifesto, .about-timeline, .rubrique-offers, .agenda-list) > li, .rubrique-photo,
    .features-rows .espace-detail, .pricing-single, .image-figure, .video-figure, .cta-box, .cta-grid, .cta-inline,
    .contact-form-box, .contact .info-item, .about-text, .about-visual, .impact-report-cover,
    .team:not(.team--carousel) .team-member, .gallery:not(.gallery--carousel, .gallery--filterable) .gallery-item,
    .logocloud:not(.logocloud--marquee) .logocloud-item {
      animation: block-rise linear both;
      animation-timeline: view();
      /* En pixels et non en % de l'élément : une carte haute ou une image finissait de
         paraître bien après être entrée (texte encore transparent pendant la lecture). */
      animation-range: cover 0px cover 160px;
    }
    :is(.features-grid, .pricing-grid, .values-grid, .values-icons, .impact-stats, .services-detailed, .impact-stories, .contact-cards, .services .actus-grid) > :nth-child(3n + 2),
    .team .team-member:nth-child(4n + 2), .gallery-item:nth-child(4n + 2) { animation-range: cover 40px cover 200px; }
    :is(.features-grid, .pricing-grid, .values-grid, .values-icons, .impact-stats, .services-detailed, .impact-stories, .contact-cards, .services .actus-grid) > :nth-child(3n + 3),
    .team .team-member:nth-child(4n + 3), .gallery-item:nth-child(4n + 3) { animation-range: cover 80px cover 240px; }
  }
}

/* ---- Responsive mobile (27/09/2026) : règles ajoutées après l'import, que la publication
   d'Instatic ne garderait pas (voir l'en-tête). Écrites pour gagner par spécificité. ---- */

/* Grille des pass (Espaces) : sur les rangées à cellule partagée, le bandeau bleu couvre toute la
   rangée, libellé compris, et le filet bleu passe sur le libellé. La cellule « plus » garde sa
   teinte plus forte et son filet. */
.pass-section .pass-compare .pass-row--shared { background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.pass-section .pass-compare .pass-row--shared .row-label { box-shadow: inset 3px 0 0 var(--blue); }
.pass-section .pass-compare .pass-row--shared .shared-cell { background: transparent; box-shadow: none; }
.pass-section .pass-compare .pass-row--shared .shared-cell.shared-cell--plus { background: color-mix(in srgb, var(--blue) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--blue); }

/* Machines (Espaces, carousel grid) : sur mobile, bandeau qui défile comme les espaces (scroll-snap,
   pas de JS ; les filtres masquent toujours les cartes via [hidden]). Le bloc porte bleed-ctx
   track-bleed pour que le bandeau aille jusqu'aux bords de l'écran. */
@media (max-width: 720px) {
  .carousel--grid .mini-grid {
    display: flex; gap: var(--space-2xs); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: var(--space-2xs); scrollbar-color: currentColor transparent;
  }
  .carousel--grid .mini-grid > .mini-card { flex: 0 0 min(260px, 75%); min-width: 0; scroll-snap-align: start; }
  .track-bleed.carousel--grid .mini-grid { margin-inline: calc(-1 * var(--edge)); padding-inline: var(--edge); scroll-padding-inline: var(--edge); }
}

@media (max-width: 920px) {
  /* Headers split compacts (Le projet, Événements) : image posée sur le bas du bloc. */
  .block.hero.hero--split.block--compact { padding-bottom: 0; }
  /* Carte des lieux (Espaces, Contact) : la carte en haut, puis le titre juste au-dessus des
     coordonnées et des lieux qu'il présente. */
  .map--bleed .map-illustrated .map-figure { margin-inline: calc(-1 * var(--edge)); order: 1; min-height: 0; aspect-ratio: 4 / 3; }
  .map--bleed .map-illustrated .map-side .block-head { order: 2; margin-bottom: 0; padding-top: var(--space-s); }
  .map--bleed .map-illustrated .map-contact { order: 3; margin-bottom: 0; }
  .map--bleed .map-illustrated .map-places { order: 4; padding-bottom: var(--space-l); }
  /* « Se former » (rubrique collage reverse) : une colonne, au-dessus de la règle desktop
     .rubrique--collage.rubrique--reverse (5fr 7fr, photos en colonne 2). */
  .rubrique.rubrique--collage.rubrique--reverse .rubrique-grid { grid-template-columns: 1fr; }
  .rubrique.rubrique--collage.rubrique--reverse .rubrique-grid > * { grid-column: 1; grid-row: auto; }
}

/* Liste des lieux (composant Instatic « Lieux », bouclé sur la collection Lieux) : le numéro et la
   couleur viennent de la position, pour répondre aux repères de la carte (1 magenta, 2 orange).
   L'export Eleventy écrit le numéro et la couleur dans la pastille, ces règles ne le changent pas. */
.map-places--numbered { counter-reset: lieu; }
.map-places--numbered > li { counter-increment: lieu; }
.map-places--numbered .map-num:empty::before { content: counter(lieu); }
.map-places--numbered > li:nth-child(1) .map-num:not([class*="block--accent-"]) { --block-accent: var(--magenta); }
.map-places--numbered > li:nth-child(2) .map-num:not([class*="block--accent-"]) { --block-accent: var(--orange); }

/* ---- Règles de custom.css absentes du site publié (audit du 27/09/2026 : chaque règle de
   l'export comparée au CSS publié par Instatic, puis rendu comparé page par page). ---- */

/* Hero image-bg vivid (accueil) : voile sombre côté texte seulement, la photo reste vive à droite ;
   fondu en bas derrière les portes. */
.block.hero.hero--vivid {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 78%, transparent) 0%, color-mix(in srgb, var(--ink) 45%, transparent) 45%, transparent 75%),
    linear-gradient(transparent 55%, color-mix(in srgb, var(--ink) 60%, transparent)),
    var(--block-image) center / cover, var(--ink);
}
/* Hero à portes (accueil) : marges du bloc. */
.block.hero.hero--doors { padding-top: calc(72px + var(--space-2xl)); padding-bottom: var(--space-xl); }

/* Grille des pass : rangée « Pour qui » collée aux noms des formules. */
.pass-section .pass-compare .pass-row--who td { color: var(--ink-soft); padding-top: 0; }
@media (max-width: 720px) { .pass-section .pass-compare .pass-row--who td { padding-top: var(--space-4xs); } }

/* Menu mobile plein écran (custom.css, header) : grands liens avec sous-titre, header en blanc
   quand le menu est ouvert. */
@media (max-width: 920px) {
  .nav-toggle:checked ~ .navlinks a[data-nav-link] {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6xs);
    padding: var(--space-3xs) 0; border-bottom: 1px solid color-mix(in srgb, var(--light) 28%, transparent);
    font-size: calc(var(--text-4xl) * 1.12); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
    text-shadow: 0 2px 16px color-mix(in srgb, var(--ink) 45%, transparent);
    animation: block-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.08s + var(--navi-d, 0s));
  }
  .nav-toggle:checked ~ .navlinks a[data-nav-link] .nav-link-sub.nav-mobile-only {
    display: block; font-size: var(--text-2xs); font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; opacity: 0.8;
  }
  :is(#siteHeader, .site-header).site-header.site-header:has(.nav-toggle:checked) { color: var(--light); }
}
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .nav-toggle:checked ~ .navlinks a[data-nav-link] { animation: none; }
}

/* ---- Cartes machinées (27/09/2026) : plus de filet supérieur sur les cartes. Chaque carte est
   une plaque coupée à un coin (DESIGN.md, Shapes), remplie d'un dégradé clair vers la couleur
   de son parcours, avec une forme de la charte en dégradé grainé qui déborde d'un bord.
   Le fond et le coin sont sur ::before (le clip-path de la carte rognerait la forme), la forme
   sur ::after, sous le texte. Coin, forme et bord tournent sur 4 cartes. Réglages par section :
   --carte-teinte (fond), --forme-a / --forme-b (dégradé de la forme). ---- */
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card) {
  --carte-teinte: var(--block-accent, var(--magenta));
  --forme-a: var(--magenta); --forme-b: var(--orange);
  --forme-w: 3.4rem; --cut-x: 18px;
  position: relative; isolation: isolate; border: 0; background: none; box-shadow: none;
}
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card)::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(158deg, var(--surface) 38%, color-mix(in srgb, var(--carte-teinte) 24%, var(--surface)));
  clip-path: var(--cut-path);
}
/* La forme : dégradé de deux couleurs de la charte + le grain de la charte (overlay). Par défaut un
   quart de disque (« q ») posé à cheval sur le bord droit, en haut. */
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: var(--forme-w); aspect-ratio: 1; top: calc(var(--forme-w) * -0.35); right: calc(var(--forme-w) * -0.3);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--forme-a), var(--forme-b));
  background-blend-mode: overlay, normal;
  clip-path: circle(100% at 0 100%); rotate: -8deg;
}
/* Rotation sur 4 cartes : coin coupé, forme (q, j, coin de « star », rostre) et bord. */
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card):nth-child(4n + 2) { --tr: 0; --bl: 1; --cut-y: calc(var(--cut-x) * 0.5); }
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card):nth-child(4n + 2)::after {
  top: auto; bottom: calc(var(--forme-w) * -0.3); right: calc(var(--forme-w) * -0.2); aspect-ratio: 1 / 1.3;
  clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%); rotate: 10deg;
}
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card):nth-child(4n + 3) { --tr: 0; --br: 1; --cut-y: calc(var(--cut-x) * 2); }
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card):nth-child(4n + 3)::after {
  top: calc(var(--forme-w) * -0.4); right: auto; left: 38%;
  clip-path: polygon(0 18%, 100% 0, 58% 52%, 100% 100%, 8% 84%); rotate: 6deg;
}
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card):nth-child(4n + 4) { --tr: 0; --tl: 1; --cut-y: calc(var(--cut-x) * 0.6); }
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card):nth-child(4n + 4)::after {
  top: auto; bottom: calc(var(--forme-w) * -0.25); right: calc(var(--forme-w) * -0.35); width: calc(var(--forme-w) * 0.55); aspect-ratio: 1 / 2.4;
  clip-path: polygon(0 0, 100% 8%, 70% 100%, 22% 94%); rotate: -12deg;
}

/* Agenda en rangée (Événements, parcours orange) : la rangée garde de la place pour les formes
   qui débordent (elle défile, donc rogne ce qui dépasse). */
.agenda.agenda--row .agenda-list { padding-top: var(--space-s); padding-bottom: var(--space-s); gap: var(--space-s); align-items: stretch; }
.agenda.agenda--row .agenda-item { --carte-teinte: var(--orange); --forme-a: var(--orange); --forme-b: var(--pink);
  padding: var(--space-xs) var(--space-xs) var(--space-s); border: 0; }
.agenda.agenda--row .agenda-item:nth-child(even) { --forme-a: var(--magenta); --forme-b: var(--orange); }

/* Frise « Monter un lieu » (Le projet, sur aplat jaune) : plaques blanches, fond vers le jaune pâle,
   formes bleu et magenta (jamais la couleur du fond). */
.about.timeline--row .about-timeline { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.about.timeline--row .timeline-item { --carte-teinte: var(--yellow-deep); --forme-a: var(--blue); --forme-b: var(--sky); color: var(--ink);
  padding: var(--space-xs) var(--space-xs) var(--space-s); border: 0; }
.about.timeline--row .timeline-item:nth-child(even) { --forme-a: var(--magenta); --forme-b: var(--pink); }
.about.timeline--row .timeline-year { font-family: var(--font-primary); font-weight: 400; font-size: var(--text-xl); line-height: 1; }

/* Étapes « Comment on travaille » (Accompagnement, parcours magenta) : le numéro sort de la plaque
   par le haut, dans une tuile magenta coupée. */
.services-steps .steps-row { gap: var(--space-s); padding-top: var(--space-2xs); }
.services-steps .steps-row > li { --carte-teinte: var(--magenta); --forme-w: 2.8rem;
  padding: var(--space-m) var(--space-xs) var(--space-xs); border: 0; }
.services-steps .steps-row > li::after { display: none; }
.services-steps .steps-row .steps-num { position: absolute; top: 0; left: var(--space-xs); translate: 0 -45%;
  padding: var(--space-6xs) var(--space-3xs); background: var(--block-accent, var(--magenta)); color: var(--light);
  font-size: var(--text-xs); --cut-x: 8px; --cut-y: 14px; clip-path: var(--cut-path); }
.services-steps .steps-row > li:nth-child(even) .steps-num { --tr: 0; --bl: 1; }

/* Cartes de service détaillées (Accompagnement, Formations) : plus de bordure, plaque en dégradé,
   une forme plus grande à cheval sur le bord. Coin coupé en bas : l'illustration couvre le haut. */
.services-detailed > .public-card { --carte-teinte: var(--magenta); --forme-w: 5.5rem; --cut-x: 26px;
  --tr: 0; --br: 1; --cut-y: calc(var(--cut-x) * 1.6); }
.services-detailed > .public-card:nth-child(4n + 2) { --br: 0; --bl: 1; --cut-y: calc(var(--cut-x) * 0.6); }
.services-detailed > .public-card .public-badge { background: var(--block-accent, var(--magenta)); color: var(--light); --cut-x: 8px; clip-path: var(--cut-path); }
.services--row .services-detailed { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.services--row .services-detailed > .public-card { --carte-teinte: var(--teal-deep); --forme-a: var(--mint); --forme-b: var(--teal-deep); }
.services--row .services-detailed > .public-card .public-badge { background: var(--teal-deep); }

/* Tableau des pass (Espaces, parcours bleu) : plus de filet bleu sur les formules. En-tête des
   formules en dégradé bleu, et sur grand écran une forme bleue à cheval sur le coin haut droit
   (le tableau ne défile plus, le coin passe sur ::before). */
.pass-section .pass-compare .plan-col { border-top: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 16%, var(--surface)), var(--surface) 85%); }
@media (min-width: 921px) {
  .pass-section .pass-compare-wrap { position: relative; isolation: isolate; overflow: visible; clip-path: none; background: none; margin-top: var(--space-s); }
  .pass-section .pass-compare-wrap::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--surface); clip-path: var(--cut-path); }
  .pass-section .pass-compare .plan-col:last-child { --cut-x: 22px; clip-path: var(--cut-path); }
  .pass-section .pass-compare-wrap::after {
    content: ""; position: absolute; z-index: 1; pointer-events: none; width: 5.5rem; aspect-ratio: 1; top: -2.6rem; right: -2.2rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(135deg, var(--blue), var(--sky));
    background-blend-mode: overlay, normal; clip-path: circle(100% at 0 100%); rotate: -8deg;
  }
}
@media (max-width: 720px) { .pass-section .pass-compare .plan-col { border-top: 0; margin-inline: 0; } }

/* ---- Boucles Instatic (27/09/2026) : sections nourries par les collections. ---- */
/* Machines : « Détails » est un texte long, une info par ligne ; vide, la ligne disparaît. */
.carousel--grid .mini-card .mini-card-details { white-space: pre-line; }
.carousel--grid .mini-card .mini-card-details:empty { display: none; }
/* Agenda : un rendez-vous sans lieu n'affiche pas de ligne vide. */
.agenda.agenda--row .agenda-body p:empty { display: none; }

/* ---- Boucles Instatic (28/09/2026) : équipe, références, productions, partenaires, formations,
   horaires des lieux. ---- */
/* Lieux : « Horaires » est un texte long, une plage par ligne ; vide, la ligne disparaît. */
.map-hours.map-hours { white-space: pre-line; font-weight: 600; }
.map-hours.map-hours:empty { display: none; }
/* Équipe : une personne sans photo garde une tuile colorée à la place. */
.team .team-member img.team-photo:is([src=""], :not([src])) { background: color-mix(in srgb, var(--magenta) 22%, var(--surface)); color: transparent; }
/* Partenaires : le nom s'affiche seulement quand le logo manque. */
.logocloud .logocloud-item .logocloud-name--repli { display: none; }
.logocloud .logocloud-item img:is([src=""], :not([src])) { display: none; }
.logocloud .logocloud-item img:is([src=""], :not([src])) + .logocloud-name--repli { display: inline; }
/* Cartes (références, productions, formations) : sans illustration, un aplat à la place. */
.actu-card img.actu-thumb:is([src=""], :not([src])) { background: color-mix(in srgb, var(--block-accent, var(--magenta)) 18%, var(--surface)); color: transparent; }

/* ---- Rejoindre + équipe (Le projet, 28/09/2026) : règles ajoutées après l'import, que la
   publication d'Instatic ne garderait pas (voir l'en-tête). Écrites pour gagner par spécificité. ---- */

/* Rubrique avec `visual` : au-dessus de 920px, titre et offres à gauche, mosaïque de l'équipe à
   droite sur toute la hauteur (sans filet). En dessous, custom.css garde une colonne, l'équipe
   sous les offres avec son filet. */
@media (min-width: 921px) {
  .rubrique.rubrique--visual .rubrique-grid { grid-template-columns: 5fr 6fr; grid-template-rows: auto 1fr; column-gap: var(--space-2xl); }
  .rubrique.rubrique--visual .rubrique-grid > .rubrique-text { grid-column: 1; grid-row: 1; }
  .rubrique.rubrique--visual .rubrique-grid > .rubrique-more { grid-column: 1; grid-row: 2; }
  .rubrique.rubrique--visual .rubrique-grid > .rubrique-visual { grid-column: 2; grid-row: 1 / span 2; padding-top: 0; border-top: 0; }
  .rubrique.rubrique--visual .team--mosaic .team-layout { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .rubrique.rubrique--visual .team--mosaic .team-layout { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Nos productions en mosaïque (Accompagnement, 28/09/2026) ---- */
/* Mini-cartes (machines, productions) : titre limité à 2 lignes, comme le texte (le texte, déjà
   limité, garde sa règle en haut du fichier). */
.carousel--grid .mini-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Production sans description : pas de ligne vide sous le titre. */
.carousel--grid .mini-card .mini-card-text:empty { display: none; }
/* Boucle Instatic : l'année suit la typologie (« Agencement · 2023 »), sans point si elle manque. */
.mini-card-tags .mini-card-annee:not(:empty)::before { content: " · "; }

/* ---- Filtres dans les boucles Instatic (28/09/2026) : une boucle perd data-filter-list, donc la
   règle de custom.css qui cache les éléments filtrés ne s'appliquait plus et .mini-card
   (display: flex) restait visible. ---- */
[data-instatic-loop] > [hidden] { display: none !important; }

/* ---- Cartes cohérentes (28/09/2026, consigne DESIGN.md « Cartes ») : toute carte a un coin
   cassé qui mord au survol (--cut-k). Mini-cartes (machines, productions) : plus de bordure, plaque
   unie, coin qui tourne sur 4 cartes, la carte se soulève. ---- */
.carousel--grid .mini-card {
  --cut-x: 18px; border: 0; clip-path: var(--cut-path);
  background: var(--surface);
  transition: --cut-k 0.3s cubic-bezier(0.16, 1, 0.3, 1), translate 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel--grid .mini-card:nth-child(4n + 2) { --tr: 0; --bl: 1; --cut-y: calc(var(--cut-x) * 0.4); }
.carousel--grid .mini-card:nth-child(4n + 3) { --tr: 0; --br: 1; --cut-y: calc(var(--cut-x) * 2.4); }
.carousel--grid .mini-card:nth-child(4n + 4) { --tr: 0; --tl: 1; --cut-y: calc(var(--cut-x) * 0.6); }
.carousel--grid .mini-card:hover { --cut-k: 2.6; }
/* Équipe (mosaïque) : la photo, déjà coupée, mord au survol. */
.team--mosaic .team-member .team-photo { transition: --cut-k 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.team--mosaic .team-member:hover .team-photo { --cut-k: 2.6; }
@media (prefers-reduced-motion: no-preference) {
  .carousel--grid .mini-card:hover { translate: 0 -4px; }
}

/* ---- Ancres (28/09/2026) : défilement et position d'arrivée. ---- */
/* Le défilement vers une ancre est piloté par header.js (fluide, et qui suit la cible si la page
   bouge pendant le trajet). Le défilement natif « smooth » de styles.css glissait depuis le haut
   à l'arrivée sur une URL avec #ancre, puis header.js recalait la page d'un coup : on le coupe. */
:root { scroll-behavior: auto; }
/* Sans JS (et pour la recherche dans la page, le focus) : la cible s'arrête 16px sous le header
   (72px). Une section pleine largeur laisse son padding haut passer sous le header : son contenu
   s'arrête au même endroit au lieu de tomber 72px plus bas que son padding. */
main [id] { scroll-margin-top: calc(72px + 16px); }
main > .block[id] { scroll-margin-top: calc(72px + 16px - var(--space-xl)); }
main > .block--compact[id] { scroll-margin-top: calc(72px + 16px - var(--space-l)); }
main > .block--large[id] { scroll-margin-top: calc(72px + 16px - var(--space-2xl)); }

/* ---- Cartes sans dégradé, coin qui mord partout (28/09/2026, consigne DESIGN.md « Cartes ») : les
   plaques des cartes sont unies (plus de dégradé vers la couleur du parcours). Toute carte a un coin
   cassé qui mord au survol (--cut-k) et se soulève, sans ombre (l'ombre dessinerait le rectangle
   que le coin coupe). Les formes de la charte qui débordent des cartes restent. ---- */
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card)::before { background: var(--surface); }
.carousel--grid .mini-card.mini-card { background: var(--surface); }
.pass-section .pass-compare .plan-col.plan-col { background: color-mix(in srgb, var(--blue) 10%, var(--surface)); }
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card, .parcours-list > .parcours-item) {
  transition: --cut-k 0.3s cubic-bezier(0.16, 1, 0.3, 1), translate 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
:is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card, .parcours-list > .parcours-item):hover { --cut-k: 2.6; }
.block :is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card, .parcours-list > .parcours-item, .actu-card):hover { box-shadow: none; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  :is(.agenda--row .agenda-item, .timeline--row .timeline-item, .steps-row > li, .services-detailed > .public-card, .parcours-list > .parcours-item, .card-scroll > .actu-card):hover { translate: 0 -4px; }
}
/* Cartes des rangées (références, formations déjà réalisées) : plaque unie sans bordure. */
.card-scroll > .actu-card { --cut-x: 18px; border: 0; background: var(--surface); transition: --cut-k 0.3s cubic-bezier(0.16, 1, 0.3, 1), translate 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* Catalogue des formations (Formations, rangée) : sur grand écran, trois cartes tiennent dans la
   largeur au lieu d'une demi-largeur d'écran chacune. */
@media (min-width: 921px) {
  .services--row .services-detailed > .public-card { flex-basis: min(30vw, 400px); }
}

/* Page Résidence et incubation (parcours bleu) : cartes « Pour qui ? » et étapes « Comment ça se
   passe » en bleu au lieu du magenta d'Accompagnement. */
.services--incubation { --block-accent: var(--blue); }
.services--incubation .services-detailed > .public-card { --carte-teinte: var(--blue); --forme-a: var(--sky); --forme-b: var(--blue); }
.services--incubation .services-steps .steps-row > li { --carte-teinte: var(--blue); }

/* Tuiles de la mosaïque « Ce que comprend la résidence » : plaques unies à coin coupé (qui tourne
   sur 4 tuiles), le coin mord et la tuile se lève au survol, comme les autres cartes. */
.checklist-tiles > .checklist-tile { --cut-x: 16px; border: 0; clip-path: var(--cut-path);
  transition: --cut-k 0.3s cubic-bezier(0.16, 1, 0.3, 1), translate 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.checklist-tiles > .checklist-tile:nth-child(4n + 2) { --tr: 0; --bl: 1; --cut-y: calc(var(--cut-x) * 0.5); }
.checklist-tiles > .checklist-tile:nth-child(4n + 3) { --tr: 0; --br: 1; --cut-y: calc(var(--cut-x) * 2); }
.checklist-tiles > .checklist-tile:nth-child(4n + 4) { --tr: 0; --tl: 1; --cut-y: calc(var(--cut-x) * 0.6); }
.checklist-tiles > .checklist-tile--photo { --cut-x: 22px; }
.checklist-tiles > .checklist-tile:hover { --cut-k: 2.6; }
@media (prefers-reduced-motion: no-preference) {
  .checklist-tiles > .checklist-tile:hover { translate: 0 -4px; }
}

/* ---- Sous-menus (header.html, _data/menu.json ; test du 06/10/2026, version intermédiaire).
   Grand écran : au survol d'une rubrique, ou au clic sur son chevron (assets/header.js), une petite
   plaque découpée sous le lien : tuile à la couleur de la rubrique, puis ses sous-pages. Panneau mobile : les sous-pages sont toujours
   visibles, en petit, sous chaque grand lien (pas d'accordéon). */
.nav-item { display: flex; align-items: center; gap: 2px; }
.nav-sub-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 20px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; opacity: 0.75;
}
.nav-sub-chevron {
  width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  translate: 0 -2px; rotate: 45deg; transition: rotate 0.3s cubic-bezier(0.16, 1, 0.3, 1), translate 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-sub-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.navlinks .nav-sub a::after { display: none; }
.nav-sub ul { list-style: none; margin: 0; padding: 0; }

@media (min-width: 921px) {
  /* La rubrique s'étire en hauteur pour que la souris passe du lien à la liste sans la quitter. */
  .nav-item { position: relative; padding-block: 14px; margin-block: -14px; white-space: nowrap; }
  .nav-item:is(:hover, :has(> [aria-expanded="true"])) > a[data-nav-link]::after { transform: scaleX(1); }
  .nav-item:is(:hover, :has(> [aria-expanded="true"])) .nav-sub-chevron { rotate: 225deg; translate: 0 2px; }
  .nav-sub {
    position: absolute; top: 100%; left: -14px; z-index: 5; padding-top: 2px;
    visibility: hidden; opacity: 0; translate: 0 -6px; pointer-events: none;
    transition: opacity 0.15s ease, translate 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.15s;
  }
  .nav-item:last-of-type .nav-sub { left: auto; right: -14px; }
  .nav-item:is(:hover, :has(> [aria-expanded="true"])) > .nav-sub {
    visibility: visible; opacity: 1; translate: 0 0; pointer-events: auto;
    transition: opacity 0.2s ease, translate 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }
  /* Une seule liste à la fois : survoler une autre rubrique ferme celle ouverte au clic. */
  .navlinks:has(> .nav-item:hover) > .nav-item:not(:hover) > .nav-sub { visibility: hidden; opacity: 0; }
  .nav-item:nth-of-type(n + 3) .nav-sub { left: auto; right: -14px; }
  .nav-sub-plate {
    display: flex; background: var(--paper-raised); color: var(--ink);
    --cut-x: 16px; --cut-y: 8px; clip-path: var(--cut-path);
  }
  /* Le coin coupé change d'une rubrique à l'autre. */
  .nav-item:nth-of-type(2n) .nav-sub-plate { --tr: 0; --br: 1; --cut-x: 8px; --cut-y: 16px; }
  /* Tuile de la rubrique : couleur unie, petite forme de la charte qui déborde du coin. */
  .navlinks .nav-sub-tile {
    position: relative; overflow: hidden; flex: none; width: 9.5rem; display: flex; flex-direction: column;
    padding: var(--space-3xs); background: var(--nav-accent, var(--yellow)); color: var(--ink);
  }
  .nav-sub-tile > span { position: relative; z-index: 1; }
  .nav-sub-tile-title { font-family: var(--font-primary); font-size: var(--text-2xs); line-height: 1.3; white-space: normal; }
  .nav-sub-tile-more { margin-top: auto; padding-top: var(--space-s); font-size: var(--text-3xs); font-weight: 600; }
  .nav-sub-tile-more .arrow { transition: translate 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .nav-sub-tile:hover .nav-sub-tile-more .arrow { translate: 4px 0; }
  .nav-sub-forme {
    position: absolute; right: -28%; bottom: -30%; width: 70%; height: auto; rotate: -8deg; pointer-events: none;
    transition: rotate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-sub-tile:hover .nav-sub-forme { rotate: 4deg; }
  .nav-sub-list { display: grid; align-content: start; min-width: 12rem; padding: var(--space-5xs); }
  .navlinks .nav-sub-list a {
    display: flex; align-items: center; gap: 0.55em; padding: var(--space-5xs) var(--space-4xs);
    font-size: var(--text-2xs); font-weight: 500; color: var(--ink);
    transition: background-color 0.2s ease, translate 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .navlinks .nav-sub-list a::before {
    content: ""; flex: none; width: 6px; height: 6px; background: var(--nav-accent, var(--yellow));
    transition: scale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .navlinks .nav-sub-list a:is(:hover, :focus-visible) { background: var(--paper); }
  .navlinks .nav-sub-list a:is(:hover, :focus-visible)::before { scale: 1.5; }
  .navlinks .nav-sub-list a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
}
/* Avec les chevrons, le menu ne tient plus sur une ligne sous 1300px : les icônes des réseaux
   (aussi dans le pied de page) s'effacent et les rubriques se resserrent. */
@media (min-width: 921px) and (max-width: 1300px) {
  .nav-right .nav-social { display: none !important; }
  .nav-right { column-gap: var(--space-xs); }
  .nav-right .navlinks { column-gap: var(--space-3xs); }
}
@media (min-width: 921px) and (max-width: 1040px) {
  .nav-right .navlinks, .nav-right .nav-cta { font-size: var(--text-3xs); }
  .nav-right .navlinks { column-gap: var(--space-4xs); }
}
@media (min-width: 921px) and (prefers-reduced-motion: reduce) {
  .nav-sub { translate: none !important; }
}

@media (max-width: 920px) {
  .nav-sub-tile { display: none; }
  .nav-sub-toggle { display: none; }
  .nav-sub { display: none; }
  /* Panneau ouvert : sous chaque grand lien, ses sous-pages en petit sur une ou deux lignes ; elles
     remplacent le sous-titre du lien. */
  .nav-toggle:checked ~ .navlinks .nav-item {
    display: block; padding-bottom: var(--space-3xs);
    border-bottom: 1px solid color-mix(in srgb, var(--light) 28%, transparent);
  }
  .nav-toggle:checked ~ .navlinks .nav-item > a[data-nav-link] { border-bottom: 0; padding-bottom: var(--space-5xs); }
  .nav-toggle:checked ~ .navlinks .nav-item > a[data-nav-link] .nav-link-sub.nav-mobile-only { display: none; }
  .nav-toggle:checked ~ .navlinks .nav-sub {
    display: block;
    animation: block-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.14s + var(--navi-d, 0s));
  }
  .nav-toggle:checked ~ .navlinks .nav-sub-list { display: flex; flex-wrap: wrap; gap: var(--space-6xs, 4px) var(--space-xs); }
  .nav-toggle:checked ~ .navlinks .nav-sub-list a {
    display: inline-flex; align-items: center; gap: 0.45em; padding: 4px 0;
    font-size: var(--text-2xs); font-weight: 500; line-height: 1.3; opacity: 0.9;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--ink) 45%, transparent);
  }
  .nav-toggle:checked ~ .navlinks .nav-sub-list a::before {
    content: ""; flex: none; width: 6px; height: 6px; background: var(--nav-accent, var(--yellow));
  }
}
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .nav-toggle:checked ~ .navlinks .nav-sub { animation: none; }
}