/* ==========================================================================
   SITE VITRINE — Nabil Nicolas Scientific Software
   Feuille de style unique.

   ORGANISATION
     1. Police
     2. Jetons de charte
     3. Remise à zéro
     4. Ossature de page
     5. Bandeau
     6. Premier écran
     7. Adaptation aux petits écrans

   RÈGLE ABSOLUE
   Aucune couleur, aucune taille et aucun espacement ne s'écrit en dur dans
   les règles ci-dessous : tout passe par une variable déclarée en section 2.
   Changer la charte revient alors à modifier une seule ligne, et non à
   parcourir la feuille entière.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. POLICE

   Urbanist, licence OFL, servie depuis notre propre hébergement.
   ⚠ Jamais d'appel à fonts.googleapis.com : ce serait une requête vers un
     domaine tiers, ce que le site s'interdit.

   Les quatre fichiers sont sous-ensemblés au latin — 62 Ko en tout au lieu
   de 290 Ko pour les polices complètes.

   « font-display: swap » affiche immédiatement la police de substitution
   puis remplace : le texte n'est jamais invisible pendant le chargement.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Urbanist";
  src: url("../polices/Urbanist-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("../polices/Urbanist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("../polices/Urbanist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("../polices/Urbanist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. JETONS DE CHARTE
   -------------------------------------------------------------------------- */

:root {

  /* --- Palette. Les huit couleurs de la charte, et rien d'autre. --- */
  --azur-profond: #16265F;   /* écriture principale, filets, pied, boutons  */
  --azur:         #23409B;   /* liens                                       */
  --azur-clair:   #6B8AD4;   /* dégradé uniquement                          */
  --creme:        #EFE3C4;   /* encarts, écriture sur fond azur             */
  --or-clair:     #DDB253;   /* intitulés sur fond azur                     */
  --or:           #C9A227;   /* dégradé, filets d'accent                    */
  --encre:        #2A2417;   /* réserve — non employée pour l'instant       */
  --blanc-casse:  #FFFDF7;   /* fond de page, écriture sur fond azur        */

  /* --- Dégradé officiel, six arrêts. -----------------------------------
     ⚠ Jamais raccourci, jamais recoloré. Il passe par la crème avant
       d'atteindre l'or : un dégradé direct azur → or traverse un
       gris-olive terne.                                                  */
  --degrade-officiel: linear-gradient(
      to top,
      var(--azur-profond) 0%,
      var(--azur)         30%,
      var(--azur-clair)   50%,
      var(--creme)        68%,
      var(--or-clair)     86%,
      var(--or)           100%);

  /* --- Rôles sémantiques.
     Le reste de la feuille n'emploie que ceux-ci, jamais les couleurs
     brutes. Un changement de charte se règle donc ici.                   */
  --fond-page:         var(--blanc-casse);
  --fond-sombre:       var(--azur-profond);
  --fond-encart:       var(--creme);
  --texte:             var(--azur-profond);
  --texte-sur-sombre:  var(--blanc-casse);
  --texte-secondaire-sur-sombre: var(--creme);
  --intitule-sur-sombre: var(--or-clair);
  --lien:              var(--azur);
  --lien-survol:       var(--or);
  --filet:             var(--azur-profond);

  /* --- Ossature.
     La barre latérale vaut 69 px à la largeur de référence et se resserre
     sur les petits écrans, sans jamais disparaître : elle porte
     l'identité.                                                          */
  --largeur-page:    1800px;   /* au-delà, la page se centre               */
  --largeur-barre:   clamp(24px, 5.75vw, 69px);
  --marge-gauche:    clamp(20px, 4vw, 48px);
  --marge-droite:    clamp(20px, 5.3vw, 64px);
  --colonne-intitule: 190px;   /* colonne de gauche des sections           */
  --gouttiere:       clamp(24px, 4.6vw, 56px);

  /* --- Rythme vertical. --- */
  --espace-section:  clamp(34px, 4.2vw, 50px);

  /* --- Échelle typographique.
     Chaque rôle a une valeur et une seule. Les tailles sont fluides :
     la borne haute est celle de la maquette de référence.                */
  --taille-verrou:      clamp(11px, 1.15vw, 14px);
  --taille-surtitre:    clamp(9px, 0.9vw, 10.5px);
  --taille-titre:       clamp(27px, 3.5vw, 42px);
  --taille-titre-section: clamp(19px, 1.85vw, 22px);
  --taille-intitule:    clamp(9px, 0.85vw, 10px);
  --taille-sous-titre:  clamp(14.5px, 1.3vw, 15.5px);
  --taille-corps:       clamp(15px, 1.4vw, 16.5px);
  --taille-corps-2:     clamp(13.5px, 1.18vw, 14px);
  --taille-mentions:    clamp(12px, 1.05vw, 12.5px);
  --taille-bouton:      clamp(11.5px, 1.05vw, 12.5px);

  --graisse-legere: 300;
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-appuyee: 600;

  /* --- Interlettrage. Le nom et les intitulés vivent de leur espacement. */
  --lettrage-verrou:   0.3em;
  --lettrage-surtitre: 0.3em;
  --lettrage-intitule: 0.22em;
  --lettrage-libelle:  0.16em;
  --lettrage-bouton:   0.12em;

  /* --- Interlignage. --- */
  --interligne-titre: 1.2;
  --interligne-corps: 1.7;
  --interligne-serre: 1.6;
}


