/* Proposition 3 : Le Journal. Blanc cassé, encre, cobalt. Angles doux (14 px) partout. */
:root {
  --fond: #fbfbf9; --fond-2: #f1f2ef; --texte: #16181c; --texte-fort: #0e1013; --texte-2: #474b53; --texte-3: #6f747d;
  --filet: #dcdee0; --accent: #2140c9; --accent-fonce: #16309a; --accent-clair: #e4e9fb; --sur-accent: #fff;
  --ok: #1d7a45; --ok-clair: #ddf1e4; --alerte: #7a5200; --alerte-clair: #f6ecd2;
  --corps: "Instrument Sans", "Segoe UI", sans-serif; --titres: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --mesure: 44rem; --large: 100rem; --rayon: 14px; --rayon-rond: 50%; --taille: 1.125rem; --fond-champ: #fff; --bordure-champ: #b8bcc4;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); }
.btn { border-radius: 999px; }
.badge { border-radius: 999px; }
.chapeau, .question { font-weight: 700; }
.question { border-left-width: 4px; border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--accent-clair); padding: .8rem 1rem; }

/* En-tête */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(251, 251, 249, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--filet); }
.site-header .wrap { display: flex; align-items: center; gap: 2rem; height: 68px; }
.brand { text-decoration: none; color: var(--texte-fort); font-family: var(--titres); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; white-space: nowrap; }
.brand-accent { color: var(--accent); }
.site-nav { display: flex; gap: .3rem; margin-left: auto; font-size: .93rem; font-weight: 500; }
.site-nav a { color: var(--texte-2); text-decoration: none; padding: .45rem .75rem; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.site-nav a:hover { background: var(--fond-2); color: var(--texte-fort); }
.site-nav a[aria-current="page"] { background: var(--texte-fort); color: var(--fond); }
.nav-acces { color: var(--ok) !important; }
@media (max-width: 1000px) {
  .site-header { position: static; }
  .site-header .wrap { height: auto; flex-wrap: wrap; padding: .9rem 0; gap: .6rem 1rem; }
  .site-nav { margin: 0; flex-wrap: wrap; width: 100%; }
  .site-nav a { padding: .35rem .6rem; }
}

/* Accueil */
.hero { padding: 2rem 0 1rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; }
.hero-txt { max-width: 60rem; }
.hero h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5rem); line-height: 1; }
.hero-sub { font-size: 1.3rem; color: var(--texte-2); margin: 1.4rem 0 0; max-width: 40ch; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* Repères chiffrés à droite du titre */
.reperes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-self: end; }
.reperes li { background: var(--fond-2); border-radius: var(--rayon); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.reperes li:nth-child(4) { background: var(--accent); color: #fff; }
.reperes li:nth-child(4) .rep-txt { opacity: .9; }
.rep-chiffre { font-family: var(--titres); font-weight: 800; font-size: 2rem; letter-spacing: -.03em; line-height: 1; }
.rep-txt { font-size: .92rem; color: var(--texte-2); }
.reperes li:nth-child(4) .rep-txt { color: #fff; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .reperes { margin-top: 1.5rem; } }

/* Frise horizontale : le trait pousse vers la droite, les années se comptent */
.frise-h { margin-top: 3rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .5rem; }
.frise { list-style: none; padding: 2.2rem 0 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(11rem, 1fr)); gap: 1.2rem; position: relative; min-width: 66rem; }
.frise::before { content: ""; position: absolute; left: 0; right: 0; top: 1.3rem; height: 3px; background: var(--texte-fort); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); border-radius: 3px; }
.frise:has(li.in)::before { transform: scaleX(1); }
.frise li { position: relative; padding-top: .4rem; }
.frise li::before { content: ""; position: absolute; left: 0; top: -1.3rem; width: 14px; height: 14px; border-radius: 50%; background: var(--fond); border: 3px solid var(--texte-fort); }
.frise li:last-child::before { background: var(--accent); border-color: var(--accent); }
.frise .an { font-family: var(--titres); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--texte-fort); font-variant-numeric: tabular-nums; }
.frise li:last-child .an { color: var(--accent); }
.frise p { margin: .3rem 0 0; font-size: .95rem; color: var(--texte-2); }

