/* 3h33 — feuille de style des pages intérieures.
   Même charte que l'accueil : Manrope, bleu 1f6ff5, or ffb020, fond clair. */
:root{
  --ground:#fff; --ground-2:#f3f7fd; --ground-3:#e9f0fb;
  --ink:#0f1524; --ink-2:#3f475a; --ink-3:#6f7789; --trait:#e1e7f2;
  --acc:#1f6ff5; --acc-fonce:#1550c0; --or:#ffb020; --or-ink:#0f1524;
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ombre:0 1px 0 rgba(15,21,36,.04),0 18px 44px -26px rgba(15,21,36,.28);
  --large:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--acc-fonce);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:4px}
.saut{position:absolute;left:-9999px;top:0;background:var(--acc);color:#fff;padding:12px 20px;z-index:99;border-radius:0 0 10px 0}
.saut:focus{left:0}

/* en-tête */
.entete{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 28px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--trait)}
.marque{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.marque .logo{width:28px;height:28px;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:10px;font-weight:700}
.menu{display:flex;align-items:center;gap:22px}
.menu a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15.5px}
.menu a:hover{color:var(--acc)}
.burger{display:none;font:inherit;font-size:22px;background:none;border:0;cursor:pointer;color:var(--ink);padding:4px 8px}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--acc);color:#fff!important;text-decoration:none;
  font-weight:700;font-size:16px;padding:13px 24px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(31,111,245,.3)}
.btn--petit{padding:9px 18px;font-size:15px}
.btn--or{background:var(--or);color:var(--or-ink)!important}
.btn--clair{background:#fff;color:var(--ink)!important;border:1.5px solid var(--trait)}

/* fil d'Ariane */
.fil{max-width:var(--large);margin:0 auto;padding:16px 28px 0;font-size:14px;color:var(--ink-3)}
.fil a{color:var(--ink-3)}
.fil span[aria-current]{color:var(--ink-2);font-weight:600}

/* en-tête illustré, en écho à l'accueil */
.aube{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--ground-3) 48%,#fff6e6 78%,#fff 100%);
  padding:56px 28px 0;margin-bottom:40px}
.aube__collines{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;display:block}
.aube__texte{position:relative;z-index:2;max-width:var(--large);margin:0 auto;padding-bottom:120px}
@media (max-width:860px){.aube{padding-top:34px}.aube__texte{padding-bottom:90px}
  .aube__sablier{width:172px;right:-16px;top:auto;bottom:-16px}
  .aube__sablier canvas{opacity:.11}}


/* ---------------------------------------------------------------- le temps
   Le sablier remplace le soleil : même place, en filigrane. Les oiseaux
   descendent de l'accueil. Le surtitre peut porter une heure, et les pages
   de contenu annoncent leur durée de lecture. */
.aube__scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.aube__sablier{position:absolute;right:7%;top:16px;width:300px}
.aube__sablier .boite{position:relative;aspect-ratio:440/620;line-height:0}
.aube__sablier canvas{display:block;width:100%;height:auto;opacity:.17}
.aube__oiseaux{position:absolute;z-index:2;top:44px;left:0;right:0;height:180px;pointer-events:none}
.oiseau{position:absolute;width:34px;height:14px;animation:vole var(--d,26s) linear infinite;left:-60px;top:var(--t,20px)}
.oiseau svg{width:100%;height:100%;overflow:visible}
.oiseau path{fill:none;stroke:#5a7bb3;stroke-width:2.2;stroke-linecap:round;animation:bat .7s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes vole{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 120px))}}
@keyframes bat{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
html.calme .aube__sablier canvas{opacity:.13}

/* le surtitre porte une heure : la pastille bat une fois par seconde */
.eyebrow--heure::before{border:1.5px solid var(--ink);animation:bat-tic 2s steps(1,end) infinite}
.eyebrow--heure .hh{font-variant-numeric:tabular-nums;color:var(--acc-fonce)}
@keyframes bat-tic{0%,50%{transform:scale(1)}50.01%,100%{transform:scale(.45)}}

/* durée de lecture : la notion de temps la plus utile au lecteur */
.duree-lecture{display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.duree-lecture svg{width:17px;height:17px;flex:none}
.duree-lecture .c{fill:none;stroke:var(--ink-3);stroke-width:1.6}
.duree-lecture .a{stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}

/* page */
.page{max-width:var(--large);margin:0 auto;padding:0 28px 40px}
.page__tete{padding:26px 0 30px;border-bottom:1px solid var(--trait);margin-bottom:34px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);font-weight:700;background:var(--ground-2);border:1px solid var(--trait);
  border-radius:999px;padding:6px 14px;margin-bottom:16px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--or)}
h1{font-size:clamp(34px,5vw,60px);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:0;text-wrap:balance;max-width:20ch}
.chapo{font-size:clamp(18px,1.7vw,21px);color:var(--ink-2);max-width:62ch;margin:18px 0 0}

/* corps de texte */
.prose{max-width:72ch}
.prose h2{font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.025em;font-weight:800;margin:52px 0 16px;text-wrap:balance}
.prose h3{font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:700;margin:36px 0 12px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px}
.prose li{margin:0 0 9px}
.prose li::marker{color:var(--or)}
.prose img{border-radius:14px;margin:26px 0;box-shadow:var(--ombre)}
.prose blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:4px solid var(--or);color:var(--ink-2);font-size:19px}
.prose blockquote p:last-child{margin:0}
.prose hr{border:0;border-top:1px solid var(--trait);margin:44px 0}
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:16px}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--trait)}
.prose th{background:var(--ground-2);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.prose .encadre{background:var(--ground-2);border:1px solid var(--trait);border-radius:16px;padding:22px 26px;margin:28px 0}
.prose .encadre p:last-child{margin:0}

/* cartes (listes de pages) */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:30px 0 10px;max-width:none}
.carte{display:flex;flex-direction:column;gap:9px;padding:24px 26px;background:#fff;border:1px solid var(--trait);
  border-radius:18px;box-shadow:var(--ombre);text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s}
