/* ==========================================================================
   1. RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}


/* ==========================================================================
   2. SYSTÈME DE GRILLE — 12 colonnes, marges et gouttières de 20px
   ========================================================================== */

:root {
  --grid-columns: 12;
  --grid-gutter: 20px;      /* espace entre les colonnes */
  --grid-margin: 20px;      /* marge gauche/droite du container */
  --grid-max-width: 1920px; /* modifiable librement, ou "none" pour désactiver */
}

/* .container porte la grille et le max-width. Les fonds pleine largeur
   (couleurs, images) restent EN DEHORS du container : seul le texte y est
   placé, voir section 5 "STRATES". */
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.row + .row {
  margin-top: var(--grid-gutter);
}

/* Colonnes col-1 à col-12 */
.col-1 { grid-column-end: span 1; }
.col-2 { grid-column-end: span 2; }
.col-3 { grid-column-end: span 3; }
.col-4 { grid-column-end: span 4; }
.col-5 { grid-column-end: span 5; }
.col-6 { grid-column-end: span 6; }
.col-7 { grid-column-end: span 7; }
.col-8 { grid-column-end: span 8; }
.col-9 { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

/* Décalages optionnels (offset-1 à offset-11) */
.offset-1  { grid-column-start: 2; }
.offset-2  { grid-column-start: 3; }
.offset-3  { grid-column-start: 4; }
.offset-4  { grid-column-start: 5; }
.offset-5  { grid-column-start: 6; }
.offset-6  { grid-column-start: 7; }
.offset-7  { grid-column-start: 8; }
.offset-8  { grid-column-start: 9; }
.offset-9  { grid-column-start: 10; }
.offset-10 { grid-column-start: 11; }
.offset-11 { grid-column-start: 12; }

/* Adaptation mobile : les colonnes passent en pleine largeur sous 768px */
@media (max-width: 768px) {
  .row > [class^="col-"],
  .row > [class*=" col-"] {
    grid-column-start: 1;
    grid-column-end: span var(--grid-columns);
  }
}


/* ==========================================================================
   3. DESIGN TOKENS — depuis le fichier Figma "Liliana Amundaraín"
   ========================================================================== */

:root {
  --la-bleu:      #ACC6D4;
  --la-ochre:     #AF6D4B;
  --la-turquoise: #407882;
  --la-beige:     #CCC1C0;
  --la-noir:      #03050A;

  --font-display: "Druk Wide Bold", "Arial Black", Impact, sans-serif;
  --font-body: "IM Fell DW Pica", Georgia, "Times New Roman", serif;

}

@font-face {
  font-family: "Druk Wide Bold";
  src: url("fonts/DrukWide-Bold-Web.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IM Fell DW Pica";
  src: url("fonts/IMFellDWPica-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IM Fell DW Pica";
  src: url("fonts/IMFellDWPica-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Couleurs de fond / texte variabilisées ----
   Utilitaires réutilisables : on ne code jamais une couleur en dur sur une
   strate, on lui applique une classe .bg-* / .text-*. Il suffit de changer
   la classe (ou l'ordre des strates, voir plus bas) pour tout permuter. */
.bg-bleu      { background: var(--la-bleu); }
.bg-ochre     { background: var(--la-ochre); }
.bg-turquoise { background: var(--la-turquoise); }
.bg-beige     { background: var(--la-beige); }
.bg-noir      { background: var(--la-noir); }

.text-bleu      { color: var(--la-bleu); }
.text-ochre     { color: var(--la-ochre); }
.text-turquoise { color: var(--la-turquoise); }
.text-beige     { color: var(--la-beige); }
.text-noir      { color: var(--la-noir); }


/* ==========================================================================
   4. BOUTON DE CONTACT FIXE — apparaît à la disparition de la strate 1
   ========================================================================== */

.fixed-cta {
  position: fixed;
  top: var(--grid-margin);
  right: var(--grid-margin);
  z-index: 1000;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: -2px 2px 4px rgba(0,0,0,0.1);
}

.fixed-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.btn-pill.bg-turquoise.text-bleu.fixed-cta{
    margin-top: 0;
}

.top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 9px 19px;
    padding-top: 7px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    -webkit-text-stroke: 1px;
    cursor: pointer
}

.top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* ==========================================================================
   5. STRATES — fonds pleine largeur, texte dans la grille
   ========================================================================== */

.landing {
  width: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  /* flex column + `order` sur chaque .strate : on peut intervertir les
     sections en ne changeant qu'un nombre (--order), sans toucher au HTML. */
  display: flex;
  flex-direction: column;
}

/* Une "strate" = une section pleine largeur de la page.
   - .strate__bg  : les fonds (couleur / image), toujours edge-to-edge.
   - .strate__content > .container > .row > .col-* : le texte, contraint
     par la grille 12 colonnes et son max-width.
   --order pilote la position de la strate : la changer suffit à réordonner
   la page sans toucher au reste du HTML. */
.strate {
  position: relative;
  min-height: 100svh;
  order: var(--order, 0);
}

/* Modificateur pour une strate qui ne doit pas occuper l'écran entier
   (ex. le hero, en 80svh au lieu de 100svh). */
.strate--80,
.strate--80 .strate__content {
  min-height: 80svh;
}

.strate__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.strate__bg-half {
  width: 100%;
  height: 100%;
}

.strate__bg-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo "encadrée" : un padding qui révèle la couleur de fond de la
   demi-strate (bg-*) tout autour de l'image, avec la légende posée dans
   cette bande colorée plutôt que directement sur la photo. */
.strate__bg-half--framed {
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-bottom: 0;
    gap: 0
}
.rgt{
    padding-left: 10px;
}
.lft{
    padding-right: 10px;
}

.strate__bg-half--framed img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.strate__bg-credit {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 10px;
    line-height: 20px
}

.strate__content {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
}

.strate__content .container {
  padding-block: var(--grid-margin);
}

/* Chaque strate a besoin de toute la hauteur disponible : le(s) titre(s)
   restent en haut (première .row, dans .strate-container), et le corps de
   texte (deuxième .row, dans .strate-body) se centre dans l'espace
   restant — comme UN groupe, pas colonne par colonne (voir .text-block
   plus bas). Le hero suit exactement le même mécanisme. */
.strate-container {
  display: flex;
  flex-direction: column;
}

.strate-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center; /* centre le corps de texte comme un groupe */
}

.strate-body .row {
  width: 100%;
}

.hero-label, .panel-title {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 42px;
  text-transform: uppercase;
}

.hero-label--tagline {
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 30px;
  text-transform: capitalize;
  font-weight: 400;
}

/* Bloc de texte occupant une moitié de strate (aligné sur le fond dessous).
   justify-content: flex-start (et non "center") est volontaire : les deux
   colonnes d'une même .row partagent la même hauteur de cellule (grid
   stretch par défaut), donc aligner en haut fait coïncider les premières
   lignes des deux blocs, quelle que soit leur longueur respective. Le
   centrage vertical du duo, lui, est géré par le parent (.strate-body),
   pas par chaque bloc individuellement. */
.text-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.panel-eyebrow {
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-transform: capitalize;
  margin-bottom: var(--grid-gutter);
}

.panel-title {
  margin-bottom: 0; /* l'espace titre → corps vient du split en 2 rows, plus d'une marge fixe */
}

.panel-text, .value-label {
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 35px;
  max-width: 800px;
}

.panel-text + .panel-text {
  margin-top: var(--grid-gutter);
}

.panel-credit {
  font-family: var(--font-body);
  font-size: 0.65rem;
}

/* Bouton pilule, comme dans le design */
.btn-pill {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--grid-gutter);
  padding: 9px 22px;
  padding-top: 11px; 
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 20px;
    line-height: 24px;
    
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.btn-pill:hover {
  opacity: 0.85;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--grid-gutter) / 2);
}

/* Liste "Domaines d'intervention" / offres, en deux sous-colonnes */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter);
}

