/*
 * Feuille de style du site vitrine Conformagri.
 *
 * Reprend les jetons du système de conception de l'application (mêmes neutres
 * chauds, même accent ambre, mêmes ombres douces) pour que le site appartienne
 * visiblement à la même maison. Aucune dépendance, aucun script : la sobriété
 * vient de la typographie et de l'espace, pas de l'ornement.
 *
 * Deux registres d'accent :
 *   - .ombrelle : l'encre porte la structure, l'ambre n'est qu'un repère.
 *     Registre institutionnel de la marque-mère.
 *   - .filiere  : l'ambre devient l'accent identitaire de la filière.
 */

:root {
  /* Papier / neutres chauds */
  --paper: #fcfcfb;
  --paper-raised: #ffffff;
  --paper-sunken: #f7f6f3;

  --ink-900: #141311;
  --ink-800: #2a2724;
  --ink-700: #403c37;
  --ink-600: #57524b;
  --ink-500: #736d64;
  --ink-400: #948d82;
  --ink-300: #b8b1a6;

  --line: #e6e3dc;
  --line-strong: #d3cfc6;
  --line-soft: #efede7;

  /* Ambre — accent unique */
  --ambre-100: #f9efda;
  --ambre-200: #f1dcb2;
  --ambre-500: #c4831f;
  --ambre-600: #a96a16;
  --ambre-700: #8a5511;
  --ambre-800: #6d430f;

  /* Rôle d'accent, redéfini par filière */
  --accent: var(--ambre-700);
  --accent-fort: var(--ambre-800);

  --focus: #8a5511;

  /* Tons sémantiques — repris à l'identique de tailwind.config.js (packages/web) */
  --succes-50: #f0f7f1;
  --succes-100: #dcede0;
  --succes-600: #336940;
  --succes-700: #28532f;

  --alerte-50: #fdf6ec;
  --alerte-100: #f8e8ce;
  --alerte-600: #965d0f;
  --alerte-700: #78490c;

  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --mesure: 42rem;      /* largeur de lecture confortable */
  --contenu: 70rem;     /* largeur maximale des sections */

  --ombre-sm: 0 1px 2px rgba(20, 19, 17, 0.05), 0 1px 3px rgba(20, 19, 17, 0.04);
  --ombre: 0 2px 4px rgba(20, 19, 17, 0.04), 0 4px 12px rgba(20, 19, 17, 0.05);
}

/* La filière œufs assume pleinement l'accent ambre. */
.filiere {
  --accent: var(--ambre-700);
  --accent-fort: var(--ambre-800);
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-800);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- */
/* Typographie                                                       */
/* ---------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  letter-spacing: -0.022em;
  font-weight: 650;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: -0.018em;
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.011em;
}

h4 {
  font-size: 1.0625rem;
}

p {
  margin: 0;
}

a {
  color: var(--accent-fort);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: var(--accent);
}

strong {
  color: var(--ink-900);
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--ambre-200);
  color: var(--ink-900);
}

/* Saut au contenu, pour la navigation clavier. */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper-raised);
  color: var(--ink-900);
  padding: 0.625rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  z-index: 100;
}

.lien-evitement:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------------------------------------------------------------- */
/* Mise en page                                                      */
/* ---------------------------------------------------------------- */

.contenu {
  width: 100%;
  max-width: var(--contenu);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.prose {
  max-width: var(--mesure);
}

.prose p + p {
  margin-top: 1.1rem;
}

section {
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}

section + section {
  border-top: 1px solid var(--line-soft);
}

.surtitre {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-fort);
  margin-bottom: 0.9rem;
}

.chapeau {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-700);
}

/* ---------------------------------------------------------------- */
/* En-tête et navigation                                             */
/* ---------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252, 252, 251, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.entete-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 600;
}

.marque svg {
  flex-shrink: 0;
}

/* Logo Conformagri (détouré, fond transparent) : picto à gauche, nom à droite. */
.marque .logo-img {
  display: block;
  height: 2.25rem;
  width: auto;
}

