:root{
  --red:#E03C3F;
  --white:#FFFFFF;
  --blue:#38378B;
  --mint:#06FFA8;
  --hero:#8CA9FF; /* bleu clair fond hero (d’après maquette) */
  --header:#F1F1F1;
  --radius:22px;

  --c-bg: #8FA2FF;      /* fond bleu/violet actuel de ton hero */
  --c-dark: #38378B;    /* bleu foncé de ta charte */
  --c-white: #ffffff;
  --c-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.only-mobile { display:none; }
@media (max-width: 956px){
  .only-desktop { display:none; }
  .only-mobile  { display:inline; }
}
/*Boutons page accueil du site*/
.steps{
  width: min(800px, 92vw);
  margin: 40px auto 0;
  position: relative;
  display: grid;
  gap: 36px;
}

.step{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

.step-badge{
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-dark);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1;
  box-shadow: var(--c-shadow);
  z-index: 1;
}

.step-label{
  background: var(--c-white);
  color: var(--c-dark);
  font-weight: 700;
  font-size: clamp(16px, 2.6vw, 26px);
  padding: 14px 26px 14px 38px; /* pour chevauchement côté gauche */
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--c-shadow);
  margin-left: -30px;
  z-index: 0;
}

/* Étape 3 inversée */
.step--reverse{
  flex-direction: row-reverse; /* inverse ordre badge et label */
  
}

.step--reverse .step-label{
  padding: 14px 38px 14px 26px; /* espace à droite */
  margin-left: 0;
  margin-right: -30px; /* chevauchement côté droit */
}
/* tailles différentes pour chaque étape */
.step:nth-child(1) .step-badge {
  width: 110px;
  height: 110px;
  font-size: clamp(28px, 5vw, 56px);
}

.step:nth-child(2) .step-badge {
  width: 132px;
  height: 132px;
  font-size: clamp(32px, 5.5vw, 64px);
}

.step:nth-child(3) .step-badge {
  width: 158px;
  height: 158px;
  font-size: clamp(36px, 6vw, 72px);
}

/* placements (comme sur ta maquette) */
.step--left{
  justify-self: start;
  transform: translateX(0);
}
.step--center{
  justify-self: center;
  transform: translateY(8px);
  padding-left: 230px;
  
}
.step--right{
  justify-self: end;
  transform: translateX(0);
}
/*Fin boutons rondes*/

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#111;
  background:var(--hero);
  display:grid;
  grid-template-rows: auto 1fr auto; /* header, contenu, footer */
}

