/* =========================================
   LOGO LES SULTANS - HEADER
   Une seule regle ici suffit : le header est
   partage par TOUTES les pages du site, donc
   ce bloc s'applique automatiquement partout
   sans rien ajouter aux autres fichiers CSS.
   ========================================= */

/* Reglages du logo : changer uniquement ces valeurs.
   --logo-w     : largeur (environ 2x l'ancienne taille de 250px,
                  reduite automatiquement sur les ecrans plus etroits)
   --logo-ratio : largeur / hauteur de l'image Les-Sultans.jpg
                  (220x80 = 2.75 ; a ajuster si l'image est differente) */
:root {
    --logo-w: clamp(220px, 35vw, 500px);
    --logo-ratio: 2.75;
    --logo-top: 14px;
    --logo-right: 24px;
}

/* Le header doit "contenir" le logo positionne
   en absolu, sinon le logo se positionnerait
   par rapport a toute la page. Le min-height reserve
   la place du logo pour qu'il ne chevauche pas le contenu. */
header {
    position: relative !important;
}

body > header {
    min-height: calc(var(--logo-top) + var(--logo-w) / var(--logo-ratio) + 12px);
}

/* Nom du club en haut du header, avant le menu.
   Le padding-right laisse la place au logo a droite.
   "body > header" : UNIQUEMENT le header du site, pas les
   balises <header> utilisees dans le contenu des pages
   (sinon le texte des pages disparait). */
