/* ============================================================================
   LE BRIEF, portfolio de Victoria Boissonade
   Système visuel. Le contrat de direction est en tête de index.html.
   ==========================================================================*/

/* ------------------------------------------------------------------ jetons */
:root{
  /* palette imposée */
  --prune:#693163;
  --vin:#762c49;
  --bordeaux:#4d142a;
  --rose:#d8a6d8;
  --noir:#000000;

  /* le fond de page est un bordeaux encré, plus profond que la couleur de champ,
     pour que les champs se détachent sans qu'aucune carte ne soit dessinée */
  --fond:#2e0b1a;
  --champ:#3d0f22;
  --champ-haut:#4d142a;

  /* encres : sur fond coloré, le secondaire se teinte de la couleur, jamais gris */
  --encre:#fdf6fa;
  --encre-2:#e0b9cb;
  --encre-3:#cb9fb3;
  --trait:rgba(216,166,216,.26);
  --trait-fort:rgba(216,166,216,.5);

  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,'Cascadia Mono',monospace;

  --marge:clamp(18px,4.5vw,64px);
  --large:1180px;
  --tres-large:1440px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--fond);
  color:var(--encre);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.62;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--rose);color:var(--fond)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:2px}

.feuille{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
.feuille.large{max-width:var(--tres-large)}
.ico{width:1em;height:1em;flex:none}

/* Le monogramme. La marque doit se voir avant le contenu : il est en tête de page,
   dans la barre collante et au pied. */
.sceau{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:4px;
  background:var(--rose);color:var(--fond);
  font-family:var(--ui);font-weight:900;font-size:14px;letter-spacing:-.06em;
}

/* ------------------------------------------------------- grammaire du brief */
/* Un champ de brief : une référence, un libellé, une valeur. C'est la seule
   structure du site. Tout le contenu passe par elle, y compris les études de
   cas et les questions, ce qui évite d'inventer un conteneur par section. */
.champ{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:clamp(18px,3.4vw,44px);
  padding:clamp(34px,5vw,62px) 0;
  border-top:1px solid var(--trait);
  scroll-margin-top:92px;   /* l'entête collante ne doit pas manger le libellé */
}
.champ:first-of-type{border-top:0}
.champ > .ref{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  color:var(--rose);
  padding-top:.5em;
  letter-spacing:-.05em;
}
.champ > .ref b{display:block;font-weight:700;font-size:20px;letter-spacing:-.08em}
.champ > .corps{min-width:0}

.libelle{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:-.05em;
  text-transform:uppercase;
  color:var(--rose);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.libelle::after{content:"";flex:1;height:1px;background:var(--trait)}

h2{
  font-size:clamp(29px,4.4vw,52px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.04em;
  word-spacing:.06em;
  font-variation-settings:"wdth" 88;
  max-width:19ch;
  text-wrap:balance;
  margin-bottom:clamp(16px,1.8vw,22px);
}
h3{
  font-size:clamp(20px,2.4vw,26px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.035em;
  font-variation-settings:"wdth" 92;
}
p{margin-bottom:1em;max-width:68ch}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--encre)}
em{font-style:normal;font-weight:700;color:var(--rose)}
.dit{color:var(--encre-2);font-size:clamp(17px,1.9vw,20px);line-height:1.55;max-width:60ch}
.apres-liste{margin-top:28px}

/* ------------------------------------------------------------------- entête */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:18px;
  padding:11px var(--marge);
  background:rgba(46,11,26,.78);
  backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.2,0,.2,1),border-color .4s;
}
.entete.posee{transform:none;border-bottom-color:var(--trait)}
.entete .doc{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;margin-right:auto;white-space:nowrap;
}
.entete .nom{display:flex;flex-direction:column;line-height:1.2}
.entete .nom b{font-size:14.5px;font-weight:800;letter-spacing:-.035em;
  font-variation-settings:"wdth" 92}
