/* ================================================== */
/*                PAGE ACCUEIL PAUSITY                */
/* ================================================== */


/* ===================== */
/*      ACCESSIBILITÉ    */
/* ===================== */

/* Texte accessible uniquement aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ================================================== */
/*              SECTION PRÉSENTATION                  */
/* ================================================== */

.accueil-presentation {
  position: relative;

  background: #f6f3ee;

  padding: 6rem 2rem 6.5rem;

  overflow: hidden;
}


/* Petit rappel graphique PAUSITY en haut */

.accueil-presentation::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 80px;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    #007c34 0%,
    #007c34 50%,
    #019bbd 50%,
    #019bbd 100%
  );
}


/* La règle .accueil-presentation__inner a été retirée d'ici : cette
   classe n'existe plus dans le HTML depuis la réécriture. C'est elle
   qui portait le max-width du conteneur ; sa disparition est la raison
   pour laquelle les cartes s'étalaient sur toute la largeur. La
   contrainte est désormais posée directement sur .accueil-cartes. */


/* ================================================== */
/*               TEXTE DE PRÉSENTATION                */
/* ================================================== */

.accueil-presentation__texte {
  max-width: 900px;
  margin: 0 auto 4.5rem;
  text-align: center;
}


/* ===================== */
/*        PAUSITY        */
/* ===================== */

.accueil-label {
  margin: 0 0 1.6rem;
  color: #007c34;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}


/* ===================== */
/*      GRAND TITRE      */
/* ===================== */

.accueil-titre {
  max-width: 820px;
  margin: 0 auto 2rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #101010;
}


/* ===================== */
/*    TEXTE INTRODUCTION */
/* ===================== */

.accueil-intro {
  max-width: 760px;
  margin: 0 auto;
  color: #555555;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.8;
}


/* Matières travaillées : bois, métal, pierre, terre, végétal.

   Mises en avant par la TYPOGRAPHIE et non par la couleur. Le
   paragraphe est en gris #555 ; les matières passent en encre pleine
   et en graisse 600. Le contraste suffit à faire ressortir
   l'énumération, sans alterner vert et bleu à chaque mot — ce qui
   hachait la lecture et faisait perdre le fil de la phrase.

   Règle générale : en corps de texte, la couleur sert à distinguer
   ce qui est cliquable. L'utiliser pour de la simple emphase brouille
   ce repère, le lecteur croit voir des liens. */
.mot-matiere {
  color: var(--pausity-ink, #14181a);
  font-weight: 600;
}


/* ================================================== */
/*                    SIGNATURE                       */
/* ================================================== */

.accueil-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 2.4rem;
}


/* Traits autour de la signature */

.accueil-signature span {
  display: block;
  width: 45px;
  height: 1px;
  background: rgba(16, 16, 16, 0.22);
}


/* Texte signature */

.accueil-signature p {
  margin: 0;
  color: #101010;
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
}


/* ================================================== */
/*                    ORNEMENT                        */
/* ================================================== */

/* La pousse en bas de section. Sans ces règles, le <div> restait un
   bloc ordinaire : contenu collé à gauche et filets invisibles. */
.accueil-ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  /* Marge HAUTE et BASSE. La marge haute (3rem) fusionne avec les
     4,5rem du bloc de texte au-dessus — deux marges verticales
     voisines se confondent en gardant la plus grande, elles ne
     s'additionnent pas. L'écart réel au-dessus est donc de 4,5rem,
     et on met la même valeur en bas pour que la feuille soit
     exactement à mi-distance entre le texte et les cartes. */
  margin: 3rem 0 4.5rem;

  /* Le SVG est tracé en `stroke="currentColor"` : c'est cette
     propriété `color` qui lui donne sa teinte. */
  color: var(--pausity-green, #007c34);
}

.accueil-ornement svg {
  flex: none;
  display: block;
}

/* Les deux filets sont masqués : la signature juste au-dessus utilise
   déjà le motif « filet — élément — filet ». Le répéter deux fois de
   suite affaiblit les deux. La pousse seule ponctue mieux la section.
   Pour les rétablir, remplacer `display: none` par les 3 lignes
   commentées ci-dessous. */
.accueil-ornement span {
  display: none;
  /* display: block;
     width: 45px;
     height: 1px;
     background: rgba(16, 16, 16, 0.18); */
}


/* ================================================== */
/*                 CARTES ACCUEIL                     */
/* ================================================== */

.accueil-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;

  /* Sans cette contrainte, la grille occupe toute la largeur de la
     section et les cartes filent d'un bord à l'autre de l'écran.
     1240px = la même largeur que la barre de menu et le pied de page :
     les trois blocs s'alignent verticalement sur toute la page. */
  max-width: 1240px;
  margin: 0 auto;
}


/* ===================== */
/*        UNE CARTE      */
/* ===================== */

.accueil-carte {
  position: relative;
  display: block;
  padding: 2.8rem 2.2rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


/* Trait supérieur discret */

.accueil-carte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #007c34;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}


/* Hover carte */

.accueil-carte:hover,
.accueil-carte:focus-visible {
  transform: translateY(-6px);

  border-color: rgba(0, 124, 52, 0.22);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.10);
}


.accueil-carte:hover::before,
.accueil-carte:focus-visible::before {
  transform: scaleX(1);
}


/* ===================== */
/*     TITRE DES CARTES  */
/* ===================== */

.accueil-carte h3 {
  margin: 0 0 0.8rem;

  font-family: "Playfair Display", serif;

  font-size: 1.6rem;

  font-weight: 400;

  line-height: 1.25;

  color: #101010;
}


/* ===================== */
/*     TEXTE DES CARTES  */
/* ===================== */