body > header::before {
    content: "Club de motoneige Les Sultans - (772-12)";
    display: block;
    width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 18px calc(var(--logo-w) + var(--logo-right) + 20px) 10px 24px;

    color: var(--gold);
    font-size: clamp(1.2rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .5px;
}

.navbar-brand {
    position: absolute !important;
    top: var(--logo-top);
    right: var(--logo-right);
    z-index: 20;

    font-size: 0 !important;
    line-height: 0 !important;
}

/* "img" et pas seulement "img.logo" : Cassiopeia (Joomla 4/5)
   n'ajoute pas de classe "logo" sur l'image. */
.navbar-brand img {
    display: block !important;
    width: var(--logo-w) !important;
    max-width: none !important;
    height: auto !important;
}

/* Solution de secours si le theme n'insere pas
   de balise <img>, mais affiche le logo via une
   image de fond a la place. */
header .navbar-brand {
    background-image: url('/images/Les-Sultans.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: var(--logo-w);
    aspect-ratio: var(--logo-ratio);
}

/* Si une vraie balise <img> existe, pas de fond :
   evite d'afficher le logo en double. */
header .navbar-brand:has(img) {
    background-image: none;
    width: auto;
    aspect-ratio: auto;
}

/* Mobile : logo plus petit et un peu plus pres du bord */
@media (max-width: 650px) {
    :root {
        --logo-w: min(45vw, 220px);
        --logo-top: 10px;
        --logo-right: 14px;
    }

    body > header::before {
        padding-left: 14px;
        font-size: 1rem;
    }
}

:root{
  --navy:#0b1b33;
  --gold:#d9b15f;
  --ink:#e5e7eb;
  --muted:#9fa6b2;
}

/* WRAPPER */
.wrap{
  width:90%;
  max-width:1100px;
  margin:0 auto;
}

/* HERO AVEC BACKGROUND */
.agents-hero{
  position:relative;
  padding:140px 0 120px;
  background-image:
    linear-gradient(135deg,rgba(5,8,20,0.85),rgba(11,27,51,0.85)),
    url("/images/agents2.png");
  background-size:cover;
  background-position:center;
  color:#fff;
}

.agents-hero .kicker{
  color:var(--gold);
  font-size:15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.agents-hero h2{
  font-size:clamp(42px,5vw,70px);
  line-height:.95;
  letter-spacing:-3px;
  margin-bottom:22px;
}

.agents-hero h2 span{
  color:var(--gold);
}

.agents-hero .lead{
  max-width:640px;
  font-size:18px;
  opacity:.9;
  margin-bottom:26px;
}

.link-center{
  margin-top:20px;
}

.custom-link{
  color:var(--gold);
  font-weight:bold;
  padding:6px 12px;
  border-radius:6px;
  transition:.3s;
}

.custom-link:hover{
  background:var(--gold);
  color:#000;
}

/* SECTION TABLE */
.agents-table-section{
  padding:80px 0 110px;
  background:radial-gradient(circle at top,#1b2a45 0,#050814 55%);
  color:#fff;
}

.section-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:34px;
}

/* TABLE MODERNE */
.agents-table{
  display:grid;
  gap:12px;
}

.agents-table .row{
  display:grid;
  grid-template-columns:1.2fr 1.4fr .8fr .8fr;
  padding:14px 18px;
  font-size:18px;
  background:rgba(255,255,255,0.05);
  border-radius:8px;
}

.agents-table .header{
  background:var(--gold);
  color:#000;
  font-weight:800;
}

.agents-table .row strong{
  color:var(--gold);
  font-weight:800;
}

/* TOLÉRANCE ZÉRO */
.zero-title{
  margin-top:50px;
  font-size:32px;
  font-weight:900;
  color:#ff4a4a;
  text-align:center;
}

.zero-red{
  text-align:center;
  font-size:20px;
  font-weight:900;
  color:#d9534f;
  margin-top:10px;
}

.zero-text{
  text-align:center;
  font-size:17px;
  color:var(--ink);
  margin-top:18px;
}

.zero-green{
  text-align:center;
  font-size:20px;
  font-weight:900;
  color:#28a745;
  margin-top:25px;
}

/* RESPONSIVE */
@media(max-width:800px){
  .agents-table .row{
    grid-template-columns:1fr;
    text-align:center;
  }
}


:root{
  --navy:#0b1b33;
  --gold:#d9b15f;
  --ink:#e5e7eb;
  --muted:#9fa6b2;
}

/* WRAPPER */
.wrap{
  width:90%;
  max-width:1100px;
  margin:0 auto;
}

/* HERO AVEC BACKGROUND */
.agents-hero{
  position:relative;
  padding:140px 0 120px;
  background-image:
    linear-gradient(135deg,rgba(5,8,20,0.85),rgba(11,27,51,0.85)),
    url("/images/agents2.png");
  background-size:cover;
  background-position:center;
  color:#fff;
}

.agents-hero .kicker{
  color:var(--gold);
  font-size:15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.agents-hero h2{
  font-size:clamp(42px,5vw,70px);
  line-height:.95;
  letter-spacing:-3px;
  margin-bottom:22px;
}

.agents-hero h2 span{
  color:var(--gold);
}

.agents-hero .lead{
  max-width:640px;
  font-size:24px;
  opacity:.9;
  margin-bottom:26px;
}

.link-center{
  margin-top:20px;
}

.custom-link{
  color:var(--gold);
  font-weight:bold;
  padding:6px 12px;
  border-radius:6px;
  transition:.3s;
}

.custom-link:hover{
  background:var(--gold);
  color:#000;
}

/* SECTION TABLE */
.agents-table-section{
  padding:80px 0 110px;
  background:radial-gradient(circle at top,#1b2a45 0,#050814 55%);
  color:#fff;
}

.section-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:34px;
}

/* TABLE MODERNE */
.agents-table{
  display:grid;
  gap:12px;
}

.agents-table .row{
  display:grid;
  grid-template-columns:1.2fr 1.4fr .8fr .8fr;
  padding:14px 18px;
  font-size:18px;
  background:rgba(255,255,255,0.05);
  border-radius:8px;
}

.agents-table .header{
  background:var(--gold);
  color:#000;
  font-weight:800;
}

.agents-table .row strong{
  color:var(--gold);
  font-weight:800;
}

/* TOLÉRANCE ZÉRO */
.zero-title{
  margin-top:50px;
  font-size:32px;
  font-weight:900;
  color:#ff4a4a;
  text-align:center;
}

.zero-red{
  text-align:center;
  font-size:20px;
  font-weight:900;
  color:#d9534f;
  margin-top:10px;
}

.zero-text{
  text-align:center;
  font-size:17px;
  color:var(--ink);
  margin-top:18px;
}

.zero-green{
  text-align:center;
  font-size:20px;
  font-weight:900;
  color:#28a745;
  margin-top:25px;
}

/* RESPONSIVE */
@media(max-width:800px){
  .agents-table .row{
    grid-template-columns:1fr;
    text-align:center;
  }
}

/* =========================================================
   LES SULTANS — DROITS D'ACCÈS 2026-2027
   ========================================================= */

.sultants-access {
    --access-navy: #071b28;
    --access-navy2: #0d3045;
    --access-gold: #d9a441;
    --access-ice: #eef5f8;
    --access-ink: #142631;
    --access-muted: #667781;

    width: 100%;
    margin: 0;
    padding: 0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--access-ink);
    background: #fff;
    line-height: 1.55;
}


/* RESET LOCAL
   --------------------------------------------------------- */

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

.sultants-access h1,
.sultants-access h2,
.sultants-access h3,
.sultants-access p,
.sultants-access blockquote {
    margin-top: 0;
}

.sultants-access a {
    text-decoration: none;
}

.sultants-access .access-wrap {
    width: min(1160px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.sultants-access .access-hero {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;

    padding: 90px 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,27,40,.96) 0%,
            rgba(7,27,40,.86) 45%,
            rgba(7,27,40,.50) 100%
        ),
        url("/images/motoneige-1.jpg")
        center center / cover no-repeat;

    color: #fff;
}

.sultants-access .access-hero::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 5px;

    background: var(--access-gold);
}

.sultants-access .access-hero .access-wrap {
    position: relative;
    z-index: 2;
}

.sultants-access .access-kicker,
.sultants-access .access-section-kicker {
    margin-bottom: 18px;

    color: var(--access-gold);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 3px;
    line-height: 1.2;

    text-transform: uppercase;
}

.sultants-access .access-kicker {
    font-size: 18px;
}

.sultants-access .access-hero h1 {
    max-width: 850px;

    margin-bottom: 28px;

    color: #fff;

    font-size: clamp(48px, 7vw, 82px);
    font-weight: 900;

    line-height: .98;
    letter-spacing: -3px;
}

.sultants-access .access-lead {
    max-width: 760px;

    margin-bottom: 35px;

    color: rgba(255,255,255,.92);

    font-size: 20px;
    line-height: 1.65;
}

.sultants-access .access-lead strong {
    color: #fff;
}

.sultants-access .access-hero blockquote {
    max-width: 780px;

    margin: 0;

    padding: 22px 26px;

    border-left: 4px solid var(--access-gold);

    background: rgba(0,0,0,.25);

    color: rgba(255,255,255,.9);

    font-size: 15px;
    line-height: 1.7;
}

.sultants-access .access-hero blockquote strong {
    display: block;

    margin-top: 8px;

    color: var(--access-gold);

    font-size: 13px;
}


/* =========================================================
   TARIFS
   ========================================================= */

.sultants-access .access-tarifs {
    padding: 90px 0;

    background: #fff;
}

.sultants-access .access-tarifs h2,
.sultants-access .access-repartition h2,
.sultants-access .access-fcmq h2,
.sultants-access .access-cta h2 {
    margin-bottom: 45px;

    color: var(--access-navy);

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 900;

    line-height: 1.05;
    letter-spacing: -1.5px;
}

.sultants-access .tarifs-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 30px;
}

.sultants-access .tarifs-col {
    padding: 10px 0;
}

.sultants-access .tarif-item {
    display: grid;

    grid-template-columns: 115px minmax(0, 1fr);

    align-items: center;

    min-height: 90px;

    padding: 18px 22px;

    border-bottom: 1px solid #dce5e9;

    transition:
        background .2s ease,
        transform .2s ease;
}

.sultants-access .tarif-item:hover {
    background: var(--access-ice);

    transform: translateX(5px);
}

.sultants-access .tarif-item strong {
    color: var(--access-gold);

    font-size: 30px;
    font-weight: 900;

    line-height: 1;
}

.sultants-access .tarif-item span {
    color: var(--access-ink);

    font-size: 16px;
    font-weight: 800;

    line-height: 1.35;
}

.sultants-access .tarif-item small {
    display: inline-block;

    margin-top: 3px;

    color: var(--access-muted);

    font-size: 13px;
    font-weight: 500;
}


/* NOTE */

.sultants-access .access-note {
    margin-top: 45px;

    padding: 25px 30px;

    border-left: 4px solid var(--access-gold);

    background: var(--access-ice);
}

.sultants-access .access-note strong {
    display: block;

    margin-bottom: 6px;

    color: var(--access-navy);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.sultants-access .access-note p {
    margin-bottom: 0;

    color: var(--access-muted);

    font-size: 14px;
}


/* =========================================================
   RÉPARTITION
   ========================================================= */

.sultants-access .access-repartition {
    padding: 90px 0;

    background: var(--access-navy);

    color: #fff;
}

.sultants-access .access-section-kicker--light {
    color: var(--access-gold);
}

.sultants-access .access-repartition h2 {
    margin-bottom: 20px;

    color: #fff;
}

.sultants-access .access-intro {
    max-width: 720px;

    margin-bottom: 45px;

    color: rgba(255,255,255,.72);

    font-size: 17px;
}

.sultants-access .repartition-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.sultants-access .repartition-item {
    display: grid;

    grid-template-columns: 135px minmax(0, 1fr);

    align-items: center;

    min-height: 105px;

    padding: 22px 25px;

    border: 1px solid rgba(255,255,255,.12);

    background: rgba(255,255,255,.045);
}

.sultants-access .repartition-item strong {
    color: var(--access-gold);

    font-size: 28px;
    font-weight: 900;
}

.sultants-access .repartition-item span {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;
}

.sultants-access .repartition-item small {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.62);

    font-size: 12px;
    font-weight: 400;
}

.sultants-access .repartition-item--highlight {
    grid-column: 1 / -1;

    border-color:
        rgba(217,164,65,.55);

    background:
        linear-gradient(
            135deg,
            rgba(217,164,65,.14),
            rgba(217,164,65,.04)
        );
}

.sultants-access .repartition-item--highlight strong {
    font-size: 40px;
}


/* =========================================================
   FCMQ
   ========================================================= */

.sultants-access .access-fcmq {
    padding: 90px 0;

    background: var(--access-ice);
}

.sultants-access .access-fcmq h2 {
    margin-bottom: 45px;
}

.sultants-access .fcmq-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.sultants-access .fcmq-item {
    display: grid;

    grid-template-columns: 105px minmax(0, 1fr);

    align-items: center;

    min-height: 100px;

    padding: 22px 25px;

    background: #fff;

    border: 1px solid #d9e4e8;
}

.sultants-access .fcmq-item strong {
    color: var(--access-gold);

    font-size: 27px;
    font-weight: 900;
}

.sultants-access .fcmq-item span {
    color: var(--access-navy);

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;
}

.sultants-access .fcmq-item small {
    display: block;

    margin-top: 5px;

    color: var(--access-muted);

    font-size: 12px;
    font-weight: 500;
}

.sultants-access .fcmq-item--major {
    grid-column: 1 / -1;

    min-height: 145px;

    border:
        2px solid var(--access-gold);
}

.sultants-access .fcmq-item--major strong {
    font-size: 42px;
}


/* =========================================================
   CTA
   ========================================================= */

.sultants-access .access-cta {
    padding: 80px 0;

    background: var(--access-navy2);

    color: #fff;
}

.sultants-access .access-cta .access-wrap {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.sultants-access .access-cta h2 {
    margin-bottom: 20px;

    color: #fff;

    font-size: clamp(32px, 4vw, 48px);
}

.sultants-access .access-cta p {
    max-width: 650px;

    margin-bottom: 0;

    color: rgba(255,255,255,.72);

    font-size: 16px;
}

.sultants-access .access-button {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding: 0 28px;

    background: var(--access-gold);

    color: var(--access-navy);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .3px;

    transition:
        transform .2s ease,
        background .2s ease;
}

.sultants-access .access-button:hover {
    background: #fff;

    color: var(--access-navy);

    transform: translateY(-3px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .sultants-access .tarifs-grid {
        grid-template-columns: 1fr;
    }

    .sultants-access .repartition-grid {
        grid-template-columns: 1fr;
    }

    .sultants-access .repartition-item--highlight {
        grid-column: auto;
    }

    .sultants-access .fcmq-grid {
        grid-template-columns: 1fr;
    }

    .sultants-access .fcmq-item--major {
        grid-column: auto;
    }

    .sultants-access .access-cta .access-wrap {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .sultants-access .access-wrap {
        width: calc(100% - 32px);
    }

    .sultants-access .access-hero {
        min-height: auto;

        padding: 75px 0 70px;
    }

    .sultants-access .access-kicker {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .sultants-access .access-hero h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .sultants-access .access-lead {
        font-size: 17px;
    }

    .sultants-access .access-hero blockquote {
        padding: 18px;

        font-size: 14px;
    }

    .sultants-access .access-tarifs,
    .sultants-access .access-repartition,
    .sultants-access .access-fcmq {
        padding: 65px 0;
    }

    .sultants-access .access-tarifs h2,
    .sultants-access .access-repartition h2,
    .sultants-access .access-fcmq h2 {
        margin-bottom: 32px;

        font-size: 36px;
    }

    .sultants-access .tarif-item {
        grid-template-columns: 95px minmax(0, 1fr);

        padding: 16px 10px;
    }

    .sultants-access .tarif-item strong {
        font-size: 25px;
    }

    .sultants-access .tarif-item span {
        font-size: 14px;
    }

    .sultants-access .repartition-item,
    .sultants-access .fcmq-item {
        grid-template-columns: 95px minmax(0, 1fr);

        padding: 18px;
    }

    .sultants-access .repartition-item strong,
    .sultants-access .fcmq-item strong {
        font-size: 24px;
    }

    .sultants-access .repartition-item--highlight strong,
    .sultants-access .fcmq-item--major strong {
        font-size: 32px;
    }

    .sultants-access .access-cta {
        padding: 65px 0;
    }

}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media (max-width: 400px) {

    .sultants-access .access-wrap {
        width: calc(100% - 24px);
    }

    .sultants-access .access-hero h1 {
        font-size: 41px;
    }

    .sultants-access .tarif-item {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .sultants-access .tarif-item strong {
        font-size: 22px;
    }

    .sultants-access .repartition-item,
    .sultants-access .fcmq-item {
        grid-template-columns: 82px minmax(0, 1fr);
    }

}

/* =========================================================
   FIX MONTANTS — $ COLLÉ AUTOMATIQUEMENT
   ========================================================= */

.sultants-access .tarif-item strong,
.sultants-access .repartition-item strong,
.sultants-access .fcmq-item strong {
    white-space: nowrap;
}

.sultants-access .tarif-item strong::after,
.sultants-access .repartition-item strong::after,
.sultants-access .fcmq-item strong::after {
    content: " $";
}

.sultants-access .tarif-item strong span,
.sultants-access .repartition-item strong span,
.sultants-access .fcmq-item strong span {
    display: none;
}

/* =========================================================
   FIX — $ UNIQUEMENT POUR LES MONTANTS NUMÉRIQUES
   ========================================================= */

/* Ajoute le $ seulement si le strong contient un nombre */
.sultants-access .tarif-item strong:not(:empty)::after,
.sultants-access .repartition-item strong:not(:empty)::after,
.sultants-access .fcmq-item strong:not(:empty)::after {
    content: " $";
    white-space: nowrap;
}

/* Empêche le $ du texte de se coller ou de se dupliquer */
.sultants-access span,
.sultants-access small {
    white-space: normal;
}

/* Fix pour que les montants major aient la même hauteur que les autres */
.sultants-access .fcmq-item--major strong,
.sultants-access .repartition-item--highlight strong {
    font-size: 28px !important; /* même taille que les autres */
    line-height: 1;             /* évite que le texte descende */
}

/* Fix pour que le texte sous les montants reste propre */
.sultants-access .fcmq-item--major span,
.sultants-access .fcmq-item--major small,
.sultants-access .repartition-item--highlight span,
.sultants-access .repartition-item--highlight small {
    margin-top: 6px;            /* espace propre sous le montant */
    display: block;             /* force le texte à rester en dessous */
}

/* Décaler le texte sous les montants major vers la droite */
.sultants-access .fcmq-item--major span,
.sultants-access .fcmq-item--major small,
.sultants-access .repartition-item--highlight span,
.sultants-access .repartition-item--highlight small {
    padding-left: 20px; /* décalage horizontal */
    display: block;     /* garantit que le texte reste sous le montant */
}


/* =========================================================
   TABLETTE
   ========================================================= */

.sultants{
    --navy:#071b28;
    --navy2:#0d3045;
    --gold:#d9a441;
    --ice:#eef5f8;
    --ink:#142631;
    --muted:#667781;

    font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    line-height:1.55;
    background:#fff;
}



.sultants *{
    box-sizing:border-box;
}

.sultants a{
    text-decoration:none;
}


/* =========================================================
   CONTENEUR
   ========================================================= */

.wrap{
    width:min(1160px,calc(100% - 48px));
    margin:auto;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    min-height:760px;
    position:relative;
    color:#fff;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.hero__bg{
    position:absolute;
    inset:0;
    background-image:url("/images/motoneige-1.jpg");
    background-size:cover;
    background-position:center;
}

.hero__shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(3,17,27,.9),rgba(3,17,27,.32) 70%),
        linear-gradient(0deg,rgba(3,17,27,.65),transparent 50%);
}

.hero__content{
    position:relative;
    z-index:2;
    padding:110px 0;
}

.badge,
.kicker{
    font-size:11px;
    font-weight:900;
    letter-spacing:3px;
    color:var(--gold);
    margin-bottom:18px;
}

.badge{
    color:#fff;
    opacity:.8;
}

.hero h1{
    font-size:clamp(58px,8vw,100px);
    line-height:.9;
    letter-spacing:-5px;
    margin:0 0 30px;
}

.hero h1 em{
    font-style:normal;
    color:var(--gold);
}

.lead{
    max-width:650px;
    font-size:20px;
    opacity:.9;
}

.actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
    margin-top:34px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 24px;
    font-weight:900;
    font-size:13px;
    border-radius:3px;
    transition:.25s;
}

.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px #0002;
}

.btn--gold{
    background:var(--gold);
    color:#17242b;
}

.btn--ghost{
    border:1px solid #fff8;
    color:#fff;
    background:#ffffff0b;
}

.btn--dark{
    background:var(--navy);
    color:#fff;
}

.hero__bottom{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:18px max(24px,calc((100% - 1160px)/2));
    background:#061621c9;
    font-size:10px;
    letter-spacing:2px;
    font-weight:800;
}


/* =========================================================
   STATS
   ========================================================= */

.stats{
    position:relative;
    margin-top:-55px;
    background:#fff;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    box-shadow:0 18px 45px #06162118;
    z-index:5;
}

.stats div{
    text-align:center;
    padding:30px;
    border-right:1px solid #e4eaed;
}

.stats div:last-child{
    border:0;
}

.stats b{
    display:block;
    font-size:48px;
    line-height:1;
    color:var(--navy);
}

.stats span{
    font-size:10px;
    letter-spacing:2px;
    font-weight:900;
    color:var(--muted);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
    padding:105px 0;
}

.intro{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:90px;
    align-items:center;
}

.intro h2,
.destinations h2,
.news h2{
    font-size:clamp(40px,5vw,65px);
    line-height:1;
    letter-spacing:-3px;
    margin:0;
}

.intro h2 span,
.destinations h2 span,
.safety h2 span{
    color:var(--gold);
}

.copy{
    font-size:17px;
    color:var(--muted);
}

.copy p{
    margin:0 0 18px;
}

.arrow{
    font-weight:900;
    color:var(--navy);
}


/* =========================================================
   SENTIERS
   ========================================================= */

.sentiers{
    background:var(--navy);
    color:#fff;
    padding:105px 0;
}

.kicker--light{
    color:var(--gold);
}

.sentiers > div > h2,
.safety h2{
    font-size:clamp(44px,6vw,76px);
    line-height:.96;
    letter-spacing:-4px;
    margin:0 0 45px;
}

.sentiers h2 span,
.safety h2 span{
    color:var(--gold);
}


/* =========================================================
   CARTES DES SENTIERS
   2 COLONNES × 2 RANGÉES
   ========================================================= */

.sultants .trailgrid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows:repeat(2, 350px) !important;
    gap:18px !important;
    width:100% !important;
    max-width:1160px !important;
}

.sultants .trail{
    width:100% !important;
    height:350px !important;
    min-height:350px !important;
    padding:30px !important;
    display:flex !important;
    align-items:flex-start !important;
    position:relative !important;
    overflow:hidden !important;
}

.sultants .trail::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        0deg,
        #04131dcc,
        transparent 70%
    );

    pointer-events:none !important;
    z-index:0;
}

.sultants .trail > div{
    position:relative !important;
    z-index:2 !important;
}

/* Mobile : une colonne */
@media(max-width:800px){
    .sultants .trailgrid{
        grid-template-columns:1fr !important;
        grid-template-rows:none !important;
    }
    .sultants .trail{
        height:300px !important;
        min-height:300px !important;
    }
}

/* =========================================================
   IMAGES
   ========================================================= */

.sultants .trail--one{
    background-image:url(
        "/images/parc-regional-montagne-du-diable-tour-observation-CREDIT-PHOTO-Nicolas-Aubry-3.jpg"
    ) !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-color:#071b28 !important;
}

.sultants .trail--two{
    background-image:url(
        "/images/les-chutes-windigo.jpg"
    ) !important;
}

.sultants .trail--three{
    background-image:url(
        "/images/reservoir-rotated.jpeg"
    ) !important;
}