/* Header */
.site-header{
  background:var(--header);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header .container{
  max-width:1200px; margin:0 auto; padding:10px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-weight:700; letter-spacing:.5px; }

/* Actions header */
.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{ border:none; background:#000; color:#fff; width:28px; height:28px; border-radius:6px; }

/* HERO */
.hero{ padding:40px 0 56px; background:var(--hero); }
.hero .container{ max-width:1100px; margin:0 auto; padding:0 18px; }
.hero-title{
  color:#fff; text-align:center; font-size:48px; line-height:1.16;
  font-weight:800; margin:10px 0 26px;
}

/* Barre de recherche */
.searchbar{
  background:#fff; border-radius:999px; display:flex; align-items:center;
  gap:14px; padding:10px 14px; max-width:760px; margin:0 auto;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.search-icon{ margin-left:6px; }
.input-wrap{ position:relative; flex:1; }
.searchbar input{
  width:100%; border:none; outline:none; font-size: clamp(12px, 2vw, 16px); padding:10px 4px;
}
.divider{ width:1px; height:28px; background:#E6E6E6; margin-left: auto; }

/* Suggestions dropdown */
.suggest{
  position:absolute; top:100%; left:0; right:0;
  background:#fff; list-style:none; margin:6px 0 0; padding:6px 0;
  border-radius:12px; box-shadow:0 12px 24px rgba(0,0,0,.14);
  max-height:260px; overflow:auto; z-index:20;
}
.suggest li{
  padding:10px 12px; cursor:pointer; font-size:15px;
}
.suggest li:hover{ background:#f6f6f6; }
/* Bouton LOGIN */
.btn-login{
  background:var(--red); color:#fff; text-decoration:none;
  padding:8px 14px; border-radius:999px; font-weight:600;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  /*font-size: clamp(12px, 2vw, 16px);*/
}
/* Bouton TROUVER */
.btn-find{
  display:block; margin:22px auto 0; background:var(--red); color:#fff;
  border:none; font-weight:600; font-size:18px; letter-spacing:.5px;
  padding:14px 34px; border-radius:999px; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  /*font-size: clamp(12px, 2vw, 16px);*/
}
/* grille 3 au-dessus + 1 en dessous */

/* style des blocs ovales */

.hero .row {
  display:flex;
  justify-content:center;
  gap:20px;
  margin:15px 0;
  flex-wrap:wrap; /* au cas où ; reste cohérent */
}

.chip {
  appearance: none;
  background: #38378B;
  cursor: pointer;
  color: #fff;
  width: 230px;            /* largeur fixe */
  text-align: center;      /* texte centré */
  padding: 12px 0;         /* hauteur uniforme */
  border-radius: 999px;    /* ovale */
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0,0,0,.15);
  border: 0;
}


/* Footer plus large (haut) et gris, toujours en bas */
footer{
  background:var(--header); border-top:1px solid rgba(0,0,0,.06);
  padding:22px 20px; /* plus haut qu’avant */
}
footer p{ margin:0; text-align:center; color:#222; font-size: 13px; }

/*===================================================================================================================*/

/*La partie affichage pour la page aprés la recherche*/
.container{ max-width:1200px; margin:0 auto; padding:0 18px; }


/* Liste : espace entre blocs */
.pro-list {
  display: flex;
  flex-direction: column;
  gap: 40px;        /* augmente l’écart vertical */
  padding: 20px 0 40px;
}

/* Carte = 4 colonnes : photo | infos | vidéo | bouton */
.pro-card{
  background:#fff;
  border-radius:28px;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  display:grid;
  /* NE PAS forcer start ici */
  align-items: stretch;             /* <— important */
  gap:20px;
  padding:20px;
  grid-template-columns:260px 1.5fr 240px 180px;
  grid-template-areas:"photo info video cta";
}

/* 1) Photo portrait, non déformée (recadrage OK) */
.pro-photo{ grid-area:photo;  }
.pro-photo img{
  width:100%; aspect-ratio:3/4;      /* portrait */
  object-fit:cover;                   /* pas de déformation */
  display:block; border-radius:22px;
}


/* 2) Infos */
.pro-info{ grid-area:info; padding:0 6px; color:#1b1b1b; }
.pro-name{ margin:0 0 8px; font-size:26px; font-weight:800; }
.pro-spec{ color:#38378B; font-weight:700; margin-bottom:10px; }
.pro-desc {
  color: #3f3f3f;
  line-height: 1.45;
  font-size: 1.05rem;   /* augmente légèrement la taille */
  max-width: 95%;       /* laisse plus d’espace dans la colonne */
}
.pro-info .favori {
  top: 10px;
  right: 10px;          /* passe à left:10px si tu le veux à gauche */
  z-index: 2;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 2px 6px rgba(6, 6, 6, 0.25));
  transition: transform .15s ease, opacity .15s ease;
}
.pro-info .favori:hover { transform: scale(1.1); }
.pro-info .favori.ajoute { color: rgb(12, 12, 11); transform: scale(1.15); }


/* 3) Vidéo (vignette 16:9) */
/* même gabarit pour lien vidéo ET placeholder */
.pro-video,
.pro-video.placeholder{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;     /* <- ton format souhaité */
  max-height: 180px;
  border-radius: 18px;
  overflow: hidden;
  background: #000;         /* évite les bordures blanches */
}

/* l'image occupe tout l'espace du cadre */
.pro-video img,
.pro-video.placeholder img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* optionnel: largeur de la colonne vidéo */
.pro-video-col{
    display: flex;
  align-items: center;     /* centre verticalement dans la colonne */
  justify-content: center;
  width: clamp(240px, 32vw, 200px);
}


/* 4) Bouton dans sa colonne, centré verticalement et aligné à droite */
.pro-cta-col {
  grid-area: cta;
  display: flex;
  align-items: center;     /* centre verticalement */
  justify-content: center; /* centre horizontalement */
}

.pro-cta {
  background: #E03C3F;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  white-space: nowrap;
  /*font-size: 0.95rem;*/
}

/* Langue choix*/
/* Sélecteur de langue dans le header */
.lang-switch {
  display: none;
  gap: 6px;
  background: #fff;
  padding: 4px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.lang-btn {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #38378B; /* bleu foncé */
  border-radius: 14px;
  transition: all .2s ease-in-out;
}

.lang-btn:hover {
  background: rgba(56, 55, 139, 0.08);
}

.lang-btn.active {
  background: #38378B; /* bleu foncé */
  color: #fff;
}
 a {
      text-decoration: none;
    }


    /* Compact */
.pro-card--sm{
  --pro-card-pad: 12px;
  --pro-card-gap: 10px;
  --pro-avatar:   72px;
  --pro-title:    16px;
  --pro-lines:     2;
}

/* Large */
.pro-card--lg{
  --pro-card-pad: 22px;
  --pro-card-gap: 18px;
  --pro-avatar:  100px;
  --pro-title:    20px;
  --pro-lines:     4;
}

.results-title, .results-meta, .result-count{

  color: #F1F1F1;
  text-align: center;
}


.btn-logo {
  --bs-btn-bg:#38378B;
  --bs-btn-border-color:#38378B;
  --bs-btn-hover-bg:#2f2e77;
  --bs-btn-hover-border-color:#2f2e77;
  --bs-btn-active-bg:#24235e;
  --bs-btn-active-border-color:#24235e;
  --bs-btn-color:#fff; /* blanc par défaut */
  --bs-btn-focus-shadow-rgb:56,55,139; /* halo focus */
}

/* On force la couleur du texte à blanc dans tous les états */
.btn-logo,
.btn-logo:hover,
.btn-logo:active,
.btn-logo:focus,
.btn-logo:focus-visible {
  color: #fff !important;
}


/* Menu compact, largeur auto comme dans ta maquette */
.help-menu{
  min-width:auto;           /* override Bootstrap */
  width:max-content;        /* s’adapte au contenu */
  max-width:92vw;           /* borne mobile */
  border-radius:12px;
  padding:8px;
}
.help-menu .dropdown-item{ padding:10px 14px; white-space:nowrap; }
.help-menu .dropdown-item + .dropdown-item{ margin-top:6px; } /* petits espacements */

@media (min-width:576px){
  .help-menu{ max-width:360px; } /* borne desktop */
}



/* Taille tactile du bouton “?” */
.question-btn{ width:38px; height:38px; font-size:22px; font-weight:700; line-height:1; padding:0; }

/* Menu plus étroit (recommandé) */
.offcanvas-slim{ --bs-offcanvas-width: clamp(240px, 80vw, 320px); }

/* Option: largeur calée au titre (plus “compacte”) */
/* .offcanvas-slim{ --bs-offcanvas-width: fit-content; max-width: min(90vw, 360px); } */

/* Fallback minimal sans Bootstrap */
.d-none { display: none !important; }
.d-sm-inline { display: none !important; }
.d-sm-none { display: inline !important; }
.text-nowrap { white-space: nowrap !important; }

@media (min-width: 576px) {
  .d-sm-inline { display: inline !important; }
  .d-sm-none { display: none !important; }
}





/* ==== VISUEL COMMUN POUR TOUS LES MENUS ==== */
.menu-panel {
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  min-width:230px;
  padding:8px 0;
}

/* Items menu principal (li custom OU .dropdown-item Bootstrap) */
.menu-panel > li,
.menu-panel .dropdown-item {
  padding:12px 18px;
  font-size:16px;
  line-height:1.25;
  white-space:nowrap;
  cursor:pointer;
  transition:background 0.2s ease;
}

.menu-panel > li + li,
.menu-panel .dropdown-item + .dropdown-item {
  border-top:1px solid #f1f1f1;
}

.menu-panel > li:hover,
.menu-panel .dropdown-item:hover {
  background:#f8f9fa; /* juste fond gris clair */
}

.menu-panel a { 
  color:inherit; 
  text-decoration:none; 
  display:block; 
  cursor:pointer; 
}

/* ==== MENU “BURGER” CUSTOM ==== */
.menu-wrap { position:relative; }

.dropdown-menu-custom {
  position:absolute;
  top:calc(100% + 8px);
  right:0;                
  list-style:none;
  margin:0;
  display:none;            /* fermé par défaut */
  z-index:1100;
}

.dropdown-menu-custom.is-open { display:block; }

/* Sous-menu */
.has-submenu .submenu-toggle {
  width:100%; 
  text-align:left; 
  background:none; 
  border:0;
  padding:.55rem 1rem; 
  font-weight:400;
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  cursor:pointer;
}

.submenu {
  list-style:none; 
  margin:0; 
  padding:0 0 .5rem 0; 
}

.submenu > li {
  padding:.4rem 1rem .4rem 1.5rem; 
  cursor:pointer;
  transition:background 0.2s ease;
}

.submenu > li:hover {
  background:#fff; /* juste fond gris clair */
}

.submenu[hidden] { display:none; }

/* ==== MENU “?” BOOTSTRAP ==== */
.dropdown-menu.menu-panel { 
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  min-width:230px;
  padding:8px 0;
}

/* Sécurité : que rien ne coupe les menus */
.site-header, 
.header-actions, 
.menu-wrap, 
.dropdown { 
  overflow:visible; 
}

/* Bouton avatar (menu principal) */
#btnMenu {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* enlève flash bleu sur mobile */
  padding-left: 10px;
}

/* Supprime le halo/cadre bleu par défaut */
#btnMenu:focus,
#btnMenu:active {
  outline: none;
  box-shadow: none;
}

/* Si tu veux garder une indication focus clavier accessible */
#btnMenu:focus-visible {
  outline: 2px solid var(--color-blue); /* ou une couleur douce */
  outline-offset: 3px;
  border-radius: 50%;
  
}
.footer-top-links {
  color: #38378B;
  font-weight: 600;
}
.footer-top-links a {
  color: inherit; /* hérite du bleu foncé */
}








/* ===== Personnalisation bandeau cookies (CookieConsent v3) ===== */
#cc-main{
  --cc-font-family: 'Montserrat', sans-serif;
  /* Couleurs de texte */
  --cc-primary-color: #38378B;   /* titres/links -> bleu foncé */
  --cc-secondary-color: #38378B; /* paragraphe du bandeau */

  /* Bouton principal (Accepter tout) -> rouge arrondi */
  --cc-btn-border-radius: 22px;
  --cc-btn-primary-bg: #E03C3F;
  --cc-btn-primary-color: #FFFFFF;
  --cc-btn-primary-border-color: #E03C3F;
  --cc-btn-primary-hover-bg: #C92F33;         /* rouge un peu plus foncé */
  --cc-btn-primary-hover-color: #FFFFFF;
  --cc-btn-primary-hover-border-color: #C92F33;

  /* Boutons secondaires (Refuser / Paramétrer) -> fond blanc, bord gris, arrondi */
  --cc-btn-secondary-bg: #FFFFFF;
  --cc-btn-secondary-color: #38378B;
  --cc-btn-secondary-border-color: #D9DEE3;
  --cc-btn-secondary-hover-bg: #F4F6F8;
  --cc-btn-secondary-hover-color: #38378B;
  --cc-btn-secondary-hover-border-color: #C9D0D6;

  /* Séparateur & fond pieds/bords pour un rendu plus clean */
  --cc-separator-border-color: #EEF2F5;
  --cc-footer-bg: #FFFFFF;
  --cc-footer-color: #38378B;

  /* Optionnel: arrondir la carte elle-même */
  --cc-modal-border-radius: 22px;
}

/* Si tu veux forcer l’arrondi aussi quand des classes sont injectées */
#cc-main .cm__btn,
#cc-main .pm__btn { border-radius: 22px; }