/* ==========================================================================
   Page d'accueil
   Charge uniquement sur /, apres style.css dont il reprend les tokens.
   Toutes les classes sont prefixees hp- : aucune autre page n'est touchee.
   ========================================================================== */

.hp {
  --hp-pad: clamp(4.5rem, 10vw, 9.5rem);   /* 72px mobile, ~150px desktop */
  --hp-ease: cubic-bezier(.2, .7, .2, 1);
  --hp-line: rgba(22, 20, 26, .12);
}

/* --- Mobilier commun ---------------------------------------------------- */

.hp-sec { padding: var(--hp-pad) 0; }


.hp-h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  font-weight: 500;
  font-variation-settings: "opsz" 11;
  margin: 0 0 1.4rem;
  max-width: 22ch;
}
.hp-intro { color: var(--text-muted); font-size: 1.06rem; line-height: 1.7; max-width: 58ch; margin: 0 0 1.6rem; }
.hp-intro--note { color: var(--text); font-weight: 500; }
.hp-head { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.hp-head .hp-intro:last-child { margin-bottom: 0; }

.hp-kicker {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand);
  margin: 0 0 .5rem;
}

/* Ouverture de section : le titre en grand, et le chapeau qui enchaine
   sur la meme ligne, en petit, comme une attaque d'article de magazine */
.hp-open {
  max-width: 56rem;
  margin: 0 0 clamp(3rem, 5.5vw, 4.75rem);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.hp-open h2 {
  display: inline;
  margin: 0 .35em 0 0;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--text);
}
.hp-open p { display: inline; margin: 0; }
.hp-open--dark { color: rgba(243, 236, 230, .72); }
.hp-open--dark h2 { color: #fff; }
.hp-open--dict .hp-entry-gram { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-right: .5em; }

/* Bouton : aplat d'encre, angles vifs, fleche qui avance au survol */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .7rem 1.6rem;
  line-height: 1.2;
  background: var(--text);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid var(--text);
  border-radius: 999px;
  transition: background-color .25s var(--hp-ease), border-color .25s var(--hp-ease), color .25s var(--hp-ease);
}
.hp-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; text-decoration: none; }
.hp-btn svg { transition: transform .25s var(--hp-ease); }
.hp-btn:hover svg { transform: translateY(3px); }
.hp-btn--line { background: transparent; color: var(--text); border-color: var(--text); }
.hp-btn--line:hover { background: var(--text); border-color: var(--text); }

.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

/* Image dans un cadre fixe, zoom lent au survol du lien parent */
.hp img { transition: transform .6s var(--hp-ease), filter .4s var(--hp-ease); }

/* --- 00 Hero ------------------------------------------------------------ */

.hp-hero { background: var(--sable); display: flex; flex-direction: column; padding: 0; }
.hp-hero-text { padding: 3.25rem 1.25rem 2.5rem; }
.hp-hero-title {
  font-size: clamp(2.3rem, 8.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  font-weight: 500;
  font-variation-settings: "opsz" 11;
  margin: 0 0 1.6rem;
  max-width: 17ch;
  text-wrap: balance;
}
.hp-hero-lede {
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  line-height: 1.65;
  color: #4a4450;
  max-width: 34rem;
  margin: 0 0 2.2rem;
}
.hp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: 2.75rem; }

.hp-hero-team {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.45;
  max-width: 34rem;
}
.hp-hero-team:hover { text-decoration: none; color: var(--text); }
.hp-hero-team strong { color: var(--text); font-weight: 600; }
.hp-faces { display: flex; flex: none; }
.hp-faces img {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--sable);
  margin-left: -10px;
  filter: grayscale(.25);
}
.hp-faces img:first-child { margin-left: 0; }
.hp-hero-team:hover .hp-faces img { filter: none; }

.hp-hero-media { position: relative; }
.hp-hero-media > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 42% 40%;
}

