:root {
  --fond: #fbfbfd;
  --blanc: #ffffff;
  --texte: #171717;
  --muted: #64708c;
  --violet: #7b197c;
  --bleu: #29499e;
  --bleu-menu: #f1f2f8;
  --bleu-fonce: #17336f;
  --gris-carte: #f3f3f7;
  --bordure: #e1e3eb;
  --rayon: 24px;
  --page: 1320px;
  --header-height: 97px;
  --logo-origin-x: 74.45%;
  --logo-origin-y: 45.98%;

  /* Décalage du halo validé */
  --halo-shift-y: 3.5%;
  
  /* Cartes / encarts du site */

  --carte-fond:
    transparent;

  --carte-bordure:
    rgba(23, 51, 111, .12);

  --carte-ombre:
    0 12px 30px
    rgba(19, 37, 78, .025);

}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;

  font-family:
    "Outfit",
    "Segoe UI",
    Arial,
    sans-serif;

  color: var(--texte);

 background:
  linear-gradient(
    180deg,
    rgba(41, 73, 158, .16) 0px,
    rgba(41, 73, 158, .16) 150px,
    rgba(41, 73, 158, .05) 42%,
    rgba(123, 25, 124, .035) 58%,
    rgba(123, 25, 124, .12) 100%
  ),
  var(--fond);
 }
img {
  display: block;
  max-width: 100%;
 }

a { color: inherit; }


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;

  background:
    linear-gradient(
      180deg,
      rgba(123, 25, 124, .12) 0%,
      rgba(41, 73, 158, .16) 100%
    ),
    rgba(251, 251, 253, .94);

  border-bottom: none;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  width: min(calc(100% - 44px), var(--page));
  height: var(--header-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: 195px;
  height: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  color: #fff;
  background: var(--violet);
  text-decoration: none;
  font-weight: 650;
  box-shadow: 0 8px 20px rgba(123, 25, 124, 0.13);
  transition: transform .18s ease, background .18s ease;
}

.contact-button:hover {
  background: #681469;
  transform: translateY(-1px);
}


/* =========================================================
   MENU
   ========================================================= */

.menu {
  position: relative;
}

.menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 46px;
  padding: 0 18px;
  border: 1.5px solid rgba(23, 51, 111, .78);
  border-radius: 999px;
  background: var(--bleu-menu);
  color: var(--bleu-fonce);
  font-weight: 650;
}

.menu summary::-webkit-details-marker {
  display: none;
}

.menu-icon {
  width: 20px;
  height: 14px;
  display: inline-block;

  background-image:
    linear-gradient(var(--bleu-fonce), var(--bleu-fonce)),
    linear-gradient(var(--bleu-fonce), var(--bleu-fonce)),
    linear-gradient(var(--bleu-fonce), var(--bleu-fonce));

  background-repeat: no-repeat;

  background-size:
    20px 2px,
    20px 2px,
    20px 2px;

  background-position:
    0 0,
    0 6px,
    0 12px;
}

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 245px;
  padding: 10px;
  display: grid;
  gap: 5px;
  background: var(--bleu-menu);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(17, 35, 83, .14);
}

.menu-panel a {
  padding: 10px 12px;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 500;
}

.menu-panel a:hover {
  background: rgba(123, 25, 124, .075);
  color: var(--violet);
}


/* =========================================================
   PAGE ACCUEIL
   ========================================================= */


/* =========================================================
   HEADER — NAVIGATION DÉPLOYÉE SUR L'ACCUEIL
   ========================================================= */

.home-header-inner {
  gap: 28px;
}

.home-header-inner .brand {
  height: var(--header-height);
  overflow: hidden;
  align-items: flex-start;
}

.home-header-nav {
  display: flex;

  align-items: center;
  justify-content: center;

  gap:
    clamp(
      18px,
      2vw,
      34px
    );

  margin-left: auto;
}


.home-header-nav a {
  color: var(--bleu-fonce);

  text-decoration: none;

  font-size: .98rem;
  font-weight: 650;

  white-space: nowrap;

  transition:
    color .18s ease,
    transform .18s ease;
}


.home-header-nav a:hover {
  color: var(--violet);

  transform:
    translateY(-1px);
}


.home-header-inner .brand img {
  width: 180px;
  height: auto;

  transform:
    translateY(-25%);
}


.home-menu-mobile {
  display: none;
}


/* =========================================================
   CONTENEUR COMMUN DES BLOCS D'ACCUEIL
   ========================================================= */

.home-section-inner {
  width:
    min(
      calc(100% - 44px),
      var(--page)
    );

  margin: 0 auto;
}


.home-section-kicker {
  margin:
    0
    0
    12px !important;

  color:
    var(--violet) !important;

  font-size:
    .93rem !important;

  line-height:
    1.2 !important;

  font-weight:
    800 !important;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.home-section-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}


/* =========================================================
   1 — HERO / PROPRIÉTÉS DE SURFACE
   ========================================================= */

.home-hero {
  padding:
    58px
    0
    50px;
}


.home-hero-inner {
  position: relative;

  width:
    min(
      calc(100% - 44px),
      var(--page)
    );

  min-height: 540px;

  margin: 0 auto;

  overflow: hidden;

  border-radius:
    var(--rayon);

  background:
    linear-gradient(
      90deg,
      rgba(235, 240, 250, .99) 0%,
      rgba(235, 240, 250, .97) 26%,
      rgba(235, 240, 250, .88) 38%,
      rgba(235, 240, 250, .62) 49%,
      rgba(235, 240, 250, .24) 59%,
      rgba(235, 240, 250, 0) 70%
    ),
    url("assets/home-surfaces-multimateriaux.png")
    center center / cover
    no-repeat;

  box-shadow:
    0 18px 46px
    rgba(19, 37, 78, .06);
}


/* =========================================================
   HERO — TEXTE
   ========================================================= */

.home-hero-copy {
  position: relative;

  z-index: 2;

  width: 54%;
  max-width: 690px;

  padding:
    72px
    0
    68px
    56px;
}


.home-hero-copy h1 {
  margin:
    0
    0
    28px;

  color:
    var(--bleu-fonce);

  font-size:
    clamp(
      44px,
      4.4vw,
      64px
    );

  line-height: 1.03;

  letter-spacing: -.045em;

  font-weight: 760;
}


.home-hero-copy h1 span {
  display: block;

  color:
    var(--bleu);
}


.home-hero-lead {
  max-width: 650px;

  margin: 0;

  color:
    var(--texte);

  font-size: 1.20rem;
  line-height: 1.50;
}


/* =========================================================
   HERO — BOUTONS
   ========================================================= */

.home-hero-actions {
  margin-top: 30px;

  display: flex;

  align-items: center;

  gap: 12px;
}


.home-hero-actions .property-link {
  color:
    var(--blanc);

  background:
    var(--violet);

  border-color:
    var(--violet);
}


.home-hero-actions .property-link:hover {
  color:
    var(--blanc);

  background:
    #681469;

  transform:
    translateY(-2px);
}


/* =========================================================
   HERO — REACH
   ========================================================= */

.home-reach-link {
  position: absolute;

  z-index: 4;

  left: 62%;
  bottom: 48px;

  width: 250px;

  padding:
    10px
    15px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  color:
    var(--bleu-fonce);

  background:
    rgba(255, 255, 255, .84);

  border:
    1px solid
    rgba(255, 255, 255, .90);

  border-radius: 999px;

  box-shadow:
    0 10px 26px
    rgba(19, 37, 78, .11);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  text-decoration: none;

  transform:
    translateX(-50%);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.home-reach-link:hover {
  background:
    rgba(255, 255, 255, .94);

  transform:
    translateX(-50%)
    translateY(-4px);

  box-shadow:
    0 17px 34px
    rgba(19, 37, 78, .17);
}


.home-reach-link img {
  width: 66px;
  height: auto;

  flex:
    0
    0
    auto;
}


.home-reach-link span {
  max-width: 140px;

  font-size: .84rem;
  line-height: 1.22;
  font-weight: 700;
}


/* =========================================================
   HERO — MESSAGE INTÉGRÉ À L'IMAGE
   ========================================================= */

.home-hero-tagline {
  position: absolute;

  z-index: 3;

  right: 34px;
  bottom: 32px;

  margin: 0;

  padding:
    0
    0
    15px;

  color: #ffffff;

  background: none;

  text-align: left;

  font-size: 1.18rem;
  line-height: 1.28;
  font-weight: 720;

  text-shadow:
    0 2px 4px
    rgba(10, 22, 50, .75),
    0 6px 18px
    rgba(10, 22, 50, .65);
}


.home-hero-tagline::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 120px;
  height: 2px;

  background:
    rgba(255, 255, 255, .88);

  box-shadow:
    0 2px 8px
    rgba(10, 22, 50, .45);
}


/* =========================================================
   2 — EXPÉRIENCE / BESOINS INDUSTRIELS
   ========================================================= */

.home-experience {
  padding: 0;
}


.home-experience-card {
  padding: 28px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, .92fr);

  gap: 42px;

  align-items: center;

  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .08);

  border-radius:
    var(--rayon);

  box-shadow:
    0 16px 38px
    rgba(19, 37, 78, .045);
}


/* =========================================================
   BLOC 2 — PHOTO / ÉQUIPE
   ========================================================= */

.home-team-visual {
  color: inherit;

  text-decoration: none;
}


