/* getfound — feuille commune des pages historiques. Générée le 18/09/2026.
   Depuis le 26/10/2026, les mises en page sont en classes utilitaires (assets/utilitaires.css),
   plus en styles en ligne. Ce fichier porte la base, le mouvement et la bascule ordinateur/mobile. */

/* Jetons (couleurs, police, rayons, tailles, espacements, courbe) : assets/tokens.css, chargé en premier sur chaque page. */


    body {
      margin: 0;
      font-family: var(--police);
      background: var(--fond);
      color: var(--encre);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--encre); } a:hover { opacity: .85; }

    summary {
      list-style: none;
      cursor: pointer;
    } summary::-webkit-details-marker { display: none; }
    details[open] .faq-plus { transform: rotate(45deg); }
    .faq-plus { transition: transform .25s ease; }

    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
      outline: 3px solid var(--jaune);
      outline-offset: 3px;
    }


    @keyframes rise { from {
   opacity: 0;
   transform: translateY(0.45em);
   filter: blur(8px);
 }

 to {
   opacity: 1;
   transform: none;
   filter: blur(0);
 } }

    .w {
      display: inline-block;
      animation: rise .8s cubic-bezier(.2,.7,.2,1) both;
    }

    @keyframes pop { from {
   opacity: 0;
   transform: translateY(10px) scale(.97);
 }

 to {
   opacity: 1;
   transform: none;
 } }
    .pop { animation: pop .6s cubic-bezier(.2,.7,.2,1) both; }

    @keyframes mark { from { background-size: 0% 40%; } to { background-size: 100% 40%; } }

    .mark {
      background-image: linear-gradient(var(--jaune), var(--jaune));
      background-repeat: no-repeat;
      background-position: 0 90%;
      background-size: 100% 40%;
      animation: mark .9s cubic-bezier(.6,.1,.2,1) 1.3s both;
    }

    @keyframes pop { from {
   opacity: 0;
   transform: translateY(10px) scale(.97);
 }

 to {
   opacity: 1;
   transform: none;
 } }
    .pop2 { animation: pop .5s cubic-bezier(.2,.7,.2,1) 2.1s both; }
    .pop3 { animation: pop .5s cubic-bezier(.2,.7,.2,1) 2.35s both; }
    .pop4 { animation: pop .5s cubic-bezier(.2,.7,.2,1) 2.6s both; }

    @keyframes type { from { max-width: 0; } to { max-width: 240px; } }

    .type {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: bottom;
      animation: type 1.1s steps(23) .6s both;
    }

    @keyframes caret { 50% { opacity: 0; } }

    .caret {
      display: inline-block;
      width: 2px;
      height: 18px;
      background: var(--encre);
      margin-left: 2px;
      animation: caret 1s steps(1) 6 .6s;
      opacity: 0;
    }

    @keyframes flag { 0% { box-shadow: var(--ombre-pulse-alerte-0); } 40% { box-shadow: var(--ombre-pulse-alerte); } 100% { box-shadow: var(--ombre-pulse-alerte-0); } }
    .flag { animation: pop .5s cubic-bezier(.2,.7,.2,1) 3.2s both, flag 1.2s ease-out 3.7s 2; }

    @keyframes again { 0%, 100% { background: var(--fond-creux); } 40% { background: var(--jaune-creme); } }
    .again { animation: again 1.1s ease-in-out 4.9s 1; }

    @keyframes out { to {
   opacity: 0;
   transform: translateY(-8px);
 } }
    .ph1 { animation: out .45s ease-in 5.3s both; }

    @keyframes rise2 { from {
   opacity: 0;
   transform: translateY(104px) scale(.96);
 }

 to {
   opacity: 1;
   transform: none;
 } }
    .win { animation: rise2 .7s cubic-bezier(.2,.75,.2,1) 5.55s both; }

    @keyframes glow { 0%, 100% { box-shadow: var(--ombre-pulse-jaune-0); } 45% { box-shadow: var(--ombre-pulse-jaune); } }
    .winglow { animation: rise2 .7s cubic-bezier(.2,.75,.2,1) 5.55s both, glow 1.5s ease-out 6.25s 2; }
    .sub1 { animation: pop .5s cubic-bezier(.2,.7,.2,1) 5.9s both; }
    .sub2 { animation: pop .5s cubic-bezier(.2,.7,.2,1) 6.05s both; }
    .ph2tag { animation: pop .5s cubic-bezier(.2,.7,.2,1) 5.4s both; }

    @keyframes nudge { 0%, 70%, 100% { transform: translateY(-50%) translateX(0); } 80% { transform: translateY(-50%) translateX(-6px); } 90% { transform: translateY(-50%) translateX(0); } }
    .nudge { animation: nudge 3.2s ease-in-out 1.6s infinite; }
    .chip1 { animation: pop .45s cubic-bezier(.2,.7,.2,1) 6.45s both; }
    .chip2 { animation: pop .45s cubic-bezier(.2,.7,.2,1) 6.6s both; }
    .chip3 { animation: pop .45s cubic-bezier(.2,.7,.2,1) 6.75s both; }

    @media (prefers-reduced-motion: reduce) {
      html :is(.w, .pop, .pop2, .pop3, .pop4, .type, .caret, .flag, .mark, .again, .nudge,
      .win, .winglow, .sub1, .sub2, .ph2tag, .chip1, .chip2, .chip3) {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
        max-width: none;
        background-size: 100% 40%;
      }
      html .ph1 { visibility: hidden; }
    }


    @keyframes rv-up {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        .rv h2,
        .rv > * > p, .rv > * > a, .rv > * > ul, .rv > * > ol,
        .rv-col > p, .rv-col > a,
        .rv article, .rv figure, .rv form, .rv details,
        .rv-col > div {
          animation: rv-up 1s linear both;
          animation-timeline: view();
          animation-range: cover 2% cover 26%;
        }

        /* cascade de gauche à droite dans une rangée de cartes */
        .rv article:nth-child(2), .rv details:nth-child(2) { animation-range: cover 5% cover 29%; }
        .rv article:nth-child(3), .rv details:nth-child(3) { animation-range: cover 8% cover 32%; }
        .rv article:nth-child(4), .rv details:nth-child(4) { animation-range: cover 11% cover 35%; }
        .rv details:nth-child(5) { animation-range: cover 13% cover 37%; }
        .rv details:nth-child(6) { animation-range: cover 15% cover 39%; }

        /* pas de double mouvement : un élément déjà animé n'anime pas ses enfants */
        .rv article h2, .rv article p, .rv article ul, .rv article ol,
        .rv figure p, .rv form p, .rv details p { animation: none; }
      }
    }


/* ---------- Bascule ordinateur / mobile ----------
   Deux rendus dans la page : .v-desk (>= 1041px) et .v-mob (< 1041px).
   Voir README, section « Deux rendus ». */
html { scroll-behavior: smooth; }
.v-desk { display: block; }
.v-mob { display: none; }

.v-desk > div, .v-desk > header, .v-desk > footer {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.v-desk > header { max-width: 1344px; }

.v-mob > div, .v-mob > header, .v-mob > footer {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1040px) {
  .v-desk { display: none; }
  .v-mob { display: block; }
}

@media (min-width: 1041px) and (max-width: 1460px) {
  .v-desk section, .v-desk > footer {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .v-desk > header {
    margin-left: 4vw;
    margin-right: 4vw;
  }

  .v-desk .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: 48px;
  }
  .v-desk .hero-grid h1 { font-size: var(--t-54); }
}