/* journal-socle.css - les variables de couleur du journal.
   Sorti du HTML le 5 octobre : ce bloc etait recopie a l identique
   sur 10 page(s). Le <link> est pose la ou etait le <style>, donc au
   meme rang dans la cascade. Ne pas reordonner.
   Empreinte du bloc d origine : 7a3be9b2 */

:root{
  --navy:#0F2B46; --navy-d:#0A1F33;
  --sky:#2E7BA8; --sky-l:#9CC3DB; --sky-bg:#E6EEF4;
  --ocre:#C28840; --ocre-d:#9C6A2E;
  --mist:#D7E1E8; --canvas:#FAFAF9; --pierre:#EFEAE0;
  --ink:#121417; --soft:#46525D; --faint:#8A959E;
  --fil:rgba(15,43,70,.12); --fil2:rgba(15,43,70,.22);
  --mono:'Geist Mono',ui-monospace,monospace;
  --sans:'Archivo',system-ui,sans-serif;
  --t:cubic-bezier(.22,.61,.36,1);
  --px:clamp(16px,4vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  font-size:17.5px;line-height:1.62;text-wrap:pretty;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--sky);z-index:60}

/* en-tete */
.jr-hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:14px var(--px);background:rgba(250,250,249,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--fil)}
.jr-hd .jr-mk{font-weight:600;letter-spacing:-.03em;font-size:17px;line-height:1.05;color:var(--navy);white-space:nowrap}
.jr-hd .jr-mk i{font-style:normal}
.jr-hd nav{flex:1;display:flex;justify-content:center;gap:28px}
.jr-hd nav a{text-decoration:none;font-size:14.5px;color:var(--navy)}
.jr-hd nav a:hover{color:var(--sky)}
.jr-hd .jr-rt{display:flex;align-items:center;gap:16px}
.jr-hd .jr-tel{font-family:var(--mono);font-size:13px;color:var(--navy);text-decoration:none;white-space:nowrap}
.jr-hd .jr-btn{background:var(--navy);color:#fff;text-decoration:none;font-size:13.5px;padding:11px 18px;white-space:nowrap}

/* grille de 12, colonne de texte de 61 signes, calee en colonne 3 */
.jr-w{max-width:1440px;margin:0 auto;padding:0 var(--px)}
.jr-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.jr-tx{grid-column:3 / 8}
.jr-rail{grid-column:1 / 3;font-family:var(--mono);font-size:10px;line-height:1.7;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ocre-d);padding-top:6px}
.jr-rail b{display:block;font-weight:600;color:var(--faint);letter-spacing:.2em}

/* fil d'ariane et tete d'article */
.jr-ar{padding:24px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.jr-ar a{color:var(--faint);text-decoration:none}
.jr-ar a:hover{color:var(--sky)}
.jr-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;
  padding:30px 0 clamp(44px,6vw,96px)}
.jr-hero .jr-ht{grid-column:1 / 6}
.jr-hero .jr-hp{grid-column:7 / 13;position:relative}
.jr-kick{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ocre-d);margin-bottom:18px}
h1{margin:0;font-size:50px;line-height:1.04;font-weight:500;letter-spacing:-.035em;color:var(--navy)}
.jr-chapo{margin:22px 0 0;font-size:25px;line-height:1.38;letter-spacing:-.015em;color:var(--soft)}
.jr-sig{margin-top:26px;padding-top:14px;border-top:1px solid var(--fil);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
/* plaque posee sur la photo de tete, forme validee le 1er octobre */
.jr-plq{position:absolute;left:12px;bottom:12px;background:rgba(18,20,23,.5);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px}

/* sections */
.jr-sec{padding:clamp(44px,6.5vw,96px) 0}
.jr-sec.jr-pierre{background:var(--pierre)}
.jr-sec.jr-mist{background:var(--sky-bg)}
.jr-sec.jr-navy{background:var(--navy);color:#fff}
.jr-sec.jr-navy h2{color:#fff}
.jr-sec.jr-navy .jr-rail{color:var(--sky-l)}
.jr-sec.jr-navy .jr-rail b{color:rgba(255,255,255,.5)}
h2{margin:0 0 18px;font-size:28px;line-height:1.14;font-weight:500;letter-spacing:-.03em;color:var(--navy)}
.jr-tx p{margin:0 0 16px}
.jr-tx p:last-child{margin-bottom:0}
a.jr-lk{color:inherit;text-decoration:none;box-shadow:inset 0 -1px 0 var(--sky-l);transition:box-shadow .2s var(--t)}
a.jr-lk:hover{box-shadow:inset 0 -2px 0 var(--sky)}
.jr-sec.jr-navy a.jr-lk{box-shadow:inset 0 -1px 0 rgba(156,195,219,.65)}

/* figures : 4 poses, legende dans la marge, rapport natif conserve */
.jr-fg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;
  margin:clamp(34px,4.5vw,66px) 0}
.jr-fg figcaption{font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ocre-d);padding-top:4px}
.jr-fg.jr-a img{grid-column:3 / 8}   .jr-fg.jr-a figcaption{grid-column:1 / 3;grid-row:1}
.jr-fg.jr-b img{grid-column:3 / 12}  .jr-fg.jr-b figcaption{grid-column:1 / 3;grid-row:1}
.jr-fg.jr-c img{grid-column:1 / 8}   .jr-fg.jr-c figcaption{grid-column:9 / 13;grid-row:1}
.jr-fg.jr-d img{grid-column:6 / 13}  .jr-fg.jr-d figcaption{grid-column:1 / 3;grid-row:1}
.jr-fg img{grid-row:1}

/* appel */
.jr-cta{color:#fff;margin-top:clamp(36px,5vw,64px);padding-top:clamp(32px,4.5vw,52px);
  border-top:1px solid rgba(255,255,255,.18);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.jr-cta .jr-t{grid-column:3 / 9}
.jr-cta .jr-a{grid-column:9 / 13}
.jr-cta h2{margin-bottom:10px}
.jr-cta p{margin:0;color:rgba(255,255,255,.76)}
.jr-telplq{display:flex;align-items:center;justify-content:center;background:var(--sky);color:#fff;
  text-decoration:none;height:72px;font-size:21px;font-weight:500}
.jr-cta .jr-sub{display:block;margin-top:12px;text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);text-decoration:none}
.jr-cta .jr-sub:hover{color:#fff}

/* a lire aussi */
.jr-al{padding:clamp(40px,6vw,74px) 0;border-top:1px solid var(--fil)}
.jr-al .jr-k{display:block;padding-bottom:14px;border-bottom:1px solid var(--navy);font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.jr-al a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--fil);text-decoration:none;transition:padding-left .2s var(--t)}
.jr-al a:hover{padding-left:10px}
.jr-al a b{font-weight:450;font-size:17px;letter-spacing:-.02em;color:var(--navy)}
.jr-al a:hover b{color:var(--sky)}
.jr-al a i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}