.home-team-visual figure {
  margin: 0;

  overflow: hidden;

  background:
    var(--blanc);

  border:
    1px solid
    rgba(23, 51, 111, .10);

  border-radius: 18px;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.home-team-visual:hover figure {
  transform:
    translateY(-3px);

  border-color:
    rgba(123, 25, 124, .18);

  box-shadow:
    0 18px 38px
    rgba(19, 37, 78, .10);
}


.home-team-visual img {
  width: 100%;
  height: auto;
}


.home-team-visual figcaption {
  padding:
    13px
    18px
    15px;

  text-align: center;

  background:
    rgba(41, 73, 158, .04);
}


.home-team-visual figcaption strong,
.home-team-visual figcaption span {
  display: block;
}


.home-team-visual figcaption strong {
  color:
    var(--bleu-fonce);

  font-size: .94rem;
  line-height: 1.35;
  font-weight: 600;
}


.home-team-visual figcaption span {
  margin-top: 5px;

  color:
    var(--violet);

  font-size: .85rem;
  line-height: 1.3;

  font-style: italic;
  font-weight: 600;
}


/* =========================================================
   BLOC 2 — TEXTE
   ========================================================= */

.home-experience-content h2 {
  margin:
    0
    0
    22px;

  color:
    var(--bleu-fonce);

  font-size:
    clamp(
      32px,
      3vw,
      44px
    );

  line-height: 1.08;

  letter-spacing: -.025em;

  font-weight: 740;
}


.home-experience-content > p:not(.home-experience-conclusion) {
  margin:
    0
    0
    16px;

  color:
    var(--texte);

  font-size: 1.08rem;
  line-height: 1.5;
}


/* =========================================================
   BLOC 2 — TROIS REPÈRES CLIQUABLES
   ========================================================= */

.home-experience-facts {
  margin:
    26px
    0;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.home-experience-fact {
  min-height: 92px;

  padding:
    15px
    12px;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  color:
    var(--bleu-fonce);

  background:
    rgba(76, 91, 180, .075);

  border:
    1px solid
    rgba(41, 73, 158, .14);

  border-radius: 16px;

  text-decoration: none;

  font-size: .96rem;
  line-height: 1.3;
  font-weight: 700;

  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.home-experience-fact:hover {
  color:
    var(--violet);

  background:
    rgba(123, 25, 124, .16);

  border-color:
    rgba(123, 25, 124, .25);

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 22px
    rgba(19, 37, 78, .07);
}


/* =========================================================
   BLOC 2 — CONCLUSION
   ========================================================= */

.home-experience-conclusion {
  margin:
    0
    0
    24px;

  color:
    var(--bleu-fonce);

  font-size: 1.1rem;
  line-height: 1.45;
  font-weight: 700;
}


/* =========================================================
   BLOC 2 — BOUTON SOLUTIONS
   ========================================================= */

.home-experience-content .home-primary-action {
  display: flex;

  width: fit-content;

  margin:
    0
    auto;

  color:
    var(--blanc);

  background:
    var(--violet);

  border-color:
    var(--violet);
}


.home-experience-content .home-primary-action:hover {
  color:
    var(--blanc);

  background:
    #681469;

  transform:
    translateY(-2px);
}


/* =========================================================
   3 — TECHNOLOGIE / DÉMONSTRATION
   ========================================================= */

.home-tech-final {
  margin-top: 50px;

  padding:
    0
    0
    92px;
}


.home-tech-final-card {
  padding: 30px;

  display: grid;

  grid-template-columns:
    minmax(0, .82fr)
    minmax(420px, 1.18fr);

  gap: 44px;

  align-items: center;

  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .08);

  border-radius:
    var(--rayon);

  box-shadow:
    0 16px 38px
    rgba(19, 37, 78, .045);
}


/* =========================================================
   BLOC 3 — TEXTE
   ========================================================= */

.home-tech-final-content h2 {
  margin:
    0
    0
    22px;

  color:
    var(--bleu-fonce);

  font-size:
    clamp(
      32px,
      3vw,
      44px
    );

  line-height: 1.08;

  letter-spacing: -.025em;

  font-weight: 740;
}


.home-tech-final-content p {
  margin: 0;

  color:
    var(--texte);

  font-size: 1.08rem;
  line-height: 1.5;
}


/* =========================================================
   BLOC 3 — BOUTONS
   ========================================================= */

.home-tech-final-actions {
  margin-top: 28px;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.home-tech-final-actions .home-primary-action {
  width: 100%;

  margin: 0;

  padding:
    0
    14px;

  color:
    var(--blanc);

  background:
    var(--violet);

  border-color:
    var(--violet);

  white-space: nowrap;

  font-size: .91rem;
}


.home-tech-final-actions .home-primary-action:hover {
  color:
    var(--blanc);

  background:
    #681469;

  transform:
    translateY(-2px);
}


/* =========================================================
   BLOC 3 — VIDÉO
   ========================================================= */

.home-tech-final-video {
  margin: 0;

  overflow: hidden;

  background:
    rgba(255, 255, 255, .42);

  border:
    1px solid
    rgba(23, 51, 111, .10);

  border-radius: 18px;
}


.home-tech-final-video video {
  display: block;

  width: 100%;
  height: auto;

  background: #000;

  object-fit: contain;
}


.home-tech-final-video figcaption {
  padding:
    13px
    18px
    15px;

  color:
    var(--muted);

  background:
    rgba(41, 73, 158, .04);

  text-align: center;

  font-size: .9rem;
  line-height: 1.35;

  font-style: italic;
}


/* =========================================================
   RESPONSIVE — PETIT LAPTOP
   901 px → 1350 px
   ========================================================= */

@media (min-width: 1041px) and (max-width: 1350px) {

  .home-header-inner {
    gap: 16px;
  }


  .home-header-inner .brand img {
    width: 174px;

    transform:
      translateY(-23%);
  }

  .home-header-nav {
    gap: 14px;
  }


  .home-header-nav a {
    font-size: .88rem;
  }


  .home-header-inner .contact-button {
    padding:
      0
      16px;

    white-space: nowrap;
  }


  /* HERO */

  .home-hero-inner {
    min-height:
      clamp(
        540px,
        44vw,
        600px
      );

    background:
      linear-gradient(
        90deg,
        rgba(235, 240, 250, .99) 0%,
        rgba(235, 240, 250, .97) 28%,
        rgba(235, 240, 250, .84) 40%,
        rgba(235, 240, 250, .48) 52%,
        rgba(235, 240, 250, .12) 64%,
        rgba(235, 240, 250, 0) 73%
      ),
      url("assets/home-surfaces-multimateriaux.png")
      58% center / cover
      no-repeat;
  }


  .home-hero-copy {
    width: 58%;
    max-width: 680px;

    padding:
      58px
      0
      clamp(
        125px,
        11vw,
        150px
      )
      48px;
  }


  .home-hero-copy h1 {
    font-size:
      clamp(
        42px,
        4vw,
        56px
      );
  }

  .home-reach-link {
    left: 62%;
    right: auto;

    bottom:
      clamp(
        84px,
        7vw,
        92px
      );

    width:
      clamp(
        195px,
        17vw,
        215px
      );

    padding:
      8px
      12px;

    gap: 10px;

    transform:
      translateX(-50%);
  }


  .home-reach-link:hover {
    transform:
      translateX(-50%)
      translateY(-3px);
  }


  .home-reach-link img {
    width:
      clamp(
        52px,
        4.3vw,
        56px
      );
  }


  .home-reach-link span {
    max-width: 125px;

    font-size: .78rem;
    line-height: 1.18;
  }


  .home-hero-tagline {
    right: 28px;
    bottom: 24px;

    width: 205px;

    padding-bottom: 12px;

    text-align: right;

    font-size: .96rem;
    line-height: 1.22;
  }


  .home-hero-tagline::after {
    left: auto;
    right: 0;

    width: 100px;
  }

}

/* =========================================================
   CHOIX DE LANGUE — HEADER
   ========================================================= */

.header-language-switch {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  min-height: 34px;

  padding:
    0
    9px;

  color:
    var(--bleu-fonce);

  font-size: .78rem;
  line-height: 1;

  font-weight: 650;

  white-space: nowrap;
}


.language-current {
  color:
    var(--bleu-fonce);

  font-weight: 800;
}


.language-separator {
  color:
    var(--muted);

  opacity: .65;
}


.language-disabled {
  color:
    var(--muted);

  opacity: .55;

  cursor: default;
}


/* =========================================================
   CHOIX DE LANGUE — MENU COMPACT
   ========================================================= */

.menu-language-switch {
  margin-top: 6px;

  padding:
    12px
    12px
    4px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border-top:
    1px solid
    rgba(23, 51, 111, .10);

  color:
    var(--bleu-fonce);

  font-size: .9rem;
}

/* =========================================================
   RESPONSIVE — MENU COMPACT
   ========================================================= */

@media (max-width: 1180px) {

  .home-header-nav {
    display: none;
  }


  .home-menu-mobile {
    display: block;
  }


  .header-language-switch {
    display: none;
  }

}

/* =========================================================
   RESPONSIVE — BLOCS 2 ET 3
   ========================================================= */

@media (max-width: 980px) {

  .home-experience-card {
    grid-template-columns: 1fr;

    gap: 34px;
  }


  .home-team-visual {
    max-width: 760px;
  }


  .home-tech-final-card {
    grid-template-columns: 1fr;

    gap: 30px;
  }

}


/* =========================================================
   RESPONSIVE — TABLETTE / ÉCRAN INTERMÉDIAIRE
   641 px → 1040 px
   ========================================================= */

@media (min-width: 641px) and (max-width: 1040px) {

  .home-hero {
    padding:
      44px
      0
      50px;
  }

  .home-header-inner .brand img {
    width: 168px;

    transform:
      translateY(-21%);
  }

  /*
     La hauteur n'est plus imposée.
     Le contenu détermine naturellement la hauteur,
     avec une réserve en bas pour l'image.
  */

  .home-hero-inner {
    min-height: 0;

    background:
      linear-gradient(
        180deg,
        rgba(235, 240, 250, .99) 0%,
        rgba(235, 240, 250, .97) 42%,
        rgba(235, 240, 250, .76) 56%,
        rgba(235, 240, 250, .30) 70%,
        rgba(235, 240, 250, 0) 82%
      ),
      url("assets/home-surfaces-multimateriaux-lr.png")
      72% center / cover
      no-repeat;
  }


  .home-hero-copy {
    width: 100%;
    max-width: none;

    padding:
      46px
      38px
      clamp(
        200px,
        25vw,
        230px
      );
  }


  .home-hero-copy h1 {
    font-size:
      clamp(
        40px,
        6vw,
        50px
      );
  }


  .home-hero-lead {
    max-width: 570px;
  }


  .home-hero-actions {
    display: flex;

    width: auto;

    flex-wrap: wrap;

    gap: 12px;
  }


  /*
     REACH occupe la partie basse du visuel,
     juste au-dessus du message.
  */

  .home-reach-link {
    position: absolute;

    left: auto;
    right: 28px;
    bottom: 82px;

    width:
      clamp(
        178px,
        25vw,
        190px
      );

    margin: 0;

    padding:
      8px
      11px;

    gap: 9px;

    transform: none;
  }


  .home-reach-link:hover {
    transform:
      translateY(-3px);
  }


  .home-reach-link img {
    width:
      clamp(
        48px,
        7vw,
        52px
      );
  }


  .home-reach-link span {
    max-width: 112px;

    font-size: .77rem;
    line-height: 1.18;
  }


  .home-hero-tagline {
    right: 28px;
    bottom: 20px;

    width: 205px;

    padding-bottom: 11px;

    text-align: right;

    font-size: .91rem;
    line-height: 1.22;
  }


  .home-hero-tagline::after {
    left: auto;
    right: 0;

    width: 96px;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ≤ 640 px
   ========================================================= */

@media (max-width: 640px) {

  /* ---------------------------------------------------------
     HEADER
     --------------------------------------------------------- */


  .home-header-inner {
    gap: 10px;
  }


  .home-header-inner .header-actions {
    gap: 8px;
  }


  .home-header-inner .brand img {
    width: 152px;

    transform:
      translateY(-14%);
  }


  .home-header-inner .contact-button {
    min-height: 42px;

    padding:
      0
      14px;

    font-size: .9rem;
  }


  .home-menu-mobile summary {
    min-height: 42px;

    padding:
      0
      13px;
  }


  /* ---------------------------------------------------------
     CONTENEURS
     --------------------------------------------------------- */

  .home-section-inner,
  .home-hero-inner {
    width:
      min(
        calc(100% - 26px),
        var(--page)
      );
  }


  /* ---------------------------------------------------------
     HERO
     --------------------------------------------------------- */

  .home-hero {
    padding:
      36px
      0
      50px;
  }


  .home-hero-inner {
    min-height: 720px;

    border-radius: 20px;

    background:
      linear-gradient(
        180deg,
        rgba(235, 240, 250, .99) 0%,
        rgba(235, 240, 250, .97) 44%,
        rgba(235, 240, 250, .78) 57%,
        rgba(235, 240, 250, .34) 70%,
        rgba(235, 240, 250, 0) 82%
      ),
      url("assets/home-surfaces-multimateriaux-lr.png")
      85% center / cover
      no-repeat;
  }


  .home-hero-copy {
    width: 100%;
    max-width: none;

    padding:
      34px
      22px
      245px;
  }


  .home-hero-copy h1 {
    margin-bottom: 22px;

    font-size:
      clamp(
        36px,
        10.5vw,
        50px
      );
  }


  .home-hero-lead {
    font-size: 1.03rem;
    line-height: 1.48;
  }


  .home-hero-actions {
    display: grid;

    grid-template-columns: 1fr;

    max-width: 280px;

    gap: 12px;
  }


  .home-hero-actions .property-link {
    width: 100%;
  }


  /* ---------------------------------------------------------
     REACH
     --------------------------------------------------------- */

  .home-reach-link {
    position: absolute;

    left: auto;
    right: 20px;
    bottom: 94px;

    width: 174px;

    margin: 0;

    padding:
      7px
      10px;

    gap: 8px;

    transform: none;
  }


  .home-reach-link:hover {
    transform:
      translateY(-3px);
  }


  .home-reach-link img {
    width: 48px;
  }


  .home-reach-link span {
    max-width: 102px;

    font-size: .74rem;
    line-height: 1.18;
  }


  /* ---------------------------------------------------------
     MESSAGE INTÉGRÉ
     --------------------------------------------------------- */

  .home-hero-tagline {
    right: 20px;
    bottom: 22px;

    width: 185px;

    padding-bottom: 11px;

    text-align: right;

    font-size: .88rem;
    line-height: 1.22;
  }


  .home-hero-tagline::after {
    left: auto;
    right: 0;

    width: 92px;
  }


  /* ---------------------------------------------------------
     BLOC 2
     --------------------------------------------------------- */

  .home-experience {
    padding:
      0
      0
      22px;
  }


  .home-experience-card {
    padding: 20px;

    border-radius: 20px;
  }


  .home-experience-content h2 {
    margin-bottom: 18px;

    font-size: 2rem;
  }


  .home-experience-content > p:not(.home-experience-conclusion) {
    font-size: 1rem;
  }


  .home-experience-facts {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .home-experience-fact {
    min-height: 0;

    padding:
      13px
      14px;
  }


  .home-team-visual figcaption {
    padding:
      12px
      14px
      14px;
  }


  /* ---------------------------------------------------------
     BLOC 3
     --------------------------------------------------------- */

  .home-tech-final {
    margin-top: 32px;

    padding-bottom: 58px;
  }


  .home-tech-final-card {
    padding: 20px;

    border-radius: 20px;
  }


  .home-tech-final-content h2 {
    margin-bottom: 18px;

    font-size: 2rem;
  }


  .home-tech-final-content p {
    font-size: 1rem;
  }


  .home-tech-final-actions {
    grid-template-columns: 1fr;
  }


  .home-tech-final-actions .home-primary-action {
    width: 100%;
  }


  .home-tech-final-video figcaption {
    padding:
      11px
      14px
      13px;
  }

}

/* =========================================================
   MOBILE TACTILE — HEADER COMPACT
   ========================================================= */

@media (max-width: 640px) and (pointer: coarse) {

  :root {
    --header-height: 72px;
  }

}

/* =========================================================
   PAGE PROPRIÉTÉS
   ========================================================= */

.subpage-hero {
  padding: 88px 0 42px;
}

.subpage-hero-inner {
  width: min(calc(100% - 44px), var(--page));
  margin: 0 auto;
}

.subpage-kicker {
  margin: 0 0 16px;
  color: var(--bleu);
  font-size: .95rem;
  letter-spacing: .16em;
  font-weight: 800;
}

.subpage-hero h1 {
  margin: 0 0 22px;
  max-width: 900px;
  color: var(--violet);
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 760;
}

.subpage-intro {
  max-width: 930px;
  margin: 0;
  font-size: 1.34rem;
  line-height: 1.6;
  color: var(--texte);
}

.property-hub {
  padding: 18px 0 96px;
}

.property-hub-inner {
  width: min(calc(100% - 44px), var(--page));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.property-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(19, 37, 78, .08);
  display: flex;
  flex-direction: column;
}

/* =========================================================
   PROPRIÉTÉS — TUILES CLIQUABLES
   ========================================================= */

.property-card-link {
  color: var(--texte);
  text-decoration: none;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.property-card-link:hover {
  transform: translateY(-4px);

  box-shadow:
    0 22px 48px
    rgba(19, 37, 78, .10);
}


/* Bouton centré dans la tuile */

.property-card-link .property-link {
  align-self: center;

  margin-top: auto;
}


/* Toute la tuile déclenche également l'effet du bouton */

.property-card-link:hover .property-link {
  background:
    rgba(123, 25, 124, .08);

  color: var(--violet);
}

.property-photo-placeholder {
  min-height: 210px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      rgba(41, 73, 158, .08),
      rgba(123, 25, 124, .10)
    );

  color: var(--muted);

  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .14em;

  border-bottom:
    1px solid
    rgba(23, 51, 111, .08);
}


.property-card-photo,
.property-card-video {
  display: block;

  width: 100%;
  height: 210px;

  object-fit: cover;

  border-bottom:
    1px solid
    rgba(23, 51, 111, .08);
}


.property-card-video {
  pointer-events: none;
}

.property-card-body {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.property-card-body h2 {
  margin: 0 0 16px;
  color: var(--bleu-fonce);
  font-size: 1.75rem;
  line-height: 1.12;
  font-weight: 730;
}

.property-card-body p {
  margin: 0 0 24px;
  font-size: 1.12rem;
  line-height: 1.58;
  color: var(--texte);
  flex-grow: 1;
}

.property-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--bleu-fonce);
  background: rgba(41, 73, 158, .07);
  border: 1px solid rgba(41, 73, 158, .16);
  font-weight: 650;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.property-link:hover {
  transform: translateY(-1px);
  background: rgba(123, 25, 124, .08);
  color: var(--violet);
}

@media (max-width: 1100px) {
  .property-hub-inner {
    grid-template-columns: 1fr;
  }

  .property-card {
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  .subpage-hero {
    padding: 42px 0 28px;
  }

  .subpage-hero-inner,
  .property-hub-inner {
    width: min(calc(100% - 26px), var(--page));
  }

  .subpage-kicker {
    font-size: .84rem;
  }

  .subpage-hero h1 {
    font-size: clamp(34px, 11vw, 52px);
    margin-bottom: 18px;
  }

  .subpage-intro {
    font-size: 1.06rem;
    line-height: 1.52;
  }

  .property-hub {
    padding-bottom: 60px;
  }

  .property-photo-placeholder {
    min-height: 170px;
  }

  .property-card-body {
    padding: 22px 20px 24px;
  }

  .property-card-body h2 {
    font-size: 1.42rem;
  }

  .property-card-body p {
    font-size: 1.02rem;
    line-height: 1.5;
  }
}
/* =========================================================
   SOUS-PAGES PROPRIÉTÉS
   GABARIT COMMUN
   ========================================================= */

.property-detail-hero {
  padding: 38px 0 42px;
}

.property-detail-inner {
  width: min(calc(100% - 44px), var(--page));
  margin: 0 auto;
}


/* Retour vers le hub */

.property-back {
  display: inline-block;
  margin-bottom: 26px;

  color: var(--bleu);

  text-decoration: none;

  font-size: 1rem;
  font-weight: 650;
}

.property-back:hover {
  color: var(--violet);
}


/* Grand titre */

.property-detail-hero h1 {
  margin: 0 0 28px;

  max-width: 960px;

  color: var(--violet);

  font-size: clamp(48px, 5vw, 76px);
  line-height: 1.01;

  letter-spacing: -.045em;

  font-weight: 760;
}


/* Première phrase */

.property-detail-lead {
  max-width: 920px;

  margin: 0 0 22px;

  color: var(--bleu-fonce);

  font-size: 1.65rem;
  line-height: 1.42;

  font-weight: 600;
}


/* Intro */

.property-detail-intro {
  max-width: 920px;

  margin: 0;

  font-size: 1.28rem;
  line-height: 1.58;
}


/* =========================================================
   BLOC PRINCIPAL TEXTE + PHOTO
   ========================================================= */

.property-detail-main {
  padding: 36px 0 80px;
}

.property-detail-grid {
  width: min(calc(100% - 44px), var(--page));

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.05fr .95fr;

  gap: 60px;

  align-items: center;
}


/* Texte */

.property-detail-text {
  padding: 34px 34px 36px;

  background: var(--gris-carte);

  border-left: 6px solid var(--violet);

  border-radius:
    0
    var(--rayon)
    var(--rayon)
    0;
}


.property-detail-text h2 {
  margin: 0 0 22px;

  color: var(--bleu-fonce);

  font-size: 2rem;
  line-height: 1.15;

  font-weight: 730;
}


.property-detail-text p {
  margin: 0 0 22px;

  font-size: 1.18rem;
  line-height: 1.58;
}


.property-detail-text p:last-child {
  margin-bottom: 0;
}


/* PHOTO temporaire */

.property-photo-large {
  min-height: 390px;

  border-radius: var(--rayon);

  border: 1px solid var(--bordure);

  overflow: hidden;
}
/* =========================================================
   EXEMPLE VIDÉO — SOUS-PAGES PROPRIÉTÉS
   ========================================================= */

.property-example-video {
  margin: 0;

  display: flex;
  flex-direction: column;

  background: var(--blanc);

  cursor: pointer;
}

.property-example-video video {
  display: block;

  width: 100%;
  height: 320px;

  object-fit: cover;
}

.property-example-video figcaption {
  padding: 14px 18px 16px;

  text-align: center;

  color: var(--muted);

  background:
    rgba(41, 73, 158, .05);

  font-size: .95rem;
  line-height: 1.35;

  font-style: italic;
}
/* =========================================================
   EXEMPLE ILLUSTRÉ — SOUS-PAGES PROPRIÉTÉS
   ========================================================= */

.property-example-figure {
  margin: 0;

  display: flex;
  flex-direction: column;

  background: var(--blanc);
}

.property-example-figure img {
  display: block;

  width: 100%;
  height: 320px;

  object-fit: cover;
}

.property-example-figure figcaption {
  padding: 16px 18px 18px;

  text-align: center;

  background:
    rgba(41, 73, 158, .05);
}

.property-example-figure figcaption strong {
  display: block;

  color: var(--bleu-fonce);

  font-size: 1.05rem;
  font-weight: 700;
}

.property-example-figure figcaption span {
  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: .92rem;
  line-height: 1.35;
}

.property-example-image {
  margin: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  background: var(--blanc);
}


.property-example-image img {
  display: block;

  width: 100%;
  height: 320px;

  padding: 24px;

  object-fit: contain;
}


.property-example-image figcaption {
  padding: 14px 18px 16px;

  text-align: center;

  color: var(--muted);

  background:
    rgba(41, 73, 158, .05);

  font-size: .95rem;
  line-height: 1.35;
  font-style: italic;
}

/* =========================================================
   AVANTAGES
   ========================================================= */

.property-benefits {
  padding: 12px 0 86px;
}


.property-benefits h2 {
  margin: 0 0 34px;

  color: var(--violet);

  font-size: 2.45rem;
  line-height: 1.1;

  font-weight: 730;
}


.property-benefits-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}


.property-benefit {
  padding: 28px 26px;

  background: var(--blanc);

  border: 1px solid var(--bordure);

  border-radius: var(--rayon);

  box-shadow:
    0 15px 38px
    rgba(19, 37, 78, .06);
}


.property-benefit h3 {
  margin: 0 0 14px;

  color: var(--bleu-fonce);

  font-size: 1.42rem;
  line-height: 1.18;

  font-weight: 720;
}


.property-benefit p {
  margin: 0;

  font-size: 1.08rem;
  line-height: 1.52;
}

.property-benefit-media {
  margin: 26px 0 0;

  overflow: hidden;

  border-radius: 18px;
  border: 1px solid rgba(23, 51, 111, 0.10);

  background: var(--blanc);
}
.property-benefit-media figcaption {
  padding: 10px 12px 11px;

  text-align: center;

  color: var(--muted);

  font-size: .88rem;
  line-height: 1.35;

  font-weight: 400;
}
.property-benefit-media video,
.property-benefit-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   AUTRES PROPRIÉTÉS — FONCTIONNALITÉS
   ========================================================= */

/* =========================================================
   AUTRES PROPRIÉTÉS — HARMONISATION DES CARTES
   ========================================================= */


/* ---------------------------------------------------------
   BLOC PRINCIPAL
   Garde la signature violette mais montre le fond de page
   --------------------------------------------------------- */

.page-other-properties .property-detail-text {
  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .12);

  border-left:
    6px solid
    var(--violet);

  border-radius:
    0
    var(--rayon)
    var(--rayon)
    0;

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .025);
}


/* ---------------------------------------------------------
   ILLUSTRATION RÉVERSIBLE
   --------------------------------------------------------- */

.page-other-properties .property-example-image {
  background:
    transparent;

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .025);
}


.page-other-properties .property-example-image figcaption {
  background:
    transparent;
}


/* ---------------------------------------------------------
   DOMAINES D'APPLICATION
   --------------------------------------------------------- */

.page-other-properties .property-applications-box {
  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .12);

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .025);
}


/* ---------------------------------------------------------
   CTA FINAL
   --------------------------------------------------------- */

.page-other-properties .property-cta-box {
  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .12);

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .025);
}


