/******** GLOBAL ***************/

/*
my screen resolution :

A
Width = 1368
Height = 588

B
Width = 1366
Height = 615
*/

:root {

  /****** COLORS ******/
  /* Primary */
  --color-primary-1: hsl(16, 100%, 90%); /* #FFDACC */
  --color-primary-2: hsl(15, 100%, 81%); /* #FFB59C */
  --color-primary-3: hsl(15, 100%, 72%); /* #FF926E */
  --color-primary-4: hsl(15, 100%, 63%); /* #FF7142 */
  --color-primary-5: hsl(14, 100%, 55%); /* #ff5019 BASE */
  --color-primary-6: hsl(15, 92%, 45%);  /* #DF3F09 */
  --color-primary-7: hsl(15, 100%, 37%); /* #BF3100 */
  --color-primary-8: hsl(14, 100%, 31%); /* #9F2400 */
  --color-primary-9: hsl(12, 100%, 25%); /* #801900 */

  /* Neutral */
  --color-neutral-1: hsl(210, 31%, 95%); /* #EEF2F6 */
  --color-neutral-2: hsl(210, 27%, 90%); /* #DEE5EC */
  --color-neutral-3: hsl(210, 26%, 85%); /* #CED8E2 */
  --color-neutral-4: hsl(210, 25%, 80%); /* #BECBD8 */
  --color-neutral-5: hsl(209, 24%, 74%); /* #AEBECD BASE */
  --color-neutral-6: hsl(210, 17%, 65%); /* #97A6B5 */
  --color-neutral-7: hsl(209, 13%, 56%); /* #808F9D */
  --color-neutral-8: hsl(209, 11%, 46%); /* #697784 */
  --color-neutral-9: hsl(209, 12%, 37%); /* #535F6A */

  /* Accents */
  /* Accent - Green */
  --color-accent-green-1: hsl(144, 62%, 90%); /* #D5F5E2 */
  --color-accent-green-2: hsl(146, 60%, 79%); /* #ABEAC6 */
  --color-accent-green-3: hsl(145, 58%, 69%); /* #84DEAA */
  --color-accent-green-4: hsl(146, 55%, 59%); /* #5DD08E */
  --color-accent-green-5: hsl(145, 55%, 49%); /* #38c172 BASE */
  --color-accent-green-6: hsl(146, 61%, 43%); /* #2AB063 */
  --color-accent-green-7: hsl(146, 69%, 37%); /* #1D9E54 */
  --color-accent-green-8: hsl(145, 76%, 31%); /* #138945 */
  --color-accent-green-9: hsl(145, 82%, 25%); /* #0B7236 */

  /* Accent - Blue */
  --color-accent-blue-1: hsl(207, 69%, 90%); /* #D3E7F7 */
  --color-accent-blue-2: hsl(207, 67%, 80%); /* #A8CEEE */
  --color-accent-blue-3: hsl(208, 64%, 69%); /* #7FB5E3 */
  --color-accent-blue-4: hsl(207, 61%, 59%); /* #579CD6 */
  --color-accent-blue-5: hsl(207, 61%, 49%); /* #3183c8 BASE */
  --color-accent-blue-6: hsl(208, 68%, 43%); /* #2373B7 */
  --color-accent-blue-7: hsl(207, 75%, 37%); /* #1764A4 */
  --color-accent-blue-8: hsl(208, 83%, 31%); /* #0D538F */
  --color-accent-blue-9: hsl(208, 90%, 25%); /* #064377 */

  /* Accent - Yellow */
  --color-accent-yellow-1: hsl(56, 100%, 91%); /* #FFFCD3 */
  --color-accent-yellow-2: hsl(55, 100%, 83%); /* #FFF8AA */
  --color-accent-yellow-3: hsl(54, 100%, 75%); /* #FFF282 */
  --color-accent-yellow-4: hsl(53, 100%, 68%); /* #FFEB5C */
  --color-accent-yellow-5: hsl(52, 99%, 61%); /* #FEE238 BASE */
  --color-accent-yellow-6: hsl(54, 74%, 51%); /* #DFCE26 */
  --color-accent-yellow-7: hsl(57, 79%, 42%); /* #BFB717 */
  --color-accent-yellow-8: hsl(60, 86%, 34%); /* #9F9E0C */
  --color-accent-yellow-9: hsl(60, 95%, 26%); /* #808003 */

  /* a verifier */
  --full-black: #000;
  --navy-blue: #011c72;
  --light-blue: #a1c4e8;
  --yellow: #ffd00f;
  --light-border-color: hsla(0,0%,100%,0.1);

  /* couleurs utilisees */
  --red: #c03e3e;
  --black: #262623;
  --white: #fff;
  --green: #23825a;
  --neutral: hsl(209, 24%, 74%); /* #AEBECD BASE */

  /****** FONTS ******/
  --font-regular: Figtree-VariableFont;
  /*
  --font-italic: Figtree-Italic-VariableFont;
  --font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --font-monospace: 'AzeretMono-Regular', monospace;
  */
  --font-monospace: 'B612Mono-Regular', monospace;


/*
https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.20&maxFontSize=21&maxWidth=1280&maxRatio=1.333&steps=2xs%2Cxs%2Cs%2Cbase%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=base&prefix=font-size&decimals=2&useRems=on&remValue=10&previewFont=Figtree&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1312
NOTE >> font-size: 1.6rem (mobile) > 2.1rem (desktop)
*/
--font-size-2xs: clamp(0.93rem, -0.04vw + 0.94rem, 0.89rem);
--font-size-xs: clamp(1.11rem, 0.07vw + 1.09rem, 1.18rem);
--font-size-s: clamp(1.33rem, 0.25vw + 1.25rem, 1.58rem);
--font-size-base: clamp(1.6rem, 0.52vw + 1.43rem, 2.1rem);
--font-size-m: clamp(1.92rem, 0.92vw + 1.63rem, 2.8rem);
--font-size-l: clamp(2.3rem, 1.49vw + 1.83rem, 3.73rem);
--font-size-xl: clamp(2.76rem, 2.3vw + 2.03rem, 4.97rem);
--font-size-2xl: clamp(3.32rem, 3.45vw + 2.21rem, 6.63rem);
--font-size-3xl: clamp(3.98rem, 5.06vw + 2.36rem, 8.84rem);


/* from 332px to 500px */
--event-card-332-500-1: 2rem; /* clamp(1.6rem, 2vw + 1rem, 2rem); */
--event-card-332-500-2: 3rem; /* clamp(2rem, 5vw + 0.5rem, 3rem); */
--event-card-332-500-3: 1.5rem; /* clamp(1.33rem, 0.84vw + 1.08rem, 1.5rem) */
--event-card-332-500-4: 4rem;

/* from 500px to 660px */
--event-card-500-660-1: clamp(1.6rem, 2.5vw + 0.35rem, 2rem);
--event-card-500-660-2: clamp(2rem, 6.25vw + -1.13rem, 3rem);
--event-card-500-660-3: clamp(1.33rem, 1.04vw + 0.81rem, 1.5rem);
--event-card-500-660-4: clamp(3.10rem, 5.64vw + 0.31rem, 4rem);


/* from 660px to 970px */
--event-card-660-970-1: clamp(1.6rem, 1.29vw + 0.75rem, 2rem);
--event-card-660-970-2: clamp(2rem, 3.23vw + -0.13rem, 3rem);
--event-card-660-970-3: clamp(1.33rem, 0.54vw + 0.98rem, 1.5rem);
--event-card-660-970-4: clamp(2.54rem, 4.8vw + -0.63rem, 4rem);

/* from 970px to 1280px */
--event-card-970-1280-1: clamp(1.6rem, 1.29vw + 0.35rem, 2rem);
--event-card-970-1280-2: clamp(2rem, 3.23vw + -1.13rem, 3rem);
--event-card-970-1280-3: clamp(1.33rem, 0.54vw + 0.81rem, 1.5rem);
--event-card-970-1280-4: clamp(2.54rem, 4.8vw + -2.12rem, 4rem);


/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,21,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
--space-3xs: clamp(0.25rem, calc(0.23rem + 0.11vw), 0.31rem);
--space-2xs: clamp(0.50rem, calc(0.43rem + 0.33vw), 0.69rem);
--space-xs: clamp(0.75rem, calc(0.66rem + 0.43vw), 1.00rem);
--space-s: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.31rem);
--space-m: clamp(1.50rem, calc(1.33rem + 0.87vw), 2.00rem);
--space-l: clamp(2.00rem, calc(1.78rem + 1.09vw), 2.63rem);
--space-xl: clamp(3.00rem, calc(2.67rem + 1.63vw), 3.94rem);
--space-2xl: clamp(4.00rem, calc(3.57rem + 2.17vw), 5.25rem);
--space-3xl: clamp(6.00rem, calc(5.35rem + 3.26vw), 7.88rem);

