/* Charte AutoComplete : bleu nuit, sable, Poppins. Deux ambiances seulement. */

:root {
  --nuit: #0B1E45;
  --nuit-fonce: #061536;
  --nuit-carte: #142A52;
  --nuit-bord: #1E3A66;
  --sable: #E6CFAE;
  --or: #C9A97A;
  --blanc: #FFFFFF;
  --gris-fond: #F1F4F9;
  --gris-fond-2: #F7F9FC;
  --gris-bord: #E1E6EF;
  --gris-clair: #D5DCE8;
  --ardoise: #3D4A63;
  --ardoise-clair: #6B7891;

  --largeur: 1160px;
  --gouttiere: 24px;
  --rayon: 16px;
  --rayon-sm: 10px;
  --ombre: 0 1px 2px rgba(11, 30, 69, .04), 0 12px 32px -16px rgba(11, 30, 69, .18);
  --ombre-forte: 0 2px 4px rgba(11, 30, 69, .06), 0 28px 60px -28px rgba(11, 30, 69, .35);
  --transition: 240ms cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--ardoise);
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--nuit); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--nuit); text-decoration-color: var(--or); text-underline-offset: 3px; }
a:hover { color: var(--or); }

/* ---------- ossature ---------- */

.enveloppe { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }

.section { padding: 104px 0; position: relative; }
.section--serree { padding: 72px 0; }
.section--grise { background: var(--gris-fond-2); border-top: 1px solid var(--gris-bord); border-bottom: 1px solid var(--gris-bord); }
.section--nuit { background: var(--nuit); color: var(--gris-clair); }
.section--nuit h2, .section--nuit h3, .section--nuit h4 { color: var(--sable); }

.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--or); margin: 0 0 14px;
}
.surtitre::before { content: ""; width: 26px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--sable), var(--or)); }

.titre-section { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.015em; }
.chapo { margin-top: 18px; max-width: 62ch; font-size: clamp(17px, 1.5vw, 19px); color: var(--ardoise); }
.section--nuit .chapo { color: var(--gris-clair); }

.entete-section { max-width: 760px; margin-bottom: 52px; }

/* ---------- barre de navigation ---------- */

.barre {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.barre.est-posee { border-bottom-color: var(--gris-bord); background: rgba(255, 255, 255, .94); }
.barre__interieur { display: flex; align-items: center; gap: 28px; height: 74px; }
.barre__liens { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.barre__liens a { font-size: 14.5px; font-weight: 500; color: var(--nuit); text-decoration: none; }
.barre__liens a:hover { color: var(--or); }
.barre__liens a.bouton--plein { color: var(--blanc); }
.barre__liens a.bouton--plein:hover { color: var(--blanc); }
.barre__bascule { display: none; }

.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.marque__mot { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--nuit); }
.marque__mot span { color: var(--or); }

/* logotype OXLI : le « X » est le losange de la marque */
.oxli { display: inline-flex; align-items: center; font-weight: 800; letter-spacing: .01em; line-height: 1; }
.oxli svg { flex: none; margin: 0 -.08em; }

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

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton--plein { background: var(--nuit); color: var(--blanc); box-shadow: 0 10px 26px -12px rgba(11, 30, 69, .75); }
.bouton--plein:hover { background: #12294f; color: var(--blanc); transform: translateY(-2px); }
.bouton--sable { background: linear-gradient(120deg, var(--sable), var(--or)); color: var(--nuit); }
.bouton--sable:hover { color: var(--nuit); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(201, 169, 122, .9); }
.bouton--ligne { border-color: var(--gris-bord); color: var(--nuit); background: var(--blanc); }
.bouton--ligne:hover { border-color: var(--or); color: var(--nuit); transform: translateY(-2px); }
.section--nuit .bouton--ligne { background: transparent; border-color: var(--nuit-bord); color: var(--sable); }
.section--nuit .bouton--ligne:hover { border-color: var(--sable); }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- héros ---------- */

.heros {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, #0B1E45 0%, #08193a 55%, #061536 100%);
  color: var(--gris-clair);
  padding: 96px 0 108px;
}
.heros__halo {
  position: absolute; inset: -20% -10% auto auto; width: 900px; height: 900px; pointer-events: none;
  background: radial-gradient(circle at 60% 40%, rgba(201, 169, 122, .30), rgba(201, 169, 122, 0) 62%);
}
.heros__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.heros h1 { color: var(--blanc); font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.02em; }
.heros h1 em { font-style: normal; color: var(--sable); }
.heros__chapo { margin-top: 22px; font-size: clamp(17px, 1.6vw, 20px); color: var(--gris-clair); max-width: 54ch; }
.heros__accroche {
  margin-top: 20px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700;
  color: var(--sable); max-width: 46ch; text-wrap: balance;
}
.heros__etiquette {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; margin-bottom: 26px;
  border-radius: 999px; border: 1px solid var(--nuit-bord); background: rgba(20, 42, 82, .7);
  font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sable);
}
.heros__etiquette .pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--sable); box-shadow: 0 0 0 0 rgba(230, 207, 174, .7); animation: pulsation 2.6s infinite; }
@keyframes pulsation { 70% { box-shadow: 0 0 0 9px rgba(230, 207, 174, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 207, 174, 0); } }