/* =========================================================
   FONCTION FORTE + DÉMONSTRATION JANUS
   ========================================================= */

.other-properties-feature {
  margin-bottom: 24px;

  display: grid;

  grid-template-columns:
    minmax(0, .82fr)
    minmax(420px, 1.18fr);

  gap: 24px;

  align-items: center;
}


/* =========================================================
   TUILE D'EXPLICATION
   ========================================================= */

.other-properties-feature-copy {
  align-self: center;

  padding:
    28px
    26px;

  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .12);

  border-radius:
    var(--rayon);

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .025);
}


.other-properties-feature-copy h3 {
  margin:
    0
    0
    14px;

  color:
    var(--bleu-fonce);

  font-size: 1.42rem;
  line-height: 1.18;

  font-weight: 720;
}


.other-properties-feature-copy p {
  margin:
    0
    0
    18px;

  font-size: 1.08rem;
  line-height: 1.52;
}


.other-properties-feature-copy p:last-child {
  margin-bottom: 0;
}


.other-properties-feature-highlight {
  color:
    var(--bleu-fonce);

  font-weight: 700;
}


/* =========================================================
   VIDÉO
   ========================================================= */

.other-properties-feature-media {
  margin: 0;

  overflow: hidden;

  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .12);

  border-radius:
    var(--rayon);

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .025);
}


.other-properties-feature-media {
  width:
    min(
      100%,
      560px
    );

  justify-self: center;
}


.other-properties-feature-media video {
  display: block;

  width: calc(100% + 6px);
  height: auto;

  margin-left: -3px;

  aspect-ratio: 736 / 576;

  object-fit: cover;

  background: #fff;
}

.other-properties-feature-media figcaption {
  padding:
    13px
    18px
    15px;

  color:
    var(--muted);

  background:
    transparent;

  text-align: center;

  font-size: .9rem;
  line-height: 1.35;

  font-style: italic;
}


/* =========================================================
   DEUX AUTRES FONCTIONNALITÉS
   ========================================================= */

.other-properties-secondary {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 24px;
}


.other-properties-secondary-card {
  padding:
    26px
    26px;

  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .12);

  border-radius:
    var(--rayon);

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .025);
}


.other-properties-secondary-card h3 {
  margin:
    0
    0
    12px;

  color:
    var(--bleu-fonce);

  font-size: 1.42rem;
  line-height: 1.18;

  font-weight: 720;
}


.other-properties-secondary-card p {
  margin: 0;

  font-size: 1.08rem;
  line-height: 1.52;
}


/* =========================================================
   PASSERELLE VERS LES AVANTAGES
   ========================================================= */

.property-tech-focus.other-properties-tech-focus {
  margin-top: 34px;

  padding:
    28px
    30px;

  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .14);

  border-radius:
    var(--rayon);

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .025);

  text-align: center;
}


.property-tech-focus.other-properties-tech-focus p {
  margin:
    0
    0
    20px;

  color:
    var(--bleu-fonce);

  font-size: 1.25rem;
  line-height: 1.42;

  font-weight: 700;
}


.property-tech-focus.other-properties-tech-focus .property-link {
  display: inline-flex;

  width: fit-content;

  margin:
    0
    auto;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .other-properties-feature {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .other-properties-feature-copy {
    justify-self: stretch;
  }


  .other-properties-secondary {
    grid-template-columns: 1fr;

    gap: 18px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .other-properties-feature-copy,
  .other-properties-secondary-card {
    padding:
      22px
      20px;
  }


  .other-properties-feature-media video {
    height: auto;
  }


  .other-properties-feature-media figcaption {
    padding:
      11px
      14px
      13px;
  }


  .other-properties-tech-focus {
    margin-top: 26px;

    padding:
      22px
      20px;
  }


  .other-properties-tech-focus p {
    font-size: 1.1rem;
  }

}
/* =========================================================
   DOMAINES D'APPLICATION
   Commun aux sous-pages propriétés
   ========================================================= */

.property-applications {
  padding: 0 0 86px;
}


/* Même niveau de titre que
   "Ce que le traitement peut apporter" */

.property-applications h2 {
  margin: 0 0 34px;

  color: var(--violet);

  font-size: 2.45rem;
  line-height: 1.1;

  font-weight: 730;
}


.property-applications-box {
  padding: 30px 32px;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow:
    0 15px 38px
    rgba(19, 37, 78, .06);
}


.property-applications-box p {
  margin: 0 0 26px;

  font-size: 1.12rem;
  line-height: 1.52;
}


/* Bouton centré dans la carte */

.property-applications-box .property-link {
  display: flex;

  width: fit-content;

  margin: 0 auto;
}

/* =========================================================
   BARRE DE RETOUR STICKY
   Commune aux pages internes
   ========================================================= */

.property-backbar {
  display: none;
  position: sticky;
  top: var(--header-height);
  z-index: 40;

  padding: 0 0 8px;

  background:
  linear-gradient(
      rgba(41, 73, 158, .16),
      rgba(41, 73, 158, .16)
    ),
  rgba(251, 251, 253, .94);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


.property-backbar .property-back {
  margin-bottom: 0;
}


/* =========================================================
   CTA
   ========================================================= */

.property-detail-cta {
  padding: 0 0 96px;
}


.property-cta-box {
  padding: 34px 38px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 32px;

  background: var(--gris-carte);

  border-radius: var(--rayon);

  border:
    1px solid
    rgba(41, 73, 158, .10);
}


.property-cta-box h2 {
  margin: 0 0 8px;

  color: var(--bleu-fonce);

  font-size: 1.8rem;

  font-weight: 730;
}


.property-cta-box p {
  margin: 0;

  font-size: 1.12rem;
  line-height: 1.45;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .property-detail-grid {
    grid-template-columns: 1fr;

    gap: 36px;
  
  }

  
  .property-benefits-grid {
    grid-template-columns: 1fr;
  }


  .property-photo-large {
    min-height: 300px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .property-backbar {
  padding: 10px 0 6px;
  }  

  .property-detail-hero {
    padding: 42px 0 28px;
  }


  .property-detail-inner,
  .property-detail-grid {
    width:
      min(
        calc(100% - 26px),
        var(--page)
      );
  }


  .property-detail-hero h1 {
    font-size:
      clamp(
        38px,
        11vw,
        54px
      );
  }


  .property-detail-lead {
    font-size: 1.3rem;
  }


  .property-detail-intro {
    font-size: 1.06rem;
  }


  .property-detail-main {
    padding: 26px 0 54px;
  }


  .property-detail-text {
    padding: 24px 20px 26px;

    border-left-width: 5px;
  }


  .property-detail-text h2 {
    font-size: 1.55rem;
  }


  .property-detail-text p {
    font-size: 1.04rem;
  }


  .property-photo-large {
   min-height: 210px;
  }

  .property-example-video video {
  height: 210px;
  }
	
  .property-example-figure img {
   height: 210px;
  }

  .property-card-photo,
  .property-card-video {
   height: 170px;
  }

  .property-benefits {
    padding-bottom: 56px;
  }


  .property-benefits h2 {
    font-size: 1.9rem;
  }


  .property-benefit {
    padding: 22px 20px;
  }


  .property-cta-box {
    padding: 26px 22px;

    flex-direction: column;

    align-items: flex-start;
  }

.property-applications {
  padding-bottom: 56px;
}

.property-applications h2 {
  font-size: 1.9rem;
}

.property-applications-box {
  padding: 24px 20px;
}

.property-applications-box p {
  font-size: 1.04rem;
}

  .property-example-image img {
    height: 220px;

    padding: 16px;
  }
}

/* =========================================================
   LIEN VERS LES RÉALISATIONS
   Commun aux sous-pages propriétés
   ========================================================= */

.property-realizations-link {
  display: inline-block;

  /* rapproche le lien du titre */
  margin: -12px 0 28px;

  color: var(--violet);

  text-decoration: none;

  font-size: 1.08rem;
  font-weight: 650;

  transition:
    color .18s ease,
    transform .18s ease;
}

.property-realizations-link:hover {
  color: var(--bleu);
  transform: translateX(4px);
}


/* =========================================================
   PAGE DOMAINES D'APPLICATION
   ========================================================= */

.applications-hub {
  padding: 18px 0 86px;
}


.applications-grid {
  width: min(calc(100% - 44px), var(--page));

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 26px;
}


/* =========================================================
   CARTES
   ========================================================= */

.application-card {
  min-height: 290px;

  display: grid;
  grid-template-columns: 110px 1fr;

  overflow: hidden;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow:
    0 18px 46px
    rgba(19, 37, 78, .07);
}


/* =========================================================
   PICTOGRAMMES
   ========================================================= */

.application-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      rgba(41, 73, 158, .07),
      rgba(123, 25, 124, .11)
    );

  border-right:
    1px solid
    rgba(23, 51, 111, .08);
}


.application-icon svg {
  width: 58px;
  height: 58px;

  fill: none;

  stroke: var(--bleu-fonce);
  stroke-width: 2.3;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   TEXTE CARTES
   ========================================================= */

.application-card-body {
  padding: 28px 30px;
}


.application-card-body h2 {
  margin: 0 0 14px;

  color: var(--bleu-fonce);

  font-size: 1.65rem;
  line-height: 1.15;

  font-weight: 730;
}


.application-card-body p {
  margin: 0 0 18px;

  font-size: 1.08rem;
  line-height: 1.52;
}


.application-card-body ul {
  margin: 0;

  padding-left: 20px;
}


.application-card-body li {
  margin: 6px 0;

  font-size: 1rem;
  line-height: 1.42;

  color: var(--muted);
}


/* =========================================================
   PASSERELLE — TECHNOLOGIE / PROPRIÉTÉS / SOLUTIONS
   ========================================================= */

.applications-positioning {
  width: min(calc(100% - 40px), var(--page));
  margin: 0 auto 86px;

  padding: 30px 32px;

  background: var(--gris-carte);

  border-left: 6px solid var(--violet);
  border-radius: 0 var(--rayon) var(--rayon) 0;

  box-shadow:
    inset 0 0 0 1px rgba(41, 73, 158, .05);
}

.applications-positioning h2 {
  margin: 0 0 14px;

  color: var(--bleu-fonce);

  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 730;
}
.applications-positioning p {
  margin: 0;

  font-size: 1.08rem;
  line-height: 1.52;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .applications-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .applications-grid {
    width:
      min(
        calc(100% - 26px),
        var(--page)
      );

    gap: 18px;
  }


  .application-card {
    min-height: 0;

    grid-template-columns: 76px 1fr;
  }


  .application-icon svg {
    width: 42px;
    height: 42px;
  }


  .application-card-body {
    padding: 22px 20px;
  }


  .application-card-body h2 {
    font-size: 1.35rem;
  }


  .application-card-body p {
    font-size: 1rem;
  }


  .application-card-body li {
    font-size: .94rem;
  }


    .applications-positioning {
    width: min(calc(100% - 26px), var(--page));

    margin-bottom: 56px;

    padding: 24px 20px;

    border-left-width: 5px;
  }

  .applications-positioning h2 {
    font-size: 1.55rem;
  }

  .applications-positioning p {
    font-size: 1.04rem;
  }

}

/* =========================================================
   PASSERELLE VERS LES AVANTAGES
   COMMUNE AUX SOUS-PAGES PROPRIÉTÉS
   ========================================================= */

.property-tech-focus {
  margin-top: 34px;

  padding:
    28px
    30px;

  background:
    transparent;

  border:
    1px solid
    var(--carte-bordure);

  border-radius:
    var(--rayon);

  box-shadow:
    var(--carte-ombre);

  text-align:
    center;
}


.property-tech-focus p {
  margin:
    0
    0
    20px;

  color:
    var(--bleu-fonce);

  font-size:
    1.25rem;

  line-height:
    1.42;

  font-weight:
    700;
}


.property-tech-focus .property-link {
  display:
    inline-flex;

  width:
    fit-content;

  margin:
    0
    auto;
}


/* Adhésion et Barrières :
   le bloc est directement dans la section,
   on lui redonne la largeur du contenu commun. */

.property-benefits > .property-tech-focus {
  width:
    min(
      calc(100% - 44px),
      var(--page)
    );

  margin-left:
    auto;

  margin-right:
    auto;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .property-tech-focus {
    padding:
      22px
      20px;
  }


  .property-tech-focus p {
    font-size:
      1.1rem;
  }


  .property-benefits > .property-tech-focus {
    width:
      min(
        calc(100% - 26px),
        var(--page)
      );
  }

}

/* =========================================================
   PAGE SOLUTIONS
   ========================================================= */

.solutions-punch {
  margin-top: 34px;

  padding: 22px 26px;

  background: var(--gris-carte);

  border-left: 6px solid var(--violet);
  border-radius: 0 var(--rayon) var(--rayon) 0;

  color: var(--bleu);

  font-size: 1.35rem;
  line-height: 1.4;

  font-weight: 650;
}

.solutions-punch strong {
  display: block;

  margin-top: 3px;

  color: var(--bleu);
}



/* =========================================================
   TITRES DE PARTIES
   ========================================================= */

.solutions-section-heading {
  display: flex;
  align-items: flex-start;

  gap: 22px;

  margin-bottom: 32px;
}


.solutions-section-heading > span {
  flex: 0 0 auto;

  color: var(--violet);

  font-size: 1rem;
  font-weight: 800;

  letter-spacing: .12em;
}


.solutions-section-heading h2,
.solutions-flow h2,
.solutions-why h2 {
  margin: 0;

  color: var(--violet);

  font-size: 2.45rem;
  line-height: 1.1;

  font-weight: 730;
}


.solutions-section-heading p {
  margin: 10px 0 0;

  color: var(--muted);

  font-size: 1.1rem;
}



/* =========================================================
   DÉMONSTRATION SUR LES PIÈCES
   ========================================================= */

.solutions-proof {
  padding: 18px 0 86px;
}


.solutions-proof-card {
  display: grid;
  grid-template-columns: 1.5fr .8fr;

  gap: 0;

  overflow: hidden;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow:
    0 18px 46px
    rgba(19, 37, 78, .07);
}


.solutions-proof-main {
  padding: 34px 36px;
}


.solutions-proof-main h3 {
  margin: 0 0 20px;

  color: var(--bleu-fonce);

  font-size: 1.65rem;
  line-height: 1.2;
}


.solutions-proof-main p {
  margin: 0 0 18px;

  font-size: 1.1rem;
  line-height: 1.55;
}


.solutions-proof-main p:last-child {
  margin-bottom: 0;
}


.solutions-proof-highlight {
  margin-top: 26px !important;

  padding: 18px 20px;

  background: var(--gris-carte);

  border-left: 5px solid var(--violet);
}


.solutions-proof-highlight strong {
  color: var(--bleu);
}


.solutions-is2m-note {
  padding: 34px 30px;

  background:
    linear-gradient(
      145deg,
      rgba(41, 73, 158, .07),
      rgba(123, 25, 124, .10)
    );

  border-left:
    1px solid
    rgba(23, 51, 111, .08);
}


.solutions-is2m-note > strong {
  display: block;

  margin-bottom: 16px;

  color: var(--bleu-fonce);

  font-size: 1.3rem;
  line-height: 1.25;
}


.solutions-is2m-note p {
  margin: 0 0 16px;

  font-size: 1.03rem;
  line-height: 1.5;
}


.solutions-is2m-note p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SOLUTIONS — ILLUSTRATION CARACTÉRISATIONS IS2M
   ========================================================= */

.solutions-is2m-visual {
  width: 100%;
  max-width: 260px;

  margin: 24px auto 0;
}


.solutions-is2m-thumb {
  display: block;

  width: 100%;
  padding: 0;

  overflow: hidden;

  background: none;

  border:
    1px solid
    rgba(23, 51, 111, .12);

  border-radius: 16px;

  box-shadow:
    0 10px 26px
    rgba(19, 37, 78, .08);

  cursor: zoom-in;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.solutions-is2m-thumb:hover {
  transform: translateY(-2px);

  box-shadow:
    0 14px 30px
    rgba(19, 37, 78, .12);
}


.solutions-is2m-thumb img {
  display: block;

  width: 100%;
  height: auto;
}


.solutions-is2m-visual figcaption {
  margin-top: 10px;

  color: var(--muted);

  text-align: center;

  font-size: .82rem;
  line-height: 1.35;

  font-style: italic;
}


/* =========================================================
   LIGHTBOX IMAGE
   ========================================================= */

.image-lightbox {
  width: min(92vw, 1400px);

  padding: 0;

  overflow: visible;

  background: transparent;

  border: 0;

  border-radius: 18px;

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, .35);
}


.image-lightbox::backdrop {
  background:
    rgba(10, 18, 38, .82);
}


.image-lightbox img {
  display: block;

  width: 100%;
  max-height: 88vh;

  object-fit: contain;

  background: var(--blanc);

  border-radius: 18px;
}


.image-lightbox-close {
  position: absolute;

  top: 12px;
  right: 12px;

  z-index: 2;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--bleu-fonce);

  background:
    rgba(255, 255, 255, .92);

  border:
    1px solid
    rgba(23, 51, 111, .15);

  border-radius: 50%;

  font-size: 1.8rem;
  line-height: 1;

  cursor: pointer;
}

/* =========================================================
   INDUSTRIALISATION
   ========================================================= */

.solutions-industrial {
  padding: 0 0 86px;
}


.solutions-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 28px;
}


.solutions-choice {
  display: flex;
  flex-direction: column;

  padding: 32px;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow:
    0 18px 46px
    rgba(19, 37, 78, .07);
}


.solutions-choice-kicker {
  margin-bottom: 14px;

  color: var(--violet);

  font-size: .88rem;
  font-weight: 800;

  letter-spacing: .13em;
}


.solutions-choice h3 {
  margin: 0 0 20px;

  color: var(--bleu-fonce);

  font-size: 1.8rem;
  line-height: 1.15;
}


.solutions-choice p {
  margin: 0 0 18px;

  font-size: 1.06rem;
  line-height: 1.52;
}


.solutions-choice-lead {
  color: var(--texte);

  font-size: 1.15rem !important;
  font-weight: 600;
}


.solutions-choice-bottom {
  margin-top: auto;
  padding-top: 18px;

  border-top: 1px solid var(--bordure);
}


.solutions-commercial-note {
  color: var(--muted);

  font-size: .96rem !important;
  font-weight: 600;
}

/* =========================================================
   LIENS TEXTE
   ========================================================= */

.inline-link {
  display: inline-block;

  color: var(--violet);
  font-weight: 650;
  text-decoration: none;

  transition:
    transform .18s ease,
    color .18s ease;
}

.inline-link:hover {
  color: var(--bleu);
  transform: translateX(4px);
}
.solutions-note {
  display: block;
  margin-top: 10px;

  font-style: italic;
  color: var(--muted);
}
/* =========================================================
   PARCOURS EN 3 ÉTAPES
   ========================================================= */

.solutions-flow {
  padding: 0 0 86px;
}


.solutions-flow h2 {
  margin-bottom: 34px;
}


.solutions-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}


