*,
*::before,
*::after
{
 margin:0;
 padding:0;
 box-sizing:border-box
}

.yourdatayourchoicesyourrules { white-space:nowrap }

img, svg
{
 font-style:italic;
 background-repeat:no-repeat;
 background-size:cover;
 shape-margin:1rem;
 max-width:100%;
 height:auto;
 vertical-align:middle
}

body
{
 font-family:arial, helvetica, sans-serif;
 font-size:1rem;
 line-height:1.25
}

@keyframes fadeIn
{
 from { scale:0; opacity:0 }
 to { scale:1; opacity:1 }
}

:root
{
 --primary:#368EC4;
 --primary-on:#E9F3F9;
 --primary-light:#BCDAED;
 --secondary:#E87B00;
 --secondary-on:#FFF2E3;
 --secondary-light:#FFD7AA;
}

.primary
{
 --background-color:var(--primary);
 --color:var(--primary-on);
 --link-color:var(--primary-on);
 --link-hover-color:var(--primary-light);
 --invert-background-color:var(--secondary);
 --invert-color:var(--secondary-on);
 --invert-link-color:var(--secondary-on);
 --invert-link-hover-color:var(--secondary-light)
}

.secondary
{
 --background-color:var(--secondary);
 --color:var(--secondary-on);
 --link-color:var(--secondary-on);
 --link-hover-color:var(--secondary-light);
 --invert-background-color:var(--primary);
 --invert-color:var(--primary-on);
 --invert-link-color:var(--primary-on);
 --invert-link-hover-color:var(--primary-light)
}

a, a:visited, a:link, a:hover
{
 text-decoration:underline;
 color:var(--link-color)
}

a:hover
{
 text-decoration:none;
 color:var(--link-hover-color)
}

strong.underline { font-weight:normal; text-decoration:underline }

article
{
 min-height:100dvh;
 background-color:var(--background-color);
 color:var(--color)
}

.primary + hr:has(+ .secondary)
{
 --linear-top-leading-color:var(--primary);
 --linear-bottom-trailing-color:var(--secondary)
}

.secondary + hr:has(+ .primary)
{
 --linear-top-leading-color:var(--secondary);
 --linear-bottom-trailing-color:var(--primary)
}

hr
{
 border:0;
 outline:0;
 height:75px;
 background:linear-gradient(to bottom right, var(--linear-top-leading-color) 0%, var(--linear-top-leading-color) 50%, var(--linear-bottom-trailing-color) 50%, var(--linear-bottom-trailing-color) 100%)
}

article > section
{
 padding-bottom:1rem
}

article > section > header > h1
{
 font-size:1.5rem;
 font-weight:bold;
 margin-bottom:0.75rem
}

article > section > header > h2
{
 font-size:1.25rem;
 font-weight:bold;
 margin-bottom:0.5rem
}

ul
{
 padding-block:0.5rem;
 list-style-position:inside;
 font-size:0.95rem
}

ul > li
{
 margin:0.25rem
}

body > footer
{
 text-align:center;
 padding:1rem;
 background-color:var(--background-color);
 color:var(--color)
}

body > footer > ul
{
 list-style:none
}

footer > ul > li
{
 margin:0 1rem;
 display:inline-block
}

.wrapped-width > *
{
 max-width:800px;
 width:100%;
 margin:0 auto;
 padding:1rem
}

.titleWithLogo
{
 --title-font-size:5rem;
 --slogan-font-size:2rem;
 --title-margin-bottom:1rem;
 display:flex;
 flex-direction:column;
 height:100dvh;
 padding-block:0.5rem
}

.titleWithLogo header
{
 flex:0 1 auto;
 text-align:center;
 margin-bottom:var(--title-margin-bottom)
}

.titleWithLogo header h1
{
 font-size:var(--title-font-size);
 text-shadow:2px 4px 8px rgba(0, 0, 0, 0.3)
}

.titleWithLogo img
{
 flex:1 1 auto;
 max-width:100%;
 max-height:100%;
 object-fit:contain
}

#home h1, #home h2 { animation:fadeIn 2s ease-in-out }
#home img { animation:fadeIn 1s ease-in-out }

.legal-box
{
 --link-color:var(--invert-link-color);
 --link-hover-color:var(--invert-link-hover-color);
 background:var(--invert-background-color);
 border:2px solid var(--invert-color);
 color:var(--invert-color);
 display: grid;
 grid-template-columns:min-content 1fr;
 grid-template-rows:1fr;
 gap:0px 0.5rem;
 grid-template-areas:". .";
 border-radius:8px;
 padding:0.5rem;
 line-height:1.5;
 margin-bottom:2rem
}

.legal-box span
{
 display:flex;
 align-items:center;
 justify-content:center;
 width:3rem;
 height:3rem;
 padding:0 0.5rem
}

.legal-box span img
{
 width:100%
}

.tarifs small { display:block; margin-left:2rem; margin-bottom:0.5rem }

.downloadAppStore { display:block; text-align:center }

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

.yourdatayourchoicesyourrules { display:block }

.wrapped-width > *
{
 max-width:100%;
 padding:0.5rem
}

article { padding:0.5rem }
article > section { padding-bottom:0.5rem }
article > section > header > h1 { font-size:1.25rem }
article > section > header > h2 { font-size:1.1rem }

hr { height:20px }

.tarifs span { display:block; margin-left:2rem; margin-bottom:0.15rem }
}