/*
  Vitrine de SitriCloud. Une seule feuille, aucune dépendance : la page est servie
  par l'edge avec une politique de sécurité qui n'autorise que ce qui vient
  d'ici, et une police distante ou un cadre tiers ne passeraient pas.

  Un seul visage, sombre, et pas de bascule de thème : la console est claire, la
  vitrine est sombre, et c'est ce contraste qui fait qu'on sait où l'on est.
  L'accent reprend les quatre pavés du logo — bleu, azur, violet, turquoise —
  qui ne servent qu'aux halos et aux traits, jamais au texte courant.
*/

:root {
    --fond: #08090c;
    --fond-eleve: #0e1016;
    --fond-carte: #101319;
    --texte: #f3f4f8;
    --texte-doux: #8f95a6;
    --texte-faible: #6a7082;
    --bord: rgba(255, 255, 255, 0.08);
    --bord-fort: rgba(255, 255, 255, 0.16);
    --marque: #0f6cbd;
    --azur: #2899f5;
    --violet: #6b4fbb;
    --turquoise: #00b7c3;
    --rayon: 12px;
    --rayon-lg: 18px;
    --bande: 1120px;
    --entete: 60px;
}

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

html {
    scroll-behavior: smooth;
    /* Une ancre ne doit pas se ranger sous la barre collée en haut. */
    scroll-padding-top: calc(var(--entete) + 24px);
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Le premier lien de la page, visible seulement quand on le vise au clavier. */
.saut {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--marque);
    color: #fff;
    padding: 12px 20px;
    z-index: 100;
}

.saut:focus {
    left: 0;
}

a {
    color: inherit;
}

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

h1,
h2,
h3 {
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 0 0 16px;
    font-weight: 620;
}

h1 {
    font-size: clamp(40px, 7vw, 76px);
    /* Assez large pour que « L'hébergement de site » tienne sur sa ligne : la
       coupure du titre est écrite dans la page, elle ne doit pas dépendre de la
       largeur de la fenêtre. */
    max-width: 22ch;
}

h2 {
    font-size: clamp(26px, 3.4vw, 40px);
}

h3 {
    font-size: 17px;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
}

p {
    margin: 0 0 16px;
}

/* La largeur de lecture, commune à toutes les sections : le fond couvre
   l'écran, le contenu s'arrête ici. */
.bande {
    width: 100%;
    max-width: var(--bande);
    margin: 0 auto;
    padding: 0 24px;
}

.bande--etroite {
    max-width: 720px;
}

.centre {
    text-align: center;
}

.centre .ligne {
    margin-left: auto;
    margin-right: auto;
}

/* « text-align » ne centre pas une boîte flex : les mots de l'offre et les
   boutons ont besoin de leur propre alignement, sans quoi le titre est centré
   et tout ce qui le suit reste calé à gauche. */
.centre .gestes,
.centre .actions,
.centre .clients {
    justify-content: center;
}

/* La phrase qui suit une accroche. Une seule, jamais deux. */
.ligne {
    color: var(--texte-doux);
    font-size: clamp(16px, 1.5vw, 19px);
    max-width: 54ch;
}

/* ---------- en-tête ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(8, 9, 12, 0.72);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.entete--defilee {
    border-bottom-color: var(--bord);
    background: rgba(8, 9, 12, 0.9);
}

.entete__bande {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: var(--entete);
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 640;
    letter-spacing: -0.02em;
    text-decoration: none;
    font-size: 16px;
}

.logo-sitricloud {
    display: block;
    border-radius: 3px;
}

.nav {
    display: flex;
    gap: 24px;
    margin-left: auto;
    font-size: 14.5px;
}

.nav a {
    color: var(--texte-doux);
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav a:hover,
.nav a[aria-current='page'] {
    color: var(--texte);
}

/* ---------- boutons ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 560;
    font-size: 14.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.bouton--grand {
    padding: 13px 24px;
    font-size: 16px;
    border-radius: 10px;
}

.bouton--plein {
    background: linear-gradient(180deg, var(--azur), var(--marque));
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 20px rgba(15, 108, 189, 0.28);
}

.bouton--plein:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 10px 28px rgba(15, 108, 189, 0.4);
}

.bouton--fantome {
    border: 1px solid var(--bord-fort);
    color: var(--texte);
    background: rgba(255, 255, 255, 0.03);
}

.bouton--fantome:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0 0;
}

/* ---------- bannière ---------- */

.banniere {
    position: relative;
    padding: 96px 0 0;
    overflow: hidden;
}

/* Le halo. Trois foyers aux couleurs du logo, très dilués : c'est la seule
   chose qui distingue le fond de la bannière du noir des sections. */