.entete .nom i{font-family:var(--mono);font-style:normal;font-size:11px;
  letter-spacing:-.05em;color:var(--rose)}
.entete nav{display:flex;gap:2px}
.entete nav a{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:-.06em;
  color:var(--encre-3);text-decoration:none;padding:7px 10px;border-radius:3px;
  transition:color .2s,background .2s;white-space:nowrap;
}
.entete nav a:hover{color:var(--encre);background:rgba(216,166,216,.14)}
.entete nav a[aria-current]{color:var(--fond);background:var(--rose)}
@media(max-width:1080px){.entete nav{display:none}}

/* ------------------------------------------------- couverture du document */
/* Calée en haut, pas centrée : un document commence par son cartouche. */
.couverture{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  /* Le premier écran doit TENIR dans la fenêtre, sinon le repère de défilement
     se retrouve lui-même sous la ligne de flottaison. Mesuré à 965 px pour une
     fenêtre de 860 avant resserrage. */
  padding:clamp(56px,7vh,88px) 0 clamp(56px,7vh,78px);
  scroll-margin-top:92px;
  position:relative;              /* ancre le repère de défilement */
}
.cartouche{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:-.06em;
  color:var(--encre-3);
  padding-bottom:22px;
  border-bottom:1px solid var(--trait);
  position:relative;
}
.cartouche b{color:var(--rose);font-weight:600}
.cartouche .ouvert{display:inline-flex;align-items:center;gap:7px;color:var(--encre)}
.cartouche .ouvert i{
  width:7px;height:7px;border-radius:50%;background:#4fd18b;flex:none;
  box-shadow:0 0 0 0 rgba(79,209,139,.6);animation:pouls 2.8s ease-out infinite;
}
@keyframes pouls{60%{box-shadow:0 0 0 9px rgba(79,209,139,0)}100%{box-shadow:0 0 0 0 rgba(79,209,139,0)}}

.couv-grille{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(32px,5.5vw,88px);
  align-items:center;
  margin-top:clamp(18px,2.4vw,34px);
}

.objet{
  font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;
  color:var(--rose);letter-spacing:-.05em;margin-bottom:20px;
}
.couverture h1{
  font-size:clamp(40px,6.2vw,82px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  word-spacing:.05em;
  font-variation-settings:"wdth" 84;
  max-width:17ch;
  text-wrap:balance;
}
.couverture h1 .pale{color:var(--rose)}
.amorce{
  margin-top:clamp(22px,3vw,32px);
  font-size:clamp(17px,1.9vw,21px);
  line-height:1.5;color:var(--encre-2);max-width:46ch;
}

/* Portrait et plaque de nom : le seul autre aplat prune de la page. */
.plaque{margin:0;justify-self:end;width:100%;max-width:390px}
/* max-height lié à la hauteur de fenêtre : sur un écran bas le portrait se recadre
   au lieu de faire déborder le premier écran. */
.plaque img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  max-height:min(390px,40svh);border-radius:4px 4px 0 0}
.plaque figcaption{
  background:var(--prune);padding:20px 24px;border-radius:0 0 4px 4px;
}
.plaque figcaption b{
  display:block;font-size:clamp(20px,2.3vw,27px);font-weight:800;
  letter-spacing:-.045em;font-variation-settings:"wdth" 88;line-height:1.05;
}
.plaque figcaption span{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:-.05em;
  color:#f4e0ef;margin-top:8px;line-height:1.5;
}

.pied-couv{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:clamp(28px,3.6vw,40px)}

/* Repère de défilement. Le premier écran occupe toute la hauteur de la fenêtre :
   sans lui, rien ne signale qu'il y a une suite, et un visiteur qui ne défile pas
   par réflexe croit la page terminée. Le libellé est explicite plutôt qu'une
   simple flèche, parce que c'est justement ce lecteur-là qu'il faut atteindre. */