/* --------------------------------------------------------------------------
   3. REMISE À ZÉRO
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--fond-page);
  color: var(--texte);
  font-family: "Urbanist", "Century Gothic", Futura, sans-serif;
  font-weight: var(--graisse-legere);
  font-size: var(--taille-corps);
  line-height: var(--interligne-corps);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--lien);
  text-decoration: none;
}

a:hover { color: var(--lien-survol); }

/* Le contour de focus n'est jamais retiré : c'est le seul repère de
   quelqu'un qui navigue au clavier. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

/* Lien d'évitement, visible seulement lorsqu'il reçoit le focus. */
.evitement {
  position: absolute;
  left: -9999px;
}

.evitement:focus {
  left: var(--marge-gauche);
  top: 12px;
  z-index: 10;
  background: var(--fond-sombre);
  color: var(--texte-sur-sombre);
  padding: 10px 18px;
  font-size: var(--taille-mentions);
}


/* --------------------------------------------------------------------------
   4. OSSATURE DE PAGE

   Deux colonnes : la barre au dégradé, puis tout le contenu. La barre court
   sur toute la hauteur, mentions comprises.
   -------------------------------------------------------------------------- */

.page {
  max-width: var(--largeur-page);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

.page__barre {
  width: var(--largeur-barre);
  flex: none;
  background: var(--degrade-officiel);
}

.page__contenu {
  flex: 1;
  min-width: 0;          /* sans quoi les textes longs élargissent la page */
  background: var(--fond-page);
}

/* Filet de séparation entre deux sections, en retrait des mêmes marges
   que le contenu. */
.filet {
  height: 1px;
  background: var(--filet);
  margin: 0 var(--marge-droite) 0 var(--marge-gauche);
}


/* --------------------------------------------------------------------------
   5. BANDEAU
   -------------------------------------------------------------------------- */

.bandeau {
  padding: 30px var(--marge-droite) 26px var(--marge-gauche);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.bandeau__identite {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bandeau__lys {
  width: 46px;
  height: 46px;
  flex: none;
}

/* Le verrou. Les deux lignes forment ensemble la dénomination : elles ne
   se lisent pas séparément, d'où le regroupement dans un seul élément. */
.verrou {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--taille-verrou);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--lettrage-verrou);
  line-height: 1.15;
  color: var(--texte);
}

/* --- Sélecteur de langue --- */

.langues {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  font-size: var(--taille-mentions);
  letter-spacing: var(--lettrage-libelle);
}

.langues__separateur {
  color: var(--texte);
  user-select: none;
}

/* ⚠ La zone tactile doit mesurer au moins 24 px dans les deux sens, même
   quand le texte est plus petit. « FR » ne fait que quelques pixels de
   large : sans ces marges, il faut viser juste sur un téléphone.
   Le rembourrage agrandit la cible sans changer l'aspect. */
.langues__choix {
  background: none;
  border: 0;
  padding: 4px 6px 6px 6px;
  margin: -4px -6px -6px -6px;   /* la mise en page reste inchangée */
  min-width: 24px;
  min-height: 24px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--texte);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.langues__choix:hover { color: var(--lien-survol); }

.langues__choix[aria-current="true"] {
  font-weight: var(--graisse-appuyee);
  border-bottom-color: var(--texte);
  cursor: default;
}


/* --------------------------------------------------------------------------
   6. PREMIER ÉCRAN
   -------------------------------------------------------------------------- */

.premier-ecran {
  padding: var(--espace-section) var(--marge-droite)
           calc(var(--espace-section) + 4px) var(--marge-gauche);
  display: flex;
  gap: var(--gouttiere);
  align-items: flex-start;
}

.premier-ecran__texte { flex: 1; min-width: 0; }

.surtitre {
  font-size: var(--taille-surtitre);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--lettrage-surtitre);
  line-height: 1.4;
  margin: 0 0 22px 0;
}

