/* =====================================================
   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; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
* {box-sizing: border-box;}


:root {
interpolate-size: allow-keywords;
--container-size : min(90%, 1250px);


--space-big : 20px; 
--space-small : 5px; 

--fs-m: 16px;
--fs-l: calc(var(--fs-m)*1.25);
--fs-xl: calc(var(--fs-m)*1.5);
--fs-xxl: calc(var(--fs-m)*1.8);
--fs-xxxl: calc(var(--fs-m)*2.5);
--fs-xxxxl: calc(var(--fs-m)*4);
--fs-ms: calc(var(--fs-m)*0.9);
--fs-s: calc(var(--fs-m)*0.85);
--fs-ss: calc(var(--fs-m)*0.75);
--fs-xs: calc(var(--fs-m)*0.6);

--c-blue-0 : #19213F;
--c-blue-1 : #646d83;
--c-blue-2 : #285baf;
--c-blue-3 : #3170e8;
--c-blue-9: #b4cfda;
--c-blue-10: #eaf4f8;

--c-green-0 :#0d4733;
--c-green-1 :#10a16d;
--c-green-2 :#30CE6C;
--c-green-3 :#58f192;
--c-green-4 :#91c7a6;
--c-green-5 :#C9EFD8;
--radius-small :4px;
--radius-medium :8px;
--radius-big : var(--fs-m);

}


html {
  font-family: Roboto, sans-serif;
  color: var(--c-blue-0);
  line-height: 160%;
  font-size: var(--fs-m);
  font-weight: 300;
  scroll-behavior: smooth;
}


.bg-gradient {background: linear-gradient(90deg, rgba(251,252,253,1) 0%, rgba(229,241,247,1) 100%);}
.bg-lightblue {background-color: var(--c-blue-10);}
.bg-white {background-color: white;}

section, header, footer {   width: 100%;   padding-block: var(--fs-xxxxl); }

.content {   max-width: var(--container-size);   margin: 0 auto;   display: flex;   flex-direction: column;   gap: var(--fs-xxxl); }

header {background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; overflow: hidden;}
header:before {   content: '';   position: absolute;   inset: 0;   background: rgba(0,0,0,0.6);   z-index: 1; }
header .content {gap: var(--fs-m); align-items: center; text-align: center; justify-content: center; padding-block: 10%; position: relative;   z-index: 2;  color: white;}
header h1 strong {color: var(--c-green-3);}




.block {   width: 100%;   display: flex;   flex-direction: column;   gap: var(--fs-l); align-items: flex-start;}
.row {   display: grid;   gap: var(--fs-xxxl);   grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.col {   display: flex;   flex-direction: column;   gap: var(--fs-m); }

.row-max {row-gap: 100px;}
.col.col-right {align-items: flex-end;}
hr { margin-block: var(--fs-xxxl); border: none; background-color: transparent; border-top: 1px dashed var(--c-blue-9); width: 100%;}
hr.mini {border: none; margin-block: var(--fs-l);}

.cible { width: 100%;  display: grid;   gap: var(--fs-s);   grid-template-columns: repeat(4, 1fr); align-items: stretch; }

.hero {
  position: relative;   min-height: 100vh;   min-height: 100svh; /* mobile fix */   display: flex;  flex-direction: column;  align-items: center;
  justify-content: space-between;   text-align: center;   color: white;    background-size: cover;   background-position: center;   background-repeat: no-repeat;   overflow: hidden;  background-color: black;}


.hero::before {   content: "";   position: absolute;   inset: 0;   background: rgba(0, 0, 0, 0.3); }
  
.hero .content {  flex: 1 1; position: relative;     z-index: 2; text-align: center; align-items: center; flex-direction: column;  justify-content: space-around; text-wrap: balance; }

.hero .cible {color: var(--c-blue-0); text-align: left;}
.hero h1 strong {color: var(--c-blue-9);}
 /* .hero .content .row {background-color: rgba(0, 0, 0, 0.5);  padding: var(--fs-xxxl); border-radius: var(--radius-big); color: black; text-align: left;   } */


/* =====================================================
   FONTS & VARIABLES
===================================================== */

