/* ==========================================================================
   Erolys — feuille de style de la page d'accueil (refonte sept. 2026)
   À charger APRÈS la feuille du thème. Préfixe : .ero-
   Toutes les valeurs viennent de la maquette Design (canvas « Erolys — refonte homepage »).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --ero-ivoire:        #FBF9F5;  /* fond général                            */
  --ero-papier:        #FFFFFF;  /* cartes, sections claires                */
  --ero-encre:         #14182B;  /* titres, texte principal                 */
  --ero-encre-douce:   #4A5068;  /* texte courant secondaire (7,7:1)        */
  --ero-gris:          #6B7189;  /* libellés                                */
  --ero-gris-clair:    #8A8FA3;  /* mentions légales, méta                  */
  --ero-nuit:          #0E1226;  /* bandeaux et pied de page                */
  --ero-nuit-filet:    #242B47;  /* filets sur fond nuit                    */
  --ero-nuit-texte:    #B9BED0;  /* texte sur fond nuit                     */

  --ero-corail:        #C8452B;  /* fonds de boutons — 4,84:1 sur blanc     */
  --ero-corail-texte:  #B83E28;  /* liens et sur-titres — 5,59:1 sur blanc  */
  --ero-corail-hover:  #8F2F1E;
  --ero-corail-clair:  #FBEDE9;  /* puces, badges, bandeau auteur           */
  --ero-corail-nuit:   #F0907A;  /* accent sur fond nuit                    */

  --ero-vert-fond:     #E9F1EC;
  --ero-vert-texte:    #1F6F4F;
  --ero-violet-fond:   #F0EEF8;
  --ero-violet-texte:  #4A3F87;

  --ero-filet:         #E6E1D8;  /* bordures                                */
  --ero-filet-fin:     #EFEBE3;  /* séparateurs internes                    */
  --ero-filet-fort:    #E0DAD0;  /* bordures de boutons fantômes            */
  --ero-sable:         #F7F4EE;  /* pastilles de spécifications             */
  --ero-piste:         #EDE8DF;  /* piste des anneaux et barres             */

  /* Typographie */
  --ero-titre: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --ero-texte: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* Rayons */
  --ero-r-etiquette: 6px;
  --ero-r-pastille: 9px;
  --ero-r-bouton: 13px;
  --ero-r-carte: 18px;
  --ero-r-carte-lg: 22px;

  /* Rythme */
  --ero-largeur: 1280px;
  --ero-marge: 80px;
  --ero-section: 80px;

  --ero-ombre-carte: 0 18px 40px rgba(20, 24, 43, .07);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.ero-home {
  margin: 0;
  background: var(--ero-ivoire);
  color: var(--ero-encre);
  font-family: var(--ero-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ero-home a { color: var(--ero-corail-texte); text-decoration: none; }
.ero-home a:hover { color: var(--ero-corail-hover); }
.ero-home a:focus-visible,
.ero-home button:focus-visible {
  outline: 2px solid var(--ero-corail);
  outline-offset: 3px;
  border-radius: 4px;
}
.ero-home h1, .ero-home h2, .ero-home h3 {
  font-family: var(--ero-titre);
  letter-spacing: -.025em;
  color: var(--ero-encre);
  margin: 0;
}
.ero-home h1 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; }
.ero-home h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.1;  font-weight: 700; }
.ero-home h3 { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.ero-home p  { margin: 0; }

.ero-wrap {
  max-width: var(--ero-largeur);
  margin-inline: auto;
  padding-inline: var(--ero-marge);
  box-sizing: content-box;
}
.ero-section { padding-block: var(--ero-section); }
.ero-section--papier { background: var(--ero-papier); border-top: 1px solid var(--ero-filet); }
.ero-section--nuit   { background: var(--ero-nuit); color: #fff; }

.ero-surtitre {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ero-corail-texte);
}
.ero-section--nuit .ero-surtitre { color: var(--ero-corail-nuit); }
.ero-chapo { font-size: 17px; line-height: 1.6; color: var(--ero-encre-douce); max-width: 68ch; }

/* --------------------------------------------------------------------------
   3. Boutons et liens
   -------------------------------------------------------------------------- */
.ero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding-inline: 24px;
  border: 0; border-radius: var(--ero-r-bouton);
  font-family: var(--ero-texte); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background-color .15s ease, transform .15s ease;
}
.ero-btn:hover { transform: translateY(-1px); }
.ero-btn--primaire { background: var(--ero-corail); color: #fff; }
.ero-btn--primaire:hover { background: #B03B23; color: #fff; }
.ero-btn--encre { background: var(--ero-encre); color: #fff; }
.ero-btn--encre:hover { background: #22283F; color: #fff; }
.ero-btn--fantome {
  background: transparent; color: var(--ero-encre);
  border: 1.5px solid var(--ero-filet-fort); font-weight: 600;
}
.ero-btn--fantome:hover { background: var(--ero-sable); color: var(--ero-encre); }
.ero-btn--contour { background: transparent; color: var(--ero-encre); border: 1.5px solid var(--ero-encre); }
.ero-section--nuit .ero-btn--contour { color: #fff; border-color: #3A4160; }
.ero-btn--bloc { width: 100%; }

.ero-lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: 15px; font-weight: 600;
}
.ero-lien-fleche svg { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   4. Étiquettes
   -------------------------------------------------------------------------- */
.ero-tag {
  display: inline-flex; align-items: center;
  height: 26px; padding-inline: 10px;
  border-radius: var(--ero-r-etiquette);
  font-size: 12px; font-weight: 700;
  background: var(--ero-sable); color: var(--ero-gris);
}
.ero-tag--reco    { background: var(--ero-vert-fond);   color: var(--ero-vert-texte); }
.ero-tag--corail  { background: var(--ero-corail-clair); color: var(--ero-corail-texte); }
.ero-tag--violet  { background: var(--ero-violet-fond); color: var(--ero-violet-texte); }
.ero-tag--encre   { background: var(--ero-encre); color: #fff; border-radius: 999px; padding-inline: 12px; height: 28px; letter-spacing: .06em; text-transform: uppercase; }

.ero-spec {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding-inline: 13px;
  border-radius: var(--ero-r-pastille);
  background: var(--ero-sable);
  font-size: 13px; color: var(--ero-encre);
}
.ero-spec strong { font-weight: 700; }

.ero-mention { font-size: 12px; color: var(--ero-gris-clair); }

/* --------------------------------------------------------------------------
   5. Pastille de note (anneau)
   Usage : <div class="ero-note" style="--ero-deg:292deg"> … </div>
   Calcul : deg = note / 10 * 360  (8,1 → 292deg ; 7,1 → 256deg)
   -------------------------------------------------------------------------- */
.ero-note {
  --ero-taille: 88px;
  --ero-deg: 0deg;
  width: var(--ero-taille); height: var(--ero-taille);
  border-radius: 999px; flex: none;
  background: conic-gradient(var(--ero-corail) 0deg var(--ero-deg), var(--ero-piste) var(--ero-deg) 360deg);
  display: flex; align-items: center; justify-content: center;
}
.ero-note--lg { --ero-taille: 104px; }
.ero-note__coeur {
  width: calc(var(--ero-taille) - 18px); height: calc(var(--ero-taille) - 18px);
  border-radius: 999px; background: var(--ero-papier);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ero-note__valeur { font-family: var(--ero-titre); font-size: 24px; font-weight: 800; line-height: 1; }
.ero-note--lg .ero-note__valeur { font-size: 29px; }
.ero-note__sur { font-size: 10px; color: var(--ero-gris); margin-top: 2px; }
.ero-note-bloc { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ero-note-bloc small { font-size: 11px; color: var(--ero-gris-clair); }

/* --------------------------------------------------------------------------
   6. Bandeau de confiance (topbar) + en-tête
   -------------------------------------------------------------------------- */
.ero-topbar {
  background: var(--ero-nuit); color: var(--ero-nuit-texte);
  font-size: 13px; min-height: 40px;
  display: flex; align-items: center;
}
.ero-topbar .ero-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.ero-topbar__droite { display: flex; align-items: center; gap: 20px; }
.ero-topbar__sep { width: 1px; height: 14px; background: #333A57; }

.ero-header {
  background: var(--ero-ivoire);
  border-bottom: 1px solid var(--ero-filet);
  position: sticky; top: 0; z-index: 50;
}
.ero-header .ero-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 32px; }
.ero-logo { display: flex; align-items: baseline; gap: 12px; color: var(--ero-encre); }
.ero-logo__mot { font-family: var(--ero-titre); font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.ero-logo__point { color: var(--ero-corail); }
.ero-logo__bl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ero-gris); }
.ero-nav { display: flex; align-items: center; gap: 4px; }
.ero-nav a {
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding-inline: 14px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ero-encre);
}
.ero-nav a:hover { background: var(--ero-sable); color: var(--ero-encre); }
.ero-nav a[aria-current="page"] { color: var(--ero-corail-texte); }
.ero-header__actions { display: flex; align-items: center; gap: 12px; }
.ero-icone-btn {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--ero-filet-fort); background: var(--ero-papier);
  color: var(--ero-encre);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ero-age {
  display: inline-flex; align-items: center; height: 32px; padding-inline: 12px;
  border-radius: 999px; background: var(--ero-encre); color: #fff;
  font-size: 13px; font-weight: 700;
}
.ero-burger { display: none; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.ero-hero .ero-wrap { display: flex; gap: 72px; align-items: flex-start; padding-block: 76px; }
.ero-hero__texte { flex: 1 1 660px; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.ero-hero__maj {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding-inline: 14px; border-radius: 999px;
  background: var(--ero-corail-clair); color: var(--ero-corail-texte);
  font-size: 13px; font-weight: 600;
}
.ero-hero__maj::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ero-corail); }
.ero-hero__chapo { font-size: 19px; line-height: 1.6; color: var(--ero-encre-douce); max-width: 560px; }
.ero-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.ero-hero__cta .ero-btn { min-height: 54px; font-size: 16px; }
.ero-auteur-ligne { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ero-encre-douce); }
.ero-avatar {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  background: var(--ero-encre); color: #fff;
  font-family: var(--ero-titre); font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ero-avatar--lg { width: 88px; height: 88px; font-size: 34px; }

/* Carte « N°1 » */
.ero-carte-une {
  flex: 0 0 468px;
  box-sizing: border-box; padding: 28px;
  background: var(--ero-papier);
  border: 1px solid var(--ero-filet);
  border-radius: var(--ero-r-carte-lg);
  box-shadow: var(--ero-ombre-carte);
  display: flex; flex-direction: column; gap: 20px;
}
.ero-carte-une__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ero-carte-une__id { display: flex; align-items: center; gap: 22px; }
.ero-carte-une__nom { font-family: var(--ero-titre); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }

/* Liste clé/valeur réutilisable */
.ero-kv { display: flex; flex-direction: column; border-top: 1px solid var(--ero-filet-fin); }
.ero-kv div {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 11px; border-bottom: 1px solid var(--ero-filet-fin);
}
.ero-kv div:last-child { border-bottom: 0; }
.ero-kv dt, .ero-kv .ero-kv__c { font-size: 14px; color: var(--ero-gris); margin: 0; }
.ero-kv dd, .ero-kv .ero-kv__v { font-size: 14px; font-weight: 600; color: var(--ero-encre); margin: 0; text-align: right; }

/* --------------------------------------------------------------------------
   8. Bandeau promesses
   -------------------------------------------------------------------------- */
.ero-promesses {
  background: var(--ero-papier);
  border-block: 1px solid var(--ero-filet);
}
.ero-promesses .ero-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 116px;
}
.ero-promesse { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ero-promesse svg { width: 24px; height: 24px; flex: none; stroke: var(--ero-corail-texte); }
.ero-promesses__sep { width: 1px; height: 40px; background: var(--ero-filet-fin); flex: none; }

/* --------------------------------------------------------------------------
   9. Classement
   -------------------------------------------------------------------------- */
.ero-classement__tete {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 60px;
  margin-bottom: 36px;
}
.ero-classement__tete > div { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.ero-liste-rang { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 0; }

.ero-rang {
  box-sizing: border-box; padding: 28px;
  background: var(--ero-papier);
  border: 1px solid var(--ero-filet);
  border-left: 4px solid var(--ero-filet-fort);
  border-radius: var(--ero-r-carte-lg);
  display: flex; align-items: center; gap: 28px;
}
.ero-rang--premier { border-left-color: var(--ero-corail); }
.ero-rang__num { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ero-rang__num b { font-family: var(--ero-titre); font-size: 40px; font-weight: 800; line-height: 1; }
.ero-rang__num span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ero-gris-clair); }
.ero-rang__sep { width: 1px; align-self: stretch; background: var(--ero-filet-fin); flex: none; }
.ero-rang__corps { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ero-rang__titre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ero-rang__verdict { font-size: 16px; line-height: 1.5; color: var(--ero-encre-douce); }
.ero-rang__specs { display: flex; gap: 10px; flex-wrap: wrap; }
.ero-rang__cta { width: 210px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.ero-rang__cta .ero-mention { text-align: center; }

/* --------------------------------------------------------------------------
   10. Grilles de cartes (choix, catégories, check-list, articles)
   -------------------------------------------------------------------------- */
.ero-grille { display: grid; gap: 20px; }
.ero-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ero-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ero-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ero-carte {
  box-sizing: border-box; padding: 24px;
  background: var(--ero-ivoire);
  border: 1px solid var(--ero-filet);
  border-radius: var(--ero-r-carte);
  display: flex; flex-direction: column; gap: 12px;
}
.ero-section--papier .ero-carte { background: var(--ero-ivoire); }
.ero-carte--blanche { background: var(--ero-papier); }
.ero-carte--vide { background: #F5F2EB; border-style: dashed; border-color: var(--ero-filet-fort); }
.ero-carte--encre { background: var(--ero-encre); color: #fff; justify-content: space-between; }
.ero-carte--encre a { color: var(--ero-corail-nuit); }
.ero-carte__usage { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ero-gris-clair); }
.ero-carte__nom { font-family: var(--ero-titre); font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.ero-carte__texte { flex: 1 1 auto; font-size: 14px; line-height: 1.55; color: var(--ero-encre-douce); }

/* Check-list numérotée */
.ero-point { display: flex; gap: 16px; padding: 22px; }
.ero-point__num {
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  background: var(--ero-corail-clair); color: var(--ero-corail-texte);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ero-point__corps { display: flex; flex-direction: column; gap: 6px; }
.ero-point__titre { font-size: 16px; font-weight: 700; }
.ero-point__texte { font-size: 14px; line-height: 1.5; color: var(--ero-encre-douce); }

/* Articles */
.ero-article {
  background: var(--ero-ivoire);
  border: 1px solid var(--ero-filet);
  border-radius: var(--ero-r-carte-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ero-article__visuel { aspect-ratio: 16 / 9; background: var(--ero-encre); display: block; }
.ero-article__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ero-article__corps { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.ero-article__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ero-gris-clair); }
.ero-article__titre { font-family: var(--ero-titre); font-size: 23px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.ero-article__titre a { color: var(--ero-encre); }
.ero-article__titre a:hover { color: var(--ero-corail-texte); }

/* --------------------------------------------------------------------------
   11. Méthode (section nuit) — barres de pondération
   -------------------------------------------------------------------------- */
.ero-methode .ero-wrap { display: flex; gap: 80px; }
.ero-methode__texte { flex: 0 0 400px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ero-methode__texte h2 { color: #fff; }
.ero-methode__texte p { font-size: 16px; line-height: 1.6; color: var(--ero-nuit-texte); }
.ero-criteres { flex: 1 1 auto; display: flex; flex-direction: column; }
.ero-critere {
  display: flex; align-items: center; gap: 24px;
  padding-block: 18px; border-bottom: 1px solid var(--ero-nuit-filet);
}
.ero-critere:last-child { border-bottom: 0; }
.ero-critere__nom { width: 190px; flex: none; font-size: 17px; font-weight: 600; color: #fff; }
.ero-critere__poids { width: 56px; flex: none; font-family: var(--ero-titre); font-size: 20px; font-weight: 700; color: var(--ero-corail); }
.ero-critere__barre { width: 150px; flex: none; height: 8px; border-radius: 999px; background: var(--ero-nuit-filet); overflow: hidden; }
.ero-critere__barre i { display: block; height: 8px; border-radius: 999px; background: var(--ero-corail); }
.ero-critere__desc { flex: 1 1 auto; font-size: 15px; line-height: 1.5; color: var(--ero-nuit-texte); }

/* --------------------------------------------------------------------------
   12. FAQ (accordéon natif)
   -------------------------------------------------------------------------- */
.ero-faq .ero-wrap { display: flex; gap: 72px; }
.ero-faq__texte { flex: 0 0 340px; display: flex; flex-direction: column; gap: 14px; }
.ero-faq__liste { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-content: start; }
.ero-faq details { border-bottom: 1px solid var(--ero-filet-fin); }
.ero-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 62px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; color: var(--ero-encre);
}
.ero-faq summary::-webkit-details-marker { display: none; }
.ero-faq summary::after {
  content: ""; width: 18px; height: 18px; flex: none;
  background: currentColor; color: var(--ero-corail-texte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
.ero-faq details[open] summary::after { transform: rotate(180deg); }
.ero-faq details p { padding-bottom: 18px; font-size: 15px; line-height: 1.6; color: var(--ero-encre-douce); }

/* --------------------------------------------------------------------------
   13. Bandeau auteur
   -------------------------------------------------------------------------- */
.ero-auteur { background: var(--ero-corail-clair); }
.ero-auteur .ero-wrap { display: flex; align-items: center; gap: 32px; min-height: 260px; }
.ero-auteur__corps { max-width: 820px; display: flex; flex-direction: column; gap: 10px; }
.ero-auteur__nom { font-family: var(--ero-titre); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ero-auteur__texte { font-size: 16px; line-height: 1.6; color: var(--ero-encre-douce); }
.ero-auteur .ero-btn { margin-left: auto; flex: none; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.ero-footer { background: var(--ero-nuit); color: var(--ero-nuit-texte); padding-top: 56px; }
.ero-footer__cols { display: flex; gap: 80px; flex-wrap: wrap; }
.ero-footer__marque { flex: 0 0 340px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ero-footer__logo { font-family: var(--ero-titre); font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ero-footer__bl { font-size: 14px; line-height: 1.6; }
.ero-footer__age {
  display: inline-flex; align-items: center; height: 30px; padding-inline: 12px;
  border: 1px solid #333A57; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.ero-footer nav { display: flex; flex-direction: column; gap: 12px; }
.ero-footer nav b { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6E7695; }
.ero-footer nav a { font-size: 15px; color: #E4E6EF; }
.ero-footer nav a:hover { color: #fff; }
.ero-footer__bas {
  margin-top: 40px; border-top: 1px solid var(--ero-nuit-filet);
  min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 13px; color: #8A90AD;
}

/* --------------------------------------------------------------------------
   15. Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --ero-marge: 40px; --ero-section: 64px; }
  .ero-hero .ero-wrap { gap: 40px; }
  .ero-carte-une { flex-basis: 400px; }
  .ero-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ero-methode .ero-wrap, .ero-faq .ero-wrap { gap: 40px; }
  .ero-critere__desc { display: none; }
}

@media (max-width: 900px) {
  .ero-hero .ero-wrap { flex-direction: column; padding-block: 48px; }
  .ero-carte-une { flex-basis: auto; width: 100%; }
  .ero-promesses .ero-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: 22px; }
  .ero-promesses__sep { display: none; }
  .ero-classement__tete { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ero-rang { flex-wrap: wrap; gap: 20px; }
  .ero-rang__sep { display: none; }
  .ero-rang__corps { flex-basis: 100%; order: 2; }
  .ero-rang__cta { width: 100%; order: 3; }
  .ero-methode .ero-wrap, .ero-faq .ero-wrap { flex-direction: column; }
  .ero-methode__texte, .ero-faq__texte { flex-basis: auto; }
  .ero-faq__liste { grid-template-columns: 1fr; gap: 0; }
  .ero-grille--2, .ero-grille--3 { grid-template-columns: 1fr; }
  .ero-auteur .ero-wrap { flex-direction: column; align-items: flex-start; padding-block: 40px; min-height: 0; }
  .ero-auteur .ero-btn { margin-left: 0; }
  .ero-footer__cols { gap: 32px; }
  .ero-footer__marque { flex-basis: 100%; }
  .ero-footer__bas { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 24px; }
}

@media (max-width: 640px) {
  :root { --ero-marge: 20px; --ero-section: 48px; }
  .ero-nav, .ero-topbar__droite, .ero-icone-btn { display: none; }
  .ero-burger { display: flex; }
  .ero-header .ero-wrap { min-height: 60px; }
  .ero-logo__bl { display: none; }
  .ero-grille--4 { grid-template-columns: 1fr; }
  .ero-hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .ero-rang { padding: 18px; gap: 14px; }
  .ero-rang__num b { font-size: 26px; }
  .ero-rang__specs { flex-direction: column; align-items: flex-start; }
  .ero-rang__cta { flex-direction: row; flex-wrap: wrap; }
  .ero-rang__cta .ero-btn { flex: 1 1 140px; }
  .ero-critere { flex-wrap: wrap; gap: 12px; }
  .ero-critere__nom { width: 150px; font-size: 14px; }
  .ero-critere__barre { flex: 1 1 auto; width: auto; }
  .ero-note { --ero-taille: 72px; }
  .ero-note--lg { --ero-taille: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .ero-home * { transition: none !important; }
  .ero-btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   16. Ajouts erolys.fr (blocs du site absents de la maquette)
   -------------------------------------------------------------------------- */
.ero-tete { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; max-width: 760px; }
.ero-centre { text-align: center; }
.ero-carte--img { padding: 0 0 22px; overflow: hidden; }
.ero-carte--img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 8px; }
.ero-carte--img > :not(img) { margin-inline: 22px; }
.ero-carte--img .ero-lien-fleche { min-height: 0; }
.ero-tableau { overflow-x: auto; background: var(--ero-papier); border: 1px solid var(--ero-filet); border-radius: var(--ero-r-carte-lg); }
.ero-tableau table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.ero-tableau th, .ero-tableau td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--ero-filet-fin); vertical-align: top; }
.ero-tableau thead th { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ero-gris); background: var(--ero-sable); }
.ero-tableau tbody th { font-weight: 600; color: var(--ero-encre); width: 32%; }
.ero-tableau td { color: var(--ero-encre-douce); }
.ero-tableau td b { color: var(--ero-encre); }
.ero-tableau tbody tr:last-child > * { border-bottom: 0; }
.ero-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.ero-checklist > * { flex: 0 1 calc((100% - 40px) / 3); }
.ero-point { flex-direction: row; }
.ero-univers { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; }
.ero-univers .ero-carte__texte { color: var(--ero-nuit-texte); margin-top: 6px; }
.ero-menu { border-top: 1px solid var(--ero-filet); background: var(--ero-ivoire); padding: 8px var(--ero-marge) 16px; }
.ero-menu a { display: flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 600; color: var(--ero-encre); border-bottom: 1px solid var(--ero-filet-fin); }
.ero-menu[hidden] { display: none; }
.ero-carte-une .ero-btn + .ero-btn { margin-top: -8px; }
.ero-footer__logo .ero-logo__point { color: var(--ero-corail-nuit); }
.ero-footer__bas span:first-child { max-width: 760px; }
@media (min-width: 641px) { .ero-menu { display: none !important; } }
@media (max-width: 900px) {
  .ero-checklist > * { flex-basis: calc((100% - 20px) / 2); }
  .ero-univers { flex-direction: column; align-items: flex-start; }
  .ero-footer__bas { padding-block: 16px; }
}
@media (max-width: 640px) {
  .ero-checklist > * { flex-basis: 100%; }
  .ero-age { height: 28px; }
  .ero-tableau th, .ero-tableau td { padding: 12px 14px; }
}

/* correctifs : .ero-home a (0,1,1) passait devant les couleurs de bouton et de logo */
.ero-btn { box-sizing: border-box; }
.ero-home a.ero-btn--primaire, .ero-home a.ero-btn--primaire:hover,
.ero-home a.ero-btn--encre, .ero-home a.ero-btn--encre:hover { color: #fff; }
.ero-home a.ero-btn--fantome, .ero-home a.ero-btn--fantome:hover,
.ero-home a.ero-btn--contour, .ero-home a.ero-btn--contour:hover,
.ero-home a.ero-logo, .ero-home a.ero-logo:hover { color: var(--ero-encre); }
.ero-home .ero-section--nuit a.ero-btn--contour { color: #fff; }
.ero-carte--img img { height: auto; }
.ero-article__visuel { overflow: hidden; }
.ero-article__visuel img { height: 100%; aspect-ratio: 16 / 9; }
.ero-spec { height: auto; min-height: 34px; padding-block: 6px; line-height: 1.35; }
@media (max-width: 640px) {
  .ero-rang__cta .ero-btn--primaire, .ero-rang__cta .ero-btn--encre { flex-basis: 100%; }
  .ero-rang__cta .ero-mention { width: 100%; }
}