.heros__faits {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 38px 0 0; padding-top: 26px; border-top: 1px solid var(--nuit-bord);
}
.heros__faits li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--gris-clair); }
.heros__faits li::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(230, 207, 174, .18);
  box-shadow: inset 0 0 0 1.5px var(--sable);
}

/* ---------- schéma de flux ---------- */

.schema-etroit { display: none; }

.schema { width: 100%; height: auto; }
.schema .bloc { fill: #0F2450; stroke: #23407096; stroke-width: 1.2; }
.schema .bloc-clair { fill: #FFFFFF; stroke: var(--gris-bord); stroke-width: 1.2; }
.schema .etiquette { font: 600 11px/1 'Poppins', Arial, sans-serif; fill: var(--gris-clair); }
.schema .etiquette-sombre { font: 600 11px/1 'Poppins', Arial, sans-serif; fill: var(--nuit); }
.schema .titre-zone { font: 700 10px/1 'Poppins', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; fill: var(--or); }
.schema .zone { fill: none; stroke: #2A4070; stroke-width: 1; stroke-dasharray: 5 4; }
.schema .lien { fill: none; stroke: var(--or); stroke-width: 1.4; stroke-opacity: .5; }
.schema .flux { fill: none; stroke: var(--sable); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 10 128; animation: circulation 3.4s linear infinite; }
@keyframes circulation { to { stroke-dashoffset: -138; } }
.schema .flux--2 { animation-delay: -.85s; }
.schema .flux--3 { animation-delay: -1.7s; }
.schema .flux--4 { animation-delay: -2.55s; }
.schema .flux--court { stroke-dasharray: 8 38; animation-duration: 1.9s; }
.schema .lien--retour { stroke: var(--gris-clair); stroke-opacity: .28; }
.schema .flux--retour { stroke: var(--gris-clair); stroke-width: 1.8; stroke-dasharray: 9 150; animation-duration: 4.6s; }
.legende-flux {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-size: 12.5px; font-weight: 500; color: #8FA0BF;
}
.legende-flux li { display: flex; align-items: center; gap: 9px; }
.legende-flux li::before { content: ""; width: 22px; height: 2px; border-radius: 1px; }
.legende-flux__aller::before { background: var(--sable); }
.legende-flux__retour::before { background: var(--gris-clair); opacity: .6; }

/* ---------- cas de connexion ---------- */

.cas { display: flex; flex-direction: column; }
.cas__paire { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cas__bout {
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--gris-fond); color: var(--nuit); border: 1px solid var(--gris-bord);
}
.cas__bout--cible { background: linear-gradient(120deg, var(--sable), var(--or)); border-color: transparent; }
.cas__fleche { display: flex; color: var(--or); }
.cas h3 { font-size: 18px; margin-bottom: 10px; }
.cas p { font-size: 14.5px; margin-bottom: 18px; }
.cas__canal {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gris-bord);
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--or);
}
.note { margin-top: 28px; font-size: 15px; color: var(--ardoise-clair); max-width: 70ch; }
.note a { font-weight: 600; }

/* ---------- constat en liste ---------- */

.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.constat { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.constat__ligne {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px;
  border-radius: var(--rayon); background: var(--gris-fond-2); border: 1px solid var(--gris-bord);
  border-left: 3px solid var(--sable);
  font-size: 15px; line-height: 1.6;
}
.constat__ligne strong { display: block; margin-bottom: 2px; }
.constat__ligne strong { color: var(--nuit); }
.constat__icone { flex: none; display: flex; color: var(--nuit); margin-top: 2px; }

/* ---------- cartes ---------- */

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

.carte {
  background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: var(--rayon);
  padding: 28px; box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: #cfd8e8; }
.carte h3 { font-size: 19px; margin-bottom: 10px; }
.carte p { font-size: 15px; color: var(--ardoise); }
.section--grise .carte { background: var(--blanc); }
.section--nuit .carte { background: var(--nuit-carte); border-color: var(--nuit-bord); box-shadow: none; }
.section--nuit .carte p { color: var(--gris-clair); }

.icone {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--gris-fond); color: var(--nuit);
}
.section--nuit .icone { background: rgba(230, 207, 174, .12); color: var(--sable); }
.icone svg { width: 22px; height: 22px; }

/* étapes numérotées */
.etape { position: relative; display: flex; flex-direction: column; }
.etape__numero { font-size: 22px; font-weight: 700; color: var(--or); line-height: 1; }
.etape__titre { margin-top: 6px; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nuit); }
.etape p { margin-top: 8px; font-size: 14.5px; color: var(--ardoise-clair); }
.etape__liste { list-style: none; padding: 0; margin: 16px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.etape__liste li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; font-weight: 500; color: var(--ardoise); }
.etape__liste svg { flex: none; width: 15px; height: 15px; margin-top: 3px; stroke: var(--nuit); }
.etape__retenir {
  margin-top: auto; padding: 10px 13px; border-radius: var(--rayon-sm); background: var(--gris-fond);
  border-left: 3px solid var(--sable); font-size: 13.5px; font-weight: 600; color: var(--nuit);
}

/* produit mis en avant */
.vedette { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding: 38px; }
.vedette__marque { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.vedette h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 12px; }
.vedette p { font-size: 16px; }
.vedette__points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.vedette__points li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--ardoise); }
.vedette__points svg { flex: none; width: 15px; height: 15px; margin-top: 4px; stroke: var(--or); }
.sous-titre-grille { margin: 60px 0 26px; max-width: 70ch; }
.sous-titre-grille h3 { font-size: clamp(20px, 2.1vw, 25px); letter-spacing: -.01em; }
.sous-titre-grille p { margin-top: 10px; font-size: 16px; color: var(--ardoise); }