/* Etiquette posee sur la photo : la reponse avant meme de scroller */
.hp-hero-pick {
  position: relative;
  display: block;
  margin: -2.5rem 1.25rem 0;
  padding: 1.25rem 1.4rem 1.2rem;
  background: var(--bg);
  border: 1px solid var(--hp-line);
  border-top: 2px solid var(--brand);
  color: var(--text);
}
.hp-hero-pick:hover { text-decoration: none; }
.hp-hero-pick-k { display: block; font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--brand); margin-bottom: .55rem; }
.hp-hero-pick-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hp-hero-pick-name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.hp-hero-pick-note { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.hp-hero-pick-note small { font-size: .55em; color: var(--text-muted); font-weight: 500; }
.hp-hero-pick-why { display: block; color: var(--text-muted); font-size: .92rem; line-height: 1.5; margin: .35rem 0 .8rem; }
.hp-hero-pick-go { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; }
.hp-hero-pick-go svg { transition: transform .25s var(--hp-ease); }
.hp-hero-pick:hover .hp-hero-pick-go { color: var(--brand); }
.hp-hero-pick:hover .hp-hero-pick-go svg { transform: translateX(4px); }

/* --- 01 Classement ------------------------------------------------------ */

.hp-rank { background: var(--bg); }

/* Capture d'interface encadree comme une fenetre, sans ombre */
.hp-shot {
  display: block;
  border: 1px solid var(--border-strong);
  background: var(--bg-pure);
  overflow: hidden;
}
.hp-shot:hover { text-decoration: none; }
.hp-shot-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.hp-shot img { width: 100%; aspect-ratio: 2000 / 945; object-fit: cover; object-position: top center; }
a:hover > .hp-shot img, .hp-shot:hover img,
.hp-top1:hover .hp-shot img, .hp-top2:hover .hp-shot img { transform: scale(1.025); }

.hp-rankno {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 8rem);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--brand);
  margin: 0 0 1.25rem;
  font-variation-settings: "opsz" 11;
}
.hp-rankno--s { font-size: 3rem; color: var(--border-strong); margin: 0; line-height: .9; }

.hp-score { display: flex; align-items: baseline; gap: .15rem; margin: 0 0 1.2rem; font-family: var(--font-display); }
.hp-score-n { font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.hp-score-d { font-size: 1.05rem; color: var(--text-muted); }
.hp-score--s { margin: 0; }
.hp-score--s .hp-score-n { font-size: 2rem; }

.hp-top1 { display: grid; gap: 2rem; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--border); }
.hp-top1-name { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; margin: 0 0 .9rem; }
.hp-top1-name a, .hp-top2-name a, .hp-row-name { color: var(--text); transition: color .25s var(--hp-ease); }
.hp-top1-name a:hover, .hp-top2-name a:hover, .hp-row-name:hover { color: var(--brand); text-decoration: none; }
.hp-top1-why { font-size: 1.08rem; line-height: 1.7; color: #3d3842; max-width: 52ch; margin: 0 0 1.6rem; }


.hp-top23 { display: grid; gap: 3.5rem; padding: clamp(3rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--border); }
.hp-top2 .hp-shot { margin-bottom: 1.6rem; }
.hp-top2-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.hp-top2-head .hp-kicker { margin-bottom: .3rem; }
.hp-top2-name { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.hp-top2-why { color: #3d3842; line-height: 1.7; margin: 0 0 1rem; }
.hp-access--plain { border-top: 0 !important; padding-top: 0 !important; margin-bottom: 2rem !important; }
.hp-access { font-size: .85rem; color: var(--text-muted); margin: 0 0 1.5rem; padding-top: .9rem; border-top: 1px solid var(--border); }

/* Suite du classement : vignettes libres, pas de grille de tableau */
.hp-rest { padding-top: clamp(3rem, 6vw, 5rem); }
.hp-rest-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; margin: 0 0 2rem; }
.hp-rest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.hp-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  grid-template-areas:
    "img main"
    "img note"
    "img go";
  align-content: start;
  gap: .25rem 1.1rem;
}
.hp-row-n { display: none; }
.hp-row-img { grid-area: img; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid var(--border); }
.hp-row-main { grid-area: main; display: flex; flex-direction: column; }
.hp-row-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.hp-row-tag { font-size: .88rem; color: var(--text-muted); line-height: 1.45; margin-top: .25rem; }
.hp-row-acc { display: none; }
.hp-row-note { grid-area: note; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; white-space: nowrap; margin-top: .35rem; }
.hp-row-note small { font-size: .6em; color: var(--text-muted); font-weight: 500; }
.hp-row-go { grid-area: go; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.hp-row:hover .hp-row-img { transform: scale(1.03); }
.hp-rest-foot { margin: 2.5rem 0 0; }

/* --- 02 Situations : bande sombre -------------------------------------- */

.hp-needs { background: var(--prune); color: #f3ece6; }
.hp-needs .hp-h2 { color: #fff; }
.hp-needs .hp-intro { color: rgba(243, 236, 230, .75); }

.hp-mosaic { display: grid; gap: 1rem; }
.hp-tile {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 22rem;
  color: #fff;
  isolation: isolate;
}
.hp-tile:hover { text-decoration: none; }
.hp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85); }
.hp-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(42, 27, 35, 0) 30%, rgba(42, 27, 35, .55) 60%, rgba(42, 27, 35, .92) 100%);
  transition: opacity .4s var(--hp-ease);
}
.hp-tile:hover img { transform: scale(1.04); filter: saturate(1); }
.hp-tile-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem; display: block; }
.hp-tile-k { display: block; font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .78); margin-bottom: .6rem; }
.hp-tile-q {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: .6rem;
  max-width: 18ch;
}
.hp-tile-a {
  display: block;
  font-size: .94rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  max-width: 38ch;
  padding-right: 2.5rem;
  position: relative;
}
.hp-tile-a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .25rem;
  width: 1.6rem;
  height: 1px;
  background: #fff;
  transition: width .3s var(--hp-ease);
}
.hp-tile:hover .hp-tile-a::after { width: 2.2rem; }

