/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none; text-decoration: none;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }




@font-face {
  font-family: "SilentmindDemo";
   src: 
   url('media/SilentmindDemo.woff') format('woff'),
   url('media/SilentmindDemo.woff2') format('woff2'),
   url('media/SilentmindDemo.ttf')  format('truetype');
   font-weight: normal;
   font-style: normal;
  }


* {box-sizing: border-box;}

 :root {
    
   /* Font-size */
     --m: 2rem;
     --fs-xxxl : 2.5rem;
     --fs-xxl : 1.8rem;
     --fs-xl : 1.2rem;
     --fs-m : 15px;
     --fs-s : 0.85rem;
     --fs-xs : 0.75rem;
     --fs-xxs : 0.65rem;
     
    /* Content frame */
     --content : 80%;
     --max-content: 1200px;
     
    /* Colors */
      --c-permament-0 : #ffffff;
      --c-permament-1 : #2C2928;
      --c-permament-2 : #929292;
      --c-permament-3 : #aeaaa8;
      --c-permament-4 : #F8F6F2;
      --c-permanent-marker : #FFEFBC;
      
      --c-permament-theme1 : #fe5627;
      --c-permament-theme2 : #21c7b9;
      --c-permament-theme2b : #00bab6;
      --c-permament-theme3 : #ffca1f;
      --c-permament-theme3b : #ffaa00;
      
      --corpo-1 :#151f4a;
      --corpo-2 :#202D69;
      --corpo-3 :#32449F;
      --corpo-4 :#8792CC;
      --corpo-5 :#9DB7DD;
      --corpo-6 :#EAEFF7;
      
      --c-primary : #fe5627;
      --c-secondary: #fb734c;
      --c-tertiary: #88675d;
      --c-neutre: #bb9e95;
      
      --bg-1 : #fe5627;
      --bg-2 : #fb734c;
      --bg-3 : #FFE5DD;
      --bg-4 : #FEEBE5;
      --bg-5 : #fffaf8;
      
      /* Gradient */
      --cta-gradient-start:#3D1F6F; 
      --cta-gradient-end:#ff4511; 
      --title-gradient-start:#6d23e7; 
      --title-gradient-end:#ff4511;       
      
      /* Radius */
      --radius-xs : 7px;
      --radius-s : 10px;
      --radius-m : 15px;
      --radius-l : 35px;
 }


#prevoyance {
  --c-primary : var(--c-permament-theme2);
  --c-secondary: var(--c-permament-theme2b);
  --c-tertiary: #44827f;
  --c-neutret: #8aaaa9;
  
  --bg-1 : #73c6b8;
  --bg-2 : #58f0de;
  --bg-3 : #d0f2ec;
  --bg-4 : #e6f8f5;
/*   --bg-5 : #F4F9F8; */
  --bg-5 : #f7fdfc;
  
  --cta-gradient-start: var(--corpo-3); 
  --cta-gradient-end: var(--c-permament-theme2);
  --title-gradient-start:#6d23e7; 
  --title-gradient-end: var(--c-primary);    
  
}

#retraite {
  --c-primary : var(--c-permament-theme3);
  --c-secondary: var(--c-permament-theme3b);
  --c-tertiary: #745029;
  --c-neutre: #a58b74;
  
  --bg-1 : #ffca1f;
  --bg-2 : #ffdc43;
  --bg-3 : #fff2cb;
  --bg-4 : #fff6d9;
  --bg-5 : #fffcf0;
  
  --cta-gradient-start: var(--c-permament-theme1); 
  --cta-gradient-end: var(--c-permament-theme3b);
  --title-gradient-start:var(--c-permament-theme1); 
  --title-gradient-end: var(--c-permament-theme3b);      
}


#espacepro {
  
  --c-primary : var(--corpo-6);
  --c-secondary: var(--corpo-5);
  
  --c-permament-2 : #ea4769; 
  
    --cta-gradient-start: #6d23e7; 
    --cta-gradient-end: #6f6dfc; 
    --title-gradient-start:#6d23e7; 
    --title-gradient-end: #6f6dfc;      

  }
  
#espacepro .bg--blue-dark2 {
  background-color: var(--corpo-2);
}
  
#espacepro {
  background-color: var(--corpo-1);
  color : var(--c-permament-0);
}  

#espacepro .ariane ul a, 
#espacepro a.discover,
#espacepro p.edito {
  color: var(--corpo-4);
}


#decouvrir header,
#guideps header {
  background-image: url(media/bg_4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: var(--c-permament-0);
  padding: 0;
}

#guideps header {
  height: 100vh;
  background-image: url(media/bg_2.jpg);

}


#decouvrir header #manuscrit,
#guideps header #manuscrit{
  
  font-family: "SilentmindDemo", serif;
  font-size: calc(var(--fs-xxxl)*1.75);  
  background: linear-gradient(135deg,  var(--c-permament-theme3b) 0, var(--c-permament-theme1) 50%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  line-height: 100%;
  margin-bottom: calc(var(--m)/2);
  
  flex-grow: 0;
  flex-shrink: 0;

}