/* One-up pairs */
--space-3xs-2xs: clamp(0.25rem, calc(0.10rem + 0.76vw), 0.69rem);
--space-2xs-xs: clamp(0.50rem, calc(0.33rem + 0.87vw), 1.00rem);
--space-xs-s: clamp(0.75rem, calc(0.55rem + 0.98vw), 1.31rem);
--space-s-m: clamp(1.00rem, calc(0.65rem + 1.74vw), 2.00rem);
--space-m-l: clamp(1.50rem, calc(1.11rem + 1.96vw), 2.63rem);
--space-l-xl: clamp(2.00rem, calc(1.33rem + 3.37vw), 3.94rem);
--space-xl-2xl: clamp(3.00rem, calc(2.22rem + 3.91vw), 5.25rem);
--space-2xl-3xl: clamp(4.00rem, calc(2.65rem + 6.74vw), 7.88rem);

/* Custom pairs */
--space-s-l: clamp(1.00rem, calc(0.43rem + 2.83vw), 2.63rem);

/* Space m-l: 30px → 50px */
--space-m-l: clamp(1.88rem, calc(1.46rem + 2.08vw), 3.13rem);


  /* layout max-width */
  --max-width--desktop: 1280px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
 display:block
}

html {
  font-size: 62.5%; /* 1rem = 10px */

  /* Mobile Safari increases the default font-size when you switch a website from portrait to landscape (source: https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/). By adding the following CSS properties we can prevent the odd rendering:  */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  background-color: var(--white); /* A REMPLACER PAR #fafcf7 > a essayer */
  color: var(--black);
  font-family: var(--font-regular);
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  /* font-size: 1.6rem; */ /* 16px (cf. html{} font size) */
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 100vh;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/* By default, borders are considered "outside" the element; if you set an element to have a width of 300px and a border-width of 10px, you'll wind up with a 320px-wide box. I heartily suggest that you make this change whenever possible. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* A friendly reminder is to always force all images to have a maximum width of 100%. It’s an important defensive CSS mechanism to have > https://defensivecss.dev/tip/img-max-width/ */
img {
  border: 0;
  max-width: 100%;
  object-fit: cover;
  /*
  Cela semble utile pour les images responsives, A VERIFIER
  width: 100%;
  height: auto;
  */
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
}

h2, .event-title {
  margin-bottom: var(--space-xs);
}


/******** SKIP LINKS ***************/

.skip-link {
  background: #fff;
  color: #126bc5;
  font-weight: 700;
  /* font-size: 2rem; */
  font-size: var(--font-size-s);
  left: 50%;
  padding: 1rem;
  text-decoration: none;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-link:focus {
  transform: translateY(0%);
}

/******** LINKS ***************/
a.external-link {
  color: #0073e6; /* nice blue for external links */
  text-decoration: none; /* no underline by default */
  background-image: url('/static/img/svg/external-link.svg');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 0.75em;
  padding-right: 1em;
  opacity: 0.7;
  transition: color 0.2s ease, text-decoration 0.2s ease, opacity 0.2s ease;
}

/* Hover / Focus */
a.external-link:hover,
a.external-link:focus {
  color: #005bb5; /* darker blue */
  text-decoration: underline;
  opacity: 1;
  background-size: .8em; /* slightly bigger icon */
}

.link-lang-label {
  font-size: 0.75em;  /* smaller than normal text */
  opacity: 0.7;       /* a bit faded so it's less distracting */
}


/******** WRAPPER ***************/

.site-wrapper { /* to have a sticky footer */
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

header, footer { /* to have a sticky footer */
  flex-grow: 0;
  flex-shrink: 0;
}

main { /* to have a sticky footer */
  flex-grow: 1;
}

.wrapper {
  width: 100%;
  max-width: var(--max-width--desktop); /* on gere le width dans chaque element : header, main, footer etc... */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px; /* utile dans le cas ou le viewport size est plus petit que max-width du wrapper > cela evite que le contenu soit colle aux bords */
  padding-right: 16px;
}



/******** NEW HEADER ***************/

.site-header {
  /* height: fit-content; */
  /* height: 80px; */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px; /* a changer en REM */
  margin-bottom: 50px; /* a changer en REM */
}

/*
@media only screen and (min-width: 768px) { // Pas pour les mobiles //
  .site-header {
    padding-top: 20px; // a changer en REM //
    margin-bottom: 50px; // a changer en REM //
  }
}
*/

.site-header-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (max-width: 900px) {
  .site-header-inner {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}

.site-logo {
  /*font-size: 5rem; */
  font-size: var(--font-size-xl);
  font-weight: 600;
  display: flex;
  /* justify-content: flex-start; */
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--black);
}

/* COLORS */


/* language switcher (NEW) */
.language-dropdown {
  position: relative;
  display: inline-block;
}

.language-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #cb113d;
  border-radius: 5px;
  border: 1px solid #cb113d;
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  font-size: var(--font-size-s);
  font-family: var(--font-regular);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.language-toggle:hover,
.language-toggle[aria-expanded="true"] {
  background-color: #cb113d;
  color: white;
  text-decoration: none;
}

.language-menu {
  position: absolute;
  top: 100%;
  right: 0; /* align it to the right of the toggle button */
  margin-top: 0.4rem;
  z-index: 100;
  display: none;
  background: white;
  border: 1px solid var(--black);
  border-radius: 5px;
  font-size: var(--font-size-s);
  font-family: var(--font-regular);
  /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); */
  min-width: 180px;
  padding: 0.4rem 0;
}

.language-menu[aria-hidden="false"] {
  display: block;
}

.language-menu li {
  list-style: none;
}

.language-menu li a {
  display: block;
  padding: 0.6rem 1.2rem;
  font-weight: 500;
  text-transform: none;
  color: var(--black);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

.language-menu li a:hover {
  background-color: #ffd0c2; /* slightly deeper pastel on hover, Light Coral Tint */
  text-decoration: none;
  color: var(--black);
}

.language-menu li a.active {
  background-color: #ffe8e2; /* light pastel, Soft Peach Pink */
  font-weight: bold;
  text-decoration: none;
  color: var(--black);
}

.language-toggle svg {
  stroke: currentColor;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.6rem;
}


/* Main navigation */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.main-nav a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--font-size-s);
  font-weight: 600;
  color: var(--black);
  padding: 0.5rem 1rem;
}

.main-nav a:hover {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.main-nav a.active {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  font-weight: bold;
}

/* Start here button */
.main-nav a.start-here-btn {
  background-color: #cb113d;
  color: white;
  border-radius: 5px;
  border: 1px solid #cb113d;
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  font-size: var(--font-size-s);
  transition: background-color 0.2s ease-in-out;
}

.main-nav a.start-here-btn:hover {
  background-color: white;
  color: #cb113d;
  text-decoration: none;
}

/* Mobile: stack everything and center */
@media only screen and (max-width: 900px) {
  .main-nav {
    margin-top: 2rem;
    flex-direction: row;
    justify-content: center;
  }

  .main-nav > a {
    display: block;
    background-color: white;
    color: var(--black);
    border: 1px solid var(--black);
    border-radius: 5px;
    padding: 0.6rem 1.2rem;
    font-size: var(--font-size-s);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
  }

  .main-nav > a:hover {
    text-decoration: none;
  }

  .main-nav > a.active {
    background-color: #ffe8e2; /* light pastel, Soft Peach Pink */
    color: var(--black);
    border: 1px solid var(--black);
    text-decoration: none;
    font-weight: 600;
  }

  .main-nav > a.active:hover {
    background-color: #ffd0c2; /* slightly deeper pastel on hover, Light Coral Tint */
    color: var(--black);
    text-decoration: none;
  }

  /* Keep Start Here special */
  .main-nav .start-here-btn {
    background-color: #cb113d;
    color: white;
    border-color: #cb113d;
    font-weight: bold;
  }

  .main-nav .start-here-btn:hover {
    background-color: white;
    color: #cb113d;
  }

  .main-nav .language-dropdown {
    display: block;
  }

  .language-toggle {
    padding: 0.6rem;
  }

  .language-toggle .label {
    display: none;
  }

  .language-toggle svg {
    margin-right: 0; /* no space needed when text is hidden */
  }

  .main-nav .language-toggle {
    width: 100%;
    text-align: center;
    padding: 0.8rem 1.2rem;
    font-size: var(--font-size-s);
    font-weight: 500;
    border: 1px solid var(--black);
    background-color: white;
    color: var(--black);
  }

  .main-nav .language-toggle:hover,
  .main-nav .language-toggle[aria-expanded="true"] {
    background-color: var(--color-neutral-1, #f0f0f0);
    color: var(--black);
  }
}




/******** ALERTS ***************/

.alert {
  padding: var(--alert-padding);
  margin-top: var(--alert-margin-top);
  margin-bottom: var(--alert-margin-bottom);
  background-color: var(--alert-background-color);
  border-left: 4px solid var(--alert-border-left);
}

div.alert {
  --alert-padding: 2rem;
  --alert-margin-top: 0;
  --alert-margin-bottom: 2rem;
}

p.alert {
  --alert-padding: 0;
  --alert-margin-top: .5rem;
  --alert-margin-bottom: .5rem;
  font-size: var(--font-size-s);
}

.alert.info {
  --alert-background-color: #e5faf3;
  --alert-border-left: #00cc88;
}

.alert.warning {
  --alert-background-color: #ffffff;
  color: hsl(15, 100%, 37%);
  border-left: 0;
}

.alert-title {
  font-weight: 700;
  display: block;
}

.alert a {
  text-decoration: underline;
  color: inherit;
}




/******** HOMEPAGE ***************/
.flow > * + * {
  margin-top: 2rem;
}

.introduction {
  font-size: var(--font-size-m);
  max-width: 40ch;
  margin-bottom: 2rem;
}

/* CELA N'EST PLUS UTILE *****
.introduction a:not(.btn) {
  color: var(--black);
  text-decoration: underline;
}

.introduction a:hover:not(.btn) {
  color: var(--red);
  text-decoration: underline;
}
*/

/* OLD 01/09/2023
.btn {
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 700;
  background-color: var(--green);
  color: #fff;
  text-align: left;
  padding: 15px 40px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
*/
.btn {
  border: none;
  border-radius: 8px;
  font-weight: 500;
  /* background-color: var(--black); */
  background-color: #ce4556;
  color: #fff;
  text-align: left;
  /* text-transform: uppercase; */
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.btn:hover {
  background-color: #b53b4b; /* slightly darker on hover */
}

.btn .icon-left,
.btn .icon-right {
  display: inline-flex;
  align-items: center;
}

.icon-right {
  margin-left: 1rem;
  display: inline-flex;
}

.icon-left {
  margin-right: 1rem;
  display: inline-flex;
}

/* Optional: size consistency for Lucide SVGs */
.btn svg {
  width: 1em;
  height: 1em;
  stroke-width: 2;
}

.btn.large {
  font-size: var(--font-size-base);
  padding: 10px 20px;
}

.btn.regular {
  font-size: var(--font-size-base);
  padding: 0 8px;
  margin-top: 1rem;
}

.btn-nav {
  display: inline-block;
  padding: 10px 20px;
  /* background-color: #ff5733; */
  background-color: #cb113d;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  border: solid 1px #cb113d;
  cursor: pointer;
  text-align: center;
}

.btn-nav:hover {
  background-color: white;
  color: #cb113d;
}

.btn-nav.active {
  font-weight: bold; /* Slightly emphasize text */
  background-color: white;
  color: #cb113d;
}

/* verifier si on en a encore besoin */
.btn-icons {
  stroke: white;
}

/* A SUPPRIMER QUAND LE NOUVEAU CODE POUR lucide EST FINI */
/* l'icone est situee a droite du texte (apres) */
.btn-icons.right {
  margin-left: 1rem;
}
.btn-icons.left {
  margin-right: 1rem;
}

.kklovesyou {
  color: var(--green);
  font-weight: 600;
}

@media only screen and (max-width: 400px) {
  .btn {
    text-align: center;
    padding: 15px 20px;
  }
}



/******** BREADCRUMBS ***************/

.breadcrumbs {
  margin-bottom: 20px;
}

.breadcrumbs-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  list-style: none;
  flex-wrap: wrap;
}

.breadcrumbs-list li {
  display: inline;
}

.breadcrumbs-link {
  display: block;
  text-decoration: none;
  color: var(--black);
  /* font-size: 1.4rem; */
  font-size: var(--font-size-s);
}

.breadcrumbs-link:hover {
  text-decoration: underline;
  color: var(--black);
}


/******** SVG ***************/

/* class des icones svg (Lucide) */
/*
svg.heart, // pas de point devant svg
.breadcrumbs-icons,
.svg-icons {
  display: block;
  margin: auto;
}
*/

svg.heart {
  width: clamp(2.76rem, 2.3vw + 2.03rem, 4.97rem);
}

/*
svg.event_arrows {
  width: clamp(1.88rem, calc(1.46rem + 2.08vw), 3.13rem);
}
*/


svg {
  display: block;
  margin: auto;
}

.circle-icon {
  padding:30px;
  border-radius: 50%;
}


/******** PICTURES ***************/

.picture_caption {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  border-left: 1px solid hsl(350, 70%, 60%);  /* a warm, mid‐tone red—KK Loves You accent */
  padding-left: 0.5rem;
  color: hsl(0, 0%, 20%);                     /* a softer charcoal, less stark than #333 */
  font-size: 1.3rem;
  line-height: 1.4;
  font-style: italic;
}

/* Optional: slightly darker caption text on very small screens */
@media (max-width: 400px) {
  .picture_caption {
    color: hsl(0, 0%, 15%);
    font-size: 1rem;
  }
}





/******** LAYOUT ***************/

.layout { /* NEW */
  width: 100%;
}

.layout-base {
  margin: 0 auto;
  max-width: var(--max-width--desktop);
  padding: 0 16px 4rem 16px;
  width: 100%;
}

/* NE PLUS UTILISER CETTE REGLE MAIS UTILISER LA SUIVANTE */
h1.primary-pages {
  /* font-size: 7rem; */
  font-size: var(--font-size-2xl);
  font-weight: 700;
  /* margin-bottom: 3rem; */
  margin-bottom: var(--space-s-l);
  max-width: 25ch; /* 1ere version en ligne */
}

.page-heading h1 {
  /* font-size: 7rem; */
  font-size: var(--font-size-2xl);
  font-weight: 700;
  /* margin-bottom: 3rem; */
  margin-bottom: var(--space-s-l);
  max-width: 25ch; /* 1ere version en ligne */
}

.page-heading.has-subtitle h1 {
  margin-bottom: 0.5rem; /* tighter spacing when subtitle exists */
}

.page-subtitle {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: var(--font-size-m);
  font-weight: 500;
}


/******** MARKDOWN ***************/

.markdown p {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.markdown ul {
  margin-left: 4rem;
  list-style: disc outside none;
}

.markdown ul li {
  margin-bottom: .5rem;
}

.markdown h2 + p,
.markdown h3 + p,
.markdown h4 + p {
  margin-top: 0;
}

hr.footnotes-sep {
  margin-top: 4rem;
}

/*
.markdown svg {
  margin: 0;
  display: inline;
}
*/

/* A ajouter:
  - ul
  - ol
  - Blockquotes
  - h2,h3,h4...
  - image size
  - quote
  - a, a:hover...
  - link > ajouter target=_blank ou pas
*/


/******** WIDGETS ***************/


/******** BUTTONS ***************/

.svg_button {
  all: unset;
  cursor: pointer;
}

.svg_button svg:hover {
  stroke: red;
}


/******** SHARE BUTTONS ***************/

#share {
  margin-top: 6rem;
  margin-bottom: 2rem;
}

#share ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 100%;
}

#share ul li {
  margin-top: 1.5rem;
  margin-right: 3rem;
  margin-bottom: 0;
  margin-left: 0;
}

#share ul li a svg {
  stroke: black;
}

