/* PLANCHE DE CHOIX, interne.
   Ce n'est pas une vitrine : c'est un outil de decision qu'Adrien ouvre une
   fois pour dire un numero. Donc tout est au service de la comparaison :
   des captures aussi grandes que possible, et le strict minimum de decor
   autour, pour ne pas influencer son oeil avec MON design. */
:root{
  --nuit:#0B0D11; --nuit-2:#13161D;
  --filet:rgba(255,255,255,.1);
  --blanc:#F4F5F7; --gris:#AEB5C2; --accent:#B892F0;
  --texte:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --e:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  color-scheme:dark;overflow-x:hidden;overscroll-behavior:none;
  scroll-behavior:smooth}
body{margin:0;background:var(--nuit);color:var(--blanc);
  font-family:var(--texte);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a,button{touch-action:manipulation}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.evite{position:absolute;left:-9999px;top:0;background:var(--accent);
  color:#111;padding:.8rem 1.1rem;z-index:100}
.evite:focus{left:0}
.w{max-width:1120px;margin:0 auto;padding:0 20px}

.tete{padding:72px 0 44px}
.tete h1{font-size:clamp(2.1rem,6.5vw,3.4rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.02;margin:0 0 1.1rem;text-wrap:balance}
.chapo{max-width:56ch;color:var(--gris);font-size:1.03rem;margin:0 0 .9rem;
  text-wrap:pretty}
.chapo--2{font-size:.95rem;color:#8C94A3}

/* ══ UNE DIRECTION ══
   Le numero est gros et a gauche : c'est la seule chose qu'Adrien doit me
   renvoyer. La capture passe en dessous, pleine largeur, parce qu'une
   direction artistique ne se juge pas sur une vignette. */
.dir{border-top:1px solid var(--filet);padding:40px 0 48px}
.dir__t{display:flex;gap:18px;align-items:flex-start;margin-bottom:24px}
.dir__n{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;
  background:var(--nuit-2);border:1px solid var(--filet);
  font-size:1.25rem;font-weight:800;color:var(--blanc)}
.dir h2{font-size:clamp(1.25rem,3.2vw,1.72rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.18;margin:.3rem 0 .7rem;
  text-wrap:balance}
.dir__v{margin:0 0 .7rem;color:var(--gris);max-width:62ch;text-wrap:pretty}
.dir__m{margin:0 0 1rem;max-width:62ch;font-size:.97rem;color:var(--gris);
  text-wrap:pretty}
.dir__m b{color:var(--blanc)}
.dir__l{display:inline-flex;align-items:center;min-height:46px;
  font-size:.92rem;font-weight:600;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:rgba(184,146,240,.45);
  transition:text-decoration-color .2s var(--e)}
.dir__p{margin:0;border-radius:16px;overflow:hidden;background:var(--nuit-2);
  border:1px solid var(--filet)}

/* La direction hors de portee est grisee : elle reste lisible, mais l'oeil
   comprend tout de suite qu'elle n'est pas au menu. */
.dir--non .dir__p{filter:grayscale(.75);opacity:.6}
.dir--non .dir__n{color:var(--gris)}

.pied{border-top:1px solid var(--filet);padding:40px 0 64px;color:var(--gris)}
.pied p{margin:0 0 .5rem}
.pied b{color:var(--blanc)}
.pied__p{font-size:.95rem}
.pied a{display:inline-flex;align-items:center;min-height:46px}

@media (min-width:860px){
  .tete{padding:104px 0 56px}
  .dir{padding:56px 0 64px}
  .dir__n{width:54px;height:54px;font-size:1.4rem}
}

@media (hover:hover) and (pointer:fine){
  .dir__l:hover{text-decoration-color:var(--accent)}
}
@media (hover:none),(pointer:coarse){
  .dir__l{text-decoration-color:rgba(184,146,240,.45)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ══ LE BLOC DES MODELES GRATUITS ══
   Il arrive APRES les huit directions, volontairement : Adrien doit avoir
   l'oeil plein des beaux avant de voir a quoi ressemble le tout-venant.
   C'est la comparaison qui porte l'argument, pas mon commentaire. */
.bloc{border-top:1px solid var(--filet);padding:48px 0 16px}
.bloc__h{font-size:clamp(1.3rem,3.4vw,1.9rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.16;margin:0 0 1rem;max-width:22ch;
  text-wrap:balance}
.bloc__c{max-width:64ch;color:var(--gris);margin:0 0 1rem;text-wrap:pretty}
.bloc__c b{color:var(--blanc)}
.bloc__c--fin{margin-top:1.4rem}
.trio{display:grid;gap:16px;margin:1.6rem 0 0}
.trio__i{margin:0}
.trio__i img{border-radius:12px;border:1px solid var(--filet);
  background:var(--nuit-2)}
.trio__i figcaption{margin-top:.5rem;font-size:.85rem;color:#8C94A3}
@media (min-width:760px){
  .trio{grid-template-columns:repeat(3,1fr)}
  .bloc{padding:64px 0 24px}
}