/* ============================================================
   ECOdynamis SA — feuille de style
   Blanc, gris, magenta ECOdynamis. Sobre, carré, sans effet.
   ============================================================ */

:root {
  /* --- Couleurs de marque -----------------------------------------
     Valeurs échantillonnées directement sur le logo officiel
     ECOdynamis (logo_ECOdynamis.jpg.pdf).                          */
  --magenta:       #E40059;   /* « ECO » du logo */
  --magenta-fonce: #B00045;   /* survol, contraste renforcé */
  --rose:          #EC5E7E;   /* arc intérieur du logo */
  --rose-clair:    #F39BA9;   /* arc extérieur du logo */
  --rose-voile:    #FDF3F6;   /* aplat très léger */

  /* Alias : --accent pilote tous les accents du site.
     Une seule ligne à changer pour reteinter l'ensemble.           */
  --accent:        var(--magenta);
  --accent-fonce:  var(--magenta-fonce);
  --accent-voile:  var(--rose-voile);

  /* --- Neutres (gris neutre du logo : #6E6E6E) --- */
  --encre:      #2E2E30;   /* texte principal — jamais du noir pur */
  --gris-700:   #565658;
  --gris-500:   #8A8A8C;
  --gris-400:   #A8A8AA;
  --gris-300:   #CECED0;
  --gris-200:   #E5E5E7;
  --gris-100:   #F2F2F3;
  --papier:     #FFFFFF;
  --papier-2:   #FAFAFB;
  --gris-fonce: #4A4A4D;   /* pied de page en négatif — gris, jamais noir */

  /* --- Typographie : POLICE SYSTÈME, AUCUN TÉLÉCHARGEMENT ---
     Le site n'embarque plus aucune police. Il se sert de celles qui
     sont déjà installées sur la machine du visiteur, dans cet ordre :

       Helvetica Neue   macOS, iOS
       Helvetica        macOS ancien, certains Linux
       Arial            Windows, Android — présente absolument partout
       Liberation Sans  Linux (mêmes chasses qu'Arial)

     Ces polices partagent les mêmes largeurs de caractères : la mise en
     page est identique d'un système à l'autre. C'est la famille la plus
     universellement disponible qui soit, et accessoirement la grotesque
     suisse par excellence — exactement le registre recherché.

     Conséquences : rien à charger, rien à héberger, aucune dépendance,
     aucun risque d'affichage de secours, et le texte reste du texte
     pour les moteurs de recherche et les lecteurs d'écran.           */
  --sans: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;

  /* Alias historique : les titres utilisaient une seconde famille.
     Il suffit de lui redonner une valeur propre pour réintroduire un
     jour une police de titrage — une seule ligne à changer.          */
  --serif: var(--sans);

  /* --- Rythme --- */
  --page:      1240px;
  --texte:     680px;
  --marge:     clamp(1.5rem, 5vw, 4.5rem);
  --section:   clamp(5rem, 11vw, 9.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  /* 400 partout : Arial et Liberation Sans n'ont pas de graisse maigre.
     Demander 300 donnerait un rendu différent selon le système. */
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Structure ---------- */

.enveloppe {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.etroit { max-width: var(--texte); }

section {
  padding-block: var(--section);
  /* décale l'ancre sous l'entête collante lors du défilement
     (l'entête mesure environ 4,75 rem) */
  scroll-margin-top: 5rem;
}

/* « Qui sommes-nous » et « Un réseau de proximité » se suivent sans photo
   ni aplat pour les séparer. Il faut donc un blanc franc entre les deux,
   pour qu'on n'en lise qu'une à la fois : un tiers de plus que l'écart
   habituel, qui s'ajoute au blanc de bas de la section précédente. */
.section--suite {
  padding-block-start: calc(var(--section) * 1.35);
}

.filet {
  border: 0;
  border-top: 1px solid var(--gris-200);
  margin: 0;
}

/* ---------- Typographie ---------- */

/* Une seule police sur le site, et une seule graisse disponible partout :
   la hiérarchie repose donc sur le corps et sur l'approche. Titres très
   grands et resserrés — le registre des affiches suisses. */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0;
  color: var(--encre);
}

h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.25; }

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

/* Les intitulés de section en magenta : ce sont eux qui annoncent la
   page. Ils sont nettement plus grands que du texte courant — presque
   le double du corps de base. */
.surtitre {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 2.1rem;
}

.surtitre--gris { color: var(--gris-500); }

.chapeau {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--gris-700);
  font-weight: 400;
}