/* produits */
.produit { display: flex; flex-direction: column; }
.produit__marque { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.produit__pastille { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, var(--nuit), #16305c); color: var(--sable); }
.produit__pastille svg { width: 23px; height: 23px; }
.produit__nom { display: block; font-size: 20px; font-weight: 700; color: var(--nuit); line-height: 1.1; }
.produit__role { display: block; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--or); }
.produit__liste { list-style: none; padding: 0; margin: 18px 0 auto; display: flex; flex-direction: column; gap: 9px; }
.produit__liste li { display: flex; gap: 9px; font-size: 14.5px; }
.produit__liste li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--or); }
.produit__lien { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--gris-bord); font-size: 14.5px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.produit__lien svg { transition: transform var(--transition); }
.produit:hover .produit__lien svg { transform: translateX(4px); }

/* chaîne de valeur */
.chaine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 46px; border: 1px solid var(--nuit-bord); border-radius: var(--rayon); overflow: hidden; }
.chaine__maillon { padding: 30px 26px; background: var(--nuit-carte); border-right: 1px solid var(--nuit-bord); position: relative; }
.chaine__maillon:last-child { border-right: 0; }
.chaine__maillon h3 { font-size: 17px; margin-bottom: 10px; }
.chaine__maillon p { font-size: 14.5px; color: var(--gris-clair); }
.chaine__verbe { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--or); margin-bottom: 12px; display: block; }