.titre-principal {
  font-size: var(--taille-titre);
  font-weight: var(--graisse-moyenne);
  line-height: var(--interligne-titre);
  letter-spacing: normal;
  margin: 0;
  max-width: 15em;      /* garde la ligne sous 80 signes */
  text-wrap: pretty;
}

.chapeau {
  margin: 22px 0 0 0;
  max-width: 34em;
  text-wrap: pretty;
}

/* --- Boutons ---
   Ce sont de vrais liens : un bouton qui mène ailleurs reste un lien. */

.actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bouton {
  display: inline-block;
  font-size: var(--taille-bouton);
  font-weight: var(--graisse-moyenne);
  letter-spacing: var(--lettrage-bouton);
  line-height: 1.2;
  padding: 14px 26px;
  border: 1px solid var(--azur-profond);
  transition: background-color .15s ease, color .15s ease;
}

.bouton--plein {
  background: var(--fond-sombre);
  color: var(--texte-sur-sombre);
}

.bouton--plein:hover {
  background: var(--azur);
  border-color: var(--azur);
  color: var(--texte-sur-sombre);
}

.bouton--contour {
  background: transparent;
  color: var(--texte);
}

.bouton--contour:hover {
  background: var(--fond-sombre);
  color: var(--texte-sur-sombre);
}

/* --- Carte du produit --- */

.carte-produit {
  width: 290px;
  flex: none;
  background: var(--fond-sombre);
  color: var(--texte-sur-sombre);
  padding: 24px 24px 26px 24px;
}

.carte-produit__surtitre {
  font-size: var(--taille-intitule);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--lettrage-libelle);
  color: var(--intitule-sur-sombre);
  margin: 0;
}

.carte-produit__nom {
  margin: 12px 0 0 0;
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: var(--graisse-appuyee);
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.carte-produit__corps {
  margin: 10px 0 0 0;
  font-size: var(--taille-corps-2);
  line-height: var(--interligne-serre);
  color: var(--texte-secondaire-sur-sombre);
}


/* ==========================================================================
   8. SECTIONS COURANTES

   Toutes les sections partagent la même ossature : une colonne d'intitulé
   étroite à gauche, le corps à droite. C'est ce qui donne au document son
   allure de planche, et ce qui permet de parcourir la page en ne lisant que
   la colonne de gauche.
   ========================================================================== */

.section {
  padding: var(--espace-section) var(--marge-droite)
           calc(var(--espace-section) + 4px) var(--marge-gauche);
  display: flex;
  gap: var(--gouttiere);
  align-items: flex-start;
}

.section__intitule {
  width: var(--colonne-intitule);
  flex: none;
}

.section__corps {
  flex: 1;
  min-width: 0;
}

.intitule {
  font-size: var(--taille-intitule);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--lettrage-intitule);
  line-height: 1.5;
  margin: 0;
}

.titre-section {
  margin: 12px 0 0 0;
  font-size: var(--taille-titre-section);
  font-weight: var(--graisse-moyenne);
  line-height: 1.25;
}

/* Nom du logiciel dans la colonne d'intitulé : plus grand et plus appuyé
   que les autres titres de section, parce qu'il est un nom propre et non
   une étiquette. */
.titre-section--produit {
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: var(--graisse-appuyee);
  letter-spacing: 0.04em;
}

.devise {
  margin: 8px 0 0 0;
  font-size: var(--taille-mentions);
  font-style: italic;
}