@media (max-width: 40rem) {
  .marque .logo-img {
    height: 1.875rem;
  }
}

.marque .nom {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.marque .filiere-tag {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-500);
  padding-left: 0.625rem;
  margin-left: 0.5rem;
  border-left: 1px solid var(--line-strong);
}

.nav-principale {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-principale a {
  color: var(--ink-600);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.nav-principale a:hover {
  color: var(--ink-900);
}

.nav-principale a.retour {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

@media (max-width: 40rem) {
  /*
   * Vitrine à deux pages, navigation courte : pas de menu déroulant à
   * bricoler sans JavaScript. Les liens passent sous la marque, alignés.
   */
  .entete-barre {
    flex-wrap: wrap;
    padding-block: 0.75rem;
    gap: 0.5rem 1.25rem;
  }

  .nav-principale {
    gap: 1.25rem;
    width: 100%;
    font-size: 0.9rem;
  }

  .marque .filiere-tag {
    display: none;
  }
}

/* ---------------------------------------------------------------- */
/* Section d'ouverture                                               */
/* ---------------------------------------------------------------- */

.ouverture {
  /* Marge haute (header → h1) réduite de moitié ; marge basse inchangée. */
  padding-top: clamp(2rem, 1.25rem + 4vw, 3.75rem);
  padding-bottom: clamp(4rem, 2.5rem + 8vw, 7.5rem);
}

.ouverture h1 {
  max-width: 20ch;
  font-weight: 900 !important;
}

.ouverture .chapeau {
  margin-top: 1.5rem;
  max-width: var(--mesure);
}

/* ---------------------------------------------------------------- */
/* Mock produit — aperçu de l'application, dans le hero              */
/* ---------------------------------------------------------------- */
/*
 * Reproduction HTML/CSS, pas une capture d'écran : nette à toute résolution,
 * sans poids d'image, et qui suit le design system si celui-ci évolue. Dérivée
 * de deux écrans réels de l'application (tableau de bord, registres), limitée
 * au socle réglementaire commun à toute filière — aucun terme, aucune icône
 * propre aux œufs.
 *
 * Composition à deux colonnes sur bureau, mock à gauche : dans l'ordre du DOM,
 * le texte du hero reste premier (c'est le message principal, et le mock est
 * purement décoratif — aucun élément focusable à l'intérieur), seul l'ordre
 * visuel change via `grid-template-areas`. Sur mobile, la grille repasse à une
 * colonne et l'ordre du DOM prévaut : le texte d'abord, le mock ensuite.
 *
 * Alignement : le haut du mock cale sur le haut du h1 (`align-items: start`,
 * aucune marge propre sur `.ouverture-visuel`). La hauteur de la carte est
 * calibrée (paddings internes) pour correspondre à celle du bloc titre +
 * chapeau à la largeur de référence du hero (~1440px) ; les deux blocs ne
 * peuvent pas coïncider au pixel près à toutes les largeurs, le h1 passant à
 * la ligne différemment selon l'espace disponible.
 *
 * Le module « disponible sur tous les supports » vit sous le mock (et non
 * plus sous le CTA) : `.ouverture-visuel` empile les deux par un simple gap
 * flex, sur mobile comme sur bureau.
 */
.ouverture-grille {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 60rem) {
  .ouverture-grille {
    grid-template-areas: 'mock texte';
    /* Même largeur que le plafond de `.mock-produit`/`.ouverture-visuel`
       (27rem) : le mock rend donc à sa largeur maximale sur tout le bureau,
       plutôt que d'être re-capé plus étroit par la piste de grille. */
    grid-template-columns: minmax(0, 27rem) 1fr;
    align-items: start;
    gap: 3.5rem;
  }
  .ouverture-texte {
    grid-area: texte;
  }
  .ouverture-visuel {
    grid-area: mock;
  }
}

.ouverture-visuel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  /*
   * Même plafond que `.mock-produit` : les deux boîtes coïncident donc
   * toujours exactement, y compris dans la plage intermédiaire (mise en page
   * à une colonne mais conteneur plus large que 27rem, ex. tablette portrait)
   * où sans ce plafond le mock resterait capé à 27rem tandis que ce
   * conteneur, lui, s'étirerait — décentrant le module appareils par rapport
   * au mock au lieu de l'aligner dessous.
   */
  max-width: 27rem;
}

.mock-produit {
  width: 100%;
  max-width: 27rem;
}

.mock-carte {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-raised);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
}

.mock-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8125rem 1.125rem;
  border-bottom: 1px solid var(--line-soft);
}