/* Bandeau qui tourne en rond (une seule fois sur la page) */
.defile { margin: 3.5rem calc(50% - 50vw) 0; overflow: hidden; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: .8rem 0; background: var(--fond-2); }
.defile-piste { display: flex; gap: 3rem; width: max-content; animation: tourner 28s linear infinite; font-family: var(--titres); font-weight: 700; font-size: 1.3rem; color: var(--texte-2); white-space: nowrap; }
.defile-piste span:nth-child(4n) { color: var(--accent); }
@keyframes tourner { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile-piste { animation: none; } }

/* Bento : cinq cases, cinq rubriques, fonds variés */
.bento { margin-top: 4rem; }
.bento-grille { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "a a b" "c d e"; gap: 1rem; margin-top: 1.5rem; }
.cell { display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; padding: 1.6rem; border-radius: var(--rayon); text-decoration: none; color: var(--texte); background: #fff; border: 1px solid var(--filet); min-height: 12rem; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease; }
.cell:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22, 24, 28, .08); }
.cell-a { grid-area: a; background: var(--accent); color: #fff; border-color: var(--accent); min-height: 16rem; }
.cell-a .cell-titre { font-size: 2rem; }
.cell-b { grid-area: b; background: var(--accent-clair); border-color: var(--accent-clair); }
.cell-c { grid-area: c; } .cell-d { grid-area: d; background: var(--fond-2); } .cell-e { grid-area: e; }
.cell-titre { font-family: var(--titres); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.05; }
.cell-txt { font-size: .97rem; opacity: .85; }
@media (max-width: 800px) { .bento-grille { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; } .cell { min-height: 0; } }

.colonnes { columns: 2; column-gap: 2.5rem; max-width: 70rem; }
.bloc-corps > .colonnes > p { max-width: none; }
.colonnes p { break-inside: avoid; }
@media (max-width: 800px) { .colonnes { columns: 1; } }

/* Paliers : les cubes montrent ce qui est joint */
.paliers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.palier { background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.3rem 1.2rem; }
.palier .prix { display: block; font-family: var(--titres); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.palier strong { display: block; margin-top: .6rem; }
.palier p { margin: .3rem 0 0; color: var(--texte-2); font-size: .95rem; }
.cubes { display: inline-flex; gap: .3rem; margin: .5rem 0 0; }
.cubes i { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); }
.cubes i.vide { background: transparent; border: 1.5px solid var(--filet); }
.paliers-note { color: var(--texte-3); font-size: .95rem; margin-top: 1rem; max-width: 60ch; }
@media (max-width: 900px) { .paliers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .paliers { grid-template-columns: 1fr; } }


/* Offres */
.offres { gap: 1.2rem; }
.offre { background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.4rem 1.4rem 1.3rem; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease; }
.offre:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22, 24, 28, .08); }
.offre-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.offre-num { font-size: .85rem; font-weight: 600; color: var(--texte-3); }
.offre .prix { font-family: var(--titres); font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 0; }
.offre h3 { margin: .5rem 0 .1rem; font-size: 1.35rem; }
.offre .sous { color: var(--texte-3); margin-bottom: .8rem; font-size: .95rem; }
.offre .desc { color: var(--texte-2); font-size: .97rem; flex: 1; }
.offre .inclus { color: var(--ok); font-size: .9rem; margin-bottom: .6rem; }
.offre-complet { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
.offre-complet .prix { color: var(--accent); }
.offre.acquis { border-color: var(--ok); }
.offre .ouvert { color: var(--ok); font-weight: 600; margin: 0 0 .6rem; }
.offre-don { border-style: dashed; }
.verrou-titre { font-family: var(--titres); font-weight: 800; font-size: 1.5rem; color: var(--accent); margin-bottom: .5rem; }

/* Téléphone : frise verticale, hero sur une colonne */
.mobile .hero { grid-template-columns: 1fr; }
.mobile .hero h1 { font-size: 2.3rem; }
.mobile .hero-sub { font-size: 1.1rem; }
.frise-v .frise { display: grid; grid-template-columns: 1fr; gap: 1.2rem; min-width: 0; padding: 0 0 0 1.4rem; margin-top: 2.5rem; position: relative; }
.frise-v .frise::before { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
.frise-v .frise:has(li.in)::before { transform: scaleY(1); }
.frise-v .frise li { padding-top: 0; }
.frise-v .frise li::before { left: -1.4rem; top: .6rem; margin-left: -6px; }
.frise-v .frise .an { font-size: 1.6rem; }
.mobile .defile { margin: 2.5rem calc(50% - 50vw) 0; }
.mobile .bento-grille { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; }
.mobile .cell { min-height: 0; }
.mobile .paliers { grid-template-columns: 1fr; }