/* Demain Solutions · fabriqué par construire.mjs : ne pas modifier ici, mais dans les sources */
/* la police, servie par le site lui-même (Hanken Grotesk, voir polices/LISEZMOI.txt) : le latin courant, puis les lettres accentuées plus rares */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(polices/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(polices/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--nuit:#11123A;--eau:#0B0B28;--rose:#D9586F;--abricot:#F4845A;--miel:#FDB668;--soleil:#FFE3A3;--lavande:#9690CC;--soir:#5E5A88;--lait:#FBF4EA;
  --f:'Hanken Grotesk',system-ui,sans-serif;
  --u:clamp(14px,1.875vw,24px)} /* un carré du soleil */
@supports (width:round(down,10px,1px)){:root{--u:round(down,clamp(14px,1.875vw,24px),1px)}} /* en pixels entiers, pour des bords nets */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--lien);outline-offset:3px;border-radius:6px}

/* les deux ambiances */
.jour{--fond:#fff;--tuile:#F5F5F7;--surf:#fff;--fort:#14152F;--doux:#6B6B7B;--lien:#5348C7;--inv:#fff;
  --b1:rgba(20,21,47,.84);--b2:rgba(20,21,47,.11);--b3:#DADAE3;--b4:#C9C9D6;--trait:rgba(20,21,47,.09);--ombre:rgba(17,18,58,.3)}
.soir{--fond:#0B0B28;--tuile:#15163F;--surf:#20215A;--fort:#FBF4EA;--doux:#A7A3D1;--lien:#FFE3A3;--inv:#11123A;
  --b1:rgba(251,244,234,.88);--b2:rgba(251,244,234,.15);--b3:#2B2C6C;--b4:#383A80;--trait:rgba(255,255,255,.09);--ombre:rgba(0,0,0,.6)}
.jour,.soir{background:var(--fond);color:var(--fort)}

/* la barre du haut : elle reste en place, le fond de la page se devine derrière */
.nv{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fond) 80%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid var(--trait);font-size:13px;letter-spacing:-.005em;transition:background-color .35s,color .35s,border-color .35s}
.nv .in{max-width:1044px;margin:0 auto;padding:0 22px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nv nav{display:flex;gap:clamp(18px,2.8vw,36px)}
.nv nav a,.nv .ct{opacity:.84;transition:opacity .2s}
.nv nav a:hover,.nv .ct:hover{opacity:1}
.nv .mn,.nv nav .ctm{display:none}
[data-logo] span{display:block}
.nv.soir .lg-c,.nv.jour .lg-n{display:none}
@media (max-width:720px){
  .nv nav{display:none;position:absolute;left:0;right:0;top:52px;flex-direction:column;gap:0;padding:4px 22px 12px;background:var(--fond);border-bottom:1px solid var(--trait)}
  .nv.ouvert nav{display:flex}
  .nv nav a,.nv nav .ctm{display:block;padding:12px 0;font-size:17px;opacity:1;border-top:1px solid var(--trait)}
  .nv nav a:first-child{border-top:0}
  .nv .ct{display:none}
  .nv .mn{display:block;padding:10px 0 10px 14px}
}

/* le premier écran */
.hr{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,8.1vw,104px) 22px clamp(60px,7.2vw,92px)}
.hr h1{font-size:clamp(40px,6.9vw,88px);font-weight:600;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}


/* la suite de la page d'accueil : des blocs à plat, sans boîtes ni lueurs */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bl{max-width:1364px;margin:0 auto;padding:clamp(72px,10vw,150px) 22px 0;scroll-margin-top:52px}
.bl h2,.bl h3{font-size:clamp(30px,4.4vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1.08;text-align:center;margin-bottom:clamp(28px,4vw,56px)}
/* les métiers : une liste, en grand ; chaque ligne mène à son chapitre */
.mt ul{list-style:none;text-align:center}
.mt li{font-size:clamp(30px,8.2vw,92px);font-weight:600;letter-spacing:-.045em;line-height:1.14}
.mt a{display:inline-block;transition:opacity .3s}
/* au survol, les autres lignes s'effacent ; celle qu'on vise reste telle quelle */
@media (hover:hover){.mt ul:has(a:hover) a:not(:hover),.mt ul:has(a:focus-visible) a:not(:focus-visible){opacity:.28}}
/* un chapitre par métier : son nom, puis une chose à la fois, en grand ; pas de petite ligne sous les titres */
.ch{padding-top:clamp(120px,26vh,280px)}
.ch>h2{font-size:clamp(30px,8.2vw,92px);font-weight:600;letter-spacing:-.045em;line-height:1.08;text-align:center;padding:0 22px;text-wrap:balance}
/* chaque phrase s'éclaire en arrivant dans la zone de lecture, au rythme de la descente (--l, posé par la page ; 1 sans animation) */
.dit{max-width:1240px;margin:clamp(96px,27vh,290px) auto 0;padding:0 22px;font-size:clamp(27px,6vw,70px);font-weight:600;letter-spacing:-.04em;line-height:1.1;text-align:center;text-wrap:balance;
  opacity:calc(.16 + .84*var(--l,1))}
.ch .bl{padding-top:clamp(96px,27vh,290px)}
.ch .bl h3{scroll-margin-top:clamp(84px,12vh,130px)}
.ch+.ctc{padding-top:clamp(140px,32vh,340px)} /* le contact ne se lit pas comme la suite du dernier chapitre */
/* les vraies captures des sites : toute la vignette est le lien */
.rl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px) clamp(14px,2vw,28px)}
.cp{display:block}
.cp img{width:100%;height:auto;aspect-ratio:160/93;object-fit:cover;object-position:top;border-radius:clamp(10px,1.2vw,16px);outline:1px solid var(--trait);outline-offset:-1px} /* le bas de la capture est rogné : on n'y voit pas le début de la section suivante */
.cp .lgd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px}
.cp b{font-weight:500}
.cp i{font-style:normal;font-size:15px;color:var(--doux);transition:color .2s}
.cp:hover i{color:var(--lien)}
.cp.seul{max-width:1040px;margin:0 auto}
.cp.seul img{aspect-ratio:160/84}
.cp.seul .lgd{justify-content:center}
@media (max-width:700px){.rl{grid-template-columns:1fr}}
/* les coordonnées : l'adresse en grand, les numéros en petit */
.ctc{text-align:center;padding-bottom:clamp(72px,10vw,150px)}
.ctc .ml{font-size:clamp(20px,5.6vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1.1;transition:color .2s}
.ctc .ml:hover{color:var(--lien)}
.ctc ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(24px,4vw,56px);margin-top:clamp(18px,2.4vw,30px);color:var(--doux)}
.ctc li a{color:var(--fort);white-space:nowrap;margin-left:.4em}
.ctc li a:hover{color:var(--lien)}


/* le bas de page */
.pied{border-top:1px solid var(--trait);margin-top:clamp(36px,5vw,72px);padding:26px 22px 44px;font-size:13px;color:var(--doux)}
.pied .in{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.pied nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pied nav a:hover{color:var(--fort)}
.pied .c{margin-left:auto}
@media (max-width:700px){.pied .c{margin-left:0;width:100%}}

/* au doigt : chaque lien offre au moins 44 px de haut. Le logo, « Menu » et l’adresse grandissent sans rien déplacer ; les deux numéros s’écartent un peu */
@media (pointer:coarse){
  .nv .lg{padding:17px 0}
  .nv .mn{padding:13px 0 13px 14px}
  .ctc .ml{display:inline-block;padding:11px 0;margin:-11px 0}
  .ctc ul{row-gap:0;margin-top:calc(clamp(18px,2.4vw,30px) - 10px)}
  .ctc li a{display:inline-block;padding:10px 0}
  .pied nav a{display:inline-block;padding:13px 0;margin:-13px 0}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}