#share ul li a svg:hover {
  stroke: red;
}

#share #pageQrCode,
#share #pageAddressCopy {
  display: none;
}


/******** OTHER ***************/
/* pour formater le nom de l'auteur d'une citation */
.writer {
  margin-left: 0.5rem;
  font-style: italic;
  font-size: 0.9em;
  color: #555;
}


/******** BACK TO TOP ***************/
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: #f44336;
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-size: var(--font-size-s);
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
  z-index: 1000;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}




/******** FOOTER ***************/

footer {
  width: 100%;
  /*
  important pour avoir un sticky footer, cf. https://css-tricks.com/a-clever-sticky-footer-technique/
  html, body { height: 100%; } est deja dans reset.css
  */
  position: sticky;
  top: 100vh;

  max-width: var(--max-width--desktop); /* on gere le width dans chaque element : header, main, footer etc... */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px; /* utile dans le cas ou le viewport size est plus petit que max-width du wrapper > cela evite que le contenu soit colle aux bords */
  padding-right: 16px;
  font-size: var(--font-size-s);
}

footer hr {
  border-top: 3px double var(--red);
  margin-bottom: 1rem;
}

footer a {
  text-decoration: none;
  color: var(--black);
  padding-top: 2px; /* necessaire pour accessibilite (All touch targets must be 24px large, or leave sufficient space) */
  display: block;
}