.appel {
  margin-top: 34px; padding: 24px 28px; border-radius: var(--rayon);
  background: var(--gris-fond); border: 1px solid var(--gris-bord);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.appel p { font-size: 16px; font-weight: 600; color: var(--nuit); max-width: 56ch; }
.appel .bouton { flex: none; }
.section--nuit .appel { background: var(--nuit-carte); border-color: var(--nuit-bord); }
.section--nuit .appel p { color: var(--sable); }

/* bandeau de conclusion */
.bandeau {
  margin-top: 52px; padding: 26px 32px; border-radius: var(--rayon);
  background: var(--nuit); color: var(--sable); font-size: clamp(17px, 2vw, 21px); font-weight: 700; text-wrap: balance;
}
.section--nuit .bandeau { background: linear-gradient(120deg, var(--sable), var(--or)); color: var(--nuit); }

/* engagements / garanties */
.garantie { display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--nuit-bord); }
.garantie:last-child { border-bottom: 1px solid var(--nuit-bord); }
.garantie__numero { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sable); color: var(--nuit); font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.garantie h3 { font-size: 17px; margin-bottom: 6px; }
.garantie p { font-size: 15px; color: var(--gris-clair); }

/* ---------- articles ---------- */

.article-carte { display: flex; flex-direction: column; text-decoration: none; }
.article-carte__meta { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--or); }
.article-carte h3 { font-size: 19px; margin: 12px 0 10px; }
.article-carte p { font-size: 14.5px; color: var(--ardoise-clair); }
.article-carte__suite { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--nuit); display: inline-flex; gap: 8px; align-items: center; }

