/* Emperiia. Un site vitrine classique et propre : fond blanc, titres centrés, photos couleur, une couleur de marque. */
/* Montserrat et Inter, servies par le site lui-même : aucune requête vers un service tiers. Latin et latin étendu. */
/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat, latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat, latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat, latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat, latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat, latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat, latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --marine: #19203B; --marine-2: #232C4E;
  --bleu: #0697FA; --bleu-2: #0A7BD0; --bleu-clair: #EAF4FE;
  --encre: #1B2030; --texte: #3F4557; --gris: #6F7686; --gris-2: #B3B8C4;
  --trait: #E6E8EE; --fond: #F7F8FA; --blanc: #FFFFFF;
  --display: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --corps: "Inter", -apple-system, "Segoe UI", sans-serif;
  --l: 1180px; --gouttiere: clamp(20px, 4vw, 40px); --r: 6px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); color: var(--texte); font: 17px/1.65 var(--corps); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--marine); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 4vw, 50px); font-weight: 700; line-height: 1.12; }
h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.conteneur { max-width: var(--l); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: clamp(56px, 7vw, 96px); }
.section--gris { background: var(--fond); }
.section--marine { background: var(--marine); color: #DDE2EE; }
.section--marine h2, .section--marine h3 { color: var(--blanc); }
.titre { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); }
.titre h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--bleu); margin: 18px auto 0; border-radius: 2px; }
.section--marine .titre h2::after { background: var(--blanc); }
.titre p { margin-top: 18px; font-size: 18px; color: var(--gris); }
.section--marine .titre p { color: #C9D0E3; }
.titre--gauche { text-align: left; margin-inline: 0; }
.titre--gauche h2::after { margin-inline: 0; }
.intro { font-size: 18px; color: var(--gris); max-width: 62ch; }

/* boutons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font: 600 15px/1 var(--display); border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.btn--plein { background: var(--marine); color: var(--blanc); }
.btn--plein:hover { background: var(--marine-2); }
.btn--bleu { background: var(--bleu); color: var(--blanc); }
.btn--bleu:hover { background: var(--bleu-2); }
.btn--contour { border-color: var(--marine); color: var(--marine); }
.btn--contour:hover { background: var(--marine); color: var(--blanc); }
.btn--blanc { background: var(--blanc); color: var(--marine); }
.btn--blanc:hover { background: #E9ECF3; }
.btn--contour-blanc { border-color: rgba(255,255,255,.7); color: var(--blanc); }
.btn--contour-blanc:hover { background: var(--blanc); color: var(--marine); }
.btn svg { width: 16px; height: 16px; }
.lien { color: var(--bleu); font: 600 15px/1 var(--display); display: inline-flex; align-items: center; gap: 8px; }
.lien svg { width: 14px; height: 14px; transition: transform .15s; }
.lien:hover svg { transform: translateX(3px); }

/* en-tête blanc, fixe */
.entete { position: sticky; top: 0; z-index: 20; background: var(--blanc); border-bottom: 1px solid var(--trait); }
.entete .conteneur { display: flex; align-items: center; gap: 28px; height: 80px; }
.entete .logo img { height: 52px; width: auto; }
.entete .logo .compact { display: none; }
.nav { display: flex; gap: 28px; margin-left: auto; font: 600 14px/1 var(--display); color: var(--marine); }
.nav a { padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color .15s; }
.nav a:hover, .nav a[aria-current] { border-color: var(--bleu); }
.entete .langue { font: 600 13px/1 var(--display); color: var(--gris); display: flex; gap: 10px; }
.entete .langue b { color: var(--marine); }
.entete .btn { padding: 11px 18px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--marine); margin-left: auto; cursor: pointer; place-items: center; }
.burger .fermer, .menu-ouvert .burger .ouvrir { display: none; }
.menu-ouvert .burger .fermer { display: block; }
@media (max-width: 1024px) {
  .nav, .entete .langue, .entete .btn { display: none; } .burger { display: grid; }
  /* le menu mobile : un panneau sous l'en-tête */
  .entete.menu-ouvert .nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 4px var(--gouttiere) 24px; background: var(--blanc); color: var(--marine); border-bottom: 1px solid var(--trait); box-shadow: 0 18px 30px rgba(25,32,59,.12); max-height: calc(100vh - 80px); overflow-y: auto; }
  .entete.menu-ouvert .nav a { padding: 16px 0; font-size: 17px; border-bottom: 1px solid var(--trait); }
  .entete.menu-ouvert .nav a[aria-current] { color: var(--bleu); border-color: var(--trait); }
  .entete.menu-ouvert .nav .nav-appel { display: block; margin-top: 20px; padding: 14px 18px; border: 0; border-radius: var(--r); background: var(--bleu); color: var(--blanc); text-align: center; }
}
.nav .nav-appel { display: none; }
@media (max-width: 480px) { .entete .logo .complet { display: none; } .entete .logo .compact { display: block; height: 36px; } .entete .conteneur { height: 68px; } }
/* sur l'accueil, l'en-tête est transparent au-dessus du hero et devient blanc au défilement */
.entete .logo .blanc { display: none; }
.entete--transparente { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.entete--transparente:not(.plein) .logo .complet:not(.blanc) { display: none; }
.entete--transparente:not(.plein) .logo .complet.blanc { display: block; }
.entete--transparente:not(.plein) .nav { color: var(--blanc); }
.entete--transparente:not(.plein) .nav a:hover, .entete--transparente:not(.plein) .nav a[aria-current] { border-color: var(--blanc); }
.entete--transparente:not(.plein) .langue { color: rgba(255,255,255,.65); }
.entete--transparente:not(.plein) .langue b { color: var(--blanc); }
.entete--transparente:not(.plein) .btn--plein { background: transparent; border-color: rgba(255,255,255,.75); color: var(--blanc); }
.entete--transparente:not(.plein) .btn--plein:hover { background: var(--blanc); color: var(--marine); }
.entete--transparente:not(.plein) .burger { color: var(--blanc); }
.entete--transparente.plein { background: var(--blanc); border-bottom-color: var(--trait); box-shadow: 0 6px 24px rgba(25,32,59,.06); }
.entete--transparente ~ .hero .hero-contenu { padding-top: calc(clamp(72px, 9vw, 120px) + 80px); }
@media (max-width: 480px) { .entete--transparente:not(.plein) .logo .complet.blanc { display: none; } .entete--transparente:not(.plein) .logo .compact:not(.blanc) { display: none; } .entete--transparente:not(.plein) .logo .compact.blanc { display: block; height: 36px; } .entete--transparente ~ .hero .hero-contenu { padding-top: calc(72px + 68px); } }

/* hero : un diaporama d'arrière-plan, une image par marque et son savoir-faire ; le plateau des marques à cheval sur le bas */
.hero { position: relative; background: var(--marine); color: var(--blanc); overflow: hidden; --duree: 6000ms; }
.hero-fond { position: absolute; inset: 0; }
.hero-fond .diapo { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-fond .diapo.actif { opacity: 1; }
.hero-fond .diapo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transform: scale(1); }
.hero-fond .diapo.actif img { animation: hero-zoom 8s ease-out forwards; }
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25,32,59,.94) 0%, rgba(25,32,59,.84) 36%, rgba(25,32,59,.38) 68%, rgba(25,32,59,.18) 100%), linear-gradient(180deg, rgba(25,32,59,0) 55%, rgba(25,32,59,.6) 100%); }
.hero .conteneur { position: relative; }
.hero-contenu { max-width: 760px; padding-block: clamp(72px, 9vw, 120px) clamp(104px, 12vw, 160px); }
.hero .surtitre { display: inline-flex; align-items: center; gap: 12px; font: 600 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #BFD9F5; margin-bottom: 26px; }
.hero .surtitre::before { content: ""; width: 28px; height: 3px; background: var(--bleu); border-radius: 2px; }
.hero h1 { color: var(--blanc); font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.012em; }
.hero h1 em { font-style: normal; color: #7FC6FF; }
.hero .intro { color: #D5DCEC; margin-top: 24px; max-width: 56ch; font-size: 18px; }
.hero .gestes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
/* la légende : le savoir-faire de la marque affichée, et cinq jalons qui se remplissent */
.hero-legende { position: absolute; right: var(--gouttiere); bottom: 96px; width: 300px; }
.savoir-faire { position: relative; height: 62px; }
.savoir-faire .sf { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.savoir-faire .sf.actif { opacity: 1; transform: none; pointer-events: auto; }
.savoir-faire .sf img { --hl: 22px; flex: 0 0 auto; }
.savoir-faire .sf span { font: 500 13px/1.4 var(--corps); color: #DDE2EE; border-left: 1px solid rgba(255,255,255,.3); padding-left: 14px; }
.jalons { display: flex; gap: 6px; margin-top: 14px; }
.jalons button { flex: 1; height: 18px; padding: 7px 0; background: none; border: 0; cursor: pointer; }
.jalons button i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; position: relative; }
.jalons button i::after { content: ""; position: absolute; inset: 0; background: var(--blanc); transform: scaleX(0); transform-origin: left; }
.jalons button[aria-selected="true"] i::after { animation: jalon var(--duree) linear forwards; }
.hero.pause .jalons button[aria-selected="true"] i::after { animation-play-state: paused; }
.jalons button:hover i { background: rgba(255,255,255,.5); }
.jalons button:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; border-radius: 4px; }
@keyframes jalon { to { transform: scaleX(1); } }
.plateau a { position: relative; }
.plateau a::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; background: var(--bleu); transform: scaleX(0); transition: transform .3s ease; }
.plateau a.actif::after { transform: scaleX(1); }
@media (max-width: 1100px) { .hero-legende { position: static; width: auto; margin: -64px 0 88px; } }
@media (prefers-reduced-motion: reduce) { .hero-fond .diapo.actif img { animation: none; } .hero-fond .diapo { transition: none; } .jalons button[aria-selected="true"] i::after { animation: none; transform: scaleX(1); } }
.plateau { position: relative; z-index: 2; margin-top: -68px; }
.plateau .conteneur > div { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: 0 24px 60px rgba(25,32,59,.14); display: flex; align-items: stretch; }
.plateau .legende { display: flex; flex-direction: column; justify-content: center; padding: 22px 28px; border-right: 1px solid var(--trait); font: 500 13px/1.4 var(--corps); color: var(--gris); min-width: 190px; }
.plateau .legende b { display: block; font: 600 15px/1.3 var(--display); color: var(--marine); }
.plateau a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 26px 16px; border-right: 1px solid var(--trait); transition: background .15s; }
.plateau a:last-child { border-right: 0; }
.plateau a:hover { background: var(--fond); }
.plateau img { --hl: 26px; width: auto; }
@media (max-width: 900px) { .plateau .conteneur > div { flex-wrap: wrap; } .plateau .legende { width: 100%; border-right: 0; border-bottom: 1px solid var(--trait); } .plateau a { flex: 1 1 33%; border-bottom: 1px solid var(--trait); } .plateau a:nth-last-child(-n+2) { border-bottom: 0; } }


/* les marques : un bloc par société, photo et texte alternés */
.marque-bloc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(32px, 4vw, 56px); }
.marque-bloc + .marque-bloc { border-top: 1px solid var(--trait); }
.marque-bloc:nth-child(even) figure { order: 2; }
.marque-bloc figure { margin: 0; }
.marque-bloc figure img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
.marque-bloc .logo { --hl: 30px; width: auto; margin-bottom: 18px; }
.marque-bloc h3 { font-size: 24px; margin-bottom: 12px; }
.marque-bloc p { color: var(--texte); }
.marque-bloc .faits { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--gris); }
.marque-bloc .faits li { display: flex; gap: 10px; align-items: baseline; }
.marque-bloc .faits li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); flex: 0 0 auto; position: relative; top: -2px; }
.marque-bloc .liens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 22px; }
.marque-bloc .lien--ext { color: var(--gris); }
.marque-bloc .lien--ext:hover { color: var(--bleu); }
.marque-bloc .lien--ext:hover svg { transform: none; }
@media (max-width: 860px) { .marque-bloc { grid-template-columns: 1fr; } .marque-bloc:nth-child(even) figure { order: 0; } }

