/* =============================================================================
   IMPRIME-TON-LIVRE — SOCLE CLIENT-FIRST
   Convention Finsweet Client-First : https://finsweet.com/client-first/docs

   Ce fichier contient UNIQUEMENT :
     1. les @font-face et les tokens
     2. le reset
     3. la structure de base (page-wrapper > main-wrapper > section_ > …)
     4. les classes utilitaires (typo, espacement, largeur, alignement)

   Tout ce qui est composant vit dans components.css.
   Regle Client-First : padding-global ne gere QUE le padding horizontal,
   container-* QUE la largeur max, padding-section-* QUE le rythme vertical.
   Ne jamais ajouter d'autres proprietes a ces trois familles.
   ============================================================================= */

@font-face{font-family:basis;src:url(../fonts/4774Basis.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:basis;src:url(../fonts/5973Basis.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:basis;src:url(../fonts/8448Basis.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:basis;src:url(../fonts/8305Basis.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:basis;src:url(../fonts/9873Basis.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  /* palette complementaire : couleurs auparavant ecrites en dur dans les feuilles,
     regroupees en tokens (valeurs inchangees, nommage teinte-luminosite) */
  --black:#000000;
  --green-800:#127a4f;
  --green-800-2:#166534;
  --green-700:#16a34a;
  --green-700-2:#1a9e6a;
  --blue-600:#1e40af;
  --green-600:#22c55e;
  --orange-700:#92400e;
  --grey-400:#9a9aa2;
  --pink-700:#a8003f;
  --orange-600:#b7791f;
  --green-200:#b7ebc9;
  --grey-300:#b9b9c0;
  --green-200-2:#bbf7d0;
  --red-600:#c0392b;
  --blue-200:#c7d9f5;
  --grey-200:#d8d8dd;
  --orange-200:#e7ddd4;
  --green-100:#e8f7ef;
  --red-500:#ee1111;
  --blue-050:#eef4ff;
  --orange-200-2:#efe6d9;
  --orange-100:#efe7de;
  --green-050:#f0fbf4;
  --green-050-2:#f0fdf4;
  --orange-500:#f59e0b;
  --orange-050:#fcf8f2;
  --amber-300:#fde68a;
  --amber-500:#ffc22e;
  --pink-100:#ffd0e0;
  --pink-100-2:#ffe7f1;
  --amber-200:#ffe9b0;
  --red-050:#fff0f0;
  --pink-050:#fff0f6;
  --pink-050-2:#fff4f7;
  --red-050-2:#fff5f5;
  --amber-050:#fffbeb;
  --amber-050-2:#fffdf5;

  /* brand */
  --rose:#ff2e88;
  --rose-600:#f0157a;
  --magenta:#d8006b;
  --magenta-900:#930049;
  --rose-050:#fff0f7;
  --rose-100:#ffe0ef;
  /* neutres chauds */
  --ink:#17110f;
  --ink-700:#3b322e;
  --muted:#8a807a;
  --line:#efe7e0;
  --cream:#fdf8f4;
  --sand:#f6efe8;
  --white:#ffffff;
  /* accents */
  --sky:#9ddcff;
  --amber:#ffb400;
  /* type */
  --font:"basis",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* layout */
  --wrap:85rem;
  --radius:1.375rem;
  --radius-lg:2rem;
  --radius-pill:62.4375rem;
  --shadow-sm:0 0.125rem 0.5rem rgba(23,17,15,.06);
  --shadow:0 1.125rem 3.125rem -1.25rem rgba(23,17,15,.25);
  --shadow-rose:0 1.125rem 2.5rem -0.875rem rgba(255,46,136,.45);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* echelle d'espacement Client-First */
  --space-0:0rem;
  --space-tiny:.125rem;
  --space-xxsmall:.25rem;
  --space-xsmall:.5rem;
  --space-small:1rem;
  --space-medium:2rem;
  --space-large:3rem;
  --space-xlarge:4rem;
  --space-xxlarge:5rem;
  --space-huge:6rem;
  --space-xhuge:8rem;
  --space-xxhuge:12rem;
}

/* ----------------------------------------------------------------- 1. RESET */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit}

/* Tailles par defaut des balises de titre. Client-First : une balise se style
   d'elle-meme ; on n'ajoute heading-style-h# que pour un ecart voulu. */
h1,h2,h3,h4,h5,h6{line-height:1.05;font-weight:900;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.375rem,5vw,4rem)}
h2{font-size:clamp(2.125rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.375rem,2.2vw,1.75rem)}
h4{font-size:1.25rem}
h5{font-size:1.0625rem}
h6{font-size:0.875rem}

/* ------------------------------------------------------------- 2. STRUCTURE */
.page-wrapper{position:relative;min-height:100vh;display:flex;flex-direction:column}
.main-wrapper{flex:1}

/* padding horizontal global — rien d'autre */
.padding-global{padding-left:2.5rem;padding-right:2.5rem}
@media(max-width:640px){.padding-global{padding-left:1.25rem;padding-right:1.25rem}}

/* largeur max — rien d'autre */
.container-small{width:100%;max-width:48rem;margin-left:auto;margin-right:auto}
.container-medium{width:100%;max-width:64rem;margin-left:auto;margin-right:auto}
.container-large{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto}

/* rythme vertical des sections — rien d'autre */
.padding-section-small{padding-top:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(2rem,4vw,3.5rem)}
.padding-section-medium{padding-top:clamp(3rem,5.5vw,5.5rem);padding-bottom:clamp(3rem,5.5vw,5.5rem)}
.padding-section-large{padding-top:clamp(4rem,7vw,7.5rem);padding-bottom:clamp(4rem,7vw,7.5rem)}

/* Lien d'evitement : premier element focusable de chaque page. */
.skip-link{position:absolute;left:-624.9375rem;top:0;z-index:100;background:var(--ink);color:var(--white);padding:0.75rem 1.25rem;border-radius:0 0 12px 0;font-weight:700}
.skip-link:focus{left:0}

:where(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--rose);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------ 3. UTILITAIRES */

/* Typographie — heading-style-h# ne change JAMAIS la balise, seulement le style.
   C'est ce qui permet de garder le bon niveau semantique pour le SEO tout en
   affichant la taille voulue. */
.heading-style-h1{font-size:clamp(2.375rem,5vw,4rem);font-weight:900;line-height:1.05;letter-spacing:-.02em}
.heading-style-h2{font-size:clamp(2.125rem,4.6vw,3.5rem);font-weight:900;line-height:1.05;letter-spacing:-.02em}
.heading-style-h3{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:900;line-height:1.15;letter-spacing:-.02em}
.heading-style-h4{font-size:1.25rem;font-weight:900;line-height:1.2;letter-spacing:-.01em}
.heading-style-h5{font-size:1.0625rem;font-weight:800;line-height:1.25;letter-spacing:0}
.heading-style-h6{font-size:0.875rem;font-weight:800;line-height:1.3;letter-spacing:0}

.text-size-tiny{font-size:.75rem}
.text-size-small{font-size:.875rem}
.text-size-regular{font-size:1rem}
.text-size-medium{font-size:1.25rem}
.text-size-large{font-size:1.5rem}

.text-weight-normal{font-weight:400}
.text-weight-medium{font-weight:500}
.text-weight-semibold{font-weight:700}
.text-weight-bold{font-weight:900}

.text-align-left{text-align:left}
.text-align-center{text-align:center}
.text-align-right{text-align:right}

.text-color-ink{color:var(--ink)}
.text-color-muted{color:var(--muted)}
.text-color-rose{color:var(--rose)}
.text-color-white{color:var(--white)}

.text-style-allcaps{text-transform:uppercase;letter-spacing:.08em}
.text-style-italic{font-style:italic}
.text-style-strikethrough{text-decoration:line-through}
.text-style-nowrap{white-space:nowrap}
.text-style-muted{color:var(--muted)}

/* Espacement — bloc vide entre deux freres, plutot que du spacing empile sur le
   contenu (evite le "deep stacking" que Client-First cherche a supprimer). */
.margin-bottom,.margin-top,.margin-left,.margin-right,
.margin-vertical,.margin-horizontal{padding:0}
.margin-bottom{margin-top:0!important;margin-right:0!important;margin-left:0!important}
.margin-top{margin-bottom:0!important;margin-right:0!important;margin-left:0!important}
.margin-vertical{margin-right:0!important;margin-left:0!important}
.margin-horizontal{margin-top:0!important;margin-bottom:0!important}

.margin-0{margin:var(--space-0)}
.margin-tiny{margin:var(--space-tiny)}
.margin-xxsmall{margin:var(--space-xxsmall)}
.margin-xsmall{margin:var(--space-xsmall)}
.margin-small{margin:var(--space-small)}
.margin-medium{margin:var(--space-medium)}
.margin-large{margin:var(--space-large)}
.margin-xlarge{margin:var(--space-xlarge)}
.margin-xxlarge{margin:var(--space-xxlarge)}
.margin-huge{margin:var(--space-huge)}
.margin-xhuge{margin:var(--space-xhuge)}
.margin-xxhuge{margin:var(--space-xxhuge)}

.padding-0{padding:var(--space-0)}
.padding-tiny{padding:var(--space-tiny)}
.padding-xxsmall{padding:var(--space-xxsmall)}
.padding-xsmall{padding:var(--space-xsmall)}
.padding-small{padding:var(--space-small)}
.padding-medium{padding:var(--space-medium)}
.padding-large{padding:var(--space-large)}
.padding-xlarge{padding:var(--space-xlarge)}
.padding-xxlarge{padding:var(--space-xxlarge)}
.padding-huge{padding:var(--space-huge)}
.padding-xhuge{padding:var(--space-xhuge)}
.padding-xxhuge{padding:var(--space-xxhuge)}

.max-width-xsmall{width:100%;max-width:20rem}
.max-width-small{width:100%;max-width:30rem}
.max-width-medium{width:100%;max-width:40rem}
.max-width-large{width:100%;max-width:48rem}
.max-width-xlarge{width:100%;max-width:64rem}
.max-width-full{width:100%;max-width:none}
.align-center{margin-left:auto;margin-right:auto}

.display-none{display:none}
.display-inlineflex{display:inline-flex}
.overflow-hidden{overflow:hidden}
.z-index-1{position:relative;z-index:1}
.z-index-2{position:relative;z-index:2}

.background-color-white{background-color:var(--white)}
.background-color-cream{background-color:var(--cream)}
.background-color-sand{background-color:var(--sand)}
.background-color-ink{background-color:var(--ink);color:var(--white)}

/* Reveal au scroll — conditionne a .js pour que le contenu reste visible sans JS
   (et donc lisible par les crawlers qui n'executent pas le script). */
.js [data-reveal]{opacity:0;transform:translateY(1.5rem);transition:.7s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}