.solutions-flow-item {
  padding: 28px;

  background: var(--gris-carte);

  border-radius: var(--rayon);
}


.solutions-flow-item > span {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  background: var(--violet);

  border-radius: 50%;

  color: var(--blanc);

  font-weight: 750;
}


.solutions-flow-item h3 {
  margin: 0 0 12px;

  color: var(--bleu-fonce);

  font-size: 1.5rem;
}


.solutions-flow-item p {
  margin: 0;

  font-size: 1.04rem;
  line-height: 1.5;
}

.inline-link {
  color: var(--violet);
  font-weight: 650;
  text-decoration: none;
}

.inline-link:hover {
  color: var(--bleu);
}

/* =========================================================
   POURQUOI PLASM'INNOV
   ========================================================= */

.solutions-why {
  padding: 0 0 86px;
}


.solutions-why h2 {
  margin-bottom: 34px;
}


.solutions-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}


.solutions-why-card {
  padding: 28px;

  display: flex;
  flex-direction: column;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.solutions-why-card .property-link {
  margin-top: 20px;
  align-self: center;
}

.solutions-why-card h3 {
  margin: 0 0 12px;

  color: var(--bleu-fonce);

  font-size: 1.4rem;
  line-height: 1.2;
}


.solutions-why-card p {
  margin: 0;

  font-size: 1.03rem;
  line-height: 1.5;
}



/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .solutions-proof-card {
    grid-template-columns: 1fr;
  }


  .solutions-is2m-note {
    border-left: 0;

    border-top:
      1px solid
      rgba(23, 51, 111, .08);
  }


  .solutions-choice-grid {
    grid-template-columns: 1fr;
  }


  .solutions-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .solutions-punch {
    padding: 20px;

    font-size: 1.15rem;
  }


  .solutions-section-heading {
    gap: 14px;
  }


  .solutions-section-heading h2,
  .solutions-flow h2,
  .solutions-why h2 {
    font-size: 1.9rem;
  }


  .solutions-proof,
  .solutions-industrial,
  .solutions-flow,
  .solutions-why {
    padding-bottom: 56px;
  }


  .solutions-proof-main,
  .solutions-is2m-note {
    padding: 26px 22px;
  }


  .solutions-proof-main h3 {
    font-size: 1.4rem;
  }


  .solutions-proof-main p {
    font-size: 1rem;
  }


  .solutions-choice {
    padding: 26px 22px;
  }


  .solutions-choice h3 {
    font-size: 1.5rem;
  }


  .solutions-choice p {
    font-size: 1rem;
  }


  .solutions-flow-grid,
  .solutions-why-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .solutions-is2m-visual {
  max-width: none;
  }
}

/* =========================================================
   PAGE TECHNOLOGIE
   ========================================================= */

.technology-inner {
  width: min(calc(100% - 40px), var(--page));
  margin: 0 auto;
}


/* =========================================================
   ACCÈS — AVANTAGES / HISTOIRE / PUBLICATIONS
   ========================================================= */

.technology-more {
  padding: 0 0 78px;
}

.technology-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.technology-more-card {
  display: flex;
  flex-direction: column;

  padding: 30px 32px 28px;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow: 0 15px 38px rgba(19, 37, 78, .06);

  color: var(--texte);
  text-decoration: none;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.technology-more-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 22px 48px rgba(19, 37, 78, .10);
}

.technology-more-card h3 {
  margin: 0 0 18px;

  color: var(--bleu-fonce);

  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 700;
}

.technology-more-card p {
  margin: 0 0 28px;

  font-size: 1.05rem;
  line-height: 1.5;
}

.technology-more-card strong {
  display: inline-flex;

  width: fit-content;
  min-height: 46px;

  margin-top: auto;

  padding: 0 18px;

  align-items: center;
  justify-content: center;
  align-self: center;

  color: var(--bleu-fonce);

  background:
    rgba(41, 73, 158, .07);

  border:
    1px solid
    rgba(41, 73, 158, .16);

  border-radius: 999px;

  font-size: 1rem;
  font-weight: 650;

  transition:
    background .18s ease,
    color .18s ease;
}

.technology-more-card:hover strong {
  background:
    rgba(123, 25, 124, .08);

  color: var(--violet);
}

/* =========================================================
   CONTENU TECHNOLOGIQUE — VINCENT
   ========================================================= */

.technology-work {
  padding: 0 0 86px;
}

.technology-work-card {
  padding: 40px;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow: 0 18px 46px rgba(19, 37, 78, .07);
}

.technology-work-heading {
  margin-bottom: 30px;
  padding: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(123, 25, 124, .09),
      rgba(41, 73, 158, .07)
    );

  border-left: 6px solid var(--violet);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

.technology-work-kicker {
  display: block;

  margin-bottom: 10px;

  color: var(--violet);

  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.technology-work-heading h2 {
  margin: 0 0 14px;

  color: var(--bleu-fonce);

  font-size: 2.35rem;
  line-height: 1.1;
  font-weight: 730;
}

.technology-work-heading p {
  max-width: 900px;
  margin: 0;

  font-size: 1.08rem;
  line-height: 1.5;
}


/* =========================================================
   TECHNOLOGIE — EXPLICATION
   ========================================================= */

.technology-explainer {
  padding: 0 0 86px;
}


.technology-explainer-section {
  margin-bottom: 70px;
}


.technology-explainer-section:last-child {
  margin-bottom: 0;
}


.technology-section-heading {
  margin-bottom: 28px;
}


.technology-section-heading h2 {
  margin: 0;

  color: var(--violet);

  font-size: 2.45rem;
  line-height: 1.1;
  font-weight: 730;
}


/* =========================================================
   FONCTIONNEMENT
   ========================================================= */

.technology-process-card {
  display: grid;

  grid-template-columns:
    minmax(0, .95fr)
    minmax(0, 1.05fr);

  gap: 42px;

  align-items: center;

  padding: 32px;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow:
    0 18px 46px
    rgba(19, 37, 78, .07);
}


.technology-process-visual {
  margin: 0;

  overflow: hidden;

  background: var(--blanc);

  border:
    1px solid
    rgba(23, 51, 111, .10);

  border-radius: 18px;
}


.technology-process-visual img {
  display: block;

  width: 100%;
  height: auto;
}


.technology-process-steps {
  display: grid;

  gap: 0;
}


.technology-process-step {
  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr);

  gap: 15px;

  align-items: start;

  padding: 17px 0;

  border-bottom:
    1px solid
    rgba(23, 51, 111, .10);
}


.technology-process-step:first-child {
  padding-top: 0;
}


.technology-process-step:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}


.technology-process-step > span {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--bleu-fonce);

  background:
    rgba(41, 73, 158, .07);

  border:
    1px solid
    rgba(41, 73, 158, .16);

  border-radius: 50%;

  font-size: 1rem;
  font-weight: 750;
}


.technology-process-step h3 {
  margin: 0 0 5px;

  color: var(--bleu-fonce);

  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
}


.technology-process-step p {
  margin: 0;

  font-size: 1.04rem;
  line-height: 1.48;
}


/* =========================================================
   MAÎTRISE DU RÉACTEUR
   ========================================================= */

.technology-mastery-card {
  display: grid;

  grid-template-columns:
    minmax(300px, .85fr)
    minmax(0, 1.15fr);

  gap: 42px;

  align-items: center;

  padding: 32px;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow:
    0 18px 46px
    rgba(19, 37, 78, .07);
}


.technology-reactor-photo {
  margin: 0;

  overflow: hidden;

  background: var(--blanc);

  border:
    1px solid
    rgba(23, 51, 111, .10);

  border-radius: 18px;
}


.technology-reactor-photo img {
  display: block;

  width: 100%;
  height: auto;
}

.technology-reactor-photo-secondary {
  width: 44% !important;
  aspect-ratio: 4 / 5;

  margin: 18px auto;

  object-fit: cover;

  border-radius: 14px;
}

.technology-reactor-photo figcaption {
  padding: 11px 14px 13px;

  text-align: center;

  color: var(--muted);

  background:
    rgba(41, 73, 158, .04);

  font-size: .86rem;
  line-height: 1.35;
}


.technology-mastery-copy p {
  margin: 0 0 17px;

  font-size: 1.07rem;
  line-height: 1.52;
}


.technology-mastery-copy p strong {
  color: var(--bleu);

  font-weight: 700;
}

.technology-mastery-copy p:first-child strong {
  display: block;

  color: var(--bleu-fonce);

  font-size: 1.28rem;
  line-height: 1.3;
  font-weight: 750;
}

.technology-mastery-note {
  color: var(--muted);

  font-size: .98rem !important;
}


.technology-platform-punch {
  margin-top: 26px;

  padding: 20px 22px;

  background:
    rgba(41, 73, 158, .06);

  border-left:
    5px solid
    var(--bleu);

  border-radius:
    0 16px 16px 0;
}


.technology-platform-punch strong,
.technology-platform-punch span {
  display: block;
}


.technology-platform-punch strong {
  color: var(--bleu-fonce);

  font-size: 1.24rem;
  font-weight: 750;
}


.technology-platform-punch span {
  margin-top: 4px;

  color: var(--bleu);

  font-size: 1.08rem;
  font-weight: 650;
}


/* =========================================================
   NOTRE SAVOIR-FAIRE
   ========================================================= */

.technology-knowhow-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;
}


.technology-knowhow-card {
  padding: 28px 26px;

  background: var(--blanc);

  border:
    1px solid
    var(--bordure);

  border-top:
    4px solid
    rgba(41, 73, 158, .65);

  border-radius: var(--rayon);

  box-shadow:
    0 15px 38px
    rgba(19, 37, 78, .06);
}


.technology-knowhow-card h3 {
  margin: 0 0 7px;

  color: var(--bleu-fonce);

  font-size: 1.45rem;
  line-height: 1.18;
  font-weight: 730;
}


.technology-knowhow-subtitle {
  display: block;

  margin-bottom: 18px;

  color: var(--bleu);

  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
}


.technology-knowhow-card p {
  margin: 0;

  font-size: 1.03rem;
  line-height: 1.52;
}


.technology-knowhow-card p strong {
  color: var(--bleu);

  font-weight: 700;
}

.technology-knowhow-punch {
  width: 55%;

  margin-top: 26px;
  margin-left: auto;

  background: var(--blanc);

  border:
    1px solid
    rgba(23, 51, 111, .10);

  border-left:
    5px solid
    var(--bleu);

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .05);
}

/* =========================================================
   LIMITE
   ========================================================= */

.technology-limit {
  margin-top: -4px;
}


.technology-limit-card {
  padding: 28px 32px;

  background: var(--gris-carte);

  border-left:
    6px solid
    #8b1f2d;

  border-radius:
    0 var(--rayon) var(--rayon) 0;
}


.technology-limit-card h2 {
  margin: 0 0 14px;

  color: #8b1f2d;

  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 730;
}


.technology-limit-card p {
  margin: 0 0 10px;

  max-width: 950px;

  font-size: 1.05rem;
  line-height: 1.5;
}


.technology-limit-card > strong {
  display: block;

  margin-top: 18px;

  color: #8b1f2d;

  text-align: center;

  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 750;
}

/* =========================================================
   LIENS VERS PROPRIÉTÉS / SOLUTIONS
   ========================================================= */

.technology-links {
  padding: 0 0 86px;
}

.technology-links h2 {
  margin: 0 0 34px;

  color: var(--violet);

  font-size: 2.45rem;
  line-height: 1.1;
  font-weight: 730;
}

.technology-links-box {
  padding: 30px 32px;

  background: var(--gris-carte);

  border-radius: var(--rayon);
}

.technology-links-box p {
  max-width: 900px;

  margin: 0 auto 28px;

  text-align: center;

  font-size: 1.1rem;
  line-height: 1.52;
}

.technology-links-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 16px;
}
.applications-positioning
.technology-links-actions {
  margin-top: 24px;
}

/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .technology-more-grid {
    grid-template-columns: 1fr;
  }

.technology-process-card,
.technology-mastery-card {
  grid-template-columns: 1fr;

  gap: 30px;
}


.technology-process-visual,
.technology-reactor-photo {
  width: 100%;
  max-width: 680px;

  justify-self: center;
}