/* --- 03 Methode --------------------------------------------------------- */

.hp-method { background: var(--bg-pure); }
.hp-method-top { display: grid; gap: 3rem; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.hp-method-top .hp-head { margin-bottom: 0; }
.hp-method-top .hp-intro--note { padding-left: 1rem; border-left: 2px solid var(--brand); }

.hp-grid { margin: 0; padding: 2.25rem; background: var(--bg); }
.hp-grid-cap { font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); margin-bottom: 1.6rem; }
.hp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.hp-bars li { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: baseline; }
.hp-bar-l { font-size: .95rem; font-weight: 500; }
.hp-bar-v { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.hp-bar { grid-column: 1 / -1; height: 6px; background: var(--bg-alt); position: relative; overflow: hidden; }
.hp-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: var(--text);
  transform-origin: left;
  transition: transform 1s var(--hp-ease) .15s;
}
.hp-bars li:first-child .hp-bar::before { background: var(--brand); }
.reveal-on .hp-grid:not(.is-in) .hp-bar::before { transform: scaleX(0); }

.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.hp-steps li { position: relative; padding: 0 0 2rem 3.25rem; }
.hp-steps li::before { content: ""; position: absolute; left: .95rem; top: 2.2rem; bottom: 0; width: 1px; background: var(--border-strong); }
.hp-steps li:last-child::before { display: none; }
.hp-step-n {
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--bg-pure);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
}
.hp-steps li:nth-child(3) .hp-step-n { background: var(--brand); border-color: var(--brand); color: #fff; }
.hp-steps h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; margin: .15rem 0 .45rem; }
.hp-steps p { font-size: .93rem; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* --- 04 Guides : mise en page magazine --------------------------------- */

.hp-guides { background: var(--sable); }
.hp-guides .hp-h2 { max-width: 24ch; }
.hp-mag { display: grid; gap: 3rem; }
.hp-mag-lead { display: block; color: var(--text); }
.hp-mag-lead:hover { text-decoration: none; }
.hp-mag-img { display: block; overflow: hidden; margin-bottom: 1.6rem; }
.hp-mag-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hp-mag-lead:hover .hp-mag-img img { transform: scale(1.03); }
.hp-mag-title { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; margin-bottom: .9rem; transition: color .25s var(--hp-ease); }
.hp-mag-lead:hover .hp-mag-title { color: var(--brand); }
.hp-mag-sum { display: block; color: #4a4450; line-height: 1.7; max-width: 52ch; margin-bottom: 1.3rem; }

.hp-mag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hp-mag-list a { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 1.1rem; padding: .9rem 0; color: var(--text); }
.hp-mag-list a:hover { text-decoration: none; }
.hp-mag-thumb { display: block; overflow: hidden; }
.hp-mag-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hp-mag-list a:hover .hp-mag-thumb img { transform: scale(1.06); }
.hp-mag-t { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin-bottom: .35rem; transition: color .25s var(--hp-ease); }
.hp-mag-list a:hover .hp-mag-t { color: var(--brand); }
.hp-mag-s { display: block; font-size: .9rem; line-height: 1.5; color: var(--text-muted); }

/* --- 05 Lexique : une page de dictionnaire --------------------------- */

.hp-lex { background: var(--bg); }
.hp-entry-gram { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--brand); white-space: nowrap; }
.hp-dict { list-style: none; margin: 0; padding: 0; }
.hp-dict li { break-inside: avoid; margin: 0 0 1.7rem; }
.hp-dict a { display: block; color: var(--text-muted); font-size: 1rem; line-height: 1.6; }
.hp-dict a:hover { text-decoration: none; }
.hp-dict dfn {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  transition: color .25s var(--hp-ease);
}
.hp-dict .hp-entry-gram { font-size: 1.05rem; margin-left: .15rem; }
.hp-entry-ety { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--text-muted); }
.hp-entry-ety i { font-style: normal; }
.hp-entry-def { color: #3d3842; }
.hp-dict a:hover dfn { color: var(--brand); }
.hp-dict a:hover .hp-entry-def { color: var(--text); }
.hp-lex-foot { margin: 1.5rem 0 0; }

/* --- 06 Redaction ----------------------------------------------------- */

.hp-team { background: var(--bg-alt); }
.hp-team-grid { display: grid; gap: 3rem; }
.hp-team .hp-head { margin-bottom: 0; }
.hp-quote {
  margin: 0 0 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 16ch;
  font-variation-settings: "opsz" 11;
}
.hp-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
.hp-people a { display: block; color: var(--text); }
.hp-people a:hover { text-decoration: none; }
.hp-people-img { display: block; overflow: hidden; margin-bottom: .9rem; background: var(--border); }
.hp-people-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.02); }
.hp-people a:hover .hp-people-img img { filter: grayscale(0); transform: scale(1.03); }
.hp-people-name { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; transition: color .25s var(--hp-ease); }
.hp-people a:hover .hp-people-name { color: var(--brand); }
.hp-people-role { display: block; font-size: .85rem; color: var(--text-muted); line-height: 1.45; margin-top: .2rem; }