.legende {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gris-500);
  letter-spacing: 0.01em;
}

em.accent {
  font-style: normal;
  color: var(--accent);
}

/* ---------- Entête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--gris-200);
}

.entete__interieur {
  max-width: var(--page);
  margin-inline: auto;
  padding: 1.15rem var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  flex: none;
}
/* Le logo grandit avec l'écran, mais s'arrête à 46 px : au-delà, il
   mordrait sur les six entrées du menu, qui sont déjà au plus juste.
   La valeur plancher vaut jusqu'à la bascule du burger, à 1150 px. */
.marque img {
  height: clamp(38px, 3.15vw, 46px);
  width: auto;
  display: block;
}
@media (max-width: 480px) { .marque img { height: 28px; } }

/* -- Navigation -- */

/* Six entrées à caser à côté du logo dans 1240 px : l'approche et
   l'espacement sont réglés au plus juste. Helvetica et Arial sont plus
   larges que la plupart des polices — ne pas augmenter ces valeurs sans
   vérifier que le menu tient encore à la bascule du burger. */
.nav ul {
  --ecart-menu: clamp(0.9rem, 1.6vw, 1.75rem);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--ecart-menu);
  margin: 0;
  padding: 0;
}

/* Filet vertical entre deux entrées, posé au milieu de l'espace qui les
   sépare. Magenta de la marque, très atténué : il découpe sans peser. */
.nav li { position: relative; }
.nav li + li::before {
  content: '';
  position: absolute;
  left: calc(var(--ecart-menu) / -2 - 1px);
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 1rem;
  background: var(--accent);
  opacity: 0.45;
}

.nav a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gris-700);
  padding-block: 0.5rem;
  position: relative;
  white-space: nowrap;
  transition: color 0.25s ease;
}

/* Le trait magenta sous l'entrée de menu. Il apparaît au survol et
   RESTE affiché sur la section que l'on est en train de lire : le
   script pose alors aria-current="page" sur le lien concerné. */
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav a:hover { color: var(--encre); }
.nav a:hover::after { transform: scaleX(1); }

/* Section en cours de lecture : trait affiché en permanence, et
   l'intitulé passe lui aussi en magenta. */
.nav a[aria-current='page'] { color: var(--accent); }
.nav a[aria-current='page']::after { transform: scaleX(1); }

/* -- Burger -- */

.burger {
  display: none;
  width: 42px; height: 42px;
  margin-right: -9px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 10px;
  width: 22px; height: 1px;
  background: var(--encre);
  transition: transform 0.32s ease, opacity 0.2s ease;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }

.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Le menu compte six entrées : sous ~1150 px il n'y a plus la place de
   les aligner sans les tasser, on passe donc au burger un peu plus tôt
   que la bascule habituelle. */
@media (max-width: 1150px) {
  /* z-index au-dessus du panneau : la croix de fermeture reste cliquable */
  .burger { display: block; z-index: 80; }

  /* IMPORTANT : backdrop-filter fait de l'entête un bloc conteneur pour
     les descendants en position:fixed — le menu plein écran se retrouverait
     alors calé sur l'entête et non sur la fenêtre. On le retire ici. */
  .entete {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--papier);
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--papier);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  .nav[data-ouvert='true'] { opacity: 1; visibility: visible; }

  .nav ul {
    flex-direction: column;
    gap: 2.1rem;
    text-align: center;
  }
  /* Dans le menu plein écran, les entrées sont empilées : le filet
     vertical n'a plus de sens. */
  .nav li + li::before { display: none; }
  .nav a {
    font-size: 1.05rem;
    letter-spacing: 0.14em;
  }
  body.menu-ouvert { overflow: hidden; }
}

/* ---------- Bandeau d'accroche ----------
   Une simple bande en négatif, juste sous le menu, avant le carrousel.
   Hauteur exprimée en centimètres à la demande du commanditaire : en CSS
   un centimètre vaut toujours 37,8 px, la valeur est donc constante. */

.bandeau {
  background: var(--gris-fonce);
  color: #fff;
  min-height: 1.7cm;              /* ≈ 64 px */
  display: grid;
  place-items: center;
  /* marge latérale plus étroite que celle du reste du site : elle laisse
     la place qu'il faut pour tenir sur une seule ligne */
  padding: 0.7rem clamp(1rem, 4vw, 4.5rem);
  text-align: center;
}

/* Le corps est calculé pour que la phrase tienne sur UNE ligne dès qu'il y
   a la place — soit à partir d'environ 340 px de large. En dessous, elle
   passe à deux lignes et la bande s'ouvre d'autant : mieux vaut cela qu'un
   texte de 11 px illisible. */