.banniere::before {
    content: '';
    position: absolute;
    inset: -40% 0 auto;
    height: 700px;
    background:
        radial-gradient(46% 60% at 22% 46%, rgba(40, 153, 245, 0.24), transparent 70%),
        radial-gradient(40% 55% at 72% 34%, rgba(107, 79, 187, 0.22), transparent 72%),
        radial-gradient(34% 46% at 52% 68%, rgba(0, 183, 195, 0.14), transparent 70%);
    pointer-events: none;
}

.banniere .bande {
    position: relative;
}

.banniere--courte {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--bord);
}

/* Les trois gestes de la bannière : trois mots, trois couleurs du logo. */
.gestes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 4px 0 0;
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 560;
    letter-spacing: -0.02em;
    color: var(--texte-doux);
}

.geste:nth-child(1) {
    color: var(--azur);
}

.geste:nth-child(2) {
    color: var(--violet);
}

.geste:nth-child(3) {
    color: var(--turquoise);
}

/* ---------- clients du connecteur ---------- */

.clients {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.clients li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid var(--bord);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--texte-doux);
    font-size: 14px;
}

.clients svg {
    width: 17px;
    height: 17px;
    color: var(--texte);
}

.clients--petits {
    justify-content: flex-start;
    margin-top: 22px;
}

/* ---------- page « fonctionnalités » ---------- */

.sommaire {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
}

.sommaire a {
    padding: 6px 13px;
    border: 1px solid var(--bord);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--texte-doux);
    font-size: 13.5px;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.sommaire a:hover {
    color: var(--texte);
    border-color: var(--bord-fort);
}

/* Un écran par fonction, et l'écran d'ouverture qui les annonce.

   « svh » et non « vh » : sur mobile, « vh » compte la barre d'adresse du
   navigateur comme si elle n'existait pas, et la section dépasse toujours
   d'une centaine de pixels.

   La marge haute et basse est proportionnelle à la fenêtre et non fixe : entre
   un 16/9 et l'écran d'un portable, ce sont deux à trois cents pixels de
   hauteur d'écart, et 80 px fixes centrent bien sur l'un et serrent sur
   l'autre. Le contenu, lui, reste centré par le « align-items ». */
.pleine,
.ouverture {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(56px, 9vh, 96px) 0;
}

.pleine {
    background: var(--fond);
    border-top: 1px solid var(--bord);
}

/* L'ouverture porte le halo aux trois couleurs du logo, et son titre est le
   plus grand de la page — c'est le seul écran qui n'a rien à démontrer. */
.ouverture {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(42% 46% at 26% 40%, rgba(40, 153, 245, 0.26), transparent 70%),
        radial-gradient(38% 42% at 74% 32%, rgba(107, 79, 187, 0.24), transparent 72%),
        radial-gradient(34% 38% at 50% 74%, rgba(0, 183, 195, 0.16), transparent 70%),
        var(--fond);
}

.ouverture h1 {
    max-width: none;
    font-size: clamp(46px, 8vw, 96px);
}

.ouverture .sommaire {
    justify-content: center;
    margin-top: 36px;
}

/* Une section sur deux change de fond, sinon rien ne dit qu'on a changé
   d'écran. On se sert de la classe qui alterne déjà plutôt que de
   « nth-child » : la bannière compte dans la fratrie, et le compte serait
   décalé d'un. */
.pleine--inversee {
    background: var(--fond-eleve);
}

/* Le défilement par écran, réservé aux pages qui le demandent.
   La classe est posée sur <html> parce que c'est LUI qui défile : mettre
   « scroll-snap-type » sur le <main> n'aurait aucun effet, il n'est pas le
   conteneur de défilement.

   « mandatory » et non « proximity » : c'est ce qui emmène à la section
   suivante au lieu de la laisser à mi-chemin. « scroll-snap-stop: always »
   interdit d'en sauter deux d'un seul geste — chaque écran se montre.

   Toutes les sections sont des points d'arrêt, pas seulement les pleines : avec
   un accrochage impératif, une section qui n'en serait pas un deviendrait
   pénible à lire, le navigateur cherchant toujours à s'en échapper. */
html.par-ecran {
    scroll-snap-type: y mandatory;
    /* Zéro, et c'est le point important. Le retrait de 84 px que la page
       s'impose pour ses ancres décale AUSSI le point d'accrochage : la section
       venait se poser 84 px plus bas, et il restait un bandeau de la
       précédente en haut de l'écran. Ici les sections arrivent à ras. */
    scroll-padding-top: 0;
}

