/*Déclaration des fonts du thème*/
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* 1) Variables + breakpoints */
:root{
  /* grille & conteneur */
  --container-max: 1400px;
  --container-slim: 768px;
  --gutter: 1rem;

  --font-main: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* échelle de spacing */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;

  /* typo fluide */
  --fs-small: clamp(0.75rem, 0.15vw + 0.72rem, 0.85rem);
  --fs-base:  clamp(1rem, 0.2vw + 0.96rem, 1.09rem);
  --fs-h4:    clamp(0.875rem, 0.4vw + 0.8rem, 1rem);
  --fs-h3:    clamp(1.4rem, 1vw + 1.1rem, 1.4rem);
  --fs-h2:    clamp(2rem, 2vw + 1.2rem, 3rem);
  --fs-h1:    clamp(2.75rem, 3vw + 1.4rem, 4rem);

  /* couleurs (exemple) */
  --c-muted:#6b7280;
  --c-primary:#D98C07;

  --c-light: #F2F2F2;
  --c-dark: #1C1B1B;
  --c-mustaaaard: #D98C07;
  --c-corail: #FFB89E;
  --c-jaune: #FFBF00;
  --c-peach: #DBA064;
  --c-blue: #005F8B;
  --c-white: #FFFFFF;
  --c-grey: #4C4C4B;
  --c-warmgrey: #E8E8E8;
  --c-gto: #003D7E;

  --c-bg-dark: #1C1B1B;
  --c-bg-light: #F2F2F2;
  --c-bg-blue: #005F8B;
  --c-ft-light: #F2F2F2;

  /* Border */
  /* Épaisseurs */
  --bdw-0: 0;
  --bdw-1: 1px;
  --bdw-4: 4px;
  /* Styles */
  --bds-solid: solid;
  /* Rayons (arrondis) */
  --bdr-0: 0;
  --bdr-1: .25rem;
  --bdr-2: .5rem;
  --bdr-3: 1rem;
  --bdr-full: 9999px;

  /* breakpoints (mobile first) */
  /* sm: 576, md: 768, lg: 992, xl: 1200 */
}
.bg-dark { background: var(--c-bg-dark); color: var(--c-ft-light, #F2F2F2); fill: var(--c-ft-light, #F2F2F2); }
.bg-light { background: var(--c-bg-light, #F2F2F2); color: var(--c-grey, #4C4C4B); fill: color: var(--c-grey, #4C4C4B); }
.bg-white { background: var(--c-bg-white, #FFFFFF); color: var(--c-blue, #005F8B); fill: color: var(--c-blue, #005F8B); }
.bg-blue { background: var(--c-bg-blue, #005F8B); color: var(--c-light, #F2F2F2); fill: var(--c-light, #F2F2F2); }
.bg-warmgrey { background: var(--c-warmgrey, #E8E8E8); color: var(--c-gto, #003D7E); fill: var(--c-gto, #003D7E); }
.bg-corail { background: var(--c-corail, #FFB89E); color: var(--c-gto, #003D7E); fill: color: var(--c-gto, #003D7E); }
.bg-jaune { background: var(--c-jaune, #FCDA7E); color: var(--c-gto, #003D7E); fill: color: var(--c-gto, #003D7E); }
.bg-peach { background: var(--c-peach, #DBA064); color: var(--c-gto, #003D7E); fill: color: var(--c-gto, #003D7E); }


.c-dark { color: var(--c-dark, #1C1B1B); }
.c-grey { color: var(--c-grey, #4C4C4B); fill:var(--c-grey, #4C4C4B); }
.c-gto { color: var(--c-gto, #003D7E); fill: var(--c-gto, #003D7E); }
.c-peach { color: var(--c-peach, #DBA064); fill: var(--c-peach, #DBA064); }
.c-blue { color: var(--c-blue, #005F8B); }
.c-mustaaaard { color: var(--c-mustaaaard, #D98C07); }

html { font-family: var(--font-main); font-size: var(--fs-base); }
body{ font-family: var(--font-main); font-size: var(--fs-base); line-height: 1.5; overflow-x:hidden; /*background-color: var(--c-bg-dark, #1C1B1B);*/ background-color: var(--c-ft-light, #F2F2F2);}

/* Flex  */
.d-flex { display: flex !important; gap: var(--gutter); }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap:wrap; }
.row { display: inline-flex; gap: var(--gutter, 1rem); }

.align-self-start{ align-items: start; }
.align-items-center{ align-items: center; }
.align-items-baseline{ align-items:baseline; }

.align-self-baseline{ align-self:baseline; }

.justify-content-between{ justify-content: space-between; }
.justify-content-end{ justify-content: end; }
.justify-content-around{ justify-content: space-around; }
.justify-content-center{ justify-content: center; }
.justify-content-flexstart{ justify-content: flex-start; }

.justify-items-center{ justify-items:center; }

/*.space-between{ justify-content:space-between; }*/

.row img { flex-shrink: 0; height: auto; }

main#home{ padding-top:5rem; }
main#parts-content{ padding-top:6rem; }

.d-block { display:block; }
.relative { position:relative; }
.absolute { position:absolute; }
.fixed { position:fixed; }
.bottom-0 { bottom:0; }
.left-50 { left:50%;transform:translateX(-50%); }

/* Titre */
h1,.h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.35; margin-bottom: var(--space-5); }
h2,.h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.35; margin-bottom: var(--space-5); }
h3,.h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.55; margin-left: var(--space-0); margin-top: var(--space-3); margin-right: var(--space-0); margin-bottom: var(--space-3); }
h4,.h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.55; margin-left: var(--space-0); margin-top: var(--space-3); margin-right: var(--space-0); margin-bottom: var(--space-3); }

/* Paragraphe */
p{ margin: 0 0 var(--space-4); font-weight: 400; line-height: 1.55; }

/* Typo */
.fst-normal{ font-style: normal; font-weight: 400; }
.fst-italic{ font-style: italic; }
.fst-bold{ font-style: normal; font-weight: 800; }
.small { font-size: var(--fs-small, 0.65rem); }

/* Alignment */
.text-center{text-align: center;}
.text-end{text-align: right;}
.text-start{text-align: left;}

/* Border */
.border-r{ border-right:  var(--bdw-1) var(--bds-solid) var(--c-grey); }
.border-b{ border-bottom: var(--bdw-1) var(--bds-solid) var(--c-grey); }
.border-t{ border-top: var(--bdw-1) var(--bds-solid) var(--c-grey); }
.border-t-meta{ border-top: var(--bdw-1) var(--bds-solid) var(--c-grey); }
.border-1{ border-radius: var(--bdr-1, .25rem); }
.border-full{ border-radius: var(--bdr-full, 9999px); }

/* Margin */
/* Margin left  */
.ms-0{margin-left: var(--space-0) !important;}
.ms-1{margin-left: var(--space-1) !important;}
.ms-2{margin-left: var(--space-2) !important;}
.ms-3{margin-left: var(--space-3) !important;}
.ms-4{margin-left: var(--space-4) !important;}
.ms-5{margin-left: var(--space-5) !important;}
/* Margin right */
.me-0{margin-right: var(--space-0) !important;}
.me-1{margin-right: var(--space-1) !important;}
.me-2{margin-right: var(--space-2) !important;}
.me-3{margin-right: var(--space-3) !important;}
.me-4{margin-right: var(--space-4) !important;}
.me-5{margin-right: var(--space-5) !important;}
/* Margin top */
.mt-0{margin-top: var(--space-0) !important;}
.mt-1{margin-top: var(--space-1) !important;}
.mt-2{margin-top: var(--space-2) !important;}
.mt-3{margin-top: var(--space-3) !important;}
.mt-4{margin-top: var(--space-4) !important;}
.mt-5{margin-top: var(--space-5) !important;}
/* Margin bottom */
.mb-0{margin-bottom: var(--space-0) !important;}
.mb-1{margin-bottom: var(--space-1) !important;}
.mb-2{margin-bottom: var(--space-2) !important;}
.mb-3{margin-bottom: var(--space-3) !important;}
.mb-4{margin-bottom: var(--space-4) !important;}
.mb-5{margin-bottom: var(--space-5) !important;}

/* Padding */
/* Padding left */
.ps-0{padding-left: var(--space-0) !important;}
.ps-1{padding-left: var(--space-1) !important;}
.ps-2{padding-left: var(--space-2) !important;}
.ps-3{padding-left: var(--space-3) !important;}
.ps-4{padding-left: var(--space-4) !important;}
.ps-5{padding-left: var(--space-5) !important;}
/* Padding top */
.pt-0{padding-top: var(--space-0) !important;}
.pt-1{padding-top: var(--space-1) !important;}
.pt-2{padding-top: var(--space-2) !important;}
.pt-3{padding-top: var(--space-3) !important;}
.pt-4{padding-top: var(--space-4) !important;}
.pt-5{padding-top: var(--space-5) !important;}
/* Padding right */
.pe-0{padding-right: var(--space-0) !important;}
.pe-1{padding-right: var(--space-1) !important;}
.pe-2{padding-right: var(--space-2) !important;}
.pe-3{padding-right: var(--space-3) !important;}
.pe-4{padding-right: var(--space-4) !important;}
.pe-5{padding-right: var(--space-5) !important;}
/* Padding bottom */
.pb-0{padding-bottom: var(--space-0) !important;}
.pb-1{padding-bottom: var(--space-1) !important;}
.pb-2{padding-bottom: var(--space-2) !important;}
.pb-3{padding-bottom: var(--space-3) !important;}
.pb-4{padding-bottom: var(--space-4) !important;}
.pb-5{padding-bottom: var(--space-5) !important;}

/* Bouton CTA */
.button-cta{ color: var(--c-peach, #DBA064);font-weight:700;background-color: var(--c-gto, #003D7E);padding-right: var(--space-4, 1.5rem);padding-left: var(--space-4, 1.5rem);padding-top: var(--space-3, 1rem);padding-bottom: var(--space-3, 1rem);margin-top: var(--space-5, 3rem);text-decoration: none;border-radius: var(--bdr-full, 9999px);border-width: var(--bdw-4, 4px) !important; }

/* Lien interne */
a.link-maillage{ text-decoration: none; }
/* 2) Base RWD */
html, body { width: 100%; height: 100%; }



/* 3) Typo rapide */


.muted{ color: var(--c-muted); }

/* ==========================================================================
   Conteneur + grille
   ========================================================================== */
.container{ width: min(100% - 2*var(--gutter), var(--container-max, 1400px)); margin-inline: auto; padding-inline:0rem; }
.container-slim{ width: min(100% - 2*var(--gutter), var(--container-slim, 768px)); margin-inline: auto; }
.container-fluid{ width: 100%; }
.center-content {
  margin-left: auto;
  margin-right: auto;
  max-inline-size: var(--container-width, 1200px);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.grid{
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr; /* mobile */
}
.col-6 { width: 50%; }

/* points de rupture (mobile-first) */
@media (min-width: 576px){
  .grid.sm-2{ grid-template-columns: repeat(2,1fr); }  
}

@media (min-width: 768px){
  .grid.md-3{ grid-template-columns: repeat(3,1fr); }
}

/* lg – desktop */
@media (min-width: 992px){
  /* ==========================================================================
   Conteneur + grille
   ========================================================================== */
  .container{ padding-inline:4rem; }
  .grid.lg-4{ grid-template-columns: repeat(4,1fr); }
  /* ==========================================================================
   Flex
   ========================================================================== */
   .flex-row-lg { flex-direction:row; }
}


/* 6) Spacing utils (quelques-uns) */
.mt-4{ margin-top: var(--space-4); } .mb-4{ margin-bottom: var(--space-4); }
.p-4{ padding: var(--space-4); } .py-6{ padding-block: var(--space-6); }

/* 7) Bouton minimal */
/*.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .625rem 1rem; border-radius: .5rem; border: 1px solid transparent;
  background: var(--c-primary); color:#fff; text-decoration:none; font-weight:600;
}
.btn:focus-visible{ outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* 8) Accessibilité & préférences */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none!important; transition: none!important; }
}

/* Hauteur viewport mobile fiable */
:root{ --vh: 1vh; }
@supports (height: 1svh){
  .h-screen{ height: 100svh; } /* iOS/Android modernes */
}
.h-screen{ height: calc(var(--vh) * 100); } /* fallback */
/*Centrer le contenu*/

.center-text{text-align:center;}
/* Le bloc part du bord gauche du container
   et s'étire exactement jusqu'au bord droit du viewport. */
/*.bleed-right {
  /* largeur visible : de la gauche du container jusqu'au bord droit écran */
  /*inline-size: min(100vw, calc(50vw + 50%));
  /* pas de recentrage négatif, on reste aligné au container */
  /*margin: 0;
  box-sizing: border-box;

  /* garde l’alignement global (même padding que le reste) */
  /*padding-inline-start: 0;                  /* bord aligné au container */
  /*padding-inline-end: var(--gutter, 1rem);  /* écart à droite */
/*}
/* Si l’élément doit scroller, active le scroll horizontal ici */
/*.bleed-right--scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Masque les barres de défilement, mais garde le scroll actif */
/*.no-scrollbar {
  -ms-overflow-style: none;  /* IE & Edge */
  /*scrollbar-width: none;     /* Firefox */
/*}
.no-scrollbar::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
/*}*/

@media (min-width: 576px){ /*sm*/
  
}
/* lg – desktop */
@media (min-width: 1024px) {
  /* Container */
  main#home{ padding-top:initial; }
}
@media (min-width: 1200px) { /*xl*/
  /* Text */
  .center-text-lg{text-align:center;}
  /*.bleed-right-lg {inline-size: 100%;}*/
  /* Flex */
  .flex-row-xl { flex-direction: row; }
  .justify-content-xl-around { justify-content: space-around; }
  /* Colones */
  .col-2-lg { flex: 0 0 calc(50% - var(--gutter, 1.5rem) / 2); max-width: calc(50% - var(--gutter, 1.5rem) / 2); }
  .col-3-lg { flex: 0 0 calc(30% - var(--gutter, 1.5rem) / 2); max-width: calc(30% - var(--gutter, 1.5rem) / 2); }
  .col-4-lg { flex: 0 0 calc(25% - var(--gutter, 1.5rem) / 2); max-width: calc(25% - var(--gutter, 1.5rem) / 2); }
  .col-6-lg { flex: 0 0 calc(60% - var(--gutter, 1.5rem) / 2); max-width: calc(60% - var(--gutter, 1.5rem) / 2); }
  .col-7-lg { flex: 0 0 calc(70% - var(--gutter, 1.5rem) / 2); max-width: calc(70% - var(--gutter, 1.5rem) / 2); }
}