#decouvrir header .ariane li:last-child a ,
#guideps header .ariane li:last-child a,
#decouvrir header .ariane a.discover ,
#guideps header .ariane  a.discover {
 color:  white;
}

.global-bg {
  background-color: rgba(30, 34, 30, 0.7);
  padding: calc(var(--m)*2) 0;

}

#guideps .global-bg {
  height: 100svh;
}

#decouvrir #intro .col-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#decouvrir #intro .col-right p {
  width: 75%;
  text-wrap: pretty;
}


#info-legal .col-main ul {
  padding-left : 17px;
}

#info-legal .col-main strong {
  font-weight: 500;
}

#info-legal .col-main ul li {
  list-style-type: disc;
  color: var(--c-permament-2);
  }
  
#info-legal .col-main a {
  color: var(--c-primary);
}


.bg--white { background-color: var(--c-permament-0); }
.bg--blue-light { background-color: var(--corpo-6);}
.bg--blue-dark { background-color: var(--corpo-1); }
.bg--medium { background-color: var(--bg-3);}
.bg--medium-light { background-color: var(--bg-5); }
.bg--neutre-light { background-color: var(--c-permament-4);  }


  


html {
    font-size: var(--fs-m);
    line-height: 1.5rem;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: var(--c-permament-1);
    scroll-behavior: smooth;
    scroll-padding-top : 0px;
    
}

.desktophide {
display: none;
}

html#no-scroll {
  scroll-behavior: auto;
}


/* › › › › › › › › › › › › › › › › › S T R U C T U R E  */




section, footer, header {
  
  width: 100%;
  position: relative;
  padding: calc(var(--m)*2) 0;
}

section.nobot {
  padding: calc(var(--m)*2) 0 0 0;
  overflow: hidden;
}

section .content,
nav .content,
header .content,
 footer .content {  
  width: var(--content);
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--m);
  justify-content: space-between;
  z-index: 1;
  position: relative;
}

#espacepro hr {
  width: 100%;
  margin-block: var(--fs-xxl);
  background-color: transparent;
  border: none;
  border-bottom: 1px dashed var(--corpo-3);
}
 
.col-left, .col-right, .col-full {
  flex: 1 1;
}

#espacepro .col-left {
  padding-right: 50px;
}

#espacepro .col-left h4 {
  margin: 0;
  margin-bottom: -20px;
  font-weight: 800;
  color: var(--corpo-5);
}

#espacepro .col-left h3 {
  margin: 0;
  margin-bottom: -10px;
}

.col-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--m);
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items:  flex-start;
  gap: var(--m);
}

.col-full {
  min-width: 100%;
}

.col-half, .col-main {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  width: 50%;
}



.col-main {
  flex-grow: 1;
  max-width: 66%;
  align-items: flex-start;
}

#retraite .col-main {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--m);

}

#retraite aside {
  position: sticky;
  top: 0;
  height: 600px;
}

#retraite hr {
  border: none;
  border-top: 1px solid var(--c-neutre);
  visibility: unset;
  opacity: 1;
  width: 100%;
  margin: var(--m) 0;
}

.right2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.deco {
  position: absolute;
  display: block;
  z-index: -1;
}

.deco img {
  width: 100%;
}



/* › › › › › › › › › › › › › › › › › F O N T  */



h1, h2, h3 {
  font-weight: 700;
  line-height: 120%;
  margin-bottom: calc(var(--m)/2);
  text-wrap : balance;
}

h1 { 
  font-size: var(--fs-xxxl);
  font-size: clamp(1.8rem, 2.5vw, 2.5rem); 
  width: 100%;
}

h2 {
  font-size: var(--fs-xxl);
  font-weight: 600;
  letter-spacing: -0.8px;
  font-size: clamp(1.45rem, 2.5vw, 1.8rem); 
  color: var(--c-primary);
}




h2 em {
  font-weight: 300;
  letter-spacing: 0;
  font-size: var(--fs-xl);
}

.bg--medium-light h2 {
  color: var(--c-secondary);
}

h3 {
  font-size: var(--fs-xl);   
}

a.cta {
  display: inline-block;
  background: linear-gradient(to right, var(--cta-gradient-start), var(--cta-gradient-end)) border-box;
  padding: 10px 20px;
  color:white;
  border-radius: var(--radius-s);
  font-weight: 500;
  font-size: var(--fs-s);
  margin : calc(var(--m)/2) 0;
  transition: all linear 200ms;
}

a.cta2 {
  background: transparent;
  color: var(--c-permament-1);
  border: 2px solid var(--c-permament-1);
}

.bg--blue-light a.cta2 {
  color: var(--corpo-3);
  border: 2px solid var(--corpo-3);
}

a.cta:hover {
  padding: 10px 23px;
}