.par-ecran .ouverture,
.par-ecran .pleine,
.par-ecran .finale {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Le pied en est un aussi, sinon on ne peut pas s'y arrêter : avec un
   accrochage impératif, le bas du document n'est une position tenable que s'il
   correspond à un point d'arrêt. Sans cette règle, descendre sur le pied
   ramenait aussitôt au début de la finale.

   « end » et non « start » : le pied fait quelques dizaines de pixels, jamais un
   écran — on ne peut pas amener son haut en haut de la fenêtre, alors qu'aligner
   son bas sur celui de la fenêtre est exactement la fin du document. */
.par-ecran .pied {
    scroll-snap-align: end;
}

.pleine__bande {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    align-items: center;
}

.pleine h2 {
    font-size: clamp(29px, 3.8vw, 46px);
    max-width: 16ch;
}

.pleine .ligne {
    margin-bottom: 0;
    font-size: clamp(16px, 1.6vw, 19px);
}

.pleine__voir {
    padding: 24px;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-lg);
    background:
        radial-gradient(60% 90% at 30% 10%, rgba(40, 153, 245, 0.1), transparent 70%),
        var(--fond-eleve);
}

.illu {
    display: block;
    width: 100%;
    height: auto;
}

/* Les seuls textes des schémas : un domaine, et le nom d'un jeu de droits. Ils
   prennent la police de la page plutôt qu'un « font-family » dans le SVG, pour
   qu'un changement de typographie n'oublie pas les dessins. */
.illu-mono {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
}

.illu-etiq {
    font-size: 11.5px;
    fill: var(--texte-doux);
}

/* Sans « fill-box », une pièce de schéma tourne et grandit autour de l'origine
   du dessin entier et non autour d'elle-même — une barre qui pousse partirait
   du coin haut gauche du cadre. */