.papier { max-width: 760px; margin: 0 auto; }
.papier__entete { padding: 64px 0 34px; border-bottom: 1px solid var(--gris-bord); margin-bottom: 40px; }
.papier__entete h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; }
.papier__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; font-size: 13.5px; color: var(--ardoise-clair); }
.papier__corps { padding-bottom: 80px; font-size: 17px; }
.papier__corps h2 { font-size: 25px; margin: 46px 0 14px; letter-spacing: -.01em; }
.papier__corps h3 { font-size: 19px; margin: 32px 0 10px; }
.papier__corps p { margin: 0 0 18px; }
.papier__corps ul, .papier__corps ol { margin: 0 0 20px; padding-left: 22px; }
.papier__corps li { margin-bottom: 8px; }
.papier__corps blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sable); font-weight: 600; color: var(--nuit); }
.papier__corps table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15px; }
.papier__corps th { background: var(--sable); color: var(--nuit); text-align: left; }
.papier__corps th, .papier__corps td { padding: 10px 13px; border: 1px solid var(--gris-bord); }
.papier__corps code { background: var(--gris-fond); padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.papier__corps hr { border: 0; border-top: 1px solid var(--gris-bord); margin: 40px 0; }

.fil { font-size: 13.5px; color: var(--ardoise-clair); padding-top: 26px; }
.fil a { text-decoration: none; }

/* ---------- formulaire ---------- */

.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.champ { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.champ label { font-size: 13.5px; font-weight: 600; color: var(--sable); }
.champ input, .champ textarea, .champ select {
  font-family: inherit; font-size: 15px; color: var(--blanc);
  background: rgba(20, 42, 82, .8); border: 1px solid var(--nuit-bord); border-radius: var(--rayon-sm);
  padding: 13px 15px; transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input::placeholder, .champ textarea::placeholder { color: #7A8AA8; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--sable); box-shadow: 0 0 0 3px rgba(230, 207, 174, .16); }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mention { font-size: 12.5px; color: #8494B0; margin-top: 14px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.etat-formulaire { margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--gris-clair); min-height: 1em; }
.etat-formulaire--reussi { color: var(--sable); }
.etat-formulaire--echoue { color: #F3B7A8; }
.formulaire button[disabled] { opacity: .6; cursor: progress; }

.contact__direct { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.contact__direct a { color: var(--sable); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }

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

.pied { background: var(--nuit-fonce); color: var(--gris-clair); padding: 64px 0 34px; }
.pied a { color: var(--gris-clair); text-decoration: none; font-size: 14.5px; }
.pied a:hover { color: var(--sable); }
.pied__grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
.pied h4 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sable); margin-bottom: 16px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pied__bas { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--nuit-bord); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 13px; color: #8494B0; }
.pied__marque { font-size: 14.5px; color: var(--gris-clair); max-width: 34ch; margin-top: 14px; }

.indice-defilement {
  display: none; align-items: center; gap: 8px; margin-top: -8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--or);
}
.section--nuit .indice-defilement { color: var(--sable); }

/* ---------- apparition ---------- */

.apparait { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }
.apparait.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apparait { opacity: 1; transform: none; transition: none; }
  .schema .flux { animation: none; stroke-dasharray: none; stroke-opacity: .75; }
  .schema .flux--retour { stroke-opacity: .5; }
  .heros__etiquette .pastille { animation: none; }
  .carte:hover, .bouton:hover { transform: none; }
}

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

@media (max-width: 1000px) {
  .barre__liens {
    position: fixed; inset: 74px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanc); border-bottom: 1px solid var(--gris-bord); padding: 8px 24px 20px;
    box-shadow: var(--ombre-forte); display: none;
  }
  .barre__liens.est-ouverte { display: flex; }
  .voile {
    position: fixed; inset: 0; z-index: 50; background: rgba(11, 30, 69, .45);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  body.menu-ouvert { overflow: hidden; }
  .barre__liens a { padding: 13px 0; border-bottom: 1px solid var(--gris-bord); font-size: 16px; }
  .barre__liens .bouton { margin-top: 14px; border-bottom: 0; }
  .barre__bascule {
    display: grid; place-items: center; margin-left: auto; width: 42px; height: 42px;
    border: 1px solid var(--gris-bord); border-radius: 11px; background: var(--blanc); cursor: pointer; color: var(--nuit);
  }
  .heros__grille { grid-template-columns: 1fr; gap: 42px; }
  .deux-colonnes { grid-template-columns: 1fr; gap: 34px; }
  .vedette { grid-template-columns: 1fr; gap: 28px; padding: 30px; }
  .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; gap: 36px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .chaine { grid-template-columns: 1fr; }
  .chaine__maillon { border-right: 0; border-bottom: 1px solid var(--nuit-bord); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .vedette__points { grid-template-columns: 1fr; }

  /* le schéma large est illisible en dessous de 720px : on passe à la variante verticale */
  .schema-large { display: none; }
  .schema-etroit { display: block; }

  /* densité : une landing ne doit pas demander vingt écrans de pouce */
  .section { padding: 56px 0; }
  .section--serree { padding: 44px 0; }
  .heros { padding: 52px 0 60px; }
  .entete-section { margin-bottom: 30px; }
  .grille { gap: 14px; }
  .carte { padding: 22px; }
  .etape p, .cas p { font-size: 14px; }
  .chapo { margin-top: 14px; }
  .bandeau { margin-top: 30px; padding: 20px 22px; }
  .sous-titre-grille { margin: 36px 0 18px; }
  .constat { gap: 10px; }
  .constat__ligne { padding: 16px 18px; font-size: 14.5px; }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }

  /* rangées de cartes : un défilement horizontal plutôt que dix écrans de pouce */
  .grille--defilante {
    display: flex; gap: 12px;
    margin: 0 calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 20px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .grille--defilante::-webkit-scrollbar { display: none; }
  .grille--defilante > * { flex: 0 0 82%; scroll-snap-align: start; }
  /* hors du champ de l'observateur : ces cartes doivent rester visibles */
  .grille--defilante .apparait { opacity: 1; transform: none; }
  .indice-defilement { display: flex; }
  .champ--duo { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; }
}