a.cta-picto {
  background-image: url(media/picto_bouee.svg);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 25px;
  padding-left: 45px;
}

a.cta-picto:hover {
  padding-left: 45px;
  padding-right : 25px;
}


a.link {
font-size: var(--fs-s);
line-height: 130%;
}

a.link:hover {
  text-decoration: underline;
}

a.link2, a.link3 {
  background-color: var(--bg-4);
  padding: 7px 14px 7px 28px ;
  line-height: 130%;
  display: inline-block;
  border-radius: var(--radius-xs);
  font-size: var(--fs-s);
  color: var(--c-tertiary);
  background-image: url(media/picto_trombone_grey_dark.svg);
  background-repeat: no-repeat;
  background-position: 8px 8px;
  background-size: 15px;
  transition: all ease-in-out 200ms;

}

a.link2:hover {
  background-color: var(--bg-3);
  padding-left: 30px ;
  color: var(--c-tertiary);
  background-position: 8px 8px;
}

a.link3 {
  background-color: transparent;
  padding-left: 22px ;
  color: var(--c-primary);
  border-radius: 0;
  background-image: url(media/picto_trombone_grey.svg);
  background-position: 0px 8px;
  background-size: 16px;
}

a.link3:hover {
  background-color: transparent;
  text-decoration: underline;
}


ul.enumeration,
ul.enumeration2 {
  display: flex;
  flex-direction: column;
  gap: calc(var(--m)/4);
  align-items: flex-start;
}

ul.enumeration li,
ul.enumeration li a
ul.enumeration2 li  {
  background-color: var(--bg-3);
  line-height: 130%;
  display: inline-block;
  border-radius: var(--radius-xs);
  background-image: none;
  padding: 7px 14px ;
  color: var(--c-permament-1);
  text-decoration: none;
}

ul.enumeration li a {
  color: var(--c-primary);
  font-weight: 400;
}

ul.enumeration2 li,
ul.enumeration2 li a {
  background-color: var(--corpo-3);
  color: var(--c-permament-0);
  font-size: var(--fs-xs);
}




#manuscrit {
  font-family: "SilentmindDemo", serif;
  font-size: calc(var(--fs-xxxl)*1.75);  
  background: linear-gradient(135deg,  var(--title-gradient-start) 0, var(--title-gradient-end) 70%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  line-height: 100%;
  margin-bottom: calc(var(--m)/2);
  
  flex-grow: 0;
  flex-shrink: 0;
}

p.maj-title {
  color: var(--c-permament-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: calc(var(--m)/4);
}

p.edito {
  text-wrap : balance;
  font-size: var(--fs-xl);
  line-height: 150%;
  color: var(--c-permament-2);
}

#decouvrir p.edito,
#guideps p.edito {
  color: var(--c-permament-0);
}

 
p.legende {
  color: var(--c-permament-2);
  font-size: var(--fs-xs);
  line-height: 1rem;
  margin: 0;
}

p.speech {
  font-family: "SilentmindDemo", serif;
  font-size: calc(var(--fs-xxxl)*1.3);  
  color: var(--c-permament-3);
  line-height: 80%;
  margin-bottom: calc(var(--m)/2);
}




header {
  padding: calc(var(--m)/2) 0 var(--m);
}

header .content {
  gap: calc(var(--m)*1.5);
}

header .ariane {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    width: 100%;
}

header .ariane a {
    color: var(--c-permament-2);
}

header .ariane ul {
    display: flex;
}

header .ariane li::after {
    content:'›';
    padding: 0 5px;
    color: var(--c-permament-2);
}

header .ariane li:last-child a {
    color : var(--c-permament-1);
    font-weight: 400;
}

header .ariane li:last-child::after {
    content:'';
}

header .ariane a:hover {
    text-decoration: underline;
}

header .ariane a.discover {
    color: var(--corpo-2);
    font-weight: 400;
}

header .col-left {
justify-content: center;
gap: 0;
}






header #arrow {
    text-align: center;
    display: inline-block;
    width: 100%;
    line-height: 100%;
}

header #arrow img {
    width: 30px;
    opacity: 0.7;
    transition: all linear 200ms;
}

header a#arrow:hover img {
    opacity: 1;
}




.header-fille .col-right {
  text-align: right;
}

.header-fille .col-right img {
  width: 60%;
  min-width: 350px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-l);
  object-fit: cover;
  margin: 0;

}





.metiers {
    position: relative;
    height: 550px;
}

.metiers li {
    display: block;
    color: white;
    height: 300px;
    width: clamp(200px, 55%, 600px);

    border-radius: var(--radius-m);
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    overflow: hidden;
    box-shadow:  0px 10px 15px rgba(0, 0, 0, 0.2);
}

.metiers li a {
    display: block;
    height: 100%;
    width: 100%;
    background-color: transparent;
    border-radius: var(--radius-m);
    opacity: 1;
    transition : all ease-in-out 300ms;
    color: white;
    
    overflow: hidden; 
}