.sultants .trail--four {
    background-image: url("/images/sentier-7.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
}

/* =========================================================
   TEXTE DES CARTES
   ========================================================= */

.sultants .trail small{
    font-size:15px !important;
    letter-spacing:2px !important;
    font-weight:900 !important;

    color:var(--gold) !important;
}

.sultants .trail h3{
    font-size:38px !important;
    line-height:.95 !important;

    margin:10px 0 15px !important;

    color:#fff !important;
    opacity:1 !important;
    text-shadow:0 2px 5px rgba(0,0,1,.8) !important;
}

.sultants .trail a{
    color:#fff !important;
    font-weight:900 !important;

    position:relative !important;
    z-index:3 !important;

    pointer-events:auto !important;
    opacity:1 !important;
    text-shadow:0 2px 5px rgba(0,0,1,.8) !important;
}

.sultants .trail a:hover{
    color:var(--gold) !important;
}


/* =========================================================
   CONDITIONS
   ========================================================= */

.condition-card{
    background:var(--ice);
    padding:50px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;
}

.condition-card h2{
    font-size:45px;
    line-height:1;
    margin:0 0 12px;
}

.condition-card p{
    max-width:650px;
    color:var(--muted);
    margin:0;
}


/* =========================================================
   DESTINATIONS
   ========================================================= */

.destinations{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:90px;
}

.dest-list{
    border-top:1px solid #dbe3e7;
}

.dest-list a{
    display:grid;
    grid-template-columns:55px 1fr 160px;

    align-items:center;

    padding:22px 0;

    border-bottom:1px solid #dbe3e7;

    color:var(--ink);
}

.dest-list span{
    color:var(--gold);
    font-weight:900;
}

.dest-list b{
    font-size:20px;
}

.dest-list small{
    color:var(--muted);
}


/* =========================================================
   CTA
   ========================================================= */

.cta{
    background:var(--navy2);
    color:#fff;
    padding:100px 0;
}

.cta__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.cta h2{
    font-size:clamp(42px,5vw,65px);
    line-height:1;
    letter-spacing:-3px;
    margin:0 0 20px;
}

.cta p{
    opacity:.7;
    max-width:680px;
}


/* =========================================================
   NEWS
   ========================================================= */

.newsbox{
    border:1px solid #dce4e8;

    padding:34px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:35px;

    margin-top:35px;
}

.newsbox small{
    font-size:10px;
    letter-spacing:2px;
    font-weight:900;
    color:var(--gold);
}

.newsbox h3{
    font-size:27px;
    margin:8px 0;
}

.newsbox p{
    color:var(--muted);
    margin:0;
}


/* =========================================================
   SÉCURITÉ
   ========================================================= */

.safety{
    padding:105px 0;

    color:#fff;

    background:
        linear-gradient(90deg,#061a27f2,#061a27b8),
        url("/images/sentier-2.jpg")
        center/cover;
}

.rules{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

    margin:45px 0;
}

.rules div{
    border-top:1px solid #ffffff55;
    padding-top:18px;
}

.rules b{
    display:block;

    color:var(--gold);

    font-size:11px;

    margin-bottom:6px;
}

.rules span{
    font-weight:800;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
    background:#04131d;
    color:#fff;
    padding:50px 0;
}

.footer__grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr .5fr;
    gap:30px;
}

.footer strong{
    letter-spacing:3px;
}

.footer p{
    opacity:.6;
    font-size:13px;
}

.footer a{
    color:var(--gold);
    font-weight:900;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1100px){

    .sultants .trailgrid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-template-rows:repeat(2,350px) !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

    .wrap{
        width:min(100% - 36px,1160px);
    }

    .hero{
        min-height:680px;
    }

    .hero h1{
        letter-spacing:-3px;
    }

    .stats{
        margin:-25px 18px 0;
        grid-template-columns:1fr;
    }

    .stats div{
        border-right:0;
        border-bottom:1px solid #e4eaed;
        padding:20px;
    }

    .intro,
    .destinations{
        grid-template-columns:1fr;
        gap:35px;
    }

    .section,
    .sentiers,
    .cta,
    .safety{
        padding:75px 0;
    }


    /* 1 carte par ligne sur mobile */

    .sultants .trailgrid{
        grid-template-columns:1fr !important;
        grid-template-rows:none !important;
    }

    .sultants .trail{
        height:300px !important;
        min-height:300px !important;
    }


    .condition-card,
    .cta__inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .dest-list a{
        grid-template-columns:42px 1fr;
    }

    .dest-list small{
        grid-column:2;
    }

    .rules{
        grid-template-columns:1fr;
    }

    .newsbox{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer__grid{
        grid-template-columns:1fr 1fr;
    }
}


/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media(max-width:480px){

    .hero__content{
        padding:80px 0;
    }

    .lead{
        font-size:17px;
    }

    .hero__bottom{
        font-size:8px;
    }

    .actions .btn{
        width:100%;
    }

    .footer__grid{
        grid-template-columns:1fr;
    }

    .condition-card{
        padding:32px 24px;
    }
}

/* =========================================================
   ALIGNEMENT RESPONSIVE DES CARTES PARTENAIRES
   ========================================================= */

@media(max-width:800px) {

    .part-card,
    .part-major,
    .part-other {
        min-height: auto; /* laisse respirer en mobile */
    }

    .part-grid--other {
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:480px) {

    .part-grid--other {
        grid-template-columns:1fr;
    }
}


/* =========================================================
  SECTION PARTENAIRE — VERSION COMPLÈTE FIXÉE
   ========================================================= */
.sultants-partenaires {
    --part-navy:#071b28;
    --part-navy2:#0d3045;
    --part-gold:#d9a441;
    --part-ice:#eef5f8;
    --part-ink:#142631;
    --part-muted:#667781;

    font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    color:var(--part-ink);
    line-height:1.55;
    background:#fff;
}

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

.sultants-partenaires a {
    text-decoration:none;
}

.part-wrap {
    width:min(1160px,calc(100% - 48px));
    margin:auto;
}


/* =========================
   HERO
   ========================= */

.part-hero {
    min-height:620px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background:var(--part-navy);
}

.part-hero::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:url("/images/motoneige-1.jpg");
    background-size:cover;
    background-position:center;
    z-index:1;
}

.part-hero__overlay {
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,
            rgba(3,17,27,.94),
            rgba(3,17,27,.42) 75%),
        linear-gradient(0deg,
            rgba(3,17,27,.75),
            transparent 60%);
    z-index:2;
}

.part-hero__content {
    position:relative;
    z-index:3;
    padding:100px 0;
}

.part-kicker {
    font-size:12px;
    font-weight:900;
    letter-spacing:3px;
    color:var(--part-gold);
    margin-bottom:18px;
}

.part-hero h1 {
    max-width:900px;
    margin:0 0 30px;
    font-size:clamp(55px,8vw,94px);
    line-height:.92;
    letter-spacing:-5px;
}

.part-hero h1 span {
    color:var(--part-gold);
}

.part-hero p {
    max-width:650px;
    margin:0;
    font-size:20px;
    opacity:.9;
}

.part-hero__bottom {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:4;
    padding:18px max(24px,calc((100% - 1160px)/2));
    background:rgba(6,22,33,.82);
    font-size:10px;
    letter-spacing:2px;
    font-weight:900;
}


/* =========================
   SECTIONS
   ========================= */

.part-section {
    padding:105px 0;
    background:var(--part-navy);
    color:#fff;
}

.part-section--light {
    background:#fff;
    color:var(--part-ink);
}

.part-section--dark2 {
    background:var(--part-navy2);
    color:#fff;
}

.part-section-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:55px;
}

.part-section-head h2 {
    margin:0;
    font-size:clamp(44px,5vw,70px);
    line-height:.96;
    letter-spacing:-4px;
}

.part-section-head h2 span {
    color:var(--part-gold);
}

.part-count {
    text-align:right;
}

.part-count strong {
    display:block;
    color:var(--part-gold);
    font-size:58px;
    line-height:.8;
}

.part-count span {
    font-size:10px;
    letter-spacing:2px;
    font-weight:900;
    opacity:.65;
}


/* =========================
   SUBVENTIONS
   ========================= */


.part-grid {
    display:grid;
    gap:18px;
    align-items:stretch; /* FIX ALIGNEMENT */
}

.part-grid--support {
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.part-card {
    position:relative;
    min-height:300px;
    padding:32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between; /* FIX ALIGNEMENT */
    overflow:hidden;
    color:#fff;
    background:
        linear-gradient(145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025));
    border:1px solid rgba(255,255,255,.12);
    transition:transform .25s ease,background .25s ease,border-color .25s ease;
}

.part-card:hover {
    transform:translateY(-6px);
    background:
        linear-gradient(145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.04));
    border-color:rgba(217,164,65,.6);
}

.part-number {
    position:absolute;
    top:25px;
    right:28px;
    font-size:13px;
    font-weight:900;
    letter-spacing:2px;
    color:var(--part-gold);
}

.part-card__type {
    font-size:10px;
    font-weight:900;
    letter-spacing:2px;
    color:var(--part-gold);
    margin-bottom:9px;
}

.part-card h3 {
    margin:0 0 12px;
    color:#fff;
    font-size:30px;
    line-height:1.02;
    letter-spacing:-1px;
}

.part-card p {
    margin-top:12px;
    color:rgba(255,255,255,.65);
    font-size:14px;
}

.part-link {
    margin-top:auto;
    display:inline-block;
    color:#fff;
    font-size:12px;
    font-weight:900;
}


/* =========================
   PARTENAIRES MAJEURS
   ========================= */

.part-grid--major {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch; /* FIX */
}

.part-major {
    position:relative;
    min-height:260px; /* FIX UNIFORMISATION */
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between; /* FIX */
    background:var(--part-ice);
    border:1px solid #e0e8ec;
    transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.part-major:hover {
    transform:translateY(-6px);
    background:#fff;
    border-color:rgba(217,164,65,.7);
}

.part-major .part-number {
    top:22px;
    right:25px;
}

.part-major h3 {
    margin-bottom:auto; /* FIX */
    color:var(--part-navy);
    font-size:27px;
    line-height:1.05;
    letter-spacing:-.7px;
}

.part-major p {
    margin-top:12px;
    margin-bottom:12px;
    color:var(--part-muted);
    font-size:13px;
}

.part-major a {
    margin-top:auto;
    display:inline-block;
    color:var(--part-navy);
    font-size:12px;
    font-weight:900;
}

.part-major a:hover {
    color:var(--part-gold);
}


/* =========================
   AUTRES PARTENAIRES
   ========================= */

.part-grid--other {
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch; /* FIX */
}

.part-other {
    position:relative;
    min-height:200px; /* FIX */
    padding:27px;
    display:flex;
    flex-direction:column;
    justify-content:space-between; /* FIX */
    border-top:1px solid rgba(255,255,255,.25);
}

.part-other > span { /* FIX DU BUG > */
    position:absolute;
    top:20px;
    right:20px;
    color:var(--part-gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:2px;
}

.part-other strong {
    margin-bottom:auto; /* FIX */
    color:#fff;
    font-size:18px;
    line-height:1.15;
}

.part-other p {
    margin-top:12px;
    color:rgba(255,255,255,.6);
    font-size:13px;
}


/* =========================
   MERCI
   ========================= */

.part-thanks {
    padding:105px 0;
    background:var(--part-ice);
}

.part-thanks__inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.part-thanks h2 {
    margin:0;
    color:var(--part-navy);
    font-size:clamp(45px,5vw,70px);
    line-height:.95;
    letter-spacing:-4px;
}

.part-thanks h2 span {
    color:var(--part-gold);
}

.part-thanks__image {
    overflow:hidden;
    background:#fff;
    box-shadow:0 20px 50px rgba(6,22,33,.12);
}

.part-thanks__image img {
    display:block;
    width:100%;
    height:auto;
}


/* =========================
   CTA
   ========================= */

.part-cta {
    padding:100px 0;
    background:var(--part-navy);
    color:#fff;
}

.part-cta__inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.part-cta h2 {
    margin:0;
    font-size:clamp(44px,5vw,68px);
    line-height:.95;
    letter-spacing:-4px;
}

.part-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:0 25px;
    background:var(--part-gold);
    color:#17242b;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
    transition:.25s;
}

.part-btn:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(0,0,0,.2);
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:800px) {

    .part-wrap {
        width:min(100% - 36px,1160px);
    }

    .part-hero {
        min-height:590px;
    }

    .part-hero h1 {
        font-size:clamp(52px,14vw,78px);
        letter-spacing:-3px;
    }

    .part-section {
        padding:70px 0;
    }

    .part-section-head {
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .part-count {
        text-align:left;
    }

    .part-grid--support,
    .part-grid--major {
        grid-template-columns:1fr;
    }

    .part-thanks {
        padding:70px 0;
    }

    .part-thanks__inner {
        grid-template-columns:1fr;
        gap:40px;
    }

    .part-cta {
        padding:70px 0;
    }

    .part-cta__inner {
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }

}

/* =========================================================
   LES SULTANS — PAGE POURVOIRIES
   ========================================================= */

.sultants-pourvoiries {

    --pourv-navy: #071b28;
    --pourv-navy2: #0d3045;
    --pourv-gold: #d9a441;
    --pourv-ice: #eef5f8;
    --pourv-ink: #142631;
    --pourv-muted: #667781;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--pourv-ink);
    background: #fff;

    line-height: 1.55;

    width: 100%;
}


/* =========================================================
   RESET / BOX SIZING
   ========================================================= */

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


.sultants-pourvoiries h1,
.sultants-pourvoiries h2,
.sultants-pourvoiries h3,
.sultants-pourvoiries p {
    margin-top: 0;
}


.sultants-pourvoiries a {
    text-decoration: none;
}


.pourv-wrap {
    width: min(1160px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   KICKER
   ========================================================= */

.sultants-pourvoiries .pourv-kicker {

    margin-bottom: 16px;

    color: var(--pourv-gold);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 3px;
    line-height: 1.2;

    text-transform: uppercase;
}


/* =========================================================
   HERO
   ========================================================= */

.sultants-pourvoiries .pourv-hero {

    position: relative;

    min-height: 520px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    background-color: var(--pourv-navy);

    background-image:
        url("/images/Pourvoirie/pourvoirie.jpg");

    background-size: cover;
    background-position: center;
}


.sultants-pourvoiries .pourv-hero__overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,27,40,.94) 0%,
            rgba(7,27,40,.72) 48%,
            rgba(7,27,40,.32) 100%
        );

    pointer-events: none;
}


