/* Persona Frame, feuille de style commune */

:root{
  --noir:#000;
  --blanc:#fff;
  --gris:#111;
  --gris-texte:#575757;
  --gris-clair:#B4B4B4;
  --filet:rgba(0,0,0,.16);
  --filet-clair:rgba(255,255,255,.22);
  --grotesque:"Helvetica Neue",Helvetica,"Inter Tight",Arial,sans-serif;
  --didone:"Bodoni Moda",Didot,"Times New Roman",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--blanc);
  color:var(--noir);
  font-family:var(--grotesque);
  font-size:16px;
  line-height:1.42;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.2vw,40px)}

/* ---------- petites capitales, registre credit magazine ---------- */
.credit,.meta,.etiq{
  font-family:var(--grotesque);
  font-weight:700;
  font-size:clamp(9.5px,.78vw,11px);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.5;
}
.gris{color:var(--gris-texte)}

/* ---------- tete ---------- */
.tete{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:clamp(16px,2vw,26px) 0 clamp(20px,2.6vw,34px);
}
.logotype{
  display:inline-block;
  font-family:var(--grotesque);
  font-weight:700;
  font-size:clamp(19px,2vw,27px);
  letter-spacing:-.035em;
  line-height:1;
  text-decoration:none;
  background:var(--noir);
  color:var(--blanc);
  padding:.26em .3em .22em;
  transition:opacity .25s ease;
}
a.logotype:hover{opacity:.7}
.tete .meta{max-width:28ch;text-align:right}

/* ---------- type geante, cassure des mots ---------- */
.geant{
  font-family:var(--grotesque);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(40px,11.4vw,178px);
  line-height:.88;
  letter-spacing:-.048em;
  text-align:justify;
  word-break:break-all;
  hyphens:none;
  text-indent:0;
}
.geant.moyen{font-size:clamp(32px,7.4vw,116px);line-height:.86}
/* titre monumental, pas de coupe de mot */
.geant.solo{
  font-size:clamp(56px,20.5vw,286px);
  line-height:.8;
  letter-spacing:-.055em;
  text-align:left;
  word-break:normal;
  overflow-wrap:normal;
}

.hero{padding-bottom:clamp(14px,2vw,24px)}
.hero .credit{
  margin-top:clamp(16px,2vw,26px);
  padding-top:10px;
  border-top:1.5px solid var(--noir);
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
}

/* ---------- fiche, libelles courts ---------- */
.fiche{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:clamp(16px,2vw,26px);
  padding:clamp(20px,2.6vw,32px) 0 clamp(26px,3.4vw,44px);
}
.fiche div b{
  display:block;
  font-weight:700;
  font-size:clamp(9.5px,.78vw,11px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gris-clair);
  margin-bottom:5px;
}
.fiche div span{
  display:block;
  font-weight:500;
  font-size:clamp(13px,1.05vw,15px);
  letter-spacing:-.012em;
  line-height:1.3;
}

/* ---------- these ---------- */
.these{padding:clamp(26px,3.4vw,46px) 0 clamp(30px,4vw,54px)}
.these p{
  max-width:34ch;
  font-weight:500;
  font-size:clamp(20px,2.5vw,34px);
  line-height:1.16;
  letter-spacing:-.032em;
}
.these p em{font-style:normal;color:var(--gris-texte)}

/* ---------- plaque, lumiere sur noir ----------
   --e est l'avancement de l'eclipse : 0 = occultee, 1 = totalite.
   Declare comme un nombre pour que le navigateur sache l'interpoler. */
@property --e{
  syntax:"<number>";
  inherits:true;
  initial-value:1;
}
.plaque{
  --e:1;
  position:relative;
  aspect-ratio:16/6.6;
  min-height:210px;
  background:#040404;
  overflow:hidden;
  isolation:isolate;
}

/* le scroll pilote l'eclipse, en CSS pur, hors du fil principal.
   cover 0% a 100% : de l'entree de la plaque dans l'ecran a sa sortie,
   donc la totalite tombe quand elle est centree.
   Navigateur sans animation-timeline : la plaque reste a la totalite, comme avant. */