.metiers li a:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

.metiers li a p {
    position: absolute;
    font-size: calc(var(--fs-xl)*1.15);
    line-height: 190%;
    font-weight: 700;  
    display: flex;
    flex-wrap: wrap;
    column-gap:  calc(var(--m)/3);
}

.metiers li:nth-child(1){
    background-color: var(--c-permament-theme1);
    z-index: 2;
    top: 0px;
    left: clamp(10px, 10%, 150px);
    background-image: url(media/portrait_1.png);  
}

.metiers li:nth-child(1) p { 
    top: 190px;
    left: 30px;
    text-shadow: 0 0px 20px red;  
}

.metiers li:nth-child(1)  a:hover {
    background-color: rgba(150, 37, 0, 0.5);
}



.metiers li:nth-child(2){
    background-color: var(--c-permament-theme2);
    z-index: 1;
    top: 100px;
    right: 0;
    background-image: url(media/portrait_2.png);
}

.metiers li:nth-child(2) p { 
    bottom: 20px;
    left: 25%;
    text-shadow: 0 0px 20px rgb(0, 108, 90);  
}

.metiers li:nth-child(2)  a:hover {
    background-color: rgba(4, 75, 60, 0.5);
}

.metiers li:nth-child(3){
    background-color: var(--c-permament-theme3);
    z-index: 3;
    bottom: 0 ;
    left: 0;
    background-image: url(media/portrait_3.png);
}

.metiers li:nth-child(3) p { 
    top: 20px;
    left: 30px;
    text-shadow: 0 0px 20px rgb(236, 147, 3);  
}

.metiers li:nth-child(3)  a:hover {
    background-color: rgba(150, 92, 0, 0.5);
}

.metiers li img {
    width: 20px;
    opacity: 0;
    transition: all ease-in-out 600ms;
}

.metiers li a:hover img {
    opacity: 1;
}



/* › › › › › › › › › › › › › › › › › M A I N  */





.intro ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--m)/2);
}

.intro .col-left {
  gap: var(--m);
 }

 .intro ul li {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 225px;
  position: relative;
  border-radius: var(--radius-m);
  padding: var(--m) calc(var(--m)/1.5) calc(var(--m)/1.5);
  background-color: var(--c-permament-4);
  color: var(--c-permament-1);
  transition: all linear 200ms;
  border: 1px solid transparent;
 }

 .intro ul li::before {
  content: '';
  display: block;
  height: 7px;
  width: 150px;
  position: absolute;
  top: 0;
  left: calc(var(--m)/1.5);
 }


.intro ul li:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid white;
}


.intro ul li h3 {
  margin-bottom: 0;
}

.intro ul li h3 em {
  text-transform: uppercase;
  font-size: var(--fs-xs);
  display: block;
  font-weight: 400;
  color: var(--c-permament-2);
}

.intro ul li p {
  font-size: var(--fs-s);
  line-height: 150%;
}


.intro ul li a.link {
  display: inline-block;
  text-wrap : balance;
}

.intro ul li:hover a {
 text-decoration: underline;
}


.intro ul li:first-child a.link {
  color: var(--c-permament-theme1);
  text-wrap: balance;
}

.intro ul li:first-child::before {
  background-color: var(--c-permament-theme1);
}

.intro ul li:nth-child(2) a.link {
  color: var(--c-permament-theme2b);
}

.intro ul li:nth-child(2)::before {
  background-color: var(--c-permament-theme2);
}

.intro ul li:last-child a.link {
  color: var(--c-permament-theme3b);
}

.intro ul li:last-child::before {
  background-color: var(--c-permament-theme3);
}


ul.edito-liste {
  list-style: outside;
  padding-left: 17px;
}

ul.edito-liste li {
  list-style-type: disc;
  color: var(--c-tertiary);
}

ul.edito-liste li::marker {
  color: var(--c-primary);
}



.cards h2 {
  color: var(--corpo-3);
 }

.cards ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: calc(var(--m)/2);
}

.cards ul li {
  flex-grow: 1;
  flex-shrink: 0;
  width: calc(50% - calc(var(--m)/4));
  min-width: 300px;
  background-color: white;
  border-radius: var(--radius-m);
  padding: calc(var(--m)/1.5) ;
  padding-right: 10% ;
  display: flex;
  gap: calc(var(--m)/1.5);
  align-items: flex-start;
}


.cards ul li span {
  font-weight: 700;
  line-height: 130%;
  font-size: var(--fs-xl);
}

.bg--blue-light .cards ul li span { 
  color: var(--corpo-3);
} 


.cards ul li h3 {
  font-size: var(--fs-m);
  margin-bottom: 3px;
}

.cards ul li p {
  font-size: var(--fs-s);
}


.cards .deco-left {
width: 75px;
top: 150px;
right: -50px;
}

.blue-cards {
display: flex;
flex-direction: column;
gap: calc(var(--m)/2); 
}

