/* Apprensia — le site. Charte « Faisceau » : encre, ivoire, or.
   Règle de la charte : l'or n'est JAMAIS du texte sur fond clair (1,96:1) ;
   en clair, le texte « or » passe en bronze. Aucune ressource tierce. */

@font-face { font-family: "Fraunces"; src: url(polices/Fraunces.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(polices/Fraunces-Italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(polices/Atkinson-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(polices/Atkinson-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(polices/Atkinson-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --encre: #13213F; --encre-2: #22335A; --nuit: #0B1428; --ivoire: #F8F5EF; --or: #E3A72F;
  --bronze: #8A5A0B; --ardoise: #56657C; --brume: #A9B3C4; --ligne: #E4DED3; --blanc: #FFFFFF;
  --fond: var(--ivoire); --carte: var(--blanc); --texte: var(--encre); --doux: var(--ardoise);
  --accent-texte: var(--bronze); --filet: var(--ligne);
  --titre: "Fraunces", Georgia, serif; --corps: "Atkinson Hyperlegible", system-ui, sans-serif;
  --large: min(1120px, 100% - 40px); --doucement: cubic-bezier(.22, .8, .24, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: var(--nuit); --carte: #16254A; --texte: var(--ivoire); --doux: var(--brume);
          --accent-texte: var(--or); --filet: #2A3B63; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 1.0625rem/1.6 var(--corps);
       font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }       /* height:auto, sinon captures étirées */
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 .5em;
             font-variation-settings: "SOFT" 50, "opsz" 144; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
.evite { position: absolute; left: -9999px; }
.evite:focus { left: 16px; top: 16px; z-index: 10; background: var(--or); color: var(--encre); padding: 8px 14px; border-radius: 8px; }
.conteneur { width: var(--large); margin-inline: auto; }
.kicker { font: 700 .78rem/1.2 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-texte); margin: 0 0 .9rem; }
.lead { font-size: 1.22rem; color: var(--doux); max-width: 44rem; }

/* ── En-tête ── */
.entete { position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
          background: color-mix(in srgb, var(--fond) 82%, transparent); border-bottom: 1px solid var(--filet); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
.marque { display: inline-flex; color: var(--texte); }
.marque svg { height: 26px; width: auto; }
.nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; font-weight: 700; font-size: .95rem; padding: 8px 12px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: color-mix(in srgb, var(--texte) 8%, transparent); }
.nav a.bouton { background: var(--encre); color: var(--ivoire); }
@media (prefers-color-scheme: dark) { .nav a.bouton { background: var(--or); color: var(--encre); } }
@media (max-width: 620px) { .nav a:not(.bouton) { display: none; } }

/* ── Boutons ── */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; padding: 14px 22px;
       border-radius: 999px; transition: transform .25s var(--doucement), box-shadow .25s; }
.btn:hover { transform: translateY(-2px); }
.btn.or { background: var(--or); color: var(--encre); box-shadow: 0 10px 30px rgb(227 167 47 / .28); }
.btn.contour { border: 1.5px solid currentColor; }
.btn.encre { background: var(--encre); color: var(--ivoire); }
@media (prefers-color-scheme: dark) { .btn.encre { background: var(--or); color: var(--encre); } }

/* ── Héros sombre, faisceau ── */
.heros { position: relative; overflow: hidden; background: var(--encre); color: var(--ivoire); padding: clamp(64px, 11vw, 132px) 0 clamp(64px, 9vw, 112px); isolation: isolate; }
.heros .kicker { color: var(--or); }
.heros .lead { color: var(--brume); }
.heros h1 { max-width: 15ch; }
.symbole { display: block; } .symbole svg { display: block; width: 100%; height: auto; }
.heros .symbole { width: 58px; margin-bottom: 26px; }
.faisceau { position: absolute; z-index: -1; top: -12%; right: 6%; width: min(560px, 60vw); height: 130%; pointer-events: none;
            background: linear-gradient(rgb(227 167 47 / .34), rgb(227 167 47 / 0) 80%);
            clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 0; }
.heros.court { padding: clamp(52px, 8vw, 88px) 0; }
.heros.court h1 { max-width: 22ch; font-size: clamp(2rem, 4.4vw, 3.3rem); }

/* ── Sections ── */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section.bord { border-top: 1px solid var(--filet); }
.section.sombre { background: var(--encre); color: var(--ivoire); }
.section.sombre .kicker { color: var(--or); } .section.sombre .lead, .section.sombre .doux { color: var(--brume); }
.doux { color: var(--doux); }
.grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.carte { background: var(--carte); border: 1px solid var(--filet); border-radius: 22px; padding: 28px; display: grid; gap: 10px; align-content: start;
         box-shadow: 0 1px 0 var(--filet), 0 18px 40px rgb(19 33 63 / .06); }
.section.sombre .carte { background: rgb(248 245 239 / .06); border-color: rgb(248 245 239 / .12); box-shadow: none; }
.carte p { margin: 0; color: var(--doux); }
.section.sombre .carte p { color: var(--brume); }
.pastille { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgb(227 167 47 / .16);
            color: var(--accent-texte); font: 600 1.3rem/1 var(--titre); }
.section.sombre .pastille { color: var(--or); }
.liste-coches { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste-coches li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.liste-coches li::before { content: ""; width: 9px; height: 9px; margin: .55em 0 0 5px; border-radius: 50%; background: var(--or); }

/* Chiffres sourcés */
.chiffres { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 36px; }
.chiffre { border-top: 2px solid var(--or); padding-top: 18px; }
.chiffre b { display: block; font: 600 clamp(2.4rem, 4.6vw, 3.4rem)/1 var(--titre); color: var(--accent-texte); margin-bottom: 10px; font-variant-numeric: lining-nums; }
.section.sombre .chiffre b { color: var(--or); }
.chiffre span { display: block; }
.source { font-size: .82rem; color: var(--doux); margin-top: 8px; }
.section.sombre .source { color: var(--brume); }

/* Atelier : deux colonnes, déroulé */
.atelier { display: grid; gap: 40px; grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 860px) { .atelier { grid-template-columns: 1fr; } }
.faits { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 24px; }
.faits span { border: 1px solid var(--filet); border-radius: 999px; padding: 6px 14px; font-size: .92rem; font-weight: 700; }
.deroule { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.deroule li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--filet); }
.deroule .h { font: 600 1.1rem/1.4 var(--titre); color: var(--accent-texte); font-variant-numeric: tabular-nums lining-nums; }
.deroule b { display: block; }

/* Téléphones : de VRAIES captures de l'app */
.telephone { width: 100%; max-width: 280px; padding: 9px; background: #0B1428; border-radius: 44px;
             box-shadow: 0 30px 60px rgb(11 20 40 / .28), inset 0 0 0 1.5px rgb(255 255 255 / .12); }
.telephone img { border-radius: 36px; }
.galerie { display: flex; gap: 22px; overflow-x: auto; padding: 12px 4px 30px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.galerie figure { margin: 0; flex: 0 0 min(240px, 70vw); scroll-snap-align: start; }
.galerie figcaption { margin-top: 14px; font-size: .95rem; color: var(--doux); }
.galerie figcaption b { display: block; color: var(--texte); }
.duo { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 6vw, 72px); align-items: center; }
.duo .telephone { width: min(280px, 70vw); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } .duo .telephone { margin-inline: auto; } }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem;
         background: rgb(227 167 47 / .16); color: var(--accent-texte); }

/* Pages de texte : confidentialité, assistance, mentions */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.55rem; margin-top: 2.2em; }
.prose ul { padding-left: 1.2em; } .prose li { margin: .35em 0; }
.maj { color: var(--doux); font-size: .95rem; }
details { border-top: 1px solid var(--filet); padding: 18px 0; }
details:last-of-type { border-bottom: 1px solid var(--filet); }
summary { cursor: pointer; font: 600 1.15rem/1.35 var(--titre); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent-texte); font-size: 1.5rem; line-height: 1; transition: transform .3s var(--doucement); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 12px 0 0; color: var(--doux); }