.defiler{
  /* Hors du flux : il ne compte pas dans la hauteur du premier écran, donc il est
     au bas de la fenêtre par construction et non par calcul au pixel. */
  position:absolute;bottom:clamp(14px,2.4vh,26px);left:var(--marge);
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:-.04em;
  color:var(--encre-3);
  pointer-events:none;              /* indicateur, pas commande : rien à cliquer */
  user-select:none;
}
/* Un rail vertical dans lequel un segment descend en boucle. Plus parlant qu'une
   flèche figée, et ça ne ressemble pas à un bouton. */
.defiler .rail{
  position:relative;display:block;flex:none;
  width:1px;height:38px;background:var(--trait);overflow:hidden;
}
.defiler .rail b{
  position:absolute;left:0;top:0;width:1px;height:14px;
  background:var(--rose);
  animation:descend 2.2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes descend{
  0%{transform:translateY(-14px)}
  60%,100%{transform:translateY(38px)}
}

.bouton{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:-.05em;
  text-decoration:none;padding:15px 24px;border-radius:3px;
  transition:background .2s,color .2s,border-color .2s;
}
.bouton.compact{padding:9px 16px;font-size:12px}
.bouton .ico{width:15px;height:15px;transition:transform .25s cubic-bezier(.2,0,.2,1)}
.bouton:hover .ico{transform:translate(3px,-3px)}
.bouton.encre{background:var(--rose);color:var(--fond)}
.bouton.encre:hover{background:var(--encre)}
.bouton.trait{border:1px solid var(--trait-fort);color:var(--encre)}
.bouton.trait:hover{border-color:var(--rose);background:rgba(216,166,216,.12)}

/* --------------------------------------------------- réalisations, champ 04 */
.preuves{display:grid;gap:0;margin-top:8px}
.preuve{
  display:grid;grid-template-columns:1fr auto;gap:14px 30px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--trait);
}
.preuve:first-child{border-top:1px solid var(--trait)}
.preuve .poste{font-weight:700;font-size:clamp(18px,2.2vw,22px);letter-spacing:-.035em;
  font-variation-settings:"wdth" 92;margin:0}
.preuve .poste span{display:block;font-weight:500;font-size:14.5px;color:var(--encre-3);
  letter-spacing:0;font-variation-settings:"wdth" 100;margin-top:3px}
.preuve .quand{font-family:var(--mono);font-size:12px;color:var(--rose);
  letter-spacing:-.06em;white-space:nowrap;text-align:right;margin:0}
.preuve .fait{grid-column:1/-1;color:var(--encre);font-size:17px;max-width:70ch;margin:0}
.preuve .fait b{font-weight:700}
.preuve .fait i{font-style:italic}
@media(max-width:640px){
  .preuve{grid-template-columns:1fr}
  .preuve .quand{text-align:left}
}

/* --------------------------------------------- études de cas, champ 05 */
.demos{margin-top:10px;border-top:1px solid var(--trait-fort)}
.demo{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,24vw,280px);
  gap:clamp(18px,3vw,38px);align-items:center;
  padding:clamp(22px,3.4vw,34px) 0;
  border-bottom:1px solid var(--trait);
  text-decoration:none;position:relative;
  transition:background .3s;
}
/* Le rose signale que la ligne est cliquable, au repos comme au survol. */
.demo:hover,.demo:focus-visible{background:rgba(216,166,216,.085)}
.demo-texte{transition:transform .4s cubic-bezier(.2,0,.2,1)}
.demo:hover .demo-texte,
.demo:focus-visible .demo-texte{transform:translateX(clamp(6px,1.2vw,16px))}
.demo .marque{
  font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:-.05em;color:var(--rose);margin-bottom:10px;
}
.demo .marque i{font-style:normal;color:var(--encre-3)}
.demo h3{margin-bottom:9px;transition:color .25s}
.demo:hover h3{color:var(--rose)}
.demo .resume{color:var(--encre-2);font-size:16px;line-height:1.5;max-width:56ch;margin:0}
.demo .nature{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:-.06em;
  color:var(--encre-3);border:1px solid var(--trait);border-radius:2px;padding:5px 9px;
}
.demo .ouvrir{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.05em;
  color:var(--rose);transition:color .25s;
}
.demo:hover .ouvrir{color:var(--encre)}
.demo .vue{overflow:hidden;border-radius:3px;background:var(--champ);
  outline:1px solid transparent;outline-offset:0;transition:outline-color .3s}