/* --- 07 FAQ ----------------------------------------------------------- */

.hp-faq { background: var(--bg); border-top: 1px solid var(--border); }
.hp-faq-grid { display: grid; gap: 2.5rem; }
.hp-faq .hp-head { margin-bottom: 0; }
.hp-faq .hp-intro a { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--border-strong); word-break: break-word; }
.hp-faq .hp-intro a:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }
.hp-qa { }
.hp-qa details { border-bottom: 1px solid var(--border); }
.hp-qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  transition: color .25s var(--hp-ease);
}
.hp-qa summary::-webkit-details-marker { display: none; }
.hp-qa summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: .4rem;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .3s var(--hp-ease);
}
.hp-qa details[open] summary::after { transform: rotate(45deg); }
.hp-qa summary:hover { color: var(--brand); }
.hp-qa details p { color: #3d3842; line-height: 1.75; margin: -.25rem 0 1.6rem; max-width: 62ch; }
.hp-qa details p a { color: var(--brand); border-bottom: 1px solid currentColor; }
.hp-qa details p a:hover { text-decoration: none; }

/* --- Apparition au scroll : contenu visible sans JS, anime seulement si le
   script a pose .reveal-on sur <html> ------------------------------------ */

.reveal-on [data-reveal] { transition: opacity .7s var(--hp-ease), transform .7s var(--hp-ease); }
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px); }