/* Contact */
.contact { text-align: center; }
.contact h2 { max-width: 20ch; margin-inline: auto; }
.contact .lead { margin-inline: auto; }
.contact .boutons { justify-content: center; }

/* ── Pied ── */
.pied { border-top: 1px solid var(--filet); padding: 44px 0 56px; font-size: .95rem; }
.pied .conteneur { display: grid; gap: 28px; grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width: 760px) { .pied .conteneur { grid-template-columns: 1fr; } }
.pied .devise { font: italic 500 1.15rem/1.35 var(--titre); margin: 14px 0 6px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied a { text-decoration: none; } .pied a:hover { text-decoration: underline; }
.pied h3 { font: 700 .78rem/1 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: 14px; }
.pied .symbole { width: 28px; }

/* ── Mouvement : doux, et jamais pour qui a demandé moins d'animations ── */
@media (prefers-reduced-motion: no-preference) {
  .faisceau { animation: allume 1.6s var(--doucement) both, balaye 11s ease-in-out 1.6s infinite alternate; }
  @keyframes allume { from { opacity: 0; transform: scaleY(.3); } }
  @keyframes balaye { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
  .heros .monte { animation: monte .9s var(--doucement) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
  @keyframes monte { from { opacity: 0; transform: translateY(18px); } }
  .symbole .point { transform-box: fill-box; transform-origin: center; animation: respire 3.2s ease-in-out infinite; }
  @keyframes respire { 50% { transform: scale(1.18); } }
  @supports (animation-timeline: view()) {
    .apparait { animation: monte linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
  .telephone { transition: transform .5s var(--doucement); }
  .telephone:hover { transform: translateY(-6px) rotate(-.6deg); }
}