.carte:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(31,111,245,.35)}
.carte .duree{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);font-weight:700}
.carte h2,.carte h3{font-size:21px;margin:0;letter-spacing:-.02em;line-height:1.2}
.carte p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.carte .suite{margin-top:auto;padding-top:6px;color:var(--acc-fonce);font-weight:700;font-size:15px}

/* appel de fin */
.appel{max-width:var(--large);margin:20px auto 70px;padding:34px 40px;border-radius:24px;
  background:linear-gradient(135deg,var(--ground-2),#fff8e8);border:1px solid var(--trait);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.appel__t{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.appel__p{margin:0;color:var(--ink-2);max-width:52ch}

/* pied */
.pied{background:var(--ground-2);border-top:1px solid var(--trait);padding:56px 28px 28px}
.pied__haut{max-width:var(--large);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.pied__col h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:700}
.pied__col p{color:var(--ink-2);font-size:15.5px;margin:14px 0 0;max-width:34ch}
.pied__col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pied__col a{color:var(--ink-2);text-decoration:none;font-size:15.5px}
.pied__col a:hover{color:var(--acc);text-decoration:underline}
.marque--pied{font-size:24px}
.pied__bas{max-width:var(--large);margin:36px auto 0;padding-top:22px;border-top:1px solid var(--trait);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-3)}
.pied__bas p{margin:0}
.pied__bas ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:wrap}
.pied__bas a{color:var(--ink-3);text-decoration:none}
.pied__bas a:hover{color:var(--acc)}

