/* Page d'accueil de la collection : les logos et les couvertures, rien d'autre. Et la page des mentions légales. */

.accueil-tete { padding-top: 18px; }
.tete-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 52px; }
.tete-logo { display: inline-flex; min-height: 44px; align-items: center; }
.accueil-tete .logo-editeur { height: 34px; }

.accueil-main { display: grid; justify-items: center; padding-top: 28px; padding-bottom: 32px; }
.accueil-titre { margin: 0; }
.logo-collection.grand { height: clamp(78px, 21vw, 128px); color: var(--profond); --logo-reserve: var(--fond); }
.logo-collection.grand .reserve { font-variant-numeric: tabular-nums; }

.couleurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(62%, 260px); margin-top: 22px; }
.couleurs i { display: block; height: 6px; background: var(--c17); transform-origin: 0 50%; }
.couleurs i:nth-child(2) { background: var(--c18); }
.couleurs i:nth-child(3) { background: var(--c19); }
.couleurs i:nth-child(4) { background: var(--c20); }

.couvertures {
  list-style: none; margin: 44px 0 0; padding: 0; width: 100%; max-width: 1180px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px;
}
.couv { display: grid; align-content: start; gap: 14px; }
.couv a { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.couv-image { position: relative; display: block; box-shadow: 6px 6px 0 var(--o); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1); }
.couv-image img { width: 100%; height: auto; aspect-ratio: 840 / 1500; background: var(--o); }
.couv-etat { color: var(--gris); }
.couv.dispo .couv-etat { color: var(--roi); }
.couv.dispo .couv-etat span { display: inline-block; transition: transform .25s; }
.couv.dispo a:hover .couv-image, .couv.dispo a:focus-visible .couv-image { transform: translate(-4px, -4px) rotate(-1deg); box-shadow: 12px 12px 0 var(--o); }
.couv.dispo a:hover .couv-etat span { transform: translateX(5px); }
.couv.dispo a:focus-visible { outline: none; }
.couv.dispo a:focus-visible .couv-image { outline: 3px solid var(--roi); outline-offset: 5px; }
.couv .pastille { position: absolute; top: -14px; right: -14px; --p: 42px; --pastille: var(--roi); box-shadow: 0 0 0 4px var(--fond); }
.couv .pastille::before, .couv .pastille::after { height: 3px; margin-top: -1.5px; }

@media (min-width: 900px) {
  .couvertures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 56px; }
  .couv-image { box-shadow: 8px 8px 0 var(--o); }
  .accueil-main { padding-top: 40px; padding-bottom: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  .anime .accueil-titre { opacity: 0; }
  .anime.pret .accueil-titre { animation: fondu-titre .6s forwards; }
  .anime .couv { opacity: 0; transform: translateY(36px); }
  .anime.pret .couv { animation: monte-couv .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 110ms + 250ms); }
  .anime .couleurs i { transform: scaleX(0); }
  .anime.pret .couleurs i { animation: trace .6s cubic-bezier(.7,0,.2,1) forwards; }
  .anime.pret .couleurs i:nth-child(2) { animation-delay: .1s; }
  .anime.pret .couleurs i:nth-child(3) { animation-delay: .2s; }
  .anime.pret .couleurs i:nth-child(4) { animation-delay: .3s; }
  .pret .couv .pastille { animation: battement 2.4s ease-in-out 1.6s 2; }
}
@keyframes fondu-titre { to { opacity: 1; } }
@keyframes monte-couv { to { opacity: 1; transform: none; } }
@keyframes trace { to { transform: scaleX(1); } }
@keyframes battement { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } }

/* ---- mentions légales ---- */
.page-texte .feuille { max-width: 760px; margin: 24px auto 0; padding: 32px 22px 36px; background: #FFFFFF; box-shadow: 8px 8px 0 var(--filet); }
.page-texte .feuille .titre-section { font-size: clamp(34px, 9vw, 56px); margin: 10px 0 18px; }
.page-texte h2 { margin: 28px 0 6px; font: 600 16px/1.2 var(--f-inter); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.page-texte .feuille p { margin: 0 0 10px; }
.page-texte .feuille .bouton { margin-top: 18px; }
@media (min-width: 720px) { .page-texte .feuille { padding: 48px 56px 52px; } }

/* ================================================================= ACCUEIL : LES COLLECTIONS */
.accueil-une { padding: 40px 0 8px; }
.accueil-une .cadre { display: grid; justify-items: center; gap: 18px; }
.editeur-titre { margin: 0; }
.logo-editeur.grand { height: clamp(64px, 16vw, 104px); color: var(--profond); }
.rubriques { display: grid; gap: 22px; padding-top: 24px; padding-bottom: 32px; }
.rubrique { display: grid; gap: 22px; padding: 26px 0 34px; border-top: 1.5px solid var(--filet); }
.rubrique-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.rubrique-titre { margin: 0; }
.rubrique-titre a { display: inline-flex; min-height: 44px; align-items: center; }
.logo-collection.moyen { height: 52px; color: var(--profond); --logo-reserve: var(--fond); }
.rubrique-titre.texte { font: 800 clamp(30px, 7vw, 44px)/1 var(--f-titre); letter-spacing: -.025em; text-transform: uppercase; color: var(--profond); }
.rubrique-desc { margin: 0; color: var(--encre-2); font-size: 18px; }
.rubrique-lien { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--roi); text-decoration: none; }
.rubrique-lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.rubrique .etat { margin: 0 0 0 auto; padding: 8px 12px; color: var(--gris); box-shadow: inset 0 0 0 1.5px var(--filet); }
.couvertures.petites { margin: 0; max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.couvertures.petites .couv-image { box-shadow: 4px 4px 0 var(--o, #C9DCF5); }
.couvertures.petites .couv-etat { font-size: 10px; letter-spacing: .08em; }
.couvertures.petites .pastille { --p: 30px; top: -10px; right: -10px; }
.couvertures.petites .pastille::before, .couvertures.petites .pastille::after { height: 2.5px; margin-top: -1.25px; }
.fantomes .couv-image { aspect-ratio: 840 / 1500; background: #DCE8F8; box-shadow: none; }
.cartel-fantome { position: absolute; left: 5%; top: 3%; width: 56%; height: 16%; padding: 8% 7%; background: #FFFFFF; display: grid; align-content: start; gap: 9%; }
.cartel-fantome i { display: block; height: 6%; min-height: 3px; background: #DCE8F8; }
.cartel-fantome i:nth-child(1) { width: 40%; }
.cartel-fantome i:nth-child(2) { width: 85%; height: 14%; min-height: 6px; background: #C9DCF5; }
.cartel-fantome i:nth-child(3) { width: 60%; }
@media (min-width: 900px) {
  .rubrique { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 48px; padding: 40px 0 48px; }
  .rubrique-tete { flex-direction: column; align-items: flex-start; }
  .rubrique-lien, .rubrique .etat { margin-left: 0; }
  .couvertures.petites { gap: 22px; }
  .couvertures.petites .couv-etat { font-size: 11px; }
}
@media (max-width: 520px) { .couvertures.petites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } }

/* ================================================================= LA COLLECTION */
.collection-format { margin: 18px 0 0; color: var(--gris); text-align: center; }

/* ================================================================= PRÉSENTATION D'UN DÉPLIANT */
.pres-une { display: grid; gap: 34px; padding-top: 28px; padding-bottom: 20px; }
.pres-couv { width: min(62%, 300px); justify-self: center; }
.pres-couv .couv-image { box-shadow: 10px 10px 0 var(--o); }
.pres-texte { display: grid; gap: 14px; justify-items: start; }
.logo-collection.petit { height: 36px; color: var(--profond); --logo-reserve: var(--fond); }
.pres-collection { display: inline-flex; min-height: 44px; align-items: center; }
.pres-titre { margin: 4px 0 0; color: var(--roi); font: 800 clamp(46px, 13vw, 92px)/.9 var(--f-titre); letter-spacing: -.03em; text-transform: uppercase; }
.pres-titre .sur { display: block; margin-bottom: .45em; font: 500 clamp(13px, 3.4vw, 16px)/1 var(--f-mono); letter-spacing: .1em; color: var(--bleu); }
.pres-dates { margin: 0; color: var(--bleu); font: 800 clamp(30px, 8vw, 50px)/1 var(--f-titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pres-accroche { margin: 8px 0 0; max-width: 34ch; font-size: clamp(19px, 4.6vw, 23px); line-height: 1.45; color: var(--encre); }
.pres-vente { margin: 6px 0 0; }
.pastille-vente { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; background: var(--profond); color: #FFFFFF; }
.pastille-vente::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ciel); }
@media (min-width: 900px) {
  .pres-une { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; gap: 72px; padding-top: 48px; }
  .pres-couv { width: 100%; max-width: 360px; justify-self: end; }
}
.pres-bloc { padding-top: 48px; padding-bottom: 8px; }
.pres-bloc > .intertitre, .pres-format .intertitre { margin-bottom: 18px; }
.atouts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.atout { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 20px; background: #FFFFFF; }
.atout p { margin: 0; color: var(--encre-2); }
.atout b { color: var(--profond); font-weight: 600; }
.atout-chiffre { font: 800 52px/1 var(--f-titre); letter-spacing: -.04em; color: var(--roi); }
.atout-plume { width: 54px; height: 64px; display: block; }
.atout-plume svg { width: 100%; height: 100%; }
.atout-plus { --p: 46px; justify-self: start; }
.atout-plus::before, .atout-plus::after { height: 3px; margin-top: -1.5px; }
.atout .legende { grid-column: 2; margin-top: 6px; }
.legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.legende li { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.legende .picto { width: 17px; height: 17px; }
@media (min-width: 900px) { .atouts { grid-template-columns: 1fr 1fr; gap: 18px; } .atout { padding: 26px; } }
.pres-format { display: grid; gap: 22px; align-items: center; }
.pres-format p { margin: 0; max-width: 40ch; color: var(--encre-2); }
.format-grand { margin: 0 0 10px !important; font: 800 clamp(40px, 10vw, 64px)/1 var(--f-titre); letter-spacing: -.03em; color: var(--profond) !important; }
.accordeon { width: min(100%, 360px); height: auto; }
@media (min-width: 900px) { .pres-format { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .accordeon { justify-self: center; } }
.encart-code { display: grid; gap: 22px; padding: 28px 22px 30px; background: var(--roi); color: #FFFFFF; box-shadow: 10px 10px 0 var(--profond); }
.encart-titre { margin: 0 0 8px; font: 800 clamp(28px, 7vw, 40px)/1.05 var(--f-titre); letter-spacing: -.02em; text-transform: uppercase; }
.encart-code p { margin: 0; color: #DCEBFF; max-width: 46ch; }
.code-form { display: grid; gap: 10px; }
.code-form label { color: #B9D6FF; }
.code-ligne { display: flex; flex-wrap: wrap; gap: 12px; }
.code-ligne input {
  flex: 1 1 200px; min-width: 0; height: 58px; padding: 0 18px; border: 0; border-radius: 0; background: #FFFFFF; color: var(--profond);
  font: 500 20px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; -webkit-appearance: none; appearance: none;
}
.code-ligne input:focus { outline: 3px solid var(--ciel); outline-offset: 2px; }
.code-ligne input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px #F2B79C; }
.code-ligne .bouton { min-height: 58px; flex: 0 0 auto; background: var(--profond); box-shadow: 5px 5px 0 #0B2A4C; }
.code-erreur { margin: 4px 0 0 !important; padding: 10px 14px; background: #FFF2EB; color: #8A2E08 !important; font-weight: 600; }
.code-erreur[hidden] { display: none; }
@media (min-width: 900px) { .encart-code { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 48px; padding: 44px 48px; } }
.presentation main { padding-bottom: 40px; }