.blue-cards li {
  padding: calc(var(--m)/2) var(--m);
  background-color: white;
  border-radius: var(--radius-xs);
  display: flex;
  gap: calc(var(--m)/2);
  font-size: var(--fs-m);
  font-weight: 400;
}


.blue-cards li span {
  font-weight: 700;
  line-height: 130%;
  font-size: var(--fs-xl);
  color: var(--corpo-3);
}





.focus {
    background-color: var(--corpo-2);
    display: flex;
    align-items: center;  
    overflow: hidden;
    border-radius: var(--radius-m);
    position: relative;
    align-items: stretch;
}


.focus div.joinus-content {
    flex: 1 1;
    padding: var(--m);  
    color: white;
    font-size: var(--fs-s);
    z-index: 2;
    background-color: transparent !important;
}

.focus div.joinus-image {
  flex: 1 1;
    background-image: url(media/pro.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    content: '';
    width: 50%;
    opacity: 0.5;
}


.focus div h2  {
    color: var(--c-permament-0);
}

.focus p.maj-title {
    color: var(--corpo-4);
}


.focus span {
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, var(--corpo-2) 20%, transparent 60% );
    position: absolute;
    top:0;
    right: 0;
}

.focus div a.cta2 {
  border-color: white;
  color: white;
  margin-top: var(--m);
}

.intro-lien-fille {
  font-size: var(--fs-xl);
  color: var(--c-secondary);
}

.intro-lien-fille strong {
  font-weight: 600;
}

.bg--blue-light h2 {
  color: var( --corpo-3);
}

.bg--blue-light .intro-lien-fille {
  color: var(--c-corpo-1);
  margin-bottom: 2rem;
}

.conseil .col-half {
  padding-top: 80px;
  background-image: url(media/picto_mme.svg);
  background-repeat: no-repeat;
  background-size: 50px;
}

.conseil a.link {
  color: var(--c-permament-3);
}

.conseil ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--m)/4);
  
}

.conseil ul li {
  flex-grow: 1;
  flex-shrink: 0;
  width: calc(50% - calc(var(--m)/8));
  min-width: 300px;
}






.pre-onglets .onglets-selector {
  flex: 1 0;
  display: flex;
  column-gap: var(--m);
  }




.pre-onglets .onglets-selector li {
  flex: 1 1;
  text-align: center;
}



.pre-onglets .onglets-selector li a {
  display: block;
  padding: 10px;
  background-color: var(--bg-5);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--c-secondary);
  transition: all ease-in-out 300ms;
  margin-top:10px

}

.pre-onglets .onglets-selector li a:hover {
   color: var(--c-tertiary);
   padding: 15px 10px;
   margin-top: 0;
 }
 
 .pre-onglets .onglets-selector li.onglet-actif a {
   background: none;
   background-color: var(--bg-4);
   color: var(--c-tertiary);
   }




#pre-onglets { 
  padding-bottom: 0;
  }
  
#onglets {
   background-color: var(--bg-4);
}

ul.level {
  display: flex;
  gap: calc(var(--m)/2);
}

ul.level li {
  background-color: white;
  font-size: var(--fs-xxs);
  padding: 7px 10px ;
  line-height: 100%;
  border-radius: var(--radius-xs);
  color: var(--c-permament-2);
  letter-spacing: 0.3px;
}







.mother-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-wrap: pretty;

}

.col h3 {
  margin: 0;
}

.mother-content h2 {
  width: 100%;
}

.mother-content .col img.illus {
  width: 100%;
  aspect-ratio: 7 / 3;
  border-radius: var(--radius-s);
  object-fit: cover;
}

.mother-content .col, .mother-content aside {

  flex : 1 1;
  min-width: 350px;
  
  display: flex;
  flex-direction: column;
  gap: var(--m);
  align-items: flex-start;
}

.mother-content .col ul {
  width: 100%;
  background-color: var(--c-permament-4);
  padding: calc(var(--m)/2);
  border-radius: var(--radius-s);
  
}


.mother-content .col ul li::before {
  content: '• ';
  color: var(--c-primary);
  position: absolute;
  left: -10px;
  top: 0px;
}

.mother-content .col ul li {
  font-size: var(--fs-s);
  line-height: 150%;
  margin-bottom: 5px;
  position: relative;
  margin-left: 8px;
  width: auto;
}

.mother-content .col ul li strong {
  font-weight: 500;
}

.mother-content .col p strong, details p strong {
  background-color: var(--c-permanent-marker);
}


.mother-content aside, 
.mother-content aside > * {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: var(--fs-s);
  line-height: 140%;
  align-items: flex-start;
}

.mother-content aside > * {
  padding: var(--m);
  border-radius: var(--radius-s);
  width: 100%;
  background-repeat: no-repeat;
  background-position: right 1rem top 1rem;
  background-size: 20px;
}

.mother-content aside > * h4 {
  text-transform: uppercase;
  font-size: var(--fs-xs);
  text-wrap:pretty;
  line-height: 120%;
  font-weight: 700;
  color: var(--c-permament-1);
}