@media (prefers-reduced-motion: reduce) {
  .hp *, .hp *::before, .hp *::after { transition: none !important; }
}

/* ======================================================================
   Tablette
   ====================================================================== */

@media (min-width: 640px) {

  .hp-mosaic { grid-template-columns: 1fr 1fr; }
  .hp-tile--big { grid-column: 1 / -1; min-height: 26rem; }


  .hp-people { grid-template-columns: repeat(3, 1fr); }
  .hp-rest-list { grid-template-columns: 1fr 1fr; column-gap: 2rem; }

  .hp-steps { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .hp-steps li::before { display: none; }

  .hp-hero-pick { position: absolute; left: 2rem; bottom: 2rem; margin: 0; width: min(22rem, calc(100% - 4rem)); }
  .hp-hero-media > img { aspect-ratio: 16 / 10; }
}

/* ======================================================================
   Desktop
   ====================================================================== */

@media (min-width: 960px) {

  /* Hero : texte calé sur la grille du site, photo jusqu'au bord droit */
  .hp-hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); min-height: calc(100svh - 4.5rem); }
  .hp-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem clamp(2.5rem, 5vw, 5.5rem) 3.5rem max(1.25rem, calc((100vw - var(--container)) / 2 + 1.25rem));
  }
  .hp-hero-media { min-height: 36rem; }
  .hp-hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 40% center; }
  .hp-hero-pick { left: auto; right: max(1.25rem, calc((100vw - var(--container)) / 2 + 1.25rem)); bottom: 3rem; }

  /* Classement : vedette en deux colonnes inegales */
  .hp-top1 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 4.5rem; align-items: start; }
  .hp-top1 .hp-pick-head { grid-column: 1 / -1; }
  .hp-top1-body { padding-top: .5rem; }
  .hp-top1 .hp-shot img { aspect-ratio: 4 / 3; object-position: 50% 0; }
  .hp-top23 { grid-template-columns: 1fr 1fr; gap: 0; }
  .hp-top23 > :first-child { padding-right: 3.5rem; }
  .hp-top23 > :last-child { padding-left: 3.5rem; border-left: 1px solid var(--border); }

  .hp-rest-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.25rem 1.75rem; }
  .hp-row { grid-template-columns: 1fr; grid-template-areas: "img" "main" "note" "go"; gap: .3rem; }
  .hp-row-img { aspect-ratio: 16 / 11; margin-bottom: .9rem; }
  .hp-row-name { font-size: 1.3rem; }

  /* Situations : une grande a gauche, deux empilees a droite */
  .hp-mosaic { grid-template-columns: 7fr 5fr; grid-template-rows: 1fr 1fr; gap: 1.25rem; min-height: 40rem; }
  .hp-tile--big { grid-column: 1; grid-row: 1 / 3; min-height: 0; }
  .hp-tile { min-height: 0; }
  .hp-tile--big .hp-tile-txt { padding: 2.5rem; }
  .hp-tile--big .hp-tile-q { font-size: clamp(2.2rem, 3.4vw, 3rem); }

  /* Methode : texte a gauche, barres a droite, frise horizontale */
  .hp-method-top { grid-template-columns: 6fr 5fr; gap: 6rem; align-items: end; }
  .hp-steps { grid-template-columns: repeat(6, 1fr); column-gap: 1.75rem; padding-top: 0; }
  .hp-steps li { padding: 3.5rem 0 0; }
  .hp-steps li::before { display: block; left: 2.6rem; right: -1.75rem; top: 1rem; bottom: auto; width: auto; height: 1px; }
  .hp-steps li:last-child::before { display: none; }

  /* Lexique : deux colonnes de dictionnaire */
  .hp-dict { columns: 2; column-gap: 4.5rem; }

  /* Guides */
  .hp-mag { grid-template-columns: 7fr 5fr; gap: 4.5rem; align-items: start; }
  .hp-mag-list a { grid-template-columns: 9.5rem 1fr; gap: 1.4rem; padding: 1.2rem 0; }


  /* Redaction : citation a gauche, portraits en ligne a droite */
  .hp-team-grid { grid-template-columns: 4fr 8fr; gap: 4.5rem; align-items: end; }
  .hp-people { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
  .hp-people li:nth-child(even) { margin-top: 2.5rem; }

  /* FAQ */
  .hp-faq-grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .hp-faq .hp-head { position: sticky; top: 6.5rem; }
}