@supports (animation-timeline:view()){
  /* L'eclipse respire, elle ne s'allume pas. Le plancher a .5 et le plateau au centre
     evitent le defaut de la premiere version : a l'arrivee sur la page, --e valait .03
     et la plaque n'etait qu'un rectangle noir vide. Elle doit toujours se lire. */
  /* La montee doit etre rapide, sinon elle ne se percoit pas : la plaque met
     environ 1200 px de defilement a traverser l'ecran, un fondu etale sur 44 %
     de cette course passe inapercu. A 22 % l'ouverture tient dans un seul geste
     de trackpad, et le plateau central laisse la totalite s'installer. */
  @keyframes eclipse{
    0%{--e:.38}
    22%{--e:1}
    78%{--e:1}
    100%{--e:.5}
  }
  .plaque{
    animation:eclipse linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
}

.plaque .astre{
  position:absolute;left:47%;top:50%;
  width:min(46vw,440px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(calc(.955 + .045 * var(--e)));
  border-radius:50%;
  background:radial-gradient(circle,
    #000 0 61%,
    rgba(255,255,255,calc(.12 + .80 * var(--e))) 62.4% calc(62.9% + 1.5% * var(--e)),
    rgba(255,255,255,calc(.02 + .18 * var(--e))) 69%,
    rgba(255,255,255,calc(.005 + .045 * var(--e))) 81%,
    transparent 100%);
  box-shadow:0 0 calc(46px + 92px * var(--e)) calc(8px + 40px * var(--e))
             rgba(255,255,255,calc(.006 + .069 * var(--e)));
}
.plaque .fibres{
  position:absolute;left:47%;top:50%;
  width:min(56vw,536px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.55) 0 .3deg,
    transparent .3deg 1.15deg);
  -webkit-mask:radial-gradient(circle,transparent 0 50%,#000 53% 63%,transparent 74%);
  mask:radial-gradient(circle,transparent 0 50%,#000 53% 63%,transparent 74%);
  filter:blur(1.1px);
  opacity:calc(.05 + .63 * var(--e));
  animation:tourne 120s linear infinite;
}
@keyframes tourne{to{transform:translate(-50%,-50%) rotate(360deg)}}
.plaque .grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  opacity:calc(.09 + .11 * var(--e));
  mix-blend-mode:overlay;
  pointer-events:none;
}
.plaque .legende{
  position:absolute;
  left:clamp(16px,2.4vw,40px);
  bottom:clamp(14px,1.8vw,24px);
  color:var(--blanc);
  z-index:2;
}
.plaque .legende span{color:rgba(255,255,255,.5)}

/* ---------- le nom, jeu de cadre ---------- */
.nom{
  padding:clamp(30px,4vw,58px) 0 clamp(26px,3.4vw,48px);
  border-top:1.5px solid var(--noir);
  margin-top:clamp(30px,4vw,56px);
}
.nom-grille{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.6vw,40px);
}

/* ---------- vitrine, plaque photographique ---------- */
.vitrine{
  margin-top:clamp(26px,3.4vw,48px);
  max-width:min(100%,720px);
}
.vitrine img{width:100%;display:block}
.vitrine figcaption{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  font-weight:700;
  font-size:clamp(9.5px,.78vw,11px);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.vitrine figcaption span{color:var(--gris-clair)}
.moitie{display:flex;flex-direction:column}
.moitie .etiq{color:var(--gris-clair);margin-bottom:clamp(12px,1.8vw,20px)}
.moitie h2{
  font-family:var(--grotesque);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(38px,6.6vw,98px);
  line-height:.82;
  letter-spacing:-.052em;
  margin-bottom:clamp(18px,2.4vw,30px);
}
.moitie h2 .boite{
  display:inline-block;
  background:var(--noir);
  color:var(--blanc);
  padding:.06em .12em .04em;
  margin-left:-.06em;
}
.moitie p{
  max-width:38ch;
  font-size:clamp(14px,1.15vw,16.5px);
  line-height:1.46;
  letter-spacing:-.008em;
  color:var(--gris-texte);
}

/* ---------- produits, jeu de cadre ---------- */
.produits{padding:clamp(34px,4.4vw,64px) 0 clamp(20px,3vw,40px)}
.produits > .wrap > .etiq{
  padding-bottom:10px;
  border-bottom:1.5px solid var(--noir);
  margin-bottom:clamp(20px,2.6vw,34px);
}
.cadres{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2vw,28px);
}
.cadre{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(20px,2.4vw,32px);
  border:1.5px solid var(--noir);
  text-decoration:none;
  color:inherit;
  background:var(--blanc);
  transition:background .3s ease,color .3s ease;
}
.cadre .num{
  font-weight:700;
  font-size:clamp(9.5px,.78vw,11px);
  letter-spacing:.1em;
}
.cadre h3{
  font-family:var(--grotesque);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(30px,4.2vw,62px);
  line-height:.86;
  letter-spacing:-.05em;
  margin:clamp(14px,1.8vw,22px) 0 clamp(10px,1.4vw,16px);
}
.cadre .accroche{
  font-weight:500;
  font-size:clamp(14.5px,1.25vw,18px);
  line-height:1.24;
  letter-spacing:-.022em;
  margin-bottom:clamp(12px,1.6vw,18px);
  max-width:32ch;
}
.cadre .corps{
  font-size:clamp(13.5px,1.05vw,15px);
  line-height:1.48;
  color:var(--gris-texte);
  flex:1;
  max-width:46ch;
  transition:color .3s ease;
}
.cadre .aller{
  margin-top:clamp(20px,2.4vw,30px);
  font-weight:700;
  font-size:clamp(9.5px,.78vw,11px);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.cadre:hover{background:var(--noir);color:var(--blanc)}
.cadre:hover .corps{color:var(--gris-clair)}

/* ---------- planche images ---------- */
.planche{padding:clamp(6px,1vw,14px) 0 clamp(26px,3.4vw,44px)}
.paire{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,22px);
}
.vue img{
  width:100%;
  filter:grayscale(1) contrast(1.22) brightness(1.05);
  border:1.5px solid var(--noir);
}
.vue figcaption{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  font-weight:700;
  font-size:clamp(9.5px,.78vw,11px);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.vue figcaption span{color:var(--gris-clair)}

/* ---------- blocs de texte ---------- */
.bloc{
  padding:clamp(22px,3vw,40px) 0;
  border-top:1.5px solid var(--noir);
}
.bloc-grille{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(0,3fr);
  gap:clamp(14px,2.4vw,40px);
  align-items:start;
}
.bloc .etiq{color:var(--gris-clair)}
.bloc p{
  max-width:52ch;
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.42;
  letter-spacing:-.016em;
  color:var(--gris-texte);
}
.bloc p b{color:var(--noir);font-weight:500}

/* ---------- phrase, didone ---------- */
.phrase{
  padding:clamp(40px,5.4vw,86px) 0;
  border-top:1.5px solid var(--noir);
}
.phrase-spread{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.4vw,56px);
  align-items:center;
}
.phrase-spread img{width:100%;display:block}
.phrase p{
  font-family:var(--didone);
  font-style:italic;
  font-weight:400;
  font-size:clamp(26px,3.6vw,54px);
  line-height:1.06;
  letter-spacing:-.022em;
}
.phrase cite{
  display:block;
  margin-top:clamp(18px,2.4vw,30px);
  font-style:normal;
  color:var(--gris-clair);
}

/* ---------- pied ---------- */
.pied{padding:clamp(34px,4.4vw,66px) 0 clamp(20px,2.6vw,30px)}
.pied .etiq{
  padding-bottom:10px;
  border-bottom:1.5px solid var(--noir);
  margin-bottom:clamp(16px,2vw,26px);
}
.pied .avant{
  max-width:36ch;
  font-weight:500;
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.28;
  letter-spacing:-.02em;
  margin-bottom:clamp(16px,2vw,24px);
}
a.mail{
  display:block;
  font-family:var(--grotesque);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(24px,5.6vw,90px);
  line-height:.86;
  letter-spacing:-.05em;
  text-decoration:none;
  word-break:break-all;
  transition:opacity .25s ease;
}
a.mail:hover{opacity:.42}
.pied-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  margin-top:clamp(28px,3.6vw,54px);
  padding-top:10px;
  border-top:1.5px solid var(--noir);
}
.pied-meta span{color:var(--gris-clair)}