.mock-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.mock-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid;
  padding: 0.1875rem 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.mock-badge-alerte {
  background: var(--alerte-50);
  border-color: var(--alerte-100);
  color: var(--alerte-700);
}

.mock-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mock-ligne {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8125rem 1.125rem;
  border-top: 1px solid var(--line-soft);
}

.mock-lignes .mock-ligne:first-child {
  border-top: none;
}

.mock-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 9999px;
  border: 1px solid;
}

.mock-icone svg {
  width: 17px;
  height: 17px;
}

.mock-icone-succes {
  background: var(--succes-50);
  border-color: var(--succes-100);
  color: var(--succes-600);
}

.mock-icone-alerte {
  background: var(--alerte-50);
  border-color: var(--alerte-100);
  color: var(--alerte-600);
}

.mock-ligne-texte {
  min-width: 0;
  padding-top: 0.1rem;
}

.mock-ligne-titre {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-900);
}

.mock-ligne-titre svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--succes-600);
}

.mock-ligne-detail {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-500);
}

.mock-ligne-detail.mock-detail-alerte {
  color: var(--alerte-700);
  font-weight: 500;
}

.mock-pied {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-sunken);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-700);
}

.mock-pied svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent-fort);
}

/* ---------------------------------------------------------------- */
/* Boutons / liens d'action (sobres)                                 */
/* ---------------------------------------------------------------- */

/*
 * Rangée d'action : CTA principal et lien secondaire alignés sur un même
 * centre optique. Partagée par les deux ouvertures (ombrelle et filière).
 */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
}

/* ---- CTA principal ---------------------------------------------- */
/*
 * Compact et posé : largeur au contenu (jamais pleine largeur), hauteur 48 px,
 * padding horizontal généreux, rayon discret, graisse mesurée. Aucun effet —
 * seule la teinte de fond glisse au survol.
 */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.75rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.006em;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 130ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bouton-principal {
  background: var(--ink-900);
  color: var(--paper);
}

.bouton-principal:hover {
  background: var(--ink-800);
}

.bouton-discret {
  color: var(--ink-800);
  border-color: var(--line-strong);
  background: var(--paper-raised);
}

.bouton-discret:hover {
  border-color: var(--ink-400);
}

/* ---- Lien secondaire -------------------------------------------- */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent-fort);
  font-weight: 550;
  font-size: 0.9375rem;
  text-decoration: none;
}

