/* ==========================================================================
   AGM TEC — habillage « éditorial contrasté »
   Se charge après style.css et site.css, dont il conserve la structure et
   l'adaptation aux petits écrans. Mêmes couleurs, autre langage visuel :
   bandes navy pleine largeur en alternance, grandes typographies, filets
   fins, angles nets, aucune ombre portée.
   Se désactive en vidant SITE_THEME dans inc/config.php.
   ========================================================================== */

/* ------------------------------------------------------------------ jetons */

:root {
  /* Angles nets et ombres supprimées : le relief vient des filets et des
     aplats, plus des cartes flottantes. */
  --radius:    3px;
  --radius-sm: 2px;
  --radius-lg: 4px;
  --shadow:    none;
  --shadow-lg: none;

  --wrap: 1280px;
  --step: clamp(4rem, 8vw, 7rem);

  /* Fond des blocs : recalculé dans les bandes sombres, ce qui suffit à
     retourner cartes, tableaux et encarts sans les réécrire un par un. */
  --surface:   #ffffff;
  --surface-2: #f5f7fa;
}

/* ------------------------------------------------------------ typographie */

h1 {
  font-size: clamp(2.3rem, 6vw, 4.35rem);
  font-weight: 800; line-height: 1.03; letter-spacing: -.035em;
}
h2 {
  font-size: clamp(1.72rem, 3.4vw, 2.65rem);
  line-height: 1.1; letter-spacing: -.025em;
}
h3 { font-size: clamp(1.16rem, 1.8vw, 1.38rem); letter-spacing: -.015em; }

body { font-size: 1.045rem; line-height: 1.78; }

/* -------------------------------------------------------------- boutons */