.texte-large {
  margin: 0;
  max-width: 46em;
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   9. GRILLE DE TROIS

   Employée pour les trois publics de la société. Une seule règle, prête à
   resservir si une autre section demande la même grille.
   -------------------------------------------------------------------------- */

.trio {
  display: flex;
  gap: clamp(18px, 2.6vw, 34px);
  align-items: stretch;
}

.trio__element {
  flex: 1;
  min-width: 0;
}

/* Le filet supérieur sépare sans encadrer : il marque une colonne, il ne
   fabrique pas une carte. */
.trio__element--filete {
  border-top: 1px solid var(--filet);
  padding-top: 14px;
}

.echeance {
  font-size: 9px;
  letter-spacing: var(--lettrage-intitule);
  line-height: 1.5;
  margin: 0 0 6px 0;
}

/* Trois échéances, trois graisses décroissantes. La graisse porte ici une
   information de calendrier, pas une décoration : plus l'échéance est
   lointaine, plus le libellé s'efface.

     actuelle  — ce que la société fait aujourd'hui
     proche    — réalisable, seule la disponibilité le retarde
     lointaine — envisagé, à un horizon non arrêté */
.echeance--actuelle  { font-weight: var(--graisse-appuyee); }
.echeance--proche    { font-weight: var(--graisse-normale); }
.echeance--lointaine { font-weight: var(--graisse-legere); }

.sous-titre {
  margin: 0;
  font-size: var(--taille-sous-titre);
  font-weight: var(--graisse-appuyee);
  line-height: 1.3;
}

.texte-court {
  margin: 8px 0 0 0;
  font-size: var(--taille-corps-2);
  line-height: var(--interligne-serre);
}


/* --------------------------------------------------------------------------
   10. SECTION DU PRODUIT
   -------------------------------------------------------------------------- */

.module {
  margin-top: 30px;
  padding-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.module__nom {
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: var(--graisse-appuyee);
}

.module__accroche {
  font-size: var(--taille-corps-2);
  font-weight: var(--graisse-legere);
}

.trio--voies { margin-top: 14px; }

.trio--arguments {
  margin-top: 32px;
  gap: clamp(16px, 2.3vw, 30px);
}

/* Les encarts crème sont le seul aplat de couleur du corps de page.
   Ils portent les trois arguments, et rien d'autre. */
.encart {
  background: var(--fond-encart);
  padding: 18px 20px;
}

.encart__titre {
  margin: 0;
  font-size: var(--taille-surtitre);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--lettrage-libelle);
  line-height: 1.5;
}

.encart__corps {
  margin: 7px 0 0 0;
  font-size: var(--taille-corps-2);
  line-height: var(--interligne-serre);
}

/* Avertissement d'usage et propriété intellectuelle. Deux mentions de même
   nature : elles encadrent juridiquement ce qui précède, d'où le filet qui
   les sépare du reste et leur corps réduit. */
.avertissements {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--filet);
  display: flex;
  gap: clamp(20px, 3.3vw, 40px);
  align-items: flex-start;
}

.avertissements__element {
  flex: 1;
  min-width: 0;
  font-size: var(--taille-mentions);
  line-height: var(--interligne-serre);
}

.actions--produit { margin-top: 26px; }


/* --------------------------------------------------------------------------
   11. SECTION DU FONDATEUR
   -------------------------------------------------------------------------- */

.fondateur {
  display: flex;
  gap: clamp(24px, 3.8vw, 46px);
  align-items: flex-start;
}

.fondateur__texte {
  flex: 1.4;
  min-width: 0;
}

/* L'exergue est le seul endroit de la page où une phrase est traitée comme
   un objet graphique. Le filet vertical la détache du paragraphe sans la
   mettre en encadré. */
.fondateur__exergue {
  width: 280px;
  flex: none;
  border-left: 1px solid var(--filet);
  padding-left: 24px;
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: var(--graisse-moyenne);
  line-height: 1.3;
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   12. SECTION DE CONTACT
   -------------------------------------------------------------------------- */

.contact {
  display: flex;
  gap: var(--gouttiere);
  align-items: flex-start;
  flex-wrap: wrap;
}

.libelle {
  margin: 0;
  font-size: var(--taille-mentions);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--lettrage-libelle);
  line-height: 1.5;
}

/* L'adresse est écrite en clair et soulignée d'un trait plein : quelqu'un
   sans client de messagerie configuré doit pouvoir la recopier. */