.offer-item + .offer-item {
    margin-top: var(--grid-gutter);
}

.offer-item{
    margin-right: 40px;
}

.offer-label {
  font-family: var(--font-display);
  font-size: 24px;
    line-height: 28px;
  text-transform: uppercase;
  display: block;
}

/* Liste "Ce en quoi je crois" */
.value-list li + li {
  margin-top: var(--grid-gutter);
}

.value-label {
  font-family: var(--font-display);
  text-transform: uppercase;
    font-size: 24px;
    line-height: 28px;
  display: block;
}

@media (max-width: 1440px) {
    
    .hero-label, .panel-title{
      font-size: 32px;
      line-height: 32px;
    }
    
    .hero-label--tagline{
        font-size: 20px;
        line-height: 20px;
    }
    
    .panel-text{
      font-size: 20px;
      line-height: 25px;
    }
    
    .value-label, .offer-label{
        font-size: 16px;
      line-height: 20px;
    }
    
    .btn-pill{
        font-size: 15px;
        line-height: 19px;
    }
    
}

/* Sous 900px : les colonnes de contenu passent en une seule colonne,
   les fonds restent en 2 moitiés pleine largeur (choix esthétique :
   à ajuster si un empilement complet est préféré en mobile). */
/* ==========================================================================
   6. MOBILE (< 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

  .offer-grid {
    grid-template-columns: 1fr;
  }

  /* ---- 1. Strates à fond uni (hero, domaines, différencie, contact) ----
     Le split 50/50 fixe est masqué et remplacé par une couleur portée
     directement par chaque bloc de contenu (.mobile-panel-*), qui épouse
     donc toujours la vraie hauteur du texte, quelle que soit sa longueur. */
  .strate__bg.strate__bg--flat {
    display: none;
  }

  .strate__content .container {
    padding-block: 0;
  }

  .strate {
    min-height: 0;
  }

  .strate__content {
    min-height: 0;
  }

  .strate--80 .strate__content {
    min-height: 0;
  }

  /* ---- 2. Strates à photo (vision & mission, ce en quoi je crois) ----
     Le texte porte aussi sa propre couleur (mobile-panel-turquoise /
     -beige, unie des deux côtés donc jamais de décalage), et le fond
     redevient un bloc normal du flux (au lieu d'un calque en position
     absolute) placé après le texte via `order`. La demi-teinte "plate"
     (sans photo) est masquée, redondante avec la couleur du texte. */
  .strate:not(:has(.strate__bg--flat)) {
    display: flex;
    flex-direction: column;
  }

  .strate:not(:has(.strate__bg--flat)) .strate__content {
    order: 1;
  }

  .strate:not(:has(.strate__bg--flat)) .strate__bg {
    order: 2;
    position: relative;
    inset: auto;
    display: block;
  }

  .strate__bg-half:not(.strate__bg-half--framed):not(.strate__bg-half--full) {
    display: none;
  }

  .strate__bg-half--full img {
    width: 100%;
    height: auto;
  }

  .strate__bg-half--framed {
    padding: 0;
  }

  .strate__bg-half--framed img {
    width: calc(100% - 40px);
        height: auto;
        flex: none;
        margin-left: 20px;
  }

  .strate__bg-credit {
    padding: 10px var(--grid-margin);
  }

  /* ---- 3. Ne plus forcer le texte à occuper EXACTEMENT 100vh ----
     (align-items: stretch, hérité du desktop) : avec de grandes polices,
     le texte a besoin de plus de place que 100vh une fois empilé sur
     mobile. En le forçant quand même à 100vh, il débordait en silence
     et se superposait à la photo qui suit. flex-start laisse le bloc
     prendre sa hauteur naturelle, ce qui pousse toute la strate (et la
     photo après elle) à s'agrandir en conséquence — plus de chevauchement. */
  .strate__content {
    align-items: flex-start;
  }

  /* ---- 4. Couleurs de fond portées par le contenu ---- */
  .mobile-panel-bleu, .mobile-panel-ochre,
  .mobile-panel-turquoise, .mobile-panel-beige {
    /* bleed : annule le padding du .container pour revenir bord à bord,
       puis le récupère en padding interne pour ne pas coller le texte
       au bord de l'écran. */
    margin-inline: calc(-1 * var(--grid-margin));
    padding: var(--grid-margin);
  }

  .mobile-panel-bleu      { background: var(--la-bleu); }
  .mobile-panel-ochre     { background: var(--la-ochre); }
  .mobile-panel-turquoise { background: var(--la-turquoise); }
  .mobile-panel-beige     { background: var(--la-beige); }

  /* Le padding du bloc suffit à aérer le texte : toute marge résiduelle
     sur le titre/corps À L'INTÉRIEUR d'un bloc déjà coloré ne ferait que
     créer un liseré blanc visible entre deux éléments de la même couleur. */
  .mobile-panel-bleu .panel-title, .mobile-panel-bleu.text-block,
  .mobile-panel-ochre .panel-title, .mobile-panel-ochre.text-block,
  .mobile-panel-turquoise .panel-title, .mobile-panel-turquoise.text-block,
  .mobile-panel-beige .panel-title, .mobile-panel-beige.text-block {
    margin-bottom: 0;
  }

  /* ---- 5. Ordre de lecture : Titre A, Texte A, Titre B, Texte B ----
     La structure desktop sépare "row des titres" et "row des corps de
     texte" (pour que le corps se centre indépendamment de la hauteur du
     titre) — empilée telle quelle, elle donnerait Titre A, Titre B,
     Texte A, Texte B. display:contents neutralise les wrappers (ils
     disparaissent de la mise en page, leurs enfants deviennent des
     enfants directs de .strate-container, déjà flex column), puis
     `order` reconstitue la lecture naturelle. Le hero suit sa propre
     logique (nom + tagline groupés, cf. section 6) et n'est pas concerné. */
  .strate-container > .row:not(.hero-title-row),
  .strate-body,
  .strate-body .row:not(.hero-body-row) {
    display: contents;
  }

  .strate-container > .row:not(.hero-title-row) > *:nth-child(1) { order: 1; }
  .strate-body .row:not(.hero-body-row) > *:nth-child(1)         { order: 2; }
  .strate-container > .row:not(.hero-title-row) > *:nth-child(2) { order: 3; }
  .strate-body .row:not(.hero-body-row) > *:nth-child(2)         { order: 4; }

  /* ---- 6. Hero : nom (H1) et tagline restent groupés, séparés de 20px,
     puis le corps (paragraphe/bouton, titre) suit — pas d'entrelacement
     avec le reste, contrairement aux autres strates ci-dessus. */
  .hero-title-row {
    display: flex;
    flex-direction: column;
    gap: 0;
      background: var(--la-ochre);
      display: block;
      width: calc(100% + 40px);
        margin-left: -20px;
        padding-left: 20px;
  }
    .hero-title-row .col-6{
        position: relative;
        float: left;
        margin-right: 20px;
        width: auto;
    }
    
    .hero-title-row .col-6.mobile-panel-bleu, .hero-title-row .col-6.mobile-panel-ochre{
        background-color: transparent;
    }

  .hero-body-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
    
    .offer-item{
        margin-right: 40px;
    }
    
}



@media (max-width: 520px) {
    
    .hero-label, .panel-title{
        font-size: 22px;
        line-height: 22px;
    }
    
    .hero-label--tagline{
        font-size: 14px;
        line-height: 14px;
    }
    
    .hero-title-row .col-6{
        margin-right: 0;
    }

    .offer-label, .panel-text{
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 22px;
    }

    .btn-pill{
        margin-top: 0;
    }
    
    .row.hero-body-row .col-6.text-block.mobile-panel-bleu{
        min-height: 60svh;
    }
    
    .row.hero-body-row .panel-text.text-ochre{
        margin-top: auto;
    }
    
    .row.hero-body-row .btn-pill.bg-ochre.text-bleu{
        margin-bottom: auto;
    }
    
}