.btn {
  border-radius: 2px; border-width: 1px;
  padding: 1.05rem 1.9rem;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.btn--lg { padding: 1.18rem 2.3rem; font-size: .86rem; }
.btn:hover { transform: none; box-shadow: none; }
.btn--outline { border-color: currentColor; }
.btn--outline:hover { box-shadow: none; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  background: var(--dark); border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}
.topbar__inner { padding-block: .75rem; }
.topbar__notice { letter-spacing: .1em; }

/* ---------------------------------------------------------------- header */

/* Le flou de l'en-tête laisse place à un aplat franc et à un filet net. */
.masthead { border-bottom: 1px solid var(--line); }
.masthead::before { background: #fff; backdrop-filter: none; }
.masthead.is-stuck { box-shadow: none; border-bottom-color: var(--ink); }
.masthead__inner { padding-block: 1.05rem; }

/* Soulignement animé plutôt que pastille colorée. */
.nav__item > a {
  position: relative; border-radius: 0;
  padding: .75rem .95rem; font-weight: 500; letter-spacing: .01em;
}
.nav__item > a::before {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .45rem;
  height: 2px; background: var(--primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s ease;
}
.nav__item > a:hover,
.nav__item > a.is-active { background: transparent; color: var(--ink); }
.nav__item > a:hover::before,
.nav__item > a.is-active::before { transform: scaleX(1); }

.nav__sub {
  border-radius: 0; border-color: var(--ink); padding: .3rem;
  box-shadow: none; background: var(--surface);
}
.nav__sub a { border-radius: 0; padding: .7rem .85rem; }

.masthead__cta { border-radius: 2px; }

/* ------------------------------------------------------------------ hero */

.hero { background: var(--dark); }
.hero__media img { opacity: .2; }
.hero::after {
  background:
    linear-gradient(90deg, rgba(14, 27, 49, .97) 0%, rgba(14, 27, 49, .88) 38%, rgba(14, 27, 49, .34) 100%);
}
.hero__inner { padding-block: clamp(4rem, 11vw, 8.5rem); }

/* L'accroche devient une étiquette à filet, sans fond ni contour. */
.hero__eyebrow {
  background: none; border: 0; border-left: 3px solid var(--primary);
  border-radius: 0; padding: .1rem 0 .1rem .85rem;
  margin-bottom: 1.7rem; font-size: .78rem; letter-spacing: .24em;
}

/* Le filet sous le titre : la respiration principale de la mise en page. */
.hero h1 { margin-bottom: 0; }
.hero h1::after {
  content: ""; display: block; width: clamp(90px, 16vw, 160px); height: 3px;
  background: var(--primary); margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.hero__intro {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 2.2rem; max-width: 58ch;
}
.hero--home .hero__inner { padding-block: clamp(4.6rem, 12vw, 9.5rem); }
.hero--slim .hero__inner { padding-block: clamp(3.2rem, 7vw, 5.4rem); }

/* Entrées de gamme du bandeau d'accueil : encadrés nets, sans flou. */
.choix {
  border-radius: 0; backdrop-filter: none;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .2);
  padding: 1.05rem 1.2rem 1.05rem 1.05rem;
}
.choix:hover { transform: none; background: rgba(236, 108, 43, .14); box-shadow: none; }
.choix__media { border-radius: 0; }
.choix__titre { letter-spacing: -.015em; }

/* --------------------------------------------------------------- chiffres */

/* Bande de chiffres alignée à gauche, séparateurs réduits à un filet. */
.stats { background: var(--dark); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.stats__list li { padding: clamp(2rem, 4vw, 3rem) 1.4rem; text-align: left; }
.stats__list li:first-child { padding-left: 0; }
.stats__list strong {
  font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -.03em; margin-bottom: .5rem;
}
.stats__list span {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); line-height: 1.5;
}
.stats__list strong.is-wide { font-size: clamp(1.5rem, 3vw, 2.3rem); }

/* ------------------------------------------------------------ fil d'Ariane */

.breadcrumb {
  background: transparent; border-bottom: 1px solid var(--line);
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
}
.breadcrumb span { font-weight: 600; }

/* ------------------------------------------------------- têtes de section */

/* Alignement à gauche et filet d'ouverture, à la place du bloc centré. */
.section__head, .bloc-intro {
  max-width: 78ch; margin-inline: 0; text-align: left;
}
.section__head { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.bloc-intro { margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.section__head::before, .bloc-intro::before {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--primary); margin-bottom: 1.5rem;
}
.bloc-intro h2::after { display: none; }
.bloc-intro p, .section__head p { font-size: 1.08rem; }
.section__more { text-align: left; }

/* --------------------------------------------- bandes sombres alternées */

/* Les jetons sont redéfinis localement : cartes, tableaux et encarts se
   retournent d'eux-mêmes puisqu'ils s'appuient tous dessus. */
.section--tint {
  background: var(--dark);
  color: rgba(255, 255, 255, .74);

  --ink:        #ffffff;
  --body:       rgba(255, 255, 255, .74);
  --muted:      rgba(255, 255, 255, .58);
  --line:       rgba(255, 255, 255, .16);
  --line-soft:  rgba(255, 255, 255, .1);
  --surface:    rgba(255, 255, 255, .045);
  --surface-2:  rgba(255, 255, 255, .07);
  --primary-soft: rgba(236, 108, 43, .16);
}
.section--tint strong, .section--tint b { color: #fff; }

/* Deux bandes sombres qui se suivent : la seconde monte d'un cran pour que
   la coupure reste lisible. */
.section--tint + .section--tint {
  background: var(--dark-2); border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Les seuls fonds encore écrits en dur dans la charte de base. */
.card, .tile, .service, .usage, .specs, .sommaire, .fiche-pdf,
.etapes li, .mesures li, .pack li, .shop-list a,
.pagination a, .pagination span, .error-page__links a, .comparatif {
  background: var(--surface);
}

/* En-tête de tableau : l'aplat navy disparaît sur fond navy. */
.section--tint .prose th,
.section--tint .comparatif thead th { background: rgba(255, 255, 255, .12); color: #fff; }

/* Le bouton fantôme s'inverse pour rester lisible sur la bande sombre. */
.section--tint .btn--outline:hover { background: #fff; color: var(--dark-2); border-color: #fff; }

/* ------------------------------------------------------------- contenu */

.prose h3 { color: var(--ink); }
.prose h2::after { width: 56px; height: 3px; margin-top: .8rem; }
.prose blockquote { border-radius: 0; border-left-width: 3px; }
.prose img { border-radius: 0; box-shadow: none; }
.prose figure img { border-radius: 0; }
.chapo {
  border-left-width: 3px; padding-left: 1.3rem;
  font-size: clamp(1.06rem, 1.5vw, 1.18rem);
}

/* ------------------------------------------------- cartes et vignettes */

/* Plus de survol flottant : la bordure prend la couleur d'accent. */
.card, .tile, .service, .usage, .shop-list a, .etapes li {
  border-radius: 0;
}
.card:hover, .tile:hover, .service:hover, .shop-list a:hover {
  transform: none; box-shadow: none; border-color: var(--primary);
}
.card__media, .tile__media { border-radius: 0; }
.card__tag {
  border-radius: 0; background: transparent; color: var(--primary);
  padding: 0 0 .3rem; border-bottom: 2px solid var(--primary);
  letter-spacing: .14em;
}
.usage { border-left-width: 3px; border-radius: 0; }
.etapes li { border-top-width: 3px; }
.mesures, .mesures li { border-radius: 0; }
.specs, .sommaire, .fiche-pdf, .pack li { border-radius: 0; }
.encart { border-radius: 0; background: var(--dark-2); }
.label-tech { border-radius: 0; letter-spacing: .12em; }
.etiquette { border-radius: 0; }
.error-page__links a, .pagination a, .pagination span { border-radius: 0; }

/* ----------------------------------------------------- lignes de gamme */

/* Chaque appareil est numéroté : la page se lit comme un sommaire. */
body { counter-reset: appareil; }
.produit-ligne { counter-increment: appareil; border-bottom-width: 1px; }
.produit-ligne__media { border-radius: 0; }
.produit-ligne__corps h2::before {
  content: counter(appareil, decimal-leading-zero) "\00a0\2014\00a0";
  color: var(--primary); font-weight: 800;
}
.produit-ligne__sous {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.3rem;
}

.product__media { border-radius: 0; }
.product__eyebrow { letter-spacing: .2em; }
.product__points li::before { border-radius: 0; }
.video-produit, .duo__media img { border-radius: 0; box-shadow: none; }

/* ------------------------------------------------------- tableau comparatif */

.comparatif__boite { border-radius: 0; box-shadow: none; }
.comparatif thead th {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
@media (max-width: 700px) {
  .comparatif tbody tr,
  .comparatif tbody tr:nth-child(even) {
    border-radius: 0; box-shadow: none; background: var(--surface);
  }
}

/* --------------------------------------------------------- formulaires */

.champ input, .champ select, .champ textarea { border-radius: 0; }
.coordonnees, .alerte, .shop-callout { border-radius: 0; }
.champ label {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}

/* ------------------------------------------------------- bande d'appel */

/* Aplat orange : la seule respiration chaude de la page, et une coupure
   nette entre la dernière bande navy et le pied de page. */
/* Texte navy et non blanc : blanc sur cet orange ne donne que 3,1:1, sous le
   seuil AA. Le navy monte à 5,5:1 et durcit le contraste éditorial. */
.cta-band { background: var(--primary); color: var(--dark); }
/* Les titres agrandis faisaient passer les boutons à la ligne, laissant la
   moitié droite vide : deux colonnes explicites plutôt qu'un retour au fil. */
.cta-band__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem; align-items: center;
}
.cta-band p { max-width: 52ch; }
.cta-band h2 { color: var(--dark); }
.cta-band p { color: rgba(14, 27, 49, .88); }
.cta-band .btn--primary {
  background: var(--dark); color: #fff; border-color: var(--dark);
}
.cta-band .btn--primary:hover { background: #fff; color: var(--dark); border-color: #fff; }
.cta-band .btn--ghost { --btn-fg: var(--dark); border-color: rgba(14, 27, 49, .45); }
.cta-band .btn--ghost:hover { background: var(--dark); border-color: var(--dark); color: #fff; }

/* ------------------------------------------------------------ pied de page */

.footer { border-top: 3px solid var(--primary); }
.footer__col h3 {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 1.2rem;
}
.footer__phone a { font-size: 1.5rem; letter-spacing: -.02em; }
.footer__notice { letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.footer__bottom { font-size: .8rem; letter-spacing: .04em; }

/* ----------------------------------------------------------- retour haut */

/* Carré navy cerné d'orange : lisible aussi bien sur le blanc que sur la
   bande orange et sur le pied de page navy. */
.to-top {
  border-radius: 0; box-shadow: none;
  background: var(--dark); color: #fff; border: 2px solid var(--primary);
}
.to-top:hover { background: var(--primary); }

/* ------------------------------------------------------------- adaptatif */

@media (max-width: 960px) {
  /* Le soulignement de la barre n'a pas de sens dans le panneau déroulant. */
  .nav__item > a::before { display: none; }
  .nav__item.has-children.is-expanded > a { color: var(--primary); }
  .nav__sub { border-color: transparent; border-left: 2px solid var(--primary-soft); }
  .nav__tel { letter-spacing: -.02em; }
}

@media (max-width: 860px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .stats__list li { padding-inline: 0; border-left: 0; }
  .stats__list li:nth-child(2) { padding-left: 1.4rem; border-left: 1px solid rgba(255, 255, 255, .12); }
}

@media (max-width: 420px) {
  .stats__list li:nth-child(2) { padding-left: 0; border-left: 0; }
}