.pedago {
  background-color: var(--c-secondary);
  color: white;
  flex: 0 0 ;
  background-image: url(media/picto_memory.svg);

}


.pedago ul li {
  background-image: url(media/picto_check.svg);
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: top left;
  padding-left : 30px;
  margin-bottom: calc(var(--m)/4);
}

.whymme {
  background-color: var(--bg-3);
  background-image: url(media/picto_chat.svg);
}

.whymme .link {
  color: var(--c-tertiary);
  font-size: var(--fs-xs);
}

.portrait {width: 120px; margin-bottom: 20px;}

 


/* › › › › › › › › › › › › › › › › › FAQ  */



.bg--blue-dark details {
  /* background-color: purple; */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

details {
  position: relative;	
  list-style: none;
  width: 100%;
  padding : 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

details:last-child {
  border-bottom: none;
}


/* Sous ios la fleche continue de s'afficher */
details summary::-webkit-details-marker {
  display: none;
  }
  
  
summary {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none !important;
  height: 50px;
  width: 100%;
}



details summary span  {
  display: flex;
  align-items: center;
  height: 30px;
  width: 100%;
  padding: 0 50px 0 0;
  background-image: url(media/nav.svg);
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: bottom right 1rem ;	
  transition: background-position 400ms cubic-bezier(.47,1.64,.41,.8);
  gap: 2rem;
  z-index: 1; 
  cursor: pointer;
}


.bg--blue-dark details summary span  {
  background-image: url(media/nav2.svg);
}

details summary span h3 {
  margin: 0;
  width: 90%;
  font-size: var(--fs-m);
}




details summary span::before, details p::before {
    content: 'Q';
    display: block;
    font-weight: 900;
    background-color: var(--c-primary);
    border-radius: 100px;
    height: 15px;
    width: 15px;
    text-align: center;
    padding: 10px;
    line-height: 100%; 
    color: white;   
    flex-grow: 0;
    flex-shrink: 0;  
}


.metodo details summary span::before, 
.metodo details p::before {
  display: none;
}

.metodo details summary span em {
  display: block;
  font-weight: 900;
  background-color: var(--corpo-3);
  border-radius: 100px;
  text-align: center;
  padding: 10px 0;
  line-height: 100%; 
  color: white;   
  flex-grow: 0;
  flex-shrink: 0;  
  width: 35px;
  text-align: center;
}



details p {
/*   display: flex; */
position: relative;
  height: auto;
  width: 90%;
  padding: 1rem calc(35px + 2rem);
  gap: 2rem;
}


details p::before {
  content: 'R';
  background-color: var(--c-tertiary); 
  opacity: 0.4; 
  position: absolute;
  top :0.5rem;
  left: 0;
}

details ul {
  position: relative;
  height: auto;
  width: 90%;
  padding: 1rem calc(35px + 2rem);
  list-style-position: outside;
  padding: 0 calc(52px + 2rem);
}

details li {
  list-style-type: disc;
}



details summary:hover span {
  background-position: bottom -2px right 1rem;	
  cursor: pointer;
}

details[open] summary span {
  background-position: top right 1rem;	
}

details[open] summary:hover span {
  background-position: top -2px right 1rem;	
  
}


ul.faq2 {
  display: flex;
  flex-direction: column;
  gap: var(--m);
  padding: var(--m) 0;
}



ul.faq2 li {
  background-color: var(--bg-5);
  padding: var(--m);
  border-radius: var(--radius-m);
}

ul.faq2 p {
  columns: 2;  
  column-gap: var(--m);
  font-size: var(--fs-s);
}


ul.faq2 dt, ul.faq2 dd {
  display: flex;
  width: 100%;
  padding: 1rem 0;
  gap: 2rem;
}

ul.faq2 dt {
  display: flex;
  align-items: center;
  width: 100%;
}

ul.faq2 dt h3 {
  margin: 0;
}

ul.faq2 dt::before, 
ul.faq2 dd::before {
  content: 'Q';
  display: block;
  flex-grow: 0;
  flex-shrink: 0;  
  font-weight: 900;
  background-color: var(--c-primary);
  border-radius: 100px;
  height: 15px;
  width: 15px;
  text-align: center;
  padding: 10px;
  line-height: 100%; 
  color: white;   
}

ul.faq2  dd::before {
  content: 'R';
  background-color: var(--c-tertiary); 
  opacity: 0.4; 
}

ul.faq2 li a {
  flex-flow: 0;
  flex-shrink: 0;
  margin-top: calc(var(--m)/4);
  margin-left: 63px;
}



.prefooter .deco-left {
width: 250px;
bottom: 50px;
left: -150px;
}


.prefooter .col-left, .prefooter .col-right {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: white;
  text-align: center;
  padding: calc(var(--m)*2);
  border-radius: var(--radius-l);
}

.prefooter .col-left {
  background-image: url(media/files.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.prefooter .col-right {
  background-color: var(--corpo-3);
}

.prefooter .col-left h2, .prefooter .col-right h2 {
  color: var(--c-permament-0);
}


.prefooter .col-right a.link {
  color: var(--corpo-4);
}



.prefooter .col-left a.cta-picto,  .prefooter .col-right a.cta-picto {
  background: reset;
  background-color: var(--corpo-2);
}
 
.prefooter .col-right a.cta-picto {
  background-image: url(media/picto_bouee.svg);
}

.prefooter .col-right a.cta-picto {
  background-image: url(media/picto_phone.svg);
}



footer .container {
  display: flex;
  gap: var(--m);
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  padding: calc(var(--m)*2) 0;
}

footer .content div {
  flex: 2 1;
  padding-left: var(--m);
  border-left: 1px solid  var(--corpo-2);
}

footer .content div:first-child {
  border: none;
  padding: 0;
  flex: 1 1;
}

footer .content div:last-child {
  flex: 1 1;
}

footer .content div:first-child li:first-child a img {
  width: 80px;
}

footer .content div:first-child li:last-child a {
display: inline-block;}

footer .content div:first-child li:last-child a img {
  width: 15px;
}

footer .content div:first-child li a {
  opacity: 0.6;
}

footer .content div:first-child li:first-child a {
  opacity: 1;
}

footer h3 {
  text-transform: uppercase;
  color: var(--corpo-6);
  font-size: var(--fs-xs);
  margin: 0;
  line-height: 140%;
  font-weight: 500;
}

footer h4 {
  text-transform: uppercase;
  color: var(--corpo-5);
  opacity: 0.6;
  font-size: var(--fs-xs);
}

footer li {
  line-height: 95%;
  color: var(--corpo-4);
}

footer li a {
  color: var(--corpo-5);
  font-size: var(--fs-xs);
  transition: color ease-in-out 200ms;
  display: block;
  padding: 4px 0;
}

footer .content div li a:hover {
  color: white;
}

.egue {
  background-color: #17172b;
  font-size: var(--fs-xs);
  color: var(--corpo-3);
}

.egue a {
  color: var(--corpo-4);
}

.egue a:hover {
  text-decoration: underline;
}




.nav-interne {
  padding-top: var(--m);
}


.nav-interne .col-right img {
  width: 100%;
  height: 100%;
  min-width: 350px;
  border-radius: var(--radius-l);
  object-fit: cover;
  margin: 0;
}

.link-cards {
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--m)/2);
}

.nav-interne .link-cards {
  width: 150%;
}

.link-cards li {
  width: 30%;
  min-width: 280px;
  flex-grow: 1;
  padding: 5px 0;
}


.nav-interne .link-cards li {
  width: calc(50% - calc(var(--m)/4));
}

.link-cards a {
  display: inline-block;
  display: flex;
  gap: calc(var(--m)/1);
  flex-grow: 1;
  flex-shrink: 1;
  align-items: center;
  padding: var(--m);
  line-height: 130%;
  background-color: var(--bg-5);
  text-wrap: pretty;
  font-size: var(--fs-s);
  border-radius: var(--radius-s);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0);
  transition: all linear 300ms;
  border: 1px solid white;
  color: var(--c-permament-1);
}

.link-cards a:hover,
#mother-1 .link-cards li:nth-child(1) a,
#mother-2 .link-cards li:nth-child(2) a,
#mother-3 .link-cards li:nth-child(3) a,
#mother-4 .link-cards li:nth-child(4) a,
#mother-5 .link-cards li:nth-child(5) a,
#mother-6 .link-cards li:nth-child(6) a,
#mother-7 .link-cards li:nth-child(7) a,
#mother-8 .link-cards li:nth-child(8) a,
#mother-9 .link-cards li:nth-child(9) a,
#mother-10 .link-cards li:nth-child(10) a 
 {
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  background-color: var(--c-permament-0);
}


.link-cards a span p {
  font-size: var(--fs-xl);
  color: var(--c-permament-3);
  font-weight: 500;
  transition: all linear 300ms;
}

.link-cards a:hover span p,
#mother-1 .link-cards li:nth-child(1) a  span p,
#mother-2 .link-cards li:nth-child(2) a span p,
#mother-3 .link-cards li:nth-child(3) a span p,
#mother-4 .link-cards li:nth-child(4) a span p,
#mother-5 .link-cards li:nth-child(5) a span p,
#mother-6 .link-cards li:nth-child(6) a span p,
#mother-7 .link-cards li:nth-child(7) a span p,
#mother-8 .link-cards li:nth-child(8) a span p,
#mother-9 .link-cards li:nth-child(9) a span p,
#mother-10 .link-cards li:nth-child(10) a span p 

 {
  color: var(--c-primary);
}



.partenaires ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--m)/2);
  padding: var(--m) 0;
}