.technology-knowhow-grid {
  grid-template-columns: 1fr;
}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .technology-inner {
    width: min(calc(100% - 26px), var(--page));
  }


  /* ---------------------------------------------------------
     AVANTAGES / HISTOIRE
     --------------------------------------------------------- */

  .technology-more {
    padding-bottom: 56px;
  }

  .technology-more-grid {
    gap: 18px;
  }

  .technology-more-card {
    padding: 24px 20px;
  }

  .technology-more-card h3 {
    margin-bottom: 14px;

    font-size: 1.5rem;
  }

  .technology-more-card p {
    margin-bottom: 22px;

    font-size: 1rem;
  }


  /* ---------------------------------------------------------
     CONTENU TECHNOLOGIQUE
     --------------------------------------------------------- */

  .technology-work {
    padding-bottom: 56px;
  }

  .technology-work-card {
    padding: 22px;
  }

  .technology-work-heading {
    margin-bottom: 22px;
    padding: 24px 20px;
  }

  .technology-work-heading h2 {
    font-size: 1.9rem;
  }

  .technology-work-heading p {
    font-size: 1rem;
  }

  .technology-confidentiality {
    padding: 22px 20px;
  }

  .technology-confidentiality p {
    font-size: 1rem;
  }


  /* ---------------------------------------------------------
     PROPRIÉTÉS / SOLUTIONS
     --------------------------------------------------------- */

  .technology-links {
    padding-bottom: 56px;
  }

  .technology-links h2 {
    font-size: 1.9rem;
  }

  .technology-links-box {
    padding: 24px 20px;
  }

  .technology-links-box p {
    font-size: 1.04rem;
  }

  .technology-links-actions {
    flex-direction: column;
    align-items: center;
  }

  .technology-explainer {
   padding-bottom: 56px;
 }


  .technology-explainer-section {
    margin-bottom: 52px;
  }


  .technology-section-heading {
    margin-bottom: 22px;
  }


  .technology-section-heading h2 {
    font-size: 1.9rem;
  }


  .technology-process-card,
  .technology-mastery-card {
    padding: 20px;

    gap: 26px;
  }


  .technology-process-step {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    gap: 12px;
  }


  .technology-process-step > span {
    width: 36px;
    height: 36px;
  }


  .technology-process-step h3 {
    font-size: 1.16rem;
  }


  .technology-process-step p,
  .technology-mastery-copy p,
  .technology-knowhow-card p {
    font-size: 1rem;
  }


  .technology-platform-punch {
    padding: 18px;
  }


  .technology-platform-punch strong {
    font-size: 1.15rem;
  }


  .technology-platform-punch span {
    font-size: 1rem;
  }


  .technology-knowhow-card {
    padding: 24px 20px;
  }


  .technology-knowhow-summary {
    width: auto;

    border-radius: 18px;
  }


  .technology-limit-card {
    padding: 24px 20px;
  }


  .technology-limit-card h2 {
    font-size: 1.5rem;
  }

 .technology-knowhow-punch {
    width: 100%;
  }
}

/* =========================================================
   PAGE — AVANTAGES DE LA TECHNOLOGIE
   ========================================================= */

.tech-advantages {
  padding: 0 0 86px;
}

.tech-advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* =========================================================
   CARTES
   ========================================================= */

.tech-advantage-card {
  padding: 28px 26px;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow:
    0 15px 38px
    rgba(19, 37, 78, .06);
}


/* =========================================================
   PICTOGRAMMES — STYLE COMMUN
   ========================================================= */

.tech-advantage-icon {
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(41, 73, 158, .07),
      rgba(123, 25, 124, .08)
    );

  border-radius: 18px;
}

.tech-advantage-icon svg {
  width: 36px;
  height: 36px;

  stroke: var(--bleu-fonce);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   TEXTES
   ========================================================= */

.tech-advantage-card h2 {
  margin: 0 0 14px;

  color: var(--bleu-fonce);

  font-size: 1.42rem;
  line-height: 1.18;
  font-weight: 720;
}

.tech-advantage-card p {
  margin: 0;

  color: var(--texte);

  font-size: 1.05rem;
  line-height: 1.5;
}


/* =========================================================
   FOCUS — ENVIRONNEMENT / REACH

   IMPORTANT :
   Ce bloc reste APRÈS les règles génériques des pictos
   afin que ses dimensions spécifiques soient prioritaires.
   ========================================================= */

.tech-advantage-card--focus-green {
  border-color: rgba(74, 143, 87, .30);

  box-shadow:
    0 15px 38px rgba(19, 37, 78, .06),
    0 0 0 1px rgba(74, 143, 87, .06);
}

.tech-advantage-icon--reach {
  width: 118px;
  height: 118px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;

  background: transparent;
  border-radius: 0;
}

.tech-advantage-icon--reach img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  filter:
    drop-shadow(
      0 5px 10px
      rgba(19, 37, 78, .10)
    );
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .tech-advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .tech-advantages {
    padding-bottom: 56px;
  }

  .tech-advantages-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tech-advantage-card {
    padding: 24px 20px;
  }


  /* ---------------------------------------------------------
     PICTOGRAMMES GÉNÉRIQUES
     --------------------------------------------------------- */

  .tech-advantage-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 18px;

    border-radius: 16px;
  }

  .tech-advantage-icon svg {
    width: 32px;
    height: 32px;
  }


  /* ---------------------------------------------------------
     TEXTES
     --------------------------------------------------------- */

  .tech-advantage-card h2 {
    font-size: 1.35rem;
  }

  .tech-advantage-card p {
    font-size: 1rem;
  }


  /* ---------------------------------------------------------
     REACH — EXCEPTION VISUELLE

     À conserver APRÈS le picto générique mobile.
     --------------------------------------------------------- */

  .tech-advantage-icon--reach {
    width: 96px;
    height: 96px;

    margin-bottom: 14px;

    background: transparent;
    border-radius: 0;
  }

}

/* =========================================================
   PAGE — HISTOIRE DE LA TECHNOLOGIE
   ========================================================= */


/* =========================================================
   ORIGINES
   ========================================================= */

.history-origin {
  padding: 18px 0 86px;
}

.history-origin-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(360px, .65fr);

  gap: 56px;

  align-items: center;
}

.history-origin-text h2 {
  margin: 0 0 24px;

  color: var(--violet);

  font-size: 2.45rem;
  line-height: 1.1;

  font-weight: 730;
}

.history-origin-text p {
  margin: 0 0 20px;

  font-size: 1.12rem;
  line-height: 1.58;
}

.history-origin-text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   CHIFFRES CLÉS
   ========================================================= */

.history-figures {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 14px;
}

.history-figure {
  min-height: 160px;

  padding: 22px 16px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  background: var(--gris-carte);

  border-radius: var(--rayon);
}

.history-figure strong {
  margin-bottom: 10px;

  color: var(--violet);

  font-size: 2.3rem;
  line-height: 1;

  font-weight: 760;
}

.history-figure span {
  color: var(--bleu-fonce);

  font-size: .98rem;
  line-height: 1.35;

  font-weight: 650;
}

.history-figure-link {
  text-decoration: none !important;

  transition:
    transform .18s ease,
    background .18s ease;
}

.history-figure-link:hover {
  transform: translateY(-2px);

  background: rgba(123, 25, 124, .08);
}


/* =========================================================
   RECHERCHE → INDUSTRIE
   ========================================================= */

.history-industry {
  padding: 34px 0 86px;
}

.history-highlight {
  padding: 34px 36px;

  background: var(--gris-carte);

  border-left: 6px solid var(--violet);

  border-radius:
    0
    var(--rayon)
    var(--rayon)
    0;
}

.history-highlight h2 {
  margin: 0 0 22px;

  color: var(--bleu-fonce);

  font-size: 2rem;
  line-height: 1.15;

  font-weight: 730;
}

.history-highlight p {
  max-width: 980px;

  margin: 0 0 18px;

  font-size: 1.12rem;
  line-height: 1.55;
}

.history-highlight-punch {
  display: block;

  max-width: 940px;

  margin-top: 28px;

  color: var(--violet);

  font-size: 1.35rem;
  line-height: 1.4;

  font-weight: 700;
}

/* =========================================================
   HISTOIRE — PHOTO IS2M
   ========================================================= */

.history-highlight-with-photo {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 340px);

  align-items: center;

  gap: 38px;
}


.history-highlight-photo {
  width: 100%;
  max-width: 340px;

  margin: 0;

  justify-self: end;

  overflow: hidden;

  background: var(--blanc);

  border-radius: 18px;

  border:
    1px solid
    rgba(23, 51, 111, .10);

  box-shadow:
    0 12px 30px
    rgba(19, 37, 78, .08);
}


.history-highlight-photo img {
  display: block;

  width: 100%;
  height: auto;
}


.history-highlight-photo figcaption {
  padding: 10px 14px 12px;

  text-align: center;

  color: var(--muted);

  font-size: .86rem;
  line-height: 1.3;
}

/* =========================================================
   DE L'IS2M À PLASM'INNOV
   ========================================================= */

.history-transition {
  padding: 0 0 86px;
}

.history-transition-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(340px, .9fr);

  gap: 48px;

  align-items: center;
}

.history-transition h2 {
  margin: 0 0 22px;

  color: var(--violet);

  font-size: 2.45rem;
  line-height: 1.1;

  font-weight: 730;
}

.history-transition p {
  margin: 0 0 18px;

  font-size: 1.12rem;
  line-height: 1.55;
}

.history-transition p:last-child {
  margin-bottom: 0;
}

.history-transition-quote {
  margin: 0;

  padding: 30px 32px;

  background:
    linear-gradient(
      145deg,
      rgba(123, 25, 124, .09),
      rgba(41, 73, 158, .07)
    );

  border-radius: var(--rayon);

  color: var(--bleu-fonce);

  font-size: 1.45rem;
  line-height: 1.42;

  font-weight: 650;
}
.history-transition-quote-wide {
  margin-top: 32px;
}

/* =========================================================
   EQUIPE FONDATRICE
   ========================================================= */
.history-team {
  padding: 0 0 86px;
}


.history-team .property-link {
  margin-top: 10px;
}


@media (max-width: 640px) {

  .history-team {
    padding-bottom: 56px;
  }

}

/* =========================================================
   COLLABORATIONS — INTRODUCTION
   ========================================================= */

.history-collaborations {
  padding: 0 0 86px;
}

.history-section-heading {
  margin-bottom: 34px;
}

.history-section-heading h2 {
  margin: 0 0 16px;

  color: var(--violet);

  font-size: 2.45rem;
  line-height: 1.1;

  font-weight: 730;
}

.history-section-heading p {
  max-width: 900px;

  margin: 0;

  font-size: 1.08rem;
  line-height: 1.52;
}


/* =========================================================
   COLLABORATIONS — DEUX FAMILLES
   ========================================================= */

.history-collaboration-columns {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 30px;

  align-items: stretch;
}

.history-collaboration-family {
  min-width: 0;

  padding: 30px;

  display: flex;
  flex-direction: column;

  background: var(--gris-carte);

  border-radius: var(--rayon);

  box-shadow:
    inset 0 0 0 1px
    rgba(41, 73, 158, .05);
}


/* =========================================================
   COLLABORATIONS — TITRES DES DEUX COLONNES
   ========================================================= */

.history-collaboration-family-head {
  margin-bottom: 28px;
}

.history-collaboration-family-head h3 {
  margin: 0 0 14px;

  color: var(--bleu-fonce);

  font-size: 1.65rem;
  line-height: 1.15;

  font-weight: 730;
}

.history-collaboration-family-head p {
  margin: 0;

  font-size: 1.05rem;
  line-height: 1.52;
}

.history-collaboration-family-head strong {
  color: var(--bleu);

  font-weight: 700;
}


/* =========================================================
   COLLABORATIONS — GRILLES DE LOGOS
   ========================================================= */

.history-collaborations-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}


/* =========================================================
   COLLABORATIONS — CARTE LOGO
   ========================================================= */

.history-collaboration-card {
  position: relative;

  min-width: 0;
}