/* pied */
.jr-ft{background:var(--navy-d);color:rgba(255,255,255,.62);padding:34px 0;font-size:12.5px}
.jr-ft .jr-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
.jr-ft a{color:rgba(255,255,255,.62);text-decoration:none}

.jr-rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--t),transform .7s var(--t)}
.jr-rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.jr-rv{opacity:1;transform:none;transition:none}}

/* ---------------- telephone ---------------- */
@media(max-width:860px){
  body{font-size:17px}
  .jr-hd{gap:10px;padding:11px var(--px)}
  .jr-hd nav{display:none}
  .jr-hd .jr-mk{font-size:11.5px;letter-spacing:.01em}
  .jr-hd .jr-mk i{display:block}
  .jr-hd .jr-rt{gap:10px}
  .jr-hd .jr-tel{font-size:11.5px}
  .jr-hd .jr-btn{font-size:11.5px;padding:9px 12px}

  .jr-g,.jr-hero,.jr-fg,.jr-cta{grid-template-columns:1fr;gap:0}
  .jr-tx,.jr-rail,.jr-hero .jr-ht,.jr-hero .jr-hp,.jr-cta .jr-t,.jr-cta .jr-a{grid-column:1/-1}
  .jr-rail{padding:0 0 10px}
  .jr-rail br{display:none}

  /* la photo de tete seule va bord a bord, les autres gardent la gouttiere */
  .jr-hero{padding:16px 0 30px}
  .jr-hero .jr-hp{order:-1;margin:0 calc(-1 * var(--px)) 24px}
  h1{font-size:clamp(28px,7.8vw,36px)}
  .jr-chapo{font-size:19px;margin-top:16px}
  h2{font-size:clamp(22px,5.7vw,27px)}
  .jr-fg{margin:24px 0}
  .jr-fg.jr-a img,.jr-fg.jr-b img,.jr-fg.jr-c img,.jr-fg.jr-d img,
  .jr-fg.jr-a figcaption,.jr-fg.jr-b figcaption,.jr-fg.jr-c figcaption,.jr-fg.jr-d figcaption{grid-column:1/-1;grid-row:auto}
  .jr-fg figcaption{padding-top:9px}
  .jr-cta .jr-a{margin-top:26px}
  .jr-sec{padding:clamp(40px,9vw,60px) 0}
}
/* --- jonction avec le socle et proportions du heros --- */
main>.jr-w{padding-top:clamp(96px,9vw,124px)}
@media(max-width:860px){main>.jr-w{padding-top:104px}}
.jr-hero{align-items:start}
.jr-hero .jr-hp img{max-height:min(68vh,660px);width:auto;height:auto;margin-left:auto;display:block}
@media(max-width:860px){.jr-hero .jr-hp img{max-height:none;width:100%;margin-left:0}}
/* --- signature du titre, comme les pages de service --- */
h1{font-weight:200!important;letter-spacing:-.038em!important;line-height:1.02!important}
h1 b{font-weight:640!important;letter-spacing:-.042em!important}
@media(max-width:860px){h1{font-weight:340!important;letter-spacing:-.03em!important}
  h1 b{font-weight:700!important}}