/* PivoDesk – page de présentation (pivodesk.ca). Aucune ressource externe. */

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sapin: #12343B;
  --sapin-clair: #1D4A53;
  --ambre: #E8A33D;
  --neige: #F4F8F8;
  --glace: #D9E7E9;
  --texte: #12343B;
  --texte-doux: #46636A;
  --blanc: #FFFFFF;
  --exemple: #1B3F66;   /* couleur de l'entreprise inventée */
  --statut: #E8650C;    /* point orange « Déneigement en cours », comme dans l'app */
  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--neige);
  color: var(--texte);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 400;
}

/* Une langue à la fois */
html[data-lang="fr"] [data-l="en"],
html[data-lang="en"] [data-l="fr"] { display: none; }

.cadre {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) { .cadre { padding: 0 32px; } }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0; }

/* ---------- En-tête ---------- */

.entete { background: var(--sapin); color: var(--blanc); }
.entete-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 68px;
}
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-size: 1.3rem; font-weight: 600;
}
.marque img { display: block; border-radius: 9px; }
.entete-actions { display: flex; align-items: center; gap: 14px; }

.langues { display: flex; align-items: center; gap: 4px; color: rgba(255,255,255,.45); }
.langues button {
  font: inherit; font-size: 0.95rem; font-weight: 500;
  background: none; border: 0; color: rgba(255,255,255,.7);
  padding: 6px 6px; cursor: pointer; border-radius: 6px;
}
.langues button[aria-pressed="true"] { color: var(--blanc); font-weight: 700; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  background: var(--ambre); color: var(--sapin);
  font-weight: 600; text-decoration: none; border-radius: 12px;
}
.bouton:hover { background: #F0B357; }
.bouton-petit { min-height: 40px; padding: 0 16px; font-size: 1rem; border-radius: 10px; }
@media (max-width: 420px) { .bouton-petit { display: none; } }

/* ---------- Ouverture : le texte et le téléphone ---------- */

.ouverture {
  background: var(--sapin);
  color: var(--blanc);
  padding: 40px 0 0;
  position: relative;
}
.ouverture-grille {
  display: grid;
  gap: 40px;
  align-items: end;
}
.ouverture-texte { padding-bottom: 8px; }
.ouverture h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 650;
  max-width: 13ch;
}
.chapeau {
  margin-top: 22px;
  max-width: 34rem;
  font-size: 1.2rem;
  color: rgba(255,255,255,.82);
}
.ouverture-actions {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
}
.note-courriel { color: rgba(255,255,255,.65); font-size: 1rem; }

/* Le téléphone : sort du bas de la bande verte, comme posé sur la page. */
.telephone {
  justify-self: center;
  width: min(300px, 78vw);
  margin-bottom: -96px;
  padding: 11px;
  background: #0A1F23;
  border-radius: 46px;
  box-shadow: 0 0 0 1.5px #2E5961, 0 30px 60px -20px rgba(4, 20, 23, .55);
  position: relative;
  z-index: 1;
}
.telephone-ecran {
  aspect-ratio: 9 / 19.5;
  border-radius: 36px;
  overflow: hidden;
  background: var(--neige);
}
.video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 880px) {
  .ouverture { padding-top: 72px; }
  .ouverture-grille { grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
  .ouverture-texte { padding-bottom: 120px; }
  .telephone { margin-bottom: -140px; width: 320px; }
}

/* ---------- Une saison ---------- */

.saison { padding: 150px 0 72px; }
@media (min-width: 880px) { .saison { padding-top: 120px; } }
.saison h2 { max-width: 20ch; }

.moments {
  margin-top: 36px;
  display: grid;
  gap: 36px;
}
@media (min-width: 880px) {
  .moments { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .moment + .moment { border-left: 1.5px solid var(--glace); padding-left: 32px; }
  .moment { padding-right: 32px; }
}
.moment h3 { margin-bottom: 14px; }

/* Puces en petits blocs, comme le P de l'icône */
.blocs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.blocs li { position: relative; padding-left: 26px; color: var(--texte-doux); }
.blocs li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 12px; height: 12px; border-radius: 3px; background: var(--sapin);
}
.blocs li:first-child::before { background: var(--ambre); }

/* ---------- À votre nom ---------- */

.votre-nom { background: var(--blanc); border-block: 1.5px solid var(--glace); padding: 72px 0; }
.votre-nom-grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .votre-nom-grille { grid-template-columns: 1fr 380px; gap: 72px; } }
.votre-nom h2 { margin-bottom: 18px; }
.votre-nom p { max-width: 36rem; color: var(--texte-doux); }
.votre-nom .petit { margin-top: 14px; font-size: 0.95rem; color: #6C8389; }

.statut-exemple {
  max-width: 380px; width: 100%; justify-self: center;
  background: var(--neige);
  border-radius: 24px;
  border: 1.5px solid var(--glace);
  overflow: hidden;
}
.statut-exemple-tete {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: var(--exemple); color: var(--blanc);
  font-weight: 600;
}
.statut-exemple-logo {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blanc); color: var(--exemple); font-weight: 700; font-size: 0.95rem;
}
.statut-exemple-bloc {
  margin: 18px; padding: 18px 20px;
  border-radius: 18px; background: #FFFBEA; border: 2px solid #F5D04A; color: #3D2208;
  display: grid; gap: 6px;
}
.statut-exemple-bloc strong {
  font-size: 1.45rem; line-height: 1.15; font-weight: 650;
  display: flex; align-items: center; gap: 10px;
}
.statut-exemple-bloc strong::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--statut);
}
.statut-exemple-depuis { font-size: 0.9rem; opacity: .8; }
.statut-exemple-pied {
  margin: 0 18px 18px; padding: 12px;
  border-radius: 12px; background: var(--exemple); color: var(--blanc);
  text-align: center; font-weight: 600; font-size: 1rem;
}

/* ---------- Vos données ---------- */

.donnees { padding: 72px 0; }
.garanties {
  margin: 32px 0 0; display: grid; gap: 28px;
}
@media (min-width: 720px) { .garanties { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; } }
@media (min-width: 1040px) { .garanties { grid-template-columns: repeat(4, 1fr); } }
.garanties dt { font-weight: 600; font-size: 1.2rem; margin-bottom: 6px; }
.garanties dd { margin: 0; color: var(--texte-doux); }

/* ---------- En préparation ---------- */

.suite { padding: 0 0 72px; }
.suite-grille { display: grid; gap: 14px; }
.suite-grille::before {
  content: ""; grid-column: 1 / -1; height: 1.5px; background: var(--glace); margin-bottom: 26px;
}
@media (min-width: 880px) { .suite-grille { grid-template-columns: 300px 1fr; gap: 48px; align-items: baseline; } }
.suite h2 { font-size: 1.5rem; }
.suite p { max-width: 40rem; color: var(--texte-doux); }

/* ---------- Contact ---------- */

.contact { background: var(--sapin); color: var(--blanc); padding: 80px 0; }
.contact h2 { max-width: 24ch; }
.contact p { margin-top: 16px; max-width: 36rem; color: rgba(255,255,255,.82); }
.courriel {
  display: inline-block; margin-top: 28px;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); font-weight: 600;
  color: var(--ambre); text-decoration: none;
  border-bottom: 2px solid rgba(232,163,61,.45);
  overflow-wrap: anywhere;
}
.courriel:hover { border-bottom-color: var(--ambre); }

/* ---------- Pied ---------- */

.pied { background: #0E2A30; color: rgba(255,255,255,.65); font-size: 0.95rem; }
.pied-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}