@media (min-width: 1280px) {
  .hp-hero-title { font-size: 4rem; }
}

/* ==========================================================================
   Habillage : motifs au trait, grain de papier, photos en collage
   ========================================================================== */

/* --- Motifs : dessins au trait teintes par le CSS (mask), poses en bord de
   section et volontairement coupes par le cadre ------------------------- */

.hp-hero, .hp-sec { position: relative; overflow: hidden; isolation: isolate; }
.hp-hero > :not(.hp-motif), .hp-sec > .container { position: relative; z-index: 1; }

.hp-motif {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: var(--brand);
  opacity: .13;
  -webkit-mask: var(--m) no-repeat center / contain;
          mask: var(--m) no-repeat center / contain;
}
.hp-motif--cafe      { --m: url(/assets/motifs/cafe.svg);      width: 14rem; aspect-ratio: 260 / 210; right: -2.5rem; top: 1.5rem; transform: rotate(8deg); }
.hp-motif--telephone { --m: url(/assets/motifs/telephone.svg); width: 13rem; aspect-ratio: 230 / 250; right: -3rem; top: 2rem; transform: rotate(-10deg); }
.hp-motif--lettre    { --m: url(/assets/motifs/lettre.svg);    width: 14rem; aspect-ratio: 250 / 200; left: -3rem; bottom: 1.5rem; transform: rotate(-12deg); background: #e9a3b8; opacity: .2; }
.hp-motif--loupe     { --m: url(/assets/motifs/loupe.svg);     width: 13rem; aspect-ratio: 1; right: -2.5rem; bottom: -2rem; transform: rotate(6deg); }
.hp-motif--avion     { --m: url(/assets/motifs/avion.svg);     width: 15rem; aspect-ratio: 260 / 200; right: -2rem; top: 2rem; transform: rotate(-6deg); opacity: .16; }
.hp-motif--livre     { --m: url(/assets/motifs/livre.svg);     width: 15rem; aspect-ratio: 260 / 190; right: -3.5rem; top: 3rem; transform: rotate(9deg); }
.hp-motif--plume     { --m: url(/assets/motifs/plume.svg);     width: 12rem; aspect-ratio: 1; left: -3rem; bottom: -1.5rem; transform: rotate(-14deg); }
.hp-motif--bulles    { --m: url(/assets/motifs/bulles.svg);    width: 13rem; aspect-ratio: 240 / 200; right: -2.5rem; bottom: 2rem; transform: rotate(-8deg); }

/* Mobile : les motifs descendent dans le blanc de fin de section, plus
   petits, pour ne jamais passer derriere le texte */
@media (max-width: 959px) {
  .hp-motif { width: 8.5rem !important; top: auto !important; bottom: -1.75rem !important; opacity: .11; }
  .hp-motif--cafe { display: none; }
  .hp-motif--telephone, .hp-motif--loupe, .hp-motif--livre, .hp-motif--bulles { right: -1.5rem !important; left: auto !important; }
  .hp-motif--lettre, .hp-motif--avion, .hp-motif--plume { left: -1.5rem !important; right: auto !important; }
}

/* --- Grain de papier sur les fonds colores ----------------------------- */

.hp-hero::after, .hp-needs::after, .hp-guides::after, .hp-team::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  opacity: .09;
  mix-blend-mode: multiply;
}
.hp-needs::after { mix-blend-mode: screen; opacity: .06; filter: invert(1); }