.partenaires li {
  border-radius: var(--radius-xs);
  flex: 1 1;
  background-color: white;
  min-width: 150px;
  overflow: hidden;
  box-shadow: 0 15px 20px rgba(9, 18, 62, 0.0);
  transition: all ease-in-out 300ms;
  text-align: center;
}

.partenaires li img {
  width: 100%;
  max-width: 250px;
}

.partenaires li:hover {
  box-shadow: 0 15px 30px rgba(9, 18, 62, 0.1);

}

.verbatim {
  display: flex;
  gap: var(--fs-xl);
  flex-wrap: wrap;
}

.verbatim > * {
  border: 1px solid var(--corpo-4);
  padding: var(--m);
  border-radius: var(--m);
  background-color: var(--corpo-3);
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--fs-s);
  font-size: var(--fs-s);
  min-width: 300px;
}

.verbatim div div.people {
  text-transform: uppercase;
  font-size: var(--fs-xxs);
  color: var(--corpo-4);
  display: flex;
  align-items: center;
  line-height: 130%;
  gap: 10px;
  
}

.verbatim div .people .portrait {width: 50px; margin: 0;}



@media only screen and (min-width: 1000px) {
  

/* D E C O */

/* #accueil header {
  
  background-repeat: no-repeat;
  
  background-image: 
    url(media/deco_1.svg),
    url(media/deco_2.svg),
    url(media/deco_3.svg);

  background-position:
    left center,
    right 10% top 9%,
    center center;
  
  background-size:
    200px,
    200px,
    5%;  
} */


.header-mother {
  
  background-repeat: no-repeat;
  
  background-image: 
    url(media/deco_6.svg),
    url(media/deco_7.svg),
    url(media/deco_8.svg);

  
  background-position:
    top 10% right 15%,
    right 0 bottom 10%,
    center left 15%;
  
  background-size:
    20%,
    150px,
    50px;
  
  
}


.header-fille .content {
  
  background-repeat: no-repeat;
  
  background-image: 
    url(media/deco_9.svg);
  
  background-position:
    right 0% bottom 30%;
  
  background-size:
    40%; 
}

#prevoyance .header-fille .content {
  background-image: 
    url(media/deco_9b.svg);
    
  background-size:
    50%;  
}