.accueil-carte p {
  margin: 0 0 1.7rem;

  color: #5b5b5b;

  font-size: 1rem;

  line-height: 1.7;
}


/* ===================== */
/*    LIEN DES CARTES    */
/* ===================== */

.accueil-carte__lien {
  position: relative;

  display: inline-block;

  padding-bottom: 4px;

  color: #007c34;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  transition:
    color 0.25s ease,
    padding-right 0.25s ease;
}


/* Trait sous Découvrir */

.accueil-carte__lien::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: #019bbd;

  transform: scaleX(0.45);

  transform-origin: left;

  transition: transform 0.25s ease;
}


.accueil-carte:hover .accueil-carte__lien,
.accueil-carte:focus-visible .accueil-carte__lien {
  color: #019bbd;

  padding-right: 5px;
}


.accueil-carte:hover .accueil-carte__lien::after,
.accueil-carte:focus-visible .accueil-carte__lien::after {
  transform: scaleX(1);
}


/* ================================================== */
/*                    RESPONSIVE                      */
/* ================================================== */


/* ===================== */
/*       TABLETTE        */
/* ===================== */

@media (max-width: 900px) {

  .accueil-presentation {
    padding: 5rem 2rem 5.5rem;
  }


  .accueil-presentation__texte {
    margin-bottom: 3.8rem;
  }


  /* Le même écart de part et d'autre de la feuille */
  .accueil-ornement {
    margin: 3rem 0 3.8rem;
  }


  .accueil-cartes {
    grid-template-columns: 1fr;

    max-width: 600px;

    margin: 0 auto;

    gap: 1.4rem;
  }


  .accueil-carte {
    padding: 2.3rem 2rem;
  }
}


/* ===================== */
/*        MOBILE         */
/* ===================== */

@media (max-width: 768px) {

  .accueil-presentation {
    padding: 4rem 1.4rem 4.5rem;
  }


  .accueil-presentation::before {
    width: 65px;
  }


  .accueil-presentation__texte {
    margin-bottom: 3rem;
  }


  .accueil-ornement {
    margin: 2.4rem 0 3rem;
  }


  /* PAUSITY */

  .accueil-label {
    margin-bottom: 1.3rem;

    font-size: 12px;

    letter-spacing: 0.35em;
  }


  /* Titre */

  .accueil-titre {
    max-width: 600px;

    margin-bottom: 1.6rem;

    font-size: clamp(34px, 9vw, 44px);

    line-height: 1.12;

    letter-spacing: -0.02em;
  }


  /* Pas de saut forcé en mobile */

  .accueil-titre br {
    display: none;
  }


  /* Introduction */

  .accueil-intro {
    max-width: 620px;

    font-size: 16px;

    line-height: 1.7;
  }


  /* Signature */

  .accueil-signature {
    gap: 12px;

    margin-top: 2rem;
  }


  .accueil-signature span {
    width: 30px;
  }


  .accueil-signature p {
    font-size: 16px;
  }


  /* Cartes */

  .accueil-cartes {
    gap: 1.2rem;
  }


  .accueil-carte {
    padding: 2rem 1.6rem;
  }


  .accueil-carte h3 {
    font-size: 1.4rem;
  }


  .accueil-carte p {
    margin-bottom: 1.4rem;

    font-size: 0.97rem;
  }
}


/* ===================== */
/*     PETIT MOBILE      */
/* ===================== */

@media (max-width: 480px) {

  .accueil-presentation {
    padding: 3.8rem 1.2rem 4rem;
  }


  .accueil-label {
    font-size: 11px;

    letter-spacing: 0.32em;
  }


  .accueil-titre {
    font-size: 34px;

    line-height: 1.13;
  }


  .accueil-intro {
    font-size: 15.5px;

    line-height: 1.7;
  }


  .accueil-signature {
    gap: 10px;

    margin-top: 1.8rem;
  }


  .accueil-signature span {
    width: 24px;
  }


  .accueil-signature p {
    font-size: 15px;
  }


  .accueil-carte {
    padding: 1.8rem 1.4rem;
  }
}

/* ================================================== */
/*              SECTION TEXTE D’ACCUEIL               */
/* ================================================== */

/* Fond BLANC, et non creme : la section de presentation qui precede
   est en #f6f3ee. Deux blocs creme a la suite effaceraient la
   frontiere entre les deux. */
.accueil-texte {
  background: #ffffff;
  padding: 5.5rem 2rem;
}

/* 820px : la ligne tombe autour de 75 caracteres, comme dans les
   encarts des pages metiers. Au-dela, l’oeil perd la ligne suivante. */
.accueil-texte__inner {
  max-width: 820px;
  margin: 0 auto;
}

.accueil-texte h2 {
  margin: 0 0 2rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  color: #14181a;
  text-align: center;
}

.accueil-texte p {
  margin: 0 0 1.1rem;
  color: #555555;
  font-size: 1rem;
  line-height: 1.8;
}

.accueil-texte p:last-of-type {
  margin-bottom: 0;
}

/* inline-flex et non flex : dans un bloc centre au texte, un flex
   prendrait toute la largeur et le lien ne se centrerait pas. */
.accueil-texte__lien {
  margin-top: 2.4rem;
  text-align: center;
}

.accueil-texte__lien a {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2rem;
  background: #04512a;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.accueil-texte__lien a:hover {
  background: #007c34;
}

.accueil-texte__lien a:focus-visible {
  outline: 2px solid #019bbd;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .accueil-texte {
    padding: 3.5rem 1.4rem;
  }

  .accueil-texte p {
    font-size: 0.95rem;
    line-height: 1.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accueil-texte__lien a {
    transition: none;
  }
}