@media only screen and (max-width: 900px) {
  footer a {
    padding-top: 4px; /* necessaire pour accessibilite (All touch targets must be 24px large, or leave sufficient space) */
  }
}

footer a:hover {
  text-decoration: underline;
  color: var(--black);
}

footer a.active {
  text-decoration: underline;
}

.footer-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-logo {
  min-width: 370px;
  font-size: var(--font-size-base);
  margin-bottom: 1.5rem;
}

.footer-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  max-width: 550px;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.footer-nav-item {
  min-width: 33.33%;
}

.footer-nav-item:not(:first-child) {
  padding-left: 1.25rem;
}

.footer-nav-item:not(:last-child) {
  padding-right: 1.25rem;
}

.footer-nav-item h3 {
  text-transform: uppercase;
  font-size: var(--font-size-s);
  color: var(--red);
}

.footer-sub {
  text-align: center;
  width: 100%;
  height: auto;
  font-size: var(--font-size-s);
  margin-bottom: 2rem;
}





/* ++++++++++++ PAS UTILISE POUR LE MOMENT +++++++++++++++++++++++++++++++++++
.footer {
  // background-color: var(--color-primary-5);
  background-color: var(--red);
  color: white;
  display: flex;
  flex-direction: row;
  padding: 2rem;
}

.footer ul li {
  font-size: 1.6rem;
  line-height: 1.5;
}

.footer ul li a {
  color: white;
}

.footer-column {
  // flex parent
  display: flex;
  flex-direction: column;
  // flex children of .footer
  flex: 1 1 0;
  width: 0;
  // other
  padding-right: 1rem;
}

.footer-sub a {
  color: white;
}

.footer ul li a:hover,
.footer-sub a:hover {
  color: #fff;
  border-bottom: .1rem dashed #fff;
  padding-bottom: .1rem;
}
 */