h1, h2, h3, h4 {font-family: Raleway, sans-serif; font-weight: 700; line-height: 120%; margin-bottom: var(--fs-l);}

h1 { font-size: clamp(34px, 5vw, var(--fs-xxxl)); letter-spacing: -0.03em; }
h2  { font-size: clamp(24px, 3vw, var(--fs-xl)); letter-spacing: -0.03em; }
h3 { font-size: clamp(18px, 2vw, var(--fs-l)); margin-bottom: -5px; }
h4 { font-size: clamp(14px, 2vw, var(--fs-m)); margin-bottom: -5px;}


p.title {text-transform: uppercase; color: var(--c-blue-1); font-weight: 700; padding-left : var(--fs-s); border-left: 2px solid var(--c-green-2);}

header p.title { color: white; padding: 0; border: none;}

p.legende {text-transform: uppercase; color: var(--c-green-1); font-weight: 700; font-size: var(--fs-s); line-height: 150%; width: 90%;}
p.discrete {font-size: var(--fs-s); color: var(--c-blue-1); line-height: 130%; width: 90%;}
strong {color: var(--c-blue-2); font-weight: 400;}
.green strong, header strong {color: var(--c-green-1);}
p em {color: var(--c-blue-3); font-size: var(--fs-l); font-weight: 300; line-height: 150%;}  
  


.t-center {text-align: center; align-items: center; }
.t-green {color: var(--c-green-2);}

ul.classic {padding-left: 18px;}
ul.classic li {list-style-type: disc;}
ul.classic li::marker { color: var(--c-green-2); }

ul.cv li { border-top: 1px dashed #ddd; padding: 10px 0;
  
}

ul.objectif {display: flex; flex-direction: column; align-items: start; gap: var(--fs-s); padding-block: var(--fs-m);}
ul.objectif li {display: inline-block; position: relative; padding: 14px 24px 14px 60px; border-radius: 200px; background-color: var(--c-blue-10);  font-family: Raleway, sans-serif; font-weight: 700; box-shadow: rgba(26, 40, 78, 0.1) 0 4px 10px;  line-height: 115%;}

ul.objectif.bg-white {background-color: transparent;}
ul.objectif.bg-white li {background-color: white;}
ul.objectif li::before {content: ''; display: block; width: 30px; aspect-ratio: 1 / 1; background-image: url(../media/picto_objectif_green.svg); background-size: contain; position: absolute;  top: 50%;
transform: translateY(-50%); left: 14px; }
ul.objectif.objectif-blue li:before {background-image: url(../media/picto_objectif_blue.svg); }

ul.clients {   display: grid;   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));   gap: 20px;   width: 100%; }

ul.clients li {   display: flex;   align-items: center;   justify-content: center; }

ul.clients li img {   max-width: 100%;   height: auto;   display: block; }


/* =====================================================
   CTA & LINKS
===================================================== */

.cta {display: inline-block; padding: var(--fs-ss) var(--fs-l); background-color: var(--c-blue-3); border-radius: var(--radius-small); color: white; font-weight: 700; transition: background ease-in-out 300ms; cursor: pointer; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px; margin-top: var(--fs-s); align-self: flex-start;}
.cta:hover {background-color: var(--c-blue-2);}

.cta.cta-mini {padding: 5px var(--fs-m); }
.cta.white {background-color: white;  color: var(--c-blue-0); margin-top: 0;}
.cta.white:hover {background-color: var(--c-green-2);  }

.link {color: var(--c-blue-1); text-decoration: underline;}

/* =====================================================
   FAQ
===================================================== */

.faq {padding: 1rem 0; width: 100%; background-color: white; padding: var(--fs-xl); border-radius: var(--radius-small);}
.faq summary {   font-weight: 700;   cursor: pointer;   list-style: none;   position: relative;   padding-right: 30px;
}
.faq summary::-webkit-details-marker {   display: none; }
/* .faq summary::after {   content: "+";   position: absolute;   right: 0;    transition: transform 0.3s ease; }
.faq[open] summary::after {   content: "–"; } */
.faq-content {   margin-top: 0.5rem;   line-height: 1.6; }

/* =====================================================
   IFRAME
===================================================== */

iframe {width: 100%;}
#youtube {height: 400px;}


