/* ========================================
   STYLE.CSS - VERSION NETTOYÉE & OPTIMISÉE
   Maintenu par : Guillaume Mouleux
   Dernière mise à jour : 08/01/2026

   CONTENU :
   1. Déclarations de polices (@font-face)
   2. Variables CSS (design tokens)
   3. Styles de base (img)
   4. Classes typographiques
   5. Classes layout spécifiques
   6. Classes footer
   7. Media queries responsive
   ======================================== */

/* ========================================
   SECTION 1 : POLICES WEB OPTIMISÉES
   Auto-hébergement pour performance maximale et conformité RGPD
   ======================================== */

/* Police G-Manuscript - Signature manuscrite
   Usage : .signature-home (homepage uniquement)
   Poids : 500 uniquement
   Format : WOFF2 (optimal) + TTF (fallback) */
@font-face {
  font-family: "G-Manuscript";
  font-style: normal;
  font-weight: 500;
  src: url("static/fonts/G-Manuscript.woff2") format('woff2'),
       url("static/fonts/g-manuscript.ttf") format('truetype');
  font-display: swap;
  unicode-range: U+0041-005A, U+0061-007A; /* Lettres A-Z et a-z uniquement */
}

/* Police Inter - Poids 300 (Light)
   Usage : .texte-normal, .temoignage
   Subset : Latin uniquement (~15KB vs ~90KB complet) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("static/fonts/inter-v20-latin-300.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Police Inter - Poids 300 (Light) Italic
   Usage : .temoignage uniquement */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("static/fonts/inter-v20-latin-300italic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Police Inter - Poids 400 (Regular)
   Usage : Texte de contenu principal, navigation */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("static/fonts/inter-v20-latin-regular.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Police Inter - Poids 700 (Bold)
   Usage : Titres, boutons, éléments <strong> et <b> */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("static/fonts/inter-v20-latin-700.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ========================================
   SECTION 2 : VARIABLES CSS (DESIGN TOKENS)
   Couleurs, espacements, tailles - Usage global
   ======================================== */

:root {
  /* Couleurs principales */
  --dl-color-gray-black: #000000;
  --dl-color-theme-primary1: #BF4408;    /* Orange principal */
  --dl-color-theme-primary2: #E65103;    /* Orange hover */
  --dl-color-theme-accent1: #FFFFFF;
  --dl-color-theme-accent2: #F5D1B0;     /* Beige clair */
  --dl-color-theme-secondary1: #FFFFFF;
  --dl-color-theme-secondary2: #FBF1EB;  /* Beige très clair */
  --dl-color-theme-neutral-dark: #191818; /* Noir site */
  --dl-color-theme-neutral-light: #FBFAF9; /* Blanc cassé */

  /* Espacements (système à 8px) */
  --dl-layout-space-unit: 16px;          /* Unité de base */
  --dl-layout-space-halfunit: 8px;       /* 0.5x */
  --dl-layout-space-oneandhalfunits: 24px; /* 1.5x */
  --dl-layout-space-twounits: 32px;      /* 2x */
  --dl-layout-space-threeunits: 48px;    /* 3x */
  --dl-layout-space-fourunits: 64px;     /* 4x */
  --dl-layout-space-fiveunits: 80px;     /* 5x */
  --dl-layout-space-sixunits: 96px;      /* 6x */

  /* Tailles de layout */
  --dl-layout-size-xsmall: 16px;
  --dl-layout-size-small: 48px;
  --dl-layout-size-medium: 96px;
  --dl-layout-size-large: 144px;
  --dl-layout-size-xlarge: 192px;
  --dl-layout-size-xxlarge: 288px;
  --dl-layout-size-maxwidth: 1400px;     /* Largeur max contenu */

  /* Radius (arrondis) */
  --dl-layout-radius-radius2: 2px;
  --dl-layout-radius-radius4: 4px;
  --dl-layout-radius-radius8: 8px;
  --dl-layout-radius-round: 50%;         /* Cercle parfait */
  --dl-layout-radius-cardradius: 8px;
  --dl-layout-radius-imageradius: 8px;
  --dl-layout-radius-inputradius: 24px;
  --dl-layout-radius-buttonradius: 24px;
}


/* ========================================
   SECTION 3 : STYLES DE BASE
   Styles globaux applicables à tous les éléments
   ======================================== */

/* Images responsive par défaut */
img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ========================================
   SECTION 4 : CLASSES TYPOGRAPHIQUES
   Styles de texte réutilisables sur tout le site
   ======================================== */

/* Signature manuscrite - Homepage uniquement
   Police : G-Manuscript 500
   Usage : <h1 class="signature-home">Guillaume Mouleux</h1> */
.signature-home {
  fill: #fbfaf9;
  color: #fbfaf9;
  font-size: 10vw;              /* Responsive viewport */
  align-self: center;
  font-style: normal;
  font-family: "G-Manuscript", "Brush Script MT", cursive, serif;
  font-weight: 700;
}

/* Titres catégories homepage
   Usage : Audit & Stratégie, Acquisition & Trafic, etc. */
.categories-home {
  fill: #fbfaf9;
  color: #fbfaf9;
  font-size: 4em;
  align-self: center;
  text-align: center;
  transition: 0.5s;
}

.categories-home:hover {
  transform: scaleX(1.01) scaleY(1.01) scaleZ(1.01) skewX(0deg) skewY(0deg);
}

/* Sous-catégories homepage
   Usage : Liste des prestations sous chaque catégorie */
.sous-cat-home {
  fill: #fbfaf9;
  color: #fbfaf9;
  font-size: 2rem;
  transition: 0.4s;
}

.sous-cat-home:hover {
  transform: scale(0.99);
}

/* Titre de section générique
   Usage : Abécédaire, blog, sections diverses */
.titre {
  fill: #fbfaf9;
  color: #fbfaf9;
  font-size: 2em;
  margin-bottom: var(--dl-layout-space-oneandhalfunits);
  font-family: "Inter", sans-serif;
}

/* Titre intermédiaire (lettres alphabet)
   Usage : A, B, C... dans abécédaire/index.html */
.titre-inter {
  fill: #fbfaf9;
  color: #fbfaf9;
  font-size: 1.5em;
  padding-top: var(--dl-layout-space-threeunits);
  padding-bottom: var(--dl-layout-space-oneandhalfunits);
}

/* Texte normal
   Usage : Paragraphes standards abécédaire */
.texte-normal {
  fill: #fbfaf9;
  color: #fbfaf9;
  font-size: 1.25em;
  font-style: normal;
  font-weight: 300;
  line-height: 1.25;
}

/* Témoignage / Citation
   Usage : Encarts expertise dans abécédaire
   Police : Inter 300 italic */
.temoignage {
  color: #fbfaf9;
  font-size: 150%;
  align-self: center;
  font-style: italic;
  font-family: "Inter";
  font-weight: 300;
  line-height: 1.4;
  padding-top: var(--dl-layout-space-unit);
  padding-left: var(--dl-layout-space-fourunits);
  padding-right: var(--dl-layout-space-fourunits);
  padding-bottom: var(--dl-layout-space-unit);
}


/* ========================================
   SECTION 5 : CLASSES LAYOUT SPÉCIFIQUES
   Structures de page réutilisables
   ======================================== */

/* Board principal des prestations - Homepage
   Usage : Container des 3 blocs Audit/Acquisition/Optimisation */
.prestations-board {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background-image: linear-gradient(270deg, 
    rgb(5, 11, 36) 1.00%,
    rgb(7, 7, 7) 72.00%,
    rgb(7, 7, 7) 97.00%
  );
}

/* Prestation alignée à gauche - Homepage
   Usage : Blocs 1 et 3 (Audit & Stratégie, Optimisation & Conversion) */
.presta-titre-gauche {
  flex: 0 0 auto;
  width: 100%;
  height: 25vh;
  display: flex;
  padding: var(--dl-layout-space-twounits);
  align-items: flex-start;
}

/* Prestation alignée à droite - Homepage
   Usage : Bloc 2 (Acquisition & Trafic) */
.presta-titre-droite {
  flex: 0 0 auto;
  width: 100%;
  height: 25vh;
  display: flex;
  align-items: flex-start;
  padding-top: var(--dl-layout-space-twounits);
  padding-left: var(--dl-layout-space-twounits);
  padding-right: var(--dl-layout-space-twounits);
  flex-direction: row-reverse;
  padding-bottom: var(--dl-layout-space-twounits);
}

/* Slider bandeau logos - Homepage
   Usage : Bandeau avec logos qui défilent en boucle */
.slider {
  width: 100%;
  height: 10vh;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: row;
  background-color: var(--dl-color-theme-neutral-light);
}


/* ========================================
   SECTION 6 : LISTES
   Styles pour ul/ol dans abécédaire et blog
   ======================================== */

/* Liste générique - Abécédaire
   Usage : <ul class="list"> dans index abécédaire */
.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}

/* Item de liste - Abécédaire
   Usage : <li class="list-item"> dans index abécédaire */
.list-item {
  display: list-item;
}


/* ========================================
   SECTION 7 : FOOTER
   Styles texte footer (clair/sombre selon contexte)
   ======================================== */

/* Footer texte clair (sur fond sombre)
   Usage : 404.html uniquement */
.footer-text-light {
  fill: #aaaaaa;
  color: #aaaaaa;
  font-size: 1rem;
}

/* Footer texte sombre (sur fond clair)
   Usage : Toutes les autres pages */
.footer-text-dark {
  fill: rgb(60, 60, 60);
  color: rgb(60, 60, 60);
  font-size: 1rem;
}

/* ========================================
   SECTION 7 1/2 : TOOTLTIP JS
   Style Tooltip JS
   ======================================== */

/* CSS pour tooltip JavaScript */
.custom-tooltip {
  position: fixed;
  background-color: #2c3e50;
  color: white;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  max-width: 280px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10000;
  pointer-events: none; /* Ne bloque pas les interactions */
}

.custom-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}



/* ========================================
   SECTION 8 : MEDIA QUERIES RESPONSIVE
   Adaptations mobile/tablette
   ======================================== */

/* Tablette et desktop réduit (≤ 1400px) */
@media(max-width: 1400px) {
  .signature-home {
    font-size: 150%;           /* Réduit taille signature */
  }

  .categories-home {
    font-size: 300%;           /* Réduit titres catégories */
  }

  .sous-cat-home {
    font-size: 150%;           /* Réduit sous-catégories */
  }

  .prestations-board {
    flex-direction: column;    /* Empile les prestations */
  }
}

/* Mobile (≤ 768px) */
@media(max-width: 768px) {
  /* Témoignage plus compact */
  .temoignage {
    fill: #fbfaf9;
    color: #fbfaf9;
    font-size: 125%;           /* Réduit de 150% à 125% */
    font-family: Inter;
    padding-top: var(--dl-layout-space-unit);
    padding-left: var(--dl-layout-space-fourunits);
    padding-right: var(--dl-layout-space-fourunits);
    padding-bottom: var(--dl-layout-space-unit);
  }

  /* Sous-catégories homepage mobile */
  .sous-cat-home {
    fill: #fbfaf9;
    color: rgb(251, 250, 249);
    transition: 0.4s;
  }

  /* Prestations passent en colonne */
  .presta-titre-gauche {
    height: auto;
    flex-direction: column;
  }

  .presta-titre-droite {
    height: auto;
    flex-direction: column;
  }
}

/* ========================================
   FIN DU FICHIER
   ======================================== */