#retraite .header-fille .content {
  background-image: 
    url(media/deco_9c.svg);
    
  background-size:
    50%;  
}

#espacepro .header-fille .content {
  background-image: none;
}

#cards {
  
  background-repeat: no-repeat;
  
  background-image: 
    url(media/deco_5.svg),
    url(media/deco_4.svg);

  background-position:
    left 12% top 40%,
    right 9%;
  
  background-size:
    70px,
    20%;
}


#fille-content {
  background-repeat: no-repeat;
  
  background-image: 
    url(media/deco_10.svg);
  
  
  background-position:
    top right;
  
  background-size:
    40%;
  
}



}








@media only screen and (max-width: 1000px) {



:root { 
  --content: 90%;
}

.mobilehide {display: none !important; }
.desktophide {display: inherit;}
 
.col-left, .col-right, .col-half, .col-main,
#decouvrir #intro .col-right p 
 { min-width: 100%;  max-width: 100%;}

.intro .col-left {margin-bottom: var(--m); }

.metiers {height: 450px; }
.metiers li {height: 250px;}
.metiers li:nth-child(1) p {top: 145px; }

h1, h2, h3 { text-wrap: inherit; }

footer .content {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

footer .content div {
  padding: 0;
  border-left: none;
}

.egue .content {justify-content: center; }

.pre-onglets .onglets-selector {
row-gap: var(--m);
flex-direction: column;
align-items: flex-start;
}

.pre-onglets .onglets-selector li  a {
  display: inline-block;
  text-align: left;
  margin: 0;
}

.pre-onglets .onglets-selector li.onglet-inactif {  order: 1;}

.pre-onglets .onglets-selector li.onglet-actif { order: 2;}

ul.faq2 p { columns: 1; }


.pre-onglets .onglets-selector li.onglet-inactif a { 
  border-radius: var(--radius-l);
  padding: 10px 50px 10px 20px;
  background-image: url(media/picto_fleche.svg);
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: right 20px center;
  line-height: 120%;

}

.pre-onglets .onglets-selector li.onglet-actif a { 
  font-size: var(--fs-xxl);
  text-align: left;
  padding: 0 var(--m) var(--m) 0;
  line-height: 130%;
  background-color: transparent;
  text-wrap:pretty;
}

.link-cards {width: 100%;}

.header-fille .col-right {text-align: center;}

.header-fille .col-right img {
  width: 100%;
  aspect-ratio: 5/3;
}

.nav-interne .link-cards {
  width: 100%;
  gap: 0;
}

.nav-interne .link-cards li {
  width: 100%;
}

.link-cards a {
  padding: calc(var(--m)/1.5);
  text-wrap: pretty;
  gap: 15px;
}

details summary span  {
 
  gap: 15px;
}