/* ═══════════════════════════════════════════════════════════════════════
   Arnold Hubert Développement — site public
   Reprend la charte de la plaquette AHD76 : bleu #3366FF, fond nuit sur les
   zones d'accroche, typographie large et très contrastée.
   Mode clair par défaut ; le mode sombre ne s'active que sur choix explicite
   (voir theme.js), jamais d'après la préférence système.
   ═════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────  Jetons  ───────────────────────────── */
:root {
  /* Marque — identiques au logo. Le bleu d'aplat et le bleu de texte
     diffèrent : #3366FF sur blanc plafonne à 4,2:1, insuffisant pour du
     corps de texte. */
  --bleu: #3366ff;
  --bleu-texte: #1f4fd8;
  --bleu-survol: #2850c7;
  --sur-bleu: #ffffff;

  /* Teintes des quatre offres, reprises de la plaquette. */
  --t-bleu: #3366ff;
  --t-cyan: #0f9aa8;
  --t-violet: #7345d6;
  --t-vert: #46893a;

  --nuit: #070d1a;
  --nuit-2: #0d1c3a;

  --fond: #ffffff;
  --fond-2: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #eef2f9;
  --bordure: #e1e7f2;
  --bordure-forte: #cdd6e6;
  --texte: #0d1524;
  --texte-doux: #56617a;

  --rayon: 14px;
  --rayon-l: 22px;
  --ombre: 0 1px 2px rgb(11 18 32 / 6%), 0 10px 30px rgb(11 18 32 / 6%);
  --ombre-forte: 0 2px 6px rgb(11 18 32 / 8%), 0 22px 50px rgb(11 18 32 / 12%);
  --conteneur: 1180px;
  --h-entete: 74px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --transition: 220ms cubic-bezier(.2, .7, .3, 1);
}

:root[data-theme="sombre"] {
  --bleu: #5b8cff;
  --bleu-texte: #8fb0ff;
  --bleu-survol: #7ba1ff;
  --sur-bleu: #06101f;

  --t-bleu: #6f97ff;
  --t-cyan: #35c6d4;
  --t-violet: #a585f0;
  --t-vert: #7cc46b;

  --fond: #0a0f1a;
  --fond-2: #0e1524;
  --surface: #111a2b;
  --surface-2: #17223a;
  --bordure: #1f2b44;
  --bordure-forte: #2c3b58;
  --texte: #e9eef8;
  --texte-doux: #97a3ba;

  --ombre: 0 1px 2px rgb(0 0 0 / 45%), 0 10px 30px rgb(0 0 0 / 35%);
  --ombre-forte: 0 2px 6px rgb(0 0 0 / 50%), 0 22px 50px rgb(0 0 0 / 45%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; }
a { color: var(--bleu-texte); }

.evitement {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--bleu); color: var(--sur-bleu);
  padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.evitement:focus { left: 12px; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }

/* ────────────────────────────  Communs  ───────────────────────────── */

.conteneur { width: min(var(--conteneur), 100% - 44px); margin-inline: auto; }

.icone { width: 22px; height: 22px; flex: none; }

.surtitre {
  margin: 0 0 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--bleu-texte);
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 6.2vw, 4.1rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.16rem; font-weight: 750; letter-spacing: -0.01em; }

.accentue { color: var(--bleu); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .96rem; font-weight: 650; text-decoration: none;
  cursor: pointer; transition: background var(--transition), border-color var(--transition),
                               transform var(--transition), color var(--transition);
}
.bouton:hover { transform: translateY(-1px); }
.bouton .icone { width: 19px; height: 19px; transition: transform var(--transition); }
.bouton:hover .icone { transform: translateX(3px); }

.bouton-primaire { background: var(--bleu); color: var(--sur-bleu); border-color: var(--bleu); }
.bouton-primaire:hover { background: var(--bleu-survol); border-color: var(--bleu-survol); }

.bouton-fantome {
  background: transparent; color: #ffffff; border-color: rgb(255 255 255 / 35%);
}
.bouton-fantome:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 60%); }