/* --- Photos en collage : aplat decale, arches, pastilles ----------------- */

.hp-top1 .hp-shot { box-shadow: -1.1rem 1.1rem 0 var(--brand-soft); }
.hp-mag-img { box-shadow: 1.1rem 1.1rem 0 #e3cdc2; }
.hp-people-img { border-radius: 999px 999px 0 0; }
.hp-tile--big { border-radius: 14rem 14rem 0 0; }

@media (min-width: 960px) {
  .hp-motif--cafe      { width: 16rem; right: auto; left: max(-3rem, calc((100vw - var(--container)) / 2 - 8rem)); top: auto; bottom: -2.5rem; transform: rotate(-9deg); }
  .hp-motif--telephone { width: 17rem; right: max(1rem, calc((100vw - var(--container)) / 2 - 4rem)); top: 4rem; }
  .hp-motif--lettre    { width: 19rem; left: -2rem; bottom: 2.5rem; }
  .hp-motif--loupe     { width: 18rem; right: 2rem; bottom: -3rem; }
  .hp-motif--avion     { width: 20rem; right: max(1rem, calc((100vw - var(--container)) / 2 - 2rem)); top: 4.5rem; }
  .hp-motif--livre     { width: 19rem; right: max(0rem, calc((100vw - var(--container)) / 2 - 5rem)); top: 3.5rem; }
  .hp-motif--plume     { width: 15rem; left: max(-5rem, calc((100vw - var(--container)) / 2 - 13rem)); bottom: -3.5rem; }
  .hp-motif--bulles    { width: 16rem; right: max(-3rem, calc((100vw - var(--container)) / 2 - 11rem)); bottom: -2.5rem; }
  .hp-tile--big { border-radius: 22rem 22rem 0 0; }
  .hp-top1 .hp-shot { box-shadow: -1.6rem 1.6rem 0 var(--brand-soft); }
  .hp-mag-img { box-shadow: 1.6rem 1.6rem 0 #e3cdc2; }
}


/* ==========================================================================
   Texte justifie, avec cesure francaise : seulement sur les paragraphes
   longs, jamais sur les titres ni les legendes courtes
   ========================================================================== */

@media (min-width: 600px) {
  .hp-hero-lede, .hp-top1-why, .hp-top2-why, .hp-intro, .hp-mag-sum, .hp-dict a, .hp-qa details p {
    text-align: justify;
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}

/* ==========================================================================
   Corrections mobile
   ========================================================================== */

@media (max-width: 959px) {
  /* Le bloc n°1 deborde sous le hero au lieu de s'aligner sur son bord */
  .hp-hero { overflow: visible; z-index: 2; }
  .hp-hero-pick { z-index: 2; margin-bottom: -3rem; }
  .hp-rank { padding-top: calc(var(--hp-pad) + 2rem); }

  /* Le chapeau passe sous le titre */
  .hp-open h2 { display: block; margin: 0 0 1rem; }
  .hp-open p { display: block; }
  .hp-open--dict h2 { display: inline; }
  .hp-open--dict .hp-entry-gram { display: inline-block; margin: 0 0 1rem .4em; }

  /* Lexique : cinq mots, sans etymologie, le reste sur la page lexique */
  .hp-dict li:nth-child(n+6) { display: none; }
  .hp-entry-ety { display: none; }
  .hp-dict li { margin-bottom: 1.3rem; }
}


/* ==========================================================================
   Podium : le nom et la note d'abord, la capture ensuite
   ========================================================================== */

.hp-pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hp-pick-head .hp-top1-name, .hp-pick-head .hp-score { margin: 0; }
.hp-top1 > .hp-shot { margin-bottom: .5rem; }
.hp-top2-head .hp-rankno--s { align-self: baseline; }
.hp-top2 .hp-kicker { margin-bottom: .6rem; }