.bandeau__texte {
  margin: 0;
  font-size: clamp(0.85rem, 2.15vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: #fff;
}

/* ---------- Carrousel d'accueil ----------
   Trois photographies de 1920 × 739 qui se succèdent. Le cadre reprend
   exactement leur format : rien n'est rogné sur ordinateur. Sous 760 px
   de large la bande deviendrait trop mince, une hauteur minimale prend
   alors le relais et l'image est recadrée par son centre. */

.carrousel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  scroll-margin-top: 5rem;
  /* Hauteur = largeur × 739/1920, le format exact des photographies, mais
     jamais moins de 260 px ni plus de 80 % de l'écran.
     ⚠️ Ne PAS écrire ceci avec `aspect-ratio` et `min-height` : dès que la
     hauteur minimale l'emporte, le navigateur reporte la proportion sur la
     LARGEUR et la page déborde de plusieurs centaines de pixels sur
     téléphone. Le calcul explicite ci-dessous n'a pas ce défaut. */
  height: clamp(260px, calc(100vw * 739 / 1920), 80vh);
  background: var(--gris-fonce);
}

.carrousel__scene { position: absolute; inset: 0; }

.carrousel__vue {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* Sans JavaScript, seule la première vue s'affiche — les flèches et la
   rotation n'existeraient pas, autant ne montrer qu'une image nette. */
.carrousel__vue + .carrousel__vue { display: none; }

.js .carrousel__vue {
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.js .carrousel__vue.est-vue { opacity: 1; }

.carrousel__vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Voile sombre, plus dense au centre qu'aux bords : il assied le texte
   blanc sans éteindre la photographie. */
.carrousel__vue::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 70% 80% at 50% 50%,
    rgba(0, 0, 0, 0.46) 0%,
    rgba(0, 0, 0, 0.34) 55%,
    rgba(0, 0, 0, 0.18) 100%);
}

.carrousel__titre {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  padding-inline: var(--marge);
  text-align: center;
  color: #fff;
  /* La pente en vw est un peu plus forte que celle des autres titres :
     sur téléphone, le titre doit rester à l'écart des deux flèches, qui
     mordent chacune une cinquantaine de pixels sur les côtés. */
  font-size: clamp(1.5rem, 7.2vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.carrousel__ligne { font-weight: 400; }
.carrousel__mot   { font-weight: 700; }

/* -- Flèches -- */

.carrousel__commandes { display: none; }

.js .carrousel__commandes {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(0.9rem, 2.6vw, 2.2rem);
  right: clamp(0.9rem, 2.6vw, 2.2rem);
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;   /* seuls les boutons captent le clic */
}

.carrousel__fleche {
  pointer-events: auto;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.carrousel__fleche svg { width: 1.4rem; height: 1.4rem; display: block; }
.carrousel__fleche:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.carrousel__fleche:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .carrousel__fleche { width: 2.5rem; height: 2.5rem; }
  .carrousel__fleche svg { width: 1.15rem; height: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .carrousel__vue { transition: none; }
}

/* ---------- Duo de produits ---------- */

/* Encadré fermé sur ses quatre côtés : les trois colonnes forment un
   seul bloc, séparées par un filet intérieur. */
.duo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--gris-200);
}

.duo__part {
  padding: clamp(2.2rem, 3.6vw, 3.2rem) clamp(1.5rem, 2.7vw, 2.5rem);
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease;
}
.duo__part + .duo__part { border-left: 1px solid var(--gris-200); }
.duo__part:hover { background: var(--papier-2); }

/* Bandeau de titre des colonnes.
   ------------------------------------------------------------------
   Les deux logotypes fournis n'ont ni les mêmes marges internes ni la
   même hauteur de capitales : les caler simplement l'un à côté de
   l'autre ne les aligne pas. La LIGNE DE CAPITALES a donc été relevée
   dans chaque fichier, tranche verticale par tranche verticale, pour
   ne pas confondre les lettres avec les éléments graphiques qui les
   débordent — le « + » d'ECONOteam et la virgule verte d'ECOboost
   (images de 140 px de haut) :

     econoteam.png  capitales lignes 35 → 139   (le « + » monte à 0)
     ecoboost.png   capitales lignes 54 →  91   (la virgule va de 44 à
                    114, puis viennent un filet et la signature)

   D'où les hauteurs d'affichage et les remontées ci-dessous. Résultat :
   les deux noms partent de 7,5 px et retombent sur 29,8 px — même ligne,
   mêmes capitales. Remplacer l'un de ces fichiers impose de relever de
   nouveau ces valeurs.
   --echelle réduit l'ensemble d'un bloc sur petit écran.            */
.duo__logo {
  --echelle: 1;
  position: relative;
  height: calc(46px * var(--echelle));
  margin-bottom: 1.6rem;
}

.logo-produit {
  --h: 30px;              /* hauteur d'affichage de l'image entière */
  --y: 0px;               /* remontée pour amener les capitales en ligne */
  position: absolute;
  left: 0;
  top: calc(var(--y) * var(--echelle));
  width: auto;
  height: calc(var(--h) * var(--echelle));
}
.logo-produit--boost { --h: 84.3px; --y: -25px; }

/* L'expertise n'est pas une marque : elle n'a pas de logotype. Un
   intitulé typographique tient la place, optiquement centré sur la
   ligne des deux noms de produits. */
.duo__nom {
  position: absolute;
  left: 0;
  /* 5,2 px : place les capitales d'« EXPERTISE » optiquement au centre
     de la ligne des deux noms de produits (qui va de 7,1 à 29,8 px). */
  top: calc(5.2px * var(--echelle));
  font-family: var(--sans);
  font-size: calc(1.45rem * var(--echelle));
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

@media (max-width: 520px) {
  .duo__logo { --echelle: 0.85; margin-bottom: 1.3rem; }
}

.duo__phrase {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.05vw, 1.85rem);
  line-height: 1.26;
  margin-bottom: 1.3rem;
}

.duo__texte { color: var(--gris-700); font-size: 0.95rem; flex: 1; }

/* Trois colonnes deviennent trop étroites avant 1150 px : on empile. */
@media (max-width: 1150px) {
  .duo { grid-template-columns: 1fr; }
  .duo__part + .duo__part {
    border-left: 0;
    border-top: 1px solid var(--gris-200);
  }
}

/* ---------- Chiffres ---------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.chiffre__valeur {
  font-family: var(--serif);
  /* Le corps est réglé pour que le plus long des quatre — 29 800 000,
     dix signes — tienne sur UNE ligne dans sa colonne. Les quatre gardent
     la même taille : ce sont des chiffres à comparer entre eux. */
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--encre);
  margin-bottom: 0.7rem;
  /* Chiffres de largeur fixe : le nombre ne tressaute pas pendant qu'il
     défile de zéro jusqu'à sa valeur. */
  font-variant-numeric: lining-nums tabular-nums;
}