.retour{
  display:inline-block;
  font-weight:700;
  font-size:clamp(9.5px,.78vw,11px);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  transition:opacity .25s ease;
}
.retour:hover{opacity:.45}
.pied .retour{margin-top:clamp(20px,2.6vw,32px)}

/* ---------- apparition au scroll ----------
   Rien n'est masque tant que la classe .js n'est pas posee sur <html> par le script
   en tete de page. Sans JavaScript, ou si le script casse, la page s'affiche entiere.
   Une page blanche n'est jamais une option. */
.js .rev{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .78s cubic-bezier(.22,1,.26,1),transform .78s cubic-bezier(.22,1,.26,1);
}
.js .rev.vu{opacity:1;transform:none}
.js .d1{transition-delay:.03s}.js .d2{transition-delay:.1s}
.js .d3{transition-delay:.17s}.js .d4{transition-delay:.24s}

/* les planches photographiques se devoilent par recadrage vertical */
.js .planche-rev{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.045);
  transition:clip-path 1.05s cubic-bezier(.22,1,.26,1),transform 1.35s cubic-bezier(.22,1,.26,1);
}
.js .planche-rev.vu{clip-path:inset(0 0 0 0);transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rev,.js .planche-rev{opacity:1;transform:none;clip-path:none;transition:none}
  .cadre,a.mail,.retour{transition:none}
  .plaque{--e:1;animation:none}
  .plaque .fibres{animation:none}
}