.sultants-pourvoiries .pourv-hero__content {

    position: relative;
    z-index: 2;

    padding-top: 70px;
    padding-bottom: 90px;
}


.sultants-pourvoiries .pourv-hero h1 {

    max-width: 780px;

    margin: 0 0 25px;

    color: #fff;

    font-size: clamp(48px, 7vw, 82px);

    font-weight: 900;

    line-height: .94;

    letter-spacing: -3px;
}


.sultants-pourvoiries .pourv-hero h1 span {
    color: var(--pourv-gold);
}


.sultants-pourvoiries .pourv-hero p {

    max-width: 620px;

    margin: 0;

    color: rgba(255,255,255,.86);

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   HERO BOTTOM STRIP
   ========================================================= */

.sultants-pourvoiries .pourv-hero__bottom {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;

    padding: 18px 24px;

    border-top: 1px solid rgba(217,164,65,.28);

    background: rgba(7,27,40,.82);

    color: rgba(255,255,255,.76);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2.5px;

    text-align: center;
}


/* =========================================================
   INTRO
   ========================================================= */

.sultants-pourvoiries .pourv-intro {

    padding: 90px 0;

    background: #fff;
}


.sultants-pourvoiries .pourv-intro__inner {

    display: grid;

    grid-template-columns:
        minmax(220px, .7fr)
        minmax(0, 1.3fr);

    gap: 70px;

    align-items: start;
}


.sultants-pourvoiries .pourv-intro__content h2 {

    margin: 0 0 22px;

    color: var(--pourv-navy);

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 900;

    line-height: .98;

    letter-spacing: -2px;
}


.sultants-pourvoiries .pourv-intro__content h2 span {
    color: var(--pourv-gold);
}


.sultants-pourvoiries .pourv-intro__content p {

    max-width: 760px;

    margin: 0;

    color: var(--pourv-muted);

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================================
   POURVOIRIES SECTION
   ========================================================= */

.sultants-pourvoiries .pourv-list {

    padding: 95px 0 110px;

    background: var(--pourv-ice);
}


.sultants-pourvoiries .pourv-list__head {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    margin-bottom: 50px;
}


.sultants-pourvoiries .pourv-list__head h2 {

    margin: 0;

    color: var(--pourv-navy);

    font-size: clamp(40px, 5vw, 62px);

    font-weight: 900;

    line-height: .95;

    letter-spacing: -2px;
}


.sultants-pourvoiries .pourv-list__head h2 span {
    color: var(--pourv-gold);
}


/* =========================================================
   COUNT
   ========================================================= */

.sultants-pourvoiries .pourv-count {

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    padding-left: 35px;

    border-left: 1px solid rgba(7,27,40,.18);
}


.sultants-pourvoiries .pourv-count strong {

    color: var(--pourv-navy);

    font-size: 58px;

    font-weight: 900;

    line-height: .85;

    letter-spacing: -3px;
}


.sultants-pourvoiries .pourv-count span {

    margin-top: 8px;

    color: var(--pourv-muted);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


/* =========================================================
   GRID — 3 COLONNES DESKTOP
   ========================================================= */

.sultants-pourvoiries .pourv-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    width: 100%;
}


/* =========================================================
   POURVOIRIE CARD
   ========================================================= */

.sultants-pourvoiries .pourv-card {

    position: relative;

    min-height: 330px;

    padding: 34px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(7,27,40,.08);

    box-shadow:
        0 10px 30px rgba(7,27,40,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.sultants-pourvoiries .pourv-card::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background: var(--pourv-gold);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .25s ease;
}


.sultants-pourvoiries .pourv-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(217,164,65,.55);

    box-shadow:
        0 18px 45px rgba(7,27,40,.13);
}


.sultants-pourvoiries .pourv-card:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.sultants-pourvoiries .pourv-card__number {

    position: absolute;

    top: 22px;
    right: 25px;

    color: rgba(7,27,40,.09);

    font-size: 48px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -2px;
}


/* =========================================================
   CARD TYPE
   ========================================================= */

.sultants-pourvoiries .pourv-card__type {

    margin-bottom: 12px;

    color: var(--pourv-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;

    line-height: 1.2;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.sultants-pourvoiries .pourv-card h3 {

    max-width: 90%;

    margin: 0 0 16px;

    color: var(--pourv-navy);

    font-size: 25px;

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -.7px;
}


/* =========================================================
   LOCATION
   ========================================================= */

.sultants-pourvoiries .pourv-location {

    margin: 0 0 8px;

    color: var(--pourv-muted);

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   PHONE
   ========================================================= */

.sultants-pourvoiries .pourv-phone {

    display: inline-block;

    margin-bottom: 20px;

    color: var(--pourv-ink);

    font-size: 14px;

    font-weight: 700;

    transition: color .2s ease;
}


.sultants-pourvoiries .pourv-phone:hover {
    color: var(--pourv-gold);
}


/* =========================================================
   WEBSITE LINK
   ========================================================= */

.sultants-pourvoiries .pourv-link {

    display: inline-block;

    margin-top: auto;

    padding-top: 18px;

    border-top:
        1px solid rgba(7,27,40,.10);

    color: var(--pourv-navy);

    font-size: 12px;

    font-weight: 900;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.sultants-pourvoiries .pourv-link:hover {

    color: var(--pourv-gold);

    padding-left: 5px;
}


/* =========================================================
   CTA
   ========================================================= */

.sultants-pourvoiries .pourv-cta {

    padding: 85px 0;

    background: var(--pourv-navy);
}


.sultants-pourvoiries .pourv-cta__inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;
}


.sultants-pourvoiries .pourv-cta h2 {

    margin: 0;

    color: #fff;

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 900;

    line-height: .98;

    letter-spacing: -2px;
}


.sultants-pourvoiries .pourv-cta h2 span {
    color: var(--pourv-gold);
}


/* =========================================================
   BUTTON
   ========================================================= */

.sultants-pourvoiries .pourv-btn {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 15px 24px;

    background: var(--pourv-gold);

    color: var(--pourv-navy);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .5px;

    transition:
        transform .2s ease,
        background .2s ease;
}


.sultants-pourvoiries .pourv-btn:hover {

    transform: translateY(-3px);

    background: #fff;

    color: var(--pourv-navy);
}


/* =========================================================
   TABLETTE — 2 COLONNES
   ========================================================= */

@media (max-width: 950px) {

    .sultants-pourvoiries .pourv-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .sultants-pourvoiries .pourv-intro__inner {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .sultants-pourvoiries .pourv-intro {
        padding: 75px 0;
    }


    .sultants-pourvoiries .pourv-list {
        padding: 80px 0 90px;
    }


    .sultants-pourvoiries .pourv-cta__inner {

        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   MOBILE — 1 COLONNE
   ========================================================= */

@media (max-width: 650px) {

    .pourv-wrap {

        width:
            min(100% - 32px, 1160px);
    }


    /* HERO */

    .sultants-pourvoiries .pourv-hero {

        min-height: 500px;

        background-position: 58% center;
    }


    .sultants-pourvoiries .pourv-hero__overlay {

        background:
            linear-gradient(
                90deg,
                rgba(7,27,40,.94),
                rgba(7,27,40,.65)
            );
    }


    .sultants-pourvoiries .pourv-hero__content {

        padding-top: 55px;
        padding-bottom: 90px;
    }


    .sultants-pourvoiries .pourv-hero h1 {

        font-size: 48px;

        letter-spacing: -2px;
    }


    .sultants-pourvoiries .pourv-hero p {

        font-size: 16px;
    }


    .sultants-pourvoiries .pourv-hero__bottom {

        padding: 16px;

        font-size: 9px;

        letter-spacing: 1.7px;
    }


    /* INTRO */

    .sultants-pourvoiries .pourv-intro {

        padding: 65px 0;
    }


    .sultants-pourvoiries .pourv-intro__content h2 {

        font-size: 43px;
    }


    .sultants-pourvoiries .pourv-intro__content p {

        font-size: 16px;
    }


    /* LIST */

    .sultants-pourvoiries .pourv-list {

        padding: 65px 0 75px;
    }


    .sultants-pourvoiries .pourv-list__head {

        display: block;

        margin-bottom: 35px;
    }


    .sultants-pourvoiries .pourv-list__head h2 {

        font-size: 44px;
    }


    .sultants-pourvoiries .pourv-count {

        display: none;
    }


    /* GRID */

    .sultants-pourvoiries .pourv-grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* CARDS */

    .sultants-pourvoiries .pourv-card {

        min-height: 300px;

        padding: 30px;
    }


    .sultants-pourvoiries .pourv-card h3 {

        font-size: 24px;
    }


    .sultants-pourvoiries .pourv-card__number {

        top: 20px;
        right: 20px;

        font-size: 42px;
    }


    /* CTA */

    .sultants-pourvoiries .pourv-cta {

        padding: 65px 0;
    }


    .sultants-pourvoiries .pourv-cta h2 {

        font-size: 42px;
    }


    .sultants-pourvoiries .pourv-btn {

        width: 100%;

        text-align: center;
    }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 400px) {

    .sultants-pourvoiries .pourv-hero h1 {

        font-size: 42px;
    }


    .sultants-pourvoiries .pourv-card {

        padding: 26px;
    }


    .sultants-pourvoiries .pourv-card h3 {

        font-size: 22px;
    }


    .sultants-pourvoiries .pourv-cta h2 {

        font-size: 36px;
    }

}

/* =========================================================
   FIN POURVOIRIE
   ========================================================= */


/* =========================================
   CONSEIL D'ADMINISTRATION
   LES SULTANS
   ========================================= */

.sultants-ca {
    --ca-navy: #071b28;
    --ca-navy2: #0d3045;
    --ca-gold: #d9a441;
    --ca-ice: #eef5f8;
    --ca-ink: #142631;
    --ca-muted: #667781;

    font-family: Inter, system-ui, -apple-system,
        "Segoe UI", Arial, sans-serif;

    color: var(--ca-ink);
    background: #fff;
    line-height: 1.55;
}

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

.sultants-ca a {
    text-decoration: none;
}

.ca-wrap {
    width: min(1160px, calc(100% - 48px));
    margin: auto;
}


/* =========================================
   HEADER
   ========================================= */

.ca-header {
    padding: 105px 0 75px;
}

.ca-kicker {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--ca-gold);
    margin-bottom: 18px;
}

.ca-header h2 {
    margin: 0;
    font-size: clamp(55px, 7vw, 90px);
    line-height: .9;
    letter-spacing: -5px;
    color: var(--ca-navy);
}

.ca-header h2 span {
    color: var(--ca-gold);
}

.ca-header p {
    margin: 25px 0 0;
    color: var(--ca-muted);
    font-size: 17px;
    font-weight: 700;
}


/* =========================================
   SECTION TITLES
   ========================================= */

.ca-section-title {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

.ca-section-title span {
    color: var(--ca-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    white-space: nowrap;
}

.ca-section-title div {
    height: 1px;
    background: #dbe3e7;
    flex: 1;
}


/* =========================================
   CARTES EXÉCUTIVES
   ========================================= */

.ca-executive {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ca-card {
    position: relative;
    min-height: 290px;
    padding: 32px;
    background: var(--ca-ice);
    border: 1px solid #e1e9ed;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.ca-card:hover {
    transform: translateY(-6px);
    background: #fff;
    border-color: rgba(217,164,65,.65);
}

.ca-card--main {
    background: var(--ca-navy);
    color: #fff;
    border-color: var(--ca-navy);
}

.ca-card--main:hover {
    background: var(--ca-navy2);
    border-color: var(--ca-gold);
}


/* numéro */

.ca-number {
    position: absolute;
    top: 25px;
    right: 28px;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;

    color: var(--ca-gold);
}


/* fonction */

.ca-role {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--ca-gold);
    margin-bottom: 10px;
}

.ca-card h3 {
    margin: 0 0 28px;

    font-size: 30px;
    line-height: 1;
    letter-spacing: -1px;

    color: var(--ca-navy);
}

.ca-card--main h3 {
    color: #fff;
}


/* =========================================
   CONTACT
   ========================================= */

.ca-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.ca-contact a {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 40px;
    padding: 0 13px;

    color: var(--ca-ink);
    border: 1px solid #d5e0e5;

    font-size: 12px;
    font-weight: 800;

    transition: .2s;
}

.ca-card--main .ca-contact a {
    color: #fff;
    border-color: rgba(255,255,255,.2);
}

.ca-contact a:hover {
    background: var(--ca-gold);
    border-color: var(--ca-gold);
    color: var(--ca-navy);
}

.ca-contact b {
    color: var(--ca-gold);
    font-size: 9px;
    letter-spacing: 1px;
}


/* =========================================
   DIRECTEURS
   ========================================= */

.ca-directors {
    padding: 85px 0 105px;
}

.ca-directors-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ca-director {
    position: relative;

    min-height: 145px;
    padding: 25px;

    border-top: 3px solid var(--ca-navy);
    background: #fff;

    box-shadow: 0 12px 35px rgba(6,22,33,.07);

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition:
        transform .25s ease,
        border-color .25s ease;
}

.ca-director:hover {
    transform: translateY(-5px);
    border-color: var(--ca-gold);
}

.ca-director span {
    position: absolute;
    top: 18px;
    right: 20px;

    color: var(--ca-gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.ca-director strong {
    font-size: 19px;
    line-height: 1.1;
    color: var(--ca-navy);
}

.ca-director i {
    margin-top: 7px;

    color: var(--ca-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 900px) {

    .ca-executive {
        grid-template-columns: 1fr 1fr;
    }

    .ca-card--main {
        grid-column: span 2;
    }

    .ca-directors-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 650px) {

    .ca-wrap {
        width: min(100% - 36px, 1160px);
    }

    .ca-header {
        padding: 75px 0 55px;
    }

    .ca-header h2 {
        font-size: clamp(50px, 14vw, 75px);
        letter-spacing: -3px;
    }

    .ca-executive {
        grid-template-columns: 1fr;
    }

    .ca-card--main {
        grid-column: auto;
    }

    .ca-card {
        min-height: 260px;
    }

    .ca-directors {
        padding: 65px 0 75px;
    }

    .ca-directors-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .ca-card {
        padding: 27px;
    }

    .ca-card h3 {
        font-size: 27px;
    }

    .ca-contact {
        flex-direction: column;
        align-items: stretch;
    }

    .ca-contact a {
        justify-content: flex-start;
    }

}

/* =========================================
   FIN CONSEIL
   ========================================= */

/* =========================================
   HEBERGEMENT
   ========================================= */
.sultants-hotels{

--hotel-navy:#071b28;
--hotel-navy2:#0d3045;
--hotel-gold:#d9a441;
--hotel-ice:#eef5f8;
--hotel-ink:#142631;
--hotel-muted:#667781;

font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
color:var(--hotel-ink);
line-height:1.55;
background:#fff;

}

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

.sultants-hotels a{
text-decoration:none;
}

.hotel-wrap{
width:min(1160px,calc(100% - 48px));
margin:auto;
}

/* =========================================================
HERO
========================================================= */

.hotel-hero{
min-height:620px;
position:relative;
display:flex;
align-items:center;
overflow:hidden;
color:#fff;
background:var(--hotel-navy);
}

.hotel-hero__bg{
position:absolute;
inset:0;

background-image:url("/images/mont-laurier-3.jpg");
background-size:cover;
background-position:center;

}

.hotel-hero__overlay{
position:absolute;
inset:0;

background:
    linear-gradient(
        90deg,
        rgba(3,17,27,.94),
        rgba(3,17,27,.42) 75%
    ),
    linear-gradient(
        0deg,
        rgba(3,17,27,.75),
        transparent 60%
    );

}

.hotel-hero__content{
position:relative;
z-index:2;
padding:100px 0;
}

.hotel-kicker{
font-size:12px;
font-weight:900;
letter-spacing:3px;
color:var(--hotel-gold);
margin-bottom:18px;
}

.hotel-hero h1{
max-width:900px;
font-size:clamp(55px,8vw,94px);
line-height:.92;
letter-spacing:-5px;
margin:0 0 30px;
}

.hotel-hero h1 span{
color:var(--hotel-gold);
}

.hotel-hero p{
max-width:650px;
margin:0;
font-size:20px;
opacity:.9;
}

.hotel-hero__bottom{
position:absolute;
bottom:0;
left:0;
right:0;
z-index:3;

padding:18px max(24px,calc((100% - 1160px)/2));

background:rgba(6,22,33,.82);

font-size:10px;
letter-spacing:2px;
font-weight:900;

}

/* =========================================================
INTRO
========================================================= */

.hotel-intro{
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center;

padding-top:105px;
padding-bottom:105px;

}

.hotel-intro h2{
font-size:clamp(45px,5vw,70px);
line-height:.96;
letter-spacing:-4px;
margin:0;
}

.hotel-intro h2 span{
color:var(--hotel-gold);
}

.hotel-intro__text{
color:var(--hotel-muted);
font-size:17px;
}

.hotel-intro__text p{
margin:0 0 20px;
}

/* =========================================================
HOTEL LIST
========================================================= */

.hotel-list{
padding:105px 0;
background:var(--hotel-navy);
color:#fff;
}

.hotel-list__header{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:50px;
margin-bottom:55px;
}

.hotel-list__header h2{
font-size:clamp(44px,5vw,70px);
line-height:.96;
letter-spacing:-4px;
margin:0;
}

.hotel-list__header h2 span{
color:var(--hotel-gold);
}

.hotel-list__count{
text-align:right;
}

.hotel-list__count strong{
display:block;
color:var(--hotel-gold);
font-size:58px;
line-height:.8;
}

.hotel-list__count span{
font-size:10px;
letter-spacing:2px;
font-weight:900;
opacity:.65;
}

/* =========================================================
TUILES
========================================================= */

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

.hotel-card{
position:relative;
min-height:300px;

padding:32px;

display:flex;
align-items:flex-end;

overflow:hidden;

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.09),
        rgba(255,255,255,.025)
    );

border:1px solid rgba(255,255,255,.12);

transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;

}

.hotel-card::before{
content:"";
position:absolute;
inset:0;

background:
    linear-gradient(
        135deg,
        rgba(217,164,65,.08),
        transparent 50%
    );

pointer-events:none;

}

.hotel-card:hover{
transform:translateY(-6px);

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.13),
        rgba(255,255,255,.04)
    );

border-color:rgba(217,164,65,.55);

}

.hotel-card__number{
position:absolute;
top:25px;
right:28px;


font-size:13px;
font-weight:900;
letter-spacing:2px;

color:var(--hotel-gold);

}

.hotel-card__content{
position:relative;
z-index:2;
width:100%;
}

.hotel-card__tag{
font-size:10px;
font-weight:900;
letter-spacing:2px;
color:var(--hotel-gold);
margin-bottom:9px;
}

.hotel-card h3{
margin:0 0 8px;

color:#fff;

font-size:34px;
line-height:1;

letter-spacing:-1px;

}

.hotel-card__address{
color:rgba(255,255,255,.65);
font-size:14px;
margin-bottom:25px;
}

.hotel-card__details{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.hotel-card__details a{
display:inline-flex;
align-items:center;
gap:9px;

min-height:40px;
padding:0 13px;

color:#fff;

border:1px solid rgba(255,255,255,.18);

font-size:12px;
font-weight:800;

transition:.2s;

}

.hotel-card__details a:hover{
color:var(--hotel-navy);
background:var(--hotel-gold);
border-color:var(--hotel-gold);
}

.hotel-icon{
font-size:9px;
letter-spacing:1px;
font-weight:900;
color:var(--hotel-gold);
}

.hotel-card__details a:hover .hotel-icon{
color:var(--hotel-navy);
}

/* =========================================================
NOTE
========================================================= */

.hotel-note{
padding:90px 0;
background:var(--hotel-ice);
}

.hotel-note__inner{
display:grid;
grid-template-columns:75px 1fr;
gap:30px;
align-items:start;
}

.hotel-note__icon{
width:60px;
height:60px;

display:flex;
align-items:center;
justify-content:center;

background:var(--hotel-gold);
color:var(--hotel-navy);

font-size:25px;

}

.hotel-note h2{
max-width:800px;

font-size:clamp(38px,4.5vw,58px);
line-height:1;
letter-spacing:-3px;

margin:0 0 20px;

}

.hotel-note h2 span{
color:var(--hotel-gold);
}

.hotel-note p{
max-width:700px;
color:var(--hotel-muted);
font-size:17px;
}

/* =========================================================
CTA
========================================================= */

.hotel-cta{
padding:100px 0;


background:var(--hotel-navy2);
color:#fff;


}

.hotel-cta__inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}

.hotel-cta h2{
font-size:clamp(44px,5vw,68px);
line-height:.95;
letter-spacing:-4px;
margin:0;
}

.hotel-btn{
display:inline-flex;
align-items:center;
justify-content:center;

min-height:54px;
padding:0 25px;

background:var(--hotel-gold);
color:#17242b;

font-size:13px;
font-weight:900;

white-space:nowrap;

transition:.25s;


}

.hotel-btn:hover{
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(0,0,0,.2);
}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:800px){

.hotel-wrap{
    width:min(100% - 36px,1160px);
}

.hotel-hero{
    min-height:590px;
}

.hotel-hero h1{
    font-size:clamp(52px,14vw,78px);
    letter-spacing:-3px;
}

.hotel-hero p{
    font-size:17px;
}

.hotel-intro{
    grid-template-columns:1fr;
    gap:35px;
    padding-top:75px;
    padding-bottom:75px;
}

.hotel-list{
    padding:75px 0;
}

.hotel-list__header{
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:40px;
}

.hotel-list__count{
    text-align:left;
}

.hotels-grid{
    grid-template-columns:1fr;
}

.hotel-card{
    min-height:280px;
}

.hotel-note{
    padding:70px 0;
}

.hotel-cta{
    padding:75px 0;
}

.hotel-cta__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:35px;
}

.hotel-btn{
    white-space:normal;
    text-align:center;
}

}

@media(max-width:480px){

.hotel-hero__content{
    padding:75px 0;
}

.hotel-hero__bottom{
    font-size:8px;
    letter-spacing:1.5px;
}

.hotel-card{
    padding:27px;
}

.hotel-card h3{
    font-size:29px;
}

.hotel-card__details{
    flex-direction:column;
    align-items:stretch;
}

.hotel-card__details a{
    justify-content:flex-start;
}

.hotel-note__inner{
    grid-template-columns:1fr;
}

}

/* =========================================================
   AUTRES HÉBERGEMENTS À PROXIMITÉ
   ========================================================= */

.hotel-nearby {
    padding: 105px 0;
    background: var(--hotel-ice);
    color: var(--hotel-ink);
}

.hotel-nearby .hotel-list__header {
    margin-bottom: 55px;
}

.hotel-nearby .hotel-list__header h2 {
    color: var(--hotel-navy);
}

.hotel-nearby .hotel-list__count {
    color: var(--hotel-muted);
}

.hotel-nearby .hotel-list__count span {
    color: var(--hotel-muted);
    opacity: 1;
}


/* CARTES CLAIRES */

.hotel-card--light {
    background: #fff;

    border: 1px solid #dce5e9;

    color: var(--hotel-ink);
}

.hotel-card--light::before {
    background:
        linear-gradient(
            135deg,
            rgba(217,164,65,.08),
            transparent 50%
        );
}

.hotel-card--light:hover {
    background: #fff;

    border-color: var(--hotel-gold);
}

.hotel-card--light h3 {
    color: var(--hotel-navy);
}

.hotel-card--light .hotel-card__address {
    color: var(--hotel-muted);
}

.hotel-card--light .hotel-card__details a {
    color: var(--hotel-navy);

    border-color: #d5e0e4;
}

.hotel-card--light .hotel-card__details a:hover {
    color: var(--hotel-navy);

    background: var(--hotel-gold);

    border-color: var(--hotel-gold);
}

.hotel-card--light .hotel-icon {
    color: var(--hotel-gold);
}

.hotel-card--light .hotel-card__number {
    color: var(--hotel-gold);
}


/* INFORMATION MOTONEIGE */

.hotel-card__feature {
    margin-top: 18px;

    padding-top: 14px;

    border-top: 1px solid #dce5e9;

    color: var(--hotel-navy);

    font-size: 12px;
    font-weight: 800;

    line-height: 1.4;
}


/* =========================================================
   STANDARDISATION DES DIMENSIONS
   ========================================================= */

.sultants-hotels .hotel-wrap {
    width: min(1160px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.sultants-hotels .hotel-intro,
.sultants-hotels .hotel-list,
.sultants-hotels .hotel-nearby,
.sultants-hotels .hotel-note,
.sultants-hotels .hotel-cta {
    width: 100%;
}


/* Même rythme vertical que les autres pages */

.sultants-hotels .hotel-intro {
    padding-top: 105px;
    padding-bottom: 105px;
}

.sultants-hotels .hotel-list {
    padding-top: 105px;
    padding-bottom: 105px;
}

.sultants-hotels .hotel-nearby {
    padding-top: 105px;
    padding-bottom: 105px;
}

.sultants-hotels .hotel-note {
    padding-top: 90px;
    padding-bottom: 90px;
}

.sultants-hotels .hotel-cta {
    padding-top: 100px;
    padding-bottom: 100px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .sultants-hotels .hotel-wrap {
        width: calc(100% - 36px);
    }

    .sultants-hotels .hotel-intro {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .sultants-hotels .hotel-list,
    .sultants-hotels .hotel-nearby {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .sultants-hotels .hotel-note {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .sultants-hotels .hotel-cta {
        padding-top: 75px;
        padding-bottom: 75px;
    }

}


/* =========================================
   FIN HEBERGEMENT
   ========================================= */

/* =========================================
   MESSAGE PRESIDENT
   ========================================= */
.sultants-president{
--pres-navy:#071b28;
--pres-navy2:#0d3045;
--pres-gold:#d9a441;
--pres-ice:#eef5f8;
--pres-ink:#142631;
--pres-muted:#667781;


font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
color:var(--pres-ink);
line-height:1.6;
background:#fff;


}

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

.sultants-president a{
text-decoration:none;
}

.pres-wrap{
width:min(1160px,calc(100% - 48px));
margin:auto;
}



/* =========================================================
HERO
========================================================= */

.pres-hero{
min-height:650px;
position:relative;
display:flex;
align-items:center;
overflow:hidden;
color:#fff;
background:var(--pres-navy);
}

.pres-hero__bg{
position:absolute;
inset:0;


background-image:url("/images/motoneige-1.jpg");
background-size:cover;
background-position:center;

}

/* =========================================================
ADDED
========================================================= */
.pres-hero{
    min-height:650px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;

    background:
        linear-gradient(
            90deg,
            rgba(3,17,27,.85),
            rgba(3,17,27,.45) 70%
        ),
        linear-gradient(
            0deg,
            rgba(3,17,27,.75),
            transparent 55%
        ),
        url("/images/motoneige-1.jpg") center/cover;
}


/* =========================================================
ADDED SECTION
========================================================= */

.pres-hero__overlay{
position:absolute;
inset:0;

background:
    linear-gradient(
        90deg,
        rgba(3,17,27,.94),
        rgba(3,17,27,.45) 70%
    ),
    linear-gradient(
        0deg,
        rgba(3,17,27,.75),
        transparent 55%
    );

}

.pres-hero__content{
position:relative;
z-index:2;
padding:100px 0;
}

.pres-kicker{
font-size:12px;
font-weight:900;
letter-spacing:3px;
color:var(--pres-gold);
margin-bottom:20px;
}

.pres-hero h1{
font-size:clamp(58px,8vw,100px);
line-height:.9;
letter-spacing:-5px;
margin:0 0 30px;
}

.pres-hero h1 span{
color:var(--pres-gold);
}

.pres-hero p{
max-width:680px;
font-size:21px;
line-height:1.55;
opacity:.9;
margin:0;
}

.pres-hero__bottom{
position:absolute;
bottom:0;
left:0;
right:0;
z-index:3;

padding:18px max(24px,calc((100% - 1160px)/2));

background:rgba(6,22,33,.82);

font-size:10px;
letter-spacing:2px;
font-weight:900;

}

/* =========================================================
STATS
========================================================= */

.pres-stats{
position:relative;
margin-top:-55px;
z-index:5;

display:grid;
grid-template-columns:repeat(3,1fr);

background:#fff;

box-shadow:0 18px 45px rgba(6,22,33,.12);

}

.pres-stats div{
text-align:center;
padding:30px;
border-right:1px solid #e4eaed;
}

.pres-stats div:last-child{
border-right:0;
}

.pres-stats strong{
display:block;
font-size:50px;
line-height:1;
color:var(--pres-navy);
}

.pres-stats span{
display:block;
margin-top:8px;

font-size:10px;
letter-spacing:2px;
font-weight:900;
color:var(--pres-muted);

}

/* =========================================================
SECTIONS
========================================================= */

.pres-section{
padding:105px 0;
}

.pres-intro{
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:start;
}

.pres-intro h2,
.pres-two-cols h2{
font-size:clamp(42px,5vw,68px);
line-height:.98;
letter-spacing:-4px;
margin:0;
}

.pres-intro h2 span,
.pres-two-cols h2 span,
.pres-access h2 span,
.pres-thanks h2 span{
color:var(--pres-gold);
}

.pres-copy{
font-size:17px;
color:var(--pres-muted);
}

.pres-copy p{
margin:0 0 22px;
}

.pres-copy strong{
color:var(--pres-ink);
}

/* =========================================================
DARK HISTORY
========================================================= */

.pres-dark{
padding:105px 0;
background:var(--pres-navy);
color:#fff;
}

.pres-history{
display:grid;
grid-template-columns:.7fr 1.3fr;
gap:90px;
align-items:start;
}

.pres-history__number{
font-size:clamp(80px,12vw,150px);
font-weight:900;
line-height:.8;
letter-spacing:-8px;
color:var(--pres-gold);
}

.pres-history__content h2{
font-size:clamp(42px,5vw,68px);
line-height:.98;
letter-spacing:-4px;
margin:0 0 30px;
}

.pres-history__content h2 span{
color:var(--pres-gold);
}

.pres-history__content p{
max-width:700px;
color:rgba(255,255,255,.7);
font-size:17px;
margin:0 0 22px;
}

/* =========================================================
TWO COLUMNS
========================================================= */

.pres-two-cols{
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
}

/* =========================================================
ACCESS
========================================================= */

.pres-access{
padding:105px 0;
background:var(--pres-navy2);
color:#fff;
}

.pres-access__inner{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:80px;
align-items:center;
}

.pres-access h2{
max-width:700px;
font-size:clamp(42px,5vw,68px);
line-height:.98;
letter-spacing:-4px;
margin:0 0 25px;
}

.pres-access p{
max-width:700px;
color:rgba(255,255,255,.72);
font-size:17px;
}

.pres-access strong{
color:#fff;
}

.pres-access__card{
padding:38px;
background:#fff;
color:var(--pres-ink);

box-shadow:0 25px 60px rgba(0,0,0,.18);

display:flex;
flex-direction:column;
align-items:flex-start;

}

.pres-access__icon{
width:54px;
height:54px;

display:flex;
align-items:center;
justify-content:center;

margin-bottom:25px;

background:var(--pres-gold);
color:var(--pres-navy);

font-size:25px;

}

.pres-access__card small{
font-size:10px;
letter-spacing:2px;
font-weight:900;
color:var(--pres-gold);
}

.pres-access__card &gt; strong{
color:var(--pres-navy);
font-size:27px;
line-height:1.15;
margin:12px 0 25px;
}

/* =========================================================
BUTTONS
========================================================= */

.pres-btn{
display:inline-flex;
align-items:center;
justify-content:center;

min-height:52px;
padding:0 24px;

background:var(--pres-gold);
color:#17242b;

font-size:13px;
font-weight:900;

transition:.25s;

}

.pres-btn:hover{
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(0,0,0,.15);
}

.pres-btn--dark{
background:var(--pres-navy);
color:#fff;
}

/* =========================================================
INFORMATION BLOCK
========================================================= */

.pres-info{
display:grid;
grid-template-columns:80px 1fr;
gap:35px;

padding:45px 0;

border-top:1px solid #dbe3e7;
border-bottom:1px solid #dbe3e7;

}

.pres-info__number{
color:var(--pres-gold);
font-size:18px;
font-weight:900;
}

.pres-info h3{
margin:0 0 12px;
font-size:32px;
color:var(--pres-navy);
}

.pres-info p{
max-width:750px;
color:var(--pres-muted);
font-size:17px;
}

.pres-link{
color:var(--pres-navy);
font-weight:900;
}

.pres-link:hover{
color:var(--pres-gold);
}

/* =========================================================
CLOSING
========================================================= */

.pres-closing{
padding:110px 0;

background:
    linear-gradient(
        90deg,
        rgba(6,26,39,.96),
        rgba(6,26,39,.82)
    ),
    url("/images/sentier-2.jpg")
    center/cover;

color:#fff;

}

.pres-closing__quote{
font-family:Georgia,serif;
font-size:100px;
line-height:.5;
color:var(--pres-gold);
margin-bottom:30px;
}

.pres-closing p{
max-width:900px;
font-size:clamp(27px,4vw,45px);
line-height:1.15;
letter-spacing:-1px;
margin:0 0 50px;
}

.pres-closing__signature{
display:flex;
flex-direction:column;
gap:8px;
}

.pres-closing__signature span{
color:rgba(255,255,255,.65);
}

.pres-closing__signature strong{
color:var(--pres-gold);
font-size:18px;
}

/* =========================================================
THANK YOU
========================================================= */

.pres-thanks{
padding:90px 0;
background:var(--pres-ice);
}

.pres-thanks h2{
max-width:700px;

font-size:clamp(48px,6vw,78px);
line-height:.95;
letter-spacing:-5px;

margin:0 0 30px;

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:800px){

.pres-wrap{
    width:min(100% - 36px,1160px);
}

.pres-hero{
    min-height:620px;
}

.pres-hero h1{
    font-size:clamp(55px,15vw,78px);
    letter-spacing:-4px;
}

.pres-hero p{
    font-size:17px;
}

.pres-stats{
    margin:-25px 18px 0;
    grid-template-columns:1fr;
}

.pres-stats div{
    border-right:0;
    border-bottom:1px solid #e4eaed;
    padding:22px;
}

.pres-stats div:last-child{
    border-bottom:0;
}

.pres-section,
.pres-dark,
.pres-access,
.pres-closing{
    padding:75px 0;
}

.pres-intro,
.pres-two-cols,
.pres-history,
.pres-access__inner{
    grid-template-columns:1fr;
    gap:40px;
}

.pres-history__number{
    font-size:90px;
}

.pres-access__card{
    padding:30px;
}

.pres-info{
    grid-template-columns:45px 1fr;
    gap:20px;
}

.pres-closing p{
    font-size:30px;
}


}

@media(max-width:480px){


.pres-hero__content{
    padding:80px 0;
}

.pres-hero__bottom{
    font-size:8px;
    letter-spacing:1.5px;
}

.pres-stats strong{
    font-size:42px;
}

.pres-intro h2,
.pres-two-cols h2,
.pres-access h2{
    letter-spacing:-2px;
}

.pres-access__card{
    padding:25px;
}

.pres-closing p{
    font-size:26px;
}

}
.pres-kicker {
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
}


/* =========================================
   FIN MESSAGE
   ========================================= */

/* =========================================
   CONSEIL-1
   ========================================= */

:root{
  --navy:#0b1b33;
  --gold:#d9b15f;
  --ink:#e5e7eb;
  --muted:#9fa6b2;
}

/* WRAPPER */
.wrap{
  width:90%;
  max-width:1100px;
  margin:0 auto;
}

/* HERO */
.signals-hero{
  padding:140px 0 120px;
  background-image:
    linear-gradient(135deg,rgba(5,8,20,0.85),rgba(11,27,51,0.85)),
    url("https://images.unsplash.com/photo-1518173946687-a4c1e1d7a3a1?auto=format&amp;fit=crop&amp;w=1600&amp;q=80");
  background-size:cover;
  background-position:center;
  color:#fff;
}

.kicker{
  color:var(--gold);
  font-size:15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.signals-hero h2{
  font-size:clamp(42px,5vw,70px);
  line-height:.95;
  letter-spacing:-3px;
  margin-bottom:22px;
}

.signals-hero h2 span{
  color:var(--gold);
}

.lead{
  max-width:640px;
  font-size:18px;
  opacity:.9;
  margin-bottom:26px;
}

/* SECTION SIGNES */
.signals-grid-section{
  padding:80px 0 110px;
  background:radial-gradient(circle at top,#1b2a45 0,#050814 55%);
  color:#fff;
}

.section-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:34px;
}

/* GRID */
.signals-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.signal-item{
  text-align:center;
  background:rgba(255,255,255,0.05);
  padding:30px 20px;
  border-radius:12px;
  transition:.3s;
}

.signal-item:hover{
  background:rgba(255,255,255,0.12);
  transform:translateY(-4px);
}

/* ICONES */
.icon-circle{
  width:90px;
  height:90px;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  margin:0 auto 18px;
  color:var(--gold);
}

.signal-item h4{
  font-size:22px;
  font-weight:800;
  color:var(--gold);
  margin-bottom:10px;
}

.signal-item p{
  font-size:16px;
  color:var(--ink);
}

/* NOTE */
.signals-note{
  margin-top:40px;
  font-size:16px;
  color:var(--muted);
  text-align:center;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

/* RESPONSIVE */
@media(max-width:900px){
  .signals-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .signals-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================
   FIN CONSEIL-1
   ========================================= */


/* =========================================
   CONSEIL-2
   ========================================= */

:root{
  --navy:#0b1b33;
  --gold:#d9b15f;
  --ink:#e5e7eb;
  --muted:#9fa6b2;
}

/* WRAPPER */
.wrap{
  width:90%;
  max-width:1100px;
  margin:0 auto;
}

/* HERO AVEC BACKGROUND */
.signals-hero{
  position:relative;
  padding:140px 0 120px;
  background-image:
    linear-gradient(135deg,rgba(5,8,20,0.85),rgba(11,27,51,0.85)),
    url("https://images.unsplash.com/photo-1518173946687-a4c1e1d7a3a1?auto=format&amp;fit=crop&amp;w=1600&amp;q=80");
  background-size:cover;
  background-position:center;
  color:#fff;
}

.signals-hero .kicker{
  color:var(--gold);
  font-size:15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.signals-hero h2{
  font-size:clamp(42px,5vw,70px);
  line-height:.95;
  letter-spacing:-3px;
  margin-bottom:22px;
}

.signals-hero h2 span{
  color:var(--gold);
}

.signals-hero .lead{
  max-width:640px;
  font-size:18px;
  opacity:.9;
  margin-bottom:26px;
}

/* SECTION SIGNES */
.signals-grid-section{
  padding:80px 0 110px;
  background:radial-gradient(circle at top,#1b2a45 0,#050814 55%);
  color:#fff;
}

.section-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:34px;
}

/* GRID MODERNE */
.signals-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.signal-item{
  text-align:center;
  background:rgba(255,255,255,0.05);
  padding:30px 20px;
  border-radius:12px;
  transition:.3s;
}

.signal-item:hover{
  background:rgba(255,255,255,0.12);
  transform:translateY(-4px);
}

.signal-item img{
  width:110px;
  margin-bottom:18px;
  opacity:.95;
}

.signal-item h4{
  font-size:22px;
  font-weight:800;
  color:var(--gold);
  margin-bottom:10px;
}

.signal-item p{
  font-size:16px;
  color:var(--ink);
}

/* NOTE */
.signals-note{
  margin-top:40px;
  font-size:16px;
  color:var(--muted);
  text-align:center;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

/* RESPONSIVE */
@media(max-width:900px){
  .signals-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .signals-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================
   FIN CONSEIL-2
   ========================================= */


/* =========================================
   HISTORIQUE
   ========================================= */

.history-hero{
    min-height:570px;
    position:relative;
    display:flex;
    align-items:center;
    color:#fff;
    background:
    url("/images/montagne-3.jpg")
    center/cover;
}

.history-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(7,27,40,.90),
        rgba(7,27,40,.40)
    );
}

.history-hero .wrap{
    position:relative;
    z-index:2;
}

.history-hero h1{
    font-size:clamp(55px,8vw,90px);
    line-height:.95;
    letter-spacing:-3px;
    margin-bottom:20px;
}

.history-hero em{
    color:#d9a441;
    font-style:normal;
}

.history-hero p{
    max-width:700px;
    font-size:20px;
}

.history-text{
    font-size:18px;
    color:#667781;
    max-width:900px;
}

.history-timeline{
    max-width:900px;
}

.timeline-item{
    position:relative;
    border-left:3px solid #d9a441;
    padding-left:35px;
    padding-bottom:45px;
}

.timeline-item:before{
    content:"";
    width:18px;
    height:18px;
    border-radius:50%;
    background:#d9a441;
    position:absolute;
    left:-10px;
    top:4px;
}

.timeline-item span{
    color:#d9a441;
    font-weight:900;
    display:block;
    margin-bottom:6px;
}

.timeline-item h3{
    margin:0 0 10px;
    font-size:28px;
}

.history-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.history-card{
    padding:30px;
    background:#f7f9fa;
    border:1px solid #e5ebef;
}

.history-card h3{
    color:#071b28;
    margin-bottom:12px;
}

/* =========================================
   FIN HISTORIQUE
   ========================================= */

/* =========================================
    LIENS
   ========================================= */

/* Style pour l'en-tête */
.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.header h1 {
    margin: 0;
    font-size: 2em;
}

/* Style pour la section principale */
.main-section {
    max-width: 800px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.main-section h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #333;
}

.main-section h3 {
    font-size: 1.2em;
    color: #005fc9;
    margin-top: 20px;
}

/* Style des listes */
ul {
    list-style-type: none;
    padding-left: 0;
}

ul li {
    margin-bottom: 10px;
}

ul a {
    color: #005fc9;
    text-decoration: none;
    font-weight: bold;
}

ul a:hover {
    color: #003366;
    text-decoration: underline;
}

/* Style spécifique aux liens */
.manufacturer-links li,
.general-snowmobile-links li,
.trail-conditions li,
.weather-links li {
    padding: 8px;
    background-color: #f4f4f4;
    border-radius: 4px;
}

.manufacturer-links li a,
.general-snowmobile-links li a,
.trail-conditions li a,
.weather-links li a {
    color: #007bff;
    font-size: 1.1em;
}

.manufacturer-links li a:hover,
.general-snowmobile-links li a:hover,
.trail-conditions li a:hover,
.weather-links li a:hover {
    color: #003366;
}

/* Style pour le pied de page */
.footer {
    text-align: center;
    padding: 15px 0;
    background: #333;
    color: #fff;
    margin-top: 20px;
}

.footer p {
    margin: 0;
    font-size: 1em;
}


/* =========================================
   FIN LIENS
   ========================================= */

/* =========================================
   STATIONEMENT
   ========================================= */
/* =========================================================
   LES SULTANS — STATIONNEMENT
   ========================================================= */

.sultants-parking {
    --park-navy: #071b28;
    --park-gold: #d9a441;
    --park-ice: #eef5f8;
    --park-ink: #142631;
    --park-muted: #667781;

    padding: 90px 0;

    background: #fff;

    font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--park-ink);
    line-height: 1.6;
}

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

.sultants-parking .park-wrap {
    width: min(900px, calc(100% - 48px));
    margin: 0 auto;
}

.sultants-parking .park-kicker {
    margin-bottom: 14px;

    color: var(--park-gold);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.sultants-parking h2 {
    margin: 0 0 26px;

    color: var(--park-navy);

    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 900;

    line-height: 1.05;
    letter-spacing: -1.5px;
}

.sultants-parking .park-lead {
    max-width: 680px;

    margin: 0 0 40px;

    color: var(--park-muted);

    font-size: 18px;
}

.sultants-parking .park-lead strong {
    color: var(--park-ink);
}


/* =========================================================
   BLOC MIS EN VALEUR
   ========================================================= */

.sultants-parking .park-highlight {
    position: relative;

    padding: 38px 40px;

    margin-bottom: 45px;

    background: var(--park-ice);

    border-left: 4px solid var(--park-gold);
    border-radius: 4px;
}

.sultants-parking .park-highlight__badge {
    display: inline-block;

    margin-bottom: 14px;

    padding: 5px 12px;

    background: var(--park-gold);
    color: #fff;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;

    border-radius: 3px;
}

.sultants-parking .park-highlight h3 {
    margin: 0 0 16px;

    color: var(--park-navy);

    font-size: 24px;
    font-weight: 900;

    letter-spacing: -.5px;
}

.sultants-parking .park-highlight p {
    margin: 0 0 14px;

    color: var(--park-ink);

    font-size: 16px;
}

.sultants-parking .park-highlight p:last-of-type {
    margin-bottom: 22px;
}

.sultants-parking .park-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 13px 26px;

    background: var(--park-navy);
    color: #fff;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .3px;

    border-radius: 4px;

    transition: transform .2s ease, background .2s ease;
}

.sultants-parking .park-btn:hover {
    background: var(--park-gold);

    color: var(--park-navy);

    transform: translateY(-3px);
}


/* =========================================================
   GALERIE PHOTOS
   ========================================================= */

.sultants-parking .park-gallery {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.sultants-parking .park-thumb {
    position: relative;

    display: block;

    width: 100%;
    padding: 0;

    border: 0;
    border-radius: 6px;

    overflow: hidden;

    cursor: pointer;
    text-decoration: none;

    box-shadow: 0 10px 30px rgba(7, 27, 40, .12);
}

.sultants-parking .park-thumb img {
    display: block;

    width: 100%;
    height: 260px;

    object-fit: cover;

    transition: transform .35s ease;
}

.sultants-parking .park-thumb:hover img,
.sultants-parking .park-thumb:focus-visible img {
    transform: scale(1.06);
}

.sultants-parking .park-thumb__zoom {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 26px;

    background: rgba(7, 27, 40, .0);
    color: #fff;

    opacity: 0;

    transition: opacity .25s ease, background .25s ease;
}

.sultants-parking .park-thumb:hover .park-thumb__zoom,
.sultants-parking .park-thumb:focus-visible .park-thumb__zoom {
    opacity: 1;

    background: rgba(7, 27, 40, .35);
}


/* =========================================================
   LIGHTBOX (image agrandie) — 100% CSS, sans JavaScript
   S'appuie sur le lien "#park-photo-1" / "#park-photo-2" et la
   pseudo-classe :target : aucune balise <script> requise, donc rien
   qu'un editeur WordPress/Joomla puisse supprimer au collage.
   ========================================================= */

.sultants-parking .park-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;
}

.sultants-parking .park-lightbox:target {
    display: flex;
}

.sultants-parking .park-lightbox__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(4, 14, 22, .92);
}

.sultants-parking .park-lightbox img {
    position: relative;
    z-index: 2;

    max-width: 100%;
    max-height: 90vh;

    border-radius: 6px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);

    pointer-events: none;
}

.sultants-parking .park-lightbox__close {
    position: absolute;

    top: 22px;
    right: 26px;

    z-index: 3;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, .12);
    color: #fff;

    font-size: 18px;
    text-decoration: none;
    line-height: 1;

    border-radius: 50%;

    transition: background .2s ease;
}

.sultants-parking .park-lightbox__close:hover {
    background: var(--park-gold);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .sultants-parking {
        padding: 65px 0;
    }

    .sultants-parking .park-highlight {
        padding: 28px 24px;
    }

    .sultants-parking .park-gallery {
        grid-template-columns: 1fr;
    }

    .sultants-parking .park-gallery img {
        height: 220px;
    }

}



/* =========================================
   FIN STATIONEMENT
   ========================================= */

/* =========================================================
   LES SULTANS — LIENS UTILES MOTONEIGE
   ========================================================= */

.sultants-liens {
    --liens-navy: #071b28;
    --liens-navy2: #0d3045;
    --liens-gold: #d9a441;
    --liens-ice: #eef5f8;
    --liens-ink: #142631;
    --liens-muted: #667781;

    padding: 90px 0 60px;

    background: #fff;

    font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--liens-ink);
    line-height: 1.55;
}

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

.sultants-liens a {
    text-decoration: none;
    color: inherit;
}

.sultants-liens .liens-wrap {
    width: min(980px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.sultants-liens .liens-header {
    margin-bottom: 50px;
    text-align: center;
}

.sultants-liens .liens-kicker {
    margin-bottom: 14px;

    color: var(--liens-gold);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.sultants-liens h1 {
    margin: 0 0 18px;

    color: var(--liens-navy);

    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;

    line-height: 1.05;
    letter-spacing: -1.5px;
}

.sultants-liens .liens-lead {
    max-width: 620px;

    margin: 0 auto;

    color: var(--liens-muted);

    font-size: 17px;
}


/* =========================================================
   CATÉGORIES
   ========================================================= */

.sultants-liens .liens-category {
    margin-bottom: 34px;

    padding: 30px 34px;

    background: var(--liens-ice);

    border-radius: 10px;
}

.sultants-liens .liens-category--highlight {
    background: var(--liens-navy);
    color: #fff;
}

.sultants-liens .liens-category__head {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
}

.sultants-liens .liens-icon {
    font-size: 22px;
    line-height: 1;
}

.sultants-liens .liens-category__head h2 {
    margin: 0;

    color: var(--liens-navy);

    font-size: 21px;
    font-weight: 900;

    letter-spacing: -.4px;
}

.sultants-liens .liens-category--highlight h2 {
    color: #fff;
}

.sultants-liens .liens-badge {
    margin-left: auto;

    padding: 4px 11px;

    background: var(--liens-gold);
    color: #17242b;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;

    border-radius: 3px;
}


/* =========================================================
   LISTE DE LIENS
   ========================================================= */

.sultants-liens .liens-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    gap: 8px;
}

.sultants-liens .liens-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 13px 16px;

    background: #fff;

    border-radius: 6px;

    font-size: 15px;
    font-weight: 700;

    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.sultants-liens .liens-category--highlight .liens-list li a {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.sultants-liens .liens-list li a i {
    flex-shrink: 0;

    font-style: normal;
    font-size: 16px;
    color: var(--liens-gold);

    transition: transform .18s ease;
}

.sultants-liens .liens-list li a:hover {
    background: var(--liens-gold);
    color: #17242b;

    transform: translateX(6px);
}

.sultants-liens .liens-category--highlight .liens-list li a:hover {
    background: var(--liens-gold);
    color: #17242b;
}

.sultants-liens .liens-list li a:hover i {
    color: #17242b;
    transform: translateX(3px);
}


/* =========================================================
   PIED DE PAGE
   ========================================================= */

.sultants-liens .liens-footer {
    margin-top: 30px;

    padding: 22px 0;

    text-align: center;

    color: var(--liens-muted);

    font-size: 13px;

    border-top: 1px solid #e2e8ea;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 650px) {

    .sultants-liens {
        padding: 65px 0 45px;
    }

    .sultants-liens .liens-category {
        padding: 24px 20px;
    }

    .sultants-liens .liens-list li a {
        font-size: 14px;
        padding: 12px 14px;
    }

    .sultants-liens .liens-badge {
        margin-left: 0;
    }

    .sultants-liens .liens-category__head {
        flex-wrap: wrap;
    }

}

/* =========================================================
   PAGE 404 Logo- Setup
   ========================================================= */

.custom-404-header {
    width: 100%;
}

.custom-404-logo-container {
    padding: 20px;
}

.custom-404-logo {
    display: block !important;
    width: 100px !important;
    height: auto !important;
    max-width: 100px !important;
}

/* =========================================================
   SULTANS HISTORY
   ========================================================= */
/* CONTENEUR GLOBAL */
.sultans-history{
  --hist-navy:#071b28;
  --hist-navy2:#0d3045;
  --hist-gold:#d9a441;
  --hist-ice:#eef5f8;
  --hist-ink:#142631;
  --hist-muted:#667781;

  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--hist-ink);
  line-height:1.6;
  background:#fff;
}

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

.sultans-history a{
  text-decoration:none;
}

.hist-wrap{
  width:min(1160px,calc(100% - 48px));
  margin:auto;
}

/* HERO HISTORIQUE */
.hist-hero{
  min-height:480px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(3,17,27,.85),
      rgba(3,17,27,.45) 70%
    ),
    url("/images/montagne-3.jpg") center/cover;
}

.hist-hero__content{
  position:relative;
  z-index:2;
  padding:80px 0;
}

.hist-kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:3px;
  color:var(--hist-gold);
  margin-bottom:20px;
  text-transform:uppercase;
}

.hist-hero h1{
  font-size:clamp(42px,6vw,72px);
  line-height:1;
  letter-spacing:-2px;
  margin:0 0 20px;
}

.hist-hero p{
  max-width:680px;
  font-size:18px;
  line-height:1.55;
  opacity:.9;
  margin:0;
}

.hist-hero__bottom{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:3;

  padding:16px max(24px,calc((100% - 1160px)/2));
  background:rgba(6,22,33,.82);

  font-size:10px;
  letter-spacing:2px;
  font-weight:900;
  text-transform:uppercase;
}

/* SECTIONS GÉNÉRALES */
.hist-section{
  padding:60px 0;
}

.hist-section h2{
  font-size:28px;
  margin:10px 0 30px;
}

/* FRISE CHRONOLOGIQUE */
.hist-timeline{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:20px;
}

.hist-item{
  background:var(--hist-ice);
  border-radius:10px;
  padding:20px 22px;
  border:1px solid #dde5ea;
}

.hist-year{
  font-size:13px;
  font-weight:900;
  letter-spacing:2px;
  color:var(--hist-navy2);
  text-transform:uppercase;
  margin-bottom:8px;
}

.hist-item h3{
  font-size:18px;
  margin:0 0 10px;
}

.hist-item p{
  font-size:15px;
  margin:0;
  color:var(--hist-muted);
}

/* SYNTHÈSE */
.hist-summary{
  background:#f7fafc;
}

.hist-summary p{
  max-width:780px;
  font-size:16px;
  color:var(--hist-muted);
}
/* SECTION NOUVEAUTÉS */
.hist-news{
  background:#f9fbfd;
  border-top:1px solid #e3e9ed;
  border-bottom:1px solid #e3e9ed;
}

.hist-news-grid{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
}

.hist-news-item{
  background:#fff;
  border:1px solid #e4eaed;
  border-radius:12px;
  padding:26px 24px;
  box-shadow:0 8px 22px rgba(6,22,33,.06);
  transition:.3s;
}

.hist-news-item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(6,22,33,.10);
}

.hist-news-icon{
  font-size:32px;
  margin-bottom:14px;
}

.hist-news-item h3{
  font-size:20px;
  margin:0 0 12px;
  color:var(--hist-navy2);
}

.hist-news-item p{
  font-size:15px;
  color:var(--hist-muted);
  line-height:1.55;
}

/* =========================================================
   SULTANS 50
   ========================================================= */

/* --- EMBLÈME 50 ANS --- */
.anniv-emblem {
  position: relative;
  display: inline-block;
  margin: 20px 0;
  animation: emblemFloat 5s ease-in-out infinite;
}

/* Cercle principal */
.emblem-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #f7d27a 0%, #c9a24f 45%, #7a5a1f 100%);
  box-shadow: 0 0 25px rgba(247,210,122,0.8), 0 0 60px rgba(247,210,122,0.4);
  border: 3px solid rgba(255,255,255,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: emblemPulse 3s ease-in-out infinite, emblemRotate 18s linear infinite;
}

/* Texte 50 */
.emblem-50 {
  font-size: 42px;
  font-weight: 900;
  color: #1b1b1b;
  text-shadow: 0 0 10px rgba(255,255,255,0.7);
  line-height: 1;
}

/* Texte ANS */
.emblem-years {
  font-size: 16px;
  font-weight: 700;
  color: #1b1b1b;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* --- Étincelles --- */
.spark {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #fff 0%, #f7d27a 60%, transparent 100%);
  border-radius: 50%;
  animation: sparkBlink 2.2s infinite ease-in-out;
}

.spark-1 { top: -10px; left: 20px; animation-delay: 0s; }
.spark-2 { top: 15px; right: -12px; animation-delay: 0.6s; }
.spark-3 { bottom: -10px; left: 50px; animation-delay: 1.2s; }

/* --- Neige légère --- */
.snow {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  animation: snowFall 4s linear infinite;
  opacity: 0.8;
}

.snow-1 { top: -20px; left: 40px; animation-delay: 0s; }
.snow-2 { top: -25px; right: 30px; animation-delay: 1s; }
.snow-3 { top: -30px; left: 70px; animation-delay: 2s; }

/* --- Animations --- */
@keyframes emblemPulse {
  0% { transform: scale(1); box-shadow: 0 0 25px rgba(247,210,122,0.8); }
  50% { transform: scale(1.06); box-shadow: 0 0 45px rgba(247,210,122,1); }
  100% { transform: scale(1); box-shadow: 0 0 25px rgba(247,210,122,0.8); }
}

@keyframes emblemRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes emblemFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes sparkBlink {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes snowFall {
  0% { transform: translateY(0); opacity: 0.9; }
  100% { transform: translateY(25px); opacity: 0; }
}


/* --- Ligne contenant les deux emblèmes --- */
.anniv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px 0;
  position: relative;
}

/* --- EMBLÈME 50 ANS --- */
.anniv-emblem {
  position: relative;
  width: 140px;
  height: 140px;
  animation: emblemFloat 5s ease-in-out infinite;
}

/* Position gauche/droite */
.anniv-emblem.left { transform: translateX(-10px); }
.anniv-emblem.right { transform: translateX(10px); }

/* Cercle principal */
.emblem-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #f7d27a 0%, #c9a24f 45%, #7a5a1f 100%);
  box-shadow: 0 0 25px rgba(247,210,122,0.8), 0 0 60px rgba(247,210,122,0.4);
  border: 3px solid rgba(255,255,255,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: emblemPulse 3s ease-in-out infinite, emblemRotate 18s linear infinite;
}

/* Texte 50 */
.emblem-50 {
  font-size: 42px;
  font-weight: 900;
  color: #1b1b1b;
  text-shadow: 0 0 10px rgba(255,255,255,0.7);
}

/* Texte ANS */
.emblem-years {
  font-size: 16px;
  font-weight: 700;
  color: #1b1b1b;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* --- Étincelles --- */
.spark {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fff 0%, #f7d27a 60%, transparent 100%);
  border-radius: 50%;
  animation: sparkBlink 2.2s infinite ease-in-out;
}

.spark-1 { top: -10px; left: 20px; animation-delay: 0s; }
.spark-2 { top: 15px; right: -12px; animation-delay: 0.6s; }
.spark-3 { bottom: -10px; left: 50px; animation-delay: 1.2s; }

/* --- Neige --- */
.snow {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  animation: snowFall 4s linear infinite;
  opacity: 0.8;
}

.snow-1 { top: -20px; left: 40px; animation-delay: 0s; }
.snow-2 { top: -25px; right: 30px; animation-delay: 1s; }
.snow-3 { top: -30px; left: 70px; animation-delay: 2s; }

/* --- Animations --- */
@keyframes emblemPulse {
  0% { transform: scale(1); box-shadow: 0 0 25px rgba(247,210,122,0.8); }
  50% { transform: scale(1.06); box-shadow: 0 0 45px rgba(247,210,122,1); }
  100% { transform: scale(1); box-shadow: 0 0 25px rgba(247,210,122,0.8); }
}

@keyframes emblemRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes emblemFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes sparkBlink {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes snowFall {
  0% { transform: translateY(0); opacity: 0.9; }
  100% { transform: translateY(25px); opacity: 0; }
}

/* Les Sultans - Atum administrator login */
#atum-login .login-image {
    background-image: url("/images/Les-Sultans.jpg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#atum-login .login-image img {
    visibility: hidden !important;
}

/* --- HEADER LOGO --- */

.container-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.container-header .brand-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.container-header .brand-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(440px, 84vw);
  max-height: 168px;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .container-header .brand-logo img {
    max-width: min(320px, 84vw);
    max-height: 120px;
  }
}

/* ================================
   VERSION 50ᵉ ANNIVERSAIRE
   ================================ */

.history-50 {
  --blue-dark: #001b4c;
  --blue-mid: #003b7a;
  --gold: #d4af37;
  --gold-light: #f7e7b3;
  --text-dark: #2c2c2c;
  --text-light: #f8f9fa;
  --bg-light: #f5f7fa;
}

/* HERO 50ᵉ */
.history-50 .hist-hero {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-mid));
  border: 3px solid var(--gold);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.25);
  position: relative;
}

.history-50 .hist-hero::after {
  content: "50 ANS";
  position: absolute;
  top: -18px;
  right: 20px;
  background: var(--gold);
  color: var(--blue-dark);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 20px;
  letter-spacing: 0.1em;
}

/* Kicker doré */
.history-50 .hist-kicker {
  color: var(--gold);
  font-weight: 600;
}

/* Titres */
.history-50 h1,
.history-50 h2 {
  color: var(--blue-dark);
  letter-spacing: -0.5px;
}

.history-50 .hist-hero h1 {
  color: var(--gold-light);
}

/* Timeline premium */
.history-50 .hist-timeline {
  border-left: 3px solid var(--gold);
}

.history-50 .hist-item::before {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.history-50 .hist-year {
  color: var(--gold);
  font-weight: 700;
}

/* Sections */
.history-50 .hist-section {
  background: var(--bg-light);
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid #e5e5e5;
  margin-bottom: 2.5rem;
}

/* Résumé */
.history-50 .hist-summary {
  background: var(--gold-light);
  border-left: 5px solid var(--gold);
}

/* Futur */
.history-50 .hist-future {
  background: var(--blue-dark);
  color: var(--gold-light);
  border: 2px solid var(--gold);
}

.history-50 .hist-future h2 {
  color: var(--gold-light);
}

/* Nouveautés */
.history-50 .hist-news-item {
  border: 2px solid var(--gold);
  background: #fff;
}

.history-50 .hist-news-icon {
  color: var(--gold);
  font-size: 1.6rem;
}

/* Effet subtil doré sur hover */
.history-50 .hist-item:hover h3 {
  color: var(--gold);
  transition: 0.3s;
}

/* Responsive */
@media (max-width: 768px) {
  .history-50 .hist-hero::after {
    right: 10px;
    top: -14px;
    font-size: 0.75rem;
  }
}
.badge-50 {
  background: var(--gold);
  color: var(--blue-dark);
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 14px;
  margin-left: 10px;
}