.chiffre__label {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--gris-500);
  padding-top: 0.85rem;
  border-top: 1px solid var(--gris-200);
}

@media (max-width: 860px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Grilles génériques ---------- */

.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.6vw, 3.5rem); }

@media (max-width: 900px) { .grille-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grille-2 { grid-template-columns: 1fr; } }

.duo-texte {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) { .duo-texte { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Valeurs ---------- */

.valeur { border-top: 1px solid var(--gris-300); padding-top: 1.6rem; }
.valeur h3 { margin-bottom: 0.9rem; }
.valeur p { color: var(--gris-700); font-size: 0.95rem; }

/* ---------- Listes ---------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  padding: 0.95rem 0 0.95rem 1.6rem;
  border-bottom: 1px solid var(--gris-200);
  position: relative;
  font-size: 0.95rem;
  color: var(--gris-700);
}
.liste li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.55rem;
  width: 6px; height: 1px;
  background: var(--accent);
}
.liste li strong { color: var(--encre); font-weight: 500; }

/* Marques du réseau : logo à gauche, description à droite.
   C'est le lien lui-même qui porte la grille, si bien que TOUTE la ligne
   est cliquable — logo, texte et blanc entre les deux — et non la seule
   image. La puce reste portée par le <li>, hors du lien. */
.liste.actifs li {
  padding: 0;
  position: relative;
}
.liste.actifs li::before { top: 2rem; }

.marque-ligne {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: center;
  padding: 1.5rem 0 1.5rem 1.6rem;
  transition: background 0.32s ease;
}

/* ---------- Signal de cliquabilité ----------
   Quand un bloc porte un lien, il réagit au survol : le logo grandit
   légèrement et la ligne se teinte. Cela rend le lien lisible sans
   souligner ni ajouter de pictogramme. */

a.marque-ligne:hover { background: var(--accent-voile); }
a.marque-ligne:hover .logo-actif { transform: scale(1.05); }

/* Pas de teinte de fond ici : les logos de référence ont un fond blanc
   opaque, qui apparaîtrait en rectangle sur une case colorée.
   Seul l'agrandissement signale le lien. */
.logos a { transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1); }
.logos a:hover { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .logo-actif, .logos a { transition: none; }
  a.marque-ligne:hover .logo-actif, .logos a:hover { transform: none; }
}

/* Logos des marques du réseau, en colonne de gauche */
.logo-actif {
  height: 42px;
  width: auto;
  max-width: 100%;
  align-self: center;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (max-width: 720px) {
  .logo-actif { height: 34px; margin-bottom: 0.2rem; }
  .marque-ligne { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ---------- Références ---------- */

/* Les trois thèmes qui découpent le mur de logos — santé et soin,
   beauté et bien-être, alimentation — sont en gras : ce sont des
   intertitres, pas des titres de section. */
#nos-references h3 { font-weight: 700; }

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 0;
}

.logos a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.logos figure {
  margin: 0;
  background: var(--papier);
  /* Le filet est porté par chaque cellule : les rangées incomplètes
     ne laissent donc aucun aplat gris en fin de grille. */
  box-shadow: 0 0 0 1px var(--gris-200);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 1.1rem 1.35rem;
}

.logos img {
  /* Contrainte sur les deux axes : chaque logo garde son ratio propre.
     Les logotypes larges s'affichent bas, les carrés s'affichent hauts —
     comme dans le catalogue imprimé. */
  max-height: 46px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Couleurs réelles des marques — aucun grisé. */
  opacity: 1;
}



@media (max-width: 600px) {
  .logos { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .logos img { max-height: 30px; }
  .logos a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.logos figure { padding: 0.9rem; }
}

/* ---------- Figures ---------- */

figure.image { margin: 0; }
figure.image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--gris-100);
}
figure.image figcaption { margin-top: 0.85rem; }

/* ---------- Aplats légers ---------- */

.voile { background: var(--accent-voile); }
.papier-2 { background: var(--papier-2); }

.citation {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.3;
  color: var(--encre);
  max-width: 22ch;
  margin: 0;
}

/* ---------- Lien fléché ---------- */

.lien {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--gris-300);
  transition: border-color 0.3s ease, gap 0.3s ease;
  margin-top: 2rem;
  align-self: flex-start;
}
.lien:hover { border-color: var(--accent); gap: 1rem; }
.lien::after { content: '\2192'; font-size: 1rem; letter-spacing: 0; }

/* ---------- Coordonnées ----------
   L'étiquette annonce la nature de la ligne, la valeur est cliquable :
   un appui sur le numéro lance l'appel, un appui sur l'adresse ouvre
   la messagerie. */

.contact__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  margin-bottom: 1.1rem;
}