.history-collaboration-trigger {
  width: 100%;
  min-height: 140px;

  padding: 24px;

  display: flex;

  align-items: center;
  justify-content: center;

  cursor: pointer;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: 18px;

  box-shadow:
    0 12px 28px
    rgba(19, 37, 78, .05);

  font: inherit;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.history-collaboration-trigger:hover {
  border-color:
    rgba(41, 73, 158, .20);

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 36px
    rgba(19, 37, 78, .09);
}

.history-collaboration-trigger:focus-visible {
  outline:
    3px solid
    rgba(41, 73, 158, .25);

  outline-offset: 3px;
}

.history-collaboration-trigger img {
  display: block;

  width: auto;
  max-width: 100%;

  max-height: 78px;

  object-fit: contain;
}

.history-collaboration-name {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 70px;

  color: var(--bleu-fonce);

  text-align: center;

  font-size: 1.05rem;
  font-weight: 700;
}

/* =========================================================
   COLLABORATIONS — FENÊTRE D'INFORMATION
   ========================================================= */

.history-collaboration-detail {
  position: absolute;

  left: 10px;
  right: 10px;

  bottom:
    calc(100% + 10px);

  z-index: 30;

  padding: 20px;

  visibility: hidden;
  opacity: 0;

  pointer-events: none;

  transform:
    translateY(8px);

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: 18px;

  box-shadow:
    0 20px 48px
    rgba(19, 37, 78, .16);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

.history-collaboration-detail::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 100%;

  height: 10px;
}

.history-collaboration-detail strong {
  display: block;

  margin-bottom: 10px;

  color: var(--bleu-fonce);

  font-size: 1.12rem;
  line-height: 1.25;
}

.history-collaboration-detail p {
  margin: 0;

  color: var(--texte);

  font-size: .97rem;
  line-height: 1.45;
}


/* =========================================================
   COLLABORATIONS — LIEN OPTIONNEL
   ========================================================= */

.history-collaboration-link {
  display: inline-block;

  margin-top: 14px;

  color: var(--violet);

  text-decoration: none;

  font-weight: 700;

  transition:
    color .18s ease,
    transform .18s ease;
}

.history-collaboration-link:hover {
  color: var(--bleu);

  transform:
    translateX(4px);
}


/* =========================================================
   AFFICHAGE DE LA FENÊTRE
   DESKTOP — SURVOL
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .history-collaboration-card:hover
  .history-collaboration-detail {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform:
      translateY(0);
  }

}


/* =========================================================
   AFFICHAGE DE LA FENÊTRE
   CLAVIER / CLIC
   ========================================================= */

.history-collaboration-card:focus-within
.history-collaboration-detail,

.history-collaboration-card.is-open
.history-collaboration-detail {
  visibility: visible;

  opacity: 1;

  pointer-events: auto;

  transform:
    translateY(0);
}


/* =========================================================
   BAS — COLONNE ACADÉMIQUE
   ========================================================= */

.history-family-link {
  display: inline-block;

  width: fit-content;

  margin-top: auto;

  padding-top: 28px;

  color: var(--violet);

  text-decoration: none;

  font-weight: 700;

  transition:
    color .18s ease,
    transform .18s ease;
}

.history-family-link:hover {
  color: var(--bleu);

  transform:
    translateX(4px);
}


/* =========================================================
   BAS — COLONNE INDUSTRIELLE
   ========================================================= */

.history-family-note {
  margin:
    auto
    0
    0;

  padding-top: 28px;

  color: var(--muted);

  font-size: .94rem;
  line-height: 1.45;

  font-style: italic;
}


/* =========================================================
   NOTE POUR ÉCRANS TACTILES
   ========================================================= */

.history-mobile-note {
  display: none;

  margin: 14px 0 20px;

  color: var(--muted);

  font-size: .95rem;
  line-height: 1.4;

  font-style: italic;
}

@media (hover: none) {

  .history-mobile-note {
    display: block;
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .history-origin-grid,
  .history-transition-grid,
  .history-collaboration-columns {
    grid-template-columns: 1fr;
  }

  .history-origin-grid,
  .history-transition-grid {
    gap: 34px;
  }

  .history-collaboration-columns {
    gap: 24px;
  }

  .history-collaborations-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .history-origin,
  .history-industry,
  .history-transition,
  .history-collaborations {
    padding-bottom: 56px;
  }
  .history-mobile-note {
    display: block;
  }

  /* ---------------------------------------------------------
     RECHERCHE → INDUSTRIE
     --------------------------------------------------------- */

  .history-industry {
    padding-top: 26px;
  }

  .history-highlight-with-photo {
   grid-template-columns: 1fr;
  }

  .history-highlight-photo {
   max-width: 560px;

   justify-self: center;
  }

  /* ---------------------------------------------------------
     TITRES
     --------------------------------------------------------- */

  .history-origin-text h2,
  .history-transition h2,
  .history-section-heading h2 {
    font-size: 1.9rem;
  }

  .history-highlight h2 {
    font-size: 1.55rem;
  }

  .history-collaboration-family-head h3 {
    font-size: 1.45rem;
  }


  /* ---------------------------------------------------------
     TEXTES
     --------------------------------------------------------- */

  .history-origin-text p,
  .history-highlight p,
  .history-transition p {
    font-size: 1.04rem;
  }

  .history-collaboration-family-head p {
    font-size: 1rem;
  }


  /* ---------------------------------------------------------
     CHIFFRES CLÉS
     --------------------------------------------------------- */

  .history-figures {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .history-figure {
    min-height: 120px;
  }

  /* ---------------------------------------------------------
     BLOCS PRINCIPAUX
     --------------------------------------------------------- */

  .history-highlight {
    padding: 24px 20px;

    border-left-width: 5px;
  }

  .history-highlight-punch {
    font-size: 1.2rem;
  }

  .history-transition-quote {
    padding: 24px 20px;

    font-size: 1.22rem;
  }


  /* ---------------------------------------------------------
     DEUX FAMILLES
     --------------------------------------------------------- */

  .history-collaboration-family {
    padding: 22px 18px;
  }

  .history-collaboration-family-head {
    margin-bottom: 22px;
  }


  /* ---------------------------------------------------------
     LOGOS
     --------------------------------------------------------- */

  .history-collaborations-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

  .history-collaboration-trigger {
    min-height: 115px;

    padding: 18px;
  }

  .history-collaboration-trigger img {
    max-height: 64px;
  }


  /* ---------------------------------------------------------
     FENÊTRE D'INFORMATION SUR MOBILE
     --------------------------------------------------------- */

  .history-collaboration-detail {
    position: static;

    display: none;

    margin-top: 10px;

    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transform: none;

    box-shadow:
      0 12px 28px
      rgba(19, 37, 78, .08);
  }

  .history-collaboration-card.is-open
  .history-collaboration-detail {
    display: block;

    transform: none;
  }


  /* ---------------------------------------------------------
     BAS DES COLONNES
     --------------------------------------------------------- */

  .history-family-link,
  .history-family-note {
    padding-top: 22px;
  }

}

/* =========================================================
   PAGE — PUBLICATIONS SCIENTIFIQUES

   MAINTENANCE
   -----------

   La structure de la page est générée depuis
   publications-scientifiques.js.

   Trois niveaux visuels :

   1. Famille de propriétés
   2. Cas documentés
   3. Autres publications repliables

   Les cas documentés utilisent volontairement
   le bleu pâle des éléments importants du site.
   ========================================================= */


/* =========================================================
   CONTENEUR PRINCIPAL
   ========================================================= */

.scientific-publications {
  padding:
    18px
    0
    86px;
}


.scientific-publications-list {
  display: grid;

  gap: 68px;
}


/* =========================================================
   FAMILLE
   ========================================================= */

.scientific-family {
  scroll-margin-top:
    calc(
      var(--header-height) + 28px
    );
}


.scientific-family-heading {
  max-width: 900px;

  margin-bottom: 30px;
}


.scientific-family-heading h2 {
  margin:
    0
    0
    10px;

  color:
    var(--bleu-fonce);

  font-size:
    clamp(
      2rem,
      3vw,
      2.7rem
    );

  line-height: 1.08;

  font-weight: 740;
}


.scientific-family-heading p {
  margin: 0;

  color:
    var(--texte);

  font-size: 1.08rem;
  line-height: 1.5;
}


/* =========================================================
   SOUS-TITRE
   ========================================================= */

.scientific-subheading {
  margin:
    0
    0
    16px;

  color:
    var(--bleu);

  font-size: 1.05rem;
  line-height: 1.2;

  font-weight: 760;

  letter-spacing: .08em;

  text-transform: uppercase;
}


/* =========================================================
   CAS DOCUMENTÉS
   ========================================================= */

.scientific-cases-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 18px;

  margin-bottom: 24px;
}


.scientific-case {
  min-width: 0;

  padding:
    26px
    26px
    28px;

  display: flex;

  flex-direction: column;

  background:
    rgba(76, 91, 180, .075);

  border:
    1px solid
    rgba(41, 73, 158, .14);

  border-radius:
    var(--rayon);

  box-shadow:
    var(--carte-ombre);
}


.scientific-case-status {
  margin:
    0
    0
    12px;

  color:
    var(--bleu);

  font-size: .82rem;
  line-height: 1;

  font-weight: 800;

  letter-spacing: .11em;
}


.scientific-case h3 {
  margin:
    0
    0
    14px;

  color:
    var(--bleu-fonce);

  font-size: 1.42rem;
  line-height: 1.2;

  font-weight: 720;
}


.scientific-case-summary {
  margin:
    0
    0
    18px;

  font-size: 1.03rem;
  line-height: 1.5;

  flex-grow: 1;
}


.scientific-case-source {
  margin:
    0
    0
    20px;

  color:
    var(--muted);

  font-size: .9rem;
  line-height: 1.4;

  font-style: italic;
}


.scientific-case .property-link {
  align-self: flex-start;
}


.scientific-case-pending {
  align-self: flex-start;

  color:
    var(--muted);

  font-size: .9rem;
  line-height: 1.3;

  font-style: italic;
}

/* =========================================================
   CAS DOCUMENTÉS — TUILE ENTIÈRE CLIQUABLE

   Même logique d'interaction que les grandes tuiles
   cliquables du reste du site :
   - déplacement léger
   - passage au violet
   - bouton centré
   ========================================================= */

.scientific-case-link {
  color:
    inherit;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.scientific-case-link:hover {
  background:
    rgba(123, 25, 124, .11);

  border-color:
    rgba(123, 25, 124, .22);

  transform:
    translateY(-4px);

  box-shadow:
    0 18px 38px
    rgba(19, 37, 78, .09);
}


/* ---------------------------------------------------------
   Bouton centré au bas de la tuile
   --------------------------------------------------------- */

.scientific-case-button {
  align-self:
    center !important;

  margin-top:
    auto;
}


/* ---------------------------------------------------------
   Toute la tuile déclenche aussi l'effet du bouton
   --------------------------------------------------------- */

.scientific-case-link:hover
.scientific-case-button {
  color:
    var(--violet);

  background:
    rgba(123, 25, 124, .12);

  border-color:
    rgba(123, 25, 124, .24);

  transform:
    translateY(-1px);
}

/* =========================================================
   AUTRES PUBLICATIONS — VOLET REPLIABLE
   ========================================================= */

.scientific-more {
  border:
    1px solid
    var(--carte-bordure);

  border-radius:
    var(--rayon);

  background:
    transparent;

  box-shadow:
    var(--carte-ombre);
}


.scientific-more > summary {
  padding:
    20px
    24px;

  color:
    var(--bleu-fonce);

  font-size: 1rem;
  line-height: 1.3;

  font-weight: 700;

  cursor: pointer;

  user-select: none;
}


.scientific-more > summary:hover {
  color:
    var(--violet);
}


.scientific-more-list {
  padding:
    0
    18px
    18px;

  display: grid;

  gap: 12px;
}


/* =========================================================
   PUBLICATION CLASSIQUE
   ========================================================= */

.scientific-publication {
  display: grid;

  grid-template-columns:
    82px
    minmax(0, 1fr);

  gap: 22px;

  padding:
    20px
    22px;

  background:
    transparent;

  border:
    1px solid
    rgba(23, 51, 111, .08);

  border-radius:
    16px;
}


.scientific-publication-year {
  display: flex;

  align-items: flex-start;
  justify-content: center;

  padding-top: 3px;

  color:
    var(--bleu);

  font-size: 1.15rem;
  line-height: 1;

  font-weight: 760;
}


.scientific-publication-content {
  min-width: 0;
}


.scientific-publication-content h3 {
  margin:
    0
    0
    9px;

  color:
    var(--bleu-fonce);

  font-size: 1.08rem;
  line-height: 1.35;

  font-weight: 680;
}


.scientific-publication-authors {
  margin:
    0
    0
    6px;

  color:
    var(--texte);

  font-size: .94rem;
  line-height: 1.42;
}


.scientific-publication-source {
  margin: 0;

  color:
    var(--muted);

  font-size: .9rem;
  line-height: 1.4;

  font-style: italic;
}


/* =========================================================
   LIEN VERS LA PUBLICATION ORIGINALE
   ========================================================= */

.scientific-publication-link {
  display: inline-block;

  margin-top: 12px;

  color:
    var(--violet);

  text-decoration: none;

  font-size: .93rem;

  font-weight: 700;

  transition:
    color .18s ease,
    transform .18s ease;
}


.scientific-publication-link:hover {
  color:
    var(--bleu);

  transform:
    translateX(4px);
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 900px) {

  .scientific-cases-grid {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .scientific-publications {
    padding-bottom: 56px;
  }


  .scientific-publications-list {
    gap: 52px;
  }


  .scientific-family-heading {
    margin-bottom: 24px;
  }


  .scientific-family-heading h2 {
    font-size: 1.85rem;
  }


  .scientific-family-heading p {
    font-size: 1rem;
  }


  .scientific-case {
    padding:
      22px
      20px
      24px;

    border-radius: 20px;
  }


  .scientific-case h3 {
    font-size: 1.25rem;
  }


  .scientific-more > summary {
    padding:
      18px
      20px;
  }


  .scientific-more-list {
    padding:
      0
      12px
      12px;
  }


  .scientific-publication {
    grid-template-columns:
      1fr;

    gap: 10px;

    padding:
      18px
      16px;
  }


  .scientific-publication-year {
    justify-content:
      flex-start;

    font-size: 1.05rem;
  }

}

/* =========================================================
   SOUS-PAGES — CAS DOCUMENTÉS

   GABARIT COMMUN À TOUTES LES PUBLICATIONS DÉTAILLÉES.

   Ne pas créer un style par publication.
   Les futures pages doivent réutiliser ces classes.
   ========================================================= */


/* =========================================================
   CONTENEUR
   ========================================================= */

.publication-detail-inner {
  width:
    min(
      calc(100% - 44px),
      1080px
    );

  margin:
    0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.publication-detail-hero {
  padding:
    48px
    0
    54px;
}


.publication-detail-kicker {
  margin:
    0
    0
    14px;

  color:
    var(--bleu);

  font-size:
    .9rem;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}


.publication-detail-hero h1 {
  max-width:
    920px;

  margin:
    0
    0
    24px;

  color:
    var(--violet);

  font-size:
    clamp(
      42px,
      5vw,
      66px
    );

  line-height:
    1.03;

  letter-spacing:
    -.04em;

  font-weight:
    760;
}


.publication-detail-lead {
  max-width:
    900px;

  margin:
    0;

  color:
    var(--bleu-fonce);

  font-size:
    1.3rem;

  line-height:
    1.55;

  font-weight:
    550;
}


/* =========================================================
   CONTENU
   ========================================================= */

.publication-detail-main {
  padding:
    12px
    0
    32px;
}


.publication-detail-main
.publication-detail-inner {
  display:
    grid;

  gap:
    22px;
}


/* =========================================================
   BLOC DE CONTENU
   ========================================================= */

.publication-detail-section {
  display:
    block;

  padding:
    30px
    32px;

  background:
    transparent;

  border:
    1px solid
    var(--carte-bordure);

  border-radius:
    var(--rayon);

  box-shadow:
    var(--carte-ombre);
}


.publication-detail-copy h2 {
  margin:
    0
    0
    18px;

  color:
    var(--bleu-fonce);

  font-size:
    1.7rem;

  line-height:
    1.2;

  font-weight:
    720;
}


.publication-detail-copy p {
  margin:
    0
    0
    16px;

  font-size:
    1.06rem;

  line-height:
    1.58;
}


.publication-detail-copy p:last-child {
  margin-bottom:
    0;
}


/* =========================================================
   RÉSULTAT CLÉ
   ========================================================= */

.publication-detail-result {
  padding:
    30px
    32px;

  display:
    grid;

  grid-template-columns:
    240px
    minmax(0, 1fr);

  gap:
    34px;

  align-items:
    center;

  background:
    rgba(76, 91, 180, .075);

  border:
    1px solid
    rgba(41, 73, 158, .14);

  border-radius:
    var(--rayon);

  box-shadow:
    var(--carte-ombre);
}


.publication-detail-result-value {
  color:
    var(--bleu);

  font-size:
    clamp(
      3.2rem,
      5.2vw,
      4.6rem
    );

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -.04em;

  white-space:
    nowrap;
}


.publication-detail-result-copy h2 {
  margin:
    0
    0
    14px;

  color:
    var(--bleu-fonce);

  font-size:
    1.55rem;

  line-height:
    1.2;

  font-weight:
    720;
}


.publication-detail-result-copy p {
  margin:
    0
    0
    12px;

  font-size:
    1.03rem;

  line-height:
    1.55;
}


.publication-detail-result-copy p:last-child {
  margin-bottom:
    0;
}


/* =========================================================
   SOURCE
   ========================================================= */

.publication-detail-source {
  padding:
    30px
    32px;

  background:
    rgba(123, 25, 124, .07);

  border:
    1px solid
    rgba(123, 25, 124, .14);

  border-radius:
    var(--rayon);

  box-shadow:
    var(--carte-ombre);
}


.publication-detail-source-kicker {
  margin:
    0
    0
    12px;

  color:
    var(--violet);

  font-size:
    .86rem;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;
}


.publication-detail-source h2 {
  max-width:
    900px;

  margin:
    0
    0
    14px;

  color:
    var(--bleu-fonce);

  font-size:
    1.35rem;

  line-height:
    1.35;

  font-weight:
    700;
}


.publication-detail-source-authors {
  margin:
    0
    0
    7px;

  font-size:
    .98rem;

  line-height:
    1.45;
}


.publication-detail-source-journal {
  margin:
    0
    0
    22px;

  color:
    var(--muted);

  font-size:
    .95rem;

  line-height:
    1.4;

  font-style:
    italic;
}


/* =========================================================
   NAVIGATION DE FIN
   ========================================================= */

.publication-detail-navigation {
  padding:
    10px
    0
    86px;
}


.publication-detail-navigation-box {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    12px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .publication-detail-inner {
    width:
      min(
        calc(100% - 26px),
        1080px
      );
  }


  .publication-detail-hero {
    padding:
      34px
      0
      40px;
  }


  .publication-detail-hero h1 {
    font-size:
      clamp(
        36px,
        11vw,
        50px
      );
  }


  .publication-detail-lead {
    font-size:
      1.08rem;
  }


  .publication-detail-section {
    grid-template-columns:
      1fr;

    gap:
      12px;

    padding:
      22px
      20px;

    border-radius:
      20px;
  }

  .publication-detail-copy h2 {
    font-size:
      1.4rem;
  }


  .publication-detail-copy p {
    font-size:
      1rem;
  }


  .publication-detail-result {
    grid-template-columns:
      1fr;

    gap:
      16px;

    padding:
      24px
      20px;

    border-radius:
      20px;
  }


  .publication-detail-result-value {
    font-size:
      3.5rem;
  }


  .publication-detail-result-copy h2 {
    font-size:
      1.35rem;
  }


  .publication-detail-source {
    padding:
      24px
      20px;

    border-radius:
      20px;
  }


  .publication-detail-source h2 {
    font-size:
      1.2rem;
  }


  .publication-detail-navigation {
    padding-bottom:
      58px;
  }


  .publication-detail-navigation-box {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .publication-detail-navigation-box
  .property-link {
    width:
      100%;
  }

}


/* =========================================================
   PAGE — ACTUALITÉS
   ========================================================= */


/* =========================================================
   CONTENEUR
   ========================================================= */

.news-inner {
  width:
    min(
      calc(100% - 44px),
      var(--page)
    );

  margin: 0 auto;
}

.news-section {
  padding: 18px 0 96px;
}


/* =========================================================
   INDICATION
   ========================================================= */

.news-hint {
  margin: 14px 0 0;

  color: var(--muted);

  font-size: .95rem;
  line-height: 1.4;

  font-style: italic;
}

/* =========================================================
   ANNÉES
   ========================================================= */

.news-grid {
  display: block;
}

.news-year {
  margin-bottom: 54px;
}

.news-year:last-child {
  margin-bottom: 0;
}

.news-year-title {
  margin: 0 0 22px;

  color: var(--violet);

  font-size: 2rem;
  line-height: 1;

  font-weight: 760;
}


/* =========================================================
   GRILLE D'UNE ANNÉE
   ========================================================= */

.news-year-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;
}


/* =========================================================
   PETITE TUILE
   ========================================================= */

.news-card {
  min-width: 0;

  overflow: hidden;

  background: var(--blanc);

  border:
    1px solid
    var(--bordure);

  border-radius:
    var(--rayon);

  box-shadow:
    0 15px 38px
    rgba(19, 37, 78, .06);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.news-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 20px 42px
    rgba(19, 37, 78, .10);
}


.news-card-trigger {
  display: block;

  width: 100%;

  padding: 0;

  cursor: pointer;

  text-align: left;

  color: inherit;

  background:
    transparent;

  border: 0;

  font: inherit;
}

.news-card-trigger:focus-visible {
  outline:
    3px solid
    rgba(123, 25, 124, .28);

  outline-offset:
    -3px;
}


/* =========================================================
   VISUEL DE LA TUILE
   ========================================================= */

.news-card-media {
  position: relative;

  width: 100%;

  aspect-ratio:
    16 / 9;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(41, 73, 158, .07),
      rgba(123, 25, 124, .10)
    );

  border-bottom:
    1px solid
    rgba(23, 51, 111, .08);
}


.news-card-media img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* Logo :
   entièrement visible et dimensionné automatiquement */

.news-card-media.is-logo {
  background:
    var(--blanc);
}

.news-card-media.is-logo img {
  object-fit: contain;

  padding: 28px 34px;
}


.news-card-placeholder {
  color:
    var(--muted);

  font-size: .78rem;

  font-weight: 700;

  letter-spacing: .10em;
}

.news-card-media.has-image
.news-card-placeholder {
  display: none;
}


/* =========================================================
   TEXTE DE LA TUILE
   ========================================================= */

.news-card-body {
  padding:
    20px
    20px
    22px;
}

.news-card-date {
  display: block;

  margin-bottom: 8px;

  color:
    var(--violet);

  font-size: .86rem;

  font-weight: 760;
}

.news-card-body h3 {
  margin:
    0 0 10px;

  color:
    var(--bleu-fonce);

  font-size: 1.25rem;
  line-height: 1.18;

  font-weight: 730;
}

.news-card-body p {
  margin: 0;

  color:
    var(--texte);

  font-size: .96rem;
  line-height: 1.45;
}


/* =========================================================
   FENÊTRE D'ACTUALITÉ
   ========================================================= */

body.news-modal-open {
  overflow: hidden;
}

.news-modal-overlay {
  position: fixed;

  inset: 0;

  z-index: 200;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    clamp(
      18px,
      4vw,
      56px
    );

  visibility: hidden;

  opacity: 0;

  pointer-events: none;

  background:
    rgba(16, 24, 48, .48);

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);

  transition:
    opacity .18s ease,
    visibility .18s ease;
}

.news-modal-overlay.is-open {
  visibility: visible;

  opacity: 1;

  pointer-events: auto;
}


/* =========================================================
   PANNEAU
   ========================================================= */

.news-modal {
  position: relative;

  width:
    min(
      76vw,
      980px
    );

  max-height:
    82vh;

  overflow: auto;

  background:
    var(--blanc);

  border:
    1px solid
    rgba(23, 51, 111, .12);

  border-radius:
    var(--rayon);

  box-shadow:
    0 30px 90px
    rgba(11, 24, 58, .24);
}


/* =========================================================
   FERMETURE
   ========================================================= */

.news-modal-close {
  position: absolute;

  top: 14px;
  right: 16px;

  z-index: 5;

  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  cursor: pointer;

  color:
    var(--bleu-fonce);

  background:
    rgba(255, 255, 255, .94);

  border:
    1px solid
    rgba(23, 51, 111, .14);

  border-radius: 50%;

  font: inherit;

  font-size: 1.65rem;
  line-height: 1;

  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.news-modal-close:hover {
  color:
    var(--violet);

  background:
    var(--blanc);

  transform:
    scale(1.04);
}


/* =========================================================
   ORGANISATION DU DÉTAIL
   ========================================================= */

.news-modal-layout {
  display: grid;

  grid-template-columns:
    1fr;
}

.news-modal-layout.has-media {
  grid-template-columns:
    minmax(0, .95fr)
    minmax(0, 1.05fr);
}


/* =========================================================
   GRANDE PHOTO / VIDÉO
   ========================================================= */

.news-modal-media {
  display: none;

  min-height: 100%;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    var(--gris-carte);

  border-right:
    1px solid
    rgba(23, 51, 111, .08);
}

.news-modal-layout.has-media
.news-modal-media {
  display: flex;
}

.news-modal-media img,
.news-modal-media video {
  display: block;

  width: 100%;
  height: 100%;

  max-height:
    72vh;

  object-fit: contain;
}

.news-modal-media video {
  background:
    #000;
}


/* =========================================================
   TEXTE DU DÉTAIL
   ========================================================= */

.news-modal-content {
  padding:
    46px
    42px
    42px;
}

.news-modal-date {
  display: block;

  margin-bottom: 12px;

  color:
    var(--violet);

  font-size: .95rem;

  font-weight: 760;
}

.news-modal-content h2 {
  margin:
    0 0 22px;

  color:
    var(--bleu-fonce);

  font-size: 2rem;
  line-height: 1.12;

  font-weight: 730;
}

.news-modal-text {
  margin: 0;

  color:
    var(--texte);

  font-size: 1.08rem;
  line-height: 1.58;
}


/* =========================================================
   LIEN DU DÉTAIL
   ========================================================= */

.news-modal-link {
  display: inline-block;

  margin-top: 26px;

  color:
    var(--violet);

  text-decoration: none;

  font-weight: 700;

  transition:
    color .18s ease,
    transform .18s ease;
}

.news-modal-link[hidden] {
  display: none;
}

.news-modal-link:hover {
  color:
    var(--bleu);

  transform:
    translateX(4px);
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .news-year-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .news-modal {
    width:
      min(
        88vw,
        900px
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .news-inner {
    width:
      min(
        calc(100% - 26px),
        var(--page)
      );
  }

  .news-section {
    padding-bottom: 60px;
  }

  .news-instruction {
    margin-bottom: 20px;

    font-size: .9rem;
  }

  .news-year {
    margin-bottom: 40px;
  }

  .news-year-title {
    margin-bottom: 16px;

    font-size: 1.65rem;
  }


  /* ---------------------------------------------------------
     TUILES
     --------------------------------------------------------- */

  .news-year-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }

  .news-card-media.is-logo img {
    padding:
      18px
      20px;
  }

  .news-card-body {
    padding:
      16px
      14px
      18px;
  }

  .news-card-date {
    font-size: .78rem;
  }

  .news-card-body h3 {
    font-size: 1.05rem;
  }

  .news-card-body p {
    font-size: .88rem;
    line-height: 1.4;
  }


  /* ---------------------------------------------------------
     FENÊTRE
     --------------------------------------------------------- */

  .news-modal-overlay {
    padding: 10px;
  }

  .news-modal {
    width: 100%;

    max-height: 88vh;
  }

  .news-modal-layout.has-media {
    grid-template-columns: 1fr;
  }

  .news-modal-media {
    min-height: 0;

    border-right: 0;

    border-bottom:
      1px solid
      rgba(23, 51, 111, .08);
  }

  .news-modal-media img,
  .news-modal-media video {
    width: 100%;
    height: auto;

    max-height: 34vh;

    object-fit: contain;
  }

  .news-modal-content {
    padding:
      26px
      20px
      28px;
  }

  .news-modal-content h2 {
    padding-right: 30px;

    font-size: 1.55rem;
  }

  .news-modal-text {
    font-size: 1rem;
    line-height: 1.5;
  }

  .news-modal-close {
    top: 10px;
    right: 10px;

    width: 38px;
    height: 38px;
  }

}

/* =========================================================
   PAGE VALEURS & ENGAGEMENTS
   ========================================================= */

.solutions-why-card .values-keywords,
.solutions-flow-item .values-keywords {
  margin: 0 0 14px;

  color: var(--bleu);

  font-weight: 750;
}


.technology-links-box .values-metrics {
  max-width: none;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px 16px;

  margin-bottom: 24px;
}


.values-metrics strong {
  color: var(--bleu);

  font-weight: 750;
}


.values-metrics span {
  color: var(--muted);
}


.technology-links-box .values-disclaimer {
  max-width: 900px;

  margin: 0 auto;

  color: var(--muted);

  font-size: .96rem;
  font-style: italic;
}


/* =========================================================
   MOBILE — VALEURS & ENGAGEMENTS
   ========================================================= */

@media (max-width: 640px) {

  .technology-links-box .values-metrics {
    flex-direction: column;

    gap: 8px;
  }


  .values-metrics span {
    display: none;
  }

}

/* =========================================================
   PAGE — ÉQUIPE FONDATRICE
   ========================================================= */


/* =========================================================
   CHAÎNE COMPLÈTE DE COMPÉTENCES
   ========================================================= */

.team-skills {
  padding:
    0
    0
    72px;
}


.team-skills-title {
  margin:
    0
    0
    14px;

  color:
    var(--violet);

  text-align:
    center;

  font-size:
    .95rem;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.team-skills-line {
  padding:
    22px
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    12px
    18px;

  background:
    transparent;

  border:
    1px solid
    var(--carte-bordure);

  border-left:
    6px solid
    var(--violet);

  border-radius:
    0
    var(--rayon)
    var(--rayon)
    0;

  box-shadow:
    var(--carte-ombre);

  color:
    var(--bleu);
}


.team-skills-line strong {
  font-size:
    1.16rem;

  font-weight:
    750;
}


.team-skills-line span {
  color:
    var(--muted);

  font-weight:
    600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .team-skills {
    padding-bottom:
      46px;
  }


  .team-skills-title {
    margin-bottom:
      12px;

    font-size:
      .85rem;
  }


  .team-skills-line {
    padding:
      20px;

    gap:
      8px
      10px;

    text-align:
      center;
  }


  .team-skills-line strong {
    font-size:
      1rem;
  }

}
/* =========================================================
   PROFILS
   ========================================================= */

.team-profiles {
  padding: 0 0 46px;
}


.team-profile {
  padding: 30px;

  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);

  gap: 42px;
  align-items: center;

  margin-bottom: 26px;

  background: var(--blanc);

  border: 1px solid var(--bordure);
  border-radius: var(--rayon);

  box-shadow:
    0 18px 46px
    rgba(19, 37, 78, .06);
}


.team-profile:last-child {
  margin-bottom: 0;
}


.team-profile-reverse {
  grid-template-columns: minmax(0, 1fr) 230px;
}


.team-profile-reverse .team-profile-visual {
  order: 2;
}


.team-profile-reverse .team-profile-content {
  order: 1;
}


.team-profile-visual {
  display: flex;
  justify-content: center;
}


.team-profile-visual img {
  width: 190px;
  height: 190px;

  object-fit: cover;
  object-position: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(41, 73, 158, .14);
}


.team-profile-role {
  margin: 0 0 6px;

  color: var(--violet);

  font-size: .93rem;
  font-weight: 800;

  letter-spacing: .08em;
  text-transform: uppercase;
}


.team-profile h2 {
  margin: 0 0 10px;

  color: var(--bleu-fonce);

  font-size: 2rem;
  line-height: 1.1;

  font-weight: 730;
}

.team-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  margin-left: 7px;

  border-radius: 5px;
  background: #0a66c2;

  color: #ffffff;  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;

  vertical-align: 3px;

  box-shadow: 0 1px 4px rgba(20, 45, 100, 0.15);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.team-linkedin:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(20, 45, 100, 0.22);
}

.team-profile-keywords {
  margin: 0 0 20px !important;

  color: var(--bleu);

  font-weight: 750;
}


.team-profile-content > p {
  max-width: 850px;

  margin: 0 0 14px;

  font-size: 1.07rem;
  line-height: 1.52;
}


.team-profile-content > p:last-of-type {
  margin-bottom: 0;
}


/* =========================================================
   CHIFFRES / REPÈRES
   ========================================================= */

.team-profile-facts {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 22px;
}


.team-profile-facts span {
  padding: 8px 13px;

  background: var(--gris-carte);

  border-radius: 999px;

  color: var(--bleu-fonce);

  font-size: .94rem;
}


.team-profile-facts strong {
  color: var(--bleu);

  font-weight: 800;
}


/* =========================================================
   HISTOIRE COLLECTIVE
   ========================================================= */

.team-collective {
  padding: 0 0 86px;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 980px) {

  .team-profile,
  .team-profile-reverse {
    grid-template-columns: 180px minmax(0, 1fr);

    gap: 30px;
  }


  .team-profile-reverse .team-profile-visual,
  .team-profile-reverse .team-profile-content {
    order: initial;
  }


  .team-profile-visual img {
    width: 155px;
    height: 155px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .team-skills {
    padding-bottom: 46px;
  }


  .team-skills-line {
    padding: 20px;

    gap: 8px 10px;

    text-align: center;
  }


  .team-skills-line strong {
    font-size: 1rem;
  }


  .team-profiles,
  .team-collective {
    padding-bottom: 56px;
  }


  .team-profile,
  .team-profile-reverse {
    grid-template-columns: 1fr;

    gap: 22px;

    padding: 24px 20px;
  }


  .team-profile-reverse .team-profile-visual,
  .team-profile-reverse .team-profile-content {
    order: initial;
  }


  .team-profile-visual img {
    width: 140px;
    height: 140px;
  }


  .team-profile-content {
    text-align: left;
  }


  .team-profile h2 {
    font-size: 1.65rem;
  }


  .team-profile-role {
    font-size: .82rem;
  }


  .team-profile-content > p {
    font-size: 1rem;
  }


  .team-profile-facts {
    gap: 8px;
  }


  .team-profile-facts span {
    font-size: .88rem;
  }

}

/* =========================================================
   ÉQUIPE — VALEURS FONDATRICES
   ========================================================= */

.team-values {
  padding:
    0
    0
    42px;
}


.team-values .technology-inner {
  display: flex;

  justify-content: center;
}


.team-values-card {
  width:
    min(
      100%,
      860px
    );

  padding:
    20px
    26px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 28px;

  color:
    var(--texte);

  background:
    transparent;

  border:
    1px solid
    var(--carte-bordure);

  border-left:
    5px solid
    var(--violet);

  border-radius:
    0
    var(--rayon)
    var(--rayon)
    0;

  box-shadow:
    var(--carte-ombre);

  text-decoration:
    none;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.team-values-card strong {
  display: block;

  margin-bottom: 7px;

  color:
    var(--violet);

  font-size: .95rem;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.team-values-card p {
  margin: 0;

  max-width: 720px;

  font-size: 1rem;
  line-height: 1.45;
}


.team-values-card > span {
  flex: 0 0 auto;

  color:
    var(--violet);

  font-size: 1.35rem;

  font-weight: 700;

  transition:
    transform .18s ease;
}


.team-values-card:hover {
  transform:
    translateY(-2px);

  background:
    rgba(123, 25, 124, .055);

  border-color:
    rgba(123, 25, 124, .20);
}


.team-values-card:hover > span {
  transform:
    translateX(4px);
}


@media (max-width: 640px) {

  .team-values {
    padding-bottom: 32px;
  }


  .team-values-card {
    width: 100%;

    padding:
      18px
      20px;

    gap: 18px;
  }

}

/* =========================================================
   ACCUEIL — AVEC LE SOUTIEN DE
   ========================================================= */

.home-support {
  padding:
    0
    0
    72px;
}


.home-support-inner {
  width:
    min(
      calc(100% - 44px),
      var(--page)
    );

  margin:
    0
    auto;

  text-align:
    center;
}


.home-support h2 {
  margin:
    0
    0
    28px;

  color:
    var(--violet);

  font-size:
    2rem;

  line-height:
    1.1;

  font-weight:
    730;
}


.home-support-logos {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    26px;
}


.home-support-item {
  min-width:
    220px;

  height:
    110px;

  padding:
    20px
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--blanc);

  border:
    1px solid
    var(--carte-bordure);

  border-radius:
    18px;

  box-shadow:
    var(--carte-ombre);
}

.home-support-link {
  color:
    inherit;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.home-support-link:hover,
.home-support-link:focus-visible {
  transform:
    translateY(-4px);

  border-color:
    rgba(123, 25, 124, .22);

  box-shadow:
    0 18px 38px
    rgba(19, 37, 78, .09);
}


.home-support-link:focus-visible {
  outline:
    2px solid
    var(--violet);

  outline-offset:
    4px;
}

.home-support-item img {
  display:
    block;

  max-width:
    210px;

  max-height:
    70px;

  width:
    auto;

  height:
    auto;

  object-fit:
    contain;
}


.home-support-mentions {
  margin:
    22px
    0
    0;

  color:
    var(--muted);

  font-size:
    .88rem;

  line-height:
    1.55;
}


/* =========================================================
   FOOTER COMMUN
   ========================================================= */

.site-footer {
  padding:
    22px
    0
    26px;

  border-top:
    1px solid
    var(--carte-bordure);
}


.site-footer-inner {
  width:
    min(
      calc(100% - 44px),
      var(--page)
    );

  margin:
    0
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    var(--muted);

  font-size:
    .9rem;
}


.site-footer-links {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    18px;
}


.site-footer a {
  color:
    var(--bleu-fonce);

  text-decoration:
    none;

  font-weight:
    600;

  transition:
    color .18s ease;
}


.site-footer a:hover {
  color:
    var(--violet);
}

.site-footer .site-footer-linkedin {
  width:
    28px;

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  background:
    #0a66c2;

  border-radius:
    5px;

  font-size:
    20px;

  font-weight:
    800;

  line-height:
    1;

  text-decoration:
    none;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.site-footer .site-footer-linkedin:hover {
  color:
    #ffffff;

  transform:
    translateY(-2px);

  box-shadow:
    0 3px 8px
    rgba(20, 45, 100, .22);
}

/* =========================================================
   MENTIONS LÉGALES
   ========================================================= */

.legal-page {
  padding:
    0
    0
    86px;
}


.legal-inner {
  width:
    min(
      calc(100% - 44px),
      900px
    );

  margin:
    0
    auto;
}


.legal-card {
  padding:
    32px;

  background:
    transparent;

  border:
    1px solid
    var(--carte-bordure);

  border-radius:
    var(--rayon);

  box-shadow:
    var(--carte-ombre);
}


.legal-section + .legal-section {
  margin-top:
    30px;
}


.legal-section h2 {
  margin:
    0
    0
    12px;

  color:
    var(--bleu-fonce);

  font-size:
    1.45rem;

  line-height:
    1.2;
}


.legal-section p {
  margin:
    0;

  font-size:
    1.05rem;

  line-height:
    1.6;
}


.legal-section a {
  color:
    var(--violet);

  text-decoration:
    none;

  font-weight:
    650;
}


.legal-section a:hover {
  color:
    var(--bleu);
}


@media (max-width: 640px) {

  .home-support {
    padding-bottom:
      54px;
  }


  .home-support-inner,
  .site-footer-inner,
  .legal-inner {
    width:
      min(
        calc(100% - 26px),
        var(--page)
      );
  }


  .home-support h2 {
    font-size:
      1.7rem;
  }


  .home-support-logos {
    gap:
      14px;
  }

  .home-support-item {
    width:
      176px;

    min-width:
      176px;

    height:
      86px;

    padding:
      14px
      18px;
  }

  .home-support-item img {
    max-width:
      140px;

    max-height:
      56px;
  }
  .site-footer-inner {
    flex-direction:
      column;

    text-align:
      center;
  }


  .site-footer-links {
    justify-content:
      center;
  }


  .legal-card {
    padding:
      24px
      20px;
  }

}

/* =========================================================
   LANGAGE GRAPHIQUE COMMUN — CARTES / ENCARTS
   DERNIÈRE RÈGLE DU FICHIER

   IMPORTANT :
   Ce bloc doit rester TOUT À LA FIN de style.css
   ========================================================= */


/* =========================================================
   VARIABLES COMMUNES
   ========================================================= */

:root {

  --carte-fond:
    transparent;

  --carte-bordure:
    rgba(23, 51, 111, .12);

  --carte-ombre:
    0 12px 30px
    rgba(19, 37, 78, .025);

}


/* =========================================================
   CARTES STANDARD
   Fond transparent + contour léger + ombre discrète
   ========================================================= */

.property-card,
.property-benefit,
.property-applications-box,
.property-cta-box,
.technology-links-box,

.other-properties-feature-copy,
.other-properties-secondary-card,
.other-properties-tech-focus,
.other-properties-feature-media,

.application-card,

.solutions-proof-card,
.solutions-choice,
.solutions-flow-item,
.solutions-why-card,

.technology-more-card,
.technology-work-card,
.technology-process-card,
.technology-mastery-card,

.tech-advantage-card,

.history-figure,
.history-transition-quote,
.history-collaboration-family,
.history-collaboration-trigger,

.scientific-publication,

.news-card,

.team-profile,

.property-example-image,
.property-example-video,
.property-example-figure {

  background:
    var(--carte-fond);

  border:
    1px solid
    var(--carte-bordure);

  box-shadow:
    var(--carte-ombre);

}


/* =========================================================
   CARTES AVEC BARRE COLORÉE À GAUCHE

   On harmonise leur fond mais on conserve leur
   barre violette / bleue / rouge existante.
   ========================================================= */

.property-detail-text,
.applications-positioning,

.solutions-punch,
.solutions-proof-highlight,

.technology-work-heading,
.technology-platform-punch,
.technology-knowhow-punch,
.technology-limit-card,

.history-highlight,

.team-skills-line {

  background:
    var(--carte-fond);

  border-top:
    1px solid
    var(--carte-bordure);

  border-right:
    1px solid
    var(--carte-bordure);

  border-bottom:
    1px solid
    var(--carte-bordure);

  box-shadow:
    var(--carte-ombre);

}


/* =========================================================
   TECHNOLOGIE — CARTES AVEC BARRE COLORÉE EN HAUT

   On conserve la barre bleue supérieure.
   ========================================================= */

.technology-knowhow-card {

  background:
    var(--carte-fond);

  border-left-color:
    var(--carte-bordure);

  border-right-color:
    var(--carte-bordure);

  border-bottom-color:
    var(--carte-bordure);

  box-shadow:
    var(--carte-ombre);

}


/* =========================================================
   AVANTAGE REACH

   Exception volontaire :
   on conserve le détourage vert.
   ========================================================= */

.tech-advantage-card--focus-green {

  border-color:
    rgba(74, 143, 87, .30);

}


/* =========================================================
   SOLUTIONS — PANNEAU IS2M

   Sortie visuelle de l'univers Plasm'Innov :
   fond violet pâle pour identifier le partenariat IS2M.
   ========================================================= */

.solutions-is2m-note {

  background:
    rgba(123, 25, 124, .055);

}

/* =========================================================
   LÉGENDES DES MÉDIAS
   ========================================================= */

.property-example-image figcaption,
.property-example-video figcaption,
.property-example-figure figcaption,
.other-properties-feature-media figcaption {

  background:
    transparent;

}


/* =========================================================
   EXCEPTION PONCTUELLE — RETOUR À UN FOND BLANC

   Ajouter simplement "card-solid" à l'élément HTML.

   Exemple :
   <div class="technology-links-box card-solid">
   ========================================================= */

.card-solid {

  background:
    var(--blanc) !important;

}

/* =========================================================
   TECHNOLOGIE — LIMITE

   Fond rouge très pâle pour attirer l'attention
   sans donner un caractère alarmant au message.
   ========================================================= */

.technology-limit-card {

  background:
    rgba(139, 31, 45, .055);

}

/* =========================================================
   TECHNOLOGIE — PHRASES DE SYNTHÈSE
   ========================================================= */

.technology-platform-punch,
.technology-knowhow-punch {

  background:
    rgba(76, 91, 180, .075);

}

/* =========================================================
   HISTOIRE — TUILES DE LOGOS

   Fond blanc volontaire pour préserver
   la lisibilité et la propreté visuelle des logos.
   ========================================================= */

.history-collaboration-trigger {

  background:
    var(--blanc);

}

/* =========================================================
   TECHNOLOGIE — CARTES D'ACCÈS
   ========================================================= */

.technology-more-card {

  background:
    rgba(76, 91, 180, .075);

}

/* =========================================================
   JANUS — AGRANDISSEMENT SANS FULLSCREEN NATIF
   ========================================================= */

.other-properties-feature-media {
  position: relative;
}


/* On masque le bouton fullscreen natif Chromium / Edge */

.other-properties-feature-media
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}


/* =========================================================
   MODE AGRANDI

   Aucun appel au fullscreen du navigateur.
   Le FIGURE occupe simplement toute la fenêtre.
   ========================================================= */

.other-properties-feature-media.janus-expanded {
  position: fixed;

  inset: 0;

  z-index: 9999;

  width: 100vw !important;
  max-width: none !important;

  height: 100vh !important;
  height: 100dvh !important;

  margin: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000 !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: hidden !important;
}


/* Toute l'image du film reste visible */

.other-properties-feature-media.janus-expanded video {
  width: auto !important;
  height: auto !important;

  max-width: 100vw !important;

  max-height: 100vh !important;
  max-height: 100dvh !important;

  margin: 0 !important;

  aspect-ratio: auto !important;

  object-fit: contain !important;

  background: #000 !important;
}


/* Légende masquée pendant l'agrandissement */

.other-properties-feature-media.janus-expanded figcaption {
  display: none;
}

/* Pas de défilement de la page derrière */

body.janus-modal-open {
  overflow: hidden;
}

/* =========================================================
   SOLUTIONS — IMAGE IS2M EN PLEIN ÉCRAN MOBILE
   ========================================================= */

.image-lightbox-content {
  position: relative;
}


/* Le DIV interne passe en plein écran,
   jamais le DIALOG */

.image-lightbox-content:fullscreen,
.image-lightbox-content:-webkit-full-screen {

  width:
    100vw !important;

  height:
    100vh !important;

  height:
    100dvh !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #000 !important;

}


.image-lightbox-content:fullscreen img,
.image-lightbox-content:-webkit-full-screen img {

  width:
    100% !important;

  height:
    100% !important;

  max-height:
    none !important;

  object-fit:
    contain !important;

  background:
    #000 !important;

  border-radius:
    0 !important;

}


.image-lightbox-content:fullscreen
.image-lightbox-close,

.image-lightbox-content:-webkit-full-screen
.image-lightbox-close {

  position:
    fixed;

  top:
    max(
      14px,
      env(safe-area-inset-top)
    );

  right:
    max(
      14px,
      env(safe-area-inset-right)
    );

  z-index:
    10;

}

/* =========================================================
   PUBLICATIONS SCIENTIFIQUES — VOLET DES PUBLICATIONS

   Violet / rose assumé,
   mais plus doux que la version précédente.
   ========================================================= */

.scientific-more {
  overflow: hidden;

  border:
    1px solid
    rgba(123, 25, 124, .24);

  border-radius:
    var(--rayon);

  background:
    transparent;

  box-shadow:
    var(--carte-ombre);
}


.scientific-more > summary {
  padding:
    21px
    26px;

  background:
    rgba(123, 25, 124, .20);

  color:
    #6f176f;

  font-size:
    1.08rem;

  line-height:
    1.3;

  font-weight:
    740;

  cursor:
    pointer;

  user-select:
    none;

  transition:
    color .18s ease,
    background .18s ease;
}


.scientific-more > summary:hover {
  color:
    #5d125e;

  background:
    rgba(123, 25, 124, .28);
}


.scientific-more > summary::marker {
  color:
    #7b197c;
}


.scientific-more > summary::-webkit-details-marker {
  color:
    #7b197c;
}


.scientific-more[open] > summary {
  background:
    rgba(123, 25, 124, .24);

  border-bottom:
    1px solid
    rgba(123, 25, 124, .18);
}


.scientific-more-list {
  padding:
    16px
    18px
    18px;

  background:
    transparent;
}


@media (max-width: 640px) {

  .scientific-more > summary {
    padding:
      19px
      20px;

    font-size:
      1rem;
  }

}

/* =========================================================
   PUBLICATIONS — ESPACEMENT ENTRE BIBLIOGRAPHIE
   ET CAS DOCUMENTÉS
   ========================================================= */

.scientific-more {
  margin-bottom:
    26px;
}


@media (max-width: 640px) {

  .scientific-more {
    margin-bottom:
      22px;
  }

}

/* =========================================================
   TECHNOLOGIE — TUILES D'ACCÈS CLIQUABLES

   Harmonisation avec les autres tuiles interactives :
   bleu pâle au repos → violet / rose au survol.
   ========================================================= */

.technology-more-card {
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.technology-more-card:hover {
  background:
    rgba(123, 25, 124, .11);

  border-color:
    rgba(123, 25, 124, .22);

  transform:
    translateY(-4px);

  box-shadow:
    0 18px 38px
    rgba(19, 37, 78, .09);
}


.technology-more-card:hover strong {
  color:
    var(--violet);

  background:
    rgba(123, 25, 124, .12);

  border-color:
    rgba(123, 25, 124, .24);
}

/* =========================================================
   RÉSULTAT CLÉ — VARIANTE TEXTE

   À utiliser lorsqu'un cas ne possède pas
   de résultat numérique court type +120 % ou ×10.
   ========================================================= */

.publication-detail-result-value-text {
  font-size:
    clamp(
      2rem,
      3vw,
      2.8rem
    );

  line-height:
    1.05;

  white-space:
    normal;
}

/* =========================================================
   SÉLECTEUR DE PUBLICATIONS DOCUMENTÉES

   Fenêtre commune aux trois sous-pages Propriétés.
   ========================================================= */


/* =========================================================
   BOUTON D'OUVERTURE
   ========================================================= */

.property-publications-trigger {
  margin: -12px 0 28px;

  font-family: inherit;
  font-size: inherit;

  cursor: pointer;
}

/* =========================================================
   FENÊTRE
   ========================================================= */

.publication-selector {
  width:
    min(
      calc(100% - 32px),
      820px
    );

  padding:
    0;

  overflow:
    visible;

  color:
    var(--texte);

  background:
    transparent;

  border:
    0;

  border-radius:
    var(--rayon);

  box-shadow:
    0 24px 70px
    rgba(19, 37, 78, .18);
}


.publication-selector::backdrop {
  background:
    rgba(18, 27, 55, .42);

  backdrop-filter:
    blur(4px);
}


.publication-selector-inner {
  position:
    relative;

  padding:
    34px;

  background:
    #fff;

  border:
    1px solid
    rgba(23, 51, 111, .12);

  border-radius:
    var(--rayon);
}


/* =========================================================
   FERMETURE
   ========================================================= */

.publication-selector-close {
  position:
    absolute;

  top:
    14px;

  right:
    16px;

  width:
    38px;

  height:
    38px;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--bleu-fonce);

  background:
    rgba(41, 73, 158, .06);

  border:
    1px solid
    rgba(41, 73, 158, .12);

  border-radius:
    50%;

  font-size:
    1.45rem;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}


.publication-selector-close:hover {
  color:
    var(--violet);

  background:
    rgba(123, 25, 124, .10);

  transform:
    rotate(4deg);
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.publication-selector-kicker {
  margin:
    0
    0
    10px;

  color:
    var(--violet);

  font-size:
    .82rem;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    .11em;
}


.publication-selector-title {
  max-width:
    680px;

  margin:
    0
    50px
    10px
    0;

  color:
    var(--bleu-fonce);

  font-size:
    1.8rem;

  line-height:
    1.18;

  font-weight:
    730;
}


.publication-selector-intro {
  margin:
    0
    0
    26px;

  color:
    var(--muted);

  font-size:
    1rem;

  line-height:
    1.45;
}


/* =========================================================
   DEUX CAS
   ========================================================= */

.publication-selector-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    18px;
}


.publication-selector-case {
  min-width:
    0;

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  color:
    inherit;

  background:
    rgba(76, 91, 180, .075);

  border:
    1px solid
    rgba(41, 73, 158, .14);

  border-radius:
    20px;

  text-decoration:
    none;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.publication-selector-case:hover {
  background:
    rgba(123, 25, 124, .11);

  border-color:
    rgba(123, 25, 124, .22);

  transform:
    translateY(-4px);

  box-shadow:
    0 16px 34px
    rgba(19, 37, 78, .08);
}


.publication-selector-case > strong {
  margin-bottom:
    12px;

  color:
    var(--bleu-fonce);

  font-size:
    1.25rem;

  line-height:
    1.22;

  font-weight:
    720;
}


.publication-selector-case > span {
  font-size:
    .97rem;

  line-height:
    1.45;
}


.publication-selector-case-action {
  align-self:
    center;

  margin-top:
    auto;

  padding-top:
    22px;

  color:
    var(--violet);

  font-weight:
    700;
}


/* =========================================================
   TOUTES LES PUBLICATIONS
   ========================================================= */

.publication-selector-all {
  display:
    block;

  width:
    fit-content;

  margin:
    26px
    auto
    0;

  color:
    var(--violet);

  text-decoration:
    none;

  font-weight:
    700;

  transition:
    color .18s ease,
    transform .18s ease;
}


.publication-selector-all:hover {
  color:
    var(--bleu);

  transform:
    translateX(4px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .publication-selector {
    width:
      calc(100% - 22px);
  }


  .publication-selector-inner {
    padding:
      28px
      20px
      24px;
  }


  .publication-selector-title {
    margin-right:
      42px;

    font-size:
      1.5rem;
  }


  .publication-selector-grid {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .publication-selector-case {
    padding:
      20px;
  }


  .publication-selector-case > strong {
    font-size:
      1.15rem;
  }

}