.demo:hover .vue{outline-color:var(--rose)}
.demo .vue img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,0,.2,1)}
.demo:hover .vue img{transform:scale(1.06)}
@media(max-width:760px){
  /* l'image passe APRÈS le texte : c'est le raisonnement qui vend, pas la maquette,
     et l'étiquette « non commandité » doit précéder le visuel */
  .demo{grid-template-columns:1fr}
  .demo .vue img{aspect-ratio:16/9}
}

/* ------------------------------------------------- livrables, champ 06 */
/* Volontairement une liste tabulée, pas une grille de cartes. */
.livrables{border-top:1px solid var(--trait);margin-top:8px}
.livrable{
  display:grid;grid-template-columns:26px minmax(0,240px) 1fr;
  gap:14px clamp(16px,2.6vw,32px);align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--trait);
}
.livrable .ico{width:18px;height:18px;color:var(--rose);align-self:center}
.livrable dt{font-weight:700;font-size:17px;letter-spacing:-.03em;
  font-variation-settings:"wdth" 94}
.livrable dd{color:var(--encre-2);font-size:15.5px;line-height:1.5;margin:0}
@media(max-width:700px){
  .livrable{grid-template-columns:26px 1fr}
  .livrable dd{grid-column:2}
}

/* -------------------------------------------------- contraintes, champ 07 */
.contraintes{border-top:1px solid var(--trait);margin-top:8px}
.contrainte{
  display:grid;grid-template-columns:minmax(0,190px) 1fr;
  gap:8px clamp(16px,3vw,36px);
  padding:20px 0;border-bottom:1px solid var(--trait);align-items:baseline;
}
.contrainte dt{
  font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:-.06em;color:var(--rose);
}
.contrainte dd{margin:0;font-size:clamp(17px,2vw,20px);font-weight:700;
  letter-spacing:-.03em;font-variation-settings:"wdth" 94}
.contrainte dd small{display:block;font-weight:400;font-size:15px;color:var(--encre-2);
  letter-spacing:0;font-variation-settings:"wdth" 100;margin-top:4px}
@media(max-width:600px){.contrainte{grid-template-columns:1fr}}

