/* ==========================================================================
   AULYCOM — Feuille de style principale
   Tout le design se règle depuis les variables ci-dessous.
   ========================================================================== */

:root {
  /* --- Couleurs de marque (modifiables ici, elles se propagent partout) --- */
  --encre:        #0B1220;
  --encre-doux:   #1B2436;
  --gris-texte:   #4A5568;
  /* Gris secondaire : compteurs de filtres, mentions d’aide, meta des fiches.
     Contraste 5,01 sur blanc et 4,67 sur le gris clair — au-dessus du seuil
     de 4,5 exigé par WCAG AA, tout en restant plus léger que --gris-texte. */
  --gris-doux:    #66707F;
  --gris-clair:   #E4E8EF;
  --fond:         #FFFFFF;
  --fond-alt:     #F5F7FA;

  /* Vert anis relevé directement sur le logo. Il est très clair : le texte
     blanc dessus n'a qu'un contraste de 1,5 (illisible), le texte encre 12,3.
     D'où trois déclinaisons selon l'usage. */
  --accent:        #CDDB4F;   /* aplats : boutons, pastilles, traits */
  --accent-fonce:  #BAC93A;   /* survol des aplats */
  --accent-texte:  #63700F;   /* texte sur fond clair — contraste 5,45 sur blanc */
  --accent-clair:  #DCE87A;   /* texte sur fond sombre */
  --accent-pale:   #F5F8DF;   /* fonds d'icônes, halos de focus */

  /* --- Typographie : polices système, aucune requête externe (RGPD) --- */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Rythme --- */
  --largeur-max: 1200px;
  --rayon:       14px;
  --rayon-petit: 8px;
  --ombre:       0 1px 2px rgba(11, 18, 32, .06), 0 8px 24px rgba(11, 18, 32, .08);
  --ombre-forte: 0 12px 40px rgba(11, 18, 32, .16);
  --transition:  .22s cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.65;
  color: var(--gris-texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  color: var(--encre);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 800;
}
h1 { font-size: clamp(2.2rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
p  { margin: 0 0 1.1em; }

/* ------------------------------------------------------------ Utilitaires */
.conteneur { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: 24px; }
.section   { padding: clamp(56px, 9vw, 104px) 0; }
.section--alt { background: var(--fond-alt); }
.centre    { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.surtitre {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-texte); margin-bottom: 14px;
}
/* Variante posée sur les fonds sombres (hero, bandeaux de titre) */
.surtitre--clair { color: var(--accent-clair); }
.chapo { font-size: 1.1rem; max-width: 62ch; }
.centre .chapo { margin-inline: auto; }

/* ----------------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  border: 2px solid transparent; border-radius: 100px;
  font-weight: 700; font-size: .97rem; text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
/* Texte encre et non blanc : le vert anis est trop clair pour porter du blanc. */
.btn--principal { background: var(--accent); color: var(--encre); border-color: var(--accent); }
.btn--principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(186,201,58,.55); }
.btn--secondaire { background: transparent; color: var(--encre); border-color: var(--gris-clair); }
.btn--secondaire:hover { border-color: var(--encre); background: var(--encre); color: #fff; transform: translateY(-2px); }
.btn--clair { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn--clair:hover { background: #fff; color: var(--encre); border-color: #fff; }
.btn--petit { padding: 9px 18px; font-size: .87rem; }
.btn--large { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------------ Header */
.bandeau {
  background: var(--encre);
  color: rgba(255,255,255,.72);
  font-size: .82rem;
}
.bandeau .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 40px; flex-wrap: wrap; }
.bandeau a { text-decoration: none; transition: color var(--transition); }
.bandeau a:hover { color: var(--accent); }
.bandeau__contacts { display: flex; gap: 22px; align-items: center; }
/* Prénom devant chaque numéro : les deux commerciaux sont présentés à égalité. */
.bandeau__prenom { color: #fff; font-weight: 600; }

.entete {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gris-clair);
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
/* Pas de « gap » ici : le texte nu et le <span> sont deux éléments flex, et un
   espacement les séparerait visuellement (« AULY COM » au lieu de « AULYCOM »). */
.logo { flex: none; display: flex; align-items: center; text-decoration: none; font-weight: 900; font-size: 1.45rem; letter-spacing: -.04em; color: var(--encre); }
.logo__marque { color: var(--accent); }
.logo img { height: 44px; width: auto; display: block; }
.pied .logo img { height: 40px; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 9px 15px; border-radius: 100px; text-decoration: none;
  font-size: .93rem; font-weight: 600; color: var(--encre-doux);
  transition: var(--transition);
}
.nav a:hover { background: var(--fond-alt); color: var(--encre); }
.nav a.actif { color: var(--accent-texte); }
.entete__actions { flex: none; display: flex; align-items: center; gap: 12px; }

/* ------------------------------------------------------- Recherche d'article */
/* Le champ vit dans la barre de navigation : sur grand écran il se place à la
   suite des liens, sur téléphone il apparaît en haut du menu déroulant. Il ne
   fait qu'envoyer vers catalogue.html?q=… — c'est le catalogue qui cherche. */
.recherche-entete {
  display: flex; align-items: center; gap: 2px; margin-left: 8px;
  background: var(--fond-alt); border: 1px solid var(--gris-clair);
  border-radius: 100px; padding: 2px 3px 2px 15px;
  transition: var(--transition);
}
.recherche-entete:focus-within {
  background: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.recherche-entete input {
  border: 0; background: none; outline: none; font: inherit;
  font-size: .89rem; color: var(--encre); width: 150px; padding: 6px 0;
  min-width: 0;
}
.recherche-entete input::placeholder { color: var(--gris-texte); }
.recherche-entete button {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: var(--encre-doux); width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; transition: var(--transition);
}
.recherche-entete button:hover { background: var(--accent); color: var(--encre); }
.recherche-entete svg { width: 17px; height: 17px; }

/* Entre 1021 et 1160 px la barre devient serrée : le champ se réduit plutôt
   que de pousser le menu hors de l’écran. */
@media (min-width: 901px) and (max-width: 1160px) {
  .recherche-entete { margin-left: 4px; padding-left: 11px; }
  .recherche-entete input { width: 96px; }
}


.burger { display: none; background: none; border: 0; padding: 8px; color: var(--encre); }
.burger svg { width: 26px; height: 26px; }

/* -------------------------------------------------------------------- Hero */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--encre) 0%, #142033 55%, #1D2C45 100%);
  color: #fff;
  /* Resserré depuis l'ajout du diaporama : le bloc doit tenir dans un écran
     d'ordinateur portable, repères de progression compris. */
  padding: clamp(56px, 8vw, 104px) 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 84% 16%, rgba(205,219,79,.11), transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(60,130,255,.26), transparent 46%);
}
.hero .conteneur { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero p { color: rgba(255,255,255,.82); font-size: 1.15rem; max-width: 56ch; }
.hero__tags {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.hero__tags span { padding: 7px 16px; border: 1px solid rgba(255,255,255,.26); border-radius: 100px; color: rgba(255,255,255,.9); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Deux colonnes : le discours à gauche, le diaporama à droite */
.hero__grille { display: grid; grid-template-columns: 1.06fr .94fr; gap: 60px; align-items: center; }
.hero__texte h1 { max-width: none; }

/* ------------------------------------------------------------- Diaporama */
.hero__media { position: relative; }

.diapo {
  position: relative; aspect-ratio: 4 / 5;
  /* Plafond en hauteur : sans lui, une photo portrait fait déborder le bloc
     d'accueil sous la ligne de flottaison sur un écran d'ordinateur portable. */
  max-height: min(62vh, 600px);
  border-radius: var(--rayon); overflow: hidden;
  background: var(--encre-doux);
  box-shadow: var(--ombre-forte);
}
/* Les images se superposent et se relaient en fondu enchaîné */
.diapo__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.diapo__image[data-actif="1"] { opacity: 1; }

/* Léger zoom pendant la durée d'affichage, pour que l'image ne soit pas figée */
.diapo--anime .diapo__image[data-actif="1"] { animation: diapo-zoom 3s ease-out both;   /* = DUREE dans diapo.js */ }
@keyframes diapo-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Voile bas pour ancrer l'image sur le fond sombre du hero */
.diapo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(to top, rgba(11,18,32,.55), transparent);
  pointer-events: none;
}

/* --- Repères de progression, dans l'esprit des onglets de Pagès Group --- */

/* Bandeau de titre des pages intérieures */
.entete-page {
  background: linear-gradient(150deg, var(--encre) 0%, #172538 100%);
  color: #fff; padding: clamp(48px, 7vw, 80px) 0;
}
.entete-page h1 { color: #fff; margin-bottom: .25em; }
.entete-page p { color: rgba(255,255,255,.78); margin: 0; max-width: 62ch; }

/* ------------------------------------------------------------------ Atouts */
/* Bandeau à fond photo : une mosaïque des réalisations, inclinée et voilée de
   bleu nuit. Elle glisse doucement pendant le défilement — le calcul est dans
   assets/js/mosaique.js, qui écrit la variable --glisse.
   Le voile bleu nuit garde l'ensemble sombre ; ce sont les cartes, plus
   sombres encore, qui portent la lisibilité du texte. */
.atouts { position: relative; overflow: hidden; background: var(--encre); isolation: isolate; }

.mosaique { position: absolute; inset: 0; pointer-events: none; }
.mosaique__grille {
  position: absolute; top: 50%; left: 50%;
  --tuile: clamp(130px, 14vw, 210px);
  /* La grille couvre toujours au moins 132 % de la hauteur du bandeau. Quand
     les tuiles carrées n'y suffisent pas — écran étroit, bandeau très haut —
     les lignes s'étirent et les tuiles deviennent des rectangles. Invisible
     sur un fond flouté et incliné, et cela évite tout vide sur les bords. */
  min-height: 132%;
  display: flex; flex-direction: column; gap: 10px;
  transform: translate3d(-50%, -50%, 0) rotate(-12deg);
}
/* Chaque ligne glisse pour son compte pendant le défilement, dans un sens
   puis dans l'autre — c'est ce décalage entre les lignes qui donne l'effet
   de défilé. Le calcul est dans assets/js/mosaique.js, qui écrit --x. */
.mosaique__ligne {
  display: flex; gap: 10px;
  flex: 1 1 var(--tuile); min-height: 0;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}
/* Une ligne sur deux est décalée d'une demi-tuile : sans ce quinconce, la
   mosaïque se lirait comme un simple damier. */
.mosaique__ligne:nth-child(even) { margin-left: calc(var(--tuile) * -.5); }
.mosaique img {
  flex: 0 0 var(--tuile); width: var(--tuile); height: 100%;
  object-fit: cover; display: block; border-radius: 6px;
  /* Léger flou : les tuiles sont volontairement peu définies pour rester
     légères, le flou rend cette économie invisible. */
  filter: grayscale(.4) blur(1px);
}
.mosaique::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Haut et bas plus sombres : le titre et les trois atouts y sont posés à
       nu sur les photos et manqueraient de contraste sans cela. Le milieu,
       où les étapes ont leur propre panneau, garde les images bien visibles. */
    linear-gradient(rgba(11,18,32,.55), rgba(11,18,32,0) 34%),
    linear-gradient(to top, rgba(11,18,32,.55), rgba(11,18,32,0) 34%),
    radial-gradient(130% 100% at 50% 45%, rgba(11,18,32,.30), rgba(11,18,32,.58));
}
.atouts > .conteneur { position: relative; }

/* Les trois atouts ne sont pas encadrés : simple texte posé sur la mosaïque,
   en retrait par rapport aux étapes qui, elles, gardent leur panneau. C'est le
   dégradé du bas de `.mosaique::after` qui leur assure le contraste, complété
   par un léger halo sombre. */
.atouts .atout {
  background: none; border: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #fff;
  /* Ombre courte et dense plutôt que large et diffuse : elle détache les
     lettres sans les empâter. */
  text-shadow: 0 1px 2px rgba(11,18,32,.95), 0 2px 10px rgba(11,18,32,.8);
}
.atouts .atout:hover { transform: none; box-shadow: none; background: none; }
.atouts .atout__icone {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  background: rgba(220,232,122,.26); color: var(--accent-clair);
}
.atouts .atout__icone svg { width: 22px; height: 22px; }
.atouts .atout h3 { color: #fff; font-size: 1.12rem; margin-bottom: 8px; }
.atouts .atout p  { color: rgba(255,255,255,.94); font-size: .92rem; line-height: 1.6; }
.atouts .grille-atouts {
  gap: 40px; max-width: 1000px; margin: 0 auto;
  /* Halo sombre sans bord visible : c'est lui qui porte le contraste du texte
     nu. Un dégradé général en bas du bandeau ne suffisait pas, la rangée se
     trouvant aux deux tiers de la hauteur et non tout en bas. */
  padding: 36px 40px;
  background: radial-gradient(rgba(11,18,32,.82) 55%, rgba(11,18,32,0));
}

/* Les étapes « Comment ça marche » vivent dans le même bandeau. Elles
   reçoivent le même panneau sombre que les cartes : sur des photos, un texte
   blanc posé à nu deviendrait illisible dès qu'une tuile claire passe
   dessous. */
.atouts__titre {
  margin-bottom: 42px;
  /* Halo sombre : achève de détacher le titre des tuiles claires. */
  text-shadow: 0 2px 20px rgba(11,18,32,.85), 0 1px 4px rgba(11,18,32,.7);
}
.atouts h2 { color: #fff; }
.atouts .grille-etapes { margin-bottom: 56px; }
.atouts .etape {
  padding: 24px 28px 28px;
  background: rgba(11,18,32,.66);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--rayon);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.atouts .etape__num { color: var(--accent-clair); opacity: .55; }
.atouts .etape h3 { color: #fff; }
.atouts .etape p  { color: rgba(255,255,255,.80); }

@media (max-width: 700px) {
  /* Sur téléphone, le bandeau est très haut (les étapes s'empilent) : de
     petites tuiles, et mosaique.js recopie les rangées pour couvrir toute la
     hauteur au lieu de les étirer — sinon on ne verrait que quelques grands
     morceaux de photos floues. */
  .mosaique__grille { --tuile: clamp(84px, 25vw, 104px); gap: 6px; }
  .mosaique__ligne { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Le script ne bouge déjà rien dans ce cas ; on remet les lignes à zéro
     au cas où le réglage changerait en cours de visite. */
  .mosaique__ligne { transform: none; }
}

.grille-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.atout {
  background: var(--fond); border: 1px solid var(--gris-clair); border-radius: var(--rayon);
  padding: 32px 28px; transition: var(--transition);
}
.atout:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: transparent; }
.atout__icone {
  width: 50px; height: 50px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--accent-pale); color: var(--accent-texte);
}
.atout__icone svg { width: 25px; height: 25px; }
.atout p { margin: 0; font-size: .97rem; }

/* -------------------------------------------------------------- Catégories */
/* Quatre cartes de techniques : deux par ligne dès la tablette, une par ligne
   sur téléphone. Chaque carte montre la photo en entier et le nom de la
   technique ; la description apparaît au survol de la souris. */
.grille-categories { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 600px) {
  .grille-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; margin-inline: auto; }
}
/* aspect-ratio : la carte garde les proportions des photos (3:2), mais
   s'allonge d'elle-même si le texte ne tient pas, sur un écran étroit. */
.categorie {
  position: relative; display: flex; text-decoration: none;
  aspect-ratio: 3 / 2;
  border-radius: var(--rayon); overflow: hidden;
  background: var(--encre-doux);
  transition: var(--transition);
}
/* Cartes de présentation, pas des liens : pas d’effet « bouton » au survol. */
.categorie:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.categorie img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.categorie:hover img { transform: scale(1.05); }
.categorie__corps {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; color: #fff;
  /* Dégradé assez haut : sans survol possible (téléphone), la description
     reste affichée et doit rester lisible sur les photos claires. */
  background: linear-gradient(to top, rgba(11,18,32,.92) 0%, rgba(11,18,32,.62) 45%, rgba(11,18,32,0) 85%);
}
.categorie__corps h3 {
  color: #fff; margin: 0 0 6px; font-size: 1.5rem;
  text-shadow: 0 1px 3px rgba(11,18,32,.6);
}
/* Le texte explicatif fait deux à trois lignes : moins gras et plus aéré que
   l'ancienne énumération de produits, sinon il devient un pavé. */
.categorie__corps span { font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.9); font-weight: 500; max-width: 46ch; }

/* Avec une souris : au repos, la photo et le nom seulement ; au survol (ou
   au clavier), un voile sombre couvre la photo et la description apparaît.
   Les écrans tactiles, qui n'ont pas de survol, ne sont pas concernés : la
   description y reste toujours affichée. */
@media (hover: hover) {
  .categorie__corps {
    background: linear-gradient(to top, rgba(11,18,32,.85) 0%, rgba(11,18,32,.35) 30%, rgba(11,18,32,0) 55%);
  }
  .categorie__corps::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(11,18,32,.62);
    opacity: 0; transition: opacity .35s ease;
  }
  .categorie__corps span {
    max-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px);
    transition: max-height .4s ease, opacity .3s ease, transform .4s ease;
  }
  .categorie:hover .categorie__corps::before,
  .categorie:focus-visible .categorie__corps::before { opacity: 1; }
  .categorie:hover .categorie__corps span,
  .categorie:focus-visible .categorie__corps span { max-height: 9em; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .categorie img, .categorie__corps::before, .categorie__corps span { transition: none; }
  .categorie:hover img { transform: none; }
}

/* ------------------------------------------------------------------ Étapes */
.grille-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px; }
.etape { position: relative; padding-top: 14px; }
.etape__num {
  font-size: 3.4rem; font-weight: 900; line-height: 1;
  color: var(--accent-texte); opacity: .38; letter-spacing: -.05em;
}
.etape h3 { margin-top: 6px; }
.etape p { font-size: .97rem; margin: 0; }

/* ----------------------------------------------------------------- Clients */
.grille-clients { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 44px; max-width: 860px; margin-inline: auto; }
/* Les 860 px donnent deux rangées de cinq logos sur ordinateur. Si vous
   ajoutez un logo et que les rangées deviennent bancales, ajustez cette
   largeur ou changez l'ordre des logos dans index.html. */
/* Les logos arrivent en noir ou en couleurs : le gris et l'opacité les mettent
   au même niveau, la couleur revient au survol. `max-width` évite qu'un logo
   très allongé (Pagès fait cinq fois sa hauteur) n'écrase les autres. */
.grille-clients img {
  height: 66px; width: auto; max-width: 180px; object-fit: contain;
  filter: grayscale(1); opacity: .62; transition: var(--transition);
}
.grille-clients img:hover { filter: none; opacity: 1; }
/* Un logo rond ou carré paraît bien plus petit qu'un logo en longueur à
   hauteur égale : on lui donne un peu plus de hauteur. */
.grille-clients img.logo-carre { height: 86px; }

/* ---------------------------------------------------------------- Bloc CTA */
/* Bloc d'appel à l'action : aplat anis, donc tout le texte passe en encre. */
.cta {
  background: linear-gradient(135deg, var(--accent) 0%, #DEE98A 100%);
  color: var(--encre); border-radius: var(--rayon); padding: clamp(38px, 6vw, 64px);
  text-align: center;
}
.cta h2 { color: var(--encre); }
.cta p { color: rgba(11,18,32,.78); max-width: 56ch; margin-inline: auto; }
.cta .btn { background: var(--encre); color: #fff; border-color: var(--encre); }
.cta .btn:hover { background: #fff; color: var(--encre); border-color: #fff; }
.cta .btn--clair { background: transparent; color: var(--encre); border-color: rgba(11,18,32,.32); }
.cta .btn--clair:hover { background: var(--encre); color: #fff; border-color: var(--encre); }

/* ------------------------------------------------------------ Commerciaux */
/* Deux cartes claires, comme les « atouts » de l'ancienne version : l'anis
   reste un accent — le cercle autour du portrait — au lieu d'un grand aplat. */
.grille-equipe {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px; max-width: 760px; margin: 0 auto;
}
.equipier {
  background: var(--fond); border: 1px solid var(--gris-clair);
  border-radius: var(--rayon); padding: 34px 28px 30px;
  text-align: center; transition: var(--transition);
  display: flex; flex-direction: column;
}
.equipier:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: transparent; }
.equipier img {
  /* height:auto neutralise l'attribut height du HTML, qui sinon l'emporterait
     sur aspect-ratio et donnerait des portraits allongés. */
  width: 118px; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; display: block; margin: 0 auto 20px;
  border: 3px solid var(--accent);
}
.equipier h3 { margin: 0 0 5px; font-size: 1.1rem; }
.equipier p  { margin: 0; font-size: .92rem; color: var(--gris-texte); }

/* Coordonnées : téléphone et adresse en clair et cliquables. L'adresse reste
   lisible pour qui n'a pas de logiciel de messagerie (Gmail dans le
   navigateur, par exemple) : il peut au moins la copier. */
.equipier__contact {
  list-style: none; margin: 20px 0 22px; padding: 18px 0 0;
  border-top: 1px solid var(--gris-clair);
  display: grid; gap: 10px; justify-items: center;
}
.equipier__contact li { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; font-size: .95rem; }
.equipier__contact svg { width: 17px; height: 17px; flex: none; color: var(--accent-texte); }
.equipier__contact a {
  color: var(--encre); font-weight: 600; text-decoration: none;
  overflow-wrap: anywhere;   /* une adresse longue passe à la ligne au lieu de déborder */
}
.equipier__contact a:hover, .equipier__contact a:focus-visible { color: var(--accent-texte); text-decoration: underline; }
/* Le bouton se cale en bas : les deux cartes restent alignées même si une
   adresse passe sur deux lignes. */
.equipier__ecrire { margin-top: auto; align-self: center; }

/* Version compacte, pour la page Contact : portrait à gauche, coordonnées à
   droite, alignées à gauche. Pas d'effet de soulèvement au survol : la carte
   voisine un formulaire, elle n'a pas à s'animer. */
.equipier--compact {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px;
  align-items: start; text-align: left; padding: 24px;
}
.equipier--compact:hover { transform: none; box-shadow: none; border-color: var(--gris-clair); }
.equipier--compact img { width: 84px; margin: 0; }
.equipier__infos { display: flex; flex-direction: column; min-width: 0; }
.equipier--compact .equipier__contact { justify-items: start; margin: 14px 0 16px; padding-top: 14px; }
.equipier--compact .equipier__ecrire { align-self: flex-start; }
@media (max-width: 420px) {
  .equipier--compact { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .equipier--compact img { width: 60px; }
}

/* ------------------------------------------------------------------- Footer */
.pied { background: var(--encre); color: rgba(255,255,255,.62); padding: 64px 0 28px; font-size: .93rem; }
.pied h2 { color: #fff; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; }
.pied a { text-decoration: none; transition: color var(--transition); }
.pied a:hover { color: var(--accent); }
.pied__grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.pied__grille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied .logo { color: #fff; margin-bottom: 14px; }
.pied__bas {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem;
}

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1000px) {
  /* Le diaporama passe sous le texte et s'aplatit : une photo très haute
     repousserait sinon tout le contenu sous la ligne de flottaison. */
  .hero__grille { grid-template-columns: 1fr; gap: 40px; }
  .diapo { aspect-ratio: 3 / 2; }
  .hero__media { max-width: 560px; }
}
/* Le pied de page passe de quatre colonnes a deux, puis a une seule sous
   600 px. Le palier intermediaire evite une colonne unique tres haute sur
   les tablettes. */
@media (max-width: 1000px) {
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .pied__grille { grid-template-columns: 1fr; }
}
/* La bascule vers le menu deroulant se fait a 900 px, et non a 768 comme au
   depart : en-tete deploye, le logo, les cinq liens et le champ de recherche
   reclament environ 880 px. En dessous, le logo se faisait ecraser jusqu’a
   disparaitre, puis la barre debordait.

   Ce seuil etait a 1020 px tant que l’en-tete portait le bouton « Ma selection »
   (122 px) ; le panier retire, il a pu redescendre. Si vous ajoutez une entree
   au menu, refaites le calcul : chaque lien coute environ 90 px. */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .bandeau__contacts { gap: 14px; }
  .bandeau__zone { display: none; }
  .bandeau .conteneur { justify-content: center; }

  /* Sans ce retrait, le backdrop-filter ferait de l'en-tête le bloc conteneur
     du menu en position:fixed, qui resterait enfermé dans la barre de 77 px
     au lieu de couvrir l'écran. */
  .entete { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }

  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 90px 20px 30px;
    background: #fff; box-shadow: var(--ombre-forte);
    transform: translateX(100%); transition: transform var(--transition);
  }
  .nav[data-ouvert="1"] { transform: none; }
  .nav a { padding: 14px 16px; font-size: 1.05rem; border-radius: var(--rayon-petit); }

  /* Dans le panneau déroulant, le champ prend toute la largeur. */
  .recherche-entete { margin: 0 0 14px; padding: 4px 5px 4px 16px; }
  .recherche-entete input { width: 100%; flex: 1 1 auto; font-size: 1rem; }
  .burger { display: block; z-index: 1000; }
}

/* ==========================================================================
   ANIMATION D'OUVERTURE (page d'accueil uniquement)

   Le voile n'existe que si le script d'en-tête a posé la classe .avec-intro
   sur <html>. Sans JavaScript, ou à la deuxième visite dans le même onglet,
   rien ne s'affiche et la page est immédiatement lisible.
   ========================================================================== */
.intro { display: none; }

.avec-intro .intro {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background: linear-gradient(150deg, var(--encre) 0%, #142033 55%, #1D2C45 100%);
  cursor: pointer;
  animation: intro-sortie .55s cubic-bezier(.65, 0, .35, 1) 1.75s forwards;
}
.avec-intro .intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(205,219,79,.18), transparent 55%);
}

/* Pendant l'animation, on bloque le défilement de la page derrière */
.avec-intro body { overflow: hidden; }

/* --- Le mot-symbole : les deux moitiés se rejoignent au centre --- */
.intro__mot {
  position: relative; z-index: 1;
  display: flex;
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  font-weight: 900; letter-spacing: -.045em; line-height: 1;
  color: #fff;
}
.intro__mot span { display: block; }
.intro__mot .part-a { animation: intro-gauche .85s cubic-bezier(.16, 1, .3, 1) both; }
.intro__mot .part-b { color: var(--accent); animation: intro-droite .85s cubic-bezier(.16, 1, .3, 1) both; }

/* Variante logo : utilisée automatiquement si assets/img/logo.png existe */
.intro__image {
  position: relative; z-index: 1;
  max-width: min(320px, 62vw); height: auto;
  animation: intro-logo .9s cubic-bezier(.16, 1, .3, 1) both;
}

/* --- Le trait orange qui se déploie sous le nom --- */
.intro__trait {
  position: relative; z-index: 1;
  width: min(240px, 52vw); height: 3px; border-radius: 3px;
  background: var(--accent);
  transform: scaleX(0);
  animation: intro-trait .7s cubic-bezier(.16, 1, .3, 1) .5s both;
}

/* --- La signature --- */
.intro__signature {
  position: relative; z-index: 1;
  margin: 0; text-align: center;
  font-size: clamp(.82rem, 2.4vw, 1rem); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  animation: intro-signature .8s ease-out .75s both;
}

@keyframes intro-gauche {
  from { opacity: 0; transform: translateX(-44px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-droite {
  from { opacity: 0; transform: translateX(44px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-logo {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-trait {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes intro-signature {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-sortie {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-100%); visibility: hidden; }
}

/* Le voile part immédiatement quand le visiteur clique pour passer */
.intro[data-passer="1"] { animation: intro-sortie .35s ease-in forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 560px) {
  /* Deux cartes côte à côte ne laissent que 94 px de texte, et le portrait
     rond y devient minuscule. Une seule colonne, et tout respire. */
  .grille-equipe { grid-template-columns: 1fr; gap: 20px; max-width: 400px; }
  .equipier { padding: 28px 24px 26px; }
}
@media (max-width: 560px) {
  /* Sur téléphone, une grille de deux colonnes : les logos s'alignent en
     rangées régulières au lieu de lignes bancales (avec un nombre impair de
     logos, le dernier reste seul à gauche). */
  .grille-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 28px 20px; }
  .grille-clients img { max-width: 100%; height: 56px; }
  .grille-clients img.logo-carre { height: 72px; }
}

/* --------------------------------------------------------- Offres du moment */
/* Une offre par ligne, image à gauche quand il y en a une. Le bloc tient aussi
   bien sans photo : c'est le cas le plus fréquent quand on ajoute une offre
   dans l'urgence. */
.liste-offres { display: grid; gap: 26px; max-width: 900px; margin: 0 auto; }
.offre {
  display: grid; grid-template-columns: 260px 1fr; gap: 0;
  background: var(--fond); border: 1px solid var(--gris-clair);
  border-radius: var(--rayon); overflow: hidden;
  transition: var(--transition);
}
/* Sans photo, le bloc occupe toute la largeur. La classe est posée par le
   script plutôt que déduite en CSS : `:has` n'est pas supporté partout. */
.offre--sans-image { grid-template-columns: 1fr; }
.offre:hover { box-shadow: var(--ombre); border-color: transparent; }
.offre__visuel { background: var(--fond-alt); }
.offre__visuel img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
.offre__contenu { padding: 30px 32px 32px; }
.offre__contenu h2 { font-size: 1.32rem; margin: 0 0 10px; }
.offre__contenu p { margin: 0 0 12px; }
.offre__prix { font-weight: 700; color: var(--accent-texte); }
.offre__fin { font-size: .88rem; color: var(--gris-texte); }
.offre .btn { margin-top: 8px; }

@media (max-width: 700px) {
  .offre { grid-template-columns: 1fr; }
  .offre__visuel img { min-height: 170px; }
  .offre__contenu { padding: 24px 22px 26px; }
}

/* --------------------------------------------------------------------------
   Le fondateur, dans « Notre histoire » (page À propos)
   Photo à gauche, texte à droite ; une seule colonne sur mobile.
   -------------------------------------------------------------------------- */
.fondateur {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  align-items: stretch;
  margin-top: 26px;
}

.fondateur__photo {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.fondateur__photo img {
  display: block;
  width: 100%;
  /* height:auto neutralise l'attribut height="900" de la balise, sans quoi
     l'image s'afficherait à sa taille brute. */
  height: auto;
  object-fit: cover;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.fondateur__photo figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--gris-texte);
}

.fondateur__texte > p:first-child { margin-top: 0; }

/* Sur ecran large, la photo descend jusqu'au bas du texte plutot que de
   laisser un vide sous elle. Le recadrage se fait sur les cotes : le coureur,
   pres du centre, n'est pas rogne. */
@media (min-width: 781px) {
  .fondateur__photo img { flex: 1 1 auto; min-height: 375px; }
}

@media (max-width: 780px) {
  .fondateur { grid-template-columns: 1fr; gap: 22px; }
  .fondateur__photo { max-width: 290px; }
  .fondateur__photo img { aspect-ratio: 4 / 5; }
}

/* Bandeau sur très petit téléphone : les deux numéros restent côte à côte. */
@media (max-width: 380px) {
  .bandeau { font-size: .76rem; }
  .bandeau__contacts { gap: 10px; }
}

/* Sur très petit écran, le halo des atouts garde moins de marge intérieure :
   sinon le texte n'aurait plus que 190 px de large. */
@media (max-width: 420px) {
  .atouts .grille-atouts { padding: 28px 12px; }
}