.courriel {
  margin-top: 8px;
  display: inline-block;
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: var(--graisse-normale);
  line-height: 1.3;
  color: var(--texte);
  border-bottom: 2px solid var(--texte);
  padding-bottom: 4px;
  word-break: break-word;
}

.courriel:hover {
  color: var(--lien-survol);
  border-bottom-color: var(--lien-survol);
}

.reseaux {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  font-size: var(--taille-corps-2);
  font-weight: var(--graisse-normale);
}

/* Même raison que pour le sélecteur de langue : une ligne de texte de 14 px
   ne fait que 22 px de haut, et deux liens superposés deviennent difficiles
   à viser au pouce. Le rembourrage vertical porte la cible à 26 px et tient
   lieu d'écart entre les lignes. */
.reseaux a {
  display: inline-block;
  padding: 3px 0;
  min-height: 24px;
}


/* --------------------------------------------------------------------------
   13. MENTIONS LÉGALES

   Le seul bloc sur fond sombre. La barre au dégradé court derrière lui
   jusqu'en bas de page : les mentions font partie du document, elles n'en
   sont pas un appendice.
   -------------------------------------------------------------------------- */

.mentions {
  background: var(--fond-sombre);
  color: var(--texte-sur-sombre);
  padding: 44px var(--marge-droite) 38px var(--marge-gauche);
}

.mentions__titre {
  margin: 0 0 24px 0;
  font-size: var(--taille-intitule);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--lettrage-intitule);
  line-height: 1.5;
  color: var(--intitule-sur-sombre);
}

.mentions__colonnes {
  display: flex;
  gap: var(--gouttiere);
  align-items: flex-start;
}

.mentions__bloc { min-width: 0; }
.mentions__bloc--editeur { flex: 1.2; }
.mentions__bloc--hebergeur { flex: 1; }
.mentions__bloc--confidentialite { flex: 1.1; }

.mentions__libelle {
  margin: 0 0 12px 0;
  font-size: var(--taille-mentions);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--lettrage-libelle);
  line-height: 1.5;
  color: var(--texte-secondaire-sur-sombre);
}

.mentions__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--taille-mentions);
  line-height: 1.5;
}

.mentions__texte {
  margin: 0;
  font-size: var(--taille-mentions);
  line-height: var(--interligne-serre);
  text-wrap: pretty;
}

.mentions .courriel,
.mentions a {
  color: var(--texte-sur-sombre);
  border-bottom-color: var(--texte-sur-sombre);
}

.mentions a:hover { color: var(--or-clair); }

.mentions__pied {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(239, 227, 196, 0.25);
  font-size: var(--taille-mentions);
  color: var(--texte-secondaire-sur-sombre);
}


/* --------------------------------------------------------------------------
   14. ADAPTATION AUX PETITS ÉCRANS

   Un seul point de rupture. La maquette tient en deux colonnes tant que la
   ⚠ CE BLOC RESTE EN FIN DE FEUILLE. À spécificité égale, c'est la
     dernière règle qui gagne : une section ajoutée après lui annulerait
     sans bruit son adaptation. C'est exactement ce qui s'est produit une
     fois, et le symptôme était un débordement horizontal à 320 px.

   place le permet ; en dessous, tout s'empile dans l'ordre de lecture.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {

  .premier-ecran {
    flex-direction: column;
    gap: 32px;
  }

  .carte-produit {
    width: 100%;
  }

  .bandeau {
    flex-direction: column;
    gap: 18px;
  }

  .langues { padding-top: 0; }

  /* Les sections passent en pile : l'intitulé au-dessus du corps.
     La colonne de 190 px n'a plus de sens sous cette largeur. */
  .section {
    flex-direction: column;
    gap: 26px;
  }

  .section__intitule { width: 100%; }

  .trio,
  .avertissements,
  .fondateur,
  .mentions__colonnes {
    flex-direction: column;
    gap: 26px;
  }

  .fondateur__exergue {
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--filet);
    padding-left: 0;
    padding-top: 20px;
  }

  .contact { gap: 28px; }
}

@media (max-width: 420px) {

  .bandeau__lys { width: 38px; height: 38px; }

  .actions { flex-direction: column; align-items: stretch; }

  .bouton { text-align: center; }
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}