.illu [data-illu] {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.illu [data-illu='barre'] {
    transform-origin: 50% 100%;
}

/* Le sujet d'une section, au-dessus de son accroche. */
.etiquette {
    margin: 0 0 10px;
    color: var(--azur);
    font-size: 12px;
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---------- le second produit ---------- */

/* La passerelle occupe un écran comme les autres, mais son contenu est un
   encadré et non un sujet à deux colonnes : même place dans le défilement,
   rang visiblement moindre. */
.pleine--encadree .bande {
    max-width: 860px;
}

.encadre {
    padding: 34px;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-lg);
    background:
        radial-gradient(70% 160% at 100% 0%, rgba(0, 183, 195, 0.09), transparent 70%),
        var(--fond-eleve);
}

.encadre h2 {
    font-size: clamp(22px, 2.4vw, 28px);
    max-width: 22ch;
}

/* Le titre est borné à 22ch : centrer le texte ne suffit pas, il faut aussi
   centrer sa boîte. */
.encadre.centre h2 {
    margin-left: auto;
    margin-right: auto;
}

.encadre .ligne {
    margin-bottom: 0;
}

/* Le rang de ce qui suit, dit en toutes lettres au-dessus du titre. */
.surtitre {
    margin: 0 0 12px;
    color: var(--texte-doux);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- documentation ---------- */

.doc {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    padding-top: 64px;
    padding-bottom: 40px;
}

.sommaire-lateral__titre {
    color: var(--texte-faible);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

.sommaire-lateral ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
    counter-reset: chapitre;
}

.sommaire-lateral a {
    display: block;
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--texte-doux);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sommaire-lateral a::before {
    counter-increment: chapitre;
    content: counter(chapitre) '. ';
    color: var(--texte-faible);
}

.sommaire-lateral a:hover {
    color: var(--texte);
    background: rgba(255, 255, 255, 0.05);
}

.chapitre {
    padding-bottom: 56px;
}

.chapitre h2 {
    font-size: clamp(23px, 2.6vw, 30px);
}

/* Les étapes sont un texte, pas une pile de cartes.
   Quarante encadrés à la file forment un mur qu'on ne lit plus : ici, un filet
   sépare, un numéro dans la marge repère, et rien n'entoure. C'est la
   composition d'un manuel, et elle se lit à la vitesse d'un manuel. */
.etapes {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    counter-reset: etape;
}

.etapes li {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 14px;
    padding: 22px 0;
    border-top: 1px solid var(--bord);
}

.etapes li::before {
    counter-increment: etape;
    content: counter(etape);
    grid-row: span 2;
    padding-top: 2px;
    color: var(--texte-faible);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.etapes h3 {
    margin: 0 0 5px;
}

.etapes p {
    margin: 0;
    max-width: 66ch;
    color: var(--texte-doux);
    font-size: 15px;
}

/* Un point des pages de droit tient parfois en plusieurs paragraphes, là où une
   étape de la documentation n'en a qu'un. Ils sont groupés dans un enfant
   unique pour que la grille de « .etapes li » garde ses deux lignes, et c'est
   ce groupe qui porte leur espacement. */
.etapes .paragraphes {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* ---------- formulaire de contact ---------- */

.formulaire__bande {
    display: grid;
    gap: 28px;
    padding-top: 56px;
    padding-bottom: 72px;
}

.formulaire {
    display: grid;
    gap: 20px;
}

.champ {
    display: grid;
    gap: 6px;
    margin: 0;
}

.champ label,
.champ legend {
    font-size: 14px;
    font-weight: 600;
}

.champ__aide {
    color: var(--texte-faible);
    font-size: 13px;
}

.champ input,
.champ textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    color: var(--texte);
    font: inherit;
    font-size: 15px;
}

.champ textarea {
    resize: vertical;
    line-height: 1.55;
}

.champ input:focus-visible,
.champ textarea:focus-visible {
    border-color: var(--azur);
}

/* Le choix de l'objet : deux étiquettes côte à côte, pas une liste déroulante.
   Il n'y en a que deux, et ce qu'on choisit ici change ce qu'on écrit dessous —
   le voir sans cliquer vaut mieux que de le déplier. */
.champ--objets {
    border: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
}

.champ--objets legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
}

.objet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 400;
    color: var(--texte-doux);
    cursor: pointer;
}

.objet input {
    accent-color: var(--azur);
}

/* Le leurre : hors de l'écran plutôt qu'en « display: none », que certains
   robots savent reconnaître. « aria-hidden » et « tabindex=-1 » sont posés sur
   le balisage — c'est là que se joue l'accessibilité, pas ici. */
.leurre {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.actions--formulaire {
    margin: 4px 0 0;
}

.formulaire__etat {
    margin: 0;
    min-height: 1.6em;
    font-size: 14px;
}

.formulaire__etat--attente {
    color: var(--texte-doux);
}

.formulaire__etat--succes {
    color: var(--turquoise);
}

.formulaire__etat--echec {
    color: #ff9d8a;
}

.formulaire__repli {
    margin: 0;
    color: var(--texte-faible);
    font-size: 14px;
}

/* L'encadré qui accompagne le formulaire : même carte que l'accueil, mais du
   texte suivi et non une accroche — d'où la taille rendue au texte courant. */
.encadre--aparte p {
    color: var(--texte-doux);
    font-size: 15px;
    max-width: 66ch;
}

.encadre--aparte h2 {
    margin-top: 0;
}

/* ---------- fin de page ---------- */

.finale {
    position: relative;
    padding: 104px 0;
    text-align: center;
    border-top: 1px solid var(--bord);
    background:
        radial-gradient(48% 120% at 50% 100%, rgba(40, 153, 245, 0.18), transparent 70%),
        var(--fond);
}

/* Sur une page qui défile par écran, le dernier en est un aussi : sans cela,
   l'appel à l'action arriverait à moitié coupé sous la section précédente. */
.par-ecran .finale {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
}

.par-ecran .finale .bande {
    margin: 0 auto;
}

.finale h2 {
    margin-left: auto;
    margin-right: auto;
}

.finale .actions {
    justify-content: center;
}

.pied {
    border-top: 1px solid var(--bord);
    background: var(--fond-eleve);
    padding: 36px 0;
    color: var(--texte-faible);
    font-size: 14px;
}

.pied__bande {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

.marque--pied {
    font-size: 15px;
}

.pied__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.pied__liens a {
    color: var(--texte-doux);
    text-decoration: none;
}

.pied__liens a:hover {
    color: var(--texte);
}

.pied__mention {
    margin: 0 0 0 auto;
}

/* ---------- paliers ---------- */

@media (min-width: 900px) {
    .pleine__bande {
        grid-template-columns: 1fr 1fr;
        gap: 72px;
    }

    /* Un écran sur deux met le schéma à gauche : sans cette alternance, six
       sections identiques redeviennent la liste qu'on voulait éviter. */
    .pleine--inversee .pleine__dire {
        order: 2;
    }
}

@media (min-width: 1000px) {
    .doc {
        grid-template-columns: 232px 1fr;
        gap: 56px;
    }

    /* « align-self: start » est ce qui fait tenir le collage : un élément de
       grille est étiré sur toute la hauteur de sa ligne par défaut, et une
       boîte aussi haute que son conteneur n'a nulle part où coller — le
       sommaire filait donc vers le haut dès qu'on descendait. Le repli en
       hauteur et le défilement sont là pour le jour où il y aura plus de
       chapitres que d'écran. */
    .sommaire-lateral {
        position: sticky;
        top: calc(var(--entete) + 24px);
        align-self: start;
        max-height: calc(100vh - var(--entete) - 48px);
        overflow-y: auto;
    }
}

/* Sous ce seuil, la navigation de l'en-tête encombre plus qu'elle ne sert : le
   pied porte les mêmes liens, et la page entière tient dans un défilement. */
@media (max-width: 719px) {
    .nav {
        display: none;
    }

    .marque {
        margin-right: auto;
    }

    .banniere {
        padding-top: 64px;
    }

    .finale {
        padding: 64px 0;
    }

    .encadre {
        padding: 26px 22px;
    }

    .pied__mention {
        margin-left: 0;
    }
}

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

    * {
        transition: none !important;
    }
}