/* =====================================================
   CARDS
===================================================== */

.card {display: flex; flex-direction: column; align-items: flex-start; padding: var(--fs-xxl); border-radius: var(--radius-big); background-color: var(--c-blue-10); box-shadow: rgba(26, 40, 78, 0.2) 0 1px 3px; display: flex; flex-direction: column; gap: var(--fs-m); flex: 1; justify-content: center;}
.card.bg-white {background-color: white;}
.card.border {border: none; position: relative;}
.card.border:after {content:''; display: block; background-color: var(--c-green-2); width: 5px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}

.card.fond {background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; position: relative; overflow: hidden;}
.card.fond::before {   content: '';   position: absolute;   inset: 0;   background: rgba(0,0,0,0.5);   z-index: 1; }
.card.fond > * {   position: relative;   z-index: 2; }

.card.verbatim {background-color: white; gap: 0; position: relative; font-size: var(--fs-s); line-height: 150%; color: var(--c-blue-1); margin-bottom: var(--fs-m);}
.card.verbatim p {font-weight: 700; color: var(--c-blue-0);}
.card.verbatim::after {content: ''; display: block; height: 20px; width: 20px; background-image: url(../media/picto_triangle.svg); background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -20px; left: var(--fs-xxl); }

.card.new {background-color: var(--c-green-5);}
.card.new strong {background-color: var(--c-green-1); color: white; padding: 2px 5px; font-size: var(--fs-s); font-weight: 400; border-radius: var(--radius-small); margin-right: 5px;}
.card.new em {font-size: var(--fs-m); font-weight: 700; color: var(--c-green-0);}
.card.new a {color: var(--c-green-1); text-decoration: underline; font-style: italic;}
.card.new p.legende {color: var(--c-green-0);}
.card.image { width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: none; min-height: 200px;}

.card.image.full-image {background-size: contain; background-color: transparent; background-position: top center;  }

.card.media {overflow: hidden; border-radius: var(--radius-big); width: 100%; padding: 0;}

.card-cible { padding: var(--fs-xs); justify-content: space-between; background-color: rgba(255, 255, 255, 0.92);}
.card-cible img { aspect-ratio: 3 / 3.5; width: 100%;  object-fit: cover;
  object-position: center center; display: block; border-radius: var(--radius-medium);}
.card-cible div { padding: var(--fs-s); display: flex; justify-content: space-between; flex-direction: column; flex: 1 1; gap: 10px;}
.card-cible div p {font-size: var(--fs-s); line-height: 140%; margin-bottom: -10px;}
.card-cible a.cta {background-color: var(--c-green-5); color: var(--c-green-0); box-shadow: none;}
.card-cible a.cta:hover {background-color: var(--c-green-4);}
/* =====================================================
   FOOTER
===================================================== */


.contact { background-color: var(--c-green-2);  background-image: url(../media/plante.jpg);   background-blend-mode: multiply; background-repeat: no-repeat; background-size: 600px; background-position: right top; color: var(--c-green-0);}

.contact .col a {align-self: flex-end;}
footer {background-color: var(--c-blue-0); font-size: var(--fs-ms);}
footer .content { display: flex; flex-direction: row; justify-content: space-between;
  background-image: url(../media/Logo_white.png); background-size: 100px; background-position: center center; background-repeat: no-repeat;
}
footer a {color: white;}
footer .content ul:last-child {text-align: right; color: var(--c-blue-1);}
footer .content ul:last-child a {color: var(--c-blue-1);}







@media (max-width: 900px) {
  .row {	grid-template-columns: 1fr;}
  .cible { grid-template-columns: repeat(2, 1fr);  }
  footer .content {flex-direction: column; background-position: top var(--fs-xxxl) center; padding-top : 130px; }  
  footer .content ul, footer .content ul:last-child {text-align: center;}
  
  .col.col-right {align-items: flex-start;}
  .card.image { min-height: 200px;}
  .row-max .image {margin-bottom: -70px;}
  .contact { background-size: 250px; background-position: right -30px bottom -30px;}
  .contact .col a {align-self: flex-start;}
  
  .card-cible div { padding: 5px 3px 15px 5px; gap: 10px; }
  .card-cible div p {line-height: 110%;}
}