/* ─────────────────────────────  En-tête  ──────────────────────────── */

.entete {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--fond) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
  padding-top: env(safe-area-inset-top);
}
.entete.pose { border-bottom-color: var(--bordure); box-shadow: 0 6px 24px rgb(11 18 32 / 6%); }
:root[data-theme="sombre"] .entete.pose { box-shadow: 0 6px 24px rgb(0 0 0 / 40%); }

.entete-grille {
  display: flex; align-items: center; gap: 18px;
  min-height: var(--h-entete);
}

/* En haut de l'accueil, l'en-tête flotte sur la bannière sombre : fond
   transparent, lettrage clair. Dès le premier défilement (.pose) il reprend
   son fond opaque. Les autres pages débutent sur du clair : elles gardent
   l'en-tête opaque en permanence. */
body.accueil .entete:not(.pose) { background: transparent; backdrop-filter: none; }
body.accueil .entete:not(.pose) .marque-texte strong { color: #ffffff; }
body.accueil .entete:not(.pose) .marque-texte small { color: #8fb0ff; }
body.accueil .entete:not(.pose) .navigation > a { color: #c3d0e8; }
body.accueil .entete:not(.pose) .navigation > a:hover { color: #ffffff; background: rgb(255 255 255 / 10%); }
body.accueil .entete:not(.pose) .navigation > a.actif { color: #ffffff; }
body.accueil .entete:not(.pose) .icone-bouton {
  background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 26%); color: #dbe4f5;
}
body.accueil .entete:not(.pose) .icone-bouton:hover { color: #ffffff; border-color: rgb(255 255 255 / 55%); }

.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marque img { border-radius: 10px; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.2; }
.marque-texte strong { font-size: .96rem; font-weight: 500; letter-spacing: .01em; }
.marque-texte strong b { font-weight: 800; }
.marque-texte small {
  font-size: .66rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--bleu-texte); font-weight: 650;
}

.navigation { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.navigation > a {
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  color: var(--texte-doux); font-size: .94rem; font-weight: 600;
  transition: color var(--transition), background var(--transition);
}
.navigation > a:hover { color: var(--texte); background: var(--surface-2); }
.navigation > a.actif { color: var(--bleu-texte); }

.bouton-connexion {
  margin-left: 10px; padding: 10px 18px;
  background: var(--bleu); color: var(--sur-bleu) !important; border-color: var(--bleu);
}
.bouton-connexion:hover { background: var(--bleu-survol); border-color: var(--bleu-survol); }
.bouton-connexion .icone { width: 17px; height: 17px; }
.bouton-connexion:hover .icone { transform: none; }

.entete-outils { display: flex; align-items: center; gap: 8px; }
.icone-bouton {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte-doux);
  cursor: pointer; transition: color var(--transition), border-color var(--transition);
}
.icone-bouton:hover { color: var(--bleu-texte); border-color: var(--bordure-forte); }
.icone-bouton .icone { grid-area: 1 / 1; }

/* Une seule des deux icônes est visible selon l'état. */
#bascule-theme .lune { display: none; }
:root[data-theme="sombre"] #bascule-theme .soleil { display: none; }
:root[data-theme="sombre"] #bascule-theme .lune { display: block; }

.menu-bouton { display: none; }
.menu-bouton .fermer { display: none; }
.menu-bouton[aria-expanded="true"] .ouvrir { display: none; }
.menu-bouton[aria-expanded="true"] .fermer { display: block; }

/* ────────────────────────────  Bannière  ──────────────────────────── */

.banniere {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--nuit); color: #eef3ff;
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 116px);
}
/* La bannière remonte sous l'en-tête transparent et compense par son
   rembourrage : sans cela une bande claire subsisterait au-dessus. */
body.accueil .banniere {
  margin-top: calc(-1 * (var(--h-entete) + env(safe-area-inset-top)));
  padding-top: calc(var(--h-entete) + clamp(56px, 8vw, 104px));
}
.banniere-fond {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 65% at 78% 34%, rgb(51 102 255 / 42%) 0%, transparent 62%),
    radial-gradient(70% 55% at 8% 96%, rgb(51 102 255 / 20%) 0%, transparent 60%),
    linear-gradient(160deg, #060b16 0%, #0b1730 48%, #0a1a3d 100%);
}
/* Grille technique en filigrane — le motif de la plaquette, très atténué. */
.banniere-fond::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgb(140 175 255 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(140 175 255 / 7%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 75%);
}

.banniere-grille {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px); align-items: center;
}

.banniere .surtitre { color: #8fb0ff; }
.banniere h1 { color: #ffffff; }
.banniere .accentue { color: #4d80ff; }

.chapeau {
  margin: 26px 0 0; max-width: 34rem;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: #bfcbe4;
}
.chapeau strong { color: #ffffff; font-weight: 700; }

/* Filet bleu court, comme sous le titre de la plaquette. */
.banniere-texte h1::after {
  content: ""; display: block; width: 92px; height: 4px; border-radius: 2px;
  background: var(--bleu); margin-top: 30px;
}

.banniere-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.banniere-visuel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.strates { width: 100%; height: auto; }
.strate { fill-opacity: 1; }

.chaine { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.chaine li {
  display: grid; grid-template-columns: 20px 1fr; column-gap: 12px;
  align-items: center; color: #b9c6e0;
}
.chaine .icone { grid-row: span 2; color: #9fbcff; }
.chaine b { color: #ffffff; font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; }
.chaine span { font-size: .84rem; line-height: 1.35; }

/* ─────────────────────────────  Sections  ─────────────────────────── */

.section { padding: clamp(64px, 8vw, 108px) 0; }
.section-alterne { background: var(--fond-2); }

.section-entete { max-width: 46rem; margin-bottom: clamp(34px, 4vw, 54px); }
.section-chapeau { margin: 20px 0 0; color: var(--texte-doux); font-size: 1.03rem; }

/* ─────────────────────────────  Offres  ───────────────────────────── */

.grille-offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.offre {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon-l); padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Le liseré coloré reprend la barre sous chaque bloc de la plaquette. */
.offre::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--teinte);
}
.offre:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--bordure-forte); }

.offre[data-teinte="bleu"]   { --teinte: var(--t-bleu); }
.offre[data-teinte="cyan"]   { --teinte: var(--t-cyan); }
.offre[data-teinte="violet"] { --teinte: var(--t-violet); }
.offre[data-teinte="vert"]   { --teinte: var(--t-vert); }

.offre-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offre-numero {
  font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: var(--teinte); opacity: .3;
}
/* Pastille hexagonale claire autour de l'icône, comme sur la plaquette. */
.offre-icone {
  width: 46px; height: 46px; padding: 11px; color: var(--teinte);
  background: color-mix(in srgb, var(--teinte) 12%, transparent);
  border-radius: 13px;
}
.offre h3 { margin-top: 2px; }
.offre p { margin: 0; color: var(--texte-doux); font-size: .95rem; }

/* ─────────────────────────────  Méthode  ──────────────────────────── */

.etapes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon-l); overflow: hidden; box-shadow: var(--ombre);
}
/* Barre quadricolore continue en tête du bloc — signature de la plaquette. */
.etapes::before {
  content: ""; grid-column: 1 / -1; height: 5px;
  background: linear-gradient(90deg,
    var(--t-bleu) 0 25%, var(--t-cyan) 25% 50%, var(--t-violet) 50% 75%, var(--t-vert) 75% 100%);
}

.etape {
  padding: 30px 26px 32px;
  border-left: 1px solid var(--bordure);
  display: flex; flex-direction: column; gap: 12px;
}
.etape:first-of-type { border-left: 0; }
.etape[data-teinte="bleu"]   { --teinte: var(--t-bleu); }
.etape[data-teinte="cyan"]   { --teinte: var(--t-cyan); }
.etape[data-teinte="violet"] { --teinte: var(--t-violet); }
.etape[data-teinte="vert"]   { --teinte: var(--t-vert); }

.etape-numero {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--teinte); color: #ffffff;
  font-size: .78rem; font-weight: 700; letter-spacing: .5px;
}
:root[data-theme="sombre"] .etape-numero { color: #06101f; }
.etape-icone { width: 28px; height: 28px; color: var(--teinte); }
.etape h3 { text-transform: uppercase; letter-spacing: .09em; font-size: 1rem; }
.etape p { margin: 0; color: var(--texte-doux); font-size: .95rem; }

/* ─────────────────────────────  Secteurs  ─────────────────────────── */

.grille-secteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.secteur {
  position: relative; overflow: hidden;
  border-radius: var(--rayon-l); padding: 32px 28px 34px; min-height: 300px;
  display: flex; flex-direction: column; gap: 14px;
  color: #ffffff; box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition);
}
.secteur:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.secteur h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .12em; }
.secteur h3::after {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 2px;
  background: rgb(255 255 255 / 65%); margin-top: 14px;
}
.secteur p { margin: 0; color: rgb(255 255 255 / 82%); font-size: .95rem; }
.secteur > * { position: relative; }
.secteur-icone { width: 34px; height: 34px; }
/* Glyphe géant en filigrane, comme sur la plaquette. */
.secteur-filigrane {
  position: absolute; right: -34px; top: 10px;
  width: 210px; height: 210px; opacity: .11; color: #ffffff; pointer-events: none;
}

.secteur-sante       { background: linear-gradient(165deg, #2f6fe8 0%, #123a86 60%, #0d2a63 100%); }
.secteur-industrie   { background: linear-gradient(165deg, #7d54d8 0%, #4b2a92 62%, #331d69 100%); }
.secteur-agriculture { background: linear-gradient(165deg, #5aa347 0%, #2f6a2a 60%, #1f4a1f 100%); }

/* ─────────────────────────────  Atouts  ───────────────────────────── */

.grille-atouts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }

.atout {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 24px 20px 26px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--transition), transform var(--transition);
}
.atout:hover { border-color: var(--bleu); transform: translateY(-3px); }
.atout .icone { width: 28px; height: 28px; color: var(--bleu-texte); }
.atout h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }
.atout h3::after {
  content: ""; display: block; width: 32px; height: 2px; border-radius: 2px;
  background: var(--bleu); margin-top: 12px;
}
.atout p { margin: 0; color: var(--texte-doux); font-size: .9rem; }

/* ─────────────────────────  Appel à l'action  ─────────────────────── */

.appel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(var(--rayon-l), 3vw, 30px);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 66px);
  color: #ffffff; margin-bottom: 26px;
}
.appel-fond {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 120% at 88% 25%, rgb(51 102 255 / 55%) 0%, transparent 60%),
    linear-gradient(150deg, #071026 0%, #0b1c3f 55%, #0a2352 100%);
}
.appel-fond::after {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background-image:
    linear-gradient(rgb(140 175 255 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(140 175 255 / 8%) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(100% 100% at 85% 30%, #000 0%, transparent 70%);
}
.appel h2 { color: #ffffff; }
.appel .accentue { color: #6f9bff; }
.appel p { max-width: 34rem; color: #c2cee6; margin: 22px 0 0; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ─────────────────────────────  Contact  ──────────────────────────── */

.grille-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.fiche-contact {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 22px 20px; text-decoration: none; color: var(--texte);
  transition: border-color var(--transition), transform var(--transition);
}
a.fiche-contact:hover { border-color: var(--bleu); transform: translateY(-3px); }
.fiche-contact .icone { color: var(--bleu-texte); margin-bottom: 4px; }
.fiche-contact b { font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--texte-doux); }
.fiche-contact span { font-size: .98rem; font-weight: 600; line-height: 1.45; }

/* ──────────────────────────────  Pied  ────────────────────────────── */

.pied { background: var(--nuit); color: #b9c6e0; padding: 54px 0 26px; }
.pied-grille {
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start;
  padding-bottom: 26px; border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.pied-marque { display: flex; gap: 14px; align-items: center; }
.pied-marque img { border-radius: 10px; }
.pied-marque p { margin: 0; font-size: .92rem; line-height: 1.5; }
.pied-marque strong { color: #ffffff; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-liens a {
  color: #b9c6e0; text-decoration: none; font-size: .92rem; font-weight: 550;
  transition: color var(--transition);
}
.pied-liens a:hover { color: #ffffff; }
.pied-bas { padding-top: 20px; color: #7f8daa; font-size: .82rem; }

/* ─────────────────────  Pages de texte (mentions, 404)  ───────────── */

.page-texte { padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); }
.page-texte .conteneur { max-width: 780px; }
.page-texte h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin-bottom: 10px; }
.page-texte h2 {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texte-doux); margin: 40px 0 12px;
}
.page-texte p, .page-texte li { color: var(--texte-doux); }
.page-texte p { margin: 0 0 14px; }
.page-texte ul { margin: 0 0 14px; padding-left: 22px; }
.page-texte strong { color: var(--texte); font-weight: 650; }
.page-texte .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-texte .bouton-fantome { color: var(--texte); border-color: var(--bordure-forte); }
.page-texte .bouton-fantome:hover { background: var(--surface-2); border-color: var(--bleu); }
.a-completer {
  background: color-mix(in srgb, var(--bleu) 12%, transparent);
  color: var(--bleu-texte); padding: 1px 7px; border-radius: 6px; font-weight: 650;
}

/* ────────────────────────  Apparition à la lecture  ───────────────── */

.a-reveler { opacity: 0; transform: translateY(18px); }
.revele {
  opacity: 1; transform: none;
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .a-reveler { opacity: 1; transform: none; }
  .bouton:hover, .offre:hover, .secteur:hover, .atout:hover, a.fiche-contact:hover { transform: none; }
}

/* ─────────────────────────────  Adaptatif  ────────────────────────── */

@media (max-width: 1120px) {
  .grille-atouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .banniere-visuel { grid-template-columns: minmax(0, 1fr); }
  .chaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .banniere-grille { grid-template-columns: minmax(0, 1fr); }
  .banniere-visuel { max-width: 620px; }
  .grille-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etape:nth-of-type(3) { border-left: 0; }
  .etape:nth-of-type(n + 3) { border-top: 1px solid var(--bordure); }
  .grille-secteurs { grid-template-columns: minmax(0, 1fr); }
  .secteur { min-height: 0; }
  .grille-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bascule du menu : sous cette largeur, la navigation devient un panneau. */
@media (max-width: 900px) {
  :root { --h-entete: 64px; }
  .menu-bouton { display: inline-grid; }
  .navigation {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 22px 20px;
    background: var(--fond); border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre);
  }
  .navigation.ouvert { display: flex; }
  .navigation > a { padding: 12px 14px; border-radius: 10px; font-size: 1rem; }
  .bouton-connexion { margin: 8px 0 0; justify-content: center; }

  /* Panneau déroulé : il a son propre fond clair, le lettrage repasse
     en couleurs normales même quand l'en-tête est en transparence. */
  body.accueil .entete:not(.pose) .navigation.ouvert > a { color: var(--texte-doux); }
  body.accueil .entete:not(.pose) .navigation.ouvert > a:hover,
  body.accueil .entete:not(.pose) .navigation.ouvert > a.actif { color: var(--texte); background: var(--surface-2); }
  body.accueil .entete:not(.pose) .navigation.ouvert .bouton-connexion {
    color: var(--sur-bleu) !important; background: var(--bleu);
  }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .conteneur { width: min(var(--conteneur), 100% - 32px); }
  .grille-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marque-texte small { display: none; }
  .banniere-actions .bouton, .appel-actions .bouton { flex: 1 1 auto; }
}

@media (max-width: 520px) {
  .grille-offres, .etapes, .grille-atouts, .grille-contact { grid-template-columns: minmax(0, 1fr); }
  .etape { border-left: 0; }
  .etape:nth-of-type(n + 2) { border-top: 1px solid var(--bordure); }
  .chaine { grid-template-columns: minmax(0, 1fr); }
  .marque-texte strong { font-size: .88rem; }
}