.lien-fleche svg {
  transition: transform 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Dans la rangée d'action, le lien fonctionne comme un CTA secondaire :
 * même hauteur que le bouton pour un centre optique rigoureusement identique,
 * teinte encre sobre, flèche qui avance de 2 px au survol.
 */
.actions .lien-fleche {
  height: 3rem;
  padding-inline: 0.25rem;
  color: var(--ink-700);
  font-weight: 500;
  letter-spacing: -0.006em;
  transition: color 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

.actions .lien-fleche:hover {
  color: var(--ink-900);
}

.actions .lien-fleche:hover svg {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .lien-fleche svg,
  .actions .lien-fleche:hover svg {
    transform: none;
  }
}

/* ---- Module « disponible sur tous les supports » ---------------- */
/*
 * Placé sous le mock produit, centré par rapport à lui (voir `.ouverture-visuel`,
 * qui plafonne les deux à la même largeur). Les icônes gardent leur largeur
 * propre et compacte d'origine (repère fixe, pas des fractions du conteneur) :
 * seule la légende profite de toute la largeur disponible, pour tenir sur une
 * ligne.
 */
.disponibilite {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.appareils {
  display: grid;
  grid-template-columns: repeat(3, 81px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.appareil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.appareil svg {
  width: 19.5px;
  height: 19.5px;
  color: var(--ink-700);
}

.appareil span {
  font-size: 0.515rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-500);
}

.disponibilite-legende {
  width: 100%;
  margin: 0.75rem 0 0;
  font-size: 0.5375rem;
  line-height: 1.45;
  color: var(--ink-400);
  text-align: center;
}

/* ---------------------------------------------------------------- */
/* Grilles de contenu                                               */
/* ---------------------------------------------------------------- */

.grille {
  display: grid;
  gap: 1.75rem 2.5rem;
}

@media (min-width: 48rem) {
  .grille-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grille-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.entete-section {
  max-width: var(--mesure);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.entete-section p {
  margin-top: 1rem;
  color: var(--ink-600);
}

/* Blocs « angles » : un titre net, un texte posé. Aucun ornement. */
.bloc h3 {
  margin-bottom: 0.6rem;
}

.bloc p {
  color: var(--ink-600);
}

.bloc .marqueur {
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--accent);
  margin-bottom: 1.1rem;
}

/* ---------------------------------------------------------------- */
/* Cartes filières                                                   */
/* ---------------------------------------------------------------- */

.carte-filiere {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--ombre-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.carte-filiere:hover {
  border-color: var(--line-strong);
  box-shadow: var(--ombre);
}

.carte-filiere .categorie {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.carte-filiere h3 {
  color: var(--ink-900);
}

.carte-filiere p {
  color: var(--ink-600);
  flex-grow: 1;
}

.carte-filiere .lien-fleche {
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------- */
/* Listes de fonctionnalités (page filière)                          */
/* ---------------------------------------------------------------- */

.liste-details {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.liste-details li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--ink-600);
}

.liste-details li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--accent);
}

/* Bloc fonctionnalité : un domaine métier, ce que fait l'outil, ce qui en découle. */
.fonction {
  padding-block: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

.fonction + .fonction {
  border-top: 1px solid var(--line-soft);
}

.fonction-grille {
  display: grid;
  gap: 0.75rem 3rem;
}

@media (min-width: 52rem) {
  .fonction-grille {
    grid-template-columns: 15rem 1fr;
  }
}

.fonction-grille h3 {
  color: var(--ink-900);
}

.fonction-numero {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-fort);
  letter-spacing: 0.04em;
}

.horizon {
  margin-top: 1.25rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .horizon {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.horizon .colonne {
  padding: 1rem 1.25rem;
  background: var(--paper-sunken);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.horizon .colonne .etiquette {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.4rem;
}

.horizon .colonne p {
  color: var(--ink-700);
  font-size: 0.9875rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- */
/* Encadré (précision réglementaire, mise au point honnête)          */
/* ---------------------------------------------------------------- */

.encadre {
  border-left: 3px solid var(--line-strong);
  padding: 0.25rem 0 0.25rem 1.5rem;
  max-width: var(--mesure);
  color: var(--ink-600);
}

.encadre p + p {
  margin-top: 0.9rem;
}

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

.contact-grille {
  display: grid;
  gap: 2rem 3rem;
  align-items: start;
}

@media (min-width: 48rem) {
  .contact-grille {
    grid-template-columns: 1.2fr 1fr;
  }
}

.coordonnees {
  display: grid;
  gap: 1rem;
  font-size: 0.9875rem;
}

.coordonnees .ligne .etiquette {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.15rem;
}

.coordonnees .ligne a,
.coordonnees .ligne span {
  color: var(--ink-800);
}

/* ---------------------------------------------------------------- */
/* Pied de page                                                      */
/* ---------------------------------------------------------------- */

.pied {
  border-top: 1px solid var(--line);
  background: var(--paper-sunken);
  padding-block: 2.5rem;
  font-size: 0.875rem;
  color: var(--ink-500);
}

.pied-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}

.pied a {
  color: var(--ink-600);
  text-decoration: none;
}

.pied a:hover {
  color: var(--ink-900);
}

.pied-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
}

.mentions {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: var(--mesure);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-400);
}