@media (max-width:860px){
  .menu{position:fixed;inset:56px 0 auto;flex-direction:column;align-items:flex-start;gap:0;background:#fff;
    border-bottom:1px solid var(--trait);padding:8px 28px 20px;display:none}
  .menu.ouvert{display:flex}
  .menu a{padding:13px 0;width:100%;border-bottom:1px solid var(--trait);font-size:17px}
  .menu .btn{margin-top:14px;border-bottom:0}
  .burger{display:block}
  .pied__haut{grid-template-columns:1fr 1fr}
  .appel{padding:26px 24px}
}
@media (max-width:540px){.pied__haut{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* formulaire de contact */
.formulaire{display:grid;gap:18px;max-width:34rem;margin:26px 0 10px}
.champ{display:grid;gap:7px}
.champ label{font-weight:700;font-size:15.5px}
.champ label span{font-weight:400;color:var(--ink-3);font-size:14px}
.champ input,.champ select,.champ textarea{font:inherit;font-size:16.5px;padding:12px 15px;border-radius:12px;
  border:2px solid #cfd6e4;background:#fff;color:#111;width:100%}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--acc);outline:3px solid rgba(31,111,245,.18);outline-offset:0}
.champ textarea{resize:vertical;min-height:130px;line-height:1.5}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire .btn{justify-self:start}
.retour{min-height:24px;margin:0;font-weight:600;font-size:15.5px;color:var(--ink-2)}
.retour.ok{color:#1a7f45}
.retour.ok::before{content:"✓ ";font-weight:800}
.retour.erreur{color:#b3261e}
.retour.erreur::before{content:"✕ ";font-weight:800}


/* ================================================================ horlogerie
   Huit pièces, posées là où chacune a un sens. Règle tenue partout :
   une seule pièce animée par écran, et jamais d'information portée par la
   couleur seule. Le repos (classe « calme » ou mouvement réduit) les fige. */
/* ================= 1. cadran ================= */
.cadran{width:150px;height:150px;display:block;flex:none}
.cadran .verre{fill:#fff;stroke:rgba(15,21,36,.16);stroke-width:1.4}
.cadran .min{fill:none;stroke:rgba(15,21,36,.34);stroke-width:5;stroke-dasharray:1.3 6.973;stroke-dashoffset:.65}
.cadran .heu{fill:none;stroke:rgba(15,21,36,.85);stroke-width:11;stroke-dasharray:2.6 37.72;stroke-dashoffset:1.3}
.cadran .aig{stroke-linecap:round}   /* le centre de rotation est deja dans l'attribut transform */
.cadran .aig--h{stroke:var(--ink);stroke-width:6.5}
.cadran .aig--m{stroke:var(--ink);stroke-width:4}
.cadran .noyau{fill:var(--ink)}
.cadran .noyau-clair{fill:#fff}
.cadran .sig{font-family:var(--mono);font-size:13px;font-weight:700;fill:var(--ink-3);letter-spacing:.08em}

/* ================= 2. trotteuse ================= */
.trotteuse{width:104px;height:104px;flex:none}
.trotteuse .piste{fill:none;stroke:var(--trait);stroke-width:2}
.trotteuse .crans{fill:none;stroke:rgba(15,21,36,.3);stroke-width:6;stroke-dasharray:1.2 24.15;stroke-dashoffset:.6}
.trotteuse .bras{stroke:var(--ink);stroke-width:3;stroke-linecap:round;transform-origin:60px 60px;
  animation:tourne 60s steps(60,end) infinite}
.trotteuse .contrepoids{fill:var(--or);stroke:var(--ink);stroke-width:1.6;transform-origin:60px 60px;
  animation:tourne 60s steps(60,end) infinite}
.trotteuse--lisse .bras,.trotteuse--lisse .contrepoids{animation-timing-function:linear;animation-duration:8s}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ================= 3. rouage ================= */
.rouage{width:100%;max-width:320px;height:auto}
.rouage .dent{fill:none;stroke:rgba(15,21,36,.62);stroke-width:1.7;stroke-linejoin:round}
.rouage .moyeu{fill:none;stroke:rgba(15,21,36,.32);stroke-width:1.5}
.rouage .rai{stroke:rgba(15,21,36,.32);stroke-width:2.6;stroke-linecap:round}
.rouage .axe{fill:var(--or);stroke:var(--ink);stroke-width:1.6}
.rouage .roue{transform-box:fill-box;transform-origin:center;animation:tourne linear infinite}
.rouage .roue--a{animation-duration:24s}
.rouage .roue--b{animation-duration:16s;animation-direction:reverse}
.rouage .roue--c{animation-duration:12s}

/* ================= 4. échappement ================= */
.echap{width:180px;height:150px;flex:none}
.echap .cage{fill:none;stroke:var(--trait);stroke-width:1.6}
.echap .jante{fill:none;stroke:rgba(15,21,36,.7);stroke-width:4}
.echap .rai{stroke:rgba(15,21,36,.45);stroke-width:2.4;stroke-linecap:round}
.echap .plot{fill:var(--or);stroke:var(--ink);stroke-width:1.4}
.echap .balancier{transform-box:fill-box;transform-origin:center;
  animation:oscille 1.6s cubic-bezier(.42,0,.58,1) infinite alternate}
.echap .ancre{fill:none;stroke:rgba(15,21,36,.75);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  transform-origin:90px 34px;animation:bascule 1.6s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes oscille{from{transform:rotate(-32deg)}to{transform:rotate(32deg)}}
@keyframes bascule{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}

/* ================= 5. compteur ================= */
.compteur{display:grid;gap:9px;width:100%;max-width:330px}
.compteur__n{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.compteur__n .u{font-size:22px;font-weight:700;color:var(--ink-2);letter-spacing:-.01em;margin-left:6px;white-space:nowrap}
.compteur__l{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.compteur__barre{height:12px;border-radius:999px;background:var(--ground-3);border:1px solid var(--trait);overflow:hidden;position:relative}
.compteur__barre i{display:block;height:100%;width:0;background:
  repeating-linear-gradient(135deg,var(--acc) 0 7px,#4d8dff 7px 14px);transition:width 1.4s var(--ease)}
.compteur__pied{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* ================= 6. frise horaire ================= */
.frise{width:100%;padding:8px 0 4px}
.frise__rail{position:relative;height:3px;background:var(--trait);border-radius:2px;margin:34px 62px 64px}
.frise__pleine{position:absolute;inset:0;background:var(--ink);border-radius:2px;transform-origin:left;transform:scaleX(1)}
.frise__pts{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.frise__pts li{position:absolute;top:-6px;left:var(--x);transform:translateX(-50%);text-align:center;width:120px}
.frise__pts b{display:block;width:15px;height:15px;margin:0 auto;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.frise__pts li[data-fait] b{background:var(--ink)}
.frise__pts li[data-fait] b::after{content:"";display:block;width:5px;height:5px;margin:2px auto;border-radius:50%;background:#fff}
.frise__pts .h{display:block;margin-top:10px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink)}
.frise__pts .q{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.35}
@supports (animation-timeline: view()){
  .frise__pleine{transform:scaleX(0);animation:croitX linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
}
@keyframes croitX{to{transform:scaleX(1)}}
/* au repos, une frise vide serait un mensonge : on la remet pleine */
html.calme .frise__pleine{transform:scaleX(1)!important}
@media (prefers-reduced-motion:reduce){.frise__pleine{transform:scaleX(1)!important}}

/* ================= 7. minuterie ================= */
.minuterie{position:relative;width:158px;height:158px;flex:none}
.minuterie svg{width:100%;height:100%}
.minuterie .crans,.minuterie .arc{transform:rotate(-90deg);transform-origin:79px 79px}
.minuterie .fond{fill:none;stroke:var(--ground-3);stroke-width:13}
.minuterie .crans{fill:none;stroke:rgba(15,21,36,.22);stroke-width:13;stroke-dasharray:1.8 14.85;stroke-dashoffset:.9}
.minuterie .arc{fill:none;stroke:var(--ink);stroke-width:13;stroke-linecap:butt;
  stroke-dasharray:var(--c);stroke-dashoffset:calc(var(--c) * (1 - var(--part)))}
.minuterie .repere{stroke:var(--or);stroke-width:4;stroke-linecap:round}
.minuterie__val{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.minuterie__val b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.minuterie__val span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;line-height:1.3;
  text-transform:uppercase;color:var(--ink-3);margin:6px auto 0;max-width:82px}
@supports (animation-timeline: view()){
  .minuterie .arc{animation:remplit linear both;animation-timeline:view();animation-range:entry 40% cover 40%}
}
@keyframes remplit{from{stroke-dashoffset:var(--c)}}

/* ================= 8. badge heure ================= */
.tic{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--ground-2);
  border:1px solid var(--trait);border-radius:999px;padding:6px 14px}
.tic .pt{width:7px;height:7px;border-radius:50%;background:var(--or);border:1.5px solid var(--ink);
  animation:bat-tic 2s steps(1,end) infinite}
.tic .hh{font-variant-numeric:tabular-nums;color:var(--acc-fonce)}
@keyframes bat-tic{0%,50%{transform:scale(1)}50.01%,100%{transform:scale(.45)}}

/* repos */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
html.calme *,html.calme *::before,html.calme *::after{animation:none!important;transition:none!important}
@media (max-width:700px){.frise__pts li{width:86px}.frise__pts .q{display:none}}


/* placements dans les pages */
.signature-heure{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.signature-heure .cadran{width:56px;height:56px}
.signature-heure p{margin:0;font-size:14px;color:var(--ink-3);max-width:26ch;line-height:1.4}
.bloc-temps{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  background:var(--ground-2);border:1px solid var(--trait);border-radius:18px;padding:24px 28px;margin:34px 0}
.bloc-temps p{margin:0;color:var(--ink-2);font-size:16px}
.bloc-temps p strong{color:var(--ink)}
.rouage-fond{position:relative}
.rouage-fond .rouage{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  max-width:260px;opacity:.13;pointer-events:none;z-index:0}
.rouage-fond > *{position:relative;z-index:1}
@media (max-width:900px){.rouage-fond .rouage{display:none}.bloc-temps{grid-template-columns:1fr}}
html.calme .rouage .roue,html.calme .echap .balancier,html.calme .echap .ancre,
html.calme .trotteuse .bras,html.calme .trotteuse .contrepoids{animation:none!important}

.envoi{display:flex;align-items:center;gap:16px}
.envoi__tourne .trotteuse{width:38px;height:38px}

/* l'avancement de lecture, en bas à droite, discret */
.avancement{position:fixed;right:22px;bottom:22px;z-index:30;background:rgba(255,255,255,.9);
  border:1px solid var(--trait);border-radius:999px;padding:8px;box-shadow:var(--ombre);
  opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s;pointer-events:none}
.avancement.visible{opacity:1;transform:none}
.avancement .minuterie{gap:0}
.avancement .minuterie svg{width:52px;height:52px}
.avancement .minuterie__val{position:absolute;inset:0;display:grid;place-content:center;margin:0;text-align:center}
.avancement .minuterie__val b{font-size:12px;letter-spacing:-.02em}
.avancement .minuterie__val span{display:none}
.avancement .arc{transition:stroke-dashoffset .12s linear}
@media (max-width:860px){.avancement{display:none}}