/* ---------- Harold, le regime document ----------
   Une page qui se lit comme une feuille de service. La chasse fixe tient le mobilier
   du document, le nom, les etiquettes, les champs, les credits, les titres de cartes.
   Les paragraphes courants restent en grotesque : cinq lignes de mono se lisent mal.
   Portee au seul <body class="harold">, la home et Reminence ne bougent pas. */
.harold{
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* le logotype de la holding ne change jamais de typo */
.harold .logotype{font-family:var(--grotesque)}

.harold .meta,
.harold .credit,
.harold .etiq,
.harold .fiche div b,
.harold .fiche div span,
.harold .cadre .num,
.harold .cadre h3,
.harold .cadre .accroche,
.harold .vue figcaption,
.harold .phrase p,
.harold a.mail,
.harold .retour,
.harold .pied-meta span{
  font-family:var(--mono);
}

/* le nom n'est plus une affiche, mais il reste l'en-tete : il doit dominer.
   A 62px il se noyait dans la phrase et les titres de cartes, tout se valait. */
.harold .geant.solo{
  font-family:var(--mono);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(38px,9vw,132px);
  line-height:1;
  letter-spacing:.035em;
  text-align:left;
}

.harold .meta,
.harold .credit,
.harold .etiq,
.harold .cadre .num,
.harold .vue figcaption b,
.harold .pied-meta span{
  font-weight:500;
  letter-spacing:.08em;
}

/* les champs prennent la forme d'un formulaire, filets compris */
.harold .fiche{
  border-top:1.5px solid var(--noir);
  gap:0;
  padding-bottom:clamp(20px,2.6vw,34px);
}
.harold .fiche div{
  padding:clamp(11px,1.4vw,16px) 18px clamp(13px,1.7vw,20px) 0;
  border-bottom:1px solid #DEDEDE;
}
/* echelle de graisses, pour que la chasse fixe ne s'aplatisse pas :
   600 pour le nom, 500 pour les etiquettes, 400 pour les valeurs. */
.harold .fiche div b{color:var(--gris-texte);font-weight:500}
.harold .fiche div span{font-weight:400;letter-spacing:.01em}

/* le titre des cartes descend a la taille d'un intitule, pas d'une affiche */
.harold .cadre h3{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(19px,2.2vw,30px);
  line-height:1.06;
  letter-spacing:.02em;
}

/* les images passent au regime photocopie : des references dupliquees et agrafees
   au dossier, pas des illustrations. Les gris s'ecrasent, le trait ressort. */
.harold .vue img{
  filter:grayscale(1) contrast(1.62) brightness(1.14);
}
.harold .vue figcaption{
  margin-top:0;
  padding:7px 9px;
  border:1.5px solid var(--noir);
  border-top:0;
}

/* la phrase de fin : la regle de base est calibree pour le Bodoni italique,
   clamp(26px,3.6vw,54px). En chasse fixe la meme taille de corps occupe bien plus
   de place et pese le double. On la redescend entre les titres de cartes et la prose. */
.harold .phrase p{
  font-style:normal;
  font-weight:500;
  font-size:clamp(16px,1.9vw,27px);
  line-height:1.36;
  letter-spacing:.01em;
  max-width:42ch;
}

/* le credit du bas devient un tampon */
.harold .hero .credit{justify-content:space-between}
.harold .hero .credit .gris{
  border:1.5px solid var(--noir);
  padding:4px 10px;
  color:var(--noir);
  letter-spacing:.14em;
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nom-grille{grid-template-columns:1fr}
  .phrase-spread{grid-template-columns:1fr}
  .bloc-grille{grid-template-columns:1fr;gap:10px}
}
@media (max-width:620px){
  .paire{grid-template-columns:1fr;gap:22px}
  .tete{flex-direction:column;gap:12px}
  .tete .meta{text-align:left}
  .geant{letter-spacing:-.04em}
  .phrase p{max-width:none}
}