.contact__etiquette {
  color: var(--gris-500);
  font-size: 0.95rem;
}

.contact__valeur {
  font-size: 1.08rem;
  color: var(--accent);
  border-bottom: 1px solid var(--gris-300);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.contact__valeur:hover {
  color: var(--accent-fonce);
  border-bottom-color: var(--accent);
}

/* ---------- Formulaire ---------- */

.champ { margin-bottom: 1.9rem; }

.champ label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris-500);
  margin-bottom: 0.6rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--encre);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gris-300);
  padding: 0.6rem 0;
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.champ textarea { resize: vertical; min-height: 8rem; line-height: 1.7; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* Leurre anti-robot : invisible sans utiliser display:none, que certains
   robots savent détecter. */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bouton {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 1.05rem 2.6rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }

/* ---------- Pied de page ---------- */

.pied {
  background: var(--gris-fonce);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3.5rem, 7vw, 5rem) 2.2rem;
  font-size: 0.9rem;
}
.pied strong { color: #fff; font-weight: 500; }

.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 3.5rem;
}
@media (max-width: 800px) { .pied__grille { grid-template-columns: 1fr; gap: 2.5rem; } }

.pied h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-clair);
  margin-bottom: 1.2rem;
}

/* Étiquettes « Mail » et « Tél. » du pied de page, en retrait */
.pied__coord .etiquette {
  color: rgba(255, 255, 255, 0.45);
  margin-right: 0.2rem;
}

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.6rem; }
.pied a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.pied a:hover { color: #fff; border-bottom-color: var(--rose-clair); }

.pied__bas {
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Apparition au défilement ---------- */

/* Le masquage n'est appliqué QUE si JavaScript est actif (classe .js posée
   par le script en tête de page). Sans JS, tout reste visible.            */
.js .apparait {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .apparait.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .apparait { opacity: 1; transform: none; transition: none; }
}