/* les chiffres et la carte des implantations */
.chiffres-section { background: radial-gradient(ellipse 70% 60% at 50% 0%, #26305A 0%, var(--marine) 70%); }
.mappemonde { position: relative; }
.mappemonde .plan { position: relative; -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 58%, transparent 100%); }
.mappemonde .fond { width: 100%; height: auto; display: block; }
.mappemonde .points { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font: 500 13px/1 var(--display); }
.mappemonde .ville { cursor: pointer; outline: none; }
.mappemonde .ville .halo { fill: var(--bleu); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mappemonde .ville .anneau { fill: var(--marine); stroke: var(--bleu); stroke-width: 2; transition: r .15s, fill .15s; }
.mappemonde .ville .coeur { fill: var(--blanc); transition: r .15s; }
.mappemonde .ville text { fill: #C9D2EA; paint-order: stroke; stroke: var(--marine); stroke-width: 4px; stroke-linejoin: round; transition: fill .15s; }
.mappemonde .ville:hover .anneau, .mappemonde .ville:focus-visible .anneau, .mappemonde .ville[aria-selected="true"] .anneau { fill: var(--bleu); r: 11; }
.mappemonde .ville:hover text, .mappemonde .ville[aria-selected="true"] text { fill: var(--blanc); }
.mappemonde .ville[aria-selected="true"] .halo { animation: onde 2s ease-out infinite; }
.mappemonde .pays.attenue .ville { opacity: .3; }
@keyframes onde { 0% { transform: scale(.5); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }
.mappemonde .ville-fiche { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; grid-template-areas: "pays desc soc" "nom desc soc"; gap: 2px 32px; align-items: center; margin-top: 8px; background: var(--blanc); color: var(--texte); border-radius: var(--r); padding: 18px 24px 18px 28px; }
.mappemonde .ville-fiche::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bleu); border-radius: var(--r) 0 0 var(--r); }
.mappemonde .ville-fiche b { grid-area: nom; align-self: start; display: block; font: 700 22px/1.2 var(--display); color: var(--marine); }
.mappemonde .ville-fiche .pays-nom { grid-area: pays; align-self: end; font: 600 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); display: block; margin-bottom: 4px; }
.mappemonde .ville-fiche p { grid-area: desc; font-size: 14px; color: var(--gris); margin: 0; max-width: 56ch; }
.mappemonde .ville-fiche .societes { grid-area: soc; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: flex-end; max-width: 320px; }
.mappemonde .ville-fiche .societes img { --hl: 15px; width: auto; }
.pays-liste { position: absolute; left: 0; top: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 46%; }
.pays-liste button { font: 600 13px/1 var(--display); color: #DDE2EE; background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.pays-liste button:hover { border-color: var(--blanc); color: var(--blanc); }
.pays-liste button[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.pays-liste button small { font-weight: 500; opacity: .75; margin-left: 6px; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.14); }
.chiffres > div { padding: 32px 28px 8px; border-left: 1px solid rgba(255,255,255,.14); }
.chiffres > div:first-child { border-left: 0; padding-left: 0; }
.chiffres b { display: block; font: 700 clamp(44px, 4.6vw, 64px)/1 var(--display); color: var(--blanc); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.chiffres b small { font-size: .4em; font-weight: 600; margin-left: 6px; color: var(--bleu); }
.chiffres .libelle { display: block; margin-top: 14px; font: 600 15px/1.3 var(--display); color: var(--blanc); }
.chiffres .detail { display: block; margin-top: 4px; font-size: 14px; color: #A9B2CC; }
@media (max-width: 960px) { .mappemonde .ville-fiche { grid-template-columns: 1fr; grid-template-areas: "pays" "nom" "desc" "soc"; gap: 6px; } .mappemonde .ville-fiche .societes { justify-content: flex-start; } .pays-liste { position: static; max-width: none; margin-bottom: 14px; } .mappemonde .points text { display: none; } .chiffres { grid-template-columns: 1fr 1fr; } .chiffres > div { padding: 24px 20px 16px; } .chiffres > div:nth-child(odd) { border-left: 0; padding-left: 0; } }
@media (max-width: 480px) { .chiffres { grid-template-columns: 1fr; } .chiffres > div { border-left: 0; padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .mappemonde .ville[aria-selected="true"] .halo { animation: none; } }

/* la vision */
.vision { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.vision blockquote { margin: 0; font: 600 clamp(20px, 2vw, 26px)/1.45 var(--display); color: var(--blanc); }
.vision .texte { margin-top: 20px; color: #C9D0E3; }
.vision .auteur { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.vision .auteur img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid rgba(255,255,255,.4); }
.vision .auteur b { display: block; font: 600 15px/1.3 var(--display); color: var(--blanc); }
.vision .auteur span { font-size: 14px; color: #A9B2CC; }
.vision figure { margin: 0; }
.vision figure img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 860px) { .vision { grid-template-columns: 1fr; } }

/* l'histoire : une frise que l'on parcourt, une étape à la fois */
.histoire { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.frise { list-style: none; margin: 0; padding: 0; position: relative; }
.frise::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: 18px; width: 2px; background: var(--trait); }
.frise button { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 18px; align-items: start; width: 100%; text-align: left; background: none; border: 0; padding: 12px 0; cursor: pointer; font-family: var(--corps); }
.frise button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--gris-2); margin: 7px 0 0 4px; transition: background .15s, border-color .15s, box-shadow .15s; }
.frise b { display: block; font: 700 20px/1.1 var(--display); color: var(--gris); transition: color .15s, font-size .15s; }
.frise span { display: block; grid-column: 2; font-size: 14px; color: var(--gris); margin-top: -2px; }
.frise button:hover b { color: var(--marine); }
.frise button[aria-selected="true"]::before { background: var(--bleu); border-color: var(--bleu); box-shadow: 0 0 0 4px var(--bleu-clair); }
.frise button[aria-selected="true"] b { color: var(--bleu); font-size: 28px; }
.frise button[aria-selected="true"] span { color: var(--texte); }
.frise button:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 4px; }
.etapes { position: relative; }
.etape { display: none; }
.etape[data-active] { display: block; animation: fondu .45s ease-out; }
@keyframes fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.etape figure { position: relative; margin: 0; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden; background: var(--marine); }
.etape figure img { width: 100%; height: 100%; object-fit: cover; }
.etape figure .annee { position: absolute; left: 24px; bottom: 16px; font: 700 clamp(44px, 6vw, 80px)/1 var(--display); color: var(--blanc); opacity: .92; letter-spacing: -.02em; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.etape figure .panneau { width: 100%; height: 100%; display: grid; place-items: center; }
.etape figure .panneau img { width: min(52%, 360px); height: auto; }
.etape .texte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; padding-top: 22px; }
.etape h3 { font-size: 24px; }
.etape p { margin-top: 8px; color: var(--gris); max-width: 58ch; }
.etape .societes { display: flex; gap: 18px; align-items: center; padding-top: 6px; }
.etape .societes img { --hl: 19px; width: auto; }
.commandes { display: flex; gap: 8px; margin-top: 26px; }
.commandes button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait); background: var(--blanc); color: var(--marine); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
.commandes button:hover { background: var(--marine); color: var(--blanc); }
.commandes button svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .histoire { grid-template-columns: minmax(0, 1fr); } .frise { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; } .frise::before { display: none; } .frise li { flex: 0 0 auto; } .frise button { grid-template-columns: 1fr; gap: 0; padding: 10px 14px; border: 1px solid var(--trait); border-radius: 999px; } .frise button::before { display: none; } .frise span { display: none; } .frise b, .frise button[aria-selected="true"] b { font-size: 16px; } .frise button[aria-selected="true"] { background: var(--bleu); border-color: var(--bleu); } .frise button[aria-selected="true"] b { color: var(--blanc); } .etape .texte { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .etape[data-active] { animation: none; } }


/* les secteurs */
.secteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.secteur { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/10; background: var(--marine); }
.secteur img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
a.secteur:hover img { transform: scale(1.04); }
a.secteur .nom::after { content: " →"; }
.secteur .nom { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 14px; color: var(--blanc); font: 600 17px/1.3 var(--display); background: linear-gradient(to top, rgba(25,32,59,.85), rgba(25,32,59,0)); }
.secteur .nom small { display: block; font: 400 13px/1.4 var(--corps); color: #DDE2EE; margin-top: 3px; }
@media (max-width: 860px) { .secteurs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .secteurs { grid-template-columns: 1fr; } }

/* les références */
.clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.clients div { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); height: 92px; display: flex; align-items: center; justify-content: center; padding: 18px 24px; }
.clients img { max-height: 44px; max-width: 130px; width: auto; height: auto; }

/* la rse */
.rse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rse article { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; }
.rse article > img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.rse article > div { padding: 22px 24px 26px; }
.rse h3 { font-size: 19px; margin-bottom: 10px; }
.rse p { font-size: 15px; color: var(--texte); }
.rse .partenaire { display: inline-block; margin-top: 14px; font: 600 13px/1 var(--display); color: var(--bleu); }
@media (max-width: 860px) { .rse { grid-template-columns: 1fr; } }

/* le contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact .coordonnees { display: grid; gap: 18px; margin-top: 26px; font-size: 15px; }
.contact .coordonnees b { display: block; font: 600 14px/1.3 var(--display); color: var(--marine); margin-bottom: 4px; }
.form { display: grid; gap: 14px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); }
.form label { display: grid; gap: 6px; font: 600 13px/1.3 var(--display); color: var(--marine); }
.form input, .form select, .form textarea { font: 15px/1.5 var(--corps); color: var(--encre); background: var(--blanc); border: 1px solid #CFD4DE; border-radius: 4px; padding: 11px 13px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--bleu); outline-offset: 0; border-color: var(--bleu); }
.form .deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .case { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font: 400 13px/1.5 var(--corps); color: var(--gris); }
.form .case input { width: 18px; height: 18px; margin-top: 2px; }
.form .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .form .deux-champs { grid-template-columns: 1fr; } }

/* le pied */
.pied { background: var(--marine); color: #C9D0E3; font-size: 15px; }
.pied .haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-block: 56px 40px; }
.pied img.logo { height: 42px; width: auto; }
.pied .pitch { margin-top: 18px; max-width: 34ch; line-height: 1.6; }
.pied h4 { font: 700 14px/1.3 var(--display); color: var(--blanc); margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied a:hover { color: var(--blanc); }
.pied .pays b { display: block; color: var(--blanc); font-weight: 600; font-size: 14px; margin-top: 8px; }
.pied .pays span { display: block; font-size: 13px; color: #A9B2CC; }
.pied .reseaux { display: flex; gap: 10px; margin-top: 20px; }
.pied .reseaux a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; color: #fff; }
.pied .reseaux a:hover { background: var(--bleu); }
.pied .reseaux svg { width: 16px; height: 16px; }
.pied .bas { border-top: 1px solid rgba(255,255,255,.12); }
.pied .bas .conteneur { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-block: 18px; font-size: 13px; color: #A9B2CC; }
.pied .bas nav { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 860px) { .pied .haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pied .haut { grid-template-columns: 1fr; } }

/* pages intérieures */
.bandeau { background: var(--fond); border-bottom: 1px solid var(--trait); }
.bandeau .conteneur { padding-block: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.bandeau .ariane { font: 600 13px/1 var(--display); color: var(--gris); display: flex; gap: 8px; margin-bottom: 18px; }
.bandeau .ariane a:hover { color: var(--marine); }
.bandeau .logo-marque { height: 46px; width: auto; margin-bottom: 18px; }
.bandeau figure { margin: 0; }
.bandeau figure img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 860px) { .bandeau .conteneur { grid-template-columns: 1fr; } }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: 24px; }
.carte b { display: block; font: 600 18px/1.3 var(--display); color: var(--marine); margin-bottom: 8px; }
.carte p { font-size: 15px; color: var(--texte); }
@media (max-width: 860px) { .cartes { grid-template-columns: 1fr 1fr; } }
.cartes--4 { grid-template-columns: repeat(4, 1fr); }
.cartes--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1024px) { .cartes--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cartes, .cartes--2, .cartes--4 { grid-template-columns: 1fr; } }
.agences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.agence { border-radius: var(--r); overflow: hidden; background: var(--blanc); border: 1px solid var(--trait); }
.agence img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.agence div { padding: 14px 16px 16px; }
.agence b { display: block; font: 600 15px/1.3 var(--display); color: var(--marine); }
.agence span { display: block; font-size: 13px; color: var(--gris); margin-top: 4px; line-height: 1.45; }
@media (max-width: 860px) { .agences { grid-template-columns: 1fr 1fr; } }
.direction { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.personne { text-align: center; }
.personne img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r); background: var(--marine); }
.personne .vide { display: grid; place-items: center; width: 100%; aspect-ratio: 4/5; border-radius: var(--r); background: var(--fond); border: 1px dashed var(--gris-2); color: var(--gris-2); font: 600 12px/1.3 var(--display); }
.personne b { display: block; margin-top: 12px; font: 600 15px/1.3 var(--display); color: var(--marine); }
.personne span { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; }
.direction--1, .direction--2, .direction--3, .direction--4 { grid-template-columns: repeat(auto-fit, 200px); justify-content: center; gap: 24px; }
@media (max-width: 900px) { .direction { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .direction { grid-template-columns: 1fr 1fr; } }
/* le formulaire de contact : le pot de miel et la ligne d'état */
.pot-de-miel { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.form-etat:empty { display: none; }
.form-etat { margin-top: 4px; font-size: 15px; line-height: 1.5; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--trait); background: var(--fond); color: var(--texte); }
.form-etat--ok { border-color: #BFE3C4; background: #F1F9F2; color: #1F6B32; }
.form-etat--erreur { border-color: #F0C9C9; background: #FDF3F3; color: #9B2C2C; }
.form button[type="submit"][disabled] { opacity: .6; pointer-events: none; }

.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.galerie--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
.galerie figcaption { margin-top: 8px; font-size: 13px; color: var(--gris); }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr; } }
.appel { background: var(--bleu-clair); border-radius: var(--r); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.appel h2 { font-size: clamp(22px, 2.4vw, 30px); }
.appel p { margin-top: 8px; color: var(--texte); }
@media (max-width: 760px) { .appel { grid-template-columns: 1fr; } }
.valeurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.valeurs div { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: 24px; }
.valeurs b { display: block; font: 700 18px/1.3 var(--display); color: var(--bleu); margin-bottom: 8px; }
.valeurs p { font-size: 15px; }
@media (max-width: 860px) { .valeurs { grid-template-columns: 1fr 1fr; } }
.fondateur { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.fondateur img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 50%; }
.fondateur .mot { margin: 20px 0 0; padding: 18px 22px; background: var(--fond); border-left: 4px solid var(--bleu); border-radius: 4px; font-size: 15px; color: var(--gris); }
@media (max-width: 760px) { .fondateur { grid-template-columns: 1fr; } .fondateur img { max-width: 260px; } }
.dossier { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dossier div { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: 24px; }
.dossier b { display: block; font: 600 18px/1.3 var(--display); color: var(--marine); margin-bottom: 8px; }
.dossier p { font-size: 15px; }
.dossier .etat { display: inline-block; margin-top: 12px; font: 600 12px/1 var(--display); color: var(--bleu); background: var(--bleu-clair); padding: 6px 10px; border-radius: 999px; }
@media (max-width: 760px) { .dossier { grid-template-columns: 1fr; } }
.rex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fiche { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; color: var(--encre); display: grid; grid-template-rows: auto 1fr; }
.fiche img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.fiche div { padding: 20px 22px 24px; }
.fiche .meta { display: block; font: 600 12px/1.4 var(--display); color: var(--bleu); margin-bottom: 8px; }
.fiche b { display: block; font: 600 17px/1.35 var(--display); color: var(--marine); margin-bottom: 8px; }
.fiche p { font-size: 14px; color: var(--gris); }
.fiche.a-venir { opacity: .7; }
.fiche.a-venir img { filter: grayscale(1); }
@media (max-width: 900px) { .rex { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rex { grid-template-columns: 1fr; } }
.pays-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pays-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: 24px; }
.pays-bloc:first-child { grid-column: 1 / -1; }
.pays-bloc:first-child ul { columns: 2; column-gap: 40px; }
.pays-bloc h3 { font-size: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--trait); margin-bottom: 6px; }
.pays-bloc ul { list-style: none; margin: 0; padding: 0; }
.pays-bloc li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); break-inside: avoid; align-items: start; }
.pays-bloc li:last-child { border-bottom: 0; }
.pays-bloc .mini { --hl: 12px; width: auto; margin-top: 4px; }
.pays-bloc b { display: block; font: 600 14px/1.35 var(--display); color: var(--marine); }
.pays-bloc span { display: block; font-size: 13px; color: var(--gris); line-height: 1.5; }
@media (max-width: 760px) { .pays-grille { grid-template-columns: 1fr; } .pays-bloc:first-child ul { columns: 1; } }

/* les logos des marques : ceux du portail, aux proportions du portail (Reisel 42, Ingeline 28, Avenir Ferro 38, Fineisel 40) */
img[src*="marque-"] { height: var(--hl, 28px); width: auto; }
img[src*="marque-reisel"] { height: calc(var(--hl, 28px) * 1.5); }
img[src*="marque-fineisel"] { height: calc(var(--hl, 28px) * 1.43); }
img[src*="marque-avenir-ferro"] { height: calc(var(--hl, 28px) * 1.36); }
img[src*="marque-actoran"] { height: calc(var(--hl, 28px) * 1.07); }
.bandeau .logo-marque { --hl: 34px; display: block; margin-bottom: 14px; }

/* la rse, développée : un article par partenaire */
.rse-plus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rse-plus article { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: 26px 28px 30px; }
.rse-plus .partenaire { display: inline-block; font: 600 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); margin-bottom: 12px; }
.rse-plus h3 { font-size: 19px; margin-bottom: 10px; }
.rse-plus p { font-size: 15px; color: var(--texte); }
@media (max-width: 860px) { .rse-plus { grid-template-columns: 1fr; } }

/* le site de la marque : un bandeau marine, le logo blanc, un bouton qui ouvre le site */
.site-marque { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.site-marque > img { --hl: 40px; }
.site-marque .surtitre { display: block; font: 600 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #7FC6FF; margin-bottom: 10px; }
.site-marque h2 { font-size: clamp(22px, 2.4vw, 30px); color: var(--blanc); }
.site-marque p { margin-top: 8px; color: #C9D0E3; max-width: 60ch; }
.site-marque .btn svg { width: 14px; height: 14px; }
.btn--contour svg { width: 14px; height: 14px; }
@media (max-width: 860px) { .site-marque { grid-template-columns: 1fr; } }
/* les partenaires RSE : leur logo */
.rse .partenaire { display: inline-flex; align-items: center; gap: 10px; }
.rse .partenaire img { height: 24px; width: auto; max-width: 160px; aspect-ratio: auto; object-fit: contain; }
.rse-plus .logo-partenaire { display: block; height: 26px; width: auto; margin-bottom: 16px; }
/* la page contact : la carte sur marine, les adresses en cartes avec un lien vers le plan */
#adresses .pays-grille .pays-bloc { border: 0; }
#adresses .pays-bloc h3 { color: var(--marine); }
.rse-plus .logo-partenaire[src*="day-one"] { height: 40px; }
.rse .partenaire img[src*="day-one"] { height: 30px; }
#adresses .pays-bloc h3 { display: flex; align-items: baseline; justify-content: space-between; }
#adresses .pays-bloc h3 small { font: 500 13px/1 var(--corps); color: var(--gris); }
.pays-bloc li { grid-template-columns: 48px 1fr auto; }
.pays-bloc .plan { font: 600 12px/1 var(--display); color: var(--bleu); display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--bleu-clair); border-radius: 999px; background: var(--bleu-clair); white-space: nowrap; margin-top: 2px; }
.pays-bloc .plan:hover { background: var(--bleu); color: var(--blanc); }
.pays-bloc .plan svg { width: 12px; height: 12px; }

/* les pages de texte : mentions légales, confidentialité */
.texte-long { max-width: 760px; margin: 0 auto; }
.texte-long h2 { font-size: 22px; margin: 40px 0 12px; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long p, .texte-long ul { margin: 0 0 14px; }
.texte-long ul { padding-left: 20px; }
.texte-long li { margin-bottom: 6px; }
.texte-long a { color: var(--bleu-2); text-decoration: underline; text-underline-offset: 2px; }
.texte-long .a-completer { background: #FFF4D6; padding: 0 4px; border-radius: 3px; }
.bandeau--court .conteneur { grid-template-columns: 1fr; }

/* le lien d'évitement, pour le clavier */
.evitement { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--marine); color: var(--blanc); padding: 10px 16px; border-radius: var(--r); font: 600 14px/1 var(--display); }
.evitement:focus { top: 12px; }

/* finitions:debut — ajouté par emperiia-finitions, ne pas modifier ici */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { height: auto; }
::selection { background: var(--bleu); color: var(--blanc); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 4px; }

/* sélecteur de langue */
.langue { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); font: 600 12px/1 var(--display); letter-spacing: .04em; }
.langue a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 999px; color: var(--gris); transition: background .15s, color .15s; }
.langue a:hover { color: var(--marine); }
.langue a[aria-current] { background: var(--fond); color: var(--marine); box-shadow: inset 0 0 0 1px var(--trait); }
.langue .drapeau { width: 18px; height: 13px; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(25,32,59,.14); flex: 0 0 auto; display: block; }
.entete .langue { display: inline-flex; gap: 2px; color: inherit; }
.entete .langue b { color: inherit; }
.entete--transparente:not(.plein) .langue { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.38); color: inherit; }
.entete--transparente:not(.plein) .langue a { color: rgba(255,255,255,.78); }
.entete--transparente:not(.plein) .langue a:hover { color: var(--blanc); }
.entete--transparente:not(.plein) .langue a[aria-current] { background: rgba(255,255,255,.20); color: var(--blanc); box-shadow: none; }
.nav .langue--menu { display: none; }
.langue--pied { background: transparent; border-color: rgba(255,255,255,.22); }
.pied .bas .langue--pied a { color: #A9B2CC; }
.pied .bas .langue--pied a:hover { color: var(--blanc); }
.pied .bas .langue--pied a[aria-current] { background: rgba(255,255,255,.12); color: var(--blanc); box-shadow: none; }
@media (max-width: 1024px) {
  .entete .conteneur > .langue { display: none; }
  .entete.menu-ouvert .nav .langue--menu { display: inline-flex; align-self: flex-start; margin-top: 22px; }
  .entete.menu-ouvert .nav .langue--menu a { padding: 9px 14px 9px 10px; font-size: 13px; border-bottom: 0; }
}

/* pied de page */
.pied .haut { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px 48px; padding-block: 64px 44px; }
.pied .marque .pitch { max-width: 36ch; }
.pied .marque .btn { margin-top: 24px; }
.pied ul a { display: inline-block; padding-block: 2px; transition: color .15s; }
.pied .bas a { transition: color .15s; }
.pied a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 3px; }
.pied .implantations { border-top: 1px solid rgba(255,255,255,.12); padding-block: 32px 40px; }
.pied .implantations ul { grid-template-columns: 2.4fr repeat(6, minmax(0, 1fr)); gap: 20px 28px; }
.pied .implantations b { display: block; color: var(--blanc); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.pied .implantations span { display: block; font-size: 13px; line-height: 1.55; color: #A9B2CC; }
.pied .bas .conteneur { align-items: center; }
.pied .bas nav { align-items: center; }
.pied .bas .haut-de-page { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1024px) {
  .pied .implantations ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied .implantations li:first-child { grid-column: span 2; }
}
@media (max-width: 860px) {
  .pied .haut { grid-template-columns: 1fr 1fr 1fr; }
  .pied .marque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pied .haut { grid-template-columns: 1fr 1fr; padding-block: 44px 32px; }
  .pied .implantations ul { grid-template-columns: 1fr 1fr; }
  .pied .implantations li:first-child { grid-column: 1 / -1; }
}

/* bandeau des pages intérieures : fond travaillé, image encadrée */
.bandeau:not(.bandeau--court) { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--blanc) 0%, var(--fond) 100%); }
.bandeau:not(.bandeau--court)::before { content: ""; position: absolute; inset: 0 0 0 52%; background-image: radial-gradient(rgba(25,32,59,.13) 1.1px, transparent 1.3px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 45%, #000 80%, transparent); pointer-events: none; }
.bandeau:not(.bandeau--court) .conteneur { position: relative; gap: clamp(32px, 5vw, 72px); }
.bandeau:not(.bandeau--court) figure { position: relative; }
.bandeau:not(.bandeau--court) figure::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1.5px solid var(--bleu); border-radius: var(--r); opacity: .45; }
.bandeau:not(.bandeau--court) figure::after { content: ""; position: absolute; left: -14px; top: 28px; width: 5px; height: 64px; border-radius: 3px; background: var(--bleu); }
.bandeau:not(.bandeau--court) figure img { position: relative; box-shadow: 0 26px 60px -18px rgba(25,32,59,.38); }
.bandeau .logo-marque { box-sizing: content-box; padding: 12px 18px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 6px 18px rgba(25,32,59,.06); margin-bottom: 22px; }
.bandeau h1 { text-wrap: balance; }
.titre h2, .appel h2 { text-wrap: balance; }
@media (max-width: 860px) {
  .bandeau:not(.bandeau--court)::before { display: none; }
  .bandeau:not(.bandeau--court) figure::before { inset: 10px -8px -10px 10px; }
  .bandeau:not(.bandeau--court) figure::after { display: none; }
}

/* chiffres : un nombre tient toujours sur une ligne */
.chiffres b { white-space: nowrap; font-size: clamp(34px, 3.7vw, 58px); }
.chiffres > div { position: relative; }
.chiffres > div::before { content: ""; position: absolute; top: -1px; left: 28px; width: 40px; height: 2px; background: var(--bleu); }
.chiffres > div:first-child::before { left: 0; }

/* cartes : pictogramme, relief au survol */
.carte, .valeurs > div, .dossier > div, .agence, .clients div { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.cartes > .carte:hover, .agence:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -14px rgba(25,32,59,.22); border-color: #D3D9E6; }
.clients div:hover { border-color: #D3D9E6; box-shadow: 0 8px 22px -12px rgba(25,32,59,.2); }
.picto { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--bleu-clair); color: var(--bleu-2); margin-bottom: 16px; }
.picto svg { width: 28px; height: 28px; }
.section--marine .picto { background: rgba(255,255,255,.10); color: #8CCBFF; }
.site-marque .btn, .appel .btn { white-space: nowrap; }

/* apparition douce au défilement (seulement si le script est actif) */
.anime .apparait { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.anime .apparait.vu { opacity: 1; transform: none; }
/* finitions:fin */