/* ------------------------------------------------------------ questions, 08 */
.questions{border-top:1px solid var(--trait);margin-top:8px}
.questions details{border-bottom:1px solid var(--trait)}
.questions summary{
  list-style:none;cursor:pointer;position:relative;
  padding:22px 40px 22px 0;
  font-weight:700;font-size:clamp(17px,2.1vw,21px);letter-spacing:-.035em;
  font-variation-settings:"wdth" 94;
  transition:color .2s;
}
.questions summary::-webkit-details-marker{display:none}
.questions summary:hover{color:var(--rose)}
.questions summary::after{
  content:"";position:absolute;right:4px;top:50%;margin-top:-7px;
  width:11px;height:11px;
  border-right:1.5px solid var(--rose);border-bottom:1.5px solid var(--rose);
  transform:rotate(45deg);transition:transform .3s cubic-bezier(.2,0,.2,1);
}
.questions details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.questions .reponse{padding:0 0 24px;color:var(--encre-2);font-size:17px;max-width:68ch}
.questions .reponse a{color:var(--rose);text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------- prochaine étape, 09 */
.champ.dernier{border-bottom:0}
.suite{background:var(--prune);border-radius:5px;padding:clamp(30px,5vw,58px);margin-top:10px}
/* le rose ne passe pas le contraste sur l'aplat prune : le libellé s'éclaircit */
.suite .libelle{color:#f4e0ef}
.suite .libelle::after{background:rgba(253,246,250,.3)}
.suite h2{max-width:16ch}
.suite p{color:#f4e0ef;max-width:54ch;font-size:clamp(16px,1.9vw,18.5px)}
.suite .bouton.encre{background:var(--encre);color:var(--prune)}
.suite .bouton.encre:hover{background:var(--rose)}
.suite .bouton.trait{border-color:rgba(253,246,250,.42)}
.suite .bouton.trait:hover{background:rgba(253,246,250,.14);border-color:var(--encre)}

/* -------------------------------------------------------------------- pied */
.pied{
  margin-top:clamp(60px,9vw,110px);
  padding:30px 0 46px;border-top:1px solid var(--trait);
  display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;
  align-items:center;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:-.06em;
  color:var(--encre-3);
}
.pied .marque-pied{display:flex;align-items:center;gap:11px;text-decoration:none}
.pied .marque-pied b{font-family:var(--ui);font-size:16px;font-weight:800;
  letter-spacing:-.04em;color:var(--encre);font-variation-settings:"wdth" 92}
.pied a{color:var(--rose);text-decoration:none}
.pied a:hover{color:var(--encre)}

/* ------------------------------------------------------------- mouvement */
/* Un seul moment écrit : la couverture s'établit. Un filet se trace, puis le
   document arrive. Le reste du site ne rejoue pas cette entrée. */
.etabli{opacity:0;transform:translateY(14px)}
.pret .etabli{
  animation:etablir .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--rang,0) * 90ms);
}
@keyframes etablir{to{opacity:1;transform:none}}

.cartouche::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--rose);transform:scaleX(0);transform-origin:left;
}
.pret .cartouche::after{animation:tracer 1s cubic-bezier(.16,1,.3,1) .15s forwards}
@keyframes tracer{to{transform:scaleX(1)}}

[data-parait]{opacity:0;transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
[data-parait].vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .etabli,[data-parait]{opacity:1!important;transform:none!important;animation:none!important;
    transition:none!important}
  .cartouche::after{transform:scaleX(1);animation:none}
  .cartouche .ouvert i{animation:none}
  /* sans mouvement, le segment se pose au milieu du rail pour rester lisible */
  .defiler .rail b{animation:none;transform:translateY(12px)}
  .demo,.demo-texte,.demo .vue img,.bouton .ico{transition:none}
}

/* ------------------------------------------------------------- responsive */

/* Écrans bas, le cas du portable 1366x768 : mesuré à 805 px de premier écran pour
   700 px de fenêtre, donc ni les actions ni le repère de défilement n'étaient
   visibles. On resserre sur la HAUTEUR, pas sur la largeur, parce que c'est la
   hauteur qui manque. */
@media(min-width:981px) and (max-height:820px){
  .couverture{padding:clamp(40px,5.5vh,64px) 0 clamp(46px,6vh,62px)}
  .couverture h1{font-size:clamp(34px,4.6vw,60px);line-height:1.02}
  .amorce{margin-top:16px;font-size:17px;line-height:1.45}
  .couv-grille{margin-top:14px}
  .pied-couv{margin-top:20px}
  .plaque img{max-height:min(300px,33svh)}
  .plaque figcaption{padding:14px 18px}
  .plaque figcaption b{font-size:20px}
  .plaque figcaption span{margin-top:5px}
  .cartouche{padding-bottom:16px;font-size:11.5px}
}

@media(max-width:980px){
  .couv-grille{grid-template-columns:1fr;gap:36px}
  .plaque{justify-self:start;max-width:380px}
  .couverture{min-height:auto;justify-content:flex-start;
    padding:clamp(84px,11vh,118px) 0 clamp(44px,7vh,72px)}
}
@media(max-width:820px){
  .champ{grid-template-columns:1fr;gap:14px;padding:38px 0}
  .champ > .ref{display:flex;align-items:baseline;gap:10px;padding-top:0}
  .champ > .ref b{display:inline}
}